Landscaping (i.e. build stuff) With Frontend Tools
GitHub - codylindley/frontend-tools: Landscaping With Front-end Tools

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/

