If you didn't know what to watch on the weekend. Check out how tap to pay really works and why it's secure. youtube.com/watch?v=N_6k_jd5… Love their channel!

I finally released the piece that nanotags.psdcoder.dev has been missing for a long time: a set of testing utils. The new nanotags/testing API makes component testing simpler. It includes a set of utilities for repetitive tasks and works with jsdom and happy-dom, as well as with any test runner. Testing utilities help you build, mount, and check what the DOM shows:

Setup is simple: add the plugin to your bundler config and call connectDevtools() in your entrypoint. That's it! For the UI, you just need to install the Redux DevTools extension from your browser's extensions store.

Everything is grouped by the file name containing your stores. Every write adds a named row to the timeline: counter/set, user/setKey:name, config.theme.x/set, etc. Devtools shouldn't change your application's behavior, so they read .value from the store and never call .get(), because .get() can cause side effects by mounting sources that were previously unmounted.

Ha, now I'm part of the Nanostores org! Right before my vacation 😄 I'll be away for two weeks, but I have something up my sleeve to show you all when I'm back!

Have they heard anything about refresh tokens? Why do I need to care about it?

I added sidebar navigation to Astro Pigment, my docs theme for Astro. Some pages can now have a two-column layout, while others can have a three-column layout. When users navigated between them, the change looked like a hard snap. This is where view transitions come into play! I remembered that Astro added support for view transitions a while ago, and this was the perfect place to use them. I simply: - Assigned a unique transition:name to every element that should persist across navigation. - Set transition:animate="initial" to skip Astro’s crossfade and use the browser’s default transition instead, which worked best in my case. That’s it! The browser now slides each named element from its old position to its new one, with no JavaScript. Previously, this would have taken much more work! See it live: astro-pigment.psdcoder.dev/

In Chrome DevTools 149, the APCA color contrast guidelines have been promoted to stable! Finally! For those who may not know, APCA is a more modern and accurate method for measuring color contrast. developer.chrome.com/blog/ne…

One important thing: datavolve only transforms the shape. It does not validate the data itself. That is why it works best alongside a validation library. I prefer @Valibot, but you can use your favorite one. Validate the stored value at each version, and the result is checked at runtime, not just typed.