Handcraft: Text Driven Web Development, on the Web

Here at Web.Appstorm, we’ve written about a number of brilliant web apps. Some of them I use everyday, and many have become a part of my work flow and are of great use to me. The Internet is much like this, full of great apps that can help you with nearly anything you’d ever need help with. What if you want to add to the Internets great arsenal of tools orwealth of information by building your own site?

The answer to this could well be Handcraft. In essence, it’s an online text editor, though it’s a lot more than this in practice. It can become your whole web development work flow and backup setup in one. Handcraft started out as a prototyping tool, designed to let you build your sites directly in the browser, for the browser, rather than starting out in Photoshop. Let’s see if this is the tool you need to design your next great site.

Interface

Handcraft is a brilliantly built web app. Both the site and editor have an intuitive functional design, which looks awesome! And while building sites on a website is a funny concept to get your head around, this next interesting fact will make that all the harder – the Handcraft website is built in Handcraft itself as a prototype! It’s great to know the developers themselves use this app themselves, never mind using it to build their website! For those interested, the Handcraft editor itself isn’t built-in Handcraft to avoid breakages from getting too recursive.

Handcraft's homepage

Pricing Plans

Handcraft’s designed as the place where you’ll put together the code for your sites most basic form, here referred to as prototypes. You can get started with a free trial of any of the accounts, stick with the free plan for working on only one prototype, or upgrade to a paid account for more options and storage space. The pricing plans may seem steep, though for someone who makes their living building websites this should be a great investment. Best of all, the plans include multiple users by default, so you can use Handcraft with your whole team without purchasing accounts for everyone.

You've 3 plans to choose from

Handcraft compared to usual text editors

Handcraft is different in many ways and adds many functions not found with a lot of normal text editors. Its auto-complete functionality is amazing (though it does take some time to get used to), and its file management is supreme once you understand how it works. You can set it to full screen, or keep different files in different tabs for quick browsing and editing much like tabs in your favourite text editor. Saving and preview it super quick, though I’d like to see it auto save when I decide to preview my work (clicking preview shows the most updated save, but this doesn’t necessarily mean its your latest work in the text editor). Its built to be a lot like a CMS (content management system) and certain syntax’s can be used to create new pages or templates for your site.

Be warned though, despite all these great features Handcraft isn’t a WYSIWYG editor, it’s a text editor. Though a very good one!

Handcraft's text editor

Getting started with Handcraft

On first using Handcraft you’ll see a Prototype called Getting started with Handcraft, I highly recommend opening this and at least starting the guide as it’ll help you find you figure out how best to use Handcraft. As with everything the more work you put into this – the greater your reward. The finer details of Handcraft may take while to fully grasp, though after the first few steps and some messing about you’ll soon get a feel for whether Handcraft is for you or not. The more familiar you are with HTML, CSS and JavaScript the easier using Handcraft will be. When you’re building a website, these technologies are necessary whether using Handcraft or not! If you’re interested in more training on how to build a website from scratch, check out these great courses on TutsPlus -

30 Days to Learn HTML and CSS

30 Days to Your First Website Design

There are handy guides on how to do everything!

Prototypes

Prototypes are the workspace where you can edit and preview your work, this preview can be worked on by many colleagues and be shared with as many people as you like to showcase your work, mainly for demos. They are perfect for showing a client work and having it instantly available for them to preview. With the free account you’re only given access to 1 prototype, while the Premium plan can have up to 100. Space is also at a premium in the free account with only 1mb available. Though this is probably plenty of space given it’s a web page, it should be plenty for many web pages, more so if your images are optimized for the web and as small in disk size as possible, or stored on other services and referenced in your code.

The Handcraft website itself is a Prototype

Conclusion

Using Handcraft has been an interesting experience. Building a web site directly in a browser is something I never thought I’d be doing, though looking back now it doesn’t make any sense not to. I regularly use web apps to write posts for Appstorm, whether it’s on Appstorm itself powered by WordPress or using Google docs, so I might as well use a web app to create my own sites or write up web code anyhow! If you’re looking for a text-driven website designer for the web, give Handcraft a try. You might find yourself addicted to your new favorite online text and web editor!


Summary

Handcraft is a web-based prototyping tool for interaction designers and front-end developers.

8
  • http://gyrostorm.com Jake

    I’ve been waiting for something like this for a while now. I’ve tried other services but this one seems different, in a good way.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow