Pidän staattisista sivustoista. Ollakseni tarkempaa, pidän rakentamasta niitä. Siinä on jotain puhdasta istua siellä näytön edessä; se on vain sinä ja tekstieditori, kirjoittamalla selkeässä vanhassa HTML- ja CSS-muodossa.

Älä saa minua väärin, dynaamiset sivustot ovat hauskoja. Jumala tietää, että olen WordPressin fani ja käyttäjän helppokäyttöisyys. Staattiset kohteet tuovat minut takaisin. Muistan siirtymästä WYSIWYG-ohjelmasta tekstieditoriksi. Muistan kehitysprosessin virtaviivaistamisen ensimmäisellä PHP-toiminnallani: Sisällytä. Nämä olivat hyviä päiviä, mutta toisin kuin niin monet muut, he eivät ole kaikki poissa.

Ero on se, että voimme nyt tehdä sen paremmin. Esioperaattorit haluavat Vähemmän ja nenäkkyys huomattavasti parantanut CSS-kirjoituskokemusta. Meillä on moneen komentosarjakieleen sekoittaa HTML-koodimme, jos niin haluamme. Ja sitten ... sitten ihmiset tekivät todella mielenkiintoisia asioita.

Olen aiemmin maininnut Vasara sovellus Macille. Se on sovellus, joka tuo omat toiminnot ja laajennukset vanhaan vanhaan HTML-muotoon, jonka avulla voit lisätä tiedoston osaksi toista ja muita hyviä asioita. Se kokoaa tulokset säännölliseen staattiseen sivustoon, joka voidaan sijoittaa mihin tahansa. Se on itse asiassa saanut muutama ominaisuus, mutta tämä artikkeli ei koske Hammeria. Miksi? Se on käytettävissä vain Mac-alustalle.

Tulla sisään Harppu…

Esittele Harppu

Se ei ole sovellus, se on paljon enemmän. Se sisältää CSS: n esikäsittelyohjelmia. Se sisältää HTML-asiakirjojen kielet. Se on mini-palvelin, jota voidaan kehittää tai muuttaa varsinaiseksi tuotanto-palvelimeksi. Voit käyttää palvelimen puoleista JavaScript-ohjelmaa kääntääksesi sen täyteen sovellukseen, sillä se toimii Node.js. Tai jos et ole ohjelmoija, voit vain rakentaa staattisen sivustosi ja kääntää sen sitten muualle.

Koska se perustuu Node.js: hen, se on ristikkäisliikennettä. Se on myös MIT: n lisensoitu, joten se on ilmainen. Voit jopa tehdä muutoksia ja jakaa tai jälleenmyydä sitä, jos haluat.

Nyt ihmiset, jotka ovat pitäneet silmällä, ovat huomanneet, että Harppu ei ole ainoa lajissaan oleva väline. Paljon ihmisiä luo solmupohjaisia ​​työkaluja hankkeiden käynnistämiseksi nopeasti. Pääongelmani näistä on, että he yleensä olettavat, että haluat käyttää suosikki CSS-kehystään, animaatiokirjastoa tai HTML-koodia. Harppu ei anna mitään oletuksia koodista, jonka haluat kirjoittaa. Se vain antaa sinulle työkalut kirjoittamaan sitä nopeammin.

Huomaa, että se on asennettava ja suoritettava komentoriviltä. Tässä ei ole graafista käyttöliittymää. Mutta kun saat sen menemään - ja se ei ole kovin vaikeaa - edut ovat suurempia kuin oppimiskäyrä.

Työkalut

CSS-esiprosessorit

Tähän mennessä olen varma, että suurin osa lukijoistamme tuntee tapoja, joilla web-toimiala on yrittänyt parantaa vanilja CSS: n avulla. Kun projektisi mini-palvelin on käynnissä, kaikki LESS, SASS ja Stylus-tiedostot kootaan automaattisesti CSS: ään.

Kokoelma on aina tyydyttävästi nopea. Kaikissa testeissani verkkosivustolleni tehdyt muutokset on koottu siihen aikaan, kun minut tallentaa tiedoston, päivittämällä selaimeni.

Kielten mallinnus

Mukana ovat myös Jade ja EJS. Nämä ovat sekä JavaScript-mallipohjia, joiden avulla voit kirjoittaa / luoda kehittyneempiä HTML-dokumentteja joustavammin. Pohjimmiltaan voit luoda HTML-malleja ja tallentaa todellisen sivusi sisällön erikseen kyseisistä malleista. Se on sellainen kuin käyttää CMS: ää, vain tietokantaa ei ole (ellet halua sitä), ja sinun on kirjoitettava kaikki sisältö pelkkinä tekstitiedostoina.

Todellinen etu on tietysti koodin ylläpito sekä kaikki viileät asiat, joita varsinaiset ohjelmoijat voivat tehdä varsinaisen palvelimen ja asiakaspuolen JavaScriptin kanssa. Nämä ovat myös kieliä, joiden avulla voit luoda kehittyneempiä järjestelmiä, kuten blogeja, kaikki suhteellisen helposti (uudelleen, jos sinulla on ohjelmoija palkkalistoilla).

Mikä ero näiden kahden välillä on? Useimmiten siitä, miten haluat kirjoittaa koodisi.

EJS pitää asiat yksinkertaisina. Jos tiedät jo HTML-koodin, kyseessä on vain lisäys EJS-spesifisiin tageihin, kuten: <% include global / header%>. Mitä minä tein siellä? Pohjimmiltaan olen vain tarttanut sivun otsikon HTML-tiedoston toisesta tiedostosta ja tuonut sen käytettäväksi päämallissani. Voit tietysti tehdä paljon monimutkaisempia juttuja. Tässä on, mitä Harp-dokumentaatiossa on sanottavaa EJS: stä.

Jade ottaa hyvin erilaisen lähestymistavan HTML-kirjallisuuteen. Tämä näyttää siltä, ​​kuten projektin kotisivulla näkyy:

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

Kaikki on käännetty HTML ja Javascript. Huomaa if / else-lausekkeen sisällyttäminen keskelle kaikkea ja riippuvuus oikeasta sisennyksestä.

Coffeescript

Coffeescript on JavaScript, mitä Jade on HTML. Pohjimmiltaan se on yksinkertaistettu muoto JavaScriptin kirjoittamiseen, joka sitten kootaan tavallisiin tavaroihin. Kuten Jade, se on voimakkaasti sisennys riippuvainen, ja pudottaa paljon syntaksia.

Tämä näyttää siltä (toinen esimerkki häpeilemättömästi vyöryttää projektin kotisivulta):

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

Ja tuotos näyttää tältä:

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

Alusta

Harpilla luodut verkkosivustot voidaan järjestää missä tahansa, tietenkin. On kuitenkin syytä mainita, että Harpin tekijät tekivät hosting-alustan, joka on erityisesti suunniteltu ohjelmistoineen. Hinnoittelu ei ole huono, ja se integroituu Dropboxin avulla, jotta sivustosi on helppo päivittää automaattisesti. Tarkista se täältä: www.harp.io

johtopäätös

Harppu, sen esiprosessoreilla, mallinnuskielillä, nopealla nopeudella ja monikäyttöisellä hyvyydellä, on vankka lisäys minkä tahansa suunnittelijan työkalupakkiin. Sanon, että kannattaa oppimiskäyrä.