JSON helps

There are some great uses of JSON, some fair uses of JSON and then some questionable uses of JSON :-)

Replace keys in Object

1. obj = JSON.parse(
2. JSON.stringify(obj).replace(/"key1":/g, "\"key2\":"))
3. );

Parse response headers

1. r.headers = JSON.parse(
2. "{\"" + r.getAllResponseHeaders()
3. .trim()
4. .replace(/: /g, "\":\"")
5. .replace(/\r\n/g, "\",\"")
6. + "\"}");

Web icons

You have several options when it comes to icons on a web. The oldest way is to use images (GIF, later PNG), but they may look blurry on today's high DPI displays. You can use SVG, which is great, scales great, but may become CPU heavy and are harder to recolor on hover events. And then you have font icons.

Typicons

Microns

Icomoon

Font Awesome 3

Font Awesome 4

Sassy CSS

I started using CSS preprocessors many years ago and I switched from LESS to SCSS since then. I use sassc, because the official transpiler is too heavy for my taste. Sassc is just shy of 4 MB and dotless was even only 152 kB! That's my primary reason I don't use webpack or similar tools.

I use it in PhpStorm as a global File Watcher (Settings > Tools > File Watchers) for SCSS files, with arguments -m auto $FilePath$ $FileDir$\$FileNameWithoutExtension$.css, which outputs the CSS file the same directory ($FileDir$).

Even better would be to put the CSS files into final directory, so you don't mix SCSS and CSS. The -m auto means it generates a source map as well, so in browser's DevTools I can see the correct row in the .scss file, so I don't have to look for it from the row in transpiled .css file. So convenient!

I don't use auto-save trigger option, because it often tries to compile during edits, when the SCSS is not yet valid, so the console pops up with an error, as it should.

But I have to admit, I use preprocessors mainly as a future-proofing, because so far I didn't see any major benefits, other than the result is in a single CSS file.

I like multiple source files, but there's @import in CSS. I like variables, but there's `var(--name)` in CSS. I don't use nesting, because when I need to fix something, it's often hard to find, and I learned to use custom classes wherever suitable. Functions and mixins add bloat to the stylesheet in my opinion and my target is to have it as slimmest as possible.

The only real upside of a CSS preprocessor for me are comments. I somewhat dislike block comments, because you can't comment out a block of commented code, and there are no line comments in CSS – but they are in preprocessors.

The other upside would be more permissive syntax, but the only real permissive preprocessor is Stylus and I hate significant whitespaces, not to mention I don't like some syntax decisions they made.

I admit it's nice not to care about (semi)colons and I'm sometimes furious about multiple selectors on one declaration, when I want to sort them in particular fashion I have to replace curly brackets and commas all the time.

Anyway, It feels to me the target audience of preprocessors are web designers, who have CSS as their main work, unlike me, who write CSS only because I need to.