Understanding setTimeout() in JavaScript
An exploration of JavaScript's `setTimeout` function. Understand its nuances in component lifecycles, and learn effective timing strategies using it.
Articles
Responsive Development, page 2 of 3
Responsive development is the most commonly‑used method for creating a web page that responds to the type of device or screen size it is being displayed upon. Unlike Adaptive Development, responsive techniques generally revolve around using media queries to determine the size of the visiting device screen and available features, serving one codebase that responds to this, rather than supplying different code to different devices.
Below you will find a subset of articles from my blog specifically about Responsive Development. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are thirty‑eight collected together for you below.
Understanding setTimeout() in JavaScript. Understanding
Responsive JavaScript and the matchMedia Method. Responsive JavaScript and the
matchMediaMethodIn the past, we used event listeners on the Window to determine the physical dimensions of a document. Using matchMedia allows us to use media query syntax.
Improve Page Performance with content‑visibility. Improve Page Performance with
content‑visibilityUsing the CSS content‑visibility property we can control how an element interacts with the browser render, controlling when or how an element content renders.
Using Container Queries in CSS. Using Container Queries in CSS
Container queries are a powerful new feature in CSS that allow us to move away from view‑port based responsiveness to more explicit isolated areas of the page.
Position: sticky in CSS. position: stickyin CSSAchieving sticky positioning on the web was once a weighty process using JavaScript to detect scroll positions and switch styles. Now, we have position: sticky!
Detecting Breakpoints in React Using Chakra UI. Detecting Breakpoints in React Using Chakra UI
Use Chakra UI breakpoints in React with useBreakpoint and ThemeProvider, including responsive interface choices and custom breakpoint configuration.
Exploring CSS Viewport Units Beyond vw and vh. Exploring CSS Viewport Units Beyond
vwandvhExplore CSS viewport units beyond vw and vh, including vmin, vmax, vi, vb, svh, lvh, and dvh for mobile browser chrome, writing modes, and sizing bugs.
Understanding and Using Flexbox in CSS. Understanding and Using Flexbox in CSS
Flexbox in CSS allows for flexible, dynamic and responsive layouts. Learn how to use its properties to create efficient interfaces and avoid potential issues.
Do Websites Need to Look the Same in Every Browser? Do Websites Need to Look the Same in Every Browser?
Progressive enhancement in web development is often misunderstood: it allows us to take advantage of more modern browsers, without penalising the older ones.
Adaptive vs. Responsive Design & Development. Adaptive vs. Responsive Design & Development
Now used as almost trivial marketing buzz words, there really are significant differences between responsive and adaptive design and development techniques.
What are Array‑Like Objects in JavaScript? 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.
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.
Advanced Techniques for Responsive Web Design. Advanced Techniques for Responsive Web Design
Discover advanced responsive web design techniques with CSS Grid, `clamp()`, container queries, and JS enhancements for performance‑optimised, adaptive sites.
Leveraging JavaScript Frameworks for Efficient Development. Leveraging JavaScript Frameworks for Efficient Development
JavaScript frameworks streamline development with reusable components, state management, and optimised rendering. Here, I compare React, Vue.js, and Angular.
Using Viewport Units in CSS: vw and vh. Using Viewport Units in CSS:
vwandvhUse CSS viewport units vw and vh for responsive sizing, understanding percentage‑of‑viewport behaviour, full‑screen layouts, and mobile browser caveats.
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.
Optimising Website Performance with HTML, CSS, and JavaScript. Optimising Website Performance with HTML, CSS, and JavaScript
Boost website performance with HTML, CSS & JavaScript optimisation. I explore techniques: lazy loading, critical CSS, script deferment for faster load times.
Understanding Phantom window.resize Events in iOS. Understanding Phantom
window.resizeEvents in iOSUnderstand phantom window.resize events in iOS Safari, including dynamic browser UI, viewport changes, orientation, user interaction, and mitigation patterns.
