Static Generation with CMS Content and Build‑Time Data
How static generation works with CMS content and build‑time data, including routes, previews, rebuilds, freshness, cache limits, and deployment trade‑offs.
Articles, page 20 of 28
Articles from more than two decades of building, rebuilding, debugging, and leading web projects.
Static Generation with CMS Content and Build‑Time Data. 
Interpolation: Sass Variables Inside calc(). Interpolation: Sass Variables Inside
calc()One of the most common pitfalls for developers new to Sass is string interpolation: why a Sass variable may not behave as expected inside calc().
Building Custom Hooks in React. Building Custom Hooks in React
Building custom hooks in React explained with reusable stateful logic, naming rules, composition examples, and why hooks share logic rather than state.
What is a Static Site Generator? What is a Static Site Generator?
Static site generators explained in plain English, including how they compare with SSR, ISR and modern framework rendering choices.
Deploying Static Front Ends with Netlify and Build Hooks. Deploying Static Front Ends with Netlify and Build Hooks
How Netlify build hooks deploy static front ends from CMS updates, scheduled changes, content edits, preview needs, and simple publishing workflows.
Static Generation vs. Server‑Side Rendering in Next.js. Static Generation vs. Server‑Side Rendering in Next.js
Compare static generation and server‑side rendering in Next.js through freshness, request‑time data, performance, SEO, operational cost, and page intent.
Redirect a Default Netlify Subdomain to Your Custom Domain. Redirect a Default Netlify Subdomain to Your Custom Domain
When you set up a custom domain in Netlify, the default
netlify.comsubdomain still returns your app, which can lead to duplicate content. It is an easy fix.
Break Out of CSS Nesting with Sass. Break Out of CSS Nesting with Sass
On the occasion that you need to break a single (or several) CSS rules out of the nested structure of your CSS, the Sass @at‑root rule is exactly what you need.
Advanced Sass: Loops. Advanced Sass: Loops
Use Sass loops more deliberately, including while, for, and each patterns, generated selectors, readable output, and where loops beat repetition.
Using Storybook to Document Front‑End Components. Using Storybook to Document Front‑End Components
How Storybook can document front‑end components, states, edge cases, accessibility checks, and design conversations outside the main application.
Hiding Empty Elements with CSS. 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.
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.
Alternative Text in the CSS content Property. Alternative Text in the CSS
contentPropertyThe 'content' property in CSS is often used to insert graphical elements which ‑ on their own ‑ do not have an accessible alternative text available.
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.
Automatically Generate urllist.txt from sitemap.xml. Automatically Generate
urllist.txtfromsitemap.xmlUsing PHP it is quick and easy to automatically generate your urllist.txt sitemap from your sitemap.xml file (for example, using gatsby‑plugin‑sitemap).
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.
How to Replace All Instances of a String in JavaScript. How to Replace All Instances of a String in JavaScript
Replacing every instance of a string in JavaScript depends on what you are matching. This guide covers replaceAll(), regexes, and older fallbacks.
Understanding Element Dimensions in JavaScript: Width and Height. Understanding Element Dimensions in JavaScript: Width and Height
Measure element dimensions in JavaScript with clientWidth, offsetWidth, getBoundingClientRect(), innerWidth, outerWidth, and responsive layout cautions.
Using CSS Custom Properties for Shared Design Values. Using CSS Custom Properties for Shared Design Values
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.
