Tocas UI 2 文件新增「響應式」章節

螢幕快照 2016-09-26 上午4.10.51.png

其實響應式輔助樣式在 Tocas UI 2 很久了,不過一直沒有寫成一個章節,

這次補上了。tocas-ui.com/rwd/

螢幕快照 2016-09-26 上午4.10.56.png

廣告

Tocas UI 2 文件正式完成!

螢幕快照 2016-09-13 上午2.18.16.png

按下這裡查看新的 Tocas UI 2 文件吧。

老實說這是一個超大工程⋯ 也是替 TeaMeow 前端做熱身的準備,

這次的文件和以往 Tocas UI 1 有所不同的地方在於這次採用了 Vuejs 作為框架,

意思是一旦網頁讀取完畢,其他頁面也就一起讀取完畢了,沒錯!轉跳到其他頁面不需要重新讀取,

對於開發者來說有很多很多好處啊⋯例如元件可以重複使用、統一集中開發,之類的。

螢幕快照 2016-09-13 上午2.18.51.png

有一好當然就沒兩好,對嗎?我肯定這一句,至少是現在,一旦用了 Vuejs 之後確實是省去了每個頁面要讀取的麻煩,

但那代表著你的觀看裝置也需要有足夠的效能,因為是一次就讀取所有的內容,我確定在 LG G4 上是沒有問題的,但那不代表著我老舊的 MTK6582 手機就沒有問題,

為此我在頁面底部增加了一個「本頁渲染速度」用來看電腦和手機上的渲染差異,電腦大約是 100ms 而手機(LG G4)可能來到 400ms 或是 600ms 之間,

我想我會先把這個問題放在「待解決」那邊,然後在真正於 TeaMeow 上實行的時候再來解決這個問題。

螢幕快照 2016-09-13 上午2.18.40.png

順帶一提這次還新增了一個「原始碼」按鈕,先前有人抱怨過網頁太沈長而且沒有「回到頂部」按鈕,這次兩個驚喜一次滿足。

當然問題還不只這些,既然是個開發者部落格我就順便提一下架設這個文件頁面遇到了什麼事情,

螢幕快照 2016-09-13 上午2.29.40.png

 

因為 Vuejs 是客戶端渲染框架,這意味著有個路由器在取決於網址該做什麼,

假設說網址是 /hello/ 在傳統網站上應該是去訪問 hello 資料夾中的檔案,

但客戶端渲染不這麼做,取而代之的是詢問 index.html 來得知如果網址是 /hello/ 應該做什麼動作,

這在 Github Pages 和 Surge 上遇到了一些小問題,那就是他們預設不吃這種方式,

他們會直接告訴你 404 網頁找不到,因為他們會直接去尋找伺服器內有沒有這個檔案,

為了解決這個問題我 Google 到了 Github 的 404 頁面可以自訂,所以我就將 404 頁面的內容直接照抄 index.html,

如此一來就算 404 也會執行 index.html 的內容然後讓路由器能夠照常運作,真是太好了。

用筆電遠端桌機增進開發效能

未命名 2

以前就開始覺得筆電的效能越來越不足以應付開發需求了,

後來就想到是不是可以像 Steam 一樣那種用串流的方式讓筆電也能夠玩遊戲

的那種方式來透過桌機進行開發工作,但實際上還是在筆電上操作呢?

畢竟桌機也只是在自家的樓上,延遲也只有 1~3ms,

後來發現 Microsoft Remote Desktop 還真是不錯啊 ..

感覺就像開了一個虛擬機器一樣地方便,音樂什麼的也能夠在遠端播放,在本機播出,

然後鍵盤映射的部分有 Karabiner 提供協助,能夠只在遠端應用程式內更改鍵盤映射,

而不會干擾到 OS X 自身的環境,真是不錯的折衷方案。

不過把筆電只當作遠端串流的工具⋯⋯有點可惜啊。