
Show HN: CSS Photo Filter Playground - ent101
https://www.outpan.com/app/ecce4d0a95/css-photo-filter-playground
======
soylentcola
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).

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

------
chiefalchemist
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)

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

~~~
mceachen
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).

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

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

~~~
katsura
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.hollywoodreporter.com/news/instagram-filters-history-
names-explained-910720)

[https://www.seventeen.com/life/tech-social-
media/news/a36748...](https://www.seventeen.com/life/tech-social-
media/news/a36748/heres-the-story-behind-5-of-your-favorite-instagram-filter-
names/)

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

------
MaximumYComb
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?

~~~
jake-low
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](https://github.com/MicheleBertoli/css-in-js#features)

[1]:
[https://speakerd.s3.amazonaws.com/presentations/2e15908049bb...](https://speakerd.s3.amazonaws.com/presentations/2e15908049bb013230960224c1b4b8bd/css-
in-javascript.pdf)

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

