前端軍火庫

分類 (共 33 篇文章)

[node.js] 打造美觀的互動式 CLI 介面

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

繼續閱讀
[Webpack] 分析產生後的 bundle 內容

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

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

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

繼續閱讀
[前端軍火庫]Lena.js - 為相片加上多種濾鏡

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

繼續閱讀
[前端軍火庫]Chart.js - 輕鬆完成資料視覺化

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

繼續閱讀
[前端軍火庫]jsPDF - 前端直接產生PDF也沒問題!

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

繼續閱讀
[前端軍火庫]PDF.js - 前端也能輕鬆顯示PDF

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

繼續閱讀
[前端軍火庫]jQuery Knob - 酷炫的旋鈕式數字選擇器

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

繼續閱讀
[前端軍火庫]ClockPicker - 更直覺的時間選擇器

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

繼續閱讀
[前端軍火庫]X-editable - 瀏覽、新增、修改三個願望一次滿足

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

繼續閱讀
[前端軍火庫]Switchery - 打造iOS風格的checkbox

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

繼續閱讀