Michael Warren

@michaelwarren.dev

Vice President of Web Components; billiards enthusiast; father; thoughts and opinions are not AI generated. https://michaelwarren.dev

The spec of truth! The full course talks more about the importance of living spec files, especially in the age of AI, and how writing down your decisions is crazy hard but worth it!

Kevin Powell@kevinpowell.co · last wk.

Another thing you need to figure out early on is what is going to be the source of truth for your design system. Will it be the code or design files? Or as @michaelwarren.dev advocates for, neither of those two. If you'd like updates on the course as we make progress: thecascade.dev/courses/desi...

Happy to announce Octane – the successor to Inferno. React’s programming model, compiled. Hooks, Suspense and Actions, compiled ahead of time. No virtual DOM. No Rules of Hooks. No manually maintained dependency arrays. The compiler understands what your code. octanejs.dev

// Counter.tsrx — hooks next to output, no rules of hooks
import { useState, useEffect } from 'octane';

export function Counter(props) @{
	const [count, setCount] = useState(0);

	// A hook behind a condition is fine — slots are
	// assigned by call site, not call order.
	if (!props.paused) {
		useEffect(() => {
			console.log('count is now', count);
		}); // the compiler infers [count]
	}

	<button onClick={() => setCount(count + 1)}>{'Count: ' + count}</button>
}

There are lots of ways to combat tribal knowledge in a design system community, both internally and externally to the core system team. Building in public is just one of those ways and we’ll talk about it in more detail in the course!

Kevin Powell@kevinpowell.co · 2w ago

For part of our upcoming Thoughtful Design Systems course, @michaelwarren.dev talked to me about the pitfalls of tribal knowledge. A lot of the early stages of the course dive into the decisions & thinking that need to be made for a design system to be successful. thecascade.dev/courses/desi...

open your wallets folks! these amazing friends are doing great work helping clean up and refactor lots of the tools we depend on!

James@43081j.com · 2w ago

We got a few new individual sponsors recently in @e18e.dev - thank you to those of you who are supporting us 🙏 Getting sponsorships for a community is much harder than for a popular web app or dev tool. Every little helps. If you'd like to help us improve perf for all of us, check out our OC 🩵

Made a little time to work through this and I have two things to share: @scott.is's writing remains undefeated and @arielsalminen.com has made an absolute banger of a library. If you haven't tried using Elena yet, I can't recommend it highly enough and this post is the perfect intro

Scott Riley@scott.is · 3mo ago

framework-specific component libraries are wild. web components are fucking fab. in this post i walk through creating a framework-agnostic, docs-first design system setup using web standards (and @arielsalminen.com’s wonderful elena). piccalil.li/blog/framewo...

omg a styleable, accessible, native combobox is one of the of holy grails of the web. let’s go!! also i prefer nesting the input i think. nesting could mean automatic a11y/aria association where siblings might leave it up to devs who will forget and not do it etc.

Joey Arhar@josepharhar.bsky.social · 3w ago

Hi! I'm working on a new HTML feature: filterable select There are two proposed API shapes so far: 1. Nesting <input> in <select> 2. Sibling <input> for listbox <select> w/id ref Option 1 is more ergonomic, but would break selects in older browsers Thoughts? (Both currently in Canary w/flag)

My Dad went to send an In Post parcel today and entered his own details on on the recipient details screen because: - the field labels don’t contain the word “recipient” so he just read “first name” - even if they did, the labels are placeholder text so disappear when you enter information… 1/2

The “recipient details” screen in the in post send a parcel flow