How to implement them and whether they’re actually useful
A singleton is a function or class which can have only one instance. It’s a design pattern popularised by the “Gang of Four” in their influential Design Patterns. However, the singleton is one of several patterns in the book which have been criticised. Some are regarded as anti-patterns, while others are only useful in particular languages. So, what about singletons? And do they make sense JavaScript?
In this article, we’ll see how to implement singletons in JavaScript, before asking whether or not they’re useful in the language.
Class Singleton
Since Design Patterns focused on C++, we’re used to seeing singletons as classes. Since ES6, we’ve had a class syntax in JavaScript, so a basic implementation of a singleton could look something like…
How to combine two of the most popular tools in web development
Right now, Typescript and React and two of the most popular technologies in web development. In this article, we’ll look into using the two technologies in tandem, covering basic type checking in functional and class components. The article’s intended for anyone who’s bringing TypeScript and React together for the first time, but it should also be useful for those who need a quick reminder of the syntax.
What is React?
React (maintained by Facebook) is a declarative, component-based library. It makes it easy to build interactive, reusable components which — thanks to its virtual DOM — update in a highly efficient way.
What is Typescript?
Typescript (built by Microsoft) is a superset of JavaScript: it contains all the features of JavaScript, plus a variety of type-checking features reminiscent of strongly-typed languages like Java and C#. It makes code easier to read, understand and debug. …
Tricks with the Spread Operator and Destructuring Assignment Syntax
Among the many useful features introduced in ES6, few have the power to knock off as many lines of traditional JavaScript code as the spread operator and destructuring assignment syntax. In ES5, for example, you may have required a dedicated function to filter out unique values. Now, it’s possible in a single line of code.
In this article, we’ll look at several occasions when the spread operator and destructuring can make your code more concise. But first, let’s recap what these features do with some basic examples.
What is destructuring assignment syntax?
This is a way concise way to turn values from arrays or properties from objects into variables. We’ll start with a couple of examples of array destructuring. …
Combine the power of TypeScript and MongoDB to create a scalable, production-grade database
MongoDB is a versatile NoSQL database, commonly paired with Node.js. Instead of tables and rows, it uses collections and documents to store data. But what makes it so versatile — the fact that no schema is required — can also make it more difficult to scale and maintain, particularly in a large, production-grade application.
This is where tools like Mongoose and TypeScript come in handy. While many MongoDB tutorials cover Mongoose, far fewer discuss how to introduce TypeScript into your MongoDB projects. That’s why I’m writing this article. …
A tricky problem due to Catalina’s read-only root folder
Recently, I started a new developer job and switched from a Windows to a Mac. The switch was mostly very smooth, with one main problem: setting up MongoDB. The problem is related to the latest major macOS release, Catalina, and in this article, I’ll share my solution.
Setting up MongoDB to run on Catalina is more time-consuming than it should be, but hopefully, this article will save you from some of the headaches I went through!
The Problem
By default, MongoDB stores database information in the root folder, in data/db. But the Catalina update provides read-only access to the root. …
From pure functions and combinators to compose and containers
Functional programming (FP) is a style of coding that’s been growing in popularity. There’s a lot of content out there that explains what functional programming is, but there’s much less about how to apply it. For me, knowing how to apply it is far more valuable: You can only get a real understanding of and feel for a programming style when you put it into practice. So that’s what this piece intends to be — a practical introduction to the functional programming style in JavaScript.
Unlike some pieces I’ve encountered, this one isn’t going to encourage you to use higher-order functions like map , filter and reduce and leave it at that. Yes, these functions are a useful part of a functional programmer’s toolkit, but they’re only part of the overall picture — many codebases use them without adhering to other functional programming principles. Instead, we’ll be using vanilla JavaScript to build functions that help us stick as closely as possible to the functional paradigm. …
Is There a Right Way to Get Stuff Wrong?
There is no such thing as perfect code. Even if there was, our users will always find surprising ways to break what once seemed like perfectly watertight code and attempt to do things that we don’t want them to! How do we control these perilous situations? Using errors!
In this article, we’ll look into error handling in JavaScript. We’re specifically talking about runtime errors — sometimes called execution errors. These are the errors that occur while our programming is running: if they’re not caught, then they’ll typically crash our programs, something we usually want to avoid! …
An Introduction to Data Structures in JavaScript
What’s the best way to store data in a list? In computer science courses, linked lists are one of the first data structures learners encounter. They’re an abstract data type, in which each element points to the next one and — in theory — that brings certain advantages for performance.
There’s plenty of information about linked lists in lower-level languages like C and C++, where they’re more likely to be applied. …
How to Make Two Animated, Interactive Hero Sections
Making an eye-catching, memorable website isn’t easy. As the quality and performance of the web has gone up, so have users’ expectations. One of the best ways to make a lasting impression is through animated, interactive visual elements.
Since the canvas tag got updated in HTML, there are now lots of powerful ways to bring interactive visuals to your next web app. In this tutorial, we’ll look into how, by building two different interactive hero sections, pictured below.
How to bring three dimensions to your next web app
Three.js is a powerful tool. It helps bring 3D design and animation to the browser in a performant and adaptable way. But it can be tricky to get started if you’ve never delved into the world of 3D programming before.
I had some basic experience playing with the Unity Game Engine and C#, but otherwise many of the concepts were new to me. I realised there weren’t many beginner-friendly resources out there, and so I decided to write this article. In it, we’ll look at the main elements of a Three.js …
About
