Categories
La mia professione Opinioni Web Design

Cronache dal Front-end

Di tutte le professioni coinvolte nella realizzazione di un’applicazione web la più semplice è senza dubbio quella del front-end developer, voglio dire: non bisogna nemmeno imparare a programmare sul serio!

Tutto quello che bisogna sapere per svolgere il lavoro di front-end developer è un po’ di HTML, insomma pochi tag, e spesso si lascia che sia un software a fare tutto, ma almeno le basi di HTML è bene saperle.

Svolgere le mansioni solitamente affidate a un front-end developer è quindi semplicissimo: se dobbiamo scrivere un titolo si utilizzerà il tag <H1>, per un collegamento ipertestuale invece c’è il tag <A> e in men che non si dica il lavoro è fatto.

Prima di arrivare al front-end developer il lavoro è già passato sotto le mani di un grafico, prima del grafico il lavoro è stato dettagliatamente descritto da un progettista, quindi il front-end developer non deve fare altro che mettere assieme ciò che è già stato pensato da altri, non deve nemmeno sforzarsi di capirlo.

Ecco che dal reparto grafico arriva il layout, diamo un’occhiata:

Il titolo, come uscito dalla creatività del grafico
Il titolo, come uscito dalla creatività del grafico

Questa è di certo un’intestazione, facile, basterà utilizzare il tag <H1>, poi con un po’ di stili potranno essere cambiati i colori, le dimensioni e il tipo di carattere.

In fondo tutto quello che bisogna sapere per svolgere il lavoro di front-end developer è un po’ di HTML e di CSS, non è come fare il grafico che richiede nozioni di teoria del colore, principi di UI, composizione visiva.

Ecco fatto, consegnato in pochi minuti:

See the Pen CFT – Titolo 001 by Daniele Alessandra (@DanieleAlessandra) on CodePen.0

Squilla il telefono.

Pronto? Qui è il reparto grafico, ci siamo accorti di un’enorme discrepanza tra la richiesta e il lavoro eseguito.

Cosa?

I puntini! Non vede che in grafica sono rotondi? Sul sito li vedo quadrati!

Quali?

I pallini! Insomma, come li chiamate voi? Quelli sotto al titolo!

Quelli grandi tre pixel?

Quelli!

Cose che capitano, la vista di un front-end developer non è mica buona come la vista di un grafico, e comunque si risolve facilmente usando un’immagine.

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, un po’ di CSS e un software per le immagini raster. Dopo tre minuti con Photoshop ecco consegnato:

See the Pen CFT – Titolo 002 by Daniele Alessandra (@DanieleAlessandra) on CodePen.0

Squilla il telefono.

Pronto? Ma perché questi pallini si vedono così male?

Quali pallini?

Sempre gli stessi! Ma li hai guardati sul display Retina HD®?

Veramente a me hanno dato un vecchio CRT per fare tutto, ma perché? Si vedono male?

titolo-retina

Cose che capitano, ma per fortuna possiamo dare la colpa all’hardware e poi esiste la possibilità di salvare le immagini in formato SVG, che è vettoriale e non teme nessuna risoluzione.

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, un po’ di CSS, un software per le immagini raster e uno per le immagini vettoriali. Ecco, grazie a tre minuti su Illustrator, finalmente il lavoro consegnato come richiesto:

See the Pen CFT – Titolo 003 by Daniele Alessandra (@DanieleAlessandra) on CodePen.0

Questo è il momento in cui, finalmente, il front-end developer sa di aver compiuto il suo lavoro, ma…

Squilla il telefono.

Pronto? Qui è il reparto progettazione, come mai il titolo ha il bordo solo sotto?

Quale bordo?

I pallini? Come mai solo sotto?

Queste sono le indicazioni che sono arrivate dal reparto grafico, non va bene?

Ma no! Questo bordo non è in linea con la UX che abbiamo progettato: il titolo deve essere bordato sui quattro lati!

Posso avere un riferimento grafico?

No, a quest’ora il grafico è già andato via, fai tu, devi mettere il bordo sui quattro lati.

Anche queste sono cose che capitano, ma per fortuna i CSS si sono evoluti nel tempo ed è adesso possibile utilizzare un’immagine come bordo di un elemento.

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, un po’ di CSS, meglio se CSS3, un software per le immagini raster e uno per le immagini vettoriali.

Il risultato finale (?) e questo:

See the Pen OXkrQG by Daniele Alessandra (@DanieleAlessandra) on CodePen.0

A questo punto non c’è davvero nessun’altra cosa che non vada: è vettoriale, è sui quattro lati, e anche cambiando il testo all’interno il bordo si riadatta. Capolavoro!

Squilla il telefono.

Pronto? Qui è il project manager, avevamo stabilito delle linee guida, recentemente, le avete avute?

Di che stiamo parlando esattamente?

Ho visto la pagina con il titolo, ma noi avevamo stabilito che i testi, per un maggiore contrasto, dovessero essere di colore bianco.

No, guarda, io ho seguito il riferimento grafico che mi è stato dato.

Ecco, dovresti fare in modo che io possa cambiare il colore di questo testo, per fare diverse prove.

Guarda, è molto semplice, se apri il CSS con il blocco note…

QUESTO LO SO, non siamo stupidi, solo che io cambio il colore del testo ma i pallini rimangono sempre uguali, dove si trovano nel CSS?

Nel CSS non ci sono, puoi usare Illustrator, InkScape o…

Ma io non ne capisco niente di questi programmi assurdi, non è il mio lavoro, è il tuo.

Il front-end developer non si lascia scoraggiare da questo tipo di richieste: lui sa che un’immagine SVG non è altro che un XML che descrive forme e colori.

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, un po’ di CSS, meglio se CSS3, un software per le immagini raster, uno per le immagini vettoriali, XML e il suo derivato grafico SVG.

Quindi decide di inserire direttamente il codice XML dell’immagine di bordo all’interno del CSS. Dopo qualche minuto presenta questo risultato:

See the Pen CFT – Titolo 005 by Daniele Alessandra (@DanieleAlessandra) on CodePen.0

Riiiiing!

Ma cosa è questa cosa?

È il bordo, vettoriale, in formato SVG, scritto direttamente nel file CSS.

E cosa dovrei farci?

Le prove, hai detto che ti serviva provare diversi colori.

Ma perché non lo fai tu? Sei stato velocissimo, te la caverai con tutte le varianti.

Eh?

Ti mando un elenco di colori che vorrei provare, sono solo 5.

Va bene, li preparo subito.

Ognuno di questi vorrei provarlo con varie opacità, diciamo 20, 40, 60, 80 e 100%

Quindi cinque colori per cinque varianti di opacità, fanno venticin…

E comunque anche la dimensione dei pallini, vorrei vedere che aspetto hanno se li disegniamo, oltre che 3 pixel, grandi 5, o 10, o 20, e perché no 50!

E cinque varianti di dimensioni per venticinque andiamo a centoventicinque!?

Che poi se variamo la dimensione dovremmo variare anche la distanza tra loro, provameli tutti a distanza di 5, 10, 20, 50 e 100 pixel.

Sono seicentoventicinque varianti!

Si, io adesso devo andare via, domattina li trovo, vero?

Il lavoro del front-end developer è spesso ripetitivo, e per questo ogni tanto è utile cambiare approccio. Per evitare di passare tutta la notte a creare varianti ripetitive della stessa sciocchezza in CSS il front-end developer può automatizzare il processo, affidandosi a Sass o a Less.

Ecco come potrebbe essere un mixin Sass da richiamare per generare al volo un bordo fatto da una fila di cerchietti di cui si conosce diametro, distanza, e colore:

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, un po’ di CSS, meglio se CSS3, meglio ancora se preprocessato da Sass o Less, un software per le immagini raster, uno per le immagini vettoriali, XML, il suo derivato grafico SVG.

Per evitare di rimanere tutta la notte a scrivere codice CSS ripetitivo, quindi, il developer decide di scrivere in Sass, ma avrebbe potuto scegliere Less, e dopo qualche minuto, grazie a Grunt, tira fuori più di 3700 righe di CSS:

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, un po’ di CSS2 e CSS3, un po’ di PhotoShop, un po’ di Illustrator o InkScape, un po’ di XML e SVG, un po’ Sass o Less e un po’ di Grunt o Gulp.

Così come ha utilizzato Sass per generare migliaia di righe di CSS, il front-end developer sa che può sempre contare su Slim, su Markdown o su altri linguaggi di templating che lo aiuteranno con più di 1800 righe di HTML, siccome ha un po’ di dimestichezza con Ruby decide di utilizzare Slim, e scrive sei righe sul suo editor

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, anche nella sintassi Markdown o Slim, un po’ di CSS, meglio se CSS3, anche compilato da Sass o Less grazie a Grunt o Gulp, poi un software per le immagini raster, uno per le immagini vettoriali, poi XML e il suo derivato grafico SVG.

E quindi il lavoro alla fine viene consegnato così:

See the Pen EyLKPL by Daniele Alessandra (@DanieleAlessandra) on CodePen.0

Tutto qua. Alla fine della giornata il front-end developer va a casa contento: lui è fortunato ad avere un lavoro in cui non sia richiesta quasi nessuna conoscenza tecnica, non è come i back-end developer che sanno fare le query sul DB, non è come i grafici che devono conoscere i colori, non è come i Project Manager che devono sapere come inoltrare una mail.

Domani il front-end developer dovrà aggiungere qualche piccolo script per richiamare in modo asincrono alcune variabili, e poi dovrà disegnare un grafico a torta all’interno di un canvas, ma alla fine questo è il suo facile compito.

Tutto quello che serve sapere per svolgere il lavoro di front-end developer è un po’ di HTML, almeno HTML5, anche nella sintassi Markdown o Slim, un po’ di CSS, meglio se CSS3, anche compilato da Sass o Less grazie a Grunt o Gulp, poi un software per le immagini raster, uno per le immagini vettoriali, XML, il suo derivato grafico SVG, e JavaScript, in ES6 o con CoffeScript e TypeScript, per potere utilizzare AngularJS e valutare la necessità di includere jQuery, e poi bisogna conoscere bene i vari motori di rendering dei browser, e il protocollo HTTP.

È molto facile stare al front-end.

Loading spinner

2 replies on “Cronache dal Front-end”

Grazie, ho scritto questo articolo qualche anno fa, vedo che l’esempio su CodePen non funziona più come prima ma ancora rende l’idea. Chissà se troverò il tempo di aggiornarlo :D

Loading spinner

Leave a Reply to Lucio Cancel reply

Your email address will not be published. Required fields are marked *