全端開發人員天梯

現在QRCode已經越來越流行了，從最簡單的掃描QRCode來取得網址，到利用QRCode完成報到程序等等；現在生活周遭已經到處都有機會看得到QRCode了，因此身為前端工程師，勢必會有越來越多機會在前端打上QRCode的圖片，今天就來介紹一款簡單易用的QRCode library吧！

highlight.js是一款負責讓程式碼highlight的JavaScript library，5 支援168種程式語言，而且有77種樣式可以選擇。雖然看起來很豐富，但老實說它的應用範圍比較小，只能用在像是IT幫幫忙、GitHub這類的技術社群上，或是使用的blog不支援highlight時想要自己掛上highlight功能等等，才會用到這個library。不過不管現在是否用得到，先學起來當收藏也是不錯的！

在開發CMS相關系統時，有一個狀況也是常常遇到的，在張貼內容時加入一個網址，但沒有主動補上超連結，對於瀏覽內容的人來說就會稍微有點不方便，因此今天要介紹的linkifify.js，就是一款簡單易用、快速幫助你在內文中加入超連結的好幫手！

在開發前端的系統時，CMS(內容管理系統)可以說是非常常見的需求，像是系統公告、商品內容管理或是部落格等等；而一個好用的文字編輯器可以說是其中非常重要的核心功能！除非你能說服你的user都自己手刻HTML然後貼到一般的文字區塊裡面，否則編輯器是一定需要的。而CKEditor可以說是目前功能最完善的文字編輯器了，今天就來簡單介紹一下CKEditor吧！

隨著網頁技術越來越普及，ajax越來越被廣泛使用，為了讓ajax在傳輸時不會因為畫面都沒有變而感覺無聊，加上一個loading的icon是很常見的做法，早期甚至還可以看到不少loading圖片的產生器；但CSS功能越來越強，使用圖片的必要性也就變少了，今天要介紹的loader.css就是一款利用CSS產生loading圖示的library。

上一篇文章中我們介紹了Animate.css這個強大的動畫CSS library，不過Animate.css主要是專注在處理動畫的部分，該在什麼時機點讓動畫呈現就不是重點了，因此若是直接在HTML上加上呈現動畫的class，會出現一個問題就是：「儘管要呈現動畫的標籤不在畫面上，而是在整個HTML頁面很下方的地方，但當網頁loading完成後，依然會立刻執行動畫效果，也因此在畫面下方的動畫就會因為早就跑完而看不見了。」

這其實是一件蠻可惜的事情，精心設計的呈現效果卻因為提早出現而變成沒有效果；這時候就需要JavaScript的輔助來讓動畫在捲動到標籤出現時才呈現了，而WOW.js就是一個簡單的好幫手。

過去我們要為網站加上動畫特效可能需要寫一大串的JavaScript，隨著web技術越來越發達，在CSS3中也加入了一系列的動畫屬性，以減少程式撰寫的成本；不過還是需要進行不少設定，而Animate.css就是一個幫你把一堆常見的特效打包好的CSS library。

Office UI Fabric是由Microsoft打造的UI框架，跟前兩天提到的Bootstrap和Materialize不一樣的地方是，透過Office UI Fabric我們可以很容易地打造出具有Office365樣式的UI。

如果你的user受到MS Office的啟發(?)希望你做一個類似的Office某個功能的UI，使用Office UI Fabric就會是最簡單的選擇！

首先，我們先來談談Material Design，Material Design是由Google推出視覺語言，或可以說是一種設計準則，其中定義了基本的樣式、排版、元件等等的設計方向，目標是希望藉由一致的設計樣式規則，讓平面的UI更具立體感，卻又不失操作流暢度，提高使用者體驗(User Experience)，例如設計一個Icon，要怎麼做比較好呢，就可以參考https://material.google.com/style/icons.html 裡面的說明；一個Menu的呈現方式該如何呢？https://material.google.com/components/menus.html 也有詳細的說明。

Bootsrtap可以算是目前最受歡迎的CSS framework之一，能夠用來套用目前主流的設計概念─RWD及mobile first，即使沒有高深的HTML/CSS/JS技術，也能輕鬆設計出基本上能看能使用的web app，如下圖，雖然只是個很簡單的demo，但基本的配色、元件等等組裝起來，雖然不夠當做一個網站的門面，但當作後台也很夠用了，因此bootstrap其實非常適合用來快速建構一個後台程式，當然只要經過調整，要當前台門面也是完全沒有問題的！