By renaming the CSS file from `font-awesome.min.css` to `fa.min.css` they could save 660GB a day:

  73,000,000 sites * 1000 visitors * 10 bytes / 1024^3

A calculator for you, because I'm in pitch-my-side-project mode ;)

https://instacalc.com/50060

That's pretty neat idea. The site's missing a cute calculator favicon though, which destroyed my UX.

Hah, I just finished a flat redesign from mid-2000s skeuomorphic interface. Redoing the logo / favicons is that last thing...

Too bad you didn't have a legacy "flat design" from the early 90s still at hand, saves time when changing trends every 10-15 years..

That's how you can tell flat isn't just a trend - it's going back to what worked, after years of doing rounded corners and drop shadows because we can and never stopping to wonder whether we should. There's a lost decade in web design, but hopefully we're now starting to recover from it.

Ironically the site design is 90s-browser friendly (maybe with tables vs. divs) but the new JS features are not.

That reminds me, I want to browse the site on lynx and see what happens...

UX is now undestroyed.

This is really cool! Bookmarked. :D

ps. I can't use any of your examples. I use a portrait orientated screen which causes the examples list to go below the example. Hovering over them causes the example to change, which changes the height of the area, which forces a hover event on another item in the list as it gets pushed up/down which repeats the process until the height is either too short or too tall for me to be hovering an item in the list.

Consider making it a .onClick() event after a certain screen size? :)

E: Woah! Just realized you're the same kalid behind betterexplained. Another really awesome resource. :)

Great feedback, thanks! The examples should probably load on either hover (preview) or click (load). Currently it takes you off the example list and to a standalone calc, which is confusing. (There are so many usability issues you discover as things get out there.)

Glad you're enjoying betterexplained too ;).

Oh shit, you're the asshole[1] behind instacalc?

I love instacalc.

[1] I mean that in the most endearing way.

Hah, yes, I'm that bad mamma jamma.

seriously, been using it for years, one of my favorite tools P.S. I'm sure you've looked into it but any plans for graphing capabilities?

It's awesome to hear when it's been a long-standing tool in the utility belt. The original version had charts/graphs (simple pie charts, etc.) which I need to bring back, were you considering more Wolfram-Alpha style 3d plots?

If you moved your scripts to 1st party, uMatrix wouldn't block it

Writing this so that the owner of the site knows it affects more than one person.

Thanks for the feedback, I should test with that. I'm curious whether/if CDNs like google-hosted libraries are normally blocked.

Hey, I just wanted to say this is a really cool idea. Thanks for making it and sharing!

Glad you liked it!

On A serious note about the UI though, that red/green colour is awful for colourblind people. Didn't even realise there were two colours at first.

Thanks for the feedback. The colors are more syntax highlighting (vs indicating anything important), I'd like to research best practices here. I wonder if there's any client-side settings I can detect to indicate a different stylesheet should load.

blue is a good option instead of green. same reason some places in the world have blue, rather than green signals for traffic lights afaik :)

How would you work around this? Do browsers have a colorblind mode/header/whatever? Or should we just never use red/green combination?

I'm sure you mean - those are two different colours. If not, oh boy do I have news for you.

I love this!

Thanks! I'm trying to make the imgur/pastebin of calcs. Whip something up on a forum (ahem) and share it in seconds. Let people try and share their own scenarios.

`fa` would basically be free for gzip because the icons use fa as a class name.

The savings are actually greater, because by modifying the filename, 660GB would be saved in both, the request and the response!

skip the `min` for production completely.

use `fa.css` and if you want the expanded one for development, then you could have `fa.[max|debug|whatever].css`

Do you even need the ".css"? Just set the proper mime type in the server configuration

f

This is Web 3.0

my build task makes sure that every file on my site has only one character in the name!

I can put your mind at ease: I took a bit of poetic-mathematic license with that number. I figured that the big sites and the small sites together would average a perfect 1000 fresh-cache vistors a day, but in all probability I'm off by at least 3 or 291 visitors :)

I think you misunderstand the effect of the long tail. For that many sites the average is going to be tiny. And where did the figure of 73 million come from?

I don't know where they came up with the 73 million sites umber, but let's assume there are that many sites using font awesome.

Most sites are obscure, and rarely get any visitors at all. Maybe 10 a month, or none.

Popular sites that receive a lot of traffic are also visited very frequently by the same user, so the font will be in the cache.

In addition, plenty of sites use a CDN for fontawesome.

I guess that number is off by several orders of magnitude.

73 million sites comes from our friends at Meanpath (their search engine isn't running anymore, sadly). They showed us on 7.3% of websites. Best guess is there are about a billion sites on the internet. Thus, 73 million.

Where did the 1000/visitors/site/day come from? This is what seems unlikely and improbable. This resource is being cached as well, so these numbers do seem obtuse.

Not sure on the 1000/visitors/site/day. But we're also on some pretty big sites as well. IIRC, the final number there is higher than what MaxCDN (BootstrapCDN folks) serves. Not by much though. Within an order of magnitude I think (which is pretty accurate for this kind of guesswork).

Of those 73 million, how many of them are serving the file themselves, vs pointing to it hosted by someone else? I know you can just point to google directly for their fonts, or unpkg.com for js packages. Is that something people also do for font awesome? Those shared links would greatly increase the cache level, and reduce the number of cache misses, and amount of data served.

According to Netcraft [0] there are currently 171,432,273 active websites. However there were 1,436,724,046 host names on the net. A total of 6,225,374 web-facing computers was reported.

Interestingly the number of active sites hasn't materially changed in 5 years, but host names have skyrocketed.

[0] https://news.netcraft.com/archives/category/web-server-surve...

Indeed.

> If each day 73 million websites serve the Font Awesome WOFF to an average of a thousand visitors who don’t have these fonts in the browser’s cache...

This assumption that they don't have the fonts cached is only sensible if each user is unique. But that means that we have 73 BILLION unique users.

Not necessarily: your browser caches a different version of font-awesome for each website you visit. There's no way for it to tell that site1.com/static/font-awesome is the same as site1.com/resources/font-awesome until it makes the HTTP request and downloads it.

Many sites use the provided MaxCDN URL though, which would be cached between sites.