Ik hou van statische sites. Om nauwkeuriger te zijn, vind ik het leuk om ze te bouwen. Er zit iets puur aan als je daar voor je scherm zit; het is alleen u en uw teksteditor die schrijven in duidelijke oude HTML en CSS.
Begrijp me niet verkeerd, dynamische sites zijn ook leuk. God weet dat ik een fan ben van WordPress en het gebruiksgemak dat het gebruikers biedt. Statische sites brengen me echter terug. Ik herinner me dat ik van WYSIWYG-software naar een teksteditor ging. Ik herinner me het stroomlijnen van het ontwikkelingsproces met mijn allereerste PHP-functie: opnemen. Dat waren goede dagen, maar in tegenstelling tot zoveel anderen zijn ze niet allemaal weg.
Het verschil is dat we het nu beter kunnen doen. Pre-processors zoals Minder en Sass heeft de ervaring van het schrijven van CSS enorm verbeterd. We hebben een willekeurig aantal scriptingtalen om in onze HTML te mixen, als we dat kiezen. En toen ... deden de mensen echt interessante dingen.
Ik heb eerder de Hamer app voor Mac. Het is een app die zijn eigen functies en uitbreidingen introduceert in goede oude HTML, waardoor je een bestand als een gedeeltelijk bestanddeel in een ander kunt opnemen, en andere goede dingen. Het compileert de resultaten in een reguliere statische site die overal kan worden gehost. Het heeft eigenlijk nogal wat meer functies dan dat, maar dit artikel gaat niet over Hammer. Waarom? Het is alleen beschikbaar voor het Mac-platform.
invoeren Harp…
Het is geen app, het is nog veel meer. Het bevat preprocessors voor CSS. Het bevat templatetalen voor HTML-documenten. Het is een miniserver die kan worden gebruikt voor ontwikkeling, of kan worden omgezet in een echte productieserver. U kunt JavaScript op de server gebruiken om er een volledige app van te maken, omdat deze op Node.js. Of, als u geen programmeur bent, kunt u uw statische site gewoon bouwen en vervolgens compileren voor elders hosting.
Omdat het is gebaseerd op Node.js, is het platformonafhankelijk. Het heeft ook een MIT-licentie, dus het is gratis. U kunt zelfs wijzigingen aanbrengen en herdistribueren of doorverkopen als u dat wilt.
Nu zullen mensen die in de gaten hebben gehouden hebben opgemerkt dat Harp niet het enige instrument in zijn soort is. Veel mensen maken op Node gebaseerde hulpmiddelen om snel webprojecten op te starten. Mijn grootste probleem hiermee is dat ze er in het algemeen van uitgaan dat je hun favoriete CSS-framework, animatiebibliotheek of HTML-boilerplate wilt gebruiken. Harp maakt geen aannames over de code die u wilt schrijven. Het geeft je gewoon de tools om het sneller te schrijven.
Let wel, het moet worden geïnstalleerd en uitgevoerd via de opdrachtregel. Er is geen GUI voor dit. Maar als je eenmaal door hebt - en dat is helemaal niet moeilijk - wegen de voordelen op tegen de leercurve.
Inmiddels weet ik zeker dat de meeste van onze lezers bekend zijn met de manieren waarop de webindustrie heeft geprobeerd om de vanilla CSS te verbeteren. Wanneer de miniserver voor uw project wordt uitgevoerd, worden LESS-, SASS- en Stylus-bestanden allemaal automatisch in CSS gecompileerd.
De compilatie is altijd bevredigend snel. In al mijn tests hebben wijzigingen die in mijn website zijn aangebracht, verzameld in de tijd die nodig is om mijn bestand op te slaan en vervolgens mijn browser op te frissen.
Ook inbegrepen zijn Jade en EJS. Dit zijn beide JavaScript-templatietalen die zijn ontworpen om u te helpen meer geavanceerde HTML-documenten te schrijven / genereren met meer flexibiliteit. Kortom, u kunt HTML-sjablonen maken en uw daadwerkelijke pagina-inhoud gescheiden van die sjablonen opslaan. Het is net zoiets als een CMS gebruiken, alleen is er geen database (tenzij u er een wilt) en moet u alle inhoud in platte tekstbestanden schrijven.
Het echte voordeel is natuurlijk code-onderhoud, plus alle coole dingen die echte programmeurs kunnen doen met echte server- en client-side JavaScripts. Dit zijn ook de talen waarmee je geavanceerdere systemen, zoals blogs, allemaal relatief eenvoudig kunt maken (opnieuw, als je een programmeur op de loonlijst hebt).
Wat is het verschil tussen de twee? Het gaat meestal om hoe je je code wilt schrijven.
EJS houdt de zaken simpel. Als u al HTML kent, hoeft u alleen EJS-specifieke tags toe te voegen, zoals: <% include global / header%>. Wat heb ik daar gedaan? Kort gezegd pakte ik de HTML-code voor mijn paginakop uit een ander bestand en importeerde deze voor gebruik in mijn hoofdsjabloon. Je kunt natuurlijk veel meer complexe dingen doen. Dit is wat de Harp-documentatie te zeggen heeft over EJS.
Jade heeft een heel andere benadering om HTML helemaal te schrijven. Het ziet er als volgt uit, zoals te zien op de startpagina van het project:
bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,Dat alles wordt vertaald in HTML en Javascript. Let op het opnemen van een if / else-verklaring in het midden van dit alles en de afhankelijkheid van de juiste inspringing.
Coffeescript is om te JavaScript wat Jade is voor HTML. Kortom, het is een vereenvoudigd formaat voor het schrijven van JavaScript, dat vervolgens wordt gecompileerd in de reguliere dingen. Net als Jade is dit sterk afhankelijk van inspringingen en valt veel van de syntaxis weg.
Het ziet er als volgt uit (een ander voorbeeld schaamteloos geknoeid vanuit de startpagina van het project):
math =root: Math.sqrtsquare: squarecube: (x) -> x * square xEn de uitvoer ziet er als volgt uit:
math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};De met Harp gemaakte websites kunnen natuurlijk overal worden gehost. Het is echter vermeldenswaard dat de makers van Harp een hostingplatform hebben gemaakt dat speciaal is ontworpen voor dingen die met hun software zijn gebouwd. De prijsstelling is niet slecht en kan worden geïntegreerd met Dropbox voor eenvoudige automatische updates van uw site. Bekijk het hier: www.harp.io
Harp, met zijn preprocessors, sjabeltalen, pure snelheid en goede platformonafhankelijkheid, is een solide toevoeging aan de gereedschapskist van elke ontwerper. Ik zeg dat het de leercurve waard is.