Aug 2, 2019

處理 GraphQL 的 UI 衍生資料

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

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

Aug 2, 2019

暸解單元測試

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

Jan 11, 2018

在瀏覽器第一次渲染之前

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

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

Aug 16, 2017

解析 Webpack Bundle 的程式碼

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

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

Jun 22, 2017

Pattern Matching 引起的好奇

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

May 23, 2017

HCI Week2 觀察真實的使用者行為

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

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

Jan 1, 2017

圖片到底載入了沒?

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

Nov 24, 2015

什麼是互動設計?

原文鏈結: Complete Beginners Guide to Interaction Design

什麼是 Interaction Design?

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

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

Jan 6, 2015

我的 Sublime Text 使用習慣

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

Oct 23, 2014

在 Ruby on Rails 中使用 Markdown

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

Oct 10, 2014

Hello Rack

官網的介紹中提到:

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就是翻譯蒟蒻!!!