资源说明：Actively maintained list of useful web developments tools, libraries, assets and any other open-source goodies.

# frontend-toolbox

Actively maintained list of useful web developments tools, libraries, assets and any other open-source goodies.

_"★" recommended and currently used by the maintainer_

## General

- ★ [HTML5 Spec for Web Developers](http://developers.whatwg.org/): This specification is intended for authors of documents and scripts that use the features defined in this specification.
- [DocHub](http://dochub.io/): Alternative documentation repository for: CSS, HTML, JavaScript, DOM, jQuery, PHP, Python
- [Hypertext Transfer Protocol -- HTTP/1.1](http://www.w3.org/Protocols/rfc2616/rfc2616.html): you should read through it at least once
- [ReFiddle](http://refiddle.com/): Regular Expression (regex) tester... better than the rest

### Feeds

- [Web browser, frontend, standard and webapp feeds to follow](http://paulirish.com/2011/web-browser-frontend-and-standards-feeds-to-follow/)

### Compatibility

- [When can I use...](http://caniuse.com/): Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
- [HTML5 & CSS3 Readiness](http://html5readiness.com/): We don't have to wait for entire specs to be completed, we can start using some hawtness now.
- [HTML5 Please](http://html5please.com/): Use the new and shiny responsibly.
- [HTML5 Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)

## Performance

- [HTTPArchive](http://httparchive.org/index.php) Performance stats and trends for the worlds most popular sites


## Runtimes

- [Ruby Installer for Windows](http://rubyinstaller.org/)
- [NodeJS](http://nodejs.org/) win/linux/osx
- [HomeBrew](http://mxcl.github.com/homebrew/) missing package manager for OSX

## Debugging

- [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/) for chrome
- [Firebug](http://getfirebug.com/) for firefox
- [DragonFly](http://my.opera.com/dragonfly/blog/) for opera

- [Fixing These jQuery](http://fixingthesejquery.com/) how to debugger to debug jquery

## Maps

- [Gmaps](http://hpneo.github.com/gmaps/) makes it easier to use Google Maps
- [jVectorMap](http://jvectormap.com/) svg based maps for ie6+, maps included
- [Leaflet](http://leaflet.cloudmade.com/) an open-source JavaScript library for mobile-friendly interactive maps

## Charts/graphs/visualization/reporting

- ★ [datavisualization tools](http://selection.datavisualization.ch/) a collection of tools that we, the people behind Datavisualization.ch, work with on a daily basis and recommend warmly

- ★ [flot](http://www.flotcharts.org/) Attractive JavaScript plotting for jQuery
- [D3](http://d3js.org/) a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.
  - [Rickshaw](http://code.shutterstock.com/rickshaw/) a JavaScript toolkit for creating interactive time series graphs.
  - [Cubism](http://square.github.com/cubism/) Time Series Visualization
- [gRaphael](http://g.raphaeljs.com/) SVG charts
- [flotr2](http://www.humblesoftware.com/flotr2/) Graphs and Charts for Canvas in JavaScript.
- [RGraph](http://www.rgraph.net/) interactive Javascript charts and graphs for your website using the HTML5 canvas tag
- [Sencha Touch Charts](http://www.sencha.com/products/touch/charts/) - paid
- [HighCharts](http://www.highcharts.com/) - paid
- [dygraphs](http://dygraphs.com/)
- [ZingChart](http://www.zingchart.com/)
- [Fusion Charts](http://www.fusioncharts.com/)
- [MilkCharts](http://mootools.net/forge/p/milkchart) for MooTools weirdos
- [Google Chart Tools](https://developers.google.com/chart/) API based
- [Envision](http://www.humblesoftware.com/envision) is a library for creating fast, dynamic and interactive HTML5 visualizations.
- [ArborJS](http://arborjs.org/) a graph visualization library using web workers and jQuery
- [TimelineJS](http://timeline.verite.co/) beautifully crafted timelines that are easy, and intuitive to use.
- [jQuery Sparklines](http://omnipotent.net/jquery.sparkline/#s-about)

#### UI Toolkits

- [Twiter Bootstrap](http://twitter.github.com/bootstrap/)
  - ★ [Compass Twitter Bootstrap](https://github.com/vwall/compass-twitter-bootstrap)
  - [BootboxJS](http://bootboxjs.com/) alert, confirm and flexible dialogs for Twitter's Bootstrap framework
- [jQuery UI](http://jqueryui.com/demos/)

### Documentation

- ★ [Docco](http://jashkenas.github.com/docco/): Quick and dirty, literate-programming documenation generator
- [Groc](http://nevir.github.com/groc/): is an attempt to further enhance the idea [of Docco]

### Total process build tools, Assemblers, et al

Should this be merged with 'JavaScript Build Tools' section below? 

- ★ [Yeoman](http://yeoman.io/): a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build beautiful web applications.
- ★ [Brunch](http://brunch.io/): A lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity.
- ★ [Middleman](http://middlemanapp.com/): a static site generator using all the shortcuts and tools in modern web development.
- [Lumbar](http://walmartlabs.github.com/lumbar/): Lumbar is a js-build tool that takes a general codebase and list of platforms to generate modular platform specific applications. (from Walmart Labs)
- [LiveReload](http://livereload.com/): CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work. (OSX app only)
- [CodeKit](http://incident57.com/codekit/): CodeKit helps you build websites faster and better. (OSX app only)

## JavaScript

- [Modernizr](http://modernizr.com/): detects HTML5 and CSS3 features in the user’s browser.
- [Underscore](http://underscorejs.org/): JavaScript utility belt
  - [lodash](https://github.com/bestiejs/lodash): same api, but faster, and more trendy
- [JSON3](http://bestiejs.github.com/json3/): JSON parser/stringifier
- [Idiomatic JS](https://github.com/rwldrn/idiomatic.js): Principles of Writing Consistent, Idiomatic JavaScript
- [JavaScript Garden](http://bonsaiden.github.com/JavaScript-Garden/): growing collection of documentation about the most quirky parts JavaScript
- [JSConf](http://jsconf.com/)
- [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)

### Standalone libraries (no dependencies)

- [Widow Tamer](http://artequalswork.com/posts/on-widows.php) fix typgraphic widows
- [SwipeJS](http://swipejs.com/) lightweight mobile slider script
- [accounting.js](http://josscrowcroft.github.com/accounting.js/) number, money and currency formatting, with optional excel-style column rendering
- [money.js](http://josscrowcroft.github.com/money.js/) currency conversion library, done right - with no dependencies
- [moment.js](http://momentjs.com/) A 4.8k javascript date library for parsing, validating, manipulating, and formatting dates.
- [cookies.js](https://github.com/ScottHamper/Cookies)

### Headless DOM/Browsers

- [PhantomJS](http://phantomjs.org/): Headless WebKit with JavaScript API
- [ZombieJS](http://zombie.labnotes.org/): Insanely fast, headless full-stack testing using Node.js

### Build tools

- ★ [Grunt](http://gruntjs.com/): a task-based command line build tool for JavaScript projects
- [UglifyJS](https://github.com/mishoo/UglifyJS): js minifier, beautifier
- [Closure Compiler](https://developers.google.com/closure/compiler/)
- [r.js (RequireJS optimizer)](https://github.com/jrburke/r.js/)

### Modules and Script loaders

- [RequireJS](http://requirejs.org/) The awesomest AMD script loader
- [LabJS](http://labjs.com/) script loader
- [YepNope](http://yepnopejs.com/) conditional loader for polyfills

#### Package Managers

- [Bower](http://twitter.github.com/bower/) package manager for the web
- [Volo](https://github.com/volojs/volo) Create front end projects from templates, add dependencies, and automate the resulting projects
- [Ender](http://ender.no.de/) the no-library library

### Books

- ★ [JSbooks](http://jsbooks.revolunet.com/): crazy collection of free JS books
- ★ [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X)
- ★ [JavaScript:The Definitive Guide](http://shop.oreilly.com/product/9780596805531.do)
- ★ [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742)
- [Understanding JavaScript OOP](http://killdream.github.com/blog/2011/10/understanding-javascript-oop/)
- [JavaScript Patterns](http://shop.oreilly.com/product/9780596806767.do)
- [Maintainable JavaScript](http://shop.oreilly.com/product/0636920025245.do)

#### Free/online

- [Eloquent JavaScript](http://eloquentjavascript.net/)
- [Essential JavaScript Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/)

### jQuery

- [jQuery](http://jquery.com/): Write less; do more.
- [Zepto](http://zeptojs.com/): jQuery alternative for mobile apps (super light-weight)
- [jQAPI](http://jqapi.com/): Alternative jQuery Documentation
- [10 Things I Learned From the jQuery Source](http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/)
- [jQuery Fundamentals](http://jqfundamentals.com/) Massively awesome online course/ebook

#### Useful jQuery Plugins

- ★[Select2](http://ivaynberg.github.com/select2/) jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
- [FormatCurrency](http://code.google.com/p/jquery-formatcurrency/)
- [MaskedInput](http://digitalbush.com/projects/masked-input-plugin/)
- [Fresco](http://www.frescojs.com/) beautiful, responsive lightbox
- [Chosen](http://harvesthq.github.com/chosen/)
- [jQuery File Upload](https://github.com/blueimp/jQuery-File-Upload) best uploader on the planet
- [BigVideo](http://dfcb.github.com/BigVideo.js/)
- [jQuery Masonry](http://masonry.desandro.com/index.html) A dynamic layout plugin for jQuery; the flip-side of CSS floats (think pintrest layout)

- [Sisyphus](http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/) client side drafts (think gmail) and more...
- [jQuery Credit Card Validator](http://paweldecowski.github.com/jQuery-CreditCardValidator/)
- [jQuery Tagit!](http://aehlke.github.com/tag-it/) transform text inputs to accept deliminated tag strings
- [VisualSearch](http://documentcloud.github.com/visualsearch/) enhances ordinary search boxes with the ability to autocomplete faceted search queries
- [Grumble](http://jamescryer.github.com/grumble.js/) tooltips around a 360 degree circle
- [Complexify](https://github.com/danpalmer/jquery.complexify.js) determine complexity of passwords
- [SlabText](http://www.frequency-decoder.com/demo/slabText/)
- [SimpleWeather](http://monkeecreate.github.com/jquery.simpleWeather/)
- [jQuery Sparklines](http://omnipotent.net/jquery.sparkline/#s-about)

### Mobile

- [Zepto](http://zeptojs.com/)
- [jQuery Mobile](http://jquerymobile.com/)

### Testing

- [Jasmine](http://pivotal.github.com/jasmine/) 
- [Mocha](http://visionmedia.github.com/mocha/) new, trendy, lightweight
- [QUnit](http://docs.jquery.com/QUnit) j-unit inspired (i think)
- [Vows](http://vowsjs.org/) async BDD

#### Test Drivers
- [JSTestDriver](http://code.google.com/p/js-test-driver/) remote, automated testing of javascript on different browsers
  - [Jasmine JSTD](https://github.com/ibolmo/jasmine-jstd-adapter) adapter for using Jasmine

#### Assertions
- [Chai](http://chaijs.com/): assertions lib
  - *should*: foo.should.be.a('string')
  - *expect*: expect(foo).to.be.a('string')
  - *assert*: assert.typeof(foo, 'string')
- [should.js](https://github.com/visionmedia/should.js) 'should' style assertions
- [expect.js](https://github.com/LearnBoost/expect.js) 'expect' style assertions

#### Mocks, stubs, spies
- [SinonJS](http://sinonjs.org/)


### [Transcompilation](http://en.wikipedia.org/wiki/Source-to-source_compiler) Languages

- ★ [CoffeeScript](http://coffeescript.org/): a little language that compiles into JavaScript
  - [Little Book on CoffeeScript](http://arcturo.github.com/library/coffeescript/)
  - [CoffeeScript Tutorials](http://www.youtube.com/playlist?list=PL399DF0B74063889F&feature=plcp)
  - [CoffeeScript Style Guide](https://github.com/polarmobile/coffeescript-style-guide)
- [IcedCoffeeScript](http://maxtaco.github.com/coffee-script/): drop-in replacement interpreter for CoffeeScript with **async control flow semantics**.
- [LiveScript](http://gkz.github.com/LiveScript/): aims for increased expressiveness and code beauty, while adding features to assist in functional style programming, imperative and object oriented programming, and has an optional class system with inheritance, calls to super, and more.
- [Roy](http://roy.brianmckenna.org/): an experimental programming language that targets JavaScript and tries to meld JavaScript semantics with some features common in static functional languages.

### Linters

Tools to detect errors (syntactic, semantic, otherwise) and potential problems in JavaScript code.

- [JSHint](http://www.jshint.com/): New hotness 
  - [Sublime Linter](https://github.com/SublimeLinter/SublimeLinter): Sublime plugin for JSHint.
- [JSLint](http://www.jslint.com/): Old and busted.

### Frameworks ([MV* et al](http://lostechies.com/derickbailey/2011/12/23/backbone-js-is-not-an-mvc-framework/))

- [Backbone.js](http://documentcloud.github.com/backbone)
  - [Backbone Fundamentals](http://addyosmani.github.com/backbone-fundamentals/)
  - [Backbone Koans](https://github.com/larrymyers/backbone-koans)
  - [Marionette](http://marionettejs.com/): composite app architecture on top of backbone
  - [Chaplin](https://github.com/chaplinjs/chaplin): application architecture
  - [Backbone LocalStorage](https://github.com/jeromegn/Backbone.localStorage)
- [Ember.js](http://emberjs.com)
- [AngularJS](http://angularjs.org)
- [Spine](http://spinejs.com)
- [KnockoutJS](http://knockoutjs.com) (MVVM)
- [YUI](http://yuilibrary.com)
- [Batman.js](http://batmanjs.org)
- [Closure](http://code.google.com/closure/library/)
- [Google Web Toolkit](https://developers.google.com/web-toolkit/)
- [CanJS](http://canjs.us)
- [Meteor](http://meteor.com)
- [Derby](http://derbyjs.com)
- [SocketStream](http://www.socketstream.org) + [jQuery](http://jquery.com)
- [Ext.js](http://www.sencha.com/products/extjs)
- [JavaScriptMVC](http://javascriptmvc.com)

- [RivetsJS](https://github.com/mikeric/rivets) declarative data-binding; framework agnostic

### Templates

- [Template Chooser](http://garann.github.com/template-chooser/)
- [Mustache](https://github.com/janl/mustache.js/)
- [Handlebars](http://handlebarsjs.com/) as featured in Ember
- [DustJS](http://akdubya.github.com/dustjs/) fast, streaming
- [HoganJS](http://twitter.github.com/hogan.js/) super lightweight, mustache-compatible
- [Jade Templates](https://github.com/visionmedia/jade) as featured in Express/Node
- [EJS](http://embeddedjs.com/) like ERB but for javascript
- [Google Closure Templates](http://code.google.com/closure/templates/)
- [Underscore Templates](http://documentcloud.github.com/underscore/#template)
- [MicroTemplating](http://ejohn.org/blog/javascript-micro-templating/)
- [ICanHazJS](http://icanhazjs.com/)
- [DomJs](https://github.com/medikoo/domjs)
- [DotJS](http://olado.github.com/doT/)
- [JsRender](http://borismoore.github.com/jsrender/demos/index.html)
- [Plates](https://github.com/flatiron/plates)
- [Transparency](http://leonidas.github.com/transparency/)


### Quizzes

- [JS Assessment](https://github.com/rmurphey/js-assessment/)
- [PerfectionKills JS Quiz](http://perfectionkills.com/javascript-quiz/)
- [So You Think You Know JavaScript](http://dmitry.baranovskiy.com/post/so-you-think-you-know-javascript)
- [Rebecca Murphey's Challenge](https://gist.github.com/576723)
- [NetTuts Quiz: jQuery Basics](http://net.tutsplus.com/articles/quizzes/nettuts-quiz-jquery-basics/?search_index=1)
- [NetTuts Quiz: JavaScript](http://net.tutsplus.com/articles/quizzes/nettuts-quiz-3-javascript/?search_index=3)

## CSS

- [CSS3.info](http://www.css3.info/): All you ever needed to know about CSS3
- [CSS3 Please](http://css3please.com/): The Cross-Browser CSS3 Rule Generator
- [Semantic Grid System](http://semantic.gs/): Page layout for tomorrow (SCSS, LESS, Stylus)

### Linters

- [Recess](http://twitter.github.com/recess/) Twitter's CSS hinter

### Preprocessors

- [Sass](http://sass-lang.com/): Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  - [SASS Tutorials](http://www.youtube.com/playlist?list=PL2CB1F80266E986EA&feature=plcp)
  - [Compass](http://compass-style.org/): Compass is an open-source CSS Authoring Framework.
    - [Compass Tutorials](http://www.youtube.com/playlist?list=PL45DD77A4CCA76ED3&feature=plcp)
    - [Compass Twitter Bootstrap](https://github.com/vwall/compass-twitter-bootstrap)
  - [Susy](http://susy.oddbird.net/):Responsive grids for Compass.
- [LESS](http://lesscss.org/): The dynamic stylsheet language
- [Stylus](http://learnboost.github.com/stylus/): Expressive, dynamic, robust CSS
  - [Nib](https://github.com/visionmedia/nib)

## Editors

### Sublime Text 2

Install and use [Sublime Text 2 Package Control](http://wbond.net/sublime_packages/package_control) for these and other plugins.

- ★ [ZenCoding](https://github.com/sublimator/ZenCoding): editor plugin for high-speed HTML coding and editing
- ★ [Markdown Preview](https://github.com/revolunet/sublimetext-markdown-preview): A simple plugin to help you preview your **markdown** files; works with _LiveReload_.
- ★ [LiveReload](https://github.com/dz0ny/LiveReload-sublimetext2): A web browser page reloading plugin.
- ★ [Sidebar Enhancements](https://github.com/titoBouzout/SideBarEnhancements): Enhancements to Sublime Text sidebar. Files and folders.
- ★ [SublimeREPL](https://github.com/wuub/SublimeREPL):run an interpreter inside ST2
- ★ [Git](https://github.com/kemayo/sublime-text-2-git): Plugin for some git integration
- ★ [SublimeLinter](https://github.com/SublimeLinter/SublimeLinter): Inline lint highlighting
- ★ [JsFormat](https://github.com/jdc0589/JsFormat): javascipt formatting plugin (prettifier)
- [Sublime Prefixr](http://wbond.net/sublime_packages/prefixr): run CSS through the [Prefixr](http://prefixr.com/) API
- [Search StackOverflow](https://github.com/ericmartel/Sublime-Text-2-Stackoverflow-Plugin): Simple search on Stack Overflow utility

### TextMate

- [Official Site](http://macromates.com/)
- [Source (on Github)](https://github.com/textmate/textmate)

### Vi/Vim

- [MacVim](http://code.google.com/p/macvim/): More mac-like than the command line
- [gVim](http://www.vim.org/download.php#pc): More PC-like? 

#### Themes (TextMate or SublimeText)

- [TextMate Theme](http://textmatetheme.com/)
- [NodeJS](http://textmatetheme.com/node-js): dark
- [Tomorrow](https://github.com/chriskempson/tomorrow-theme): multiple, dark/light
- [Django](https://code.djangoproject.com/attachment/wiki/TextMate/Django.tmTheme.zip): dark green

## Design

- [This Is Responsive](http://responsive.rga.com/): also see https://github.com/bradfrost/this-is-responsive.git
- [Starbucks Style Guide](http://www.starbucks.com/static/reference/styleguide/)

### Icons

- ★ [FontAwesome](http://fortawesome.github.com/Font-Awesome/): The iconic font designed for use with Twitter Bootstrap
- [IconSweets](http://iconsweets2.com/): a huge FREE icon set containing over a 1,000+ icon
- [Glyphicons](http://glyphicons.com/): designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices. (CC license)
- [Glyphish](http://www.glyphish.com/): Free set published under a Creative Commons Attribution license
- [FamFamFam](http://www.famfamfam.com/lab/icons/): oldie, but goodie
- [LED Icon Set](http://led24.de/iconset/): .png icons make a professionally looking small icon set and are totally free in commercial and open source apps / websites.
- [Fugue Icons](http://p.yusukekamiyamane.com/): 3,480 icons are included in PNG format (16x16 pixels) + bonus. (CC license)

### Typography

- [Beautiful Web Type](http://hellohappy.org/beautiful-web-type/): A showcase of the best typefaces from the Google web fonts directory.
- [FontBomb](http://fontbomb.ilex.ca/): To blow up other websites, drag and drop this link fontBomb to your favorites bar

#### Free Fonts

- [DaFont](http://www.dafont.com/)
- [FontSquirell](http://www.fontsquirrel.com/)

#### Web Font Services

- [typekit](https://typekit.com/): the easiest way to use real web fonts, by Adobe (paid, but free/limited version available)
- [Google web fonts](http://www.google.com/webfonts): free, easy to use, lots of fonts (500+)
- [WebFonts](http://www.webtype.com/)
- [FontDeck](http://fontdeck.com/)
- [FontSpring](http://www.fontspring.com/)
- [TypeFront](http://typefront.com/)
- [FontsLive](http://www.fontslive.com/)
- [WebINK](http://www.webink.com/)
- [typotheque](http://www.typotheque.com/webfonts)
- [kernest](http://www.kernest.com/)

### Textures

- [SubtlePatterns](http://subtlepatterns.com/): tons of really nice, subtle patterns, love this site!
- [Noise Texture Generator](http://www.noisetexturegenerator.com/)

#### Favicons

- [Piecon](http://lipka.github.com/piecon/): Pie charts in your favicon!

## Education

- [CodeAcademy](http://www.codecademy.com/): the easiest way to learn to code. It's interactive, fun, and you can do it with your friends.
- [NCZOnline: 'Computer Science'](http://www.nczonline.net/blog/tag/computer-science/): Nicholas C. Zakas presents computer science concepts using JavaScript as language of choice
- [Stanford OpenClassroom](http://openclassroom.stanford.edu/MainFolder/HomePage.php): Full courses. Short Videos. Free for everyone.

---

Shamelessly aggregated from the following resources:

- [A Baseline For Frontend Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/)
- [Brunch plugin wiki](https://github.com/brunch/brunch/wiki/Plugins)
- [Tooling & The Webapp Development Stack](https://gist.github.com/2713513): Notes from a talk by Paul Irish
- [DailyJS](http://dailyjs.com/): Excellent JavaScript blog
- [JavaScript Jabber Podcase](http://javascriptjabber.com/): Kick-ass JavaScript podcast
- [Smashing Magazine](http://www.smashingmagazine.com/): Best web-development magazine
- [Hipster Dev Stack](http://hipsterdevstack.tumblr.com/): A curated directory of artisanal development tools that we used to like before they went mainstream.
- [NetTutsPlus](http://net.tutsplus.com/): Web development tutorials, from beginner to advanced
- [Sublime Text Workflow That Beats Coda and Espresso](http://tarantsov.com/blog/2012/02/sublime-text-workflow-that-beats-coda-and-espresso/)

联系我们：verysource_com

CopyRight © 2008-2022 verySource.Com All Rights reserved.　京ICP备17048824号-1　京公网安备：11010502034788