JavaScript30 Episodes 3 & 4: CSS vars & Array Cardio Day 1

This post is about the next two classes in the course. In case you missed it, check out my post on class #1 and class #2.

CSS vars

What I learned:

  • CSS vars, duh!
  • .controls CSS class to select controls!
  • nasty way to set the var’s suffix. Manually add adata- attribute to the input element just to read it back later and use it for the CSS var. Ugh!

Array Cardio Day 1

Learned about:

  • filter/sort/map/reduce yay! Reduce is quite powerful.
  • de-structuring an array. Cool trick to easily get elements out of an array into separate variables.

OK, slacked a bit before taking these two classes. Life happens in between 🙂

JavaScript30 episode2: CSS+JS Clock

OK, OK, episode2… Go!

This time the goal is to make an analog clock tick.


Again, most of the HTML+CSS is there provided by Wes and I only need to add the “ticking” JS code. The “trick” is to keep applying a CSS transformation to the hands by setting the rotation angle.

What I learned in this course:

  • CSS transform-origin to position the point where the CSS transformation will apply
  • CSS transition-timing-function for how the transition should play out
  • The cubic bezier editor in Chrome’s developer tools! Look at that!
  • JS’s ​​​​​​​ is not a function so, no .transform(rotate(...)). I intuitively tried to use it as a function, not sure why.
  • and oh, yeah, forgot to mention the backticks in episode 1. Cool way to embed variables in strings and have them be expanded!

K, this was a quick one but fun anyway. Stay tuned!

JavaScript30 Episode1: Drum Kit

A few designer friends over at Automattic gathered up to take the JavaScript30 class by Wes Bos (check it out, it’s free!). Thought I should join them. I’ve been itching to take on some modern JS class but never gathered the will/patience/time to do it. This one seems like a sweet deal so, I signed up!

To make the commitment a little more, well, official, I decided to document my findings throughout the courses so, here I am!

First course was about wiring up a Drum Kit in JS. Starter files had the HTML+CSS ready and I just needed to add the JS6 code. Every time a key is hit, the drum kit will play the corresponding sound (say clap, hihat, kick, etc) while doing a small animation of the key on-screen to show which one got hit. Neat!


So, here’s what I learned from the first course called Drum Kit:

  • data- attributes
  • attribute selectors
  • classList add/remove/toggle!
  • arrow function (=>)
  • listening for the transitionend event

It’s been some time since I tinkered with JavaScript and it’s clear that the language has really evolved with JS6. Makes it taking the next courses even more interesting. I’ll let you know!