Ariel Salminen

Will launch it end of this month!

haha, well… I’ve mostly built this for my own needs so far so I have no idea if anyone else would even use this 😂

This was kinda triggered by Stu tho

Make custom elements behave with scoped registries  |  Blog  |  Chrome for Developers You can now encapsulate custom elements.

🎉 I'm so excited that scoped custom element registries is landing in Chrome and Edge! 🥳

This solves one of the biggest complaints with the web components APIs: the global tag name namespace.

Standards is a long game though: I first proposed this in 2017! 😲

developer.chrome.com/blog/scoped-...

The <baseline-status> was more of a proof-of-concept as I’ve been building slightly more complex web components to stress-test things. Starting to look pretty stable now. 🤞🏻

(…from the original ~19.5 kB!)

<baseline-status> web component recreated with Elena.

Also, just re-created this <baseline-status> web component (github.com/web-platform...) using Elena instead and managed to get the whole web component, including styles, icons and all, down to 4.89 kB 😅

A screenshot of the latest iteration of the upcoming https://elenajs.com documentation website.

Ok, think I’m ready to hit the publish button *soon* with this thing.

Finished the documentation for Elena this morning. Also re-worked some bits to simplify lots of aspects and there’s now also an opt-in Shadow DOM support for those who want it.

View transitions, anchor positioning, ​@scope, focusgroup, invokers, popovers, container queries, grid, relative colors, style-able selects, and more.

The web feels like it’s getting so good at exactly the moment our collective worst practices are getting calcified as the default.

A screenshot of upcoming component lifecycle documentation for a progressive web component library called Elena.

What I’ve been up to this week: *docs, docs, docs.*

on my way through Hull

Hosted such a fun design system office hours session today. We ended up nerding out about typefaces the whole time.

Not yet! will eventually live at elenajs.com

<cheese> elements

A photograph of a cheese shop in Töölö, Helsinki.

Grabbing some cheese 🧀 on my way home from the client’s offices.

A screenshot of macOS terminal showing a test suite summary for Elena.

Been recently really enjoying working with Vitest tbh (both for client’s design system and also for my personal projects).

I’m just nerding out over the terminal colors at this point tho

A screenshot of an upcoming documentation website for a tool called Elena.

Letting that @darn.es get an early sneak peek of this thingy made me realize it needs proper docs website, even if I tried to resist it and dump it all onto .md files on GitHub. So yeah, here we are…

The latest Working Draft of WCAG 3 is out today! w3.org/TR/wcag3/

In this version, we've:
- moved lots of requirements to “Developing” phase,
- wrote down how to test,
- mapped reqs to user needs (using DAF),
- split out 'applies when' and 'except when' to massively increase readability
1/2

yeah it is an open source project I’m working on. it will be all explained, I’ve written on the topic already and what I mean with it, but want to properly finish and test things before publishing the whole set of tools. 😅

A screenshot of an upcoming Elena CLI tool which presents three options for the language: JavaScript, TypeScript & HTML.

Made this thing support generating an HTML page as well as an output.

It seems we can now customize the select element, right? right?!

Demo: codepen.io/t_afif/pen/P... via @codepen.io

End of March is go live (plan at least). If you want a preview access DM me!

😍 I really need to visit you folks at some point

Had fun this morning building this thing:

A screenshot from a GitHub readme “Table of contents” that is so long that it can’t fit into the viewport.

There are docs

what if it whirls too much

A screenshot from Elena’s GitHub project readme. It says: Elena is a simple, tiny library for building Progressive Web Components. With Elena, you immediately render the component’s base HTML & CSS, then progressively enhance the experience with JavaScript rather than relying on it from the start. This approach provides great support for Server Side Rendering (SSR and e.g. React Server Components) without additional configuration or tooling. Also shows a glimpse from the documentation’s “table of contents” which includes “Introduction,” “Core Principles” and “What is a Progressive Web Component?” sections. Finally, at the top, there are badges that show “MIT license”, “100% test coverage” and a “tests passing” badge.

Ok, figured I’ve been sitting on this project for a while now so decided to give test access to @darn.es to tell me if it’s all shit and I should just throw it away 🤷🏻‍♀️

Also: **Am I the only one who feels like this when getting close to publishing a big project _(like every single time)?!_** 🫠

& does not fix it in Firefox, already tested the alternative routes 😅

@scope (.test) { :scope { ... } } @scope (.test) { :scope[disabled] { ... } } @scope (.test) { :scope[variant] { ... } } @scope (.test) { :scope[type="green"] { ... } } @scope (.test) { :scope[variant="danger"] { ... } } Hover the last <div class="test" variant="danger">...</div> and it’ll work 🤷🏻‍♀️

Found a bug in Firefox with CSS @scope and [attr=value], but now checked out the pre-release build and seems to be fixed there. So perhaps this won't exist soon anymore (in v149?).

Minimal reproduction regardless:
codepen.io/arielsalmine...