设计师必备工具推荐

英文原文转自（http://www.webdesignerdepot.com/2012/11/whats-new-for-designers-november-2012/）：

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments.
<h2>Spectrum</h2>
<a href="http://www.eigenlogik.com/spectrum/" target="_blank" rel="nofollow">Spectrum</a> is an OS X app that makes it easy for you to create color schemes intuitively. It uses built-in harmony rules for composing color schemes, as well as a color picker, a tool to make schemes from images, and built-in library, and more.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/spectrum.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/spectrum.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/spectrum-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/spectrum-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/spectrum-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/spectrum.jpg 1200w" alt="spectrum" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Sellbox</h2>
<a href="http://sellboxhq.com/" target="_blank" rel="nofollow">Sellbox</a> lets you sell your digital files via your Dropbox account. Receive funds through PayPal, and only pay Sellbox a 5% cut without any upfront fees.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/sellbox.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/sellbox.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/sellbox-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/sellbox-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/sellbox-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/sellbox.jpg 1200w" alt="sellbox" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Pocket</h2>
<a href="http://getpocket.com/" target="_blank" rel="nofollow">Pocket</a> is an official Read it Later app that makes it easy to save articles, videos, or any other content for later. It works from your browser, email, and more than 300 apps, including Twitter, Pulse, Flipboard, and more.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/pocket.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/pocket.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/pocket-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/pocket-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/pocket-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/pocket.jpg 1200w" alt="pocket" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Wireframe.cc</h2>
<a href="http://wireframe.cc/example" target="_blank" rel="nofollow">Wireframe.cc</a> is a minimalist wireframing app that’s both a pleasure to use and beautiful to look at. Controls are simple and intuitive, and the end result is quite attractive.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/wireframe.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/wireframe.jpg" sizes="(max-width: 1257px) 100vw, 1257px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/wireframe-300x227.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/wireframe-768x580.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/wireframe-1024x774.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/wireframe.jpg 1257w" alt="wireframe" width="1257" height="950" /></a></div>
<div></div>
 
<h2>Manymo</h2>
<a href="http://www.manymo.com/" target="_blank" rel="nofollow">Manymo</a> is an Android emulator that starts quickly and runs smoothly right in your browser, letting you test your Android apps. It supports more than 42 screen sizes and OS versions.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/manymo.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/manymo.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/manymo-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/manymo-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/manymo-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/manymo.jpg 1200w" alt="manymo" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Photo Raster</h2>
<a href="http://photoraster.com/" target="_blank" rel="nofollow">Photo Raster</a> is an advanced online photo editor that includes tools for painting, filters, adjustments, layer editing and masks, and more.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/photoraster.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/photoraster.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/photoraster-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/photoraster-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/photoraster-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/photoraster.jpg 1200w" alt="photoraster" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Bitrix24</h2>
<a href="http://www.bitrix24.com/" target="_blank" rel="nofollow">Bitrix24</a> makes it possible to create your own social intranet in just minutes. There’s a free account that supports up to 12 users and 5GB of files, while paid accounts add more users, more features, and more storage space.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/bitrix24.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bitrix24.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bitrix24-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bitrix24-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bitrix24-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bitrix24.jpg 1200w" alt="bitrix24" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Solidify</h2>
<a href="http://www.solidifyapp.com/" target="_blank" rel="nofollow">Solidify</a> is a new prototyping app from Zurb that lets you create clickable prototypes from wireframes, mockups, or even sketches. Plans start at just $19/month.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/solidify.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/solidify.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/solidify-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/solidify-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/solidify-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/solidify.jpg 1200w" alt="solidify" width="1200" height="900" /></a></div>
<div></div>
 
<h2>IconBench</h2>
<a href="http://iconbench.com/" target="_blank" rel="nofollow">IconBench</a> lets you customize a set of more than 700 icons. You can set things like opacity, drop shadow, inner shadow, gradient, and more, and then pick the icons you want.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/iconbench.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/iconbench.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/iconbench-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/iconbench-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/iconbench-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/iconbench.jpg 1200w" alt="iconbench" width="1200" height="900" /></a></div>
<div></div>
 
<h2>rwdgrid.com</h2>
<a href="http://rwdgrid.com/" target="_blank" rel="nofollow">rwdgrid</a> is a responsive grid system based on 960.gs. It has different grid systems for 1200px, 960px, and 720px displays, as well as mobile screens.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid.jpg 1200w" alt="rwdgrid" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Onlytasks</h2>
<a href="http://www.bitgeenius.com/onlytaskseng.html" target="_blank" rel="nofollow">Onlytasks</a> is a new task management app for OS X and iOS that makes it easy to organize your tasks efficiently. It even synchronizes with Evernote!
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/onlytasks.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/onlytasks.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/onlytasks-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/onlytasks-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/onlytasks-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/onlytasks.jpg 1200w" alt="onlytasks" width="1200" height="900" /></a></div>
<div></div>
 
<h2>WP Teacher</h2>
<a href="http://wordpress.org/extend/plugins/wp-teacher/" target="_blank" rel="nofollow">WP Teacher</a> is a new plugin for educators that lets them integrate course content into their WP site. It supports two post types (assignments and events), widgets for assignment lists & event lists, and more.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/wpteacher.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/wpteacher.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/wpteacher-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/wpteacher-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/wpteacher-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/wpteacher.jpg 1200w" alt="wpteacher" width="1200" height="900" /></a></div>
<div></div>
 
<h2>SimplyTestable</h2>
<a href="http://simplytestable.com/" target="_blank" rel="nofollow">SimplyTestable</a> is an automated front-end web testing app that allows for one-click testing of your entire site. It’ll validate your HTML markup, give you an overview report of your site’s successes and failures, a detailed per-URL error report, and more.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/simplytestable.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/simplytestable.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/simplytestable-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/simplytestable-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/simplytestable-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/simplytestable.jpg 1200w" alt="simplytestable" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Stride</h2>
<a href="http://strideapp.com/" target="_blank" rel="nofollow">Stride</a> is a sales management app that includes tools to track, manage, and collaborate on new business. It includes real-time collaboration tools to help your whole team work on deals, as well as useful metrics you actually care about.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/stride.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/stride.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/stride-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/stride-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/stride-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/stride.jpg 1200w" alt="stride" width="1200" height="900" /></a></div>
<div></div>
 
<h2>JS Library Boilerplate</h2>
<a href="http://dciccale.github.com/jslibraryboilerplate/" target="_blank" rel="nofollow">JS Library Boilerplate</a> is an easy to use boilerplate for creating your own JS libraries (like jQuery or Prototype). It’s written in CoffeeScript, TypeScript, and pure JavaScript, and is thoroughly documented.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate.jpg 1200w" alt="jsboilerplate" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Bootsnipp</h2>
<a href="http://bootsnipp.com/" target="_blank" rel="nofollow">Bootsnipp</a> is a gallery of free elements for designers and developers working with the Bootstrap HTML/CSS/JavaScript framework. There are currently 40 snippets included, with more being added.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp.jpg 1200w" alt="bootsnipp" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Bonsai</h2>
<a href="http://bonsaijs.org/" target="_blank" rel="nofollow">Bonsai</a> is a lightweight JavaScript graphics library that includes an SVG renderer. It’s straightforward to use, and supports various multimedia assets (including audio, video, images, fonts, and more).
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/bonsai.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bonsai.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bonsai-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bonsai-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bonsai-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bonsai.jpg 1200w" alt="bonsai" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Fbootstrapp</h2>
<a href="http://ckrack.github.com/fbootstrapp/" target="_blank" rel="nofollow">Fbootstrapp</a> is a toolkit for building Facebook iFrame apps in both relevant sizes. It’s based on Bootstrap and built with Less, but styled for Facebook.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp.jpg 1200w" alt="fbootstrapp" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Brunch</h2>
<a href="http://brunch.io/" target="_blank" rel="nofollow">Brunch</a> is an assembler for HTML5 applications. It can be used with any framework, library, programming language, stylesheet, templating language, or backend technology.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/brunch.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/brunch.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/brunch-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/brunch-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/brunch-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/brunch.jpg 1200w" alt="brunch" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Deployd</h2>
<a href="http://www.deployd.com/" target="_blank" rel="nofollow">Deployd</a> makes it easy to build APIs for web and mobile apps quickly. There’s no boilerplate or configuration, unlike traditional backends.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/deployd.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/deployd.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/deployd-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/deployd-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/deployd-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/deployd.jpg 1200w" alt="deployd" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Viewport Resizer</h2>
<a href="http://lab.maltewassermann.com/viewport-resizer/" target="_blank" rel="nofollow">Viewport Resizer</a> is a responsive design testing bookmarklet. All you have to do is go to the page you want to test, click the bookmarklet, and then view it in all kinds of screen resolutions.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/resizer.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/resizer.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/resizer-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/resizer-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/resizer-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/resizer.jpg 1200w" alt="resizer" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Iconify</h2>
<a href="http://www.iconify.co/" target="_blank" rel="nofollow">Iconify</a> is a portfolio site platform that lets you create a responsive portfolio viewable on any device, complete with your contact information. It also includes tools for sharing via social media, and it creates a downloadable mobile app version of your portfolio.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/iconify.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/iconify.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/iconify-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/iconify-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/iconify-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/iconify.jpg 1200w" alt="iconify" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Simple Grid</h2>
<a href="http://thisisdallas.github.com/Simple-Grid/" target="_blank" rel="nofollow">Simple Grid</a> is a responsive, lightweight grid. It’s 1140px wide with twelve columns, but easily adapts to any size layout.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/simplegrid.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/simplegrid.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/simplegrid-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/simplegrid-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/simplegrid-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/simplegrid.jpg 1200w" alt="simplegrid" width="1200" height="900" /></a></div>
<div></div>
 
<h2>One% CSS Grid</h2>
<a href="http://onepcssgrid.mattimling.com/" target="_blank" rel="nofollow">One% CSS Grid</a> is a 12-column fluid grid system for building responsive layouts. It has two starting options, for screens of 1280px or 1024px wide, and uses a percentage-based grid system to perfectly adapt to any screen.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/onepercent.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/onepercent.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/onepercent-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/onepercent-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/onepercent-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/onepercent.jpg 1200w" alt="onepercent" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Yeoman</h2>
<a href="http://yeoman.io/" target="_blank" rel="nofollow">Yeoman</a> is a robust set of tools and libraries, along with a workflow, for creating compelling, beautiful web apps. It includes thorough documentation, as well as a getting started guide.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/yoeman.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/yoeman.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/yoeman-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/yoeman-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/yoeman-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/yoeman.jpg 1200w" alt="yoeman" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Emmet</h2>
<a href="http://docs.emmet.io/" target="_blank" rel="nofollow">Emmet</a> is a toolkit for web developers, previously known as Zen Coding. It will greatly improve your HTML and CSS, taking snippets to a whole new level (CSS-like expressions that can be dynamically parsed and more).
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/emmet.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/emmet.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/emmet-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/emmet-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/emmet-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/emmet.jpg 1200w" alt="emmet" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Boot Metro</h2>
<a href="http://aozora.github.com/bootmetro/" target="_blank" rel="nofollow">Boot Metro</a> is a flexible, simple HTML, CSS, and JS framework for web apps with a Windows 8 App Store style. It’s open source and built on top of Twitter Bootstrap, and was inspired by Metro UI CSS.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/bootmetro.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bootmetro.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bootmetro-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bootmetro-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bootmetro-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bootmetro.jpg 1200w" alt="bootmetro" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Bower</h2>
<a href="http://twitter.github.com/bower/" target="_blank" rel="nofollow">Bower</a> is a package manager for HTML, CSS, and JavaScript. It manages dependencies for you, and allows you to easily install assets such as images, CSS, and JavaScript.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/bower.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bower.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bower-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bower-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bower-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bower.jpg 1200w" alt="bower" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Apigee</h2>
<a href="http://apigee.com/about/developers" target="_blank" rel="nofollow">Apigee</a> is a service for developers to more easily create cutting-edge apps. Apigee handles mundane tasks like sign ups/log ins, storage, and server maintenance, alongside plenty of other features.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/apigee.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/apigee.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/apigee-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/apigee-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/apigee-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/apigee.jpg 1200w" alt="apigee" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Scripted</h2>
<a href="https://github.com/scripted-editor/scripted" target="_blank" rel="nofollow">Scripted</a> is a lightweight, fast code editor specifically for JavaScript. It’s browser-based and is served from a locally running Node.js server instance.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/scripted.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/scripted.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/scripted-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/scripted-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/scripted-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/scripted.jpg 1200w" alt="scripted" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Rosarian ($55)</h2>
<a href="http://marketplace.veer.com/font/Rosarian-UMT9002084#" target="_blank" rel="nofollow">Rosarian</a> is a brush-style script with thick, round shapes and variable line widths. It was designed by Laura Worthington, of Umbrella Type.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/rosarian.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/rosarian.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/rosarian-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/rosarian-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/rosarian-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/rosarian.jpg 1200w" alt="rosarian" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Hummingbird ($39)</h2>
<a href="http://marketplace.veer.com/font/Hummingbird-UMT9002083" target="_blank" rel="nofollow">Hummingbird</a> is reminiscent of old-fashioned penmanship, with technical sophistication. It is airy, personal, sensual, and has irregularities that make it as innately and intimately human as a writer’s hand and pen.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/hummingbird.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/hummingbird.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/hummingbird-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/hummingbird-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/hummingbird-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/hummingbird.jpg 1200w" alt="hummingbird" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Eaglefeather ($299.95)</h2>
<a href="http://marketplace.veer.com/font/P22-FLLW-Eaglefeather-Family-PTT0000489" target="_blank" rel="nofollow">Eaglefeather</a> is based on an alphabet designed by Frank Lloyd Wright for the “Eaglerock” project in 1922. It’s been adapted by P22 Type foundry.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather.jpg 1200w" alt="eaglefeather" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Poly (free)</h2>
<a href="http://www.behance.net/gallery/POLY-TYPE-%28Free-Font%29/5762503" target="_blank" rel="nofollow">Poly</a> is a free display font with geometric sensibilities. It’s great at large sizes and comes with a number of alternate characters.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/poly.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/poly.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/poly-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/poly-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/poly-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/poly.jpg 1200w" alt="poly" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Toolkit (free)</h2>
<a href="http://www.behance.net/gallery/Tool-Kit-Typeface/5647333" target="_blank" rel="nofollow">Toolkit</a> is a free display typeface with letterforms reminiscent of hand tools, including rulers, squares, wrenches, and more.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/toolkit.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/toolkit.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/toolkit-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/toolkit-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/toolkit-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/toolkit.jpg 1200w" alt="toolkit" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Zombie Sunrise ($10)</h2>
<a href="http://www.tendollarfonts.com/product/zombie-sunrise-typeface" target="_blank" rel="nofollow">Zombie Sunrise</a> is inspired by vintage horror films from the 60s. It’s hand-drawn and was designed by David Alexander Slaager.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise.jpg 1200w" alt="zombiesunrise" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Window Dressing JNL ($25)</h2>
<a href="http://www.myfonts.com/fonts/jnlevine/window-dressing/" target="_blank" rel="nofollow">Window Dressing JNL</a> is based on a picture of cast metal letters from the 1950s. It has clean, simple lines, and unusual letterforms for the B and R.

<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/windowdressing.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/windowdressing.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/windowdressing-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/windowdressing-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/windowdressing-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/windowdressing.jpg 1200w" alt="windowdressing" width="1200" height="900" /></a></div>
<div></div>
 
<h2>King Wood Volume ($100)</h2>
<a href="http://marketplace.veer.com/font/King-Wood-Volume-CDT0000675" target="_blank" rel="nofollow">King Wood Volume</a> is a gothic typeface with Tuscan flair, that works equally well in designs inspired by the west or the east.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/kingwood.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/kingwood.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/kingwood-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/kingwood-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/kingwood-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/kingwood.jpg 1200w" alt="kingwood" width="1200" height="900" /></a></div>
<div></div>
 
<h2>Moki ($70)</h2>
<a href="http://marketplace.veer.com/font/Moki-FTT0000057" target="_blank" rel="nofollow">Moki</a> comes in seven different styles (Base, Cut, Dust, Lean, Mono, Soft, and Uni), perfect for display use.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/moki.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/moki.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/moki-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/moki-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/moki-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/moki.jpg 1200w" alt="moki" width="1200" height="900" /></a></div>
<div></div>
 
<h2>RBNo2.1 ($60)</h2>
<a href="http://www.myfonts.com/fonts/rene-bieder/rbno2-1/" target="_blank" rel="nofollow">RBNo2.1</a> is a condensed sans-serif font with a geometric appearance and technical style. It has two versions in seven weights, with matching italics.
<div><a href="http://www.xiaoten.com/usr/uploads/2013/01/rbno21.jpg"><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/rbno21.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/rbno21-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/rbno21-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/rbno21-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/rbno21.jpg 1200w" alt="rbno21" width="1200" height="900" /></a></div>
<div></div>

英文原文转自（http://www.webdesignerdepot.com/2012/11/whats-new-for-designers-november-2012/）：

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments.
<h2>Spectrum</h2>
<a href="http://www.eigenlogik.com/spectrum/" target="_blank" rel="nofollow">Spectrum</a> is an OS X app that makes it easy for you to create color schemes intuitively. It uses built-in harmony rules for composing color schemes, as well as a color picker, a tool to make schemes from images, and built-in library, and more.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/spectrum.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/spectrum.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/spectrum-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/spectrum-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/spectrum-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/spectrum.jpg 1200w" alt="spectrum" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Sellbox</h2>
<a href="http://sellboxhq.com/" target="_blank" rel="nofollow">Sellbox</a> lets you sell your digital files via your Dropbox account. Receive funds through PayPal, and only pay Sellbox a 5% cut without any upfront fees.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/sellbox.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/sellbox.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/sellbox-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/sellbox-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/sellbox-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/sellbox.jpg 1200w" alt="sellbox" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Pocket</h2>
<a href="http://getpocket.com/" target="_blank" rel="nofollow">Pocket</a> is an official Read it Later app that makes it easy to save articles, videos, or any other content for later. It works from your browser, email, and more than 300 apps, including Twitter, Pulse, Flipboard, and more.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/pocket.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/pocket.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/pocket-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/pocket-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/pocket-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/pocket.jpg 1200w" alt="pocket" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Wireframe.cc</h2>
<a href="http://wireframe.cc/example" target="_blank" rel="nofollow">Wireframe.cc</a> is a minimalist wireframing app that’s both a pleasure to use and beautiful to look at. Controls are simple and intuitive, and the end result is quite attractive.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/wireframe.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/wireframe.jpg" sizes="(max-width: 1257px) 100vw, 1257px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/wireframe-300x227.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/wireframe-768x580.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/wireframe-1024x774.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/wireframe.jpg 1257w" alt="wireframe" width="1257" height="950"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Manymo</h2>
<a href="http://www.manymo.com/" target="_blank" rel="nofollow">Manymo</a> is an Android emulator that starts quickly and runs smoothly right in your browser, letting you test your Android apps. It supports more than 42 screen sizes and OS versions.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/manymo.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/manymo.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/manymo-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/manymo-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/manymo-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/manymo.jpg 1200w" alt="manymo" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Photo Raster</h2>
<a href="http://photoraster.com/" target="_blank" rel="nofollow">Photo Raster</a> is an advanced online photo editor that includes tools for painting, filters, adjustments, layer editing and masks, and more.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/photoraster.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/photoraster.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/photoraster-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/photoraster-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/photoraster-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/photoraster.jpg 1200w" alt="photoraster" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Bitrix24</h2>
<a href="http://www.bitrix24.com/" target="_blank" rel="nofollow">Bitrix24</a> makes it possible to create your own social intranet in just minutes. There’s a free account that supports up to 12 users and 5GB of files, while paid accounts add more users, more features, and more storage space.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/bitrix24.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bitrix24.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bitrix24-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bitrix24-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bitrix24-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bitrix24.jpg 1200w" alt="bitrix24" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Solidify</h2>
<a href="http://www.solidifyapp.com/" target="_blank" rel="nofollow">Solidify</a> is a new prototyping app from Zurb that lets you create clickable prototypes from wireframes, mockups, or even sketches. Plans start at just $19/month.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/solidify.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/solidify.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/solidify-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/solidify-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/solidify-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/solidify.jpg 1200w" alt="solidify" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>IconBench</h2>
<a href="http://iconbench.com/" target="_blank" rel="nofollow">IconBench</a> lets you customize a set of more than 700 icons. You can set things like opacity, drop shadow, inner shadow, gradient, and more, and then pick the icons you want.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/iconbench.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/iconbench.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/iconbench-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/iconbench-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/iconbench-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/iconbench.jpg 1200w" alt="iconbench" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>rwdgrid.com</h2>
<a href="http://rwdgrid.com/" target="_blank" rel="nofollow">rwdgrid</a> is a responsive grid system based on 960.gs. It has different grid systems for 1200px, 960px, and 720px displays, as well as mobile screens.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/rwdgrid.jpg 1200w" alt="rwdgrid" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Onlytasks</h2>
<a href="http://www.bitgeenius.com/onlytaskseng.html" target="_blank" rel="nofollow">Onlytasks</a> is a new task management app for OS X and iOS that makes it easy to organize your tasks efficiently. It even synchronizes with Evernote!
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/onlytasks.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/onlytasks.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/onlytasks-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/onlytasks-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/onlytasks-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/onlytasks.jpg 1200w" alt="onlytasks" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>WP Teacher</h2>
<a href="http://wordpress.org/extend/plugins/wp-teacher/" target="_blank" rel="nofollow">WP Teacher</a> is a new plugin for educators that lets them integrate course content into their WP site. It supports two post types (assignments and events), widgets for assignment lists &amp; event lists, and more.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/wpteacher.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/wpteacher.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/wpteacher-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/wpteacher-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/wpteacher-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/wpteacher.jpg 1200w" alt="wpteacher" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>SimplyTestable</h2>
<a href="http://simplytestable.com/" target="_blank" rel="nofollow">SimplyTestable</a> is an automated front-end web testing app that allows for one-click testing of your entire site. It’ll validate your HTML markup, give you an overview report of your site’s successes and failures, a detailed per-URL error report, and more.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/simplytestable.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/simplytestable.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/simplytestable-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/simplytestable-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/simplytestable-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/simplytestable.jpg 1200w" alt="simplytestable" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Stride</h2>
<a href="http://strideapp.com/" target="_blank" rel="nofollow">Stride</a> is a sales management app that includes tools to track, manage, and collaborate on new business. It includes real-time collaboration tools to help your whole team work on deals, as well as useful metrics you actually care about.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/stride.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/stride.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/stride-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/stride-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/stride-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/stride.jpg 1200w" alt="stride" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>JS Library Boilerplate</h2>
<a href="http://dciccale.github.com/jslibraryboilerplate/" target="_blank" rel="nofollow">JS Library Boilerplate</a> is an easy to use boilerplate for creating your own JS libraries (like jQuery or Prototype). It’s written in CoffeeScript, TypeScript, and pure JavaScript, and is thoroughly documented.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/jsboilerplate.jpg 1200w" alt="jsboilerplate" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Bootsnipp</h2>
<a href="http://bootsnipp.com/" target="_blank" rel="nofollow">Bootsnipp</a> is a gallery of free elements for designers and developers working with the Bootstrap HTML/CSS/JavaScript framework. There are currently 40 snippets included, with more being added.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bootsnipp.jpg 1200w" alt="bootsnipp" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Bonsai</h2>
<a href="http://bonsaijs.org/" target="_blank" rel="nofollow">Bonsai</a> is a lightweight JavaScript graphics library that includes an SVG renderer. It’s straightforward to use, and supports various multimedia assets (including audio, video, images, fonts, and more).
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/bonsai.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bonsai.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bonsai-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bonsai-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bonsai-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bonsai.jpg 1200w" alt="bonsai" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Fbootstrapp</h2>
<a href="http://ckrack.github.com/fbootstrapp/" target="_blank" rel="nofollow">Fbootstrapp</a> is a toolkit for building Facebook iFrame apps in both relevant sizes. It’s based on Bootstrap and built with Less, but styled for Facebook.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/fbootstrapp.jpg 1200w" alt="fbootstrapp" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Brunch</h2>
<a href="http://brunch.io/" target="_blank" rel="nofollow">Brunch</a> is an assembler for HTML5 applications. It can be used with any framework, library, programming language, stylesheet, templating language, or backend technology.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/brunch.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/brunch.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/brunch-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/brunch-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/brunch-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/brunch.jpg 1200w" alt="brunch" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Deployd</h2>
<a href="http://www.deployd.com/" target="_blank" rel="nofollow">Deployd</a> makes it easy to build APIs for web and mobile apps quickly. There’s no boilerplate or configuration, unlike traditional backends.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/deployd.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/deployd.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/deployd-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/deployd-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/deployd-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/deployd.jpg 1200w" alt="deployd" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Viewport Resizer</h2>
<a href="http://lab.maltewassermann.com/viewport-resizer/" target="_blank" rel="nofollow">Viewport Resizer</a> is a responsive design testing bookmarklet. All you have to do is go to the page you want to test, click the bookmarklet, and then view it in all kinds of screen resolutions.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/resizer.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/resizer.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/resizer-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/resizer-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/resizer-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/resizer.jpg 1200w" alt="resizer" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Iconify</h2>
<a href="http://www.iconify.co/" target="_blank" rel="nofollow">Iconify</a> is a portfolio site platform that lets you create a responsive portfolio viewable on any device, complete with your contact information. It also includes tools for sharing via social media, and it creates a downloadable mobile app version of your portfolio.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/iconify.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/iconify.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/iconify-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/iconify-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/iconify-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/iconify.jpg 1200w" alt="iconify" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Simple Grid</h2>
<a href="http://thisisdallas.github.com/Simple-Grid/" target="_blank" rel="nofollow">Simple Grid</a> is a responsive, lightweight grid. It’s 1140px wide with twelve columns, but easily adapts to any size layout.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/simplegrid.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/simplegrid.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/simplegrid-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/simplegrid-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/simplegrid-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/simplegrid.jpg 1200w" alt="simplegrid" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>One% CSS Grid</h2>
<a href="http://onepcssgrid.mattimling.com/" target="_blank" rel="nofollow">One% CSS Grid</a> is a 12-column fluid grid system for building responsive layouts. It has two starting options, for screens of 1280px or 1024px wide, and uses a percentage-based grid system to perfectly adapt to any screen.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/onepercent.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/onepercent.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/onepercent-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/onepercent-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/onepercent-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/onepercent.jpg 1200w" alt="onepercent" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Yeoman</h2>
<a href="http://yeoman.io/" target="_blank" rel="nofollow">Yeoman</a> is a robust set of tools and libraries, along with a workflow, for creating compelling, beautiful web apps. It includes thorough documentation, as well as a getting started guide.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/yoeman.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/yoeman.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/yoeman-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/yoeman-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/yoeman-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/yoeman.jpg 1200w" alt="yoeman" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Emmet</h2>
<a href="http://docs.emmet.io/" target="_blank" rel="nofollow">Emmet</a> is a toolkit for web developers, previously known as Zen Coding. It will greatly improve your HTML and CSS, taking snippets to a whole new level (CSS-like expressions that can be dynamically parsed and more).
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/emmet.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/emmet.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/emmet-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/emmet-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/emmet-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/emmet.jpg 1200w" alt="emmet" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Boot Metro</h2>
<a href="http://aozora.github.com/bootmetro/" target="_blank" rel="nofollow">Boot Metro</a> is a flexible, simple HTML, CSS, and JS framework for web apps with a Windows 8 App Store style. It’s open source and built on top of Twitter Bootstrap, and was inspired by Metro UI CSS.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/bootmetro.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bootmetro.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bootmetro-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bootmetro-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bootmetro-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bootmetro.jpg 1200w" alt="bootmetro" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Bower</h2>
<a href="http://twitter.github.com/bower/" target="_blank" rel="nofollow">Bower</a> is a package manager for HTML, CSS, and JavaScript. It manages dependencies for you, and allows you to easily install assets such as images, CSS, and JavaScript.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/bower.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/bower.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/bower-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/bower-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/bower-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/bower.jpg 1200w" alt="bower" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Apigee</h2>
<a href="http://apigee.com/about/developers" target="_blank" rel="nofollow">Apigee</a> is a service for developers to more easily create cutting-edge apps. Apigee handles mundane tasks like sign ups/log ins, storage, and server maintenance, alongside plenty of other features.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/apigee.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/apigee.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/apigee-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/apigee-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/apigee-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/apigee.jpg 1200w" alt="apigee" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Scripted</h2>
<a href="https://github.com/scripted-editor/scripted" target="_blank" rel="nofollow">Scripted</a> is a lightweight, fast code editor specifically for JavaScript. It’s browser-based and is served from a locally running Node.js server instance.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/scripted.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/scripted.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/scripted-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/scripted-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/scripted-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/scripted.jpg 1200w" alt="scripted" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Rosarian ($55)</h2>
<a href="http://marketplace.veer.com/font/Rosarian-UMT9002084#" target="_blank" rel="nofollow">Rosarian</a> is a brush-style script with thick, round shapes and variable line widths. It was designed by Laura Worthington, of Umbrella Type.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/rosarian.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/rosarian.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/rosarian-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/rosarian-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/rosarian-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/rosarian.jpg 1200w" alt="rosarian" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Hummingbird ($39)</h2>
<a href="http://marketplace.veer.com/font/Hummingbird-UMT9002083" target="_blank" rel="nofollow">Hummingbird</a> is reminiscent of old-fashioned penmanship, with technical sophistication. It is airy, personal, sensual, and has irregularities that make it as innately and intimately human as a writer’s hand and pen.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/hummingbird.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/hummingbird.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/hummingbird-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/hummingbird-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/hummingbird-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/hummingbird.jpg 1200w" alt="hummingbird" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Eaglefeather ($299.95)</h2>
<a href="http://marketplace.veer.com/font/P22-FLLW-Eaglefeather-Family-PTT0000489" target="_blank" rel="nofollow">Eaglefeather</a> is based on an alphabet designed by Frank Lloyd Wright for the “Eaglerock” project in 1922. It’s been adapted by P22 Type foundry.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/eaglefeather.jpg 1200w" alt="eaglefeather" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Poly (free)</h2>
<a href="http://www.behance.net/gallery/POLY-TYPE-%28Free-Font%29/5762503" target="_blank" rel="nofollow">Poly</a> is a free display font with geometric sensibilities. It’s great at large sizes and comes with a number of alternate characters.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/poly.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/poly.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/poly-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/poly-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/poly-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/poly.jpg 1200w" alt="poly" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Toolkit (free)</h2>
<a href="http://www.behance.net/gallery/Tool-Kit-Typeface/5647333" target="_blank" rel="nofollow">Toolkit</a> is a free display typeface with letterforms reminiscent of hand tools, including rulers, squares, wrenches, and more.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/toolkit.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/toolkit.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/toolkit-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/toolkit-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/toolkit-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/toolkit.jpg 1200w" alt="toolkit" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Zombie Sunrise ($10)</h2>
<a href="http://www.tendollarfonts.com/product/zombie-sunrise-typeface" target="_blank" rel="nofollow">Zombie Sunrise</a> is inspired by vintage horror films from the 60s. It’s hand-drawn and was designed by David Alexander Slaager.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/zombiesunrise.jpg 1200w" alt="zombiesunrise" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Window Dressing JNL ($25)</h2>
<a href="http://www.myfonts.com/fonts/jnlevine/window-dressing/" target="_blank" rel="nofollow">Window Dressing JNL</a> is based on a picture of cast metal letters from the 1950s. It has clean, simple lines, and unusual letterforms for the B and R.

&nbsp;
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/windowdressing.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/windowdressing.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/windowdressing-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/windowdressing-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/windowdressing-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/windowdressing.jpg 1200w" alt="windowdressing" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>King Wood Volume ($100)</h2>
<a href="http://marketplace.veer.com/font/King-Wood-Volume-CDT0000675" target="_blank" rel="nofollow">King Wood Volume</a> is a gothic typeface with Tuscan flair, that works equally well in designs inspired by the west or the east.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/kingwood.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/kingwood.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/kingwood-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/kingwood-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/kingwood-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/kingwood.jpg 1200w" alt="kingwood" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>Moki ($70)</h2>
<a href="http://marketplace.veer.com/font/Moki-FTT0000057" target="_blank" rel="nofollow">Moki</a> comes in seven different styles (Base, Cut, Dust, Lean, Mono, Soft, and Uni), perfect for display use.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/moki.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/moki.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/moki-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/moki-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/moki-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/moki.jpg 1200w" alt="moki" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;
<h2>RBNo2.1 ($60)</h2>
<a href="http://www.myfonts.com/fonts/rene-bieder/rbno2-1/" target="_blank" rel="nofollow">RBNo2.1</a> is a condensed sans-serif font with a geometric appearance and technical style. It has two versions in seven weights, with matching italics.
<div><span class="external-link"><a class="no-external-link" href="http://www.xiaoten.com/usr/uploads/2013/01/rbno21.jpg" target="_blank"><i data-feather="external-link"></i><img class="attachment-full size-full" src="http://www.xiaoten.com/usr/uploads/2013/01/rbno21.jpg" sizes="(max-width: 1200px) 100vw, 1200px" srcset="http://www.xiaoten.com/usr/uploads/2013/01/rbno21-300x225.jpg 300w, http://www.xiaoten.com/usr/uploads/2013/01/rbno21-768x576.jpg 768w, http://www.xiaoten.com/usr/uploads/2013/01/rbno21-1024x768.jpg 1024w, http://www.xiaoten.com/usr/uploads/2013/01/rbno21.jpg 1200w" alt="rbno21" width="1200" height="900"  style=""></a></span></div>
<div></div>
&nbsp;