browser cache

在開發的時候，常常會發生的事，CSS/JS 被 browser cache 住，沒更新，以為寫的 code 沒有起作用，查半天才發現是cache問題，所以，需要瞭解1. 如何快速的刪cache：IE要click六次， 2. 在密集開發的時候，乾脆disable cache。

Cache path

• Internet Explorer: C:\Documents and Settings\user\Local Settings\Temporary Internet Files
• Firefox about:config -> browser.cache.disk.parent_directory
• Firefox about:cache可以列出Memory cache device & Disk cache device的每個cache住檔案的path以及資訊。

Clear cache

• Internet Explorer: 工具->網際網路選項->刪除檔案->勾選"刪除所有離線檔案"->確
• Firefox: ctrl+shift+del -> 勾選"快取" -> 確定
• Firefox Add-ons Cache Status

Disable cache

• 工具->網際網路選項->設定->檢查儲存的畫面是否有較新的版本->每次查閱畫面時
• Firefox: about:config -> browser.cache.check_doc_frequency -> Highlight and double click. Change the 3 (default) to 1 (which signifies "Check every time I view the page") in the dialogue box. Click OK.
• Firefox Add-ons Web developer disable-> cache

forece reterival

• add time stamp to file ex: <script src="foo.js?235235235235">
  time stamp can be generated by new Date.valueOf();

References:
How to Disable Your Browser Cache — Psychology IT

Textarea Maxlength

PPK - Textarea Maxlength

The purpose of my script is not to enforce the maximum length, though it can easily be changed to do that. However, I decided to restrict my script to giving a polite reminder when the user exceeds the maximum amount of characters. Actually enforcing this maximum length is left to the trim_to attribute of Movable Type, which, being a server side functionality, is impossible for users to turn off.

1. textarea是沒有maxlen屬性的, 不過我們可以用javascript來implement, 不過目前市面上的作法通常是取substring(0, textarea.getAttribute('maxlen'))之類的, 這樣做法有一個缺點: 在IE會一直focus到textarea內文最後的地方。
2. 再者, javascript很容易可以被disable掉, 無法提供一個安全的限制, 只能拿來當作提醒的用途, 在這篇文章中, ppk建議的方法是: 超過maxlen的話, 提示他就好了, 紅色的字之類的
3. 注意文中counterClone.relatedElement = x[i]; 取得reference之後就bind在relatedElement裡面, 方便之後的access, 不需要每次都去取reference

Online beautifier for javascript

Online beautifier for javascript
prettyprinter.de
keyword: javascript code beautifier prettier

time stamp in javascript

new Date().valueOf();

comp.lang.javascript FAQ - 9.88 - 2007-10-12

Date.valueOf( ): convert a Date to millisecond representation
Object.valueOf( ): the primitive value of the specified object
To reload a page, use location.reload(). However, this depends upon the cache headers that your server sends. To change this, you need to alter the server configuration. A quick fix on the client is to change the page URI so that it contains a unique element, such as the current time. For example: location.replace(location.href+'?d='+new Date().valueOf()) If the location.href already contains a Query String, use: location.replace(location.href+'&d='+new Date().valueOf())

圖片的水平置中以及垂直置中

Centering (horizontally and vertically) an image in a box
Demo
update: 上面的例子在ie7不會work
Demo - work in ie6, ie7, firefox
<div id="wrap">
<img src="http://developer.yahoo.com/yui/docs/assets/logo.gif">
</div>
圖片的水平置中的標準作法是#wrap{text-align:center}，text-align:center是用來定位在block elemenet裡的inline element，圖片也是個inline element，FF & IE都沒問題。

比較麻煩的是圖片的垂直置中，FF以及一些標準的browser可以通過下面的方法置中

note about iframe

1. iframe id="iframe" , 用 document.getElementById('iframe') 在 IE 下會抓不到，換一個 id 即可。待確認

2. 完全清除 iframe 的 border 單靠 CSS 是不夠的，要設定 iframe frameborder="0"，設定後即可用 CSS control border style, ex: iframe{border: 1px solid #36c}

PPK - Javascript - Iframes

1. The most important rule is to give any iframe you create a name attribute, even if you also use an id.
   
2. alert(frames['inner'].document.body.innerHTML)
   

http://chunghe.googlepages.com/outter.htm

Ajaxian » Songbird v0.3: API for media mashups

Ajaxian » Songbird v0.3: API for media mashups
Develop Media Web Applications | Songbird Developer Center
player with web page api? interesting

Google's open social API

今天的重磅炸彈 - open social api
Official Google Blog: OpenSocial makes the web better
Google 推出 OpenSocial，開放風越吹越烈 « Mr./Ms. Days - 網路, 資訊, 觀察, 生活
OpenSocial - Google Code

blog.pmarca.com: Open Social: a new universe of social applications all over the web
http://blog.pmarca.com/2007/10/open-social-a-n.html

Google 的 OpenSocial @ 退伍 2.0
http://blog.ijliao.info/archives/2007/11/02/3364/

Figuring out OpenSocial
http://simonwillison.net/2007/Nov/2/opensocial/

Randy Paush的最後講座

李開復看蘭迪 « Mr./Ms. Days - 網路, 資訊, 觀察, 生活
开复和他的学生网 - 新浪BLOG - video 在文章的最後面。

keyCode and keyEvent: onkeydown onkeypress onkeyup

要利用鍵盤來進行操作，首先要先在document bind一個key event，key event(至少)有三個，keydown, keypress, keyup，測試一下這些key event能否抓到正確的key code，測試的script如下

<body>
    empty document
</body>
<script>
document.onkeyup = function(e){
    if(!e) e = window.event;
    alert(e.keyCode)'
}

keyup: IE OK, FF: OK
keydown: IE OK, FF: OK
keypress; IE: 英文數字OK, 方向鍵not OK FF: not OK

另外keydown可以在使用者一直按著某個鍵時，持續的產生event，如果想做一個一直按著某個鍵，重複一些動作，keydown會是很好的人選。
ex: http://chunghe.googlepages.com/keycode-and-keyevent-onkeydown.htm
在這個例子中，持續按著就會一直產生key event，不需要setInterval之類的咚咚