Eccoci.

Buonasera a tutti.

Eccoci qua.

Aspettiamo qualche minuto che arrivino un po' tutti e poi iniziamo un po' di di lei affinché si propaghi un po' la notifica su tutti i vari canali.

Quindi aspettiamo un attimo e poi iniziamo.

Allora, innanzitutto, prima di presentarmi prima di iniziare la sessione, chiedo un po'.

Chiedo un po' alla chat.

Se siete programmatori, front-end backend se avete già avuto modo di usare astro quindi intanto dammi un po' qualche informazione su di voi così mi rendo conto di chi mi sta seguendo.

Intanto chiedo se è possibile avere lo schermo condiviso perfetto, grazie mille e ho qui la homepage di Astro che la tecnologia di cui parleremo questa questa sera chiedo anch'io confermo se in esse si sente e si vede tutto bene.

Ok, vediamo un po' di feedback in chat e poi iniziamo allora Allora innanzitutto oggi parliamo di disastro, quindi da un po' di contesto.

Prima di iniziare la vera e propria presentazione che uno strumento che ci permetterà di creare siti web super performanti.

Possiamo utilizzare altri mille strumenti possiamo crearli in html, vanilla javascript potremmo usare next.

Abbiamo diversi strumenti come gatsby ci sono tantissimi framework attualmente che ci permettono di arrivare allo stesso risultato.

Io uso a Strom e oggi vi parlo di astro semplicemente perché la tecnologia che mi ha entusiasmato di più negli ultimi mesi l'ho anche utilizzata nel nel mio sito web e quindi tra l'altro avete anche poi uno showcase che potete anche guardare per vedere poi come effettivamente funziona in produzione.

Insomma avete comunque un caso studio.

Intanto vedo qualche commento insomma di fronte thunder in chat che non hanno mai utilizzato astro front corri act tra l'altro luca vedo che usa che t' e vedremo anche un esempio di integrazione di riaggancia stroh c'è un'altra cosa molto molto interessante la possibilità di fare un mash-up di tecnologia all'interno della stessa pagina.

Io direi che possiamo funesta causato astro benissimo benissimo io direi che possiamo a questo punto iniziare con le slide e possiamo quindi iniziare a capire un po'.

Eccolo qua.

Dovreste vederle.

Mi presento velocemente vediamo ancora qualche commentino angolare e ora sto vedendo che Ok, bene, bene.

Dai, siamo sulla stessa sulla stessa linea insomma, tutti fraintendere o full stack.

Mi chiamo fabio biondi.

Mi occupo di formazione front-end principalmente su tutto quello che ruota attorno al mondo angolare è react ma in realtà appunto sono qui a parlare di astro l'utilizzo comunque tantissime altre tecnologie come svelti t' quick di recente next ci sono tantissimi nuovi framework e quindi un po' lo zampino un po' ovunque ah! Ad ogni modo mi occupo di formazione trovate tantissimi video sul mio canale youtube quindi mi occupo di creazione contenuti e appunto sul mio sito web fabio biondi punto deve trovate poi tutte le informazioni su di me e anche link diverse community che gestisco ovviamente totalmente gratuite.

Allora oggi cosa vedremo oggi? Parleremo quindi di astro e creeremo una landing page super performante.

Ovviamente nei limiti di tempo che abbiamo andremo a utilizzare come framework css tail wind che tra l'altro è uno dei farmaci ss attualmente più utilizzati.

Il vantaggio che ha è che nella fase finale nel bando il finale che verrà impacchettato.

Insomma nella nella nostra applicazione verrà incluso solo ciò che è necessario invece quando usiamo per esempio un bus trap verrà incluso tutto il framework con il vantaggio di avere meno css poi nella villa e quindi caricamenti molto più veloci nella nostra pagina.

Quindi si sposa molto bene con questi siti web dove dobbiamo raggiungere performance elevate, vedremo come gestire appunto gli stili, ottimizzazione delle immagini quindi andremo a vedere dei componenti di astro che ci permettono di appunto comprimere le immagini.

Vedremo il concetto di componenti di layout e anche di routing, quindi andremo a creare un paio di paginette.

Vedremo cosa vuol dire stati exit generation, la gestione appunto di un differente modello di rendering.

Ne parleremo tra un po' e acquisiremo i dati da non lo faccio da youtube, ma potenzialmente potremmo mostrare questo video della mia playlist di youtube piuttosto che del mio blog, quindi da una fonte dati esterna, utilizzando appunto quella che è chiamata ssg che southside generation.

Vedremo poi l'architettura a isole che è caratteristica di astro si chiama viene anche detta partial aid station.

Parleremo tra un po' di questo concetto e vedremo che grazie a questa sarà possibile integrare all'interno della pagina in elementi interattivi anche con altri framework, quindi anche, per esempio con un reato, ma dentro una pagina astro.

Per capirci, è possibile andare a integrare addirittura nella stessa pagina un componente relax, una wu, uno svelto e un altro sviluppato con Che ne so, per esempio google, lilith, web component components ovviamente da pazzi andare a includere tutti questi tutti questi frammenti un'unica pagina però potenzialmente si può fare e non l'ho scritto qui perché non volevo creare una slide troppo troppo verbosa.

Comunque se ci avanza un po' di tempo ma il che vado con un po' di copia-incolla dei miei appunti vi mostrero' anche come creare un blog usando march down quindi avremo una landing page con dei contenuti e un piccolo blog appunto che utilizza march down dietro le quinte e infine velocissimo velocissimo andremo a fare un piccolo versamento subìte velocissimo e il deploy quindi vedremo effettivamente la nostra applicazione online daremo anche un'occhiata alle performance utilizzeremo lighthouse e vediamo se la il il lavoro che stiamo facendo obiettivamente porta un risultato valido o meno.

Quindi se il sito e performante o no, allora io ogni tanto leggo la chat, quindi se avete domande scrivete pure e poi ogni tanto magari adesso quando scrivero' un po' di life coding andro' a a guardare se c' è qualche domanda a cui lasciato indietro mal che vada ripropone tela no? Se effettivamente me la perdo per strada allora dovremmo fare una presentazione di un'ora solo per capire le fior di astro, però oggi ci concentreremo sul coding.

Quindi a parte altre due slide, alla fin fine è poi scriveremo codice però, almeno per dare un po' di contesto che cos'è astro é un framework front-end che permette di sfruttare differenti pattern di rendering, in particolar modo la statica generation.

Ne serve rendering di cui parlerò tra poco.

La parte interessante è che performante di default l'obiettivo è creare siti ultraveloci che mostrano i le informazioni nel più breve tempo possibile.

Quindi se avete bisogno appunto di creare un giornale, un magazine, una landing page, volete avere performance altissimo, ovvero apro la pagina, le vedo nel tempo più veloce possibile.

Astro é un'ottima soluzione ed è anche molto semplice da usare.

Questo è interessante quindi veramente di una banalità mostruosa, come vedremo oggi gnostiche vuol dire che appunto, come dicevo prima, possiamo integrare diverse tecnologie all'interno di un'applicazione astro vuol dire un re act o un jas svelti che sia e l'architettura isole.

Vedrete che un'ottimizzazione del processo di hydra nation di cui vi parlerò tra un pochino.

E infatti prima di iniziare ci tengo a con degli schemi proprio semplici semplici a far capire cosa intendo con questi pattern di rendering quando noi creiamo una single page application, che sono le applicazioni che creiamo normalmente in England PHE e via dicendo.

Quindi un index html e tutto il resto dinamico all'interno usiamo quello che viene chiamato Clisson Said Rendering In poche parole, quando un utente richiede no, una ha una pagina a un server, quindi richiede per il no del nostro progetto.

Al server viene restituito un unico index html CSS e tutto il già scritto o buona parte del Jobs Act che serve l'applicazione per poter essere caricata all'avvio.

Però qui avremmo un certo periodo di loading perché la parte di Jobs chiede Bella cicciotta deve caricare tutto un framework, tutto il nostro codice framework angolare o libri Act tutto il nostro codice e richiede un po' di tempo.

A quel punto, quando la pagina il browser esegue la nostra applicazione riaccolto angolare, inizieremo a vedere la struttura della nostra applicazione.

Ma questa applicazione quindi il layout no.

Ma questa applicazione non avrà ancora i dati.

All'interno dovrà effettuare un'ulteriore richiesta al server tramite graffio.

Ecco quello che volete.

Il server restituirà i dati acquisiti da un BB, per esempio dal database.

E allora vedremo i contenuti.

Questo processo.

Ovviamente stop stop è stato più tempo a descriverlo.

Che poi in realtà a essere eseguito non è lunghissimo, però richiede un po' di tempo e non si sposa bene col il l'indicizzazione sui motori di ricerca e con l'obiettivo di avere performance molto elevate perché, come potete immaginare richiede un po' di step.

E soprattutto quando il motore di ricerca cerca di indicizzare un sito non trova le informazioni perché obiettivamente non ci sono.

Devi appena aspettare il caricamento di tutto il framework e poi anche le gath dei dati no.

A questo punto entra in gioco quello che è chiamato static statico generation ssg o servers rendering.

Ora non volevo perdere troppo tempo nell'introduzione quindi l'ho riassunte tutto in maniera molto semplice.

Otto in una slide anche qui ne avremo di cose da dire.

Però in poche parole quando l'utente richiede una pagina ad nostro server che appunto la la o sta quindi la fornisce, in realtà il nostro server ci restituisce già là pagina pre rende realizzata con già i contenuti all'interno senza la necessità quindi di fare un'altra chiamata alle e recuperarli.

Viene tutto fatto dietro le quinte con la static generation viene fatto in fase di Bild.

Io faccio la bill del progetto.

È quello che faremo oggi.

E se ho dei dati acquisire in fase di Bild, li acquisiscono.

Faccio le guerre, il genero, la pagina, quindi la prenderei Izzo e quando viene richiesta gliela do.

Quindi, nel momento in cui l'utente la richiede velocissimo, perché ho gia' la pagina.

Creata il processo, però, che vedete il terzo processo che si chiama Edition, serve per far cosa che nel momento in cui chiedo la pagina, i dati arrivano nel nel più breve tempo possibile.

Sono immediati, quindi io riesco a leggere la pagina i contenuti nel in un tempo brevissimo.

Tuttavia la pagina non è ancora in te operativa.

Quindi se c' è un carosello dinamico, se c' è un'infografica animata o comunque in questo caso interattiva, dovremo aspettare un processo chiamato Education, che rappresenta il caricamento del file JavaScript che serve alla pagina diciamo per funzionare.

Detta in maniera molto semplice.

Questo per quanto riguarda la static generation, il server.

Se il rendering invece di acquisire i dati in fase di Bild, lo fa in nel momento in cui la pagina viene richiesta.

Un po' come php WordPress no.

Richiedo la mia pagina.

A quel punto è server fa l'eventuale chiamata il database, prende i dati e mi restituisce la pagina prende realizzata anche questo processo è molto veloce il diciamo che il vantaggio di usare uno o l'altro em sg il vantaggio che abbiamo le maggiori performance la pagina è già pronta, devo solo visualizzare la però ha il problema che so dei dati freschi nuovi, molto, molto frequenti devo fare un red chloy della pagina, quindi rifare una build o trincerare la bild attraverso altri sistemi un pochino più particolari o complicati nel server per rendere invece ce li ho subito però come potete immaginare, meno performante della stati generation dove invece i dati giace lì o no, inclusi nella pagina.

Ok è chi la old school march down si' si' tutto il mio sito è fatto in march down.

Tutti i contenuti sono senza database o di fermarla.

Dopo ne parleremo allora io direi che a questo punto questo è l'obiettivo.

Vediamo se ci riusciamo.

Avremo una piccola paginetta con un'immagine i dati caricati da una fonte esterna.

Andremo a creare un piccolo box per la newsletter in che t' integrato sotto e dobbiamo tenere il cento percento delle performance e poi avremo anche un piccolo blog con appunto i contenuti è mme quindi dice matteo quindi servers restituisco direttamente una piu'.

In realtà in entrambi i casi quando viene richiesto tu hai una pagina pre rende realizzata.

Grazie.

Intanto se dopo condividiamo anche lo schermo così posso partire col coding abbiamo una pagina prende realizzata in entrambi i casi, solo che in un caso viene prende realizzata al volo quando richiesta.

In un altro caso è stata fatta in fase di bild.

Poi vi mostro qualcosina un po'.

Mi rendo conto un po' particolare come come concetto.

Questo è il sito di astro astro punto bild che tra l'altro di recente uscita la versione due le novità rispetto a uno non sono moltissime ma sostanziali.

Una tra tutte che prima bisogna si poteva ci doveva scegliere tra stati generation o servers renderei o una o l'altra, mentre adesso è possibile generare una pagina.

Faccio un esempio la lending iniziale, la home page con una stati generation, magari il blog che cambia frequentemente, che ne so ogni dieci minuti scrive un nuovo articolo la faccio server side no.

Quindi è possibile creare questo qua.

Quel meccanismo chiamato mixed rendering no, mixando entrambe le tecnologie é praticamente quello che andremo a fare qua.

Sarà un piccolo saltarello qua dovevo mettere un'immagine di plays holder.

Comunque sia, ho messo questa per il momento che non è proprio bellissima e questo è un componente eax.

In più andremo a creare un blog qua bellissimo come vedete no la lo style che però è scritto in march down ed è possibile poi andare chiaramente a creare i vari posti, i vari contenuti ovviamente poi lo styling sta sta sta a voi io adesso creero' un po' lo scheletro no e vi mostrero' un po' le le chicche e l'edificio era inutile perdere troppo tempo con con il css partiamo proprio da zero io qua ho il mio terminale e andremo a creare adesso con il pm, quindi potreste anche provarlo anche voi se volete create astro athletes', dammi l'ultima versione di astro e facciamo partire la nostra applicazione, così adesso ci farà un po' di domande.

Intanto il nome del progetto e lo chiameremo astro teller allora abbiamo la possibilità di avere dei bolli arpat all'interno quindi per esempio creare già un clown, templi di un blog o alcune pagine di esempio, ma io voglio farmi male e creeremo humpty in saliamo tutte le dépendance sul fatto che rimarrà la registrazione o meno.

Penso che adesso ti faranno sapere matteo dietro le quinte qualcuno ti risponderà comunque tempo qualche secondo che installiamo le dipendenze e poi ci verrà chiesto quale versione di tight script.

Anzi, se voglio usare types script ho già scritto.

Ovviamente diremo di si' alla domanda di utilizzare script e poi quanto pignolo deve essere il compilatore? No, vedrete che c' è un'opzione relaxed strict streak test se non sbaglio mpx perché avevo già astro installato no, puoi usare tranquillamente il comando npl great astro e dovrebbe comunque sia farti partire l'installazione vediamo un po' ho perso il mouse per strada, vediamo se è un problema di connessione o altro.

Ehm cioè il mouse ma è è morto.

Penso che non mi sia mai successa questa cosa.

Dovrà succedere ovviamente indiretta intanto che speriamo che si ripigliati gli la track speed in realtà vediamo se si riprende.

Vediamolo.

Ok, da riga di comando voglio usare time scritte.

Mettiamo di si mettiamo di si' poi quanto street dev'essere il ancora non si è ripreso, non si è ripreso quanto street dev'essere il compilatore.

Mettiamo strict voglio iniziare un repository with Sì, perché dopo dobbiamo version Arlo e direi che ci siamo.

Però il mio mouse è sempre morto.

Questa mi questa cosa mi angoscia alquanto precisamente mi angoscia.

Andiamo dov'è trackpad la riapriamo, vediamo se si è impigliata e ci siamo vedo un connesso buon segno.

Meno male.

Ok, abbiamo creato quindi il progetto Astro.

Eccolo qui e lo apro con il mio editor preferito che non è visual studio code come molti possono pensare, visto che lo usiamo tutti.

Ma è il web Storm.

Eccolo qua.

Andiamo.

Qui abbiamo Weston.

Abbiamo un progettino che é un classico progetto front con un package grayson che mi mostra le dipendenze in questo caso astro due-tre un po' di comandi per far partire il progetto.

E qua all'interno abbiamo ben poca roba perché infatti vedremo un agis con un index punto astro che dentro ha semplicemente un html banalissimo con h una astro.

Allora adesso faccio partire il progetto con il PM Ran uno dei comandi utilizzeremo Bev e sulla porta localhost tremila abbiamo adesso il nostro progettino Aspetta che facciamo una cosa lo mettiamo qui a colori.

È normale che a te sia piu' veloce installare dipendenze tutto.

Sai che non ho capito salvatore, scusami se se mi dai qualche dettaglio in più sulla domanda se è più veloce a me che a te, dici di installare o fammi capire un pochino intanto abbiamo creato il nostro progettino.

Eccolo qua la pagina index questa qui qui abbiamo il terminale che deve sempre girare e lo mettiamo qui sotto e direi che ci siamo adesso quello che voglio è che voglio fare è installare tail wind che appunto questo framework css che ultimamente sta abbastanza spopolando a ci sta mettendo tanto tempo installare la dipendenza all'inizio ma anche a me ci sta un pochino poi dipende dalla connessione ho e anche un po' dalla macchina insomma dalla dalla dalla magari diciamo dalla dalla velocità del tour di del tuo disco della tua macchina però in teoria dovrebbe finire dai tra poco si' qua io un ci faccio un mack studio da sessantaquattro giga di ram abbastanza bene quindi può essere anche quello che ha fatto un po' la differenza installiamo tail wind per a strom abbiamo tutta una serie di comandi per esempio che ne mpx astro astro hub sono dei comandi che trovate nella documentazione per installare un sacco di cose e per configurare un po'.

Il tutto tail wind è una libreria che richiede comunque una piccola configurazione e senza star li' a installare la libreria tal wind aprire il file di configurazione di tai wind, aggiungere alcune opzioni noi possiamo lanciare mpx ve lo rimetto scusatemi anche magari l'ho perso non l'avete visto beh abbiamo mpx astro ad wind semplicissimo no avvio a questo comando mi chiede insomma se voglio fare installare no questi comandi vedete niente pmi stal installerà un po' tutto ci dovrebbe mettere relativamente poco tempo ok ha installato tutto dice questo genererà un file chiamato twin.

Confido che il file di configurazione che di solito mettiamo in te il wind e infine questo è il file che adesso vi aprirò di configurazione di astro del progetto e mi chiede se posso appunto integrare anche Tae hwi e gli dico di sì e qua adesso abbiamo il file astro config dove importiamo tail wind e aggiungiamo qua integration su questo pacchetto ce ne sono diversi, già pronti, come si suol dire out of the box per essere installati senza neanche dover configurare nulla.

Praticamente allora rilancio il progetto che il pm rendezvous abbiamo qui il nostro bellissimo progetto e ora vediamo se effettivamente funziona.

Vediamo il terminale momentaneamente e allora qui vedete che il il file della pagina é un film che si chiama index punto astro.

Tutte le pagine e i componenti che andremo a realizzare con questo premio si chiamano hanno un'estensione punto astro e vi faccio notare che qui ci sono tre dashwood, quindi tre tre trattini e dove qui dentro potremmo inserire dei comandi che ci serviranno a breve.

Per il resto è una normalissima se vedete pagina html allora qui dentro possiamo inserire anche il footer ogni tanto guardo quindi appunti per non dimenticarmi i pezzi, quindi andiamo a mettere il footer così facciamo un po' la marchetta fabio abbiamo di punto deve é qui sotto interessante che possiamo creare un blocco style nel quale andiamo a inserire un po' di di stili css.

Per esempio potrei usare qui andare a creare diciamo che html un background black con un testo bianco.

Solo che invece di farlo in css vanilla useremo wind e tramite questa qui questo comando che si chiama li è possibile creare applicare tutte le classi di tv che abbiamo a disposizione.

Per esempio, possiamo andare ad applicare BG.

Eccolo qua BG e ci sono tutta una serie di opzioni.

A me interessa Big Black, così almeno ci ricorda un po' all'eur.

No, E Alex White.

Eccoci qua.

Dopodiché faccio copia incolla che è inutile perdere tempo.

Non su queste cose qua Andiamo anche a prendere il bud e gli dico che abbiamo una Max Max Weed in modo da XL che è un valore di te lui ne abbiamo diversi diversi è, come si suol dire, diversi step.

Diversi misure quindi da Sammy Small.

Quindi large XL Pixel é un'unità di misura di Tywin.

Potete vedere la tabella comunque sul sito di Tywin e il mio sito raggiungerà il massimo una certa dimensione con un mix auto lo centriamo e piselli diamo un po' di pudding e infine nel footer gli diamo anche qua Tech Center, margini Y di sedici, un border e un border Slate.

Ed eccolo qua.

Vedete, questo è il bordino Border-top e Borden Slate un colore Grey getto.

E lo abbiamo applicato qui Nulla di che nome di stravolgente Ora è Mme.

Funziona Atleti Anche Nell'installazione Tel Ming che hai appena fatto? Non penso perché un non ma non ho mai provato tanto basta al limite che dà un'occhiata e comunque l'atleta dovrebbe essere anche superfluo perché ti stava comunque l'ultimo pacchetto grazie al genio.

Piacere vedere inline.

Grazie mille.

In effetti è un bel po' che non vengo in light.

Allora è ora vogliamo creare una pagina blog come possiamo fare? Io prendo questa pagina copia incollo la chiamo blog ehi, di qua me la vuole aggiungere subito e gli dico di no.

E in questa pagina noi scriveremo adesso blog giusto per distinguerla e blog.

Ora qui abbiamo automaticamente la pagina blog perché il router il nastro come anche in next in premier di ultima generazione basato sul file system.

Quindi vuol dire che tutto quello che io metto in una cartella che deve chiamarsi paige, questa qui ogni file che io metto qui dentro e una root, quindi una srl ovviamente non lo vedremo oggi possiamo anche creare srl con parametri sottocartelle srl, ned e così via oggi che ci limitiamo a queste due e ora ora che abbiamo creato questo per dovrebbe emergere una esigenza.

Ovvero mi pare che ci sia un po' di ridondanza no? Tra le due pagine obiettivamente l'unica, cosa che cambia.

Mettiamoci anche un main qua dentro.

Così l'unica cosa che cambia tra i due tra le due pagine e il contenuto Quello che andremo a inserire poi qui dentro no Lorem ipsum classico No, Andiamo a metterci qua.

Un lorem ipsum è di qua.

Avremo il blog? No, per esempio.

Quindi cambia solo questo contenuto.

Il resto della pagina che può essere un footer il menu i'm navigation barche.

Qui non ho però potrebbe esserci o appunto tutti tag html meta, no e via dicendo.

Sono tutte cose che mentre nelle pagine sono sempre uguali, no.

E a questo punto abbiamo la necessità di creare che cosa? Un layout.

Potremmo creare un layout della pagina che ci permetterà facilmente di essere riutilizzato Un po' ovunque, senza la necessità di andare ogni volta specificare tutta sta roba qui.

E questo è il primo componente che andremo a creare.

Appunto un componente di layout che per convenzione si crea nella cartella layout e lo chiameremo con molta fantasia.

Layout punto Astro.

Eccolo qua.

Dov'é.

Adesso vado a prendere tutto questo e lo piazziamo di qua.

Proprio pari pari.

Ora posso andare a rimuovere praticamente tutto.

É la mia pagina affronta più niente, però quello che possiamo fare adesso è utilizzare il componente layout che ho appena creato.

Come vedete, me lo ha importato ed è la prima volta che vediamo anche l'import di un componente all'interno dei famosi tre trattini.

Quindi questo componente astro può contenere un layout html e dentro questi tre trattini alcune cosine in Giava scritta di qualcuno perché non possiamo scrivere di tutto, ma per esempio tre tra le varie cose che possiamo fare l'import di un componente salviamo ok e come vedete adesso ovviamente la mia pagina semplicemente invece di avere il contenuto qui nel file index astro é spostato nel layout.

Chiaro che però questo questo layout questo layout adesso ha sempre il titolo astro un'acca una astro è un loren ipsum, quindi se io adesso per esempio, riapro la pagina é la pagina blog, posso tranquillamente copiare questo contenuto qua dentro.

Però obiettivamente la pagina blog ovviamente adesso sarà identica alla home page lo stesso layout.

Quindi cosa possiamo fare? Possiamo adesso arrivo è allacciato visto che c' era un po' di un po' di movimento.

Quello che possiamo fare è creare un layout parametrico parametri izabel e cioè personalizzabile dove il titolo della pagina questo titolo che quello che vediamo qui in alto no della pagina e magari anche il e altre informazioni potrebbero essere anzi il contenuto che l'unica, cosa che effettivamente cambia tra una pagina e l'altra possa possa essere ovviamente dinamico.

Tutto il resto dovrà rimanere identico.

Quindi noi vogliamo dinamicamente cambiare questo valore qui e il suo contenuto come possiamo fare? Faccio questo tasche poi risponde un po' di domande in chat quello che il risultato che vogliamo ottenere.

Questo per capirci arrivo già il risultato finale e avere qui la possibilità di definire il titolo della pagina, per esempio astro home.

Ok, quindi il layout é un componente si dice che deve accettare come proprietà titoli e qui all'interno mettiamo lom paid content quindi vuol dire che potremmo scrivere e che ne so il un componente tiro le news il contenuto della nostra pagina in poche parole questo componente qui infatti, ma prima un tool o per il disegno, vediamo se mi funziona.

Ok, in poche parole questo questo titolo qui deve andare a sostituire.

Questo é il contenuto deve essere piazzato qui dentro.

Come possiamo fare? Il componente può accettare delle delle proprietà e queste proprietà possono essere definite semplicemente usando qui il destruction ring su ast rop rocks quindi da se ce la faccio scrivere astro punto Proprio adesso abbiamo la possibilità di passare questa proprietà piccolo semplicemente e ora infatti queste proprietà si chiama astro home.

Andiamo qui sia qui che qui e con le graffe possiamo inserire all'interno un'espressione quindi in questo caso l'espressione sarà mettermi il title che è passato dall'esterno vediamo un po' se funziona su blog non c' è infatti in effetti ci sta perché sul blog ancora non abbiamo passato nulla quindi non vedo più il titolo e non qui ne' in alto ma in teoria non si dovrebbe andare.

Eccola qui a strom e astro l'ultima cosa? E poi arrivo davvero la chat è questa come faccio a passare il contenuto che c' è all'interno del tag layout quindi l'apertura layout la chiusura, il layout dentro cioè del contenuto Questo contenuto prende il nome di slot non è un concetto nuovo anche in view svelte ogni web components si chiama slot in teak, si chiama children.

In angola si chiama and content, quindi il concetto è sempre lo stesso.

Prendo il contenuto che mi ritrovo qui dentro e lo metto in uno specifico punto in automatico senza grossi sfocare grass senza grosso sforzo.

Infatti adesso negli autogrill lorem ipsum ma ormai che ci sono colgo anche il titolo lascio solo il main, il titolo andrà a impattare solo sul titolo vedete qui della pagina no del tablet é qui dentro uso slot banalissimo ed ecco qua che abbiamo un pays content.

Infatti se vado nel blog che è ancora vuoto, cosa facciamo? Intanto manca il titolo vedete che qui c' è il link della pagina di default? Mettiamo mai blog salvo ed è cambiato? No, a destra in alto nel tablet e il contenuto qua mettiamo il mio super blog.

Eccolo qua.

Ok, vedo un ev rizzato no, vedrai continuare perfetto! Quindi vuol dire che sono ci sono ancora.

Vediamo la domanda di Sirio la ciao Sirio, giusto una dritta.

Hai accennato a parametri srl intende i parametri in ghetto? Altro? No, nel router dici intendevo semplicemente che sentendo quello che ho detto prima sul fatto di poter anche gestire parametri, intendevo semplicemente di poter avere una slash post slash uno o slash qualcosa.

In questo caso è sufficiente andare a usare al posto del nome del file blog punto astro delle parentesi quadre con un nome di diciamo del per esempio ed é quello diventerà un pat dinamico.

Comunque trovi le informazioni sul sito internet.

Vero? Davvero banale.

Poi ti conosco, so che sei bravo e che quindi non avrai problemi.

Molto simile comunque le regole del router che stabiliamo di solito in un angolo dove mettiamo slash due punti di e questo in realtà essendo basato sul filesystem da router basato sul filesystem, dobbiamo comunque scriverlo da qui, quindi avremo questa paginetta con le quadre è la variabile all'interno era quello che intendevi? Seguo qualche convenzione particolare per il nome del file in base del tipo componente, le auto, eccetera.

Camel case guarda segue le convenzioni in realtà di disastro.

Per quanto riguarda le pagine vado a metterle in minuscolo perché poi vengono reindirizzate anche qui, come vede il minuscolo.

Per quanto riguarda tutti i componenti invece vanno scritti di solito in pascal case, quindi con le maiuscole ad ogni parola.

Però anche qui non è che c' è una regola.

Seguo più o meno il modello dei template di astro che suggeriscono di andare in questa strada.

Eccolo vittorio ciao finale tim coding.

Esatto, esatto.

Quindi abbiamo creato Vedete, adesso è molto semplice, no? Ogni volta che avremo una nuova pagina, abbiamo questo componente di layout tra l'altro questa tecnica utilizzabile anche in che fine ex senza problemi e usa un pater chiamato Composition.

Alla fin fine, quindi vi permette di cara di componenti che dentro usano altri componenti e così via.

Creare delle scatole rotte, delle matrioske e dei componenti.

Ed è molto interessante per creare appunto lei auto riutilizzabili.

Ripeto tranquillamente anche il reato uso lo stesso approccio.

Possiamo dividere logica Stirling e Templeton, una pagina in più file come fango l'hard, non di default.

Tieni conto che qui puoi metterci pochissimo javascript.

Però se qui vedrai che dopo andremo tra un po' a fare una chiamata al server, quelle le puoi mettere comunque in dei moduli.

Eh già.

Skeet, skeet.

Quindi un file punto per piazzare le funzioni da cui le deve importare.

Comunque però non puoi automaticamente avere un template e una e una file già scritto, anche perché qui vedrai, non puoi fare molto e puoi fare import chiamate al server, definire le proprietà del componente e basta.

Se hai bisogno di funzioni, puoi comunque usare qui il transcript perché c' è una cosa che non vi ho detto.

La velocità di astro è data dal fatto che quando io farò una build avrò un sito con zero javascript.

Zero è assoluto perché i componenti astro vengono reindirizzati una sola volta in fase di Bild o in fase di servisse.

Rendering Quando viene generata la pagina una sola volta.

I componenti astro non sono reattivi, quindi, per esempio, qui usano una sì.

Useremo una sintassi molto simile a J.

A.

Essex dir eax.

Però in genere Sikes posso usare l'on click o degli eventi qui no, perché tutto il componente viene reindirizzato come stringa.

Quando io ho bisogno di scrivere del codice, ci sono due possibilità per rendere interattivo un componente o usare un tag script.

E qui ci piazzi quello che vuoi.

Ricordo un po' roosvelt.

Questo da quel punto di vista e tenendo conto che abbiamo anche no tax hill, questo è molto simile alla svelta come framework e questo qui usa qua dovrei usare vanilla javascript document getelementbyid id punto ad event listener fare questo oppure se hai bisogno di codice di parti di diciamo di del sito più interattive ancora insomma, più complesse come come vi ho introdotto all'inizio e possiamo usare un re act, un ubriaco, un wu, uno svelto e quindi creare un componente è dopo vi mostro come fa, come lo faremo? Un componente direttamente con un framework é bene o male già adatto per fare questo genere di cose.

Quindi lo scrivi qua.

Eventualmente.

Questo scritto chiaramente può essere in un file esterno proprio come in HTML no scritto essere ci punta a un filetto che scrivi a parte, quindi si' potresti farlo.

Quindi in realtà la composizione risulta comunque più lenta rispetto ad astro.

Beh, tieni conto che in questo caso il usiamo un pattern che la composizione però non va, non incide sulla sulla velocità il meccanismo è praticamente identico.

Il problema è proprio il meccanismo di, cioè il problema.

La differenza sta proprio nel meccanismo di renderli nella pagina si usi re act con tweet o concrete act up.

Un progetto diciamo normalissimo, una single page.

Come dicevamo, all'inizio usa il claim said rendering.

Qui usiamo invece la generazione statica delle pagine che già abilitata di default tra un po' vi mostro questa parte e quindi da quel punto di storici non c' è proprio confronto tra i due è qui.

Mi carica una pagina html online senza giacca e dall'altra parte.

Devo caricarmi freak, le librerie e tutto il resto eseguirle del browser Puoi fare un'eventuale chiamata resta.

Non c' è proprio confronto in termini di performance proprio reati.

Più adatto usato così nudo e crudo per una single player application per creare software.

Qui stiamo parlando invece di siti web super performanti.

Sono due cose diverse.

Ok, quindi posso fare confusione scritti in reati.

Può importare? No, non solo questo.

Tu puoi adesso lo vedremo dopo.

Puoi scrivere un componente Re Act e usarlo e stanziare.

O questa è la figata.

Posso direttamente stanziare qui dentro componenti iscritti con qualunque framework.

E questa è la figata per quello È il mio blog, Il mio sito l'ho creato così perché usando un po' tutto mi faceva comodo alle volte in una pagina anche in March Down includere dentro un componente act o un componente scritto svelta, perché magari in quell'articolo sto parlando di quello.

Voglio mostrare una demo interattiva.

Una figata da quel punto di vista.

Oppure in un giornale voglio mostrare le news, ma al centro voglio un componente interattivo fighissimo.

Non ho voglia di farlo in vanilla giachi.

Lo crea un re act? No, per esempio.

E lo piazzò lì fra un po' ci arriviamo.

È una delle ultime cose, allora no, molto figa sta cosa infatti è una genialata, una genialata.

E soprattutto vedete la facilità perché tra l'altro ci sono fra buon nuovi come quick quick é il nuovo amore del creatore di angmar e quindi è un particolarissimo.

Però in quick per esempio, è devo si dice qui che utilizzare un componente act dovrà fare un componente acting in un week.

E allora lo posso usare qui? No, io prendo un film che fa il jack's tsx eluso lo importo importo il componente l'uso come se fosse in realtà tra un po' vi mostro.

Detto questo, detto questo nel layout vado a fare ancora una piccola miglioria per dopo poter raggiungere il blog con facilità, copio incollo qui vedrete che è banalmente una diciamo così, più breve ancora e mettiamo qua il link al blog e così posso andare direttamente a cedere al blog dalla home.

Ok, così ogni volta non devo scriverlo a manina, abbiamo ancora un sacco di roba da vedere, quindi vediamo un po' fare un paio di copia-incolla adesso, perché è inutile che perdiamo tempo con il layout nella pagina della Landing page.

Siamo qui e qui dentro posso piazzarti tutto quello che voglio.

É un Big bang, No, Big contributo di Quick.

No, purtroppo ho fatto un cinque sei componenti di Quick.

Ha il Framework di che? Appunto sarà ufficiale di qui, che però è da un mese che non contribuisco.

Quindi mi sento James, la stessa che mi sento in colpa ogni volta che leggo un messaggio.

Adesso devo ricominciare qua.

Ho creato rubato le informazioni del sig.

Lerner.

Speriamo che siano aggiornate.

Comunque sia, abbiamo qua che cosa? Un DVD per un divo che conterrà conterrà un'immagine E un divo sottostante dove abbiamo qua semplicemente un testo molto grande e berne un altro testo più piccolo.

E un altro testo con del margine.

Un colore? E semplicemente nulla di che.

No, direi innanzitutto.

Innanzitutto, vado a copiarmi un paio di immagini qui in essere C metto in asset un paio di PNG.

Una è la PMG quella della immagine che avete visto nella preview iniziale.

E voglio visualizzarla in questo punto.

No.

Cosa dobbiamo fare? Possiamo importare questa immagine assegnandogli un nome per esempio from e qua vado a prendere asset tv astro punto png e qua semplicemente useremo img essere c parentesi graffe per per inserire in un attributo non una stringa ma una una espressione e chiudiamo qui il tag vediamo un po' l'immagine funziona ora ora c' è un problema questa immagine non ha un peso proprio discreto tra l'altro qui vedete un po' di javascript perché sono ancora in fase di sviluppo poi vedrete che nella bild questo già scritto sparisce.

Però andiamo in email questa immagine pesa un pochino un mega e cento no, io sono svogliato tutte le immagini del mio del mio sito web pesano sono diciamo da fullhd quattro kappa non ho voglia di fare il bis lo metto direttamente la cartella voglio che vengono ottimizzate, vengono ottimizzate in automatico come possiamo fare ogni tanto la chat mi distrae come possiamo fare? Possiamo utilizzare un componente chiamato image di astro io adesso vado a sigillare il processo con contro il c di nuovo quel comando nel px astro ad che abbiamo aggiunto tail wind o raggiungiamo image mi chiede se voglio installarlo gli dico di è il medico di s gli dico di sì la installiamo, mi chiede se può configurarlo.

Insomma si può aggiungere il nodo image al file di configurazione di astro che questo qui e mi ha aggiunto image ora abbiamo questo componente okay perfetto! Intanto date un'occhiata alla chat che ci sono un bel po' di posizioni aperte in nel team dealer, quindi dategli un'occhiatina allora voglio sapere come fai quegli avatar meravigliosi se paga designer, non io sicuramente anche se anche se con un po' di no intelligenza menzionare tu con un po' di intelligenza artificiale nei prossimi giorni devo provare a fare a generare vediamo se don input queste se me ne riesce a fare un'altra ha altre così non pago più il designer che brutto! Che brutto lavoro che abbiamo! Vedi alla fin fine pero' eh che brutta cosa che betto non pagare più il design a farglielo fare l'intelligenza artificiale quando lo faranno con me poi mi pentirò di aver detto questa cosa è spoiler alert? Esatto.

Adesso peso speso meg cento no questa immagine é tantino no, direi quello che possiamo fare pero' copia incollo dai, perché così veramente andiamo avanti vi mostro più che altro gli steps per darvi un'idea no, però facendo lentamente perdere tre ore fa scrivere tutte le parti di codice io importato image dal pacchetto che ho appena installato e qui uso invece che l'elemento image nativo image il componente gli passo la mia moto gli do un alt una weed posso anche dare la spectra.

In realtà questo caso non mi serve.

Quindi quattro terzi no, uno è vuol dire quadrato qualità e il formato io ho dato in pasto una PNG, ma la voglio wep ora salviamo non dà segni di vita giustamente, perché avevo annullato il processo.

Beh, cresciamo.

E dal programmatore pigro che sono, vedete adesso che l'immagine di trentadue kilobyte Perfetto, va bene così.

Volendo potete giocare sulla Weed che ho sulla percentuale di sulla qualità eventualmente per scendere un pochino Adesso messo sessanta e vediamo qual ventisette percento e ventisette kilobyte.

Perfetto.

Direi che ci siamo in piu', visto che ci siamo adesso questa pagina è così che forse non è bellissima.

Andiamo a metterci qua un po' di Eccolo qua.

Un po' di CSS.

Eccola qui.

Vedete che adesso in orizzontale e poi diventerà verticale.

Così ho semplicemente usato CSS grid.

Quindi qua, ometto una grey la griglia.

Quando la dimensione large, ovvero sopra una certa soglia tenendo tenete conto che se il wind Mobile first quindi voi chinate per mobile e poi eventualmente mettendole media qua eri non so se notate questa è una media quelli online.

Sto dicendo quando la dimensione large large che adesso non mi ricordo se mille ventiquattro mille qualcosa c'è tutta la tabella.

Comunque, sul sito di te il wind voglio voglio la griglia e voglio che la la grida abbia due colonne.

Quindi sopra una certa soglia diventa due colonne.

Eccolo lì e mi piazza Place Item Center semplicemente perché così me li allinea verticalmente.

No, al centro perfetto.

Un esito più bello che abbiamo fatto, però, almeno per dargli un minimo di forma.

Va bene.

Ok.

Immagine ottimizzata.

Ora, quando creiamo qui No, il il nostro componente.

Questo componente può essere questo componente questa pagina a questo blocco e questo blocco In realtà possiamo definirlo il componente che di solito prende il nome di Ron o eroe che ero component.

Allora cosa facciamo? Possiamo andare qui e creare una serie di componenti più o meno riutilizzabili? Mica una cartella components.

Crea un file che si chiama Ero punto astro.

Sapendo tutto questo contenuto, lo piazziamo qui proprio pari pari.

Vedete, la mia pagina risulta di nuovo bella, pulita e invece di avere tutta quella schifezza di codice, andiamo a usare chi ero importo posso togliere questi e abbiamo la nostra nuova pagina la nostra land imprese l'ideale per essere anche poi facilmente rimo dell'abile e facilmente mantenerle é quella di andare a spezzare in tanti piccoli componenti ni chi ero compone youtube video, la news, la newsletter in modo tale che diventa una sorta di piccolo, una sorta di paginetta composta dei mattoncini lego ogni componente un mattoncino io lo vado semplicemente a ad utilizzare no invece di avere un unico mega templates.

Poi adesso semp perché siamo non abbiamo tempo.

Questo componente un po' come per il layout potrebbe accettare dall'esterno il titolo, la descrizione, quindi essere anche personalizzabile non lo faremo perché adesso non abbiamo il tempo.

Però obiettivamente, esattamente come il layout possiamo andare a passare qui diversi componenti avere un nero component personalizzabile, così ogni pagina potrebbe avere un diverso titolo, descrizione, una diversa immagine, però avere comunque la stessa shape la stessa struttura é la stesso tipo di layout.

Il componente madge l'ho installato così risponde alla chat.

Eccolo qua.

Poi comunque avete il source code sul ve lo mostro anche già se volete recuperarlo sul mio profilo github fabio biondi purtroppo non posso copiarlo in chat, però il é praticamente questo qui.

Intanto magari lo metto qua in privato che così almeno rimane ed è questo il qua con slash bio di slash astro workshop proprio facile facile da ricordare l'ho appena messo pubblico quindi dovrebbe essere tra gli ultimi del mio profilo é tabu' e qui avete tutto il sorgente poi grazie perfetto super operativi dietro le quinte allora quindi se qualcosa vi sfugge trovate poi li source code.

Comunque ripeto è difficile starmi dietro adesso perché corro ci sono tante fiction ma fatevi intanto un'idea di come funzioni astro poi è così semplice che vedete il source code la documentazione è ne verrete fuori tranquillamente infatti interessante vedere questo parliamo di statte x generation.

Adesso proviamo a effettivamente caricare dei dati da un sito da sostanzialmente da e includere che dei dati dinamici.

Allora per evitare di esporre pike o altre cose in una live volevo usare un servizio che è un servizio che fosse gratuito non avesse necessità di teal'c robe particolari uso devi tu devi tu una piattaforma medium per gli sviluppatori, dove gli sviluppatori attualmente stanno riversando i loro articoli e tra l'altro mi piaceva perché si iscrivono in March Down.

Ecco perché poi sono passata a un blog March down e fornisce delle delle gratuite per recuperare vedete gli articles dallo username Fabio Biondi Va bene, grazie.

Stavo impazzendo, perfetto e possiamo recuperarli io, per esempio.

Così recupero le anche dei miei video di youtube sul mio sul mio sito web trovate per esempio gli ultimi video sono recuperati tramite le app di YouTube, ma le di youtube costano costano parecchio dopo cento se non sbaglio, per prendere le playlist avete gratuito un centinaio di cui eri al massimo.

Poi si paga.

Ecco dove è utile la statica generation, perché io li genero vedrete in fase di Bild.

Così quando voi andate nel mio sito non devo rifare l'acqua.

Eri a parte che è anche più veloce? No, perché non devo rifarlo.

Acquari, ma non pago perché ho generato già in fase di Bild.

Poi è ovvio che se aggiungo un video su Youtube in quella playlist, che la playlist che ho chiamato Fisher ed i video che mi interessa mettere il nome è chiaro che devo rifare un'altra Bild? No, è o rigirarla in qualche modo.

Però chi se ne frega? Non aggiorno video ogni giorno, no? Quindi sta a voi decidere quando usare uno.

Quando usare l'altro per le chiamate al server potremmo tranquillamente utilizzare Fae che un comando nativo di Giava scritte però sempre che qua infatti a scrivere ok andremo installare una libreria molto conosciuta.

Axios ha chiuso una libreria che mi permette di la rimetto qui sotto di fare comunicazione con il server in maniera molto agevole.

Tenete conto che a centomila stelline su github, cioè manco angolare a centomila stelline.

Quindi parliamo della libreria usa Tissi, ma uso questa perché non voglio adesso per chi non ha esperienza con fece entrare in dinamiche un po' particolari di quel dell'approccio nativo.

Quindi questa ci risulta molto più facile da utilizzare.

E allora cosa possiamo fare? Voglio prendere questi dati e visualizzare i miei post semplicemente qui nell' index astro Paige concept post li recuperero' con Axios importando lo punto Gath prendo questo urlo lo piazziamo qui dentro.

Usiamo ovviamente questa restituisce una promise con ma mi fa più comodo usare async White.

Possiamo usare quello che viene chiamato top flight, ovvero ruth.

Di solito la white viene usato in una funzione async, ma in questo caso possiamo tranquillamente usarlo qui senza la funzione async grappa e qua possiamo fare un console log di post punto occhio che questo mi restituisce un axios responso che dentro contiene leader lo status eccetera.

I dati sono in una proprietà punto data ci ho messo un console log non a caso perché il console blog dove ce lo aspettiamo nei virtool fresh? Beh, magari se faccio partire protetto meglio non si può installare con astro come i pacchetti di prima no, odio forse anche cioè ma non l'ho mai visto e quelli sono in realtà pacchetti.

A volte i comandi mpx astro è ad le funzioni ad sono utili sono utili perché qua non basta installare un'applicazione tipo tail wind una bomba sarà la dipendenza, ma bisogna anche configurare qualcosa.

Allora fa comodo perché io installo, non devo configurare nulla e vado veloce.

In caso di actus è semplicemente una dipendenza che uso.

Non devo configurare nulla, quindi direi che è superfluo anche utilizzarlo.

Quindi questo è un pacchetto rpm io installo normalmente, allora vi volevo far notare in console.

Non ho niente questa parte di codice viene eseguita in fase di bild.

Nel caso della statica generation o nel server si arrenderà, viene gestita lato server.

Quindi qui io volendo, avrei potuto usare un token, un segreta.

In realtà non l'ho fatto solo perché sono il live.

La vedete? No, ma in realtà vuoi avrei potuto usarla perché tanto non è esposta qui come vedete in consolidano nulla e anche nella network console se vado in fetch non cela chiamata quindi non sto chiamando ne' per lo sto facendo in fase di bild e infatti il console ce l'ho qui sul terminale.

Ora usarlo sul terminale mi viene l'angoscia solo a pensarci.

Quello che facciamo è un bel jayson string i post che di post punto data giusto eccolo qua che è illeggibile.

Quando dovete fare un disegno string fai vi consiglio di usare un tag tre perché uso un font monospalla e usare il terzo parametro dello string che vi permette di impostare un'indennità azione.

E così almeno vedete i dati e questi sono i dati del mio dei miei post dei miei articoli.

Allora a un certo punto quindi, invece di avere questo jayson string, posso utilizzare jay sykes per chi viene a dare act è abbastanza automatico questo meccanismo per chi non l'ha mai usato, magari un po' particolare perché temple ti nastro in realtà sono scritti in quello che viene chiamato geiss like, ovvero simile a j.

Sykes con qualche limitazione.

Come abbiamo detto, non posso usare un click eventi perché i componenti sono rendere usati come string per alcune cose si possono fare.

Per esempio qui posso andare a tirare su post data con un map recupero tutti i post e restituisco per ogni post per esempio una un tag lì eccoli qua e qui dentro per ogni post posso recuperare per esempio vedete qua avevamo in console qua sotto dove dove dov'è il titolo per esempio eccolo qua post punto title e qua abbiamo tutti i miei post che arrivano e ora per comodità fatemi copiare un pezzo di codice ci piazziamo un dvd con dentro un tag a che punta post punto per il quindi cliccando vado sul rl, quello quello diciamo ufficiale clicco su questo e andiamo sul, sul sul, sulla piattaforma www indifferente adesso quello che vogliamo fare.

Poi per esempio mi piacerebbe avere qui un rollover, un rollover lo possiamo mettere banalmente qua style Un tag a Sì, mettiamo l'elemento a e posso usare sempre Potevo usare tranquillamente Vanilla javascript ormai che Evan il CSS.

Ma in realtà usiamo Tail Wind Media que pseudo select Rover e gli diciamo di mettere un text pink, la variante che vogliamo.

Urca! Da quando è uscito il nove e cinquanta, non avevo mai visto il nove e cinquanta dicendo Abbiamo da cento duecento multipli di cento.

Forse magari mi era sfuggita, ma non ero mai accorto.

E adesso qua Eccolo qua! Abbiamo questo bruttissimo rollover in rosa.

Ok, da notare che questi stili CSS sono locali.

Quindi se io qui avessi degli altri componenti, tipo in giro questo non va a impattare.

Questo tanga è disponibile solo in questo componente in nero o no? Se volessimo usare questi casto anche cast o no, per esempio CSS, anche nei componenti figli posso usare una direttiva chiamata il Global e li rende globali, accessibili ovunque.

Altrimenti rimane loca.

Un CSS locale al componente che lo definisce.

Okay, non ho capito bene come funziona la chiamata al per recuperare il posto.

Ho capito che fa solo una volta quando viene blindato il progetto.

E se io volessi aggiornare i dati quello che dicevo All'inizio, devi rifare la Bild.

Devi rifare la Bild adesso.

Qua funziona perché semplicemente sono in modalità deve quindi in modalità deve vuol dire che ogni volta che faccio una modifica, comunque gli viene eseguita la pagina.

Ma quando faremo la Bild, questi dati sono da mm ed inclusi nella HTML.

Quindi l'unico modo che hai e fare il red Chloy.

Se questi dati li aggiorni spesso, allora si può fare una cosa che non vi mostrano stasera andare nel file di configurazione astro é qui andare a usare la proprietà output server e servirà a quel punto per generare i tuoi dati usando il server.

Se rendering vuol dire che ogni volta che io vado nella home page, questa verrà riesce guida invece quindi quello usa serve rendering.

Però non hai comunque rest che viene chiamata e non la vedi qui nella network console.

In un caso la fa in casa in fase di Bild in un altro conservation rendering.

Basta solo cambiare un'opzione per capirci.

Ok, Quindi può andar bene in casi in cui non hai troppi troppi dati che si cambiano ogni momento per capirci, No, troppo frequente.

Ad ogni modo, qui vado a utilizzare Fatemi VR appare questa lista con un dvd Eccola qua abbiamo una griglia come vedete una grid di tre colonne con un gap, una distanza tra i vari elementi di tot.

Solo che ovviamente diventa un pochino striminzita e quindi anche qui vi voglio mostrare semplicemente come conte il wing possiamo dirgli di default mobile ha una sola colonna forse eccola qua una sola colonna small.

Quindi quando la risoluzione sopra una certa risoluzione diventano due so md diventano tre Sì, lo so che può essere fatto solo su alcune pagine perché il nastro possiamo qua configurare per capirci output server a quel punto di default l'applicazione funziona con lo static generation.

Se qui metto out server di The Fall L'applicazione funziona tutto il server side.

A quel punto vi direte Ok, però qualche pagina la voglio statica Nessun problema.

Qui andiamo a definire qual è il default Se mettiamo che tutto Sr poi qui possiamo creare praticamente export Jones prendere uguale fault Possiamo andare a definire una proprietà semplicemente prender é questa proprietà deciderà che questa pagina sarà rende realizzata sempre in modo statico.

Quindi no, sentiamo serre, ma poi definiamo quali pagine devono essere stati che usare quindi la ssg? Questa è una nuova specie di astro due di un nell'ultima religioso.

Cita un paio di mezzetti fatti per agganciare un click ad un elemento.

Nel tag scrive devi fare quindi una query selector sia esatto per poi segnare la funzione da eseguire da questo sì, sì, come in vanilla javascript, perché poi, come dicevo, il componente viene reindirizzato come stringa.

Però a volte ho bisogno di parti interattive, poi possiamo creare un tag script quando questa pagina viene bill data alla fine questo transcript ce lo ritroveremo comunque nel output della pagina piazzato qui nel tag hall da qualche parte li' nel badi eh dipende insomma dove lo voglia, dove dove lo piazzerà? Astro comunque ce lo troviamo qui e quindi potrà funzionare come un normalissimo sito html manila javascript se c' è roba troppo complessa, consiglio poi eventualmente di usare un framework.

Adesso andremo a fare questa scelta di essere r si possono fare su specifici componenti? No, lo puoi fare solo a livello di pagina, quindi di Ruth.

Quindi quella pagina verrà realizzata in questo modo oppure nell'altro.

Buonasera, Fabio, non ti ho mai visto così veloce.

Il tempo stringe.

In realtà fosse per me sarei sempre così veloce.

Però poi non mi sgridano che vado veloce e così, ad ogni modo, è mi interessa farmi vedere un po' appunto questi meccanismi adesso non interessa entrare nel dettaglio non è una lezione, non ce la facciamo in questi tempi no a farvi vedere un po' tutto però giusto per farvi un'idea anche di cosa significhi static generation e via dicendo.

Per esempio ora facciamo una cosa ne pm rand build, proviamola prima build vi faccio notare che qui anzi voglio togliere questo consolò Scusatemi che mi sporca l'output qui vedete che la mia bild ha creato index Dott.

Astro ha creato html qua ha creato il blog html quindi mi ha creato delle pagine statiche.

Se avessi se avessi rendering, non vedrei questo output per capirci.

Quindi adesso cosa facciamo? Voglio provare la bild refresh.

Qui non abbiamo più nulla.

Come posso fare con il pm rand preview? La ram preview sta prestando la bild a questo punto questa è la bild e per la prima volta vi faccio vedere la madia.

Se vado nella network console e vado su giava, ha scritto questo sito non ha già scritto, quindi non vediamo nulla ha caricato e ovviamente é super performante perché non abbiamo molte cose qui all'interno però spero che sia chiaro che vi fa insomma vedere questa questa questa pagina che non appunto non abbiamo nessun bisogno di usare già siete in questo caso.

Detto questo, detto questo, ovviamente potremmo usare anche un po' di gigabyte scritte Non è possibile andare atp Zare.

Questo questo è questo risultato con scritto per avere comunque intelligence e via dicendo.

Qua non ho suggerimenti di nessun tipo e posso anche scrivere la variabile che voglio.

Ce la faccio scrivere un punto.

Eccola qua la vera bile che voglio.

Il mio consiglio eventualmente è di creare un types come crea un tight di tutta questa roba qui? Prendo copio purtroppo il mio sito preferito Zygon pts morto.

Niente.

Lo usavo da anni e adesso uso makes makes.

Vado qui creo modo definire il nome di questo di questo entità.

Voglio creare un thai per l'entità post proprio in collo.

Tutto quello che c' era la enorme Questa roba qui tutto quello che c' era qui dentro.

Clicco su Gene Right ed eccolo qua.

Copio adesso Posso crearmi una cartellina model.

Il file post punto t s incollo questo e abbiamo il post con titolo, descrizione, bla, bla, bla, bla, bla, bla tutte le informazioni.

A questo punto posso banalmente andare qui e importare post così facendo io adesso qui o post? Punto per il post punto qualcosa e ho tutta la tipizzazione in place.

Okay, giusto per metterci almeno un po' di THC scritta all'interno della demo.

Ora altre due cosine veloci veloci.

Per esempio, questo qui é un candidato a diventare un componente.

Che sarebbe questa lista di contenuti in più mi fa comodo anche magari un titolo, che ne so, con Clas mettiamo Texas tre XL e mettiamo che questi sono i posti che mi arrivano dal sito di Bert.

Ok, vediamo se ha Sì, non la vedo.

Perché? Perché sto provando ancora la Bild.

Devo rifare il pm rendezvous.

Se non vedevo la vecchia Bild, il tuo post eccolo qua.

Magari li mettiamo anche un po' di padding di margine dai margini Y sedici.

Andiamo Forse un po' troppo sei Eccolo qui.

É questo il titolo.

Allora abbiamo due candidati componenti, anche se questo esula dall'astro.

In realtà è più un concetto di components che questo.

Questo è un componente che potremmo chiamare title.

É questo il componente che potremmo chiamare Deftones? Article No.

A questo punto qui mi creo il mio componente Tito il punto astro.

Vedrete che molto easy perché posso semplicemente prendere questo contenuto, piazzarlo di qua, poi andiamo a creare title.

Posso decidere intanto lo importiamo.

Eccolo lì.

Posso decidere o di passare una proprietà oppure, secondo me, più carino farlo così bevi tu qua quello chiamato post per vedere che funzioni.

Lo chiameremo Dev Articles Artic les.

Cosa facciamo semplicemente qua? O il truck che perde colpi Qui usiamo lo slot come abbiamo fatto prima per il layout.

Prendiamo questo contenuto dentro i tag tight e lo piazziamo qui.

Eccolo qua.

Vedete che funziona così adesso Ovunque mi serve un titolo, potrei mettere del contenuto un altro titolo del contenuto.

Un altro titolo Anche a livello di semantica rende l'idea No, il fatto che sia un titolo no.

Ed ecco qua che vediamo che possiamo riutilizzarlo più volte.

É la stessa cosa con questo è più interessante adesso perché io posso creare il mio componente.

Tu articles punto astro Gli piazzo qua dentro tutta la mia lista pero'.

Ovviamente qui non ho accesso ai dati opposte che ovviamente le recupero da qui le chiamate al server posso farle solo a livello di routine.

Non posso metterle qui dentro.

Quindi in qualche modo il mio componente che si chiamerà David tu articles deve ricevere questi.

Compro questi dati dal parent, quindi devo passare di questi post al componente come glielo passo? Possiamo tranquillamente andarli a indicare a questo componente qui quello di destra che accetterà e le astro prox e in particolar modo gli items.

Qui al posto di post data usiamo items e qua passeremo ai dem che sarà vostro punto data.

In teoria sembra che funzioni perché ce lo rimuovo, non si vedono più.

Ok, vedete insomma l'importante è secondo me che se un'applicazione web o un sito e dargli sia un valore a livello di semantica capire cosa sono i componenti libero componete il titolo del tuo articolo su un separatore, un dividere quello che la newsletter e sia perché poi alcuni di questi componenti possono anche essere riutilizzati in blocco da un'altra parte e comunque risulta molto più leggibile, no, il mio templates spezzettati in questo modo questa cosa dei gesti inesistente avviene anche se la deve al sah-him devo creato delle animazioni, interazioni ovviamente cyn, devo creato le animazioni o interazioni, ovviamente in fase di bild, se tu includi del javascript con delle librerie esterne o con delle dita script che includono la giacca e poi te lo ritrovi ovviamente nella bild, però forse non ho capito bene la domanda non c' è bisogno nemmeno di esportare il componente da astro, vedi no come vedi banalissimo no è infatti infatti non funziona sempre benissimo gli auto import in web storm che sto usando io adesso e nell'ultima release che l'hanno incluso ancora non funziona benissimo, è però eh il non serve fare niente come vedi lo importo dal nome del file ed esportato come default.

Infatti qui uso import senza le graffio senza nulla gli do il nome stesso che ha il file, ma potrei anche chiamarlo qui pippo e funzionerebbe sotto ovviamente lo dovrei stanziare come pippo molto molto greasy no, insomma senza farsi troppe paranoie o problemi.

Ad ogni modo, adesso che ho creato no il componente lista qui dentro fatemi fare anche qua un copia incolla di un per esempio potrei usare le componenti madge alcuni degli articoli che ho hanno l'immagine, mi pare quattro sulla ventina che ho che sto praticamente usando qui e quindi alcuni non ce l'hanno vado a mettere qua nel tag a proprio sopra il titolo il image may che carica il componente che abbiamo usato prima che carica post cover image titolo poi gli da' qua un po' di informazioni un po' di dettagli come vedete qui mi dà un errore source israele wired perché adesso senza star li' ad e pagare per lo so gia' io.

Il motivo è che in alcuni posti cover image non esiste nal alcuni post non hanno la cover perché sono lesi, svogliato e non gli ho messo la cover.

Allora cosa possiamo fare? Dovremo in qualche modo escludere questo e possiamo usare è non me non usare il tag images perché se questo è andy flynn viene passato essere che il file non viene applicato.

Quindi il il tributo esserci su image e si incacchiato il compilatore perché mi dice che essere ci source jacquard allora cosa facciamo? Eventualmente possiamo usare come il j sykes se questa cover image esiste hand se questo è uh andiamo a distanziare i componenti images screzio dovrebbe essere incluso se hasselhoff vabbè se solo la guida alcune regolino aspect radio dovrebbe essere una ed ecco qua che abbiamo in alcuni di questi l'immagine oppure potrei anche prevedere.

Per esempio qui mi sono messo anche una bruttissima immagine che ho fatto ieri perché mi è venuto mentre passavo la sessione in mente di fare.

Ma se non c' è l'immagine Mettiamoci un default perché non mi piaceva.

Però fa schifo uguale.

Non mi piaceva che la griglia non viene benissimo impostata.

No, questi qui non hanno per esempio questo all'immagine questi non ce li hanno ed è un po' triste ma forse più triste.

Con questo default allora posso fare anche un'altra cosa invece di fare un controllo se cioè cover image potrei anche qui importare.

La chiameremo default Mike from asset Slash default E qui se Coveri marginal posso usare un partner con or default images Vediamo se esplode.

È brutta questa cosa? Lo so, è bruttissima.

Però fate finta che sia bella.

Ok, allora intendo, se creano delle animazioni interazioni J S T S.

Una volta che Bild mi ritrovo comunque il J S o meno, se siete lo ritrovi devi metterlo per un tag script.

Quindi qua usi un tag script, ci piazzi il tuo codice scritto con Gesap anime Jas con Ricresce Animation fra me quello che vuoi e questo scritto lo ritrovi nella build finale.

Quindi funziona assolutamente quello che non puoi fare metterci qui per capirci un un click.

Questo come il Re Act che ti permette di chiamare un metodo non funziona.

Te lo converti in stringa.

Devi creare una event listener o se questa è una lista, devi fare un ciclo da reiterare su tutti gli elementi ad una lista e aggiungere in lista nera così alla vecchia maniera, alla vecchia maniera.

Cioè l'unica strategia è quella.

Ma ora il tempo stringe.

Voglio farvi vedere.

Comunque questo è praticamente astro, no? La possibilità di crescere paginette divise per componenti ni molto simile a qualunque altro framework moderno.

Mai, diciamo così.

Non è che se guardiamo questa pagina potrebbe sembrare quasi riaccada? No.

Il template alla fin fine.

E a proposito di Re Act, ora vi mostro l'integrazione di Re Act e la possibilità di avere un di usare di il di come funziona Liberation L'architettura Isole.

Quindi vi mostro brevemente brevemente.

Allora Poi tra l'altro ho fatto un talk la scorsa settimana dove spiego me queste cose? Ma non c' è ancora la registrazione la Forse la troverete sul canale youtube.

Lo la rifarò questa registrazione perché è un talk interessante.

Dove spiego nel dettaglio poi la teoria no, di quello che stiamo adesso vedendo nella pratica.

Innanzitutto abbiamo una serie di integrazioni.

Io vado su Astro Bild Che il sito astro Bild che mettiamo il mariachi, Vediamo che abbiamo qua Già Ubriaca Hecht.

Volevo vedere qua ad Integration.

Eccola qui.

Vedete, possiamo integrare All'interno di Astro Litt che il premo di Google per il web Pon-pon ubriaca tre Act, soli Jas, svelti! E Wu angolare prototipo.

Cioè, si può anche integrare, ma non funziona benissimo.

E di terze parti e l'integrazione e Alpine Jas.

Ma confido che Angola ci sarà molto presto, il che tra l'altro qui vedete anche gli Adapter, è possibile fare automaticamente il deploy su Cloud flyer Super Sel Netflix, oppure usare dei server custom No nod.

In più qua vedete altre integrazioni l'immagine tail Wind, quelle che abbiamo usato, il March Down, eccetera, eccetera la creazione di un sait map e così via.

Alcuni di questi qui sono tutti ufficiali, mentre ci sono anche cosine di terze parti.

Voglio integrare, riaccolto.

Basta che vado su questa pagina.

Cerco React é il vero amico Astro Command Mpx astro ad che fa il suo sporco lavoro.

Jess mi sta installando che adesso ovviamente sta installando.

Uhm Eric mi dice posso aggiungere che le integrazioni si va bene quello che ho aggiunto in fiducia gli dico di sì e bevo un goccio d'acqua perché quella velocità con cui sto parlando sto morendo abbiamo aggiunto riaccade quindi vuol dire che il nastro config abbiamo adesso anche riavuti incluso allora ovviamente se non l'avete mai visto Re Act adesso è poco importa, no diciamo.

Possiamo integrare un frammento di terze parti, se preferite Wu ho svelto, funziona uguale.

Allora cosa vogliamo fare alla fine della pagina? Vogliamo includere una newsletter, un box newsletter news le per perché vedo come l'ho chiamato quella minuscola così almeno se devo fare copia e incolla di codice punto tsx tsx l'estensione dei freak che sarebbe j sykes in versione typ script.

Visto che ho usato quello é qua dentro metto un componente che si è notato ho copiato adesso una banale component function newsletter questo è j six di relax.

Vedete che infatti, al contrario di astro dove usavo class se lo trovo eccolo qua class che vi ricordo che non supporta classe, ma supporta class nel caso non raggiunge l'integrazione.

Funziona comunque si interrompe l'installazione No, non ti funziona.

Vedresti qui errori perché non ti supporta J.

Sykes? Perché durante l'installazione fa anche delle altre modifiche al file.

Ti sconfiggo se vedi la configurazione di Tahiti.

Aggiunge il supporto a Jessica di relax e altre cose.

Quindi in realtà ti perdi alcuni pezzi.

No, non funzionerebbe.

É il ok è quindi adesso posso andare ad importare questo Questo import non me lo fa in automatico Web Storm Ho provato anche durante i giorni scorsi, quando li provavo la sessione newsletter news non mi fa l'importo della newsletter.

Devo fare la manina e quindi qua io so che ho un po' nel Slash newsletter e, uh, la la Slack te la posso fare Duro newsletter E qui mettiamo newsletter.

Lo importiamo e qua dentro abbiamo un semplice templates.

Vedete un input con un set scrive e poco altro.

Andiamo qui, in questa bellissima pagina Refresh.

Amo, ma mi sa che sono ancora in fase di Bild qua o anzi, forse non funziona più.

Esatto.

Qui andiamo qui ne pm rendezvous.

Ok, andiamo giù.

E questa è la bellissima newsletter.

Ora il problema è che facciamo una cosa vi mostro anche già la versione finale qua.

Questa è una newsletter.

Avrei voluto scriverla da zero tutta.

Però non c' è tempo.

Quindi qua cosa faccio? E abbiamo un forum summit in chiama Metodo Summit un campo di input.

Questo è un controller forme.

Si chiami Re Act.

É un forum in cui il cui input controllato da uno stato.

Quindi qua sopra abbiamo uno stato e-mail c'e' una stringa e ogni volta che andiamo a fare lon change, andiamo ad aggiornare lo stato.

Adesso per chi viene andare ACT sa già di cosa stiamo parlando.

Altrimenti non è un problema adesso un componente interattivo E ogni volta che andiamo a scrivere qualcosina nel campo di input, qua viene fatta la validazione delle mail in modo tale che qua verifico se le mele valida con una ragazza e disabilità il pulsante se di me non è valida adesso non è importante entrare nella logica di questo componente tra l'altro qui il claim applica se le mele valida un nessun nessuno stile.

Lo so che è bruttissimo, ma serviva per fare le cose molto semplici.

Oppure una passiti trenta.

Quindi se lime non è valida.

Il summit dovrebbe vedersi un pochino disabilitato.

Eccolo qua.

Qui se notate il componente dovrebbe funzionare.

Ma non funziona.

Non funziona perché nella realtà questo componente non è ancora interattivo.

Cosa vuol dire? Apro il network console refresh.

Anzi dobbiamo fare la bild ne pm ram build ne PM RAM Preview.

Se io vedo qua la mia pagina non c' è già scritto.

Come fa a funzionare questo componente qua se non è caricato nessun out deve caricarmi che deve caricare il mio codice non va e non è ancora interattivo.

Qui scrivo perché è un campo di input, ma come vedete se anche scrivergli mail valida non non si abilità adesso vi assicuro che il componente non è interattivo.

In realtà è un banale componente html tant'è che se clicco su summit anzi no, non mi fa neanche cliccare perché disabilitato, ma in realtà non fa nulla.

Ecco che entri in gioco che cosa? Questa è banalmente la possibilità di integrare qualunque componente.

Questo potrebbe essere scritto in reati in piu' eccetera lo posso integrare, ma non è interattivo perché di default é e astro prende tutto zero JavaScript.

Allora usiamo il concetto di isola l'isola è praticamente la possibilità di prendere un componente e decidere tramite una direttiva chiamata client quando questo componente deve essere idratato, ovvero quando il già maschi di questo componente dev'essere in non solo caricato, ma anche poi gestito dalla pagina HTML Liberation è un processo che converte una pagina statica in una pagina dinamica attaccando gli event handler sulla HTML in modo che il mio cavallo la mia pagina HTML diventi interattiva.

E con questa direttiva Klein possiamo decidere quando possiamo decidere al caricamento della pagina oppure subito dopo a Ed è una sorta di priorità secondaria.

Potremmo addirittura avere una media quarry quando, per esempio, che ne so il mio template di seicento pixel largo o baseball alla visibilità.

Guardate la figata, Rick.

Compilo la Bild.

Ok, forse eccola.

Faccio la preview.

Ora il mio sito carica zero JavaScript.

Figata! Perché vuol dire che quando io apro la pagina o un caricamento immediato di questi dati ma scrollo scrollo guardate qui.

Scrollo scrollo, scrollo Ed eccolo qui.

Quando il componente che diventa visibile allora mi idrata il codice non solo mi fa loading idrata vuol dire che la mia pagina in quel blocco di codice di quel pezzo di codice diventa interattivo.

Infatti adesso, in teoria, se le mele valida il summit dovrebbe diventare chiaro.

Eccolo lì il click vi mostro fatto banalmente il clic del componente, diciamo dei summit.

Faccio banalmente un allerta, niente di che.

Non faccio la subscription vera e propria.

Questo è il concetto di Park Heights.

Cresciamo anche Highland Architecture, dove possiamo decidere la priorità di queste parti interattive sulla base delle direttive che andiamo a specificare.

E qui abbiamo quattro direttive che sono Lod che la primaria ed é la l'aria vuol dire diamo una priorità per una priorità maggiore o minore visible alla visibilità che quella chiusa per la maggiore.

Quando scrollo rende interattive le cose o la media inquiry che invece anche quella interessante, per esempio su mobile, potrebbe essere un componente, non debba essere idratato.

Risparmio perfetto se ci pensate in questa pagina, pur banale che sia, abbiamo un'immagine bella grande.

Abbiamo dei dati presi dal server.

Abbiamo un componente ARI Act.

Vediamo in sesta pagina.

Qua ha delle buone performance.

Vado su Leith, sono nella build Sì, vado su Lighthouse, che è uno strumento di default per vedere se la pagina performante non imbrogliate desktop richiede meno e meno permaloso.

Andiamo su mobile, che è quella che richiede.

É un po' piu' un pochino più rompiscatole.

Analizziamo il payload.

Io so già che mi sono dimenticato una cosa.

Facciamo l'analisi di performance.

Accessibilità best pratici del SEO Seo.

Insomma, i motori di ricerca.

Vedete qua? Sapevo già che me lo ero dimenticata.

E figo, perché vado qui e poi, se non l'avete mai usato, dovrebbe insultarmi perché ho dimenticato qualcosa.

Il documento.

Non alla meta descriptions.

Mi sono dimenticato di mettere il tag meta descriptions nel layout.

Vado qui nel layout.

Copiamo con molta velocità.

Facevo prima a scriverlo.

Descriptions description.

Ok, quali mettiamo diesis Demos? Perfetto.

Rifacciamo una build.

La Rai Relation non funziona al rendezvous.

No, in realtà andava come anche cliccare Crea un sacco di Ziva scritta All'inizio che serve per far funzionare a St.

Astra.

E tra L'altro appunto.

La State Generation funziona in maniera farlocca, perché in realtà ogni volta che fanno modificati comunque ti rifà le query.

Quindi la modalità deve un pochino farlocca? No, è solo della Bild che possiamo provare certe dinamiche.

Poi magari ne riparliamo più in dettaglio.

Serio.

Faccio di nuovo il test.

È una cosa che vedrete poco perché è difficile, sono i fuochi d'artificio no, perché vuol dire che tutto è andato a buon fine.

Ed ecco qua che abbiamo il sito performante, pur avendo appunto anche un re act all'interno se ci pensate no ok, allora io avrei finito.

Ma se in realtà non mi insulta dietro le quinte nessuno di lerner vi mostro velocemente cinque dieci minuti ancora una così nel blog o un po' di parti che vi faccio vedere proprio banali, banali copia-incolla è per capirci così vi faccio capire un paio di dinamiche su convocato il mio blog.

Chiaramente magari fosse così facile nel senso che è un pochino più complesso, ma gira e rigira alla base questo io posso creare per esempio dentro peggy su una cartella post con dentro dei file march down di fare march down sono lo stile vabbè, i programmatori lo conoscono già il mal d'auto la una sintassi utilizzata per scrivere di solito documentazione in maniera molto veloce e quindi usando per esempio questo è un titolo h uno.

Questo è un titolo accaduto e così via.

Non si possono creare comunque velocemente pagine è documentazione che poi vengono rende realizzate con gli stili vai di Chicca March Down.

Ok, adesso copio incollo, copio, incollo E qua vedete, ho dei march down che hanno delle proprietà.

Non so se vedete, abbiamo un bar down con titolo, autore, descrizione bla, bla, bla.

È qua.

E il contenuto, per capirci o una serie di proprietà standard, tipo i tag No Angolare Act Astrophysics quella quella che è la data di pubblicazione.

Questi rimangono costanti tra i più articoli, mentre aspetta che lo rimettiamo qui nell'uno mentre il contenuto è qua sotto, quindi qui sotto.

Ma penso copia-incolla velocemente.

E dopo vi spiego.

Qui sotto scrivo l'articolo vero e proprio.

Quindi qui posso metterci anche della HTML o se usiamo anche il MD X, una versione potenziata del March Down che include che con la possibilità qui di inserire anche componenti.

Infatti ho un kit di componenti per i miei articoli, uno per il code snippet l'altro per il blitz che un editor interattivo, un altro per l'immagine e così via.

E qui sotto io creo il mio articolo componendo i miei componenti da White No, alla fin fine l'utilizzo E quindi qua questo scriviamo, scriviamo il nostro articolo vero e proprio.

Va bene.

Dopo Gabriele, vediamo un po'? No.

Okay, sì, non ho letto bene la domanda, ma finisco questa parte.

Tanto cinque minuti.

Ve la mostro.

La parte interessante è che vi ho detto che tutto quello che in pay gis é gia' una root.

Quindi se io vado in post ora zero uno non funziona perché sono ancora nella build.

Devo fare la modalità.

Devo andare in modalità deve Eccolo qui.

Abbiamo già il post chiaramente non scannato.

Non ha nessun aspetto grafico di nessun tipo.

Abbiamo solo qua Loren ipsum.

Mettiamo qua uno uno uno Vedete che questo è l'articolo Ma vede solo questo Non vede le proprietà.

Però sono già delle delle.

Ruth, Ora vediamo un po' di cose.

Copio incollo così andiamo veloce.

Vi mostro solo la dritta qui.

Cosa facciamo adesso? Posso usare la funzionalità Astro Blob Definire un Pat Dammi tutti i March Down che sono nella cartella Agis Post.

Questo è un Ray.

É qua, come vedrete adesso non faccio nient'altro che nella mia pagina blog Vedere qua la Reyes gli elementi Vedete, mi ha trovato qua praticamente che cosa? Tutti questi, Mr.

Brown.

E vedete che tutte le proprietà che sono qui sono disponibili dentro un oggetto chiamato front matter eccoli qua e poi abbiamo il per del post post slash giuro che il della della root e questo la reyes quindi non faccio nient'altro adesso che nella mia pagina del blog per mostrare l'elenco di tutti i miei post sostituisco questo con che cosa ho messo qua o il post map un tag li vado a mostrare praticamente il front matter punto titolo ovvero il titolo che c' è qua lo vado a mostrare e per il e il del posto ovvero quando clicco mi va direttamente a posto slash zero uno quindi ho creato velocemente la mia pagina di diciamo di tutti i miei articoli che per la cronaca, per capirci quando vado sul mio sito è una roba del genere io i miei articoli parlando di animazioni, questa animazione fatta con unanime j s per con la neve dovrò cambiarla con quella estiva il mio blog questi sono gli articoli e faccio la stessa identica cosa prendi marc augé mi mostro sta roba in maniera piu' carina rispetto a quella che ho fatto no? E oppure tutorial vedete, vado su uno di tutorial angolare.

Addirittura sono divisi anche multi step e questi sono i famosi componenti che vi dicevo? No, questa è una gif animata tra l'altro che preso un mega rotti, vi dico questo adesso capirete perché però tutti questi sono micro componenti per le tue perle tip tra l'altro anche con la composizione questa tipo usa all'interno del componente per il per il codice che lo stesso che uso qui sotto.

Quindi sono tutti componibili e ho creato il mio blog.

Vi faccio notare questa pagina qua bella grande eppure guardate quanto tempo è stata per per visualizzarla.

Cioè niente sembra quasi locale, no? Il e anche molti step tra l'altro questa quindi veramente immediato.

Il caricamento é usato piu' che praticamente le stesse strategie.

Adesso arriva la chat rispondono a meno che così concludo tutto e vi faccio vedere anche un deploy cinque ancora minuti abbiamo fatto tutto quanto abbiamo quindi creato no, la lista dei post però il posto è un po' bruttino, no, Perché? Perché abbiamo questo march down.

Quello che possiamo fare è creare però un layout esattamente come questo che chiameremo i con lei out March down.

Meglio dargli un nome, magari il layout del mio post.

Un nome che abbia piu' senso, però playout Mark Snow il collo perché siamo una vita a scriverlo questo layout praticamente, che cosa farà un po' di roba e layout della mia pagina se notate un layout che a sua volta all'interno usa un layout, quindi usa il layout standard che così abbiamo HTML tutto quello che serve nella pagina, il footer, eccetera.

Ma all'interno mostra le informazioni di questo file.

Come fa a farlo? Semplicemente perché questi miei March Down possono avere qui layout puntare al layout che userà per rappresentare questi dati.

Quindi in questo in questo qui è nel file tre.

Vi dico che il layout e questo qui é come vedete già me l'ha scannato perché vado qui e che cosa fa? Semplicemente Vedete questo mio Lei al March Down riceve il March down e infatti l'immagine quella dello skate, per esempio, viene presa da Frank Matter che l'oggetto che contiene tutte queste prove spunto image punto guerre oppure il titolo qua mettiamo la parola data pubblica.

La pagate e qua Vabbè, mostro solo una parte.

Oppure prendo i tag e mostro questi due tag qui.

Facendo che cosa? Un format punto tax.

Anche questo si presta a essere un componente tag che ricevono a Ray e lo riutilizzo più volte e così via.

Tutto il resto l'articolo che è scritto qui questa roba qui, se vedete è questa qua sotto ed è usata invece come sloth.

Tutto quello che c' è qui dentro, che siano componenti html eccetera viene messo invece qua come sloth.

Tutte le proprietà invece vengono utilizzate Confront matter punto a nome della proprietà.

E abbiamo creato il nostro micro sito con landing page, blog, blah, blah, blah e tutto il resto.

Proviamo questo sito e ci togliamo il pensiero e ho finito la mia sessione.

Deploriamo questo sito.

Qui ho già un repository with Perché all'inizio quando ho creato il procedimento.

Vuoi inizializzare Sweets? Lo inizializza iamo però non ho creato repository.

Quindi andiamo a sporcare ulteriormente di demo il mio re.

Posi il mio account di GitHub.

Vado qui, creo un nuovo report.

Lo chiameremo astro demo a cancellare perché poi mi dimentico quale posso cancellare.

Quindi chiameremo cancer.

Okay, è bruttissimo.

Però va bene così.

Publico privato può essere tranquillamente privato.

Anzi, facciamo privato prima che così nessuno lo veda e creò repository.

Quando qui aggiungo tutti fai in area di stage, gli do un Comites che il classico finisce al Comites, il primo che facciamo nel report.

Poi vado qui nella pagina di With copio with ad remoto ad origine vuol dire che adesso ho creato la connessione con repository remota e ho creato un alias che si chiama origine, che connette al questo report.

E poi usiamo with pouch menu e gli diciamo più lasciami questo origine nel brand Main portiamo il pusher.

Abbiamo forse il nostro codice sorgente? Eccolo qua e abbiamo deploy ed abbiamo magari abbiamo version nato il nostro progettino.

Ora io uso Vercel Vercel, la piattaforma che ha inventato Next Nextel fremo più usato nel mondo che attualmente, quindi è la piattaforma avercele veramente mi dovrebbero pagare però sponsor si è veramente molto ma molto valida è adesso qua Io sono nel mio account dove ho già un po' di roba demagogo e siti web.

E questo è il sito vero, in realtà il mio blog vero e proprio.

Vado qui e faccio ad New Project.

Vi faccio notare che qui mi arriva subito visto che io mi sono già connesso con Gates.

Arriva qua subito, Astro Democrats Questo perché da qui ho già connesso il mio account Gates.

Potete anche voi farlo tutto gratuito è questa roba qui.

Io sto ancora usando il piano, Frank.

Speriamo che prima o poi non prima sicuramente prima o poi me lo fanno pagare.

Non che è scorretto, ma fino a certi limiti o per certi tipi di utilizzo si può usare freddo.

Io qua una ventina di siti deep loyalty senza pagare.

Quando si raggiunge certe soglie si paga.

Ho gia', per esempio, se voglio aggiungere un altro provider, nightclub o altri devo pagare o anche se in gattabuia un'organizzazione per cui lo devi metterlo, devo mettere in root nel mio profilo Fabio Biondi e non in una sotto organizzazione se non si paga il fatto che sia un altro team.

Comunque guardate qui Astro devo crunch importo qui mi ha gia' rilevato che sta usando astro é in automatico mi riceverebbe se usassi belt wu, eccetera bom lascia il prefetto di default vuol dire che lui sa già che nella bill deve avviare il pm rebuild eccetera se sono cambiati i comandi, ho fatto delle customizzazione.

Posso fare lover raid.

In realtà non faccio nulla.

Deploy.

Qui abbiamo il log, ovvero quello che io faccio il locale per la Bild.

Lo vediamo così vediamo se qualcosa non va a buon fine.

Ce la può fare.

Confido che finisca in dieci secondi.

Vedete qua? Mi ha tra l'altro carino che vi mostra qua anche le pagine Niente.

Non ve le mostra.

Piu' mostrava che aveva generato anche la pagina del March Down.

Uno, due, tre La deploy Iato continua dai Borg Visit Ed eccolo qua lo iato con tutto quello che ci serve.

Questa questo d'inglese era l'email che mi arriva diverse Le abbiamo deplorato con successo il sito La figata é che C' è anche già messo in piedi un processo di continuo si integration se io vado qui per capirci No, vado nel mio blog e vado sull'articolo uno dove alla fine dell'articolo cioè questa dove l'ho messo quando nell'articolo tre Vedete? C'è questa schifezza qui vado Nell'articolo tre ho finito.

E adesso ragazzi, vi lascio ed è questo qui perfetto lasciato questo refuso Viet ad bit comit removed bla bla puss in automatico Adesso vado super cell sul la demo Refresh uova mi dirà che cioè la Bild Vedete Bild in progress but bla, bla clicco.

Vedo anche il log, così posso vedere se la Bill va a buon fine.

Ci sono problemi ecco quello che volevo mostrarvi.

Vedete che mi general Index Post uno che genera Index HTML genera questo Pat.

Quindi ho ben chiaro cosa sta succedendo.

In teoria dovrebbe aver fatto già il deploy.

Visitiamo.

Anzi, andiamo nella pagina tre.

Dovrebbe essere Fresh togliermi questo.

Eccolo qua.

Sparito.

Vedete, in automatico abbiamo adesso un assai integrata e io direi ragazzuoli che ho finito.

Questa è la mia demo.

È quello che volevo mostrarvi un po'.

Abbiamo visto velocemente un pò la struttura del progetto componenti la stati generation Aylan D'architecture integrazione il act March down Insomma, un po' di roba l'abbiamo vista comunque sia la velocità della luce.

Ma spero di avervi dato una buona una un'introduzione permettervi quanto meno un po' di curiosità a usare astro tanto non mi pagano per per farvelo vedere, è semplicemente uno strumento che a me è piaciuto molto, eh? E ultimamente sto facendo diversi interventi su Astro perché lo trovo davvero molto, molto valido.

Vedevo un po' di osservazioni qua tra gli ultimi.

Tra gli ultimi commenti, per esempio, tanto Simon.

Veramente eccolo qua.

Perfetto.

Ok, vedevo Gabriele F.

Che va scritto alle ventidue.

Ventisei qualcosa.

Quando hai finito questa parte, potresti far rivedere brevemente come hai creato il componente che ha inserito.

Ho visto come hai aggiunto, che poi come ha utilizzato il componente, semplicemente usate una delle integrazioni, una delle integrazioni che sono specificate sul sito di Astro Mpx Astro ad Eike svelta, eccetera.

Il componente Re Act è un normalissimo componente react.

Quindi pensa che aumentiamo qui lo schermo.

Vedete, è un normalissimo componente Act.

Quindi se sapete già scrivere act bene.

Sennò, ovviamente, adesso magari mi sembra strano.

Però un normalissimo componente che é nella mia pagina lo importo come farei in Un'applicazione Act e lo East Anzio l'unica, cosa che manca per farlo funzionare.

Potrebbe essere questa la direttiva client che serve per indicare quando fare l'hydra Ashton, in che modo la visibilità all'avvio della pagina e così via.

E questo, se vi serve, cercate su la documentazione di Astro.

La direttiva client dovrebbe essere clancy's inclined.

Derek, ti vediamo se me la suggerisce.

Prenda Rex.

Eccola qua.

Vedete? No, Le direttive Lod con priorità alta idol con proprietà medium visible.

La proprietà low, ovvero la priorità solo perché non viene subito idratato, ma alla visibilità e media.

Vedete cosa possiamo fare che non ve lo avevo fatto vedere Clyde media idratato quando la guida è cinquanta m eccetera eccetera e tra l'altro stanno eccola qua figo anche questo esempio dove vedete come posso integrare più più componenti di più tecnologie con in con questa holly non l'aveva usata.

Questa mi sfugge.

In realtà questa nuova mi sa che non avevo fatto caso e comunque si possa decidere, per esempio seria, che deve essere trattato subito dopo alla visibility e così via.

E inoltre stanno di diciamo adesso anche supportando integrando il supporto di per la creazione di direttive custom.

Posso decidere io anche come quando idratare, ma una figura che ho visto ancora che ne stanno discutendo su github.

Ok al tre cosine vediamo ci sono altre domandine bene, mi fa piacere intanto vedere che sono un po' di spunti in chat sono stati dati molto figo.

Interessante spettacolo.

Bene se ci sono domande con le animazioni, quindi può essere eccola qua.

Può essere utile la direttiva clint per ottimizzare il rendering se se usi bandiera gialla scritto no, non ti serve il client ti serve solo quando devi idratare una, diciamo una un componente esterno.

Se invece qua e vabbé adesso non ho il codice, ma non importa se invece del componente uso l'elemento script e lo faccio in Vanilla Yamazaki non ti serve perché il componente viene già rende Liza nella pagina.

Il tuo scritto viene messo nella sempre incluso nella build, quindi nella zona sud della pagina, e lo usi come se fosse Vanilla Vanilla Giava scritte in realtà ti può far comodo.

In effetti, se tu il componente lo crei in relax, immagina che potresti avere un componente è in In Re Act o per esempio oh si' No vabbè, ci sta.

Potrei avere un componente con un canvas in Act e a quel punto tua Invisible fai caricare Re Act, il tuo canvas e appunto, l'animazione potrebbe visualizzare si visualizzarli dopo.

Altrimenti tranquillo che se tu usi comunque in canvas o la tua animazione in un componente re Act e scusatemi in un componente astro semplicemente del tuo contenuto viene comunque visualizzato subito.

È nella pagina in uno scritto element normalissimo che comunque non ti appesantisce più di tanto, cioè la parte con la la parte che appesantisce caricarti cento kilobyte dire act no, ma se devi caricarti sette righe, venti righe, cinquanta righe di uno script Vanilla just non c' è nessun problema.

Anche io qui faccio così è nel mio sito web.

Vado qua questa un'animazione questo è un componente che si chiamerà non mi ricordo snowboard quello che è il componente animate, quello che quello che è un componente che ha uday dive non è neanche in campagna.

Sai dive queste cose che che gira onorando neanche troppo rango, mi sa e le é praticamente un componente che ha semplicemente l'immagine statica con il classico componenti madge dei divi che vanno, che sono animati tramite uno script che chic la su quelli li' harry ma semplicemente nulla di che.

È delhi piazzata insomma poi non è che dobbiamo per forza avere il cento percento di performance nella pagina alla fine, quindi anche se un po' di meno va bene.

Comunque, come vedete qui non ho al cento percento, eppure comunque tutto molto veloce.

Ok, chiudiamo senza fare troppe marchette, vediamo in modalità serre ad ogni chiamata general html oppure è possibile configurarlo in qualche modo per tenere in cash html avversari me lo chiedevo anch'io sta cosa qua però non può, almeno che io sappia, non gestisce il lo gestisce la cash, lo rigenera ogni volta.

Però se vuoi poi approfondiamo sta parte qua perché non ho visto il nastro due ancora non non ci ho lavorato molto sulla seconda versione.

Non so se hanno migliorato qualcosina, ma secondo me non abbiamo c'è chang si' ed dice animazioni css.

Ci si poteva stare anche le animazioni css, ma in realtà si possono usare librerie, come appunto io ho usato anime jas.

In realtà perché sono scarso fare le animazioni css all'inizio hai parlato di seo e astro.

Stai dicendo quindi che è meglio utilizzare tutto ciò per siti web normale rispetto a fare da password, quindi settanta trenta come percentuale che meglio utilizzare tutto ciò? Si, ovviamente sta roba qui ti serve se fai se hai bisogno di indicizzazione e di performance, ma le performance impattano in maniera diretta l'indicizzazione, altrimenti no, potrebbe aver senso.

Per esempio anche per usare per esempio per documentazione interna puoi creare la documentazione di un progetto figata, secondo me perché puoi creare pagine in march down, integrare di codice interattivi e altre cose in maniera davvero molto semplice, no? Quindi per questo genere nodi progettino per un'applicazione completamente interattiva.

Forse è meglio fare direttamente il re acto quello che è.

Quindi se devi mixare comunque tipo di tecnologia e quindi una pagina reato oppure un reato wu e così via o siti performanti o appunto questo mash-up di tecnologia invece è figo.

Bene, puntiamo tutti i fuochi d'artificio al lighthouse esatto, bo per qualunque dubbio o domanda comunque mi trovate in giro.

Sono uno spammer professionista, quindi se andate sul sito e trovate in fumo nel footer tutti i miei link personale le community per qualunque cosa è scrivetemi pure in privato senza alcun problema.

Direi che gli ho fatto fare abbastanza tardi eh basta! Direi che possiamo chiudere qui e ci vediamo online dove volete.

Intanto vi ringrazio tantissimo per la parte