後端在開發 API 時，不可能完全符合前端的期待，因為後端的目的是盡可能的將 API 設計的一般化，這樣能提供更多服務共用 API，也能減輕開發負擔。

前端理所當然就無法避免要處理 UI 衍生資料，我們需要針對 Resposne 的值進行轉換來符合前端的需求，轉換的程式碼很容易就不受控制的侵入進 UI 層，尤其 GraphQL 的 Response 非常彈性，處理起來也十分令人煩躁。

在前公司寫給團隊成員參考的 Unit Test 小指南，僅管團隊已經分崩離析，也在此留下人生的足跡，紀念奮筆疾書的夜晚。

瀏覽器的第一次渲染花費多久時間（Time to First Paint），代表使用者多快能夠看到畫面，這件事情至關重要，因為當畫面越慢顯示，網站的轉化率會隨之下降。

在一些擁有高流量的網站，轉化率的下降就是數以千萬計的損失，就算網站不具有高流量，追求效能與速度也是前端工程師的課題。

整理 JavaScript 中 this 在不同情況的值，大部分參考自超棒的 MDN 解釋 this 的文章

Webpack 做為管理模組化 JavaScript 的工具，最後會將所有的模組編譯為一隻 JavaScript 檔案（bundle），讓所有模組可以在瀏覽器上執行。

拆解 Bundle 檔能夠更暸解 Webpack 的運作，它如何載入模組，並兼容既有的模組系統，

最近投入函數式語言的學習，發現很多語言（ex. Haskell , Elixir, Scala, Swift）都有提供模式匹配（Pattern Matching），這讓我有個疑問「使用模式匹配有什麼好處？」

在上 Coursera 的課程「以人為本的設計」第一週時我並不知道我會繼續上下去，所以沒有做筆記，如果哪天被蘋果砸到再來做吧。

第二週探討的是「如何探知人們的需求」也就是探知的技術，以及課程最後提及當找到設計的目標後如何「一以貫之」。

原文：Open Design Standards for Chat UX - Kip

Kip 是一間做辦公室輔助軟體的公司，他們的產品是一個 Slack Bot，用來管理公司內部的大小事。

他們嘗試歸納出聊天介面元素的跨平台通則，提供好的使用者體驗。

原文：Design a Perfect Search Box - Nick Babich

在側重內容的網站，搜尋欄是必要的頁面元素，作者總結了 9 項最佳實踐。

最近在撰寫的專案，常常會使用 canvas 來處理圖片合成，canvas 在合成圖片時必須確保圖片已經被載入，否則會產生空白圖片。

最近在閱讀 Thinking with Type，瞭解字型排版的基礎，以下是相關的筆記。

原文鏈結: Complete Beginners Guide to Interaction Design

什麼是 Interaction Design？

互動設計師負責螢幕上可以點擊、滑動、輕按的一切元素，簡而言之 —— 互動的體驗。

互動設計增進人與環境之間互動的便利性。使用者經驗設計則必須解釋使用者在系統中所面對的所有層面，互動設計只專注在螢幕與人之間的互動。但是，在實際的情形中沒辦法清楚的區分兩者的分界。

這篇對自己平常使用 Sublime Text 的習慣做個紀錄，Sublime Text 的功能很多，還有很多操作方式或工具沒有記錄在這裏，但目前使用起來還對我來說蠻夠用的，分享給有需要的人。

Markdown 是一種純文字的語法，目的是以純文字的方式便能夠產生出易讀的文件，Markdown 的語法有多種表達方式，像是使用兩顆 * 代表強調（eg. *強調*)，使用兩個 反引號 包起來的區塊代表行內程式碼（eg. `Here is code`），用代表性的符號取代使用編輯器產生樣式，這樣就可以脫離對編輯器的依賴，在任何平台上都可以通用喔。

從官網的介紹中提到:

Rack provides a minimal interface between webservers supporting Ruby and Ruby frameworks.

在開發 Ruby Web Framewrok 時有許多前置工作，必須對所支援的 Web Server 撰寫介面，然後解析 HTTP protocol，假如多支援一套 Web Server 這些工作又要再做一次，Rack 幫我們解決了重複性的工作，Rack 支援不同的 Server，將 HTTP request 與 response 包裝後，成為統一的 API 標準，不管 Web Server 是 WEBrick 、 Mongrel 或是 Unicorn ，Web Framework 都只需要對 Rack 溝通就行了，就像是如果要馬上精通各國語言（Web Server），吃個翻譯蒟蒻就萬事OK，Rack就是翻譯蒟蒻!!!

Middleman 是用 Ruby 所寫的，在安裝 Middleman 之前必須先安裝 Ruby，安裝可以參考這篇 Ruby 下載安裝，Mac OS X Mavericks 系統內建 Ruby 2.0.0，可以用 ruby -v 進行確認是否安裝。