Overflow Stack

The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): http://overflowstack.github.io

Localization

中文: https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md

Español: https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md

WebFrontEndStack

Web front-end stack: browsers, platforms, libraries, frameworks, tools etc.


Generate image yourself

Prepare for environment

You should have Visual Studio 2010+ installed in Windows.

Install nodejs. (Shoule be >= iojs 1.8.0)

Install Phantomjs.

Install Python 2.7.

npm install

If the error occurs, you can check the dependence of phantomjs-node, node-gyp.

Run commands

npm start for start a server to open the html directly.

npm run build for generate the image.

Options

-h, --help Display help message. -p, --port number (Default: 3000) Set the port what express listening. -ues, --update_existed_stargazers (Default: false) Update project's stargazers including existed. --phantomjs The task to generate the image. --readme The task to update readme. --updatestargazers The task to update the count of the stargazers.

What and why?

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 beauty is you can modify it as you want.

You can have a graphical preview here (use mouse to move / zoom):

https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm

The Web Front End Stack

Web Front End Browser Internet ExplorerChromeFirefoxSafariOperaEdgeNetscape ;-)Protocol HTTP/1.1 URISessionAuthenticationRequestResponseHTTP/2 CompressionMinificationServer PushWebSocketThe 3 Pillars HTML (HyperText Markup Language)CSS (Cascading Style Sheets)JavaScriptStandards W3C HTMLCSSXHTMLXMLCore Concepts HTML DOMElementAttributeJavaScript PrototypeScopeClosureJSON (JavaSript Object Notation)AJAX (Asynchronous JavaScript and XML)CSS SelectorPrioritySpecificityBox ModelRendering Engine Trident (IE)Blink / prev. WebKit (Chrome)Gecko (Firefox)WebKit (Safari)Blink / prev. Presto (Opera)EdgeHTML (Edge)JavaScript Engine JScript (IE8- / ASP)Chakra (IE9+ / Edge)V8 (Chrome / Opera / Nodejs / MongoDB) [GitHub]SpiderMonkey (Firefox)JavaScriptCore (Safari)Runtime CookieLocal CacheSession StorageLocal StorageComponents ExtensionsPluginsResources ImagesIconsFontsAudiosVideosEditors Sublime TextWebStormAtom [GitHub]VimEmacsBrackets [GitHub]Light Table [GitHub]Visual StudioVisual Studio Code (Linux & Mac) [GitHub]Dreamweaver ;-)FrontPage / SharePoint Designer ;-)Build Tasks MinificationCompilationConcatenationUglificationImage OptimizationUnit TestingBuild Tools Grunt [GitHub]Gulp [GitHub]Brunch [GitHub]YeomanBroccoli [GitHub]Debug Developer ToolsFirebug [GitHub]Base Tools Node.js [GitHub]Phantom.js [GitHub]SpiderMonkeyQuality JSLint [GitHub]JSHint [GitHub]jscs [GitHub]Closure LinterPackage npm [GitHub]Bower [GitHub]yarn [GitHub]Test Tools QUnit [GitHub]Jasmine [GitHub]Mocha [GitHub]Selenium [GitHub]WebDriverIO [GitHub]ProtractorChai [GitHub]Sinon.JS [GitHub]Karma [GitHub]nodeunit [GitHub]tape [GitHub]nightmare [GitHub]Enzyme [GitHub]Composite Sauce LabsBrowser StackBrowser ShotsBrowserlingBrowser SandboxCross Browser TestingBrowseraSortSiteFrameworks / Libraries JavaScript base library jQuery [GitHub]Prototype [GitHub]Zepto [GitHub]MooTool [GitHub]Modular ES6 ModuleCommonJS webpack [GitHub]browserify [GitHub]AMD RequireJS [GitHub]UMD umd [GitHub]JavaScript Framework AngularJS [GitHub]Backbone [GitHub]Knockout [GitHub]Ember [GitHub]React [GitHub]polymer [GitHub]Deft.js [GitHub]Vue [GitHub]Riot [GitHub]UI framework Bootstrap [GitHub]Semantic UI [GitHub]Foundation [GitHub]Material UI [GitHub]WinJS [GitHub]Pure [GitHub]Amaze UI [GitHub]Onsne UI [GitHub]WebSocket Socket.io [GitHub]web-socket-js [GitHub]Data Visualization D3 [GitHub]Echarts [GitHub]HighCharts [GitHub]Vis.js [GitHub]Flot [GitHub]WebGL Three.js [GitHub]Babylon.js [GitHub]Pixi.js [GitHub]CSS3 Animation Animate.css [GitHub]bounce.js [GitHub]Effeckt.css [GitHub]move.js [GitHub]Flow Controller ES6 PromiseGeneratorES7 yieldawaitasync [GitHub]co [GitHub]Promise Bluebird [GitHub]q [GitHub]when.js [GitHub]Functional bacon.js [GitHub]immutable.js [GitHub]ramda [GitHub]underscore.js [GitHub]lodash [GitHub]ReactiveX [GitHub]Mobile UI jQuery Mobile [GitHub]Jo [GitHub]Dojo MobileLungo [GitHub]CSS Pre-processors LESS LESS [GitHub]Hat [GitHub]Sass(SCSS) Compass [GitHub]Bourbon [GitHub]Gumby [GitHub]Stylus nib [GitHub]Future Standards babel [GitHub]Template Handlebars [GitHub]Haml [GitHub]Slim [GitHub]Jade [GitHub]EjsSpacebarsmustache [GitHub]Modernisation Normalize [GitHub]ResetBest Practices SEOResponsivenessCDNSecurity SandboxXSSCORSIntermediate Languages CoffeeScript [GitHub]TypeScript [GitHub]ClojureScript [GitHub]JSX (Facebook)Mobile Application Development PhoneGap / Cordova [GitHub]MUI [GitHub]React Native [GitHub]Ionic [GitHub]Desktop Application Development Electron [GitHub]NW.js [GitHub]