https://github.com/kdchang/front-end-engineering-starter-kit
Front End Engineering Resources Collections
https://github.com/kdchang/front-end-engineering-starter-kit
Last synced: 2 months ago
JSON representation
Front End Engineering Resources Collections
- Host: GitHub
- URL: https://github.com/kdchang/front-end-engineering-starter-kit
- Owner: kdchang
- License: mit
- Created: 2016-03-09T06:16:02.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-23T12:52:11.000Z (almost 10 years ago)
- Last Synced: 2025-02-08T08:47:39.789Z (11 months ago)
- Homepage:
- Size: 9.77 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Front End Team Starter Kit
## Introduction
This is Front End Engineering Resource Document for NOE(New Onboard Engineer).
## Getting Started
1. Setup your Editor enviroment(If you want to use other tools like vim, atom. It's fine.)
[Sublime](https://www.sublimetext.com/)、[Sublime Babel Plugin](https://github.com/babel/babel-sublime)、[HTML-CSS-JS Prettify](https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify)、[ESLint](https://github.com/roadhump/SublimeLinter-eslint)
2. Setup [NVM](https://github.com/creationix/nvm)、[Node](https://nodejs.org/en/)、NPM、[Webpack](https://github.com/webpack/webpack)、React、[React-DOM](https://www.npmjs.com/package/react-dom)、[Gulp](http://gulpjs.com/)
3. Setup Git、Gitlab (If you are not familiar with git/githlab/github, please check the Learning Resources.)
4. If you are not familiar with [React](https://facebook.github.io/react/), try [this](https://scotch.io/tutorials/learning-react-getting-started-and-concepts)
5. We have some old tasks use [Angular](https://angularjs.org/) and [jQuery](https://jquery.com/). If you want to pick some skills about Angular. Please check [Shaping up with Angular.js Play Course for Free](https://www.codeschool.com/courses/shaping-up-with-angular-js).
## Coding Convenstion
[Ref.Front-end Code Standards](https://isobar-idev.github.io/code-standards/)
- React based
[Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)
About React ES6 standards. [React.createClass versus extends React.Component](https://toddmotto.com/react-create-class-versus-component/)
## Learning Resources
### Development Language
- HTML5
1. [w3schools](http://www.w3schools.com/html/)
- CSS3
1. [w3schools](http://www.w3schools.com/css/default.asp)
- JavaScript
1. [MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript)
2. [JavaScript-The Good Parts](http://bdcampbell.net/javascript/book/javascript_the_good_parts.pdf)
- ES6(JavaScript 2015)
1. [Learn ES2015](https://babeljs.io/docs/learn-es2015/)
2. [ECMAScript 6 入门-阮一峰](http://es6.ruanyifeng.com/)
3. [React on ES6+](https://babeljs.io/blog/2015/06/07/react-on-es6-plus)
- React
1. [Official Website](https://facebook.github.io/react/)
2. [Learning React.js: Getting Started and Concepts](https://scotch.io/tutorials/learning-react-getting-started-and-concepts)
3. [交互學習 React](http://fraserxu.me/intro-to-react/)
4. [阮一峰 React 入门实例教程](http://www.ruanyifeng.com/blog/2015/03/react.html)
5. [A collection of awesome things regarding React ecosystem(Awesome React)](https://github.com/enaqx/awesome-react)
6. [React (中文) 資源彙總](https://github.com/dingyiming/learn-Js-react/issues/1)
7. [React.js CheatSheet](http://ricostacruz.com/cheatsheets/react.html)
8. [2016 JavaScript 技术栈展望](https://www.sdk.cn/news/2419)
9. [React Cheatsheets](http://ricostacruz.com/cheatsheets/react.html)
- Flux
1. [Official Website](https://facebook.github.io/flux/)
- Redux
1. [Official Website](https://github.com/reactjs/redux)
- React Native
1. [Official Website](https://facebook.github.io/react-native/)
2. [江清清的技术专栏](http://www.lcode.org/)
- GraphQL
1. [Official Website](https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html)
- Node.js
1. [Official Website](https://nodejs.org/en/)
- Angular
1. [Shaping up with Angular.js Play Course for Free](https://www.codeschool.com/courses/shaping-up-with-angular-js)
2. [AngularJS：factory，service与provider的区别](https://segmentfault.com/a/1190000004602085)
- jQuery
1. [Official Website](https://jquery.com/)
- D3
1. [Official Website](https://d3js.org/)
2. [網頁視覺化利器 － D3.js 簡介](http://blog.infographics.tw/2015/03/d3js-the-introduction/)
### CSS Preprocessor
- SASS/LESS
### CSS Framework
- Bootstrap
1. [Bootstrap](http://getbootstrap.com/)
### Task Runner
- Gulp
1. [gulp 入門指南](https://987.tw/2014/07/09/gulpru-men-zhi-nan/)
- Grunt
### Module
- Concepts
1. [JavaScript模組化之旅](http://huangxuan.me/js-module-7day/#/)
2. [What Is AMD, CommonJS, and UMD?](http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/)
3. [使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript](http://justineo.github.io/singles/writing-modular-js/)
- Wepack
1. [Webpack 入門](http://www.slideshare.net/newstory0113/webpack-52413453)
2. [建立React Webpack 工具包](http://www.checkme.tw/wordpress/react-webpack-generator/)
3. [如何使用 Webpack 模組整合工具](http://rhadow.github.io/2015/03/23/webpackIntro/)
### Package Management
- NPM
- Bower
1. [学习Bower -- 前端开发包管理工具](http://www.html-js.com/article/Learn-JavaScript-learning-Bower-frontend-development-package-management-tools)
### Version Control
- Git
1. [Official Website](https://git-scm.com/)
2. [連猴子都能懂的Git入門指南](https://backlogtool.com/git-guide/tw/)
3. [使用git和github进行协同开发流程](https://segmentfault.com/a/1190000002413519)
4. [GitLab介紹](http://git-tutorial.readthedocs.org/zh/latest/configurations.html)
5. [Learn-Git-in-30-days](https://github.com/doggy8088/Learn-Git-in-30-days/blob/master/docs/02%20%E5%9C%A8%20Windows%20%E5%B9%B3%E5%8F%B0%E5%BF%85%E8%A3%9D%E7%9A%84%E4%B8%89%E5%A5%97%20Git%20%E5%B7%A5%E5%85%B7.markdown)
- SVN
### Generator
- Yeoman
### Testing
- Mocha
- Jasamin
### UI Pattern
- Mobile
1. [iOS Human Interface Guidelines](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/)
2. [Android Design Guidelines](http://developer.android.com/design/index.html)
3. [Pttrns: Mobile Design Patterns](http://pttrns.com/)
- Web
1. [UI-patterns](http://ui-patterns.com/patterns)
### Design Pattern
1. [4 JavaScript Design Patterns You Should Know](https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know)
2. [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)