Use Greater‑Than and Less‑Than Symbols in JSX
Render greater‑than and less‑than symbols in JSX safely, using strings or HTML entities whilst avoiding parser confusion and awkward React output.
Articles
Front‑end Development, page 15 of 24
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.
Use Greater‑Than and Less‑Than Symbols in JSX. 
Using getStaticProps with CMS Data. Using
getStaticPropswith CMS DataUse getStaticProps with CMS data without hiding freshness, build‑time, preview and validation risks in Pages Router content workflows.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
Commenting in JSX. Commenting in JSX
Comment in JSX without breaking React parsing, including curly‑brace block comments, why HTML comments fail, and gotchas around rendered output clearly.
GetStaticProps vs. getServerSideProps in Next.js. getStaticPropsvs.getServerSidePropsin Next.js`GetStaticProps` vs. `getServerSideProps` in Next.js explained with build‑time and request‑time data fetching, trade‑offs, and practical page examples.
Creating a Discernible Name for Icon Links. Creating a Discernible Name for Icon Links
A common issue I come across when auditing sites with Lighthouse is the "Links do not have a discernible name" error where links don't contain text.
Static Generation with CMS Content and Build‑Time Data. 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.
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.
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.
