Lightnews — Scholar-powered news

Burton Smith

@stuffbreaker.bsky.social

1.3K followers 380 following 730 posts

Fun-loving coder and speaker. I love web development, web components, and design systems. Creator of kickstand-ui. I work @microsoft

Posts Media Videos Starter Packs

Pinned

Burton Smith @stuffbreaker.bsky.social · Apr 15

Something that I heard last week that I really appreciated.

4 Pathways to Purpose

Something that:
1. Excites you
2. Agitates you
3. Makes you curious
4. Feels neglected from earlier in your life

1 5

Burton Smith @stuffbreaker.bsky.social · 5h

Yeah, something's definitely messed up here.

Burton Smith @stuffbreaker.bsky.social · 1d

I would love to hear this talk! Design Systems are a perfect use-case for web components.

1 1

Burton Smith @stuffbreaker.bsky.social · 2d

For clarification this works directly in vscode with no additional setup required. The MCP is for vscode forks as they do not support the same APIs.

Burton Smith @stuffbreaker.bsky.social · 2d

I'm excited to announce #AI integration for the #WebComponents Language Server!

If you are using a @vscode.dev fork like @cursor.com.web.brid.gy or @windsurfai.bsky.social, the extension provides a local, configurable #MCP server.

#html #css #javascript
wc-toolkit.com/integrations...

1 1 5

Burton Smith @stuffbreaker.bsky.social · 2d

If you're interested in using @lit.dev, I created a starter kit I use for workshops. It needs to be updated a little, but it's a good start.

github.com/break-stuff/...

GitHub - break-stuff/lit-starter-kit: A starter kit for creating a Lit-based web component library.

A starter kit for creating a Lit-based web component library. - break-stuff/lit-starter-kit

github.com

Burton Smith @stuffbreaker.bsky.social · 2d

Kind of. It can be used for things like editor integration, framework type generation, documentation, etc. Here's an example of it being used in the Web Components Language Server I've been working on.

marketplace.visualstudio.com/items?itemNa...

Web Components Language Server - Visual Studio Marketplace

Extension for Visual Studio Code - Editor tools for working with web components / custom elements

marketplace.visualstudio.com

Burton Smith @stuffbreaker.bsky.social · 2d

The good news is that Storybook already supports/uses the CEM, so if it can reuse that, you should be golden.

Burton Smith @stuffbreaker.bsky.social · 2d

Actually, because of this, I've thought about creating a plugin that I could reuse the CEM for frameworks like svelte and Vue because there is so much overlap in the APIs.

1 1

Burton Smith @stuffbreaker.bsky.social · 2d

The closest thing I've seen is react-docgen.

1 1

Burton Smith @stuffbreaker.bsky.social · 8d

I can't wait for this to get picked up! Building #AI tooling into the #WebComponents language server is kind of a pain right now.

Introduction - Agent Client Protocol share.google/efO6Jngr1ROw...

Introduction - Agent Client Protocol

Get started with the Agent Client Protocol (ACP)

share.google

2 3

Burton Smith @stuffbreaker.bsky.social · 9d

Shoelace also provides an i18n package, but we have also gone down the route of a custom solution with dynamic imports.

If you are providing translations, I also recommend surfacing them as attributes/props in case they need to be customized.

github.com/shoelace-sty...

GitHub - shoelace-style/localize: A micro library for localizing custom elements.

A micro library for localizing custom elements. Contribute to shoelace-style/localize development by creating an account on GitHub.

github.com

Burton Smith @stuffbreaker.bsky.social · 9d

Yeah, we've been trying to track it down since the end of last week. It's a strange one indeed...

Burton Smith @stuffbreaker.bsky.social · 13d

It's finally here! Shopify Polaris #WebComponents!

Anthony Frehner @frehner.me · 14d

Polaris (web components) are now stable. The component APIs are unified across the Shopify ecosystem. Lots of hard work and alignment in this; lots of great devs contributing.

🎉

www.shopify.com/partners/blo...

Polaris Goes Stable - The Future of Shopify App Development is Here (2025) - Shopify

Polaris is now GA. Today marks a milestone moment for Shopify developers: Polaris is now stable and the default library for building experiences across the entire Shopify ecosystem.

www.shopify.com

2 9

Burton Smith @stuffbreaker.bsky.social · 15d

Check it out at:
wc-toolkit.com/integrations...

WCTools

A suite of integration tools for web components / custom elements

wc-toolkit.com

Burton Smith @stuffbreaker.bsky.social · 15d

I'm very excited to announce the release of the #WebComponents CLI validator! Now you can validate your web components in your build pipelines.

#html #javascript

2 10 30

Burton Smith @stuffbreaker.bsky.social · 20d

What have you published?

Burton Smith @stuffbreaker.bsky.social · 20d

a man is riding a segway in an office with the words welcome aboard below him

Alt: Michael scott is riding a segway in an office with the words welcome aboard below him

media.tenor.com

1 1

Burton Smith @stuffbreaker.bsky.social · 22d

A new #WebComponents library is out! This looks amazing! Nice job @cory.laviska.com!
#html #css #JavaScript

Quiet UI @quietui.org · 22d

An unlikely component has quickly turned into one of my favorites:

quietui.org/docs/compone...

Mesh Gradient · Quiet UI

Generates beautiful mesh gradients with customizable colors and complexity.

quietui.org

1 4 16

Burton Smith @stuffbreaker.bsky.social · 24d

Congratulations, @bencallahan.com!

Burton Smith @stuffbreaker.bsky.social · 28d

a man in a purple suit and top hat is saying `` please , tell us more '' .

Alt: Willy Wonka is saying `` please , tell us more '' .

media.tenor.com

Burton Smith @stuffbreaker.bsky.social · 29d

I had a great time nerding out about #WebComponents DX and #DesignSystems!

Font Awesome @fontawesome.com · 29d

🧙 Web Components need better tools.
Burton Smith built them.
🎧 Full ep → youtu.be/o6ygtiP31ws?...
#ToolingFixes #DXLove #PodcastAwesome

Rage Coding, Headless Web Components, and the Future of DX with Burton Smith | Podcast Awesome

YouTube video by Font Awesome

youtu.be

2 11

Burton Smith @stuffbreaker.bsky.social · Sep 15

My friends in Columbus, please come out and support our Metro Parks with a bunch of fellow nerds!
www.eventbrite.com/e/tech-takeo...

Tech Takeover Tuesday: Benefiting Friends of Metro Parks

Brews, raffle prizes, & park love! Join TechLife’s Tech Takeover Tues Sept 23 @ Nocterra (Scioto Audubon) -Benefiting Friends of Metro Parks

www.eventbrite.com

Burton Smith @stuffbreaker.bsky.social · Sep 14

If you're planing on using vanilla web components, I like this guide for getting started:

javascript.info/webcomponent...

If you want something with a bit nicer DX, you may want to check out somethig like @lit.dev or @stenciljs.com.

From the orbital height

javascript.info

1 2

Burton Smith @stuffbreaker.bsky.social · Sep 14

Ah, I see. There are a few things I see:

1. You're using customized built-in elements, and those are not supported by Safari (and likely won't ever be), so I recommend using autonomous custom elements instead.
2. Slots won't work without the shadow DOM

1 2

Burton Smith @stuffbreaker.bsky.social · Sep 14

Oh, interesting. That should be relatively straightforward. Can you explain a bit more? I'd love to get you unstuck.