Spencer Norman's Picture

Spencer Norman

29 posts

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 http://caniuse.com/#feat= »

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 »

Javascript30 - Day 1 - Drum Machine

The challenge today was to create a javascript drum machine that takes keyboard input and plays the correct sound and animations when certain keys are pressed. This was a quick fun project where I got to play with the <audio> element and the HTMLMediaElement controls. I have not »

Javascript30 - publishing to Github Pages

I've embarked on my JavaScript30 Challenge and wanted a place to publish everything. I've been meaning to play with github pages as well so this seemed to be a perfect time to do both. I forked Wes Bos' JavaScript30 Repo and went into my new repo's settings and set my »