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強大的功能嗎?答案當然是可以的。