什麼是 tmux？

前言

支援電子發票，營業人必須使用 Turnkey Client 連線工具 來執行發票開立、發票作廢、發票註銷、折讓開立、折讓作廢等（傳送/接收發票資料檔案）。

本篇為 Turnkey Client on Ubuntu 的安裝筆記。

很快地又到了年末大掃除了時候，今年增加的工具軟體並不多反而捨去了不少工具。剩下的這些便是展望 2017 年與 2016 整年度下來持續使用的工具。

流程

• 準備環境
• 使用 ngrok 取得 https 網址
• 建立與設定 Facebook App 與粉絲團
• 建立 webhook GET API
• 設定 Facebook App webhook
• 實作 webhook POST API 產生對話

本文將對 webpack 周邊的 middleware 與 plugin 套件等作些介紹，若您對於 webpack 還不了解可以參考這篇彙整的翻譯

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

何謂 jspm ?

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

動機

今時今日所謂的網站正進化成網路應用程式，它不再只是單純的顯示圖片文字資訊，而包含著更多互動與操作行為，同時也意味著一個網站:

• 具有更多的 Javascript
• 可以在現代的瀏覽器上做更多事
• 較少全頁重新載入的行為 ➞ 甚至更多程式碼在單一頁面

這篇文章除了記錄一下最後只是堪用的解法，如果有高手知道更好的做法煩請賜教。

話說小弟今天要來寫一些 React 的測試專案，就想說那就搭上 Gulp 吧！原本的目的很單純就只是用 Gulp compile 一些常用的 meta language，像是 Less, Jade 外加上 Jsx。也不是什麼很大的專案所以架構上其實就是在 React 的 StartKit上面再開個自己的測試目錄。

因為 Gulp 這個任務執行工具最近越來越流行，所以想說試著用它來做些事情，其實它跟 Grunt 一樣可以拿來處理很多事情像是整合 Javascript 檔案，壓縮圖片等等。如果你之前從來沒聽過 Gulp 這裡建議您先閱讀 英文教學, Gulp 初體驗。
在這篇文章中，我們將學習使用 Gulp 來完成一個簡單的小型伺服器以協助您平日的前端開發，當然這也支援 livereload。