Fresh Resources for Designers and Developers – March 2013

It’s that time of the month again to share awesome tools and resources fit for designers and developers. This round we got plugins to help your site detect swipes and gestures as well as to enable mention input, a tool to creat your own stickman comics and a new tool to test your codes on Internet Explorer.

Check out all our fresh resources (according to month):

App Icon Template

In our previous post, we have covered how to create your app icons with a third party tool. Alternatively, if you are like me, who prefer customizability, you can try App Icon Template.

his PSD template comes with Photoshop Action scripts that lets you convert your design into iOS-compatible formats on the fly, both for Retina or non-Retina devices.

Touch Swipe

Today, as there are more devices that are equipped with Touch Screen, you might want to consider enabling the multi-touch ability for your website. To do this, try Touch Swipe, a jQuery plugin that can detect swipes and finger gestures on your website. This plugin supports several gestures, including finger swipe, pinch, and zoom.


In previous post, Jake has shown you how to build Instagram instant search using Instagram API from scratch. There is also a ready-to-use jQuery plugin, like Spectagram.

Spectagram fetches the Instagram API and displays the result on your website or application. It currently supports displaying Instagram user feed, popular photos, and user-tagged photos.


MarkDown is a plain text formatting language that can be converted into HTML markup. We can write in MarkDown format with any code editor, or use a designated editor like Mou. Mou comes with syntax highlighting, auto save, powerful actions, auto pair, HTML and CSS export, etc.

The interface is neat and simple consisting of two columns. You can write the MarkDown format at the left, and see the result immediately on the right. Unfortunately, Mou is only available for OSX at the moment.

jQuery Mention Input

If you are using Twitter or Facebook, you are certainly familiar with Mention; we can include a friend’s name into a post or tweet, typically with a @ sign. If you want to (or need to) create such a functionality in your website, you can use a plugin named jQuery Mention Input.

To run this plugin, we need at least jQuery version 1.6 and Underscores.js. For more technical details, head over to this page.


Blokkfont is a font for mock-ups and wireframing that contains only block and rectangular characters as previewed in the following screenshot. If you are against using conventional Lorem Ipsum, this font is a really good alternative. It is available as a desktop font (in .ttf) and webfont.

You don’t have to good at drawing to create a comic. You can simply use Cmx (read Comix), a web based editor for creating xkcd style comic stripe. The comic graphical output will not be an image like in a traditional comic, instead it is built with HTML and SVG.


Roole is a JavaScript-based CSS Pre-processor. It has a list of features that are inspired by other CSS preprocessor (LESS, Sass and Stylus) such as Nesting Rules, Indentation, Variables, Mixins, Functions, Operation, and Extending style rules (like in Sass). Roole also provides built-in vendor prefixes, so we can write complex CSS3 rules in a simple way.


Hint is a CSS library containing a set of styles rules for creating a simple tooltip. The tooltip is built with CSS3 Transition, CSS3 property, pseudo-element, and data attribute. It is a good alternative to JavaScript-based tooltip. Head over to the following page to see it in action: Hint.css Demo

Testing websites for Internet Explorer has always been unpleasant, as IE has several versions that have their own quirks and behaviour. Fortunately, Microsoft realizes this and has introduced a tool to make the web developer’s job less painful with is a set of tools for testing websites in Internet Explorer, in old and modern versions. It will scan the webpage to find compatibility issues and return suggestions to fix the issues.