Category: Raw Javascript

Pragmatic Uses of Monkey Patching in JavaScript

Have you ever worked with third-party code that worked well except for one little thing that drove you nuts? Why did the creator forget to remove those pesky console logs? Wouldn’t it be great if that API call could do just one more thing? If so then you know it can be difficult (or impossible) to get your change...

JavaScript Refactoring Techniques: Specific to Generic Code

In a recent thread on SitePoint’s forums, some code was given to let one dropdown box control when another dropdown box is visible. Even though the code worked just fine, I realized that it left much to be desired. It was brittle and incapable of withstanding even small changes to the accompanying HTML. Here is t...

Quick Tip: Get URL Parameters with JavaScript

So you want to get a parameter from a URL? URL parameters (also called query string parameters or URL variables) can have lots of useful data including product info, user preferences, link referrals, and more. Let’s get started! Getting URL Parameters Let’s say you have the following url: http://example.com...

Create a Music Jam Station with Vanilla JavaScript

The HTML5 audio player has given rise to some new and exciting possibilities, especially when it comes to music related web applications. I hope to introduce you to some of these possibilities by walking you through how I created this jam station. This project originally began as an experiment, but over time evolved ...

Cache Fetched AJAX Requests Locally: Wrapping the Fetch API

This article demonstrates how you implement a local cache of fetched requests so that if done repeatedly it reads from session storage instead. The advantage of this is that you don’t need to have custom code for each resource you want cached. Follow along if you want to look really cool at your next JavaScript d...

Quick Tip: What Are Factory Functions in JavaScript

You can’t get far as a JavaScript programmer without learning about functions and objects, and when used together, they are the building blocks we need to get started with a powerful object paradigm called composition. Today we’ll look at some idiomatic patterns for using factory functions to compose functi...

Function Composition: Building Blocks for Maintainable Code

One of the advantages of thinking about JavaScript in a functional way is the ability to build complex functionality using small, easy to understand individual functions. But sometimes that involves looking at a problem backwards instead of forwards in order to figure out how to create the most elegant solution. In thi...

Function Composition: Building Blocks for Maintainable Code

One of the advantages of thinking about JavaScript in a functional way is the ability to build complex functionality using small, easy to understand individual functions. But sometimes that involves looking at a problem backwards instead of forwards in order to figure out how to create the most elegant solution. In thi...

Quick Tip: How to Make a Game Loop in JavaScript

The “game loop” is a name given to a technique used to render animations and games with changing state over time. At its heart is a function that runs as many times as possible, taking user input, updating the state for the elapsed time, and then drawing the frame. In this short article you’ll learn ...

Quick Tip: How to Throttle Scroll Events

One of the perils of listening to scroll events is performance degradation. The browser will execute the callback every single time the user scrolls, which can be many events per second. If the callback performs a bunch of repaints, this means bad news for the end user. Repaints are expensive, especially when you are r...