Learning JavaScript by building things

Permalink · By · ·

A few days ago I found the 30 Day Vanilla JS Coding Challenge by Wes Bos. Until now, I’ve been somewhat proficient writing jQuery code for small interaction things in my design work, but I’ve been trying to get rid of any libraries and start writing vanilla JavaScript (or, you know, as the elders of the internet call it, JavaScript).

Right as you get into the JavaScript30 website, there’s this text that felt to be speaking directly to me:

So, you’ve done a few courses and read a few books but still don’t feel great about your relationship with JavaScript. How do you get better? Build things. Lots of things. Build 1,000 things. Keep it up and don’t stop. Seriously.

I’m currently at ~30% of the lessons and not only I’ve learned some cool stuff already (like sweet sweet ES6 Template Literals), but I’m diving into things that were too scary before. And of course, I started staying late and building things, and I want to show you two of them right now.

1. Paint

In one of the lessons I built a script that allowed the user to draw in a canvas element. Once I got the basics I wanted to take it a little further and added a color pallete, brush sizes, and saving capabilities. Now I can use it at work to sketch quick things.

Open source repository at github.com/axelvaldez/paint.

2. Electric Sheep

I’ve always had something about computer-generated images. I never took a stab at it before because I’m not very good at math, but by just playing I discovered that with simple calculations I can generate pretty cool images. Electric Sheep collects what I’ve done so far. I plan to keep going, who knows, maybe that will teach me a little bit of math.

Open source repository at github.com/axelvaldez/electric-sheep.

You can see the rest of my open source code projects at github.com/axelvaldez. Thanks for reading. If you like this kind of things, find me on Twitter and let’s talk!