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(JSON.stringify(obj).replace(/"key1":/g, "\"key2\":")));

Parse response headers

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

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.