Here are few things I learnt after completing #javascript30

I did #javascript30 challenge on 18th april but immediately I felt it's for beginners as browsing through the challenge I found working console object, trying .map, .reduce etc functional programming components. I thought its not worth it but then after 10 days I saw a twitter post about #javscript30. The person did a challenge in which he has to manipulate pixels from webcam. It immediately caught my interest and when I re checked challenge list I found Unreal web cam fun listed. Then I decided lets do this. So as mid level css/javascript developer here are few things I learnt -

• Flex box can be nested. I never got to use flex box enough to understand it properly. In our day to day job or project we're most likey use some sort of library which already has some predefined class then we tweak it to make it look our own. During the challenge I used nothing but flex box to position and believe me it made positioning like peace of cake.
• You never know enough browser API. I thought I knew most of new API which recently has been released. But I failed to realize that it can be pain to use it on desktop chrome and android/iOS chrome/safari. When working on hobby project or trying to create something in order to learn some concept we tend to just get things done whithin the scope of what we're are learning. But what if you are learning geolocation API and while making a compass you neglected possiblity that it may break on phones. And in my case it did. While searching for a solution I got to know so many new API which is only available for Android/iOS chrome.

• Animate but simple. I knew new CSS3 animations and all but never got to use it extensively to understand common problems when applying it. While making a navigation in the challenge I spent hours figuring out why my animation is'nt working. And after few cups of coffee I figured it out why. We can not animate display or width. So I applied a hack. I moved element away from view port and brought it back. Tip: tranform: translateX(-500px); can be life saviour.

• Javscript Coordinates are fun again. I always avoided using coordinates in javascript. All the clientX, offsetWidth, pageX are confusing. But in the challenge there was a situation where I had to calculate the coordinate of some image elements to figure out when they enter and leave the view port so I can add enter and leave animation. It was difficult as hell but sooner it was peace of cake. Thanks to http://javascript.info/coordinates. So I created a cheatsheet for these confusing coordinates properties -
  

These are few top things I thought was worth sharing. If you're like me then you must give a try to #javascript30 by @wesbos . He's a great teacher.

P.S- My first blog. Ignore the mistakes 😎. Suggestions will be appreciated. Thanks