60 replies

1. Zach Leatherman 5 min later

   not you, @cloudfour—I’m already meticulously watching all of your excellent work

   1. Cloud Four 17 min later

      @zachleat Thanks. Right back atcha!

      Although, perhaps we follow your mastodon too closely if you have to preemptively ask us not to reply. We’ll stop raising our hand *every* time the teacher asks a question. ;)

      1. Zach Leatherman 18 min later

         @cloudfour Ha! Instant regrets! Please don’t 😅

2. Lea Rosema 6 min later

   @zachleat I built <shader-art> to embed a glsl shader in a page in a lightweight manner:

   https://github.com/shader-art/shader-art

   Demo: https://codepen.io/learosema/pen/WNpGKpz

   1. Zach Leatherman 8 min later

      @lea wow!

   2. Matthias Ott 16 min later

      @lea @zachleat You realize you could have called that one

      <slim-shader>

      ?😁

      1. Lea Rosema 17 min later

         @matthiasott @zachleat uhhh <missed-opportunity> ☺️

         1. Lea Rosema 19 min later

            @matthiasott @zachleat it's really hard to find a name which is both available on github and also on npm.

   3. Paul Hebert 17 min later

      @lea @zachleat that's really cool!

   4. jake lazaroff 29 min later

      @lea holy shit this is awesome

      @zachleat

   5. dasplan 15 hr later

      @lea Oh this stuff is amazing! Last year I started checking out https://github.com/shawnlawson/The_Force
      Way back in the day I used to dabble in assembly to create (simpler) effects like these. Was thinking about making a web component for these shaders.
      Will be checking your awesome component out more this weekend!

   6. Lea Rosema 1 day later

      @zachleat
      My shader-art web component got featured by @chriscoyier on instagram:
      https://www.instagram.com/reel/C0ScICbtoTQ/?igshid=ODhhZWM5NmIwOQ==

3. Nicolas Hoizey 9 min later

   @zachleat <marquee>?

   1. Zach Leatherman 10 min later

      @nhoizey pack your things, Nicolas

      1. Nicolas Hoizey 52 min later

         @zachleat 🤣

   2. Matthias Ott 14 min later

      @nhoizey @zachleat …it needs a hyphen, Nicolas, a hyphen:

      <marquee-marque>

      1. Eric 16 min later

         @matthiasott @nhoizey @zachleat if it is a higher order component it is a <marquis-marquee>

         1. Nicolas Hoizey 17 min later

            @eric @matthiasott @zachleat what about an inclusive version: <marquis-e>

            1. Jason Grigsby 21 min later

               @nhoizey @eric @matthiasott @zachleat omg no. @Wilto’s head is already too big. I don't think the world is ready for how insufferable Mat would be if we had a <marquis> element of any sort.

               @zachleat you worked with him, right? back me up here. :)

               1. Zach Leatherman 23 min later

                  @grigs @nhoizey @eric @matthiasott @Wilto can you imagine?

                  I bet it would even ship on his birthday

                  1. Jason Grigsby 39 min later

                     @zachleat @nhoizey @eric @matthiasott @Wilto OMG is today his birthday?

                     1. Jason Grigsby 42 min later

                        @zachleat @nhoizey @eric @matthiasott @Wilto

                        Earlier today I was cheering the demise of that other site, but I just searched for “wilto birthday" and there were so many fun memories spread throughout the calendar

               2. Eric 24 min later

                  @grigs @nhoizey @matthiasott @zachleat @Wilto sounds like a real <funky-bunch>

               3. Nicolas Hoizey 52 min later

                  @grigs 🤣

                  I’m pretty sure @Wilto can handle that! 😆

                  @eric @matthiasott @zachleat

      2. Private reply 2 hr later
      3. Patrick H. Lauke 3 hr later

         @matthiasott @nhoizey @zachleat ...-and-the-funky-bunch> ?

         1. Matthias Ott 7 hr later

            @patrick_h_lauke @nhoizey @zachleat …-and-the-funquee-bunch> 😁

4. Dave 🧱 19 min later

   @zachleat oh does this mean I should publish mine?

   1. Zach Leatherman 21 min later

      @DavidDarnes we will officially have beef if you don’t (kidding)

      (not kidding)

      (am I kidding)

      (I don’t know any more)

      1. Dave 🧱 43 min later

         @zachleat 🫡

5. jake lazaroff 26 min later

   @zachleat i’ve been working on roving tabindex component for accessible menus/grids https://jakelazaroff.github.io/roving-tabindex/

   1. Zach Leatherman 28 min later

      @jakelazaroff awesome!

6. Mathieu 36 min later

   @zachleat My go-to resource when I'm looking for components: https://github.com/davatron5000/awesome-standalones. <clipboard-copy>.

   1. Zach Leatherman 44 min later

      @mathieuhuot yes thank you

7. westbrook 41 min later

   @zachleat contribute it to https://github.com/webcomponents/webcomponents.org 🥹

8. Thomas Steiner 50 min later

   @zachleat Shameless plug: https://github.com/GoogleChromeLabs/dark-mode-toggle.

9. Nathan Knowler 1 hr later

   @zachleat I use this a lot on CodePen or for just building animations. Some limitations. https://gist.github.com/knowler/fd96f236ae82d8c7d83e18e726a3061a

   1. Zach Leatherman 15 hr later

      @knowler any demos in the wild?

      1. Nathan Knowler 18 hr later

         @zachleat I probably have some pens that I’ve used it in that I’d need to find. TBH this is a custom element that I’ve written so many times and often on the spot. The code for the Gist is based on a CodePen asset that I made. I have other variations of it that have improved on it since. This morning I decided to give this a better home. I also added support for scoping it to a specific element (and its descendants). I love custom elements that are pretty much wrappers for Web APIs. I might add some default styles and maybe use an icon.
         https://github.com/knowler/restart-animations-element

         1. Zach Leatherman 18 hr later

            @knowler make sure to include a demo! (even if a super simple one!)

         2. Nathan Knowler 18 hr later

            @zachleat I dropped it into these demos that were already using it:

            Coloured text wipe effect: https://codepen.io/knowler/pen/RwBJQQB
            Inverting text wipe effect: https://codepen.io/knowler/pen/JjBZOxz
            Text Cutout on Blurred Backdrop (Safari only AFAIK): https://codepen.io/knowler/pen/GRBYxvX
            Typing Animation with CSS content (I do not recommend lol): https://codepen.io/knowler/pen/vYRRyRv

            I don’t have any “production” uses of it, though it could be used for that. I find it’s a nice utility to have for building and demoing animations.

            1. Zach Leatherman 18 hr later

               @knowler yay! This is a good one!

               1. Nathan Knowler 19 hr later

                  @zachleat I ended up putting together a demo on CodePen that I’ve linked in the README too: https://codepen.io/knowler/pen/QWYZYEv

10. Eric A. Meyer 1 hr later

    @zachleat You can probably guess mine.

    1. Zach Leatherman 15 hr later

       @Meyerweb <super-slider>!!

11. Troy 3 hr later

    @zachleat I got tired of googling online guitar tuners and made my own.

    https://github.com/troyvassalotti/detune

    1. Zach Leatherman 15 hr later

       @rest is there a demo link for this?

       1. Troy 19 hr later

          @zachleat oops yes https://www.troyv.dev/tuner/

          1. Zach Leatherman 19 hr later

             @rest (incredible)

12. Naiyer 4 hr later

    @zachleat <css-doodle> has been one of my all time favorites. Such a versatile component that has brought so many awesome codepen demos.

    https://github.com/css-doodle/css-doodle

13. Cory Rylan 6 hr later

    @zachleat
    Made a component for viewing USD 3d files

    https://github.com/coryrylan/usd-viewer

    https://usd-viewer.web.app/usd-viewer-interactive-iframe

    1. Zach Leatherman 15 hr later

       @coryrylan awesome!

14. dan leatherman 15 hr later

    @zachleat does modelviewer count? https://modelviewer.dev/

    1. Zach Leatherman 15 hr later

       @danleatherman so many 3d model viewer web components!!

15. Matt Steele 15 hr later

    @zachleat I'm partial to <bt-device> to make using Web Bluetooth easier https://steele.blue/renderless-web-components/

    1. Zach Leatherman 15 hr later

       @mattdsteele you’re a bluetooth wizard!

16. tbeseda 18 hr later

    @zachleat I made one the other day that reports server timing headers if they exist.

    https://github.com/tbeseda/server-timings-elem

    some views on my site send those headers, so the element shows up in the footer https://tbeseda.com/blog/quick-color-functions-for-a-node-js-cli

    1. Zach Leatherman 18 hr later

       @tbeseda hell yeah

17. Raymond Camden 20 hr later

    @zachleat i've shared this elsewhere, <table-sort>, progressively adds sorting to a regular HTML table: https://www.raymondcamden.com/2023/03/14/progressively-enhancing-a-table-with-a-web-component

18. Zacky Ma 2 days later

    @zachleat I worked on this collection of custom elements that make it easier to use browsers’ built-in Intl API declaratively:

    https://github.com/marchbox/intl-elements