A-pollo, una galleria per il tuo CSS

Prima di affrontare nel dettaglio A-pollo, spiegherò perché un bel giorno ho deciso di iniziare a sviluppare questo modulo nodejs.

Dopo quasi due anni in ideato, posso dirlo con convinzione: lavorare in team in maniera produttiva come siamo abituati a fare da queste parti è necessario ma allo stesso tempo assai difficile. Da un lato, per  questioni relazionali, è difficile comunicare correttamente con le persone; dall’altro lato ogni membro del team ha competenze, abitudini e un modo di ragionare diverso che portano senza dubbio a trovare sempre una strada diversa per raggiungere lo stesso obiettivo, anche per un semplice compito come inserire un pulsante all’interno di una pagina HTML che deve rispettare uno specifico stile e un coding standard.

Lavorare all’interno di un team che sviluppa un’applicazione scalabile può essere difficile: la situazione si complica ad esempio quando uno dei membri specializzato su back-end deve creare velocemente un template HTML senza dover chiedere linee guida allo sviluppatore front-end. In questo caso, la difficoltà non dipende tanto dal sapere o meno come si faccia, ma dal far sì che il codice dietro alle pagine rimanga consistente al resto dell’applicazione e ai selettori CSS.

Il problema non è diverso se il nuovo codice è introdotto da sviluppatori front-end diversi: anche in questo caso, rispettare un coding standard senza uno strumento adeguato è egualmente difficile perché è sempre necessaria una verifica incrociata su quello che si produce.

Nell’ultimo progetto in cui ho lavorato come unico sviluppatore front-end, nonostante le buone pratiche (introdotte con l’uso di BEM all’interno di Frontsize), abbiamo notato come ci fossero limiti nella velocità di produzione del codice dovuto a continui riallineamenti tra il team.
Questi riallineamenti erano spesso dovuti al fatto che elementi ripetuti tra pagine non erano coerenti tra di loro, perché il codice HTML differiva in qualche modo o perché i selettori BEM non erano esattamente quelli definiti al ruolo.

Quello che ho visto mancare nel team è uno strumento che permette a tutti di utilizzare lo stesso coding standard visuale del front-end, senza dover perdere tempo a capire dove sono le cose che servono e come utilizzarle con le relative varianti senza rompere il layout.

Alla luce di questo e con il fatto che alle ultime conferenze ho sentito parlare spesso di style guide per il front-end, ho cercato online se ci fossero strumenti utili che potessero contribuire a rendere la vita del team più semplice e diminuire i problemi di questo tipo.

Ho trovato alcuni strumento interessanti:

Questi sono tutti validi strumenti per generare style guide, ognuno di questi si basa su una sintassi differente di inserire documentazione sui CSS ed iniziano ad emergere anche delle versioni per node, l’ambiente di sviluppo che utilizzo per l’automazione e la generazione dei CSS che produciamo in ideato.

Dopo avere visto un po’ come funzionano questi tool, ho pensato di crearne uno che non richiedesse di ricreare la ruota da zero, ma che permettesse di dare a chi lo utilizza la possibilità di crearsi dei temi dedicati ai vari progetti per personalizzarli in base alle esigenze del cliente e dei differenti coding standard.

Così ho iniziato a scrivere a-pollo, un modulo node nato per creare dei manuali di utilizzo del codice CSS che permetta ai membri del team sia di front-end che back-end di seguire una strada comune.

L’obiettivo del modulo è permettere a chi scrive le parti di codice CSS, SASS o LESS, di documentare ciò che fanno suddividendo il lavoro per file widget, in modo da avere un ordine che va verso l’approccio BEM, lasciando libero lo sviluppatore di organizzare e raggruppare i widget creati per categorie e dare la possibilità a chi lo utilizza di potersi creare i propri temi per essere libero di avere una style guide totalmente personalizzabile.

Al momento è possibile ottenere da a-pollo è una style guide come questa: http://vitto.github.io/a-pollo/example/index.html

In pratica tutto il motore che sta dietro ad a-pollo è basato su Hexo, un altro modulo node che permette di generare dei blog statici, molto simile a Jekyll ma tutto su node.

Grazie ad Hexo, è possibile creare dei temi molto flessibili e completamente customizzabili assieme ai dati legati ai widget che arrivano da a-pollo e la sua configurazione che estende quella di Hexo.

Online è possibile trovare una traccia iniziale di documentazione che sarà aggiornata nel tempo per rendere sempre più semplice utilizzarlo:
http://vitto.github.io/a-pollo/

Al momento quello che è possibile fare è:

Sarà implementato:

  • Render CSS base della tipografia e i colori che sono dentro al tema
  • Esempi completi di guideline di utilizzo per CSS e HTML basate sugli articoli più autorevoli che trattano l’argomento
  • Tag dedicate alla documentazione delle funzionalità dei propri front-end basati su SASS o LESS
  • Test di CSSlint per i singoli widget
  • Report dettagliato basato su StyleStats

Attualmente a-pollo è perfettamente funzionante e non da problemi tecnici o impatta in qualche modo sul progetto in quanto crea la propria cartella dove viene generato il mini sito con tutta la documentazione che viene preparata.

Il prossimo passo sarà aggiungere la parte legata ad una serie di articoli default per le guideline e la parte legata alla tipografia e ai colori del CSS.

Stay tuned!