Front End da Zero: HTML, CSS, Javascript, GIT e NodeJS.

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

In questo appuntamento analizzeremo JavaScript. Vedremo le sue proprietà e qual è il suo obiettivo.

Andiamo a studiare i primi tipi di dati di JavaScript: i Primitivi. Vediamo quali sono, le loro proprietà e come utilizzarli.

Vediamo un altro tipo di dato in JavaScript: gli Oggetti. Ancora una volta analizziamone le proprietà, scoprendo come si utilizzano per non incappare in errori.

La definizione dei nomi dei dati è un passo importante all'interno della programmazione. Vediamo quale struttura seguire per una corretta scelta dei nomi da assegnare.

Quante variabili esistono? Quali sono? E le loro proprietà? Scopriamolo insieme in questo nuovo episodio.

Le funzioni in JavaScript sono un pilastro fondamentale. Sei sicuro di conoscerle tutte? E sai in cosa differiscono? Andiamo a scoprire insieme!

Andiamo a vedere insieme cosa s'intende per scope e cosa indica il contesto. Due nozioni che formano la base della nostra conoscenza di JavaScript.

Conoscere come viene eseguito il codice in fase di runtime ci aiuta a capire come programmare in modo più efficiente. Per questo andremo a studiare l'hoisting.

Esistono tantissimi operatori per effettuare concatenazioni, operazioni aritmetiche e tant'altro. Vediamoli in questo appuntamento.

Un codice senza condizioni non è un codice. Moltissime funzione hanno all'interno almeno una condizione. Ma siamo sicuri di sapere quante ne esistono e come scegliere la più corretta?

Le collezioni indicizzate sono una delle strutture dati più utilizzate. Andiamo a scoprire quali sono e come utilizzarle.

Il JSON, ovvero JavaScript Object Notation, è un'altra struttura dati molto importante. Rappresenta il pilastro della programmazione a Oggetti e vediamo quali proprietà, metodi e struttura può avere.

Un buon livello di programmazione si raggiunge senza dubbio gestendo correttamente gli errori. Le applicazioni possono rompersi in fase di utilizzo e sicuramente una corretta segnalazione aiuta ad alleviare il trauma all'utente.

La gestione delle date è un'operazione non poco facile. Tante variabili come fusi orari, lingue, formattazione. Vediamo insieme come utilizzare al meglio la Date API.

Sapevi che anche il Front End poteva immagazzinare i dati lato client? In realtà tutto ciò è possibile attraverso local storage, session storage, cookies e persino con un database. Vediamo insieme le loro proprietà.

L'applicazione sta generando un errore. Più esattamente, ha un bug! Niente paura, andiamo a scoprire come scovarlo ed eliminarlo!

In questa prima parte pratica vedremo come creare le prime funzionalità della piattaforma per aggiungere le operazioni all'interno del portafoglio.

Completiamo il capitolo aggiungendo le rimanenti operazioni come rimozione e ricerca.

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

NodeJS e NPM sono due tecnologie importantissime in questo campo. Anche se NodeJS è un ambiente lato server, vedremo come utilizzarlo attraverso NPM, per l'installazione delle dipendenze del progetto.

Andiamo a mettere in pratica ciò che abbiamo imparato. Creiamo il package.json e definiamo le proprietà del progetto.

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

Ci sono processi tediosi che eseguiti manualmente ci fanno perdere tempo. Ecco perché esistono i task runner. Vediamo cosa sono e perché migliorano la velocità di sviluppo. Tra questi analizzeremo Gulp!

Creare il pacchetto finale dell'applicazione, il cosiddetto bundle, è un passo obbligatorio. Studiamo le diverse strategie di bundling, come creare quindi le connessioni tra i moduli dell'applicazione. Infine, utilizziamo Browserify per mettere in pratica le nostre conoscenze.

In questa prima parte installiamo Gulp e implementiamo i primi processi automatizzati della piattaforma.

Mettiamo in pratica le nostre conoscenze con Browserify. Vediamo come creare le connessioni tra moduli e trasformiamo ancora una volta l'applicazione!

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

Una piattaforma che non abbia un poco di test è un'applicazione che molto probabilmente farà acqua da tutte le parti. Vediamo quali sono le principali aree di testing insieme!

Esistono diverse strategie per implementare correttamente un flusso di tests: il TDD, il BDD e il ATDD. Non li conosci? Non preoccuparti, l'episodio è stato fatto per esplorarli insieme!

Adesso passiamo alla pratica con Jest. Si definisce come un framework di testing e attualmente è in cima alle classifiche. Lo utilizzeremo all'interno del progetto e questo episodio ci aiuterà a comprenderlo al meglio.

Andiamo ad implementare i primi test unitari con Jest!

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

L'HTML è il linguaggio di markup che nel Front End ci permette di creare il layout di una web app. Per molti è difficile leggerlo ma ti farò vedere quanto invece sia semplice e intuitivo.

Con il CSS diamo quel tocco di stile agli elementi che rendono l'esperienza dell'utente più appagante. Ci sono tantissime regole e noi studieremo le basi per comprendere al meglio come scrivere al meglio un foglio di stile.

Adesso dedichiamoci alla responsiveness. Vediamo come rendere una pagina flessibile per ogni tipo di dispositivo attraverso il Flex Design.

Ti sei mai chiesto come funziona un browser? Tutti sanno che serve per navigare ma pochi sanno cosa si cela dietro. Andiamo a scoprire insieme il Critical Rendering Path, per esempio, e tante altre cose.

Mettiamo in pratica le conoscenze acquisite nel campo dell'HTML, creando il primo layout dell'interfaccia.

Passiamo alla creazione degli stili più avanzati con il CSS!

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

Accediamo al DOM, aggiungiamo, modifichiamo o rimuoviamo gli elementi. Analizziamo come rendere più efficiente una ricerca. Questo e tant'altro in questo episodio.

Vediamo come gestire gli eventi e cosa s'intende per Event Bubbling. Scopriremo quali eventi esistono all'interno del DOM e come prendere il controllo.

Sai cos'è il DOM traversing? È esattamente l'arte di ricercare un elemento e navigare all'interno del DOM. Sempre nel modo più efficiente!

Dedichiamoci all'integrazione del codice di JavaScript con l'HTML. Infatti andremo ad analizzare come accedere al DOM e inserire i primi eventi. Leggeremo i dati dai moduli e creeremo le prime operazioni.

Passiamo alla creazione della lista delle operazioni da mostrare all'interno della tabella. Implementiamo la ricerca di un'operazione.

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

Cos'è ECMAScript? Sicuramente ne avrai sentito parlare, ma hai capito la differenza che c'è con JavaScript? Dopo questo appuntamento, sicuramente lo saprai! E inizieremo anche il nostro viaggio con ES6, che ci porterà verso ES11.

Analizziamo qui quali sono le principali funzionalità introdotte da ES7 e ES8.

Analizziamo qui quali sono le principali funzionalità introdotte da ES9 e ES10.

Analizziamo qui quali sono le principali funzionalità introdotte da ES11.

Non tutti i browser supportano le ultime versioni di ECMAScript. Quindi, come posso rendere la mia piattaforma compatibile con i browser che non hanno compatibilità? Babel ci aiuterà in questo attraverso il processo di traspilazione.

I Design Patterns sono soluzioni a problemi ricorrenti all'interno delle applicazioni. Noi ne andremo ad analizzare alcuni dei più utilizzati e vedremo la loro implementazione in JavaScript.

Dal nome suggerisce un gioco ma se non lo conosci dovresti preoccuparti. È il modello di concorrenza di JavaScript e apprenderlo è fondamentale per migliorare le proprie capacità di programmazione.

I motori di JavaScript permettono il parsing corretto del codice e la sua esecuzione. Inoltre, alcuni aiutano il l'applicazione ad essere più veloce. Scopriamone alcuni!

Andiamo a studiare ESLint, ovvero il linter creato per JavaScript per aiutare i poveri sviluppatori a scrivere un codice che segua della regole ben precise. Inoltre, con l'aiuto del Prettier, vedremo come delegare la tediosa operazione di formattazione a un sistema automatizzato.

Iniziamo con la trasformazione del codice. In questo episodio andremo a vedere Babel e alcune funzionalità di ES6-11.

Continuiamo con la trasformazione del codice con ESLint, Prettier e i Git Hooks!

Tante novità per il nostro codice: design patterns, test end to end e jsdoc.

Qui ti spiegherò brevemente quali argomenti affronteremo in questo capitolo.

Conosci come funzionano davvero le chiamate HTTP? Sai prima di tutto cos'è l'HTTP? Andiamolo a vedere insieme!

Adesso spostiamoci sulla pratica con la API nativa di JavaScript per effettuare le chiamate HTTP: la XMLHTTPRequest.

Una sessione impegnativa per creare un server in NodeJS e aggiornare l'applicazione con la libreria axios per chiamare la API REST che creeremo.

Aggiorniamo in questa ultima parte i test end to end, andando a creare i mock per le chiamate axios.

L'applicazione è stata aggiornata dopo l'ultimo incontro, come detto nel precedente video.
Cosa è stato migliorato?

• test unitari e e2e con axios;

• file di Gulp aggiornati con le ultime novità viste di ECMAScript;

• nuovo loader quando caricano le operazioni, vengono aggiunte o rimosse.