JavaScript30 Challenge

Posted on 30 Dec 2016

I have a really basic problem with JavaScript: I haven’t written enough of it or written it for long enough to really grok the context for the language’s development. I’m still a noob in the JS world. I’ve been writing JS on-and-off for maybe 3 years, but it’s only in the last year it’s become a focus for me.

With that in mind, I decided to take Wes Bos’ #JavaScript30 coding challenge. It’s a bit more like a course, actually. It’s like working through 30 days of exercises with the solutions explained along the way. I’m documenting my learnings so I get more out of it while also sharing with others. With 30 days of coding, I’ll make 5 posts with 6 projects in each one, and a new post will be up every week.

Let’s get to work!


1 - Keyboard Drumkit

This project maps the keys A through L on the keyboard to a corresponding drum sound effect, and shows a visual key as feedback for the user. When a key is tapped, a short transition effect gets played on the visual representation of that key.

See the Pen Keyboard Drumkit by Rowan Weismiller (@rowbot_weisguy) on CodePen.

Here’s what I enjoyed / learned from the project:

  1. Use forEach to iterate through a NodeList, as was done with keys here
  2. Prefer named functions for use as event callbacks
  3. For data attributes, keep it simple! I don’t always need to get the element and search its dataset to take advantage of the selectors.

A nice easy start :)


2 - CSS + JS Clock

This project makes a clock using JavaScript’s built-in Date function. It’s a bit simpler than the first project.

See the Pen CSS + JS Clock by Rowan Weismiller (@rowbot_weisguy) on CodePen.

It wasn’t part of the instructions, but I called setDate() once at the end just to make sure the clock is correct on page load, rather than waiting a full 1000ms for setInterval to fire.

Here’s what I enjoyed / learned from the project:

  1. Using CSS transform’s rotate() property can exceed 360deg and it will still look normal as it wraps back around (i.e. 365deg looks the same as 5deg). Like, duh, but I never tried.

3 - Playing with CSS Variables and JS

This project controls an image’s styling with some basic inputs (sliders, color picker) in order to demonstrate the power of CSS variables.

See the Pen Playing with CSS Variables and JS by Rowan Weismiller (@rowbot_weisguy) on CodePen.

I enjoyed this one because Wes took a moment to talk about a few small details.

Here’s what I enjoyed / learned from the project:

  1. Wes talked a bit about Node Lists, indirectly addressing the first comment I made on Project 1. He explained that there is very limited functionality on the NodeList’s prototype, meaning we don’t get cool functions like map, reduce, or filter. When we need those kinds of functions, we can convert a NodeList into an Array. I’ve done this before, but I wasn’t sure when or not to do it.

  2. This exercise actually use the dataset property of an element to access the values of the data attributes on it. The difference between this one and the first exercise’s use of data attributes, is that accessing dataset isn’t picky about whether or not a certain data attribute is present, whereas the selector predicts an element will exist with a certain attribute value.

  3. CSS variables are accessible via JavaScript on any DOM node using style’s setProperty method. In the following function example, we are listening to updates on input elements, and then re-assigning a CSS variable on the document root with the same name as the input, and using the input’s value as the CSS variable’s value.

function handleUpdate(e) {
  const suffix = this.dataset.sizing || '';
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

Great stuff! I understand better now how CSS variables are better than the SASS equivalent.


4 - Array Cardio

This was a pure JS exercise in array manipulation using higher order functions.

I loved it! It was quite fun. This is stuff I’m already getting a bit familiar with in my work at Bench and often have fun solving.

See the Pen Array Cardio by Rowan Weismiller (@rowbot_weisguy) on CodePen.

Here’s what I enjoyed / learned from the project:

  1. There’s a console.table() method that’s handy for printing out arrays of objects, which is pretty common for me.
  2. Array.prototype.sort() will automatically sort descending (for numberic arrays) or alphabetically (for string arrays) when called without passing any arguments.

One note, looking at this code example:

const streetsWithDe = links
                        .map(link => link.textContent)
                        .filter(text => text.includes('de'));

That includes() function is available to both Array.prototype and String.prototype, but it’s a tad confusing that the String.prototype implementation is an ES6 standard, while the Array.prototype implementation is an ES7 standard.


5 - Flex Panels

This was a mostly CSS driven exercise with a little bit of JS for class toggles.

See the Pen Flex Panels by Rowan Weismiller (@rowbot_weisguy) on CodePen.

Here’s what I enjoyed / learned from the project:

  1. When writing something like flex: 5, it means that flex-item will take up 5x the remaining flexible space compared to its sibling flex-items.
  2. Flexbox rules!

6 - Ajax Type Ahead

This project simulated the need to get results back from a search field for US cities and states.

See the Pen AJAX Type Ahead by Rowan Weismiller (@rowbot_weisguy) on CodePen.

Here’s what I enjoyed / learned from the project:

  1. Wes made a point about getting your data ready first before you start worrying about how you’ll render it. It reminded me of the kitchen principle to have everything mise en place.
  2. How to use the RegExp constructor in JS to dynamically create a regex with a variable term.
  3. The UI pattern of highlighting the search term’s appearance within the results.

That’s part one! If you like what I’m sharing here, then I highly encourage you to go to the #JavaScript30 site and sign up to get this sent to you. It’s a fun way to flex your web development muscle. Starting a practice of coding every day is something I’m excited about.

If you do start, let me know! I want to cheer you on.

And if you want to keep reading, here’s part 2.

Rowan Weismiller

Written on 30 Dec 2016 by:

Rowan Weismiller

Designer, developer & nacho critic