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_j…
Love their channel!
Love their channel!
0
0
0
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 Testing utilities help you build, mount, and check what the DOM shows:
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 Testing utilities help you build, mount, and check what the DOM shows:
1
1
7
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.
1
0
1
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(), e side effects by mounting sources that were previously unmounted.
Devtools shouldn't change your application's behavior, so they read .value from the store and never call .get(), e side effects by mounting sources that were previously unmounted.
1
0
0
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!
I'll be away for two weeks, but I have something up my sleeve to show you all when I'm back!
0
0
14
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 dded 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
I dded 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
0
1
5
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/new-in-de…
For those who may not know, APCA is a more modern and accurate method for measuring color contrast.
developer.chrome.com/blog/new-in-de…
0
3
7
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 .
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 .
1
0
2
Here is how it works. You describe each version as a pure function that transforms the previous shape into the next one. The run method applies every step after the specified version and returns the value in the latest shape.
1
0
1
My company is hosting a Ruby conference in San Francisco from November 10–12, so if you’re a Ruby engineer, you’re welcome to join us!
The SF Ruby Startup Conference will have Garry Tan as a keynote and organized networking sessions.
Early birds open July 15 at $350 for 24 @sfrubyconf.
The SF Ruby Startup Conference will have Garry Tan as a keynote and organized networking sessions.
Early birds open July 15 at $350 for 24 @sfrubyconf.
0
2
12
Here's a sneak peek at one small but important thing: my write-batching PR in nanostores just got merged! It's going to be available in the next release.
Until now there was no way to group writes. Every write notified all subscribers synchronously, so multiple updates meant e inconsistent state, or stuffing everything into one big object to avoid it.
batch groups synchronous writes, so each listener fires at most once when the batch exits, reading the final state. Batches can be nested too, which is great for composition.
The price: +46 B. I believe it's worth it!
Big thanks to @AleksandrSl28 and @sitnikcode for the review and feedback!
Until now there was no way to group writes. Every write notified all subscribers synchronously, so multiple updates meant e inconsistent state, or stuffing everything into one big object to avoid it.
batch groups synchronous writes, so each listener fires at most once when the batch exits, reading the final state. Batches can be nested too, which is great for composition.
The price: +46 B. I believe it's worth it!
Big thanks to @AleksandrSl28 and @sitnikcode for the review and feedback!
0
4
11
TIL iterator helpers have been in Baseline since 2025, not 2026, as I thought. This means it’s time to start using them if they fit your browser support list.
Why should we even think about them? I measured two simple examples: 100k items, with some filtering, mapping, and inal results.
The measurements give us these figures: iterators are ~15x faster (70.85 µs vs. 1.08 ms) and consume ~4x less memory (~270 KB vs. ~1.05 MB).
This is because iterators are lazy, they never build intermediate arrays and they stop early. You don’t need them in every case, of course, but in similar cases, the win can be huge.
Why should we even think about them? I measured two simple examples: 100k items, with some filtering, mapping, and inal results.
The measurements give us these figures: iterators are ~15x faster (70.85 µs vs. 1.08 ms) and consume ~4x less memory (~270 KB vs. ~1.05 MB).
This is because iterators are lazy, they never build intermediate arrays and they stop early. You don’t need them in every case, of course, but in similar cases, the win can be huge.
1
5
25
@vmelnikova_en @basecamp Can’t resist sharing it here.
I love how they make such wise use of my 27-inch display space!
I love how they make such wise use of my 27-inch display space!
1
0
9
I needed a tool to compare two versions of the same font, just to make sure my changes in the source file didn’t break anything and that the font still looked the same. I built it quickly with an agent and solved my issue.
This is where LLMs shine brightest. Before, building a as expensive. Now it’s cheap. You can prototype it, use it once, and then forget about it with no regret!
This is where LLMs shine brightest. Before, building a as expensive. Now it’s cheap. You can prototype it, use it once, and then forget about it with no regret!
0
3
8
Btw, I highly recommend Tuomas Artman’s talks about their sync engine. It’s the foundation of their app’s performance.
youtube.com/watch?v=WxK11R…
youtube.com/watch?v=Wo2m3j…
youtube.com/watch?v=WxK11R…
youtube.com/watch?v=Wo2m3j…
0
0
0
I’ve added a color saturation axis for those who needed more customization in astro-pigment.psdcoder.dev, and the color picker now copies values to the clipboard. Just paste them into the config.
1
1
8
So I converted every Catppuccin color to OKLCH, then measured each token's hue offset from Catppuccin's original string color. Then I replaced that anchor with --theme-hue, so every token becomes theme-hue + stored offset. Same Catppuccin relationships, now tied to our hue.
1
0
0
So how does it work?
The base is simple: one --theme-hue variable, and every design token derives from it. A few surfaces, text colors, borders, an accent. That's it. Rotate the hue and the whole UI follows.
The base is simple: one --theme-hue variable, and every design token derives from it. A few surfaces, text colors, borders, an accent. That's it. Rotate the hue and the whole UI follows.
1
0
0
astro-pigment ships with a calculable theme: you set one hue value, and the whole palette recalculates around it. Surfaces, text, borders, accent, even syntax highlighting, all from a single number.
2
8
12
Built this for nanotags docs. Reused it for typed-channel. Now making it public.
astro-pigment: an Astro docs theme. Full documentation site in one integration call.
For OSS maintainers who want to ship docs, not spend a week wiring up layout, TOC, dark mode, and SEO.
astro-pigment: an Astro docs theme. Full documentation site in one integration call.
For OSS maintainers who want to ship docs, not spend a week wiring up layout, TOC, dark mode, and SEO.
1
10
30
Updated the docs for typed-channel psd-coder.github.io/typed-channel. But the more interesting story is how I got there.
2
5
17
Here's what a component looks like. Props are reactive nanostores atoms. Refs are typed. Cleanup is automatic.
1
0
4
@FabianHiller @harshmangalam_ @valibot And it's easy to check it with bundlejs.org (which uses esbuild).
It's 778 B for wildcard imports and 774 B for named imports, which is effectively the same. The small difference is likely due to slightly different minification. diffchecker.com/66IiC37g/
It's 778 B for wildcard imports and 774 B for named imports, which is effectively the same. The small difference is likely due to slightly different minification. diffchecker.com/66IiC37g/
0
0
1
I'm fond of CSS Relative colors feature. It is in Baseline 2024 and available across all major browsers. Does this mean a new era of #programmablecolor awaits us?
1
2
8
🚀 I recently released typed-channel—a tiny library for building type-safe communication between different parts of your apps!
Check out this demo of type-safe worker communication in action ⬇️
Check out this demo of type-safe worker communication in action ⬇️
1
14
49
With Pointer Events, the process becomes cleaner. You can capture all pointer events directly on the element itself, without worrying about the mouse leaving the element.
1
0
2
Here's how the logic would look with the old (pre-Pointer Events) approach using mouse events (note where the addEventListener methods are called)
2
0
0
@ojschwa @tinybasejs Hey! It's a nice project! There are some issues with scrollbars in the layout, which you probably would like to know about!
1
0
2
Новое шоу о производительности от @Google youtube.com/watch?v=p7xi4u…
0
0
0
Мой ALS ICE Bucket Challenge youtube.com/watch?v=UB6jYO…
0
0
0