Burton Smith
@stuffbreaker.bsky.social
Fun-loving coder and speaker. I love web development, web components, and design systems. Creator of kickstand-ui.
I work @microsoft
I work @microsoft
I wanted to get this out so our friends that use @jetbrains.com can play with the #WebComponents Language Server over the holidays. Enjoy!
#html #css #javascript
#html #css #javascript
November 21, 2025 at 4:21 PM
I wanted to get this out so our friends that use @jetbrains.com can play with the #WebComponents Language Server over the holidays. Enjoy!
#html #css #javascript
#html #css #javascript
Well, Monday was officially my last day at Microsoft. It was a great adventure and I met some amazing people along the way for which I am very grateful. Now it's time for a new chapter.
November 20, 2025 at 12:31 AM
Well, Monday was officially my last day at Microsoft. It was a great adventure and I met some amazing people along the way for which I am very grateful. Now it's time for a new chapter.
I'm really excited to release the next iteration of the #WebComponents language server! This comes with some solid improvements:
- Autocomplete for #css variables, parts, and states
- Basic binding integration for popular frameworks, including Angular, Vue, and Lit.
- Lots of perf improvements
- Autocomplete for #css variables, parts, and states
- Basic binding integration for popular frameworks, including Angular, Vue, and Lit.
- Lots of perf improvements
November 12, 2025 at 1:00 PM
I'm really excited to release the next iteration of the #WebComponents language server! This comes with some solid improvements:
- Autocomplete for #css variables, parts, and states
- Basic binding integration for popular frameworks, including Angular, Vue, and Lit.
- Lots of perf improvements
- Autocomplete for #css variables, parts, and states
- Basic binding integration for popular frameworks, including Angular, Vue, and Lit.
- Lots of perf improvements
Style isolation happens a lot. A good example of that would be something like the HTML date input. Inside that element is a bunch of spans and divs that you don't have access to style with the exception of elements with a pseudo selector. We can do the same using the CSS shadow parts API.
October 19, 2025 at 7:09 PM
Style isolation happens a lot. A good example of that would be something like the HTML date input. Inside that element is a bunch of spans and divs that you don't have access to style with the exception of elements with a pseudo selector. We can do the same using the CSS shadow parts API.
Any time you nest elements, you are working with a default slot, but a more explicit example of an element with multiple slots would be something like the details/summary elements.
October 19, 2025 at 7:06 PM
Any time you nest elements, you are working with a default slot, but a more explicit example of an element with multiple slots would be something like the details/summary elements.
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...
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...
October 14, 2025 at 12:54 PM
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...
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...
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
#html #javascript
October 1, 2025 at 1:08 PM
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
#html #javascript
Some new #WebComponents Language server features rolled out this weekend!
✅ Include and exclude files from the language server
✅ Create specific configurations for individual libraries
✅ Reference a CEM locally or from a CDN (this is really nice for CDN and monorepo users)
#html #webdev #javascript
✅ Include and exclude files from the language server
✅ Create specific configurations for individual libraries
✅ Reference a CEM locally or from a CDN (this is really nice for CDN and monorepo users)
#html #webdev #javascript
August 18, 2025 at 12:03 PM
Some new #WebComponents Language server features rolled out this weekend!
✅ Include and exclude files from the language server
✅ Create specific configurations for individual libraries
✅ Reference a CEM locally or from a CDN (this is really nice for CDN and monorepo users)
#html #webdev #javascript
✅ Include and exclude files from the language server
✅ Create specific configurations for individual libraries
✅ Reference a CEM locally or from a CDN (this is really nice for CDN and monorepo users)
#html #webdev #javascript
I am very excited to announce the alpha release of the #WebComponents Language Server!!!
August 14, 2025 at 2:51 PM
I am very excited to announce the alpha release of the #WebComponents Language Server!!!
This quote came up today at work when discussing #DesignSystems and #DesignTokens.
Variety is expensive, both for performance and cognitive load. Too much is a bad thing.
Variety is expensive, both for performance and cognitive load. Too much is a bad thing.
June 24, 2025 at 7:25 PM
This quote came up today at work when discussing #DesignSystems and #DesignTokens.
Variety is expensive, both for performance and cognitive load. Too much is a bad thing.
Variety is expensive, both for performance and cognitive load. Too much is a bad thing.
I had some fun with this one! I also tried to take into account scenarios where there might be a particularly long siren that overlaps many - { start: 0, end: 12 }.
June 23, 2025 at 3:28 PM
I had some fun with this one! I also tried to take into account scenarios where there might be a particularly long siren that overlaps many - { start: 0, end: 12 }.
I like how @popcorners.com added this resealable feature to this bag like I'm not going to eat it all in one sitting... 😅
June 14, 2025 at 11:32 PM
I like how @popcorners.com added this resealable feature to this bag like I'm not going to eat it all in one sitting... 😅
Awesome talk by @tdesseyn.bsky.social @stirtrek.com on using social media to find your next job, but it looks like he's been skipping leg day. 🤣
May 2, 2025 at 1:09 PM
Awesome talk by @tdesseyn.bsky.social @stirtrek.com on using social media to find your next job, but it looks like he's been skipping leg day. 🤣
I know I've been a bit quiet lately and have hinted at something coming and I think it's almost ready.
#webcomponents
#webcomponents
February 9, 2025 at 5:20 PM
I know I've been a bit quiet lately and have hinted at something coming and I think it's almost ready.
#webcomponents
#webcomponents
January 24, 2025 at 6:45 PM
The gif isn't working, so here's a video
January 1, 2025 at 3:22 PM
The gif isn't working, so here's a video
A feature I have re-written so many times is the documentation for my #webcomponents. I finally decided to create a reusable custom element that I can customize based on the library or design system needs.
www.npmjs.com/package/wc-dox
www.npmjs.com/package/wc-dox
January 1, 2025 at 3:20 PM
A feature I have re-written so many times is the documentation for my #webcomponents. I finally decided to create a reusable custom element that I can customize based on the library or design system needs.
www.npmjs.com/package/wc-dox
www.npmjs.com/package/wc-dox
Which #webcomponents logo do you consider is the "best"?
December 11, 2024 at 1:27 PM
Which #webcomponents logo do you consider is the "best"?
Our "tree" is up! Let the festivities begin!
December 2, 2024 at 1:14 AM
Our "tree" is up! Let the festivities begin!
I'm really excited release a new tool for documenting your #designsystems - Code Bubble!
Features include:
✅ Built with #webcomponents
✅ Global configuration
✅ Supports multiple languages
✅ Open in Sandbox (currently codepen and stackblitz)
✅ Event hooks
✅ And more!
www.npmjs.com/package/code...
Features include:
✅ Built with #webcomponents
✅ Global configuration
✅ Supports multiple languages
✅ Open in Sandbox (currently codepen and stackblitz)
✅ Event hooks
✅ And more!
www.npmjs.com/package/code...
October 3, 2024 at 4:48 PM
I'm really excited release a new tool for documenting your #designsystems - Code Bubble!
Features include:
✅ Built with #webcomponents
✅ Global configuration
✅ Supports multiple languages
✅ Open in Sandbox (currently codepen and stackblitz)
✅ Event hooks
✅ And more!
www.npmjs.com/package/code...
Features include:
✅ Built with #webcomponents
✅ Global configuration
✅ Supports multiple languages
✅ Open in Sandbox (currently codepen and stackblitz)
✅ Event hooks
✅ And more!
www.npmjs.com/package/code...
I'm very excited to launch a new tool for linting #webcomponents in #html! This provides inline validation directly in your markup!
www.npmjs.com/package/cust...
www.npmjs.com/package/cust...
June 24, 2024 at 3:41 PM
I'm very excited to launch a new tool for linting #webcomponents in #html! This provides inline validation directly in your markup!
www.npmjs.com/package/cust...
www.npmjs.com/package/cust...
