The Gradient Chart

gradientchart

Handy tool/methodology to decide if you should make a responsive site, or build a separate mdot-site.

  1. Review the tasks that users want to perform on Device A. List them in priority order.
  2. Repeat for Device B.
  3. Put the two lists next to each other, and draw lines connecting identical tasks.

Depending on the steepness of the lines you can make your decision

The gradient chart →

Trello – Your entire project, in a single glance

trello

A must have tool if you’re working together with others on projects. Works like a charm: organizes your cards (along with a description, checklists, and comments) in the (customizable) tododoingdone columns, assign people and labels to it, etc.

Above that it’s free and iOS/Android apps are available too.

Trello →

(via Small Town Heroes when I collaborated on a project with them during the previous summer)

Napkin for Mac

Napkin is the ultimate tool for concise visual communication. Painlessly annotate images or create diagrams and share the results quickly.

Not only does it and the results look good, it also some contains some interesting user interactions.

Napkin →

CasperJS: a navigation scripting & testing utility for PhantomJS

CasperJS is an open source navigation scripting & testing utility written in Javascript and based on PhantomJS β€” the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks

Written on top of the previously mentioned PhantomJS

var links = [];
var casper = require('casper').create();

function getLinks() {
    var links = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href')
    });
}

casper.start('http://google.fr/', function() { // search for 'casperjs' from google form
    this.fill('form[action="/search"]', { q: 'casperjs' }, true);
});

casper.then(function() { // aggregate results for the 'casperjs' search
    links = this.evaluate(getLinks);
});

casper.run(function() { // echo results in some pretty fashion
    this.echo(links.length + ' links found:');
    this.echo(' - ' + links.join('\n - ')).exit();
});

Also ships with a handful of tools to perform functional testing:

var casper = require('casper').create();

casper.start('http://www.google.fr/', function() {
    this.test.assertTitle('Google', 'google homepage title is the one expected');
    this.test.assertExists('form[action="/search"]', 'main form is found');
    this.fill('form[action="/search"]', {
        q: 'foo'
    }, true);
});

casper.then(function() {
    this.test.assertTitle('foo - Recherche Google', 'google title is ok');
    this.test.assertUrlMatch(/q=foo/, 'search term has been submitted');
    this.test.assertEval(function() {
        return __utils__.findAll('h3.r').length >= 10;
    }, 'google search for "foo" retrieves 10 or more results');
});

casper.run(function() {
    this.test.done(5); // checks that 5 assertions have been executed
    this.test.renderResults(true);
});

CasperJS →

If you want to use CasperJS from within Node, check out SpookyJS

PhantomJS: Headless WebKit with JavaScript API

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var ua = page.evaluate(function () {
            return document.getElementById('myagent').innerText;
        });
        console.log(ua);
    }
    phantom.exit();
});

Next to page automation, it also allows screengrabbing. A good use-case (as mentioned by Stephen Hay in his Fronteers ’12 talk) is including screenshots in generated style guides: change the CSS and automagically update the screenshots that go in the style guide by running Phantom

phantomjs rasterize.js https://www.bram.us/ bramus.pdf letter

PhantomJS →

jResize

jResize is a responsive web development tool, built in jQuery to assist the workflow of developers on responsive projects. There are various tools for responsive development, iframes at different widths embedded in the page, and the tedious resizing of the browser. So here’s a different approach which grabs all your HTML, and resizes it inside the browser when you click the width you want. It’s dead simple.

Like the aforementioned Resizer but with a better navigation model imho. Could come in handy when demo’ing a site to a client.

jResize Demo →
jResize Source (GitHub) →

TinyPNG β€” Compress PNG images while preserving transparency

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Works so well (shaves more than 50% off the files I’ve tested over time) that I’ve included it in my screenshotting flow for screenshots here on bram.us:

  1. Take the screenshot (Retina MBP, thus that’s one BIG screenshot)
  2. Resize the screenshot in Photoshop to 1120px width (coincidentally twice the width of the content column of this site)
  3. Save for web as a .png
  4. Run the save .png through TinyPNG

Need to automate this. Somehow.

TinyPNG →

Yeoman

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

I’ve been meaning to link to this tool for quite a while now. At DotJS (which ended about 7 hours ago), Addy’s talk sparked the interest in it again. With Yeoman you can, amongst other things it can do, easily create a new web project — with one command — containing most of the stuff you’ll need. Adding or updating JS libraries/plugins (including dependencies) to your project also is only a matter of typing in a single command.

Uses the aforementioned Bower internally for package management.

Yeoman →

Also see Say Yo to Yeoman, which will come in handy to kickstart your Yeoman Command Line Fu.

Remote Preview

Remote preview is a tiny JavaScript based tool which I built for our test lab. It allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit Cmd+S, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.

Even though it’s no match with Adobe’s Edge Inspect, this will pull quite a lot of developers away from it, as the form is a paid solution ever since it got out of beta.

Remote Preview →