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.
Articles, page 19 of 26
Articles from more than two decades of building, rebuilding, debugging, and leading web projects.
What is a Static Site Generator? 
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.com` subdomain 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
User‑select makes stopping visitors from selecting items on‑page easy, and can be combined with ::selection to capture the browsers where user‑select is absent.
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).
If Not Internet Explorer Conditional HTML. If Not Internet Explorer Conditional HTML
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.
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.
How to Use and Clear the CSS float Property. How to Use and Clear the CSS
floatPropertyUse and clear the CSS float property in legacy layouts, including text wrapping, clearing behaviour, layout examples, and when modern tools are better.
Using display in CSS. Using
displayin CSSUnderstand the CSS display property, including block, inline, inline‑block, none, flex, and grid, plus how defaults affect front‑end layout decisions.
How to Use grid in CSS. How to Use
gridin CSSStart using CSS Grid with containers, columns, rows, item placement, gaps, track sizing, flexible layouts, and practical two‑dimensional examples.
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`.
