Mi piacciono i siti statici. Per essere più precisi, mi piace costruirli. C'è qualcosa di puro seduto lì davanti al tuo schermo; sono solo tu e il tuo editor di testo, scrivendo in semplici vecchi HTML e CSS.

Non fraintendetemi, anche i siti dinamici sono divertenti. Dio sa che sono un fan di WordPress e la facilità d'uso che offre agli utenti. I siti statici mi riportano, però. Ricordo il passaggio dal software WYSIWYG a un editor di testo. Ricordo di aver ottimizzato il processo di sviluppo con la mia prima funzione PHP in assoluto: include. Erano bei giorni, ma a differenza di tanti altri, non se ne sono andati tutti.

La differenza è che ora possiamo fare meglio. Pre-processori come Di meno e insolenza notevolmente migliorato l'esperienza di scrivere CSS. Abbiamo un numero qualsiasi di linguaggi di scripting da integrare nel nostro HTML, se lo desideriamo. E poi ... poi le persone hanno fatto delle cose davvero interessanti.

Ho già menzionato il Martello app per Mac. È un'app che introduce le proprie funzioni ed espansioni nel buon vecchio HTML, consentendo di includere un file come parziale in un altro e altre cose positive. Compila i risultati in un normale sito statico che può essere ospitato ovunque. In realtà ha parecchie funzionalità in più, ma questo articolo non parla di Hammer. Perché? È disponibile solo per la piattaforma Mac.

accedere Arpa…

Presentazione di Arpa

Non è un'app, è molto di più. Comprende i preprocessori per CSS. Include le lingue di template per i documenti HTML. È un mini server che può essere utilizzato per lo sviluppo o trasformato in un vero server di produzione. Puoi utilizzare JavaScript sul lato server per trasformarlo in un'app completa, poiché viene eseguito su Node.js. Oppure, se non sei un programmatore, puoi semplicemente costruire il tuo sito statico e poi compilarlo per l'hosting altrove.

Perché è basato su Node.js, è multipiattaforma. È anche autorizzato dal MIT, quindi è gratuito. Puoi persino apportare modifiche e ridistribuirlo o rivenderlo, se lo desideri.

Ora, le persone che hanno tenuto d'occhio avranno notato che l'arpa non è l'unico strumento del suo genere. Un sacco di gente sta creando strumenti basati su nodi per far iniziare rapidamente i progetti web. Il mio problema principale con questi è che in genere si presuppone che si desidera utilizzare il loro framework CSS preferito, libreria di animazione o HTMLplateplan. Harp non fa ipotesi sul codice che vuoi scrivere. Ti dà solo gli strumenti per scriverlo più velocemente.

Intendiamoci, deve essere installato ed eseguito tramite la riga di comando. Non c'è una GUI per questo. Ma una volta che lo fai andare - e questo non è affatto difficile - i benefici superano la curva di apprendimento.

Gli attrezzi

Pre-processori CSS

Ormai, sono sicuro che molti dei nostri lettori hanno familiarità con i modi in cui l'industria del web ha cercato di migliorare su vanilla CSS. Quando il mini-server per il tuo progetto è in esecuzione, i file LESS, SASS e Stylus vengono automaticamente compilati in CSS.

La compilation è sempre soddisfacentemente veloce. In tutti i miei test, le modifiche apportate al mio sito Web sono state compilate nel tempo necessario per salvare il mio file, quindi aggiornare il browser.

Linguaggi dei templating

Inoltre sono inclusi Giada e EJS. Questi sono entrambi linguaggi JavaScript che consentono di scrivere / generare documenti HTML più avanzati con maggiore flessibilità. Fondamentalmente, puoi creare modelli HTML e archiviare il tuo contenuto effettivo della pagina separatamente da quei modelli. È un po 'come usare un CMS, solo che non esiste un database (a meno che non lo si voglia), e si deve scrivere tutto il contenuto in file di testo.

Il vero vantaggio è, naturalmente, la manutenzione del codice, oltre a tutte le cose interessanti che i veri programmatori possono fare con l'attuale server e JavaScript sul lato client. Questi sono anche i linguaggi che ti permettono di creare sistemi più avanzati, come i blog, tutti relativamente facilmente (di nuovo, se hai un programmatore sul libro paga).

Qual è la differenza tra i due? Si tratta principalmente di come preferisci scrivere il tuo codice.

EJS mantiene le cose semplici. Se conosci già l'HTML, è solo questione di aggiungere tag specifici di EJS, in questo modo: <% include global / header%>. Cosa ho fatto lì? Fondamentalmente, ho appena afferrato l'HTML per l'intestazione della mia pagina da un altro file e l'ho importato per usarlo nel mio modello principale. Puoi fare cose molto più complesse, ovviamente. Ecco cosa ha da dire la documentazione dell'arpa su EJS.

Jade ha un approccio molto diverso alla scrittura di HTML del tutto. Sembra così, come mostrato nella home page del progetto:

bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,

Tutto viene tradotto in HTML e Javascript. Notare l'inclusione di una dichiarazione if / else proprio nel mezzo di tutto e la dipendenza dal corretto rientro.

CoffeeScript

Coffeescript è in JavaScript ciò che Jade è in HTML. Fondamentalmente, è un formato semplificato per scrivere JavaScript, che poi viene compilato nel materiale normale. Come Jade, è fortemente dipendente dall'indentazione e riduce gran parte della sintassi.

Sembra questo (un altro esempio spudoratamente cribbed dalla home page del progetto):

math =root:   Math.sqrtsquare: squarecube:   (x) -> x * square x

E l'output è simile a questo:

math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};

La piattaforma

I siti Web creati con Arpa possono essere ospitati ovunque, ovviamente. Vale la pena ricordare, tuttavia, che i creatori di Harp hanno creato una piattaforma di hosting progettata appositamente per le cose create con il loro software. Il prezzo non è male e si integra con Dropbox per facilitare gli aggiornamenti automatici del tuo sito. Controllalo qui: www.harp.io

Conclusione

Arpa, con i suoi preprocessori, linguaggi di template, velocità pura e bontà cross-platform, è una solida aggiunta agli strumenti di ogni designer. Dico che vale la curva di apprendimento.