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, page 17 of 26
Articles from more than two decades of building, rebuilding, debugging and leading web projects.
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 inline styles with an external stylesheet when needed, weighing render speed, caching, CSS Modules, styled‑components, and cleaner output.
Why I’m the Best Choice for Web Development Near You. Why I'm the Best Choice for Web Development Near You
Based in Brighton, I offer expert web development services in the South East. With 21+ years' experience, I deliver tailored, future‑proof solutions.
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 further with sensible maxWidth, quality settings, native lazy loading, GraphQL image data, and avoiding oversized assets 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' element 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.
CSS Focus Styles for Keyboard Users Only. CSS Focus Styles for Keyboard Users Only
Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.
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.
Use Greater‑Than and Less‑Than Symbols in JSX. Use Greater‑Than and Less‑Than Symbols in JSX
Render greater‑than and less‑than symbols in JSX safely, using strings or HTML entities while avoiding parser confusion and awkward React output.
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.
