Awesome
Overflow Stack
The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): http://overflowstack.github.io
Localization
中文: https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md
Español: https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md
WebFrontEndStack
Web front-end stack: browsers, platforms, libraries, frameworks, tools etc.
![Image of Web Front End Stack](Web Front End Stack.png)
Generate image yourself
Prepare for environment
You should have Visual Studio 2010+ installed in Windows.
-
Install nodejs. (Shoule be >= iojs 1.8.0)
-
Install Phantomjs.
-
Install Python 2.7.
-
npm install
If the error occurs, you can check the dependence of phantomjs-node, node-gyp.
Run commands
npm start
for start a server to open the html directly.
npm run build
for generate the image.
Options
-h, --help Display help message.
-p, --port number (Default: 3000) Set the port what express listening.
-ues, --update_existed_stargazers (Default: false) Update project's stargazers including existed.
--phantomjs The task to generate the image.
--readme The task to update readme.
--updatestargazers The task to update the count of the stargazers.
What and why?
Have you ever wondered:
- what technologies web front end really includes?
- how many do I possess?
I could not find a really comprehensive diagram that shows the web front end technology stack, so I come up with my own version.
There might be issues here and there, like the category, the individual ones, but the beauty is you can modify it as you want.
You can have a graphical preview here (use mouse to move / zoom):
https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm
The Web Front End Stack
<!--BUILD_START-->- Web Front End
- Browser
- Protocol
- The 3 Pillars
- HTML (HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
- Standards
- W3C
- HTML
- CSS
- XHTML
- XML
- W3C
- Core Concepts
- HTML
- JavaScript
- CSS
- Selector
- Priority
- Specificity
- Box Model
- Rendering Engine
- JavaScript Engine
- Runtime
- Cookie
- Local Cache
- Session Storage
- Local Storage
- Components
- Extensions
- Plugins
- Resources
- Images
- Icons
- Fonts
- Audios
- Videos
- Editors
- Sublime Text
- WebStorm
- Atom [GitHub]
- Vim
- Emacs
- Brackets [GitHub]
- Light Table [GitHub]
- Visual Studio
- Visual Studio Code (Linux & Mac) [GitHub]
- Dreamweaver ;-)
- FrontPage / SharePoint Designer ;-)
- Build Tasks
- Minification
- Compilation
- Concatenation
- Uglification
- Image Optimization
- Unit Testing
- Build Tools
- Debug
- Base Tools
- Quality
- Package
- Test
- Tools
- Composite
- Frameworks / Libraries
- JavaScript base library
- Modular
- JavaScript Framework
- UI framework
- WebSocket
- Data Visualization
- WebGL
- CSS3 Animation
- Flow Controller
- Functional
- Mobile UI
- CSS Pre-processors
- Future Standards
- Template
- Modernisation
- Best Practices
- Security
- Intermediate Languages
- CoffeeScript [GitHub]
- TypeScript [GitHub]
- ClojureScript [GitHub]
- JSX (Facebook)
- Mobile Application Development
- Desktop Application Development