Search

6/27/2008

combo handling available on yui.yahooapis.com

If you are using the AutoComplete Control, instead of


<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-min.js"></script>


you can use

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo/yahoo-min.js&2.5.2/build/dom/dom-min.js&2.5.2/build/event/event-min.js&2.5.2/build/autocomplete/autocomplete-min.js"></script>

canvas-pie-chart

http://chunghe.googlecode.com/svn/trunk/project/canvas-pie-chart/pie.htm - ie下面有點問題,會誤判0%以及100%兩個情形,todo:加上text說明幾%。
canvas-pie-chart

6/26/2008

canvas-round-corners

http://chunghe.googlecode.com/svn/trunk/project/canvas-pie-chart/canavs-round-corner.htm - 除了這個還有很多可以做的,ex: canvas animation, canvas progress bar, canvas image rotator, etc.
canvas-pie-chart
除此之外,canvas 有非常好的 browser support,IE5/6 ( with excanvas), Gecko/Firefox, Webkit/Safari, Opera,只要不是太複雜的 canvas 都沒問題。

用gmail, google doc畫圓做round corner



YKsXMe .P0tbHb {
background:transparent url(rc?a=af&c=fad163&w=4&h=4) no-repeat scroll 0pt;
height:4px;
}



element.style {
-x-background-x-position:0px;
-x-background-y-position:0px;
background-attachment:scroll;
background-color:transparent;
background-image:url(rc?a=af&c=69c17d&ic=69c17d&bc=&w=3&h=3&lw=1&version=1);
background-repeat:no-repeat;
height:3px;
width:3px;
}

Lighty RoR: Python Hackthon 遭到保護動物組織的抗議

Lighty RoR: Python Hackthon 遭到保護動物組織的抗議 - 說不定是主辦單位特意安排的

間單講就是好好的 Python Hackthon 聚會,闖入一堆 30位女生,突然全部脫光衣服,然後舉牌子「How many lives just for a coat?」,意思是要殺掉多少蛇才能有一件蛇皮大衣。

這些天兵似乎還不知道自己在幹麼,她們大聲疾呼「We know what they’re doing in there. They’re hacking pythons. It’s barbaric and we won’t leave until the last snake has been saved」,秀才遇到兵,有理說不清。

Ajaxian » Photo Collages with Canvas

Ajaxian » Photo Collages with Canvas
Canvas with Flickr

Implementing this in canvas presents two main challenges: drag & drop and performance. I tried several approaches to solving these problems, and ended up using a multilayer solution which renders only the active image on the top-most canvas layer. This allows us to have drag & drop without needing to redraw every image each time one of them is dragged.

GearsMonkey: Google Gears + Greasemonkey to take Wikipedia offline

Google Code FAQ - GearsMonkey: Google Gears + Greasemonkey to take Wikipedia offline

另外 Ray 也展示了一個進階的應用,叫做 GearsMonkey。如果安裝了這項工具的話,就可以把你目前瀏覽的 Wikipedia 網頁,儲存到 Gears 的 Local 資料庫。所以就算 Wikipedia 沒有主動提供支援 Gears,你還是可以在沒有網路連線的情況下,離線瀏覽它的網頁!

6/22/2008

Google App Engine Blog: Google I/O session videos posted with slides

Google App Engine Blog: Google I/O session videos posted with slides
For anyone who wasn't able to join us in person, you can now now catch videos of more than 70 talks, along with slides from each of the presentations, online.
* Best Practices - Building a Production Quality Application on Google App Engine
Ken Ashcraft, Software Engineer
* Building Scalable Web Applications with Google App Engine
Brett Slatkin, Software Engineer
* Engaging User Experiences with Google App Engine
Lindsey Simon, Web Developer, and John Skidgel, Senior Interaction Designer
* Rapid Development with Python, Django, and Google App Engine
Guido van Rossum, Software Engineer
* Under the Covers of the Google App Engine Datastore
Ryan Barrett, Software Engineer
* Working with Google App Engine Models
Rafe Kaplan, Software Engineer

6/20/2008

flickr extra=original_format

flickr api 有一點小變動,現在 getPublicPhotos 傳回來的 secret,原圖(original size)的 secret 不一樣。
1. 使用者必須是 pro 帳號
2. 使用者在 setting 裡面必須有開放原圖下載。
3. request 裡面必須加上 extras=original_format,api 除了本來的 secret 之外,會多回傳一個original_secret用來組成 original format 的 url。

<photo id="2564951972" owner="95212179@N00" secret="0c5792bbab" server="3112" farm="4" title="20080608(003)" ispublic="1" isfriend="0" isfamily="0" originalsecret="5e3a85a1da" originalformat="jpg"/>

Flickr Services
Note: Original photos behave a little differently. They have their own secret (called originalsecret in responses) and a variable file extension (called originalformat in responses). These values are returned via the API only when the caller has permission to view the original size (based on a user preference and various other criteria). The values are returned by the flickr.photos.getInfo method and by any method that returns a list of photos and allows an extras parameter (with a value of original_format), such as flickr.photos.search. The flickr.photos.getSizes method, as always, will return the full original URL where permissions allow.

Rex’s blah blah blah » Social Graph Node Mapper

Rex’s blah blah blah » Social Graph Node Mapper
Rex’s blah blah blah » 人際社交關係 API

關於這個問題,Social Graph API 有特別提到 Canonical Node Representation 的解決方法,也就是以統一的規矩將其轉為正規化形式 (canonical form)。你可以利用 Brad Fitzpatrick 的 Social Graph Node Mapper Project 中的 API 來進行正規化處理。目前支援 C, C++, Java, Perl 與 PHP。

6/19/2008

ADsafe

ADsafe
ADsafe removes features from JavaScript that are either unsafe or grant uncontrolled access to unsafe browser components or that contribute to poor code quality. The removed features include

* Global variables
o ADsafe's object capability model prohibits the use of most global variables. Limited access to Array, Boolean, Number, String, and Math is allowed.
* this
o If a method is called as a function, this is bound to the global object. Since ADsafe needs to restrict access to the global object, it must prohibit the use of this in guest code.
* eval
o The eval function provides access to the global object.
* with statement
o The with statement modifies the scope chain, making static analysis impossible.
* Dangerous methods and properties: apply arguments call callee caller constructor eval prototype unwatch valueOf watch
o Capability leakage can occur with these names in at least some browsers, so use of these names with . notation is prohibited.
* Names starting with _
o Some browsers have dangerous properties or methods that start with _.
* [ ] subscript operator except when the subscript is a numeric literal
o Lookup of dynamic properties could provide access to the restricted members. Use the ADSAFE.get and ADSAFE.put methods instead.
* Date and Math.random
o Access to these sources of non-determinism is restricted in order to make it easier to determine how widgets behave.

Professional Frontend Engineering - Nate Koechley's talk at @media in London (Yahoo! Developer Network blog)

Professional Frontend Engineering - Nate Koechley's talk at @media in London (Yahoo! Developer Network blog)

6/17/2008

つぼみ~夜空ノムコウ~ - 喔我竟然沒排隊就吃到了之宋廚

つぼみ~夜空ノムコウ~ - 喔我竟然沒排隊就吃到了之宋廚
地址:台北市信義區忠孝東路五段15巷14號
電話:(02)2764-4788
營業時間:中午11:30~14:00 晚上17:30~21:00
價位範圍(每人):不等
可刷卡(可/不可):可
有無包廂:算有吧(有另一間單獨的圓桌)

google-app-engine-codelab - Google Code

google-app-engine-codelab - Google Code - his project contains a progressive example of developing a Wiki with Google App Engine.
Vitamin Features » Developing with Google App Engine, Part I

6/16/2008

watch Helvetica the movie!

Helvetica the movie! - 第一部被拍成電影的字型 - Helvetica!!

6/15/2008

svn:ignore

Tsung's Blog | 將 Subversion 管理的 File 設定自動加入 Revision 或 Id 等資訊
svn:ignore

另外, 上述用的是 propset 的參數來做設定, 如果在 project 中, 有些目錄或檔案是在測試時後產生, 但是並不需要 commit 進去, 不過每次 svn st 都會跑出來干擾你, 可以用 propedit svn:ingnore 來解決此問題:

1. svn propedit svn:ignore img
2. 會出現讓你編輯不想編入的檔案, 寫入

*.jpg

3. 這樣子之後 img/*.jpg 的檔案, 在 svn st 時就都不會出現囉~ :)

6/12/2008

美狗の美容保養誌 - Differin 痘膚潤 凝膠

PTT BeautySalon

上海聯合藥房
衡陽路32號1樓

今天去拿東西 順便就晃進去問了

痘膚潤50g 195
15g 90


美狗の美容保養誌 - Differin 痘膚潤 凝膠
50g , NT$550
15g , 忘記多少錢了 =_=

這是我自己超愛用的除痘痘粉刺凝膠 ,
不太像一般的粉刺痘痘藥膏 , 只是單純消炎跟抑制油脂分泌.

這凝膠含有Adapalene這種維生素A類化合物 ,
能夠幫助分解粉刺 且對 尋常性痤瘡(俗稱青春痘)有療效!


不過它可能有光敏性 , 所以只能在晚上使用 ,
它能夠暢通阻塞的毛細孔 , 讓毛囊細胞正常化 , 幫助油脂正常排出 , 以減少粉刺的形成.
隔天睡起來就會發現 , 臉好油 , 洗臉後發現粉刺明顯減少 , 毛孔會有比較暢通的感覺呦

台灣皮膚雷射美容中心___常用的青春痘外用藥物1
維他命A酸類的藥品,有去角質作用,可以促進表皮細胞的代謝更新,並能深入毛囊的厚壁,去除過度角化、抑制皮脂腺分泌,防止面皰粉刺形成。A酸一直是有效的青春痘治療藥物,對於非炎性、特別是粉刺型的青春痘療效最為明顯。
4.夜間睡前使用,是A酸較適合的方式。第一代的Tretinoin有光敏感性,在陽光下會有光毒性產生,只能在夜間使用。第二、三代的Isotretinoin與Retinoid雖然光敏感性降低,但是使用A酸後表皮對紫外線的防護力下降,在陽光曝露下會加重刺激敏感發生,最好還是夜間塗抹,白天配合使用防曬。

6/11/2008

高雄狂食記 - 林立青的資源回收筒 - Yahoo!奇摩部落格

高雄狂食記 - 林立青的資源回收筒 - Yahoo!奇摩部落格
位在高雄鹽埕區的小西門燉肉飯店,

Creative Weblogging China 崩壞: 專業 Blog 的出路在哪裡? - MMDays

Creative Weblogging China 崩壞: 專業 Blog 的出路在哪裡? - MMDays

CW 雖說是知名的 Blog Network,但是還排不上前三,比較知名的 Blog Network 有 Gawker Media、Weblogs Inc 還有 Crunch Network。而這三大 Blog Network 都有一個知名的火車頭,Gawker Media 有專門介紹很多消費電子新玩意的 Gizmodo,而 Gizmodo 的創辦人 Peter Rojas 正是 Weblogs 的其中之一的火車頭 Engadget 的創辦人,所以不難發現,Gizmodo 跟 Engadget 兩個所報導的新聞都還蠻相像的,當然,裡面還牽扯到了許多很深的恩怨情仇。而 Crunch Network 則是由 Michael Arrington 所主持的 TechCrunch 而向外展開的 Blog Network,TechCrunch 主要是介紹 Web2.0 的一些新聞,最後竟然還辦起來創投 Conference 來介紹一些新創的 Web2.0 公司。

貪婪的智慧 - 只要對自己有利 加不加班無所謂

貪婪的智慧 - 只要對自己有利 加不加班無所謂

6/10/2008

Finally, the alternative fix for IE6's memory leak is available

try finally 妙用,防止内存泄漏【转自51js】 - AJAXBBS.NET - WEB前端技术交流博客

Finally, the alternative fix for IE6's memory leak is available
Ajaxian » Is “finally” the answer to all IE6 memory leak issues?

The finally statement defines a block of code that will always be run after the completion of the preceding try block. The finally block will always be run even when an error occurs and control is passed to a catch block. The finally block will be run immediately after any catch block. Finally is a reserved word and cannot be used for anything other than declaring a final error handler for a try block.


function createButton(){
var obj = document.createElement("button");
obj.innerHTML="点我!";
obj.onclick=function(){
//处理click事件
}
obj.onmouseover=function(){
//处理mouseover事件
}
return obj;//这里由于需要返回创建的对象,所以不能把obj直接设为null. return 后obj是局部变量,不能在外部断开其与HTMLElement的引用.ie中将出现问题泄漏问题
}
var 按钮 = document.getElementsById("d1").appendChild( createButton());
按钮.做某些事();
按钮.做某些事();


function createButton(){
var obj = document.createElement("button");
obj.innerHTML="点我!";
obj.onclick=function(){
//处理click事件
}
obj.onmouseover=function(){
//处理mouseover事件
}
try{
return obj;
}finally{
obj = null;//这句话在return 之后才执行 , 的效的解决了需在return后将obj置null的问题
}
}

Finally, the alternative fix for IE6's memory leak is available
Codes that introduces memory leak in IE6

(function (limit, delay) {
var queue = new Array(10);
var n = 0;

function makeSpan(n) {
var s = document.createElement('span');
document.body.appendChild(s);
var t = document.createTextNode(' ' + n);
s.appendChild(t);
s.onclick = function (e) {
s.style.backgroundColor = 'red';
alert(n);
};
return s;
}

function process(n) {
queue.push(makeSpan(n));
var s = queue.shift();
if (s) {
s.parentNode.removeChild(s);
}
}

function loop() {
if (n < limit) {
process(n);
n += 1;
setTimeout(loop, delay);
}
}

loop();
})(10000, 10);


Code that doesn't introduce memory leak in IE6

(function (limit, delay) {
var queue = new Array(10);
var n = 0;

function makeSpan(n) {
var s = document.createElement('span');
document.body.appendChild(s);
var t = document.createTextNode(' ' + n);
s.appendChild(t);
s.onclick = function (e) {
s.style.backgroundColor = 'red';
alert(n);
};

//fix start
try {
return s;
} finally {
s = null;
t = null;
}
//fix end
}

function process(n) {
queue.push(makeSpan(n));
var s = queue.shift();
if (s) {
s.parentNode.removeChild(s);
}
}

function loop() {
if (n < limit) {
process(n);
n += 1;
setTimeout(loop, delay);
}
}

loop();
})(10000, 10);

6/09/2008

Nest Inline Elements inside Block Elements

Give every inline element a block-level parent, and remove all block-level elements from paragraphs.

Motivation
To be valid, it is not sufficient that all the elements in a document be legal XHTML strict elements. They must also have the right relationships to each other. Browsers and other programs depend on correct placement. For instance, an li element must always be a child of a ul or ol element, and each ul or ol element must have at least one li child. Blockquotes can contain paragraphs, but paragraphs can't contain blockquotes.

Although browsers will display documents that violate these structure rules, they may interpret them differently. Furthermore, this sort of invalidity can even more seriously confuse editors and other non-browser tools that attempt to work with the HTML. For instance, as I write this, some people are having problems because WordPress is rewriting their markup in unexpected ways to try to fix blockquote/paragraph nesting issues.

When paragraphs or block-level elements are not found where they're expected, browsers and other tools guess where they should insert extra content to make them fit. They don't always guess right, and they don't always guess the same. This causes problems designing cross-browser CSS and JavaScript. Nesting your elements correctly helps browsers and tools to process a document consistently.

The main body of an HTML page consists of several kinds of elements plus text:
* Paragraphs: p, pre
* Block-level elements: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, noscript, ol, table, ul
* Inline elements: a, abbr, acronym, b, bdo, br, cite, code, dfn, em, img, input, label, q, samp, select, span, strong, sub, sup, textarea, var
* Miscellaneous elements: button, del, iframe, ins, map, object, script
* Context-limited elements: li, dt, dd, tr, th, td, tbody, input, select
* Raw text; a.k.a. PCDATA

A p element represents a paragraph. However, unlike other block-level elements, a p may not contain another p or another block element such as blockquote. It can only contain plain text and inline elements. It is in some sense the lowest block-level element.

The pre element is also special in this way. It can contain inline elements, but not other block elements.

css generated content

ANSI character set and equivalent Unicode and HTML characters - .index ul li.on:before{content: "\00AB"; color: gray;}, content裡面的內容如果是html entities,必須 escape 該 content 的 unicode value:


« 171 171 0xAB U+00AB &laquo; left-pointing double angle quotation mark Latin-1 Supplement

HTML Codes - Table of ascii characters and symbols
keycode: after before css generated content unicode

6/03/2008

Mouse wheel programming in JavaScript

Mouse wheel programming in JavaScript

 
/** This is high-level function; REPLACE IT WITH YOUR CODE.
* It must react to delta being more/less than zero.
*/

function handle(delta) {
if (delta <0)
/* something. */;
else
/* something. */;
}

function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
}

/* Initialization code. */

if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

6/01/2008

I've (probably) been using Google App Engine for a week longer than you have

I've (probably) been using Google App Engine for a week longer than you have

ACID - Wikipedia, the free encyclopedia

ACID - Wikipedia, the free encyclopedia
In computer science, ACID (Atomicity, Consistency, Isolation, Durability) is a set of properties that guarantee that database transactions are processed reliably. In the context of databases, a single logical operation on the data is called a transaction.

Atomicity refers to the ability of the DBMS to guarantee that either all of the tasks of a transaction are performed or none of them are. For example, the transfer of funds can be completed or it can fail for a multitude of reasons, but atomicity guarantees that one account won't be debited if the other is not credited.

Consistency property ensures that the database remains in a consistent state before the start of the transaction and after the transaction is over (whether successful or not).

Isolation refers to the ability of the application to make operations in a transaction appear isolated from all other operations. This means that no operation outside the transaction can ever see the data in an intermediate state; for example, a bank manager can see the transferred funds on one account or the other, but never on both—even if he ran his query while the transfer was still being processed.

Durability refers to the guarantee that once the user has been notified of success, the transaction will persist, and not be undone. This means it will survive system failure, and that the database system has checked the integrity constraints and won't need to abort the transaction. Many databases implement durability by writing all transactions into a log that can be played back to recreate the system state right before the failure.

Twittering About Architecture

Twitter, or Architecture Will Not Save You - Laughing Meme
Twittering About Architecture
random($foo): Rearchitecting Twitter: Brought to You By the 17th Letter of the Alphabet
Twitter-proxy: Any Interest? « Assetbar: drinks and recipes
Hueniverse: Scaling a Microblogging Service - Part I
Hueniverse: Scaling a Microblogging Service - Part II