28 replies

1. Hasan Ali Mastodon 16 min later

   @zachleat This looks really cool 🙌🏾

   I really appreciate how readable the code for it is. I've been using your web components (e.g. details-utils, resize-asaurus) to learn how to build them from scratch

   1. Zach Leatherman Mastodon 47 min later

      @hasanhaja Thank you Hasan! I just re-read the code after your comment and noticed/fixed a few issues 😅

      1. Hasan Ali Mastodon 1 day later

         @zachleat 😂

         I appreciate it more now! Thank you 🙌🏾

         1. Hasan Ali Mastodon 18 days later

            @zachleat Inspired by your code and post, I gave writing and publishing my own web component a shot

            🎪 Demo: https://hasancruk.github.io/cruk-carousel/demo.html
            💾 Code: https://github.com/hasancruk/cruk-carousel

            In its current state, it's more of a toy project than something that's ready for production. I've learned so much putting that simple component together, and my understanding of the web component spec (mainly Shadow DOM) is getting more and more nuanced

            #webcomponents

            1. Zach Leatherman Mastodon 18 days later

               @hasanhaja looks great! Carousel is a great use case!

2. Martin Schneider Mastodon 18 min later

   @zachleat That's a pretty fancy iframe, Zach.

   1. Zach Leatherman Mastodon 48 min later

      @schneyra WKWebView could never!

3. Carlton Gibson 🇪🇺 Mastodon 25 min later

   @zachleat oh that’s wonderful! 🤩

   1. Zach Leatherman Mastodon 48 min later

      @carlton thank you Carlton!

   2. Carlton Gibson 🇪🇺 Mastodon 49 min later

      @zachleat (update: DISASTER emoji typo 🤦‍♀️ FIXED)

      1. Zach Leatherman Mastodon 50 min later

         @carlton I knew what you meant 😃

         1. Carlton Gibson 🇪🇺 Mastodon 58 min later

            @zachleat phew.

4. Christopher Kirk-Nielsen Mastodon 36 min later

   @zachleat I don't need this, but I want to use it regardless because it's such a cool lil' tool. Nice work!

   1. Zach Leatherman Mastodon 49 min later

      @chriskirknielsen well, wait 😅

5. Raymond Camden Mastodon 45 min later

   @zachleat this is a damn good idea

   1. Zach Leatherman Mastodon 49 min later

      @raymondcamden Thanks Raymond!

      1. Raymond Camden Mastodon 1 hr later

         @zachleat when i got past the initial learnings on WC, i realized it was tempting to build comps that were DX at the expense of perf for users - so examples like this - i just freaking love. gonna start calling em Guilt Free Web Components ;)

         1. Zach Leatherman Mastodon 1 hr later

            @raymondcamden guilt free until you hit that next.js 200 KB performance budget (the bar is so low here 😅)

6. Konnor Rogers Mastodon 7 hr later

   @zachleat wait... I actually have a use case for this...

   I'm working on building a "code pen like" editor using <textarea> + <pre>

   https://twitter.com/RogersKonnor/status/1717661084692221982

   This should pair perfectly for full page examples!!

   (Still a WIP)

   https://konnorrogers.github.io/light-pen/components/light-pen/

   1. Zach Leatherman Mastodon 8 hr later

      @konnorrogers awesome!

7. passle Mastodon 1 day later

   @zachleat Neat :)

8. Lucien Immink Mastodon 1 day later

   @zachleat Very cool, if I get the time I'll add the os="windows" property to it

   1. Zach Leatherman Mastodon 2 days later

      @lucienimmink ha, and make it automatically switch based on user OS? 😅

      1. Lucien Immink Mastodon 2 days later

         @zachleat The default of the os property should do that. But in that case forget about Linux and the 1000+ window managers

         1. Lucien Immink Mastodon 2 days later

            @zachleat

            1. Lucien Immink Mastodon 2 days later

               @zachleat and the PR https://github.com/zachleat/browser-window/pull/4

               1. Zach Leatherman Mastodon 2 days later

                  @lucienimmink (amazing!)

9. Philip (is looking for work) Mastodon 4 days later

   @zachleat I haven’t delved into Shadow DOM’d custom elements yet (aka, Real Custom Elements by Real Developers™️) is it possible for the consumer site of this to change, say, the colours of the OS X icon circles? Or when a shadow root is used, is that it and you're restricted to the API (css custom properties) the author has created?