@stuffbreaker

Fun-loving coder and speaker. I love #webdevelopment, #webcomponents, and #designsystems. Creator of the WC Toolkit. I work @zocdoc.

Joined August 2017
  • Tweets1.8K
  • Following312
  • Followers397
251Media
One more example of using CSS-only custom elements, but for accessibility. #html #css #WebComponents #DesignSystems dev.to/stuffbreaker/css-only…

CSS-Only Custom Elements for Accessibility (a11y)

In CSS-Only Custom Elements for Layouts, I used undefined custom-element tags to define an API for...

dev.to
33
Calling all fellow web devs, design engineers, and web components nerds! Would you be interested in a #WebComponents conference??? Let us know! #html #css #javascript #WebDev #DesignSystems docs.google.com/forms/d/e/1F…

Interested in a Web Components conference? Let us know below!

Web Components folks have been semi-seriously talking about organizing a conference for years, and with the ecosystem in a real moment of growth and popularity, it's about time! This form is our...

docs.google.com
4
67
Okay, here's some more fun with CSS-only custom elements - layout components! #html #css #webcomponents dev.to/stuffbreaker/css-only…

CSS-Only Custom Elements for Layouts

Build declarative layouts using CSS-only custom elements

dev.to
1
1
3
337
Lately, I've been exploring CSS-only custom elements. They're pretty rad! #html #css #webcomponents dev.to/stuffbreaker/css-only…

CSS-Only Custom Elements

Build real, composable web components using markup and CSS, with no JavaScript

dev.to
2
4
195
In case you didn't read to the bottom, the CEM Generator supports these, so you can generate docs and framework integrations for these with the rest of your other web components. 🤘 cem-generator.wc-toolkit.com…

CSS-Only Custom Elements

Document custom elements that are defined by CSS without a JavaScript class.

cem-generator.wc-toolkit.com
32
Someone asked what I think a Custom Elements Manifest generator should look like. Here's my first pass at it. The goal was to make it lightweight and easy to use. It's still in the early stages, but let me know what you think. #WebComponents cem-generator.wc-toolkit.com…

Overview

Generate Custom Elements Manifests for component libraries quickly and extensibly.

cem-generator.wc-toolkit.com
1
1
77
Some features include: - lightweight - it leverages TS to handle the AST parsing, so we only have a few dependencies - full API inheritance for extended components - API auto-detection and documentation with inline comments - plugin API - CSS-only custom element detection
15
Why did I discover this at the beginning of my 8 hour flight??? Now I won't be able to think about anything else...
94
Oh, hello @sveltejs type generator for #WebComponents... wc-toolkit.com/integrations/…

Svelte Types Generator

Generate Svelte types for custom elements and web components

wc-toolkit.com
2
89
🌶️ HOT TAKE! 🌶️ Figma is not a very good source of truth for your design tokens. The limitations in types and the way features are implemented make it difficult to capture common tokens like line heights and shadows. #DesignSystems
1
90
I love making fun/nerdy projects for myself. Sometimes when I think it's nerdy enough, I like to share it. Get ready for something nerdy... #WebComponents
1
4
104
Anyone coming to #kcdc2026 next week??? I'll be nerding-out in a session about design tokens and design systems if anyone wants to join.
2
2
288
Does anyone know if there's a way to support relative units (1.5) or percent based (150%) line heights in @figma variables? #DesignSystems
2
1
118
Are people using AI tools to manage their inbox?
95
The #WebComponents type parser just got upgrades! - Imported type aliases now resolve via the AST and TypeScript type checker instead of by name string - fixing collisions and types from node_modules - New options: maxParseDepth and maxParseProperties for deep or large types
1
3
1,204
Check it out! wc-toolkit.com/documentation…

Type Parser

Get access to your API's TypeScript values

wc-toolkit.com
31
How do I get on this magical list to get @github Copilot for free as an #OpenSource maintainer? docs.github.com/en/copilot/h…

Access Copilot Pro for free as a teacher or open source maintainer - GitHub Docs

Get free access to Copilot Pro as a verified teacher or open-source maintainer.

docs.github.com
76
Why would someone use ElementInternals in an accordion web component?
1
128
I'm excited to announce WC Toolkit's new CEM Analyzer Plugin for Vite, Rollup, Rolldown, or Webpack builds. ✅ Auto-runs on build 🔁 Reruns on file changes 🔧 Zero config — auto-discovers your CEM config file #WebComponents #webdev #frontend #javascript wc-toolkit.com/cem-utilities…

CEM Analyzer Plugin

Vite/Rollup/Webpack plugins to run Custom Elements Manifest Analyzer

wc-toolkit.com
1
1
61
Some new things have rolled out recently in the #WebComponents helpers for @storybookjs: - added storybookHelpersReloader utility for automatic CEM watching & reloads - added per-story #CSS scoping via useScopedStyles - bug fixes #webdev #javascript wc-toolkit.com/integrations/…

Storybook Helpers

Helpers designed to make integrating web components with Storybook easier.

wc-toolkit.com
40
Load more