85 replies

1. Matthias Ott Bluesky moments later

   the future!

2. Brian LeRoux Bluesky 1 min later

   HTML to build websites? 🌶️🌶️🌶️

   1. Zach Leatherman Bluesky 2 min later

      we are so brave 🏅

      1. Brian LeRoux Bluesky 4 min later

         just lazy mostly 💤

         1. Zach Leatherman Bluesky 7 min later

            shhh keep that quiet (though true)

            1. Brian LeRoux Bluesky 42 min later

               Oh right!

               gives me more space to deliver more value instead of spinning my tires chasing upgrades 🚀📈💰

3. Soufiane Bluesky 5 min later

   Can we have web components with a functional writing style. My brain can’t go back to classes

   1. Zach Leatherman Bluesky 8 min later

      sugar it however you want

      1. Justin Fagnani Bluesky 40 min later

         But also... classes are good.

         They declaratively combine state and behavior, which is exactly what you need for UI components.

         1. Code_E_Pendant Bluesky 4 hr later

            You know I love you Justin but we may never see eye-to-eye on this one. :)

            codepen.io/Jon-DeWitt/p...

            I tried making the class small and used the same helpers but I still can't find any advantage the class might have over a good ol function

            1. Justin Fagnani Bluesky 4 hr later

               Now define public properties and methods. You end up having to re-invent some very class-like syntax.

               I also personally much prefer class fields to hold instance state. Much easier to scan than imperative hooks. Also much easier to inspect in the debugger.

               1. Code_E_Pendant Bluesky 5 hr later

                  Here's the props! I'll be honest, I hadn't really considered public methods until just now. I wonder if that's a common enough use case...

                  codepen.io/Jon-DeWitt/p...

                  1. Code_E_Pendant Bluesky 5 hr later

                     To be sure, it's not perfect just yet, but it's still early, version 0. The goal is to make this better for typescript...

                     I guess the idea behind it is the important part.

            2. James Bluesky 4 hr later

               That's an odd comparison

               In your function component, you use helpers to define the element and the template (`customElement` and `html`). But you don't in the class, so it misleadingly looks more complex.
               If you did the same with the class, you'd greatly simplify the code

               1. Code_E_Pendant Bluesky 5 hr later

                  I do use helpers in the class actually?

                  1. James Bluesky 5 hr later

                     Sorry I missed the `html` usage. You generally wouldn't be creating the shadow root yourself, or appending dom directly. Similar, the whole getRootNode expression wouldn't be a thing. Presumably your `customElement` helper does the first two in the function component

                     1. Code_E_Pendant Bluesky 5 hr later

                        re: shadowRoot - That depends how conscientious you are. If you don't define it yourself, it will either be inaccessible or public.

                        on getRootNode - I could recreate a similar customCallback helper, but that makes very little difference. That's what it sugars down to either way.

                        1. Code_E_Pendant Bluesky 5 hr later

                           But the comparison isn't just verbosity (although even with helpers a class is still more verbose.)

                           It's having everything available in the same procedural scope. No reliance on the `this` binding or implicit typing. Etc...

                           private props = closure variables

                           FP is turing-complete. That kinda thing

                           1. Code_E_Pendant Bluesky 5 hr later

                              anything classes can achieve, functions can too, but differently. And the comparison is intended to highlight that. What advantage does the class have here?

                        2. James Bluesky 6 hr later

                           I more meant that your helper is creating the root for you. Whereas in the class component, you do it yourself (which isn't what's common in the real world - usually a library or helper is used)

                           1. Code_E_Pendant Bluesky 6 hr later

                              You're not wrong, though I didn't want to build a framework just for the demonstration, lol. I didn't want to use Lit either or it would feel too much like I was dissing it in comparison to my own, and I don't wanna do that either, I respect Justin a lot

   2. Hawk Ticehurst Bluesky 1 hr later

      Give Haunted (by @xn--6j8haa.ws) a peek

      hauntedhooks.netlify.app

      1. Private reply Bluesky 2 hr later
   3. Private reply Bluesky 1 hr later
   4. Code_E_Pendant Bluesky 3 hr later

      Hey yes we can

      thunderous.dev

4. Rik Schennink Bluesky 7 min later

   they're really quite something aren't they

5. reaper Bluesky 14 min later

   Using wc to create a mount point/island for preact to write preact to create isolated and reactive islands was a good idea.

   I just like complicating things 😬

   1. Zach Leatherman Bluesky 15 min later

      I’ve done something similar with Vue before! (and github.com/11ty/is-land of course)

      it’s a good idea

      1. reaper Bluesky 23 min later

         Oh I know about 11ty and it’s island implementation, that was the inspiration 😂 (Thanks for making it)

         github.com/dumbjs/prela...

   2. Hawk Ticehurst Bluesky 1 hr later

      Also worth mentioning is @astro.build’s support for rendering other web frameworks is implemented as an islands-architecture-based web component

      github.com/withastro/as...

6. Manuel Matuzović Mastodon 24 min later

   @zachleat that was a good post

   1. Zach Leatherman Mastodon 35 min later

      @matuzo a complex and nuanced topic

7. Robin Cussol Bluesky 24 min later

   Why is WebC/Enhance possible when other fw authors seem so adverse to web components?

   I just re-read your post www.zachleat.com/web/good-bad..., and would need to re-read Rich Harris’s and Ryan Carniato’s.

   I find this debate confusing. Is it just that the platform is catching up for better DX?

   1. Zach Leatherman Bluesky 29 min later

      I don’t think that question is quite the framing I’ve seen. The complaints I’ve seen is that framework folks want web components to either do more or go away altogether. My experience is that web components do quite a bit and don’t get in my way 🤷

      1. Zach Leatherman Bluesky 49 min later

         *are

         (ugh)

      2. Robin Cussol Bluesky 50 min later

         And being a web standard, there's a guarantee they'll be supported for a very long time, right?

         Definitely need to study and play with them more.

         WebC rekindled my interest in them, so did Chris Ferdinandi's videos on his channel.

         Thank you Zach!

         1. Zach Leatherman Bluesky 51 min later

            absolutely 🙌

8. Jesse Skinner Mastodon 25 min later

   @zachleat

   1. Zach Leatherman Mastodon 35 min later

      @JesseSkinner <poop-on> would be a good web component

      1. Jared White (ResistanceNet ✊) Mastodon 42 min later

         @zachleat @JesseSkinner also <grey-poupon>

         1. Zach Leatherman Mastodon 49 min later

            @jaredwhite @JesseSkinner we think alike (complimentary)

         2. Konnor Rogers Mastodon 1 hr later

            @jaredwhite @zachleat @JesseSkinner

            and the obligatory <gray-poupon>

9. marwil.bsky.social Bluesky 28 min later

   Ketzer.

   1. Zach Leatherman Bluesky 30 min later

      do you have a moment to talk about our lord and savior web components

10. westbrook Mastodon 44 min later

    @zachleat I'm glad to hear you've not been overly hardened. Happy Friday Zach!

    1. Zach Leatherman Mastodon 48 min later

       @westbrook keep that chin up 🏅

11. Matija Marohnić Bluesky 56 min later

    They seem to fulfill my styling scoping and isolation needs so far. But I only scratched the surface.

12. Adam Riha Bluesky 1 hr later

    I built a whole ui library 6 years ago using Stencil JS and it was great.

    At that time I thought web components would take off really quickly…. But the reality is very different.

    1. JauntyWunderKind Bluesky 1 hr later

       Really sad GitHub's catalyst.rocks is defunct. Really liked the target/action declarativeness right in the HTML.

       Really want to envision a future where the page bindings (& ideally data) are all visible on the page. Catalyst for very close.

       1. JauntyWunderKind Bluesky 1 hr later

          Oh sorry, catalyst was highly inspired by Stencil, that's why I mention it here.

          I toy with trying to fork & update, maintain, but I feel like not-the-dude what feels like very deliberate carefully planned librarying.

13. daniel r(ooooooh) in nyc 🇺🇸 Bluesky 1 hr later

    are you testing the vibes, or what?

    1. Zach Leatherman Bluesky 1 hr later

       I’m just out here, living my life, man… 😅

14. Scott Jehl Bluesky 1 hr later

    so mystified tho

    1. Zach Leatherman Bluesky 2 hr later

       have I got a course for you scottjehl.com/learn/webcom...

15. Dave Rupert Bluesky 1 hr later

    heard otherwise

    1. Zach Leatherman Bluesky 1 hr later

       time for an ol’ fashioned twitter pile-on

    2. DIANA Bluesky 3 hr later

       I'm taking your course on them now!

16. Burton Smith Mastodon 1 hr later

    @zachleat I think they're pretty neat

    1. Zach Leatherman Mastodon 1 hr later

       @stuffbreaker who can argue with an endorsement like this

17. Duffeh Bluesky 1 hr later

    I use them for wrappers, but accessibility wise do you add roles and other accessibility tags, say it was a button that did a API request.

18. David Darnes Bluesky 2 hr later
    1. Zach Leatherman Bluesky 2 hr later

       this is what founders do when they’re in founder mode

19. OUTAmygaminmind Bluesky 2 hr later

    🫡

20. Bret Little Bluesky 2 hr later

    Great for some usecases. Horrible for others. IMHO.

21. Zach Leatherman Bluesky 2 hr later

    any good web components starter packs yet?

    1. Zach Leatherman Bluesky 3 hr later

       well, I know of at least one, now: go.bsky.app/KvgKwov

       1. Zach Leatherman Bluesky 3 hr later

          (recommendations welcome)

          1. James Landrum Bluesky 7 hr later

             I got into heated fights defending them that got Vercel employees cussing me out and built a web version of Mac OS 9 using them does that count? 🤷

       2. James Bluesky 3 hr later

          Just what I've been looking for! Good list so far 🙏

    2. Dave Rupert Bluesky 3 hr later

       go.bsky.app/3nDP8iq

       1. David Darnes Bluesky 3 hr later

          Had to double check I added you zach 😂

          1. Zach Leatherman Bluesky 3 hr later

             an eventual consistency bug I’m sure 😅

       2. JauntyWunderKind Bluesky 4 hr later

          I want to be here so bad. Someday I will have a real claim. But hopefully the list is full, teaming with brilliance, before my slow ass has any claim.

          1. JauntyWunderKind Bluesky 4 hr later

             I have like ~ 15 components I've made! That are probably a decade old now. Lol,
             github.com/x-tag/x-tag

22. ñate Bluesky 3 hr later

    I would *love* to believe that

    1. Zach Leatherman Bluesky 3 hr later

       crawl into my brain

23. Private reply Bluesky 5 hr later
24. Private reply Bluesky 9 hr later
25. xdder (xdding) Bluesky 12 hr later

    Although I, as a backend dev, disagree, I have to admit that this is a based take

26. Andreas Møller Bluesky 13 hr later

    They are great for somethings and WAY underused.

    Every company that offer us components as part of their offering should almost certainly be using web-components

27. Munawwar Firoz Bluesky 5 days later

    And you the only person I know who writes vanilla web components like a boss! 🔥

    1. Zach Leatherman Bluesky 5 days later

       haha, thank you 🙌

    2. Zach Leatherman Bluesky 5 days later

       a few more folks here: bsky.app/starter-pack...

    3. Burton Smith Bluesky 5 days later

       You write vanilla web components... like some kind of psychopath???

       1. Munawwar Firoz Bluesky 5 days later

          He didn't have to upgrade lit from v1 to v2 to v3 because he kept it vanilla ... big brain move!

          *But*, he doesn't have software upgrade stories to tell his grandkids about. Sad, eh?