Category: Raw Javascript

Create an Animated Sticky Navigation Menu with Vanilla JavaScript

When adding a navigation menu to a webpage, there are a lot of things to take into consideration. For example where to position it, how to style it, how to make it responsive. Or maybe you want to add some kind of animation to it (tastefully, of course). At this point you might be tempted to grab a jQuery plugin which ...

Learning JavaScript Test-Driven Development by Example

You’re probably already familiar with automated testing and its benefits. Having a set of tests for your application allows you to make changes to your code with confidence, knowing that the tests have your back should you break anything. It’s possible to take things a step further and write your tests befo...

Back to Basics: JavaScript Operators, Conditionals & Functions

Table of Contents JavaScript Operators Assignment Operators Arithmetic Operators Addition Subtraction Multiplication Division Modulus Increment Decrement Comparison Operators Equal Strict Equal Not Equal Strict Not Equal Less Than Less Than or Equal To Greater Than Greater Than or Equal To Logical Operators And Or Not ...

The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)

Whenever we need to perform DOM manipulation, we’re all quick to reach for jQuery. However, the vanilla JavaScript DOM API is actually quite capable in its own right, and since IE < 11 has been officially abandoned, it can now be used without any worries. In this article, I’ll demonstrate how to accompl...

Simplifying Asynchronous Coding with Async Functions

The debut of Promises in JavaScript has lit the internet on fire—they help developers break out of callback hell and solve a lot of problems that have plagued the asynchronous code of JavaScript programmers everywhere. Promises are far from flawless, though. They still require callbacks, can still be messy in complex...

How You Can Use HTML5 Custom Data Attributes and Why

In this article, I am going to show you how you can use HTML5 custom data attributes. I’m also going to present you with some use cases that you can find helpful in your work as a developer. Why Custom Data Attributes? Very often we need to store information associated with different DOM elements. This informati...

Quick Tip: How JavaScript References Work

This article was originally published on Medium. TL;DR: There are NO pointers in JavaScript and references work differently from what we would normally see in most other popular programming languages. In JavaScript, it’s just NOT possible to have a reference from one variable to another variable. And, only compound v...

Quick Tip: How to Sort an Array of Objects in JavaScript

If you have an array of objects that you need to sort into a certain order, the temptation might be to reach for a JavaScript library. Before you do however, rember that you can do some pretty neat sorting with the native Array.sort function. In this article I’ll show you how to sort an array of objects in Java...

What Tutorials Don’t Tell You: How to Approach Projects

I often hear that people who follow tutorials find themselves unable to approach JavaScript projects on their own. One reason this happens is that tutorials give you a neat set of steps rather than the actual process of figuring out those steps on your own. Another reason people struggle with projects is that they co...

A Beginner’s Guide to JavaScript Variables and Datatypes

So you’ve decided to learn JavaScript, the programming language of the web. If it seems like a daunting journey ahead and you don’t know where to start, here’s a little secret: it doesn’t take any special skill to learn how to program, and everyone starts at zero. Take it one step at a time, an...