unruledboy / webfrontendstack

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

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.

1. Install nodejs. (Shoule be >= iojs 1.8.0)

2. Install Phantomjs.

3. Install Python 2.7.

4. 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 Explorer
    • Chrome
    • Firefox
    • Safari
    • Opera
    • Edge
    • Netscape ;-)
  • Protocol
    • HTTP/1.1
      • URI
      • Session
      • Authentication
      • Request
      • Response
    • HTTP/2
      • Compression
      • Minification
      • Server Push
    • WebSocket
  • The 3 Pillars
    • HTML (HyperText Markup Language)
    • CSS (Cascading Style Sheets)
    • JavaScript
  • Standards
    • W3C
      • HTML
      • CSS
      • XHTML
      • XML
  • Core Concepts
    • HTML
      • DOM
      • Element
      • Attribute
    • JavaScript
      • Prototype
      • Scope
      • Closure
      • JSON (JavaSript Object Notation)
      • AJAX (Asynchronous JavaScript and XML)
    • CSS
      • Selector
      • Priority
      • Specificity
      • Box Model
  • Rendering 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
    • Cookie
    • Local Cache
    • Session Storage
    • Local Storage
    • Components
      • Extensions
      • Plugins
    • Resources
      • Images
      • Icons
      • Fonts
      • Audios
      • Videos
  • Editors
    • Sublime Text
    • WebStorm
    • Atom [GitHub]
    • Vim
    • Emacs
    • Brackets [GitHub]
    • Light Table [GitHub]
    • Visual Studio
    • Visual Studio Code (Linux & Mac) [GitHub]
    • Dreamweaver ;-)
    • FrontPage / SharePoint Designer ;-)
  • Build Tasks
    • Minification
    • Compilation
    • Concatenation
    • Uglification
    • Image Optimization
    • Unit Testing
  • Build Tools
    • Grunt [GitHub]
    • Gulp [GitHub]
    • Brunch [GitHub]
    • Yeoman
    • Broccoli [GitHub]
  • Debug
    • Developer Tools
    • Firebug [GitHub]
  • Base Tools
    • Node.js [GitHub]
    • Phantom.js [GitHub]
    • SpiderMonkey
  • Quality
    • JSLint [GitHub]
    • JSHint [GitHub]
    • jscs [GitHub]
    • Closure Linter
  • Package
    • npm [GitHub]
    • Bower [GitHub]
    • yarn [GitHub]
  • Test
    • Tools
      • QUnit [GitHub]
      • Jasmine [GitHub]
      • Mocha [GitHub]
      • Selenium [GitHub]
      • WebDriverIO [GitHub]
      • Protractor
      • Chai [GitHub]
      • Sinon.JS [GitHub]
      • Karma [GitHub]
      • nodeunit [GitHub]
      • tape [GitHub]
      • nightmare [GitHub]
      • Enzyme [GitHub]
    • Composite
      • Sauce Labs
      • Browser Stack
      • Browser Shots
      • Browserling
      • Browser Sandbox
      • Cross Browser Testing
      • Browsera
      • SortSite
  • Frameworks / Libraries
    • JavaScript base library
      • jQuery [GitHub]
      • Prototype [GitHub]
      • Zepto [GitHub]
      • MooTool [GitHub]
    • Modular
      • ES6 Module
      • CommonJS
        • 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
        • Promise
        • Generator
      • ES7
        • yield
        • await
      • async [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 Mobile
      • Lungo [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]
    • Ejs
    • Spacebars
    • mustache [GitHub]
  • Modernisation
    • Normalize [GitHub]
    • Reset
  • Best Practices
    • SEO
    • Responsiveness
    • CDN
  • Security
    • Sandbox
    • XSS
    • CORS
  • Intermediate 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]

webfrontendstack's Issues

Cannot generate image

I try to run the project using npm under windows, but cannot generate image.
Instead, get the error: "file" argument must be a non-empty string.

Ionic Framework?

Include Ionic Framework for Mobile App Builders? Or would this become too specific in the landscape of front end?

http://ionicframework.com/

为什么不更新了

两年了,为什么不更新文章了呢.如今的前端已经发生了翻天覆地的变化

1.5图小错误

Rendering Engines

Triddent -> Trident (IE)
Opera的Presto是12.17之前的内核，不是基于Blink开发的。来源

JavaScript Engines

Edge浏览器是Chakra。来源

phantom stdout: NETWORK_ERR: XMLHttpRequest Exception 101

I followed the steps in readme.md, At the last step, (The vs2017 and python already installed before the steps so some commands may just go through)

After I run "npm run build", I got this error:

C:\Users\RoyLi\source\repos\DevelopmentStack>npm run build

[email protected] build C:\Users\RoyLi\source\repos\DevelopmentStack
node index phantomjs readme

Task: phantomjs
Task: readme
Express started on: http://127.0.0.1:3000
Readme built successfully!
phantom stdout: NETWORK_ERR: XMLHttpRequest Exception 101: A network error occurred in synchronous requests.

phantom stdout: phantomjs://code/shim.js:1815 in send
phantomjs://code/shim.js:1815 in _start
phantomjs://code/shim.js:1842

Help, is there someone got same problem?

Static Site Generators?

There are a ton but the top ones from Jeykll to Wintersmith we could list.

Resource:
Github stars by "static site generator"

Market Share

Any possibility to get the market share percentage for each technology?

url for the technologies

@zsxsoft @brianmontanaweb what do you think about adding url for each technology? for example, like @brianmontanaweb suggested, Iconic has official url as http://ionicframework.com/ so user can quickly navigate.