1. 23
    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.

    3. 8

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

    4. 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.

    5. 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.

    6. 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.

    7. 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.