Created
November 20, 2012 15:40
-
-
Save dariodiaz/4118686 to your computer and use it in GitHub Desktop.
javascript, html, css: List of Frontend Tools
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #Landscaping With Frontend Development Tools | |
| An opinionated list of tools for frontend (i.e. html, js, css) desktop/laptop (i.e. does not include tablet or phone yet) web development | |
| ##Coding Tools | |
| ######Workflow/Builds/Assemblers | |
| * [lumbar](http://walmartlabs.github.com/lumbar/) | |
| * [brunch](http://brunch.io/) | |
| * [grunt](http://gruntjs.com/) | |
| * [lineman](https://github.com/testdouble/lineman) | |
| * [yeoman](http://yeoman.io/) | |
| * [codeKit](http://incident57.com/codekit/) | |
| * [liveReload](http://livereload.com/) | |
| * [stealJS](http://javascriptmvc.com/docs.html#!stealjs) | |
| * [anvil.js](http://appendto.github.com/anvil.js/) | |
| --- | |
| ######Browser Package Managers (checkout: [Front-End Package Manager Comparison](https://github.com/wilmoore/frontend-packagers)) | |
| * [bower](http://twitter.github.com/bower/) | |
| * [component](https://github.com/component/component) | |
| * [ender](http://ender.no.de/) | |
| * [jam](http://jamjs.org/) | |
| --- | |
| ######CSS Base/Boilerplate | |
| * [normalize.css](http://necolas.github.com/normalize.css/) | |
| --- | |
| ######CSS Frameworks ([Comparison](http://responsive.vermilion.com/compare.php)) | |
| * [foundation](http://foundation.zurb.com/) | |
| * [bootstrap](http://twitter.github.com/bootstrap/) | |
| * [kube](http://kubeframework.com/) | |
| * [skeleton](http://www.getskeleton.com/) | |
| * [baseline](http://baselinecss.com/) | |
| * [grumby](http://gumbyframework.com) | |
| --- | |
| ######HTML Base/Boilerplate | |
| * [HTML5 Boilerplate](http://html5boilerplate.com/) | |
| * [320 and up](http://stuffandnonsense.co.uk/projects/320andup/) | |
| --- | |
| ######DOM Scripting (FYI dojo, yui, ext, qooxdoo all have DOM tools) | |
| * [jQuery](http://jquery.com/) | |
| * [jQuery++](http://jquerypp.com/) | |
| * [zepto](http://zeptojs.com/) | |
| * [mooTools](http://mootools.net/) | |
| * [DOMAssistant](http://www.domassistant.com/) | |
| * [Enders The Jeesh](https://github.com/ender-js/jeesh) | |
| * [domReady](https://github.com/ded/domready) | |
| * [query](https://github.com/ded/qwery) | |
| * [bonzo](https://github.com/ded/bonzo) | |
| * [bean](https://github.com/fat/bean) | |
| --- | |
| ######JS Helpers | |
| * [lo-dash](http://lodash.com/) | |
| * [string.js](http://stringjs.com/) | |
| * [underscore](http://underscorejs.org/) | |
| * [underscore.string](http://epeli.github.com/underscore.string/) | |
| * [sugar.js](http://sugarjs.com/) | |
| * [craft.js](http://craftjs.org/) | |
| * [valentine](https://github.com/ded/valentine) | |
| * [platform.js](https://github.com/bestiejs/platform.js#readme) | |
| * [modernizr](http://modernizr.com/) | |
| * [yepnope](http://yepnopejs.com/) | |
| * [JSON3](http://bestiejs.github.com/json3/) | |
| * [uri.js](https://github.com/medialize/URI.js) | |
| * [moments.js](http://momentjs.com/) | |
| * [wait.js](https://github.com/elving/wait) | |
| * [Numeral.js](http://numeraljs.com/) | |
| * [mousestrap](http://craig.is/killing/mice) | |
| --- | |
| ######CSS Helpers | |
| * [-prefix-free](http://leaverou.github.com/prefixfree/) | |
| * [CSScomb](http://csscomb.com) | |
| --- | |
| ######Module/Script Loaders ([Javascript Loaders Comparison](https://spreadsheets.google.com/spreadsheet/lv?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE&f=true&noheader=true&gid=2)) | |
| * [require.js](http://requirejs.org/) | |
| * [almond](https://github.com/jrburke/almond) | |
| * [cajon](https://github.com/requirejs/cajon) | |
| * [browserify](https://github.com/substack/node-browserify) | |
| * [curl](https://github.com/cujojs/curl) | |
| * [shepherd-js](http://xcambar.github.com/shepherd-js/) | |
| * [UMD (Universal Module Definition)](https://github.com/umdjs/umd) | |
| * [Inject](https://github.com/linkedin/inject) | |
| * [volo](http://volojs.org/) | |
| --- | |
| ######Templates | |
| * [handlebars](http://handlebarsjs.com/) | |
| * [pure](http://beebole.com/pure/) | |
| * [dust](http://akdubya.github.com/dustjs/) | |
| * [transparency](http://leonidas.github.com/transparency/) | |
| * [plates](https://github.com/flatiron/plates) | |
| * [mustache](http://mustache.github.com/) | |
| * [icanhaz](http://icanhazjs.com/) | |
| * [hogan.js](http://twitter.github.com/hogan.js/) | |
| * [doT.js](http://olado.github.com/doT/) | |
| * [underscore](http://underscorejs.org/#template) | |
| --- | |
| ######UI Widgets ([comparison](http://uiwidgets.t7interactive.com/)) | |
| * [chico-ui](http://chico-ui.com.ar/) | |
| * [google closure](http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/index.html) | |
| * [DHTMLX](http://dhtmlx.com/) | |
| * [extJS](http://www.sencha.com/products/extjs/examples/) | |
| * [kendoUI](http://www.kendoui.com/) | |
| * [qooxdoo](http://qooxdoo.org/) | |
| * [boostrap components & javascript](http://twitter.github.com/bootstrap/javascript.html) | |
| * [Fuel UX](http://exacttarget.github.com/fuelux/) | |
| * [wijmo](http://wijmo.com/) | |
| * [YUI3 Widgets](http://yuilibrary.com/yui/docs/guides/) | |
| * [dojo dijits](http://dojotoolkit.org/reference-guide/1.8/dojox/index.html) | |
| * [jQuery UI](http://jqueryui.com/) | |
| --- | |
| ######Test Runner's | |
| * [testem](https://github.com/airportyh/testem) | |
| * [testacular](http://vojtajina.github.com/testacular/) | |
| --- | |
| ######User Automated Testing | |
| * [casperJS](http://casperjs.org/) | |
| --- | |
| ######Testing Frameworks | |
| * [mocha](http://visionmedia.github.com/mocha/) | |
| * [buster.js](http://busterjs.org/) | |
| * [qunit](http://qunitjs.com/) | |
| * [jasmine](http://pivotal.github.com/jasmine/) | |
| * [expect.js](https://github.com/LearnBoost/expect.js) | |
| --- | |
| ######Assertion Libraries | |
| * [chai](http://chaijs.com/) | |
| * [should](https://github.com/visionmedia/should.js) | |
| * [expect](https://github.com/LearnBoost/expect.js) | |
| --- | |
| ######Remote DOM and JS Testing | |
| * [browserstack](http://www.browserstack.com/) | |
| * [browserling/testling](https://browserling.com/) | |
| * [selenium](http://seleniumhq.org/) | |
| * [JS test driver](http://code.google.com/p/js-test-driver/) | |
| --- | |
| ######JS Performance Testing | |
| * [benchmark.js](http://benchmarkjs.com/) | |
| * [jsPerf — JavaScript performance playground](http://jsperf.com/) | |
| --- | |
| ######JS Auto Documentation Tools | |
| * [yuiDoc](http://yui.github.com/yuidoc/) | |
| * [docco](http://jashkenas.github.com/docco/) | |
| * [docco-husky](https://github.com/mbrevoort/docco-husky) | |
| * [jsduck](https://github.com/senchalabs/jsduck) | |
| * [jsdoc](http://code.google.com/p/jsdoc-toolkit/) | |
| * [node-jsdoc-toolkit](https://github.com/p120ph37/node-jsdoc-toolkit) | |
| * [dox](https://github.com/visionmedia/dox) | |
| * [markdox](https://github.com/cbou/markdox) | |
| --- | |
| ######CSS Auto Documentation Tools | |
| * [kss](https://github.com/kneath/kss) | |
| * [styledocco/](http://jacobrask.github.com/styledocco/) | |
| --- | |
| ######JS Quality Validators | |
| * [jslint](http://www.jslint.com/) | |
| * [jshint](http://www.jshint.com/) | |
| --- | |
| ######CSS Quality Validators | |
| * [csslint](http://csslint.net/) | |
| * [recess](http://twitter.github.com/recess) | |
| --- | |
| ######JS Optimizer/Minification/Compression Tools | |
| * [google closure compiler](https://developers.google.com/closure/compiler/) | |
| * [uglifyJS](https://github.com/mishoo/UglifyJS) | |
| * [Esprima](http://esprima.org/index.html) | |
| --- | |
| ######CSS Optimizer/Minification/Compression Tools | |
| * [ycssmin](https://github.com/yui/ycssmin) | |
| * [CSSO](https://github.com/css/csso) | |
| --- | |
| ######Languages Compiling to CSS | |
| * [Sass](http://sass-lang.com/) | |
| * [compass](http://compass-style.org) | |
| * [inuit.css](https://github.com/csswizardry/inuit.css) | |
| * [Bourbon](https://github.com/thoughtbot/bourbon): Mixins library for Sass | |
| * [Neat](https://github.com/thoughtbot/neat): Semantic CSS grid framework | |
| * [stylus](http://learnboost.github.com/stylus/) | |
| * [nib](http://visionmedia.github.com/nib/) | |
| * [less](http://lesscss.org) | |
| * [LESS Elements](http://lesselements.com/): Mixins library for LESS | |
| * [Semantic.gs](http://semantic.gs/): Semantic CSS grid system | |
| ######Languages Compiling to JS ([http://altjs.org/](http://altjs.org/)) | |
| * [coffeeScript](http://coffeescript.org/) | |
| * [dart](http://www.dartlang.org/) | |
| * [roy](https://github.com/pufuwozu/roy) | |
| * [ClojureScript](https://github.com/clojure/clojurescript) | |
| * [TypeScript](http://www.typescriptlang.org/) | |
| --- | |
| ######Languages Compliling to HTML | |
| * [jade](http://jade-lang.com/) | |
| * [haml](https://github.com/haml/haml) | |
| --- | |
| ######Front End Application Structure (somewhat backend agnostic) | |
| * [backbone](http://backbonejs.org/) | |
| * [marionette](http://marionettejs.com) | |
| * [chaplin](http://chaplinjs.github.com/) | |
| * [aura](http://addyosmani.github.com/aura/) | |
| * [thorax](http://walmartlabs.github.com/thorax/) | |
| * [ember](http://emberjs.com/) | |
| * [knockout](http://knockoutjs.com/) | |
| * [canjs](http://canjs.us/) | |
| * [spine](http://spinejs.com/) | |
| * [angularJS](http://angularjs.org/) | |
| * [maria](http://peter.michaux.ca/maria/) | |
| --- | |
| ######Front End Application Structure (with backend opinions) | |
| * [derby](http://derbyjs.com/) (requires NodeJS) | |
| * [flatiron](http://flatironjs.org/) (requires NodeJS) | |
| * [batman.js](http://batmanjs.org/) (requires NodeJS) | |
| * [jsMVC](http://javascriptmvc.com/) (requires Java) | |
| --- | |
| ######Full Stack Application Structure/Frameworks | |
| * [tower.js](http://towerjs.org/) (requires NodeJS) | |
| * [wakanda](http://www.wakanda.org/) | |
| * [meteor](http://www.meteor.com/) | |
| --- | |
| ######Frontend JavaScript Frameworks (aka Kitchen Sink Solutions, tools below provide a mixture of the things above) | |
| * [YUI3](http://yuilibrary.com/projects/yui3/) | |
| * [dojo](http://dojotoolkit.org/extjs) | |
| * [extJS](http://www.sencha.com/products/extjs/) | |
| * [qooxdoo](http://qooxdoo.org/) | |
| * [google closure](https://developers.google.com/closure/) | |
| ##Reference/Guide/Pollyfill/Generator Tools | |
| ######Browser X Supports X | |
| * [http://caniuse.com/](http://caniuse.com/) | |
| * [http://html5please.com/](http://html5please.com/) | |
| * [http://html5readiness.com/](http://html5readiness.com/) | |
| * [http://www.browsersupport.net/](http://www.browsersupport.net/) | |
| * [http://css3test.com/](http://css3test.com/) | |
| * [Browserscope](http://www.browserscope.org/) | |
| * [HTML5 & CSS3 Support](http://www.findmebyip.com/litmus/) | |
| * [CSS4-Selectors](http://css4-selectors.com/selectors/) | |
| --- | |
| ######HTML Language References & Polyfills | |
| * [HTML5 A technical specification for Web developers](http://developers.whatwg.org/) | |
| * [HTML Living Standard](http://www.whatwg.org/specs/web-apps/current-work/multipage/) | |
| * [HTML5 A vocabulary and associated APIs for HTML and XHTML](http://www.w3.org/TR/html5/) | |
| * [HTML 5 Reference A Web Developer’s Guide to HTML 5](http://dev.w3.org/html5/html-author/) | |
| * [HyperText Markup Language (HTML), from Mozilla](https://developer.mozilla.org/en-US/docs/HTML) | |
| * [HTML5 differences from HTML4](http://dev.w3.org/html5/html4-differences/) | |
| * [html5shiv](https://github.com/aFarkas/html5shiv) | |
| * [html5.js](https://github.com/bestiejs/html5.js) | |
| --- | |
| ######HTML5 & Friends Specs/Ref & Polyfills | |
| * [HTML5 & Friends, from Mozilla](https://developer.mozilla.org/en-US/docs/HTML/HTML5) | |
| * [html5rocks](http://www.html5rocks.com/en/) | |
| * [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) | |
| * [HTML5 - Information and samples for HTML5 and related APIs](http://robertnyman.com/html5/) | |
| * [HTML 5 Demos and Examples](http://html5demos.com/) | |
| * [SVG](https://developer.mozilla.org/en-US/docs/SVG) | |
| * [SVG-edit browser editor](http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html) | |
| * [D3.js](http://d3js.org/) | |
| * [raphaeljs](http://raphaeljs.com/) | |
| * [bonsaijs.org](http://bonsaijs.org/) | |
| * [Canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas) | |
| * [paper.js](http://paperjs.org/) | |
| * [fabric.js](http://fabricjs.com/) | |
| * [kineticjs](http://kineticjs.com/) | |
| * [webGL](https://developer.mozilla.org/en-US/docs/WebGL) | |
| * [three.js](http://mrdoob.github.com/three.js/) | |
| * [The X Toolkit](https://github.com/xtk/X#readme) | |
| --- | |
| ######DOM Specs/Ref & Polyfills | |
| * [DOM Living Standard](http://dom.spec.whatwg.org/) | |
| * [DOM Parsing and Serialization Living Standard](http://domparsing.spec.whatwg.org/) | |
| * [DOM4](http://www.w3.org/TR/dom/) | |
| * [Document Object Model (DOM) Technical Reports, from W3C](http://www.w3.org/DOM/DOMTR) | |
| * [Document Object Model, from Microsoft](http://msdn.microsoft.com/en-us/library/ie/hh772384\(v=vs.85\).aspx) | |
| * [Document Object Model, from Mozilla](https://developer.mozilla.org/en-US/docs/DOM) | |
| * [Event compatibility tables](http://www.quirksmode.org/dom/events/index.html) | |
| --- | |
| ######CSS Specs/Ref & Polyfills | |
| * [CSS, from Mozilla](https://developer.mozilla.org/en-US/docs/CSS) | |
| * [CSS SPECIFICATIONS, from W3C](http://www.w3.org/Style/CSS/current-work) | |
| * [http://cssvalues.com/](http://cssvalues.com/) | |
| * [CSS contents and browser compatibility](http://www.quirksmode.org/css/contents.html) | |
| * [CSS Compatibility and Internet Explorer](http://msdn.microsoft.com/en-us/library/cc351024\(VS.85\).aspx) | |
| * [HTML5 Cross Browser Polyfills (look for CSS)](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) | |
| * [CSS Selectors from CSS4 till CSS1](http://css4-selectors.com/selectors/) | |
| --- | |
| ######CSS Generators | |
| * [patternify](http://www.patternify.com/) | |
| * [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) | |
| * [patternizer](http://patternizer.com/) | |
| * [css3please.com](http://css3please.com/) | |
| * [cssarrowplease.com](http://cssarrowplease.com/) | |
| * [CSS Flexbox Please](http://demo.agektmr.com/flexbox/) | |
| * [CSS3 GENERATOR](http://www.css3.me/) | |
| * [css3generator.com](http://css3generator.com/) | |
| * [css3maker.com](http://www.css3maker.com/) | |
| * [CSS3 Sandbox](http://westciv.com/tools/index.html) | |
| * [The Shapes of Css](http://coderwall.com/p/xrxaxa) | |
| --- | |
| ######CSS Style/Conventions Guides | |
| * [kss](https://github.com/kneath/kss#readme) | |
| * [SMACSS](http://smacss.com/) | |
| * [Google HTML/CSS Style Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Declaration_order) | |
| * [idiomatic-css](https://github.com/necolas/idiomatic-css) | |
| * [Object-Oriented CSS](http://oocss.org/) | |
| --- | |
| ######JavaScript ES5 Specs/Ref & Polyfills | |
| * [ECMA-262-5 in detail](http://dmitrysoshnikov.com/ecmascript/es5-chapter-0-introduction/) | |
| * [ECMAScript Language Specification](http://ecma-international.org/ecma-262/5.1/) | |
| * [Annotated ECMAScript 5.1](http://es5.github.com/) | |
| * [ECMAScript 5 compatibility table](http://kangax.github.com/es5-compat-table/) | |
| * [Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document](http://msdn.microsoft.com/en-us/library/ff960769.aspx) | |
| * [JavaScript Reference, from Mozilla](https://developer.mozilla.org/en-US/docs/JavaScript/Reference) | |
| * [The sample usage of ECMA 5 Features Implemented in V8](https://gist.github.com/1073547) | |
| * [Understanding JavaScript OOP](http://killdream.github.com/blog/2011/10/understanding-javascript-oop/) | |
| * [JavaScript, aka. Web ECMAScript Living Standard](http://mathias.html5.org/specs/javascript/) | |
| * [es5-shim](https://github.com/kriskowal/es5-shim/) | |
| * [poly](https://github.com/cujojs/poly) | |
| * [Augment.js](http://augmentjs.com/) | |
| --- | |
| ######JavaScript ES6 Specs/Ref & Polyfills | |
| * [ES6 what can be shimmed and what not](https://gist.github.com/1665192) | |
| * [ECMAScript 6 compatibility table](http://kangax.github.com/es5-compat-table/es6/) | |
| * [Draft Specification for ES.next (Ecma-262 Edition 6)](http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts) | |
| * [es6-shim](https://github.com/paulmillr/es6-shim) | |
| * [ECMA-262 6th Edition/Draft](http://people.mozilla.org/~jorendorff/es6-draft.html) | |
| --- | |
| ######JavaScript Style/Conventions Guides | |
| * [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) | |
| * [Felix's Node.js Style Guide](http://nodeguide.com/style.html) | |
| * [idiomatic.js](https://github.com/rwldrn/idiomatic.js) | |
| * [Code Conventions for the JavaScript Programming Language](http://javascript.crockford.com/code.html) | |
| * [jsbeautifier](http://jsbeautifier.org/) | |
| * [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) | |
| --- | |
| ######General Front-end Practices/Conventions | |
| * [isobar](http://isobar-idev.github.com/code-standards/) | |
| * [Being A Web Developer](http://www.yellowshoe.com.au/standards/) | |
| * [Front End Dev Guidelines](http://taitems.github.com/Front-End-Development-Guidelines/) | |
| ##Performance | |
| ######Tools | |
| * [Charles](http://www.charlesproxy.com/) | |
| * [webpagetest](http://www.webpagetest.org/) | |
| * [PageSpeed Insights Browser Extensions](https://developers.google.com/speed/pagespeed/) | |
| * [Chrome Developer Tools: Network Panel](https://developers.google.com/chrome-developer-tools/docs/network) | |
| * [Chrome Developer Tools: Timeline Panel](https://developers.google.com/chrome-developer-tools/docs/timeline) | |
| * [Chrome Developer Tools: Profiles Panel](https://developers.google.com/chrome-developer-tools/docs/profiles) | |
| * [DOM Monster](http://mir.aculo.us/dom-monster/) | |
| * [ImageOptim](http://imageoptim.com/) | |
| ######Rules/Practices | |
| * [Web Performance Best Practices](https://developers.google.com/speed/docs/best-practices/rules_intro) | |
| * [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html) | |
| * [High Performance Web Sites - 14 Rules for Faster-Loading Web Sites](http://stevesouders.com/hpws/) | |
| * [Even Faster Web Sites](http://stevesouders.com/efws/) | |
| ##Online REPL's/editors/IDE's | |
| ######JS REPL | |
| * [repl.it](http://repl.it/) | |
| * [jsconsole.com](http://jsconsole.com/) | |
| ######JS focused editors | |
| * [jsfiddle](http://jsfiddle.net/) | |
| * [jsbin](http://jsbin.com/) | |
| ######Regular Expression editors | |
| * [Scriptular](http://scriptular.com/) | |
| * [regexr](http://gskinner.com/RegExr/) | |
| * [refiddle](http://refiddle.com/) | |
| ######HTML/CSS editors | |
| * [dabblet](http://dabblet.com/) | |
| * [cssdesk](http://cssdesk.com/) | |
| ######HTML/CSS/JS editors | |
| * [tinker.io](https://tinker.io/) | |
| * [tinkerbin](http://tinkerbin.com/) | |
| * [Plunker](https://github.com/filearts/plunker) | |
| * [cssdeck](http://cssdeck.com/) | |
| * [codepen](http://codepen.io/) | |
| ######Browser IDE's | |
| * [koding](https://koding.com/) | |
| * [cloud9 IDE](https://c9.io/) | |
| ##Backend services for frontend developers | |
| * [firebase](https://www.firebase.com/index.html) | |
| * [parse](https://www.parse.com) | |
| * [singly](https://singly.com/) | |
| * [cloud CMS](https://www.cloudcms.com/) | |
| * [kinvey](http://www.kinvey.com/) | |
| * [stackmob](http://www.stackmob.com/) | |
| * [cloudmine](https://cloudmine.me/) | |
| * [kumulos](http://www.kumulos.com/) | |
| * [deployd](http://deployd.com/) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment