前陣子在 Youtube 上看到了一部影片，介紹了好幾個 node.js 的套件，來幫助我們打造漂亮的 CLI，才後知後覺的發現一直在使用的 Angular CLI、Schematics 等等，許多由 node.js 開發的 CLI 工具，背後那些美觀的畫面都是基於這些套件，而不是自己刻的，所以整理了一下這些套件的介紹與示範！

Webpack 是強大的前端打包工具，可以幫助我們快速的將前端 JavaScript 程式及其用到的相關程式都打包成一個或數個 js 檔。同時也可以將不需要的程式透過 tree shaking 機制過濾掉。

不過在前端的世界對於檔案大小是錙銖必較的，因此知道 webpack 到底打包了哪些程式，哪些程式是過濾不掉的，就非常重要了！

好在 Webpack 提供了一個功能，讓我們能快速分析出打包的結果，到底包進哪些程式，程式大小等等清清楚楚，今天就來看看如何分析Webpack 打包後的結果。

Lena.js是一個簡單易用的影像處理類別庫，內建了一些常見的濾鏡，可以用來補齊CSS濾鏡的不足，又不用擔心使用上太過困難，只要簡單幾行程式碼就可以套用濾鏡了。今天就來簡單玩玩Lena.js吧！

隨著大數據越來越熱門，資料視覺化也變得越來越重要，能夠以簡單明瞭的圖像顯示數據的意義，對於決策者進行決策有非常大的幫助，過去要製作這些資料圖表大多必須依靠Excel這類軟體來繪製，但靈活度不高，也難以跟資料庫連接處理，更別說不太好看了。所以今天就來紀紹一個前端資料視覺化的library - Chart.js

昨天我們介紹了PDF.js這套用來讓前端可以直接瀏覽PDF檔的library，今天我們來介紹一款可以在前端直接產生PDF檔的神奇程式－jsPDF。

如果要說有一個放諸四海皆準的通用文件格式，那麼想當然一定就是PDF了，雖然PDF是一個標準的文件規格，但要瀏覽PDF檔還是需要透過安裝軟體來顯示的，而今天要介紹的PDF.js就是一款可讓我們直接在web上顯示PDF檔的JavaScrtipt library！

jQuery Knob是一款讓我們能夠用旋鈕這種與眾不同的方式輸入數字的jQuery外掛，除了可以確保user輸入的一定是數字以外，也可以簡化user選擇/輸入數字的過程。

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

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

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