Gitbaritalian
developer
podcast
4

Css, Bootstrap e Tailwind diversi approcci al tuo stile

Serie 1
Episodio 4
Durata 19 minuti

Dare una forma alle tue pagine è una cosa importante, è la fase terminale di tutti gli studi e i ragionamenti di UX. Farlo in modo snello è altrettanto importante. In questa puntata ti racconto come e perchè ho deciso di adottare tailwind css e lo "utility approach".

Ecco alcuni link utili: https://www.scalefocus.com/insights/technical/why-use-tailwind-css-tutorial https://www.reddit.com/r/webdev/comments/cxn8fu/bootstrapbulmatailwind_what_should_i_learn_in_2019/ https://laravel-news.com/tailwindo https://www.sitepoint.com/tailwind-unique-beautiful-websites/ https://2019.stateofcss.com/technologies/css-frameworks/ https://www.toptal.com/twitter-bootstrap/the-10-most-common-bootstrap-mistakes

Contattami a: @brainrepo su twitter o via mail a info@gitbar.it

Music credits: Blan Kytt - RSPN

Trascrizione

Trascrizione automatica realizzata con servizi Amazon AWS Transcribe

finalmente ce anche qualcuno dietro il vetro è finito alla era di registrare in macchina con 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.
Tu e iniziamo a parlare di un argomento molto interessante ci stiamo spostando nella parte di quindi da la parte di gestione della puntata precedente, dove abbiamo parlato di schramm e metodologie agili per lo sviluppo.
Ci spostiamo sulla parte interfacce grafiche, un elemento importante delle interfacce grafiche e 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 che si amano finche' da twitter e' emerso un framework e il nome boom 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 sarà che situazione particolare.
Però torniamo, non perdiamoci in chiacchiere e torniamo ai contenuti.
Quando sviluppiamo la nostra applicazione possiamo usare tre metodologie possiamo scrivere il vanilla CSS, possiamo utilizzare un framework componenti come oppure possiamo utilizzare un nuovo approccio molto interessante che appunto quello di avere utilizzare il framework che è basato appunto sulle utility.
E per capire meglio posso farvi un esempio? Immaginiamo di essere dei bambini e di voler giocare e fare il nostro castello.
No, il castello lo possiamo fare in diversi modi.
Possiamo andare in spiaggia a prendere un secchiello, gli infilo di sabbia e lo abbiamo fatto.
Il nostro castello però diventa tutto molto complesso.
Tenere compatta la sabbia, mettere l'acqua e fare in modo che il castello non si sbriciola diventa veramente impegnativo.
L'alternativa è quella di andarla 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 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 fatto, abbiamo usato un venti righe, però siamo riusciti a farlo della forma che desideriamo per farlo.
Naturalmente il processo che ci ha portato alla realizzazione è diventato veramente impegnativo.
È la qualità del prodotto finale e senza dubbio limitata se non abbiamo abbastanza tempo da dedicare a questo lato.
Per ovviare a questo problema, Mark otto ha sviluppato un framework che in qualche modo ci aiuta a sviluppare le nostre pagine web.
Il premier si chiama Bootstrap.
Starei perdendo tempo a raccontarvi come funziona.
In realtà però, che cos'è è 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 e' per esempio la forma delle card quella Esistono tre modalità di card e dalla non usciamo oppure la forma della nave è sempre statica, non è possibile modificarla se non andando a scrivere del vanilla css che va a fare lo verrai di alcuni lati precisi.
Di qua alcune particolarità a precise che però da una parte ci avvicina al nostro obiettivo 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 siti sviluppati con bootstrap sono da una parte molto complessi perché nel momento in cui vogliamo uscire dai paradigmi dei canoni prestabiliti, la qualità del codice degrada in modo molto rapido e poi c'è anche il fatto che elimi e fare delle modifiche sostanziali nel momento in cui il codice scala male diventa veramente difficile.
Un altro elemento che rende particolare e limitata dal mio punto di vista, naturalmente.
E il fatto che butta esce gia' con delle librerie javascript prestabilite.
Infatti nella fase di pubblicazione di abbiamo dobbiamo in qualche modo pubblicare anche jake, jake quelli che è stato un framework fantastico.
Ne abbiamo parlato quando abbiamo in qualche modo raccontato svelta e le novità dell'approccio appunto, e vedrai venne nella seconda puntata.
Credo nella seconda puntata però in qualche modo ji query aver j quelli 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 wu.
Troviamo delle versioni di che includono riaccade o angolare, per cui comunque la comunità il limite lo sentiva.
Il fatto però di essere limitati necessariamente avere questo primo script di default dal mio punto di vista e' 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à è strano nella mia nel mio processo di sviluppo si è dimostrato limitante e in piu' vi diciamo che il fatto che i moduli css definiscano dei componenti di tipo astratto, per esempio una card, una tabella è una nave bar.
Da questo punto di vista ci costringe a modellare delle classiche, li raccontano la funzionalità intrinseca, ma concettualmente se un css in qualche modo ti descrive e di che colore è la parete, perché deve raccontarti cosa farà quella stanza? Lo so che può sembrare difficile interpretare questa questa questa asserzione pero' in qualche modo portare nel css, come fa appunto il concetto di componente e' limitante ed è limitante nel momento in cui abbiamo a disposizione una serie di framework, una serie di framework e non solo e che ci permettono un approccio al web components.
Quindi i componenti web di per sé già il nuovo html li prevede, per cui perche' portare il concetto di astrazione di componente anche suo il 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, ha un nuovo framework, chiamiamolo, ha un nuovo framework estetico e si chiama tail wind.
È un progetto portato avanti da due sviluppatori che tra l'altro sono super disponibili, stanno cercando di sviluppare una comunità facendo delle azioni molto interessanti.
Una di queste, appunto fare delle sessioni di life programmi su youtube dove mostrano come utilizzare questo tour, però scendiamo più a fondo e andiamo a capire, a provare a capire quelle che sono le funzionalità per raccontarvi Tel Wind vivevo e anticipare in qualche modo devo fare una piccola premessa su cosa è l'utility first approccio nello sviluppo del CSS Per capire che cos'è l'utility festa approcci nello sviluppo css dobbiamo immaginare ritornare, 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ì da partendo da questo approccio, gli sviluppatori che sono andati a buttar giù il codice, appunto ditelo Wind, hanno approcciato al problema immaginando una serie di utility.
Quindi sono una serie di classi che rispondono al principio dell'unica responsabilità ogni classe a un'unica responsabilità, quindi, risponde a un preciso problema avro' 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 web che rispondono perfettamente a quelle che sono le esigenze estetiche che voglio rappresentare facendo così sono libero da qualunque struttura.
Sono libero da qualunque struttura e non dovro' 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 Wickes design e non siamo dei grandi disegnatori.
Anche perche', se fossimo dei disegnatori aveva infatti i grafici che non developer o quantomeno ci saremmo specializzati infront hand, per cui portare la ratio aurea 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 e quando devo fare un pulsante magari il mein colore era il green facevo con la pipetta, mi prendeva il verde, abbassava la luminosità e mi tiravo fuori una versione di colore più scura per raggiungere il mio obiettivo.
Ma non era coerente in tutto il sito oppure non c' erano delle distanze di default di default tra un colore bene.
Per fare questo, quindi 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 vedete lui né del fatto che ci mette a disposizione un file di configurazione che ne è facilmente gestibile e ci permette con pochissime righe non fai JavaScript di generare automaticamente tutte le classi di cui abbiamo bisogno.
Altra cosa importante ditelo wind.
Non esiste nessun requisito a livello di javascript e quando facciamo i componenti non abbiamo non dobbiamo gestire delle classi card liste sable no, semplicemente diciamo come vogliamo il bordo, che sfondo vogliamo e via discorrendo discorrendo.
Per cui facendo un assumma tel wind cosa ci permette di fare? Tel quindi ci permette di disegnare esteticamente le nostre pagine semplicemente nella definizione della ml, inserendo una serie di classi che ne definiscono attributi specifici.
Ogni classe va a modificare un certo attributo, per cui solo modificando la cathy ml noi siamo in grado di generare delle interfacce completamente nuove, fresche, coerenti e probabilmente anche diverse da tutto il resto.
Se poi abbiamo necessità e di per fare delle delle parti estetiche un po' diverse, possiamo comunque usufruire del cessa se fare le nostre classi classiche in qualche modo ci aiutano a rendere ancora più dinamico, più fresca la nostra, il nostro fronte della fronte della nostra applicata.
Altra cosa importante le dimensioni perché le dimensioni contano come disse quello le dimensioni sono importanti, specie se parliamo di web.
Probabilmente non mi sta neanche ascoltando il regista.
Vi ricordo che stiamo registrando negli studi di legge in una centrale, per questo devo ringraziare giovanni perché ci permette appunto in questa visita sarda.
Come ben sapete, sono sempre in viaggio in questa visita.
Salva ci permette di avere un audio di qualità decisamente superiore.
Però cazzate a parte, ritorniamo a parlare di roba e serie.
Ritorniamo a parlare di fusti development e di fronte a hand ti dicevo le dimensioni contano.
Se io vado a vedere la dimensione della libreria ditelo wind una volta compilata beh, è un pelino più grande rispetto a buster, 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 perche' adottiamo tail wind con i suoi limiti anche in contesti dove magari dovremmo anche utilizzarlo il codice css perché abbiamo degli strumenti che ci permettono di limitare la dimensione.
Quando sviluppiamo una pagina possiamo mica usiamo tutti i tool che il ha a disposizione.
Tutte le utility che il ci mette a disposizione? No, assolutamente.
Quindi tutte le utility che non usiamo, che allo spazio in memoria è che appesantiscono il trasferimento.
Possiamo pur galle per farlo utilizziamo una libreria che si chiama Purge css, per cui riusciamo a portare un tremore come te lo wind che pesasse tanto a k a dimensioni veramente ridicole, per cui occupano poco spazio occupando pochi byte di trasferimento.
Abbiamo un'interfaccia completamente figa.
Diciamolo un'interfaccia in cosa rimane da dire rimane da dire che nell'esperienza ho trovato un'altra cosa interessante.
Con questa vi voglio salutare un'altra parte interessante di te, quindi è il fatto che è possibile.
Il telo 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 e creare il web component, come dicevo prima, dall'altra invece andare a creare dei componenti css.
Per farlo abbiamo a disposizione l'istruzione apple ai per cui posso se io un pulsante che ha un bordo nero, il testo in grassetto e bordi arrotondati un'ombra piccola posso semplicemente fare una nuova classe come scrivere cancella fly e la classe che eredita fare la lista delle classi ereditate e a questo punto quando andrò a compilare il CSS composte 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 cioè qualcuno io no.
In questo caso perche' divido tutto il web components, però c'è qualcuno che adora adottare questo metodo in questa puntata un po' speciale di barra abbiamo parlato di fronte per la prossima se Riusciro' portero' un altro argomento interessante del GDPR per il cervello per una serie di piccoli consigli che vengono da l'esperienza che ho maturato nel settore che ci aiutano nello sviluppo delle nostre applicazioni con con quelle che sono i requisiti della nuova normativa sul trattamento dei dati personali da Nuoro e dallo studio di radio loro centrale qua e' tutto un saluto a tutti gli amici di KITT bar il circolo dei developer un saluto da bere il repo Ci vediamo la prossima settimana.
Cosa
Ho bisogno di una mano. Aiutami a rendere più conosciuto il nostro podcast. Parlane con gli amici o con i colleghi e iscriviti usando Apple Podast o Google Podcast. Questa tua azione ci aiuterà a salire nella classifica dei podcast di tecnologia ed essere utili anche a qualcun’altro. Se non ti va, amici come prima😄