So, I was going to complain about JS being finicky and not making a damned bit of sense, but it turns out that it wasn't JS's fault. Not entirely, anyway. It was the halfassed JS minifier middleware (written by the legendary dev himself) that was breaking the JS while writing it to the page.

The original problem:
My code worked. I removed some comments. Big ol' block of //'s. And suddenly $() isn't a function. But if I call $(); at the top, it all works!

It turns out the "minifier" caused JS to think my code was chaining off the previous JS line in the rendering pipeline instead of being a separate statement. so all it really needed was a `;` at the start. What threw me, though, was the last line of the previous blob of (non-minified) JS was a comment, so it should be a separate statement, right?

But as it turns out...

```
console
// JS really is finicky.
.log('Sigh.');
```

Stupid javascript.
Stupid hoisting-oblivious "frontend devs."
Stupid browser-specific javascript behavior.
Stupid thrown-together javascript minifier that literally only strips out whitespace and comments.
Stupid poorly-written javascript spamming my api.

Time to rewrite it. Grumble grumble. Soo not how I wanted to spend my morning-turn-afternoon.

Leading to the last but not least:
Stupid me forgetting javascript's quirks.

Spent 30 fucking minutes today trying to figure out why my grunt build was getting stuck.. The reason? An extra fucking < in a html file, the minifier freaked out over it.

"Use this great extension for your IDE!"

Yeah, thanks, now I have 57 extensions installed and not one of them is useful because my fucking IDE crashes every fifth minute.

When you accidentally disable js minifier

Idea for a project:

Inspired by BlockAdBlock, what if we do a format-minifier loader for webpack? It'll take your minified JavaScript, and format it by filling it with newlines and spaces? It'll also try to guess the functionality of the variables and functions to name them. Ex:

function f(a, b){return a + b;}
// would turn into:
sum(summand, addend){
return summand + addend
}

but also:

function f(a) {
if( window.innerWidth / window.innerHeight > 700){
a.width = 4
a.height = 5
} else {
a.width = 5
a.height = 5
}
}
// would be renamed to...
function ifWindowInnerWidthDividedByWindowInnerHeightThenObjWithHeightAndWidthHeightEqualTo500ObjWithHeightAndWidthWidthEqualTo400ElseObjWithHeightAndWidthHeightEqualTo300ObjWithHeightAndWidthWidthEqualTo500( objWithHeightAndWidth ) {
if( window.innerWidth / window.innerHeight > 700){
objWithHeightAndWidth.height = 500
objWithHeightAndWidth.width = 300
} else {
objWithHeightAndWidth.height = 300
objWithHeightAndWidth.width = 500
}
}

Imma get famous

Recently our management department discovered the advantages of setting up CloudFlare DNS and their CND for a website. In our case that made perfect sense and also helps a lot with the performance.

A while ago someone noticed that in the backend of the CMS the site uses, stuff that is being loaded via AJAX is not loaded at all and just displays an empty container.

3 hours into debugging I discovered why: Someone thought it would be a good idea to base a condition on whether there was a certain HTML comment inside an element, rather than using a class or something else.

A comment.

The HTML minifier removed that, so I ended up having to disable HTML minifying, at least for the backend.

Thanks, whoever thought it would be a good idea to base logic on the existence of a comment.