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
SSL, OAuth, Sandbox, XSS, CSRF, CORS | Security
SEO | Responsiveness, CDN | 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, Foundation | 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
NPM, Bower | Package
JSLint, JSHint, jscs, Closure Linter, SonarQube | Quality
YSlow, jsPerf, Speed Tracer, Dynatrace, PageSpeed | Perf
Developer Tools , Firebug, Dragonfly, Fiddler | Debug
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, Emacs, Brackets, Light Table, Visual Studio | Editors
Cookie, Local Cache, Session Storage, Local Storage, Components (extensions, plugins...), Resources (images, fonts, videos...)|Runtime
Chakra (IE), V8 (Chrome), SpiderMonkey (Firefox), Nitro (Safari), V8 (Opera), (Chakra) Edge | JavaScript Engine
Trident (IE), Blink / (prev. WebKit) (Chrome), Gecko (Firefox), WebKit (Safari), Blink / (prev. Presto) (Opera), EdgeHTML (Edge) | Rendering Engine
DOM, Element, Attribute | Prototype, Scope, Closure, JSON, JSONP, AJAX | Selector, Priority, Specificity, Box Model | Core Concepts
W3C (HTML, CSS£¬ XHTML, XML, JSON...), ECMAScript (JavaScript), HTML5/CSS3 | Standards
HTML (HyperText Markup Language) | JavaScript | CSS (Cascading Style Sheets) | The 3 Pillars
Compression, Encryption, Minification, Server Push | HTTP/2
URI, Session, Authentication, Request method (GET, POST, HEAD, PUT, DELETE, TRACE, OPTIONS, PATCH, CONNECT), Request (Headers, Body), Response (Headers, Body), Status Code (2xx, 3xx, 4xx, 5xx ...) | HTTP/1.1
Internet Explorer, Chrome, Firefox, Safari, Opera, Edge, Netscape ;-) | Browser
OS