web front end stack: browsers, platforms, libraries, frameworks, tools etc.
Have you ever wondered:
- what technologies web front end really includes?
- how many do I possess?
I could not find a really comprehensive diagram that shows the web front end technology stack, so I come up with my own version.
There might be issues here and there, like the category, the individual ones, but the beautity is you can modify it as you want.
Sencha, jQueryMobile, Kendo UI, Jo, WinkUI, DojoMobile, Lungo | Mobile UI
PhoneGap, Cordova, Appcelerator Titanium, appMobi, trigger.io | Platforms
CoffeeScript, TypeScript, Dart, LiveScript, ClojureScript | Intermediate Languages
Sandbox, XSS | Security
SEO | Responsiveness | Practices
Normalize, Reset | Modernisation
Markdown, Handlebars, Haml, Slim Ruby, Jade | Template
SCSS, LESS (Hat), SASS (Compass, Bourbon, Gumby), Stylus (Nib), ... | CSS Pre-processors
Bootstrap, ZURB, YUI, Ext JS, Toast, YAML, ResponsiveGS, Semantic UI | UI framework
AngularJS, Backbone, Knockout, Ember, React, polymer, flux, Dojo, Deft.js | JavaScript framework
jQuery, Prototype, Zepto, MooTools,Underscore, RequireJS | JavaScript base library
QUnit, Jasmine, Mocha, Selenium, WebDriverJS, Nightwatch.js, Phantom.js, Protractor, Chai, Sinon, Karma | Test
JSLint, JSHint, jscs, Closure Linter, SonarQube | Quality
Developer Tools , Firebug | Debug
NPM, Bower | Package
Grunt, Gulp, Brunch, Yeoman, Lineman, Cake, Broccoli, webpack, browserify | Build
Minification, Compilation, Concatenation,Uglification, Image Optimization, Unit Testing | Build Tasks
Sublime Text, WebStorm, Atom, Vim, Brackets, Light Table | Editor
Chakra (IE), V8 (Chrome), SpiderMonkey (Firefox), Nitro (Safari), V8 (Opera), (??) Edge | JavaScript Engine
Triddent (IE), Blink (formerly WebKit, Chrome), Gecko (Firefox), WebKit (Safari), Blink (formerly Presto, Opera), EdgeHTML (Edge) | Rendering Engine
DOM, Element, Attribute | Prototype, Scope, Closure, JSON | Selector, Priority, Specificity, Box Model | Core Concepts
HTML (HyperText Markup Language) | JavaScript | CSS (Cascading Style Sheets) | The 3 Pillars
Internet Explorer, Chrome, Firefox, Safari, Opera, Edge, Netscape ;-) | Browser
OS