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.
![Image of Web Front End Stack](Web Front End Stack.png)

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 Explorer
- Chrome
- Firefox
- Safari
- Opera
- Edge
- Netscape 😉

  <li>
    Protocol <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://www.ietf.org/rfc/rfc2616.txt">HTTP/1.1</a></p> <ul dir="auto">
          <li>
            URI
          </li>
          <li>
            Session
          </li>
          <li>
            Authentication
          </li>
          <li>
            Request
          </li>
          <li>
            Response
          </li>
        </ul>
      </li>
      
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTTP/2">HTTP/2</a></p> <ul dir="auto">
          <li>
            Compression
          </li>
          <li>
            Minification
          </li>
          <li>
            Server Push
          </li>
        </ul>
      </li>
      
      <li>
        WebSocket
      </li>
    </ul>
  </li>
  
  <li>
    The 3 Pillars <ul dir="auto">
      <li>
        HTML (HyperText Markup Language)
      </li>
      <li>
        CSS (Cascading Style Sheets)
      </li>
      <li>
        JavaScript
      </li>
    </ul>
  </li>
  
  <li>
    Standards <ul dir="auto">
      <li>
        W3C <ul dir="auto">
          <li>
            HTML
          </li>
          <li>
            CSS
          </li>
          <li>
            XHTML
          </li>
          <li>
            XML
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    Core Concepts <ul dir="auto">
      <li>
        HTML <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a>
          </li>
          <li>
            Attribute
          </li>
        </ul>
      </li>
      
      <li>
        JavaScript <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Prototype</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/Scope">Scope</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">Closure</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/JSON">JSON (JavaSript Object Notation)</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/AJAX">AJAX (Asynchronous JavaScript and XML)</a>
          </li>
        </ul>
      </li>
      
      <li>
        CSS <ul dir="auto">
          <li>
            Selector
          </li>
          <li>
            Priority
          </li>
          <li>
            Specificity
          </li>
          <li>
            Box Model
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    Rendering Engine <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/Trident_(layout_engine)">Trident (IE)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.chromium.org/blink">Blink / prev. WebKit (Chrome)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-us/docs/Mozilla/Gecko">Gecko (Firefox)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.webkit.org/">WebKit (Safari)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.chromium.org/blink">Blink / prev. Presto (Opera)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/EdgeHTML">EdgeHTML (Edge)</a>
      </li>
    </ul>
  </li>
  
  <li>
    JavaScript Engine <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/JScript">JScript (IE8- / ASP)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/Chakra_(JScript_engine)">Chakra (IE9+ / Edge)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://developers.google.com/v8/?hl=zh-CN">V8 (Chrome / Opera / Nodejs / MongoDB)</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey (Firefox)</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/WebKit#JavaScriptCore">JavaScriptCore (Safari)</a>
      </li>
    </ul>
  </li>
  
  <li>
    Runtime <ul dir="auto">
      <li>
        Cookie
      </li>
      <li>
        Local Cache
      </li>
      <li>
        Session Storage
      </li>
      <li>
        Local Storage
      </li>
      <li>
        Components <ul dir="auto">
          <li>
            Extensions
          </li>
          <li>
            Plugins
          </li>
        </ul>
      </li>
      
      <li>
        Resources <ul dir="auto">
          <li>
            Images
          </li>
          <li>
            Icons
          </li>
          <li>
            Fonts
          </li>
          <li>
            Audios
          </li>
          <li>
            Videos
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    Editors <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.sublimetext.com/">Sublime Text</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://www.jetbrains.com/webstorm/">WebStorm</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://atom.io/">Atom</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.vim.org/">Vim</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://www.gnu.org/software/emacs/">Emacs</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://brackets.io/">Brackets</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://lighttable.com/">Light Table</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://www.visualstudio.com/">Visual Studio</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://code.visualstudio.com/">Visual Studio Code (Linux & Mac)</a> [GitHub]
      </li>
      <li>
        Dreamweaver 😉
      </li>
      <li>
        FrontPage / SharePoint Designer 😉
      </li>
    </ul>
  </li>
  
  <li>
    Build Tasks <ul dir="auto">
      <li>
        Minification
      </li>
      <li>
        Compilation
      </li>
      <li>
        Concatenation
      </li>
      <li>
        Uglification
      </li>
      <li>
        Image Optimization
      </li>
      <li>
        Unit Testing
      </li>
    </ul>
  </li>
  
  <li>
    Build Tools <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.gruntjs.com/">Grunt</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://gulpjs.com/">Gulp</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://brunch.io/">Brunch</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://yeoman.io/">Yeoman</a>
      </li>
      <li>
        Broccoli [GitHub]
      </li>
    </ul>
  </li>
  
  <li>
    Debug <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://developer.chrome.com/devtools">Developer Tools</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://getfirebug.com/">Firebug</a> [GitHub]
      </li>
    </ul>
  </li>
  
  <li>
    Base Tools <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://nodejs.org/">Node.js</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://phantomjs.org/">Phantom.js</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>
      </li>
    </ul>
  </li>
  
  <li>
    Quality <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.jslint.com/">JSLint</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://jshint.com/">JSHint</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://jscs.info/">jscs</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://developers.google.com/closure/utilities/">Closure Linter</a>
      </li>
    </ul>
  </li>
  
  <li>
    Package <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://www.npmjs.com/">npm</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://bower.io/">Bower</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://yarnpkg.com/">yarn</a> [GitHub]
      </li>
    </ul>
  </li>
  
  <li>
    Test <ul dir="auto">
      <li>
        Tools <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://qunitjs.com/">QUnit</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://jasmine.github.io/">Jasmine</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://mochajs.org/">Mocha</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.seleniumhq.org/">Selenium</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://webdriver.io/">WebDriverIO</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.protractortest.org/">Protractor</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://chaijs.com/">Chai</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://sinonjs.org/">Sinon.JS</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://karma-runner.github.io/">Karma</a> [GitHub]
          </li>
          <li>
            nodeunit [GitHub]
          </li>
          <li>
            tape [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://nightmarejs.org/">nightmare</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://airbnb.io/enzyme/">Enzyme</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        Composite <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://saucelabs.com/">Sauce Labs</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://www.browserstack.com/">Browser Stack</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://browsershots.org/">Browser Shots</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://www.browserling.com/">Browserling</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://spoon.net/browsers/">Browser Sandbox</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://crossbrowsertesting.com/">Cross Browser Testing</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.browsera.com/">Browsera</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.powermapper.com/products/sortsite/checks/browser-compatibility/">SortSite</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    Frameworks / Libraries <ul dir="auto">
      <li>
        JavaScript base library <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://jquery.com/">jQuery</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://prototypejs.org/">Prototype</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://zeptojs.com/">Zepto</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://mootools.net/">MooTool</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        Modular <ul dir="auto">
          <li>
            ES6 Module
          </li>
          <li>
            CommonJS <ul dir="auto">
              <li>
                <a rel="nofollow noopener" target="_blank" href="http://webpack.github.io/">webpack</a> [GitHub]
              </li>
              <li>
                <a rel="nofollow noopener" target="_blank" href="http://browserify.org/">browserify</a> [GitHub]
              </li>
            </ul>
          </li>
          
          <li>
            AMD <ul dir="auto">
              <li>
                <a rel="nofollow noopener" target="_blank" href="http://requirejs.org/">RequireJS</a> [GitHub]
              </li>
            </ul>
          </li>
          
          <li>
            UMD <ul dir="auto">
              <li>
                umd [GitHub]
              </li>
            </ul>
          </li>
        </ul>
      </li>
      
      <li>
        JavaScript Framework <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://angularjs.org/">AngularJS</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://backbonejs.org/">Backbone</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://knockoutjs.com/">Knockout</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://emberjs.com/">Ember</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://facebook.github.io/react/">React</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://www.polymer-project.org/">polymer</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://deftjs.org/">Deft.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://vuejs.org/">Vue</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://riotjs.com/">Riot</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        UI framework <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://getbootstrap.com/">Bootstrap</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://semantic-ui.com/">Semantic UI</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://foundation.zurb.com/">Foundation</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://material-ui.com/">Material UI</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://dev.windows.com/en-us/develop/winjs">WinJS</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://purecss.io/">Pure</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://amazeui.org/">Amaze UI</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://onsen.io/">Onsne UI</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        WebSocket <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://socket.io/">Socket.io</a> [GitHub]
          </li>
          <li>
            web-socket-js [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        Data Visualization <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://d3js.org/">D3</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://echarts.baidu.com">Echarts</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.highcharts.com/">HighCharts</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://visjs.org/">Vis.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.flotcharts.org/">Flot</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        WebGL <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://threejs.org/">Three.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.babylonjs.com/">Babylon.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.pixijs.com/">Pixi.js</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        CSS3 Animation <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://daneden.github.io/animate.css/">Animate.css</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://bouncejs.com/">bounce.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://h5bp.github.io/Effeckt.css/">Effeckt.css</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://visionmedia.github.io/move.js/">move.js</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        Flow Controller <ul dir="auto">
          <li>
            ES6 <ul dir="auto">
              <li>
                Promise
              </li>
              <li>
                Generator
              </li>
            </ul>
          </li>
          
          <li>
            ES7 <ul dir="auto">
              <li>
                yield
              </li>
              <li>
                await
              </li>
            </ul>
          </li>
          
          <li>
            async [GitHub]
          </li>
          <li>
            co [GitHub]
          </li>
          <li>
            Promise <ul dir="auto">
              <li>
                Bluebird [GitHub]
              </li>
              <li>
                q [GitHub]
              </li>
              <li>
                when.js [GitHub]
              </li>
            </ul>
          </li>
        </ul>
      </li>
      
      <li>
        Functional <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://baconjs.github.io/">bacon.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://facebook.github.io/immutable-js/">immutable.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://ramdajs.com/">ramda</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://underscorejs.org/">underscore.js</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://lodash.com/">lodash</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://reactivex.io/">ReactiveX</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        Mobile UI <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://jquerymobile.com/">jQuery Mobile</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://joapp.com/">Jo</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html">Dojo Mobile</a>
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://lungo.tapquo.com/">Lungo</a> [GitHub]
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    CSS Pre-processors <ul dir="auto">
      <li>
        LESS <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://lesscss.org/">LESS</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://lesshat.madebysource.com/">Hat</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        Sass(SCSS) <ul dir="auto">
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://compass-style.org/">Compass</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://bourbon.io/">Bourbon</a> [GitHub]
          </li>
          <li>
            <a rel="nofollow noopener" target="_blank" href="http://www.gumbyframework.com/">Gumby</a> [GitHub]
          </li>
        </ul>
      </li>
      
      <li>
        Stylus <ul dir="auto">
          <li>
            nib [GitHub]
          </li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li>
    Future Standards <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://babeljs.io/">babel</a> [GitHub]
      </li>
    </ul>
  </li>
  
  <li>
    Template <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://handlebarsjs.com/">Handlebars</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://haml.info/">Haml</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://slim-lang.com/">Slim</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://jade-lang.com/">Jade</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.embeddedjs.com/">Ejs</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://meteorcapture.com/spacebars/">Spacebars</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://mustache.github.io/">mustache</a> [GitHub]
      </li>
    </ul>
  </li>
  
  <li>
    Modernisation <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://necolas.github.io/normalize.css/">Normalize</a> [GitHub]
      </li>
      <li>
        Reset
      </li>
    </ul>
  </li>
  
  <li>
    Best Practices <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a>
      </li>
      <li>
        Responsiveness
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/Content_delivery_network">CDN</a>
      </li>
    </ul>
  </li>
  
  <li>
    Security <ul dir="auto">
      <li>
        Sandbox
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://en.wikipedia.org/wiki/Cross-site_scripting">XSS</a>
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.w3.org/TR/cors/">CORS</a>
      </li>
    </ul>
  </li>
  
  <li>
    Intermediate Languages <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://coffeescript.org/">CoffeeScript</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://www.typescriptlang.org/">TypeScript</a> [GitHub]
      </li>
      <li>
        ClojureScript [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://facebook.github.io/react/docs/jsx-in-depth.html">JSX (Facebook)</a>
      </li>
    </ul>
  </li>
  
  <li>
    Mobile Application Development <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://cordova.apache.org/">PhoneGap / Cordova</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://dev.dcloud.net.cn/mui/">MUI</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="https://facebook.github.io/react-native/">React Native</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://ionicframework.com/">Ionic</a> [GitHub]
      </li>
    </ul>
  </li>
  
  <li>
    Desktop Application Development <ul dir="auto">
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://electron.atom.io/">Electron</a> [GitHub]
      </li>
      <li>
        <a rel="nofollow noopener" target="_blank" href="http://nwjs.io/">NW.js</a> [GitHub]
      </li>
    </ul>
  </li>
</ul>