Alan Dávalos

Made a new Web Component: RichInput. It's a drop-in replacement for text-based <input> elements that can colourise user input.

A "stylepattern" attribute accepts a regex pattern and the resulting capture groups can be styled using CSS `::part(group-n)`

keithclark.github.io/richinput/

Improving Prettier performance with the new CLI The new Prettier CLI - what it is and how it came to be.

We've been working hard at getting the new prettier cli released for some months now, and here it is! Huge speed ups and such a great collab between @e18e.dev and the prettier team 🩵 big thanks to @fabiospampinato.bsky.social leading this!

Two lines of Cross-Document View Transitions code you can use on every website today Arguably, the most profound thing about the web is the ability to link one page to another.

The one where I muse about how this simple bit of code radically changes how the web itself seems to behave…

webkit.org/blog/16967/t...

Node.js — Node.js Releases Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Happy *Publish All NPM Packages as Standard JS Modules Only Day* to all who celebrate! 🎉

All supported versions of Node now support require() of standard JS modules, aka require(esm).

So add type: "module" to your package.json, simplify your build, and spark some joy!

nodejs.org/en/about/pre...

I'm optimistic that the next 12 months is going to a very special time for JS performance ⚡

(This applies to developer workflows & end-users.)

Several large-scale independent multi-year language, runtime, tooling, & library investments are approaching the payback stage all around the same time.

Screenshot of CSS Form Control Styling Level 1 First Public Working Draft web standard from the W3C's CSS Working Group

There it is! Finally, a real solution for how to style all of the HTML form controls using your own custom CSS to change anything — building on an interoperable UA set of defaults.

First, styling the in-page part of controls + the popover for <select>. (Later we’ll do popovers for more things.)

Migrating the ecosystem to ES modules An update on the progress we're making migrating packages to ES modules

in the @e18e.dev community, we've been hard at work helping migrate packages to ES modules recently. have a read about it in the new blog post!

“You can't say it any nicer: You can only write stable, well-performing React code if you have a team of exclusively experienced React developers.”

blog.lusito.info/stop-using-a...

I've used GitHub projects for my job's GHE instance and it works surprisingly good!

Especially since in the modern ones you have the Kanban and the table views, the charts, iterations, and a few other things

Home Assistant made a technical decision almost a decade ago that lasted 🤯

Devices - 『Pokémon Sleep』公式サイト 『Pokémon Sleep』とスマートウォッチとの連携が可能になりました。各種連携方法をチェックして、もっと身近に『Pokémon Sleep』を楽しもう！

They are supported!
Fitbit and Pixel watches are too

www.pokemonsleep.net/devices/

ESLint now officially supports linting of CSS - ESLint - Pluggable JavaScript Linter A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

🚀 ESLint now officially supports linting CSS!

Read more:
eslint.org/blog/2025/02...

Bundling dependencies (and when not to do it) A brief write up on when you should or shouldn't bundle dependencies

some thoughts on bundling dependencies in libraries and dev tools. especially given the great effort from the community lately, we need to bundle less and less (in consumed packages)

Style-observer: JS to observe CSS property changes, for reals • Lea Verou I cannot count the number of times in my career I wished I could run JS in response to CSS property changes, regardless of what triggered them: media queries, user actions, or even other JS. Use cases...

🚀 🆕 style-observer: A robust solution for observing CSS property changes in JS.

Developed with @d12n.me’s help over the last month.

Made possible by the pioneering work of @bram.us, Artem Godin, @janeori.propjockey.io and many others!

Blog post: lea.verou.me/blog/2025/st...
Docs: observe.style

[v20.x] backport unflagging of require(esm) to v20 by joyeecheung · Pull Request #56927 · nodejs/node This backport includes the following PRs with modifications: See summary module: eliminate performance cost of ESM syntax detection for CommonJS entry points #52093: Adapted to the lack of packag...

`require(esm)` got backported to Node 20! 🎉

When Node 18 hits EOL in less than 3 months, we can finally drop CJS builds and go ESM-only

<table> highlighting with CSS :has() 💡

td:has(~ td:hover), /* previous sibling cells */
table:has(td:nth-of-type(3):hover) /* column cells */
tr:not(:first-of-type):has(~ tr:hover)
td:nth-of-type(3) {
background: var(--highlighted);
}

A table that gives ideal versus actual page size and JavaScript size: The ideal JS weight is under 365 kilobytes. The actual median JS weight is 650 kilobytes. The actual JS weight at the 90th percentile is 1825 kilobytes. The ideal total page weight is under 1.4 megabytes. The actual median page weight is 2.6 megabytes. The actual JS weight at the 90th percentile is 11.1 megabytes.

I recently published my annual dive into the
@httparchive.org, focusing on page growth, #webperf and #ux:

www.speedcurve.com/blog/page-bl...

A common question is "How big SHOULD my pages be?" According to analysis by @infrequently.org, the ideal page should be <1.4 MB with <365 KB coming from JS.

Move on to ESM-only Let's move on to ESM-only

New blog post! Let's move to ESM! 😈

👀
antfu.me/posts/move-o...

Preact is truly amazing.

Same React app. One is bundled as is.

Another uses preact/compat to alias React imports and swaps in Preact under the hood.

Bundle size (gzip):
React: ~140KB
Preact: ~8KB

All of this by just changing a few lines and installing a couple of packages.

premium segment phones make up a tiny fraction of the overall smartphone market. *MOST* devices cost *much* less than $350 (new, unlocked), which is $85 less than the cheapest new iPhone you can buy.

Single-core CPU performance continues to be abysmal in the Android ecosystem. And it's worse than even this looks because *most* phones are more than 2 years old.

Cannot emphasise enough how out of touch web developers have become. The blue dotted line in this chart is worldwide average selling price for smartphones over the past decade, and the second chart is CPU performance.

The journey so far Our journey so far as a community leading into 2025

Written a little about the journey to @e18e.dev and what's ahead for the community in 2025. I'm so happy to see how many great minds have been connected, and the awesome projects they're working on 🩵

Good writeup from @css-tricks.com on the situation with "Masonry"† and whether it belongs as part of grid or its own `display` type. It's largely neck-and-neck and won't move unless some minds on either side change.

css-tricks.com/csswg-minute...

† Still a bad name.

Don’t Use aria-label on Static Text Elements Don’t use the aria-label or aria-labelledby attributes on divs, spans, or other elements representing static/noninteractive text-level semantics, unless you’re also updating roles.

📝 New post!

`aria-label` and `aria-labelledby` aren't allowed on divs, spans, and other static text elements out of the box, and *most* screenreaders won't announce them.

#accessibility #a11y

If Not React, Then What? - Infrequently Noted Frameworkism is now the dominant creed of today's frontend discourse, and it's bullshit. We owe it to ourselves and to our users to reject dogma and embrace engineering as a discipline that strives to...

I've come to understand what's happening in frontend's decade-long failure to deliver decent user experiences as a sort of epistemic closure. I'm calling it "frameworkism", and the epicenter is now React. Here's a lot of words on why we should all reject it:

infrequently.org/2024/11/if-not-r…

Enable scoped custom element registry by default · WebKit/WebKit@f4b8ec1 https://bugs.webkit.org/show_bug.cgi?id=283379 Reviewed by Wenson Hsieh. Enable this feature by default now since it passes all web platform tests except ones for customized builtins. * Source/W...

Implemented scoped custom element registry in WebKit: commits.webkit.org/286828@main
We now have two interoperable implementations!

Take this `<dialog>` too

classic; cart in the top right, pushes the whole page left to reveal your cart sidenav

nerdy.dev/have-a-dialog #CSS

This is the way (for most sites):

gov.uk/service-manual/t…

"When is the right time to share our excitement about new web features?"

rachelandrew.co.uk/archives/202...

Good thoughts on a tricky problem by @rachelandrew.bsky.social

Hey there, I made an account here too now that the other side is not fun anymore.

I haven't been posting much lately but when I do it will likely be front-end stuff (mostly web components and CSS).