50 New Resources and Tools for Web Developers

In this web developer round-up we have chosen 50 recently released resources and tools that offer time-saving solutions to many of the development issues you may come across. So, if you are looking for a tool that will check your Javascript, validate your CSS, help you create an image sprite, or a new HTML5 Canvas library, a new CSS dev framework, or even a parallax scrolling library you will find them all here, and much, much more.

As per usual, and due to its huge popularity, we purposely didn’t include any jQuery-related resources in this post. jQuery needs and deserves its own post, so you should check out last months 40 Recently Released jQuery Plugins if that is what you are looking for.

Responsive Grid System

Responsive Grid System

The Responsive Grid System is a fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Responsive Grid System →

Gumby 960 Responsive Grid Framework

Gumby 960 Responsive Grid Framework

Gumby 960 Responsive Grid Framework →

Box CSS Framework

Box CSS Framework

Box CSS is a framework based on box-sizing: border-box and display:inline-block building principles.

Box CSS Framework →

Foldy960 Framework

Foldy960 Framework

Foldy960 is a responsive 960 grid, basically a little kit and some extra classes to get you going on making your 960.gs design responsive.

Foldy960 Framework →

Css2Less

Css2Less

With Css2Less you can quickly convert your old CSS files to fresh new LESS files. As easy as copy/paste.

Css2Less →

Codeanywhere Code Editor

Codeanywhere Code Editor

Codeanywhere is a code editor in a browser with support for all popular web formats including HTML, PHP, JavaScript, CSS, and XML.

Codeanywhere Code Editor →

Responsive IE6

Responsive IE6

Responsive IE6 is a small tool to test your media queries on Internet Explorer 6.

Responsive IE6 →

Dirty Markup

Dirty Markup

Dirty Markup is a web-based tool to tidy and beautify your HTML, CSS & JS code. It combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code.

Dirty Markup →

SnipSave

SnipSave

SnipSave lets you save snippets of code online for future reference. It features a very easy-to-use interface where you can quickly create, edit and delete code snippets.

SnipSave →

RWD Calculator

RWD Calculator

RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website. In other words, it turns pixels into percentages.

RWD Calculator →

The Responsinator

The Responsinator

The Responsinator helps web designers quickly get an indication of how their responsive site will look on the most popular mobile devices.

The Responsinator →

Timeline JS

Timeline JS

Timeline, as its name suggest, lets you create beautiful timelines that are easy and intuitive to use. It can pull media from different sources, with built in support for Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

Timeline JS →

CSSO (CSS Optimizer)

CSSO (CSS Optimizer)

CSSO is a CSS optimizer – more specifically, a CSS minimizer. Use it to improve and streamline your CSS.

CSSO (CSS Optimizer) →

Graphene

Graphene

Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone. It offers a very aesthetic realtime dashboard that lives on top of Graphite (but could be tailored to any back end).

Graphene →

Crossfilter

Crossfilter

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser.

Crossfilter →

CanJS

CanJS

CanJS is a JavaScript framework that makes building rich web applications easy. CanJS’s core supports jQuery, Zepto, Dojo, YUI and Mootools

CanJS →

Fixie

Fixie

By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections…

Fixie →

Foresight.js

Foresight.js

Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image has been requested from the server.

Foresight.js →

Webshims Library

Webshims Library

Webshims lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features.

Webshims Library →

dhtmlxSpreadsheet

dhtmlxSpreadsheet

dhtmlxSpreadsheet is an open source Ajax spreadsheet widget written in JavaScript and PHP (also available as a plugin for WP, Joomla, etc.) that allows you to quickly add an Excel-like, editable data table on to a web page.

dhtmlxSpreadsheet →

heatmap.js

heatmap.js

heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5 canvas element based on your data.

heatmap.js →

Kartograph

Kartograph

Kartograph is a lightweight framework for building beautiful, interactive vector map applications without Google Maps or any other mapping service.

Kartograph →

sigma.js

sigma.js

sigma.js is an open-source and lightweight JavaScript library for drawing graphs, using the HTML canvas element. It has been designed to display interactive static graphs exported from a graph visualization software – like Gephi.

sigma.js →

Grunt

Grunt

Instead of being a chore, creating a new project and performing repetitive but necessary tasks such as linting, unit testing, concatenating and minifying files become trivially easy with Grunt.

Grunt →

Live Scratchpad

Live Scratchpad

Live Scratchpad lets you evaluate your JavaScript functions in real-time while editing. It will inspect objects or DOM elements manipulated during execution, figure out the code path taken inside the function and directly jump to errors.

Live Scratchpad →

jPages

jPages

jPages is a client-side pagination plugin that gives you a lot more features comparing to most of the other similiar plugins, such as auto page turn, key and scroll browse and showing items with delay.

jPages →

dgrid

dgrid

dgrid is a lightweight, modular, and easily extensible grid component that takes full advantage of modern browsers and object stores.

dgrid →

SpritePad

SpritePad

SpritePad is a web-based tool that lets you create your CSS sprites within minutes. Simply drag & drop your images and have them immediately available as a PNG sprite + CSS code.

SpritePad →

smoke.js

smoke.js

smoke.js is a very easy to use and flexible framework-agnostic styled alert system for Javascript. It uses CSS animations and background, so there are no images or js animation code making it very lightweight.

smoke.js →

Keymaster

Keymaster

Keymaster is a simple micro-library for defining and dispatching keyboard shortcuts.

Keymaster →

Leaflet

Leaflet

Leaflet is a lightweight JavaScript library for mobile-friendly interactive maps. Weighing just 22kb of gzipped JS code, it still has all the features most developers ever need for online maps.

Leaflet →

stroll.js

stroll.js

stroll.js is a collection of CSS list scroll effects. The style of scroll effect is determined via the class that is set on the list.

stroll.js →

Hammer.js

Hammer.js

Hammer.js is a JavaScript library for multi-touch gestures, supporting: tap, double tap, hold, drag, and transform.

Hammer.js →

skrollr

skrollr

Skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position.

skrollr →

Style Tiles

Style Tiles

Style Tiles are a design deliverable (in PSD format) consisting of fonts, colors and interface elements that help you communicate a web products visual brand.

Style Tiles →

TypedJS

TypedJS

TypedJS helps you save your JavaScript code by sanity checking it.

TypedJS →

Underscore.js

Underscore.js

Underscore.js is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.

Underscore.js →

KineticJS

KineticJS

KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

KineticJS →

Cutter.js

Cutter.js

Cutter.js truncates HTML code to limit its length.

Cutter.js →

Socialite.js

Socialite.js

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

Socialite.js →

Opera Mobile Emulator

Opera Mobile Emulator

Opera Mobile Emulator →

Morris.js

Morris.js

Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.

Morris.js →

dynamo.js

dynamo.js

dynamo.js gives offers a simple method to generate dynamic bits of HTML and add subtle effects to your content.

dynamo.js →

Intype

Intype

Intype is a fast and easy text editor. It has smart select & edit, snippet insertion and management, auto-paired characters, fast syntax highlighting and code-coloring themes.

Intype →

Chico UI

Chico UI

Chico UI is a free and open source collection of easy-to-use web tools for developers and designers. Built on top of jQuery, these tools brings known interaction patterns for your website taking advantage of HTML5 and CSS3 features.

Chico UI →

HTML5 Web Notifications

HTML5 Web Notifications

The HTML5 Web Notifications come in two flavors: plain text and HTML. Plain text allows you to customize a couple of parameters, HTML shows any .html file you want as a notification.

HTML5 Web Notifications →

EpicEditor

EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with some minor Markdown enhancements such as automatic link creation and code fencing.

EpicEditor →

URI.js

URI.js

URI.js is a javascript library for working with URLs. It offers a "jQuery-style" API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().

URI.js →

Retina.js

Retina.js

Retina.js is an open-source script that makes it easy to serve high-resolution images to devices with retina displays.

Retina.js →

jq-idealforms

jq-idealforms

jq-idealforms is a small framework to create awesome responsive forms. It’s been built on top of jQuery and LESS.

jq-idealforms →

Spiffing CSS

Spiffing CSS

Spiffing allows you to write your CSS and stylesheets in conformance to proper British English (also known as correct English) grammar and spelling regulations.

Spiffing CSS →

Author: (584 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments