Accelerate your front-end website development with 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,
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
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.ioConclusion
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
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…