Frontend Technology

[rogerxu]

List of frontend technology

Guide

• [ ] Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
• [ ] grab/front-end-guide: 📚 Study guide and introduction to the modern front end stack.
• [x] elsewhencode/project-guidelines: A set of best practices for JavaScript projects
• [ ] dexteryy/spellbook-of-modern-webdev: A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
• [ ] verekia/js-stack-from-scratch: 🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
• [ ] Roadmaps to becoming a modern developer - roadmap.sh
• [ ] bendc/frontend-guidelines: Some HTML, CSS and JS best practices.
• [ ] 木易杨前端进阶

Interview

• [ ] yangshun/tech-interview-handbook: 💯 Materials to help you rock your next coding interview
• [ ] yangshun/front-end-interview-handbook: 🕸 Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore
• [ ] 前端面试 | 前端工程师手册
• [ ] 简介 - Front-End Interview Cheat Sheet
• [ ] 前端进阶之道

Trend

2022年如何成为一名优秀的大前端Leader？ - 掘金 (juejin.cn)

[rogerxu]

HTML

• [ ] HTML 4
• [ ] HTML Semantic
• [ ] HTML 5
• [ ] DOCTYPE
• [ ] WAP
• [ ] SVG/VML

[rogerxu]

CSS

CSS 2.0

• [ ] Box Model
• [ ] Media Query
• [ ] Responsive Design

CSS 3.0

Pre-processor

• [ ] LESS
• [ ] Sass
• [ ] SCSS
• [ ] PostCSS

Framework

• [ ] Bootstrap

[rogerxu]

Testing

Code Quality

• [x] ESLint
• [x] stylelint
• [ ] Istanbul

Unit Test

• [x] QUnit
• [ ] Jasmine
• [x] Mocha
• [x] Chai
• [x] Sinon.JS

Functional Test

• [ ] OPA5

Test Automation

• [ ] Selenium
• [x] WebDriver
• [ ] Karma Runner
• [x] PhantomJS

Performance Test

• [ ] JSPerf
• [ ] YSlow 35 Rules
• [ ] PageSpeed
• [ ] HttpWatch
• [ ] DynaTrace's Ajax

[rogerxu]

UX

Usability

Accessibility

[rogerxu]

SEO

[rogerxu]

Server-side Programming

• [ ] Express.js

[rogerxu]

JavaScript

Language

• [ ] ES5
• [x] ES6
• [x] ES2016+
• [ ] CoffeeScript
• [ ] TypeScript
• [ ] elm

Features

• [x] Prototype
• [x] Closure
• [ ] Functional Programming
• [ ] Anonymous Function
• [ ] Callback

[rogerxu]

Editor

• [ ] Vim
• [x] Notepad++
• [x] Sublime Text 3
• [x] Atom
• [ ] WebStorm
• [x] Eclipse

[rogerxu]

Version Control

• [x] Git
• [ ] Mercurial
• [ ] Perforce
• [ ] SVN

Project Host

• [x] Gerrit
• [x] GitHub
• [ ] GitLab

[rogerxu]

Security

• [ ] CSRF
• [ ] XSS
• [ ] Same-origin policy

[rogerxu]

Browser

• Internet Explorer (Trident)
• Microsoft Edge
• Google Chrome (Blink)
• Mozilla Firefox (Gecko)
• Safari (WebKit)
• Opera (Blink)

[rogerxu]

Debugger

• [ ] IE Dev Tools
• [ ] Firebug
• [x] Chrome Dev Tools

Network Tools

• [ ] PostMan
• [ ] Fiddler
• [ ] WireShark

[rogerxu]

Deployment

Transpiler

• [x] Babel
• [ ] WebAssembly

Compression

• [ ] YUI Compressor
• [ ] Google Closure Complier
• [ ] UglifyJS

Task Runner

• [ ] make
• [ ] Ant
• [x] Maven
• [ ] Grunt
• [ ] Gulp

[rogerxu]

Module Manager

Specification

• [x] CommonJS
• [x] AMD

Module Manager

• [x] npm
• [x] Bower
• [ ] jspm

Module Loader

• [x] Require.js

Module Bundler

• [ ] Browserify - bundle dependencies to files that can be run in the browser
• [x] Webpack
• [ ] SystemJS

[rogerxu]

JavaScript Frameworks

History of JavaScript Frameworks (programmingsoup.com)

Library

• [ ] jQuery
• [ ] Underscore
• [ ] D3.js
• [ ] Lodash

Framework

• [ ] Dojo
• [ ] SAPUI5
  • [ ] Fiori
  • [ ] Fiori Launchpad
  • [x] Smart Template
• [ ] Angular 2
• [ ] React
  • [x] JSX
  • [x] React DOM
  • [ ] react-router
  • [x] Flux
  • [x] Redux
• [x] Vue.js
  • [x] vue-router
  • [x] vuex

[rogerxu]

SAPUI5

[rogerxu]

HTTP

• [ ] HTTP 1.0
• [ ] HTTP 1.1
• [ ] HTTPS
• [ ] SPDY
• [ ] HTTP/2

[rogerxu]

Browser API

• [ ] XMLHttpRequest
• [ ] Fetch API