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.
Articles
Front‑end Development, page 16 of 25
Front‑end development is where product intent becomes the interface people actually use. My writing approaches it as engineering rather than surface decoration, with attention to browser behaviour and code that remains accessible, fast, and safe for a team to change.
Static Generation vs. Server‑Side Rendering in Next.js. 
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.
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.
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.
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 ReactuseReducerin React explained clearly, including reducer functions, action objects, complex state updates, and when it is a better fit thanuseState.
Check If Three Values are Equal in JavaScript. Check If Three Values are Equal in JavaScript
A brief explanation of how to check if three variables are equal in JavaScript using the equality operators, ternary operator and Array.prototype.every method.
Toggle a Boolean in JavaScript. Toggle a Boolean in JavaScript
A brief explanation of how to toggle a variable in JavaScript by inverting its value. Learn how to switch a variable from true to false and vice versa.
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.
