Home & blog

Vue's custom directives are very cool, and let you do some useful things with elements. But we can also use them to hook into the elements of child components, as I needed to recently to attach a paste event.

Promises are awesome, but it was always a bit annoying how you had to roll your own solution if you wanted to resolve a promise from outside its callback. Meet Promise.withResolvers(), which solves that problem.

One of the features that landed in ECMAScript 2024 was the ability to group synchronous iterables (e.g. arrays) into objects or maps. Let's take a look!

In this tutorial I'll show you how to secure a single page application (SPA) using JWT-based authencation via Auth0, a third-party auth provider. We'll set up a basic Bun-powered back end to feed our SPA.

Vue's template refs allow us access to native DOM elements. But there's a few cases where their usage is a bit more complex, like using them in v-for loops or on child components. Let's take a look!

In this article I'll guide you through some of the newer features to land in JavaScript in recent years that you may be unaware of, including new assignment operators, a numeric separator and new string and array methods.

ECMAScript version 11, which landed in 2020, gave us two new, super-useful operators to play with in JavaScript, known as the nullish and optional chaining operators. In this article I'll show you how to use them.

In this guide I'll show you how to build an inifite loading (i.e. lazy loading) mechanism in Vue 3, for use with data loaded from an API.

In part one we saw how the Composition API changed how we built Vue components. In part two we'll look at a later addition to the API, namely the setup script, which takes the API to another level.

Vue's Composition API changed the way we write Vue code, with a focus on imported functions rather than declared options. In this two-part guide, I'll be looking at its benefits and how it works.

Vue provides a number of ways to harness component data within your CSS. Vue 3.2 introduced the latest of those ways, allowing the use of v-bind() directly within your CSS. Let's take a look!

In this article I'll look at a few approaches to running a sequence of promises - in my case representing a number of login attempts to different instances of a back-end system - until one of them succeeds.

How in Nuxt can you render CMS-fetched content that contains references to custom components? In this article I'll show you how.

In the fourth and final (phew!) part of my guide to Docker, we'll be meeting Docker Compose, which is the smart way to run multi-container apps and gives us greater control over them.

Welcome to part three of my four-part guide to Docker, where we're building a PHP-based to-do app. This time out we'll look at multi-container apps and introduce a second, MySQL container to store our data!

In this, the second part of my Docker tutorial, we'll be building a PHP-based to-do app. Along the way we'll meet some new Docker concepts, including volumes, which are the key to developing within Docker.

Docker answers the question, "what's the best way to ship an app including not just its content but also its environment (runtime)?" In this four-part guide we'll be learning Docker via a to-do app built in PHP and MySQL.

Most web projects these days involve retrieving asynchronous data at some point, and Nuxt makes it really easy to do this. In this article I'll look at the different approaches, focusing on the fetch and asyncData hooks.

Spread syntax and rest parameters look like one another and are often used together. In this article we'll see how they're used, and how they can save you writing more verbose code.

When arrow functions landed in ECMA 6, they allowed developers to be much more fluid with use of functions. PHP now has them too, albeit with some differences. Let's take a look at how they compare.

What if you don't know the exact structure of an object but want to retrieve a deep-residing property within it, if the path exists? Before ECMAScript 11, this was laborious. Now it's simple.

Contentful has proved a popular headless CMS, partly because of its generous free package. But it lacks a way to easily import data. Or it did... here's how.

JavaScript's spread operator (...) landed in ECMAScript version 9, and has some really useful applications. It's essentially a way to unpack strings, arrays or objects into their constituent parts.

I see this come up a lot on Stack Overflow. How do you pass non-string prop values, particularly when they're then fed to value-less HTML attributes such as checked or multiple?

I was recently working with Bulma and Buefy, a Vue components-based implementation of Bulma, with Nuxt, but couldn't figure out how to set Bulma variable overrides. Here's how...

A common issue when using frameworks like Nuxt or Vue CLI comes when using dynamic image paths. This is essentially due to Webpack. Let's see how to solve it.

Lucid.js is my new reactive, component-based framework. It's powerful, yet super easy to learn as it lacks a lot of the deeper (and often unnecessary) more complex features of other reactive frameworks. There's even a playground - check it out!

TreeWalkers are a means of traversing a DOM subtree - but one advantage they have over other means is they can be used to select non-element nodes such as comments and text nodes.

Can you concatenate multiple audio files/recordings into one (so they play one after another) in pure JavaScript? Yes, turns out to be the answer!

In the third and final part of my three-part series on maps and sets, we'll be looking at sets and weak sets, and see how they're similar to, but also different from, traditional arrays.

In part two of this in-depth guide to JavaScript maps and sets we'll be looking at the weird, exotic world of weak maps. These are like maps, except the keys are always objects and the entries are "weakly held". We'll explore just what this means.

In this guide we'll be looking at JavaScript maps and sets. First up, maps, which are a sort of super object. They work like objects, but with some key differences and improvements - most notably, they have a reliable order and can accesspt any data type as keys!

JavaScript modules are a great way to manage and load code dependencies. But static imports can be problematic. Wouldn't it be cool if there was a way to import dynamically and conditionally? Well, there is...

Following up on my recent guide to JavaScript event delegation, I thought it would be interesting to simulate jQuery's on() method, which makes event delegation a breeze by hiding its workings, in native JS.

Event delegation is a great pattern to learn in JavaScript - yet it's still alien to many beginner/intermediate developers. Let's see how it works, and why you need to be using it. We'll even make our own jQuery-style on() method.

JavaScript doesn't have browser support yet for fully-private properties (the new #property syntax), but a reasonable simulation can be achieved using symbols.

Meet Promise.any(), which is supported by the just-released Firefox 79. It's like Promise.race(), except it listens only for the first promise to be fulfilled, not merely resolved either way.

I recently answered a question on Stack Overflow where the OP had two identical arrays, and wished to pair them, but avoiding duplicates. Turned out to be a bit of a brain burner, so I thought I'd post up my approach here.

It's common to want to transform flat JSON into a nested structure. With XML, we can do this easily with XPath. But what about JSON? In this article I'll be demonstrating this using my own J-Path and JavaScript sets.

Since the dawn of time people have been asking how to sort HTML elements - usually lists or tables. Back in the day we had jQuery plugins for this (including one from yours truly). Let's look at an elegant, native approach.

If you allow a user to paste input, how do you sanitise the clipboard data? What if it's been copied from something obscure and comes laden with styling tags? Let's see how we can remove them.

When the JavaScript Promises specification was released, one of the first questions that got asked (and is still asked) was: but how do I resolve them from outside, a la jQuery deferred objects? That's not how they're intended to work, but it is possible.

jQuery took the world by storm. It filled in the gaps of JavaScript's then rather sparse API, and made coding MUCH simpler. But the JavaScript API has moved on, and reactive frameworks are the naem of the game. How relevant still is jQuery?

In the first article in this series we looked at the history and run-up to the game-changing async/await combo. In this article we'll get down to using it and seeing precisely how it works.

ECMAScript 2016's async/await combo really was a game-changer when it comes to writing shallow, synchronous-looking code that hides away asynchronous operations, and they really took promises to a new level. Let's meet them!

Rounding off this three-part series on JavaScript promises, in this article we'll look at promise events, combining promises with ECMAScript 2017's async/await combo, plus some of the standard APIs that use or depend on promises.

In this second of three articles on JavaScript promises we'll be digging a little deeper, this time looking at error handling with promises, promise methods such as Promise.resolve() and how promises can handle concurrent requests.

Promises a great way to write shallow, readable code that looks synchronous but actually hides away asynchronous operations. In this first of three articles I'll be showing you how they work, and what problem they solve.

Wrapping up my three-part guide to JavaScript generators, in this article we'll take a look at how generators compare with the later async/await combo, with which they share much in common, and also see how generators can delegate tasks to other generators.

In this, the second part in my three-part guide to JavaScript generators, we'll see how generator functions lend themselves particularly to asynchronous situations - but hiding that asynchronicity away behind synchronous-looking code flows.