懸浮式對話方塊的註腳效果

之前社群有兩則註腳效果的分享 ( http://goo.gl/EOBzEM , http://goo.gl/nFz80P )，而這個註腳效果更漂亮，對話框會從天而降，而且有多自訂的選項，請見這篇的詳細教學： http://xox520.blogspot.com/2014/02/dialog-box-effects.html

來看看世界級的網頁工程師用什麼環境開發程式？

NetTuts+ 最近發表了一篇文章，訪問了 15 位世界級的網頁工程師，詢問他們下列四個問題：
1. 你主要的工作是什麼？
2. 你用什麼樣的電腦開發程式？
3. 你用什麼樣的軟體來撰寫程式碼？
4. 哪些軟體你不用會死

結果...清一色全部用 Mac 系統啊！我之前也建議，Mac 有比 Windows 更友善的介面，但又使用 FreeBSD 這顆 Unix 家族的強力引擎，兼具 Linux 的強大。真的是軟體工程師的上上之選哪～（個人也已經使用快一年了）。

另外，寫碼工具也由 Sublime Text 獲得壓倒性勝利！我之前也在這個版推薦過好幾次。真的非常鼓勵程式師們去學啊！

原文在此，順便幫大家翻譯一下：
http://net.tutsplus.com/articles/what-are-you-using/

Scott Gonzalez: jQuery UI 主要作者之一
* 主要工作：JavaScript & Node.js
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text + TrailingSpaces, Pretty JSON, GitGutter, Markdown Preview 四個外掛
* 必備軟體：Git/GitHub, Apache, Chrome, Linkinus, Skype, Node

Raymond Camden: Adobe 資深工程師，制定各種網頁標準
* 主要工作：制定各種網頁標準
* 硬體平台：MacBook Pro
* 開發工具：Brackets
* 必備軟體：Chrome, Brackets, Tweetdeck, Evernote

John-David Dalton: jsPerf 與 Benchmark.js 作者，JavaScript 狂熱愛好者
* 主要工作：撰寫各種函式庫
* 硬體平台：MacBook Pro
* 開發工具：Komodo Edit
* 必備軟體：Total Finder, Chrome/Firefox/Opera/Safari/IE, Node, Ringo, Rhino, Narwhal

Stephanie Sullivan Rewis: HOW Design, UI16, An Event Apart, Microsoft’s MIX, Macworld, SXSW, Adobe Max 等大型研討會策展人
* 主要工作：前端網頁開發（HTML/CSS/JavaScript）
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：CodeKit, Tower, HipChat, Fireworks, Chrome

Christian Heilmann: Web 技術專欄作家
* 主要工作：科技文章撰寫
* 硬體平台：MacBook Air
* 開發工具：Sublime Text
* 必備軟體：瀏覽器, Git, IRC, Dropbox, Spotify

Ryan Grove: SmugMug 這個 JavaScript 元件的作者
* 主要工作：JavaScript 函式庫撰寫
* 硬體平台：Mac Pro（桌機，工作站等級）
* 開發工具：Sublime Text
* 必備軟體：Sublime Text, JSHint, Adium, Tower, Dropbox, Rsync, Arg, Gmail, GitHub, Chrome, Google Hangouts...等

Cody Lindley
* 主要工作：前端網頁技術（HTML/CSS/JavaScript）
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：SmartGit, Sublime, Divvy, JumpCut, Skype, Chrome...等。

Luke Smith: YUI 這個 JavaScript 函式庫的主要作者
* 主要工作：JavaScript 函式庫撰寫
* 硬體平台：MacBook Air
* 開發工具：Vim
* 必備軟體：Vim, Git

Chris Williams: SaferAging 副總，JSConf US 與 RobotsConf 會議主席
* 主要工作：各類硬體感知器的程式撰寫
* 硬體平台：Mac Pro, MacBook Air, Mac Mini
* 開發工具：Sublime Text 3
* 必備軟體：Sublime Text, iTerm2, Fish Shell, Wunderlist

Aaron Newton: Thanx 專案經理
* 主要工作：HTML5
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：CloudApp, Jing, Sequel Pro, Jumpcut, Total Terminal, GitX

Ben Cherry: Pushd 工程師
* 主要工作：Ruby, iOS, JavaScript
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：Sublime Text 2, iTerm 2, Chrome, 1Password, Gmail, Flipboard, Twitter, Facebook, Reddit

Jacob Thornton: @medium, Bootstrap, Bower 等知名 JavaScript 函式庫作者
* 主要工作：HTML, CSS, JavaScript
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text 2
* 必備軟體：Rdio

Lea Verou: W3C 委員會開發者
* 主要工作：HTML, CSS, JavaScript
* 硬體平台：MacBook Air
* 開發工具：Espresso
* 必備軟體：Espresso, Transmit, CodeKit, Adobe Illustrator, Chrome, Safari, Firefox, Opera, WebKit nightlies, Chrome Canary

Jonathan Snook: Shopify 工程師
* 主要工作：HTML/CSS/JavaScript
* 硬體平台：MacBook Air
* 開發工具：Vim
* 必備軟體：Vim, Chrome,

Peter Wagenet: Ember 這個 JavaScript 函式庫的主要成員
* 主要工作：JavaScript
* 硬體平台：MacBook Air
* 開發工具：Sublime Text 3
* 必備軟體：Chrome, Firefox, Adium, GTalk, Twitter, Divvy, 1Password, Bartender

30 個讓你的網站看起來更優的點子

做網站的朋友，每天大多竭盡心思想著如何把網站變得更好看，但又不致於讓伺服器負擔太重。這裡有一篇「30 個立即可用的網站好點子」給大家參考。包含：

1. 使用者體驗測試
2. 適度的留白
3. 適當的字體
4. 以 CSS3 增加陰影，營造層次感
5. 添加背景紋理與樣板
6. 用 CSS3 替背景披上漸層色
7. 善用 Twitter 的 Bootstrap UI 函式庫
8. 善用 HTML5 Kickstart UI 函式庫
9. 使用 jQuery UI
10. 使用精美的全螢幕背景圖片
11. 以「圖示」（Icon）來代替單調的「選單（Menu）」
12. 常常更換整個網站的基礎色調
13. 盡可能將老舊瀏覽器的支援考慮在內
14. 善用搶眼的特殊字體營造網頁風格
15. 支援「社群分享」
16. 開放讀者討論
17. 較寬的「頁腳」設計（目前流行）
18. 使用相對大小來決定照片大小（如：以「100%」取代「180px」）
19. 提高「選單」的操作性（如：增加「首頁 > 產品 > 相機 > CM-100」這類超連結在頂端）
20. 為「照片」與「影片」以 HTML 屬性標籤添加關鍵字，方便搜尋引擎尋找
21. 別把選單項目埋得太深，讓使用者找不到
22. 增設「回到頁面頂部」（Back to Top）連結
23. 記得以 CSS 設定 與

 標籤，使之易讀明顯
24. 記得增加圖片的 width 與 height 屬性
25. 以 alertify.js 這類函式庫，製作彈出式視窗
26. 版面要能適應「桌機」或「手機」等不同螢幕大小
27. 友站連結
28. 善用看起來很像圖示的字型
29. 圖片框加上陰影，營造層次感
30. 盡量以 CSS 代替 HTML 標籤排版，以利輕鬆更換版面

原文連結如下：
http://www.hongkiat.com/blog/ideas-to-nicer-websites/