1. 24
  1. 12

    Wow, TIL scroll-snap exists! That’s pretty neat!

    1. 2

      Same! And it’s fully supported!

    2. 9

      The only downside to this example is that clicking the images a few times fills your navigation history with those anchors. Hitting back a half dozen times to go back to your search results isn’t fun.

      I’m not a CSS expert AT ALL - so unfortunately I can’t offer an improvement. Maybe someone reading this can?

      1. 2

        You could add one line of JS to do this with replaceState. I am not sure if there is a pure HTML+CSS solution.

        1. 7

          You could do it as a progressive enhancement where it works without JS but with JS it’s nicer.

      2. 8

        Adding loading="lazy" to the <img>s might improve this.

        1. 4

          I know bashing JavaScript is a popular way to score points around here, but sheesh…

          One nitpick I have with the current craigslist design is their approach to image galleries inside their listings. They use a chunk of bloated JavaScript (more than 380kB total) to render something as simple as a collection of images. This seems like overkill to me.

          This implies the JavaScript bundle is only responsible for the gallery. It’s doing quite a bit more than that, actually, including:

          • search
          • account
          • maps
          • banner notifications
          • localization

          If I’m reading the minified code right, the number of lines of JavaScript specifically for the gallery is probably less than 50 lines long unminified.

          1. 3

            Making a gallery used to be super hard and now it’s totally trivial. I had to make one for work and I was shocked how easy it is now.

            1. 3

              Only downside is the back button no longer acts as expected, and backs out through the gallery while not showing any gallery changes!

              Probably fixable with a dozen bytes of js to clean up the history.

              But otherwise very cool.

              1. 2

                It also snaps anchors the top of the gallery to the top of the viewport. I wasn’t able to find a CSS way that would fix this.

                Such features would have been better implemented by browsers rather than setting everyone out to re-invent the wheel, badly.