Using different colours in native textareas via a "mirror" element
16 Apr 2025
In this tutorial we'll look at how to achieve different colours, or syntax highlighting, in native textarea
elements, using a mirror technique and some nifty JS.
16 Apr 2025
In this tutorial we'll look at how to achieve different colours, or syntax highlighting, in native textarea
elements, using a mirror technique and some nifty JS.
28 Feb 2025
Previously I looked at AI function calls as a means to obtain structured output such as JSON. This time we'll look at using LangChain to achieve the same end, but with more flexibility and support for fail retries.
6 Dec 2024
AI functions are a means of harnessing generative AI to obtain predictable pieces of data that can then be used in upstream code. In this guide we'll look at both 'traditional' and 'embedded' flavours, via Cloudflare.
30 Sep 2024
In this tutorial I'll show you a couple of ways to upload files to Cloudflare's version of S3 storage, known as R2, from a Cloudflare Worker. We'll look at both indirect and (via presigned URLs) direct uploads.
22 Aug 2024
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.
26 Jun 2024
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.
2 May 2024
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!
20 Mar 2024
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.
21 Dec 2023
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!
18 Oct 2023
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.
31 Jul 2023
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.
2 Jun 2023
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.
6 Feb 2023
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.
8 Jan 2023
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.
30 Sep 2022
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!
2 Aug 2022
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.
6 Jun 2022
How in Nuxt can you render CMS-fetched content that contains references to custom components? In this article I'll show you how.
24 Apr 2022
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.
17 Apr 2022
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!
19 Mar 2022
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.
9 Mar 2022
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.
20 Jan 2022
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.
11 Dec 2021
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.
14 Nov 2021
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.
3 Oct 2021
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.
28 Aug 2021
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.
15 Aug 2021
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.
19 Jul 2021
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
?
2 Jul 2021
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...
26 May 2021
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.
2 May 2021
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!
25 Feb 2021
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.
3 Feb 2021
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!
11 Jan 2021
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.
1 Jan 2021
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.
15 Dec 2020
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!
16 Nov 2020
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...
8 Nov 2020
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.
1 Nov 2020
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.
20 Aug 2020
JavaScript doesn't have browser support yet for fully-private properties (the new #property
syntax), but a reasonable simulation can be achieved using symbols.
2 Aug 2020
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.
19 Jun 2020
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.
2 Jun 2020
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.
11 Apr 2020
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.
22 Mar 2020
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.
16 Feb 2020
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.
8 Jan 2020
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?
20 Nov 2019
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.
13 Oct 2019
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!
31 Jul 2019
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.