Element Panel

• ⌥⌘I 開啟 Dev Tool

選取元素的方式

• 對元素點右鍵 -> Inspect
• 開啟 Dev Tool -> 點擊 Dev Panel 左上角 bar 的箭頭 ICON -> 選取元素
• ⌘⇧C -> 選取

編輯樣式

• 選定一個 Element 之後右邊 panel 會顯示該 Element 之樣式
• 開關樣式
• 新增或刪除樣式
• 右上角 -> Change state(hover, active, focus, visited)
• Computed -> 觀察 box model
• 點擊連結切換到 Source
• Shift + 點擊 CSS rule 的顏色會轉換 e.g. hex to rgb
• 編輯樣式時，選取某個字串 ->Command+D會把一樣的都選起來

Source Panel

• 進入 Source panel ⌘S 可以暫時編輯檔案並存到瀏覽器的 Storage
• 右鍵 -> Local Modifications 可以檢視歷史紀錄

Console

1
2
3
4
5
6
7
8
9
10
11
12
13

console.log();
console.assert(false, 'Information'); // 錯了就噴第二個參數
console.count('go'); // go: 1
console.count('go'); // go: 2
console.log("document body: %O", document.body);

console.group("Authenticating user '%s'", user);
console.log("User authenticated");
console.groupEnd();

console.log('%c Hello', 'color: orange;'); // %c 使用 css
console.log("%O ", document.body); // %O Javascript Object
console.log("%O ", document.body); // %o DOM

詳細 Console API

• 學會查看 Error，切換到 Source
• 在 Source panel 下 ESC 開啟第二層 Console

1
2
3
4
5
6

$('selector') // 稱為 blind
// 如果載入 jQuery 預設的 blind 會被覆寫
// 回傳的是一個陣列
inspect($('#title')) // 選取元素並切換到 Element Panel
$0 // 當前選取的 Element
$1 // 上一個

• Source panel 右上角的 Pause on 按鈕打開的話，下次噴錯就會暫停
• Source panel 左下角的 {} 按鈕可以把 minifed 檔案轉換成較易讀的格式

Local Storage

• 切換到 Resource panel

Network panel

• Refresh 之後會記錄每個 Request
• ⇧ + Refresh 鍵強制全部重載
• Size = Transfer size
• Content = Actual size
• 最底下的 Bar 有總和
• Waterfall 裡面淺色的部分代表發出 request到回應即開始傳輸資料的時間
• 實心的部分代表開始下載資料
• 顏色的意義
  • HTML 藍色
  • JS 橘色
  • CSS 綠色
  • 圖片 紫色
  • 右邊垂直的藍色線代表 DOM loaded 意為瀏覽器解析完畢 HTML to DOM
  • 右邊垂直紅色線則表示圖片等資源下載完畢
• CSS 放在 JS 之前

Timeline

• 顏色的意義
  • Loading 藍色
  • 執行 Script 黃色
  • Rendering 紫色
  • Painting 綠色
• Size vs Content

前言

這篇文章希望從另外一個角度來看關於 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 Native 中的 Push Notifications

React Native 官方在 v0.13+ 之後支援 Push notifications 然而在這篇文章撰寫時仍然未實做完所有功能。
現階段只支援靜態的推播通知，另外關於錯誤處理的功能也還在開發中Error handling

這篇文章翻譯自 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 具備了可維護性與可讀性的宣告式語法

Use Apache OSX 10.11

OSX 10.11 仍然內建 Apache

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

何謂 jspm ?

jspm (javascript package manager) 號稱是完全支援(無摩擦)瀏覽器載入的套件管理工具