Senior frontend engineer at @evilmartians. I build interfaces, component systems, and frontend architecture for products that need to last.
Lisbon
Joined January 2011
- Tweets425
- Following190
- Followers232
- Likes1.8K
Pinned Tweet
We dropped 100 KB (brotli) from our customer @astrodotbuild marketing site.
How? We replaced React + Ark UI with native Web Components.
And built a tiny framework to make it painless: psd-coder.github.io/nanotags
Pavel Grinchenko retweeted
Nano Stores finally has a website!
We've seen huge growth thanks to LLMs. Not having a site was embarrassing.
nanostores.net/
Check out the design: fresh and personal. Too many modern sites look the same. No React. Just Astro.
Thanks to @YodaPunk and @valbelaziorau!
Well-deserved!
Valibot (@valibot) is an open source, type-safe schema library. Its modular design is tree-shakeable, so you only ship the validation code you use, keeping your bundles small.
Its maintainer, @FabianHiller, actively contributes to the TypeScript ecosystem and is on a mission to improve the web for everyone.
We support his vision, so this month we're donating to him as part of our open source donation program.
If you use any of his tools, consider donating too: github.com/sponsors/fabian-h…
Pavel Grinchenko retweeted
Debugging multi-layer CSS gradients/masks in the DevTools is painful, so I built a tool to help me visualize each layer. It works for CSS art/drawings, too.
Check it out: lab.ishadeed.com/tools/gradi…
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!
Btw, this skill installation snippet is part of the latest astro-pigment version. If you need a good documentation website for your OSS project but don't want to waste time, try building it with the astro-pigment theme.
It includes everything you need: easy setup, LLM endpoints, built-in search, and more!
astro-pigment.psdcoder.dev
We live in a time when code is mostly written by agents. Fortunately or unfortunately.
nanotags 0.17 comes with an agent skill that helps agents write good components: use proper composition and handle everything the way it's supposed to be handled.
If that's the only thing that has kept you from using nanotags, just try it out!
nanotags.psdcoder.dev/#agent…
We live in a time when code is mostly written by agents. Fortunately or unfortunately.
nanotags 0.17 comes with an agent skill that helps agents write good components: use proper composition and handle everything the way it's supposed to be handled.
If that's the only thing that has kept you from using nanotags, just try it out!
nanotags.psdcoder.dev/#agent…
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:
Besides that, they help you with these things:
- Types are inferred from the component itself. You'll get a compilation error for a misspelled prop or ref.
- h looks like React's createElement, but with nanotags specifics: it writes attribute props as attributes, keeps p.json() props as JSON seeds, and so on.
- stubElement and provideContext help isolate the component under test from other components.
- It fixes jsdom discrepancies: instead of losing errors that happen during setup, the helper rethrows them.
The helpers are available through a separate entry point, so nothing reaches your production bundle.
The Cookbook has a full Testing section covering stubs, contexts, reconnect tests, and jsdom vs. happy-dom differences.
Try it: nanotags.psdcoder.dev/cookbo… and let me know what's missing!
Pavel Grinchenko retweeted
Vite+ 1.0 is here 🚀
A single `vp` CLI for managing your Node.js runtime, package manager, and frontend toolchain. Built on top of Vite, Vitest, Rolldown, Oxc, and tsdown.
All with a single config.
Free and open source under the MIT license.
Start with `vp create` or migrate with `vp migrate`.
voidzero.dev/posts/announcin…
Pavel Grinchenko retweeted
My colleague Yuri Mandrikov and I have developed a framework that enforces the design system for AI agents and prevents the slop from leaking into the codebase.
evilmartians.com/chronicles/…
So, I'm back from vacation and ready to introduce a new package: nanostores-devtools. You can inspect your nanostores state more easily with it, with no setup required per store! Your bundler instruments your code and passes all the info to the Redux DevTools extension. Yes, it's used as the UI for the plugin.
nanostores-devtools.psdcoder…
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.
To install: npm install -D nanostores-devtools
Docs are here: nanostores-devtools.psdcoder…
This is the first version I'm showing to the world. Give it a try. Feedback is welcome!
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!
Pavel Grinchenko retweeted
We turned San Francisco into our childhood favorite 8-bit game to welcome you to the SF Ruby Startup Conference this year! 🌉
Irina Nazarova (@inazarova) built The Pier.
This is a special place where you can turn yourself into a cute chibi character, meet other attendees, and collect gems in exchange for coins. 💎
The SF Ruby Conference is all about you. Come join the fun, collect points, and earn rewards.
Get your ticket today: luma.com/sfrubyconf2026, and don’t forget to share your chibi portrait with us!
