Front End World

Testing Google’s “modern-web-guidance” skill against a real React app

A test of the modern-web-guidance skill against a real React app, to see whether it actually catches stale frontend patterns and surfaces current best practices.

https://alfy.blog/2026/07/25/modern-web-guidance.html

CSS Centering: Grid vs. Flexbox vs. Anchor Positioning

Learn how to choose between CSS Grid, Flexbox, and Anchor Positioning to build responsive, accessible layouts that stay centered when content and viewport sizes change.

https://www.syncfusion.com/blogs/post/css-centering-position-guide?via=dailydev

Introducing <hic-pageflip>: A Pageflip/Flipbook Custom Element powered by HTML-in-Canvas

Way back in 2005, I used a Flash PageFlip component to display a book on a website. Ever since, recreating a modern version has been on my backlog to investigate. With the arrival of the experimental HTML-in-Canvas API, we can finally bring it back — this time displaying real HTML.

https://www.bram.us/2026/09/02/html-in-canvas-pageflip/

Feature Detecting “Undetectable” CSS Features with @supports named-feature()

In CSS you can feature detect support for things like selectors, properties + values, and at-rules using @supports. But how do you feature detect a change to an underlying implementation, or two existing properties suddenly working together? Enter @supports named-feature(), a function designed to expose these specific capabilities without relying on hacky workarounds.

https://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/

Creating Web Widgets Using the Document Picture-in-Picture API

The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it.

https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/

Your React app doesn’t need all that JavaScript

Reduce React complexity using native browser features: :has() for dark mode, for accordions, the Popover API, scroll-snap carousels, and CSS animations.

https://blog.logrocket.com/your-react-app-doesnt-need-javascript/

Building a Mouse-Following Square Lens Effect with Three.js and GLSL

A step-by-step tutorial on using Three.js and GLSL to create a mouse-following square lens effect with image distortion, RGB shifting, and animated shader effects.

https://tympanus.net/codrops/2026/08/25/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl/

Controlling when CSS custom property values are computed

The default might not be what you expect, and it has a big impact on your styles.

https://jakearchibald.com/2026/css-custom-property-compute-time/

cnfast vs cn(): Is the 7x speedup real in React?

cnfast claims a 7x faster cn() for shadcn/ui. I benchmarked it in Node, Chrome, and a real React dashboard, the results don't match the hype.

https://blog.logrocket.com/cnfast-vs-cn-react/

Styling Linear for the future with StyleX after styled-components

A long-running migration that became an exercise in tooling, automation, and designing clearer boundaries for both humans and agents.

https://linear.app/now/styling-linear-for-the-future-stylex

Balancing flex items with flex-wrap: balance

A look at how flex items wrap and how to balance them across lines.

https://ishadeed.com/article/flex-wrap-balance/

Every major browser engine is converging on JPEG XL. Keep your fallbacks anyway

Safari already decodes JPEG XL and Firefox targets default support in version 157, but Firefox's SDR-only HDR handling, no Chrome milestone, and near-parity with lossless WebP keep fallbacks necessary.

https://blog.invidelabs.com/firefox-chrome-jpeg-xl-support/?via=dailydev

How to group array items with Object.groupBy()

Group an array by a property with Object.groupBy() instead of a reduce loop. See a realistic expense example and Map.groupBy() for object keys.

https://flaviocopes.com/javascript-object-groupby/

High-Frequency Real-Time Data in React: From Ring Buffers to OffscreenCanvas

React is great at many things. But if you've ever tried pushing thousands of data points per second through it, you'll quickly learn that React isn't a firehose. It's more like a garden hose. Try forc

https://www.freecodecamp.org/news/high-frequency-real-time-data-in-react-from-ring-buffers-to-offscreencanvas?via=dailydev