New tools for web design and development: May 2013

The crop of new development tools this month is rich and varied. Taking in web-based IDEs, testing tools, programming paradigms and more, there's enough raw material here to entertain a keen mind for months.

If you wanted to be selective you could just study and apply new approaches like lazy loading, or reactive programming. Or maybe you'd prefer to tighten cross-platform consistency with GhostLab. And, if you're feeling particularly clever, you could explore the possibilities of deploying a Bunny 'darknet' from your coffee shop armchair.

1. ICE Coder 2.4

Price: Free

Another promising addition to the ranks of browser-based IDEs, ICE Coder deploys CodeMirror as its highlighting/editing engine, backing this with a series of plugin support packages for database management, JSLinting and image crunching.

All in all, this is a nice system to work with. The layout is familiar, and the interface fast and responsive. Language support is web-centric at present but the feature-set is strong: code folding, nesting validation, image viewer, and GitHub sync to name just a few choice examples.

Version 3 is currently in development, and if it maintains its current trajectory it will make ICE Coder a must-try among web IDEs.

2. Bunny

Price: Free

If you suspect your communications are being intercepted, or you just wish to 'go dark' then why not take a look at the intriguingly named Bunny project. The goal of bunny.py is to provide a tool for slipping data into wireless communication without it being noticed.

This is achieved by monitoring current network traffic, building a model from this usage and chopping up your data and adding it in where the model suggests it would be least obvious. Clever stuff, if you have the hardware, inclination and determination.

3. GhostLab

Price: $49, but you can get 30% off with the coupon code NETMAG

Nobody, except developers themselves, seems to care that every time a new device comes out it just adds to the testing backlog. Well, that problem can now almost be consigned to the dustbin of history, thanks to GhostLab. It connects to multiple browsers, across devices, and then syncs your interactions so you can monitor state changes everywhere, as they happen.

The dramatic efficiency gain which GhostLab has already introduced goes into overdrive once you factor in a JavaScript/DOM inspector so you can address problems uncovered by your newly unified testing regime. It requires Lion, but otherwise is without dependencies.

4. jQuery.Swatches

Price: Free

Colour is a powerful tool, and also one that's often misused. Swatches, the jQuery plugin, can help you avoid abuse and err on the side of good design by putting all your colour-related ducks in a row. If they work like this, chances are they'll be good once you assign them their contextual roles.

All you need is a div element, to which you assign a couple of data values. One being the name of your swatch, the other a list of hex-value colours. The animated popover of these values is a nice touch. Simple but effective fun.

5. Two.js

Price: Free

3D is impressive and all that, but there's something immediately attractive about 2D animation. Two.js takes this basic appeal and adds ease of use and general applicability through the use of SVG, canvas and WebGL.

It doesn't handle text (yet), nor images, but Two.js has the kind of clean, easy feel that makes it enjoyable to use. Its flat-inspired animations, drawings and interactive scenes are quick to build and, through groups, relatively straightforward to control. Dependencies are Backbone and Underscore but the production library still comes in at 50kb, which isn't bad.

6. Tracing.js

Price: Free

Even the calmest and most ordered of coders will at some point find him or herself placing console.log() functions at strategic points throughout a project in a bid to work out exactly where a logical problem is hiding.

But it's not a fun thing to do, particularly if native functions are involved, or third party scripts. Tracing.js resolves this problem by providing a way to generate informative output every time a function is fired. Get a heads up on arguments passed, function names and return values as they happen with your app running. All without interfering directly with your code.

7. MobileDetect

Price: Free

Obviously, there's no substitute for design which is flexible enough to cope with multiple devices and layouts. That said, the more information you have, the better you can deal with any situation. If you're working with a server-side technology like PHP, this information can be hard to come by - MobileDetect is here to help with that.

A simple include and you're ready to detect with, for example, $detect->isTablet(); or even $detect->is('AndroidOS');. The list of user agents and device strings which the library can work with is exhaustive and its results as reliable as they're likely to get given the spoofability of its inputs. Despite that, this library is well worth exploring for the majority of cases.

8. Lazy.js

Price: Free

Lazy is a counter-intuitive name for something which delivers performance boosts across many common types of problem. Particularly so when the gains become more obvious as the number and complexity of operations begins to escalate.

The underlying principle is fairly simple: don't evaluate until you actually have to. Using this as a guiding concept means that unnecessary calculations - think of chained functions and their outputs - are never performed.

It's not suitable for every role since the 'just in time' nature of evaluations may cause problems with the ordered nature of many applications, but the speed bump makes Lazy.js well worth considering for certain high-volume situations.

9. Ash-js

Price: Free

Game development is notorious for the rate at which it spawns complexity - even the simplest of games requiring the management of numerous objects, states, collisions and so on. And with all this needing to happen many times per second, things can quickly become frustrating for the developer faced with limited resources.

Ash-JS, a port to JavaScript of Richard Lord's AS3 Entity Framework, provides a sensible separation of concerns aimed at making the game code more flexible, readable and manageable. By splitting up the code into a series of processes (objects which change over time) the game loop is replaced with a more scalable process manager.

The original project has excellent documentation, so much so that just reading this will likely improve the quality of your code.

10. Reactor.js

Price: Free

Reactive programming is all about the capture and propagation of change throughout a system. Which sounds a lot like the day-to-day workings of a website, application or even just a widget. Reactor.js brings this flow-oriented approach to the JavaScript canon, doing so with simple clarity.

Reactor.js has just two components - signals and observers. Signals can rely on functions, or other signals. They represent the dynamically changing values within the application. Observers wait for the signal chain to finish updating, then handle external updates.

This approach allows a very straightforward method for connecting objects and events together while ensuring that external changes (like read/write) are not done redundantly. This is the most accessible exploration of the reactive paradigm going.

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!