Mirror's Starter Kit And Refs

Node.js

npm

• JavaScript依賴管理
• package.json

Refs

• dev, save, -g, 版本指定等常用指令

webpack

模組(module)系統

• 將CSS、圖片與其他資源打包至一個.js之中
• 打包之前預處理(less、coffeescript、jsx...)

Refs

• WEBPACK入門筆記

Express.js

• MongoDB
• Mongoose API

React.js

Kits

• React-Scroll
• React-Bootstrap
• React-Search-json

Refs

• React ES5 ES6+ 對照表
• states,props,refs的區別
• 如何在props改變後, 更新state
• Reactjs PropTypes使用方法
• React單向資料流 父/子 兄弟組件間的溝通方式
• React如何將Props傳給所有小孩
• Input Value是空值時 不得送出
• React表單組件來看State
• React常見的錯誤警示
• React App中常見的跨網站攻擊漏洞

Following Bloggers

• 寫React的那些事

React-Router

• SPA
• Front-End Routing

Refs

• 猴子也能看得懂的React教學
• React-Router取得現在路徑的方式

Redux

• 單向資料流
• MVCR 的完整前端框架

Refs

• Redux官方繁體中文
• 結合Redux跟React
• Redux與Flux的比較
• webpack + react + redux + es6

Kits

• Redux Minimal
• Redux Form

Valina JavaScript

Kits

• lodash

Refs

• JavaScript中參數的傳值與傳址
• 圖解JavaScript中的this指向什麼
• ForEach與SetTimeout-setTimeout的Closure
• 怎麼看FormData物件裡面包裝了什麼

Promise

• 非同步
• ES6 Promise -> ES7 Async
• 避免產生callback hell

Refs

• Promise交互比較
• 在呼叫下一個Ajax前 中斷現在的Ajax
• 取消HTTP Request
• 讓AJAX在運作的時候跳出loading訊息

D3.js

• 縮放台灣地圖

Refs

• D3 API

GoogleMap API

Refs

• 在縮放googleMap時 如何disable滑鼠wheelScroll

CSS

Bootstrap v3 v4-alpha

CSS3 Flexible Box

Refs

• FlexBox兼容到IE8的跨瀏覽器解決方案
• 深入解析CSS3 Flexbox
• Flexbox在各家瀏覽器的min-height問題
• 解決Flexbox在IE的Table標籤無法運作的問題-display:block

Compass

• CSS Framework
• $@include @import @mixin

Kits

• Compass Docs
• Compass指令

Animation

Kits

• Animate.css
• WOW.js
• CSS KeyFrame過場動畫
• CSS Filter

作品 http://52.38.21.246:8081/eachNOW/front-end/homePage.jsp