Lightnews — Scholar-powered news

Josh W. Comeau @joshwcomeau.com · 3h

Compared to a library of reusable functions, the benefit of hooks is that we can include setup/teardown logic. A reusable function might be useful for calculating a value at a specific moment in time, but hooks let us manage the entire lifecycle in a really elegant way. In my opinion, at least 😄

1 2

Josh W. Comeau @joshwcomeau.com · 3h

I think React can make stuff like this a bit trickier to figure out, but it also offers a lot of advantages once you get the hang of it! I have a collection of reusable hooks that are absolutely lovely for building these sorts of interactive demos.

2 1

Josh W. Comeau @joshwcomeau.com · 3h

1. When the request is created, render a green dot and apply a keyframe that shoots it over to the server (eg. by setting `transform: translateY(-200px)`)
2. Either absorb or reject the request with another keyframe (which would either scale it down to 0, or bounce it off).

1 1

Josh W. Comeau @joshwcomeau.com · 3h

I think for the load balancer demos specifically, I would probably build that using a plain DOM node for the dots representing requests, and I’d use keyframe animations so that I only need to render each dot twice, rather than updating on every frame.

2 2

Josh W. Comeau @joshwcomeau.com · 3h

If it does turn out to be an issue, libraries like React Spring (react-spring.dev) solve this problem by breaking out of React’s model, so a re-render isn't triggered whenever the animated values change.

react-spring

With naturally fluid animations you will elevate your UI & interactions. Bringing your apps to life has never been simpler.

react-spring.dev

1 5

Josh W. Comeau @joshwcomeau.com · 3h

So if you’re currently doing a requestAnimationFrame loop and updating the SVG properties on every frame, React *can* slow things down by a non-negligible amount, though React’s diffing is usually quite a bit faster than the actual DOM update, so it’s a comparatively small cost.

1 5

Reposted by Josh W. Comeau

Una Kravets @una.im · 4h

View transitions are in every browser now ✨

Ollie Williams @ollie-williams.bsky.social · 8h

Firefox now supports view transitions, the command and commandfor HTML attributes, and the moveBefore() method.

www.firefox.com/en-US/firefo...

Firefox 144.0, See All New Features, Updates and Fixes

www.firefox.com

2 34 170

Josh W. Comeau @joshwcomeau.com · 4h

PSA: if you’re in Georgia (the US state, not the country), there’s an important election happening now that you probably don’t know about!

www.youtube.com/watch?v=UgvE...

1% of Georgia Needs to Watch This Video

YouTube video by Hank Green

www.youtube.com

1 14 22

Reposted by Josh W. Comeau

Nanda Syahrasyad @nan.fyi · 8h

fun with presence

1 1 16

Josh W. Comeau @joshwcomeau.com · 8h

Also, the CFP technically closed yesterday, but I just checked and it *seems* to still be open, so if you’d like to speak, give it a shot!
gitnation.com/events/react...

Log In

Home of React and JavaScript insights directly from framework authors, early adopter engineers and big tech from - talk recordings, hands-on workshops and articles.

gitnation.com

1

Josh W. Comeau @joshwcomeau.com · 8h

The organizers of React Advanced Canada just gave me a 10% discount code to share with y’all: JOSHFRIENDS ✨

I’m really looking forward to this one 😄. It‘ll be held in Toronto next March, and the speaker lineup is 🔥🔥🔥.

reactadvanced.com/canada/

Promo image for React Advanced Canada, in Toronto on March 24th and March 26th. My face is in a bubble!

1 2 9

Josh W. Comeau @joshwcomeau.com · 2d

On the subject of AI criticism, I also really like this video from @w3cj.com!

www.youtube.com/watch?v=0ZUk...

AI Coding Sucks

YouTube video by Syntax

www.youtube.com

1 22

Josh W. Comeau @joshwcomeau.com · 2d

I think this is a really great point. I’ve had *moments* with Cursor where it’s been 10x faster than what I’d have done by hand, and those moments are super memorable. But most of the time, my experience is a lot more mixed.

Screenshot of text: My hunch: vibe coding is a lot like stock-picking – everyone’s always blabbing about their big wins. Ask what their annual rate of return is above the S&P, and it’s a quieter conversation 🤫

2 2 38

Josh W. Comeau @joshwcomeau.com · 2d

🤖 Really digging this post from @erikdkennedy.bsky.social, about AI design tools and the gap between what they promise and what they deliver.

www.learnui.design/blog/wheres-...

Where’s the AI design renaissance?

AI design is currently overhyped · Will AI take design jobs? · What should designers focus on in light of rapidly changing AI tools?

www.learnui.design

2 7 34

Josh W. Comeau @joshwcomeau.com · 2d

They have a car section! Though that’s shrunk over the years to a tiny shelf near the back 😂

1

Josh W. Comeau @joshwcomeau.com · 3d

Yeah, this is the first place I’ve started using it! Makes a lot of sense for that use case.

1

Reposted by Josh W. Comeau

Soren @sorenblank.com · 5d

so much you can do in css using pseudo classes. used `:has` pseudo class to make the full hover animation here.

for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover`

made only using css. no js listener used. took me longer than i thought it would.

3 8 110

Josh W. Comeau @joshwcomeau.com · 3d

Huh, TIL there’s an element, and it can be used to display the result of user inputs in a screen-reader-friendly way! I can think of a bunch of places I should be using this 😄

denodell.com/blog/html-be...

HTML’s Best Kept Secret: The output Tag

Make your dynamic content accessible by default with the HTML tag that time forgot.

denodell.com

8 8 90

Josh W. Comeau @joshwcomeau.com · 3d

It’s challenging since you’re likely already using transforms for the falling. You can solve that by either switching to “top” for the main fall motion, or add a wrapping div for each snowflake.

1 1

Josh W. Comeau @joshwcomeau.com · 3d

One fun detail: you can add a left/right oscillation by +/-20 pixels, so that they sway back and forth as they fall. Pick different transition-durations for each snowflake and it creates a lovely effect.

1 1

Josh W. Comeau @joshwcomeau.com · 3d

Super nice! I actually created a very similar exercise, but couldn’t find the right spot for it. Maybe it’ll be an animation challenge.

1 1

Josh W. Comeau @joshwcomeau.com · 4d

So much good stuff in here! I’m excited to see what the areas of potential focus are 😄

Sara Soueidan @sarasoueidan.com · 5d

This is such a great idea. I just chose and ranked my favorite 15 features in the list—primarily CSS and HTML features of course. interop-rank.jakearchibald.com

What are yours?

2 14

Josh W. Comeau @joshwcomeau.com · 4d

😂

Josh W. Comeau @joshwcomeau.com · 5d

I was a bit nervous about this one, since there were a bunch of factors that could’ve dragged it down: the rise of LLMs, the quirky topic, my exodus from Twitter…

But in the end, more than 4200 people joined the course! And it’s been super cool seeing what people build. 😄

bsky.app/profile/josh...

Josh W. Comeau @joshwcomeau.com · 21d

I have the pre-launch jitters. 😬

My third course launches in “early access” in a little over 24 hours from now. I feel very confident about the content, but even still, launches are so stressful. 😅

1 23

Josh W. Comeau @joshwcomeau.com · 5d

Early feedback for Whimsical Animations has been super positive so far. ❤️

Excited to get the rest of the course done!

Screenshot of a Discord message from "Nick (The Zangster)":

just a #gratitude post for the whimsical animations course - the techniques I've learned so far have already lead to some awesome visuals at $dayjob that have been impressing others 😄

2 28