Vue 3: creazione di un componente con Typescript

Immagine di copertina

La versione alpha di Vue 3 è disponibile da qualche tempo ormai e nel momento in cui scrivo è stata appena rilasciata la versione alpha 8.

La nuova versione di Vue porterà con sé una valanga di novità e miglioramenti tra cui:

  • Composition API: è il nuovo metodo per definire i componenti con un approccio “function-based” ispirato agli hooks di React.
  • Portals: permettono di gestire il funzionamento di parti di DOM anche al di fuori dello scope componente Vue stesso.
  • Fragments: permettono di avere più elementi root all’interno dello stesso componente Vue.
  • Updated v-model-API: ora è possibile utilizzare più modelli.
  • Suspense: permette di renderizzare un componente come fallback nell’attesa che una condizione sia soddisfatta. (molto utili in ambito UX)
  • TypeScript: supporto completo a Typescript senza bisogno di librerie esterne.

Anche se la versione rilasciata è ancora in alpha e qualche componente potrebbe presentare bug e malfunzionamenti è già possibile scrivere un’applicazione per iniziare a giocare con le nuove funzionalità.

In questo articolo ho descritto la procedura che ho utilizzato per creare una nuova applicazione che utilizzi Vue 3 e Typescript.
Ok, bando alle ciance e inizia a configurare una nuova applicazione 🙂

Setup dell’ambiente

La prima cosa da fare è quella di spostarsi su una cartella e inizializzare un nuovo progetto con yarn (ma con npm sarebbe esattamente la stessa cosa) tramite il seguente comando:

yarn init

Una volta inizializzato il file package.json è devi aggiungere le dipendenze necessarie al progetto:

yarn add vue@3.0.0-alpha.8
yarn add --dev yarn vue-loader@v16.0.0-alpha.3 webpack-cli webpack webpack-dev-server typescript ts-loader @vue/compiler-sfc@v3.0.0-alpha.8

La prima cosa da fare è definire una configurazione per Webpack che permetta al codice Typescript e Vue di essere traspilato in javascript. Per farlo devi crear il file webpack.config.js nel seguente modo:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = (env = {}) => ({
  mode: env.prod ? 'production' : 'development',
  devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
  entry: path.resolve(__dirname, './src/main.ts'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue': '@vue/runtime-dom'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true
  }
})

Affinchè i file Typescript vengano correttamente compilati devi definire il file di configurazione tsconfig.json nel seguente modo:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noLib": false,
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015",
    "baseUrl": ".",
  },
  "exclude": [
    "./node_modules"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue",
  ],
}

Ora che hai finito di configurare Webpack e Typescript puoi iniziare ad occuparti dei file necessari al funzionamento del progetto.
La prima cosa da fare è inserire sul file package.json uno script che permetta di avviare comodamente il server web di Webpack aggiungendo la entry scripts come riportato di seguito:

 {
  
  //...
  // Dependencies
  //...

  "scripts": {
    "dev": "webpack-dev-server"
  }
}

A questo punto devi aggiungere alla root del progetto il file index.html che verrà servito al browser quando proverò a connettersi alla tua app Vue:

<h1>Hello Vue 3!</h1>

<script src="/dist/main.js"></script>

Infine, all’interno della cartella src, aggiungi un nuovo file main.ts per verificare che il compilatore di Typescript funzioni veramente:

console.log('Hello world from Typescript!');

NOTA: Affinchè Typescript sia in grado di importare i file *.vue è necessario definire all’interno della cartella src un nuovo file chiamato shims-vue.d.ts

declare module "*.vue" {
    import { defineComponent } from "vue";
    const Component: ReturnType<typeof defineComponent>;
    export default Component;
}

Se ha seguito il tutorial fino a qui dovresti trovarti con un progetto organizzato in questo modo:

├── index.html
├── package.json
├── tsconfig.json
├── webpack.config.js
├── src
│    ├── shims-vue.d.ts
│    └── main.ts

Per verificare che tutto funzioni avvia il server con il comando yarn dev e visita http://localhost:8080/

Verifica che tutto funzioni correttamente aprendo http://localhost:8080
Se hai seguito il post fino a questo punto, avviando il server Webpack, verrà servita la pagina index appena creata.

Creazione di un componente Vue

Ora che l’infrastruttura necessaria per utilizzare Vue 3 è finalmente pronta, puoi iniziare a creare il componente Vue vero e proprio.

Come prima cosa aggiungi all’interno della cartella src un nuovo file chiamato App.vue fatto nel seguente modo:

<template>
  <h2>This is a Vue 3 component!</h2>
  <button @click="increase">Clicked {{ count }} times.</button>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";

export default defineComponent({
  setup() {
    const count = ref(0)

    const increase = () => {
      count.value++
    }
    
    return {
      count,
      increase,
    }
  }
});
</script>

Come puoi vedere, rispetto alla versione precedente in cui per creare un nuovo componente Vue era necessario creare una classe Typescript ed estendere Vue facendo class MyClass extends Vue {}, ora Vue 3 mette a disposizione una funzione defineComponent().
All’interno della funzione defineComponent() si trova il metodo setup(props) che ha come primo parametro le props Siccome il componente App sarà di primo livello, non verranno passate props per cui ho omesso di passargliele.
Inoltre, come puoi vedere dal codice, qualunque cosa venga restituita dal metodo setup(), è poi accessible dal template.

Ora che il componente Vue è stato creato non ti rimane che importarlo all’interno del file main.ts nel seguente modo:

import {createApp} from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Anche in questo caso puoi vedere come rispetto alla versione precedente di Vue non sia più necessario inizializzare la nuova applicazione con const app = new Vue(….).$mount('#app') ma con Vue 3 sia possibile utilizzare direttamente la funzione createApp() ed il metodo mount() per agganciare l’applicazione ad un selettore del DOM.

Infine l’ultimo passaggio affinché Vue riesca ad agganciarsi al DOM correttamente è quello di aggiungere al file index.html un div con id app:

<h1>Hello Vue 3!</h1>

<div id="app"></div>

<script src="/dist/main.js"></script>

A questo punto, rilanciando l’applicazione con yarn dev potrai iniziare a giocare con il nuovo componente Vue appena creato.

Componente Vue in funzione
Il componente Vue all’opera

Next level

In questo post ti ho fatto vedere come creare un semplicissimo componente utilizzando la composition API di Vue 3 e Typescript. Ovviamente ho scalfito appena la punta dell’iceberg e ci sono mille altre funzionalità e novità da provare in Vue 3 ma già con questo semplice componente è possibile apprezzare il nuovo approccio “funzionale” con cui è possibile definire i componenti nella prossima release di Vue.

PS: Tutto il codice del progetto è disponibile su GitHub.


Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

La bufala della dottoressa Jiào Shenme Minzi

In questi giorni sta circolando questo messaggio su Whatsapp che suggerisce di utilizzare vitamina C e limone caldo per prevenire e curare dal coronovirus.

Ovviamente si tratta di una fake news. Sarebbe bello se bastassero un po’ di vitamine a curare il virus! Inoltre, se fosse vero, non si spiegherebbe come mai tutto il territorio italiano è stato marcato come zona rossa.

Per favore se ricevi questo messaggio non condividerlo a nessuno per evitare di diffondere ulteriormente fake news.

In questi giorni di quarantena sta girando di tutto sui social. Per evitare qualsiasi dubbio verifica sempre la fonte delle notizie. Se provengono da fonti autorevoli (ISS, portezione civile, ecc…) prendile pure in considerazione altrimenti ti consiglio vivamente di considerarle come fuffa.

Ciao, sono jiào Shenme Minzi dalla Cina, Ricercatrice della Facoltà di Scienze mediche. Università di Zanjan
Il virus Corona arriva in qualsiasi paese prima o poi, non c’è dubbio che molti paesi non hanno kit diagnostici o attrezzature.
Si prega di utilizzare quanto più vitamina C naturale possibile per rafforzare il sistema immunitario.
Non preoccuparti è un virus semplice da sbarazzare .
Il virus attualmente non contiene vaccini e trattamenti specifici sfortunatamente.
a causa della Mutazione genetica che l’ha resa molto pericoloso.
Questa malattia sembra essere causata dalla fusione del gene in un serpente e un pipistrello e ha acquisito la capacità di infettare i mammiferi, compresi gli umani.
È importante mantenere la calma e far girare questo messaggio.
il professor Chen Horin, CEO dell’ospedale militare di Pechino, ha dichiarato: “Le fette di limone in una tazza di acqua calda possono salvarti la vita”.
Anche se stai lavorando, dovresti dare un’occhiata a questo messaggio e trasmetterlo ad altri!
Il limone caldo può uccidere la proliferazione di questo virus nel nostro organismo !
Il limone tagliato in tre parti e messo in una tazza, quindi versa acqua calda e trasformalo in (acqua alcalina), bevilo ogni giorno sicuramente gioverà contro la proliferazione di questo virus.
I limoni caldi possono avere lo stesso effetto benefico delle medicine.
Il trattamento con questo estratto distrugge il virus e guarisce da questa influenza
Inoltre gli acidi e l’acido carbossilico nel succo di limone possono regolare l’ipertensione, proteggere le arterie strette, regolare la circolazione sanguigna e ridurre la coagulazione del sangue.
Dopo aver letto, dillo a qualcun altro e trasferiscilo alla persona che ami e prenditi cura della tua salute personale. Consiglio: Il professor Chen Horin nota che chiunque riceva questo messaggio è almeno garantito per salvare la vita a qualcuno …
Ho fatto il mio lavoro e spero che anche tu possa aiutarmi a svilupparlo”.
Lo hanno pubblicato in gruppi universitari.💪


Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Utilizzare Typescript in un progetto Symfony

Typescript logo

TypeScript è un linguaggio di programmazione open source sviluppato da Microsoft. Lo scopo con cui Microsoft ha creato Typescript è quello di estendere le funzionalità di Javascript (ECMAScript 6) aggiungendo il supporto ad una tipizzazione forte del linguaggio.

Grazie a questi vantaggi (e alla totale compatibilità con Javascript) Typescript ha raggiunto il terzo posto nella classifica dei linguaggi più apprezzati dagli utenti di StackOverflow distaccando di parecchie posizioni Javascript.

Classifica dei linguaggi più amati dagli utenti di StackOverflow
Classifica dei linguaggi più amati dagli utenti di StackOverflow

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.”

https://www.typescriptlang.org/

Come dice la definizione ufficiale di Microsoft, Typescript è un superset di Javascript.
Cosa vuol dire “superset di Javascript”? Sta a significare che Typescript non è altro che un “livello” posto al di sopra di Javascript che non ne altera il funzionamento di base ma ne estende le funzionalità.

Proprio a causa della sua natura di livello aggiuntivo rispetto a Javascript, Typescript non è interpretato nativamente dai browser ed è quindi necessario “tradurlo” in Javascript prima di poterlo utilizzare. Il processo di “traduzione” da Typescript a Javascript è chiamato traspilazione.

Ti mostro con un esempio pratico cosa avviene ad un semplice codice scritto in Typescript durante la fase di traspilazione:

const hello = (name: string) => {
    console.log('Hello, ' + name);
};
hello('Lorenzo');

Viene traspilato nel seguente codice Javascript:

var hello = function hello(name) {
  console.log('Hello, ' + name);
};
hello('Lorenzo');

Installazione

Una volta appurati i vantaggi derivanti dall’uso di Typescript sei pronto per installarlo e configurarlo all’interno di un’applicazione Symfony.

NOTA: Per seguire questo articolo devi avere un progetto Symfony con una configurazione di Webpack funzionante. Se non sai come fare ti consiglio di guardare i miei precedenti articoli su come creare un nuovo progetto Symfony e su come configurare Webpack.

La prima cosa da fare è installare i pacchetti necessari:

yarn add typescript
yarn add ts-loader --dev

Una volta che il download sarà terminato devi definire la configurazione che utilizzerà il compilatore di Typescript (tsc).
Per generare il file di configurazione con le opzioni di default puoi usare il comando:

./node_modules/typescript/bin/tsc --init

Con questo comando verrà aggiunto il filetsconfig.json alla root del progetto.

Affinché il compilatore funzioni correttamente la configurazione di default non è sufficiente.
E’ necessario specificare all’interno del file di configurazione quali cartelle del progetto devono essere compilate e quali no aggiungendo le voci include e exclude come descritto di seguito:

"compilerOptions": {
    // ... configurazione di default del compilatore
},
"include": [
    "./assets/js/**/*.ts"
],
"exclude": [
    "node_modules"
]

NOTA: Per saperne di più su tutte le configurazioni del compilatore Typescript ti rimando alla documentazione ufficiale.

A questo punto il compilatore è stato configurato e sei pronto per aggiungere il processo di compilazione di Typescript alla configurazione di Webpack.
Per farlo devi modificare il file webpack.config.js (contenuto nella root del progetto) nel seguente modo:

Encore.

    //... configurazioni di webpack encore

    .enableTypeScriptLoader()

    //... configurazioni di webpack encore

    // Aggiunta di un file Typescript da compilare
    .addEntry('js/myFirstTsScript', './assets/js/myFirstTsScript.ts')

Una volta avviata la compilazione con Webpack troverai all’interno del percorso public/build/js/myFirstTsScript.js il file traspilato.

Per poter utilizzare il file appena creato all’interno di un template TWIG puoi usare il seguente codice:

{% block javascripts %} 
 {{ encore_entry_script_tags('js/myFirstTsScript') }}
{% endblock %}

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Fonte
Fonte

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Millewin: Liberare spazio sull’hard disk pulendo la cartella pg_log

Cartella pg_log piena di file temporanei

ATTENZIONE: Prima di procedere accertarsi di aver effettuato un backup dai dati. La procedura descritta nell’articolo è sicura ma prevenire è sempre meglio che curare.

Nel corso del tempo, aggiornamento dopo aggiornamento, può capitare che la cartella C:\Program Files (x86)\Millewin\Dati\database_postgresql\pg_log (o C:\Programmi\Millewin\Dati\database_postgresql\pg_log nel caso di sistemi a 32bit) si riempa di file del tipo postgresql-01.log, postgresql-02.log, ecc … arrivando ad occupare svariate decine di gigabyte sull’hard disk del computer.

Tutti i file contenuti all’interno della cartella, essendo solo dei file di log, possono essere tranquillamente eliminati senza alcuna conseguenza sui dati dei pazienti.

Inoltre per evitare che il problema si ripresenti è necessario:

  • Aprire Centrale di Controllo,
  • Premere il menù Manutenzione,
  • Selezionare Schema Postgresql,
  • Premere Aggiorna schema postgres, se presente (Nel momento in cui scrivo la versione del database più aggiornata è la 13.02)

NOTA: L’operazione potrebbe durare alcuni secondi ma risolverà definitivamente il problema.

NOTA2: Nel caso di installazioni di rete l’aggiornamento dello schema va fatto sul server.

Nessun aggiornamento da fare (Versione del database 13.02)

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Aumentare il font-size di GRUB su schermi HiDPI

GRUB con font troppo piccolo

Gli schermi HighDPI sono ormai la norma per un ampia gamma di dispositivi. Grazie ad una maggiore densità dei pixel dello schermo è impossibile per l’occhio umano distinguere un pixel dall’altro incrementando notevolmente la qualità del testo e delle immagini mostrate.

Questo costante incremento della densità di pixel però ha come effetto collaterale il fatto che alcuni software necessitano di ottimizzazioni all’interfaccia grafica per evitare che la diminuzione della dimensione dei pixel riduca eccessivamente la dimensione degli elementi mostrati.

Uno dei software che risulta illeggibile sul mio Dell XPS a causa della dimensione microscopica del testo è il bootloader predefinito di Ubuntu: GRUB.

Fortunatamente per correggere questo problema è sufficiente modificare la dimensione del font utilizzato da GRUB.

Aggiungere il font alla partizione di boot

La prima cosa da fare è convertire il font da utilizzare in un formato (PFF2 font format) che GRUB sia in grado di impiegare all’avvio del sistema tramite il programma grub-mkfont.

sudo grub-mkfont --output=/boot/grub/fonts/DejaVuSansMono24.pf2 --size=24 /usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf

NOTA: in questo caso ho scelto di utilizzare il font DejaVuSansMono ma è possibile utilizzare uno qualunque dei font installati nel sistema. (Ad esempio potresti usare il font predefinito di Ubuntu /usr/share/fonts/truetype/ubuntu/UbuntuMono-R.ttf)
Nel mio caso ho scelto una dimensione del font pari a 24 ma puoi scegliere quella che meglio si adatta al tuo sistema.
Anche il nome del font di output può essere scelto liberamente ma in questo caso per chiarezza ho scelto di usare le convenzione: nome del font + dimensione.

Aggiungere il font alla configurazione di GRUB

Una volta che il font è stato convertito in un formato compatibile con GRUB è necessario modificare la configurazione in modo che venga utilizzato al posto di quello predefinito.
Per farlo bisogna aggiungere la riga GRUB_FONT=<path_font_da_utilizzare> al file /etc/default/grub con il comando:

sudo nano /etc/default/grub
Modifica del file /etc/default/grub
Modifica del file /etc/default/grub

Una volta terminate le modifiche bisogna fare in modo che siano applicate con il comando sudo update-grub.
A questo punto non resta che riavviare il sistema per vedere le modifiche applicate.

GRUB finalmente con testo leggibile

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Fonte A
Fonte B

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Firefox: Installare un certificato SSL self-signed da Ubuntu

Attenzione: potenziale rischio per la sicurezza

NOTE: if you want, you can read this tutorial in English 🎉

NOTA: la guida funziona anche su Fedora!

Durante lo sviluppo di applicazioni web può capitare di avere la necessità di creare e di utilizzare dei certificati SSL self-signed e cioè che non sono firmati da nessuna delle autorità di certificazione riconosciute.
In questi casi i browser mostrano un messaggio d’errore che avverte l’utente del fatto che il sito a cui si sta connettendo non ha un certificato riconosciuto e che questo potrebbe rappresentare un potenziale rischio per la sicurezza.

Per evitare che ad ogni connessione venga mostrato l’avviso di sicurezza è necessario fare in modo che il browser riconosca il nostro certificato come valido.

In questo post ti spiegherò come aggiungere (ed eventualmente rimuovere) un certificato SSL all’archivio utilizzato da Firefox in modo da non ricevere più alcun avviso di sicurezza dal browser.

NOTA: se utilizzi anche Google Chrome ricordati di seguire la procedura per aggiungere un certificato anche li.

Identificare la cartella con il profilo di Firefox

Quando utilizzi Firefox ogni modifica alle impostazioni, ai preferiti o alle estensioni viene memorizzata all’interno di una cartella speciale chiamata profile.
All’interno di questa cartella è custodito anche il database dei certificati considerati attendibili dal browser per cui, per poterne aggiungere uno, la prima cosa da fare è individuare la cartella in cui è memorizzato il tuo profilo.

Per farlo ti basta aprire Firefox e digitare nella barra degli indirizzi:

about:profiles
Pagina about:profiles di Firefox
about:profiles di Firefox

Il percorso del profilo è quello indicato dalla label Cartella radice(o Root Directory in inglese).

Ad esempio, nel mio caso il profilo si trova nella cartella: /home/lorenzo/.mozilla/firefox/s9kh79z8.default

Aggiungere il certificato

Per poter aggiungere un certificato SSL a Firefox è necessario installare il tool certutil.
Per installarlo puoi usare il seguente comando da terminale:

sudo apt install libnss3-tools

NOTA: a seconda della versione del sistema operativo questo pacchetto potrebbe essere già incluso all’interno della distribuzione in uso.

Una volta terminata l’installazione, per aggiungere un certificato ti basta utilizzare il seguente comando:

certutil -A -n "<CERT_NICKNAME>" -t "TC,," -i <PATH_FILE_CRT> -d sql:<PATH_PROFILO_FIREFOX>

Dove:

  • CERT_NICKNAME: indica l’alias da utilizzare per riconoscere il certificato nella lista di quelli installati
  • PATH_FILE_CRT: indica il path del file .crt da importare
  • PATH_PROFILO_FIREFOX: indica il path del profilo utilizzato su Firefox (individuato al punto precedente)

NOTA: Per sapere cosa significano i trustargs (la parte dopo il -t) puoi consultare la documentazione ufficiale.

Ad esempio nel mio caso il comando precedente si traduce in:

certutil -A -n "slope" -t "TC,," -i ~/Downloads/slope.crt -d sql:/home/lorenzo/.mozilla/firefox/s9kh79z8.default 

Verificare i certificati installati

Per verificare che il comando di aggiunta del certificato sia andato a buon fine o più in generale per visualizzare i certificati installati, puoi utilizzare il seguente comando:

 certutil -d sql:<PATH_PROFILO_FIREFOX> -L      

Rimuovere un certificato

Nel caso in cui tu abbia bisogno di rimuovere un certificato installato ti basta conoscere il suo nickname (che puoi vedere con il comando precedente) e digitare:

certutil  -D -n "<CERT_NICKNAME>"  -d sql:<PATH_PROFILO_FIREFOX>    

Conclusioni

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Impossibile aggiornare Ubuntu 16.04 alla release 18.04

Lo ammetto: in passato ho sempre avuto esperienze terribili con l’avanzamento di versione di Ubuntu per cui preferisco sempre aggiornare eseguendo un’installazione pulita.

Questa volta però non avevo proprio voglia di fare tutta la trafila necessaria a riconfigurare un nuovo sistema operativo da capo. Dovendo passare da una LTS alla successiva ed essendo il PC in questione utilizzato principalmente per la navigazione Internet ho deciso di tentare la sorte ed eseguire l’upgrade da Ubuntu 16.04 ad Ubuntu 18.04.

E’ andato tutto liscio? Non proprio…

Il problema

Mi appresto ad avviare l’aggiornamento all’ultima release rigorosamente da terminale tramite il comando:

sudo do-release-upgrade

Nel terminale le scritte cominciano a scorrere ed io attendo fiducioso che il processo mi chieda la conferma per l’installazione del nuovo aggiornamento… e invece compare il messaggio Ripristino dello stato originale del sistema

Verifica un nuovo rilascio di ubuntu
Scaricamento di:1 Firma dello strumento di avanzamento versione [819 B]        
Scaricamento di:2 Strumento di avanzamento versione [1.242 kB]                 
Recuperati 1.243 kB in 0s (0 B/s)                                              
autenticazione di «bionic.tar.gz» con «bionic.tar.gz.gpg» 
estrazione di «bionic.tar.gz»

Lettura della cache

Controllo gestore dei pacchetti
Lettura elenco dei pacchetti... Fatto
Generazione albero delle dipendenze        
Lettura informazioni sullo stato... Fatto 
Trovato http://it.archive.ubuntu.com/ubuntu xenial InRelease                   
Trovato http://it.archive.ubuntu.com/ubuntu xenial-updates InRelease           
Scaricamento di:1 http://security.ubuntu.com/ubuntu xenial-security InRelease [109 kB]
Trovato http://it.archive.ubuntu.com/ubuntu xenial-backports InRelease         
Recuperati 109 kB in 0s (0 B/s)                                                
Lettura elenco dei pacchetti... Fatto     
Generazione albero delle dipendenze        
Lettura informazioni sullo stato... Fatto 

Ripristino dello stato originale del sistema

Interruzione
Lettura elenco dei pacchetti... Fatto     
Generazione albero delle dipendenze        
Lettura informazioni sullo stato... Fatto 

Cosa diavolo può essere andato storto? E’ vero che è una vecchia versione di Ubuntu ma è anche vero che a parte 4-5 programmi non c’è quasi nulla di installato.
Un po’ sfiduciato allora decido di provare a vedere se nei log c’è qualche informazione utile che mi aiuti a capire cosa è andato storto.
Apro il file /var/log/dist-upgrade/DATA_TENTATIVO_UPGRADE/main.log e leggo:

2019-11-30 11:00:49,902 INFO Using config files '['./DistUpgrade.cfg.xenial']'
2019-11-30 11:00:49,903 INFO uname information: 'Linux lorenzo-Lenovo-G580 4.15.0-70-generic #79~16.04.1-Ubuntu SMP Tue Nov 12 14:01:10 UTC 2019 x86_64'
2019-11-30 11:00:50,269 INFO apt version: '1.2.32'
2019-11-30 11:00:50,269 INFO python version: '3.5.2 (default, Oct  8 2019, 13:06:37) 
[GCC 5.4.0 20160609]'
2019-11-30 11:00:50,273 INFO release-upgrader version '18.04.36' started
2019-11-30 11:00:50,283 INFO locale: 'it_IT' 'UTF-8'
2019-11-30 11:00:50,347 INFO screen could not be run
2019-11-30 11:00:50,537 DEBUG Using 'DistUpgradeViewText' view
2019-11-30 11:00:50,596 DEBUG enable dpkg --force-overwrite
2019-11-30 11:00:50,635 DEBUG creating statefile: '/var/log/dist-upgrade/apt-clone_system_state.tar.gz'
2019-11-30 11:00:55,723 DEBUG lsb-release: 'xenial'
2019-11-30 11:00:55,724 DEBUG _pythonSymlinkCheck run
2019-11-30 11:00:55,726 DEBUG openCache()
2019-11-30 11:00:55,726 DEBUG No such plugin directory: ./plugins
2019-11-30 11:00:55,726 DEBUG plugins for condition 'PreCacheOpen' are '[]'
2019-11-30 11:00:55,726 DEBUG plugins for condition 'bionicPreCacheOpen' are '[]'
2019-11-30 11:00:55,726 DEBUG plugins for condition 'from_xenialPreCacheOpen' are '[]'
2019-11-30 11:00:55,727 DEBUG quirks: running PreCacheOpen
2019-11-30 11:00:55,727 DEBUG running Quirks.PreCacheOpen
2019-11-30 11:00:56,354 DEBUG /openCache(), new cache size 90197
2019-11-30 11:00:56,354 DEBUG need_server_mode(): run in 'desktop' mode, (because of pkg 'ubuntu-desktop')
2019-11-30 11:00:56,354 DEBUG checkViewDepends()
2019-11-30 11:00:56,355 DEBUG running doUpdate() (showErrors=False)
2019-11-30 11:00:57,702 DEBUG openCache()
2019-11-30 11:00:58,373 DEBUG /openCache(), new cache size 90197
2019-11-30 11:00:58,373 DEBUG doPostInitialUpdate
2019-11-30 11:00:58,373 DEBUG plugins for condition 'PostInitialUpdate' are '[]'
2019-11-30 11:00:58,373 DEBUG plugins for condition 'bionicPostInitialUpdate' are '[]'
2019-11-30 11:00:58,373 DEBUG plugins for condition 'from_xenialPostInitialUpdate' are '[]'
2019-11-30 11:00:58,373 DEBUG quirks: running bionicPostInitialUpdate
2019-11-30 11:00:58,374 DEBUG running Quirks.bionicPostInitialUpdate
2019-11-30 11:01:03,393 DEBUG abort called
2019-11-30 11:01:03,394 DEBUG openCache()
2019-11-30 11:01:04,067 DEBUG /openCache(), new cache size 90197

Il problema sembra essere causato dopo che viene registrato running Quirks.bionicPostInitialUpdate.

Vuoi vedere che alla fine mi conveniva davvero fare un installazione pulita anche questa volta?

Decido di non darmi per vinto e provare a cercare su Google una possibile soluzione al problema.

Tra i vari risultati trovo una segnalazione di un bug di Ubuntu in cui viene indicato come colpevole snapd.

Provo a verificare se nel mio sistema il servizio snapd sia avviato correttamente con il comando:

sudo service snapd status

e a quanto pare effettivamente sembra esserci un problema:

nov 30 10:53:00 lorenzo-Lenovo-G580 systemd[1]: snapd.service: Failed with resul
nov 30 10:53:01 lorenzo-Lenovo-G580 systemd[1]: snapd.service: Service hold-off 
nov 30 10:53:01 lorenzo-Lenovo-G580 systemd[1]: Stopped Snappy daemon.
nov 30 10:53:01 lorenzo-Lenovo-G580 systemd[1]: snapd.service: Start request rep
nov 30 10:53:01 lorenzo-Lenovo-G580 systemd[1]: Failed to start Snappy daemon.
nov 30 10:53:01 lorenzo-Lenovo-G580 systemd[1]: snapd.service: Unit entered fail
nov 30 10:53:01 lorenzo-Lenovo-G580 systemd[1]: snapd.service: Triggering OnFail
nov 30 10:53:01 lorenzo-Lenovo-G580 systemd[1]: snapd.service: Failed with resul
nov 30 11:04:11 lorenzo-Lenovo-G580 systemd[1]: Stopped Snappy daemon.

La soluzione

Apparentemente il colpevole è il servizio snapd di Ubuntu che avendo qualche problema impedisce l’avanzamento di versione.
Decido quindi di tagliare la testa al toro e di provare una rimozione e reinstallazione del servizio con i comandi:

sudo apt purge snapd && sudo apt install snapd

Infine, rilanciando l’installazione con il comando sudo do-release-upgrade, l’installazione della nuova versione inizia correttamente e riesce a completarsi con successo.
Questo post è stato scritto direttamente dal PC appena aggiornato ad Ubuntu 18.04 🙂

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Gestione del front-end con Webpack su Symfony

Symfony logo e webpack logo

In questo esempio ti mostrerò come installare e configurare Webpack per la gestione del front-end di un applicazione Symfony.

PREREQUISITI: In questo articolo darò per scontato che sia stato creato un nuovo progetto utilizzando la Symfony CLI. Se non sai come fare puoi seguire questo tutorial.


Cosa è Webpack?

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand.

– pagina GitHub di Webpack

Webpack è un assmblatore di bundle. Ciò significa che il compito principale di Webpack è quello di elaborare un insieme di asset composto da file JS/CSS/Immagini combinandoli in dei pacchetti chiamati bundle.
Ad esempio può essere usato per creare due bundle a partire dai file Javascript di un’applicazione: uno per i file specifici della webapp e uno contenente i file delle librerie installate.

Webpack prende in ingresso un set di file JS/CSS/JPG e li combina in bundle
Webpack prende in ingresso un set di file JS/CSS/JPG e li combina in bundle

Webpack non si limita a impacchettare le risorse front-end del progetto ma può essere utilizzato per ottimizzare al massimo le performance di un’applicazione. Questa possibilità però viene fornita ad un costo: Webpack è molto complesso. Nonostante gli sviluppatori abbiano cercato di semplificare sempre più le impostazioni versione dopo versione, ad oggi rimane abbastanza difficile impostare Webpack al meglio e capire cosa stia accadendo dietro le quinte. Proprio per questo motivo gli sviluppatori di Symfony hanno pensato di semplificarne l’utilizzo creando un wrapper chiamato webpack-encore.

Aggiungere una nuova pagina

La prima cosa da fare per iniziare la tua avventura nel mondo frontend è creare una nuova pagina web. Per farlo è necessario seguire due passaggi:

  • Creare una rotta (route): una rotta rappresenta l’URL della pagina (es /about) che verrà mappato su di un’azione del controller,
  • Creare un controller: un controller è una classe PHP che prende in ingresso la richiesta del browser e restituisce in uscita la risposta alla richiesta.

Ai fini di questo tutorial immaginiamo di creare l’home page del sito che risponderà alla rotta /. Per farlo la prima cosa da fare è creare una nuova classe PHP chiamata IndexController.php all’interno della cartella della cartella src/Controller/.

<?php
declare(strict_types=1);

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class IndexController extends AbstractController
{
    /**
     * @Route(path="/")
     */
    public function index(): Response
    {
        return $this->render(
            'index.html.twig'
        );
    }
}

Il metodo index() appena creato non fa altro che accettare una richiesta GET alla rotta / (definita tramite l’annotazione @Route) e rispondere renderizzando il file index.html.twig che andrai a definire ora.

NOTA: Twig è il template engine predefinito usato da Symfony.

All’interno della cartella src\templates crea un nuovo file e chiamalo index.html.twig ed inserisci il seguente contenuto:

{% extends 'base.html.twig' %}

{% block body %}
  <h1>Hello world!</h1>
{% endblock %}

A questo punto, se tutto ha funzionato correttamente, navigando sul sito all’indirizzo http://127.0.0.1:8000 dovresti essere visualizzare la nuova pagina appena creata con il messaggio “Hello world”.

La prima pagina web creata con Symfony e Twig
La prima pagina web creata con Symfony e Twig

Installare Webpack

Arrivato a questo punto hai realizzato la prima pagina web dell’applicazione utilizzando esclusivamente l’HTML ma come ogni sviluppatore web sa, per creare una pagina accattivante è necessario adornarla con del buon stile CSS e renderla interattiva aggiungendo del Javascript.
Ed è qui che entra in gioco Webpack per la creazione dei bundle CSS e JS con il codice dell’applicazione.

NOTA: Come accennavo nell’introduzione, gli sviluppatori di Symfony hanno realizzato un wrapper per Webpack che ne semplifica di gran lunga la configurazione chiamato webpack-encore. In questo tutorial farò sempre riferimento a quello ma è possibile adattare tutti i concetti riportati anche alla configurazione di Webpack “standard”.

La prima cosa da fare è ovviamente quella di installare sia il bundle PHP (tramite composer) che la libreria Javascript (tramite yarn) utilizzando i seguenti comandi:

 composer require symfony/webpack-encore-bundle
 yarn add @symfony/webpack-encore --dev

Al termine dell’installazione verrà creato automaticamente il file di configurazione di Webpack chiamato webpack.config.js e una cartella assets che andrà a contenere tutti i file CSS e JS del progetto.

La configurazione di default di Webpack

Analizziamo ora la configurazione di default webpack.config.js appena generata:

var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

Vediamo nel dettaglio cosa vanno ad impostare le istruzioni contenute in questo file di configurazione:

  • La prima cosa che Webpack va a controllare (righe 5-6) è l’ambiente da utilizzare per costruire i bundle. Nel caso in cui nessun ambiente sia stato impostato viene assunto di default che la build sia stata lanciata in modalità dev. Questo controllo viene fatto perché a seconda dell’ambiente utilizzato per lanciare la costruzione dei bundle vengono eseguite delle ottimizzazioni diverse (ad esempio il codice Javascript dell’ambiente di produzione sarà minificato mentre quello in sviluppo no).
  • Alle righe 11 e 13 viene indicato a Webpack quali sono le cartelle da utilizzare come output del suo processo di pacchettizzazione.
  • Alla riga 26 inizia il vero utilizzo di Webpack. In particolare con il comando addEntry() viene indicato a Webpack di generare un nuovo pacchetto a partire dal file indicato come argomento della funzione.
  • Alla riga 31 abbiamo la prima ottimizzazione che Webpack andrà ad eseguire sul nostro codice: splitEntryChunks() (vedi sezione dedicata)
  • Alla riga 35 abbiamo ancora un’altra ottimizzazione: enableSingleRuntimeChunk() (vedi sezione dedicata).
  • Alle righe 44 e 45 abbiamo ancora delle configurazioni di Webpack per le quali chiediamo esplicitamente di pulire la cartella di output ogni volta prima della build (cleanupOutputBeforeBuild())e di utilizzare le notifiche del sistema per informarci sullo stato di avanzamento della build (enableBuildNotifications()).
  • Le righe 46 e 48 indicano a Webpack di creare e servire i file map quando l’ambiente è in development e di aggiungere un numero di versione ai bundle generati quando invece l’ambiente è in produzione.
  • Infine alla riga 51 viene aggiunta una configurazione specifica per Babel. In particolare viene indicato a Babel di importare esclusivamente le polyfill che sono necessarie per il corretto funzionamento del codice Javascript scritto (useBuiltIns: 'usage‘) e che la versione di corejs installata è la 3 (corejs: 3).

All’interno della configurazione di default di Webpack sono abilitate le opzioni che comunemente vengono utilizzate nello sviluppo di un applicazione web con Symfony. Tuttavia già all’interno del file sono presenti altre righe di codice commentate che illustrano come sia possibile espandere il file di configurazione di default per aggiungere funzionalità extra (come la traspilazione Typescript o dei file Sass)

Ottimizzazione: SingleRuntimeChunk

Di default i moduli importati dagli script sono inizializzati una volta per ogni entry-point.

Questo vuol dire che se all’interno della stessa pagina vengono importati i due file scriptA.js e scriptB.js ed entrambi importano jQuery allora di quest’ultimo verranno inizializzate due istanze separate per i due script. Di conseguenza, se il primo script emette un evento all’interno della propria istanza jQuery allora questo non verrà intercettato dal secondo script (e viceversa).

Abilitando il SingleRuntimeChunk con l’istruzione enableSingleRuntimeChunk() viene creato un asset aggiuntivo chiamato runtime.js che, come suggerisce il nome, contiene il codice necessario ad inizializzare il runtime di Webpack.
Poiché in questo modo tutti i moduli vengono inizializzati da questo script allora tutti gli script importati all’interno della stessa pagina web condivideranno le stesse istanze dei moduli.
Quindi, tornando all’esempio con scriptA.js e scriptB.js all’interno della stessa pagina questa volta entrambi gli script si riferiranno alla medesima istanza di jQuery.

ATTENZIONE: abilitare o disabilitare il SingleRuntimeChunk è una scelta progettuale molto importante. In generale può essere una buna idea lasciarlo abilitato in modo che se in una pagina sono presenti più script questi condividano le stesse istanze dei moduli in comune. Tuttavia se stai realizzando una single-page application allora avere un runtime condiviso può essere un overhead non necessario.

NOTA PERSONALE: se nella tua applicazione utilizzi dei modali il cui contenuto viene caricato tramite AJAX e che al loro interno importano degli script allora potrebbe venire istanziato un nuovo runtime! Questo potrebbe portare all’impossibilità di comunicare tra il modale e il contenuto della pagina sottostante.

Per saperne di più sul single runtime chunk e per approfondire le opzioni di configurazione puoi consultare la pagina con la documentazione ufficiale.

Ottimizzazione: SplitEntryChunks

Abilitando splitEntryChunks() Webpack si occuperà di frammentare gli script in chunk di dimensioni minori ottimizzando le risorse necessarie al browser per valutare ed interpretare gli script.
Di default Webpack applicherà le seguenti regole per spezzare gli script in chunk:

  • I nuovi chunk devono essere condivisi tra più script oppure provengono dalla cartella node_modules;
  • Il nuovo chunk ha una dimensione maggiore di 30Kb (prima della compressione);
  • Il numero di richieste parallele da fare per scaricare i chunk on-demand è minore o uguale di 5;
  • Il numero di richieste parallele da fare per scaricare tutti i chunk necessari al rendering iniziale della pagina è minore o uguale di 3.

Per saperne di più sullo splitting dei chunks puoi consultare la pagina della documentazione ufficiale.

Creazione dei bundle

Una volta che Webpack è installato puoi iniziare a creare i bundle a partire dai tuoi script con il seguente comando da terminale:

yarn encore dev

Una volta che il comando sarà terminato, all’interno della cartella /public/build troverai i bundle appena realizzati.

Aggiunta di uno script

Arrivati a questo punto dovresti avere Webpack configurato e pronto per l’uso. Per verificare che tutto funzioni correttamente ti mostrerò come aggiungere uno script Javascript che al click di un bottone apra un alert del browser.

Come prima cosa aggiungi un bottone all’interno della pagina creata allo step precedente:

{% extends 'base.html.twig' %}

{% block body %}
  <h1>Hello world!</h1>
  <div>
    <button id="clickMeButton">Click me</button>
  </div>
{% endblock %}

Vai ora ad aggiungere un nuovo file Javascript chiamato homepage.js all’interno della cartella assets/js come mostrato di seguito:

const clickMeButton = document.getElementById('clickMeButton');

clickMeButton.addEventListener('click', function () {
  alert('Bottone clickato!');
});

Aggiungiamo il file appena creato a quelli che Webpack andrà ad analizzare per l’impacchettamento all’interno del bundle

.addEntry('homepage', './assets/js/homepage.js')

Aggiungi il nuovo script alla pagina appena creata

{% block javascripts %}
    {{ encore_entry_script_tags('homepage') }}
{% endblock %}

A questo punto ricompilando gli asset con Webpack (comando: yarn encore dev) e ricaricando la pagina, al click del bottone verrà mostrato l’alert appena creato.

Aggiunta di Bootstrap

Per dare un po’ di stile alla pagina aggiungi un framework CSS come Bootstrap.

 yarn add bootstrap

Aggiungi a Webpack una nuova entry:

.addStyleEntry('bootstrap', './node_modules/bootstrap/dist/css/bootstrap.css')

importa nella pagina il nuovo asset e aggiungi un po’ di stile

{% extends 'base.html.twig' %}

{% block body %}
  <div class="container">
    <h1>Hello world!</h1>
    <div class="row">
      <div class="col">
        <button id="clickMeButton" class="btn btn-primary">Click me</button>
      </div>
    </div>
  </div>

{% endblock %}

{% block stylesheets %}
  {{ encore_entry_link_tags('bootstrap') }}
{% endblock %}

{% block javascripts %}
  {{ encore_entry_script_tags('homepage') }}
{% endblock %}
Pagina iniziale con bootstrap installato
Ecco la nostra pagina web con lo stile di Bootstrap applicato

Conclusioni

Sviluppare un applicazione web moderna e accattivante richiede l’integrazione di diverse conoscenze e di diversi strumenti di sviluppo che permettano di trarre il meglio dal mondo back-end e da quello front-end. Proprio per questo gli sviluppatori di Symfony hanno realizzato uno strumento come webpack-encore in grado di semplificare al massimo la gestione degli asset javascript e CSS.

Puoi scaricare il codice sorgente del progetto direttamente da GitHub:

https://github.com/lmillucci/symfony-webpack-example


Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram o a seguirmi su Twitter per non perderti nemmeno un post del mio blog.

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Installare Python 3.8 su Ubuntu 18.04

E’ stato da poco rilasciata la versione 3.8 di Python! 🎉
Per sapere le novità introdotte dal nuovo update ti lascio il link all’articolo ufficiale della documentazione.

In questo post ti mostro come installarlo subito su Ubuntu 18.04 sfruttando un PPA aggiuntivo.

Installazione

Per installare subito l’ultimissima versione di python sul tuo sistema apri il terminale e digita i seguenti comandi:

sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt update
sudo apt install python3.8

NOTA: dallo stesso repository puoi scaricare anche le versioni 3.1, 3.5 e 3.7 di python (la versione 3.6 è quella fornita di default da Ubuntu)

Non appena l’installazione sarà finita potrai utilizzare la nuovissima versione di python utilizzando il comando python3.8

Python 3.8 installato
Python 3.8 installato

Conclusioni

Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Abilitare Google Authenticator sull’account PayPal

Nel campo dell’informatica per autenticazione si intende il processo attraverso il quale un software verifica (nel modo più affidabile possibile) l’identità dell’utente che vuole accedere ad un servizio.
In particolare, nel mondo della sicurezza informatica esistono 3 diversi fattori con i quali un utente può verificare la propria identità per autenticarsi:

  • Qualcosa che so: è il fattore più comune, è basato sul fatto che solo noi conosciamo la “parola d’ordine” che ci identifica. Appartengono a questa categoria le password ed i PIN di accesso.
  • Qualcosa che ho: questo fattore si riferisce ad un oggetto che solo io posso avere. Appartengono a questa categoria le smartcard ed i dispositivi che ti assegnano le banche per generare i pin (TOTP).
  • Qualcosa che sono: questo è il fattore di sicurezza considerato più sicuro in quanto fa riferimento ai nostri dati biologici. Appartengono a questa categoria la scansione delle impronte digitali e il riconoscimento del volto.

Fino a poco tempo fa per autenticarsi con buona sicurezza era sufficiente un autenticazione a singolo fattore. Per registrarsi ad un servizio bastava creare un username ed una password (qualcosa che so) ed il gioco era fatto.

Ma con il recente aumento degli attacchi informatici volti a rubare i database con le credenziali degli utenti è diventato evidente che un singolo fattore di autenticazione non è più sufficiente a proteggere un account. Giusto per riportare qualche numero, è notizia di quest’anno il furto di 773 milioni di email e 21 milioni di password.
E’ evidente che chi utilizza la stessa coppia di username e password per l’accesso a più servizi sia particolarmente vulnerabile a questo tipo di attacchi. Basta che un malintenzionato buchi quel vecchio forum a cui ti sei dimenticato di esserti iscritto per poter ottenere le tue credenziali e autenticarsi a tutti gli altri servizi che utilizzi senza alcuno sforzo.
Proprio per questo motivo sempre più aziende del mondo web hanno iniziato a richiedere un secondo fattore per l’autenticazione.

Tra i servizi che supportano l’autenticazione a due fattori ovviamente non poteva mancare PayPal. Fino a poco tempo fa però, il secondo fattore di autenticazione supportato da PayPal era l’SMS da ricevere sul proprio numero di telefono (qualcosa che ho). Sebbene questo sistema sia sicuramente meglio rispetto all’utilizzo di un singolo fattore è comunque considerato un meccanismo di autenticazione poco sicuro e molto scomodo da usare.
Infatti da assiduo utilizzatore di PayPal molte volte mi è capitato che l’SMS con il codice non arrivasse mai e fosse necessario richiederlo una seconda o addirittura una terza volta prima di poter effettuare un pagamento facendomi perdere una quantità ingente di tempo.

Finalmente però a PayPal hanno aggiunto la possibilità di generare i codice direttamente dal telefono dell’utente utilizzando un applicazione come Google Authenticator o Microsoft Authenticator.

Abilitare Google Authenticator come secondo fattore

La prima cosa da fare per poter abilitare Google Authenticator come secondo fattore di autenticazione è accedere al tuo profilo PayPal e aprire la pagina delle impostazioni tramite l’icona con l’ingranaggio in alto a destra.

Dashboard di PayPal da cui andare a modificare le impostazioni di sicurezza dell'account
Dalla pagina iniziale del profilo apri le impostazioni tramite l’ingranaggio in alto a destra

Nella pagina delle impostazioni devi selezionare la scheda Sicurezza e premere sul link Attiva (o Modifica nel caso in cui avessi avuto già attiva l’autenticazione a 2 fattori tramite SMS) della sezione Verifica a 2 passaggi

Pagina di configurazione della sicurezza di PayPal
Spostati nella scheda sicurezza e abilita (o modifica) la verifica a 2 passaggi

Se avevi già l’SMS come secondo fattore devi cercare la voce Aggiungi un dispositivo per poter aggiungere Google Authenticator (PayPal avrebbe anche potuto sforzarsi un po’ nel trovare un messaggio più significativo)

Se avevi l'SMS come secondo fattore di autenticazione devi trovare il link "Aggiungi un dispositivo"
Se avevi l’SMS come secondo fattore di autenticazione devi trovare il link “Aggiungi un dispositivo”

Ora PayPal ci chiederà se vogliamo aggiungere un nuovo numero di telefono per la ricezione degli SMS oppure se vogliamo utilizzare un applicazione di autenticazione. Ovviamente per poter aggiungere Google Authenticator dovrai scegliere di utilizzare un applicazione.

Aggiungi un app di autenticazione al tuo account PayPal
Aggiungi un’app come secondo fattore di autenticazione

A questo punto PayPal ti mostrerà il codice QR da scansionare con Google Authenticator per poter generare i codici temporanei da usare per l’accesso al tuo account.

Abilita il secondo fattore di autenticazione scansionande il QR code
Scansiona il codice QR con Google Authenticator per poter abilitare il secondo fattore di autenticazione

NOTA: a questo punto se hai un password manager o un luogo sicuro dove custodire le password ti consiglio caldamente di salvarti il codice QR o il PIN segreto che genera PayPal. In questo modo, se dovessi perdere o rompere il telefono su cui hai Google Authenticator potrai comunque accedere agevolmente al tuo account PayPal.

Conclusioni

Visto che l’account PayPal è un bersaglio molto goloso per un potenziale malintenzionato, se non l’hai ancora fatto, ti consiglio caldamente di attivare l’autenticazione a due fattori.
Inoltre ti consiglio di verificare se il tuo account email è stato coinvolto in qualche furto di dati inserendo il tuo indirizzo email all’interno di questo servizio offerto dai creatori di Firefox.


Se questo post ti è stato utile puoi farmelo sapere con un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram o a seguirmi su Twitter per non perderti nemmeno un post del mio blog.

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!