|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
This is so sad... I was so excited to see this take off.
0 replies 0 reposts 0 likes
|
|
Burton Smith@stuffbreaker.bsky.social |
15 followers 8 following 54 posts
Fun-loving coder and speaker. I love web development, web components, and design systems. Creator of @kickstand_ui. I work @microsoft
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
This is so sad... I was so excited to see this take off.
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
This is very helpful for #javascript frameworks like Angular that cannot type-check custom elements in their templates, server-side frameworks like PHP, or even static HTML!
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
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...
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
For context - web components are a standards-based way of making components in the browser. When frameworks like Next.js server-side render their content, there is no browser and these components tend to break the process. With these new wrappers, they should not.
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
...and for my next trick, I will run Shoelace #webcomponents in a @nextjs.org project!
stackblitz.com/github/break...
1 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I'm really excited to announce an upgrade to my react wrappers for #webcomponents! This version includes some features I've been kicking around for a while:
- Extendable types
- Attribute mapping
- Tag name scoping
- SSR Safety
www.npmjs.com/package/cust...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
The individual JSX types from the #webcomponents integration package are now exportable and the package now has a link to a sandbox you can play with!
www.npmjs.com/package/cust...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Awesome! Thank you!
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Do you know if there is a way to include #webcomponents in the feed? It looks like it only picks up "web components".
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
So this is cool. It's an agnostic context provider for web components!
#webcomponents
github.com/open-wc/cont...
0 replies 0 reposts 2 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
If you're working with #webcomponents, the new #css `light-dark()` function is going to be a game changer!
dev.to/stuffbreaker...
0 replies 2 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Ah, I see. I thought you were referring to rendered content in a web component. Those are fine for SEO.
0 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Why wouldn't SEO work with CSR?
2 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I would love to see what you come up with. The only web component meta framework in production I've seen is Rocket.
rocket.modern-web.dev
1 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Not that I'm aware of.
0 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
If you were using a layout component, would you expect to provide your own semantic elements (header, footer, main, etc.) or would you expect those to be built-in?
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
It took me a second to realize this was from 2020. I was confused by all of the Polymer references (since it is now Lit).
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Here's a simple example of how they work.
stackblitz.com/github/break...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
#webcomponents Storybook Helpers 2.0 have landed!
www.npmjs.com/package/wc-s...
Changes include:
- Storybook 8 support
- Removed v6 support
- A new sandbox for testing
- Improved syntax and formatting when showing code
- Updated configuration API
Check it out!
1 replies 0 reposts 2 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Very cool! Thanks!
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
That's pretty cool! How are you creating the tints and shades for those color variations once you select the main colors?
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
How are all the cool kids generating #css color palettes for their #designsystems these days?
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
TIL - You can add media queries to #css nesting!
0 replies 0 reposts 2 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
This is probably one of my favorite videos on creating a basic color palette for #designsystems.
www.youtube.com/watch?v=yYwE...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Something interesting with #webcomponents is brewing over with the Font Awesome and Shoelace teams...
www.kickstarter.com/projects/fon...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Here is a simple tool I just released for marking items in your #webcomponents JSDoc as `deprecated` so they are properly updated in the Custom Elements Manifest.
www.npmjs.com/package/cust...
0 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Right, but you have to manually include it every time you use the custom element or rely on some additional tooling to handle it for you. It doesn't seem very scalable for an entire component library.
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I'm not sure if this is being recorded. I can ask.
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
If anyone wants to hang out and chat about web components, there will be a virtual meetup tonight where I'll be talking about integrating web components into your projects.
www.meetup.com/front-end-co...
2 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
TIL - you can add a datalist to an HTML range input and it will add tick-marks for you... 🤯
codepen.io/break-stuff/...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I just released a new package that helps you add custom metadata for your web components to the Custom Elements Manifest using jsDoc tags.
www.npmjs.com/package/cem-...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Here's a tool I created to provide type safety for web components in Svelte projects. Enjoy! 😉
www.npmjs.com/package/cust...
0 replies 1 reposts 2 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
TIL - you can add the `disabled` attribute to link elements to prevent stylesheets from loading. 🤯
developer.mozilla.org/en-US/docs/W...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Yeah, I actually use it in my web component Storybook helpers.
www.npmjs.com/package/wc-s...
1 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Great article! Thank you! I saw you have "spread" on your wish list. Have you seen the spread directive?
open-wc.org/docs/develop...
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Seeing Shopify Polaris web components would be fantastic!
github.com/Shopify/pola...
0 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Here's a simple repo where I extend Shoelace's input element.
github.com/break-stuff/...
0 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
If any of you are extending your web components from other components, I created a tool to update the CEM with the inherited data to include attributes, properties, methods, CSS custom properties, CSS parts, slots, and events. Enjoy! 😉
www.npmjs.com/package/cust...
1 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Wow! You wrote it in vanilla web components! That's hard-core... Did you notice a perf difference?
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I'm surprised it wasn't at least brought up during the design systems portion. I have noticed there are a lot of devs that are so focused in their ecosystem that tools like web components aren't even on their radar.
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I don't see any reason why not. There are a lot of new tools and browser APIs that would make that pretty easy.
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I'm not super keen on the DSD (Declarative Shadow DOM) API because of the fact you have to define the template for each component instance, but the DCE (Declarative Custom Elements) seems promising for scalably SSRing custom elements.
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I started programming with .Net early in my career and learned the SOLD Principles of OOD. As I've transitioned to more webdev and JavaScript projects, the principles didn't hold up as well.
This morning I read about the CUPID Properties... 🤔
dannorth.net/cupid-for-jo...
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Nice! Thanks!
0 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I see. So everything is essentially private. What about public methods and properties?
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
This is cool! How does it handle public vs private (#) access modifiers?
2 replies 0 reposts 1 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Some of the features include: - it's generated from your CEM - it shuts off the loader once all components have been loaded to improve performance - additional components can be added outside of your library - build and runtime configuration - eager-loading
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
I had fun playing with some ideas while I was getting ready for my workshop and created a web component lazy-loader. With it, you can create a single entry point for your components that will only get imported as you use them on the page.
www.npmjs.com/package/cust...
1 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Quick clarification - this apparently isn't in Firefox ESR (enterprise) yet.
0 replies 0 reposts 0 likes
|
|
Burton Smith
@stuffbreaker.bsky.social
[ View ] |
Quick clarification - this apparently isn't in Firefox ESR (enterprise) yet.
0 replies 0 reposts 0 likes