[{"data":1,"prerenderedAt":225},["ShallowReactive",2],{"project-13041735":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":33,"aspects":34,"strip":41,"post_text":44,"what":45,"said":60,"maker_in_thread":141,"shape":143,"grid":146,"attempts":189,"same_week":190,"maker_shows":17,"maker_hidden":218,"reader_version":219,"card":220},"13041735","Image Effects with CSS","title","Show HN: Image Effects with CSS","http:\u002F\u002Fbennettfeely.com\u002Fimage-effects\u002F","bennettfeely.com","bennettfeely",1480134958,2016,203,18,132,2264,6,"notable","dev_tools","css image effects","web_app",[23,24,25,26],"css filters","image effects","css","web design","mixed",0.08,{"positive":30,"neutral":31,"mixed":32,"critical":30},4,8,1,17,{"performance":35,"idea":37,"docs":39,"execution":40},{"positive":36,"critical":32},0,{"positive":32,"critical":38},2,{"positive":32,"critical":36},{"positive":36,"critical":32},[42,32,42,42,43,42,42,32,32,42,42,42,43,42,36,32,43,43],3,5,null,{"problem":46,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":58,"openness":59,"stage":59,"team_size":59},{"value":47,"source":48,"evidence":49},"Applying image effects like sepia or pencil using only CSS","inferred",[50,54],{"id":51,"by":52,"text":53},"13042277","TuringNYC","This is impressive and the documentation is nice. But it would be nice to get the 30-second pitch -- is the rationale to push processing onto the client side? When I think of…",{"id":55,"by":56,"text":57},"13045055","mgalka","Awesome resource. I've spent a lot of time looking for CSS image effects and found the info out there to be really lacking. Thanks for putting this together.",[],"unknown",{"praise":61,"objections":75,"requests":101,"questions":109,"alternatives":118},[62,68],{"value":63,"source":64,"evidence":65},"Useful documentation and resource for CSS image effects","commenter",[66,67],{"id":55,"by":56,"text":57},{"id":51,"by":52,"text":53},{"value":69,"source":64,"evidence":70},"Impressive work",[71],{"id":72,"by":73,"text":74},"13042558","iamahacker2","Impressive.",[76,87,94],{"value":77,"source":64,"evidence":78},"Client-side rendering costs battery and energy",[79,83],{"id":80,"by":81,"text":82},"13043137","snarfy","It's a good question. What about the network transmission? What's the carbon footprint of transmitting a 50k image to thousands of visitors vs a handful of bytes in css? I agree…",{"id":84,"by":85,"text":86},"13042757","MrQuincle","Slightly related question: Does the carbon footprint increase with all this client side rendering? I would think just rendering something charcoal on the computer of the designer…",{"value":88,"source":64,"evidence":89},"Static images should be rendered server-side instead",[90],{"id":91,"by":92,"text":93},"13043593","onion2k","Yes, and if your website is using CSS effects to change the same image for every user then you're making a mistake. Just render the modified image to a static asset and serve…",{"value":95,"source":64,"evidence":96},"Effects can't easily be saved or downloaded with CSS alone",[97],{"id":98,"by":99,"text":100},"13042496","FlorianRappl","But how would you then download the edited image? Either browsers support taking screenshots via an API (no browser extension) or you would need to render it on the server side…",[102],{"value":103,"source":64,"evidence":104},"Confirm the code's license",[105],{"id":106,"by":107,"text":108},"13065355","thenormal","Will gladly use, but what is the code's license?",[110,114],{"value":111,"source":64,"evidence":112},"Does client-side rendering increase carbon footprint?",[113],{"id":84,"by":85,"text":86},{"value":115,"source":64,"evidence":116},"Why process on the client rather than the server?",[117],{"id":51,"by":52,"text":53},[119,126,137],{"value":120,"source":64,"evidence":121},"SVG filters",[122],{"id":123,"by":124,"text":125},"13043181","leni536","Nice. I consider this a hack though, I think that SVG filters are more suitable for this task.",{"value":127,"source":64,"evidence":128},"HTML5 Canvas and WebGL shaders",[129,133],{"id":130,"by":131,"text":132},"13042673","visarga","It's like PhotoShop. I used to play with pictures and obtain those effects 10-15 years ago. But I think we can do many more special effects with HTML5 Canvas.",{"id":134,"by":135,"text":136},"13043162","camoby","I did something similar in pure JS a few years ago. It's definitely possible to render the image into a canvas and save it\u002Fupload it\u002Fpresent as a data uri. I'm pretty sure the…",{"value":138,"source":64,"evidence":139},"Photoshop",[140],{"id":130,"by":131,"text":132},{"comments":36,"answered":36,"key":142},[],{"commenters":33,"max_depth":43,"maker_replies":36,"first_comment_mins":144,"lifespan_hours":145},166,86,[147,149,151,153,156,158,160,163,165,167,170,171,174,178,179,183,185,187],[84,36,42,148,85,36],"project\u002Fneutral\u002Fperformance",[80,36,32,150,81,36],"project\u002Fcritical\u002Fperformance",[91,36,42,152,92,36],"project\u002Fmixed\u002Fidea",[154,36,42,148,155,36],"13046773","andybak",[55,32,43,157,56,36],"maker\u002Fpositive\u002Fdocs",[51,38,42,159,52,36],"project\u002Fneutral\u002Fidea",[161,38,42,159,162,36],"13042381","jonespen",[98,38,32,164,99,36],"project\u002Fcritical\u002Fidea",[166,38,32,164,52,36],"13042581",[168,38,42,159,169,36],"13042600","errozero",[134,38,42,159,135,36],[172,38,42,159,173,36],"13043626","kaoD",[175,38,43,176,177,36],"13042567","project\u002Fpositive\u002Fidea","jonnyscholes",[130,42,42,159,131,36],[180,42,36,181,182,36],"13042720","other\u002Fneutral\u002Fnone","jaimex2",[123,30,32,184,124,36],"project\u002Fcritical\u002Fexecution",[106,43,43,186,107,36],"project\u002Fpositive\u002Fnone",[72,17,43,188,73,36],"maker\u002Fpositive\u002Fnone",[],[191,195,200,204,209,214],{"id":192,"name":193,"points":194,"category":19},"13031492","CSS Reference",1117,{"id":196,"name":197,"points":198,"category":199},"13030603","Dply",673,"infrastructure",{"id":201,"name":202,"points":203,"category":19},"13053137","Antd",507,{"id":205,"name":206,"points":207,"category":208},"13056678","React Native Express",496,"learning_science",{"id":210,"name":211,"points":212,"category":213},"13065670","Anycomplete",390,"productivity",{"id":215,"name":216,"points":217,"category":199},"13048334","Migadu",336,false,"v2",{"id":221,"name":5,"line":5,"ai":218,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":28,"top":17,"kw":222,"maker":10,"domain":9,"tier":18,"attempts":36,"strip":223,"url":8,"mix":224,"praise":63,"objection":77,"sub":20},13041735,[23,24,25,26],"313353311333530155",[30,31,32,30],1793990950681]