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:
body
 h1 Jade - node template engine
 #container.col
 if youAreUsingJade
 p You are amazing
 else
 p Get on it!
 p.
 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

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

Conclusion

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

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…