diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 8f71f43..0000000 --- a/LICENSE +++ /dev/null @@ -1,202 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright {yyyy} {name of copyright owner} - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. - diff --git a/README.es-es.md b/README.es-es.md deleted file mode 100644 index 5e81c10..0000000 --- a/README.es-es.md +++ /dev/null @@ -1,337 +0,0 @@ -# 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 8a15b0a..a9ee247 100644 --- a/README.md +++ b/README.md @@ -1,133 +1,64 @@ -# Overflow Stack -The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): -http://overflowstack.github.io +# 前端技术栈 +作为一名前端开发人员，可能会触碰的知识与技能点，包括浏览器、框架、类库、工具等。作为选择方向与努力的一个一个参考。 -# Localization -中文: -https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md -Español: -https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md - - -# WebFrontEndStack -Web front-end stack: browsers, platforms, libraries, frameworks, tools etc. - -![Image of Web Front End Stack](Web Front End Stack.png) - -# Generate image yourself - -## Prepare for environment -You should have Visual Studio 2010+ installed in Windows. - -1. Install [nodejs](https://nodejs.org). (Shoule be >= iojs 1.8.0) - -2. Install [Phantomjs](http://phantomjs.org). - -3. Install [Python 2.7](https://www.python.org/). - -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. - - -## Options -```bash - - -h, --help Display help message. - -p, --port number (Default: 3000) Set the port what express listening. - -ues, --update_existed_stargazers (Default: false) Update project's stargazers including existed. - --phantomjs The task to generate the image. - --readme The task to update readme. - --updatestargazers The task to update the count of the stargazers. - -``` - - -# What and why? -Have you ever wondered: -* what technologies web front end really includes? -* how many do I possess? - - -I could not find a really comprehensive diagram that shows the web front end technology stack, so I come up with my own version. - -There might be issues here and there, like the category, the individual ones, but the beauty is you can modify it as you want. - -You can have a graphical preview here (use mouse to move / zoom): - -https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - - -# The Web Front End Stack - - -- Web Front End - - Browser +- 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) - - Protocol + - [Netscape](https://en.wikipedia.org/wiki/Netscape) 💀 + - 渲染引擎 + - [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) + - 协议 - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) - - URI - - Session - - Authentication - - Request - - Response + - 链接 + - 会话 + - 授权 + - 请求 + - 响应 - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) - - Compression - - Minification - - Server Push + - 压缩 + - 打包 + - 服务器端推送 - WebSocket - - The 3 Pillars + - Web三剑客 - HTML (HyperText Markup Language) - - CSS (Cascading Style Sheets) - - JavaScript - - Standards - - W3C - - HTML - - CSS - - XHTML - - XML - - Core Concepts - - 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 + - CSS (Cascading Style Sheets) + - Selector + - Priority + - Specificity + - Box Model - 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 - - Rendering Engine - - [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 - - [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 + - 标准 + - W3C + - HTML + - XHTML + - CSS + - XML + - 运行时 - Cookie - Local Cache - Session Storage @@ -141,7 +72,8 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - Fonts - Audios - Videos - - Editors + - 代码编辑器 + - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) - [Sublime Text](http://www.sublimetext.com/) - [WebStorm](https://www.jetbrains.com/webstorm/) - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) @@ -150,40 +82,38 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [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 - - Concatenation - - Uglification - - Image Optimization - - Unit Testing - - Build Tools + - 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/) - - Debug + - 调试工具 - [Developer Tools](https://developer.chrome.com/devtools) - - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) - - Base Tools + - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) 😇 + - 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 + - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) + - JS 编码质量与风格控制 - [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](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) + - [yarn](https://yarnpkg.com) [[GitHub]](https://github.com/yarnpkg/yarn) - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) - - [yarn](https://yarnpkg.com/) [[GitHub]](https://github.com/yarnpkg/yarn/) - - Test - - 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/) @@ -196,8 +126,7 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - 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/) @@ -206,13 +135,13 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [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](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) + - 库 / 框架 + - 工具库 - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) + - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) - [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](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) @@ -221,7 +150,7 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) - UMD - umd [[GitHub]](https://github.com/umdjs/umd/) - - JavaScript Framework + - JS 框架 - [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/) @@ -231,7 +160,7 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [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 + - 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/) @@ -239,11 +168,10 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [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](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) - - Data Visualization + - 数据可视化 - [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/) @@ -253,12 +181,14 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [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 + - 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/) - - Flow Controller + - CSS 重置 + - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) + - 异步编程 - ES6 - Promise - Generator @@ -271,19 +201,19 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - 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 + - 手机 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 + - CSS 预处理器 - LESS - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) @@ -293,9 +223,9 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [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) - - Template + - 模板引擎 - [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/) @@ -303,29 +233,33 @@ https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm - [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 - - Best Practices + - 最佳实践 - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) - Responsiveness - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) - - Security + - 安全 - Sandbox + - gf3 [[GitHub]](https://github.com/gf3/sandbox) - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) + - [XSS'OR](http://xssor.io/) [[GitHub]](https://github.com/evilcos/xssor2) - [CORS](http://www.w3.org/TR/cors/) - - Intermediate Languages + - 中间语言 - [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) - - + - 多端技术 + - [Weex](https://weex.apache.org/) [[GitHub]](https://github.com/apache/incubator-weex/) + - [Rax](https://alibaba.github.io/rax/) [[GitHub]](https://github.com/apache/incubator-weex/) + - 小程序多端技术 + - [Taro](https://taro.aotu.io/) [[GitHub]](https://github.com/NervJS/taro) + - [megalo](https://megalojs.org/) [[Github]](https://github.com/kaola-fed/megalo) + \ No newline at end of file diff --git a/README.zh-cn.md b/README.zh-cn.md deleted file mode 100644 index 1153031..0000000 --- a/README.zh-cn.md +++ /dev/null @@ -1,334 +0,0 @@ -# 爆栈 -系统开发技术栈、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 deleted file mode 100644 index 58809ce..0000000 Binary files a/Web Front End Stack.es-es.png and /dev/null differ diff --git a/Web Front End Stack.png b/Web Front End Stack.png deleted file mode 100644 index 172b9d0..0000000 Binary files a/Web Front End Stack.png and /dev/null differ diff --git a/Web Front End Stack.zh-cn.png b/Web Front End Stack.zh-cn.png deleted file mode 100644 index da4aa92..0000000 Binary files a/Web Front End Stack.zh-cn.png and /dev/null differ diff --git a/index.js b/index.js deleted file mode 100644 index e99f91d..0000000 --- a/index.js +++ /dev/null @@ -1,294 +0,0 @@ -/* global require, setTimeout, console, __dirname, process*/ -/** - * Builder - * @author zsx - */ -(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 deleted file mode 100644 index c01eba2..0000000 --- a/package.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "WebFrontEndStack", - "version": "2.0.0", - "description": "Generate a image for web front-end stack.", - "main": "index.js", - "scripts": { - "build": "node index --phantomjs --readme", - "start": "node index" - }, - "repository": { - "type": "git", - "url": "https://github.com/unruledboy/WebFrontEndStack.git" - }, - "keywords": [ - "Web", - "FrontEnd", - "Stack" - ], - "author": [ - "unruledboy ", - "zsx " - ], - "license": "ISC", - "bugs": { - "url": "https://github.com/unruledboy/WebFrontEndStack/issues" - }, - "homepage": "https://github.com/unruledboy/WebFrontEndStack", - "dependencies": { - "async": "^1.4.2", - "command-line-args": "^1.0.1", - "express": "^4.13.3", - "phantomjs-promise": "0.0.1", - "request": "^2.61.0" - }, - "devDependencies": { - "phantomjs": "^1.9.18", - "weak": "^1.0.0" - } -} diff --git a/ux/WebFrontEndStack.htm b/ux/WebFrontEndStack.htm deleted file mode 100644 index 26ded2c..0000000 --- a/ux/WebFrontEndStack.htm +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - Web Front End Stack - - - - - - - - - -
-
-
-

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 deleted file mode 100644 index f2e9017..0000000 --- a/ux/WebFrontEndStack.json +++ /dev/null @@ -1,1119 +0,0 @@ -{ - "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 deleted file mode 100644 index 3e5c8e0..0000000 --- a/ux/dndTree.js +++ /dev/null @@ -1,568 +0,0 @@ - -(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) { - - // Calculate total nodes, max label length - var totalNodes = 0; - var maxLabelLength = []; - // variables for drag/drop - var selectedNode = null; - var draggingNode = null; - // panning variables - var panSpeed = 200; - var panBoundary = 20; // Within 20px from edges will pan when dragging. - // Misc. variables - var i = 0; - var duration = 750; - var root; - - // size of the diagram - var viewerWidth = $(document).width(); - var viewerHeight = $(document).height(); - - var tree = d3.layout.tree() - .size([viewerHeight, viewerWidth]); - - // define a d3 diagonal projection for use by the node paths later on. - var diagonal = d3.svg.diagonal() - .projection(function(d) { - return [d.y, d.x]; - }); - - // A recursive helper function for performing some setup by walking through all nodes - - function visit(parent, visitFn, childrenFn, depth) { - if (!parent) return; - - 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, d); - } - } - } - - // Call visit function to establish maxLabelLength - visit(treeData, function(d, depth) { - totalNodes++; - 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 parseName(b).toLowerCase() < parseName(a).toLowerCase() ? 1 : -1; - }); - } - // Sort the tree initially incase the JSON isn't in a sorted order. - //sortTree(); - - // TODO: Pan function, can be better implemented. - - function pan(domNode, direction) { - var speed = panSpeed; - if (panTimer) { - clearTimeout(panTimer); - translateCoords = d3.transform(svgGroup.attr("transform")); - if (direction == 'left' || direction == 'right') { - translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed; - translateY = translateCoords.translate[1]; - } else if (direction == 'up' || direction == 'down') { - translateX = translateCoords.translate[0]; - translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed; - } - scaleX = translateCoords.scale[0]; - scaleY = translateCoords.scale[1]; - scale = zoomListener.scale(); - svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")"); - d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")"); - zoomListener.scale(zoomListener.scale()); - zoomListener.translate([translateX, translateY]); - panTimer = setTimeout(function() { - pan(domNode, speed, direction); - }, 50); - } - } - - // Define the zoom function for the zoomable tree - - function zoom() { - svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); - } - - - // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents - var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom); - - function initiateDrag(d, domNode) { - draggingNode = d; - d3.select(domNode).select('.ghostCircle').attr('pointer-events', 'none'); - d3.selectAll('.ghostCircle').attr('class', 'ghostCircle show'); - d3.select(domNode).attr('class', 'node activeDrag'); - - svgGroup.selectAll("g.node").sort(function(a, b) { // select the parent and sort the path's - if (a.id != draggingNode.id) return 1; // a is not the hovered element, send "a" to the back - else return -1; // a is the hovered element, bring "a" to the front - }); - // if nodes has children, remove the links and nodes - if (nodes.length > 1) { - // remove link paths - links = tree.links(nodes); - nodePaths = svgGroup.selectAll("path.link") - .data(links, function(d) { - return d.target.id; - }).remove(); - // remove child nodes - nodesExit = svgGroup.selectAll("g.node") - .data(nodes, function(d) { - return d.id; - }).filter(function(d, i) { - if (d.id == draggingNode.id) { - return false; - } - return true; - }).remove(); - } - - // remove parent link - parentLink = tree.links(tree.nodes(draggingNode.parent)); - svgGroup.selectAll('path.link').filter(function(d, i) { - if (d.target.id == draggingNode.id) { - return true; - } - return false; - }).remove(); - - dragStarted = null; - } - - // define the baseSvg, attaching a class for styling and the zoomListener - var baseSvg = d3.select("#tree-container").append("svg:svg") - .attr("width", viewerWidth) - .attr("height", viewerHeight) - .attr("class", "overlay") - .call(zoomListener) - - - // Define the drag listeners for drag/drop behaviour of nodes. - dragListener = d3.behavior.drag() - .on("dragstart", function(d) { - if (d == root) { - return; - } - dragStarted = true; - nodes = tree.nodes(d); - d3.event.sourceEvent.stopPropagation(); - // it's important that we suppress the mouseover event on the node being dragged. Otherwise it will absorb the mouseover event and the underlying node will not detect it d3.select(this).attr('pointer-events', 'none'); - }) - .on("drag", function(d) { - if (d == root) { - return; - } - if (dragStarted) { - domNode = this; - initiateDrag(d, domNode); - } - - // get coords of mouseEvent relative to svg container to allow for panning - relCoords = d3.mouse($('svg').get(0)); - if (relCoords[0] < panBoundary) { - panTimer = true; - pan(this, 'left'); - } else if (relCoords[0] > ($('svg').width() - panBoundary)) { - - panTimer = true; - pan(this, 'right'); - } else if (relCoords[1] < panBoundary) { - panTimer = true; - pan(this, 'up'); - } else if (relCoords[1] > ($('svg').height() - panBoundary)) { - panTimer = true; - pan(this, 'down'); - } else { - try { - clearTimeout(panTimer); - } catch (e) { - - } - } - - d.x0 += d3.event.dy; - d.y0 += d3.event.dx; - var node = d3.select(this); - node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")"); - updateTempConnector(); - }).on("dragend", function(d) { - if (d == root) { - return; - } - domNode = this; - if (selectedNode) { - // now remove the element from the parent, and insert it into the new elements children - var index = draggingNode.parent.children.indexOf(draggingNode); - if (index > -1) { - draggingNode.parent.children.splice(index, 1); - } - if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') { - if (typeof selectedNode.children !== 'undefined') { - selectedNode.children.push(draggingNode); - } else { - selectedNode._children.push(draggingNode); - } - } else { - selectedNode.children = []; - selectedNode.children.push(draggingNode); - } - // Make sure that the node being added to is expanded so user can see added node is correctly moved - expand(selectedNode); - sortTree(); - endDrag(); - } else { - endDrag(); - } - }); - - function endDrag() { - selectedNode = null; - d3.selectAll('.ghostCircle').attr('class', 'ghostCircle'); - d3.select(domNode).attr('class', 'node'); - // now restore the mouseover event or we won't be able to drag a 2nd time - d3.select(domNode).select('.ghostCircle').attr('pointer-events', ''); - updateTempConnector(); - if (draggingNode !== null) { - update(root); - centerNode(draggingNode); - draggingNode = null; - } - } - - // Helper functions for collapsing and expanding nodes. - - function collapse(d) { - if (d.children) { - d._children = d.children; - d._children.forEach(collapse); - d.children = null; - } - } - - function expand(d) { - if (d._children) { - d.children = d._children; - d.children.forEach(expand); - d._children = null; - } - } - - var overCircle = function(d) { - selectedNode = d; - updateTempConnector(); - }; - var outCircle = function(d) { - selectedNode = null; - updateTempConnector(); - }; - - // Function to update the temporary connector indicating dragging affiliation - var updateTempConnector = function() { - var data = []; - if (draggingNode !== null && selectedNode !== null) { - // have to flip the source coordinates since we did this for the existing connectors on the original tree - data = [{ - source: { - x: selectedNode.y0, - y: selectedNode.x0 - }, - target: { - x: draggingNode.y0, - y: draggingNode.x0 - } - }]; - } - var link = svgGroup.selectAll(".templink").data(data); - - link.enter().append("path") - .attr("class", "templink") - .attr("d", d3.svg.diagonal()) - .attr('pointer-events', 'none'); - - link.attr("d", d3.svg.diagonal()); - - link.exit().remove(); - }; - - // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children. - - function centerNode(source) { - scale = zoomListener.scale(); - - x = -source.y0; - y = -source.x0; - x = x * scale + viewerWidth / 2; - y = y * scale + viewerHeight / 2; - d3.select('g').transition() - .duration(duration) - .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); - zoomListener.scale(scale); - zoomListener.translate([x, y]); - } - - function leftNode(source) { - scale = zoomListener.scale(); - - x = 100 * scale; - y = source.y0 * scale; - console.log(x); - - d3.select('g').transition() - .duration(duration) - .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); - zoomListener.scale(scale); - zoomListener.translate([x, y]); - } - - // Toggle children function - - function toggleChildren(d) { - if (d.children) { - d._children = d.children; - d.children = null; - } else if (d._children) { - d.children = d._children; - d._children = null; - } - return d; - } - - // Toggle children on click. - - function click(d) { - if (d3.event.defaultPrevented) return; // click suppressed - d = toggleChildren(d); - update(d); - centerNode(d); - } - - function update(source) { - // Compute the new height, function counts total children of root node and sets tree height accordingly. - // This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed - // This makes the layout more consistent. - var levelWidth = [1]; - var childCount = function(level, n) { - - if (n.children && n.children.length > 0) { - if (levelWidth.length <= level + 1) levelWidth.push(0); - - levelWidth[level + 1] += n.children.length; - n.children.forEach(function(d) { - childCount(level + 1, d); - }); - } - }; - childCount(0, root); - var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line - tree = tree.size([newHeight, viewerWidth]); - - // Compute the new tree layout. - var nodes = tree.nodes(root).reverse(), - links = tree.links(nodes); - - // Set widths between levels based on maxLabelLength. - nodes.forEach(function(d) { - 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. - }); - - // Update the nodes… - node = svgGroup.selectAll("g.node") - .data(nodes, function(d) { - return d.id || (d.id = ++i); - }); - - // Enter any new nodes at the parent's previous position. - var nodeEnter = node.enter().append("g") - .call(dragListener) - .attr("class", "node") - .attr("transform", function(d) { - return "translate(" + source.y0 + "," + source.x0 + ")"; - }) - .on('click', click) - .append("a") - .attr("xlink:href", function(d) { - return d.url || d.github; - }) - .attr("target", "_blank"); - - nodeEnter.append("circle") - .attr('class', 'nodeCircle') - .attr("r", 0) - .style("fill", function(d) { - return d._children ? "lightsteelblue" : "#fff"; - }); - - nodeEnter.append("text") - .attr("x", function(d) { - return d.children || d._children ? -10 : 10; - }) - .attr("dy", ".35em") - .attr('class', 'nodeText') - .attr("text-anchor", function(d) { - return d.children || d._children ? "end" : "start"; - }) - .text(function(d) { - return parseName(d); - }) - .style("fill-opacity", 0); - - // phantom node to give us mouseover in a radius around it - nodeEnter.append("circle") - .attr('class', 'ghostCircle') - .attr("r", 30) - .attr("opacity", 0.2) // change this to zero to hide the target area - .style("fill", "red") - .attr('pointer-events', 'mouseover') - .on("mouseover", function(node) { - overCircle(node); - }) - .on("mouseout", function(node) { - outCircle(node); - }); - - // Update the text to reflect whether node has children or not. - node.select('text') - .attr("x", function(d) { - return d.children || d._children ? -10 : 10; - }) - .attr("text-anchor", function(d) { - return d.children || d._children ? "end" : "start"; - }) - .text(function(d) { - return parseName(d); - }); - - // Change the circle fill depending on whether it has children and is collapsed - node.select("circle.nodeCircle") - .attr("r", 4.5) - .style("fill", function(d) { - return d._children ? "lightsteelblue" : "#fff"; - }); - - // Transition nodes to their new position. - var nodeUpdate = node.transition() - .duration(duration) - .attr("transform", function(d) { - return "translate(" + d.y + "," + d.x + ")"; - }); - - // Fade the text in - nodeUpdate.select("text") - .style("fill-opacity", 1); - - // Transition exiting nodes to the parent's new position. - var nodeExit = node.exit().transition() - .duration(duration) - .attr("transform", function(d) { - return "translate(" + source.y + "," + source.x + ")"; - }) - .remove(); - - nodeExit.select("circle") - .attr("r", 0); - - nodeExit.select("text") - .style("fill-opacity", 0); - - // Update the links… - var link = svgGroup.selectAll("path.link") - .data(links, function(d) { - return d.target.id; - }); - - // Enter any new links at the parent's previous position. - link.enter().insert("path", "g") - .attr("class", "link") - .attr("d", function(d) { - var o = { - x: source.x0, - y: source.y0 - }; - return diagonal({ - source: o, - target: o - }); - }); - - // Transition links to their new position. - link.transition() - .duration(duration) - .attr("d", diagonal); - - // Transition exiting nodes to the parent's new position. - link.exit().transition() - .duration(duration) - .attr("d", function(d) { - var o = { - x: source.x, - y: source.y - }; - return diagonal({ - source: o, - target: o - }); - }) - .remove(); - - // Stash the old positions for transition. - nodes.forEach(function(d) { - d.x0 = d.x; - d.y0 = d.y; - }); - } - - // Append a group which holds all nodes and which the zoom Listener can act upon. - var svgGroup = baseSvg.append("g"); - - // Define the root - root = treeData; - root.x0 = viewerHeight / 2; - root.y0 = 0; - update(root); - - // Layout the tree initially and center on the root node. - if (isPhantom) { - zoomListener.scale(1.25); - leftNode(root); - } else { - zoomListener.scale(0.25); - centerNode(root); - } - - // - }); - -})();