Tocas UI 2.1 新元素:板岩

螢幕快照 2016-11-28 下午11.29.07.png

自從聚焦看板腦殘腦殘的,我就打算把它換掉了,下面是板岩的解釋:

板岩是聚焦看板的後繼者,板岩除了擁有作為頁面標題區塊的功能外,

現在還可以當作一個預置區塊(Placeholder),例如一個空的購物車就可以用上板岩。

此外,板岩現在也支援標題、註釋、動作按鈕。

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 自身的環境,真是不錯的折衷方案。

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

TocasUI 2 和 TeaMeow 註冊頁面

螢幕快照 2016-08-10 上午1.45.32.png

這次是完全用 TocasUI 2 做出來的 TeaMeow 介面,跟當初的介面差很多,

我個人是偏好舊的畫面,但是不好管理卻有特色,

採用 TocasUI 2 設計的註冊頁面則是沒有特色,但卻制式化了,讓東西看起來比較整齊,

至於為什麼是 TocasUI 2 呢 ..

因為做 TeaMeow 的時候發現 TocasUI 1 問題越來越多,有單位不準確的問題存在,

TocasUI 1 是由 px + rem + em 的組成,而 TocasUI 2 解決了這個問題,

讓元件看起來都一樣整齊,不過 TocasUI 2 大概也是我的一個噩耗 ..