#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

• yeoman
• lumbar
• brunch
• grunt
• codeKit
• liveReload
• stealJS
• anvil.js
• volo

---

######Browser Package Managers (checkout: Front-End Package Manager Comparison)

• bower
• component
• ender
• jam

---

######CSS Base/Boilerplate

• normalize.css

---

######CSS Frameworks (Comparison)

• foundation
• bootstrap
• kube
• skeleton
• baseline

---

######HTML Base/Boilerplate

• HTML5 Boilerplate

---

######DOM Scripting

• jQuery
  • jQuery++
• zepto
• mooTools
• Enders The Jeesh
  • domReady
  • query
  • bonzo
  • bean

---

######JS Helpers

• lo-dash
• string.js
• underscore
  • underscore.string
• sugar.js
• valentine
• platform.js
• modernizr
  • yepnope
• JSON3

---

######CSS Helpers

• -prefix-free

---

######Module/Script Loaders (Javascript Loaders Comparison)

• require.js
  • almond
• cajon
• browserify
• curl
• shepherd-js

---

######Templates

• handlebars
• pure
• dust
• transparency
• plates
• mustache
• icanhaz
• hogan.js
• doT.js
• underscore

---

######UI Widgets (comparison)

• chico-ui
• google closure
• DHTMLX
• extJS
• kendoUI
• qooxdoo
• boostrap components & javascript
• wijmo
• YUI3 Widgets
• dojo dijits
• jQuery UI

---

######Testing Frameworks

• mocha
• buster.js
• casperJS

---

######Unit Tests

• qunit
• jasmine
• expect.js

---

######JS Performance Testing

• benchmark.js
• jsPerf — JavaScript performance playground

---

######JS Auto Documentation Tools

• yuiDoc
• docco
  • docco-husky
• jsduck
• jsdoc

---

######CSS Auto Documentation Tools

• kss
• styledocco/

---

######JS Quality Validators

• jslint
• jshint

---

######CSS Quality Validators

• csslint
• recess

---

######JS Optimizer/Minification/Compression Tools

• google closure compiler
• uglifyJS
• YUI Compressor

---

######CSS Optimizer/Minification/Compression Tools

• YUI Compressor

---

######Remote DOM and JS Testing

• browserstack
• browserling/testling
• selenium
• JS test driver

---

######Languages Compiling to CSS

• SASS
  • compass
• stylus
  • nib
• less

######Languages Compiling to JS

• coffeeScript
• dart
• roy
• ClojureScript
• TypeScript

---

######Languages Compliling to HTML

• jade
• haml

---

######Front End Application Frameworks (backend agnostic)

• backbone
  • marionette
  • chaplin
  • aura
  • thorax
• ember
• knockout
• canjs
• spine
• angularJS

---

######Front End Application Frameworks (with backend opinions)

• derby (requires NodeJS)
• flatiron (requires NodeJS)
• batman.js (requires NodeJS)
• jsMVC (requires Java)

---

######Full Stack Application Frameworks

• tower.js (requires NodeJS)
• wakanda
• meteor

---

######Frontend JavaScript Frameworks (aka Kitchen Sink Solutions, tools below provide a mixture of the things above)

• YUI3
• dojo
• extJS
• qooxdoo
• google closure

##Reference/Guide/Pollyfill/Generator Tools

######Browser X Supports X

• http://caniuse.com/
• http://html5please.com/
• http://html5readiness.com/
• http://www.browsersupport.net/
• http://css3test.com/
• Browserscope
• HTML5 & CSS3 Support

---

######HTML Language References & Polyfills

• HTML5 A technical specification for Web developers
• HTML Living Standard
• HTML5 A vocabulary and associated APIs for HTML and XHTML
• HTML 5 Reference A Web Developer’s Guide to HTML 5
• HyperText Markup Language (HTML), from Mozilla
• HTML5 differences from HTML4
• html5.js

---

######HTML5 & Friends Specs/Ref & Polyfills

• HTML5 & Friends, from Mozilla
• html5rocks
• HTML5 Cross Browser Polyfills

---

######DOM Specs/Ref & Polyfills

• DOM Living Standard
• DOM Parsing and Serialization Living Standard
• DOM4
• Document Object Model (DOM) Technical Reports, from W3C
• Document Object Model, from Microsoft
• Document Object Model, from Mozilla
• Event compatibility tables

---

######CSS Specs/Ref & Polyfills

• CSS, from Mozilla
• CSS SPEC­I­FI­CA­TIONS, from W3C
• http://cssvalues.com/
• CSS contents and browser compatibility
• CSS Compatibility and Internet Explorer
• HTML5 Cross Browser Polyfills (look for CSS)

---

######CSS Generators

• patternify
• Ultimate CSS Gradient Generator
• patternizer
• css3please.com
• cssarrowplease.com
• CSS Flexbox Please
• CSS3 GENERATOR
• css3generator.com
• css3maker.com
• CSS3 Sandbox
• The Shapes of Css

---

######CSS Style/Conventions Guides

• kss
• SMACCS
• Google HTML/CSS Style Guide
• idiomatic-css
• Object-Oriented CSS

---

######JavaScript ES5 Specs/Ref & Polyfills

• ECMA-262-5 in detail
• ECMAScript Language Specification
• Annotated ECMAScript 5.1
• ECMAScript 5 compatibility table
• Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document
• JavaScript Reference, from Mozilla
• The sample usage of ECMA 5 Features Implemented in V8
• Understanding JavaScript OOP
• JavaScript, aka. Web ECMAScript Living Standard
• es5-shim
• Augment.js

---

######JavaScript ES6 Specs/Ref & Polyfills

• ES6 what can be shimmed and what not
• ECMAScript 6 compatibility table
• Draft Specification for ES.next (Ecma-262 Edition 6)
• es6-shim

---

######JavaScript Style/Conventions Guides

• Google JavaScript Style Guide
• Felix's Node.js Style Guide
• idiomatic.js
• Code Conventions for the JavaScript Programming Language

---

######General Front-end Practices/Conventions

• isobar
• Being A Web Developer
• Front End Dev Guidelines