CSSCSS – A CSS redundancy analyzer that analyzes redundancy.

$ csscss path/to/styles.css path/to/other-styles.css {.contact .content .primary} and {article, #comments} share 5 rules {.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules {.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules {article.blurb:hover} and {article:hover} share 3 rules CSSCSS will parse any CSS files you give it and let …

The Gradient Chart

Handy tool/methodology to decide if you should make a responsive site, or build a separate mdot-site. Review the tasks that users want to perform on Device A. List them in priority order. Repeat for Device B. Put the two lists next to each other, and draw lines connecting identical tasks. Depending on the steepness of …

Trello – Your entire project, in a single glance

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) todo–doing–done 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 …

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 …

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’); } …

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 …

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% …