piccalilli_’s avatarpiccalilli_’s Twitter Archive—№ 52,617

    1. A thread on how you can make fancy stuff that's progressively enhanced, performant, *and* honours user preferences. I’m making a cool landing page for a client at the moment. Here it is in all of its glory. That's the optimum conditions though, let’s do a proper job now 🧵
      Permalink On twitter.com ↗ piccalilli_’s avatar ♻️ 21 Retweets ❤️ 118 Favorites 2021 May 26 Mood +3 🙂
  1. …in reply to @piccalilli_
    Right, let's now account for *when* JavaScript doesn’t work. The intro animation is based on state changes, controlled by JavaScript timers. When JavaScript fails, we need to make sure everything is available, so I prefix the CSS with a [data-js-available] which JS adds.
    On twitter.com ↗ piccalilli_’s avatar ♻️ 1 Retweets ❤️ 12 Favorites 2021 May 26 Mood -2 🙁
    1. …in reply to @piccalilli_
      That's progressive enhancement in action! Lastly, we need to account for people who prefer reduced motion. All the animation CSS is fenced in a @​media screen and (prefers-reduced-motion: no-preference) media query.
      Permalink On twitter.com ↗ piccalilli_’s avatar ♻️ 1 Retweets ❤️ 12 Favorites 2021 May 26 Mood 0
      1. …in reply to @piccalilli_
        This isn't *all* motion though: just unexpected motion. Notice how the buttons still have a transition state. Anyway, all-in-all: it was not much effort to get this working like this and *everyone* gets a great experience.
        Permalink On twitter.com ↗ piccalilli_’s avatar ♻️ 1 Retweets ❤️ 8 Favorites 2021 May 26 Mood +5 🙂
        1. …in reply to @piccalilli_
          With all the fanciness, variable fonts and grunge, the page is 1/2 the weight of your favourite CSS framework's page. Pretty decent early lighthouse scores too. Conclusion: it’s possible to make lush stuff that is accessible to everyone.
          oh my god twitter doesn’t include alt text from images in their API
          Permalink On twitter.com ↗ piccalilli_’s avatar ♻️ 1 Retweets ❤️ 17 Favorites 2021 May 26 Mood +4 🙂
          1. …in reply to @piccalilli_
            Anyway, if you've got this far, I've got pockets of availability for building nice websites, so hit me up in the DMs or hi@piccalil.li twitter.com/messages/compose?recipient_id=98734097
            Permalink On twitter.com ↗ piccalilli_’s avatar ❤️ 8 Favorites 2021 May 26 Mood +3 🙂