50 New Resources and Tools for Developers and Designers
2013-07-10 09:31
435 查看
As every designer or developer knows, anything that can save you just a little bit of time everyday is truly priceless. So, what we have for you today will delight you. We have 50 fantastic web design tools and resources that have all been released
this year and have one common goal: To in one way or another offer a time-saving solution to many of the modern design and development issues you may have.
Tools that will help save you time? You can’t beat that can you!
The post has been split into into the following categories: CSS & HTML Tools, CSS, HTML & PHP Frameworks, Javascript
Tools, Javscript Frameworks and finally Web Based Apps.
Something worth noting about this post is that it doesn’t include any jQuery resources. If you are looking for jQuery specific resources, you should check out last months 30
New jQuery Plugins Worth Taking a Look At.
You might also like:
50 Free Web-Based Apps and Tools for Web Developers (from 2012) →
Our 50 Favorite Web Development Resources from 2012 (from 2012) →
50 New Resources and Tools for Web Developers (2012) →
50 Free Tools and Apps for Web Designers and Developers (2011) →
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/2cd3812bc530fbbbb8e85a22463353c3.jpg)
CSS Trashman will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.
CSS Trashman
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9e43bbfc78da7f1a989f12d0d3485089.jpg)
Prepros is a web based app that will compile Less, Sass, Scss, Compass, Coffeescript, Stylus, Jade, Slim, Markdown and Haml files with live browser refresh.
PreprosGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ca3d70f26aeaddd3b370d5855bf9197d.jpg)
CSS Modal is built out of pure CSS and they work on all screen sizes from a small mobile phone up to high resolution screens.
CSS ModalGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5799c43841d37a54254b0a06c2e27f84.jpg)
piCSSel-art is a drawing app to draw pixel art and get it in CSS.
piCSSel-artGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/a2c2e87e6eaf3a39bd1dd8380afde0bd.jpg)
Preboot is a comprehensive and flexible collection of LESS utilities.
PrebootGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ce5244be4cd9cffd9c750e27e470771e.jpg)
Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.
Diagnosticss
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f6dd0912138a6545ca9bfdf860fecee6.jpg)
Markdown.css is a web based tool for making regular HTML look like plain-text Markdown.
Markdown.cssGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/c6902a52a0885e6ca71b9995b137ac45.jpg)
Popline is a HTML5 Rich-Text-Editor toolbar that will float around the selected text.
PoplineGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/d7a3e450310b8cb74222d17655bbf748.jpg)
ValidatrGitHub
Glue is a handy command line tool for generating CSS sprites.
Glue
CSSEmbed is a small tool to automate embedding data URIs in CSS files.
CSS Embed
LESS Prefixer is a set of LESS mixins that let you use vendor-prefixed CSS properties without the prefixes. It uses some simple conventions and gets out of the way so you can use the CSS you already know, but with less typing.
LESS PrefixerGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/315a48f1c87b17dd71179fcbbc6961b7.jpg)
csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.
csscssGitHub
Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list
and checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.
Helium CSS
As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties,
remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties
CSSOGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f959532a672fbef873a9802239d8d402.jpg)
Cascade Framework
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/57251687713fcdf7cbb567e2d1536ba1.jpg)
Responsable is a clean responsive grid system with a typographic baseline powered by LESS/SCSS and based on Semantic.gs.
Responsable FrameworkGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f0a8811c9335fb469d74a78a3330a86b.jpg)
MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.
Mueller Grid System
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/132d6385b5d97c3b6700da56658e6980.jpg)
From Yahoo!, Pure is a set of small, responsive CSS modules that you can use in every web project.
PureGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5fe7c211066ca727dd7eb9e3730872c7.jpg)
PocketGrid is a lightweight pure CSS resposnive grid system allowing for an unlimited number of columns and breakpoints.
PocketGridGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/48221b960493393d8be2e75086d3a0b9.jpg)
Kraken is a lightweight, mobile-first boilerplate for front-end web developers. It includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons;
Basic form styling; Optional add-ons for more functionality.
KrakenGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/36ca3af2f57fcc0af3fabd76e92972dd.jpg)
.FitgridGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/b0996dac8a224604d8646bb53c6709be.jpg)
Mosto is a framework for building forms using minimal markup and implicit label association.
Mosto Framework for FormsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/2e473cac89c0cc77eaacb437cba6a224.jpg)
GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit to rapidly prototype and build accessible web apps that work on virtually any device.
GroundworkCSSGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/cd08f7bc858e8e222bbb1a43f354ea5e.jpg)
Typeplate is a typographic starter kit that doesn't make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.
TypeplateGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/994bf5a1a321103e2c1fcbbd36065a7a.jpg)
TopcoatGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/467c7ff531307d9935cbdc839fd0f63c.jpg)
JSHint is a tool for detecting errors in JavaScript code and enforce your team's coding conventions.
JSHintGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9163c12722fb16c1a4d3aa20e27c68ef.jpg)
Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages.
FlatdocGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/4cce32534387e32b8a9ecf98e2602762.jpg)
svg.js is a lightweight library for manipulating and animating SVG with no dependencies and aims to be as small as possible.
svg.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/fbe4b78da00af7c06bd76ce089d9eff0.jpg)
Midway.js makes it super easy to automatically center the responsive elements on your websites.
Midway.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ccb7366c51d14e8c2c3fe92de71e1c19.jpg)
Widearea is a lightweight JavaScript/CSS library to create an expandable textarea and to write large volumes of text easily.
WideAreaGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/703769b0d39dfab448d3c2c20970b7dd.jpg)
gif.js is a JavaScript GIF encoder that runs in your browser that uses typed arrays and web workers to render each frame in the background.
gif.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/14dea500187786a919f95925954e8c5f.jpg)
instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded. It modifies the standard <noscript> tags so that the messages inside can be shown immediately whenever JS is disabled.
instano.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/2f14ad2cced66cbd29114d026c37acf6.jpg)
Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element.
Countable.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5d84eff7a1c645afbae98bf0ab3666e5.jpg)
Packery is a JavaScript layout library that uses a bin-packing algorithm. In other words it fills all empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged
around.
PackeryGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/a40677c4e5a732e1e18ddc9f7725999a.jpg)
Highlight.js highlights syntax in code examples on any web page. It will automatically detect a language and highlight it.
highlight.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/423e37a6198b94316474b31caf3b94fa.jpg)
Intern is a complete test stack for JavaScript designed to help you write and run consistent, high-quality test cases for your JavaScript libraries and applications.
InternGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/048b52718424ea7c3d23cacc3e915b1b.jpg)
Simple HTML5 Charts using the canvas element.
Chart.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9069206c9baaff9c300363d045d8308a.jpg)
DraggabillyGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/83c8ee1682e4e227d87f2e9d3349bdb9.jpg)
Intro.jsGitHub
headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.
Headtrackr
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/b4f3872383f04ab17d04b6a523c07e8d.jpg)
React is a JavaScript library from Facebook for building user interfaces.
ReactGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/c2db54e5036a9f9d616563d2c07fea33.jpg)
Pedestal is a web application framework written in Clojure that aims to bring both the language and its principles to client and server-side development.
PedestalGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9ea39e62b41b5bf4577258173671c168.jpg)
Helios is an open-source framework that provides essential backend services for iOS apps allowing developers to get a client-server app up-and-running in just a few minutes.
HeliosGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/b44fb9161884ea42bc4f028b56334deb.jpg)
Quickly create and prototype a full interactive HTML mock-up without duplicating markup, server-side loops/code, or having to source fake content (lorem ipsum text/images).
RoughDraft.jsGitHub
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f10b9ef4a6ef202af678b4c5d1210c27.jpg)
Hopscotch is framework for making it easy to add product tours to web pages.
Hopscotch
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9ca4316734aed81121a8e2ca4202905d.jpg)
Markdown Editor
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/db8cb7f9a7f305a7adf944e74b1e0262.jpg)
Red Pen lets you upload your design, share a short URL, and get live, annotated feedback super-fast.
Red Pen
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/8f35aba3ba59846c882e0613641d0aee.jpg)
CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.
CodeMirror
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ff2865377ecdc301ee181e2ff5bc58ae.jpg)
Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games.
Light Table IDE
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/bbecab8d6f095996d3cc71444de2c995.jpg)
Fakeimg.pl is a tool that will generate an images with an URL. You can choose the size, the colors, and the text.
Fake Images Please?
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/826f9aea4634c69f1d893270714fffa7.jpg)
PlaceIMG
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/136f6a59614f943c97c9f740cef6ad4b.jpg)
Screen Sizes helps you quickly find the screen specifications of the most popular devices and monitors currently on the market.
Screen Sizes
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/8ecef526f9febb88b107e80a2f4fdd72.jpg)
This resource teaches the CSS fundamentals that are used in any website's layout.
The iOS Design Cheat Sheet
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/c7f045cc4c9745cb0b9ec077ab337535.jpg)
Learn CSS Layout
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/84dba5b212edd1afbb19d4c04b7a7bf6.jpg)
jQuery Learning Center
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/6a2592ac38e54dae59d5247ad4ce9e91.jpg)
Browserhacks is an extensive list of browser specific CSS and JavaScript hacks.
Browserhacks
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5dfac8a86077e0a021f110e44c902237.jpg)
Superhero.js is a collection of the best articles we've found on the topic.
Superhero.jsGitHub
50 Free Web-Based Apps and Tools for Web Developers (from 2012) →
Our 50 Favorite Web Development Resources from 2012 (from 2012) →
50 New Resources and Tools for Web Developers (2012) →
50 Free Tools and Apps for Web Designers and Developers (2011) →
50 Most Useful jQuery Plugins from 2012
Top 50 Useful jQuery Plugins from 2011
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/342998c004508a2cb7d886e0415e77f7)
Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook,
on Digg or you can subscribe via RSS.
this year and have one common goal: To in one way or another offer a time-saving solution to many of the modern design and development issues you may have.
Tools that will help save you time? You can’t beat that can you!
The post has been split into into the following categories: CSS & HTML Tools, CSS, HTML & PHP Frameworks, Javascript
Tools, Javscript Frameworks and finally Web Based Apps.
Something worth noting about this post is that it doesn’t include any jQuery resources. If you are looking for jQuery specific resources, you should check out last months 30
New jQuery Plugins Worth Taking a Look At.
You might also like:
50 Free Web-Based Apps and Tools for Web Developers (from 2012) →
Our 50 Favorite Web Development Resources from 2012 (from 2012) →
50 New Resources and Tools for Web Developers (2012) →
50 Free Tools and Apps for Web Designers and Developers (2011) →
CSS & HTML Tools
CSS Trashman
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/2cd3812bc530fbbbb8e85a22463353c3.jpg)
CSS Trashman will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.
CSS Trashman
Prepros
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9e43bbfc78da7f1a989f12d0d3485089.jpg)
Prepros is a web based app that will compile Less, Sass, Scss, Compass, Coffeescript, Stylus, Jade, Slim, Markdown and Haml files with live browser refresh.
PreprosGitHub
CSS Modal
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ca3d70f26aeaddd3b370d5855bf9197d.jpg)
CSS Modal is built out of pure CSS and they work on all screen sizes from a small mobile phone up to high resolution screens.
CSS ModalGitHub
piCSSel-art
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5799c43841d37a54254b0a06c2e27f84.jpg)
piCSSel-art is a drawing app to draw pixel art and get it in CSS.
piCSSel-artGitHub
Preboot
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/a2c2e87e6eaf3a39bd1dd8380afde0bd.jpg)
Preboot is a comprehensive and flexible collection of LESS utilities.
PrebootGitHub
Diagnosticss
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ce5244be4cd9cffd9c750e27e470771e.jpg)
Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.
Diagnosticss
Markdown.css
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f6dd0912138a6545ca9bfdf860fecee6.jpg)
Markdown.css is a web based tool for making regular HTML look like plain-text Markdown.
Markdown.cssGitHub
Popline
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/c6902a52a0885e6ca71b9995b137ac45.jpg)
Popline is a HTML5 Rich-Text-Editor toolbar that will float around the selected text.
PoplineGitHub
Validatr – Cross Browser HTML5 Form Validation
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/d7a3e450310b8cb74222d17655bbf748.jpg)
ValidatrGitHub
Glue
Glue is a handy command line tool for generating CSS sprites.Glue
CSS Embed
CSSEmbed is a small tool to automate embedding data URIs in CSS files.CSS Embed
LESS Prefixer
LESS Prefixer is a set of LESS mixins that let you use vendor-prefixed CSS properties without the prefixes. It uses some simple conventions and gets out of the way so you can use the CSS you already know, but with less typing.LESS PrefixerGitHub
csscss -A CSS Redundancy Analyze
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/315a48f1c87b17dd71179fcbbc6961b7.jpg)
csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.
csscssGitHub
Helium CSS – JS Tool To Scan Your Site and Show Unused CSS
Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL listand checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.
Helium CSS
CSSO – Structural Optimization of CSS Files
As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties,remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties
CSSOGitHub
CSS Frameworks
Cascade Framework
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f959532a672fbef873a9802239d8d402.jpg)
Cascade Framework
Responsable Framework
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/57251687713fcdf7cbb567e2d1536ba1.jpg)
Responsable is a clean responsive grid system with a typographic baseline powered by LESS/SCSS and based on Semantic.gs.
Responsable FrameworkGitHub
Mueller Grid System
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f0a8811c9335fb469d74a78a3330a86b.jpg)
MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.
Mueller Grid System
Pure
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/132d6385b5d97c3b6700da56658e6980.jpg)
From Yahoo!, Pure is a set of small, responsive CSS modules that you can use in every web project.
PureGitHub
PocketGrid
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5fe7c211066ca727dd7eb9e3730872c7.jpg)
PocketGrid is a lightweight pure CSS resposnive grid system allowing for an unlimited number of columns and breakpoints.
PocketGridGitHub
Kraken
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/48221b960493393d8be2e75086d3a0b9.jpg)
Kraken is a lightweight, mobile-first boilerplate for front-end web developers. It includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons;
Basic form styling; Optional add-ons for more functionality.
KrakenGitHub
.Fitgrid
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/36ca3af2f57fcc0af3fabd76e92972dd.jpg)
.FitgridGitHub
Mosto Framework for Forms
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/b0996dac8a224604d8646bb53c6709be.jpg)
Mosto is a framework for building forms using minimal markup and implicit label association.
Mosto Framework for FormsGitHub
GroundworkCSS
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/2e473cac89c0cc77eaacb437cba6a224.jpg)
GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit to rapidly prototype and build accessible web apps that work on virtually any device.
GroundworkCSSGitHub
Typeplate
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/cd08f7bc858e8e222bbb1a43f354ea5e.jpg)
Typeplate is a typographic starter kit that doesn't make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.
TypeplateGitHub
Topcoat – CSS for Clean & Fast Web Apps
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/994bf5a1a321103e2c1fcbbd36065a7a.jpg)
TopcoatGitHub
Javascript Tools
JSHint
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/467c7ff531307d9935cbdc839fd0f63c.jpg)
JSHint is a tool for detecting errors in JavaScript code and enforce your team's coding conventions.
JSHintGitHub
Flatdoc
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9163c12722fb16c1a4d3aa20e27c68ef.jpg)
Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages.
FlatdocGitHub
svg.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/4cce32534387e32b8a9ecf98e2602762.jpg)
svg.js is a lightweight library for manipulating and animating SVG with no dependencies and aims to be as small as possible.
svg.jsGitHub
Midway.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/fbe4b78da00af7c06bd76ce089d9eff0.jpg)
Midway.js makes it super easy to automatically center the responsive elements on your websites.
Midway.jsGitHub
WideArea
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ccb7366c51d14e8c2c3fe92de71e1c19.jpg)
Widearea is a lightweight JavaScript/CSS library to create an expandable textarea and to write large volumes of text easily.
WideAreaGitHub
gif.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/703769b0d39dfab448d3c2c20970b7dd.jpg)
gif.js is a JavaScript GIF encoder that runs in your browser that uses typed arrays and web workers to render each frame in the background.
gif.jsGitHub
instano.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/14dea500187786a919f95925954e8c5f.jpg)
instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded. It modifies the standard <noscript> tags so that the messages inside can be shown immediately whenever JS is disabled.
instano.jsGitHub
Countable.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/2f14ad2cced66cbd29114d026c37acf6.jpg)
Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element.
Countable.jsGitHub
Packery
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5d84eff7a1c645afbae98bf0ab3666e5.jpg)
Packery is a JavaScript layout library that uses a bin-packing algorithm. In other words it fills all empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged
around.
PackeryGitHub
highlight.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/a40677c4e5a732e1e18ddc9f7725999a.jpg)
Highlight.js highlights syntax in code examples on any web page. It will automatically detect a language and highlight it.
highlight.jsGitHub
Intern
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/423e37a6198b94316474b31caf3b94fa.jpg)
Intern is a complete test stack for JavaScript designed to help you write and run consistent, high-quality test cases for your JavaScript libraries and applications.
InternGitHub
Chart.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/048b52718424ea7c3d23cacc3e915b1b.jpg)
Simple HTML5 Charts using the canvas element.
Chart.jsGitHub
Draggabilly
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9069206c9baaff9c300363d045d8308a.jpg)
DraggabillyGitHub
Intro.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/83c8ee1682e4e227d87f2e9d3349bdb9.jpg)
Intro.jsGitHub
Headtrackr
headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.Headtrackr
Javascript Frameworks
React
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/b4f3872383f04ab17d04b6a523c07e8d.jpg)
React is a JavaScript library from Facebook for building user interfaces.
ReactGitHub
Pedestal
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/c2db54e5036a9f9d616563d2c07fea33.jpg)
Pedestal is a web application framework written in Clojure that aims to bring both the language and its principles to client and server-side development.
PedestalGitHub
Helios
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9ea39e62b41b5bf4577258173671c168.jpg)
Helios is an open-source framework that provides essential backend services for iOS apps allowing developers to get a client-server app up-and-running in just a few minutes.
HeliosGitHub
RoughDraft.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/b44fb9161884ea42bc4f028b56334deb.jpg)
Quickly create and prototype a full interactive HTML mock-up without duplicating markup, server-side loops/code, or having to source fake content (lorem ipsum text/images).
RoughDraft.jsGitHub
Hopscotch
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/f10b9ef4a6ef202af678b4c5d1210c27.jpg)
Hopscotch is framework for making it easy to add product tours to web pages.
Hopscotch
Web Based Apps
Markdown Editor
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/9ca4316734aed81121a8e2ca4202905d.jpg)
Markdown Editor
Red Pen
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/db8cb7f9a7f305a7adf944e74b1e0262.jpg)
Red Pen lets you upload your design, share a short URL, and get live, annotated feedback super-fast.
Red Pen
CodeMirror
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/8f35aba3ba59846c882e0613641d0aee.jpg)
CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.
CodeMirror
Light Table IDE
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/ff2865377ecdc301ee181e2ff5bc58ae.jpg)
Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games.
Light Table IDE
Fake Images Please?
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/bbecab8d6f095996d3cc71444de2c995.jpg)
Fakeimg.pl is a tool that will generate an images with an URL. You can choose the size, the colors, and the text.
Fake Images Please?
PlaceIMG
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/826f9aea4634c69f1d893270714fffa7.jpg)
PlaceIMG
Reference Resources
Screen Sizes
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/136f6a59614f943c97c9f740cef6ad4b.jpg)
Screen Sizes helps you quickly find the screen specifications of the most popular devices and monitors currently on the market.
Screen Sizes
The iOS Design Cheat Sheet
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/8ecef526f9febb88b107e80a2f4fdd72.jpg)
This resource teaches the CSS fundamentals that are used in any website's layout.
The iOS Design Cheat Sheet
Learn CSS Layout
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/c7f045cc4c9745cb0b9ec077ab337535.jpg)
Learn CSS Layout
jQuery Learning Center
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/84dba5b212edd1afbb19d4c04b7a7bf6.jpg)
jQuery Learning Center
Browserhacks
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/6a2592ac38e54dae59d5247ad4ce9e91.jpg)
Browserhacks is an extensive list of browser specific CSS and JavaScript hacks.
Browserhacks
Superhero.js
![](https://oscdn.geek-share.com/Uploads/Images/Content/201307/5dfac8a86077e0a021f110e44c902237.jpg)
Superhero.js is a collection of the best articles we've found on the topic.
Superhero.jsGitHub
You might also like…
50 Free Web-Based Apps and Tools for Web Developers (from 2012) →Our 50 Favorite Web Development Resources from 2012 (from 2012) →
50 New Resources and Tools for Web Developers (2012) →
50 Free Tools and Apps for Web Designers and Developers (2011) →
50 Most Useful jQuery Plugins from 2012
Top 50 Useful jQuery Plugins from 2011
Author: Paul Andrew (570 Posts)
Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook,
on Digg or you can subscribe via RSS.
相关文章推荐
- 10 Best HTML5 Sliders For Designers and Developers to Beautify Their Websites
- Resources for Mac and iOS Developers
- 32 Useful Portable Apps For Web Designers and Developers
- Professional Software Testing with Visual Studio 2005 Team System: Tools for Software Developers and
- GUI bloopers: don'ts and do's for software developers and Web designers
- 15+ Useful Firefox SEO Tools For Serious Bloggers And Web Designers
- Resources for Mac and iOS Developers
- 35 Absolutely Useful Firefox Plugins For Web Designers And Developers
- Two Practical Ways for Learning New Tools and Technologies.
- 10 Best HTML5 Sketching and Drawing Tools for Designers
- Oracle Database 11g: New Features for DBAs and Developers
- iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps
- [转]50 Shades of Go: Traps, Gotchas, and Common Mistakes for New Golang Devs
- 50.Tips.and.Tricks.for.MongoDB.Developers
- MetroGridHelper: A helpful debugging assistant for designers and developers alike
- How To Defeat Advanced Malware. New Tools for Protection and Forensics
- 40 Bootstrap Tools and Generators for Web Developers
- 50.Tips.and.Tricks.for.MongoDB.Developers --- Optimization Tips
- OSWorkflow: A guide for Java developers and architects to integrating open-source Business Process M
- 21 JavaScript Tips And Tricks For JavaScript Developers