Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JacksonTian/fks
前端技能汇总 Frontend Knowledge Structure
https://github.com/JacksonTian/fks
Last synced: 12 days ago
JSON representation
前端技能汇总 Frontend Knowledge Structure
- Host: GitHub
- URL: https://github.com/JacksonTian/fks
- Owner: JacksonTian
- Created: 2012-10-17T05:55:16.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2023-12-08T07:28:10.000Z (11 months ago)
- Last Synced: 2024-04-15T13:55:27.191Z (7 months ago)
- Language: JavaScript
- Homepage: http://html5ify.com/fks/
- Size: 1.7 MB
- Stars: 17,795
- Watchers: 1,583
- Forks: 4,607
- Open Issues: 15
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
- awesome-frontend-master - 前端知识结构
- fucking-lists - fks
- studyLogs - fks - 一个前端技能汇总,你必须知道的. (Uncategorized / Uncategorized)
- awesomelist - fks
- awesome-github-star - fks
- awesome-learning - JacksonTian/fks
- awesomeKnowledge - JacksonTian/fks
- collection - fks
- lists - fks
- StarryDivineSky - JacksonTian/fks
- awesome-awesomeness-zh_CN - fks
- awesome-star-libs - JacksonTian / fks
README
Frontend Knowledge Structure
========
## Original purpose
Once upon a time, there's a graph of Frontend Knowledge Structure original posted by @jayli ...
A shortcoming of releasing the graph in form of picture is, as the technology develops, we can't make any contribution to the graph without its source file -- That is why this GitHub repository comes. In this repository, every one could contribute to the project. The development of frontend profession will also be written to the history by Git.
Although the project would be maintained in plain text instead, I promise a small tool based on project DataV would be developed for us to generate more funny graphs.
## Knowledge Structure of Frontend Development
- Frontend Engineer
- Web browsers
- IE6/[7](http://www.microsoft.com/en-us/download/internet-explorer-7-details.aspx)/[8](http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-8)/[9](http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages)/[10](http://windows.microsoft.com/en-US/internet-explorer/ie-10-worldwide-languages)/[11](http://windows.microsoft.com/en-US/internet-explorer/ie-11-worldwide-languages) (Trident)
- [Firefox](http://www.mozilla.org/en-US/) (Gecko)
- [Chrome](http://www.google.com/chrome)/[Chromium](http://www.chromium.org/) (Blink)
- [Safari](http://www.apple.com/safari/) (WebKit)
- [Opera](http://www.opera.com/) (Blink)
- Programming Languages
- [JavaScript](https://developer.mozilla.org/en-US/docs/JavaScript)/[Node.js](http://nodejs.org/)
- [CoffeeScript](http://coffeescript.org/)
- [TypeScript](http://www.typescriptlang.org/)
- Slicing
- [HTML](http://www.w3.org/html/)/[HTML5](http://www.w3.org/TR/html5/)
- [CSS](http://www.w3.org/Style/CSS/)/CSS3
- [Sass](http://sass-lang.com/)/[LESS](http://lesscss.org/)/[Stylus](http://learnboost.github.io/stylus/)/[PostCSS](http://postcss.org/)
- [PhotoShop](http://www.photoshop.com/products/photoshop)/[Paint.net](http://www.getpaint.net/)/[Fireworks](http://www.adobe.com/cn/products/fireworks.html)/[GIMP](http://www.gimp.org/)/[Sketch](http://bohemiancoding.com/sketch/)
- Development tools
- Editors and IDEs
- [VIM](http://www.vim.org/)/[Sublime Text2](http://www.sublimetext.com/)
- [Notepad++](http://notepad-plus-plus.org/)/[EditPlus](http://www.editplus.com/)
- [WebStorm](http://www.jetbrains.com/webstorm/)
- [Emacs](http://www.gnu.org/software/emacs/) [EmacsWiki](http://emacswiki.org)
- [Brackets](http://brackets.io)
- [Atom](https://atom.io/)
- [Lime Text](http://limetext.org/)
- [Light Table](http://lighttable.com/)
- [Codebox](https://www.codebox.io/)
- [TextMate](http://macromates.com/)
- [Neovim](http://neovim.org/)
- [Komodo IDE / Edit](http://www.activestate.com/komodo-edit)
- [Eclipse](http://www.eclipse.org/)
- [Visual Studio](http://www.visualstudio.com/)/[Visual Studio Code](https://code.visualstudio.com/)
- [NetBeans](https://netbeans.org/)
- [Cloud9 IDE](http://c9.io/)
- [HBuilder](http://www.dcloud.io/)
- [Nuclide](http://nuclide.io/)
- Debugging
- [Firebug](http://getfirebug.com/)/[Firecookie](https://addons.mozilla.org/en-US/firefox/addon/firecookie/)
- [YSlow](http://developer.yahoo.com/yslow/)
- [IEDeveloperToolbar](http://www.microsoft.com/en-us/download/details.aspx?id=18359)/[IETester](http://www.my-debugbar.com/wiki/IETester/HomePage)
- [Fiddler](http://www.telerik.com/fiddler)
- [Chrome Dev Tools](https://developer.chrome.com/devtools)
- [Dragonfly](http://www.opera.com/dragonfly/)
- [DebugBar](http://www.debugbar.com/)
- [Venkman](https://developer.mozilla.org/en-US/docs/Venkman)
- [Charles](https://www.charlesproxy.com/)
- Revision Control
- [Git](http://git-scm.com/)/[SVN](http://subversion.apache.org/)/[Mercurial](http://mercurial.selenic.com/)
- [Github](https://github.com/)/[GitLab](https://about.gitlab.com/)/[Bitbucket](https://bitbucket.org/)/[Google Code](http://code.google.com/hosting/)/[Gitorious](https://gitorious.org/)/[GNU Savannah](http://savannah.gnu.org/)/[Launchpad](https://launchpad.net/)/[SourceForge](http://sourceforge.net/)/[TeamForge](http://www.collab.net/products/teamforge)
- Code quality
- Coding style
- [JSLint](http://www.jslint.com/)/[JSHint](http://www.jshint.com/)/[jscs](https://github.com/mdevils/node-jscs)
- [CSSLint](http://csslint.net/)
- [Markup Validation Service](http://validator.w3.org/)
- [HTML Validators](https://validator.whatwg.org/)
- Unit testing
- [QUnit](http://qunitjs.com/)/[Jasmine](http://jasmine.github.io/)
- [Mocha](http://mochajs.org/)/[Should](https://github.com/visionmedia/should.js/)/[Chai](http://chaijs.com/)/[Expect](https://github.com/LearnBoost/expect.js/)
- [Unit JS](http://unitjs.com/)
- Auto-testing
- [WebDriver](http://docs.seleniumhq.org/docs/03_webdriver.jsp)/[Protractor](https://github.com/angular/protractor)/[Karma Runner](https://github.com/karma-runner/karma)/[Sahi](http://sahi.co.in/)
- [phantomjs](http://phantomjs.org/)
- [SourceLabs](https://saucelabs.com/)/[BrowserStack](http://www.browserstack.com/)
- Frontend libraries / frameworks
- [jQuery](http://jquery.com/)/[Underscore](http://underscorejs.org/)/[Mootools](http://mootools.net/)/[Prototype.js](http://www.prototypejs.org/)
- [YUI3](http://yuilibrary.com/projects/yui3/)/[Dojo](http://dojotoolkit.org/)/[ExtJS](http://www.sencha.com/products/extjs)/[KISSY](http://docs.kissyui.com/)
- [Backbone](http://backbonejs.org/)/[KnockoutJS](http://knockoutjs.com/)/[Emberjs](http://emberjs.com/)
- [AngularJS](http://angularjs.org/)
- [Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk)
- [Bootstrap](http://getbootstrap.com/)
- [Semantic UI](http://www.semantic-ui.com/)
- [Juice UI](http://juiceui.com/)
- [Web Atoms](http://webatomsjs.neurospeech.com/)
- [Polymer](https://www.polymer-project.org/)
- [Dhtmlx](http://dhtmlx.com/)
- [qooxdoo](http://qooxdoo.org/)
- [React](http://facebook.github.io/react/)
- [Brick](http://mozbrick.github.io/)
- Frontend standards / specifications
- HTTP/1.1: RFCs 7230-7235
- [HTTP/2](https://http2.github.io/)
- [ECMAScript3/5](http://www.ecma-international.org/publications/standards/Ecma-262.htm)
- [W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...](http://www.w3.org/TR/)
- [CommonJS Modules](http://wiki.commonjs.org/wiki/Modules/1.0)/[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)
- [HTML5](http://www.w3.org/html/wg/drafts/html/master/)/[CSS3](http://www.w3.org/Style/CSS/specs.en.html)
- [Semantic Web](http://semanticweb.org/)
- [MicroData](http://schema.org)
- [RDFa](http://www.w3.org/TR/rdfa-core/)
- [Web Accessibility](http://www.w3.org/WAI/)
- [WCAG](http://www.w3.org/TR/WAI-WEBCONTENT/)
- [Role Attribute](http://www.w3.org/TR/role-attribute/)
- [WAI-ARIA](http://www.w3.org/TR/wai-aria/)
- Performance
- [JSPerf](http://jsperf.com/)
- [YSlow 35 rules](http://developer.yahoo.com/performance/rules.html)
- [PageSpeed](https://developers.google.com/speed/pagespeed/)
- [HTTPWatch](http://www.httpwatch.com/)
- [DynaTrace's Ajax](http://www.compuware.com/application-performance-management/dynatrace-ajax-download.html)
- [High-performance JavaScript](http://book.douban.com/subject/5362856/)
- SEO
- General programming knowledge
- [Data structure](http://en.wikipedia.org/wiki/Data_structure)
- OOP/AOP
- [Prototype chain](http://net.tutsplus.com/tutorials/javascript-ajax/prototypes-in-javascript-what-you-need-to-know/)/Scope chain
- [Closure](http://www.jibbering.com/faq/notes/closures/)
- [Programming paradigms](http://en.wikipedia.org/wiki/Programming_paradigm)
- [Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/)
- [Javascript Tips](http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html)
- Deployment flow
- Compressing and merging
- [YUI Compressor](http://developer.yahoo.com/yui/compressor/)
- [Google Clousure Complier](https://developers.google.com/closure/compiler/)
- [UglifyJS](https://github.com/mishoo/UglifyJS)
- [CleanCSS](https://github.com/GoalSmashers/clean-css)
- Documentation generating
- [JSDoc](http://code.google.com/p/jsdoc-toolkit/)
- [Dox](https://github.com/visionmedia/dox)/[Doxmate](https://github.com/JacksonTian/doxmate)/[Grunt-Doxmate](https://github.com/luozhihua/grunt-doxmate)
- Building
- [make](http://www.gnu.org/software/make/)/[Ant](http://ant.apache.org/)
- [GYP](http://code.google.com/p/gyp/)
- [Grunt](http://gruntjs.com/)
- [Gulp](http://gulpjs.com/)
- [Yeoman](http://yeoman.io/)
- [FIS](http://fis.baidu.com/)
- [Mod](https://github.com/modulejs/modjs)
- ES6+ transpiler
- [Traceur](https://github.com/google/traceur-compiler)
- [Babel](https://babeljs.io/)
- Code organizing
- Modularizing libraries
- [CommonJS](http://www.commonjs.org/)/AMD
- YUI3 Modules
- Modularizing business logic
- [bower](https://github.com/twitter/bower)/[component](https://github.com/component/component)
- File loaders
- [LABjs](http://labjs.com/)
- [SeaJS](http://seajs.org/)/[Require.js](http://requirejs.org/)
- Modular preprocessor
- [Browserify](https://github.com/substack/node-browserify)
- Security
- [CSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery)/[XSS](http://en.wikipedia.org/wiki/Cross-site_scripting)
- [CSP](http://www.w3.org/TR/CSP/)
- [Same-origin policy](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy)
- ADsafe/Caja/Sandbox
- Mobile Web
- HTML5/CSS3
- [Responsive web design](http://en.wikipedia.org/wiki/Responsive_web_design)
- [Zeptojs](http://zeptojs.com/)/[iScroll](http://cubiq.org/iscroll)
- V5/[Sencha Touch](http://www.sencha.com/products/touch)
- [PhoneGap](http://phonegap.com/)
- [jQuery Mobile](http://jquerymobile.com/)
- [W3C Mobile Web Initiative](http://www.w3.org/Mobile/)
- [W3C mobileOK Checker](http://validator.w3.org/mobile/)
- [Open Mobile Alliance](http://openmobilealliance.org/)
- [React Native](https://facebook.github.io/react-native/)
- Advanced technology communities/conferences
- [D2](http://d2forum.org)/[WebRebuild](http://www.webrebuild.org/)
- NodeParty/[W3CTech](http://w3ctech.com)/[HTML5梦工厂(HTML5 Dreamworks)](http://www.html5dw.com)
- [JSConf](http://jsconf.com/)/[沪JS(JSConf.cn)](http://jsconf.cn)
- QCon/Velocity/SDCC
- [JSConf](http://jsconf.com/)/[NodeConf](http://www.nodeconf.com/)
- [CSSConf](http://cssconf.com/)
- YDN/YUIConf
- HybridApp
- [WHATWG](http://whatwg.org/)
- [MDN](https://developer.mozilla.org/en-US/)
- [codepen](http://codepen.io/)
- [w3cplus](http://www.w3cplus.com/)
- [CNode](https://cnodejs.org/)
- Computer science
- Compilation principle
- [Computer network](http://en.wikipedia.org/wiki/Computer_network)
- [OS](http://en.wikipedia.org/wiki/Operating_system)
- Algorithm principle
- Software Engineering/Software testing principle
- [Unicode](http://www.unicode.org/)
- Soft skills
- Knowledge Management/Sharing
- Communication/Teamwork
- Requirements Management/PM
- Interaction Design/Availability/Accessibility
- Visualization
- SVG/Canvas/VML
- SVG: [D3](http://d3js.org/)/[Raphaël](http://raphaeljs.com/)/[Snap.svg](http://snapsvg.io/)/[DataV](http://datavlab.org/datavjs/)
- Canvas: [CreateJS](http://www.createjs.com/)/[KineticJS](http://kineticjs.com/)
- [WebGL](http://zh.wikipedia.org/wiki/WebGL)/[Three.JS](http://threejs.org/)
- Backend Engineer
- Programming languages
- C/C++/Java/PHP/Ruby/Python/...
- Web server
- [Nginx](http://nginx.org/en/)
- [Apache](http://httpd.apache.org/)
- [Lighttpd](http://www.lighttpd.net/)
- Databases
- SQL
- [MySQL](http://www.mysql.com/)/[PostgreSQL](http://www.postgresql.org/)/[Oracle](http://www.oracle.com/us/products/database/overview/index.html)/[DB2](http://www-01.ibm.com/software/data/db2)
- [MongoDB](http://www.mongodb.org/)/[CouchDB](http://couchdb.apache.org/)
- Data Caching
- [Redis](http://redis.io/)
- [Memcached](http://memcached.org/)
- File Cashing/Proxying
- [Varnish](https://www.varnish-cache.org/)
- [Squid](http://www.squid-cache.org/)
- OS
- Unix/Linux/OS X/Windows
- Data structure
## Book Recommendations for Frontend-ers
The ★ less and easier, the more suitable for starters
### CSS
- [More Eric Meyer on CSS](http://www.amazon.com/More-Eric-Meyer-Voices-Matter/dp/0735714258/)★★★
- [CSS: The Definitive Guide (3rd Edition)](http://www.amazon.com/CSS-Definitive-Eric-A-Meyer/dp/0596527330/)★★
- [CSS Mastery: Advanced Web Standards Solutions](http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/)★★★
### JavaScript
- [DOM Scripting: Web Design with JavaScript and the Document Object Model](http://www.amazon.com/DOM-Scripting-Design-JavaScript-Document/dp/1430233893/)★
- [Professional JavaScript for Web Developsers (Third Edition)](http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/)★★
- [锋利的jQuery](http://book.douban.com/subject/10792216/)★★
- [High Performance JavaScript](ihttp://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X/)★★★
- [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/)★★★
- [JavaScript: The Definitive Guide (Sixth Edition)](http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/)★★★
- [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680/)★★★
- [JAVASCRIPT语言精髓与编程实践](http://book.douban.com/subject/3012828/)★★★
- [Effective Javascript](http://www.amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182)★★★
- [Secrets of the JavaScript Ninja](http://book.douban.com/subject/3176860/)★★★
- [JavaScript Patterns](http://www.amazon.cn/JavaScript-Patterns-Stefanov-Stoyan/dp/0596806752)★★★
- [JavaScript设计模式](http://book.douban.com/subject/3329540/)★★★★
- [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X)★★★★
### Performance && Practice
- [Web性能实践日志](http://book.douban.com/subject/25891125/)★★★
- [Web性能权威指南](http://book.douban.com/subject/25856314/)★★★
### CVS
- [Pragmatic Version Control Using Git](http://book.douban.com/subject/3105192/)★★
- [Pro Git](http://git-scm.com/book)★★★
- [Git权威指南](http://book.douban.com/subject/6526452/)★★★★
## Book Recommendations for Backend-ers
### Linux administration
- [Linux 系统管理技术手册](http://book.douban.com/subject/3042029/)
- [鸟哥的 Linux 私房菜](http://book.douban.com/subject/4889838/)
- [Linux 101 Hacks](http://www.thegeekstuff.com/linux-101-hacks-free-ebook-non-english/)
- [UNIX Shell Scripting](http://book.douban.com/subject/3519360/)
- [The Linux Command Line](http://linuxcommand.org/tlcl.php)
- [Linux Network Administrator's Guide](http://oreilly.com/openbook/linag2/book/index.html)
### Linux programming
- [Linux程序设计](http://book.douban.com/subject/4831448/)
- [Linux系统编程](http://book.douban.com/subject/3907181/)
- [Unix环境高级编程](http://book.douban.com/subject/1788421/)
- [The Art of UNIX Programming](http://www.catb.org/esr/writings/taoup/)
- [The Linux Programming Interface](http://book.douban.com/subject/4292217/)
- [程序员的自我修养](http://book.douban.com/subject/3652388/)
- [深入理解Linux内核](http://book.douban.com/subject/2287506/)
- [Unix网络编程](http://book.douban.com/subject/1500149/)
- [TCP/IP高级编程](http://book.douban.com/subject/1088054/)
- [Linux Kernel in a Nutshell](http://www.kroah.com/lkn/)
- [Linux Device Drivers](http://lwn.net/Kernel/LDD3/)
- [Advanced Linux Programming](http://www.advancedlinuxprogramming.com/)
### C/C++
- [Linux C编程一站式学习](http://book.douban.com/subject/4141733/)
- [C和指针](http://book.douban.com/subject/3012360/)
- [C陷阱与缺陷](http://book.douban.com/subject/2778632/)
- [C专家编程](http://book.douban.com/subject/2377310/)
- [C语言核心技术](http://book.douban.com/subject/2226913/)
- [彻底搞定C指针](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDEQFjAA&url=http%3A%2F%2Fblogimg.chinaunix.net%2Fblog%2Fupfile2%2F110210170023.pdf&ei=P95mUfrmNKKriALS04HAAw&usg=AFQjCNEzB88PnpfL0fRgJDkP3O9TlBPswA&sig2=isyd4ktsByNBMa5M9EPhRQ&bvm=bv.45107431,d.cGE&cad=rjt)
- [征服C指针](http://book.douban.com/subject/21317828/)
- [C++编程思想](http://book.douban.com/subject/1094797/)
- [高质量程序设计指南---C/C++语言](http://book.douban.com/subject/2116929/)
- [Inside the C++ Object Model](http://book.douban.com/subject/1484262/)
- [A Tour of C++](http://www.stroustrup.com/Tour.html)
- [The C++ Programming Language](http://en.wikipedia.org/wiki/The_C%2B%2B_Programming_Language)
- [The C++ Standard Library - A Tutorial and Reference](http://www.cppstdlib.com/)
- [The C++ Standard (INCITS/ISO/IEC 14882-2011)](http://webstore.ansi.org/RecordDetail.aspx?sku=INCITS%2fISO%2fIEC+14882-2012)
- [Overview of the New C++](http://www.artima.com/shop/overview_of_the_new_cpp)
## Front-end Developer Interview
- [Front-end Developer Interview Questions](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions)
- [Front end Developer Questions( Chinese (Simple) Language)](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Question)
## Contributors
Thanks to Jayli who provided the original graph and contributors below. Generated by `git-summary` at 2014/01/03.
```
project : fks
repo age : 1 year, 3 months
active : 53 days
commits : 108
files : 4
authors :
56 Jackson Tian 51.9%
9 吴晓兰 8.3%
5 liyinkan 4.6%
3 chriscai 2.8%
3 fengxiaolong 2.8%
3 XiNGRZ 2.8%
2 monkadd 1.9%
2 Johnny 1.9%
2 weiwenqing 1.9%
2 Yinkan Li 1.9%
2 Copypeng 1.9%
2 左岸 1.9%
2 Jakukyo Friel 1.9%
2 Glowin 1.9%
1 李亚川 0.9%
1 Evan You 0.9%
1 Mickey 0.9%
1 Mickey- 0.9%
1 Qi Junyuan 0.9%
1 browsnet 0.9%
1 doabit 0.9%
1 guoxiangyang 0.9%
1 linkgod 0.9%
1 popomore 0.9%
1 vipzhicheng 0.9%
1 zhaqiang 0.9%
1 Colin Luo 0.9%
```