FYI, I get a row of broken images along the top.

Looks like Unsplash API endpoints are blocked as trackers in Privacy Badger (I assume due to the way they use it to track views/downloads).

If you have disabled referer headers, the site does not work ("Your request did not contain a Referrer header."). In Firefox the preference is network.http.referer.defaultPolicy.

I should probably know this but are those filters usable with animation / transition. For example, color photo (no filter) to b&w filter? Or b&w filter to color photo (no filter)

They do, although the image processing can get sluggish on some devices so your mileage may vary when it comes to smoothly transitioning it.

And by sluggish, it may mean no transition, as the time to compute one frame exceeds the transition time.

This is especially true for larger images on older hidpi devices (like mid-range or flagship Android devices from a couple years ago).

Sure they are:

  figure {
    filter: grayscale(1);
    transition: filter .3s ease;
  }
  
  figure:hover {
    filter: none;
  }

Would be nice to somehow display or directly link to the caniuse entry for each applied filter setting.

I always see cutesy names attached to photo filters, but do they actually mean anything?

Usually these try to replicate the Instagram filters. For example, here is the description of some of them:

https://www.hollywoodreporter.com/news/instagram-filters-his...

https://www.seventeen.com/life/tech-social-media/news/a36748...

It would've been nice if I could download the photo after applying the effect.

I was taught to avoid inline CSS, like the CSS used to apply these filters. Was I taught wrong or does this site use less than ideal practices?

I grepped the minified source code included in the page, and it looks like the project was built using React.

React isn't opinionated on how you should handle component styling, and so the community has experimented a lot [0] with different solutions to managing CSS for components.

One approach is to have the component set its own inline styles in the render function. This makes it easy to have the component's styles to be "reactive" to its props (arguments), e.g.:

    function MyButton({ importance }) {
      return (
        <button style={{ color: importance === "high" ? "red" : "grey" }}>
          Click me!
        </button>
      );
    }

In my opinion, Christopher “vjeux” Chedeau makes the most cogent argument [1] for why this way makes sense. It's worth a read; even if you end up disagreeing with the conclusion.

A related solution is to use classes, not inline styles, but to use a CSS framework such as Tachyons [2] where the included classes are small, single-purpose styling utilities like "serif" (applies font-style: serif) and "br-pill" (adds rounded borders).

[0]: https://github.com/MicheleBertoli/css-in-js#features

[1]: https://speakerd.s3.amazonaws.com/presentations/2e15908049bb...

[2]: https://tachyons.io/#style