You are viewing archived messages.
Go here to search the history.

Roma Komarov 2025-03-01 10:44:28

Something I've been very slowly working on for years (with long multi-month spans of not doing anything). Sharing to manifest more work 🙂

Basically, a test bed for CSS and web components: allows generating permutations between various CSS custom properties, HTML attributes, and more. It was already instrumental for some of my web platform testing, as it is an effortless way of displaying all the possible options at the same time, and then cross-browser comparison can show the difference. A lot of what is there I already use in production in the design system I am working on in my company, but that implementation relies heavily on React.

What I am working will, ideally, be frameworkless, and done only with the web platform in mind. Currently, some of its bits are using Preact, but I really want to step away from it, and do everything with web components, and not rely on something external.

🎥 Screen Recording 2025-03-01 at 11.35.58.mov

Roma Komarov 2025-03-01 11:04:32

Usage of this is just:

    <style>

        .test {

            width: 100%;

            background: var(--dial-bg, pink);

            border: 2px var(--dial-border, solid);

            box-sizing: border-box;

            padding: var(--dial-padding, 16px);

        }

    </style>

    <css-lab dials="

        bg: pink|hotpink|yellow;

        padding: initial | 8px | 16px;

        border: solid | dashed;

    ">

      <div class="test">Hello world!</div>

    </css-lab>

Although, it will likely change a lot over time, but I am trying to make it as simple as possible to use for myself.

Roma Komarov 2025-03-01 11:11:10

And the way it works in our design system. The context is rather different, where we want to show the generated code to use for every permutation, but also not complete in some ways, and is less about exploration (no two-way feedback from the controls). But we're pretty happy with how it works, and even saw other design systems adopt a few things from our design & implementation (with explicit mentions).

🎥 Screen Recording 2025-03-01 at 12.08.02.mov

Tom Larkworthy 2025-03-02 16:36:20

I've got module loading working. Its a combination of a few pieces I worked on. programmatic import + modules as panels + mutable fileattachments. Its a little different to observable where you only import via an import statement. Now you add a module to the bundle, which better in the multi-module UI world as a module can be useful without being directly linked (e.g. it can just implement a useful tool).

The list of modules is recorded in a JSON file attachment. This list of extra modules is programatically imported on startup. The programatic import first tries to load the module from the bundle local-first, if it can't find it it falls back to the Observable API. So this mechanism allows you to initialize from the Observable ecosystem, but once loaded into the runtime, subsequent exports include it in the bundle and it becomes a vendored local-first dependancy.

🎥 module_loading.mp4