My code *may* have anger management issues.

!rant

This was over a year ago now, but my first PR at my current job was +6,249/-1,545,334 loc. Here is how that happened... When I joined the company and saw the code I was supposed to work on I kind of freaked out. The project was set up in the most ass-backward way with some sort of bootstrap boilerplate sample app thing with its own build process inside a subfolder of the main angular project. The angular app used all the CSS, fonts, icons, etc. from the boilerplate app and referenced the assets directly. If you needed to make changes to the CSS, fonts, icons, etc you would need to cd into the boilerplate app directory, make the changes, run a Gulp build that compiled things there, then cd back to the main directory and run Grunt build (thats right, both grunt and gulp) that then built the angular app and referenced the compiled assets inside the boilerplate directory. One simple CSS change would take 2 minutes to test at minimum.

I told them I needed at least a week to overhaul the app before I felt like I could do any real work. Here were the horrors I found along the way.

- All compiled (unminified) assets (both CSS and JS) were committed to git, including vendor code such as jQuery and Bootstrap.
- All bower components were committed to git (ALL their source code, documentation, etc, not just the one dist/minified JS file we referenced).
- The Grunt build was set up by someone who had no idea what they were doing. Every SINGLE file or dependency that needed to be copied to the build folder was listed one by one in a HUGE config.json file instead of using pattern matching like `assets/images/*`.
- All the example code from the boilerplate and multiple jQuery spaghetti sample apps from the boilerplate were committed to git, as well as ALL the documentation too. There was literally a `git clone` of the boilerplate repo inside a folder in the app.
- There were two separate copies of Bootstrap 3 being compiled from source. One inside the boilerplate folder and one at the angular app level. They were both included on the page, so literally every single CSS rule was overridden by the second copy of bootstrap. Oh, and because bootstrap source was included and commited and built from source, the actual bootstrap source files had been edited by developers to change styles (instead of overriding them) so there was no replacing it with an OOTB minified version.
- It is an angular app but there were multiple jQuery libraries included and relied upon and used for actual in-app functionality behavior. And, beyond that, even though angular includes many native ways to do XHR requests (using $resource or $http), there were numerous places in the app where there were `XMLHttpRequest`s intermixed with angular code.
- There was no live reloading for local development, meaning if I wanted to make one CSS change I had to stop my server, run a build, start again (about 2 minutes total). They seemed to think this was fine.
- All this monstrosity was handled by a single massive Gruntfile that was over 2000loc. When all my hacking and slashing was done, I reduced this to ~140loc.
- There were developer's (I use that term loosely) *PERSONAL AWS ACCESS KEYS* hardcoded into the source code (remember, this is a web end app, so this was in every user's browser) in order to do file uploads. Of course when I checked in AWS, those keys had full admin access to absolutely everything in AWS.
- The entire unminified AWS Javascript SDK was included on the page and not used or referenced (~1.5mb)
- There was no error handling or reporting. An API error would just result in nothing happening on the front end, so the user would usually just click and click again, re-triggering the same error. There was also no error reporting software installed (NewRelic, Rollbar, etc) so we had no idea when our users encountered errors on the front end. The previous developers would literally guide users who were experiencing issues through opening their console in dev tools and have them screenshot the error and send it to them.
- I could go on and on...

This is why you hire a real front-end engineer to build your web app instead of the cheapest contractors you can find from Ukraine.

In my previous company, I used to work for a client company which had a terrible website. It was about financial data and people would have to wait too long before the page loaded because there was a freaking 1.2 megs of minified, compressed JS file that needed to load before you could do anything.

Everyone knew that was a pain in the ass and nobody wanted to touch spaghetti code and mess up something they didn't know.

I wanted to however take a shot at it. So an architect from client side and I discussed how we were gonna go about it and how we were gonna find the stuff that needed to load on page load and stuff that could be loaded later.

So we plan for it. We broke everything down from a globals polluting JS, found out the variables and functions that needed to run during first load by literally putting a console statement for each function and finally came up with two bundles.

The primary bundle was 120kb and would during first load and then every module would call it's own secondary bundle when the user interacted with it.

In the process, we removed half a meg of JS and the site became blazing fast.

I did it with a team of two members who, my manager thought were useless, learned a ton of stuff, setup proper process for the transition.

When the client didn't appreciate the amount of brain and effort we had put into it, these two members came forward to tell the client to acknowledge my effort and attributed the success of it to me.

I was totally moved. There was so much respect that I didnt care what anybody else thought. I was just so happy to work with those two humans.

When i left the company, i gifted them stuff they always talked about or wanted. :) Feels good.

When you try to find something in a minified js file...

What the flying fuck is happening on the EU with the fucking GDPR corsairs!!

I made two - TWO - entirely static websites, hand-made, 100% cookie-free!! I didn't even need to store a goddam boolean cookie! No third-party content is EVER invoked, called or summoned! I hosted a small video to avoid Youtube! Facebook and twitter share buttons are links!! I DID ALL OF THIS ON PURPOSE AND INFORMED THE FUCKING CLIENT.

And THEN (and, of course, unsolicited), the fucking lawyers of an asshole GDPR corsair office came and scared the shit out of my clients and convinced BOTH of them to put the goddam GDPR cookie consent popup on the fucking websites!! And they took their bribe, of course...

In order to avoid billionaire fines because of the NON EXISTENT cookies of the SMALLEST, SIMPLEST, 2KB MINIFIED HTML page on the Internet.

Anybody else is suffering from this kind of behavior??

Buckle up kids, this one gets saucy.

At work, we have a stress test machine that trests tensile, puncture and breaking strength for different materials used (wood construction). It had a controller software update that was supposed to be installed. I was called into the office because the folks there were unable to install it, they told me the executable just crashed, and wanted me to take a look as I am the most tech-savvy person there.

I go to the computer and open up the firmware download folder. I see a couple folders, some random VBScript file, and Installation.txt. I open the TXT, and find the first round of bullshit.

"Do not run the installer executable directly as it will not work. Run install.vbs instead."

Now, excuse me for a moment, but what kind of dick-cheese-sniffing cockmonger has end users run VBScript files to install something in 2018?! Shame I didn't think of opening it up and examining it for myself to find out what that piece of boiled dogshit did.

I suspend my cringe and run it, and lo and behold, it installs. I open the program and am faced with entering a license key. I'm given the key by the folks at the office, but quickly conclude no ways of entering it work. I reboot the program and there is an autofilled key I didn't notice previously. Whatever, I think, and hit OK.

The program starts fine, and I try with the login they had previously used. Now it doesn't work for some reason. I try it several times to no avail. Then I check the network inspector and notice that when I hit login, no network activity happens in the program, so I conclude the check must be local against some database.

I browse to the program installation directory for clues. Then I see a folder called "Databases".

"This can't be this easy", I think to myself, expecting to find some kind of JSON or something inside that I can crawl for clues. I open the folder and find something much worse. Oh, so much worse.

I find <SOFTWARE NAME>.accdb in the folder. At this point cold sweat is already running down my back at the sheer thought of using Microsoft Access for any program, but curiosity takes over and I open it anyway.

I find the database for the entire program inside. I also notice at this point that I have read/write access to the database, another thing that sent my alarm bells ringing like St. Pauls cathedral. Then I notice a table called "tUser" in the left panel.

Fearing the worst, I click over and find... And you knew it was coming...

Usernames and passwords in plain text.

Not only that, they're all in the format "admin - admin", "user - user", "tester - tester".

I suspend my will to die, login to the program and re-add the account they used previously. I leave the office and inform the peeps that the program works as intended again.

I wish I was making this shit up, but I really am not. What is the fucking point of having a login system at all when your users can just open the database with a program that nowadays comes bundled with every Windows install and easily read the logins? It's not even like the data structure is confusing like minified JSON or something, it's literally a spreadsheet in a program that a trained monkey could read.

God bless them and Satan condemn the developers of this fuckawful program.

!Story

The day I became the 400 pound Chinese hacker 4chan.

I built this front-end solution for a client (but behind a back end login), and we get on the line with some fancy European team who will handle penetration testing for the client as we are nearing dev completion.

They seem... pretty confident in themselves, and pretty disrespectful to the LAMP environment, and make the client worry even though it's behind a login the project is still vulnerable. No idea why the client hired an uppity .NET house to test a LAMP app. I don't even bother asking these questions anymore...

And worse, they insist we allow them to scrape for vulnerabilities BEHIND the server side login. As though a user was already compromised.

So, I know I want to fuck with them. and I sit around and smoke some weed and just let this issue marinate around in my crazy ass brain for a bit. Trying to think of a way I can obfuscate all this localStorage and what it's doing... And then, inspiration strikes.

I know this library for compressing JSON. I only use it when localStorage space gets tight, and this project was only storing a few k to localStorage... so compression was unnecessary, but what the hell. Problem: it would be obvious from exposed source that it was being called.

After a little more thought, I decide to override the addslashes and stripslashes functions and to do the compression/decompression from within those overrides.

I then minify the whole thing and stash it in the minified jquery file.

So, what LOOKS from exposed client side code to be a simple addslashes ends up compressing the JSON before putting it in localStorage. And what LOOKS like a stripslashes decompresses.

Now, the compression does some bit math that frankly is over my head, but the practical result is if you output the data compressed, it looks like mandarin and random characters. As a result, everything that can be seen in dev tools looks like the image.

So we GIVE the penetration team login credentials... they log in and start trying to crack it.

I sit and wait. Grinning as fuck.

Not even an hour goes by and they call an emergency meeting. I can barely contain laughter.

We get my PM and me and then several guys from their team on the line. They share screen and show the dev tools.

"We think you may have been compromised by a Chinese hacker!"

I mute and then die my ass off. Holy shit this is maybe the best thing I've ever done.

My PM, who has seen me use the JSON compression technique before and knows exactly whats up starts telling them about it so they don't freak out. And finally I unmute and manage a, "Guys... I'm standing right here." between gasped laughter.

If only it was more common to use video in these calls because I WISH I could have seen their faces.

Anyway, they calmed their attitude down, we told them how to decompress the localStorage, and then they still didn't find jack shit because i'm a fucking badass and even after we gave them keys to the login and gave them keys to my secret localStorage it only led to AWS Cognito protected async calls.

Anyway, that's the story of how I became a "Chinese hacker" and made a room full of penetration testers look like morons with a (reasonably) simple JS trick.

Wait! I screenshot this from the advert of a company who advertises code academy.

Does this mean they want to train people on how to edit minified codes? 🙄

Cos it looks like this guy just opened jquery.min.js and took a picture.

I can't help it. 💔😂😂😂

There are things that i wish i didn't see.

Yesterday, i went to a coffee shop to relax and reviewing my works. And suddenly a college friend of mine approach me and we started talking about work.

Me: So, What do you do at work? What's your stack?
Him: Not much of a new. Still working with wordpress, html,css and jquery.

So he started talking about how cool wordpress is and how he generates money doing sites.

Me: Can i see your sample works?
Him: Sure, *opens his shitty windows laptop with Web Tech stickers*. and handover his laptop to me.
Me: Woah. the design is so neat (I'm lying). But it's freaking slow man(REALLY FVCKING SLOW).

* I decided to open the devTools and inspected the source code. And I can't believe what i saw.

- 20+ images with 2~4mb file size
- 13 unminified javascript files with variable declarations that looks like minified.
- CDN's of bootstrap, foundation and semantic UI
- LOTS OF FVCKING PLUGINS

* I didn't told him what i saw. I just turn over the laptop to him and finish my coffee.

Him: My sites are cool right? I have a lot of pending projects right now. Easy money Bruh!
Me: Wow. *sips* coffee. and say goodbye to him and walkout.

I FEEL BAD FOR HIS CLIENTS!

Reading minified Javascript feels like entering The Matrix.

For fucks sake, just because you don't know anything besides JS, you don't have to constantly complain how it's "so fucked up"!

Yeah there's a lot of frameworks. So what? Python has 50+ wsgi frameworks just for server-side apps, Linux has literary hundreds of desktop environments, C++ has over 30 actively-developed UI frameworks, and let's not even get started on CMSs or game engines. And each language comes with its own dependency management or two, NPM discourages static linking & bundling dependencies until the very end, while some others only recommend dynamically linking widely-available dependencies & always bundling the remaining ones.

Software development is constantly evolving, and for most time there's no right or wrong approach. And when one approach is chosen over another, there's a reason for that. Imagine you just found a perfect library for your use case, but some idiot decided to only offer minified code with bundled jQuery? Or a different idiot made it impossible to have multiple versions of a dependency on your system without resorting to one of various third-party hacks?

Every language has a ton of various frameworks & libraries that ultimately do the same thing, every language has a bunch of design choices you probably don't understand at first, and every language was made with a purpose and the fact that you're using it proves it achieved that.

Last but not least, all devs had to learn about quirks in various languages, and they're fucking tired when someone who barely knows a language tries to act smart going "ahaha how the fuck 0.1 + 0.2 isn't 0.3".

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.');
```

When the .min turns out beautifully poetic 😢👌💛

Last night I nearly finished my portfolio site. I was working on the perfect framework and workflow like forever. But in the end I accomplished a pretty pleasing solutions. For the back-end I choose Laravel with it's built in rest-api, the front-end is managed by Vue. I'm also proud of my assets-management which is handled by Gulp + Webpack (Laravel Mix). But here I decided to run Gulp on images, fonts and CSS and let Webpack bundle the JavaScript.

And what really crawls my balls is that I can write Sass and Jade, even use partials and organized the shit out of this website, and let Gulp just vomit some minified HTML and CSS on the other end.

Man that feels so good.

The company I interned at last summer decided to adopt a JS framework a little over a year ago. The managers went with the old Angular 1.x because they didn't want a JS build process. Each page has ~100 script tags on it, and these are manually included in various files (no automated way to include dependencies). None of the CSS/JS files are minified, either.

They really should have chose Angular 2+, or an entirely different framework (React, VueJS). They're also just now upgrading the codebase from PHP 5.6 to PHP 7.2 (5.6 support ended a long time ago, and security support ends this month).

I love the company itself but these practices are poor.

I may be working there full time eventually. I hope to eventually help with the inevitable transition to a newer framework once Angular 1.x is dead since I am an avid user of newer JS technologies. Any tips on convincing manager(s) towards newer technology? (Or at least convincing them to combine+minify these files in production to reduce # of requests and bandwidth.)

Also this company's product has millions of active users.

When your colleague writes code like minified JS. 😱

Oh I have a good one.

A dev once was added to the team -he deleted all of the whitespace from the backend code (minified) and called that optimising. We had a lot of back and forth and me reverting the things back to non minified and him back to minified on live environement. I shit you not i had to endure that shit and he kept on insisting that I'm the shitty developer because I don't know how to optimise. I'm starting to rage even thinking about it....

Is it just me who sees this? JS development in a somewhat more complex setting (like vue-storefront) is just a horrible mess.
I have 10+ experience in java, c# and python, and I've never needed more than a a few hours to get into a new codebase, understanding the overall system, being able to guess where to fix a given problem.
But with JS (and also TS for that matter) I'm at my limits. Most of the files look like they don't do anything. There seems to be no structure, both from a file system point of view, nor from a code point of view.
It start with little things like 300 char long lines including various lambdas, closures and ifs with useless variables names, over overly generic and minified method/function names to inconsistent naming of files, classes and basically everything else.
I used to just set a breakpoint somewhere in my code (or in a compiled dependency) wait this it is being hit and go back and forth to learn how the system state changes.
This seems to be highly limited in JS. I didn't find the one way to just being able to debug, everything that is. There are weird things like transpilers, compiler, minifiers, bablers and what not else. There is an error? Go f... yourself ...
And what do I find as the number one tipp all across the internet? Console.log?? are you kidding me, sure just tell me, your kidding me right?
If I would have to describe the JS world in one word, I would use "inconsistency". It's all just a pain in the ass.

I remember when I switcher from VisualStudio/C# to Eclipse/Java I felt like traveling back in time for about 10 years. Everyting seemd so ... old-schoolish, buggy, weird.
When I now switch from java to JS it makes me feel the same way. It's all so highly unproductive, inconsistent, undeterministic, cobbled together.
For one inconveinience the JS communinity seems to like to build huge shitloads of stuff around it, instead of fixing the obvious. And noone seems to see that.
It's like they are all blinded somehow. Currently I'm also trying to implement a small react app based on react-admin. The simplest things to develop and debug are a nightmare. There is so much boilerplate that to write that most people in the internet just keep copying stuff, without even trying to understand what it actually does.
I've always been a guy that tries to understand what the fuck this code actuall does. And for most of the parts I just thing, that the stuff there is useless or could be done in a way more readable way. But instead, all the devs out there just seem to chose the "copy and fix somehow-ish" way.
I'm all in for component-izing stuff. I like encapsulation, I'm a OOP guy by heart. But what react and similar frameworks do is just insane. It's just not right (for some part).
Especially when you have to remember so much stuff that is just mechanics/boilerplate without having any actual "business logical function".

People always say java is so verbose. I don't think it is, there is so few syntax that it almost reads like a prose story. When I look at JS and TS instead, I'm overwhelmed by all the syntax, almost wondering every second line, what the actual fuck this could mean. The boilerplate/logic ration seems way to off ..

So it really makes me wonder, if all you JS devs out there are just so used to that stuff, that you cannot imagine how it could be done better? I still remember my C# days, but I admin that I just got used to java. So I can somehow understand that all. But JS is just another few levels less deeper.
But maybe I'm just lazy and too old ...

Atom's Star Wars theme makes minified code a beautiful thing.

News station:
"This country is in need of IT specialists"
*Presents some guy from some company*
"We offer schooling for people who want to learn IT"

Also news station:
*Shows footage of the same guy typing some help command into cmd*
*Same guy opens minified js in notepad++*

Way to fucking cringe everybody with slight knowledge out of the continent!

What the f...
minified and obfuscated javascript code is more readable then the c# code of my colleague jeez...👹😡 what the f

You know it's sad when your boss doesn't know what minified CSS is or JS is. This is really a ecommerce company.

When I was in highschool we had to make a project in team. A friend of mine said to a girl in his team to override a bootstrap CSS class. She started doing it at home and after an entire week my friend found out that she opened the bootstrap.css MINIFIED and she was indenting MANUALLY to find the CSS class in order to modify it. ( Obviously he taught her about CSS cascading ).
We still laughing.

I'm at a pretty cool company today, learning new stack now. Everyone is helpfull and teaches me a lot.

I remember at my first job, when I just started, my boss sent me a MINIFIED .js file (just one file and nothing else) and said "it doesnt work, please fix this". After OBVIOUSLY not being able to fix it, at that moment, I started to doubt my choice to become a web dev.

I turned out to be pretty okay. But, fucking hell, thinking back, that "ex-boss" of mine could potentially influence my later career decisions and not in a good way.

When you open a non-minified file with tons of difficult calculations only to see, that every variable is around 1 or 2 letters. :'(

When you find a bug in a "min" js file and you don't have the not minified version anymore... ok, it's not a bug it's a feature.

Me as a mobile app developer trying to add a button to a page of a .Net website:
So, what do i need to do?

Web developer:
Oh that's easy. You need to edit that template which produces html, add an event in there that will call a javascript function, which is in a .js file, which is generated from a typescript file. Than you should give that button a style. Simply by opening up that .less file here and adding a class which will be translated to css later. In that c# file over there you add a bundle reference which contains the css and js files, but before that, they must be minified. In that other c# file, you add a controller that handles your button.
Aaand... take care of new js features and css features. Most browsers don't support them. Those cool C#7 features you love so much... not in this project. Our build servers don't support C#7. Those new features are evil anyway.

😭

People who write ridiculous JS variable names that are impossible to understand or are just unreadable!! WTF!! Don't tell me it's to save bytes because its getting minified anyway. You're just fucking lazy.

enough is enough
to all the fucker ass morons deploying mini js frameworks with ambiguous names and undocumented functionality all fucking minified and using at least 20-30 of them on each page
dafuq you need a different slider for every section ?

"always think of a bug as a feature"

-Someone I used to know in a hckathon, 2012, colorized, minified

New client: we have all the source files for our website just need it to be responsive. We paid a lot for it back then, should be easy to for you to work on.

*Sure we'll take on the project
**Gets Flattened PSD file, HTML CSS JS Minified :/

Dear rubber duckie,

* When using React, make sure you use
{ varName } and NOT
{{ varName }}

* Also, make sure you have a way to switch your app into the NON minified react.js script easily. Otherwise, you'll spend an hour writing a switching mechanism only to hate yourself for the aforementioned mistake above.

How to delete 16 days of commits 101 🤯:

First of all, me and my class (computer science in college) were working on a project for around 12 weeks, our “client” is one of our teacher and we literally just finished today to work on the project since our degree terminal projects are starting next week.

So now there's this guy in our class who kinda has the reputation to be stuborn and clumsy; he’s going to do his assigned task, commit, push it and put his task into QA (which is just peer evaluation and testing nothing really complex) and then when we try his functionality and finds out it isn’t working, we tell him and the only thing he always answers is : “but it works on my machine” and then we will need to explicitly ask him to be sure he has all the latest changes (database and codebase) and to see if it still works on his side since it doesn’t work for anyone else.

This actually happened quite a lot in these 12 weeks and you can definitely imagine that of course it would definitely not happen again today when we thought we were finally done with this project…

So another teacher gave us an assignment to create a development environment for our big project so we could try out Docker instead of virtual machines, he made GitHub Classroom repos with a minified version of our project and up to this point everything is fine and clear. That is until 3 hours ago, that our little clumsy friend somehow pushed his Docker related files on the main project, maybe he was trying his Docker setup on the real project no big deal you know EXCEPT IF HE HADN’T NOT PULLED SINCE 16 DAYS 😤.

He was doing maintenance on another project so I can maybe understand but gosh how did he not see the big warning of Git that he wasn’t up to date with master ? And yes we only have a master branch bear with us but hopefully we were able to create a new branch with the up to date project and then merge master.

A couple of us had a gut feeling that this guy would do something that would break the whole project right before we ended, turns out we were right 😅

Client: The new page template you sent us looks different on production compared to the other pages that use the same component.

Me: Oh, that's strange since the styling is at the component level. Hmm, let me dig in to it.

Start poking around trying to figure out what I managed to screw up only to find that it looks exactly the same on local and staging. Eventually find another style sheet the client is importing on the production site to change some of the styles.

You know, a change that isn't anywhere to be found in the repo, and no one ever asked for anything to be changed. Their "Dev" decided he would hack in a fix instead of shooting me an email.

Apparently he tried changing the SCSS file but the changes weren't showing up. He changed the minified stylesheet but his changes were overwritten on the next deployment..... #howdoesSASSwork?!

Same client as my last rant so I'm not sure why I'm surprised by this. Oh well, I'll take that hourly rate.

What a coincidence. JQuery gets an update to 3.4.0 - and I removed the JQuery dependency that a mid-sized widget (15 kB minified) needed.

Rewriting the selector, css and trim stuff was easy. Each, children, append, empty, remove and extend were not too hard. Animations gave me more headache, but in the end, JS triggered CSS transitions worked nicely.

I was able to shave off the usual 30 kB over the wire for JQuery, and the whole thing seems snappier. Finally, I'm at vanilla everything!

Of course, it's largely due to JQuery's merits that vanilla JS is where it is today. So, thank you JQuery, and farewell.

Ok.

Have to find a memory leak in a huge, legacy JS application that builds, renders and handles (most) of the basic logic for completing forms - that only works when compiled into a minified js and put in another application that builds into a phonegap based app.
Did I mention everything is bound to a G(lobal) namespace and the ViewModel/Controllers etc. all use JQuery and "this" references and .bind() everywhere?

Deadline of fix: end of today/early tomorrow.

>building the same app once again because of a bug
>look in the unity editor settings for android
>find "proguard"
>google it, find it might be useful to minify, obfuscate code and other stuff
>try to minify the shit of the app
>original app was 25.1MB
>minified app is 24.6MB
>minified app using "Gradle (Experimental)" is 24.5MB

Context: New to typescript. Writing a thing, doing it for work, good opportunity to stretch my dev legs. Using a propriety lib, alternatives not an option.

Rant begin:
SOOOO, who the fuck thought THIS was a good idea:
1. Lib has minified react in dev (because closed source) meaning no downstream errors AND the entire premise of the lib is that a widget is a react component, so I'm writing typescript react the entire time without downstream errors
2. SHIT docs. By that, I mean there's an API reference page that's so sparse there's literally a set of CRUCIAL interfaces that only say the word 'Interface' on them. That's it. that's what i get. It's an interface. NO FUCKING SHIT SHERLOCK, what the fuck is it though? What's its purpose? Is it an interface for a dog? A dog that has a 'shit' property? or a cat? or a cat eating dog shit? Nobody fucking knows - the docs sure as fuck don't care.
3. No syntax highlighting - editors, IDEs (i've tried a few) can't even find the lib inside this environment, so Code and everything else thinks I'm importing shit that doesn't even exist - so no error prediction, code completion based on syntax of the library, none of that.
4. There are some EXTREMELY basic samples - these samples exclusively use React classes - no function components, no hooks, nada - just classes and even perfect replicas of the sample code display erratic behavior like errors about missing props, so that's mostly FUCKING USELESS
5. And this... this is where the straw breaks the fucking camel's back... there's no... there's no hot reloading... Do you know what that (in conjunction with the previous 4 fuckups) means?

When I write anything or I fuck up (which of course I'm doing every time I write half a line because how the fuck?) I have to restart the client and server EVERY FUCKING TIME and manually test to see if the error (THAT ONLY GETS REPORTED IN THE LOCAL UI) is gone or different.
Then, once I see the error, it isn't an error: it's the minified React error-decoder link and guess what? It isn't really clickable a link OR copyable, meaning that every FUCKING time I get a new error, I have to MANUALLY TYPE A FUCKING 50 CHAR URL TO FIND OUT A GENERIC REACT ERROR MESSAGE WITHOUT A LINE NUMBER OR ANY FUCKING CONTEXT. I HAVE TO DO THIS CONSTANTLY TO SEE IF ANYTHING I'M DOING EVEN WORKS.

6. There's no github to complain to the maintainers or search for issues because it's NOT FUCKING OPEN SOURCE so there is literally nothing to be fucking done about it.

This is due in a week and a half, found out about it last Friday. How's your day going?

PS: good to be back after a long respite from dev ranting.

So, I'm looking into something and end up on Stack Overflow. Someone posted the question:

"Does minified javascript improve performance?"

This question was old as shit, all they way from 07/25/09, and about an Adobe Air application. (Remember that? Me neither...) It had a great, accepted, and still accurate answer, posted the same day the question was asked. Now, fast forward 8 years and on 12/08/17 (A mere 7 months ago...) the following answer was posted. I don't know what they were thinking, but here it is, complete and unabridged, with my comments in square brackets:

"I'd like to post this as a separate answer as it somewhat contrasts the accepted one: [Somewhat contrasts? More like completely contradicts...]

Yes, it does make a performance difference as it reduces parsing time - and that's often the critical thing. For me, it was even just simply linear in the size and I could get it from 12s to 4s parse time by minifying from 3MB to 1MB. [First off, your parse time should NEVER be THE critical thing, but secondly, and more importantly, WHO THE FUCK HAS 1MB OF MINIFIED JS ON A PAGE!!!]

It's not a big app either, it just has a couple of reasonable dependencies. [THERE IS ABSOFUCKINGLUTELY NOTHING REASONABLE ABOUT ANYTHING HE JUST SAID! What dependancies is he using?! You could use minified and not even gzipped jQuery, AngularJS, Vue, Ember, React, AND Dojo libraries on the SAME PAGE, AND have 118k of application code, AND STILL NOT HAVE HIT 1MB QUITE YET!!!]

So the moral of the story here is: Yes, minifying is important for performance - and not because of bandwidth, but because of parsing. [Javascript should NEVER take longer to parse then to download, even on a low powered device...]"

So, yeah, I'm at a loss for what this guy was thinking, but the thought the people like this exist, and that my browser might one day be subjected to their horrific nightmare of code terrifies me...

DevRant-Stats Site Update:
Added a minified version of devBanner now. Might not be interesting to use for everybody, but it was fun to implement!
Also check out CozyPlanes, the creator of devBanner!

Have fun!

Sharing a first look at a prototype Web Components library I am working on for "fun"

TL;DR left side is pivot (grouped) table, right side is declarative code for it (Everything except the custom formatting is done declaratively, but has the option to be imperative as well).

====

TL;DR (Too long, did read):

I'm challenging myself to be creative with the cool new things that browsers offer us. Lani so far has a focus on extreme extensibility, abstraction from dependencies, and optional declarative style.

It's also going to be a micro CSS framework, but that's taking the back-seat.

I wanted to highlight my design here with this table, and the code that is written to produce this result.

First, you can see that the <lani-table> element is reading template, data, and layout information from its child elements. Besides the custom highlighting code (Yellow background in the "Tags" column, and green gradient in the "Score" column), everything can be done without opening even a single script tag.

The <lani-data-source> element is rather special. It's an abstraction of any data source, and you, as a developer can add custom data sources and hook up the handlers to your whim (the element itself uses the "type" attribute to choose a handler. In this case, the handler is "download" which simply sends a fetch request to the server once and downloads the result to memory).

Templates are stored in an html file, not string literals (Which I think really fucks the code) and loaded async, then cached into an object (so that the network tab doesn't get crowded, even if we can count on the HTTP cache). This also has the benefit of allowing me to parse the HTML templates once and then caching the parsed result in memory, so templates are never re-parsed from string no matter how many custom elements are created.

Everything is "compiled" into a single, minified .js file that you include on your page.

I know it's nothing extraordinary, but for something that doesn't need to be compiled, transpiled, packaged, shipped, and kissed goodnight, I think it's a really nice design and I hope to continue work on it and improve it over time

Worst architecture: the stack compiler I wrote. I basically just made my own shitty webpack.

The idea was simple: Babel to minified JS, Scss to minified CSS, and HTML to minified HTML. Made in Node JS, of course. (perhaps that’s where I went wrong!)

The thing works... and I use it... but boy is it bad. It even broke on my current project (which is for a client so...) and I’m having to work around my own god damn code.

I really need to revisit it and redo it.

Have a contractor on at work who hand writes minified css. Counting down the weeks until that contract isn't renewed.

It's only took me all morning but I got git properly setup on our server.

We have a folder in the repo that holds the distribution files. They get split to the distribution branch. Then the hosting service clones that branch.

Finally we we got some proper version control and a good testing environment.

Oh yeah the distribution files are minified using grunt.

I gave backend dev my frontend code and he had no idea about SCSS.

So he copied the compiled AND minified CSS, prettified/formatted it and put his own changes by searching the class names.

And he had made lots of design changes arbitrarily so when new changes were to be made I had to cope with it.

As a hack I kept his css as it is and compiled another file with new changes. And now there's two css files all huge, like 800kb multiply by two huge.

It covers about 33+ custom pages with all the bells and whistles.

#let me do the frontend
#I wont bother you either

So I was searching how to speedup my page speed of site which is built on Codeigniter and despite minified css and js I read this:
" CI active records are garbage, use classic quries"
:'( I used active records all over my app

I'm starting to FUCKing hate those 1-5 lines minified 3rdparty javascript snippets that everyone seems to be bombarding their website with.

Why on gods ungodly earth would you ever dream of injecting this kind of style into my <head> tag.
Without any warning whatsoever.

You couldn't be FUCKing bothered to be thinking about the consequences, before pushing such an update to your production server.
That's how you leave your users website broken, or ugly af.

I know it's an easy fix, simply remove the snippet that injects this crap, if only I was allowed to say "no don't keep this FUCKing crap" to the customer.

!rant
Guys, will a 150kb minified js package for frontend slow my site down? How large is too large for a frontend script?

Meh. FFS. Thats how this shit starts.

Get a call to say 2018 Bank Holidays not showing on legacy web calendar.

/me looks for bank holiday code in PHP file ..... no dice.

/me finds a dBase table that holds all Bank Holiday info. Not ideal, but I can work with that.

Enter all Bank Holidaya into dBase. Sit back, relax, wait for page to reload to show me Banks .... no dice.

Huh??

Read code more closely ......

Included file (inline, half way through PROCEDURAL FILE FFS) and notice that the linked file has all Banks hand formatted into Calendar events, and minified.

If I ever meet the old dev in the street, so help me god. 🤬

Had our 3rd party vendor finally check their code into our github. Great.

Checking the recent commits, they only add changed .CSS files. Hmm..odd.

We use less so why did they update the compiled CSS file...? Did they forget to checkin the Less changes...?

Nope. Backend sitecore developer updated the bundled, minified CSS files and checked those in along with the fucking node_modules folder.

Didn't even know what LESS is.

The vendors PM swears the frontend developer did the changes. I don't know what's worse.

Question to the frontend devs: I'm currently trying to optimize part of our JS. How do sourcemaps influence loading/rendering Speed in the Browser?

In the `webpack.config.js` we use uglify as minimizer for js. It has the option `sourceMap` Set to `true`. Now as I understand it, this caused it to Inline a sourcemap inside the JS file (which leads to a slightly bigger file size and thus longer load time for the generated file...).

My Question: should sorcemaps be enabled for prod (minified) files? Why yes, why no? Do they help the browser parse the JS faster?

If you're using SASS, please don't write minified CSS

Laziest thing is to do is commenting out the buggy code in minified JS rather than actually fixing

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

From the abandoned university my first dev project came from the course of programming 1(C as language).
I had to implement a robot that moves inside any matrix like map following both specified rules and random moves, and had to reach sooner or later the exit place of the room.

At first I was overwhelmed by the task at hand, then I had to calm myself and start hacking around to get any idea on how to even understand what's required to get to that point.

It obsessed me for the whole first 2 weeks, but the progress was quiet steady.

Then I hit a fundamental problem of state and movement of the robot... And, as always, the best thing to do at this point is to simply detach your attention from the issue|project.

In the same day my mind asynchronously bursted a solution to my problem, and after some time I came back to the project and accomplished it with 100% of the requirements met 😁

This is what it looked like in the console(minified here):

3333333
3000003
3000003
3003003
3003003
4003023
3333333

Guess which is which 😉

What do you do when you have to deal with ancien minified js and no dev version left ? seriously , its a legit question ..

My 11k LOC frontend codebase with webpack compiles into a 1.2 MB minified bundle file...RIP mobile users

minified package.json

Opened a minified css file. Went online and unminified it. Came out to be 12k lines. Coollllll.

Hell...
A lot have been moving forward using preprocessor such as less, sass & stylus.
There are some developer still (who just knows it but don't use it), make changes on the minified CSS in directly.

Way too long story short: Needed to figure out how to use jQuery to update a table that had no classes or IDs to help you tell what's inside it. Worked out a looping structure to read the contents of the cell with the dependent data in each row, and then update the cell that needed changing depending on the value of the first cell.

Minified the solution and dropped it into the console. Worked exactly right on the first try.

The BPOS client gave us a job to help develop a site. Another vendor is doing the development and we're doing the CSS. The other vendor keeps messing with the CSS and the client keeps coming back to us to fix the issue. The problem is that the other vendor is managing the CSS and has minified it. Now I have to figure it out,somehow.

I need some advice to avoid stressing myself out. I'm in a situation where I feel stuck between a rock and a hard place at work, and it feels like there's no one to turn to. This is a long one, because context is needed.

I've been working on a fairly big CMS based website for a few years that's turned into multiple solutions that I'm more or less responsible for. During that time I've been optimizing the code base with proper design patterns, setting up continuous delivery, updating packaging etc. because I care that the next developer can quickly grasp what's going on, should they take over the project in the future. During that time I've been accused of over-engineering, which to an extent is true. It's something I've gotten a lot better at over the years, but I'm only human and error prone, so sometimes that's just how it is.

Anyways, after a few years of working on the project I get a new colleague that's going to help me on my CMS projects. It doesn't take long for me to realize that their code style is a mess. Inconsistent line breaks and naming conventions, really god awful anti-pattern code. There's no attempt to mimic the code style I've been using throughout the project, it's just complete chaos. The code "works", although it's not something I'd call production code. But they're new and learning, so I just sort of deal with it and remain patient, pointing out where they could optimize their code, teaching them basic object oriented design patterns like... just using freaking objects once in a while.

Fast forward a few years until now. They've learned nothing. Every time I read their code it's the same mess it's always been.

Concrete example: a part of the project uses Vue to render some common components in the frontend. Looking through the code, there is currently *no* attempt to include any air between functions, or any part of the code for that matter. Everything gets transpiled and minified so there's absolutely NO REASON to "compress" the code like this. Furthermore, they have often directly manipulated the DOM from the JavaScript code rather than rendering the component based on the model state. Completely rendering the use of Vue pointless.

And this is just the frontend part of the code. The backend is often orders of magnitude worse. They will - COMPLETELY RANDOMLY - sometimes leave in 5-10 lines of whitespace for no discernable reason. It frustrates me to no end. I keep asking them to verify their staged changes before every commit, but nothing changes. They also blatantly copy/paste bits of my code to other components without thinking about what they do. So I'll have this random bit of backend code that injects 3-5 dependencies there's simply no reason for and aren't being used. When I ask why they put them there I simply get a “I don't know, I just did it like you did it”.

I simply cannot trust this person to write production code, and the more I let them take over things, the more the technical debt we accumulate. I have talked to my boss about this, and things have improved, but nowhere near where I need it to be.

On the other side of this are my project manager and my boss. They, of course, both want me to implement solutions with low estimates, and as fast and simply as possible. Which would be fine if I wasn't the only person fighting against this technical debt on my team. Add in the fact that specs are oftentimes VERY implicit, so I'm stuck guessing what we actually need and having to constantly ask if this or that feature should exist.

And then, out of nowhere, I get assigned a another project after some colleague quits, during a time I’m already overbooked. The project is very complex and I'm expected to give estimates on tasks that would take me several hours just to research.

I'm super stressed and have no one I can turn to for help, hence this post. I haven't put the people in this post in the best light, but they're honestly good people that I genuinely like. I just want to write good code, but it's like I have to fight for my right to do it.

I have a Angular webapp that's minified in production. And it's throwing an error thought it seems to get caught by a catch-all and relayed to a toast message.

Is there anyway to trace it back to the source code?

Most emotionaly intense?

Every day! - when i have to merge in changes in production to git and figure out what the idiots changed in mangled minified javascript, i'm really happy i didn't kill anyone yet.

Guys can you help me with sentry integration in angular 7 app ?
It capture errors but need to know the line number in the typescript source file not in the minified js file. Any hint ?

We've got a non minified jQuery in production for months now. Not only do people throw it at every little problem, but some of them don't even use the minified version... 😑

Any tips to speed up wordpress site. I have googled and tried as many solutions I can except adding cdn. I have minified images, html, css and js. I have used caching on the server with litespeed cache. There are not many plugins on the site.

The plugins installed are elementor, litespeed, orbit fox, wp-optimize, updraft plus and wpforms lite. The site takes around 4 to 5 seconds to fully load. I am doing this for a releative(don't worry he is sane and I am doing pretty simple stuff for him which is simply not worth charging). I cannot use cloudflare cdn since they need nameserver access and the hosting service used is hostinger which have put a lot of dns records which I don't understand and don't wanna mess with unless it is the last option.

I once had a colleague ranting about my variable naming because it went out of bounds on his IDE's printmargin. To please him i wrote minified code while pair programming