It will help you improve your skills and understand how to start this journey!
Questo è il layout della pagina realizzato in HTML trasformato poi in quello attuale.
Il template è realizzato basandosi su Roots con una versione modificata dal sottoscritto ovvero Roots-Haml-Compass-CoffeeScript. Questo fork ha diverse caratteristiche come si può vedere dal readme che replico anche qui per i pigri:
- grunt-haml-php – Modded for the last version of MTHAML and fix for the compile #7 and #8 (not in the dependence of packages.json!)
- assetes/sass – SASS folders
- assets/sass/bootstrap – Bootstrap the SASS way (remember to update with the last version (and rename bootstrap.scss in _bootstrap.scss))
- assets/coffee – _main.js file converted in coffeescript
- assets/haml – templates folder files written in HAML
- compass – grunt use compass for compile the SASS files
- Gruntfile.js – modded for the new settings
- lib/scripts.php – added a rule for WP_DEBUG enabled for insert livereload.js in the template
HAML
Vediamo quindi di smontare il tema partendo da HAML (chi non lo conosce qui c’è un’articolo di Andrea a riguardo).
Ho apprezzato Grunt nella realizzazione di questo template che mi ha permesso di scoprire tool come Grunt per Firefox che aggiunge la possibilità di gestire grunt direttamente dai tool nativi di Firefox (di qui ho parlato poco fà).
Nella realizzazione di questo boilerplate ho scoperto che grunt-haml-php aveva dei bug e dei problemi di compilazione quindi ho fixato questi problemi come da #7 e #8 ma ancora non sono stati integrati quindi nel pacchetto di base c’è il modulo di grunt già patchato.
Quindi per il boilerplate ho convertito tutti i file in /templates in HAML.
Il problema principale è l’integrazione di HAML nei vari tool come Netbeans o Kate è fatta male quindi ho sofferto un’pò. Alla fine (nel senso che ormai avevo finito il template) mi sono deciso a scaricare e compilare Atom che lo supporta (Brackets non ha il supporto).
I vantaggi di HAML
Un markup alternativo a HTML che permette di evitare i problemi dei tag di chiusura mancanti e di scrivere un codice ben indentato.
Alla fine non è niente di eccezionale ma il codice compilato è sempre ben indentato ed è più facile da leggere.
SASS
Preso il boilerplate ho sostituito Bootstrap LESS con la versione SASS ufficiale aggiungendo Compass come compilatore (per maggiori info un’altro articolo di Andrea).
La libreria usata per le animazioni è Hover.scss che ho leggermente modificato per i tempi delle transizioni.
Ho realizzato un mixin (informazioni riguardo i mixin sempre di Andrea) perchè le transizioni non avevano i prefissi per i vari browser (cosa strana ma risolta).
Lo schema colore è basato su Makerstrap con un tocco blur che mi piace veramente (per trovare lo sfondo ho dovuto cercare parecchio).
L’animazione sulle finestre modali è basato su AvGround che dà un tocco 3D.
I vantaggi di SASS
Venendo dal mondo Bootstrap mi piace LESS ma era l’ora di passare a qualcosa di più avanzato perchè LESS.JS non permette l’espansione delle funzioni. Principalmente la cosa che volevo di più era Compass che permette di unire gli sprite in automatico generando il codice da solo.
Una piccola ma grande novità insieme alle librerie disponibili.
CoffeeScript
Convertito il file di base (che poi non ho usato per questo sito) ho provato a programmarci e mi è piaciuto ()ci devo ancora prendere la mano.
I vantaggi di CoffeeScript
CoffeeScript è diverso rispetto ad HAML perchè, oltre ad evitare le graffe (come in Python per capirci), scrivendo un codice molto meno verboso e quello generato è ottimizzato secondo le buone norme di JavaScript (qualche esempio di codice).
Un’esempio sono i cicli che invece di essere for sono dei while oppure == viene convertito in ===.
Per chi vuole vedere un confronto tra Javascript, jQuery, Coffeescript e Dart c’è anche quello sulla rete.
Alla fine in questo template non c’è molto codice JavaScript quindi non era strettamente necessario usare CoffeeScript ma era la volta buona per impararlo.
JavaScript
Vediamo di parlare delle librerie usate partendo da Bootstrap di cui ho usato Affix (per il video nella barra laterale) e per le finestre modali (sui social).
Ho utilizzato Bootbox.js per creare le finestre modali on the fly, Backstretch.js per lo sfondo responsive e FlowType.js per avere i testi responsive in automatico senza usare rem/em o media queries.
Ho implementato un carousel da zero molto velocemente perchè la nativa di Bootstrap scorre solo in orizzontale mentre mi serviva un sistema verticale (si può vedere in home).
Per l’easter egg che è stato trovato subito 0.o invece è diverso.
Oltre a non capire come lo avete trovato subito è realizzato con i canvas basato su questo snippet, che ho modificato per essere generato on the fly e scritto in CoffeeScript.
Non credevo che tutti avrebbero pensato a cliccare in vari punti del sito invece di aprire Firebug o altri tool e fare un’pò di debug cercando gli eventi sulla pagina. La prossima volta sarà una gesture così vi frego tutti.
Se l’hai trovato subito te pozzano XD. Se non l’hai trovato clicca sul footer.
Plugin
I plugin utilizzati già da tempo sono Crayon Syntax Highlighter (per il codice nei post), AddThis (con un fix), Disqus, Download Monitor, SZ-Google, WordPress SEO e W3 Total Cache.
Il sito è pensato per il multilingua grazie a Ceceppa Multilingua ma convertire il vecchio materiale in inglese o viceversa è un lavoro veramente lungo quindi vedremo cosa potrò fare a riguardo.
Ho installato FontAwesome 4 Menu che aggiunge le icone di Font Awesome direttamente nel menù.
Github Embed è per aggiungere il supporto OEmbed ai link di github.
Promote MDN (la versione di github è più aggiornata) per aggiungere il box nella barra laterale per promuovere MDN e inserire dei link automatici riguardo alcuni termini web.
WP-Xagithub-activity aggiunge un widget con le ulime news su Github, che aspetta una mia pull request per alcuni fix.
Per il portfolio ho usato Aeolus – Creative Portfolio con alcune modifiche che ho segnalato qui, qui e qui e qui.
Qui c’è il repo del template 🙂
https://github.com/Mte90/Mte90-2014
Perchè la nuova grafica
Il sito richiedeva una migliore presentazione dei miei lavori con un portfolio migliore, il supporto multilingua e la presentazione di me stesso.
Oltre ovviamente al rinnovamento 🙂
