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

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…