全端開發人員天梯

在web app中遇到需要選擇日期、時間需求的時候，日期通常很簡單，大部分的UI元件都可以用表格做出一個簡單的日曆來選擇，而時間通常就比較沒那麼直覺，多半都是用個下拉選單選擇時間，或是直接輸入；而今天要介紹的ClockPicker，則是一個採用更直覺的方式，讓我們能直接在時鐘上選擇時間的酷炫library。

在設計CMS之類的系統時，常常會需要一個表單和一個瀏覽資料的頁面，以新型新增、修改和查詢的工作，不過畫面排版通常會非常類似，只差在表單有額外的表單控制項，而瀏覽頁面就是單純的文字而已，但當需要更新排版時，就需要兩個頁面都同時修改，非常不方便；這時候透過X-editable，就能夠在瀏覽的頁面同時編輯資料囉

Switchery是一款具有iOS風格的開關library，透過Switchery我們可以快速的把一般的checkbox包裝成具有iOS開關的風格，在一些需要用開/關來表示狀態的情境能比使用checkbox更加直覺。

今天要介紹一個autocomplete的library - Awesomplete，這是由一款功能強大但檔案小又容易使用使用的library，透過Awesomplete我們可以輕鬆地完成autocomplete功能，讓user在輸入文字時自動給予提示。

之前我們曾經就紹過Bootstrap這類的UI Framwork，目的是快速打造具有基本且通一的UI，並且支援RWD，不管是desktop或mobile瀏覽器都可以使用，而有時候我們可能不需要顧慮這麼多，只需要專注在mobile平台就可以了，這時候Onsen UI就是非常適合使用的UI Framework了。

行事曆功能在前端開發來說也是很常見的一種需求，例如透過行事曆來追蹤重要活動、代辦事項等等；而透過今天要介紹的FullCalendar，我們也能做出不輸給Google Calendar的強大行事曆！

全螢幕API(Fullscreen API)是JavaScript用來讓瀏覽器支援全螢幕的一種方式，透過Fullscreen API我們可以讓畫面可以一次呈現更多的資料，或是專注在某個影片或圖片上面等等，然後目前樓覽器的支援程度不一，因此要單純使用JavaScript的Fullscreen API，會變得複雜許多，而今天要介紹的screenfull.js，就是用來減少Fullscreen API在不同瀏覽器之間實作差異的library。

Dragula是一款協助前端開發人員完成拖曳(drag & drop)功能的library，透過Dragula我們可以輕鬆完成使用滑鼠進行清單的排序、移動位置等等功能，今天我們就來使用Dragula製作一個類似Trello的看板功能。

身為寫程式的人，有在使用任一種版本控制系統是很正常的，用過2~3種以上的也絕不希奇，以目前來說，最受歡迎的莫過於Git了，不過今天不是要介紹Git，而是要介紹一款可以畫出Git類型的樹狀結構的library - GitGraph.js

上傳檔案是各種系統遇到機率都很高的一個功能，傳統要讓使用者上傳檔案，最簡單的方法就是加個<input type="file">，但呈現的結果並不是很好看，雖然可以透過CSS來調整外觀，但整體還是有受限的感覺，使用上也稍微不太方便；而今天要介紹的Dropzone.js可以幫助我們使用更加直覺簡單的方式，來完成上傳檔案的功能。

placehold.it跟過去介紹的library都不太一樣，它是一個線上服務，功用是在網站規劃中還只是雛型階段時，暫時用來表示這裡有一張圖片的工具。也就是說，網站還未完成時，我們可能就需要進行一些DEMO，這時候某些預計要放圖片地方還沒有任何圖片可用；或是我們知道網站的某個地方一定會放置圖片，但沒有立即可用的圖片時，需要張占用的圖片放著，好確認版面不會亂掉等等，placehold.it就可以幫助你達到這些目標。

在設計系統的時候，常常因為需求複雜或龐大，UI也會越來越複雜，變得不直覺、難以操作；這時候有個操作手冊就變得非常重要，但是前端的變化速度又非常快，往往導致操作手冊跟不上UI的變化，這時如果有個響導能帶著你走過所有步驟，又不用擔心隨著UI的改變而無法使用，那真是再好不過了！今天要介紹的Intro.js，就是一款能達到上述條件的神奇library。

相信或多或少，大家都有製作投影片進行簡報的經驗，以製作投影片來說最主要的軟體大概非PoertPoint莫屬了；而想要使用PowerPoint做出絢麗的簡報沒有一番功夫可是做不到的...不過，我們可是前端工程師阿！如果有一款簡報軟體，可以使用我們熟悉的前端技術來完成，不是很棒的一件事情嗎？而Reveal.js就是這樣一款好用的簡報框架。

在上一篇文章我們介紹了toastr.js這類用來取代alert並達到更好UX目的標notify library，接下來要介紹的是比起notify更具有互動效果的dialog library，也就是透過dialog的方式，來讓跟user的互動有加分的效果；今天我們主要要介紹的是SweetAlert這款功能強大、美觀又容易使用的dialog library。

一般來說在前端要跳出通知訊息，最簡單的方式莫過於加個alert了，但使用alert其實對於UX來說並不是件好事，因為它會影響到user的操作行為，而且不同瀏覽器的顯示方式可能會有所不同，更不用說有些瀏覽器還可以在alert重複出現時，選擇把它關掉不顯示，當然這也是為了避免同樣的緒息一直出現變成畫面根本無法使用，但也讓alert變成了不穩定的未爆彈；因此像是toastr.js這類的library就可以幫助你打造美觀的提示訊息，同時也不用擔心影響到user的畫面操作。

FontAwesome可以說是目前最受歡迎的Icon Font(也就是把icon圖示放到字體使用) css library，具有豐富的圖示(675+)可用，也有許多實用的API，因此在前端界可以說是無人不知無人不曉(什麼？你不知道？那你現在可以跟上潮流了XD)。在最近的FontAwesome5的募資甚至突破了100萬美金！由此可見其巨大的影響力。今天就來簡單介紹一下FontAwesome吧。

現在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吧！