Improve Your JavaScript Learning with Fun Experiments

Share this article

A boy doing experiments in the laboratory. Explosion in the laboratory.

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.

A boy doing experiments in the laboratory. Explosion in the laboratory.

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

What are some practical projects I can do to improve my JavaScript skills?

There are numerous practical projects you can undertake to improve your JavaScript skills. For instance, you can create a simple calculator, a digital clock, or a weather application. These projects will help you understand how JavaScript interacts with HTML and CSS to create functional web applications. You can also try creating a to-do list application, which will help you understand how to manipulate the Document Object Model (DOM) using JavaScript.

How can I use JavaScript in Google Experiments?

Google Experiments is a platform that allows you to test and showcase your JavaScript skills. You can create interactive experiments using JavaScript and share them with the world. To use JavaScript in Google Experiments, you need to have a basic understanding of how JavaScript works and how to use it to manipulate web elements.

What is the role of JavaScript in creating interactive web pages?

JavaScript plays a crucial role in creating interactive web pages. It allows you to manipulate the elements on a web page in response to user actions. For instance, you can use JavaScript to change the content of a web page when a user clicks a button, or to animate elements on a web page.

How can I use JavaScript to create animations?

JavaScript provides several methods for creating animations on a web page. You can use the requestAnimationFrame method to create smooth animations. This method tells the browser to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

What is the importance of JavaScript in web development?

JavaScript is a fundamental part of web development. It allows you to create interactive and dynamic web pages by manipulating the elements on a web page. Without JavaScript, web pages would be static and unresponsive to user actions.

How can I improve my JavaScript coding skills?

The best way to improve your JavaScript coding skills is through practice. You can undertake various projects, such as creating a calculator or a to-do list application, to practice your skills. You can also participate in coding challenges on platforms like CodePen to test your skills.

What are some resources for learning JavaScript?

There are numerous resources available for learning JavaScript. Websites like Codecademy, freeCodeCamp, and Mozilla Developer Network offer free tutorials and guides on JavaScript. You can also find numerous video tutorials on YouTube.

How can I debug my JavaScript code?

You can use the console in your browser’s developer tools to debug your JavaScript code. The console allows you to log messages, display errors, and run JavaScript code in real-time.

What is the role of JavaScript in front-end development?

JavaScript is a crucial part of front-end development. It allows you to create interactive and dynamic web pages, validate user input, and communicate with web servers.

How can I use JavaScript to interact with web servers?

You can use JavaScript to send requests to a web server and receive responses. This is done using the fetch API or the XMLHttpRequest object. This allows you to update parts of a web page without reloading the entire page.

Tim SeverienTim Severien
View Author

Tim Severien is an enthusiastic front-end developer from the Netherlands, passionate about JavaScript and Sass. When not writing code, he write articles for SitePoint or for Tim’s blog.

jameshJavascript APIlearn javascriptResources
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week