JavaScript30 - Day 5

By Camilla Krag Jensen naxoc |

This lesson from #javascript30 is showcasing some neat stuff you can do in CSS with Flexbox. While I have used that a couple of times, I feel a little bit about flexbox as I do about JS. I'm not going to get better at it unless I practice. I noticed that the Wes Bos has a 20 video course called What The Flexbox?. I'll definitely check that out. I really like this format.

Transitions and transforms

I love how I am learning how these two go together to make cool effects. Again we use the event transitionend to animate stuff a little extra. If you console.log the event.propertyName it will tell you what is transitioning. Because Safari uses 'flex-grow' instead of 'flex' like all the other browsers we just look for the string 'flex' in the propertyName.

if (e.propertyName.includes('flex')) {

The transition uses cubic-bezier(). I am totally fine with not understanding the math of it, and I found this cool tool to help visualize what the arguments to it do.


I really like the includes() method. It is simpler than for instance PHP's strpos(), because all it does is tell you if a substring is in a string and not where. Keep in mind that include() is case sensitive.

There is also an include() for arrays — same concept and nice and simple.