When I was at Microsoft, we were trying to find ways around some of the pain points of #WebComponents, so I did an exploration on what Declarative Custom Elements could potentially provide us. #html #css #javascript dev.to/stuffbreaker...

@davatron5000.bsky.social: "Burton Smith still uses Dev.to for his personal blog". #webdev #webcomponents #designsystems

Food for thought all you people out there #developingdesignsystems https://report.zeroheight.com/#:~:text=do%20you%20use%3F-,Web%20frameworks,-Label #webdev #webcomponentscg

Are teams using #TypeScript declaration maps to provide a better go-to-definition experience for developers? I've used source maps, but I don't think I've provided declaration maps. #SoftwareEngineering #Programming

When you are in an #html file and you want to go-to-definition for a custom element, what do you think the behavior should be? Should it go to: - type definition - JS file where class is defined - CEM entry - something else #webcomponents #javascript

I updated my article on reducing #WebComponent FOUC to include details on how to choose an appropriate timeout. #html #css #javascript dev.to/stuffbreaker...

Wild how far you can push "customizable select" with just #CSS nerdy.dev/nice-select

Finally solving the tooltip arrow usecase with a new CSS property called border-shape ⚠️ WIP early-stage API, timeline TBD, more info coming soon But it brings a lil tear to my eye to see this working, border & all 🥲 This demo uses anchored container queries + border-shape + a little animation

TIL, Chrome 144 ships some new pseudo-classes. 👏 Within limits, you can now style the matching strings of the "find in page" search. ::search-text { // matching strings } ::search-text:current { // currently matched string } More on the blog. 👇 www.stefanjudis.com/today-i-lear...

I've been having fun with improving this FOUC solution for #WebComponents. Thank you, everyone, for the feedback! I've improved upon it.

I've been trying to think of a way to reduce the flash of unstyled content (FOUC) when using #WebComponents with something I could add to my #CSS reset and not need #JavaScript. Here's what I came up with:

Awesome episode! Thanks for the shout-out @davatron5000.bsky.social! Any time you and @chriscoyier.net want to chat about web components DX, I'd love to come on (I know, I know, it's the nerdiest of topics).

Ladies, gents, and non-binary pals: I could use some work. Here's what I do best: - Workshops: JS, TS, web components, frontend performance… - Development: vanilla frontends, legacy refactoring (esp. React, CSS) - DevRel: yapping & writing - General coaching & code review 👉 [email protected]

The #WebComponents CEM Validator just got an upgrade with improved logic for rule evaluation and better type checking when evaluationg exported types. #webdev #html #css #javascript wc-toolkit.com/cem-utilitie...

After spending a week at a tech conference talking about how #AI is disrupting our industry, it was interesting to hear @jamesgunn.bsky.social having the same conversation on @smartless.bsky.social about the entertainment industry. www.smartless.com/episodes/epi...

Some changes in @storybook.js.org v9 and v10 removed the ability to log events in the "Actions" panel. I updated the Web Components helpers to account for this. It's now built into the `template` helper, or you can manually log them. #webdev #html #javascript wc-toolkit.com/integrations...

🌶️ HOT TAKE 🌶️ `aria-label` is not accessible because it doesn't support browser localization. #a11y #l10n #i18n

It's weird to think about localization (#l10n) as a form of accessibility (#a11y), but it makes sense. #webdev #i18n

At first, I thought it was weird that @svelte.dev surfaces #css variables as props, but I now I kinda like it... svelte.dev/docs/svelte/...

I updated my @lit.dev starter kit for building a web component library with all of the latest bells and whistles from the WC Toolkit. Give it a try and tell me what you think. #webdev #html #css #javascript github.com/break-stuff/...

Dammit, @davatron5000.bsky.social! I'm supposed to be prepping for a web components workshop tomorrow and you had to go and nerd snipe me with Declarative Shadow DOM service workers...

I'm #css, why don't we have `display: screen-reader` yet? Instead, every library implements some kind of visually hidden class to slap on everything.

The #WebComponents Toolkit JSX type generator has some exciting updates! 1. Strongly typed events (strongly types the `event.target`) 2. SolidJS type support #TypeScript #JavaScript #HTML wc-toolkit.com/integrations...

Happy New Year! The #WebComponents @react.dev wrappers have joined the WC Toolkit and have some nice upgrades, including: - Strongly typed events - CSS variable types for components - Component and tag name formatting wc-toolkit.com/integrations...

Happy holidays! I thought I would sneak in a little gift for everyone with the #WebComponents Language Server for @zed.dev! Enjoy! wc-toolkit.com/integrations...

I was really surprised to see that more users have installed the Web Components Language Server for @intellijidea.com than @webstorm.jetbrains.com!

I hate that everything in #GitHub is called an "issue". Some of them are feature requests, proposals, or questions.

Today I learned a term that I find myself guilty of more than I care to admit in team projects - "licking the cookie". #webdev #opensource #oss #programming www.redhat.com/en/blog/dont...

We’re sharing details about a potential vulnerability that may affect a small subset of built and published Storybooks. 🧵 (1/4)

Web Components Language Server for Neovim! ✨ Zero-config LSP support for custom elements 🧠 Smart completions & diagnostics ♻️ Auto-restart on config changes 🔧 Works with HTML, Astro, Vue, Svelte, JSX & more Try it out! 👇 wc-toolkit.com/integrations... #Neovim #WebComponents #DevTools

How are #ios, #android, and other native developers documenting their #DesignSystems without creating a ton of work with screenshots or other visualizations? I see that @storybook.js.org has a native experience. Has anyone used it and had success? github.com/storybookjs/...

My team at Adobe is hiring a web components engineer to help us build out the future of our design system. Great opportunity for someone earlier in their career to jump in and help us continue to improve Spectrum Web Components. In-office hybrid in LA, Denver or NYC. adobe.design/jobs/job-pos...

Come nerd-out with me at my #WebComponents workshop!

Hmmm... I may be rethinking my strategy with the #WebComponents Language Server. Writing it in Node requires it to be installed to use it or any of the extensions. That's kind of annoying for our #dotnet, #php, #java, #golang, #rust, and #ruby friends

Today was my first day at Zocdoc as part of their Web Platform team working on #DesignSystems! I'm pretty excited about what we're going to be doing. www.zocdoc.com

Since it looks like I'll be setting up a new computer today, I decided to update Punk_OS to include a #MacOS setup. 🤘 #WebDev #Developer #Programmer github.com/break-stuff/...

🚀 I’m running a Thanksgiving sale on my Web Component Engineering course. Through Nov 30, you can get 25% off with the code GRATITUDE25. bluespire.com/course/web-c...

Who is a good person to reach out to for help about @zed.dev extension development?

For you #TypeScript devs out there that have learned #Rust, what resources have you found that helped you?

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

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.

This holiday season, support the #OpenSourceSoftware / #OSS community by purchasing this delicious side dish! 🤘 #webdev #SoftwareDevelopment cranberrysoss.com

This was an awesome interview on how to scale #DesignSystems! I really love the purpose of a design system team stated at the beginning! "Bridging the gap between design and development on behalf of an organization so that those agreements can scale." t.ly/bvQ1N

I absolutely love this! Thank you @sentry.io and others for supporting #OpenSource! opensourcepledge.com

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

I know this may not be a popular opinion for some of you, but please namespace your CSS custom properties, parts, and possibly states in your web components (ie - `--button-border`, `:state(button-active)`, `::part(button-base)`). This is really important for a few reasons:

I've been having fun playing with the Ubuntu distros for a Linux desktop environment, but found myself running the same scripts every time I set one up. So, I decided to create a script to simplify things for me. Let me know if you think I missed anything. #wevdev #linux github.com/break-stuff/...

Today I learned about "fnm" - a Rust-based "nvm" alternative for switching between multiple versions of Node.js. #webdev #javascript #programmer github.com/Schniz/fnm

When you get a new dev laptop, what do you typically install? #webdev #developer #programmer

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...