Alan Dávalos
@alangdm.bsky.social
FE Engineer @TRAILBLAZER - Ex-LY - Anime/Manga/Games Enthusiast - Mexicano de 💚❤️ - 日本語はアニメを見ながら学ぶものです - Opinions are mine
Reposted by Alan Dávalos
Made a new Web Component: RichInput. It's a drop-in replacement for text-based 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/
A "stylepattern" attribute accepts a regex pattern and the resulting capture groups can be styled using CSS `::part(group-n)`
keithclark.github.io/richinput/
June 23, 2025 at 8:47 PM
Made a new Web Component: RichInput. It's a drop-in replacement for text-based 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/
A "stylepattern" attribute accepts a regex pattern and the resulting capture groups can be styled using CSS `::part(group-n)`
keithclark.github.io/richinput/
Reposted by Alan Dávalos
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!
Improving Prettier performance with the new CLI
The new Prettier CLI - what it is and how it came to be.
e18e.dev
June 23, 2025 at 10:26 AM
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!
Reposted by Alan Dávalos
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...
webkit.org/blog/16967/t...
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.
webkit.org
May 22, 2025 at 6:36 PM
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...
webkit.org/blog/16967/t...
Reposted by Alan Dávalos
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...
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...
Node.js — Node.js Releases
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
May 1, 2025 at 4:28 PM
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...
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...
Reposted by Alan Dávalos
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.
(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.
April 26, 2025 at 9:53 AM
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.
(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.
Reposted by Alan Dávalos
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.)
First, styling the in-page part of controls + the popover for <select>. (Later we’ll do popovers for more things.)
March 21, 2025 at 11:21 PM
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.)
First, styling the in-page part of controls + the popover for <select>. (Later we’ll do popovers for more things.)
Reposted by Alan Dávalos
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!
Migrating the ecosystem to ES modules
An update on the progress we're making migrating packages to ES modules
e18e.dev
March 20, 2025 at 10:27 AM
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!
Reposted by Alan Dávalos
“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...
blog.lusito.info/stop-using-a...
Stop Using and Recommending React
I have used React for a long time. Trust me when I tell you: There is no reason to use it and a lot of reasons against it. This is going to be a long explanation, but bear with me!
blog.lusito.info
March 19, 2025 at 1:38 AM
“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...
blog.lusito.info/stop-using-a...
Reposted by Alan Dávalos
Home Assistant made a technical decision almost a decade ago that lasted 🤯
February 27, 2025 at 7:51 PM
Home Assistant made a technical decision almost a decade ago that lasted 🤯
Reposted by Alan Dávalos
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)
Bundling dependencies (and when not to do it)
A brief write up on when you should or shouldn't bundle dependencies
e18e.dev
February 14, 2025 at 12:05 PM
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)
Reposted by Alan Dávalos
🚀 🆕 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
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
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...
lea.verou.me
February 12, 2025 at 3:03 PM
🚀 🆕 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
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
Reposted by Alan Dávalos
`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
When Node 18 hits EOL in less than 3 months, we can finally drop CJS builds and go ESM-only
[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...
github.com
February 11, 2025 at 10:12 PM
`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
When Node 18 hits EOL in less than 3 months, we can finally drop CJS builds and go ESM-only
Reposted by Alan Dávalos
<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);
}
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);
}
February 5, 2025 at 9:07 PM
<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);
}
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);
}
Reposted by Alan Dávalos
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.
@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.
February 5, 2025 at 7:12 PM
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.
@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.
Reposted by Alan Dávalos
Reposted by Alan Dávalos
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.
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.
January 10, 2025 at 8:22 PM
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.
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.
Reposted by Alan Dávalos
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.
January 10, 2025 at 8:14 AM
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.
Reposted by Alan Dávalos
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 🩵
The journey so far
Our journey so far as a community leading into 2025
e18e.dev
January 6, 2025 at 4:38 PM
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 🩵
Reposted by Alan Dávalos
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.
css-tricks.com/csswg-minute...
† Still a bad name.
December 10, 2024 at 9:48 PM
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.
css-tricks.com/csswg-minute...
† Still a bad name.
Reposted by Alan Dávalos
📝 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
`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
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.
benmyers.dev
December 7, 2024 at 7:57 PM
📝 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
`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
Reposted by Alan Dávalos
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…
infrequently.org/2024/11/if-not-r…
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...
infrequently.org
November 30, 2024 at 1:21 AM
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…
infrequently.org/2024/11/if-not-r…
Reposted by Alan Dávalos
Implemented scoped custom element registry in WebKit: commits.webkit.org/286828@main
We now have two interoperable implementations!
We now have two interoperable implementations!
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...
commits.webkit.org
November 20, 2024 at 1:48 AM
Implemented scoped custom element registry in WebKit: commits.webkit.org/286828@main
We now have two interoperable implementations!
We now have two interoperable implementations!
Reposted by Alan Dávalos
Reposted by Alan Dávalos
November 17, 2024 at 1:00 PM