study-dong / frontend-tools Goto Github PK

#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
• brunch
• grunt
  • lineman
  • yeoman
• codeKit
• liveReload
• stealJS
• anvil.js

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

######HTML Base/Boilerplate

• HTML5 Boilerplate
• 320 and up

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

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

######JS Helpers

• lo-dash
• string.js
• underscore
  • underscore.string
• sugar.js
• valentine
• platform.js
• modernizr
  • yepnope
• JSON3
• uri.js
• moments.js
• wait.js
• Numeral.js
• mousestrap

######CSS Helpers

• -prefix-free
• CSScomb

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

• require.js
  • almond
• cajon
• browserify
• curl
• shepherd-js
• UMD (Universal Module Definition)
• Inject
• volo

######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
  • Fuel UX
• wijmo
• YUI3 Widgets
• dojo dijits
• jQuery UI

######Test Runner's

• testem
• testacular

######User Automated Testing

• casperJS

######Testing Frameworks

• mocha
• buster.js
• qunit
• jasmine
• expect.js

######Remote DOM and JS Testing

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

######JS Performance Testing

• benchmark.js
• jsPerf — JavaScript performance playground

######JS Auto Documentation Tools

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

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

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

• coffeeScript
• dart
• roy
• ClojureScript
• TypeScript

######Languages Compliling to HTML

• jade
• haml

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

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

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

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

######Full Stack Application Structure/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
• CSS4-Selectors

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

• HTML5 & Friends, from Mozilla
• html5rocks
• HTML5 Cross Browser Polyfills
• HTML5 - Information and samples for HTML5 and related APIs
• HTML 5 Demos and Examples

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

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

######JavaScript Style/Conventions Guides

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

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

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

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