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')) {
this.classList.toggle('open-active');
}
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.
include()
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.