#JavaScript30 – Day 01

Earlier last week, I saw a tweet that linked to a course called #JavaScript30, a 30 day JavaScript coding challenge. You build 30 things in 30 days with 30 tutorials using Vanilla JavaScript.*

When I registered, I fully expected the first project to be full of JavaScript 101 things like defining what a variable is. This isn’t a JavaScript 101 course though. It’s targeted at people who are already familiar with JavaScript and want to become more comfortable with Vanilla JS and working with the DOM. Has my name written all over it.

I immediately loved that I was hearing new terms and seeing them in action.




As far as I had always known, you use either single quotes or double quotes for strings. So I was a little bit confused when Wes switched out his single quotes for backticks. And I’ve used a backtick so little in life that I couldn’t remember where it was on my keyboard right away (if you don’t know/remember either, it’s the same button as the tilde up on the top left).

Using backticks is a new ES6 thing to make working with strings easier. When you wrap your text in backticks instead of quotes:

    1. They can be multi-line!
    2. You can interpolate variables in them.
      console.log("I'm " + age + " years old!"); can be written instead as console.log(`I'm ${age} years old!`);

data attributes

The data-* attribute is used to add custom, private data to your HTML. The asterik(*) can be replaced by any term and the value will be a string. Like this: <element data-*="somevalue">. 

The custom data attribute can then be used in the page’s JavaScript to create a more dynamic user experience without using something like AJAX. Data attributes should only be used when no suitable HTML5 element or attribute exists.

const versus var

If you’ve ever even touched JavaScript, you probably know that you use var to crate a new variable. Well, ES6 introduced 2 more ways of of creating variables in JavaScript: let and const.

Short for constant, const variables cannot be reassigned. If you declare const x = 100 , you can’t reassign x to anything else anywhere else in the DOM. It should be used if you absolutely don’t need to reassign it anywhere else in your code. Otherwise, you’ll want to use let.

Letting go of using var will take some time(or maybe none at all for some people), but it’s cool to know that there are other options now.


If you’re like me and like to use jQuery, you probably utilize the addClass() method when you want to assign a new class to an element. With vanilla JS, you can use classList.add() instead. Both functions append a new class name to the list of classes the element already has.

setTimeout versus ‘transitionend’ event

Wes predicted that the solution I probably came up with as a viewer was to use setTimeout. Then he showed us a better way to do it. With setTimeout, the duration has to be set in both the CSS and the JS files. This makes both of them less maintainable and prone to errors. Imagine: you’re working on a project with other people and someone decides to change the animation duration in the CSS but doens’t change it in the JS code. Chaos.

There’s an event called transitionend which, as you can probably tell, is fired at the end of a CSS transition. Not only does it keep errors down, but it’s less complicated code. Win.



By the end of the video, not only did I learn a few new things, but I got to build a pretty cool JavaScript Drum Kit. I also built a landing pagefor my project, where you’ll be able to see links to all 30 projects as I add them.

*Vanilla JS - Plain old JavaScript without the use of frameworks or libraries like jQuery.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s