Backbone.js 1.0.0 is go! Mark Penfold examines this and the other tools of note that came out in March.
This month there's something of a well ordered, structural theme to proceedings. We have formulae and functions that get down to nuts and bolts, MVCs of the first water, and yet more grids - along with a widget for controlling them. Everything should, by now, be in its right place.
The library of the week, the one that sticks in the mind, is Formula.js - The functions which make Excel and Google Docs tick, captured in JavaScript. It's significant because, when you think about it, who hasn't had an outcome determined by a spreadsheet? And now, the power which those cells deploy has been set loose upon the web.
This organising potential is echoed visually by Extra Strength Responsive Grids and jQuery Nested. Meanwhile, the MVC pattern behind Sails and Backbone is just another way of boxing up the concepts and functions on which the web relies. Making them easier to digest.
Balancing that little lot we have just one thing: collaboration. Draftin.com brings this bedrock of civilisation to the art of online writing. And it does so with enough aplomb to remind us that the production of new meaning is a human thing. One which rapidly escapes boxes and categories. A fact which, in turn, makes new boxes and categories necessary.
01. Sails
Price: Free
If you're interested in making web applications, particularly those with a focus on realtime, multi-user communication, then you might want to take a look at Sails, a brand new MVC framework for Node.js.
The MVC pattern is a well established favourite and Sails builds on this, as well as the Express Framework, a Node stalwart. So, what's new? There's a JSON API, auto-generated for your models. Your controllers have basic CRUD operations, as standard. And if that's not enough, the system comes with integrated security measures in the form of customisable 'policies'.
Sails has the feel of a well-made app. One which rewards your interest, revealing new ways to achieve some common development goals.
Writers, though they're frequently somewhat hermit-like, really need editors. And if they can't get an editor, they need collaborators. And if they can't get that, it helps to at least have a nice environment in which to work. Draft provides all of the above.
A browser-based text/markdown editor which syncs with the likes of Dropbox and Google drive. Draft gives you single-click sharing so that editors can hack great chunks out of your masterpiece, leaving you with a series of versioned drafts. And finished work can easily be posted to the likes of WordPress.
The interface is crisp and easy on the eye, the collaboration aspect works like clockwork and it's free. What more could you ask for?
People just love their spreadsheets. All those little boxes, all those formulae. All that power. Now you can bring this wonderful experience to your users with the amazing Formula.js - a JavaScript implementation of the functions which make Excel/Google Docs such engines of organisation.
There's quite an array of dependencies required to make Formula.js work, but it's an impressive feat none-the-less. And it's still on-going. Most features from both platforms have been ported (Financial, Logical, Mathematical etc) with only a few stragglers left to conquer. The possible applications are so wide-ranging the mind boggles.
If you're bewildered by the growing population of responsive grid frameworks then this isn't going to help much. However, if you are the kind of chap who likes to tinker with layouts, nesting grids, stacking up classes on your div elements like there's no tomorrow, then Extra Strength Responsive Grids (ESRG) is for you.
Bundled with the excellent equalize.js, ESRG deploys meaningful class names such as grid-half and grid-quarter to make life easier. It's also SASS-enabled, so if you're up on your pre-processors it can accommodate you there, too. The whole package is pretty slick and seemingly robust, so if you have more than a passing interest in fluid grids, take ESRG for a spin.
There's a handful of page tiling solutions out there, each with their own ways of working towards gap-free content. But none has managed quite the comprehensive wall-building which jQuery Nested achieves.
How does it work? The page is broken down with a customisable minimum width/height grid size, elements are then defined by their occupancy of a number of these columns or rows. Next, the page is tiled to make it as airtight as possible. But there's always gaps with this approach. The secret sauce here is that Nested resizes boxes to fill the gaps it cannot avoid. A simple but effective solution.
Working with string data at a character-by-character level is sometimes an essential part of a working algorithm. JavaScript doesn't do a brilliant job of supporting this kind of thing, particularly when you step outside the Roman alphabet, so Joe Larson has created CharFunk: an excellent little library for fiddling about with character data.
Now, things like querying a character to find out if it's a letter or a number is as simple as CharFunk.isDigit('\u0E54'); which is of course true since this is the Thai number four. Regular expressions and resulting string manipulations are rendered very straightforward, too. The API is small, free of dependencies and fairly straightforward. Larson's Unicodinator is worth checking out too.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Probably the most significant of MVC frameworks in terms of usage and prestige, Backbone.js has finally reached a 1.0.0 release. It's not a massive jump to here from 0.9.x but it's a milestone in the sense that its developers now have the confidence to say this is a mature solution.
As such, it's a marvel that Backbone is still contained within a 6.3kb package. Sure, you need to use underscore, and templating is up to you, as is the overall design of your application. But by providing Collections, Models, Views and Routes but leaving their usage up to the individual as far as possible, Backbone remains an enabling tool rather than a proscriptive framework. This is its great strength.
Price: Free during beta (public projects always free)
Not everyone has access to a well-configured development environment, particularly not one intended to act as a collaboration point for large-scale web applications and sites. Codio is the latest in a line of impressively figured browser-based IDEs. It's still at an early stage but the site is making all the right noises about its future.
That future includes a social coding interface to the likes of Git and a 'Google Docs style' UX. Public projects are free and can be forked with a button click. As things stand, you'll need to know a user exists to find his/her projects, but that may well change once the social aspect is in full effect. This could be a useful project for learning, collaboration or on-the-hoof coding.
Place IMG pulls in images from 500px and Flickr, serving them up either as downloadable content or embeddable link. Subject matter can be filtered by categories like 'Nature' and 'People' while the look can be whittled down to black and white or sepia. It makes those mock-up layouts much more convincing with almost zero effort.
Just choose your height and width, subject matter and filter, then build a URL /500/350/people and away you go. There's plug-ins too, for some of the big CMS packages, WordPress and Drupal among them.
As a developer, the question can sometimes arise as to whether your favourite feature - that killer experience - is worth more to you than market share. The price of those decisions (for example, not to support IE below version 8) is now rapidly and easily quantifiable thanks to burtdev.net.
Just running your eye over those stats is, in itself, pretty interesting. The iPad almost doubling Safari's significance, for example. In fact, it's fun trying to see what you can eliminate while still reaching a reasonable percentage of users. Of course, you need to tie this to the feature changes, but you'll probably arrive with a shopping list.
