Agénor Debriat
@agenordebriat.bsky.social
Department manager & lead front-end developer (Lille, France) • Proud father of two • Music lover • Sports fanatic
Reposted by Agénor Debriat
I’m just happy I’m getting more reputable dev outlets to share my Greatest Of All Time Says Everyone image:
bsky.app/profile/frid...
bsky.app/profile/frid...
OpenAI, ARIA, and SEO: Making the Web Worse: "Accessibility practitioners who’ve bothered to check in on the ChatGPT interfaces over the years have demonstrated the OpenAI team largely fails to understand HTML, let alone any aspect of accessibility." #a11y adrianroselli.com/2025/10/open...
OpenAI, ARIA, and SEO: Making the Web Worse
OpenAI has announced it’s launched a new browser, Atlas, with ChatGPT built in. For those familiar with ARIA, OpenAI outlines what to expect (I left the code as I found it, other than removing the…
adrianroselli.com
November 21, 2025 at 6:15 PM
I’m just happy I’m getting more reputable dev outlets to share my Greatest Of All Time Says Everyone image:
bsky.app/profile/frid...
bsky.app/profile/frid...
Reposted by Agénor Debriat
We’re super thrilled to have Spline master Maksim Borisov break down the new Timeline tool in Spline!
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
November 14, 2025 at 11:13 AM
We’re super thrilled to have Spline master Maksim Borisov break down the new Timeline tool in Spline!
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
Reposted by Agénor Debriat
📸 we've just released Nuxt Image v2! ✨
💪 full TS support with typed providers + modifiers
⚡ IPX v3
⚗️ server-side image utilities
🎨 template ref access
🌐 new Shopify & GitHub providers
happy optimizing ❤️
👉 read more at nuxt.com/blog/nuxt-i...
💪 full TS support with typed providers + modifiers
⚡ IPX v3
⚗️ server-side image utilities
🎨 template ref access
🌐 new Shopify & GitHub providers
happy optimizing ❤️
👉 read more at nuxt.com/blog/nuxt-i...
November 5, 2025 at 10:49 AM
📸 we've just released Nuxt Image v2! ✨
💪 full TS support with typed providers + modifiers
⚡ IPX v3
⚗️ server-side image utilities
🎨 template ref access
🌐 new Shopify & GitHub providers
happy optimizing ❤️
👉 read more at nuxt.com/blog/nuxt-i...
💪 full TS support with typed providers + modifiers
⚡ IPX v3
⚗️ server-side image utilities
🎨 template ref access
🌐 new Shopify & GitHub providers
happy optimizing ❤️
👉 read more at nuxt.com/blog/nuxt-i...
Reposted by Agénor Debriat
I remember how excited I was when border-radius became a thing... If only I'd know what would eventually be possible with it about 15 years later 😅
corner-shape takes border-radius to an all new level...
@cbolson.bsky.social has made a handy generator for it: www.corner-shape.com
corner-shape takes border-radius to an all new level...
@cbolson.bsky.social has made a handy generator for it: www.corner-shape.com
October 31, 2025 at 6:38 PM
I remember how excited I was when border-radius became a thing... If only I'd know what would eventually be possible with it about 15 years later 😅
corner-shape takes border-radius to an all new level...
@cbolson.bsky.social has made a handy generator for it: www.corner-shape.com
corner-shape takes border-radius to an all new level...
@cbolson.bsky.social has made a handy generator for it: www.corner-shape.com
Reposted by Agénor Debriat
Don't [...spread] or .split() your strings!
Use Intl.Segmenter API. Available in every JS runtime
Use Intl.Segmenter API. Available in every JS runtime
October 23, 2025 at 2:55 PM
Don't [...spread] or .split() your strings!
Use Intl.Segmenter API. Available in every JS runtime
Use Intl.Segmenter API. Available in every JS runtime
Reposted by Agénor Debriat
📕 The Temporal Dead Zone, or why the TypeScript codebase is littered with var statements
👉🏻 The TypeScript codebase still uses `var` statements due to the performance benefits gained by avoiding the Temporal Dead Zone.
https://vincentrolfs.dev/blog/ts-var
👉🏻 The TypeScript codebase still uses `var` statements due to the performance benefits gained by avoiding the Temporal Dead Zone.
https://vincentrolfs.dev/blog/ts-var
October 19, 2025 at 9:00 AM
📕 The Temporal Dead Zone, or why the TypeScript codebase is littered with var statements
👉🏻 The TypeScript codebase still uses `var` statements due to the performance benefits gained by avoiding the Temporal Dead Zone.
https://vincentrolfs.dev/blog/ts-var
👉🏻 The TypeScript codebase still uses `var` statements due to the performance benefits gained by avoiding the Temporal Dead Zone.
https://vincentrolfs.dev/blog/ts-var
Reposted by Agénor Debriat
The docs for Formisch will probably be available in the next few days 🧱
October 13, 2025 at 12:40 AM
The docs for Formisch will probably be available in the next few days 🧱
Reposted by Agénor Debriat
This is making such a difference. Truly next-level emulation.
New in Polypane 26: all our devices emulate the correct `safe-area-inset-*` CSS environment variables, as well as the correct small viewport height.
Toggle the visualization from the emulation settings to see where they're located. Like browser UI the svh overlay scrolls away when you scroll down.
Toggle the visualization from the emulation settings to see where they're located. Like browser UI the svh overlay scrolls away when you scroll down.
October 10, 2025 at 3:30 PM
This is making such a difference. Truly next-level emulation.
Reposted by Agénor Debriat
This uses JS and a circle for each dot. However, it can be done with pure CSS and one element using this technique frontendmasters.com/blog/pure-cs...
October 10, 2025 at 5:32 PM
This uses JS and a circle for each dot. However, it can be done with pure CSS and one element using this technique frontendmasters.com/blog/pure-cs...
Reposted by Agénor Debriat
💡Vue Tip: Getting the Previous Value
Since Vue 3.4+ you can get the previous value returned by the computed property accessing the first argument of the getter.
Since Vue 3.4+ you can get the previous value returned by the computed property accessing the first argument of the getter.
September 17, 2025 at 4:00 PM
💡Vue Tip: Getting the Previous Value
Since Vue 3.4+ you can get the previous value returned by the computed property accessing the first argument of the getter.
Since Vue 3.4+ you can get the previous value returned by the computed property accessing the first argument of the getter.
Reposted by Agénor Debriat
Coming soon: all websites & apps built by Webflow AI code gen will be powered by Astro under the hood. That’s a lot of new Astro developers! 🚀
September 17, 2025 at 4:48 PM
Coming soon: all websites & apps built by Webflow AI code gen will be powered by Astro under the hood. That’s a lot of new Astro developers! 🚀
Reposted by Agénor Debriat
If you ever feel like you don't know what you're doing, just keep in mind Spotify sent out an email today with an image that is 8736x11648 in dimensions and 19.6MB in filesize.
So. You're fine.
So. You're fine.
September 12, 2025 at 6:04 PM
If you ever feel like you don't know what you're doing, just keep in mind Spotify sent out an email today with an image that is 8736x11648 in dimensions and 19.6MB in filesize.
So. You're fine.
So. You're fine.
Reposted by Agénor Debriat
I just don't get why anyone would use:
```
display: flex;
flex-direction: column
```
when `display: grid` is supported, shorter to write and allows for a lot more flexibility if you want more from your layout.
#CSS
```
display: flex;
flex-direction: column
```
when `display: grid` is supported, shorter to write and allows for a lot more flexibility if you want more from your layout.
#CSS
August 14, 2025 at 1:44 PM
I just don't get why anyone would use:
```
display: flex;
flex-direction: column
```
when `display: grid` is supported, shorter to write and allows for a lot more flexibility if you want more from your layout.
#CSS
```
display: flex;
flex-direction: column
```
when `display: grid` is supported, shorter to write and allows for a lot more flexibility if you want more from your layout.
#CSS
Reposted by Agénor Debriat
🥳 CSS functions have arrived*!!! 🥳
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
una.im | 5 Useful CSS functions using the new @function rule
CSS custom functions are a gamechanger. Here are 5 really useful examples.
una.im
August 13, 2025 at 6:00 PM
🥳 CSS functions have arrived*!!! 🥳
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
And they are *AWESOME*
Now, you can do:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
Lean more: una.im/5-css-functi...
(*arrived = in the latest stable Chrome)
Reposted by Agénor Debriat
🚴💨 The Fastest Site in the Tour de France
Every bike brand claims to have the fastest bike, but who has the fastest site?
csswizardry.com/2025/07/the-...
Every bike brand claims to have the fastest bike, but who has the fastest site?
csswizardry.com/2025/07/the-...
The Fastest Site in the Tour de France – CSS Wizardry
How fast are pro cycling teams’ and manufacturers’ websites? A CrRRUX-powered deep dive into bike brand performance, visibility, and missed opportunities.
csswizardry.com
August 8, 2025 at 5:25 PM
🚴💨 The Fastest Site in the Tour de France
Every bike brand claims to have the fastest bike, but who has the fastest site?
csswizardry.com/2025/07/the-...
Every bike brand claims to have the fastest bike, but who has the fastest site?
csswizardry.com/2025/07/the-...
Reposted by Agénor Debriat
Create a larger, invisible hit area around the element, making it easier to click without layout shift!
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
August 5, 2025 at 2:56 PM
Create a larger, invisible hit area around the element, making it easier to click without layout shift!
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
How? Use a pseudo element with `position: absolute` + `inset: -{value}px`
Demo to play with: codepen.io/una/pen/gbaWdmy
(Tip from dmytro on X, who I can't find on Bsky: x.com/pqoqubbw/sta...)
Reposted by Agénor Debriat
The @vuejs.org version of Formisch will drop this week! Shoutout to @thealexlichter.com for supervising my code! This is what the API will probably look like:
July 21, 2025 at 4:18 AM
The @vuejs.org version of Formisch will drop this week! Shoutout to @thealexlichter.com for supervising my code! This is what the API will probably look like:
Glad to be sponsoring @johnsoncodehk.bsky.social. Better late than never. Learning about the Vue Language Tools premium features reminded me how much I benefit from his work almost every day, and that even a small contribution might help make a difference.
Join me: github.com/sponsors/joh...
Join me: github.com/sponsors/joh...
Sponsor @johnsoncodehk on GitHub Sponsors
github.com
July 15, 2025 at 10:53 PM
Glad to be sponsoring @johnsoncodehk.bsky.social. Better late than never. Learning about the Vue Language Tools premium features reminded me how much I benefit from his work almost every day, and that even a small contribution might help make a difference.
Join me: github.com/sponsors/joh...
Join me: github.com/sponsors/joh...
Reposted by Agénor Debriat
Nuxt 4.0 is here at last … and it's all about DX ✨
🗂️ app/ directory for better organisation
🔄 smarter data fetching
⚡️ a faster CLI with socket communication
🔧 improved TypeScript integration
... and a smooth upgrade experience. 💚
👉 nuxt.com/blog/v4
🗂️ app/ directory for better organisation
🔄 smarter data fetching
⚡️ a faster CLI with socket communication
🔧 improved TypeScript integration
... and a smooth upgrade experience. 💚
👉 nuxt.com/blog/v4
Announcing Nuxt 4.0 · Nuxt Blog
Nuxt 4.0 is here! A thoughtful evolution focused on developer experience, with better project organization, smarter data fetching, and improved type safety.
nuxt.com
July 15, 2025 at 10:39 PM
Nuxt 4.0 is here at last … and it's all about DX ✨
🗂️ app/ directory for better organisation
🔄 smarter data fetching
⚡️ a faster CLI with socket communication
🔧 improved TypeScript integration
... and a smooth upgrade experience. 💚
👉 nuxt.com/blog/v4
🗂️ app/ directory for better organisation
🔄 smarter data fetching
⚡️ a faster CLI with socket communication
🔧 improved TypeScript integration
... and a smooth upgrade experience. 💚
👉 nuxt.com/blog/v4
Reposted by Agénor Debriat
One of the coolest websites (and product) I've seen made with @nuxt.com 🔥
Props to the Perplexity team for this! ✨
comet.perplexity.ai/
Props to the Perplexity team for this! ✨
comet.perplexity.ai/
Perplexity Comet
Cosmic Curiosity
comet.perplexity.ai
July 11, 2025 at 4:43 PM
One of the coolest websites (and product) I've seen made with @nuxt.com 🔥
Props to the Perplexity team for this! ✨
comet.perplexity.ai/
Props to the Perplexity team for this! ✨
comet.perplexity.ai/
Reposted by Agénor Debriat
Sticky Revealing Footer, by @bell.bz (@piccalil.li):
https://piccalil.li/blog/sticky-revealing-footer/
#navigation #css #positioning
https://piccalil.li/blog/sticky-revealing-footer/
#navigation #css #positioning
Sticky Revealing Footer
piccalil.li
June 26, 2025 at 2:30 PM
Sticky Revealing Footer, by @bell.bz (@piccalil.li):
https://piccalil.li/blog/sticky-revealing-footer/
#navigation #css #positioning
https://piccalil.li/blog/sticky-revealing-footer/
#navigation #css #positioning
Reposted by Agénor Debriat
So what else could we do? Use an SVG filter!✨
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here bsky.app/profile/anat...) that makes it stepped.
Works for all gradient types - see this @codepen.io demo codepen.io/thebabydino/... 😼
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here bsky.app/profile/anat...) that makes it stepped.
Works for all gradient types - see this @codepen.io demo codepen.io/thebabydino/... 😼
June 22, 2025 at 9:19 AM
So what else could we do? Use an SVG filter!✨
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here bsky.app/profile/anat...) that makes it stepped.
Works for all gradient types - see this @codepen.io demo codepen.io/thebabydino/... 😼
Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here bsky.app/profile/anat...) that makes it stepped.
Works for all gradient types - see this @codepen.io demo codepen.io/thebabydino/... 😼
Reposted by Agénor Debriat
Highly recommend checking out @vitest.dev' Browser Mode. Not only did the setup get simpler, but to my surprise, tests got also roughly twice as fast. I only needed to rewrite one bad test suite (out of hundreds) and change the way I import MSW. Absolutely magical stuff 🪄
Wow!! @vitest.dev Browser mode is GOATED!! I moved all my test suite from playwright test to vitest browser, and things became a helluva lot simpler.
Requirements:
- Interactive draggability test
- Cross browser testing
Thread 👇
Requirements:
- Interactive draggability test
- Cross browser testing
Thread 👇
June 21, 2025 at 9:44 AM
Highly recommend checking out @vitest.dev' Browser Mode. Not only did the setup get simpler, but to my surprise, tests got also roughly twice as fast. I only needed to rewrite one bad test suite (out of hundreds) and change the way I import MSW. Absolutely magical stuff 🪄
Reposted by Agénor Debriat
Biome v2—codename: Biotype is here! The first type-aware linter that doesn't require tsc
🔐 Type-aware lint rules
🧑🚒 Plugins
📚 Monorepo support
📝 Revamped, configurable import sorting
🧐 Linter domains
🙅♀️ Bulk suppressions
👩✈️ Analyzer assist
🔐 Type-aware lint rules
🧑🚒 Plugins
📚 Monorepo support
📝 Revamped, configurable import sorting
🧐 Linter domains
🙅♀️ Bulk suppressions
👩✈️ Analyzer assist
June 17, 2025 at 1:55 PM
Biome v2—codename: Biotype is here! The first type-aware linter that doesn't require tsc
🔐 Type-aware lint rules
🧑🚒 Plugins
📚 Monorepo support
📝 Revamped, configurable import sorting
🧐 Linter domains
🙅♀️ Bulk suppressions
👩✈️ Analyzer assist
🔐 Type-aware lint rules
🧑🚒 Plugins
📚 Monorepo support
📝 Revamped, configurable import sorting
🧐 Linter domains
🙅♀️ Bulk suppressions
👩✈️ Analyzer assist