diff --git a/README.es-es.md b/README.es-es.md new file mode 100644 index 0000000..5e81c10 --- /dev/null +++ b/README.es-es.md @@ -0,0 +1,337 @@ +# Overflow Stack +The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): +http://overflowstack.github.io + +# Localization +English: +https://github.com/unruledboy/WebFrontEndStack/ + +中文: +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: navegadores, plataformas, librerías, frameworks, herramientas etc. + +![Image of Web Front End Stack](Web Front End Stack.png) + +# Genera la imagen + +## Prepara el entorno +Tienes que tener instalado el Visual Studio 2010+ en Windows. + +1. Instalar [nodejs](https://nodejs.org). + +2. Instalar [Phantomjs](http://phantomjs.org). + +3. Instalar [Python 2.7](https://www.python.org/). + +4. ``npm install`` + +Si aparece algún error, comprueba las dependencias de [phantomjs-node](https://github.com/sgentle/phantomjs-node/wiki), [node-gyp](https://github.com/TooTallNate/node-gyp#installation). + +## Ejecución de comandos +``npm start`` para lanzar un servidor done ver el html. + +``npm run build`` para generar la imagen. + + +## Opciones +### Uso + node index task1 \[task2\] \[task3\] .. \[--option=value\] \[--option=value\] ... +#### Tareas +##### phantomjs + Genera la imagen +##### readme + Reconstruye los README. +##### updatestargazers + Actualiza los contadores de estrellas de los proyectos github. +#### Opciones +#### port + Default: 3000 +#### update_existed_stargazers + Default: false + +# ¿Por qué realizar esta tabla? +Alguna vez te has preguntado: +* ¿Cuantas tecnologías se incluyen en el desarrollo Front end? +* ¿Cuantas conozco? + + +No pude encontrar un diagrama muy completo que mostrase la pila de tecnologías involucradas en el desarrollo web front end, así realicé mi propia versión. + +Puede que haya errores, en categorías, enlaces o en nombres de +librerías, o puede que falte alguna que consideres importante, pero +bonito es que puedes modificarlo y arreglarlo como quieras. + +Puedes encontrar una vista previa del gráfico aquí (usa el ratón para +moverte / hacer zoom): + +https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm + + +# The Web Front End Stack + + +- Web Front End + - Navegadores + - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) + - [Chrome](http://www.google.com/chrome/) + - [Firefox](https://www.mozilla.org/) + - [Safari](http://www.apple.com/safari/) + - [Opera](http://www.opera.com/) + - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) + - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) + - Protocolos + - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) + - URI + - Sesión + - Autenticación + - Petición + - Respuesta + - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) + - Compresión + - Minificación + - Server Push + - WebSocket + - The 3 Pillars + - HTML (HyperText Markup Language) + - CSS (Cascading Style Sheets) + - JavaScript + - Estándares + - W3C + - HTML + - CSS + - XHTML + - XML + - Conceptons principales + - HTML + - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) + - Attribute + - JavaScript + - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) + - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) + - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) + - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) + - CSS + - Selector + - Priority + - Specificity + - Box Model + - Motores de renderizado + - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) + - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) + - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) + - [WebKit (Safari)](http://www.webkit.org/) + - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) + - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) + - Motores JavaScript + - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) + - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) + - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) + - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) + - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) + - Tiempo de ejecución + - Cookie + - Local Cache + - Session Storage + - Local Storage + - Componentes + - Extensiones + - Plugins + - Resources + - Images + - Icons + - Fonts + - Audios + - Videos + - Editores de texto + - [Sublime Text](http://www.sublimetext.com/) + - [WebStorm](https://www.jetbrains.com/webstorm/) + - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) + - [Vim](http://www.vim.org/) + - [Emacs](https://www.gnu.org/software/emacs/) + - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) + - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) + - [Visual Studio](https://www.visualstudio.com/) + - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) + - Dreamweaver ;-) + - FrontPage / SharePoint Designer ;-) + - Build Tasks + - Minificación + - Compilación + - Concatenación + - Uglification + - Optimización de imágenes + - Tests unitarios + - Herramientas de tareas + - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) + - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) + - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) + - [Yeoman](http://yeoman.io/) + - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) + - Depuración + - [Developer Tools](https://developer.chrome.com/devtools) + - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) + - Herramientas base + - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) + - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) + - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) + - Calidad + - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) + - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) + - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) + - [Closure Linter](https://developers.google.com/closure/utilities/) + - Gestores de paquetes + - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) + - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) + - Test + - Herramientas + - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) + - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) + - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) + - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) + - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) + - [Protractor](http://www.protractortest.org/) + - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) + - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) + - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) + - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) + - tape [[GitHub]](http://github.com/substack/tape) + - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) + - Composite + - [Sauce Labs](https://saucelabs.com/) + - [Browser Stack](https://www.browserstack.com/) + - [Browser Shots](http://browsershots.org/) + - [Browserling](https://www.browserling.com/) + - [Browser Sandbox](https://spoon.net/browsers/) + - [Cross Browser Testing](https://crossbrowsertesting.com/) + - [Browsera](http://www.browsera.com/) + - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) + - Librerías y frameworks + - JavaScript base library + - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) + - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) + - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) + - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) + - Módulos + - ES6 Module + - CommonJS + - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) + - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) + - AMD + - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) + - UMD + - umd [[GitHub]](https://github.com/umdjs/umd/) + - JavaScript Framework + - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) + - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) + - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) + - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) + - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) + - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) + - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) + - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) + - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) + - UI framework + - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) + - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) + - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) + - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) + - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) + - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) + - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) + - WebSocket + - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) + - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) + - Visualización de datos + - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) + - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) + - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) + - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) + - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) + - WebGL + - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) + - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) + - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) + - CSS3 Animation + - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) + - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) + - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) + - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) + - Control de flujo + - ES6 + - Promise + - Generator + - ES7 + - yield + - await + - async [[GitHub]](https://github.com/caolan/async/) + - co [[GitHub]](https://github.com/tj/co/) + - Promise + - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) + - q [[GitHub]](https://github.com/kriskowal/q/) + - when.js [[GitHub]](https://github.com/cujojs/when/) + - Funcional + - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) + - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) + - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) + - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) + - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) + - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) + - Mobile UI + - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) + - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) + - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) + - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) + - Pre-procesadores CSS + - LESS + - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) + - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) + - Sass(SCSS) + - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) + - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) + - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) + - Stylus + - nib [[GitHub]](https://github.com/tj/nib/) + - Future Standards + - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) + - Plantillas + - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) + - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) + - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) + - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) + - [Ejs](http://www.embeddedjs.com/) + - [Spacebars](http://meteorcapture.com/spacebars/) + - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) + - Modernisation + - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) + - Reset + - Buenas prácticas + - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) + - Responsiveness + - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) + - Seguridad + - Sandbox + - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) + - [CORS](http://www.w3.org/TR/cors/) + - Lenguajes intermedios + - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) + - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) + - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) + - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) + - Empaquetadores de Apps para móvil + - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) + - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) + - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) + - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) + - Desktop Application Development + - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) + - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) + + diff --git a/README.md b/README.md index 5e00126..8a15b0a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,13 @@ +# Overflow Stack +The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): +http://overflowstack.github.io + # Localization 中文: -http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html +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 @@ -11,32 +18,37 @@ Web front-end stack: browsers, platforms, libraries, frameworks, tools etc. # Generate image yourself ## Prepare for environment -You should have Visual Studio 2010 / 2012 installed in Windows. +You should have Visual Studio 2010+ installed in Windows. + +1. Install [nodejs](https://nodejs.org). (Shoule be >= iojs 1.8.0) -1. Install [nodejs](https://nodejs.org) +2. Install [Phantomjs](http://phantomjs.org). -2. Install [Phantomjs](http://phantomjs.org) +3. Install [Python 2.7](https://www.python.org/). -3. ``npm install`` +4. ``npm install`` + +If the error occurs, you can check the dependence of [phantomjs-node](https://github.com/sgentle/phantomjs-node/wiki), [node-gyp](https://github.com/TooTallNate/node-gyp#installation). ## Run commands ``npm start`` for start a server to open the html directly. ``npm run build`` for generate the image. -Both of commands require port 3000. If you're using this port, then try this: -bash: +## Options ```bash -PORT=4000 npm run build -``` -cmd: -```cmd -SET PORT=4000 -npm run build + -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? @@ -45,7 +57,7 @@ Have you ever wondered: 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. +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): @@ -57,25 +69,25 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - Web Front End - Browser - - Internet Explorer - - Chrome - - Firefox - - Safari - - Opera - - Edge - - Netscape ;-) + - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) + - [Chrome](http://www.google.com/chrome/) + - [Firefox](https://www.mozilla.org/) + - [Safari](http://www.apple.com/safari/) + - [Opera](http://www.opera.com/) + - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) + - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) - Protocol - - HTTP/1.1 + - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) - URI - Session - Authentication - Request - Response - - HTTP/2 + - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) - Compression - - Encryption - Minification - Server Push + - WebSocket - The 3 Pillars - HTML (HyperText Markup Language) - CSS (Cascading Style Sheets) @@ -88,34 +100,33 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - XML - Core Concepts - HTML - - DOM - - Element + - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) - Attribute - JavaScript - - Prototype - - Scope - - Closure - - JSON (JavaSript Object Notation) - - AJAX (Asynchronous JavaScript and XML) + - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) + - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) + - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) + - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) - CSS - Selector - Priority - Specificity - Box Model - Rendering Engine - - Trident (IE) - - Blink / prev. WebKit (Chrome) - - Gecko (Firefox) - - WebKit (Safari) - - Blink / prev. Presto (Opera) - - EdgeHTML (Edge) + - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) + - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) + - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) + - [WebKit (Safari)](http://www.webkit.org/) + - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) + - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) - JavaScript Engine - - Chakra (IE) - - V8 (Chrome) - - SpiderMonkey (Firefox) - - Nitro (Safari) - - V8 (Opera) - - Chakra (Edge) + - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) + - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) + - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) + - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) + - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) - Runtime - Cookie - Local Cache @@ -131,168 +142,190 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - Audios - Videos - Editors - - Sublime Text - - WebStorm - - Atom - - Vim - - Emacs - - Brackets - - Light Table - - Visual Studio - - Visual Studio Code + - [Sublime Text](http://www.sublimetext.com/) + - [WebStorm](https://www.jetbrains.com/webstorm/) + - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) + - [Vim](http://www.vim.org/) + - [Emacs](https://www.gnu.org/software/emacs/) + - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) + - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) + - [Visual Studio](https://www.visualstudio.com/) + - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) + - Dreamweaver ;-) + - FrontPage / SharePoint Designer ;-) - Build Tasks - Minification - Compilation - - Concatenatio + - Concatenation - Uglification - Image Optimization - Unit Testing - Build Tools - - Grunt - - Gulp - - Brunch - - Yeoman - - Broccoli + - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) + - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) + - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) + - [Yeoman](http://yeoman.io/) + - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) - Debug - - Developer Tools - - Firebug + - [Developer Tools](https://developer.chrome.com/devtools) + - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) - Base Tools - - Node.js - - Phantom.js + - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) + - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) + - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) - Quality - - JSLint - - JSHint - - jscs - - Closure Linter + - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) + - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) + - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) + - [Closure Linter](https://developers.google.com/closure/utilities/) - Package - - npm - - Bower + - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) + - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) + - [yarn](https://yarnpkg.com/) [[GitHub]](https://github.com/yarnpkg/yarn/) - Test - - QUnit - - Jasmine - - Mocha - - Selenium - - WebDriverJS - - Protractor - - Chai - - Sinon - - Karma - - Nodeunit - - Frameworks/Libraries + - Tools + - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) + - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) + - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) + - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) + - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) + - [Protractor](http://www.protractortest.org/) + - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) + - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) + - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) + - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) + - tape [[GitHub]](http://github.com/substack/tape) + - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) + - [Enzyme](http://airbnb.io/enzyme/) [[GitHub]](https://github.com/airbnb/enzyme) + - Composite + - [Sauce Labs](https://saucelabs.com/) + - [Browser Stack](https://www.browserstack.com/) + - [Browser Shots](http://browsershots.org/) + - [Browserling](https://www.browserling.com/) + - [Browser Sandbox](https://spoon.net/browsers/) + - [Cross Browser Testing](https://crossbrowsertesting.com/) + - [Browsera](http://www.browsera.com/) + - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) + - Frameworks / Libraries - JavaScript base library - - jQuery - - Prototype - - Zepto - - MooTool - - Underscore + - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) + - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) + - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) + - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) - Modular - ES6 Module - CommonJS - - webpack - - browserify + - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) + - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) - AMD - - RequireJS - - JavaScript framework - - AngularJS - - Backbone - - Knockout - - Ember - - React - - polymer - - Extjs - - Dojo - - Deft.js - - Vue + - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) + - UMD + - umd [[GitHub]](https://github.com/umdjs/umd/) + - JavaScript Framework + - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) + - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) + - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) + - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) + - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) + - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) + - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) + - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) + - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) - UI framework - - Bootstrap - - ZURB - - YUI - - Toast - - YAML - - ResponsiveGS - - Semantic UI - - Foundation - - Material UI - - jQuery UI + - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) + - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) + - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) + - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) + - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) + - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) + - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) + - [Onsne UI](https://onsen.io/) [[GitHub]](https://github.com/OnsenUI/OnsenUI) - WebSocket - - Socket.io - - web-socket-js + - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) + - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) - Data Visualization - - D3 - - Echarts - - HighCharts - - Vis.js - - Flot + - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) + - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) + - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) + - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) + - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) - WebGL - - Three.js - - Babylon.js - - Pixi.js + - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) + - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) + - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) - CSS3 Animation - - Animate.css - - bounce.js - - Effeckt.css - - move.js + - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) + - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) + - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) + - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) + - Flow Controller + - ES6 + - Promise + - Generator + - ES7 + - yield + - await + - async [[GitHub]](https://github.com/caolan/async/) + - co [[GitHub]](https://github.com/tj/co/) + - Promise + - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) + - q [[GitHub]](https://github.com/kriskowal/q/) + - when.js [[GitHub]](https://github.com/cujojs/when/) + - Functional + - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) + - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) + - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) + - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) + - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) + - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) + - Mobile UI + - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) + - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) + - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) + - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) - CSS Pre-processors - - SCSS - LESS - - Hat - - SASS - - Compass - - Bourbon - - Gumby + - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) + - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) + - Sass(SCSS) + - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) + - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) + - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) - Stylus - - Nib + - nib [[GitHub]](https://github.com/tj/nib/) + - Future Standards + - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) - Template - - Markdown - - Handlebars - - Haml - - Slim Ruby - - Jade - - Ejs - - Spacebars + - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) + - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) + - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) + - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) + - [Ejs](http://www.embeddedjs.com/) + - [Spacebars](http://meteorcapture.com/spacebars/) + - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) - Modernisation - - Normalize + - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) - Reset - - Functional - - backon.js - - immutable.js - - Flow Controller - - ES6 - - Promise - - Bluebird - - q - - When.js - - Generator - - ES7 - - yield - - await - - async - - co - Best Practices - - SEO + - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) - Responsiveness - - CDN + - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) - Security - Sandbox - - XSS - - CORS + - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) + - [CORS](http://www.w3.org/TR/cors/) - Intermediate Languages - - CoffeeScript - - TypeScript - - Dart - - LiveScript - - ClojureScript - - Mobile App Builders - - PhoneGap / Cordova - - MUI - - React Native - - Mobile UI - - Sencha - - jQuery Mobile - - Kendo UI - - Jo - - WinkUI - - DojoMobile - - Lungo + - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) + - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) + - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) + - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) + - Mobile Application Development + - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) + - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) + - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) + - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) + - Desktop Application Development + - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) + - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) - \ No newline at end of file + diff --git a/README.zh-cn.md b/README.zh-cn.md new file mode 100644 index 0000000..1153031 --- /dev/null +++ b/README.zh-cn.md @@ -0,0 +1,334 @@ +# 爆栈 +系统开发技术栈、Web前端开发技术栈、数据库技术栈、.NET技术栈！ +http://overflowstack.github.io + +# 本地化 +English: +https://github.com/unruledboy/WebFrontEndStack/ + +中文博客: +http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html + +Español: +https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md + + +# Web前端技术栈 +比较全面的浏览器、平台、类库、框架、工具等。 + +![Image of Web Front End Stack](Web Front End Stack.zh-cn.png) + +# 自行生成预览图 + +## 准备环境 +您应该安装Visual Studio 2010+。 + +1. 安装 [nodejs](https://nodejs.org). + +2. 安装 [Phantomjs](http://phantomjs.org). + +3. 安装 [Python 2.7](https://www.python.org/). + +4. ``npm install`` + +如果出现错误，您可以检查 [phantomjs-node] 的依赖(https://github.com/sgentle/phantomjs-node/wiki), [node-gyp](https://github.com/TooTallNate/node-gyp#installation). + +## 运行命令 +``npm start`` 运行服务并直接打开主html文件。 + +``npm run build`` 生成预览图。 + + +## 选项 +``` + + -h, --help Display this 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. + +``` + +# 为什么？ +大家是否想过： +* Web前端开发究竟包含哪些技术呢？ +* 我所掌握的技术这个子集，在Web前端技术大系这个超集里面占的比例是多少呢？ +* 我究竟还没有掌握多少Web前端技术呢？ +* 面试的时候会考哪些技术呢？ + + +那么，Web前端开发是否也应该有这样的技术栈概览图呢？搜索了很久，没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。所以我们自行设计了这个Web前端技术栈。 + +这个图表里的分类未必准确，相关技术也难免会有遗漏，欢迎大家指点以便不断改进。 + +Web前端技术实在太繁多限于篇幅，，这里没有罗列一些技术。 + +您可以点击下面链接查看交互式预览图(用鼠标移动/缩放/点击节点打开相关网站)： + +https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm?locale=zh-cn + + +# Web前端技术栈 + + +- Web前端开发技术栈 + - 浏览器 + - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) + - [Chrome](http://www.google.com/chrome/) + - [Firefox](https://www.mozilla.org/) + - [Safari](http://www.apple.com/safari/) + - [Opera](http://www.opera.com/) + - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) + - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) + - 协议 + - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) + - 链接 + - 会话 + - 授权 + - 请求 + - 响应 + - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) + - 压缩 + - 打包 + - 服务器端推送 + - WebSocket + - Web三剑客 + - HTML (HyperText Markup Language) + - CSS (Cascading Style Sheets) + - JavaScript + - 标准 + - W3C + - HTML + - CSS + - XHTML + - XML + - 核心概念 + - HTML + - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) + - Attribute + - JavaScript + - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) + - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) + - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) + - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) + - CSS + - Selector + - Priority + - Specificity + - Box Model + - 渲染引擎 + - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) + - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) + - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) + - [WebKit (Safari)](http://www.webkit.org/) + - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) + - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) + - 脚本引擎 + - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) + - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) + - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) + - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) + - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) + - 运行时 + - Cookie + - Local Cache + - Session Storage + - Local Storage + - Components + - Extensions + - Plugins + - Resources + - Images + - Icons + - Fonts + - Audios + - Videos + - 编辑器 + - [Sublime Text](http://www.sublimetext.com/) + - [WebStorm](https://www.jetbrains.com/webstorm/) + - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) + - [Vim](http://www.vim.org/) + - [Emacs](https://www.gnu.org/software/emacs/) + - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) + - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) + - [Visual Studio](https://www.visualstudio.com/) + - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) + - Dreamweaver ;-) + - FrontPage / SharePoint Designer ;-) + - 编译任务 + - 精简 + - 编译 + - 合并 + - 混淆 + - 图像优化 + - 单元测试 + - 编译工具 + - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) + - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) + - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) + - [Yeoman](http://yeoman.io/) + - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) + - 调试 + - [Developer Tools](https://developer.chrome.com/devtools) + - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) + - 基础工具 + - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) + - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) + - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) + - 质量控制 + - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) + - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) + - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) + - [Closure Linter](https://developers.google.com/closure/utilities/) + - 包管理 + - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) + - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) + - 测试 + - 工具 + - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) + - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) + - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) + - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) + - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) + - [Protractor](http://www.protractortest.org/) + - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) + - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) + - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) + - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) + - tape [[GitHub]](http://github.com/substack/tape) + - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) + - 在线工具 + - [Sauce Labs](https://saucelabs.com/) + - [Browser Stack](https://www.browserstack.com/) + - [Browser Shots](http://browsershots.org/) + - [Browserling](https://www.browserling.com/) + - [Browser Sandbox](https://spoon.net/browsers/) + - [Cross Browser Testing](https://crossbrowsertesting.com/) + - [Browsera](http://www.browsera.com/) + - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) + - 库 / 框架 + - 基础库 + - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) + - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) + - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) + - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) + - 模块化 + - ES6 Module + - CommonJS + - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) + - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) + - AMD + - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) + - UMD + - umd [[GitHub]](https://github.com/umdjs/umd/) + - 框架 + - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) + - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) + - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) + - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) + - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) + - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) + - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) + - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) + - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) + - UI框架 + - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) + - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) + - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) + - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) + - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) + - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) + - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) + - WebSocket + - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) + - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) + - 数据可视化 + - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) + - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) + - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) + - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) + - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) + - WebGL + - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) + - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) + - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) + - CSS3 动画 + - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) + - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) + - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) + - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) + - 流程控制 + - ES6 + - Promise + - Generator + - ES7 + - yield + - await + - async [[GitHub]](https://github.com/caolan/async/) + - co [[GitHub]](https://github.com/tj/co/) + - Promise + - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) + - q [[GitHub]](https://github.com/kriskowal/q/) + - when.js [[GitHub]](https://github.com/cujojs/when/) + - 函数式编程 + - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) + - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) + - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) + - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) + - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) + - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) + - 手机 UI 框架 + - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) + - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) + - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) + - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) + - CSS 预处理器 + - LESS + - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) + - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) + - Sass(SCSS) + - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) + - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) + - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) + - Stylus + - nib [[GitHub]](https://github.com/tj/nib/) + - 未来标准 + - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) + - 模板引擎 + - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) + - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) + - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) + - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) + - [Ejs](http://www.embeddedjs.com/) + - [Spacebars](http://meteorcapture.com/spacebars/) + - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) + - 统一化 + - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) + - Reset + - 最佳实践 + - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) + - Responsiveness + - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) + - 安全 + - Sandbox + - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) + - [CORS](http://www.w3.org/TR/cors/) + - 中间语言 + - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) + - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) + - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) + - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) + - 移动应用开发 + - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) + - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) + - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) + - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) + - 桌面应用开发 + - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) + - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) + + diff --git a/Web Front End Stack.es-es.png b/Web Front End Stack.es-es.png new file mode 100644 index 0000000..58809ce Binary files /dev/null and b/Web Front End Stack.es-es.png differ diff --git a/Web Front End Stack.png b/Web Front End Stack.png index eb60bf8..172b9d0 100644 Binary files a/Web Front End Stack.png and b/Web Front End Stack.png differ diff --git a/Web Front End Stack.zh-cn.png b/Web Front End Stack.zh-cn.png new file mode 100644 index 0000000..da4aa92 Binary files /dev/null and b/Web Front End Stack.zh-cn.png differ diff --git a/index.js b/index.js index 125ac18..e99f91d 100644 --- a/index.js +++ b/index.js @@ -1,158 +1,294 @@ -var express = require('express'); -var path = require('path'); -var Promise = require("bluebird"); -var fs = Promise.promisifyAll(require('fs')); - -var app = new express(); -var queueReady = ["server"]; -var port = process.env.PORT || 3000; -var httpServer = "http://127.0.0.1:" + port + "/"; - -var pageWidth = 2200; // Magic number! -var pageHeight = 4000; - -String.prototype.repeat = function(count) { - var ret = []; - while (count--) { - ret.push(this); - } - return ret.join(""); - } - /** - * Use to build a promise for some fucking async api. - * @param object object - * @param string method - * @param array otherArguments - * @return Promise - */ -var promiseFactory = function promiseFactory(object, method, otherArguments) { - var resolver = Promise.defer(); - var argu = otherArguments; - if (!(argu instanceof Array)) { - argu = []; - } - argu.push(function() { - resolver.resolve.apply(resolver, arguments); - }); - object[method].apply(object, argu); - return resolver.promise; -} - +/* global require, setTimeout, console, __dirname, process*/ /** - * Recursion to generate readme - * @param object object - * @param int deep - * @return string + * Builder + * @author zsx */ -var buildReadme = function buildReadme(object, deep) { - var deeper = deep + 1; - var deepString = "\t".repeat(deep) + "- "; - var ret = [deepString + object.name]; - if (!('children' in object)) { - return ret.join("\n"); - } - object.children.map(function(value, index) { - ret.push(buildReadme(value, deeper)); - }); - return ret.join("\n"); -} - -var actions = { - /** - * For running phantomjs to take a screenshot for the webpage - * @return Promise - */ - phantomjs: function phantomjs() { - return new Promise(function(resolve, reject) { - var phantom = require('phantom'); - - var ph; - var page; - - // What the fucking API? - return promiseFactory(phantom, 'create').then(function(phantom) { - ph = phantom; - console.log("Created Phantomjs"); - return promiseFactory(ph, 'createPage'); - }).then(function(pg) { - page = pg; - return promiseFactory(page, 'set', ['viewportSize', { - width: pageWidth, - height: pageHeight - }]); - }).then(function(err) { - console.log("Set viewportSize"); - return promiseFactory(page, 'open', [httpServer]); - }).then(function(status) { - console.log("Rendered HTML, the image will save after 2 seconds."); - if (status == "success") { - return Promise.delay(2000); - } else { - return reject(status); - } - }).then(function() { - return promiseFactory(page, 'render', [path.join(__dirname, 'Web Front End Stack.png')]); - }).then(function() { - console.log("The image saved successfully!"); - return resolve(); - }).then(function() { - page.close(); - ph.exit(); - }); - }); - }, - - /** - * To rebuild the README.md - * @return Promise - */ - readme: function readme() { - var json = require('./ux/WebFrontEndStack.json'); - return Promise.resolve().then(function() { - return buildReadme(json, 0); - }).then(function(ret) { - return fs.readFileAsync("./README.md", "utf-8").then(function(fileContent) { - fileContent = fileContent.replace(/<\!--BUILD_START-->[\d\D]+?<\!--BUILD_END-->/, "{%BuildStart%}") - return fs.writeFileAsync("./README.md", fileContent.replace("{%BuildStart%}", "\n\n" + ret + "\n\n", "utf-8")); - }).then(function() { - console.log('Readme built successfully!'); - }); - }); - }, - /** - * To start an express server - * @return Promise - */ - server: function server() { - return new Promise(function(resolver, reject) { - return app - .set('port', port) - .set('view engine', 'html') - .use(express.static(path.join(__dirname, '/ux'))) - .use('/', function(req, res) { - res.redirect('/WebFrontEndStack.html'); - }) - .listen(port, function() { - console.info('Express started on: http://127.0.0.1:' + port); - resolver(app); - }); - }); - } -}; - -var queue = [actions.server()]; -process.argv.forEach(function(val) { - if (val in actions) { - console.info("Task: " + val); - queue.push(actions[val]()); - } -}); - -var promise = Promise.all(queue); -if (queue.length > 1) { // for somebody who only want to start the server. - promise.then(function() { - console.log("OK!"); - process.exit(0); - }); -} +(function () { + "use strict"; + + const pageWidth = 2000; // Magic number! + const pageHeight = 3800; + + let Express = require('express'); + let path = require('path'); + let phantom = require("phantomjs-promise"); + let request = require("request"); + let async = require("async"); + let fs = require('fs'); + let commandLineArgs = require("command-line-args"); + + let app = new Express(); + + let cli = commandLineArgs([{ + name: "help", + alias: "h", + type: Boolean, + defaultOption: true, + description: "Display this message." + }, { + name: "port", + alias: "p", + type: Number, + defaultValue: 3000, + description: "(Default: 3000) Set the port what express listening." + }, { + name: "update_existed_stargazers", + alias: "ues", + type: Boolean, + defaultValue: false, + description: "(Default: false) Update project's stargazers including existed." + }, { + name: "phantomjs", + type: Boolean, + defaultValue: false, + description: "The task to generate the image." + }, { + name: "readme", + type: Boolean, + defaultValue: false, + description: "The task to update readme." + }, { + name: "updatestargazers", + type: Boolean, + defaultValue: false, + description: "The task to update the count of the stargazers." + }]); + let options = cli.parse(); + let httpServer = "http://127.0.0.1:" + options.port + "/"; + + let languages = []; + let jsonData = JSON.parse(fs.readFileSync('./ux/WebFrontEndStack.json', "utf-8")); // Require will lock the file. + + /** + * Tiemout + * @param int ms + * @return Promise + */ + function timeout(ms) { + return new Promise((resolve, reject) => { + setTimeout(resolve, ms, 'done'); + }); + } + /** + * Recursion to generate readme + * @param object object + * @param string language + * @param int deep + * @return string + */ + function buildReadme(object, language, deep) { + let deeper = deep + 1; + let deepString = new Array(deeper).join("\t") + "- "; + let ret = []; + let lang = ""; + if (object.languages) { + lang = object.languages[language]; + } + lang = lang || object.name; + + ret.push((function (deepString, name, url, github) { + let haveUrl = !!url; + let haveGitHub = !!github; + let ret = []; + ret.push(deepString); + ret.push((haveUrl ? "[" : "") + name + (haveUrl ? "](" + url + ")" : "")); + ret.push((haveGitHub ? " [\[GitHub\]](" + github + ")" : "")); + return ret.join(""); + })(deepString, lang, object.url, object.github)); + + if (object.children) { + object.children.map((value, index) => { + ret.push(buildReadme(value, language, deeper)); + }); + } + return ret.join("\n"); + } + + /** + * Update the stargazers of the GitHub repo + * Be careful! There have the rate limit! + * @see https://developer.github.com/v3/#increasing-the-unauthenticated-rate-limit-for-oauth-applications + * @return Promise + */ + function updatestargazers() { + return new Promise((resolve, reject) => { + + function getGitHubApi(github) { + let githubArray = github.split("/"); + // I want a sprintf T_T + return "https://api.github.com/repos/" + githubArray[3] + "/" + githubArray[4]; + } + + + let q = async.queue(function (object, callback) { + if (!object.github || (!options.update_existed_stargazers && object.stargazers)) { + callback(false); + return; + } + let githubUrl = getGitHubApi(object.github); + console.log("Getting " + githubUrl); + request({ + url: githubUrl, + headers: { + "User-Agent": "https://github.com/unruledboy/WebFrontEndStack" // GitHub required user-agent + } + }, (err, res, body) => { + if (!err && res.statusCode == 200) { + let json = JSON.parse(body); + if (json === null) { + callback(false); + return; + } + object.stargazers = json.stargazers_count; + callback(true); + } else { + if (res.statusCode == 403) { // Out of API limit! + console.error("Out of GitHub API limit!"); + console.error("The limit will be reset when " + new Date(res.headers['x-ratelimit-reset'] * 1000)); + q.kill(); + reject("Out of GitHub API limit!"); + } + callback(false); + } + }); + + }, 5); + q.drain = function () { + fs.writeFileSync('./ux/WebFrontEndStack.json', JSON.stringify(jsonData), "utf-8"); + resolve(); + }; + function addQueue(object) { + q.push(object, (noErr) => { + if (noErr) console.log(object.name + " = " + object.stargazers); + }); + if (object.children) { + object.children.forEach((val) => { + addQueue(val); + }); + } + } + addQueue(jsonData); + + return q; + }); + } + /** + * For running phantomjs to take a screenshot for the webpage + * @return Promise + */ + function phantomjs(language) { + let displayLanguage = language === "" ? "en" : language; + let promise = new Promise((resolve, reject) => { + return phantom.createAsync().then((phantom) => { + return phantom.createPageAsync(); + }).then((objects) => { + console.log("Setting viewportSize.."); + return objects.page.setAsync('viewportSize', { + width: pageWidth, + height: pageHeight + }); + }).then((objects) => { + console.log("Opening " + httpServer + "?locale=" + language + " for " + displayLanguage); + return objects.page.openAsync(httpServer + "?locale=" + language); + }).then((objects) => { + console.log("Rendered HTML, the image will be saved after 2 seconds."); + if (objects.ret[0] != "success") { + throw objects.ret[0]; + } + return timeout(2000).then(() => { + return objects.page.renderAsync(path.join(__dirname, 'Web Front End Stack' + (language === "" ? "" : ".") + language + '.png')); + }); + }).then((objects) => { + console.log("The image(" + displayLanguage + ") saved successfully!"); + objects.page.close(); + objects.phantom.exit(); + resolve(); + }); + }); + return promise; + + } + + + /** + * To rebuild the README.md + * @return Promise + */ + function readme(language) { + let extension = (language === "" ? "" : ".") + language; + let promise = new Promise((resolve, reject) => { + fs.readFile('./README' + extension + '.md', "utf-8", (err, content) => { + if (err) return reject(err); + resolve(content); + }); + }); + return promise.then((fileContent) => { + let ret = buildReadme(jsonData, language, 0); + fileContent = fileContent.replace(/<\!--BUILD_START-->[\d\D]+?<\!--BUILD_END-->/, "{%BuildStart%}"); + fs.writeFileSync('./README' + extension + '.md', fileContent.replace("{%BuildStart%}", "\n\n" + ret + "\n\n", "utf-8")); + console.log('Readme (' + language + ') built successfully!'); + }); + } + + + /** + * To start an express server + * @return Promise + */ + function server() { + return new Promise((resolve, reject) => { + return app + .set('port', options.port) + .set('view engine', 'html') + .use(Express.static(path.join(__dirname, '/ux'))) + .use('/', function (req, res) { + res.redirect('/WebFrontEndStack.htm?locale=' + req.query.locale); + }) + .listen(options.port, function () { + console.info('Express started on: http://127.0.0.1:' + options.port); + resolve(app); + }); + }); + } + + if (options.help) { + let usage = cli.getUsage({ + title: "Generator" + }); + console.log(usage); + return; + } + + let queue = []; + queue.push(server()); + + // Firstly, check languages. + + languages.push(""); + for (let item in jsonData.languages) { + languages.push(item); + } + + languages.map((val) => { + if (options.phantomjs) { + queue.push(phantomjs(val)); + } + if (options.readme) { + queue.push(readme(val)); + } + }); + + if (options.updatestargazers) { + queue.push(updatestargazers()); + } + + let promise = Promise.all(queue); + if (queue.length > 1) { // for somebody who only want to start the server. + console.log("You can press Ctrl+C to exit if tasks finished."); + promise.then(() => { + console.log("OK!"); + process.exit(0); + }); + } +})(); diff --git a/package.json b/package.json index 1936972..c01eba2 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Generate a image for web front-end stack.", "main": "index.js", "scripts": { - "build": "node index phantomjs readme", + "build": "node index --phantomjs --readme", "start": "node index" }, "repository": { @@ -26,7 +26,14 @@ }, "homepage": "https://github.com/unruledboy/WebFrontEndStack", "dependencies": { + "async": "^1.4.2", + "command-line-args": "^1.0.1", "express": "^4.13.3", - "phantom": "^0.7.2" + "phantomjs-promise": "0.0.1", + "request": "^2.61.0" + }, + "devDependencies": { + "phantomjs": "^1.9.18", + "weak": "^1.0.0" } } diff --git a/ux/WebFrontEndStack.html b/ux/WebFrontEndStack.htm similarity index 52% rename from ux/WebFrontEndStack.html rename to ux/WebFrontEndStack.htm index 593e47f..26ded2c 100644 --- a/ux/WebFrontEndStack.html +++ b/ux/WebFrontEndStack.htm @@ -4,6 +4,7 @@ Web Front End Stack + - - - + + + -
-
-
-

Web Front-end Stack

-
-
-

Wilson Chen (twitter@unruleboy) - unruledboy@gmail.com

-

zsx (GitHub@zsxsoft) - zsx@zsxsoft.com

-
-
-
+
+
+
+

Web Front-end Stack v2.5

+
+
+

Wilson Chen (twitter@unruleboy) - unruledboy@gmail.com

+

zsx (GitHub@zsxsoft) - zsx@zsxsoft.com

+
+
+
diff --git a/ux/WebFrontEndStack.json b/ux/WebFrontEndStack.json index 1ed7abf..f2e9017 100644 --- a/ux/WebFrontEndStack.json +++ b/ux/WebFrontEndStack.json @@ -1,531 +1,1119 @@ -{ - "name": "Web Front End", - "children": [{ - "name": "Browser", - "children": [{ - "name": "Internet Explorer" - }, { - "name": "Chrome" - }, { - "name": "Firefox" - }, { - "name": "Safari" - }, { - "name": "Opera" - }, { - "name": "Edge" - }, { - "name": "Netscape ;-)" - }] - }, { - "name": "Protocol", - "children": [{ - "name": "HTTP/1.1", - "children": [{ - "name": "URI" - }, { - "name": "Session" - }, { - "name": "Authentication" - }, { - "name": "Request" - }, { - "name": "Response" - }] - }, { - "name": "HTTP/2", - "children": [{ - "name": "Compression" - }, { - "name": "Encryption" - }, { - "name": "Minification" - }, { - "name": "Server Push" - }] - }] - }, { - "name": "The 3 Pillars", - "children": [{ - "name": "HTML (HyperText Markup Language)" - }, { - "name": "CSS (Cascading Style Sheets)" - }, { - "name": "JavaScript" - }] - }, { - "name": "Standards", - "children": [{ - "name": "W3C", - "children": [{ - "name": "HTML" - }, { - "name": "CSS" - }, { - "name": "XHTML" - }, { - "name": "XML" - }] - }] - }, { - "name": "Core Concepts", - "children": [{ - "name": "HTML", - "children": [{ - "name": "DOM" - }, { - "name": "Element" - }, { - "name": "Attribute" - }] - }, { - "name": "JavaScript", - "children": [{ - "name": "Prototype" - }, { - "name": "Scope" - }, { - "name": "Closure" - }, { - "name": "JSON (JavaSript Object Notation)" - }, { - "name": "AJAX (Asynchronous JavaScript and XML)" - }] - }, { - "name": "CSS", - "children": [{ - "name": "Selector" - }, { - "name": "Priority" - }, { - "name": "Specificity" - }, { - "name": "Box Model" - }] - }] - }, { - "name": "Rendering Engine", - "children": [{ - "name": "Trident (IE)" - }, { - "name": "Blink / prev. WebKit (Chrome)" - }, { - "name": "Gecko (Firefox)" - }, { - "name": "WebKit (Safari)" - }, { - "name": "Blink / prev. Presto (Opera)" - }, { - "name": "EdgeHTML (Edge)" - }] - }, { - "name": "JavaScript Engine", - "children": [{ - "name": "Chakra (IE)" - }, { - "name": "V8 (Chrome)" - }, { - "name": "SpiderMonkey (Firefox)" - }, { - "name": "Nitro (Safari)" - }, { - "name": "V8 (Opera)" - }, { - "name": "Chakra (Edge)" - }] - }, { - "name": "Runtime", - "children": [{ - "name": "Cookie" - }, { - "name": "Local Cache" - }, { - "name": "Session Storage" - }, { - "name": "Local Storage" - }, { - "name": "Components", - "children": [{ - "name": "Extensions" - }, { - "name": "Plugins" - }] - }, { - "name": "Resources", - "children": [{ - "name": "Images" - }, { - "name": "Icons" - }, { - "name": "Fonts" - }, { - "name": "Audios" - }, { - "name": "Videos" - }] - }] - }, { - "name": "Editors", - "children": [{ - "name": "Sublime Text" - }, { - "name": "WebStorm" - }, { - "name": "Atom" - }, { - "name": "Vim" - }, { - "name": "Emacs" - }, { - "name": "Brackets" - }, { - "name": "Light Table" - }, { - "name": "Visual Studio" - }, { - "name": "Visual Studio Code" - }] - }, { - "name": "Build Tasks", - "children": [{ - "name": "Minification" - }, { - "name": "Compilation" - }, { - "name": "Concatenatio" - }, { - "name": "Uglification" - }, { - "name": "Image Optimization" - }, { - "name": "Unit Testing" - }] - }, { - "name": "Build Tools", - "children": [{ - "name": "Grunt" - }, { - "name": "Gulp" - }, { - "name": "Brunch" - }, { - "name": "Yeoman" - }, { - "name": "Broccoli" - }] - }, { - "name": "Debug", - "children": [{ - "name": "Developer Tools" - }, { - "name": "Firebug" - }] - }, { - "name": "Base Tools", - "children": [{ - "name": "Node.js" - }, { - "name": "Phantom.js" - }] - }, { - "name": "Quality", - "children": [{ - "name": "JSLint" - }, { - "name": "JSHint" - }, { - "name": "jscs" - }, { - "name": "Closure Linter" - }] - }, { - "name": "Package", - "children": [{ - "name": "npm" - }, { - "name": "Bower" - }] - }, { - "name": "Test", - "children": [{ - "name": "QUnit" - }, { - "name": "Jasmine" - }, { - "name": "Mocha" - }, { - "name": "Selenium" - }, { - "name": "WebDriverJS" - }, { - "name": "Protractor" - }, { - "name": "Chai" - }, { - "name": "Sinon" - }, { - "name": "Karma" - }, { - "name": "Nodeunit" - }] - }, { - "name": "Frameworks/Libraries", - "children": [{ - "name": "JavaScript base library", - "children": [{ - "name": "jQuery" - }, { - "name": "Prototype" - }, { - "name": "Zepto" - }, { - "name": "MooTool" - }, { - "name": "Underscore" - }] - }, { - "name": "Modular", - "children": [{ - "name": "ES6 Module" - }, { - "name": "CommonJS", - "children": [{ - "name": "webpack" - }, { - "name": "browserify" - }] - }, { - "name": "AMD", - "children": [{ - "name": "RequireJS" - }] - }] - }, { - "name": "JavaScript framework", - "children": [{ - "name": "AngularJS" - }, { - "name": "Backbone" - }, { - "name": "Knockout" - }, { - "name": "Ember" - }, { - "name": "React" - }, { - "name": "polymer" - }, { - "name": "Extjs" - }, { - "name": "Dojo" - }, { - "name": "Deft.js" - }, { - "name": "Vue" - }] - }, { - "name": "UI framework", - "children": [{ - "name": "Bootstrap" - }, { - "name": "ZURB" - }, { - "name": "YUI" - }, { - "name": "Toast" - }, { - "name": "YAML" - }, { - "name": "ResponsiveGS" - }, { - "name": "Semantic UI" - }, { - "name": "Foundation" - }, { - "name": "Material UI" - }, { - "name": "jQuery UI" - }] - }, { - "name": "WebSocket", - "children": [{ - "name": "Socket.io" - }, { - "name": "web-socket-js" - }] - }, { - "name": "Data Visualization", - "children": [{ - "name": "D3" - }, { - "name": "Echarts" - }, { - "name": "HighCharts" - }, { - "name": "Vis.js" - }, { - "name": "Flot" - }] - }, { - "name": "WebGL", - "children": [{ - "name": "Three.js" - }, { - "name": "Babylon.js" - }, { - "name": "Pixi.js" - }] - }, { - "name": "CSS3 Animation", - "children": [{ - "name": "Animate.css" - }, { - "name": "bounce.js" - }, { - "name": "Effeckt.css" - }, { - "name": "move.js" - }] - }] - }, { - "name": "CSS Pre-processors", - "children": [{ - "name": "SCSS" - }, { - "name": "LESS", - "children": [{ - "name": "Hat" - }] - }, { - "name": "SASS", - "children": [{ - "name": "Compass" - }, { - "name": "Bourbon" - }, { - "name": "Gumby" - }] - }, { - "name": "Stylus", - "children": [{ - "name": "Nib" - }] - }] - }, { - "name": "Template", - "children": [{ - "name": "Markdown" - }, { - "name": "Handlebars" - }, { - "name": "Haml" - }, { - "name": "Slim Ruby" - }, { - "name": "Jade" - }, { - "name": "Ejs" - }, { - "name": "Spacebars" - }] - }, { - "name": "Modernisation", - "children": [{ - "name": "Normalize" - }, { - "name": "Reset" - }] - }, { - "name": "Functional", - "children": [{ - "name": "backon.js" - }, { - "name": "immutable.js" - }] - }, { - "name": "Flow Controller", - "children": [{ - "name": "ES6", - "children": [{ - "name": "Promise", - "children": [{ - "name": "Bluebird" - }, { - "name": "q" - }, { - "name": "When.js" - }] - }, { - "name": "Generator" - }] - }, { - "name": "ES7", - "children": [{ - "name": "yield" - }, { - "name": "await" - }] - }, { - "name": "async" - }, { - "name": "co" - }] - }, { - "name": "Best Practices", - "children": [{ - "name": "SEO" - }, { - "name": "Responsiveness" - }, { - "name": "CDN" - }] - }, { - "name": "Security", - "children": [{ - "name": "Sandbox" - }, { - "name": "XSS" - }, { - "name": "CORS" - }] - }, { - "name": "Intermediate Languages", - "children": [{ - "name": "CoffeeScript" - }, { - "name": "TypeScript" - }, { - "name": "Dart" - }, { - "name": "LiveScript" - }, { - "name": "ClojureScript" - }] - }, { - "name": "Mobile App Builders", - "children": [{ - "name": "PhoneGap / Cordova" - }, { - "name": "MUI" - }, { - "name": "React Native" - }] - }, { - "name": "Mobile UI", - "children": [{ - "name": "Sencha" - }, { - "name": "jQuery Mobile" - }, { - "name": "Kendo UI" - }, { - "name": "Jo" - }, { - "name": "WinkUI" - }, { - "name": "DojoMobile" - }, { - "name": "Lungo" - }] - }] -} +{ + "name": "Web Front End", + "languages": { + "zh-cn": "Web前端开发技术栈", + "es-es": "Web Front End" + }, + "children": [{ + "name": "Browser", + "languages": { + "zh-cn": "浏览器", + "es-es": "Navegadores" + }, + "children": [{ + "name": "Internet Explorer", + "url": "http://windows.microsoft.com/en-us/internet-explorer/download-ie" + }, { + "name": "Chrome", + "url": "http://www.google.com/chrome/" + }, { + "name": "Firefox", + "url": "https://www.mozilla.org/" + }, { + "name": "Safari", + "url": "http://www.apple.com/safari/" + }, { + "name": "Opera", + "url": "http://www.opera.com/" + }, { + "name": "Edge", + "url": "https://www.microsoft.com/en-us/windows/microsoft-edge" + }, { + "name": "Netscape ;-)", + "url": "https://en.wikipedia.org/wiki/Netscape" + }] + }, { + "name": "Protocol", + "languages": { + "zh-cn": "协议", + "es-es": "Protocolos" + }, + "children": [{ + "name": "HTTP/1.1", + "url": "https://www.ietf.org/rfc/rfc2616.txt", + "children": [{ + "name": "URI", + "languages": { + "zh-cn": "链接" + } + }, { + "name": "Session", + "languages": { + "zh-cn": "会话", + "es-es": "Sesión" + } + }, { + "name": "Authentication", + "languages": { + "zh-cn": "授权", + "es-es": "Autenticación" + } + }, { + "name": "Request", + "languages": { + "zh-cn": "请求", + "es-es": "Petición" + } + }, { + "name": "Response", + "languages": { + "zh-cn": "响应", + "es-es": "Respuesta" + } + }] + }, { + "name": "HTTP/2", + "url": "https://en.wikipedia.org/wiki/HTTP/2", + "children": [{ + "name": "Compression", + "languages": { + "zh-cn": "压缩", + "es-es": "Compresión" + } + }, { + "name": "Minification", + "languages": { + "zh-cn": "打包", + "es-es": "Minificación" + } + }, { + "name": "Server Push", + "languages": { + "zh-cn": "服务器端推送" + } + }] + }, { + "name": "WebSocket" + }] + }, { + "name": "The 3 Pillars", + "languages": { + "zh-cn": "Web三剑客" + }, + "children": [{ + "name": "HTML (HyperText Markup Language)" + }, { + "name": "CSS (Cascading Style Sheets)" + }, { + "name": "JavaScript" + }] + }, { + "name": "Standards", + "languages": { + "zh-cn": "标准", + "es-es": "Estándares" + }, + "children": [{ + "name": "W3C", + "children": [{ + "name": "HTML" + }, { + "name": "CSS" + }, { + "name": "XHTML" + }, { + "name": "XML" + }] + }] + }, { + "name": "Core Concepts", + "languages": { + "zh-cn": "核心概念", + "es-es": "Conceptons principales" + }, + "children": [{ + "name": "HTML", + "children": [{ + "name": "DOM", + "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" + }, { + "name": "Element", + "url": "https://developer.mozilla.org/en-US/docs/Web/API/Element" + }, { + "name": "Attribute" + }] + }, { + "name": "JavaScript", + "children": [{ + "name": "Prototype", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype" + }, { + "name": "Scope", + "url": "https://developer.mozilla.org/en-US/docs/Glossary/Scope" + }, { + "name": "Closure", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" + }, { + "name": "JSON (JavaSript Object Notation)", + "url": "https://developer.mozilla.org/en-US/docs/Glossary/JSON" + }, { + "name": "AJAX (Asynchronous JavaScript and XML)", + "url": "https://developer.mozilla.org/en-US/docs/AJAX" + }] + }, { + "name": "CSS", + "children": [{ + "name": "Selector" + }, { + "name": "Priority" + }, { + "name": "Specificity" + }, { + "name": "Box Model" + }] + }] + }, { + "name": "Rendering Engine", + "languages": { + "zh-cn": "渲染引擎", + "es-es": "Motores de renderizado" + }, + "children": [{ + "name": "Trident (IE)", + "url": "https://en.wikipedia.org/wiki/Trident_(layout_engine)" + }, { + "name": "Blink / prev. WebKit (Chrome)", + "url": "http://www.chromium.org/blink", + "github": "" + }, { + "name": "Gecko (Firefox)", + "url": "https://developer.mozilla.org/en-us/docs/Mozilla/Gecko" + }, { + "name": "WebKit (Safari)", + "url": "http://www.webkit.org/" + }, { + "name": "Blink / prev. Presto (Opera)", + "url": "http://www.chromium.org/blink", + "github": "" + }, { + "name": "EdgeHTML (Edge)", + "url": "https://en.wikipedia.org/wiki/EdgeHTML" + }] + }, { + "name": "JavaScript Engine", + "languages": { + "zh-cn": "脚本引擎", + "es-es": "Motores JavaScript" + }, + "children": [{ + "name": "JScript (IE8- / ASP)", + "url": "https://en.wikipedia.org/wiki/JScript" + }, { + "name": "Chakra (IE9+ / Edge)", + "url": "https://en.wikipedia.org/wiki/Chakra_(JScript_engine)" + }, { + "name": "V8 (Chrome / Opera / Nodejs / MongoDB)", + "url": "https://developers.google.com/v8/?hl=zh-CN", + "github": "https://github.com/v8/v8/", + "stargazers": 2577 + }, { + "name": "SpiderMonkey (Firefox)", + "url": " https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey" + }, { + "name": "JavaScriptCore (Safari)", + "url": "https://en.wikipedia.org/wiki/WebKit#JavaScriptCore" + }] + }, { + "name": "Runtime", + "languages": { + "zh-cn": "运行时", + "es-es": "Tiempo de ejecución" + }, + "children": [{ + "name": "Cookie" + }, { + "name": "Local Cache" + }, { + "name": "Session Storage" + }, { + "name": "Local Storage" + }, { + "name": "Components", + "languages": { + "es-es": "Componentes" + }, + "children": [{ + "name": "Extensions", + "languages": { + "es-es": "Extensiones" + } + }, { + "name": "Plugins" + }] + }, { + "name": "Resources", + "children": [{ + "name": "Images" + }, { + "name": "Icons" + }, { + "name": "Fonts" + }, { + "name": "Audios" + }, { + "name": "Videos" + }] + }] + }, { + "name": "Editors", + "languages": { + "zh-cn": "编辑器", + "es-es": "Editores de texto" + }, + "children": [{ + "name": "Sublime Text", + "url": "http://www.sublimetext.com/" + }, { + "name": "WebStorm", + "url": "https://www.jetbrains.com/webstorm/" + }, { + "name": "Atom", + "url": "https://atom.io/", + "github": "https://github.com/atom/atom/", + "stargazers": 19510 + }, { + "name": "Vim", + "url": "http://www.vim.org/" + }, { + "name": "Emacs", + "url": "https://www.gnu.org/software/emacs/" + }, { + "name": "Brackets", + "url": "http://brackets.io/", + "github": "https://github.com/adobe/brackets/", + "stargazers": 23091 + }, { + "name": "Light Table", + "url": "http://lighttable.com/", + "github": "https://github.com/LightTable/LightTable/", + "stargazers": 7926 + }, { + "name": "Visual Studio", + "url": "https://www.visualstudio.com/" + }, { + "name": "Visual Studio Code (Linux & Mac)", + "url": "https://code.visualstudio.com/", + "github": "https://github.com/Microsoft/vscode", + "stargazers": 6652 + }, { + "name": "Dreamweaver ;-)" + }, { + "name": "FrontPage / SharePoint Designer ;-)" + }] + }, { + "name": "Build Tasks", + "languages": { + "zh-cn": "编译任务" + }, + "children": [{ + "name": "Minification", + "languages": { + "zh-cn": "精简", + "es-es": "Minificación" + } + }, { + "name": "Compilation", + "languages": { + "zh-cn": "编译", + "es-es": "Compilación" + } + }, { + "name": "Concatenation", + "languages": { + "zh-cn": "合并", + "es-es": "Concatenación" + } + }, { + "name": "Uglification", + "languages": { + "zh-cn": "混淆" + } + }, { + "name": "Image Optimization", + "languages": { + "zh-cn": "图像优化", + "es-es": "Optimización de imágenes" + } + }, { + "name": "Unit Testing", + "languages": { + "zh-cn": "单元测试", + "es-es": "Tests unitarios" + } + }] + }, { + "name": "Build Tools", + "languages": { + "zh-cn": "编译工具", + "es-es": "Herramientas de tareas" + }, + "children": [{ + "name": "Grunt", + "url": "http://www.gruntjs.com/", + "github": "https://github.com/cowboy/jquery-tiny-pubsub/", + "stargazers": 662 + }, { + "name": "Gulp", + "url": "http://gulpjs.com/", + "github": "https://github.com/gulpjs/gulp/", + "stargazers": 15661 + }, { + "name": "Brunch", + "url": "http://brunch.io/", + "github": "https://github.com/brunch/brunch/", + "stargazers": 4472 + }, { + "name": "Yeoman", + "url": "http://yeoman.io/" + }, { + "name": "Broccoli", + "github": "https://github.com/broccolijs/broccoli/", + "stargazers": 2391 + }] + }, { + "name": "Debug", + "languages": { + "zh-cn": "调试", + "es-es": "Depuración" + }, + "children": [{ + "name": "Developer Tools", + "url": "https://developer.chrome.com/devtools" + }, { + "name": "Firebug", + "url": "http://getfirebug.com/", + "github": "https://github.com/firebug/firebug/", + "stargazers": 924 + }] + }, { + "name": "Base Tools", + "languages": { + "zh-cn": "基础工具", + "es-es": "Herramientas base" + }, + "children": [{ + "name": "Node.js", + "url": "https://nodejs.org/", + "github": "https://github.com/joyent/node/", + "stargazers": 37851 + }, { + "name": "Phantom.js", + "url": "http://phantomjs.org/", + "github": "https://github.com/ariya/phantomjs/", + "stargazers": 14950 + }, { + "name": "SpiderMonkey", + "url": "https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" + }] + }, { + "name": "Quality", + "languages": { + "zh-cn": "质量控制", + "es-es": "Calidad" + }, + "children": [{ + "name": "JSLint", + "url": "http://www.jslint.com/", + "github": "https://github.com/douglascrockford/JSLint/", + "stargazers": 2382 + }, { + "name": "JSHint", + "url": "http://jshint.com/", + "github": "https://github.com/jshint/jshint/", + "stargazers": 5384 + }, { + "name": "jscs", + "url": "http://jscs.info/", + "github": "https://github.com/jscs-dev/node-jscs", + "stargazers": 3982 + }, { + "name": "Closure Linter", + "url": "https://developers.google.com/closure/utilities/" + }] + }, { + "name": "Package", + "languages": { + "zh-cn": "包管理", + "es-es": "Gestores de paquetes" + }, + "children": [{ + "name": "npm", + "url": "https://www.npmjs.com/", + "github": "https://github.com/npm/npm/", + "stargazers": 6816 + }, { + "name": "Bower", + "url": "http://bower.io/", + "github": "https://github.com/bower/bower/", + "stargazers": 12747 + }] + }, { + "name": "Test", + "languages": { + "zh-cn": "测试" + }, + "children": [{ + "name": "Tools", + "languages": { + "zh-cn": "工具", + "es-es": "Herramientas" + }, + "children": [{ + "name": "QUnit", + "url": "https://qunitjs.com/", + "github": "https://github.com/jquery/qunit/", + "stargazers": 3228 + }, { + "name": "Jasmine", + "url": "http://jasmine.github.io/", + "github": "https://github.com/jasmine/jasmine/", + "stargazers": 9303 + }, { + "name": "Mocha", + "url": "https://mochajs.org/", + "github": "https://github.com/mochajs/mocha/", + "stargazers": 7226 + }, { + "name": "Selenium", + "url": "http://www.seleniumhq.org/", + "github": "https://github.com/SeleniumHQ/selenium/", + "stargazers": 1563 + }, { + "name": "WebDriverIO", + "url": "http://webdriver.io/", + "github": "https://github.com/webdriverio/webdriverio/", + "stargazers": 1073 + }, { + "name": "Protractor", + "url": "http://www.protractortest.org/" + }, { + "name": "Chai", + "url": "http://chaijs.com/", + "github": "https://github.com/jfirebaugh/konacha/", + "stargazers": 977 + }, { + "name": "Sinon.JS", + "url": "http://sinonjs.org/", + "github": "https://github.com/cjohansen/Sinon.JS/", + "stargazers": 2230 + }, { + "name": "Karma", + "url": "http://karma-runner.github.io/", + "github": "https://github.com/karma-runner/karma/", + "stargazers": 5550 + }, { + "name": "nodeunit", + "github": "https://github.com/caolan/nodeunit/", + "stargazers": 1608 + }, { + "name": "tape", + "github": "http://github.com/substack/tape", + "stargazers": 1264 + }, { + "name": "nightmare", + "url": "http://nightmarejs.org/", + "github": "https://github.com/segmentio/nightmare", + "stargazers": 6110 + }] + }, { + "name": "Composite", + "languages": { + "zh-cn": "在线工具" + }, + "children": [{ + "name": "Sauce Labs", + "url": "https://saucelabs.com/" + }, { + "name": "Browser Stack", + "url": "https://www.browserstack.com/" + }, { + "name": "Browser Shots", + "url": "http://browsershots.org/" + }, { + "name": "Browserling", + "url": "https://www.browserling.com/" + }, { + "name": "Browser Sandbox", + "url": "https://spoon.net/browsers/" + }, { + "name": "Cross Browser Testing", + "url": "https://crossbrowsertesting.com/" + }, { + "name": "Browsera", + "url": "http://www.browsera.com/" + }, { + "name": "SortSite", + "url": "http://www.powermapper.com/products/sortsite/checks/browser-compatibility/" + }] + }] + }, { + "name": "Frameworks / Libraries", + "languages": { + "zh-cn": "库 / 框架", + "es-es": "Librerías y frameworks" + }, + "children": [{ + "name": "JavaScript base library", + "languages": { + "zh-cn": "基础库" + }, + "children": [{ + "name": "jQuery", + "url": "https://jquery.com/", + "github": "https://github.com/jquery/jquery/", + "stargazers": 35652 + }, { + "name": "Prototype", + "url": "http://prototypejs.org/", + "github": "https://github.com/sstephenson/prototype/", + "stargazers": 3022 + }, { + "name": "Zepto", + "url": "http://zeptojs.com/", + "github": "https://github.com/madrobby/zepto/", + "stargazers": 9109 + }, { + "name": "MooTool", + "url": "http://mootools.net/", + "github": "https://github.com/mootools/mootools-core/", + "stargazers": 2168 + }] + }, { + "name": "Modular", + "languages": { + "zh-cn": "模块化", + "es-es": "Módulos" + }, + "children": [{ + "name": "ES6 Module" + }, { + "name": "CommonJS", + "children": [{ + "name": "webpack", + "url": "http://webpack.github.io/", + "github": "https://github.com/webpack/webpack/", + "stargazers": 7271 + }, { + "name": "browserify", + "url": "http://browserify.org/", + "github": "https://github.com/substack/node-browserify/", + "stargazers": 8004 + }] + }, { + "name": "AMD", + "children": [{ + "name": "RequireJS", + "url": "http://requirejs.org/", + "github": "https://github.com/jrburke/requirejs/", + "stargazers": 8002 + }] + }, { + "name": "UMD", + "children": [{ + "name": "umd", + "github": "https://github.com/umdjs/umd/", + "stargazers": 2764 + }] + }] + }, { + "name": "JavaScript Framework", + "languages": { + "zh-cn": "框架" + }, + "children": [{ + "name": "AngularJS", + "url": "https://angularjs.org/", + "github": "https://github.com/angular/angular.js/", + "stargazers": 41780 + }, { + "name": "Backbone", + "url": "http://backbonejs.org/", + "github": "https://github.com/jashkenas/backbone/", + "stargazers": 22720 + }, { + "name": "Knockout", + "url": "http://knockoutjs.com/", + "github": "https://github.com/SteveSanderson/knockout/", + "stargazers": 6660 + }, { + "name": "Ember", + "url": "http://emberjs.com/", + "github": "https://github.com/emberjs/ember.js/", + "stargazers": 14555 + }, { + "name": "React", + "url": "http://facebook.github.io/react/", + "github": "https://github.com/facebook/react/", + "stargazers": 26617 + }, { + "name": "polymer", + "url": "https://www.polymer-project.org/", + "github": "https://github.com/polymer/polymer/", + "stargazers": 12217 + }, { + "name": "Deft.js", + "url": "http://deftjs.org/", + "github": "https://github.com/deftjs/DeftJS/", + "stargazers": 308 + }, { + "name": "Vue", + "url": "http://vuejs.org/", + "github": "https://github.com/yyx990803/vue/", + "stargazers": 6261 + }, { + "name": "Riot", + "url": "http://riotjs.com/", + "github": "https://github.com/riot/riot", + "stargazers": 7875 + }] + }, { + "name": "UI framework", + "languages": { + "zh-cn": "UI框架" + }, + "children": [{ + "name": "Bootstrap", + "url": "http://getbootstrap.com/", + "github": "https://github.com/twbs/bootstrap/", + "stargazers": 84763 + }, { + "name": "Semantic UI", + "url": "http://semantic-ui.com/", + "github": "https://github.com/Semantic-Org/Semantic-UI/", + "stargazers": 19552 + }, { + "name": "Foundation", + "url": "http://foundation.zurb.com/", + "github": "https://github.com/zurb/foundation/", + "stargazers": 20711 + }, { + "name": "Material UI", + "url": "http://material-ui.com/", + "github": "https://github.com/callemall/material-ui/", + "stargazers": 10048 + }, { + "name": "WinJS", + "url": "https://dev.windows.com/en-us/develop/winjs", + "github": "https://github.com/winjs/winjs", + "stargazers": 3621 + }, { + "name": "Pure", + "url": "http://purecss.io/", + "github": "https://github.com/yahoo/pure/", + "stargazers": 12367 + }, { + "name": "Amaze UI", + "url": "http://amazeui.org/", + "github": "https://github.com/allmobilize/amazeui", + "stargazers": 5965 + }] + }, { + "name": "WebSocket", + "children": [{ + "name": "Socket.io", + "url": "http://socket.io/", + "github": "https://github.com/Automattic/socket.io/", + "stargazers": 19169 + }, { + "name": "web-socket-js", + "github": "https://github.com/gimite/web-socket-js/", + "stargazers": 2115 + }] + }, { + "name": "Data Visualization", + "languages": { + "zh-cn": "数据可视化", + "es-es": "Visualización de datos" + }, + "children": [{ + "name": "D3", + "url": "http://d3js.org/", + "github": "https://github.com/mbostock/d3/wiki/Gallery/", + "stargazers": 40794 + }, { + "name": "Echarts", + "url": "http://echarts.baidu.com", + "github": "https://github.com/ecomfe/esl/", + "stargazers": 396 + }, { + "name": "HighCharts", + "url": "http://www.highcharts.com/", + "github": "https://github.com/highslide-software/highcharts.com/", + "stargazers": 4041 + }, { + "name": "Vis.js", + "url": "http://visjs.org/", + "github": "https://github.com/almende/vis/", + "stargazers": 2993 + }, { + "name": "Flot", + "url": "http://www.flotcharts.org/", + "github": "https://github.com/flot/flot/", + "stargazers": 4531 + }] + }, { + "name": "WebGL", + "children": [{ + "name": "Three.js", + "url": "http://threejs.org/", + "github": "https://github.com/mrdoob/three.js/", + "stargazers": 20758 + }, { + "name": "Babylon.js", + "url": "http://www.babylonjs.com/", + "github": "https://github.com/BabylonJS/Babylon.js/", + "stargazers": 2349 + }, { + "name": "Pixi.js", + "url": "http://www.pixijs.com/", + "github": "https://github.com/GoodBoyDigital/pixi.js/", + "stargazers": 8361 + }] + }, { + "name": "CSS3 Animation", + "languages": { + "zh-cn": "CSS3 动画" + }, + "children": [{ + "name": "Animate.css", + "url": "https://daneden.github.io/animate.css/", + "github": "https://github.com/daneden/animate.css/", + "stargazers": 24549 + }, { + "name": "bounce.js", + "url": "http://bouncejs.com/", + "github": "https://github.com/tictail/bounce.js/", + "stargazers": 3727 + }, { + "name": "Effeckt.css", + "url": "https://h5bp.github.io/Effeckt.css/", + "github": "https://github.com/h5bp/Effeckt.css/", + "stargazers": 9777 + }, { + "name": "move.js", + "url": "https://visionmedia.github.io/move.js/", + "github": "https://github.com/visionmedia/move.js/", + "stargazers": 2830 + }] + }, { + "name": "Flow Controller", + "languages": { + "zh-cn": "流程控制", + "es-es": "Control de flujo" + }, + "children": [{ + "name": "ES6", + "children": [{ + "name": "Promise" + }, { + "name": "Generator" + }] + }, { + "name": "ES7", + "children": [{ + "name": "yield" + }, { + "name": "await" + }] + }, { + "name": "async", + "github": "https://github.com/caolan/async/", + "stargazers": 14156 + }, { + "name": "co", + "github": "https://github.com/tj/co/", + "stargazers": 3502 + }, { + "name": "Promise", + "children": [{ + "name": "Bluebird", + "github": "https://github.com/petkaantonov/bluebird/", + "stargazers": 7530 + }, { + "name": "q", + "github": "https://github.com/kriskowal/q/", + "stargazers": 9460 + }, { + "name": "when.js", + "github": "https://github.com/cujojs/when/", + "stargazers": 2579 + }] + }] + }, { + "name": "Functional", + "languages": { + "zh-cn": "函数式编程", + "es-es": "Funcional" + }, + "children": [{ + "name": "bacon.js", + "url": "http://baconjs.github.io/", + "github": "https://github.com/baconjs/bacon.js/", + "stargazers": 4498 + }, { + "name": "immutable.js", + "url": "https://facebook.github.io/immutable-js/", + "github": "https://github.com/facebook/immutable-js/", + "stargazers": 7999 + }, { + "name": "ramda", + "url": "http://ramdajs.com/", + "github": "http://github.com/ramda/ramda", + "stargazers": 2792 + }, { + "name": "underscore.js", + "url": "http://underscorejs.org/", + "github": "https://github.com/jashkenas/underscore", + "stargazers": 15823 + }, { + "name": "lodash", + "url": "https://lodash.com/", + "github": "https://github.com/lodash/lodash", + "stargazers": 11071 + }, { + "name": "ReactiveX", + "url": "http://reactivex.io/", + "github": "https://github.com/Reactive-Extensions/RxJS", + "stargazers": 6720 + }] + }, { + "name": "Mobile UI", + "languages": { + "zh-cn": "手机 UI 框架" + }, + "children": [{ + "name": "jQuery Mobile", + "url": "https://jquerymobile.com/", + "github": "https://github.com/jquery/jquery-mobile/", + "stargazers": 9654 + }, { + "name": "Jo", + "url": "http://joapp.com/", + "github": "https://github.com/davebalmer/jo/", + "stargazers": 1227 + }, { + "name": "Dojo Mobile", + "url": "https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html" + }, { + "name": "Lungo", + "url": "http://lungo.tapquo.com/", + "github": "https://github.com/tapquo/Lungo.js/", + "stargazers": 2457 + }] + }] + }, { + "name": "CSS Pre-processors", + "languages": { + "zh-cn": "CSS 预处理器", + "es-es": "Pre-procesadores CSS" + }, + "children": [{ + "name": "LESS", + "children": [{ + "name": "LESS", + "url": "http://lesscss.org/", + "github": "https://github.com/less/less.js/", + "stargazers": 12679 + }, { + "name": "Hat", + "url": "http://lesshat.madebysource.com/", + "github": "https://github.com/csshat/lesshat/", + "stargazers": 2057 + }] + }, { + "name": "Sass(SCSS)", + "children": [{ + "name": "Compass", + "url": "http://compass-style.org/", + "github": "https://github.com/chriseppstein/compass/", + "stargazers": 6406 + }, { + "name": "Bourbon", + "url": "http://bourbon.io/", + "github": "https://github.com/thoughtbot/bourbon/", + "stargazers": 6178 + }, { + "name": "Gumby", + "url": "http://www.gumbyframework.com/", + "github": "https://github.com/GumbyFramework/Gumby/", + "stargazers": 2920 + }] + }, { + "name": "Stylus", + "children": [{ + "name": "nib", + "github": "https://github.com/tj/nib/", + "stargazers": 1520 + }] + }] + }, { + "name": "Future Standards", + "languages": { + "zh-cn": "未来标准" + }, + "children": [{ + "name": "babel", + "github": "https://github.com/babel/babel", + "url": "https://babeljs.io/", + "stargazers": 9712 + }] + }, { + "name": "Template", + "languages": { + "zh-cn": "模板引擎", + "es-es": "Plantillas" + }, + "children": [{ + "name": "Handlebars", + "url": "http://handlebarsjs.com/", + "github": "https://github.com/wycats/handlebars.js/", + "stargazers": 8808 + }, { + "name": "Haml", + "url": "http://haml.info/", + "github": "https://github.com/haml/haml/", + "stargazers": 2778 + }, { + "name": "Slim", + "url": "http://slim-lang.com/", + "github": "https://github.com/slim-template/slim/", + "stargazers": 3480 + }, { + "name": "Jade", + "url": "http://jade-lang.com/", + "github": "https://github.com/jadejs/jade/", + "stargazers": 8958 + }, { + "name": "Ejs", + "url": "http://www.embeddedjs.com/" + }, { + "name": "Spacebars", + "url": "http://meteorcapture.com/spacebars/" + }, { + "name": "mustache", + "url": "http://mustache.github.io/", + "github": "https://github.com/janl/mustache.js/", + "stargazers": 8139 + }] + }, { + "name": "Modernisation", + "languages": { + "zh-cn": "统一化" + }, + "children": [{ + "name": "Normalize", + "url": "http://necolas.github.io/normalize.css/", + "github": "https://github.com/necolas/normalize.css/", + "stargazers": 17966 + }, { + "name": "Reset" + }] + }, { + "name": "Best Practices", + "languages": { + "zh-cn": "最佳实践", + "es-es": "Buenas prácticas" + }, + "children": [{ + "name": "SEO", + "url": "https://en.wikipedia.org/wiki/Search_engine_optimization" + }, { + "name": "Responsiveness" + }, { + "name": "CDN", + "url": "https://en.wikipedia.org/wiki/Content_delivery_network" + }] + }, { + "name": "Security", + "languages": { + "zh-cn": "安全", + "es-es": "Seguridad" + }, + "children": [{ + "name": "Sandbox" + }, { + "name": "XSS", + "url": "https://en.wikipedia.org/wiki/Cross-site_scripting" + }, { + "name": "CORS", + "url": "http://www.w3.org/TR/cors/" + }] + }, { + "name": "Intermediate Languages", + "languages": { + "zh-cn": "中间语言", + "es-es": "Lenguajes intermedios" + }, + "children": [{ + "name": "CoffeeScript", + "url": "http://coffeescript.org/", + "github": "https://github.com/jashkenas/coffeescript/", + "stargazers": 11755 + }, { + "name": "TypeScript", + "url": "http://www.typescriptlang.org/", + "github": "https://github.com/Microsoft/TypeScript/", + "stargazers": 6379 + }, { + "name": "ClojureScript", + "github": "https://github.com/clojure/clojurescript/", + "stargazers": 4876 + }, { + "name": "JSX (Facebook)", + "url": "http://facebook.github.io/react/docs/jsx-in-depth.html" + }] + }, { + "name": "Mobile Application Development", + "languages": { + "zh-cn": "移动应用开发", + "es-es": "Empaquetadores de Apps para móvil" + }, + "children": [{ + "name": "PhoneGap / Cordova", + "url": "https://cordova.apache.org/", + "github": "https://github.com/apache/cordova-android/", + "stargazers": 1166 + }, { + "name": "MUI", + "url": "http://dev.dcloud.net.cn/mui/", + "github": "https://github.com/dcloudio/mui/", + "stargazers": 1476 + }, { + "name": "React Native", + "url": "https://facebook.github.io/react-native/", + "github": "https://github.com/facebook/react-native/", + "stargazers": 19802 + }, { + "name": "Ionic", + "url": "http://ionicframework.com/", + "github": "https://github.com/driftyco/ionic/", + "stargazers": 19472 + }] + }, { + "name": "Desktop Application Development", + "languages": { + "zh-cn": "桌面应用开发" + }, + "children": [{ + "name": "Electron", + "url": "http://electron.atom.io/", + "github": "https://github.com/atom/electron", + "stargazers": 16896 + }, { + "name": "NW.js", + "url": "http://nwjs.io/", + "github": "https://github.com/nwjs/nw.js", + "stargazers": 24680 + }] + }] +} diff --git a/ux/dndTree.js b/ux/dndTree.js index 4c46848..3e5c8e0 100644 --- a/ux/dndTree.js +++ b/ux/dndTree.js @@ -1,11 +1,19 @@ -(function() { + +(function() { var isPhantom = /PhantomJS/ig.test(navigator.userAgent); + var locale = location.search.split("locale=").pop().split("&").shift(); + + var parseName = function(object) { + if (!object.languages) return object.name; + return object.languages[locale] || object.name; + } + // Get JSON data - var treeJSON = d3.json("WebFrontEndStack.json", function(error, treeData) { + var treeJSON = d3.json('WebFrontEndStack.json', function(error, treeData) { // Calculate total nodes, max label length var totalNodes = 0; - var maxLabelLength = 0; + var maxLabelLength = []; // variables for drag/drop var selectedNode = null; var draggingNode = null; @@ -32,35 +40,37 @@ // A recursive helper function for performing some setup by walking through all nodes - function visit(parent, visitFn, childrenFn) { + function visit(parent, visitFn, childrenFn, depth) { if (!parent) return; - visitFn(parent); + visitFn(parent, depth); var children = childrenFn(parent); if (children) { var count = children.length; + var d = depth + 1; for (var i = 0; i < count; i++) { - visit(children[i], visitFn, childrenFn); + visit(children[i], visitFn, childrenFn, d); } } } // Call visit function to establish maxLabelLength - visit(treeData, function(d) { + visit(treeData, function(d, depth) { totalNodes++; - maxLabelLength = Math.max(d.name.length, maxLabelLength); - + if (maxLabelLength[depth] == undefined) + maxLabelLength[depth] = 0; + maxLabelLength[depth] = Math.max(parseName(d).length, maxLabelLength[depth]); }, function(d) { return d.children && d.children.length > 0 ? d.children : null; - }); + }, 0); // sort the tree according to the node names function sortTree() { tree.sort(function(a, b) { - return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1; + return parseName(b).toLowerCase() < parseName(a).toLowerCase() ? 1 : -1; }); } // Sort the tree initially incase the JSON isn't in a sorted order. @@ -378,7 +388,11 @@ // Set widths between levels based on maxLabelLength. nodes.forEach(function(d) { - d.y = (d.depth * (maxLabelLength * 10)); //maxLabelLength * 10px + var labelLength = 0; + for (var j = 0; j <= d.depth; j++) { + labelLength += maxLabelLength[j]; + } + d.y = labelLength * 10; //maxLabelLength * 10px // alternatively to keep a fixed scale one can set a fixed depth per level // Normalize for fixed-depth by commenting out below line // d.y = (d.depth * 500); //500px per level. @@ -397,7 +411,12 @@ .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) - .on('click', click); + .on('click', click) + .append("a") + .attr("xlink:href", function(d) { + return d.url || d.github; + }) + .attr("target", "_blank"); nodeEnter.append("circle") .attr('class', 'nodeCircle') @@ -416,7 +435,7 @@ return d.children || d._children ? "end" : "start"; }) .text(function(d) { - return d.name; + return parseName(d); }) .style("fill-opacity", 0); @@ -443,7 +462,7 @@ return d.children || d._children ? "end" : "start"; }) .text(function(d) { - return d.name; + return parseName(d); }); // Change the circle fill depending on whether it has children and is collapsed @@ -542,7 +561,7 @@ zoomListener.scale(0.25); centerNode(root); } - + // });