30 things I learned from Javascript 30
Wes Bos has made an awesome course called Javascript 30 that he gives away for free. If you have the time or the inclination to complete the course, do it! This post serves as some notes for myself and I hope that anyone else reading can gain some insights about Javascript and CSS programming. Here’s the tl;dr:
All code for the course and referenced in this post is available fo’ free. It’s on GitHub.
Day 1
To start the course off we built a drumkit so that when you press a button the browser makes a sound. It’s a very neat use of the <audio> HTML5 element. My biggest takeaway for the first day was learning the CSS transform property (transform — CSS | MDN). In the code we added a listener for every keydown event and passed in a function that plays the appropriate noise associated with that key. We first went through all of the elements that have a “key” class on them and attached an event listener for the “transitionend” event (transitionend — Event reference | MDN). The transitionend fires when a CSS transition ends, go figure! When the user clicks a button we add a “playing” class that begins the transform. Once the “transitionend” fires for an element we remove the “playing” class. The result is that there’s a real nice yellow glow around the button when we press the corresponding key!
