我的 Web 開發工具

在我從事 Web 開發這段期間,其實一直依賴著很多好用的工具及參考文件;當然也不是所有的工具和文件我都精通,但它們確實幫我節省了很多開發的時間,也讓我學到很多有趣的技術。

以下我就來分享一些我收集並放在手邊參考的資訊,我也會大略地描述它們的內容與用途。

Javascript

Formatter

  • Online javascript beautifier

    用來格式化雜亂無章的 JavaScript 程式碼,通常我都用來偷看別人壓縮過的 JavaScript 是怎麼寫的。

  • Online JavaScript Packer

    跟上面那個剛好相反,用來打包 JavaScript 程式碼。當然目前還有很多更好的選擇,能直接整合在開發流程裡,但線上版的總是比較方便。

Library / CDN

  • cdn js – the missing cdn

    這個網站幫我們很多常見的 JavaScript Library 放在 CDN 服務上。如果 Google Libraries API 找不到的話,可以來這裡找找看。

  • Microjs

    這個網站收集了很多較不常見的 JavaScript Library ,並且分門別類讓我們可以清楚的瞭解它們的用途。通常我用到的機會不大,但有用到時,就會發現有很多寶可以挖。

  • URI.js – URLs in Javascript

    用來解析網址的好工具,我目前是用它來製作 Portable 的 Backbone.js 程式。

JSON

  • Online JSON Viewer / Json Parser Online

    這兩個工具可以用樹狀的方式來呈現 JSON 輸出;除了可以用來驗證 JSON 外,我通常也用來看 JSON 的結構是不是正確的。

Converter

  • Js2coffee

    這個工具可以幫我們把 JavaScript 轉成 CoffeeScript ;有趣的是,它也是 CoffeeScript 寫的。一開始學習 CoffeeScript 時,用到的機會比較多。

Syntax

  • JavaScript Garden

    這是收集了一些 JavaScript 常見問題的網站,通常我在遇到某些語法問題時,會來看看。

Online Tester

  • jsFiddle

    線上測試 JavaScript 的好用服務,而且也提供一些主流 JavaScript Library 的預載。

  • Tinkerbin

    跟 jsFiddle 一樣的服務,但它直接支援 CoffeeScript/SASS/LESS 等語法。

  • JS Bin

    這個服務也可以線上測試 JavaScript ,也支援多數主流 JavaScript Library 。

jQuery

Backbone.js

  • Backbone.js

    Backbone.js 的官方網站,同時也是參考手冊;目前是我最常瀏覽的網站。

  • Underscore.js

    除了是 Backbone.js 必要的 library 外,它裡面提供的很多功能對 JavaScript 開發也非常有用。

  • Backbone.js Tutorials

    收集了一些 Backbone.js 的教學文件。

  • Tutorials, blog posts and example sites

    Backbone.js 官方列出的教學與範例原始碼,我有時會來這裡看高手是怎麼用 Backbone.js 。

  • Backbone patterns

    使用 Backbone.js 可以應用的一些 Patterns ,有很多好用的密技。

  • Backbone Boilerplate

    一個結合了後端 Node.js 程式,很完整的 Backbons.js App 範本。

CSS

SASS Tools

  • SASS

    提供可程式化的 CSS 語法,也是我目前在 Web 開發上的利器。

  • Compass

    目前是我製作前端網站必備工具之一,它在 SASS 語法上加入更多方便的外掛,讓我可以很輕鬆地處理很多原本很複雜的 CSS 。

  • css2sass

    這個工具可以把 CSS 轉換成 SASS ,當我需要把某些別人寫好的 CSS 片段放到目前的 SASS 檔案中時,我就會用這個工具來協助我轉換。

Layout

  • CSS Layout Generator

    視覺化的 CSS Layout 產生工具,雖然很久沒用了,但依舊推薦給剛學 CSS Layout 的朋友。

  • CSS layouts

    這是一個收集 CSS Layout 教學的網站,我之前會在這裡找接近專案需要的版型,再舉一反三地套用到專案上。

Formatter

Browser Support

Snippets

  • Incredibly Useful CSS Snippets

    這是很久以前找到的好用 CSS 程式片段,但後來用了 Compass 後就比較少參考了。

  • CSS Word-wrap

    很有用的程式碼片段,它將目前各家瀏覽器支援的 white-space 屬性做了整理。

Framework

  • Formee

    表單美化的 CSS Framework ,但目前用到的機會也是很少。

  • Bootstrap, from Twitter

    目前最常用的 CSS Framework 。

  • Twitter Bootstrap Generator

    如果沒有安裝 LESS 時,這個工具可以用來調整 Twitter-Bootstrap CSS 的參數。如果有裝 LESS 的話,直接改其中的 scaffolding.less 會比較快。

  • Skeleton

    目的跟 Twitter-Bootstrap 很像,也是一個很完整的 CSS Framework 。不過 Skeleton 多了 Media Query 的特色,更適合用在行動裝置上。

CSS3 Generator

  • CSS3.0 Maker

    這個線上工具大概是我看過最完整的 CSS3 特效產生器了。

  • Layer Styles

    這個 CSS 產生器的介面很類似 Photoshop 的屬性視窗來協助我們調整 Box 的相關屬性。利用它也可以作出很多不錯的按鈕樣式。

  • CSS3 Generator

    這個 CSS3 產生器也是非常完整,它的特色是會用問答的方式幫我們產生出想要的 CSS3 樣式。

  • CSS3 Playground

    也是支援多種 CSS3 特效的產生器。

  • CSS3 Generator

    這個工具的功能就少了一點,但介面很好看。

  • Ultimate CSS Gradient Generator

    專業級的 CSS3 漸層產生器,能設定的選項鉅細靡遺。

  • Linear Gradients

    也是用來產生 CSS3 漸層特效的工具,但後來也加入了一些其他 CSS3 效果。

  • CSS3 Gradient Generator

    也是很不錯的 CSS3 漸層產生器,但選項稍微少了點。

Button Maker

References

  • CSS3.com

    這個網站就是有關 CSS 的問答網站,也提供了基本的 CSS 參考手冊。

  • Media Queries

    這個網站收集了很多使用 Media Query 的網站,主要我是用來參考高手們如何在不同尺寸下呈現網站。

HTML5

Detection

  • Modernizr

    這個 Library 可以用來偵測瀏覽器對 HTML5 / CSS3 的支援程度,讓開發者可以選擇替代方案。

Template

  • HTML5 Boilerplate

    提供預先設定好的 HTML5 範本,,讓我們不必從無到有建置 HTML5 網站。

  • Initializr

    基於上面的 HTML5 Boilerplate 的 HTML5 範本,但提供了更多樣化的選項,讓我們可以自訂要加在範本上的元件;它也是目前我製作新網站一定會用到的工具之一。

  • SwitchToHTML5

    這個工具可以產生一個簡單的 HTML5 範本,不過目前我很少用了。

Features List

  • Element Index

    這個網站把所有 HTML5 支援的 HTML 標籤都列出來;是我剛開始學習 HTML5 時,會來查詢標籤定義的地方。

  • HTML5 Demos and Examples

    這個網站展示了很多 HTML5 的新特色;先前 HTML5 剛流行起來時,我會在這裡看看有什麼新玩意兒。

  • The HTML5 test

    測試瀏覽器對 HTML5 的支援程度,一般是在新瀏覽器版本推出時,我會用這個服務來測試。

  • Mobile HTML5

    這個網站列出目前行動裝置對 HTML5 的支援,這是之前在製作 PHPConf.TW 網站時會參考到的。

  • CSS3 & HTML5 Browser Support

    列出目前主流瀏覽器對 HTML5 及 CSS3 的支援狀況。

Framework

Tools

  • Manifested

    可以幫網站建立離線檔案清單,目前還沒有機會在實戰中使用。

Reference

  • HTML5 web dev reading list

    這是一份學習 HTML5 的推薦閱讀清單;有時間的話可以全部看看,我目前是挑有興趣的先看。

Cheat Sheet

DOM Tools

  • XRAY

    這是很久以前我就一直放在手邊用的 bookmarklet 小工具,可以列出 HTML 元素的一些概況。重要的是它支援各家主流瀏覽器,讓我在沒有 Firebug 時也可以使用。

  • MRI

    用來測試輸入的 Selector 是不是能找到我們想要的那些元素,尤其在寫 jQuery 時非常方便。

Browser Tools

  • resizeMyBrowser

    這個工具提供了很多常見的行動裝置可視區域大小,點選後可以快速把瀏覽器重設為我們選擇的大小。通常我是用來測試網站能不能在某些行動裝置上看。

  • Detect Mobile Browsers

    提供了偵測是否為行動裝置瀏覽器的各種做法,這也是我在做行動網站時會用到的好工具。

PHP

Database Client

  • phpMyAdmin

    這應該不用多介紹了,幾乎我手邊的機器都會安裝的 MySQL 線上 Client 工具。

Formatter

  • PHP Formatter

    用來格式化 PHP 程式碼的好工具,這是我在寫作時會用到的。

Snippet

Design

Templates

  • Free Web Templates

    每次有需要做頁面時,我都會在這些網站裡找靈感。

Color

Icons

Mockup

Regular Expression

  • RegExr

    測試 Regular Expression 的工具,應該適用於大多數有支援 Regular Expression 的語言。

  • Online Javascript Regular Expression Tester

    專為 Javascript Regular Expression 所寫的線上測試工具。

  • Rubular

    專為 Ruby Regular Expression 所寫的線上測試工具。

Documents

  • Docpool.co

    收集了一些網站前置作業文件的範本。

Projects

  • Redmine

    最近終於開始有時間研究的一套強大專案管理工具,支援多種版本控制系統。

Site Tools

Code

Snippets Share

  • Chop

    用來分享一段小程式的服務。

Online Diff

Git

Books

References

Tips

Markdown Editor

  • Online Markdown Editor

    在左方輸入 Markdown 語法,就可以在右方即時預覽的 Markdown 編輯器。

  • Markdown Editor

    跟上面一樣,但提供了數種版面配置選項,也可以讓我們上傳 Markdown 文件編輯。

Desktop App

  • NetBeans IDE

    這個是目前我最得力的 PHP 開發助手。除了 PHP Class/Function 的自動完成與基本重構功能外,還加上了 PHPUnit/ZF/PHPDoc 等外部指令的支援。

  • Sublime Text 2

    號稱可以取代 Textmate 的強大文字編輯器,因為它啟動速度快,又支援 SASS/CoffeeScript 語法,目前是我在 NetBeans 之外的另一個好助手。

  • LiveReload

    這個 Mac 上的好用工具,可以幫我們監控專案中指定檔案類型的更新;通常是用在 CSS/SASS 及 JavaScript/CoffeeScript 這些檔案上。搭配瀏覽器的外掛程式後,就可以即時預覽這些檔案更動後的變化。

  • VirtualHostX

    用來管理 Mac 上 Apache VirtualHost 的小工具,這也是我在開發 PHP 專案的利器之一。 (如果是 Rails 開發者的話, Pow 會是比較好的選擇。)

  • Sequel Pro

    免費的圖形化介面 Mac MySQL Client ,是在本機操作中,我用來取代 phpMyAdmin 的工具。

  • SourceTree

    除了用 Terminal 直接操作指令外,它是我在 Mac 上使用 Git 必備的 Client 工具。

  • SmartSVN

    因為公司的版本控制系統是 Subversion ,因此這個 Mac Subversion Client 工具也是我目前最常使用的。

更多好用的 Desktop 工具,可以參考龍哥 (高見龍) 的這篇文章:我的工具箱

結論

這裡所羅列的資訊其實只是茫茫網海的冰山一角而已,我想一定還有更多更好用的工具與文件等待我們去發掘。

希望這篇文章能夠幫助大家在 Web 開發這條路上走得更順暢一些,也歡迎大家能夠分享自己常用的工具。