Single or Double Colons in CSS Pseudo‑Elements (:before vs. ::before)
CSS pseudo‑elements can use one or two colons. This guide explains `:before`, `::before`, modern syntax, compatibility, and when each form matters.
Articles
Development, page 20 of 24
This is a very broad category within my articles which encompasses any aspect of web development, from initial design and architecture to coding, testing, and deployment.
Below you will find a subset of articles from my blog specifically about Development. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are four hundred twenty‑seven articles collected together for you below.
Single or Double Colons in CSS Pseudo‑Elements (:before vs. ::before). Single or Double Colons in CSS Pseudo‑Elements (
CSS box‑sizing: Controlling the Element Box Model. CSS
box‑sizing: Controlling the Element Box ModelUnderstand CSS box‑sizing and the box model, including content‑box, border‑box, width calculations, borders, padding, and layout surprises in real UI.
Understanding File‑System Routing in Next.js. Understanding File‑System Routing in Next.js
File‑system routing in Next.js explained clearly, including the `pages` directory, nested routes, index files, and why routing feels simpler than custom setups.
JavaScript Hoisting: Variables, Functions, and More. JavaScript Hoisting: Variables, Functions, and More
JavaScript hoisting moves declarations to the top of their scope. Here, I explore its impact on variables, functions, and best practices for avoiding pitfalls.
Closures in JavaScript: The Key to Lexical Scope. Closures in JavaScript: The Key to Lexical Scope
Closures let JavaScript functions retain access to parent scope variables. Here, I explore closures, scope, and practical uses for cleaner, more efficient code.
Static Methods vs. Instance Methods in JavaScript Classes. Static Methods vs. Instance Methods in JavaScript Classes
Static methods vs. instance methods in JavaScript classes explained clearly, including when to use each, common mistakes, and how class APIs stay readable.
Understanding the :hover Pseudo‑Class in CSS. Understanding the
:hoverPseudo‑Class in CSSThe :hover pseudo‑class seems simple until touchscreens and accessibility get involved. This guide covers how it behaves and where it falls short.
Mutation vs. Immutability in JavaScript Arrays and Objects. Mutation vs. Immutability in JavaScript Arrays and Objects
Mutation and immutability in JavaScript explained through arrays, objects, push(), splice(), shared references, UI bugs, and safer update patterns.
Array.includes() vs. indexOf() in JavaScript. Array.includes()vs.indexOf()in JavaScriptCompare Array.includes() and indexOf() in JavaScript, including boolean checks, returned positions, NaN handling, readability, and membership tests.
React Portals Explained. React Portals Explained
React Portals explained with modals, overlays, and tooltips, including DOM placement, event bubbling, accessibility concerns, and when portals help.
Enhancing User Experience with CSS and JavaScript Animations. Enhancing User Experience with CSS and JavaScript Animations
CSS and JS animations enhance user experience by adding smooth transitions and interactivity. Here, I explore best practices, performance, and the real‑world.
CSS Animations: Transitions vs. Keyframes. CSS Animations: Transitions vs. Keyframes
Compare CSS transitions and keyframe animations, including hover effects, loading states, timing control, performance, and when each approach fits.
React Fragments Explained. React Fragments Explained
React Fragments explained through empty tags, keyed fragments, semantic markup, unnecessary wrapper divs, grouped list output, and layout side effects.
Building Responsive Navigation with CSS and JavaScript. Building Responsive Navigation with CSS and JavaScript
Understanding Media Queries in CSS. Understanding Media Queries in CSS
Understand CSS media queries for responsive design, including screen conditions, mobile‑first, and desktop‑first approaches, breakpoints, and device traits.
Setting Front‑End Performance Budgets. Setting Front‑End Performance Budgets
Set front‑end performance budgets for page weight, scripts, images, requests, Core Web Vitals, and user experience before delivery pressure erodes them.
Optimising Website Performance with HTML, CSS, and JavaScript. Optimising Website Performance with HTML, CSS, and JavaScript
Improve website performance with practical HTML, CSS and JavaScript checks, from assets and rendering to scripts, measurement and Core Web Vitals.
Mastering CSS Animations with @keyframes. Mastering CSS Animations with
@keyframesCSS `@keyframes` enables animations by defining style changes over time. Here, I explain how it works with examples, properties, and cross‑browser support.