zzuieliyaoli参与编程马拉松，为期365天

[zzuieliyaoli]

• github地址：https://github.com/zzuieliyaoli
• 相关项目1：https://github.com/zzuieliyaoli/event-page-generator Node + React + webpack + ES2015 的活动页面生成器。没完没了专题页需求，真是烦死了。
• 相关项目2：https://github.com/zzuieliyaoli/zzuieliyaoli.github.io 个人博客
• 相关项目3：https://github.com/zzuieliyaoli/components 从业务逻辑中抽离的可复用的组件。包括但不限于：angular、vue、react
• 开始时间：2015/12/31

[zzuieliyaoli]

day 1

看教程 https://christianalfoni.github.io/react-webpack-cookbook/Optimizing-rebundling.html

[zzuieliyaoli]

day 2

熟悉webpack、react

http://code.oneapm.com/javascript/2015/07/07/webpack_performance_1/

http://stackoverflow.com/questions/33125669/uncaught-referenceerror-reactdom-is-not-defined

https://github.com/christianalfoni/react-webpack-cookbook/issues/35

[geekan]

活动页面很明显是可以抽象成模板逻辑的，也不知道github上有没有现成的库

[zzuieliyaoli]

@geekan 我粗略搜了一下，貌似没有。就当是造轮子了。。

day 3

webpack能跑通了，还需认真翻看文档。

直接用es2015写react步子迈的有点大，先从es2015看起吧

• es2015

http://gank.io/post/564151c1f1df1210001c9161

http://www.sitepoint.com/understanding-ecmascript-6-class-inheritance/

http://fourkitchens.com/blog/article/practical-introduction-es2015-classes

http://exploringjs.com/es6/ch_classes.html

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

• react es2015

http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes

https://github.com/code0wl/react-example-es2015

[zzuieliyaoli]

day 4

继续熟悉es2015

• react遇到的问题

https://github.com/reactjs/react-art/issues/37

https://github.com/facebook/react/issues/4065

https://github.com/facebook/react/issues/3040

https://github.com/facebook/react/issues/3509

https://github.com/facebook/react/issues/3090

[zzuieliyaoli]

day 5 这几篇文章很好

http://exploringjs.com/es6/ch_classes.html

http://www.sitepoint.com/understanding-ecmascript-6-class-inheritance/

[zzuieliyaoli]

day6

继续react

https://facebook.github.io/react/docs/top-level-api.html

https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775

[zzuieliyaoli]

day 7

遇到了angular的坑

$scope.$digest()相关

[zzuieliyaoli]

day 8

webpacl dev server

react flux

[zzuieliyaoli]

day 9

node server with webpack

[zzuieliyaoli]

day 10

webpack dev server with node express

[zzuieliyaoli]

day 11

webpack dev server with node express 搞通了。

jade的官方文档简直不能称之为文档啊。。

webpack也是醉的不行。。

遇到的问题：

http://stackoverflow.com/questions/14115893/nodejs-render-raw-html-with-express

http://stackoverflow.com/questions/29586928/react-minified-exception-occurred

[zzuieliyaoli]

day 12

react-router and add test

https://github.com/rackt/react-router/tree/latest

https://babeljs.io/docs/setup/#mocha

https://discuss.reactjs.org/t/whats-the-prefered-way-to-test-react-js-components/26/2

http://mochajs.org/#mocha-opts

https://blog.algolia.com/how-we-unit-test-react-components-using-expect-jsx/

[zzuieliyaoli]

day 13

学习写测试

[zzuieliyaoli]

day 14

use mocha chai jsdom to write tests

[zzuieliyaoli]

day 15

add babelrc

看各种文档看的好辛苦

[zzuieliyaoli]

day 16

表哥结婚，喝的有点多。。。。

[zzuieliyaoli]

day 17

There is something wrong when i installed gulp-sass

1. https://github.com/sass/node-sass/issues/1027
2. https://github.com/sass/node-sass/issues/1012
3. http://stackoverflow.com/questions/31573847/cannot-install-gulp-sass

update 2016.1.26

I just copy and paste the gulp-sass that i installed before for other demos into the node_modules directory.

After the step above, i ran npm update gulp-sass.

Everything goes well!

[zzuieliyaoli]

day 18

这篇文章很棒！

http://www.zhangxinxu.com/wordpress/2016/01/development-of-ui-components-based-on-native-html/

[zzuieliyaoli]

day 19

整一整博客

[zzuieliyaoli]

day 20

继续整博客

[zzuieliyaoli]

day 21

整理博客

[zzuieliyaoli]

day 22

博客。。

真心吐槽webpack的文档啊。。。

[zzuieliyaoli]

day 23

博客。。

看mongoDB的文档

小坑：

mongod --dbpath=./data --port 27017，要注意路径的问题。./data!!

[zzuieliyaoli]

day 24

express

• Express is a routing and middleware web framework that has minimal functionality of its own: An Express application is essentially a series of middleware function calls.
• some api

Chrom extension - Postman 挺好用的说~

[zzuieliyaoli]

day 25

image upload

• busboy - http://expressjs.com/en/guide/using-middleware.html#middleware.third-party
• http://stackoverflow.com/questions/23114374/file-uploading-with-express-4-0-req-files-undefined

[zzuieliyaoli]

day 26、27

image upload is done.

• 《四种常见的 POST 提交数据方式》 https://imququ.com/post/four-ways-to-post-data-in-http.html
• Postman的小坑 http://stackoverflow.com/questions/19178813/sending-multipart-mixed-content-with-postman-chrome-extension
• 上传相关 http://stackoverflow.com/questions/23691194/node-express-file-upload http://stackoverflow.com/questions/8659808/how-does-http-file-upload-work

[zzuieliyaoli]

day 28、29、30

1

https://gist.github.com/pos1tron/094ac862c9d116096572

const mongoServerUrl = 'mongodb://localhost:27017/test'
MongoClient.connect(mongoServerUrl, function(err, db) {
    assert.equal(null, err)
    console.log("Connected correctly to server.")
    db.close()
})

var db = new mongo.Db('test', new mongo.Server('127.0.0.1', 27017));
var gfs;
db.open(function(err, db) {
  if (err) throw err;
  gfs = Grid(db, mongo);
});

2

mongod --dbpath=./data --port 27017

3 emoji

1. http://www.emoji-cheat-sheet.com/
2. https://github.com/dannyfritz/commit-message-emoji

[zzuieliyaoli]

day 31、32

preview image before uploading

http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

[zzuieliyaoli]

day 33、34、35、36

开始工作 :relaxed:

git

• git merge/rebase
  • http://serebrov.github.io/html/2012-02-13-git-branches-have-diverged.html
  • http://stackoverflow.com/questions/2452226/master-branch-and-origin-master-have-diverged-how-to-undiverge-branches
• case-sensitive
  • http://stackoverflow.com/questions/2016404/git-status-shows-modifications-git-checkout-file-doesnt-remove-them
  • http://stackoverflow.com/questions/11458926/git-checkout-files-doesnt-discard-changes

mongo-express

• https://github.com/andzdroid/mongo-express
• http://stackoverflow.com/questions/5926672/where-does-npm-install-packages

npm

npm update npm install -g npm

[zzuieliyaoli]

day 37

components

angular

• ng-form

  • 首次加载页面是不需校验

  myForm.address.$error.required && myForm.address.$dirty

  http://product.moveline.com/angular-validation-part-1-form-basics.html

[zzuieliyaoli]

day 38

components

angular

• promise

[zzuieliyaoli]

day 39

components

angular

ng-blur="myForm.item.$dirty = true"

[zzuieliyaoli]

day 40、41、42

components

angular

1. add promise
2. source code - to know about how angular runs , especially controller and directive
   • http://www.html-js.com/article/Source-code-analysis-original-the-execution-flow-of-angularjs130-source-code-analysis
   • http://liuwanlin.info/angularjsyuan-ma-yue-du-2bian-yi-lian-jie-guo-cheng/
   • http://stackoverflow.com/questions/30015289/angularjs-controller-inside-ng-repeat-how-to-access-variable
   • http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers

[zzuieliyaoli]

day 43、44、45、46、47

Angular

Front End Interview Questions

Vue

WebPack

• https://github.com/AriaFallah/WebpackTutorial

[zzuieliyaoli]

Bye 2016 Hello 2017