This article was published 12 years ago, therefore the contents of this post may be out of date.

It’s January and many of us are back at work no whether if it freelance or working for a agency etc. Finding what’s new for web designers and developers is always great as there are many great products such as new web apps, frameworks, jQuery plugins, colour tools, and great new fonts. Many of the resources featured in this post are free or cost are just a few dollars, and are sure to be useful to a lot of designers and developers out there.


ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery and that all the images are same size.

CraftMap (previous MobilyMap)

CraftMap (previous MobilyMap) is a lightweight (6KB only), fully configurable jQuery plugin that converts a simple image into a functional map by overlaying dynamic elements on it such as markers.Like Google Maps, you can place your own marker icons and add location information to specific markers with a draggable image interface.


The Easel Javascript Library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.


Create — A new kind of web editing interface  Create, from the Midgard Project is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.


CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.


With W3Clove there’s no need to manually submit all your URLs for validation. Just enter the URL of your homepage and it will scrape it to get its internal links (you can provide an XML sitemap as well). Once W3Clove has crawled your homepage or sitemap, it’ll validate each of the links on the official W3C validator, storing their errors, then giving you a simple report of the most common errors and warnings.


dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.


dabbpdf.js is an HTML5 experiment that explores building a faithful and efficient PDF renderer without native code

Flow Slider

Flow Slider is an easy to use customizable jQuery plugin that lets you slide your HTML content. It allows you to select from a range of transition effects or add your own, change settings, attach events, interact with the slider, and dress it in any design.


Rickshaw, developed by Shutterstock, is a JavaScript toolkit for creating interactive time series graphs. It is a simple framework for drawing charts of time series data on a web page, built on top of the D3 library. The charts can be powered by static historical data sets, or living data that continuously updates in real time.


After the page is loaded the script randomly censors text on the page by replacing the text with black bars. It also places a black bar at the top of the page with a link to Viewers can remove censoring for the current session by clicking on the “Remove this” link.


jQuery Gantt Chart is a simple chart that implements gantt functionality as a jQuery component. It’s able to page results and read JSON data amongst a ton of other features.

Cuepoint JS

Cuepoint.js is an open source plugin for adding subtitles to your HTML5 video. You’re free to use it for whatever you want.

Circle Menu

A customizable jQuery plugin that emulates the menu in the Path application. Includes a selection animation and various animation options for opening and closing the menu.


A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.


Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more.


JS widget to list github repositories. Mimics dashboard style.

Initializr Responsive Template!

Initializr is an HTML5 templates generator created by Jonathan Verrecchia to help you getting started with a new web project based on HTML5 Boilerplate. Initializr will generate for you a clean customizable template with just what you need to start and nows come with a “Responsive template” is now available on Initializr!

It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors… Making your site work correctly on all these devices is a real nightmare.


AntiMap Log is a smart phone utility application for ‘recording’ your own data. Whether your out snowboarding, skiing, mountain biking, driving, running, or whatever your into, AntiMap Log is a DIY solution for gathering real-time stats with your phone. The indexed data can then be used in conjunction with any of the free AntiMap post analysis applications (or your own creations) to visualize your every move.


Kinzaa lets you build visually stunning infographic resumes.

Visual Heap

As designers, we continuously scour the web searching for inspiration and ideas for our next big project. From logos to websites to user interfaces, we are constantly having to go to multiple places to see visual greatness. Maybe you bookmark sites that you like or you might be like a lot of us and forget where that bookmark might be (because your bookmarks have gotten out of control) or maybe you just simply can’t remember what site that was that had that awesome screenshots of a particular site. Visual Heap is here to help.


The script determines the website’s accent color by analyzing its favicon. More often than not, the dominant color of the site’s icon is the same as its signature color.


Croply is the fastest and most secure web-based image cropping service available.  Using the latest techniques, the image upload times are instant and the entire cropping process is done on your browser. No image data ever leaves your computer, making Croply the most secure cropping service online.


Scrollorama is the jQuery plugin for doing cool scrolly stuff. Basically, it lets you animate elements on the page based on the browser window’s scroll position.

Yesterday Font

This is a geometric uncial font with a retro/art-deco feel. It comes in four weights, each in upright and oblique styles. It has Unicode coverage for Latin, Greek (modern diacritics only), and Cyrillic, plus the Euro and peace signs.

Vindeco Font

Vindeco is a classic typeface, vintage with a mix of decorative. It looks stylish and elegant in any layout with it’s slick lines, use it for your magazines, brochures and editorial layouts.  Vindeco is designed to make eye-catching headings and typographic designs, it looks great on its own or with imagery.

Master Font

“Master of the World” was included on the front page of a novel in several parts, The Count of Monte Christo (mid 20th century). Typeface characters show design guidelines of the pre-war era (2nd world war). The idea of development origins from a wish to evolve traditional forms of typefaces which were used in Slovenia.

Cubano Font

Cubano’s personality is defined by its rounded corners, wide strokes, and semi-condensed letterforms. Featuring 167 glyphs, Cubano is available in all caps with numerals, punctuation, symbols and most accent marks. And with webfonts included, you can easily solidify your next site with Cubano!

Blanch Font

Blanch is a display face, designed for the ‘Fruita Blanch’ brand, a family-run company. A traditional font with a contemporary feel, The Blanch typeface family is comprised of 6 weights; 3 condensed weights and 3 caps weights.

Bender Font

A chunky face for display type in two weights: inline and solid.

Lavanderia Font

Based on lettering found on Laundromat windows of San Francisco’s Mission District, Lavanderia features numerous opentype features and three weights.


What’s New For Web Designers & Developers In January 2012