Nuxt.js è un framework frontend per la creazione di applicazioni e di siti Web con caratteristiche molto interessanti come il Server Side Rendering (SSR), l’organizzazione del codice a pagine e componenti, l’hot reloading in fase di sviluppo, il building degli assets, la generazione di siti statici (quindi senza necessità di Node.js o linguaggi server side) e molto altro.

I pilastri di Nuxt.js sono: Vue.js (per la gestione/coding del frontend) e Webpack (per la gestione del flusso di sviluppo), quindi se avete delle competenze con questi due strumenti, sicuramente vi troverete a vostro agio con Nuxt.js. Invece a chi è nuovo a tutto questo mondo, direi di stare sereni, la curva di apprendimento è veramente molto bassa.

Installazione e setup di Nuxt.js

Per inizializzare l’ambiente locale con il framework Nuxt.js avete due opzioni: partire “from scratch” oppure utilizzare un template messo a disposizione dai creatori di Nuxt.js. In realtà, se approfondirete la questione, scoprirete che ci sono un sacco di template di partenza molto interessanti. Il mio suggerimento è quello (per ora) di partire dal template base. Per effettuare il setup con tale template, occorre utilizzare vue-cli, uno strumento a linea di comando che automatizza alcuni passaggi con Vue.js (ricordo Vue.js è alla base di Nuxt.js).

Se non avete vue-cli installato, installarlo tramite il solito npm:

npm install -g vue-cli
vue --version

Con il comando vue installato è possibile procedere con la configurazione di Nuxt.js:

vue init nuxt/starter nuxt_website

dove nuxt_website è il nome della directory in cui verrà creata tutta la struttura di files necessaria per iniziare a sviluppare con Nuxt.js.

Il comando vue init nuxt/starter è interattivo, pone alcune domande come:

• nome del progetto (senza spazi);
• descrizione progetto;
• autore.

Una volta completata l’esecuzione del comando vue init, entrare nella directory appena creata ed installare i pacchetti necessari a Nuxt.js tramite il comando npm install:

cd nuxt_website
npm install

Quindi eseguire il server di sviluppo tramite il comando:

npm run dev

Tale comando prima di avviare il server locale:

• esegue un controllo formale e sintattico dei files;
• ricompila gli assets;
• ricarica al volo la pagina a seguito di una modifica tramite hot reload.

Comandi Nuxt.js

Nel file package.json nella sezione script sono presenti una serie di comandi utili per lo sviluppo e per la generazione degli assets da utilizzare per l’ambiente di produzione:

• npm run dev: è utile per poter avviare il server locale in modalità hot reloading (con check formale dei files);
• npm run build: utile per “fare la build” e quindi creare gli assets necessari per gli ambienti di pre produzione o produzione;
• npm run start: per avviare il server locale senza però effettuare il processo di build ma utilizzando i file e assets generati dal comando npm run build;
• npm run generate: genera i file necessari affinché il progetto sia eseguibile in modalità statica.

Caso di esempio

Per dimostrare la potenza e la facilità di utilizzo di Nuxt.js, partiamo da un tipico caso di utilizzo. In realtà è un caso semplificato, ma utile per vedere i vari passaggi.

L’obiettivo è quello di creare un minisito con una struttura del tipo:

• home page che risponde alla rotta /
• pagina prodotti che risponde alla rotta /prodotti
• pagine dettaglio prodotto che rispondono alle rotte /prodotto/:slugprodotto

I prodotti saranno censiti in un file JSON con una struttura del tipo:

• slug: o identificativo, utile per la creazione dell’URL univoca di dettaglio prodotto;
• id: identificatore;
• name: nome del prodotto, da utilizzare anche nel titolo di pagina
• description: descrizione del prodotto, da utilizzare anche nel meta description;
• imageUrl: immagine di dettaglio prodotto;
• thumbnailUrl: immagine più piccola utile per il listing di prodotti;
• price: il prezzo

Pagine, routing e componenti

Prima di procedere con l’implementazione è necessario spendere due parole sul meccanismo di routing utilizzato in Nuxt.js.
Nella directory pages di Nuxt.js sono presenti directories e files con estensione vue.
I nomi di file e i nomi di directories sono importanti perchè utilizzati per comporre le rotte.

Esempio: se si volesse una rotta /prodotti è sufficiente creare un file vue di nome prodotti sotto la directory pages/.

Se si volesse avere una rotta /prodotto/principale è sufficiente creare una directory prodotto/ sotto la directory pages/ in cui creare un file vue di nome principale (pages/prodotto/principale.vue).

Ci sono dei casi particolari, come la home page e le rotte dinamiche.
Per avere la home page è sufficiente creare un file index.vue sotto la directory pages/ (pages/index.vue).

Per avere le rotte dinamiche con un parametro, occorre utilizzare il carattere _ nella definizione del nome del file .vue.

Nel nostro caso, creiamo:

• pages/index.vue: la home page;
• pages/prodotti.vue: la pagina con elenco prodotti;
• pages/prodotto/_slug.vue: la pagina di dettaglio prodotto, l’ultima parte dell’URL è utilizzato come “slug” e utilizzato come parametro. Nel caso corrente, esempi di URL valide sono: /prodotto/ananas (in questo caso lo slug è ananas) e /prodotto/keyboard (in questo caso lo slug è keyboard).

Creazione dell’Home page

Nella directory pages, troviamo già un file index.vue. Quel file rappresenta la home page.

Il file relativo alla home page è:

Due sono le cose interessanti in questo primo file:

• l’organizzazione a componenti con le classiche sezioni: template / script / style
• il meccanismo di link utilizzato da Nuxt.js tramite il componente nuxt-link.

Meccanismo di linking

Nella sezione template troviamo un tag “custom” : nuxt-link. Questo è un componente vue implementato da Nuxt.js e serve per creare i link tra pagine e rotte interne. Per esempio in questo caso rimandiamo alla pagina Prodotti:

<nuxt-link to="/prodotti"  class="button--green">Prodotti</nuxt-link>

Come si nota, al componente nuxt-link è possibile passare diversi attributi, alcuni specifici per il componente stesso (come l’attributo to) e alcuni specifici per il classico html (come l’attributo class).
La sintassi per invocare nuxt-link è la stessa di router-link (fornito da router-vue, modulo pesantemente utilizzato da Nuxt.js)
https://router.vuejs.org/en/api/router-link.html

Creazione pagina prodotti

La pagina prodotti risponde all’URL /prodotti, e per questo è stato creato un file prodotti.vue sotto la directory pages/.

La sezione script del file prodotti.vue è:

<script>
import products from '~/static/products-list.json'
export default {
  asyncData (context) {
    var howmany = Object.keys(products).length
    return {
      products: products,
      howmany: howmany,
      headtitle: 'Elenco prodotti'
    }
  },
  head () {
    return {
      title: this.headtitle + '(' + this.howmany + ' products)'
    }
  }
}
</script>

Gli aspetti interessanti di questa sezione script sono a mio avviso:

• la modalità di caricamento del file JSON tramite direttiva import. Tale metodo è valido sia per quanto la pagina è caricata server side che client side;
• il file JSON è memorizzato sotto la directory static/;
• il carattere ~ nella definizione del file da importare (tale carattere assume il significato di: la directory dei sorgenti);
• l’utilizzo del metodo asyncData() per il caricamento dei parametri da utilizzare poi nella sezione template secondo la sintassi {{ parametro }};
• l’utilizzo del parametro context, come primo parametro del metodo asyncData. Provate a fare un console.log() di quel context e troverete un sacco di cose interessanti;
• il metodo head(): per l’impostazione dei tag presenti nella sezione head della pagina poi generata. Utile per avere il controllo anche di tutte quelle impostazioni SEO. Nell’esempio nella pagina prodotti è stato impostato un titolo di pagina, con evidente accesso anche ai parametri impostati nel metodo asyncData.

Il file prodotti.vue è disponibile all’URL: https://github.com/roberto-butti/nuxtjs-tutorial/blob/master/pages/prodotti.vue

Il file JSON: https://github.com/roberto-butti/nuxtjs-tutorial/blob/master/static/products-list.json

Creazione pagina dettaglio prodotto

Anche in questo caso la pagina vue, carica il file JSON con la stessa modalità della pagina precedente. La nota interessante su questa pagina è il recupero del parametro nell URL: /prodotto/ananas.

Il metodo asyncData() riceve come parametro context. Tale oggetto contiene anche l’oggetto params il quale contiene tutti i parametri di input. Nel caso della pagina corrente (pages/prodotto/_slug.vue) il parametro è “slug” e lo si può recuperare tramite context.params.slug.

<script>
import products from '~/static/products-list.json'
export default {
  asyncData (context) {
    console.log(context.params.slug)
    console.log(products[context.params.slug])
    return { slug: context.params.slug, product: products[context.params.slug] }
  },
  head () {
    return {
      title: 'Prodotto - ' + this.product.name,
      meta: [
        { hid: 'description', name: 'description', content: 'Descrizione prodotto' }
      ]
    }
  }
}
</script>

Il file _slug.vue completo è: https://github.com/roberto-butti/nuxtjs-tutorial/blob/master/pages/prodotto/_slug.vue

Il repository completo e i sorgenti li si possono trovare direttamente qui: https://github.com/roberto-butti/nuxtjs-tutorial.

Conclusione

Questa è una veloce panoramica su alcuni aspetti di Nuxt.js, però vi può mettere in pista per poter fare i vostri primi esperimenti. Sicuramente ci sono un sacco di approfondimenti da fare, fatemi sapere se volete che mi focalizzi su qualche aspetto in particolare.

Al momento sto usando Nuxt.js e questo tipo di approccio SSR (Server Side Rendering) per piccoli siti ove non è prevista una manutenzione di contenuti da un classico team editoriale. La differenza sostanziale è che questo tipo di approccio, permette di evitare logiche esplicite server side, quindi evitare di installare il classico CMS sul server di produzione, ed evitare di avere un Database.

Al prossimo articolo vediamo come generare il progetto statico per poterlo rendere disponibile tramite ambiente di produzione.

Come creare un sito Web con Nuxt.js was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dopo aver visto come installare WebPack e Babel, vediamo come aggiungere al proprio ambiente di sviluppo anche Vue Loader, un modulo che permette di organizzare il proprio codice a moduli Vue. Un modulo Vue, tipicamente contiene le sezioni:

• “template”: il codice HTML;
• “script”: la logica Javascript;
• “style”: la personalizzazione grafica (CSS).

In ciascuna sezione è possibile utilizzare i “dialetti” preferiti, per esempio JADE per il template, e SCSS per lo style.

Aggiungere i pacchetti necessari

Per aggiungere i pacchetti legati a VUE necessari, utilizzare come al solito, utilizziamo il comando yarn:

yarn add css-loader node-sass sass-loader --save 
yarn add vue vue-loader vue-template-compiler --save

Tale comando aggiornerà i vari file package.json e yarn.lock e procederà in autonomia con l’installazione dei pacchetti.

Aggiornamento webpack.config.js

Apportare le modifiche al file webpack.config.js in modo venga attivato Vue Loader.

In sostanza, le modifiche effettuate al webpack.config.js sono:

• caricamento vue-loader;
• aggiunta di una regola (module/rules) in modo che venga abilitato Vue Loader con le opzioni per il riconoscimento di SCSS e SASS;
• aggiunta di un alias per Vue.

Fatto questo è possibile implementare il nostro primo modulo Vue.

Creare la directory src/components/ in cui creare il file Timer.vue.

Il componente Vue di esempio Timer.vue è composto da tre sezioni: template, script e style. In un unico file abbiamo tutto quel che serve al nostro modulo “Timer”.

Nel file HTML ora è possibile dichiarare un tag chiamato timer.

Abbiamo implementato il componente e abbiamo definito la pagina in cui risiederà il componente, ora è sufficiente registrare il componente e attivarlo.

Nel file app.js, creiamo una istanza di Vue e carichiamo il componente (con il metodo Vue.component a cui passiamo il nome del tag custom HTML utilizzato e il nome del file con estensione .vue)e :

Avviare il server di sviluppo locale con il comando:

webpack-dev-server --inline

Aprire il browser e accedere all’URL http://localhost:8080/ (o all’URL visualizzato al momento del lancio di webpack-dev-server) per verificarne il funzionamento.

Che cosa abbiamo fatto

Riepiloghiamo cosa abbiamo fatto i questi 3 articoli. Abbiamo creato ambiente di sviluppo locale in cui è possibile strutturare l’applicazione Vue in componenti e soprattutto abbiamo attivato un workflow tale per cui ad ogni modifica apportata ai sorgenti, vengono attivati automaticamente una serie di task (traduzione ES6, traduzione SASS / SCSS). L’effetto ottenuto è che il browser riporta in tempo reale tutte le modifiche mentre stiamo i nostri componenti VUE.

Parte 1:

Primi passi con Webpack e Vue.js 101

Parte 2:

Primi passi con Webpack e Vue.js 102

Parte 3: in questo articolo abbiamo visto come attivare “Vue Loader” e agganciarlo al flusso di sviluppo in modo da poter organizzare il codice in componenti Vue sfruttando gli automatismi configurati nelle parti 1 e 2.

roberto-butti/tomato

Primi passi con Webpack e Vue.js 103 was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

ES6 è l’evoluzione del linguaggio Javascript che ha l’obiettivo di migliorarne la leggibilità, la semplicità e aumentarne la potenza espressiva.
Molti browser supportano ES6 in maniera parziale. Per questo esistono strumenti come Babel che permettono di tradurre codice scritto secondo la sintassi ES6 in Javascript “classico”.
Questo significa che ad ogni modifica a file ES6 occorre “ricompilare” il file per poter ottenere il file in formato Javascript “classico”.

Babel

Lo strumento che ci permette di tradurre la sintassi ES6 in sintassi Javascript è Babel.

Tramite il package manager Yarn, aggiungere quel che serve per poter utilizzare Babel:

yarn add babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 --save

Il comando, installa i vari moduli che servono e aggiunge le righe necessarie ai files package.json e yarn.lock.

Attivare la compilazione ES6

Nel file webpack.config.js aggiungere le regole per la compilazione ES6:

module: {
    rules: [{
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: [{
            loader: 'babel-loader',
            options: {
                plugins: ['transform-runtime']
            }

        }]
    }]
},

Aggiungere il file .babelrc

Creare il file .babelrc .

Attenzione, tale file è fondamentale, senza di esso il processo di build non fornisce nessun errore ma non viene attivato il processo di “compilazione”.
Il file .babelrc di esempio:

{
  "presets": [
    ["es2015"]
  ],
  "plugins": ["babel-plugin-transform-runtime"],
  "comments": false
}

Testare il corretto funzionamento

Per testare la corretta attivazione di Babel nel processo di “build”, provare a utilizzare una funzionalità specifica presente in ES6 e non in Javascript “classico”. Per esempio, nel file app.js (nella directory src/), stampare la stringa “Hello World!” tramite una “arrow function” (funzionalità presente in ES6):

const f = m =>{
 console.log(m)
}

f("Hello World!");

Nel web inspector del vostro browser ora dovreste trovare nella Console il vostro “Hello world!”.
Questo potrebbe essere un test non completamente affidabile, infatti se il browser utilizzato supporta le arrow function, vedreste comunque la stringa “Hello World!”.
Per effettuare una verifica completa, ispezionare il contenuto del file dist/app.bundle.js e verificare che la funzione f() definita in ES6 è stata tradotta con un codice JS “classico”:

var f = function f(m) {
 console.log(m);
};

f("Hello World!");

Pronti per Vue.js

In questo modo abbiamo abilitato Babel nel nostro processo di sviluppo (e di conseguenza la possibilità di utilizzare sintassi e funzionalità ES6).

Partendo dal precedente articolo (setup Webpack) e da questo articolo (setup Babel) siamo pronti per il prossimo step, dove aggiungeremo tutto quel che serve per avere Vue.js in questo flusso di lavoro.

I codici sorgenti per questo articolo li potete trovare su Github nel progetto “tomato”, tag “Webpack_babel”:

roberto-butti/tomato

Parte 1:

Primi passi con Webpack e Vue.js 101

Primi passi con Webpack e Vue.js 102 was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Vorrei documentare e condividere la mia esperienza di avvicinamento a Webpack, yarn e Vue. In questo primo articolo vorrei illustrare i passi necessari per poter installare e configurare Webpack al fine di creare una web app molto elementare. Con gli articoli successivi, vorrei approfondire Vue.

Obiettivo: creare una pagina html che includa un file Javascript il cui compito è quello di stampare la stringa “Hello World” nella Console, tramite il comando console.log(). Questo obiettivo molto semplice, ci serve per focalizzare l’attenzione sugli step necessari per poter impostare un workflow elementare di sviluppo tramite Webpack.

Yarn

Per la gestione dei pacchetti ci affideremo a Yarn.

Per installare Yarn su macosx, consiglio di utilizzare brew:

brew install yarn

Per inizializzare il progetto, creare la directory di progetto, entrare nella directory ed eseguire il comando di inizializzazione:

mkdir progetto
cd progetto
yarn init

Con quest’ultimo comando vengono richieste alcune informazioni come nome progetto, nome autore eccetera, informazioni che vengono collezionate ed utilizzate per generare il file package.json (sì, proprio quello di npm)

Installazione di Webpack

Per installare webpack, ricorrere all’utilizzo di yarn:

yarn add webpack webpack-dev-server --save

Dove add è la direttiva per poter aggiungere pacchetti, l’opzione save indica di apportare le modifiche al file package.json. Se controllate il vostro file package.json troverete alcune righe nuove:

"dependencies": {
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
 }

Viene creato anche il file yarn.lock contenente l’elenco dei pacchetti effettivamente installati con le informazioni relative alle versioni.

Oltre alla modifica del file package.json, alla creazione del file yarn.lock, ovviamente vengono installati anche i pacchetti nella directory node_modules.

Tale directory deve essere inclusa nel file .gitignore.

Assicurarsi che il comando webpack sia presente nel PATH.
Con la precedente installazione, nella directory node_modules è stata creata una nuova directory chiamata .bin/.

In tale directory sono presenti gli eseguibili dei vari moduli installati, tra cui anche webpack.
Per fare in modo che tale directory sia censita tra il PATH eseguire:

export PATH=node_modules/.bin:$PATH

Per rendere persistente questa configurazione aggiungere tale comando nel file .bashrc o nel file .zshrc (a seconda della vostra shell).

Il file webpack.config.js

Creare il file di configurazione di webpack. Tale file (webpack.config.js) è un file javascript più o meno complesso a seconda dei task che vogliamo automatizzare con webpack.
Un file minimale di webpack:

Esecuzione di Webpack

Creare la directory src in cui verranno memorizzati i files js e creare il file src/app.js:

console.log("Hello World!");

Ora è possibile eseguire il comando webpack:

webpack

Questo comando, interpretando le regole presenti nel file webpack.config.js, recupera i file nella directory src/ esegue la fase di “build” e li predispone nella directory dist (nuova directory creata da webpack per i file da distribuire sul server in fase di deploy). Ricordarsi ovviamente di mettere la directory dist (creata automaticamente nel file .gitignore).

Creazione file HTML

Creare nella radice del progetto il file index.html:

<!DOCTYPE html>
<html>
 <head>
 <title>Tomato</title>
 </head>
 <body>
 <div id="app"></div>
 <script type="text/javascript" src="dist/app.bundle.js"></script>
 </body>
</html>

Esecuzione Web Server di sviluppo

Ora che si ha a disposizione il file HTML con il layout e il file Javascript con la logica, è possibile avviare il web server di sviluppo di webpack.

Tale modalità è molto interessante in quanto ad ogni modifica dei files (per esempio al file Javascript), in automatico viene eseguita la fase di build e viene effettuato un reload nel browser web.

Lanciare il comando:

webpack-dev-server --inline

e accedere tramite browser all’URL indicato nell’output del comando (solitamente http://localhost:8080/) attivare il browser inspector e visualizzare il tab console.

Sorgenti di esempio (github)

roberto-butti/tomato

Prossimi passi

Nel prossimo articolo, vedremo come abilitare Babel (per la sintassi ES6) e come organizzare il flusso di build dei file CSS e JS.

Parte 2:

Primi passi con Webpack e Vue.js 102

Primi passi con Webpack e Vue.js 101 was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Quando ci è stato chiesto di sviluppare un configuratore di veicoli (tipo Land Rover or Scrambler) il primo problema che abbiamo dovuto affrontare è stato senza dubbio quello relativo all’enorme quantità di asset che l’utente finale avrebbe dovuto scaricare.

Stiamo parlando delle centinaia di immagini necessarie a comporre gli n livelli delle n viste.

Supponendo di avere già i render in PNG dei singoli livelli che compongono una vista la domanda è: come ridurre il peso di tutte queste immagini senza sacrificarne troppo la qualità?

La tecnica che abbiamo adottato ci ha permesso di ridurre il peso totale degli asset fino al 50%.

Iniziamo analizzando l’immagine seguente; è un’immagine PNG già compressa al massimo che pesa circa 400kb.

Per comprimere l’immagine di partenza si possono utilizzare vali tool. Personalmente mi piace utilizzare TinyPng anche perché offre un solido set di API.

L’ obiettivo principale di questa tecnica è quello di separare il canale alpha dal colore.

Estrarre il canale alpha

Per fare ciò potete utilizzare il software di image editing che preferite.

Noi abbiamo scelto ImageMagick, che offre un’interfaccia da riga di comando che torna molto utile in ottica di batch processing.

Vediamo come utilizzarla.

$ convert bike.png -alpha extract -colors 8 alpha.png

Questa riga:

-alpha extract -colors 8

estrae il canale alpha dalla PNG originale e riduce il numero di colori a 8 prima di scrivere il risultato su un altro file che abbiamo chiamato “alpha.png”.

La scelta di ridurre il numero di colori ad 8 (e non a 2) permette di mantenere la qualità dell’immagine, soprattuto sui bordi, ad un livello ragionevole.

Come potete vedere l’immagine alpha.png adesso non ha più la trasparenza.

Andiamo quindi a trasformare il bianco in alpha:

$ convert alpha.png -transparent white alpha.png

A questo punto possiamo convertire l’immagine originale in JPG rimuovendo così del tutto l’alpha e riducendo notevolmente il suo peso.

$ convert -flatten bike.png bike.jpg

Unire l’immagine JPG a colori con la maschera PNG

A questi punto non ci resta che ricostruire nel browser la nostra immagine sovrapponendo opportunamente il livello a colori con la trasparenza.

L’operazione risulta molto semplice se si utilizza un elemento HTML canvas.

ctx.drawImage('bike.jpg',0,0,500,298);
ctx.globalCompositeOperation = 'xor';
ctx.drawImage('alpha.png',0,0,500,298);

Per prima cosa andiamo a disegnare la JPG sul canvas, successivamente modifichiamo il parametro globalCompositeOperation del context impostandolo a XOR e alla fine disegniamo sopra l’immagine maschera “alpha.png”.

Impostando globalCompositeOperation = ‘xor’ l’immagine sorgente viene combinata con l’immagine di destinazione utilizzando l’operatore booleano OR esclusiva.

Esempio in codepen.

E se vi dicessi che in realtà è possibile utilizzare due JPG ed ottenere lo stesso risultato?

Ciò è possibile utilizzando la tecnologia WebGL.

Ecco un esempio con il framework PIXI.JS.

In ogni caso non ho riscontrato grossi vantaggi rispetto alla tecnica che utilizza la PNG a 8 colori poiché il peso finale del file è circa lo stesso.

Considerazioni finali

Vediamo quindi alla fine del processo cosa abbiamo guadagnato in termini di file size:

• File PNG di partenza bike.png : 400KB
• Conversione a JPG bike.jpg : 200KB
• Alpha channel della PNG alpha.png : 25KB
• Peso totale dell’immagine esplosa bike.jpg + alpha.png : ~ 225KB

Guadagno totale : ~ 44%

Questa percentuale può essere facilmente tradotta in una riduzione di costi se si pensa di utilizzare in servizio CDN per servire le risorse.

A presto.

Luca

WebDev Tips - Alpha mask + JPG was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Il mio progetto personale facesofpower.net è stato apprezzato sia dalla platea tecnologica del web, sia da quella che si occupa di informazione generalista.

In questo post ricostruirò i passi principali dietro alla sua creazione.

Tutte le immagini del sito sono state processate con la libreria primitive.js. La forma scelta è il triangolo, con un elevato numero di iterazioni e un’alta shape optimization.

L’SVG ottenuto in uscita (opzione vector image) è un oggetto con un rect di background e una lista di path, 100 per ogni immagine di presidente. Ho rimosso gli attributi width = “” e height = “” dal tag SVG per ottenere un’immagine fluida a schermo intero.

<svg viewBox=”0 0 192 256" clip-path=”url(#clip)”>
 <defs>
 <clipPath id=”clip” clipPathUnits=”objectBoundingBox”>
 <rect x=”0" y=”0" width=”192" height=”256"/>
 </clipPath>
 </defs>
 <rect x=”0" y=”0" width=”192" height=”256" fill=”rgb(166, 166, 166)”/>
 <path d=”M329,255L34,107L-74,334Z” fill=”rgb(28, 28, 28)” fill-opacity=”0.95"/>
 <path d=”M74,29L-22,230L118,27Z” fill=”rgb(29, 32, 27)” fill-opacity=”0.82"/>
 <path d=”M1298,-422L78,102L84,55Z” fill=”rgb(210, 223, 195)” fill-opacity=”0.77"/>
 …

Nel markup HTML della pagina ho inserito solo il primo SVG, quello di Donald Trump. Poi, per ogni morphing necessario per gli altri presidenti, ho trasformato i singoli path di questo SVG iniziale attraverso delle animazioni con la libreria anime.js (ogni presidente ha 100 animazioni di path e 1 per il colore di sfondo del rect)

anime({
  targets: path1_1,
  d: “M-211,316L94,132L390,230Z”,
  fill: “rgb(47, 57, 78)”,
  fillOpacity: “0.99”,
  duration: 2000,
  easing: ‘easeInOutCubic’
});

anime({
  targets: path1_2,
  d: “M114,38L344,-205L199,178Z”,
  fill: “rgb(255, 255, 248)”,
  fillOpacity: “0.45”,
  duration: 2000,
  easing: ‘easeInOutCubic’
});

…

Come si può vedere, per ogni path ho cambiato le coordinate, il colore di riempimento e l’opacità di riempimento, il tutto in 2 secondi con un easing easeInOutCubic.

L’animazione viene attivata dall’evento afterChange dello slider Slick: in questo modo ogni faccia può trasformarsi in qualsiasi altra faccia.

$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide){
  if ($("#obama").hasClass("slick-active")) {

  ...

Altri dettagli

L’effetto di parallasse sui presidenti (applicato solo per i browser webkit, sugli altri creava problemi di performance) è stato ottenuto in questo modo: ho messo 4 SVG sovrapposti, dividendo quindi i 100 path in 4 gruppi da 25 path, e poi li ho animati con parallax.js.

In realtà le tre immagini della intro hanno un morphing di 500 path: con soltanto 100 il Monte Rushmore aveva una resa di scarsa qualità e non era riconoscibile.

Accoglienza

Qui potete trovare un elenco di siti in cui il mio progetto è stato presentato o ha vinto dei premi:

• Google Chrome Experiments
• Awwwards, Honorable mention
• CssDesignAwards, Special Kudos
• CssWinner, Site of the day
• Codrops Collective
• The FWA
• Muzli

Il making of di ‘Faces of Power’ was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Decostruzione del sito web http://www.weareuprising.com/

Introduzione

Come probabilmente molti di voi fanno, anche io quando mi imbatto in un sito web che considero d’impatto, non resisto alla tentazione di spulciarne il codice. Mi affascina l’idea di scoprire con quali tecniche è stato realizzato e quali tecnologie implementa.

Ho deciso quindi di avviare una piccola rubrica qui su Medium. Voglio condividere con voi quello che scopro attraverso quella pratica che mi piace definire Website Stalking.

Il primo progetto che ho deciso di affrontare è di uno studio tutto italiano:

“Uprising™ | Digital creative production company”.

Uprising si definisce uno studio creativo indipendente, di base a Milano. Questo sito web, dalla forte espressività, rappresenta il loro portfolio.

Struttura del sito

La prima cosa che ho notato è la struttura del documento. Nel dettaglio, tutta l’applicazione si sviluppa su un unico elemento canvas HTML, basta guardare il sorgente dalla pagina per rendersene conto.
Infatti, oltre alla dichiarazione della testata e l’inclusione di alcune risorse javascript e css, non c’è molto altro.

Loader

L’applicazione presenta una “loader progress animation” iniziale. Questa ha il compito di intrattenere l’utente, restituendo un’indicazione sull’avanzamento del download delle risorse necessarie al render della pagina.
A differenza di ciò che accade per una pagina HTML, le risorse esterne (come le immagini e i video) hanno bisogno di essere precaricate, per essere poi “renderizzate” correttamente su un canvas.

Il loader in questione, come del resto tutto ciò che compone questo sito web, è implementato su canvas.

Esistono svariati modi per realizzare un animazione del genere.

Ne ho scritto uno come esempio.

La tecnica che viene utilizzata è la stessa che tipicamente si usa per animare tracciati svg.
Si tratta di un semplice trucco. È sufficiente andare a incrementare o decrementare una proprietà del context canvas nativa, ovvero context.lineDashOffset, che rappresenta l’offset del tratteggio che è stato scelto come stroke della linea.

Per approfondire il concetto vi consiglio vivamente questo link.

Quando l’ho scoperto, ormai qualche tempo fa, mi sembrò illuminante.

Sezione principale

Una volta che il loader è scomparso e il canvas è stato renderizzato, ci si trova di fronte alla sezione principale del sito.
Oltre al video in background, inserito anch’esso all’interno del canvas, si notano subito i numerosi effetti grafici che agiscono su tutta la pagina.

Vediamo come sono stati realizzati:

Attivando i DevTools di Chrome (cmd + alt + i su MacOS) si legge subito l’inconfondibile firma di pixi.js , il notissimo framework canvas 2D con supporto WebGL.

Se scrivo in console PIXI.VERSION, possiamo notare che la versione utilizzata è la “4.0.1”. Se poi scrivo PIXI.filters, ottengo un oggetto che contiene tutti i filtri definiti per questa istanza di PIXI.

Alcuni di questi sono i classici built-in e si riconoscono subito (BlurFilter, ColorMatrixFilter, GrayFilter …). Altri invece, come GlitchFilter (responsabile dell’effetto “segnale distorto”) che viene applicato all’intera sezione con un intervallo di qualche secondo, sono stati prototipati per l’applicazione.

Prendo in analisi proprio il GlitchFilter e provo a replicarlo.

Se scrivo PIXI.filters.GlitchFilter.toString() ottengo sotto forma di stringa il metodo responsabile dello shader Glitch.

Il compito di questo metodo è semplicemente quello di invocare il metodo Filter() di PIXI, passandogli come argomento una stringa contenente il codice dello shader.

Uno shader è soltanto un pezzo di codice scritto il GLSL https://it.wikipedia.org/wiki/GLSL che gira sulla GPU della scheda grafica. Esso ha come input un singolo pixel sullo schermo e ritorna sempre un colore composto in un vettore rgba.

Grazie al fatto che il codice gira direttamente sulla GPU, è possibile eseguirlo per ogni pixel dello schermo nel medesimo istante, garantendo un sensibile incremento delle prestazioni.

Questo video dei Mythbusters è un classico.

Un framework come PIXI, in grado di applicare questi filtri utilizzando il renderer WebGL, è esattamente quello che ci vuole per realizzare effetti del genere.

A titolo di esempio mi sono divertito a replicare l’effetto glitch.

Come vedrete dal codice, ho preferito inserire in pagina (in un tag script) il codice dello shader.

Animazioni del testo

Attraverso l’utilizzo di maschere e animazioni controllate con il noto framework GSAP, è possibile realizzare gli effetti che si vedono applicati ai vari lettering in giro per il sito.

Anche qui ho pensato di creare un piccolo snippet di esempio.

Navigazione

Durante la navigazione tra la sezioni, l’applicazione resta in ascolto sull’evento scroll del mouse, il quale viene registrato attraverso un famoso plugin per jQuery mousewheel.

Ad ogni colpo di scroll accadono due cose. Prima viene lanciata una animazione e poi viene effettuato un cambio di rotta tramite le HTML history api. Il tutto è controllato attraverso il framework AngularJs , utilizzato per il routing e per strutturare e organizzare il codice.

L’animazione di cambio rotta fa probabilmente uso delle maschere che abbiamo utilizzato prima per l’esempio del testo.

Interessante l’uso dell’algoritmo di triangolazione di Delaunay, di cui esistono svariati porting javascript, utilizzato per realizzare randomicamente le maschere triangolari che compongono i frammenti dell’animazione.
Il tutto è stato animato sempre attraverso GSAP TweenMax.

Menu

Discorso a parte per il menu, a cui si accede cliccando sull’hamburger in alto a sinistra. Qui, a differenza della sezione principale, veniamo trasportati in un ambiente prettamente tridimensionale.

Gestire ambienti di questo tipo è possibile grazie della tecnologia WebGL, ed è fortunatamente reso più semplice dall’utilizzo di framework come Three.js.
Il menù è sostanzialmente composto da 5 mesh poligonali che vengono caricate sotto forma di file .obj attraverso il loader di Three.

Ho pensato di provare a caricare il logo di Uprising con Three.js.

http://codepen.io/LucaDb/pen/pNxeNe

L’effetto particellare del menu è realizzato anche con l’utilizzo di uno shader, che potete trovare stampato in pagina nel source HTML all’interno del tag script[type=”x-shader/x-vertex”].

Sul blog di Aerotwist troverete un bell’ esempio con una demo di un effetto particellare.

Non mi resta che fare i complimenti ai ragazzi di Uprising per la notevole creatività e l’impeccabile esecuzione di questo lavoro.

Se avete domande, curiosità, oppure avete suggerimenti per un altro episodio di Website Stalking, scrivetemi pure.
A presto.

Luca

Website Stalking - Uprising was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

L’11 ed il 12 maggio si terrà il più importante evento dedicato a JS in Italia e grazie ai nostri amici del JsDay, Treviso JS ha a disposizione un codice sconto per tutta la community del 15%.

Non vi resta altro che inserire il codice jsUG16 ed acquistare il biglietto.

Talks

jsDay - May 11th-12th 2016 - Verona, Italy

Schedule

jsDay - May 11th-12th 2016 - Verona, Italy

Tickets

jsDay - May 11th-12th 2016 - Verona, Italy

Js Day 2016 e Treviso JS was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduzione e primi passi per utilizzare ECMAScript 2015 (ES6) nel proprio progetto.

Introduzione

ES6 è l’evoluzione del nostro amato JavaScript. Viene chiamato anche ECMAScript 2015 poiché l’organizzazione ECMA International intende rilasciare una nuova versione ogni anno (…).

In questo articolo non evidenzieremo le varie novità di questo linguaggio (ne uscirà uno nei prossimi giorni) ma condivideremo i tool per iniziare ad utilizzarlo senza problemi.

Supporto

Al momento il supporto nei browser è molto precoce…

https://kangax.github.io/compat-table/es6/

… ma non preoccupiamoci, di seguito troverai vari tool (i cosiddetti transpiler) e plugin che forniscono un ampio supporto e che possono essere integrati nel workflow.

Compilatori ES6 => ES5

__

Babel

Babel è un compilatore JavaScript. Converte ES6 in ES5 senza problemi grazie al “syntax transformer”.

—

__

Traceur

Anche Traceur è un compilatore JavaScript. Non supporta JSX ed il codice generato è decisamente meno leggibile rispetto a Babel.

—

ES6 ed i Task Manager

Con Gulp 3.9, ora possiamo utilizzare ES6 grazie a vari plugin: tra i più famosi troviamo, gulp-babel, gulp-traceur e gulp-regenerator (consigliato da Addy Osmani).

//gulp-babel example

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
    return gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

//gulp-traceur example

const gulp = require('gulp');
const traceur = require('gulp-traceur');

gulp.task('default', () => {
    return gulp.src('src/app.js')
        .pipe(traceur())
        .pipe(gulp.dest('dist'));
});

//gulp-regenerator example

var gulp = require('gulp');
var regenerator = require('gulp-regenerator');

gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(regenerator())
        .pipe(gulp.dest('dist'));
});

Anche per chi utilizza Grunt non ci sono problemi, infatti sono disponibili plugin sia per Babel con grunt-babel, sia per Traceur con grunt-traceur

//grunt-babel example

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
    babel: {
        options: {
            sourceMap: true,
            presets: ['es2015']
        },
        dist: {
            files: {
                'dist/app.js': 'src/app.js'
            }
        }
    }
});

grunt.registerTask('default', ['babel']);

//grunt-traceur example

grunt.initConfig({
  traceur: {
    options: {
      // traceur options here
      experimental: true,
      // module naming options,
      moduleNaming: {
        stripPrefix: "src/es6",
        addPrefix: "com/mycompany/project"
      },
      copyRuntime: 'src/es5'
    },
    custom: {
      files: [{
        expand: true,
        cwd: 'src/es6',
        src: ['*.js'],
        dest: 'src/es5'
      }]
    },
  },
})

ES6 ed i Module Loader

Parliamo di Browserify e Webpack. Entrambi sono compatibili con ES6.

Webpack permette l’integrazione di ECMAScript 2015 grazie alla moltitudine di loader che la community crea. Ad esempio, per rimanere in tema, quello di Babel (https://github.com/babel/babel-loader).

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader'
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}

Browserify, che non è da meno, utilizza sempre Babel (ma ce ne sono molti altri) per trasformare il ES5 in ES6 (https://github.com/babel/babelify).

var fs = require("fs");
var browserify = require("browserify");

browserify("./script.js")
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));

Per concludere, se dovete iniziare un nuovo progetto, il consiglio è quello di utilizzare queste tecnologie per esser pronti quando i browser saranno compatibili al 100%.

“Non avete più scuse per non iniziare ad usare ES6.”

“ES6 is JavaScript.”

Link utili

• https://github.com/lukehoban/es6features
• https://github.com/addyosmani/es6-tools

Link vari

• facebook trevisojs, github trevisojs
• github personale: progetti personali e opensource

Nicholas Ruggeri * Frontend Developer and Snowboarder

Vuoi iniziare ad usare ES6? was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. Utilizza i Google Fonts ad hoc

Se usi Google Fonts per dei testi statici (titoli, frasi…), carica solo le lettere che ti servono.

<link href='https://fonts.googleapis.com/css 
family=Open+Sans&text=AaBbCc' ...>

2. Definisci il Critical Path

Utilizza Critical di Addy Osmani per inserire i CSS inline così da ottimizzare il rendering above the fold.

3. Imposta gli expires headers

Sembrerà banale, ma è bene ricordare che il modo migliore per velocizzare una pagina rimane lo sfruttare la cache del browser. Definendo delle “date di scadenza” ad hoc per ciascun tipo di file, possiamo significativamente ridurre i tempi di caricamento dopo la prima visita.

ExpiresActive On
ExpiresDefault "access plus 10 years"
ExpiresByType text/html "access plus 1 day"
ExpiresByType application/json "access plus 15 minutes"

4. Crea le SVG Sprites

Crea una sprite di tutte le svg che utilizzi ed utilizza symbol per richiamare il singolo elemento. C’è un plugin sia per Gulp che per Grunt.

<svg class=”icon” viewBox=”214.7 0 182.6 792">
  <use xlink:href=”#shape-icon-1" />
</svg>

<svg class=”icon” viewBox=”0 26 100 48">
  <use xlink:href=”#shape-icon-2" />
</svg>

Una buona lettura: https://css-tricks.com/svg-symbol-good-choice-icons/

5. Utilizza i JavaScripts Design Pattern

Utilizza un pattern per prevenire la duplicazione del codice e rendere di conseguenza i tuoi file JavaScript più leggeri.

Una buona lettura: https://addyosmani.com/resources/essentialjsdesignpatterns/book/index.html

6. Crea una build personalizzata per Modernizr

Se utilizzi Modernizr, crea la tua custom build a seconda delle feature che ti servono. Per prendere un punteggio più alto su PageSpeed Insight è consigliato inserire Modernizr inline per evitare il blocco del caricamento.

7. Comprimi le tue immagini

Ottimizza le tue immagini senza perdere qualità con TinyJpg, TinyPng e ImageOptim.

8. Ottimizza i tuoi assets statici

JavaScripts e CSS possono essere minificati e concatenati sia con dei tool online sia in modo automatico con Gulp e Grunt. Facendo questo non solo ridurrai il peso dei singoli file ma eliminerai anche request inutili al server.

9. Utilizza GZIP

Utilizza GZIP per comprimere gli assets che vengono trasferiti dal server al client.

Una buona lettura: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

10. Inserisci le dimensioni nei tag img

Una piccola cosa che quasi nessuno fa è esplicitare le dimensioni delle immagini: permette di eseguire il rendering della pagina in parallelo al download delle immagini.

Come ultima cosa vorrei consigliare a tutti gli sviluppatori di utilizzare lo stack di strumenti di Google, PageSpeed Tools. E’ un ottimo modo per capire dove si sbaglia e dove si può intervenire per migliorare le performance del sito a cui si sta lavorando.

Questi piccoli trucchi del mestiere sono frutto dell’esperienza del sottoscritto, di Andrea Collet e della community Web Designer Italiani.

Link vari

• facebook trevisojs, github trevisojs
• github personale: progetti personali e opensource

Nicholas Ruggeri * Frontend Developer and Snowboarder

Dieci trucchi del mestiere per migliorare le performance del tuo sito web was originally published in Treviso JS on Medium, where people are continuing the conversation by highlighting and responding to this story.