Teemu Taskula

New React Aria release! 🎁

🔎 Autocomplete alpha
📽️ CSS transition support in addition to keyframes
📆 Custom Calendar first day of week
🧪 Unit test utility package for ARIA patterns
🎯 Removed custom hit testing in usePress
🐞 and plenty of bug fixes!

react-spectrum.adobe.com/releases/202...

JavaScript Frameworks - Heading into 2025 I admit I wasn't sure I'd be writing this article this year. It's easy to write articles that excite...

Time for my annual look at the state of JavaScript Framework development.

"JavaScript Frameworks - Heading into 2025" #DEVCommunity #javascript #WebDev dev.to/this-is-lear...

🎊 Happy New Year!

I discovered a lot of very cool dev stuff in 2024, from libraries to devtools to educational resources. Thought it’d be fun to share them all, to help kickstart your 2025!

Let’s go through the list. 🧵

Red XIII totally changing his voice midgame wasn't on my bingo card 😵

TypeScript function that returns corresponding flag emoji for alpha2 code: export function getFlagEmoji(alpha2: string) { return alpha2 .toUpperCase() .split('') .map(char => String.fromCodePoint(127397 + char.charCodeAt(0))) .join(''); }

👨‍💻 Dev tip: Display flag emoji for given country code

I love using chatgibidi for problems like these where there is no point trying to figure it out yourself as it is not really an interesting/educational problem to solve.

If you see bunnies you know there is treasure

The worst part of After Eight is all the evidence it leaves behind

Perhaps an unpopular opinion:

<StrictMode> causes more issues than it solves.

a man in white pants is cleaning a living room floor Alt: a man in white pants is cleaning a living room floor.

🧹 Christmas cleaning continues:

Removed large barrel file that re-exported all our UI kit components and now Vite can split our app much more optimally

Feels good man.

Just removed all `forwardRef`s from my current work project

CI checks are red,
PRs are stuck,
Tests keep on failing,
Time to level up.

I've been debugging CI issues the whole day... 🙃

How's your Friday going?

The right one

I often hold my phone in my left hand and the floating button can block scrolling when my thumb accidentally hits it while doing the scroll gesture

The secret is to use a lib that supports the `styled` api, like pandacss

Updated the issue description

Okay this is super embarassing... I swear I tried to use `useDeferredValue` with `useReadQuery` and it didn't work but now that I try it in my repro instead of the project code it actually works and the suspense fallback is not shown 😅

However the `isPending` flag doesn't seem to work 🤔

How to use `useDeferredValue` with `useReadQuery` to stop showing Suspense fallback? · Issue #12227 · apollographql/apollo-client Issue Description Hi 👋🏻 This is a follow-up issue related to a discussion on Bluesky where I tagged @phryneas and asked a React Suspense related question. Basically the question is: how do we stop ...

@phry.dev I finally found the time to report an issue with a repro about this topic: github.com/apollographq...

Sry for taking so long 😅

We didn't use to have these in Finland but some years ago they arrived and they poop everywhere and basically ruin all the parks

I did this in a consulting project where they required me to input my hours in three different systems where in one of the systems I had to manually sum the weekly hours myself

Every week I added one extra billable item just for "Marking the hours"

Maybe I'm doing it wrong but adding `.toPromise` doesn't seem to help 😅

I tried even to update to React v19 to get async transition support but that didn't change anything.

@tkdodo.eu @manuelschiller.bsky.social I would like to better understand what "but are short-circuited by useSyncExternalStore used by the router" actually means in practice? Does it mean that trying to stop router driven suspension with transitions is not a viable solution in Tanstack Router?

Thanks for the input @tkdodo.eu 👍

We already have a custom version of `useSuspenseQuery` that handles the re-suspension issue but @phry.dev is it possible to do something similar with `useReadQuery`? Or what would be the best pattern to use Suspense with loaders that are driven by url params?

Thanks for the tip 👍

I'll come back to you tomorrow with the results when I'm back at work 😁

What is the canonical use case for Suspense to show the fallback again after the initial suspension?

Basically I always want to show an inline pending indicator instead of replacing the whole UI with the fallback.

Having to wrap every state update with `startTransition` feels backwards to me...

Is there a way to use `useDeferredValue` with `useReadQuery` in way that the we only ever suspend on the initial render and all subsequent changes to `queryRef` just maintain the old UI and gives some `isSuspending` flag that we can use for inline pending UI?

@tannerlinsley.com @phry.dev any tips on how to skip suspending when I update search params in Tanstack Router which re-triggers `preloadQuery` in the `loader` that returns `queryRef` that is then read with `useReadQuery`?

Wrapping `navigate` with `startTransition` doesn't seem to help 🤔

Final Fantasy is one of my all time favorite game franchises but if you have not played any FF games before it can be a bit of an acquired taste

Currently playing FF7 Rebirth and loving it

Remedy games like Control and Alan Wake 2 are phenomenal story-wise and the graphics/gameplay is gorgeous

Latest God of War games are incredible but the boss battles can be challenging

Spider-Man games are one of my favorites. So fun to swing around NYC

Ratchet and Clank is beautiful and fun

Happy Independence Day Finland 🇫🇮

React v19 – React The library for web and native user interfaces

React v19 is now stable!

react.dev/blog/2024/12...