joel lesenne

I'm a frontend developer, passionate about code, design process UI/UX, an amateur photographer, and diligent continuous learning.

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜

li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@​keyframes bright { 50% { opacity: 1; }}

[Adam Argyle @argyleink]

this feature allows adding alt text to pseudo elements generated from #CSS 👍🏻

[Ana Tudor 🐯 @anatudor]

#tinyCSStip If you make an element a container, a `position: absolute` child is going to be positioned relative to it, which can be very problematic if you were counting on positioning it relative to another ancestor.

[jhey ʕ•ᴥ•ʔ @jh3yy]

Love this pattern 🤩

CSS :has() powered custom cursors are a fun one! 💯

These :hover image tips are achieved with :has() and :nth-of-type ⭐️ Probably worthy of their own video 🤔

You only need a couple lines of JavaScript to pass the pointer position through 🤙

[Lea Verou, PhD @LeaVerou]

Color.js (https://t.co/efpcIlX86L) has now been downloaded 2 million times on @npmjs! 🎉

To celebrate its upcoming v0.5.0 release, we want to list of all the ways it has been impactful.

If you maintain a popular tool/app that uses Color.js, please let us know so we can add it!

[Brendan Perry @brendanperry]

Tomorrow the ICJ will make a momentous decision. The evidence presented is overwhelming..... Ceasefire now!

[joel lesenne @joellesenne]

https://t.co/NCNI590afV

[Préfet de région Auvergne-Rhône-Alpes et du Rhône @prefetrhone]

⚠️En raison des blocages routiers en cours, la circulation est coupée sur :

➡l’A47 dans le secteur de Givors à partir de la sortie 9.3 (Lyon/StÉtienne) et de la sortie 11 (StÉtienne/Lyon).

➡️la M6 entre la jonction avec l’A89 (Paris/Lyon) et la sortie 34 (Lyon/ Paris).

[Ana Tudor 🐯 @anatudor]

#tinyCSStip Ever want an element to be responsive, always fit within a certain `--max` (for ex. `95vmin`), but also want its size to always be a multiple of a certain `--val` (for ex. `15px`)?

Sizing an element in steps, if you will.

🆕 CSS mathematical functions to the rescue!

[jhey ʕ•ᴥ•ʔ @jh3yy]

Here's that @CodePen link! 🚀

This was another demo from the 2022 conference run 😎

Again. I'll be writing these up for the new version of https://t.co/ld0AJEMSTN that is close to being put together 🙌 Jus' wanna make sure I have most things in first

https://t.co/yZIBF7e3ZC

[Ana Tudor 🐯 @anatudor]

Since `:has()` is now cross-browser 🥳 here's what's still my 🌟 top 🌟 use case for it: theme switching!

In the very simple case, when we want to switch from a light to a dark theme, we switch `--dark` from `0` to `1` on the `body` when the dark theme option is selected.

[joel lesenne @joellesenne]

This is my #GitHubUnwrapped! Get your own: https://t.co/5S7d0PmyUW

[joel lesenne @joellesenne]

This is my #GitHubUnwrapped! Get your own: https://t.co/5S7d0PmyUW

[Ozan Öztaskiran @ozanoz]

Erik implemented a major update on his fantastic color generator - UI Colors:

✢ Lock the input color
✢ Generate & edit color scale on the same page
✢ Shift hues with a slider
✢ Save custom color scales

https://t.co/0qfsAhFwfn

via @erikdevries_nl

[Jeremy Torman (Minting Now) @TormanJeremy]

now on zero-one

[☄︎ @0xca0a]

i was aiming for a low level primitive <RenderCubeTexture> but this morning i woke up to @garrettkjohnson fixing pointer event raycast, which made a <Fisheye> feasible and self contained without downsides. so drei has that now. 🍻

<Fisheye>
<Scene />
</Fisheye>

demos below ↓

[Jeremy Torman (Minting Now) @TormanJeremy]

Welcome to the Machine

[jhey ʕ•ᴥ•ʔ @jh3yy]

Must be time for the Q4 nested radius post 📅

Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎

.panel {
--radius: 28px;
--padding: 8px;
--nested-radius: calc(var(--radius) - var(--padding);
}
.content {
border-radius: var(--nested-radius);
}

Here's an interactive visual you can mess with 🤙

@CodePen link below 👇

[Alex so yes @alexsoyes]

Quelqu'un a déjà testé #CodeGPT ?

Perso je ne suis pas trop les outils d'IA parce-que y'en a trop, mais là ça a l'air vraiment stylé.

https://t.co/DKmZSVb40N

[Linus ✦ Ekenstam @LinusEkenstam]

Here are 19 quick terms to get better AI images

Borrow from photography to maximize the output in Midjourney, SDXL, Runway etc.

Free cheat sheet 🙌🏻