Skip to content

Instantly share code, notes, and snippets.

@dariodiaz

dariodiaz/Frontend Tools

Created November 20, 2012 15:40
Show Gist options
  • Save dariodiaz/4118686 to your computer and use it in GitHub Desktop.
Save dariodiaz/4118686 to your computer and use it in GitHub Desktop.
Download ZIP
javascript, html, css: List of Frontend Tools
Raw
Frontend Tools
#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 SPEC­I­FI­CA­TIONS, 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