59 replies

1. Nathan Knowler Mastodon 5 min later

   @zachleat Can you make a <snow-shovel> component next?

   1. Zach Leatherman Mastodon 1 hr later

      @knowler .remove() 😈

      1. Noah Liebman Mastodon 1 hr later

         @zachleat @knowler long live Mowing Man

         1. Zach Leatherman Mastodon 1 hr later

            @noleli @knowler wait what is this?

            1. Noah Liebman Mastodon 2 hr later

               @zachleat @knowler a classic Mac screensaver from the ’90s, from the same set as the venerable flying toasters! I grew up on this stuff 🤓 https://en.wikipedia.org/wiki/After_Dark_(software)

               1. Zach Leatherman Mastodon 2 hr later

                  @noleli @knowler web sites need screensavers 😅

                  wait I think I remember one of these, was it @stefan?

2. Raymond Camden Mastodon 18 min later

   @zachleat small plea - maybe also host the JS? i hate to npm install anything on a simple web project that doesn't need node_modules, know what i mean?

   1. Zach Leatherman Mastodon 20 min later

      @raymondcamden do you mean like start my own web components CDN? 😅

      1. Raymond Camden Mastodon 23 min later

         @zachleat heh, that's overkill probably. just in general it feels like we should avoid needing to use npm to install simple stuff. wouldnt you agree?

         1. Zach Leatherman Mastodon 25 min later

            @raymondcamden ah yeah, for sure! I’m just confused as to the question—it doesn’t have any dependencies, so it doesn’t “require” `npm` at all.

            Probably reusing this copy would have been better: https://github.com/zachleat/table-saw#installation

            1. Raymond Camden Mastodon 46 min later

               @zachleat i was overthinking it honestly - you link to the source on top - id just download from there if i wanted to skip npm. sorry :>

               1. Zach Leatherman Mastodon 1 hr later

                  @raymondcamden ah no worries! I think it’s fine to call it out—I just got lazy on the README 😅

                  1. Raymond Camden Mastodon 1 hr later

                     @zachleat ... a developer... being lazy..... UNHEARD OF!

   2. Nathan Knowler Mastodon 1 hr later

      @raymondcamden @zachleat Little tip: you can use esm.sh for code on GitHub. Versioning is ultimately commit based, but you can use tags too. I usually include the `?raw` param so it doesn’t do any of its bundling. Example:

      https://esm.sh/gh/zachleat/snow-fall/snow-fall.js?raw

3. Simon Cox Mastodon 34 min later

   @zachleat
   Thank you Zach! Had to make a small css change on the background so you can see the snowflakes but now http://www.simoncox.com is decorated for Christmas!

   1. Zach Leatherman Mastodon 37 min later

      @simoncox ah do you mean to your web site’s background or to <snow-fall>? Looks great!

      1. Simon Cox Mastodon 44 min later

         @zachleat To the page background - though i notice on your site you have a white background so you can only see the snow where there is a darker images or component - subtle!

4. Private reply Mastodon 40 min later
5. westbrook Mastodon 1 hr later

   @zachleat Why doesn't your website follow my dark mode user preferences so I can see even more of this snow!?!?

   Also, feature request 😉, can you add a `pile` attribute that causes the snow to pile up from the bottom of the element to which it applies? Sort of a timer after which a user should return to eating cookie and sipping hot chocolate by the fire... ☕ 🍪 🔥 🎅

   1. Zach Leatherman Mastodon 1 hr later

      @westbrook PRs welcome 😈😈😈 (not for dark mode 😅)

      1. westbrook Mastodon 1 hr later

         @zachleat The user agent is always right? 🤔

         1. Zach Leatherman Mastodon 1 hr later

            @westbrook for sure and I may add one at some point but only when I want to 😅

6. Miguel Mastodon 1 hr later

   @zachleat neat! just in time for the holidays

   1. Zach Leatherman Mastodon 1 hr later

      @miguel thanks!

7. Blake Watson Mastodon 2 hr later

   @zachleat ayyyy https://bw.omg.lol/

   1. Zach Leatherman Mastodon 2 hr later

      @bw awesome!

8. Thomas Broyer Mastodon 2 hr later

   @zachleat Fwiw, thanks for using the shadow DOM here, perfect use case for it 👌

   (been wanting to try and make a PR to do the same for @stefan's sparkly-text https://www.stefanjudis.com/blog/a-web-component-to-make-your-text-sparkle/, haven't taken the time yet)

   1. Zach Leatherman Mastodon 2 hr later

      @tbroyer @stefan yeah! Shadow DOM is a good tool to have in the toolbox 🏆

   2. Thomas Broyer Mastodon 8 hr later

      @zachleat @stefan Fwiw, here it is (sparkly-text with Shadow DOM)

      https://codepen.io/tbroyer/pen/abXgYEy

      It won't work in Safari < 16.4 due to lack of support for constructible stylesheet (I used the same detection code as Zach) but that can be worked around if needed by adding a <style> element in the shadow DOM.
      BTW, things could be optimized too (create CSSStyleSheet once only, clone the sparkle rather than innerHTML every single time)

      (I also added the CSS pointer-events like in Zach's snow-fall)

      1. Zach Leatherman Mastodon 8 hr later

         @tbroyer @stefan awesome! blog post it!!

         1. Thomas Broyer Mastodon 1 day later

            @zachleat @stefan Here you go!

            (btw, the pointer-events was already there actually)

            https://piaille.fr/@tbroyer/111591703529078462

            1. Zach Leatherman Mastodon 1 day later

               @tbroyer @stefan yay!

9. Zach Leatherman Mastodon 2 hr later

   A few folks have already added this to their web site! 🏆

   1️⃣ @simoncox’s http://www.simoncox.com/
   2️⃣ @bw’s https://bw.omg.lol/
   3️⃣ @jhofker’s https://jordan.hofker.org/
   4️⃣ https://ndyg.omg.lol/

   Quick work!

   1. Simon Cox Mastodon 2 hr later

      @zachleat
      Just happened to look at socials for a quick break and there was your post - took 5mins to implement! Looks great on @bw’s site!

   2. Robb Knightmare Mastodon 2 hr later

      @zachleat and another! https://ndyg.omg.lol/

      1. Zach Leatherman Mastodon 2 hr later

         @robb awesome—that’s not your web site is it?

         1. Robb Knightmare Mastodon 3 hr later

            @zachleat it’s not, no

   3. Zach Leatherman Mastodon 8 hr later

      Tickled to see so many folks adding this—y’all make building for the web fun! ❤️

      1. Bob Monsour Mastodon 8 hr later

         @zachleat More to come!

   4. Bob Monsour Mastodon 1 day later

      @zachleat @simoncox @bw @jhofker And this one… https://www.bobmonsour.com/

10. tbeseda Mastodon 3 hr later

    @zachleat Hey nice!
    Looks great on my dark mode and even in light mode when there's an image or code block🤘 like https://tbeseda.com/blog/super-helpful-server-timing-http-response-headers

    I combined it with `const isWinter = [10, 11, 0, 1].includes(new Date().getMonth())` - bc I will probably forget I added it and don't want it snowing in July!

    1. Zach Leatherman Mastodon 3 hr later

       @tbeseda awesome!

       do I need to add an <is-land> loading condition for local date/time?? 😅

       1. tbeseda Mastodon 3 hr later

          @zachleat Not a bad idea! Things get real weird between server/user/developer time though…

          1. Zach Leatherman Mastodon 3 hr later

             @tbeseda on:daytime on:nighttime on:winter 😅

             (<is-land> is client only)

             1. tbeseda Mastodon 3 hr later

                @zachleat Oooh that's nice. But what about "winter" in Australia? Human Time vs Machine Time has so many sharp corners... I've got the scars to prove it.

                1. Zach Leatherman Mastodon 4 hr later

                   @tbeseda oh no—it might be easier to use a weather API to only show when it’s snowing near you

                   (I’m already scared away from adding this 😅)

11. Jordan Mastodon 3 hr later

    @zachleat Easy-peasy to get added. Cool! https://jordan.hofker.org/

    1. Zach Leatherman Mastodon 3 hr later

       @jhofker yay!

12. Private reply Mastodon 3 hr later
    1. Private reply Mastodon 3 hr later
13. Ryan Mulligan Mastodon 5 hr later

    @zachleat Oooo, this is fun! It's awesome that you can set the snow color through a CSS variable. I gave this a go on my site locally, passing in the selected theme color 👀

    1. Zach Leatherman Mastodon 5 hr later

       @hexagoncircle ooooh that’s beautiful

14. Scott Wild Mastodon 7 hr later

    @zachleat Thank you for this! It’s 45° F and there’s no snow here in Vermont, but at least our website has snow now.

    1. Zach Leatherman Mastodon 7 hr later

       @srwild yay! is it live somewhere?

       1. Scott Wild Mastodon 8 hr later

          @zachleat It is! Just pushed it live. https://bluehouse.group/

15. Charles Harries Mastodon 9 hr later

    @zachleat I haven’t seen it mentioned before but one of my favourite things about the proliferation of web components on blogs is that the component behaviour/styling makes it into otherwise user-styles-only contexts—like RSS readers

    1. Zach Leatherman Mastodon 9 hr later

       @charlesharries that seems like a security problem 😅

       1. Charles Harries Mastodon 17 hr later

          @zachleat yes but it’s a very pretty security problem!

          1. Zach Leatherman Mastodon 1 day later

             @charlesharries XSSnow is worth it!

             <xss-nowfall>