Kitchen Nightmares Season 1

Brandon had been absent for a week. No calls. No show.

The entire team wondered if something had happened to him. Family issues? Accident? Retrenched?

Turns out, he was moonlighting with another agency in Timbuktu, on company time no less.

Management got wind of it because he was boasting about his escapade to everyone.

He was known to be irresponsible but this incident took it to a whole nother level.

Shortly after, he resigned but not before coaxing some of the team members to quit the kitchen with him.

We were now down from eight to a four men development team.

Management informed us that Brandon’s application was facing serious performance issues in production and gave us a decree.

"You have two weeks to fix the issue."

Unfortunately, Brandon did not transfer his knowledge of the build to the rest of the team.

We had no idea what to do next, where to begin, which files contain the core features, and starting from scratch wasn’t wise.

As we pondered our next move, Gordon Ramsay marched in, took a look at the application and shook his head.

What would Gordon Ramsay do?

Gordon Ramsay took a sip of the data tables. “This is taking forever to load!”

He then sampled the infinite scroll element. “What is this crap?”

Finally, he bit into a piece of the CSS. “You’ve got to be kidding me!”

"Gentleman, stop whatever you are doing at this moment. I want everyone to study the code before touching it!"

The code base was hard to swallow.

We dissected it, bit by bit, into digestible chunks.

24 hours later

The whole team was tuckered out.

We spent the whole night studying the spaghetti code.

"Now that you’ve examined the code, perform a site audit and witness this piece of crap for yourself."

We fired up Lighthouse.

No surprises there. The scores were less than ideal.

##Trashtag

Where is this piece of code used? Look at all those console logs! This code is as clean as a puppy litter tray. It’s disgusting."

Brandon had this bad habit of leaving console logs and dead code in the application.

Fixing the console logs was easy. Removing the unused code, not so.

The code rot affected the application’s performance, increased page load times and caused sluggish behaviours.

We had to think of a way to cut the overall footprint of the application.

"Clean your disgusting kitchen using Chrome’s coverage tool and PurifyCSS!"

Removing unused CSS and JavaScript was a long and tedious process.

Chrome’s coverage tool alleviated part of the pain while PurifyCSS was the icing on the cake.

After three days, we shrank the CSS from 3200 kb to 906 kb and the JavaScript from 4200 kb to 1870 kb.

Murphy's Law

During the clean-up, we discovered another issue.

The application got progressively slower over time.

We monitored the JavaScript memory usage in Chrome Task manager.

It kept increasing.

30k...35.3k...56.956k....108,356k…

The memory leak baffled the entire team.

"Everywhere you turn, there’s a surprise. There are sixty users out there and I’m so glad that they can’t see what the application is actually doing!"

After three hours of prodding, we found the culprit.

A 400 kb plugin was creating and detaching Dom nodes every 10 to 20 seconds because Brandon had initialised it within the global scope.

(function () {
var ctx = document.getElementById("myChart");
     var myChart = new Chart(ctx, {
…

}());

<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>

A 400 kb plugin for one..inessential..graphical..element...

$ git add .
$ git commit -m “Resolved food poisoning issues with Brandon.js.”
$ git push

Test your code, not your patience

"I want everyone to test their own recipe using Cypress. It used to be Brandon’s responsibility. Now it falls squarely on your shoulders."

There were no E2E testing from the beginning.

This was a huge undertaking.

I thought to myself, "This is not a good position to be in."

Thankfully, installing and setting up Cypress was a piece of cake.

$ npm install cypress

It seemed intimidating, however, Cypress was extremely developer friendly.

It wasn't conclusive but we managed to test all the core functionalities and then some.

The final taste test

Time for the final audit.

The entire team watched nervously as Lighthouse worked its magic.

Mission accomplished.

We could finally deploy the code to production.

Users were happy. Management was happy. Gordon Ramsay was happy.

Kitchen Nightmares Season 2

It's been two months since the big cook-off.

Minor bugs cropped up along the way but we squashed them almost as soon as they were discovered.

Around two o’clock in the afternoon, I received an email from Management.

Brandon was working on another module before his departure.

It was failing in production.

As we pondered our next move, Gordon Ramsay marched in, took a look at the application and shook his head.

"This is absolute dog-s**t!"