4 ms·

I feel I am perhaps being too pessimistic, but I fear this trend toward this heavier, unused-feature filled web-- a mosaic of libraries that make web developmen

I feel I am perhaps being too pessimistic, but I fear this trend toward this heavier, unused-feature filled web-- a mosaic of libraries that make web development or design better in X and Y way that really doesn't affect the end user that much, but largely increases the cost and speed of viewing a webpage, especially in places and countries without the high internet speeds the developers inevitably have. How many icons will a website need before an abstraction like this is necessary to manage them? If every icon has each element labelled with large prefixed classes (".iconic-camera-slr-lens-release"), this is going to be a lot of extra footprint for websites that have enough icons to make this useful. Perhaps I am alone in thinking that colourful icons are somewhat noisy, and thus will be used only in designs where icons are prominent elements, and as such infrequently; with that frequency, they could even be individually coded for.

jheriko 13y ago
i agree, but i think that ship sailed a long time ago... i think we passed the point where the speed of the internet is an embarrassing reflection on the programmers involved about 15 years ago now though... the bugs in the browser layer alone are embarassing enough - let alone the sheer number of layers and volume of redundancy, bugs and resource spunking involved all the way down. that moderately recent post about fixing memory usage in firefox by doing very common sensical and normal things instead of assuming memory is some kind of endless resource... i had to check it wasn't april 1st. their final memory footprint is embarassing let alone what they started with. :/ i can see the lapse of time between pressing a key and seeing a character... this was much less often the case in 1995 with 1% the horsepower - rose tinted glasses aside :/
- c23gooey 13y ago
  and yet you managed to break through the sheer layers and volume of redundancy, bugs and resource spunking to make this post using your browser, using the same technologies you decry.
dntrkv 13y ago
Managing a sprite for even 10 different icons is a huge pain in the ass. Let's say you need a light and dark version of each icon, that makes it 20 different icons. Then you want a small version, and a big version of each, that brings it to 40. Then you need a version of each for retina, those 10 icons are now 80. A font icon library is a god send when dealing with all these different variations since you can make these changes in the CSS without updating any of the icon sources files.
- tshadwell 13y ago
  Use an icon font generated by icomoon or the like. That does not require Javascript, HTML and CSS prerequisites, is only as heavy as the used constituent SVG elements and is well-supported.
  - dntrkv 13y ago
    I do use icomoon, it's an amazing tool. I was just replying to the parents comment about how necessary these abstractions are: "How many icons will a website need before an abstraction like this is necessary to manage them?" I say they are very necessary.
rads 13y ago
It's important to think about your performance needs before you add any kind of third-party dependency. In production, you might consider using IcoMoon to create your own font with just the icons you need. [1] This library provides everything you need to do that. The predefined classes give you flexibility when you're developing, but there's nothing stopping you from using your own names. There's also @extend in SASS that allows you to mix in icon styles to your application's classes without adding duplicate rules. [2] [1] http://icomoon.io/app http://icomoon.io/app [2] http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend http://sass-lang.com/documentation/file.SASS_REFERENCE.html#...
- hippee-lee 13y ago
  The flexibility with icomoon it fantastic, once you get it wired into the app. And the ability to add your own, custom svg's is very handy!
  - elpool2 13y ago
    Yeah, the ability to quickly make my own icons when the icon set I've bought doesn't have exactly what I need is pretty awesome.
- rachellaw 13y ago
  yes I love icomoon!
- tshadwell 13y ago
  Icomoon is great, I just wish it provided Compass markup so I could have the cross-browser support Compass provides.
- hablahaha 13y ago
  +1 for IcoMoon. I tried a few of the other icon compilation apps and IcoMoon is by far and away the easiest to use with the best selection. There are slightly snazzier apps out there, but they just weren't as flexible as IcoMoon.
michaelmior 13y ago
Another thing that really bugs me is that with icon fonts, there's only one file to download. In this case, the user has to download each SVG file separately.
woah 13y ago
Of course visuals need to be balanced against load speed, but using this kind of thing will be much smaller than doing everything with bitmapped graphics. I agree that having JS for icons may be a bit much, but you could always just use it without.
boobsbr 13y ago
regarding large prefix classes (".iconic-camera-slr-lens-release"), can't this be mitigated by turning Gzip compression?

jheriko 13y ago

i agree, but i think that ship sailed a long time ago... i think we passed the point where the speed of the internet is an embarrassing reflection on the programmers involved about 15 years ago now though... the bugs in the browser layer alone are embarassing enough - let alone the sheer number of layers and volume of redundancy, bugs and resource spunking involved all the way down. that moderately recent post about fixing memory usage in firefox by doing very common sensical and normal things instead of assuming memory is some kind of endless resource... i had to check it wasn't april 1st. their final memory footprint is embarassing let alone what they started with. :/ i can see the lapse of time between pressing a key and seeing a character... this was much less often the case in 1995 with 1% the horsepower - rose tinted glasses aside :/

c23gooey 13y ago
and yet you managed to break through the sheer layers and volume of redundancy, bugs and resource spunking to make this post using your browser, using the same technologies you decry.

dntrkv 13y ago

Managing a sprite for even 10 different icons is a huge pain in the ass. Let's say you need a light and dark version of each icon, that makes it 20 different icons. Then you want a small version, and a big version of each, that brings it to 40. Then you need a version of each for retina, those 10 icons are now 80. A font icon library is a god send when dealing with all these different variations since you can make these changes in the CSS without updating any of the icon sources files.

tshadwell 13y ago
Use an icon font generated by icomoon or the like. That does not require Javascript, HTML and CSS prerequisites, is only as heavy as the used constituent SVG elements and is well-supported.
- dntrkv 13y ago
  I do use icomoon, it's an amazing tool. I was just replying to the parents comment about how necessary these abstractions are: "How many icons will a website need before an abstraction like this is necessary to manage them?" I say they are very necessary.

rads 13y ago

It's important to think about your performance needs before you add any kind of third-party dependency. In production, you might consider using IcoMoon to create your own font with just the icons you need. [1] This library provides everything you need to do that. The predefined classes give you flexibility when you're developing, but there's nothing stopping you from using your own names. There's also @extend in SASS that allows you to mix in icon styles to your application's classes without adding duplicate rules. [2] [1] http://icomoon.io/app http://icomoon.io/app [2] http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend http://sass-lang.com/documentation/file.SASS_REFERENCE.html#...

hippee-lee 13y ago
The flexibility with icomoon it fantastic, once you get it wired into the app. And the ability to add your own, custom svg's is very handy!
- elpool2 13y ago
  Yeah, the ability to quickly make my own icons when the icon set I've bought doesn't have exactly what I need is pretty awesome.
rachellaw 13y ago
yes I love icomoon!
tshadwell 13y ago
Icomoon is great, I just wish it provided Compass markup so I could have the cross-browser support Compass provides.
hablahaha 13y ago
+1 for IcoMoon. I tried a few of the other icon compilation apps and IcoMoon is by far and away the easiest to use with the best selection. There are slightly snazzier apps out there, but they just weren't as flexible as IcoMoon.

michaelmior 13y ago

Another thing that really bugs me is that with icon fonts, there's only one file to download. In this case, the user has to download each SVG file separately.

woah 13y ago

Of course visuals need to be balanced against load speed, but using this kind of thing will be much smaller than doing everything with bitmapped graphics. I agree that having JS for icons may be a bit much, but you could always just use it without.

boobsbr 13y ago

regarding large prefix classes (".iconic-camera-slr-lens-release"), can't this be mitigated by turning Gzip compression?