Fresh Resources for Web Designers and Developers (April 2015)

How’s your (friendly reminder) April Fool’s Day this year? Well, for the rest of us who aren’t into pranks, here’s the latest instalment of fresh resources for web designers and developers.

For April we have a number of great apps to increase productivity, a library that improves user experience with large datalist, a Photoshop extension that gives you weather widgets, and a handy web tool that caches web font.

CSS Ruler

There are a number of unit measurements in CSS; a few are fixed while some others are relative such as em, rem and ch. CSS Ruler is a tool where you can visually compare the units scale with one another.


ResponsiveJP features a number of responsive websites from Japan, mainly as a reference for web designers who are finding it hard to work out responsiveness when it comes to non-Latin typographical content. It helps you to stretch your perspective and get an inside look at eastern web design trends as well.

Google Fonts Alternate

Many Google services are blocked in China, Google Font included — it is almost certain that Google Font will not render properly in China. If you would like serve the Google Font collection in China mainland, point the font stylesheet to an alternate source from Useso, for example:

// Google Font stylesheets.
<link href='' rel='stylesheet' type='text/css'>
// Alternate link
<link href='' rel='stylesheet' type='text/css'>

Good luck and godspeed!

Muir Icons

Muir Icons is a collection of icons designed to match OS X Yosemite. Named after John Muir, a naturalist and activist who helped preserve the original Yosemite, yes, that national park in the U.S. At the time of this writing, there are already 3 volumes of these icon sets released. Each consist of popular app icons such as Adobe Creative Suites, Twitter, Sketch, Skype and SublimeText.


CouleursApp is a small app that allows you to pick up colors anywhere on your screen. It improves the built-in Mac color picker app. It supports a number of color formats including Hex and the UIColor of Swift.

Compatibility: OS X 10.10 or above


Weather is a Photoshop extension that adds weather widgets onto your Photoshop workspace. It is a handy tool to help you decide whether it is time to leave your desk and go outside to enjoy nice weather.

Compatibility: Photoshop CC


Awesomplate is a JavaScript library that mimics HTML5 <datalist> element. You can add a list of suggestions within an input element that will appear as your user types. It ia a practical approach to improving user experience, particularly when dealing with a large datalist.

Compatibility: IE9+, Chrome, Firefox, Safari 5+, Mobile Safari.


Noizio is an app with a collection of natural noises: sounds of the wind, ocean and thunderstorms. It may help you better focus on your work by providing a calm environment which allows you to detach from the hustle and bustle of a pressurized working atmosphere. At least, it did for me.

Compatibility: OS X 10.8 or above

Hocus Focus

This is one for those who find it hard to focus. HocusFocus is an app that will cleverly hides windows and workspaces within your OS X desktop for a certain period of time, leavng only the window(s) you use most. It makes you more efficient, cleans the clutter from your desktop and helps you focus on your work.

Compatibility: OS X 10.10 or above


PixelCounter counts the pixels in your images. Just drag and drop an image or a whole directory of your project into the app, and it will count and add up all the pixels in your JPEG, PNG, WebP, GIF, and even SVG images. Now, if we could only start a trend where we charge clients by the pixels… hmm.

Compatibility: OSX 10.8 or above, Windows 7 or above, and Linux (Coming Soon)

UI Blurbs

UIBlurbs generates a fictitious user profile and is the perfect web app to use in tandem with UIFaces and UINames for building a design prototype.


localFont is a webapp that improves web font performance. As you drag and drop a font (.woff, or .ttf), it will encode and embed the font in CSS. It also generates a few lines of JavaScript that will cache the font in the user’s localStorage (read our previous tutorial about using Cookie & HTML5 localStorage).

Show Comments