Home / 網頁前端 / 跟(不)上網頁前端技術（資源大雜燴）

跟(不)上網頁前端技術（資源大雜燴）

最近，「前端工程」這名詞越來越常聽到了，這還真叫我這個一直停留在初學階段的門外漢有點焦慮。這就來整理一下自己可能需要做的功課，包括 Bootstrap、MV* 框架、好用的 JavaScript 函式庫、免費的 icon fonts、HTML、CSS 設計工具等等。

更新
  • 2013-09-07：把一些自己覺得好用的網頁開發與設計工具整理進來，包括 JavaScript 函式庫、HTML 與 CSS 產生器等等。
  • 2013-10-13：Durandal、BreezeJS，以及其他細微補充。
  • 2013-10-17：Image Picker、Masonry。
（估計會持續更新）

小引

不用說，以下這些東西是必備的——雖然我根本不太熟：
另外還有：
  • Bootstrap - 快速建立美觀、一致的網頁（但也容易跟別人的網站長得很像）。
  • BEM - 一種網頁設計原則，強調持續修改、著重網頁的可維護性。我不知道這些原則能否容易用於 ASP.NET 應用程式開發模型，但出發點是很好的。這裡有簡體中文翻譯。
  • 前端 MV* 框架
  • Polyfill
  • 跨瀏覽器相容性測試
  • 輔助設計工具，如 CSS、icon fonts......等等（下方補述）
以下分項整理（是自己需要作的功課，不代表都用過了）。

Polyfill

What is a Polyfill? 解釋了何謂 Polyfill 以及為什麼會有這個東西。看了一堆解釋之後，我覺得底下這張圖相當簡單明瞭：

polyfill 的定義
Origin: http://www.paulirish.com/i/7570.png

嗯，polyfill 是一種 shim（墊片；攔截層），提供一些新 API 的實作，以填補老舊瀏覽器不支援的功能。簡單來說，其用途就是讓老舊瀏覽器支援 HTML5/CSS3 相關功能。

所以啦，為了填補瀏覽器的不足，就會有各式各樣用途的 polyfills。HTML5 Cross Browser Polyfills 為前端開發人員蒐集了很多 shims 和 polyfills，提供了一份無廢話 HTML5 後援指南（no-bullshit guide to HTML5 fallbacks），需要時可從裡面挖寶。

跨瀏覽器相容性測試

先前看到有人建議 IETester，於是拿來用看看，覺得作為一個簡易測試工具還挺方便的，只是擔心仍有不足的地方。如果要檢測網頁跨 IE 版本的相容程度，還是到 modern.ie 看看吧，除了線上掃描你的網頁，還有提供各種虛擬機器可以下載回去實測，支援的作業平台包括 Windows、Mac、和 Linux。參考下圖：


作業平台選擇 Windows 之後，右邊挑選 VM 平台（不只微軟自家的 Hyper-V，還有 VirtualBox 和 VMware）。我選了 Microsoft Server 2012 和 Windows 8 Pro 的 Hiper-V 平台，結果下方列出一拖拉庫的虛擬機器，涵蓋了 IE 6、7、8、9、10、11 等版本。這真是太方便啦！幾個月前還自己建立其中幾種 VM 來測試勒 XD


其他相關知識："X-UA-Compatible" content="IE=Edge,chrome=1"

Bootstrap

說到 Bootstrap，一定要去看一下 K. K. Bruce 的佛心力作：Bootstrap 中文教學。


一旦在網站上套用 Bootstrap 之後，接著可能會需要一些輔助的 plugins。30 Amazing Plugins to Extend Twitter Bootstrap 裡面介紹了 30 個插件，似乎挺不錯的。只是我一個都還沒用上.....

前端 MV* 與 SPA 框架

 MV* 指的是 MVP、MVVM、MVC 等等，SPA 則是 Single Page Application 的縮寫。
  • KnockoutJS：專作 data binding。
  • AngularJS：由 Google 開發維護，一套豪華的 SPA 框架。它可以用 jQuery，也可以用自家的 jqLite。
  • Durandal：結合其他 JS 函式庫一起合作，成為一套 SPA 框架。有用到的 JS 函式庫包括 KnockoutJS、RequireJS、Sammy 等等。授權條款：MIT。
選擇 MV* 框架時可以參考以下資源：
此外，BreezeJS 也必須提一下，因為它可以跟其他 MV* 框架一起服用，協助開發 Single Page Applications。

（謎之音：真是網頁前端框架風起雲湧的大亂鬥時代啊！）

其他輔助網頁開發的工具、資源
  • FireBug - 很好用的網頁除錯工具。當然 Chrome 和 IE 內建的除錯功能也很好用啦！都是按 F12 就能開啟。
  • Fiddler - 很好用的 HTTP(S) 訊息傳輸的除錯工具。使用 Chrome 的人可以考慮加裝Postman。
  • jsFiddle - 線上練習、展示 JavaScript 的工具。
  • ui.livetools - 線上建立客製化 HTML 表單、按鈕、圖示的工具。
  • Pure CSS - 提供現成可用 CSS 樣式庫，是 YUI Library 的子專案。授權條款：BSD。
  • Topcoat - 免費的 CSS 樣式庫，以及圖庫（授權條款：Apache 2.0）。
  • CSS TrashMan - CSS 清潔工，幫你把網頁中多餘的 CSS 去掉。
  • CSS Sprites Generator - 線上建立 CSS Sprite 圖檔。
  • CSS Sprite Generator - 另一個線上建立 CSS Sprite 圖檔的工具，可上傳 zip 檔（以支援很較多、較大的圖片）。
  • Glue - 命令列工具，用來將多個圖檔組合成一個 CSS Sprite 圖檔。
  • Spritecow - 線上讀取你的 CSS Sprite 圖檔，以視覺化方式選取其中的圖片，並顯示該圖片的 CSS，包括偏移位置、寬度與高度等等。方便！
  • famfamfam.com - 免費、可商用的圖庫。其中的 Silk 圖庫包含 1000 個圖示喔。
  • Font Awesome - 免費的 icon font，可搭配 Bootstrap 一起服用，亦可單獨使用。
  • The Elegant Icon Font - 也是免費、可商用的 icon font（採 GPL 2.0 與 MIT 雙重條款）。網路上還可以找到更多、更多圖像字型、。如果你不知道 icon font 的用處，這裡有線上展示（重點：容易修改，包括大小、顏色，陰影效果等，還可疊疊樂）。
取自 Font Awesome 官網的範例

取自 Elegant Icon Font 網站


其他好用好玩 JavaScript 函式庫、plugins
  • Noty - 用來顯示各種訊息，例如：錯誤、警告、確認等。官網有提供線上 demo。jQuery based。授權條款：MIT。
  • Alertify.js - 建立美觀的對話框、通知訊息（例如在網頁右下角顯示通知訊息，三秒後自動消失）。授權條款：MIT。這也是我自己常用的 js 函式庫之一。
Alertify.js
Morris.js


還有更多....

除了以上提到的工具，Will 保哥的部落格也介紹了不少好東西，我稍微爬了一下，整理在文後的延伸閱讀清單。

此外，How to keep up to date on front-end technologies 也提供了幾個方法，讓我們搭上前端技術的列車。包括：
  1. 關注狠角色的動向
  2. 尋找最佳學習資源
  3. 參與技術研習會議
  4. 整理你自己的資源 （這篇筆記可以算吧）

怎麼看得完啊！
延伸閱讀

6 則留言:

  1. 米米貓學開發2013/9/3 下午3:11

    還有jQuery UI

    回覆刪除
  2. Michael Tsai2013/9/3 下午4:36

    好滴! 補上囉。3Q :)

    回覆刪除
  3. Michael Tsai2013/9/7 下午2:59

    加了更多好用好玩的東西，一整個眼花撩亂和興奮... XD

    回覆刪除
  4. Unknown2013/9/14 下午1:36

    工具我覺得實用的還有Fiddler @@

    回覆刪除
  5. Michael Tsai2013/9/14 晚上7:40

    沒錯沒錯，Fiddler 是必備的呀! 我竟然漏掉了 Orz
    Thanks!

    回覆刪除
  6. Michael Tsai2013/9/14 晚上7:41

    已補上 Fiddler。

    回覆刪除

訂閱： 張貼留言 ( Atom )
技術提供：Blogger.
回頂端⬆️