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 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 →

Adobe Edge Inspect

Adobe just announced that the aforementioned Adobe Shadow will be renamed to Adobe Edge Inspect.

We’d like to thank you for using Adobe Shadow during its free preview period on Adobe Labs. On September 24, 2012, we will announce and ship Adobe Edge Inspect, which will replace Adobe Shadow.

With this change, they’re releasing a free and full version

The free version has access to all of the full version features including Synchronous Browsing, Remote Inspection, Screenshots, cache clearing, localhost support, HTTP authentication, and HTTPS support – but is limited to one concurrent device connection.

And yes, the full version will cost you some money: $9.99/month or included in your Creative Cloud membership.

Shadow is now Adobe Edge Inspect →

Simple REST API Explorer

Just pushed a new project to GitHub named Simple REST API Explorer, a simple way to showcasing and exploring all endpoints of your RESTful API.

The demo allows you to call some Twitter API endpoints a sample RESTful API I’ve quickly knocked up as the Twitter API is rather unstructured. Update the index.html file to reflect your own API endpoints. All the rest will go automagically.

Some notes that go with this first version:

  • Only tested with APIs returning JSON or JSONP.
  • Custom headers don’t work with JSONP. If you do need both JSONP and an API-Key: ask your API provider to enable CORS so you can switch to JSON.
  • Only GET supported (for now?) Already fixed 😉

Simple REST API Explorer Demo →
Simple REST API Explorer Source (GitHub) →