A 14-post collection

Javascrip30 - Day 12 - Key Sequence Detector

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 »

Javascript30 - Day 11 - Custom Video Player 📺

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 »

Javascript30 - Day 10 - Hold Shift to Check Multiple Checkboxes

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 »

Javascript 30 - Day 9 - Dev Tools Domination

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 »

Javascript30 - Day 8 - Drawing on HTML5 Canvas

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 »

Javascript30 - Day 7 - Array Cardio Day 2 🏃🏃‍♀️

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 »

Javascript30 - Day 6 - Typeahead

Nice refresher on a new ES6 feature fetch. This lesson packs a bunch of JS into a short lesson - fetch, Promises, map, backticks / multi-line strings / template literals / string interpolation, regular expressions - including building RegExp with variables. Really put together well. Makes DIY typeahead feel very accessible and there's »

Javascript30 - Day 5 - Flex Panel Gallery

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, »

Javascript30 - Day 4 - Array Cardio Pt1

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 »

Javascript30 - Day 3 - CSS Variables

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 »

Javascript30 - Day 2 - Clock

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 »