How to (not) develop a public web service

Context

In Italy we have a public organization called INPS, it is an institution for people's pensions.
Every citizen can access to this service and he can handle its data about pension and some other information. There are several different ways to login to this service, one of these is through a simplified code.
Although using a simple PIN is not too safe, the simplified method was introduced due to the COVID-19 event. Many citizens now, can request a discount of 600€ from taxes since they cannot work due to the virus.
The INPS thought of scale servers to support multiple requests, but they failed and this is the result: News in the Italian language.
This news leads me to look at the front-end Javascript code of their new pages, we will talk about it below...

JS hell

The page I want to talk about is this one: use 😎 to keep your eyes safe.
What is right on this page? Nothing
What is wrong on this page? Take a 🍵 and follow me

Single JS file for the whole website

Even if you are a newbie coder you should never produce a file with 4005 lines of code. This file contains all Javascript functions used in the whole website.
This means that if you go to the home page you will load the JS script and only a small subset of this one will be useful.
Also, if you create a new page with this file as a dependency, you could have some weird behavior if you don't pay attention to HTML ids and classes. Even worse: you could need to add a very simple JS function for the new page and where you can place the new function? Into the app.js file obviously! 😆

Minification? What's this?

As you can see if you access the link above, you easily find that the file is not minified. Minification is a very important step since it reduces the file size of the script.
With 1 minute of work, I opened the first website found with a simple Google search: https://javascript-minifier.com/
The original file size is 146.5 kB and the minified one is 84.9 kB. 💣
Why reducing the size is soo important? I will not talk about it here but it should be clear to everyone developer. (If you don't have the answer: ask Google 😉)

Add comments to code

Comments are fundamental for a maintainable code since they can lead a new developer to understand why the code is here and how it works.
Pay attention: you too will be a new developer after a few months that you have written that code.
How comments are used in the file?
Comments with strange meaning: I don't know why they use these comments

//C6

Comments with dates: why? Git should be enough...

//28-11-2018

Comments with unused code: what should we do with this?

//$(menuContestuale).parent().attr('style', 'height:auto;');

Do not mix 🇮🇹 with 🇬🇧

One of the things that also a student should never do is to mix languages to write code. Instead, the file contains thousands of mixed language variables. Some variables are in English and others in Italian but also exist some variable like this: heightPadreFigli.

height: 🇬🇧
padre: 🇮🇹 -> it means father
figli: 🇮🇹 -> it means children

Naming

I'm not a naming stylist, I think it is an innate gift but I always try to find the right names. The app.js file has a long list of how to not choose names:
They use pippo, it's the Italian name of the Disney character: Goofy.

var pippo = window.location.href.replace('lang=EN', '').replace('lang=IT', '').replace('lang=ES', '').replace('lang=FR', '').replace('lang=DE', '');

They use prova that is test in English. We cannot understand what should represent.

var prova = "";

They use context2padre, ignoring the mix of language we should think that this variable contains the father of context2 var. No, it calls jQuery parent() function 4 times!

var context2padre = $(context2).parent().parent().parent().parent();

Unused variables

There are many unused variables, they should be removed, all the more reason that the file is very long.

function changeStatusHover(hover, selected, hiddenfieldhover, hiddenfieldselected) {
    var spanHover = $("#" + hover);
    var spanSelected = $("#" + selected);
    var spanHiddenHover = $("#" + hiddenfieldhover);
    var spanHiddenSelected = $("#" + hiddenfieldselected);

    if (!$(spanHiddenHover[0]).hasClass("changed")) {
        spanHover[0].setAttribute("style", spanHiddenSelected[0].value);
        $("#" + hiddenfieldhover).addClass("changed");
    }
    else {
        spanHover[0].setAttribute("style", spanHiddenHover[0].value);
        $("#" + hiddenfieldhover).removeClass("changed");
    }
}

The spanSelected is not used inside the function so it's not needed.

Some other 💩

There are many other shits inside this file, feel free to find these and add to comments section.

Conclusion

A simple conclusion: make the code open source and all the above 💩s, hopefully, will never exist. Or, at least, use Webpack.

Blog