Jeg kan lide statiske steder. For at være mere præcis, kan jeg godt lide at opbygge dem. Der er noget rent om at sidde der foran din skærm; det er bare dig og din tekstredaktør, skriver i almindelig gammel HTML og CSS.
Gør mig ikke forkert, dynamiske steder er sjove også. Gud ved, jeg er en fan af WordPress og den brugervenlighed, det giver brugerne. Statiske steder bringer mig tilbage, selvom. Jeg kan huske at skifte fra WYSIWYG software til en tekst editor. Jeg husker at strømline udviklingsprocessen med min første PHP-funktion: inkludere. Det var gode dage, men i modsætning til så mange andre er de ikke alle væk.
Forskellen er, at vi nu kan gøre det bedre. Forprocessorer som Mindre og Sass stærkt forbedret erfaringerne med at skrive CSS. Vi har et antal scriptsprog, der skal blandes ind i vores HTML, hvis vi vælger det. Og så ... så gjorde folk nogle virkelig interessante ting.
Jeg har tidligere nævnt Hammer app til Mac. Det er en app, der introducerer sine egne funktioner og udvidelser til god gammel HTML, så du kan inkludere en fil som en del i en anden og andre gode ting. Det kompilerer resultaterne til et almindeligt statisk websted, der kan være vært overalt. Det har faktisk en hel del flere funktioner end det, men denne artikel handler ikke om hammer. Hvorfor? Den er kun tilgængelig til Mac-platformen.
Gå ind Harpe…
Det er ikke en app, det er meget mere. Det indeholder præprocessorer til CSS. Det omfatter templerende sprog til HTML-dokumenter. Det er en mini-server, der kan bruges til udvikling, eller omdannet til en faktisk produktionsserver. Du kan bruge server-side JavaScript til at gøre det til en fuld app, da den kører på Node.js. Eller hvis du ikke er en programmør, kan du bare bygge din statiske side og derefter kompilere den til hosting andetsteds.
Fordi det er baseret på Node.js, er det cross-platform. Det er også MIT licenseret, så det er gratis. Du kan endda foretage ændringer og omfordele eller videresælge den, hvis du vil.
Nu har folk, der har holdt øje med, bemærket, at Harpe ikke er det eneste værktøj af sin art. Mange mennesker laver Node-baserede værktøjer til at starte web-projekter hurtigt. Mit hovedproblem med disse er, at de generelt antager, at du vil bruge deres foretrukne CSS-ramme, animationsbibliotek eller HTML-boilerplate. Harp giver ingen antagelser om den kode, du vil skrive. Det giver dig bare værktøjerne til at skrive det hurtigere.
Mind dig, det skal installeres og køre via kommandolinjen. Der er ingen GUI til dette. Men når du får det i gang - og det er slet ikke svært - fordelene opvejer læringskurven.
På nuværende tidspunkt er jeg sikker på, at de fleste af vores læsere er bekendt med de måder, som webindustrien har forsøgt at forbedre på vanilje CSS. Når miniserveren til dit projekt kører, bliver alle filer, MINDER, SASS og Stylus alle automatisk kompileret til CSS.
Samlingen er altid tilfredsstillende hurtigt. I alle mine test har ændringer foretaget på min hjemmeside samlet i den tid det tager mig at gemme min fil, og opdater derefter min browser.
Også inkluderet er jade og EJS. Disse er begge JavaScript-templerende sprog designet til at hjælpe dig med at skrive / generere mere avancerede HTML-dokumenter med mere fleksibilitet. Dybest set kan du opbygge HTML-skabeloner og gemme dit faktiske sideindhold adskilt fra disse skabeloner. Det er ligesom at bruge et CMS, kun der er ingen database (medmindre du vil have en), og du skal skrive alt indhold til almindelige tekstfiler.
Den reelle fordel er selvfølgelig kodevedligeholdelse samt alle de flotte ting, som de faktiske programmører kan gøre med den faktiske server og klientsiden JavaScript. Disse er også de sprog, der giver dig mulighed for at oprette mere avancerede systemer, som blogs, alle relativt let (igen, hvis du har en programmør på lønnen).
Hvad er forskellen mellem de to? Det handler mest om, hvordan du foretrækker at skrive din kode.
EJS holder tingene simple. Hvis du allerede kender HTML, er det bare et spørgsmål om at tilføje i EJS-specifikke tags, som sådan: <% inkluderer global / header%>. Hvad gjorde jeg der? Dybest set greb jeg bare HTML'en til min sideoverskrift fra en anden fil og importerede den til brug i min hovedskabelon. Du kan selvfølgelig gøre meget mere komplekse ting. Her er hvad Harp dokumentationen har at sige om EJS.
Jade tager en helt anden tilgang til at skrive HTML helt. Det ser sådan ud som vist på projektets hjemmeside:
bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,Alt bliver oversat til HTML og Javascript. Bemærk inkluderingen af en if / else-sætning lige midt i det hele og afhængigheden af korrekt indrykning.
Coffeescript er at JavaScript, hvad Jade er til HTML. Dybest set er det et forenklet format til at skrive JavaScript, som derefter bliver kompileret i de almindelige ting. Ligesom Jade er det stærkt indrykkelsesafhængigt og falder meget af syntaksen.
Det ser ud som dette (et andet eksempel skamløs cribbed fra projektets hjemmeside):
math =root: Math.sqrtsquare: squarecube: (x) -> x * square xOg output ser sådan ud:
math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};Websiderne, der er oprettet med Harp, kan naturligvis være vært overalt. Det er værd at nævne, at Harps skabere lavede en hosting platform specielt designet til ting bygget med deres software. Prissætningen er ikke dårlig, og den integreres med Dropbox for nemme automatiske opdateringer til dit websted. Tjek det her: www.harp.io
Harp, med sine præprocessorer, templerende sprog, ren hastighed og god platform på tværs af platformen, er en solid tilføjelse til enhver designers værktøjskasse. Jeg siger, at det er værd at lære kurven.