Riot è una piccola azienda di software che attualmente comprende solo cinque persone. Dal nulla, questo team ha abbandonato due app di sviluppo web per utenti Mac che mi hanno buttato via. Questa è una categoria di app che, a mio parere, non ha ricevuto molta vera innovazione negli ultimi anni e apparentemente le brave persone di Riot sono disposte a cambiarlo, perché le loro idee sono davvero uniche e incredibilmente utili.
Oggi esamineremo sia Hammer che Anvil per vedere cosa fa e come possono migliorare collettivamente il tuo flusso di lavoro, in particolare se sei uno sviluppatore front-end che lavora con siti statici.
Martello
Il primo è Hammer, un vero balzo in avanti nello sviluppo di siti statici. Se ami il genere di cose che PHP fa, ma non conosci PHP o semplicemente non vuoi rovinarlo nei tuoi piccoli progetti, amerai Hammer.
Che cos'è?
Iniziamo discutendo su ciò che Hammer non è. Non è un IDE o un editor di testo. Non devi rinunciare a Sublime Text 2 per utilizzarlo (che è fantastico), si collega direttamente al tuo flusso di lavoro esistente e funziona a fianco delle tue applicazioni di sviluppo web preferite, qualunque esse siano.
Ora, chiedi di nuovo, che diamine è Hammer? In breve, è un compilatore. Serve come una sorta di base di partenza per il tuo progetto di web design. Mentre apporti le modifiche, Hammer compila i tuoi file. Ad esempio, se usi Sass o CoffeeScript, verranno automaticamente compilati in CSS e JavaScript.
Questo è tutto?
No. Hammer non è solo un altro concorrente di Codekit. Aggiunge al concetto di un compilatore fornendo una sintassi speciale che puoi usare nel tuo lavoro che governa il modo in cui i tuoi file sono costruiti.
Che tipo di sintassi speciale chiedi? Che ne dici di HTML che ti permettono di incorporare automaticamente i documenti HTML tra loro senza PHP o un ambiente server? O forse ti piacerebbe utilizzare percorsi di file intelligenti che localizzano automaticamente asset specifici, anche quando vengono spostati? Vorresti un lato delle variabili HTML con quello?
?Chiudi la porta d'ingresso? tu dici. No, terrò la porta spalancata. Hammer fa tutto questo e altro. Vediamo come.
Iniziare con Hammer
Dopo aver scaricato e lanciato Hammer, questo è ciò che vediamo:
Qui abbiamo una finestra di avvio simpatica e amichevole che ci spinge a creare un nuovo progetto o abbandonare un progetto esistente. Creerò un nuovo progetto perché ci sono un sacco di cose fantasiose che dovresti vedere.
Creare un nuovo progetto
Una volta che clicco su? Crea nuovo progetto? cartella, quindi scegli un nome e una posizione per il progetto, Hammer si mette al lavoro e crea una piccola directory impressionante di file di partenza.
All'interno del file di progetto principale, troverai un file index.html con tre cartelle: risorse, Build e include. Ognuno di questi è pre-compilato con i file di avvio per aiutarti a iniziare.
La principale area di interesse qui è la? Build? cartella, questa è la directory in cui il tuo sito HTML statico sarà inserito in tutta la sua gloria ben compilata.
Collegamento con il tuo editor di testo preferito
Come ho detto prima, Hammer è costruito per giocare bene con il tuo attuale flusso di lavoro. Dopo aver creato il tuo progetto, fai clic sull'icona della piccola app in alto a destra dell'interfaccia per selezionare l'editor che utilizzerai.
Ora con il progetto selezionato nella barra laterale di sinistra, premi Comando-E e il progetto si aprirà nell'app selezionata, Sublime Text 2 nel mio caso.
Freaking Awesome Features
È difficile non fare un doppio giro quando vedi le caratteristiche di Hammer. Sono bravi. Davvero, davvero bene. Sto parlando del voodoo che non hai mai pensato che saresti stato in grado di fare del bene. Diamo un'occhiata ad alcune delle parti migliori.
Include HTML
Se apriamo il file HTML generato automaticamente con il nostro nuovo progetto, questo è ciò che vediamo (questo è l'intero file):
Questa dovrebbe essere la tua reazione:? WTF? Dov'è tutto il codice? Aspetta, sta facendo quello che penso stia facendo ?? Sì.
Senza alcuna conoscenza di PHP e senza creare alcun tipo di ambiente server locale, possiamo sfruttare il concetto di sviluppo basato su moduli.
Nel caso in cui sei così abituato a siti statici che non hai idea di cosa stia succedendo, fammelo scomporre. All'interno del? Include? la cartella è un insieme di file HTML. Ad esempio, prendi il file _header.html. abbiamo uno copia di ciò che può essere inserito in tutte le pagine che vogliamo. Se lo inserisci in dieci file HTML, quindi aggiorna il file di intestazione principale, tutti gli altri dieci file HTML vengono aggiornati in compilazione.
Tutto ciò di cui hai bisogno per eseguire questa impressionante impresa è uno snippet personalizzato che si presenta sotto forma di un commento HTML. Ecco tre esempi:
Le implicazioni qui dovrebbero farti perdere la testa. Non riesco davvero a esprimere quanto di un balzo in avanti ciò rappresenti per i siti statici.
variabili
?Ma aspetta!? tu dici. ? Non è possibile utilizzare la stessa intestazione esatta in ogni file !? Sei un forte. Per lo meno, dovrai personalizzare il tag del titolo in modo che ogni pagina sia diversa. Così quello che ora? Il capitano Hammer è sconfitto?
Non temere, sto per mostrarti come usare le variabili nel tuo HTML. Invece di digitare un titolo reale nel tuo file di intestazione HTML principale, puoi semplicemente creare una variabile in questo modo:
Ora, quando eseguiamo un'inclusione sul nostro file di intestazione, possiamo personalizzare tale variabile. Lo facciamo con una sola riga nella parte superiore del nostro file HTML di destinazione.
La riga superiore di questo snippet di codice indica a Hammer di sostituire la variabile $ title con? Design Shack ?. Ora posso avere un file di intestazione incluso che è personalizzato su base per pagina. Ti ho detto che questa cosa era fantastica.
?Intelligente? percorsi
Il prossimo è un percorso intelligente. Questi sono semplici da afferrare e super maneggevoli.Fondamentalmente, puoi abbandonare lunghi percorsi di file quando ti colleghi alle varie risorse a favore dell'uso di? @Path? sintassi.