十分鐘建立一個視差滾動效果頁面

什麼是視差滾動效果

視差滾動（Parallax Scrolling）是指讓通過鼠標實現網頁多層背景以不同的速度移動，從而形成立體的運動效果，帶來非常出色的視覺和交互體驗。這種網站通常通過鼠標滾輪滾動來實現，用不同於傳統的方式來製造不一樣的使用者感受。

範例

首先來看一下我們想達到的效果： 範例網站1 範例網站2 範例網站3

Maintainable Javascript：作者Nicholas Zakas演說重點節錄

Maintainable Javascript作者Nicholas Zakas在Fluent 2012有一場演說，以下是重點節錄：

為什麼要讓程式易維護？ 因為大部份時間都是在針對既有的程式作修改加強，而非創造新的。而所謂的修改加強，就是維護的意思。由於90%的時間都是在做維護的動作，程式的可維護性自然是很重要的議題。好維護的程式一開始可能需要很多前置作業，但長期下來會減少許多不必要的時間浪費，進而加速開發的速度。

凡走過請留下痕跡：AJAX網頁的狀態與瀏覽記錄

網頁以及使用者的習慣

使用者瀏覽網頁時，重新整理&上一頁/下一頁是很重要的功能鍵。重新整理是表示重新載入我目前在看的網頁，通常是想看看有沒有新的資訊。而上一頁/下一頁則是帶領使用者前往他上一個/下一個使用過的頁面。很簡單的概念，不是嗎？但這一切在ajax廣泛使用之後有了新的挑戰。

AJAX所帶來的挑戰

現今的前端工程師應該沒人不知道AJAX是什麼，簡單來說就是不用重新整理頁面逕向伺服器取得資料的動作。這帶來了什麼樣的問題？我們從AJAX的本質來想大概就可以略知一二：既然不用重新整理頁面又需要取得資料，通常是只需要更新部分的頁面，比如Google Map(最早開始使用AJAX的Web app之一)，當我們放大縮小地圖時，其實只有地圖的頁面範圍有更新，其他部分的頁面都是保持不變的，甚至，連URL都還是一樣。

WEB API 設計規劃

什麼是API?

API是Application Programming Interface的縮寫，以下是WIKI上對於API的定義：

An application programming interface (API) is a protocol intended to be used as an interface by software components to communicate with each other.

應用程式介面（英語：Application Programming Interface，簡稱：API），又稱為應用編程介面，就是軟體系統不同組成部分銜接的約定。

Retina裝置與網頁開發

Retina螢幕有什麼不一樣？

近年來電子設備越發精密，螢幕自然也不例外。尤其在Apple發表了所謂的Retina螢幕之後，Retina這個字自然的就成為了這類螢幕的代名詞。但除了螢幕比較細緻，點距比較密集之外，Retina跟傳統螢幕有一點非常大的不同，而這也是身為前端工程師在編寫網頁時需要注意到的。

簡單來說 Retina所指的是Device Pixel Ratio大於1（通常1.2以上）的螢幕。那什麼又是Device Pixel Ratio?（以下用DPR代替）

devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device.
devicePixelRatio = physical pixels / dips

譯：

Device Pixel Ratio是實際裝置上的像素與系統（對於前端工程師，系統=瀏覽器）像素之間的比值
Device Pixel Ratio = 實際裝置像素 / 系統像素

魚與熊掌我都要：使用UglifyJS + Source Map產生輕巧又容易除錯的JS檔

前文提到如何在CoffeeScript中使用Source Map以方便除錯。但在production code的時候(client端)通常會使用如UglifyJS, Closure等工具來優化精簡我們的js檔來提升網頁執行速度。增加了一個步驟，這樣子還能使用Source Map強大的功能嗎？答案當然是可以的。

CoffeeScript debbugging using Source Map

CoffeeScript 1.6.1版多了一個非常有用的功能：Source Map支援，關於Source Map的介紹可以看這篇。為什麼會說非常有用呢？以coffeescript開發的時候最麻煩的莫過於debug了，因為最後執行的其實是js檔，導致debug時我們看到的都是編譯好的js檔。所幸原本我們必須從js自行導回coffee程式碼的動作，剛好就是Source Map設計來解決的目標：Source Map是一個在兩份文件中建立起一個互相對應的關係的工具（在coffeescript的情境中就是編譯前的coffee檔及編譯後的js檔之前每一行程式碼的關係）。