[{"data":1,"prerenderedAt":228},["ShallowReactive",2],{"project-9317993":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":35,"aspects":36,"strip":42,"post_text":44,"what":45,"said":77,"maker_in_thread":139,"shape":147,"grid":150,"attempts":190,"same_week":191,"maker_shows":33,"maker_hidden":220,"reader_version":221,"card":222},"9317993","react-blur","React component for blurred backgrounds","title","Show HN: React component for blurred backgrounds","https:\u002F\u002Fgithub.com\u002Fjavierbyte\u002Freact-blur","github.com","javierbyte",1428090655,2015,25,17,1043,2565,41,"shown","dev_tools","ui component","library",[24,25,26,27,28],"react","blur","canvas","frosted glass","react component","curious",0.018,{"positive":32,"neutral":33,"mixed":34,"critical":32},2,5,0,9,{"execution":37,"idea":38,"design":40,"performance":41},{"positive":34,"critical":34},{"positive":32,"critical":39},1,{"positive":34,"critical":39},{"positive":34,"critical":34},[43,34,34,39,34,43,34,33,43,39,34,33,43,43,34,34,34],3,null,{"problem":46,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":53,"openness":76,"stage":76,"team_size":76},{"value":47,"source":48,"evidence":49},"Creating blurred backgrounds in React; maker uses canvas because CSS blur is unavailable in IE10+","maker",[50],{"id":51,"by":11,"text":52},"9318382","Author here. As far as I know there is no way to do blur with CSS in IE10+ https:\u002F\u002Fgithub.com\u002FSchepp\u002FCSS-Filters-Polyfill#a-word-regarding-ie-10 so we must use canvas to be…",[54,62,68,72],{"value":55,"source":56,"evidence":57},"JavaScript","commenter",[58],{"id":59,"by":60,"text":61},"9318527","morley","Nice work! I noticed that you're caching `this` as a variable: ``` var Blur = this, ``` And it looks like you're doing so to avoid scope problems in anonymous functions: ```…",{"value":63,"source":48,"evidence":64},"React",[65],{"id":66,"by":11,"text":67},"9319992","Yeah, I was also thinking in create a non-react version, but a separate react version would still be needed since we are doing DOM manipulation.",{"value":69,"source":56,"evidence":70},"ES6",[71],{"id":59,"by":60,"text":61},{"value":73,"source":48,"evidence":74},"HTML canvas",[75],{"id":51,"by":11,"text":52},"unknown",{"praise":78,"objections":91,"requests":106,"questions":115,"alternatives":130},[79],{"value":80,"source":56,"evidence":81},"Nice work, useful contribution",[82,86,90],{"id":83,"by":84,"text":85},"9318733","WhitneyLand","Nice work. Suggestion: Add support for frosted glass since it's an easy extension. You would only need another parameter for an RGBA color for \"tint\". Then draw over the blurred…",{"id":87,"by":88,"text":89},"9318585","untilHellbanned","Thanks for the contribution! Minor point: It would be nice if the demo's slider would be draggable on mobile, iOS Safari can't see it in action.",{"id":59,"by":60,"text":61},[92,99],{"value":93,"source":56,"evidence":94},"CSS filters could do this with better performance",[95],{"id":96,"by":97,"text":98},"9318271","fitter","Does this need to be a canvas-scribbling React component when you can do this with better performance using a couple of lines of CSS filters? Is there some advantage I'm missing?",{"value":100,"source":56,"evidence":101},"Written as React component rather than plain JavaScript",[102],{"id":103,"by":104,"text":105},"9319136","amelius","But why write this as a React component, when a plain javascript implementation would do fine (in view of compatibility with existing code, which may not be using React)? Am I…",[107,111],{"value":108,"source":56,"evidence":109},"Add frosted glass tint option",[110],{"id":83,"by":84,"text":85},{"value":112,"source":56,"evidence":113},"Make demo slider draggable on mobile",[114],{"id":87,"by":88,"text":89},[116,123],{"value":117,"source":56,"evidence":118},"How does performance compare to CSS?",[119],{"id":120,"by":121,"text":122},"9318238","antidaily","I'm not smart enough to know how good the performance is on this. Decent? Better than CSS?",{"value":124,"source":56,"evidence":125},"Can SVG filters be used instead of canvas in IE?",[126],{"id":127,"by":128,"text":129},"9318477","spdustin","You can. SVG Filters are supported. http:\u002F\u002Fblogs.msdn.com\u002Fb\u002Fie\u002Farchive\u002F2011\u002F10\u002F14\u002Fsvg-filter-effects-in-ie10.aspx Edit: to clarify, the image would need to be moved into the SVG…",[131,135],{"value":132,"source":56,"evidence":133},"CSS filters",[134],{"id":96,"by":97,"text":98},{"value":136,"source":56,"evidence":137},"SVG filters",[138],{"id":127,"by":128,"text":129},{"comments":140,"answered":32,"key":141},4,[142,143,146],{"id":51,"text":52},{"id":144,"text":145},"9318510","Thank you! I will investigate and compare.",{"id":66,"text":67},{"commenters":148,"max_depth":33,"maker_replies":140,"first_comment_mins":149,"lifespan_hours":35},12,31,[151,153,157,160,162,164,165,167,170,172,174,176,177,179,180,182,186],[59,34,43,152,60,34],"project\u002Fneutral\u002Fexecution",[154,34,34,155,156,34],"9318804","commenter\u002Fneutral\u002Fdesign","simplify",[158,34,34,155,159,34],"9319111","lfuller",[96,39,39,161,97,34],"project\u002Fcritical\u002Fidea",[51,39,34,163,11,39],"project\u002Fneutral\u002Fidea",[127,39,43,163,128,34],[144,39,34,166,11,39],"maker\u002Fneutral\u002Fnone",[168,39,33,169,97,34],"9318524","project\u002Fpositive\u002Fidea",[171,39,43,163,128,34],"9318709",[103,39,39,173,104,34],"project\u002Fcritical\u002Fdesign",[66,39,34,175,11,39],"project\u002Fneutral\u002Fdesign",[83,32,33,169,84,34],[120,43,43,178,121,34],"project\u002Fneutral\u002Fperformance",[87,140,43,175,88,34],[181,140,34,166,11,39],"9319005",[183,33,34,184,185,34],"9319221","other\u002Fneutral\u002Fnone","escusado",[187,188,34,184,189,34],"9318457",6,"flockflock",[],[192,197,201,205,210,215],{"id":193,"name":194,"points":195,"category":196},"9340246","Kaiwa",339,"productivity",{"id":198,"name":199,"points":200,"category":20},"9332718","Frontend HQ Pinger",199,{"id":202,"name":203,"points":204,"category":20},"9309877","AtomPair",127,{"id":206,"name":207,"points":208,"category":209},"9328006","Crudlet.js",94,"languages",{"id":211,"name":212,"points":213,"category":214},"9316722","autocompeter",76,"infrastructure",{"id":216,"name":217,"points":218,"category":219},"9329048","Quant News",73,"finance_crypto",false,"v2",{"id":223,"name":5,"line":6,"ai":220,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":224,"top":18,"kw":225,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":226,"url":9,"mix":227,"praise":80,"objection":93,"sub":21},9317993,0.02,[24,25,26,27,28],"30010305310533000",[32,33,34,32],1794036530023]