Accelerate your front-end website development with Harp

Default avatar.
December 10, 2014
Accelerate your front-end website development with Harp.

I like static sites. To be more accurate, I like building them. There’s something pure about sitting there in front of your screen; it’s just you and your text editor, writing in plain old HTML and CSS. Don’t get me wrong, dynamic sites are fun too. God knows I’m a fan of WordPress and the ease of use that it affords users. Static sites bring me back, though. I remember switching from WYSIWYG software to a text editor. I remember streamlining the development process with my first ever PHP function: include. Those were good days, but unlike so many others, they’re not all gone. The difference is that now, we can do it better. Pre-processors like Less and Sass vastly improved the experience of writing CSS. We have any number of scripting languages to mix into our HTML, if we so choose. And then… then people did some really interesting things. I’ve previously mentioned the Hammer app for Mac. It’s an app that introduces its own functions and expansions to good old HTML, allowing you to include a file as a partial in another, and other good things. It compiles the results into a regular static site that can be hosted anywhere. It’s actually got quite a few more features than that, but this article isn’t about Hammer. Why? It’s only available for the Mac platform. Enter Harp…

Introducing Harp

It’s not an app, it’s a whole lot more. It includes preprocessors for CSS. It includes templating languages for HTML documents. It’s a mini server that can be used for development, or turned into an actual production server. You can use server-side JavaScript to turn it into a full app, as it runs on Node.js. Or, if you’re not a programmer, you can just build your static site, and then compile it for hosting elsewhere. Because it’s based on Node.js, it’s cross-platform. It’s also MIT licensed, so it’s free. You can even make changes and redistribute or resell it if you like. Now, people who have been keeping an eye out will have noticed that Harp is not the only tool of its kind. Lots of people are creating Node-based tools for getting web projects started quickly. My main problem with these is that they generally assume that you want to use their favorite CSS framework, animation library, or HTML boilerplate. Harp makes no assumptions about the code you want to write. It just gives you the tools to write it faster. Mind you, it has to be installed and run via the command line. There’s no GUI for this. But once you get it going — and that isn’t hard at all — the benefits outweigh the learning curve.

The tools

CSS pre-processors

By now, I’m sure most of our readers are familiar with the ways that the web industry has tried to improve on vanilla CSS. When the mini-server for your project is running, LESS, SASS, and Stylus files are all automatically compiled into CSS. The compilation is always satisfyingly fast. In all of my tests, changes made to my website have compiled in the time it takes me to save my file, then refresh my browser.

Templating languages

Also included are Jade and EJS. These are both JavaScript templating languages designed to help you write/​generate more advanced HTML documents with more flexibility. Basically, you can build HTML templates, and store your actual page content separately from those templates. It’s kind of like using a CMS, only there’s no database (unless you want one), and you have to write all of the content into plain text files. The real advantage is, of course, code maintenance, plus all the cool stuff that actual programmers can do with actual server and client-side JavaScript. These are also the languages that allow you to create more advanced systems, like blogs, all relatively easily (again, if you have a programmer on the payroll). What’s the difference between the two? It’s mostly about how you prefer to write your code. EJS keeps things simple. If you already know HTML, it’s just a matter of adding in EJS-specific tags, like so: <% include global/​header %>. What I did there? Basically, I just grabbed the HTML for my page header from another file and imported it for use in my main template. You can do lots more complex stuff, of course. Here’s what the Harp documentation has to say about EJS. Jade takes a very different approach to writing HTML altogether. It looks like this, as shown on the project’s home page: 

 h1 Jade - node template engine
 if youAreUsingJade
 p You are amazing
 p Get on it!
 Jade is pretty cool,

That all gets translated into HTML and Javascript. Note the inclusion of an if/​else statement right in the middle of it all, and the dependence on proper indentation.


Coffeescript is to JavaScript what Jade is to HTML. Basically, it’s a simplified format for writing JavaScript, which then gets compiled into the regular stuff. Like Jade, it’s heavily indentation-dependent, and drops a lot of the syntax. It looks like this (another example shamelessly cribbed from the project’s home page): 

math =
 root: Math.sqrt
 square: square
 cube: (x) -> x * square x

And the output looks like this: 

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

The platform

The websites created with Harp can be hosted anywhere, of course. It’s worth mentioning, though, that Harp’s creators made a hosting platform specifically designed for stuff built with their software. The pricing ain’t bad, and it integrates with Dropbox for easy automatic updates to your site. Check it out here: www​.harp​.io


Harp, with its preprocessors, templating languages, sheer speed, and cross-platform goodness, is a solid addition to any designer’s toolbox. I say it’s worth the learning curve.

Ezequiel Bruni

Ezequiel Bruni is a web/​UX designer, blogger, and aspiring photographer living in Mexico. When he\‘s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…