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 的內容然後讓路由器能夠照常運作,真是太好了。

自動產生「原始碼」的 JavaScript

2016-01-05 03-37-44 的螢幕擷圖

最近一直在忙於 Tocas UI 阿,

然後在尋找 Semantic UI 到底是怎麼做出「自動產生原始碼」的功能,

所以後來我的想法就是自己做一個,

基本上概念就是:

  1. 取得指定容器內的 HTML
  2. 透過 Tidy 去清潔這個 HTML
  3. 輸出到指定容器

不過卻少了一個功能,就是「重點標記」,所以後來我又新增了這個功能,

最後概念變成:

  1. 取得指定容器內的 HTML
  2. 透過 Tidy 去清潔這個 HTML
  3. 輸出到指定容器
  4. 檢查每個容器想要標示的重點
  5. 把容器內的文字新增重點樣式

我想之後應該會在 Github 公開這個原始碼,因為真的是很方便,

其實使用起來也很方便就是了。

三個 Logo 更新— Tocas 和 Avane 和 Staend

亞凡芽

TeaMeow 開發基於 PHP 的模板引擎,Logo 由 Muli 轉換成 Comfortaa

Avane-Old
舊,Muli
Avane
新,Comfortaa

 

Staend

DNA 功能,S 由圓角轉為偏直角。之後可能會再調一下那個幾條線的角度。

Staend
舊,圓角 Muli
Staend-直角-01
新,偏直角 Muli

 

Tocas

TeaMeow 基於 SASS 和 CSS3 與 JavaScript 的元素設計,

字體由 Muli 轉換成全符號,之後可能還會變厚就是了。

Tocas-01
舊,帶有 Muli
Tocas-閃電S
新,全符號