[Musica] Finalmente c'è anche qualcuno dietro il vetro.È finito l'era di registrare in macchina con i suoni dei gabbiani.Abbiamo un regista vero e proprio e Giovanni che sta seguendo tutta la parte audio.Però non perdiamoci in chiacchiere e passiamo direttamente ai contenuti, perché il podcast è tale se si riesce a trasmettere un minimo di contenuti.[Musica] Iniziamo a parlare di un argomento molto interessante.Ci stiamo spostando nella parte di front-end, quindi da la parte di gestione della puntata precedente dove abbiamo parlato di scrum e metodologie agili per lo sviluppo, ci spostiamo sulla parte di interfacce grafiche.Un elemento importante delle interfacce grafiche è senza dubbio il CSS, quel vestito, quelle regole che noi scriviamo e che servono a dare un vestito alle nostre applicazioni web.In realtà tutto inizia con un approccio vanilla, cioè per tanto tempo abbiamo scritto CSS a mani in manella finché da Twitter è emerso un framework.Il nome Bootstrap è entrato prepotentemente nel mercato dei framework web.Tutti i siti venivano sviluppati con Bootstrap, i componenti però erano sempre gli stessi.Quello che in realtà appariva a livello estetico era abbastanza omogenee...omogeneo.Attenzione, mi emoziono.Stare in uno studio veramente con un regista oggi...so, è una situazione particolare, però...Torniamo, non perdiamoci in chiacchiere e torniamo ai contenuti.[sigla] Quando sviluppiamo la nostra applicazione, possiamo usare tre metodologie.Possiamo scrivere il vanilla CSS, possiamo utilizzare un framework a componenti come Bootstrap, Oppure possiamo utilizzare un nuovo approccio molto interessante che è appunto quello di avere...utilizzare un framework che è basato appunto sulle utility.Per capire meglio posso farvi un esempio.Immaginiamo di essere dei bambini e di voler giocare, fare il nostro castello.Noi il castello lo possiamo fare in diversi modi.possiamo andare in spiaggia, prendere un secchiello, riempirlo di sabbia e là abbiamo fatto il nostro castello, però diventa tutto molto complesso tenere compatta la sabbia, mettere l'acqua, fare in modo che il castello non si sbricioli diventa veramente impegnativo l'alternativa è quella di andarlo a comprare già pronto andiamo, ci prendiamo un prodotto della Mattel e lo mettiamo là e siamo pronti a giocare un'altra alternativa è quella di utilizzare le Lego, dei mattoncini dove andiamo a costruire il nostro castello a dare la forma che meglio preferiamo.Se dovessi portare questo paragone nel mondo tecnologico, beh, quello che emerge è senza dubbio che ognuna di queste metodologie di sviluppo estetico delle nostre applicazioni è diversa.Ognuna fa emergere delle peculiarità, dei lati positivi e dei lati negativi.Iniziamo dal castello di sabbia fatto dentro un secchiello.Questo approccio può essere l'approccio, diciamo, di vanilla CSS, dove prendiamo la tecnologia e iniziamo a scrivere del codice per disegnare un pulsante.Magari abbiamo usato 20 righe, però siamo riusciti a farlo della forma che desideriamo.Per farlo, naturalmente, il processo che ci ha portato alla realizzazione è diventato veramente impegnativo.E la qualità del prodotto finale è senza dubbio limitata se non abbiamo abbastanza tempo da dedicare a questo lato.Per ovviare a questo problema, Mark8 ha sviluppato un framework che in qualche modo ci aiuta a sviluppare le nostre pagine web.il framework si chiama Bootstrap e starei perdendo tempo a raccontarvi come funziona in realtà però Bootstrap...che cos'è? Bootstrap è un framework a componenti la sua struttura infatti presuppone che esistano una serie di elementi minimi che vanno a comporre le applicazioni però la logica e le tipologie degli elementi è predefinita a priori quindi in qualche modo è limitante per esempio la forma delle card, quella, esistono tre modalità di card e da là non usciamo oppure la forma della navbar è sempre statica, non è possibile modificarla se non andando a scrivere del vanilla CSS che va a fare l'override di alcuni lati precisi, di alcune particolarità precise che però da una parte ci avvicina al nostro obiettivo, dall'altra ci porta, ci accompagna nel mondo del cercare di districarsi in una qualità di codice decisamente limitato.Bene, da questo momento in poi gli sviluppatori si sono resi conto di questi limiti.Infatti i cityboots sviluppati con bootstrap sono, da una parte, molto complessi perché nel momento in cui vogliamo uscire dei paradigmi, dei canoni prestabiliti, la qualità del codice degrada in modo molto rapido e poi c'è anche il fatto che fare delle modifiche sostanziali nel momento in cui il codice scala male diventa veramente difficile un altro elemento che rende particolare e limita dal mio punto di vista naturalmente Bootstrap è il fatto che Bootstrap esce già con delle librerie javascript prestabilite infatti nella fase di pubblicazione di Bootstrap abbiamo, dobbiamo in qualche modo pubblicare anche jQuery.jQuery che è stato un framework fantastico ne abbiamo parlato quando abbiamo in qualche modo raccontato Svelte e le novità dell'approccio appunto State Driven nella seconda puntata credo sì nella seconda puntata però in qualche modo jQuery aver jQuery come scelta di default questa cosa un po' non piace, tanto che gli sviluppatori in qualche modo si sono organizzati per sviluppare e per integrare tecnologie alternative all'interno di Bootstrap.Infatti troviamo delle versioni di Bootstrap che includono il framework Vue, troviamo delle versioni di Bootstrap che includono React o Angular, per cui comunque la comunità il limite lo sentiva.Il fatto però di essere limitati del necessariamente avere questo framework javascript di default dal mio punto di vista è una scelta limitante nel senso che io voglio essere libero di poter cambiare le mie pagine quando voglio, le tecnologie quando voglio senza avere delle accoppiate già prestabilite è per questo che in realtà in realtà Bootstrap nel mio processo di sviluppo si è dimostrato limitante e in più diciamo che il fatto che i moduli CSS definiscano dei componenti di tipo a strato per esempio una card, una tabella e una navbar da questo punto di vista ci costringe a modellare delle classi che raccontano la funzionalità intrinseca ma concettualmente un framework CSS in qualche modo ti descrive di che colore è la parete perché deve raccontarti cosa farà quella stanza? Lo so che può sembrare difficile interpretare questa assertione però in qualche modo portare nel CSS come fa Bootstrap appunto il concetto di componente è limitante ed è limitante nel momento in cui abbiamo a disposizione una serie di framework una serie di framework e non solo che ci permettono un approccio ai web components quindi ai componenti web di per sé già il nuovo HTML li prevede per cui perché portare il concetto di astrazione di componente anche sul CSS il cui vero compito è quello di descrivere esteticamente come quell'elemento dovrà apparire e come si dovrà comportare per cui in qualche modo io in questo elemento ci vedo una qualche dissonanza anche a livello concettuale a questo punto la mia esperienza mi ha avvicinato a un nuovo framework chiamiamolo così a un nuovo framework estetico e si chiama Tailwind è un progetto portato avanti da due sviluppatori che tra l'altro sono super disponibili e stanno cercando di sviluppare una comunità facendo delle azioni molto interessanti, una di queste è appunto fare delle sessioni di live programming su YouTube dove mostrano come utilizzare questo tool, però scendiamo più a fondo e andiamo a capire, a provare a capire quelle che sono le funzionalità.Per raccontarvi Tailwind vi devo anticipare in qualche modo, devo fare una piccola premessa su cosa è l'utility first approach nella sviluppo del CSS *ding* per capire che cos'è l'utility first approach nello sviluppo CSS dobbiamo immaginare, ritornare a immaginare CSS come uno strumento che ci permette la definizione estetica di un elemento e niente di più per cui una classe CSS deve andare a descrivere una caratteristica specifica estetica del componente stesso così partendo da quest'approccio gli sviluppatori che sono andati a buttare giù il codice appunto di Tailwind hanno approcciato al problema immaginando una serie di utility quindi sono una serie di classi che rispondono al principio dell'unica responsabilità ogni classe ha un'unica responsabilità quindi risponde a un preciso problema avrò una classe per fare i bordi arrotondati avrò una classe per fare le ombre, avrò una classe per definire le dimensioni di testo, un'altra per definirne il colore.Con la composizione di queste classi, con la composizione di queste classi, io riesco a sviluppare delle interfacce web che rispondono perfettamente a quelle che sono le esigenze estetiche che voglio rappresentare.Facendo così sono libero da qualunque prestruttura, sono libero da qualunque prestruttura e non dovrò schematicamente utilizzare i pattern definiti da bootstrap.Altra cosa, quando scriviamo in vanilla CSS, spesso, specialmente noi, full stack, non abbiamo delle cognizioni chiare di UX design e non siamo dei grandi disegnatori, anche perché se fossimo dei disegnatori avremmo fatto i grafici e non i full stack developer o quantomeno ci saremmo specializzati in frontend per cui portare la razioaurea nell'equilibrio delle nostre aree cercare di avere dei colori che hanno in qualche modo una coerenza estetica diventa molto difficile io alla fine arrivavo quando dovevo fare un pulsante magari il main color era il green facevo con la pipetta mi prendevo il verde abbassavo la luminosità e mi tiravo fuori una versione di colore più scura per raggiungere il mio obiettivo non era coerente in tutto il sito oppure non c'erano delle distanze di default di default tra un colore e l'altro.Bene, per fare questo Tailwind ci mette a disposizione le utility già pronte per una palette di colori interessante qualora volessimo cambiare questa palette di colori un'altra parte interessante di Tailwind è il fatto che ci mette a disposizione un file di configurazione che è facilmente gestibile e ci permette con pochissime righe in un file il javascript di generare automaticamente tutte le classi di cui abbiamo bisogno altra cosa importante di Tailwind non esiste nessun requisito a livello di javascript e quando facciamo i componenti non abbiamo, non dobbiamo gestire delle classi card, list, table, no semplicemente diciamo come vogliamo il bordo, che sfondo vogliamo e via discorrendo per cui facendo una summa Tailwind cosa ci permette di fare? Tailwind ci permette di disegnare esteticamente le nostre pagine semplicemente nella definizione dell'HTML inserendo una serie di classi che ne definiscono attributi specifici ogni classe va a modificare un certo attributo per cui solo modificando l'HTML noi siamo in grado di generare delle interfacce completamente nuove, fresche coerenti e probabilmente anche diverse da tutto il resto.Se poi abbiamo necessità di fare delle delle parti estetiche un po' diverse possiamo comunque usufruire del vanilla CSS e fare le nostre classi classi che in qualche modo ci aiutano a rendere ancora più dinamico più fresca la nostra il nostro front end il front end della nostra applicazione.Altra cosa importante, le dimensioni.Perché le dimensioni contano, come disse quello, no? Le dimensioni sono importanti specie se parliamo di web.Probabilmente non mi sta neanche ascoltando il regista.*risata* No, vi ricordo che stiamo registrando negli studi di Radio Neurocentrale e per questo devo ringraziare Giovanni perché ci permette appunto in questa visita sarda, come ben sapete sono sempre in viaggio, in questa visita a Sarda ci permette di avere un audio di qualità decisamente superiore però cazzate a parte, ritorniamo a parlare di robe serie, ritorniamo a parlare di full stack development e di front end vi dicevo, le dimensioni contano se io vado a vedere la dimensione della libreria di Tailwind una volta compilata, beh, è un pelino più grande rispetto a Bootstrap Naturalmente se vogliamo contenere al massimo le dimensioni, beh, a questo punto andiamo giù di vanilla CSS e risolviamo il problema.Però, se le dimensioni contano, perché adottiamo Tailwind con i suoi limiti anche in contesti dove magari dovremmo anche ottimizzarlo il codice CSS? Perché abbiamo degli strumenti che ci permettono di limitarne la dimensione.Quando noi sviluppiamo una pagina possiamo...mica usiamo tutti i tool che il framework ci mette a disposizione, tutte le utility che il framework ci mette a disposizione.No, assolutamente.Quindi tutte le utility che non usiamo, che allocano spazio in memoria e che appesantiscono il trasferimento, possiamo purgarle.Per farlo utilizziamo una libreria che si chiama "Purge CSS".per cui riusciamo a portare un framework come Tailwind che pesa 70k a dimensioni veramente ridicole per cui occupando poco spazio, occupando pochi byte di trasferimento abbiamo un'interfaccia completamente figa diciamolo, un'interfaccia figa cosa rimane da dire? rimane da dire che nell'esperienza ho trovato un'altra cosa interessante questa vi voglio salutare.Un'altra parte interessante di Tailwind è il fatto che è possibile...Tailwind di per sé non prevede la creazione di componenti però noi magari nel nostro approccio di sviluppo vorremmo creare dei pattern grafici per creare dei pattern grafici possiamo da una parte creare il web component come dicevo prima dall'altra invece andare a creare dei componenti CSS Per farlo abbiamo a disposizione l'istruzione "apply" per cui posso, se io ho un pulsante che ha un bordo nero, il testo in grassetto, i bordi arrotondati, un'ombra piccola, posso semplicemente fare una nuova classe, scrivere "chiocciola apply" e la classe che eredita, fare la lista delle classi ereditate e a questo punto quando andrò a compilare il CSS con "post.css" avrò di conseguenza una classe CSS che contiene tutte le utility.Questo può essere utile per limitare la complessità del nostro HTML perché se noi andiamo a definire tutti i lati estetici del nostro HTML la pagina conseguente diverrà veramente verbosa per cui c'è qualcuno, io no in questo caso perché divido tutto in Web Components, però c'è qualcuno che adora adottare questo metodo.[Musica] In questa puntata un po' speciale di Gitbar abbiamo parlato di front-end.Per la prossima, se riuscirò, porterò un altro argomento interessante ed è il GDPR per i full stack developer.Una serie di piccoli consigli che vengono dall'esperienza che io ho maturato nel settore che ci aiutano nello sviluppo delle nostre applicazioni compliant con quelle che sono i requisiti della nuova normativa sul trattamento dei dati personali da Nuoro e dallo studio di Radio Nuoro Centrale qua è tutto, un saluto a tutti gli amici di Gitbar, il circolo dei full stack developer, un saluto da Brain Repo, ci vediamo la prossima settimana Ciao ciao! per il momento.
