The opportunity to Get Noticed!

The world is full of everything. Most of this everything is average. You are a part of it. And I’m too. Many say that we live in a very crowded world with way too much information reaching our minds each day.

Apart of that, there will almost always be somebody who works harder than you. Who is smarter than you. Who tries harder. Who persist more.

This is a little part of the reason why getting noticed is hard.

Yet, from time to time there are opportunities that help you to get noticed. And one of them is now.

Get Noticed! competition

This is the competition created by Maciej Aniserowicz from the devstyle blog. It’s 3rd edition now.

Get Noticed targets programmers and wanna-be programmers. Its goal is to challenge people to get out there and motivate to blog and code. It also gives an opportunity to, as the name says, ‘get noticed’.

The rules are clear and simple. For at least 10 weeks in a row you:

  • code some open source project
  • blog at least 2 times a week

It’s not easy. But it’s worth it. Why?

Why I’m a part of it?

I want to improve. Whatever I do, I strive to do it well. Because I happen to be a programmer, that’s what I want to growth at.

I’m all about self-development. This is why I build the app that helps you and me never forget things we once acquired (more on this later. Stay tuned!).

I believe in sharing knowledge. As a programmer, I benefit from the community each day. That’s awesome!

Did you know, there is so many free information on the web, you can become a programmer without spending a dime on learning resources?

By developing this project and writing articles around it, I want to give back to the community. One thing, the community deserves it. Another thing: practicing gratitude makes you a happier person.

Last but not least, I believe doing some open-source and blogging is one of the best ways to document, demonstrate and improve skills. I’m sure this will help me to build my career in the long run.

What’s in it for you?

If you like the idea behind this competition, jump in! The deadline is tomorrow.

Next article, I’m going to tell you a story about how you forget things.

CSS-only hamburger menu

CSS-only solutions were always tempting for me. You can do pretty anything with JavaScript, can’t you? The question is: ‘Can you do it without JS?’. Looking for CSS-only solutions was always something that pushed my CSS skills further. So can be in your case.

Today we will create CSS-only hamburger menu from scratch. This is what we want to achieve:

css-only-hamburger-menu

An inspiration for this article was this awesome tutorial from SitePoint. It has some drawbacks, though:

  • As Dan Winer mentioned in comments, it’s performance is poor because it animates the entire page using left position property. In 2012 Paul Irish made an investigation and found out that animating with translate is more performant and prettier than TRBL (top/right/bottom/left). Some people complain that CSS translate makes fonts blurry. No worries, I found a solution for this also.
  • It is broken when menu height is greater than screen height.

My solution will address these issues while giving you insight how it works. Let’s make our hands dirty!

Start with some HTML

So here we have basically 3 elements: the menu itself, label and magic checkbox which will make our menu working. Let’s hide the menu content first.

Add a little bit of CSS

It’s important that we use transform translate here, not left property. This will increase the performance of our menu. The next thing we want to achieve is hiding the checkbox. The following code should do the trick:

What happens now is whenever you click on ‘menu’ text, the checkbox is toggled. Now we will connect the state of checkbox with menu’s position like this:

Hurra! Our menu appears and vanishes. Now let’s animate it and prepare for the situation when screen height is smaller than the menu’s.

With the code above we have the following effect:

See the Pen CSS only hamburger menu without styling by Maciej (@maciejmyslinski) on CodePen.

Polishing things up

After adding some ‘lorem ipsum’ content to simulate real web page and some additional styling to make things look pretty, we come to this final effect:

See the Pen CSS only hamburger menu by Maciej (@maciejmyslinski) on CodePen.

Summary

That’s it! I hope it was helpful. And if you are like me and you are crazy about CSS-only solutions, check out this awesome project created by Una. Happy coding!

Posted in css