Codice ÆSTETHICO per tutti: è bello scrivere codice? È bello il codice?

Da incomprensibili, monocromatici e antiestetici nugoli di lettere numeri e simboli, le righe di codice hanno preso una propria dignità fino ad essere di fatto protagoniste di numerosi post e composizioni grafiche degne del miglior feature profile su Instagram col nome che inizia per aesth*.

Come è possibile? Il codice (qualsiasi sia il linguaggio) è roba da programmatori, neckbeard, tastiere unte e commit incomprensibili ai profani. Come può essere interessante? Guardandolo senza pensare alla propria funzione, cioè a cosa effettivamente rappresenta. Un po' come un kanji sul braccio che ci sembra molto carino ma in realtà significa "omelette".

Vedo da tempo su Twitter, Instagram e Reddit porzioni di codice molto curate esteticamente. Non il solito codice evidenziato e colorato a seconda del linguaggio ma una insolita .png che nonostante renda impossibile un copia & incolla è bella da guardare. E da mostrare. Un vanity-code. Lo voglio fare anch'io!

Creare immagini dal codice sorgente: ecco Carbon

Come si crea uno snippet di codice esteticamente gradevole? Si usa lo strumento adatto. Il più apprezzato al mondo è Carbon. Gratuito, open source, molto completo. In teoria sarebbe freemium ma in effetti è un modo per invogliare a contribuire con qualche soldo. Meritato, aggiungerei.

Come fosse un qualsiasi editor, si seleziona un tema, il padding, le ombre. Si esporta nel formato preferito (anche svg!) e il gioco è fatto.

Se le features di Carbon ti sembrano un po' modeste, seleziona un'immagine random da usare come sfondo e attiva la funzione che crea una palette di colori basata su quelli della foto. Ecco qua:

Scoprire Carbon mi ha aperto un mondo pieno di esteti del codice che non vedono l'ora di creare composizioni grafiche con le proprie (o altrui) digitazioni. Non è l'unico: Ray.so è uno strumento altrettanto valido ma con decisamente meno features. Silicon è molto acerbo e non ha GUI (argh). Codezen è un altro mini-progetto di uno sviluppatore (in questo caso Rishi Mohan) che forse è ancora online solo perché rinnova il dominio ogni anno. Però è abbastanza completo.

 Creare snapshot di codice da soli

Nessuno vieta di creare qualcosa da soli. Mi riferisco sia al creare una composizione grafica, sia come creare abbozzare un progetto simile. Eh, come?

 Con Photoshop

Nella cover di questo post ho preferito andare sul semplice, ovvero scegliere una mia foto che non avesse troppi dettagli e creare un layer con codice scritto con l'immancabile font Menlo. Ho scelto i CSS perché spesso sono un elementare elenco di proprietà e possono essere facilmente parodizzate con parole custom per rendere il tutto più speziato. Ho aggiunto volutamente un effetto glow su alcune righe perché ho visto che alcuni temi editor usano questa impostazione.

E visto che va di moda da qualche mese, racchiudiamo il codice con un rettangolo simulando il cosiddetto glassmorphism (non presente nel mio esempio perché ci ho pensato quando ormai avevo salvato e chiuso).

Creare una web app simile a Carbon al momento mi sembra un po' esagerato, però resta la curiosità sull'uso in-page di strumenti che evidenzino o abbelliscano il codice.

 Code Beautyfiers & Syntax Highlighters

(Sembrano i nomi di due tag-team di wrestling degli anni '80)

Si tratta di strumenti "cugini" che vanno a braccetto. Il codice è abbellito per gli sviluppatori che dovranno/vorranno lavorarci su. La sintassi è evidenziata per gli esseri umani che devono/vogliono leggerlo con più facilità.

Prettier e Beautifier sono pronti per essere usati online, nel proprio editor, oppure integrandoli in una pagina web. Sono i due big name, mentre se si parla di syntax highlighter vi sono quintali di librerie disponibili. È finita l'epoca in cui <pre> e <code> erano i tag più sfigati del documento HTML.

Ecco infatti il re Prism.js e un sacco di suoi sudditi. Vuoi fare qualcosa di simile da zero? L'articolo di CSS Tricks mi ha fatto passare la voglia.

Tornando all'estetica del codice, sul sito di Prettier.io ho notato una rappresentazione in vettoriale delle righe di codice molto singolare. Già vista su icone e mockup, non avrei mai immaginato che sarebbe stata usata come artwork su magliette e poster.

 Il merchandising ispirato dal coding è stupendo

È evidente che il buonumore assicurato dalle magliette con </head> sul collo e </body> vicino alla cintura è acqua passata. Grazie a Dio.

Ciliegina sulla torta, un copripiumone con federe decorati con un fitto pattern javascript minificato. Fantastico e agghiacciante allo stesso tempo (visto su Fb su qualche pagina freebooter italiana).

Cosa dicevo nella prima uscita di Frontend Allegro? I coders sono finalmente un target a cui proporre prodotti e servizi da vendere. La rivincita dei nerd, che in realtà più tanto nerd non sono. La dimostrazione ce la dà il calderone mondiale del visual content, cioè Instagram.

Un hashtag come #webdeveloperslife non nasce per caso, così come un profilo come @adamthedev che ha una color correction impeccabile e costante da mesi anche se i soggetti ritratti sono lui e il suo computer. E tra l'altro, i colori seguono quelli del tema di VSCode.

Il codice estetico è simbolo di un lifestyle, non c'è nessun motivo per nasconderlo. Ecco il motivo per cui su Unsplash si trovano tantissime foto cercando 'coding' pronte per essere la cover image di qualche post sul proprio blog Jamstack. Le foto dei setup con sfondi desktop minimal, landscape o peggio ancora neonfluomanga sono per i creativi che in realtà non fanno una mazza tutto il giorno, vero? Qui si racconta il webdeveloperslife: social media marketers, voi al massimo potete usare il codice del pixel di Facebook che installa cookies solo a nominarlo.

Qui si racconta il #webdeveloperslife: social media marketers, voi al massimo potete usare il codice del pixel di Facebook che installa cookies solo a nominarlo.

Il mio iter sull'estetica del codice ha parlato di web app pronte a creare snapshot. Composizioni con Photoshop più moody delle frasi di Alda Merini. Web dev che fanno commit dall'estetista. Desk setups che farebbero sfigurare Gianluca Vacchi. Ma il vero protagonista, lasciato non a caso alla fine, è lo strumento. L'editor!

 Desktop setup e VS Code

Qui, lo sappiamo tutti, si parla di fedeltà paragonabili alla religione o a come si prepara la pasta alla carbonara. Parlerò di VSCode perché è uno dei più amati e più esibiti. Ok?

Ai temi di VSCode sono dedicati innumerevoli post, sondaggi, confronti e dibattiti. Addirittura Program with Erik dedica un video da 8 minuti sul suo tema preferito. Su Github ci sono raccolte personalizzate pronte per essere usate e ho trovato anche un'interessante discussione su Reddit su quale fosse il dark theme preferito.

Personalmente non ho preferenze, anzi mi piace cambiare spesso perché trovo che le differenze siano minime. Non amo i dark themes che appiattiscono i colori della sintassi (ad esempio Cobalt Next o Nord) e adoro alternare palette "calde" e "fredde".

Un giorno, giusto per aggiungere un'altra voce alla mia lunghissima to-do list personale, mi divertirò a creare un dark theme. Cosa che in realtà sto già facendo sviluppando la nuova versione del mio sito.

Già, il dark theme.

Questo articolo è stato pubblicato sulla mia discontinua newsletter chiamata Frontend Allegro. Ti piace? Fammi sapere cosa ne pensi!