netmagFeature

New tools for web design and development: April 2013

Mark Penfold looks at 10 of the best tools to come out in April

This was a super-busy month, with more tools and experiments popping up than there was time to explore them.

Mozilla Persona and jQuery both announced version 2 this month. They both have elements of controversy about them: jQuery thumbing its nose at Internet Explorer, and Mozilla teaming up with Yahoo in an attempt to get the ball rolling on its identity program. It's not clear what the repercussions of either will be in the long term but, in the immediate future, the reaction among developers is most likely to be puzzlement.

At a smaller scale things are no less interesting. JavaScript continues to provide an excellent platform for personal experimentation, as the bafflingly clever verlet.js shows. Meanwhile, tools like Bootstrap and Swatchmaker demonstrate how the web is great at fully exploring a possibility space. The result under consideration here - Geo-Bootstrap - is oddly fascinating in a world still desperate for minimalist design. It also reminds us that there's nothing wrong with having fun, even in the world of web development.

1. NuBook

Price: $10 per month or $100 per year

There are a lot of people who want a smart-looking, easy-to-manage presence on the web. They don't want any code to look at, they don't even want a tinyMCE-type editor or a full-on admin area. But they do want to tell their story while looking good and syncing with Facebook. For those people, Nubook is ideal.

What you have here is a very broad range of page templates fronted within a personalised NuBook domain. Your pages can be categorised and organised to provide navigation, but the templates themselves are short on flexibility. This could be a strength or a weakness depending on how hands-on you tend to be.

Nubook's strength is in its templates and it has them by the dozen
2. PolyChart2.js

Price: Non-commercial use is free, commercial use starts at $99

If you've got data sets that need interpreting you'll be familiar with the rabbit-hole that charting solutions represent. Hours can disappear while you attempt to get a sensible plot of even quite simple statistics.

Fortunately Polychart has the kind of easy-to-master API that allows you to focus on making sense of the statistics themselves rather than the display functions that wrangle them. Data can be linked to 'aesthetic' elements such as colour, size and position, all using JSON (or SVG/URL) encoded data.

It doesn't have the reach of something like D3 and there's a fee for commercial use but this is still a nice, streamlined library.

The ups and downs of JavaScript charting apps...
3. Geo for Bootstrap

Price: Free

It might be a bit niche, but the idea of giving Twitter's minimalist front-end framework a '90s-style make-over has an appeal all its own. And that's just what Geo-Bootstrap does, bringing the style of GeoCities sites back from the dead. Well, almost dead.

Created with Swatchmaker, Geo gives some indication of just how flexible Twitter's framework is. And there's something oddly compelling about the visual style here too. It feels a bit like rubber-necking but it's well worth checking out.

That reminds me, can I get my MCHammer CDs back?
4. jQuery 2

Price: Free

The latest version of jQuery is smaller, faster and more flexible but it's only for 'modern' browsers. That means no support for Internet Explorer below version 9. And even later builds of IE can be affected if they're running in compatibility mode.

Given the change of stance regarding IE, this new package is a lot like being delivered a Lamborghini when you live on a desert island. Lovely, but of limited use. There's the migration plugin of course, or conditional delivery tricks, but for most people jQ 2.0 is going to be window shopping for the foreseeable future.

jQuery 2 sends a message about browser functionality
5. Mozilla Persona Beta 2

Price: Free

It has been a long time coming, but the second release of Mozilla's decentralised global identity system has finally landed. Its headline new feature has been dubbed 'identity bridging'. Which basically means taking your login from an established source (i.e. webmail) and using that as a general passport.

Though the only sign-up so far is Yahoo mail, the system is still pretty interesting - allowing a streamlined sign-in process to be implemented on any site with a minimum of hassle. There are still some issues to address, such as the need for integration, but the Mozilla team seem to be aware of these. Regardless of implementation details, however, the project faces one very difficult hurdle: developer uptake.

Log in or log out? Persona has a second lease of life
6. Verlet.js

Price: Free

The JavaScript community continues to produce really interesting projects. The kind of thing which proves that people still take great pleasure in pure intellectual challenges, in creativity for its own sake. Case in point: Verlet.js, a physics engine built around the Verlet integration algorithm (a method for solving Newton's equations of motion, apparently).

The library gives you three basic building blocks: particles, constraints and composites of these two. Putting these together, varying their relative strengths and interactions can produce amazing results. Take a look at the author's spider-web example and begin to unpick the code. Great fun.

A clever, tiny, physics simulator written in JavaScript
7. Squel.js

Price: Free

Writing your own SQL queries can get pretty hairy, particularly if it's not something you do all that often. However, it's such a critical, foundational problem that in order to play it safe, you might only ever use tried-and-tested methods - ones which may not be optimal for your project.

Having a clear, concise JavaScript API that can build just about any type of query string sounds like a great idea. So long as you use it responsibly - NOT client-side! Fortunately, Squel comes in both front and back-end configurations, node.js providing the server-side solution.

If you aren't into node, then at least you have a tool for reliably outputting multi-table, filtered, joined and sorted queries which you can then chop up and deliver via your own back-end code.

Create complex SQL using a human-readable API
8. Unirest

Price: Free

Working with REST APIs should be a simple, almost enjoyable prospect. It's a well understood paradigm and it quite often means someone else has done the hard work for you. But it's not always simple, and if you're building your own service then it's easy to get bogged down in the specifics of a particular implementation.

Unirest addresses this problem by wrapping the common REST verbs (GET, PUT, POST etc…) into a set of functions which have been uniformly implemented across languages from Java to Objective-C via PHP, Ruby and Python. Unirest helps you handle requests, set headers and catch responses without spending time sweating the details.

Unirest puts the REST verbs centre stage
9. Fragment.js

Price: Free

If you've tried building your own MV* system, or if you've used an off-the-shelf solution which leaves the templating up to you, then there's a good chance you've come across the tar-pit that HTML fragments, and templating in general, represent to the scrupulous developer.

The nice thing about Fragment.js is that it's agnostic about which engine you use for your templating. Or indeed whether you use one at all. It'll handle Mustache as well as Handlebars, and everyday fragments as happily as either. It's a tiny file with a clean API, and it installs via Bower.  

You read it right, HTML as JSON
10. WebCode

Price: £34.99 Mac App Store

Have you ever looked at icons and other attractively shiny graphic items on a website and wondered how they managed to get their metallic buttons so real-looking, or their glass so convincingly translucent?

Well, chances are they weren't created by spending ours fiddling with values in a code editor. They were drawn with an app like WebCode, which has finely calibrated vector tools outputting SVG and/or JavaScript, ready to be dropped into place.

WebCode itself has a blend of vector tools and gradient/colour controls but producing even half-decent results requires some effort. If you're serious though, it has the tools you're looking for - at a price.

Along with canvas and SVG, WebCode will output HTML/CSS renderings

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!

Subscription offer

Log in with your Creative Bloq account

site stat collection