Category → Handcraft
How the new Chrome Web Store increased signups to Handcraft by 1000%
Last week’s release of a renewed Chrome Web Store by Google increased signups to Handcraft by 1000%. What happened?
Handcraft gets Zen Coding
If you’re not familiar with Zen Coding, here’s a brief description taken from its homepage:
Zen Coding is an editor plugin for high-speed [HTML] coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:
div#page>div.logo+ul#navigation>li*5>a…can be expanded into:
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
HTML prototyping: because the details matter
This week we headed to Brighton in England to give a talk at a UX Brighton event about “Practical Prototyping”. Our talk focused on a couple of topics we’ve talked about on this blog over the past year:
- Wireframing and prototyping are two different things, even though a lot of people use them interchangeably
- HTML is a great way to do prototyping because it allows you to focus on the details
- Handcraft is a great way to do HTML prototyping because it was designed specifically for it
We also decided to create the slides in HTML using Google’s HTML5 slides library. This allowed us to prototype the presentation with Handcraft. Can’t get enough of that dogfood! 
Check out our talk, HTML prototyping: because the details matter – to navigate through the slides, you can use the space bar, the directional keys, or just click on the next/previous slide.
If you came to our talk, we’d like to invite you to try out Handcraft and if you like it, we’ll give you 3 months of the paid version for free so you can dig in. Just send us an email or a tweet and we’ll hook you up.
HTML5 Boilerplate doesn’t use HTML5 tags?
- No Yo Dawg for Paul Irish?
“HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.” – html5boilerplate.com
Here at Handcraft we couldn’t agree more, so it’s one of the starter templates we offer for HTML prototypes. But today I stumbled upon something that struck me as odd. When I inspected the HTML source code of html5boilerplate.com I noticed it was built according to their own boilerplate template, but where it recommends using the new html5 <header> and <footer> tags they decided to go for the pre-html5 equivalents instead: <div id="header"> and <div id="footer">.
Check out the screen I shot of webkit inspector looking at the “walk through it with me, now” section on the homepage, and its source:
HTML5 Boilerplate not using HTML5 tags.
I’m sure Paul Irish and his team have their reasons, and little me would be the last person on earth to question them, but I am curious to know why they chose not to follow their own recommendation and go for the native html5 tags. What do you think?
Common Sense Code Completion is now context aware
Since we created our code completion addon for CodeMirror (see this post), it’s been adopted by several other projects, both open source and commercial. Thanks to the people at webpop we’ve been able to take CSCC further and bring context awareness to the table.
Check out the demo at http://handcraft.com/demos/cscc2
- Common Sense Code Completion, now context aware.
Create wireframes in Powerpoint with PowerMockup
Apple Keynote and Microsoft Powerpoint are designed for creating presentations. But their drag & drop nature has led some people to find another excellent use for them: wireframing. By dragging UI elements onto a canvas in these tools, you can quickly mock up the visual flow of an app or site in either low or high fidelity if you have the right set of UI element templates.
The folks over at PowerMockup have created a new set of 78 user interface elements designed specifically for the Microsoft minded.
Here’s what you get:
All design elements are based on regular PowerPoint shapes that can even be viewed and edited when PowerMockup is not installed.
- 78 fully editable user interface elements
- 84 wireframe icons
- Easy access via a separate ribbon tab
- Compatible with PowerPoint 2007 and 2010
The major advantage of using PowerPoint as a mockup tool is it’s ubiquity: almost everyone has it and knows how to use it. It provides a common design environment that bridges the gap between business users and developers.
There’s a 30 day trial, so if Windows and Powerpoint are your tools of choice, be sure to give it a try over at www.powermockup.com.
Had any experience with it? Let us know in the comments below!
Launch: Handcraft in the Chrome Web Store
Handcraft is now available in the Chrome Web Store. This means that if you use Google Chrome, you can install Handcraft and it will appear in your new tab screen. Clicking it there will take you straight into the app using Google single sign-on.
If you’re a new customer
Google will ask you if you want to allow us access to your name and email address. This is just so we can identify you and set you up with an account. We’ll give you a Free account and sign you right into the editor. Once you give us access and tell Google to remember that decision, you’ll never see that screen again – each time you click the Handcraft icon, you’ll just pop straight into Handcraft itself.
If you already have a Handcraft account
Nothing changes if you already have a Handcraft account. If you signed up with a non-Google account, you can just keep signing in the old way. If you did sign up with a Google account, we support that as well. Just install Handcraft from the Web Store and allow it access to the same Google account you signed up with. We’ll put two and two together and you’ll be back in your existing account. You can also sign in with Google manually from the good old sign in screen.
If you enjoy using Handcraft, please give us a five star rating and a review on our Web Store page!
Tweak, don’t pivot
Back in March we wrote a short post called The Influence of Unintended Use, which highlighted our growing concern over how some people were using Handcraft.
New in Handcraft: better performance, drag & drop file uploads and more
The past few weeks we’ve made a lot of improvements to the underlying architecture running Handcraft, which has led to several speed gains. But that’s not all; we’ve also released a new javascript library, Live.js, introduced drag & drop file uploads in the editor and file management screens, and fixed tons of bugs.
Basic and Premium accounts now available
Basic and Premium subscriptions to Handcraft are now available. Both these plans are aimed at more frequent use of Handcraft, when you need more than one prototype, work with more users and upload more files. Our premium plan also lets you host your prototype on a custom domain, ideal for presenting or sharing a prototype without your clients having to know it’s Handcraft. Check out which features are available on each plan on our plans & pricing page.
Thanks for helping us test Handcraft
If you signed up for our beta in the past 9 months, you’ll also be receiving an email today with instructions on how to activate your account. On June 1st, we’ll be asking all of our beta users to activate their accounts, but if you do so before then, you’ll get an additional free month as thanks for helping us test Handcraft during beta. Without your feedback we wouldn’t be where we are today.
