4 ms·

This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice. It's

by sureIy 2y ago

This is the sort of completely unnecessary details that eat hours of your time and add tons of code and maintenance for something that few-to-none notice. It's great to experiment, but don't use this in projects that you intend to maintain. Signed, someone who used to do this a lot.

probabletrain 2y ago
I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it. Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.
- sureIy 2y ago
  > is an exaggeration for this effect I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.
  - anamexis 2y ago
    Why would you need to adjust any spacing/sizing values for for the blur? There’s not much of anything to adjust.
  - henriquez 2y ago
    If you're using a CSS preprocessor like SCSS or LESS you can just define the height for the toolbar as a variable and then use the mask area for the blur as a multiplier (eg. 1.88) of that variable. In general for making things easy.to.maintain it's better to not build project-wide stylesheets with raw CSS.
    - ksymph 2y ago
      You don't even need a preprocessor for that with var() and calc(). It's perfectly possible to write clear and easily maintainable raw CSS nowadays.
      - henriquez 2y ago
        It's not universally safe to use CSS nesting yet. Without nesting support, writing raw CSS is like raw-dogging a sex-trafficked Vietnamese prostitute from Malaysia. Sure, it will probably work, but if your goal is zero maintenance then you're ignoring the post-exposure prophylaxsis and antibiotic regimens necessary for typical usage patterns.
  - Aeolun 2y ago
    Maybe just use CSS vars from the start? Doesn’t look like you really need to change anything but the containing element though.
- preommr 2y ago
  > I disagree with "don't use this in projects you intend to maintain" as across-the-board advice Backdrop-filter is... fine. Using masks, animations, and backdrop filter, and gradients, especially for fine details like edges, are just asking for trouble. Browsers are incredibly complicated, and rendering engines have lots of edge cases, broken features, slight incompatibility issues some of which vary by hardware/os/enabled-flags. IME, this would definitely not be worth it.
  - gjsman-1000 2y ago
    I’m at the point in my career where if it’s an internal project, zero shame for Bootstrap and JQuery. If that’s what floats your boat, do it. It’s simple, well understood, functional.
ramon156 2y ago
I'm not a UX person so I'd rather use something already made that looks good.
hahn-kev 2y ago
Before I read your comment I thought you were referring to blurring in general, then I read the article and... Yeah, it's not worth it for software that needs to be maintained, for a fun hobby project sure do whatever
- sureIy 2y ago
  Yeah, definitely do add those 2 extra properties to make your site look nice, but don't overwork the DOM just because the native CSS blur isn't perfect enough. Guaranteed 0.01% of people would even register this change. I'd rather open a bug report and hope for the best in this case.
zarzavat 2y ago
This is the webdev equivalent of the inside of a Mac being tidy and attractive (black PCBs!). Sure, it doesn't matter, but if you want to build a brand based on attention to details then these are exactly the kinds of details you need to consider.
- satvikpendem 2y ago
  Exactly what I was going to say. Attention to detail is noticed by people, to the point that they may not necessarily even consciously know why they like one product over another when in reality they just subconsciously are attracted to products that are simply more polished.
techscruggs 2y ago
It really depends on the use case. Right? Sure, if you are building an enterprise application, this likely doesn't make any sense. But, if you are building something for a consumer audience. Or if you are trying to differentiate yourself by building something beautiful. Then maybe wrap these 100 lines of code in a very specific class name (.fancyGlassFrostedGlass) and call it day?

by sureIy 2y ago

probabletrain 2y ago

I think "tons of code and maintenance" is an exaggeration for this effect, once it's done you'll rarely have to come back to it. Many people value creating and using products with these kinds of details, I disagree with "don't use this in projects you intend to maintain" as across-the-board advice.

sureIy 2y ago
> is an exaggeration for this effect I disagree. Check the changes required to the spacing/sizing. Soon you will need to adjust those values and that.is.maintenance. Multiply this by each detail and soon you have more work than you signed up for. This is usually when someone comes along and wants a rewrite because the codebase is fragile.
- anamexis 2y ago
  Why would you need to adjust any spacing/sizing values for for the blur? There’s not much of anything to adjust.
- henriquez 2y ago
  If you're using a CSS preprocessor like SCSS or LESS you can just define the height for the toolbar as a variable and then use the mask area for the blur as a multiplier (eg. 1.88) of that variable. In general for making things easy.to.maintain it's better to not build project-wide stylesheets with raw CSS.
  - ksymph 2y ago
    You don't even need a preprocessor for that with var() and calc(). It's perfectly possible to write clear and easily maintainable raw CSS nowadays.
    - henriquez 2y ago
      It's not universally safe to use CSS nesting yet. Without nesting support, writing raw CSS is like raw-dogging a sex-trafficked Vietnamese prostitute from Malaysia. Sure, it will probably work, but if your goal is zero maintenance then you're ignoring the post-exposure prophylaxsis and antibiotic regimens necessary for typical usage patterns.
- Aeolun 2y ago
  Maybe just use CSS vars from the start? Doesn’t look like you really need to change anything but the containing element though.
preommr 2y ago
> I disagree with "don't use this in projects you intend to maintain" as across-the-board advice Backdrop-filter is... fine. Using masks, animations, and backdrop filter, and gradients, especially for fine details like edges, are just asking for trouble. Browsers are incredibly complicated, and rendering engines have lots of edge cases, broken features, slight incompatibility issues some of which vary by hardware/os/enabled-flags. IME, this would definitely not be worth it.
- gjsman-1000 2y ago
  I’m at the point in my career where if it’s an internal project, zero shame for Bootstrap and JQuery. If that’s what floats your boat, do it. It’s simple, well understood, functional.

ramon156 2y ago

I'm not a UX person so I'd rather use something already made that looks good.

hahn-kev 2y ago

Before I read your comment I thought you were referring to blurring in general, then I read the article and... Yeah, it's not worth it for software that needs to be maintained, for a fun hobby project sure do whatever

sureIy 2y ago
Yeah, definitely do add those 2 extra properties to make your site look nice, but don't overwork the DOM just because the native CSS blur isn't perfect enough. Guaranteed 0.01% of people would even register this change. I'd rather open a bug report and hope for the best in this case.

zarzavat 2y ago

This is the webdev equivalent of the inside of a Mac being tidy and attractive (black PCBs!). Sure, it doesn't matter, but if you want to build a brand based on attention to details then these are exactly the kinds of details you need to consider.

satvikpendem 2y ago
Exactly what I was going to say. Attention to detail is noticed by people, to the point that they may not necessarily even consciously know why they like one product over another when in reality they just subconsciously are attracted to products that are simply more polished.

techscruggs 2y ago

It really depends on the use case. Right? Sure, if you are building an enterprise application, this likely doesn't make any sense. But, if you are building something for a consumer audience. Or if you are trying to differentiate yourself by building something beautiful. Then maybe wrap these 100 lines of code in a very specific class name (.fancyGlassFrostedGlass) and call it day?