前言

這篇文章希望從另外一個角度來看關於 Redux 的機制與運用，在網路上各式的教學文章中值得先推薦的自然是官方教學
如果英文不是很好的可以參考繁體中文版。這是小弟認為要學習 Redux 必讀的文件。另外還有A cartoon intro to redux也是值得一讀的好文可以加深記憶。

接著就讓我們開始吧，當然最後如果有任何錯誤，也歡迎您的指教。

範例筆記

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/**
 * 詳細教學
 * http://www.tutorialspoint.com/nodejs/nodejs_path_module.htm
 */

// 正常化
path.normalize('/1/../2'); // => /2

// 把所有路徑整合在一起並且正常化
path.join('a', 'b'); // =>'a/b'
path.join('a', './b'); // => a/b'
path.join('a', '/b'); // =>'a/b'
path.join('/1', '/2/3', '../4'); // => /1/2/4


// 從第一個路徑，照著後面切換最後回傳絕對路徑
path.resolve('/from', '/to/path1', '/to/path2'); // => /to/path2
path.isAbsolute('/'); // => true

// 從 from 到 to 的相對路徑
path.relative('..', './A/B'); // => [project]/A/B

// 回傳該檔案所在的目錄
path.dirname('node_modules/bin/webpack'); // => node_modules/bin
path.dirname('./node_modules/bin/webpack'); // => ./node_modules/bin

// 回傳路徑最後的部分，包含副檔名
path.basename('node_modules/bin/webpack'); // => webpack
path.basename('/1/2/3.js'); // => 3.js

// 只取副檔名 + .
path.extname('/1/2/3.js'); // => .js

// 將路徑解析成物件
path.parse('/1/2/3.js'); // =>

// 從物件轉成字串
path.format({ root: '/', dir: '/1/2', base: '3.js', ext: '.js', name: '3' }); // => /1/2/3.js

這篇文章翻譯自 React Virtual DOM vs Incremental DOM vs Ember’s Glimmer: Fight

在這篇文章我們將要探討三個用來動態建立操作 DOM 的技術。當然我們也會測試紀錄其效能並且找出誰比較快。
最後我們當然會分享為什麼我們選擇了其中之一用在我們的專案上。

在這篇文章中我們將要探討如何使用 ES7 的新功能.

ES6 新增了一個簡單更具可讀性的語法讓我們可以建立類別(class). 搭配 ES6 匯入匯出模組的語法讓我們的程式更加清楚易懂.

而 Decorators 讓我們可以在設計時期透過註記的方式修改類別與屬性.
在 ES5 物件實字(Object Literal)支援值可以使用任意的表達式(Expression)
而 ES6 類別單純只支援值使用函式表達式或稱作函式常量(Function Literal)
現在 Decorator 讓 JS 具備了可維護性與可讀性的宣告式語法

Flexbox 是一種新的 CSS 3 佈局模式, 在這之前 CSS 有四種佈局模式

OOCSS 的兩個核心觀念

• 分離結構(html tag 結構)與樣式(ui 的樣式) Separate structure and skin
• 分離容器(layout 佈局)與內容(直接包 content 的 tag) Separate container and content
  最後達到重複使用樣式的最高原則

前言

BEM 不是什麼新東西了，會有這一篇純粹是因為之前都只是依樣畫葫蘆的去使用 BEM 看了幾篇 slider 就上沒有認真理解過。當然寫起來就滿頭包。
這一篇花了一點時間歸納總結這個看似簡單卻實用的 css 組織的方法

為了理解 ES6 到底對於 Unicode 萬國碼有哪些新的支援。我們得從原因理解起。

在 Javascript ES6 的新功能中，有一個新品種的 function 稱為 generator 這個名字有點奇怪，不過它的行為在第一次看到的時候似乎更加奇怪。這篇筆記目的在解釋關於 generator 基本的運作原理。