Category: vanilla javascript

6 jQuery-inspired Native DOM Manipulation Methods You Should Know

When jQuery was released, one of the main reasons behind its meteoric rise to popularity was the ease with which it could select DOM elements, traverse them and modify their content. But that was way back in 2006. In those days we were stuck with Internet Explorer 7 and ECMAScript 5 was still a couple of years off. Lu...

The MVC Design Pattern in Vanilla JavaScript

Design patterns often get incorporated into popular frameworks. The Model-View-Controller (MVC) design pattern, for example, is one that is ubiquitous. In JavaScript, it is hard to decouple the framework from the design pattern. Oftentimes, a particular framework will come with its own interpretation of this design pat...

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 ...

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...

Bootstrap Native: Using Bootstrap Components without jQuery

Do you use Bootstrap’s JavaScript components? Do you like Vanilla JavaScript? Then you might be interested in the Native JavaScript for Bootstrap project (Bootstrap Native), which aims to remove the jQuery dependency required by the components by porting them to plain JavaScript. Why use Bootstrap Native? The motivat...

Building a JavaScript 3D Minecraft Editor

I’ve always wanted to build a 3D game. I’ve just never had the time and energy to learn the intricacies of 3D programming. Then I discovered I didn’t need to… While tinkering one day, I got to thinking that maybe I could simulate a 3D environment using CSS transformations. I stumbled across an o...

Quick Tip: How to Style Google Custom Search Manually

Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the trick. If you don’t need advanced filters or cus...

Saved from Callback Hell

Callback hell is real. Often developers see callbacks as pure evil, even to the point of avoiding them. JavaScriptʼs flexibility does not help at all with this. From the surface, it seems callbacks are the perfect foot gun, so it is best to replace them. The good news is there are simple steps to get saved from callba...

Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript

Sometimes you need to add or remove a CSS class with JavaScript, and you don’t want to include an entire library like jQuery to do it. This is useful in situations when you want your page elements to change in response to user actions. Example uses include: Showing or hiding a menu Highlighting a form error Sh...

Quick Tip: How to Declare Variables in Javascript

When learning JavaScript one of the basics is to understand how to use variables. Variables are containers for values of all possible types, e.g. number, string or array (see data types). Every variable gets a name that can later be used inside your application (e.g. to read its value). In this quick tip you’ll l...