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
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.
...) 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
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.
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.
on() method, which makes event delegation a breeze by hiding its workings, in native JS.
#property syntax), but a reasonable simulation can be achieved using symbols.
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.
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.
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.
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!
async/await combo, plus some of the standard APIs that use or depend on promises.
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.
async/await combo, with which they share much in common, and also see how generators can delegate tasks to other generators.
for-of or spread syntax.