DEV Community: Giacomo Lombardi

First time with Flutter: build a simple app

Giacomo Lombardi — Fri, 15 Jul 2022 17:19:07 +0000

I'm always excited to try new libraries/languages/tools (who don't be?) and some time ago I create my first app with Flutter: DoRPA.

DoRPA stands for Download Ricevute Portale Alloggiati.
Portale Alloggiati: it's the Police portal which turist's structures must send daily data about who is arrived.
Ricevute (receipt): daily PDF to download that certifies the right sending of data

TLDR: see the repo https://github.com/lomby92/download-ricevute-portale-alloggiati

📍 Context

Each turist's structure need to send data every day, o download the receipt from the Portale Alloggiati and to keep the receipt for 5 years. Also: receipts are available for 30 days in the Portale and then there is no way to download them.

Early this year, the Police has published the Web-Service to send data without login in the Portale, that was no so accessible and user-friendly. Many PMS added the possibility to send data but the staff member of the hotel still need to access in the Portale to download receipts.

🎉 Solution

Let's make a very simple app to download receipts!

🧑‍💻 Development

I started to follow the official guide, it's well done and easy to jump-in: https://docs.flutter.dev/get-started/install

After the first steps I choose the UI and how it should work:

login page: the user need to insert required data and non-sensitive data should be saved for subsequent logins
download page: one input for the date and a simple submit button

As you can see, the UX is very simple, following the initial purpose.

Internally, the app doesn't have too much logic. There is a service to handle HTTP calls to the Web-Service and to handle errors.

I develop the app under Linux but for now it's available only for Windows. The power of Flutter: add MacOS and Linux will be really easy, without change the app itself.

🖼️ UI

The login page:

The download page and the date picker:

📦 Release

I played with GitHub Actions and in few minutes I was able to create the package needed to release the app. And, it's free!

Release pipeline: https://github.com/lomby92/download-ricevute-portale-alloggiati/actions/workflows/release.yml
Release page: https://github.com/lomby92/download-ricevute-portale-alloggiati/releases

💭 Conclusion

It was my first app, even if it's simple it was a pleasure to build it and release it. There always some work to do but for now it works and it's used at least for one hotel (every day) and this is a win experience for me!

From WordPress to Gastby

Giacomo Lombardi — Thu, 30 Jun 2022 17:37:26 +0000

In the past I had to take over the management of the family hotel website, a site created with WordPress in the distant past (not from me) and never properly maintained.

In order to not reinvent the wheel, I chose to keep the existing technology stack, renewing it in terms of: UI, functionality and performance.
The results were poor, with a site soon becoming unmanageable and with an ever-growing fear of making significant changes.

The pinnacle was reached when we had to use a plugin to manage the restaurant menu in order to "simplify" the input from the end user. The plugin, inevitably, was very limited and could only expose a couple of UIs (not properly done).

After accumulating some experience with GatsbyJS (this is the second time I go into production with it) I decided to do a graphic makeover, a simplification of the UX and a better manageability of the contents.

📜 The menu is now generated from a simple JSON that dynamically creates the web page based on the contents. Changing the content has become too easy and the UI has been created ad-hoc (clean and readable), respecting the wishes of the owner.

⭐ Review ratings on major online portals are now displayed from a JSON file. Before, I had to create images by hand with the reported vote, at each change of vote. Now this process can be automated.
Bonus: the review collection is a component, reusable in the whole website avoiding copy-past errors.

📝 The writing of the articles has been converted to simple markdown files which then allow you to generate web pages according to a predefined template. The latter is essential because it allows you to have consistent and error-free pages. Again, it prevents to have strange copy-past errors of WordPress pages.

⚡ The performances, needless to say, shot up. This is because a static site builder offers many features: progressive image loading, page loading speed, and general optimizations.
Here you can find my article about progressive image loading.

💻 Let's not forget that as a developer the goal is always to optimize time and having created the site with Gatsby made it possible for me to have excellent security and speed in releases and updates, because I can try the site on my PC before make a release (automated of course). This thing on WordPress was unthinkable, I would have had to provide myself with a staging site, make the changes and then replicate them on production.

For the more curious, this is the site: https://www.hotelmodernoassisi.com/

Progressive image loading with Gatsby

Giacomo Lombardi — Fri, 12 Mar 2021 22:13:08 +0000

Images on web pages

If you think about a classic/typical website there are some components that surely you imagine like the navbar and the hero.
The hero component typically has a large image that could impacts on the website performances (see Google Web Vitals).

GatsbyJS

GatsbyJS is one of the most famous static site generator that belongs to the JAMStack movement.
It has many plugins (to do almost anything) and one of the most used is the gatsby-image plugin that shipped great performances to handle images, specially when used in combination with gatsby-plugin-sharp.
As GatsbyJS reached the 3rd version, they released a new plugin for images: gatsby-plugin-image.
We will not talk about these changes in this post since my intentions is to show only how Gatsby can automatically handle images preloading and how it's powerful.

Gatsby website configuration

The new gatsby-plugin-image used in combination with the gatsby-plugin-sharp can be really really powerful.
The only thing a website programmer or a content creator should think about is: upload an high quality image prior to the extension and the size.
The sharp plugin can be configured to automatically generate new file extensions that will be handled by the gatsby-plugin-image. Doing this, the client will use the best extension you provide and it will have great performances.

Image placeholders

Placeholders are important for two reasons:

score on tools like Google Lighthouse
UX

The plugin already ship the first point as:

To ensure that the layout does not jump around, a placeholder is displayed before the image loads

By default the placeholder is set to DOMINANT_COLOR but to have a better UX we should need to change it.

Now the question is: what it is the best choice?
There are few options: DOMINANT_COLOR, BLURRED, TRACED_SVG and NONE.

NONE

In my opinion you should not display NONE as placeholder because it could lead to have large empty spaces before the image is loaded. These spaces could be confusing for an user as at first sight seems that the layout is broken.

DOMINANT_COLOR

The default choice is too easy and generates a flat colored area that is not able to communicate what the image will contains.
NOTE: this is a personal opinion, maybe you could love this setting.

BLURRED

It shows the whole image but it is "animated" from blurred to sharpened, gradually. I like this solution because is like focusing a subject with a camera.

TRACED_SVG

It is the most complicated solution but is the one I really love because it generates a sequence of images that lead the user to think that there is a painter that is painting in front of the user: starting from the main shapes of the image.

How to choose

How I should choose between BLURRED and TRACED_SVG?
Even if I put some personal opinions in the previous section, what I really need is rational decision: based on data.

So, I produced a local build of the website and performed some checks with the Lighthouse tab of Google Chrome dev tools.

gatsby build && gatsby serve

I will report only the performance score as the image loading doesn't impact accessibility, best practice or SEO scores.

Results

BLURRED on mobile: 82
TRACED_SVG on mobile: 77
BLURRED on desktop: 99
TRACED_SVG on desktop: 98

Note: each score is calculated as the mean of 10 tests.
Note 2: GatsbyJS serve without HTTP/2 that lowers the score
Note 3: the website is a work in progress and there are other things to touch to have better performances

And the winner is... BLURRED!
It's clear that it has better performances on mobile than the other option.

gatsby-conf.js

module.exports = {
    plugins: [
        // ... some plugins before
        {
            resolve: `gatsby-plugin-sharp`,
            options: {
                defaults: {
                    formats: [
                        `auto`,
                        `webp`,
                        `avif`,
                    ],
                    quality: 100,
                    placeholder: "blurred",
                },
            },
        },
        // ... some plugins after
    ],
}

I choose "blurred" as placeholder but I also explicitly choose to generate AVIF and WEBP images to take advantage of the best possible compression available for the web.

Bonus

All images in the website will have the BLURRED placeholder by default but it can be overwritten if you need.
This is the case of the logo in the navbar: since the image contains only a bird with a background I have chosen to use a TRACED_SVG placeholder. In my opinion this solution is more artistic.

The result

Navbar logo: TRACED_SVG
Main image: BLURRED

Test an Electron built snap package

Giacomo Lombardi — Sat, 30 Jan 2021 12:55:38 +0000

Context

Electron is a very powerful tool to develop cross-platform apps. It also simplify the building process thanks to the electron-builder that targets Windows, MacOS and Linux.

Linux builds have many choices, rpm and deb are the most common ones as they target Debian and Red-Hat distros.

In 2014 Canonical started to develop a new package manager, snap that now is supported by all main distributions.

One release to rule them all

The electron-builder creates a .snap file, but it is not executable.

Test the .snap file

A snap file is basically a single compressed filesystem using SquashFS. In order to test it we need to mount/uncompress the file.

1) unpack the snap file: unsquashfs -d /tmp/ <folder that will be created> <.snap file>
2) move to the newly created folder with unpacked data
3) the app should be in the root, just execute it

Note: i choose /tmp folder but anyone can choose where to unpack the snap file

Try a snap file is really really easy but nowhere I found how to do it, hope that this short post will help you.

Maybe more posts about snap will follow

How to (not) develop a public web service

Giacomo Lombardi — Sat, 04 Apr 2020 16:53:55 +0000

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.