Understanding Element Dimensions in JavaScript: Width and Height
Measure element dimensions in JavaScript with clientWidth, offsetWidth, getBoundingClientRect(), innerWidth, outerWidth, and responsive layout cautions.
Articles
Front‑end Development, page 16 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.
Understanding Element Dimensions in JavaScript: Width and Height. 
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`.
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.
JavaScript’s Math.random(). JavaScript's
Math.random()JavaScript Math.random() explained beyond the basics, including pseudo‑random generation, browser history, ranges, array indexes, and randomness limits.
Shopify Theme Constraints with Liquid. Shopify Theme Constraints with Liquid
How Shopify Liquid theme constraints affect products, sections, apps, checkout, SEO, performance and the decision to stay theme‑based or go headless.
UseRef in React. useRefin ReactUse useRef in React for DOM access, focus management, mutable values, previous values, integration work, and cases where refs should not replace state.
Using Liquid Templates in E‑Commerce Front Ends. Using Liquid Templates in E‑Commerce Front Ends
How Liquid templates shape e‑commerce front‑end work, including products, collections, snippets, theme constraints, content, and safe customisation.
Exploring the Liquid Templating Language. Exploring the Liquid Templating Language
Liquid is a small templating language with a lot of reach. This article explores its syntax, control flow, and why it shows up in so many CMS tools.
React Hooks: Modern State Management. React Hooks: Modern State Management
React Hooks, introduced in React 16.8, bring state and lifecycle features to functional components. Here, I explore how they work and why they matter.
Checking Rendered HTML for JavaScript Pages. Checking Rendered HTML for JavaScript Pages
Check rendered HTML for JavaScript pages by comparing source and DOM output across metadata, headings, links, schema, content, hydration, and crawlability.
Class vs. Functional Components in React. Class vs. Functional Components in React
Class and functional components are key to React development. In this article I explore differences, advantages, and when to use each in modern React apps.
Client‑Side Rendering and Search Visibility. Client‑Side Rendering and Search Visibility
How client‑side rendering can affect search visibility, and what to check around content, links, metadata, routing, loading states, and fallbacks.
