From React to native web with nanotags: a migration that saved 100 KB. Pavel Grinchenko explains how they migrated an Astro marketing site from React and Ark UI to native Web Components, cutting JavaScript by 100 KB. Nanotags is a sub-2.5 KB wrapper that adds validated props, typed refs, and automatic cleanup, plus reusable accessibility attachments for ARIA patterns. With nanostores, it covers dropdowns, modals, and toggles. #webcomponents #react
От React к нативному вебу с nanotags: миграция, сэкономившая 100 Кб. Павел Гринченко рассказывает, как они перенесли маркетинговый сайт на Astro с React и Ark UI на нативные веб-компоненты, сократив JavaScript на 100 Кб. Nanotags — обёртка размером менее 2,5 Кб с валидацией пропсов, типизированными рефами и автоматической очисткой, а также подключаемыми ARIA-паттернами. В связке с nanostores этого хватает для меню, модалок и переключателей. #webcomponents #react
Most marketing sites ship a SPA framework just to toggle a sidebar. Here's how we migrated an Astro site from React and Ark UI to native Web Components: 100 KB less JavaScript, no functionality lost, and a tiny library called nanotags that makes Custom Elements enjoyable to write.
How fun is that? Put the scenarios right on the page that describes the component. Now all we need is a results dialog and we've got `smol-toast` the Musical (or at least a component page with reference, examples, the scenarios that verify it in its regression suite as live tests and a REPL to poke at it)
Oh my goodness
`smol-body-code` and `smol-executor` and now we have executable markdown in SmolChalk
I'm not sure how I feel about this
[I secretly love it]
This test case uses `happy-dom` to mount three custom web components
`smol-page` :: the container component
`smol-store` :: a no-DOM component interface to sqlite-wasm
`smol-node` :: a DOM-optional component that owns a md document (as mdast) as its component parts
It then simulates the event thrown by `smol-unfold`, the no-DOM component that wraps remark for AST processing, and verifies that `smol-store` and `smol-node` coordinate on a set of writes.
This is just an event driven middleware pipeline running on a simulated DOM and I'm here for it :)
"""
A stubborn one, you are
"""
--- know me, you do, in an off-by-one-by-one attribution joke you're in
Once I find something I like, I tend to stick with it. Like testing strategies for instance. I have this pattern that uses YAML scenarios where the fixture and the expectation can be shape based and co-located (and if we drop a series of blanks into the expect, available for automated and manual execution).
For the SmolChalk components, `happy-dom` to the rescue. The scenario below loads a full instance of the actual component, sends it a real message, and verifies the shape of the response.
Data-driven, test-driven development... with benefits
I can't even do a landing page without making a thing out of it...
SmolChalk :: if SmallTalk and Erlang had a baby and it was web components for kids and it composed itself out of markdown and YAML
Like this landing page for the project itself.
The `smol-hero` is of course a chalkboard (black or green) with slots for scribbles (tr|tl|br|bl)
The `smol-letter-canvas` is a text area that displays themed text; colour, font, size can all be twiddled for a daughter who loves typing and text
The YAML defines the entire page and all the wiring required to load a random word set stored elsewhere in YAML, pluck a single word from it to scribble on the blackboard as a WOTD and to setup the `smol-pattern-matcher` required to emit a `smol-celebrate` (just a little treat) when you type it.
Oh my goodness I love it
#webcomponents #sovereigndata #smoldata #smolchalk #platformengineering
Web Standards
Веб-стандарты
The Fulcrum ⚒️ ⛓️💥 🏴☠️
graeme fawcett