Container Queries in CSS
CSS container queries allow elements to respond to their parent's size rather than the viewport. I explain how they work and how they improve responsive design.
Articles
Front‑end Development, page 4 of 23
Front‑end web development is my personal niche, it is the art of creating visual and interactive elements for a website, including layout, design, and interactivity, using HTML, CSS, and JavaScript.
Below you will find a subset of articles from my blog specifically about Front‑End Development. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are four hundred seven articles collected together for you below.
Container Queries in CSS. 
Building a Headless CMS‑Powered Site with Next.js. Building a Headless CMS‑Powered Site with Next.js
Build a headless CMS‑powered Next.js site with content modelling, fetch layers, mapped front‑end shapes, preview, rendering choices, and scale cleanly.
Sorting Complex Arrays in JavaScript. Sorting Complex Arrays in JavaScript
Sorting complex arrays in JavaScript requires custom comparison functions. Here, I explore techniques for sorting numbers, objects, nested properties, and more.
CSS aspect‑ratio for Responsive Layouts. CSS
aspect‑ratiofor Responsive LayoutsThe CSS `aspect‑ratio` property makes it easier to maintain consistent proportions in responsive layouts. Here, I explore how it works and when to use it.
Building Multi‑Tenant Applications with Next.js. Building Multi‑Tenant Applications with Next.js
Multi‑tenant applications serve multiple customers from a single codebase. Here, I walk through building a scalable multi‑tenant web application using Next.js.
From Netlify Deploys to Vercel Pipelines. From Netlify Deploys to Vercel Pipelines
How deployment expectations moved from simple Netlify static deploys toward Vercel pipelines, previews, framework builds, observability, and rollback.
Building a Custom Vue 3 Hook Using the Composition API. Building a Custom Vue 3 Hook Using the Composition API
Build a reusable Vue 3 composable with the Composition API, covering side effects, useOutsideClick, browser boundaries, typing, and testability well.
Vue's provide/inject API: When and How to Use It. Vue's
provide/injectAPI: When and How to Use ItWhen Vue provide/inject is the right tool, how to keep it reactive, and where it fits better than props or a full store in larger component trees.
Vue 3 Reactivity: Proxies vs. Vue 2 Reactivity. Vue 3 Reactivity: Proxies vs. Vue 2 Reactivity
Vue 3 replaces Vue 2's getters and setters with JavaScript proxies. This article explains how they differ and why proxies improve Vue's reactivity system.
Understanding the Difference Between <b> and <strong>. Understanding the Difference Between
<b>and<strong>The `<b>` and `<strong>` tags both make text bold, but they serve very different purposes and convey different meaning. Here, I explain these differences.
Optimising Vue.js Performance with Lazy Loading and Code Splitting. Optimising Vue.js Performance with Lazy Loading and Code Splitting
Optimise Vue.js performance with lazy loading and code splitting, covering route‑level chunks, async components, bundle strategy, measurement, and UX.
Using Middleware in Next.js for Route Protection. Using Middleware in Next.js for Route Protection
Middleware in Next.js provides a straightforward way to protect routes and manage user authentication. Here, I show how to implement effective route protection.
Control CSS Container Layouts with place‑content. Control CSS Container Layouts with
place‑contentUse CSS place‑content to align grid and flex content, comparing align‑content, justify‑content, place‑items, syntax, examples, and layout limits.
Fixed Quote, Day Rate, or Retainer: Buying Senior Web Development Work. Fixed Quote, Day Rate, or Retainer: Buying Senior Web Development Work
Fixed quote, day rate, and retainer pricing for senior web development, explained through scope, risk, delivery, ownership, and platform quality.
When Static Generation Stopped Being Simple. When Static Generation Stopped Being Simple
Why static generation became more complex as CMS previews, ISR, cache invalidation, build queues, e‑commerce data, and platform expectations grew.
Simplify Your Layout CSS with place‑items. Simplify Your Layout CSS with
place‑itemsCSS `place‑items` is a shorthand property that aligns items inside grid and flex containers. Here, we discuss its syntax, use cases, and practical examples.
Optimising Angular Forms: Template‑Driven vs. Reactive Forms. Optimising Angular Forms: Template‑Driven vs. Reactive Forms
Template‑driven vs. reactive Angular forms, and how to choose the right model for validation, scale, testing, and maintainable form logic in real apps.
From Liquid Templates to Headless Storefronts. From Liquid Templates to Headless Storefronts
How e‑commerce front‑end work moved from Liquid templates to headless storefronts, and what teams risk when they underestimate data, checkout, and operations.