Jag gillar statiska webbplatser. För att vara mer exakt, gillar jag att bygga dem. Det finns något rent om att sitta där framför din skärm; Det är bara du och din textredigerare, skriver i vanlig gammal HTML och CSS.

Förse mig inte, dynamiska platser är roliga också. Gud vet att jag är ett fan av WordPress och den användarvänlighet som det ger användarna. Statiska platser tar mig tillbaka, dock. Jag kommer ihåg att byta från WYSIWYG-programvara till en textredigerare. Jag kommer ihåg att effektivisera utvecklingsprocessen med min första PHP-funktion: inkludera. Det var goda dagar, men i motsats till så många andra är de inte alla borta.

Skillnaden är att nu kan vi göra det bättre. Förprocessorer som Mindre och sass kraftigt förbättrad erfarenhet av att skriva CSS. Vi har ett antal skriptspråk att blanda in i vår HTML, om vi så väljer. Och då ... gjorde folk några riktigt intressanta saker.

Jag har tidigare nämnt Hammare app för Mac. Det är en app som introducerar sina egna funktioner och utvidgningar till bra gammal HTML, så att du kan inkludera en fil som en del i en annan och andra bra saker. Den sammanställer resultaten till en vanlig statisk webbplats som kan vara värd var som helst. Det har faktiskt många fler funktioner än det, men den här artikeln handlar inte om Hammer. Varför? Den är endast tillgänglig för Mac-plattformen.

Stiga på Harpa…

Introducerar Harp

Det är inte en app, det är en hel del mer. Den innehåller preprocessorer för CSS. Det innehåller templerande språk för HTML-dokument. Det är en miniserver som kan användas för utveckling, eller omvandlas till en faktisk produktionsserver. Du kan använda serverns JavaScript för att göra det till en hel app, eftersom den körs på Node.js. Eller, om du inte är en programmerare, kan du bara bygga din statiska webbplats och sedan kompilera den för att vara värd någon annanstans.

Eftersom det är baserat på Node.js, är det plattformen. Det är också MIT licensierat, så det är gratis. Du kan även göra ändringar och omfördela eller sälja om du vill.

Nu har folk som har blivit utkikade märkt att Harpa inte är det enda verktyget i sitt slag. Massor av människor skapar Node-baserade verktyg för att starta webbprojekt snabbt. Mitt största problem med dessa är att de antar att du vill använda deras favorit CSS-ram, animationsbibliotek eller HTML-boilerplatta. Harp gör inga antaganden om koden du vill skriva. Det ger dig bara verktygen för att skriva det snabbare.

Tänk på att det måste installeras och köras via kommandoraden. Det finns ingen GUI för detta. Men när du får det att gå - och det är inte svårt alls - är fördelarna större än inlärningskurvan.

Verktygen

CSS förprocessorer

Nu är jag säker på att de flesta av våra läsare är bekanta med de sätt som webbranschen har försökt förbättra på vanilj CSS. När miniservern för ditt projekt körs, samlas alla mindre, sass och stylus-filer automatiskt till CSS.

Sammanställningen är alltid tillfredsställande snabb. I alla mina test har ändringar som gjorts på min hemsida sammanställts på den tid det tar mig att spara min fil och uppdatera sedan min webbläsare.

Templerande språk

Också ingår Jade och EJS. Dessa är båda JavaScript-templerande språk som är utformade för att hjälpa dig att skriva / skapa mer avancerade HTML-dokument med mer flexibilitet. I grund och botten kan du bygga HTML-mallar och lagra ditt faktiska sidinnehåll separat från de här mallarna. Det är typiskt att använda ett CMS, bara det finns ingen databas (om du inte vill ha en), och du måste skriva allt innehåll i vanliga textfiler.

Den verkliga fördelen är naturligtvis kodunderhåll, plus alla de coola sakerna som de faktiska programmerarna kan göra med den faktiska servern och klientsidan JavaScript. Det här är också de språk som låter dig skapa mer avancerade system, som bloggar, alla relativt enkelt (igen om du har en programmerare på löneavgiften).

Vad är skillnaden mellan de två? Det handlar oftast om hur du föredrar att skriva din kod.

EJS håller sakerna enkla. Om du redan känner till HTML, handlar det bara om att lägga till i EJS-specifika taggar, som så: <% inkluderar global / header%>. Vad gjorde jag där? I grund och botten tog jag bara HTML för min sidhuvud från en annan fil och importerade den för användning i min huvudmall. Du kan naturligtvis göra mycket mer komplexa saker. Här är vad Harp dokumentationen har att säga om EJS.

Jade tar ett helt annat sätt att skriva HTML helt och hållet. Det ser ut så här, som visas på projektets hemsida:

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

Allt blir översatt till HTML och Javascript. Observera att ett if / else-uttalande införs i mitten av det hela och beroendet av korrekt inryckning.

Coffeescript

Coffeescript är att JavaScript som Jade är till HTML. I grund och botten är det ett förenklat format för att skriva JavaScript, som sedan sammanställs i vanliga saker. Liksom Jade är det tungt inskränkningsberoende och släpper mycket av syntaxen.

Det ser ut så här (ett annat exempel som skamlöst cribbed från projektets hemsida):

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

Och utsignalen ser så här ut:

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

Plattformen

De webbplatser som skapats med Harp kan vara värd var som helst, förstås. Det är dock värt att nämna att Harps skapare gjort en värdplattform speciellt utformad för saker som byggdes med deras programvara. Prissättningen är inte dålig, och den integreras med Dropbox för enkla automatiska uppdateringar till din webbplats. Kolla in det här: www.harp.io

Slutsats

Harpa, med sina förprocessorer, templerande språk, ren hastighet och godis på plattformen, är ett solidt tillägg till någon formgivares verktygslåda. Jag säger att det är värt inlärningskurvan.