What are Array‑Like Objects in JavaScript?
An exploration of array‑like objects in JavaScript. Explanations of their unique characteristics and how to navigate them easily in front‑end development.
Articles
Front‑end Development, page 14 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.
What are Array‑Like Objects in JavaScript? 
Replace Inline Styles in Gatsby with an External CSS File. Replace Inline Styles in Gatsby with an External CSS File
Replace Gatsby's inlined production CSS with an external stylesheet by rewriting headComponents, with performance trade‑offs and historical context.
Why Choose Me as a Brighton and South East Web Developer. Why Choose Me as a Brighton and South East Web Developer
Based in Brighton, I bring more than 23 years of web development experience, clear communication, performance‑focused delivery and ongoing support.
Disabling Source Maps in Gatsby for Production. Disabling Source Maps in Gatsby for Production
Although an extremely useful aspect of Gatsby, source maps cause a performance hit as well as leaving your source exposed. Here is how to turn them off!
Image Optimisation with next/image. Image Optimisation with
next/image`next/image` explained with responsive sizing, lazy loading, layout shift reduction, and why image optimisation matters in real Next.js applications.
Responsive Images for Faster Front‑End Pages. Responsive Images for Faster Front‑End Pages
How responsive images make front‑end pages faster by serving suitable sizes, preserving quality, reducing wasted bytes, and avoiding layout shifts.
Optimising gatsby‑image Even Further. Optimising
gatsby‑imageEven FurtherOptimise gatsby‑image with sensible maxWidth and quality settings, GraphQL image data, and selective use of the native loading attribute in Gatsby.
Using Regex to Replace Numbers in a String. Using Regex to Replace Numbers in a String
Finding and replacing numbers in a string with JavaScript is a relatively straightforward task, although which regex you use (and how) can impact readability.
Intercepting Clipboard Events with JavaScript. Intercepting Clipboard Events with JavaScript
Browsers now support the copy event, which allows developers to intercept and modify content placed onto a clipboard, when copied from their site.
Dynamic Imports and Code Splitting in Next.js. Dynamic Imports and Code Splitting in Next.js
Dynamic imports and code splitting in Next.js explained with `next/dynamic`, lazy‑loaded components, SSR trade‑offs, and when splitting really helps.
Accessibility in Reusable Front‑End Components. Accessibility in Reusable Front‑End Components
Build accessibility into reusable front‑end components with names, keyboard behaviour, focus states, form semantics, disabled states, and testing habits.
Adding Static Files to a Gatsby Site. Adding Static Files to a Gatsby Site
Add static files to a Gatsby site using the static folder, with notes on build output, verification files, legacy assets, and when not to process files.
Keeping Gatsby Builds Predictable. Keeping Gatsby Builds Predictable
Keep Gatsby builds predictable by controlling data sources, plugins, image work, environment variables, cache assumptions, and build‑time dependencies.
Parent Selectors in CSS and Sass. Parent Selectors in CSS and Sass
Understand parent selectors in CSS and Sass, including how ampersand nesting works, :has() context, BEM trade‑offs, specificity, and readability.
Automatically Deploy a Static Gatsby Site via FTP. Automatically Deploy a Static Gatsby Site via FTP
Deploy a static Gatsby build over FTP with environment variables, ftp‑deploy, build scripts, and a practical CI flow for conventional or legacy hosting.
Using JavaScript to Avoid Orphans. Using JavaScript to Avoid Orphans
Orphans are annoying single‑word lines of text that hang at the end of a paragraph. It is straightforward using React and JS to banish them from your site.
Understanding getStaticPaths in Next.js. Understanding
getStaticPathsin Next.js`GetStaticPaths` in Next.js explained with dynamic routes, pre‑rendered paths, fallback behaviour, and how static generation works for slug‑based pages.
Using CSS to Deal with Widows. Using CSS to Deal with Widows
In typography, a 'widow' is the last line of a paragraph, which falls alone on the following page or column. On the web, this can be easily tackled with CSS.
