Hiding Empty Elements with CSS
Hide empty elements with the CSS :empty pseudo‑class, including strict matching rules, whitespace caveats, supported selectors, and practical UI uses.
Articles
Development, page 18 of 24
Development is the broadest category in my writing, so it works as the main archive rather than a narrow subject label. It brings together implementation notes and technical decisions, with delivery lessons from across the rest of the site.
Hiding Empty Elements with CSS. 
Disabling Text Selection Highlighting with CSS. Disabling Text Selection Highlighting with CSS
Disable text selection with CSS user‑select, including browser prefixes, input caveats and a visual ::selection fallback for older browsers.
Prepending PHP to a Page in Gatsby. Prepending PHP to a Page in Gatsby
Need a little PHP inside a Gatsby build? This guide shows a pragmatic way to prepend server‑side code when a fully static approach is not enough.
Conditional HTML for Browsers Other than Internet Explorer. Conditional HTML for Browsers Other than Internet Explorer
Conditional comments were once the standard way to target Internet Explorer. This guide shows how the non‑IE pattern works and where it catches people out.
Throttling vs. Debouncing in JavaScript: Managing Event Frequency. Throttling vs. Debouncing in JavaScript: Managing Event Frequency
The differences between throttling and debouncing in JavaScript, including practical TypeScript code examples. Optimise event handling and improve performance.
Managing Design Values in Front‑End Code. Managing Design Values in Front‑End Code
Manage colours, spacing, typography, breakpoints, and component values in front‑end code without scattering design decisions or weakening consistency.
UseReducer in React. useReducerin React`UseReducer` in React explained clearly, including reducer functions, action objects, complex state updates, and when it is a better fit than `useState`.
Dynamic Routes in Next.js. Dynamic Routes in Next.js
Dynamic routes in Next.js explained with `[slug]` pages, route params, nested segments, and why file‑based dynamic routing simplifies content‑driven sites.
JavaScript’s Math.random(). JavaScript's
Math.random()JavaScript Math.random() explained beyond the basics, including pseudo‑random generation, browser history, ranges, array indexes, and randomness limits.
Shopify Theme Constraints with Liquid. Shopify Theme Constraints with Liquid
How Shopify Liquid theme constraints affect products, sections, apps, checkout, SEO, performance and the decision to stay theme‑based or go headless.
UseRef in React. useRefin ReactUse useRef in React for DOM access, focus management, mutable values, previous values, integration work, and cases where refs should not replace state.
Using Liquid Templates in E‑Commerce Front Ends. Using Liquid Templates in E‑Commerce Front Ends
How Liquid templates shape e‑commerce front‑end work, including products, collections, snippets, theme constraints, content, and safe customisation.
Checking Rendered HTML for JavaScript Pages. Checking Rendered HTML for JavaScript Pages
Check rendered HTML for JavaScript pages by comparing source and DOM output across metadata, headings, links, schema, content, hydration, and crawlability.
Class vs. Functional Components in React. Class vs. Functional Components in React
Class and functional components are key to React development. In this article I explore differences, advantages, and when to use each in modern React apps.
Advanced Techniques for Responsive Web Design. Advanced Techniques for Responsive Web Design
Discover advanced responsive web design techniques with CSS Grid, `clamp()`, container queries, and JS enhancements for performance‑optimised, adaptive sites.
Client‑Side Rendering and Search Visibility. Client‑Side Rendering and Search Visibility
How client‑side rendering can affect search visibility, and what to check around content, links, metadata, routing, loading states, and fallbacks.
Custom _app and Custom _document in Next.js. Custom
_appand Custom_documentin Next.jsCustom `_app` and `_document` in Next.js explained clearly, including shared layout, global setup, server‑rendered HTML, and what each file is actually for.
The JavaScript Event Loop: A Beginner’s Guide. The JavaScript Event Loop: A Beginner's Guide
The JavaScript event loop manages asynchronous tasks in a single‑threaded environment. I explore how it works with the call stack, task queue, and microtasks.
