Using Viewport Units in CSS: vw and vh
Use CSS viewport units vw and vh for responsive sizing, understanding percentage‑of‑viewport behaviour, full‑screen layouts, and mobile browser caveats.
Articles, page 24 of 29
Articles from more than two decades of building, rebuilding, debugging, and leading web projects.
Using Viewport Units in CSS: vw and vh. Using Viewport Units in CSS:
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.
Respecting Reduced‑Motion Preferences in CSS. Respecting Reduced‑Motion Preferences in CSS
Use CSS reduced‑motion preferences without losing content or feedback, with static‑first and targeted override patterns bounded to Safari‑first 2018 support.
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
Compare CSS and JavaScript animations, when to use each, and how to protect performance and accessibility with reduced motion and efficient properties.
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.
Avoiding Forced Layout and Layout Thrashing in JavaScript. Avoiding Forced Layout and Layout Thrashing in JavaScript
See how DOM writes followed by geometry reads force synchronous layout, why loops amplify the cost, and how read‑first batching preserves the result.
Understanding Browser Caching with Cache-Control and Validators. Understanding Browser Caching with
Cache-Controland ValidatorsUnderstand how Cache‑Control, ETag, Last‑Modified, Vary, and conditional requests decide whether browsers reuse or revalidate HTTP responses.
Mastering CSS Animations with @keyframes. Mastering CSS Animations with
@keyframesCSS
@keyframesenables animations by defining style changes over time. Here, I explain how it works with examples, properties, and cross‑browser support.
Extends and super in JavaScript Classes. extendsandsuperin JavaScript Classesextendsandsuperin JavaScript classes explained with inheritance examples, constructor rules, method overriding, and the trade‑offs of class hierarchies.
JavaScript Essentials for Freelance Web Developers. JavaScript Essentials for Freelance Web Developers
This guide explores JavaScript essentials for freelance web developers. It covers fundamental concepts, practical examples, and tips for mastering JavaScript.
React Unknown DOM Props: Why Component Props Reach the HTML. React Unknown DOM Props: Why Component Props Reach the HTML
React 16 passes unknown attributes to the DOM. See how component‑only props leak through JSX spreads, what React 15 did, and how to consume them.
Some of the Most‑Misunderstood Properties in CSS. Some of the Most‑Misunderstood Properties in CSS
Whilst understanding any computing language comes with practice and exposure, there are some areas of CSS that can flummox even the most seasoned of developers.
Improving Scroll Performance with Passive Event Listeners. Improving Scroll Performance with Passive Event Listeners
Use passive event listeners safely: learn when touch and wheel handlers block scrolling, when preventDefault() is required, and why handler cost is separate.
::Before and ::after Pseudo‑Elements in CSS. ::beforeand::afterPseudo‑Elements in CSSUsing the
:beforeand:afterpseudo‑elements in CSS for styling and content insertion. Here, I cover syntax, practical examples, and best practices.