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)

#webcomponents #computingforlittles #smolchalk

Oh my goodness

`smol-body-code` and `smol-executor` and now we have executable markdown in SmolChalk

#webcomponents #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 :)

#webcomponents #smolchalk

"""
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

https://smolchalk.dev

#webcomponents #smolchalk

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

Over the past couple of weeks I rewrote a personal money-tracking app I made for my kids in 2022. I replaced Nuxt and Tailwind with web components, ExpressJS, and modern CSS—mostly to see what it takes to do it.

https://wbrowar.com/article/code/refactor-kids-money

#WebComponents #CSS #WebDev #money