position: sticky in CSS
Achieving sticky positioning on the web was once a weighty process using JavaScript to detect scroll positions and switch styles. Now, we have position: sticky!
Articles
Front‑end Development, page 10 of 23
Front‑end web development is my personal niche, it is the art of creating visual and interactive elements for a website, including layout, design, and interactivity, using HTML, CSS, and JavaScript.
Below you will find a subset of articles from my blog specifically about Front‑End 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 articles collected together for you below.
Position: sticky in CSS. 
Using the CSS :has Pseudo‑Class. Using the CSS
:hasPseudo‑ClassThe :has CSS selector allows you to select a parent element based on whether it has a certain child or children. It's powerful but it has some limitations.
Spread Syntax in JavaScript (...). Spread Syntax in JavaScript (
...)In a nutshell, JavaScript spread syntax allows you to pass the elements of an iterable (for example an array), through to a function as individual elements.
The Safest Way to Test for NaN. The Safest Way to Test for
NaNNaN is an unusual concept in JavaScript, especially for developers newer to the language. As a result, testing for it can be more complex than first expected.
When to Use var or let or const. When to Use
varorletorconstCompare var, let, and const in JavaScript, including scope, hoisting, reassignment, block behaviour, ES6 defaults, and when each declaration fits.
HTML Video and the preload Attribute. HTML Video and the
preloadAttributeUnderstand the HTML video preload attribute, including auto, metadata, none, browser behaviour, bandwidth cost, playback expectations, and trade‑offs.
Can I Learn Front‑End Development in 2 Months? Can I Learn Front‑End Development in 2 Months?
Can you learn front‑end development in 2 months? Yes for fundamentals and small projects, no for mastery. Here is what eight focused weeks can realistically do.
Where to Find Jobs in Web Development. Where to Find Jobs in Web Development
Find web development jobs through job boards, aggregators, social networking, cold outreach, freelance routes, contract listings, and better search habits.
LocalStorage in JavaScript. localStoragein JavaScriptWith HTML5, new storage APIs became available that allow us to store small amounts of non‑essential data on the client‑side without needing cookies.
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.
Optional Chaining in JavaScript (?.). Optional Chaining in JavaScript (
?.)Introduced as part of the ES2020 spec, JavaScript optional chaining takes some of the guesswork and convoluted if statement structuring out of accessing data.
Semantic HTML. Semantic HTML
Semantic HTML explained through meaningful elements, HTML5 structure, header, nav, footer, section, figure, accessibility, and more understandable markup.
Positioning in CSS. Positioning in CSS
Understand CSS positioning with static, relative, absolute, fixed, and sticky values, including containing blocks, layout effects, and common front‑end bugs.
Margin Collapse in CSS. Margin Collapse in CSS
Understand CSS margin collapse, including vertical margins, parent‑child behaviour, margin transference, why it feels odd, and how to prevent it.
Use CSS to Change the Mouse Cursor. Use CSS to Change the Mouse Cursor
Change the mouse cursor with CSS using built‑in cursor values or custom assets, while keeping interaction cues useful and avoiding distracting effects.
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.
Cleaning up Your JavaScript Code: The Double Bang (!!) Operator. Cleaning up Your JavaScript Code: The Double Bang (
!!) OperatorThe double bang operator turns values into explicit booleans, but it is not always the clearest option. Here's when it helps and when it does not.
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.
