lachlanjc’s avatarlachlanjc’s Twitter Archive—№ 11,027

  1. 🌱 Carbon emissions dropped during COVID—but working from home introduces its own emissions. I’ve helped build an interactive calculator @watershed to model these emissions! watershedclimate.com/wfh-calculator (design details in thread)
    On twitter.com Twitter logo lachlanjc’s avatar ♻️ 4 Retweets ❤️ 45 Favorites Mood +2 🙂
    1. …in reply to @lachlanjc
      This is one of the most interactive pages I’ve worked on. All the calculation is client-side—no fancy state management libraries here, just a bunch of React Hooks in Next.js/TypeScript doing fancy arithmetic.
      Permalink On twitter.com Twitter logo lachlanjc’s avatar ♻️ 1 Retweets ❤️ 3 Favorites Mood 0
      1. …in reply to @lachlanjc
        The main layout is one big CSS Grid. On mobile, you swipe between full-width columns, & the scroll position is synced. I put position: sticky on the section headers, & CSS Scroll Snap Points on the columns. The details use a <details>. This was fun 😇
        Permalink On twitter.com Twitter logo lachlanjc’s avatar ❤️ 3 Favorites Mood +8 🙂
        1. …in reply to @lachlanjc
          We often think just about “mobile” & “desktop,” but there are so many people in between. Phone in landscape or small tablet in portrait = two columns, touch/no hover = wider number steppers, reduced motion = fade instead of slide results in as you scroll.
          Permalink On twitter.com Twitter logo lachlanjc’s avatar ❤️ 2 Favorites Mood -1 🙁
          1. …in reply to @lachlanjc
            All the form elements are heavily-styled HTML elements for accessibility, except the number inputs, which I made custom to support comma formatting on blur, steppers, keyboard control, & unit conversion. The input colors are just 4 CSS Custom Properties.
            Permalink On twitter.com Twitter logo lachlanjc’s avatar ❤️ 3 Favorites Mood +2 🙂
            1. …in reply to @lachlanjc
              The page stores your current configuration in the URL, so you can share the link. On mobile/if available, the Share button uses navigator.share to trigger the native share sheet, but falls back to copying the link so you can share on e.g. Slack.
              Permalink On twitter.com Twitter logo lachlanjc’s avatar ❤️ 3 Favorites Mood +5 🙂
              1. …in reply to @lachlanjc
                One design detail we had fun with is the illustration: the bus shows the city transit system logo, & the building height scales with the employees input. This is just some ternaries in the JSX with different <path>s 😀
                Permalink On twitter.com Twitter logo lachlanjc’s avatar ❤️ 4 Favorites Mood +6 🙂
                1. …in reply to @lachlanjc
                  Shoutout to @billlabus, @kasrak, @kellylsims, & @taylorfrancis for helping make this all happen! Come work with us: watershedclimate.com/jobs
                  Permalink On twitter.com Twitter logo lachlanjc’s avatar ❤️ 5 Favorites Mood +2 🙂