---

THIS IS DEPREICATED CONTENT

This content has evolved into a book called "Front-end Handbook": https://www.gitbook.com/book/frontendmasters/front-end-handbook/details

---

#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/Task-runners/Dev Opts

• bud
• lumbar
• brunch
• grunt
  • lineman
  • yeoman
  • Takeoff
• gulpjs
• broccoli
• mimosa
• codeKit
• liveReload
• stealJS
• anvil.js
• modjs
• nodefront
• AUTOMATON
• volo
• roots
• middleman
• fb-flo

---

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

• bower
• component
• ender
• jam
• volo
• jspm.io

---

######CSS Base/Boilerplate

• normalize.css

---

######CSS Frameworks (Comparison or Front-end CSS frameworks)

• foundation
• bootstrap
• HTML KickStart
• kube
• skeleton
• baseline
• gumby
• Groundwork
• topcoat
• purecss
• tuktuk
• Metro UI CSS
• Flat UI Kit
• workless
• 99lime
• ink
• Semantic UI
• uikit
• cascade-framework
• minfwk
• layers

---

######HTML Base/Boilerplate

• HTML5 Boilerplate
• Rock Hammer
• html5bones
• dCodes

---

######Frontend HTML/CSS/JS Base/Boilerplate

• Headstart
• google Web Starter Kit

---

######DOM Scripting (FYI dojo, yui, ext, qooxdoo all have DOM tools)

• jQuery
  • jQuery++
• zepto
• tire
• mooTools
• DOMAssistant
• Enders The Jeesh
  • domReady
  • query
  • bonzo
  • bean
• rye
• dom

---

######JS Helpers

• lo-dash
• fn.js
• lazy.js
• string.js
• boiler.js
• underscore
  • underscore.string
• sugar.js
• craft.js
• valentine
• platform.js
• modernizr
  • yepnope
• JSON3
• uri.js
• moment.js
• wait.js
• Numeral.js
• accounting.js
• Upcast
• taffydb
• Catiline.js
• XRegExp
• duckyjs
• mathjs
• spectra.js

---

######Keyboard Helpers

• keys.js
• mousestrap
• Keypress

---

######Event (mouse/touch/pointer) Helpers

• pointer.js
• thumbs.js
• Hammer.js
• Event.js
• DeepTissue.js

---

######CSS Helpers

• typecsset
• -prefix-free
• CSScomb
• Autoprefixer

---

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

• require.js
  • almond
• cajon
• browserify
• curl
• shepherd-js
• UMD (Universal Module Definition)
  • UMD-inspired Module Boilerplate
• Inject
• controlJS
• JAL
• yepnope
• AXEL
• lmd
• LazyJS
• jspm.io
• lazy.js
• webpack
• systemjs

---

######Templates (template chooser)

• handlebars
• pure
• dust
• transparency
• plates
• mustache
  • hogan.js
• icanhaz
• doT.js
• underscore
• mold
• nunjucks
• Swig
• jtmpl
• teddy

---

######UI Widgets (comparison)

• chico-ui
• google closure
• DHTMLX
• extJS
• kendoUI
• qooxdoo
• bootstrap components & javascript
  • Fuel UX
• wijmo
• YUI3 Widgets
• dojo dijits
• jQuery UI
• Zino UI
• JKIT
• w2ui
• basis.js
• webix
• alloyui
• JavaScript (from sync fusion)
• jQWidgets
• formstone
• winJS
• assets.cms.gov
• zippy ui

---

######Testing Frameworks

• testem
• Karma
• intern
• buster.js
• prova

---

######Browser Testing & Browser Automated Testing & Browser Screen Captures

• casperJS
• Selenium
• phantomJS
• saucelabs
• browserstack
• browserling
• DalekJS
• testling-ci
• crossbrowsertesting.com
• nightwatch.js
• Protractor

---

######Tests Runners

• mocha
• qunit
• jasmine
• jest
• jstest

---

######Test spies, stubs and mocks

• sinon.js

---

######Code Coverage

• istanbul
• blanket.js
• coveralls

---

######Code Complexity & Reports

• jscomplexity
• plato

---

######Assertion Libraries

• chai
• should
• expect

---

######JS Performance Testing

• benchmark.js
• jsPerf — JavaScript performance playground

---

######JS Auto Documentation Tools

• yuiDoc
• docco
  • docco-husky
• jsduck
• jsdoc
• node-jsdoc-toolkit
• dox
  • markdox
  • dox-foundation

---

######CSS Auto Documentation Tools (THE Style Guide GUIDE)

• kss
• styledocco/

---

######JS Quality Validators

• jslint
• jshint
• JSLint Error Explanations
• jscomplexity
• eslint
• node-jscs

---

######CSS Quality Validators

• csslint
• recess

---

######HTML Quality Validators

• html-inspector
• htmlHint

---

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

• google closure compiler
• uglifyJS
• Esprima

---

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

• ycssmin
• CSSO

---

######Languages Compiling to CSS

• Sass
  • compass
  • inuit.css
  • Bourbon: Mixins library for Sass
  • Neat: Semantic CSS grid framework
• stylus
  • nib
• less
  • LESS Elements: Mixins library for LESS
  • Semantic.gs: Semantic CSS grid system
• Absurd
• myth

######Languages Compiling to JS (http://altjs.org/)

• coffeeScript
• dart
• roy
• ClojureScript
• TypeScript

---

######Languages Compiling to HTML

• jade
• haml
• blade
• markdown
• slim

---

######Routers

• crossroads.js
• davis.js
• Routie
• director
• Finch.js
• page.js

---

######Front End Application Structure (somewhat backend agnostic)

• backbone
  • marionette
  • chaplin
  • aura
  • thorax
• ember
• knockout
• canjs
• spine
• angularJS
  • ngmodules.org
• maria
• sparky.js
• hoodie
• lure.js
• riot.js
• vue.js
• mithril

---

######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

• wakanda
• meteor

---

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

• YUI3
• dojo
• extJS
• qooxdoo
• google closure

######Front End Application monitoring

• Caliper

---

##Reference/Guide/Polyfill/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
• webbrowsercompatibility

---

######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
  • SVG-edit browser editor
  • D3.js
  • raphaeljs
  • bonsaijs.org
  • snapsvg.io
• Canvas
  • paper.js
  • fabric.js
  • kineticjs
• webGL
  • three.js
  • The X Toolkit

---

######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 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
• extractcss.com

---

######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
• General CSS notes, advice and guidelines
• yelp 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
• ECMAScript Support Matrix

---

######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
• Meteor Style Guide

---

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

• isobar
• Being A Web Developer
• Front End Dev Guidelines
• HTML and CSS code guide

##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
• google web fundamentals

##Online REPL's/editors/IDE's

######JS REPL

• repl.it
• jsconsole.com
• codeboot.org
• continuum

######JS focused editors

• jsfiddle
• jsbin
• es6fiddle

######Regular Expression editors

• Scriptular
• regexr
• refiddle
• RegexPlanet

######HTML/CSS editors

• dabblet
• cssdesk

######HTML/CSS/JS editors

• tinker.io
• tinkerbin
• Plunker
• cssdeck
• codepen
• liveweave
• codemagic.gr

######Execute/Test live code

• runnable

######Browser IDE's

• koding
• cloud9 IDE
• action.io

######JSON editors

• jsoneditoronline.org
• JSON Tinker
• JSONmat

##Browser Security

• Browser Security Handbook
• DOMPurify
• html5sec.org
• js-xss

##Browser Hacks

• browserhacks.com

##API first, CMS Service

• contentful
• prismic.io

##Backend services for front-end developers

• firebase
• pusher
• jaystack
• parse
• singly
• cloud CMS
• kinvey
• stackmob
• cloudmine
• kumulos
• deployd
• backlift.com
• hull.io
• stormpath.com
• dreamfactory
• userapp.i
• goinstant
• myjson.com

##API tools

• apiary
• api engine
• Swagger
• postman
• apidocjs
• apiblueprint

##API Mocking

• mocky.io
• FillText.com
• JSONPlaceholder
• faker.js
• json-generator
• caddis
• dyson
• json-server

##Image Mocking

• placekitten
• PLACEHOLD.IT
• hhhhold.com

##JSON Query Tools

• TaffyDB
• linq.js
• json:select()
• JSONiq
• json-query
• SpahQL
• json-mask
• objeq

##JSON Validation Tools

• SCHEMA-INSPECTOR

##Front-end DB's

• pouchdb
• Web Storage
• Indexed Database API
• lokiJS
• underscore.db
• Based JS

##Catalog/Collection of JavaScript Libs and Tools

• jster
• thetoolbox.cc
• javascriptoo.com
• microjs.com
• JSDB.IO

##Static Site Generators

• http://staticsitegenerators.net/