Front-end Skills summary Frontend Knowledge Structure

Project Origins

Remember the @jayli of the front-end knowledge structure map.

The form of the picture has many inconveniences. We can't contribute anything to this graph because of the missing source graph, and over time, there may be some technical points that might change, so with this GitHub project. We can work together to maintain this project in a collaborative way. Git's history can also witness some of the changes in the front-end industry.

Visual effects

Front-end development knowledge structure

• Front End Engineer

  • Browser
    • IE6/7/8/9/10/11 (Trident)
    • Firefox (Gecko)
    • Chrome/chromium (Blink)
    • Safari (WebKit)
    • Opera (Blink)
  • Programming languages
    • Javascript/node.js
    • Coffeescript
    • TypeScript
  • Cut page
    • Html/html5
    • Css/css3
    • Sass/less/stylus/postcss
    • Photoshop/paint.net/fireworks/gimp/sketch
  • Development Tools
    • editor and IDE
      • vim/sublime Text2
      • notepad++/editplus
      • webstorm
      • Emacs emacswiki
      • Brackets
      • Atom
      • Lime Text
      • Light Table
      • Codebox
      • TextMate
      • Neovim
      • Komodo Ide/edit
      • Eclipse
      • Visual studio/visual Studio Code
      • NetBeans
      • Cloud9 IDE
      • Hbuilder
      • nuclide
    • Debugging Tools
      • Firebug/firecookie
      • YSlow
      • iedevelopertoolbar/ietester
      • fiddl Er
      • Chrome Dev Tools
      • dragonfly
      • debugbar
      • venkman
    version Management
    • git/svn/mercurial
    • github/gitlab/bitbucket/gitorious/gnu savannah/launchpad/sourceforge /teamforge
  • Code Quality
    • Coding style
      • Jslint/jshint/jscs/eslint
      • Csslint
      • Markup Validation Service
      • HTML validators
    • Unit Test
      • Qunit/jasmine
      • Mocha/should/chai/expect
      • Unit JS
    • Automated testing
      • Webdriver/protractor/karma Runner/sahi
      • Phantomjs
      • Sourcelabs/browserstack
  • Front End Library/framework
    • Jquery/underscore/mootools/prototype.js
    • Yui3/dojo/extjs/kissy
    • Backbone/knockoutjs/emberjs
    • AngularJS
      • Batarang
    • Bootstrap
    • Semantic UI
    • Juice UI
    • Web Atoms
    • Polymer
    • Dhtmlx
    • Qooxdoo
    • React
    • Brick
    • Vue.js
  • Front-end standards/specifications
    • Http/1.1:rfcs 7230-7235
    • Http/2
    • Ecmascript3/5
    • ECMAScript6
    • w3c:dom/bom/xhtml/xml/json/jsonp/...
    • CommonJS MODULES/AMD
    • Html5/css3
    • Semantic Web
      • Microdata
      • RDFa
    • Web Accessibility
      • Wcag
      • Role Attribute
      • Wai-aria
  • Performance
    • JSPerf
    • YSlow rules
    • Pagespeed
    • HttpWatch
    • DynaTrace ' s Ajax
    • High-performance JavaScript
  • Seo
  • Programming Knowledge Reserve
    • Data
    • Oop/aop
    • Prototype chain/Scope chain
    • Closed Package
    • Programming paradigm
    • Design Patterns
    • Javascript Tips
  • Deployment process
    • Compress merge
      • YUI Compressor
      • Google clousure complier
      • Uglifyjs
      • Cleancss
    • Document output
      • JSDoc
      • Dox/doxmate/grunt-doxmate
    • Project Building Tools
      • Make/ant
      • Gyp
      • Grunt
      • Gulp
      • Yeoman
      • FIS
      • Mod
  • Code Organization
    • Modularity of class libraries
      • Commonjs/amd
      • YUI3 Module
      • Webpack
    • Modularity of business logic
      • Bower/component
    • File loading
      • Labjs
      • Seajs/require.js
    • Modular Preprocessor
      • Browserify
  • Safety
    • Csrf/xss
    • DS7
    • Same-origin Policy
    • Adsafe/caja/sandbox
  • Mobile Web
    • Html5/css3
    • Responsive web-Design
    • Zeptojs/iscroll
    • V5/sencha Touch
    • PhoneGap
    • JQuery Mobile
    • Mobile Web Initiative
    • Mobileok Checker
    • Open Mobile Alliance
  • Cutting-edge technology community/Conference
    • D2/webrebuild
    • NODEPARTY/W3CTECH/HTML5 Dream Factory
    • jsconf/Shanghai JS (jsconf.cn)
    • Qcon/velocity/sdcc
    • Jsconf/nodeconf
    • Cssconf
    • Ydn/yuiconf
    • Hybridapp
    • WHATWG
    • MDN
    • Codepen
    • W3cplus
    • CNode
  • Computer Knowledge Reserve
    • Compilation principle
    • Network
    • Operating system
    • Algorithm principle
    • Engineering/Software Testing principles
    • Unicode
  • Soft Skills
    • Knowledge Management/summary sharing
    • Communication Skills/Team collaboration
    • Demand Management/PM
    • Interactive design/usability/accessibility knowledge
  • Visualization of
    • Svg/canvas/vml
    • Svg:d3/raphaël/snap.svg/datav
    • Canvas:createjs/kineticjs
    • Webgl/three.js

• Back-end Engineer

  • Programming languages
    • c/c++/java/php/ruby/python/...
  • Web server
    • Nginx
    • Apache
    • Lighttpd
  • Database
    • Sql
    • Mysql/postgresql/oracle/db2
    • Mongodb/couchdb
  • Data caching
    • Redis
    • Memcached
  • File Cache/Proxy
    • Varnish
    • Squid
  • Operating system
    • Unix/linux/os x/windows
  • Data

Front-end Books recommended

★ The less the simpler, the more suitable for the introduction, ★ More than the difficulty is higher, or is more suitable in the back to see, such as the performance of the book.

Css

• Eric Meyer about CSS (vol. II) ★
• CSS authoritative Guide (3rd edition) ★
• Proficient in css★★★
• HTML & CSS Design and build website ★

Javascript

• JavaScript & jquery Interactive Web front-end development ★
• JavaScript DOM Programming Art (2nd edition) ★
• JavaScript Advanced Programming (3rd edition) ★
• Sharp jquery★★.
• High Performance javascript★★★
• JavaScript Language Essence ★
• JavaScript authoritative guide ★ ¡ï
• Write javascript★★★ that can be maintained
• JavaScript language Essence and Programming practice ★
• Effective javascript★★★
• Secrets of the JavaScript ninja★★★
• JavaScript mode ★
• JavaScript design mode ★★★★
• Development of JavaScript Web rich application based on MVC ★

Performance practices

• Web Performance Practice Log ★
• Web Performance authoritative Guide ★

Version control tools

• Version control path (GIT) ★
• Pro git★★★
• git authoritative guide ★★★★

Back-end books recommended Linux management

• Linux System Management Technical Manual
• Brother Bird's Linux private cuisine
• Linux 101 Hacks
• UNIX Shell Scripting
• The Linux Command Line
• Linux Network Administrator ' s Guide

Linux Programming

• Linux Programming
• Linux system programming
• Advanced Programming for UNIX environments
• UNIX Programming Art
• The Linux programming Interface
• Self-cultivation of programmers
• Deep understanding of the Linux kernel
• UNIX Network programming
• TCP/IP Advanced Programming

C + +

• Linux C Programming One-stop learning
• C and Pointers
• C Pitfalls and pitfalls
• C Expert Programming
• C Language Core Technology
• Take care of the C pointer completely
• Conquer C pointer
• C + + programming ideas
• High-quality Programming Guide---C + + language
• Inside the C + + Object Model
• A Tour of C + +
• The C + + programming Language
• The C + + standard library-a Tutorial and Reference
• The C + + standard (Incits/iso/iec 14882-2011)
• Overview of the New C + +

Front-End Job interview

• Front-End Job interview questions
• Front-end development questions (Chinese)

Turn: Https://github.com/JacksonTian/fks#frontend-knowledge-structure http://html5ify.com/fks/

Front-end Skills summary Frontend Knowledge Structure