#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
######Browser Package Managers (checkout: Front-End Package Manager Comparison)
######CSS Base/Boilerplate
######CSS Frameworks (Comparison or Front-end CSS frameworks or CSS frontend frameworks collection)
######HTML Base/Boilerplate
######DOM Scripting (FYI dojo, yui, ext, qooxdoo all have DOM tools)
######JS Helpers
- lo-dash
- string.js
- underscore
- sugar.js
- craft.js
- valentine
- platform.js
- modernizr
- JSON3
- uri.js
- moment.js
- wait.js
- Numeral.js
- mousestrap
- accounting.js
######CSS Helpers
######Module/Script Loaders (Javascript Loaders Comparison)
- require.js
- cajon
- browserify
- curl
- shepherd-js
- UMD (Universal Module Definition)
- Inject
- volo
- controlJS
- JAL
- yepnope
- AXEL
######Templates
######UI Widgets (comparison)
- chico-ui
- google closure
- DHTMLX
- extJS
- kendoUI
- qooxdoo
- boostrap components & javascript
- wijmo
- YUI3 Widgets
- dojo dijits
- jQuery UI
- 99lime
- Zino UI
- JKIT
- workless
- w2ui
######Test Runners
######User Automated Testing
######Testing Frameworks
######Assertion Libraries
######Remote DOM and JS Testing
######JS Performance Testing
######JS Auto Documentation Tools
######CSS Auto Documentation Tools
######JS Quality Validators
######CSS Quality Validators
######JS Optimizer/Minification/Compression Tools
######CSS Optimizer/Minification/Compression Tools
######Languages Compiling to CSS
- Sass
- stylus
- less
- LESS Elements: Mixins library for LESS
- Semantic.gs: Semantic CSS grid system
######Languages Compiling to JS (http://altjs.org/)
######Languages Compliling to HTML
######Front End Application Structure (somewhat backend agnostic)
######Front End Application Structure (with backend opinions)
- derby (requires NodeJS)
- flatiron (requires NodeJS)
- batman.js (requires NodeJS)
- jsMVC (requires Java)
- montage (requires NodeJS)
######Full Stack Application Structure/Frameworks
######Frontend JavaScript Frameworks (aka Kitchen Sink Solutions, tools below provide a mixture of the things above)
##Reference/Guide/Pollyfill/Generator Tools
######Browser X Supports X
- http://caniuse.com/
- http://html5please.com/
- http://html5readiness.com/
- html5test.com
- http://www.browsersupport.net/
- http://css3test.com/
- Browserscope
- HTML5 & CSS3 Support
- CSS4-Selectors
- HTML5 - Information and samples for HTML5 and related APIs
- CSS3 - Information and samples
- JavaScript tests & Compatibility tables
- Cross Browser Handbook Knowledgebase
- JS-Compatibility-Table
######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
- html5shiv
- html5.js
######HTML5 & Friends Specs/Ref & Polyfills
- webbrowsercompatibility.com
- HTML5 & Friends, from Mozilla
- html5rocks
- HTML5 Cross Browser Polyfills
- HTML5 - Information and samples for HTML5 and related APIs
- HTML 5 Demos and Examples
- SVG
- Canvas
- webGL
######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 SPECIFICATIONS, from W3C
- http://cssvalues.com/
- CSS contents and browser compatibility
- CSS Compatibility and Internet Explorer
- HTML5 Cross Browser Polyfills (look for CSS)
- CSS Selectors from CSS4 till CSS1
- css3clickchart.com
- CSS selectors
######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 matic
######CSS Style/Conventions Guides
- kss
- SMACSS
- Google HTML/CSS Style Guide
- idiomatic-css
- Object-Oriented CSS
- WordPress.org UI Style Guide
- Starbucks Style Guide
- Github CSS styleguide
######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
- poly
- 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
- ECMA-262 6th Edition/Draft
######JavaScript Style/Conventions Guides
- Google JavaScript Style Guide
- Felix's Node.js Style Guide
- idiomatic.js
- Code Conventions for the JavaScript Programming Language
- jsbeautifier
- Airbnb JavaScript Style Guide
######General Front-end Practices/Conventions
##Performance
######Tools
- Charles
- webpagetest
- PageSpeed Insights Browser Extensions
- Chrome Developer Tools: Network Panel
- Chrome Developer Tools: Timeline Panel
- Chrome Developer Tools: Profiles Panel
- DOM Monster
- ImageOptim
######Rules/Practices
- Web Performance Best Practices
- Best Practices for Speeding Up Your Web Site
- High Performance Web Sites - 14 Rules for Faster-Loading Web Sites
- Even Faster Web Sites
##Online REPL's/editors/IDE's
######JS REPL
######JS focused editors
######Regular Expression editors
######HTML/CSS editors
######HTML/CSS/JS editors
######Browser IDE's
######JSON editors
##Browser Security
##Browser Hacks
##Backend services for frontend developers