How to (not) develop a public web service
Tags: javascript, webdev, covid19, opensource
Published: 2020-04-04 16:53:55

## 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](https://www.ilpost.it/2020/04/01/malfunzionamenti-sito-inps/).
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 :sunglasses: to keep your eyes safe](https://www.inps.it/nuovoportaleinps/modelliNuovo/assets/js/app.js).
_What is right on this page?_ **Nothing**
_What is wrong on this page?_ **Take a :tea: 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! :laughing:


### 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*. :bomb:
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 :wink:)


### 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 :it: with :uk:
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: :uk:
- padre: :it: -> it means father
- figli: :it: -> 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 :shit:
There are many other shits inside this file, feel free to find these and add to comments section.
![alt text for accessibility](https://i.gyazo.com/80c4db126d4035bd31af018bb848f991.png)

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