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!