Lafeuille
@flafeuille.bsky.social
web developper;
keen on pretty things, kittens and bad faith;
felixdenoix.fr
keen on pretty things, kittens and bad faith;
felixdenoix.fr
Gallery
texturefabrik.com
November 7, 2025 at 11:23 AM
Reposted by Lafeuille
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
November 7, 2025 at 4:37 AM
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
Reposted by Lafeuille
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 Lafeuille
It manages 8+ profiles and even shows a "4" badge when there are more. Fork it, tweak it, and add ARIA for improved accessibility! 👇
🔗 codepen.io/ugi-dev/pen...
Here's the straightforward JavaScript logic for this:
🔗 codepen.io/ugi-dev/pen...
Here's the straightforward JavaScript logic for this:
November 4, 2025 at 4:20 AM
It manages 8+ profiles and even shows a "4" badge when there are more. Fork it, tweak it, and add ARIA for improved accessibility! 👇
🔗 codepen.io/ugi-dev/pen...
Here's the straightforward JavaScript logic for this:
🔗 codepen.io/ugi-dev/pen...
Here's the straightforward JavaScript logic for this:
tympanus.net
October 30, 2025 at 10:43 AM
Reposted by Lafeuille
responsive CSS pinned sidebar transition 📌
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
October 14, 2025 at 2:01 PM
responsive CSS pinned sidebar transition 📌
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
.layout:has(:popover-open) {
grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
translate: 0 var(--ctrl);
height: var(--extend);
}
actual zero JS for the layout transition here
so many details to play with! 🧑🍳
Reposted by Lafeuille
‼️🚨 cool tool alert 🔔‼️
😎 Wobble Web 🆒
visual & code editor for making and sharing small websites ✨💕
👉 wwwobble.org
* create and share directly from your phone
* add images, text, && custom elements
* download the code or share a link
* responsive mobile layout
* open source and extensible…
😎 Wobble Web 🆒
visual & code editor for making and sharing small websites ✨💕
👉 wwwobble.org
* create and share directly from your phone
* add images, text, && custom elements
* download the code or share a link
* responsive mobile layout
* open source and extensible…
Wobble Web
wwwobble.org
September 12, 2025 at 11:16 AM
‼️🚨 cool tool alert 🔔‼️
😎 Wobble Web 🆒
visual & code editor for making and sharing small websites ✨💕
👉 wwwobble.org
* create and share directly from your phone
* add images, text, && custom elements
* download the code or share a link
* responsive mobile layout
* open source and extensible…
😎 Wobble Web 🆒
visual & code editor for making and sharing small websites ✨💕
👉 wwwobble.org
* create and share directly from your phone
* add images, text, && custom elements
* download the code or share a link
* responsive mobile layout
* open source and extensible…
Reposted by Lafeuille
What is this dark magic? 🪄 It's pure #CSS horizontal slide on vertical scroll mix!
With CSS scroll-driven animations + `position: sticky`! 😼
Check out the demo on @codepen.io:
✨ codepen.io/thebabydino/...
Enjoy!
#scroll #scrollAnimation
(posted this before, but Bluesky didn't have video then)
With CSS scroll-driven animations + `position: sticky`! 😼
Check out the demo on @codepen.io:
✨ codepen.io/thebabydino/...
Enjoy!
#scroll #scrollAnimation
(posted this before, but Bluesky didn't have video then)
November 21, 2024 at 9:36 AM
What is this dark magic? 🪄 It's pure #CSS horizontal slide on vertical scroll mix!
With CSS scroll-driven animations + `position: sticky`! 😼
Check out the demo on @codepen.io:
✨ codepen.io/thebabydino/...
Enjoy!
#scroll #scrollAnimation
(posted this before, but Bluesky didn't have video then)
With CSS scroll-driven animations + `position: sticky`! 😼
Check out the demo on @codepen.io:
✨ codepen.io/thebabydino/...
Enjoy!
#scroll #scrollAnimation
(posted this before, but Bluesky didn't have video then)
Reposted by Lafeuille
Newsletter: This is the Hater's Guide To The AI Bubble: genAI is nothing like Uber or Amazon Web Services, there are no profitable genAI companies, agents do not and cannot exist, there is no AI SaaS story, and everything rides - and dies - on selling GPUs.
www.wheresyoured.at/the-haters-g...
www.wheresyoured.at/the-haters-g...
The Hater's Guide To The AI Bubble
Hey! Before we go any further — if you want to support my work, please sign up for the premium version of Where’s Your Ed At, it’s a $7-a-month (or $70-a-year) paid product where every week you get a ...
www.wheresyoured.at
July 21, 2025 at 4:48 PM
Newsletter: This is the Hater's Guide To The AI Bubble: genAI is nothing like Uber or Amazon Web Services, there are no profitable genAI companies, agents do not and cannot exist, there is no AI SaaS story, and everything rides - and dies - on selling GPUs.
www.wheresyoured.at/the-haters-g...
www.wheresyoured.at/the-haters-g...
Reposted by Lafeuille
Lots of folks ask me how the scroll-tracking Table of Contents works on my blog, and the answer is "IntersectionObserver and a bunch of fiddling in JS".
✨ But an upcoming CSS feature will make this way easier! @una.im explains in this wonderful blog post:
una.im/scroll-targe...
✨ But an upcoming CSS feature will make this way easier! @una.im explains in this wonderful blog post:
una.im/scroll-targe...
August 12, 2025 at 6:57 PM
Lots of folks ask me how the scroll-tracking Table of Contents works on my blog, and the answer is "IntersectionObserver and a bunch of fiddling in JS".
✨ But an upcoming CSS feature will make this way easier! @una.im explains in this wonderful blog post:
una.im/scroll-targe...
✨ But an upcoming CSS feature will make this way easier! @una.im explains in this wonderful blog post:
una.im/scroll-targe...
Reposted by Lafeuille
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
A Friendly Introduction to SVG • Josh W. Comeau
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most imp...
www.joshwcomeau.com
July 21, 2025 at 3:11 PM
One of the most powerful tools in my toolbox is SVG. When combined with CSS and JavaScript, we can do some truly remarkable things. ✨
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
📝 I’ve just published a brand-new blog post that covers the most critical fundamentals. It’s chock full of interactive demos. 😄
Check it out:
Reposted by Lafeuille
CSS pro tip:
:target {
scroll-margin-block-start: 2em;
}
Adds a nice bit of breathing room to stuff that's anchored via URL like example.com/#my-element
:target {
scroll-margin-block-start: 2em;
}
Adds a nice bit of breathing room to stuff that's anchored via URL like example.com/#my-element
July 14, 2025 at 8:09 AM
CSS pro tip:
:target {
scroll-margin-block-start: 2em;
}
Adds a nice bit of breathing room to stuff that's anchored via URL like example.com/#my-element
:target {
scroll-margin-block-start: 2em;
}
Adds a nice bit of breathing room to stuff that's anchored via URL like example.com/#my-element
Reposted by Lafeuille
Plain Vanilla - an explainer for web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
plainvanillaweb.com/index.html
#webdev #html #css #javascript #programming
plainvanillaweb.com/index.html
#webdev #html #css #javascript #programming
Plain Vanilla
An explainer for web development using only vanilla techniques.
plainvanillaweb.com
July 11, 2025 at 10:08 AM
Plain Vanilla - an explainer for web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
plainvanillaweb.com/index.html
#webdev #html #css #javascript #programming
plainvanillaweb.com/index.html
#webdev #html #css #javascript #programming
Reposted by Lafeuille
Smooth animations with CSS text-shadow. Learn how on the blog now.
Enjoy reading 📖 Happy coding! 🧑🏻💻
frontenddesigner.dk/blog-posts/s...
#frontenddev #cssanimation #css #animation
Enjoy reading 📖 Happy coding! 🧑🏻💻
frontenddesigner.dk/blog-posts/s...
#frontenddev #cssanimation #css #animation
Smooth animations with text-shadow
Create smooth and lightweight text animations without compromising on SEO. Learn how in this post
frontenddesigner.dk
July 7, 2025 at 2:54 PM
Smooth animations with CSS text-shadow. Learn how on the blog now.
Enjoy reading 📖 Happy coding! 🧑🏻💻
frontenddesigner.dk/blog-posts/s...
#frontenddev #cssanimation #css #animation
Enjoy reading 📖 Happy coding! 🧑🏻💻
frontenddesigner.dk/blog-posts/s...
#frontenddev #cssanimation #css #animation
Reposted by Lafeuille
#tinyCSStip One thing that has always annoyed me about `:empty` is that it doesn't work for elements that have text content, but no element children.
`:has()` fixes this problem.
`:not(:has(*))` selects elements that don't have element children, even if they have text content.
`:has()` fixes this problem.
`:not(:has(*))` selects elements that don't have element children, even if they have text content.
March 12, 2024 at 9:18 AM
#tinyCSStip One thing that has always annoyed me about `:empty` is that it doesn't work for elements that have text content, but no element children.
`:has()` fixes this problem.
`:not(:has(*))` selects elements that don't have element children, even if they have text content.
`:has()` fixes this problem.
`:not(:has(*))` selects elements that don't have element children, even if they have text content.