JavaScript 30 — Day 1

Wes Bos’ free 30 Day Vanilla JS Challenge

I have been taking part in the Lighthouse Labs 21 Day Coding Challenge mainly for the challenge of keeping on a routine with coding but the first few days of challenges rather underwhelming. It looks to have been designed for true beginners.

I wanted a little more of a challenge so I decided to take on the Javascript 30 –30 Day Vanilla JS Coding Challenge by Wes Bos. I’ve heard a ton of great things about Wes but hadn’t checked out his courses until now.

I chose this challenge in particular because I want to really nail down a lot of the core JS concepts independent of framework or libraries. Certainly those tools are useful and can be easier in most cases but often don’t teach you how things work, they just hand it to you and tell you it does work.

In the intro, Wes outlines a few different ways to learn with the challenges and I opted to pause after the demo of the app/feature functionality and tried to recreate it from there.

Once done (or at least functionally working) I’ll watch the rest of the video to see what other tricks, tips, and optimizations I can learn from it.

Challenge # 1 — JavaScript Drum Kit

A fun little drum kit app. The starter files provide all the CSS and HTML Markup for you so you only have to focus on the JavaScript, rightfully so.

It was a nice introduction to <audio> elements I had never dealt with before. Certainly straightforward enough to work with but a nice little surprise of something I could learn.

I am not afraid to admit what knowledge I lacked and what I learned because it means that I’m still growing. I am never going to know everything but progress is certainly key.

What I Learned Today

• keydown and keypress events have different keyCodes in JavaScript
• That the ‘transitionend’ event exists and is a much more elegant solution than using a setTimeout in this case
• How to use and play HTML audio elements
• HTML custom data attributes

Neat Trick

Instead of encapsulating the pertinent code in a conditional (if/else) instead he uses the opposite case and a return to break out of the function:

Instead of:

if (isTrue) {
  someCode;
}

He would use:

if (!isTrue) return;
someCode;

Not sure if that is more efficient but a neat little trick.

So that is a recap on Day 1 of this Challenge. I am not sure if I will write 30 posts, one everyday but that is what I’m aiming for.

They all won’t be nearly as verbose but I was in a writing mood today.