Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: React component for blurred backgrounds

github.com

Post reply on HN
Print view View original

1–10 of 18 posts

Re: Show HN: React component for blurred backgrounds

#4

Post by javierbyte »

fitter wrote: post #3

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?

Author here. As far as I know there is no way to do blur with CSS in IE10+ https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.

Re: Show HN: React component for blurred backgrounds

#6

Post by spdustin »

javierbyte wrote: post #4
fitter wrote: post #3

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?

Author here. As far as I know there is no way to do blur with CSS in IE10+ https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.

You can. SVG Filters are supported.

http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-eff...

Edit: to clarify, the image would need to be moved into the SVG (which could be a simple DOM manipulation of the original tag).

Re: Show HN: React component for blurred backgrounds

#7

Post by javierbyte »

spdustin wrote: post #6
javierbyte wrote: post #4

Earlier quoted context omitted.

Author here. As far as I know there is no way to do blur with CSS in IE10+ https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.

You can. SVG Filters are supported. http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-eff... Edit: to clarify, the image would need to be moved into the SVG (which could be a simple DOM manipulation of the original tag).

Thank you! I will investigate and compare.

Re: Show HN: React component for blurred backgrounds

#8

Post by fitter »

spdustin wrote: post #6
javierbyte wrote: post #4

Earlier quoted context omitted.

Author here. As far as I know there is no way to do blur with CSS in IE10+ https://github.com/Schepp/CSS-Filters-Polyfill#a-word-regard... so we must use canvas to be cross-browser.

You can. SVG Filters are supported. http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-eff... Edit: to clarify, the image would need to be moved into the SVG (which could be a simple DOM manipulation of the original tag).

Hm, if that's the case, then theoretically this component can be easily improved to support any DOM container (not just images) by just polyfilling filter: with native or SVG.

Re: Show HN: React component for blurred backgrounds

#9

Post by 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:

  Blur.img.onload = function(){
      stackBlurImage( Blur.img, Blur.canvas, blurRadius, Blur.width, Blur.height)
  };
I personally don't like this style. It makes it harder to read the code. If someone misses that `var Blur = this` line, they could get confused and either not use it, or use it incorrectly.

Instead, since you're using ES6, I suggest using the fat arrow:

  this.img.onload = () => {
    stackBlurImage(this.img, this.canvas, blurRadius, this.width, this.height);
  };
(I'm used to writing Coffeescript instead of ES6, so sorry if minor syntax details are wrong.)

This is largely a stylistic choice. You can feel free to do things however you want, and if it works, it works. But generally I prefer to make sure things are really clear, and that the Javascript features aren't obscured.

Post reply on HN