Improve Your JavaScript Learning with Fun Experiments

This article was peer reviewed by Mark Brown. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Learning never stops — especially in web development. Our industry is constantly renewing and improving itself, and so should we! Unfortunately, keeping up can be exhausting, but it doesn’t have to be. In this article I will show you how small experiments can be a fun and effective way to learn new things, and to ensure that learning and keeping up-to-date stays fun.

Keeping Experiments Fun

Do you do side projects? If you do, I’m sure you did a project once that was a lot of fun at first, but quickly turned into a tangled mess. Getting bogged down in something isn’t a lot of fun and can really damage motivation for both side projects, as well as your job. Major causes of this are often scope creep or pressure, while you should be relaxing in your spare time. By enforcing some rules, we can make sure we don’t bump into unpleasant surprises:

1. Prepare your work. Make sure you know exactly how big an experiment is and what it encompasses. If it is too much, split it up into manageable chunks that each have a beginning and end, or pull the plug.
2. Schedule tasks. Don’t stay up late every night. Just schedule an hour or two, once or twice a week.
3. No deadlines. Everyone, you included, needs to relax. Setting targets is okay, and missing them should be too.
4. Allow yourself some fun time. Although you shouldn’t procrastinate, life is more than a bunch of checks on a to-do list. Take time to enjoy the fruits of your labors.

Having small experiments doesn’t mean they can’t be part of something bigger. Take a data visualization project, for example. It can take up some time, but is easy to split up into smaller tasks:

• Setup a build workflow
• Find and obtain interesting data (here’s a cool list of APIs to get you inspired)
• Fetch and process data with Node.js, utilizing ES2015 features
• Compare and choose a technology (canvas, WebGL, DOM/SVG) or library (d3.js, p5.js, THREE.js) to visualize the data
• Visualize the data using your tool of choice

I use a Trello board to keep track of all my experiments. It’s where I list and plan them, and add relevant information until the time comes to start an experiment. For larger projects, I tend to create a new board specifically for that project and add cards for each task. Any alternative will suffice. Documenting things keeps the noise out of my head!

Reviewing the Experiment

Besides learning by actually doing new stuff, experiments are also a great opportunity to improve yourself. Look back at your experiment and ask yourself the following questions:

1. Could problems during execution have been avoided with better preparation? If yes, how?
2. What was the quality of the executed work, and what can I do to improve?
3. Could I have prepared my experiment more effectively?

Reviewing and improving what we do gives us experience — something which is very valuable in our industry. Communication and documenting is, too. Many experiment reviews make great blog posts.

Although not very JavaScript related, one particularly fun experiment of mine was creating Vector Graphics in Sass, where I converted a map of coordinates into a path and rasterized it into a single-pixel box-shadow. Not only did I learn Sass functionality I wasn’t too familiar with before, I also had to research some algorithms.

Finding Inspiration

If you’re not sure what to learn next, it’s always good to have a few resources at hand for inspiration.

If you enjoy visuals and art, CodePen is a great place to start. The picks are often full of amazing pens worth pulling apart to see how they work. If you’re feeling more adventurous, try Dribbble or Behance.

SitePoint is powered by many authors from diverse backgrounds. Because of that, the JavaScript Channel is full of all kinds of JavaScript goodness.

Runtime Environments

You probably already knew that JavaScript works in browsers, but did you know you can run JavaScript outside of browsers too?

• Node.js is by far the most popular non-browser JavaScript runtime. With it, you can write scripts, command-line interface or desktop applications and more. It runs on Windows, OS X and Linux.
• Electron allows you to build cross-platform desktop applications using good old HTML, CSS and JavaScript.
• Cordova allows you to build mobile apps with HTML, CSS and JavaScript.
• React Native allows you to build mobile apps using the React framework.

Browser APIs

Over the past few years, many new APIs have been introduced to the browser allowing you to do all sorts of fun things.

• Service Worker API is a large API that allows us to do various things, such as providing offline support.
• WebRTC is an API that allows us to create real-time connections with another computer and pass through audio and video data.

Some APIs allows us to use device hardware, to do things like reading out sensors or making the device do things (such as vibrate).

• The Ambient Light Sensor provides information about how bright the ambient light is, which we can use to adapt our site or app.
• Battery Status is rather self-explanatory; we can request the battery status. Heavier applications can use this to enable a power-saving mode.
• Geolocation grants us information about the user’s location.
• We can utilize Network Information to serve smaller files to the client.
• Notifications are quite useful for many applications, such as chat apps.
• Are you building a game which uses the mouse for input? Pointer Lock is your friend.
• Proximity lets you find out how close the user is to the device. Perhaps this could be used to detect hugs?
• Device Orientation allows us to detect when orientation changes.
• Vibration allows us to vibrate a device, which is great for games.

Libraries and Frameworks

The purpose of most libraries to get things done easily, so it never hurts to have some experience using them. The more popular libraries and frameworks (such as Angular and React) can even be required for a job. An experiment or two can also be a great way to prepare yourself for an interview.

Know that libraries and frameworks only last so long. Although they are helpful, you should be able to understand the problems they solve and be able to solve those problems without them.

Architecture

• Angular is an MVC framework still used by many teams.
• React is a library used to render views.
• Polymer is a library to create Web Components.
• Lodash.js, Underscore.js and Ramda.js are all functional programming libraries. Some teams love to use them, but many don’t. Either way, a good understanding of functional programming is a much appreciated skill.

Visual

• D3.js is a graphics and DOM manipulation library that works well if you want to render graphics with SVG or HTML.
• p5.js is a library inspired by Processing (a flexible software sketchbook and a language for “>learning how to code within the context of the visual arts). It has a rich array of functions to draw shapes and do calculations.
• Three.js is a high-level 3D API to abstract away the difficult bits of WebGL.

The Physical World

Personally, I get really excited when I can write software to do something in the physical world. If you do too, consider purchasing a set of any the following:

• Raspberry Pi is a credit card-sized single-board computer, ideal for teaching or learning.
• Arduino is similar to the Raspberry Pi, but is more focused on the electronics side of things.
• LEGO® MINDSTORMS® is a mini-computer that can control LEGO hardware. What’s not to love?
• Johhny-Five is a JavaScript framework for robotics and Internet of Things and can be installed on Arduino or similar devices.

All of the above can be programmed with, or is capable of running JavaScript.

Conclusion

Small experiments are a great hands-on approach to learn new things. Another benefit is that they can help you improve the way you work, something that is most valuable in our industry. By enforcing a few rules we can keep experiments fun, motivating yourself to learn more and become better.

For those of you stuck in a rut, I hope this article has provided you with some motivation to start a new, fun experiment. For those of you unsure what to tackle next, I hope this article has provided you with some inspiration. Or maybe you have some great ideas for experiments? Or maybe I missed something out? Either way, I’d really love to hear from you in the comments below.

Frequently Asked Questions about JavaScript Learning Experiments