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

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

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

小引

不用說,以下這些東西是必備的——雖然我根本不太熟:
另外還有:
  • 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. 整理你自己的資源 (這篇筆記可以算吧)

怎麼看得完啊!
延伸閱讀
Copyright © 2012. Huan-Lin 學習筆記 - All Rights Reserved
Powered by Blogger
Template Design by Cool Blogger Tutorials
Published by Templates Doctor