Mark Penfold takes a look at 10 of the best new tools to see the light of day in November. There are utilities for handling menus, forms, prototyping and more
This month has a very pragmatic feel to it. Lots of problem-solving applications. If they were carpenters' tools, they'd be the interesting little ones that appear just out of reach on a silhouette of their own above and behind the craftsman's workbench. The situations these items are designed to fix are various: the persistence of form data, whether the browser window gets lost or the building it's in gets hit by a tornado - that's Sisyphus. The artful capturing and handling of bugs gets a new look with Bugherd. Or the perennial menuing conundrum.
This month has a very pragmatic feel to it. Lots of problem-solving applications. If they were carpenters' tools, they'd be the interesting little ones that appear just out of reach on a silhouette of their own above and behind the craftsman's workbench.
The situations these items are designed to fix are various: the persistence of form data, whether the browser window gets lost or the building it's in gets hit by a tornado - that's Sisyphus. The artful capturing and handling of bugs gets a new look with Bugherd. Or the perennial menuing conundrum.
Best of all though - Zen Coding, re-launched as Emmet. The magical multi-tool of HTML/CSS/JS development. Small and fold-away but capable of whittling an entire set of dining chairs with the flick of a wrist. Straining the analogy a bit there, apologies.
As always mobile prototyping puts in a good appearance. There will eventually be more of these things than there are mobile applications. And of course Evernote 5, which makes a real piece of work out of collecting things which might otherwise form the basis of whimsical discussions in the watering holes of Shoreditch.
1. Emmet
Price: Free
Formerly known as Zen Coding, project Emmet, delivers a CSS-like shorthand to your manually coded pages. It's a simple concept, which builds on the idea of the 'snippet', providing you with a tool to cut through the most repetitive of coding tasks like a knife through butter.
Apply the simple syntax: 'p.class_name' gives you '<p class="class_name"> </p>'. Nesting is simple: 'div>p.class_name' becomes '<div><p class="class_name"> </p></div>'. You get the picture. You can even embed lorem impsum text, generate lists and, once you get a feel for things, create your own shortcuts and snippet structures.
All in all, this is a really powerful extension, available for a broad selection of popular editors. If you're hand-coding it's going to save you a lot of time. Don't overdo it though, as the strings rapidly become undecipherable.
How long is this going to take? How many people do we have free to handle it? Who's tracking the bugs and writing the tests that prevent them? There's a host of questions like this that go along with any large software development project. And frequently, some of them just never get asked, let alone answered.
Sprintly gives you a visual handle on the situation which provides sufficient clarity that nothing need fall though the cracks. Set up jobs as stories, tasks, tests and defects. Follow these through their life-cycle. Monitor and assign team members, comment on progress and show progress with an attractive set of graphical outputs. You can even integrate with Github.
Menus. They cause considerable pain for such a simple concept. There are some tried and tested solutions though, and if you have limited space to work with, few have done quite as well as the panelled approach favoured by the likes of Google on mobile devices.
That being the case, designer/developer Anthony Colangelo has been good enough to supply the world with an off-the-shelf version of this menuing system - JPanelMenu. It works as a jQuery plugin, splitting the page into two sections, one for the menu, one for previous full-page content, and animating their bisection.
If you haven't been using Evernote then EN5 is a nice application to play around with. Great new UI with a shortcut bar, left panel overview, separate notebooks and Atlas view, giving your note-taking a geographical twist. It is a compelling application - even if the intro vid is a lot like an episode of Thunderbirds.
For users of previous versions the picture is less clear-cut. The new features and UI seem to be causing concerns, particularly among 'power users'. This is understandable as the system offers a way of organising copious amounts of personal data. When someone changes how that works and people become disoriented, stress can result. Probably a trial of the new version would be wise rather than an immediate update.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Forms are challenging things to get right. This was the case long before the internet came along and it remains true now. Regardless of how clever you make your drop down animations or inertial selectors the one thing you cannot account for is lost data.
Dropped connections, closed browsers, power outages… if you're half way through a long and boring form there's a long list of potential disasters just waiting to happen. Sisyphus.js makes these obsolete by employing local storage to remember entered values, only clearing that memory when a form is submitted or reset.
There's a lot of prototyping tools for the iPhone out there. They have jazzy interfaces, drag and drop, and lots of buttons and palettes. Ratchet has none of that, offering instead a concise set of HTML/CSS and JS components, ready to be snapped together by hand, connected up intelligently then pushed out to your device.
If you prefer to get your hands dirty even at the prototyping stage then Ratchet makes sense. Handling the creation of workable demos this way will give you an insight into their workability at production level and should provide a closer approximation to your 'vision'.
Coding static pages can be an enjoyable process, but it's always marred by a few time-intensive shortcomings. The need to reload every change, the inability to include code blocks from other files, remembering file paths and the task of compiling stuff like SASS and CoffeeScript.
Well, Hammer takes care of these problems (and a couple more) for you. Once you add a project to Hammer, it creates a Build folder into which it compiles finished code every time you make a change to the underlying components such as header, footer and nav. There's a handy publishing option that gives you a live preview URL to share with interested parties.
Pen and paper still cannot be beaten when it comes to raw creative expression. Even if what you're doing is working out the interface for a new mobile app, chances are you'll think more clearly with a piece of A4 sat in front of you. POP lets you think freely then turn your doodles into working prototypes.
All you do is take a photo of the pages you've drawn, add touch areas and assign them a function. Pretty quickly you've got a sketchy idea of what will or won't work and it's time to sit down with something a bit more industrial.
As Websico amply demonstrates, WYSIWYG web design tools have come a long way in the last couple of years. Now you can drag and drop elements, create components and add styles, all through clever modal dialogue windows. It's clever stuff, there's no denying that.
If you have a background in software development then Websico, like most similar systems, will probably annoy the hell out of you. But even for this class of user there's a use-case because Websico provides a simple in-place content editing system for your clients. This way everyone works from the same page so there's less chance of a snafu.
There's plenty of video tutorials and comprehensive documentation too, so if you're looking for a visual development tool with CMS capabilities, Websico is worth checking out.
Contrary to popular belief, the launch of a new site is not the end of a dev team's work. If anything, it's the point at which the sweat really starts to build. As clients begin to receive feedback, these garbled and conflicting requests begin to filter back as emails, which then get batted around before finally becoming a bone of contention.
Bugherd provides a neat, well organised way to handle feedback, bug fixes and feature requests - without the email overhead. A simple .js include, and visitors to the site get a feedback button. Guests to the project get to file bugs and requests, members get to administer the whole shebang from a friendly, intuitive interface. Progressing bugs from report to action to completion is much preferable to the alternative situation: a gradual build-up which will eventually overwhelm.
If you have come across any cool tools recently that haven't made our list but you think they should have, please let us know in the comments. Equally, if you've created a tool that you'd like us to feature in the next roundup, shoot us an email!
Thank you for reading 5 articles this month* Join now for unlimited access
