[{"data":1,"prerenderedAt":195},["ShallowReactive",2],{"project-21083620":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":14,"aspects":32,"strip":41,"post_text":42,"what":43,"said":54,"maker_in_thread":132,"shape":134,"grid":138,"attempts":159,"same_week":160,"maker_shows":34,"maker_hidden":188,"reader_version":189,"card":190},"21083620","CSS Photo Filter Playground","title","Show HN: CSS Photo Filter Playground","https:\u002F\u002Fwww.outpan.com\u002Fapp\u002Fecce4d0a95\u002Fcss-photo-filter-playground","outpan.com","ent101",1569521229,2019,35,12,946,2195,44,"shown","creative","photo filters","web_app",[23,24,25,26],"css filters","photo filter","css playground","image filters","roasted",-0.4,{"positive":30,"neutral":31,"mixed":30,"critical":31},0,6,{"execution":33,"idea":35,"performance":36,"docs":38,"design":39},{"positive":30,"critical":34},3,{"positive":30,"critical":30},{"positive":30,"critical":37},2,{"positive":30,"critical":30},{"positive":30,"critical":40},1,[40,40,34,34,40,40,34,34,34,40,40,34],null,{"problem":42,"audience":42,"pricing":42,"motivation":42,"time_to_build":42,"stack":44,"openness":53,"stage":53,"team_size":53},[45],{"value":46,"source":47,"evidence":48},"React","inferred",[49],{"id":50,"by":51,"text":52},"21089317","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,…","unknown",{"praise":55,"objections":68,"requests":98,"questions":113,"alternatives":131},[56],{"value":57,"source":58,"evidence":59},"Filters can be animated with CSS transitions","commenter",[60,64],{"id":61,"by":62,"text":63},"21085093","katsura","Sure they are: ``` figure { filter: grayscale(1); transition: filter .3s ease; } figure:hover { filter: none; } ```",{"id":65,"by":66,"text":67},"21085209","_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.",[69,76,83,91],{"value":70,"source":58,"evidence":71},"Images fail to load when Privacy Badger blocks Unsplash endpoints",[72],{"id":73,"by":74,"text":75},"21085437","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…",{"value":77,"source":58,"evidence":78},"Site breaks when referer headers are disabled",[79],{"id":80,"by":81,"text":82},"21090663","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.",{"value":84,"source":58,"evidence":85},"Image filter processing is sluggish on some devices",[86,87],{"id":65,"by":66,"text":67},{"id":88,"by":89,"text":90},"21085471","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…",{"value":92,"source":58,"evidence":93},"Inline CSS used for filters is considered poor practice",[94],{"id":95,"by":96,"text":97},"21088169","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?",[99,106],{"value":100,"source":58,"evidence":101},"Allow downloading the photo after applying the effect",[102],{"id":103,"by":104,"text":105},"21088422","inmate4587","It would've been nice if I could download the photo after applying the effect.",{"value":107,"source":58,"evidence":108},"Link to caniuse entries for each filter setting",[109],{"id":110,"by":111,"text":112},"21084794","technotarek","Would be nice to somehow display or directly link to the caniuse entry for each applied filter setting.",[114,124],{"value":115,"source":58,"evidence":116},"Do the filter names mean anything?",[117,121],{"id":118,"by":119,"text":120},"21084238","ebg13","I always see cutesy names attached to photo filters, but do they actually mean anything?",{"id":122,"by":62,"text":123},"21084799","Usually these try to replicate the Instagram filters. For example, here is the description of some of them:…",{"value":125,"source":58,"evidence":126},"Can filters be used with animation and transitions?",[127],{"id":128,"by":129,"text":130},"21085036","chiefalchemist","I should probably know this but are those filters usable with animation \u002F transition. For example, color photo (no filter) to b&w filter? Or b&w filter to color photo (no filter)",[],{"comments":30,"answered":30,"key":133},[],{"commenters":135,"max_depth":34,"maker_replies":30,"first_comment_mins":136,"lifespan_hours":137},11,50,17,[139,141,142,144,145,147,148,150,152,153,155,157],[73,30,40,140,74,30],"project\u002Fcritical\u002Fexecution",[80,40,40,140,81,30],[128,37,34,143,129,30],"project\u002Fneutral\u002Fidea",[61,37,34,143,62,30],[65,37,40,146,66,30],"project\u002Fcritical\u002Fperformance",[88,37,40,146,89,30],[110,34,34,149,111,30],"project\u002Fneutral\u002Fdocs",[118,151,34,143,119,30],4,[122,151,34,143,62,30],[103,154,40,140,104,30],5,[95,31,40,156,96,30],"project\u002Fcritical\u002Fdesign",[50,31,34,158,51,30],"project\u002Fneutral\u002Fdesign",[],[161,166,170,174,179,184],{"id":162,"name":163,"points":164,"category":165},"21101918","Bot Land",444,"games",{"id":167,"name":168,"points":169,"category":19},"21134903","Ledonardo",442,{"id":171,"name":172,"points":173,"category":165},"21136364","Astro Golf",232,{"id":175,"name":176,"points":177,"category":178},"21106611","Ieddit",220,"consumer_social",{"id":180,"name":181,"points":182,"category":183},"21110425","Aristotl",173,"learning_science",{"id":185,"name":186,"points":187,"category":183},"21106202","Ansible Crash Course",160,false,"v2",{"id":191,"name":5,"line":5,"ai":188,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":28,"top":17,"kw":192,"maker":10,"domain":9,"tier":18,"attempts":30,"strip":193,"url":8,"mix":194,"praise":57,"objection":70,"sub":20},21083620,[23,24,25,26],"113311333113",[30,31,30,31],1794036581290]