選擇 IDE 的評估項目

1. 針對特定語言執行測試的便利性
2. 針對特定語言 Debug 工具的便利性
3. 與現有版本控制工具的支援程度

Firefox 和 Chrome 不支援 IPv6 Link-Local Address + Scope ID 的原因

因為 RFC3986 中對於 % 使用的規定，Firefox 和 Chrome 並不支援 URI 使用 IPv6 Link-Local Address + Scope ID (Firefox 曾經在一些版本中有支援但後來已移除)。
不過因為 RFC6874 的定義，未來大家應該都會支援在 URI 使用 IPv6 Link-Local Address + Scope ID。

Reference:
http://code.google.com/p/chromium/issues/detail?id=70762
http://tools.ietf.org/html/rfc3986
http://tools.ietf.org/html/rfc6874

window.location.hostname 遇到 IPv6 Address 的相容性問題

當我們在瀏覽器輸入 IPv6 的 Address 時前後會帶中括號 [] 將 IPv6 的 Address 包起來，
但相同的 IPv6 URI，當我們用 window.location.hostname 取值時，不同瀏覽器上會回傳不同的字串。

在 IE 和 Firefox 回傳的 IPv6 Address 沒有帶中括號。
但 Chrome 回傳的有。

當我們使用 window.location.href 時，如果 URI 中有包含 IPv6 的 Address 時，則不管什麼瀏覽器都要帶 [] 中括號才能正常的運作。

以後應該會統一，但目前在透過 JavaScript 作頁面轉換處理時要注意。

Reference:
http://lists.w3.org/Archives/Public/public-html/2010Dec/0183.html

程式設計筆記

前陣子讀了 2/3 的 Clean Code 補了不少 coding 的觀念 (Java 的部分我不熟，所以跟 Java 相關的我直接跳過)，接連兩天的 Code Review 會議又聽到了一些不錯的觀念，就筆記一下。

A. 盡可能在設計時要考慮到
1. 簡化流程
2. 保持彈性
3. 提高擴充性

B. 提高資料的描述性方便取用
1. 變數名稱
2. 物件封裝

C. 處理最大量資料的效率

D. 變數或函式取名時可以參考其他語言常見或既有的名稱，提高可讀性

什麼是程式設計師最重要的技能

1. 對程式語言的熟悉
2. 對整個平台運作的熟悉
3. 熱情
4. 溝通

但最重要的是溝通！

Reference:
http://www.techbang.com/posts/14478-program-designers-of-the-most-important-skills

使用 encodeURIComponent 將字串傳換為 URI 要將空白換成+

##
For application/x-www-form-urlencoded (POST), spaces are to be replaced by '+', so one may wish to follow a encodeURIComponent replacement with an additional replacement of "%20" with "+".
##

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
http://www.w3.org/TR/html401/interact/forms.html#form-content-type

Boundary Test (Error Handling)

評估資料來源，是否確定一定不會有例外資料進來，如果不會有，就不用檢查，如果資料來源有可能超乎預期，就要檢查。

也或者說提供別人呼叫的 API 都要檢查進來的資料最保險。

1. Web UI
2. CGI (HTTP 的 Request 不一定來自瀏覽器，也可以擷取封包自己塞資料)
3. API

處理字串和記憶體時的保護性寫法

當我們在處理字串或記憶體時盡量使用保護性的寫法，可以減少 Overflow 或 Overlap 的機會。

1.  使用可以掌握資料長度的寫法

memcpy

strncpy

strncat

snprintf

2. 使用可以暫存資料位址的寫法

strtok_r

3. 檢查字串是否包含 '\0'

透過 HTTP 傳送資料給 CGI 的注意事項

Web 用戶端 (瀏覽器) 可以透過 HTTP Get 或 Post 的方式將資料傳送給 Server 的 CGI 處理。
但我們也可以透過仿造 URL 或擷取封包修改內容的方式，將修改過後的內容傳送給 Server，不經由原本用戶端的 Form 或 JavaScript。因此除了在用戶端驗證資料的正確性與合法性，也必須在 Server 端作相同的驗證。

以下舉出幾種必須驗證的 Case：

1. 資料長度太長。
2. CGI 要接收數字但傳送過來的資料包含數字與其他字符。
3. 資料沒有落在定義的範圍中。
4. 沒有限制接收檔案的大小。

如果涉及敏感的資料如帳號密碼，必須要先加密後再傳輸。

Cookie 在 HTTP 和 HTTPS 間的使用限制

在相同 Domain 的情況下：

• HTTP Cookie, with "Secure" will be returned only on HTTPS connections (pointless to do this)
• HTTPS Cookie, with "Secure" will be returned only on HTTPS connections
• HTTP Cookie, without "Secure" will be returned on HTTP or HTTPS connections
• HTTPS Cookie, without "Secure" will be returned on HTTP or HTTPS connections (could leak secure information)

Reference:
http://stackoverflow.com/questions/2163828/reading-cookies-via-https-that-were-set-using-http
RFC2965 3.3

Same-Origine Policy

在 JavaScript 中有 Origine 的限制，可以參考以下的條件：

目前查到的解決方法有三種：
1. JSONP 但只限制用 HTTP Get 取得資料
2. Iframe or Form DOM 的 submit (網頁會 Reload，所以不受 Origin 的限制)
3. 在 Server 端設定 Cross-Origin Resource Sharing (CORS)

PS. AJAX 會受到 Origin 的限制

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

興趣與職涯規劃

最近開始思考未來，讀了一些文章心得如下：

1. 在興趣、能力 (經常被主管稱許的地方)、市場需求間取得交集

2. 興趣、未來性、不可取代性比薪水重要

3. 用要與不要，加上關鍵字歸納出大方向與縮小範圍

Reference:
 http://blog.yam.com/tzaralin/article/64336974
找不到理想與熱情？你需要第二次「抓周」！
找出生涯規劃的關鍵字
三個圈畫出你的領域

如何修改或取得 HTML Element 中的文字內容

1. innerHTML

2. nodeValue => 因為 HTML Element 中的文字內容也算是一個 Node
ex.

test1test2test3

包含了三個 Node:
a. test1
b.
c. test3

Reference:
http://www.w3schools.com/htmldom/dom_properties.asp
http://javascript.info/tutorial/basic-dom-node-properties

Msxml2.XMLHTTP 與 Microsoft.XmlHttp 的差異

在撰寫 AJAX 使用 XMLHttpRequest 物件時，同時必須要考慮到的瀏覽器相容性問題。

當我們使用 ActiveXObject 時蠻常遇到的疑惑就是 Msxml2.XMLHTTP 與 Microsoft.XmlHttp 的差異。

簡單的說就是版本的差異，相對地跟相容性有關。

Reference:
http://msdn.microsoft.com/en-us/library/ie/ms535874%28v=vs.85%29.aspx
http://forums.asp.net/t/1000060.aspx/3/10

Register Event Handler

1. [Element].onevent

在 IE8 以前的瀏覽器上有一些奇怪的限制，如：在 Iframe Element上不允許註冊 onload

2. [Element].addEventListener
3. [Element].attachEvent

使用 2 或 3 註冊又可以分成三種方式

A. Anonymous: function(){...}
a. 不會被立即執行
b. 無法被移除

B. Function Reference: [Function Name]
a. 不會被立即執行
b. 無法帶參數

C. Function Call: [Function Name]()
a. 會被立即執行
b. 可以帶參數

開放的 DNS Server

Google DNS

Preferred: 8.8.8.8
Alternate: 8.8.4.4

OpenDNS

Preferred: 208.67.222.222
Alternate: 208.67.220.220

Reference: http://getpocket.com/a/read/383826640 

Web 相關的保留字

Cookie 的保留字 = 和 ;
URL 的保留字 ? & =
HTML 保留字 " ' & < >

更詳細的可以 Reference: rfc3986

Web 控制 Browser Cache 的方式

 http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 http-equiv="Pragma" content="no-cache" />
 http-equiv="Expires" content="0" />

Reference:

https://developer.mozilla.org/en-US/docs/HTTP_Caching_FAQ

http://hungred.com/how-to/tutorial-stop-caching-jquery-javascript/

http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers

可以在 Client 端暫存資料的地方

要在 Client 端的瀏覽器暫存資料，不受瀏覽器 Reload 的影響可以利用：

1. Address Bar (帶在 URL 中)
2. Cookie

暫存的資料需考慮安全性問題。

產生 Event 並傳送給指定的 Element

1. Create event

createEvent / createEventObject

2. Initial event
根據我們建立 Event 的方式決定初始化的方式

3. Dispatch event
dispatchEvent / fireEvent

PS. 要考慮到瀏覽器相容性的問題。

網頁上英文字因為換行被截斷的問題

CSS 的解法：

word-break
word-wrap

JavaScript 的解法：

style.wordBreak
style.wordWrap

在 Firefox 3.5 上遇到的 reload 問題

##

you might call the same page but let it look like it is an other page by changing the querystring:

window.location.href = "index.html" + "?" + Date.parse(new Date());

This works for every browser. You could improve it by extracting the current page out of location.href.
Edit:
If you already have an existing querystring you have to use & insead of ?:

window.location.href = "product.aspx?id=prod" + "&" + Date.parse(new Date());

##

Reference:
http://stackoverflow.com/questions/1536900/force-a-page-refresh-using-javascript-in-firefox

Browser Cache

• public — marks authenticated responses as cacheable; normally, if HTTP authentication is required, responses are automatically private.
• private — allows caches that are specific to one user (e.g., in a browser) to store the response; shared caches (e.g., in a proxy) may not.
• no-cache — forces caches to submit the request to the origin server for validation before releasing a cached copy, every time. This is useful to assure that authentication is respected (in combination with public), or to maintain rigid freshness, without sacrificing all of the benefits of caching.
• no-store — instructs caches not to keep a copy of the representation under any conditions.

Reference:
http://www.mnot.net/cache_docs/#CACHE-CONTROL

如何擷取 Browser 可以顯示的寬度和高度 (考量到多螢幕環境)

Firefox、Chrome、IE9：


window.top.innerWidth
window.top.innerHeight


IE8 and previous version：

window.top.document.body.clientWidth
window.top.document.body.clientHeight

Event Handler 如何取得發生 event 的物件

1. this (有瀏覽器相容性的問題)
2. event.srcElement
3. event.target

What is event bubbling and capturing

Event capturing
When you use event capturing

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

the event handler of element1 fires first, the event handler of element2 fires last.
Event bubbling
When you use event bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

the event handler of element2 fires first, the event handler of element1 fires last.

Reference: http://www.quirksmode.org/js/events_order.html