Frontend Info

New Things You Should Know About HTML Here in Mid 2026 Reviews newer HTML features including permission elements, HTML-in-canvas, persistent widgets, and updated platform behavior. #html

AI coding has made CI a bottleneck, so we reworked ours to keep up Linear sped up CI and reduced runner costs by optimizing infrastructure, critical-path jobs, setup work, and test parallelization. #tools

12 CSS features you can use today with no build step Modern CSS can replace many Sass, PostCSS, and JavaScript workarounds with native browser features. #css

Detect when elements overlap with CSS Use anchor positioning, scroll timelines, and style queries to react when elements get too close or overlap. #css

In-N-Out Animation using sibling-index() sibling-index() with transitions and @starting-style to animate dynamically added, removed, and repositioned elements with minimal JavaScript.

Balancing flex items with flex-wrap: balance flex-wrap: balance to distribute wrapped flex items more evenly without breakpoint-specific layout fixes. #css

Storybook tutorial: build and test UI components in isolation Use Storybook to develop React components in isolation and test their states, interactions, accessibility, and CI behavior.

The CSS lh unit Use the lh unit to size and space elements relative to their computed line height.

Props, Composers, and Providers: the composition pattern ladder we use at Orus Choose progressively more powerful React composition patterns only when simpler prop-based APIs stop scaling #react

Rebuilding FIFA Standings Layout with CSS Subgrid Use CSS Grid and subgrid to recreate a responsive tournament bracket without restructuring the markup. #css

All this week articles at Frontend Info #27 Fetch needs error codes, staggered animations in CSS

Scroll-Driven Animations: Opposing Scroll Directions Create opposing scroll animations with CSS scroll-driven animations instead of JavaScript. #css #animation

I let React Compiler handle memoization: Here’s what actually broke React Compiler removes most manual memoization but still requires opt-outs for libraries and patterns it can’t safely optimize. #react

Modern CSS theming Build flexible light, dark, and custom themes using modern CSS variables and color features. #css

What are Git worktrees and why should I use them? Use Git worktrees to work on multiple branches simultaneously. #tools

How to Evaluate an npm Package - 2026 Edition Use a repeatable checklist to evaluate npm packages beyond download counts by verifying provenance, maintenance, and supply-chain security. #tools

Everything you need to know about Sourcemaps Source maps improve debugging but can unintentionally expose your original source code if shipped publicly. #tools

CSS vs JavaScript for animations Compare CSS and JavaScript animation approaches and choose based on control, performance, and complexity needs. #js #css

Moving away from Tailwind - and learning to structure my CSS A practical reflection on replacing utility-first styling with more structured and maintainable CSS architecture. #css

What’s new in Chrome at I/O 2026 Highlights new Chrome platform features and tooling updates announced at Google I/O 2026.