Fresh Resources for Web 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.
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.
Spectagram
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.
Mou
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
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.
Comix.io
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.
Hint
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
