How to implement them and whether they’re actually useful

Image for post
Image for post
Photo by Scott Webb on Unsplash

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

Image for post
Image for post
Photo by Ben Kolde on Unsplash

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

Image for post
Image for post
Photo by Anete Lūsiņa on Unsplash

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

A photo of leaves by Liubov Ilchuk
A photo of leaves by Liubov Ilchuk
Photo by Liubov Ilchuk on Unsplash

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


A tricky problem due to Catalina’s read-only root folder

Image for post
Image for post
Photo by Paweł Czerwiński on Unsplash

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

Mathematical equations written in chalk.
Mathematical equations written in chalk.
Functional programming borrows some ideas from Mathematics. Photo by Roman Mager on Unsplash.

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?

Image for post
Image for post
Photo by Matthew T Rader on Unsplash

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

Photograph of a metal chain
Photograph of a metal chain
Photo by JJ Ying on Unsplash

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

Image for post
Image for post
Photo by Daniel Korpai on Unsplash, with my own edits.

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.

Image for post
Image for post


How to bring three dimensions to your next web app

Image for post
Image for post
Photo by Kari Shea on Unsplash, featuring a Three.js render.

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

About

Bret Cameron

Writer and developer based in London. On Medium, I write about JavaScript and web development 💻

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store