javascript30

A 14-post collection

Nice short thinking exercise. I hadn't implemented this before, but was pretty straightforward. I setup an array with the code and a position marker. Catch all keyboard entries, when the user enters the correct key for the next step of the code, move the marker, otherwise reset the marker to »

Good project to learn about the video side of HTMLMediaElement. I found it pretty straightforward to implement all of the different controls, but I can imagine if you're newer to JS it might be a little more daunting. MDN is pretty valuable for a project like this and having that »

The challenge is: given a list of checkboxes, checking one checkbox and then holding shift and selecting another checkbox should also select all checkboxes in between. I ended up using a depth first search to find all of the checkboxes between the just checked and previously checked checkboxes and then »

Some nice tips for using chrome dev tools better. Using Break On in Chrome to break any time an attribute or subtree is modified or a node is removed is super useful and I have probably glossed over that feature a thousand times without experimenting. The rest of this lesson »

Interesting primer on how the HTML5 Canvas works and a good intro to the building blocks of Canvas and it's Context. This is a quick tutorial where you get to build "Paint" style features and a good jumping off point for building more complicated painting tools based HTML5 »

Really like this style of lesson. It feels like there could be a whole "cardio" spinoff series. Short and sweet with a lot of value. Looks at some, every, find, and findIndex array methods as well as the ... "spread" operator and ES6 style ways to remove »

Great intro to CSS Flexbox. I learned a few new tricks, such as using a nested flexbox to center content vertically. Pretty cool. A caution about listening for transitionend and toggling a class when it has ended. If the transition is interrupted or reversed such as with a double click, »

Quick refresher on Array prototype methods. If you've used ES6 Arrow functions and Array prototype map, reduce, filter, and sort then this will be a pretty quick lesson. This would be a great lesson for people new to ES6, javascript or beginner programmers with a few weeks of experience under »

Day 3 was a nice intro to CSS variables. These will be super powerful once they are more widely adopted. Unfortunately they don't work in IE or Edge currently so we've got a bit more time until we can start using them in production. According to http://caniuse.com/#feat= »

Quick project. Hadn't ever built an analog clock in JS before, now I have. 🕒 ✔ Hadn't used transform-origin before, so that was nice to learn about. Will come in handy at some point I'm sure. CSS Transforms are super easy and seem pretty powerful. It's nice to be using them during »