Search

5/31/2008

Durable Objects » Yahoo! User Interface Blog

Durable Objects » Yahoo! User Interface Blog


function durable(parameters) {
var that = {} or the product of another durable constructor;
var private variables;
function method() {

}
that.method = method;
return that;
}

Define all of your methods as private methods. The methods you choose to
expose to the public get copied into that. None of the functions defined or
inherited make use of that or this.

5/26/2008

p59
Performance Pitfall
• Array.length is expensive
• better:
• best:
for (var count = 0; count < myarray.length; count++)
console.log(count);
re-calculated
EVERY TIME
--SLOW-- !!
for (var count = 0, mylen = myarray.length; count < mylen; count++)
console.log(count);
for (var count = myarray.length-

p63
try/catch/finally/throw
• Create an exception
• Custom exceptions
try {
43534987yhfh // clearly an error
} catch(myerr) {
console.log(myerr);
} finally {
//code block
}
always executes
regardless of what
happens in catch() or
try()
try {
throw(“User entered invalid data..”);
} catch(myerr) {
console.log(myerr);
} finally {
//code block
}

p107
• Important function methods:
– call(scope, arg1, arg2 …);
– apply(scope, [arg1, arg2 …]);
– caller
• Call and apply used to dynamically
execute a function in arbitrary scope
function showLength() {
alert(this.length);
}
showLength.call(new Array(10)); // Alerts 10!

5/20/2008

typeof

列出一些比較容易搞混的typeof


alert(typeof /^a/); // function or regExp, depend of implementations
alert(typeof NaN); //number
alert(typeof undefined) // undefined
alert(typeof null) // object
alert(typeof false) // boolean

falsy values of javascript


0 Number
NaN (not a number) Number
'' (empty string) String
false Boolean
null Object
undefined Undefined

5/17/2008

yui image lazy load using class name

.yui-imgload-somegroup { background:none !important; } 
...

...
someGroup.className = 'yui-imgload-somegroup';

1. 把所有要受到 image lazy loader 的 image 給予一個 class name
2. 在 css 加上 backgrond:none !important,這樣一開始便不會 load 那張 image
3. 聰明地方在,他把 image 設在 background-image 裡面,這樣的好處只需要通通給一個 class name, 不需要每一個都取一個 id。

兩個 example:
above fold:
http://chunghe.googlecode.com/svn/trunk/project/image.lazy.loader.by.class.name/above.fold.htm
below fold:
http://chunghe.googlecode.com/svn/trunk/project/image.lazy.loader.by.class.name/below.fold.htm

注意裡面有一張空的圖片http://us.i1.yimg.com/us.yimg.com/i/us/tr/b/1px_trans.gif,而且一定要有

js

var scrollGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
scrollGroup.className = 'yui-imgload-scrollgroup';
scrollGroup.foldConditional = true;
scrollGroup.addTrigger(window, 'resize');

5/16/2008

Session variables without cookies

Session variables without cookies - 可以一直儲存一個變數直到該tab/window關閉,神奇不過不知道可以應用在哪。

Brilliant but terrifying hack—you can store up to 2 MB of data in window.name and it persists between multiple pages, even across domains. Doesn’t work with new tabs though, and storing JSON in it and eval()ing it is a bad idea—a malicious site could populate it before sending the user to you.

DOM:window.name - MDC
Gets/sets the name of the window.

Session variables without cookies
另外該作者的 undo library 也值得一看: Undo & redo in forms

How to use tables to structurize forms in HTML, and about alternatives, like FIELDSET

How to use tables to structurize forms in HTML, and about alternatives, like FIELDSET

Tables and forms can be nested either way. But if you put forms into tables, each form must be completely included into a single table cell (one TD element in practice). Thereby the forms are each completely independent.


<table>
<tr><td>...</td><td>...</td>...</tr>
<tr><td>...</td><td>...</td>...</tr>
...
<tr><td>...</td><td>...</td>...
<td>
<form action="...">
<input ...>
<input ...>
...
</form>
</td>
</tr>
</table>


<form action="...">
<table>
<tr><td>...</td><td>...</td>...</tr>
<tr><td>...</td><td>...</td>...</tr>
...
<tr><td>...</td><td>...</td>...
<td>
<input ...>
<input ...>
...
</td>
</tr>
</table>
</form>

5/15/2008

Google Doctype: Documenting the Open Web

Google Doctype: Documenting the Open Web
Doctype: /trunk/goog

Google’s newly released JavaScript library (pure JavaScript, so more along the lines of YUI and jQuery than GWT). I haven’t found the documentation for it yet, but the code is extremely well commented. UPDATE: The documentation is spread throughout Doctype.

Google Doctype - Google Code
Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Revision 2258: /trunk/goog

5/14/2008

How to prevent HTML tables from becoming too wide | 456 Berea Street

How to prevent HTML tables from becoming too wide | 456 Berea Street - 必須設定 table{table-layout:fixed} 才能設定 table-cell的 width & overflow:hidden

Your first instinct is probably to do what I did: start hacking away at the CSS. How about giving overflow:hidden a try? Nope, nothing happens. What if I give the table a different width? No, it doesn’t budge. But there is a solution.

The trick is to use the CSS property table-layout. It can take three values: auto, fixed, and inherit. The normal (initial) value is auto, which means that the table width is given by its columns and any borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as wide as you have specified in the CSS. No more, no less. And to my great surprise this seems to be widely supported by browsers. The only browser of any significance that does not support it is IE/Mac, and the significance of that browser is rapidly approaching zero.

border-radius

http://birdegg.wordpress.com/wp-admin/wp-admin.css?m=1210362598a


.submit {
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

5/13/2008

autocmd FileType , iabbrev

sontek ( John M. Anderson ) » Python with a modular IDE (Vim)

Snippets

A great time saver with stanard IDE’s is code snippets, so you can type a few key strokes and get a lot of code out of it. An example of this would be a django model, instead of typing out the complete declaration you could type ‘mmo’ and have a skeleton of your model done for you. To do this in vim we grab the Snippets EMU plugin.

Check out a great screencast of snippetsEmu in action here

You can get my full setup here

~/.vimrc.html
這是好物阿,在.vimrc貼上下面數行,然後按下即可有code completion的功能。

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" turn completion on:
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
autocmd FileType python set omnifunc=pythoncomplete#Complete
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
autocmd FileType html set omnifunc=htmlcomplete#CompleteTags
autocmd FileType css set omnifunc=csscomplete#CompleteCSS
autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags
autocmd FileType php set omnifunc=phpcomplete#CompletePHP
autocmd FileType c set omnifunc=ccomplete#Complete
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

iabbrev #l console.log
iabbrev #d console.dir
也可以利用iabbrev把常打錯的字修正過來
example: iabbrev consoel.log console.log

5/12/2008

date object <-> timestamp

1. convert date to raw timestamp


>>> new Date().valueOf();
1210564949062


2. convert raw timestamp to date

>>> new Date(1210564949062)
Mon May 12 2008 12:02:29 GMT+0800 (Taipei Standard Time)

5/11/2008

Carousel Component - Documentation

Carousel Component - Documentation

John Resig - Server-Side JavaScript with Jaxer
Jaxer Architecture Overview | Aptana
Page Lifecycle, DOM and Events | Aptana

<html>
<head>
<script src="http://code.jquery.com/jquery.js" runat="both"></script>
<script>
jQuery(function($){
$("form").submit(function(){
save( $("textarea").val() );
return false;
});
});
</script>
<script runat="server">
function save( text ){
Jaxer.File.write("tmp.txt", text);
}
save.proxy = true;

function load(){
$("textarea").val(
Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
}
</script>
</head>
<body onserverload="load()">
<form action="" method="post">
<textarea></textarea>
<input type="submit"/>
</form>
</body>
</html>

save.proxy = true; - The save() function must exist on the server-side (since it contains calls to server-side functionality) however we want to be able to call it from the client-side whenever the user hits the submit button to save their textarea changes. We can do this by making it a proxy function (adding an extra proxy property to the function). This actually creates a stub function on the client-side, to allow the code to continue working as it would expect, while obscuring the actual functionality behind an Ajax request. It's all completely seamless and works as you would expect it to, which is impressive. You can also make functions proxy functions by using a runat="proxy" on a script block.

onserverload="load()" - This attribute gives a simple mechanism for running a piece of server-side functionality on DOM ready. In this case we're loading the contents of the saved text file and injecting it into the textarea, using jQuery.

5/08/2008

Ajaxian » Unobtrusive JavaScript with jQuery

Ajaxian » Unobtrusive JavaScript with jQuery

Rather than hoping for graceful degradation, PE builds documents for the least capable or differently capable devices first, then moves on to enhance those documents with separate logic for presentation, in ways that don't place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. Progressive enhancement
Steven Champeon and Nick Finck, 2003

• Build a site that works without JavaScript
• Use JavaScript to enhance that site to provide a better user experience: easier to
interact with, faster, more fun
• Start with Plain Old Semantic HTML
• Layer on some CSS (in an external stylesheet) to apply the site’s visual design
• Layer on some JavaScript (in an external script file) to apply the site’s enhanced behaviour

bad:
Have you read our<a href="#" onclick="window.open('terms.html', 'popup', 'height=500,width=400,toolbar=no'); return false;" >terms and conditions</a>?
better:
Have you read our <a href="terms.html" onclick="window.open('terms.html', 'popup','height=500,width=400,toolbar=no'); return false;">terms and conditions</a>?
event better:
Have you read our<a href="terms.html"
onclick="window.open(this.href, 'popup','height=500,width=400,toolbar=no'); return false;">terms and conditions</a>?

5/07/2008

table th and scope

If you use tables for data





















































Color Names in Multiple Languages
Color Spanish French Irish Welsh
Black negro noir dubh du
White blanco blanc bán gwyn
Red rojo rouge ruadh coch
Blue azul bleu gorm glas
Green verde vert glas gwyrdd
Yellow amarillo jaune buí melyn

The SCOPE attribute in the TH tag is used to further define whether the header is a row ( ) or a column ( ). Designating the SCOPE changes the order in which cells are read out in a screen reader from the default left-to-right, top to bottom order. This code is sufficient for most screen readers to process simple tables (one header row and one header column), but additional tags are needed for more complex tables. See below for details.


In Screen Readers

Because this table contains TH tags with the proper SCOPE definitions, some screen readers will read this table as follows.

Color: Black, Spanish: negro, French: noir, Irish: dubh, Welsh: du.
Color: White, Spanish: blanco, French: blanc, Irish: bán, Welsh: gwyn.
Color: Red, Spanish: rojo, French: rouge, Irish: ruadh, Welsh: coch...

<table>
<caption>
Donuts consumed by each staff member
at Monday Meeting
</caption>
<tr>
<th scope="col"> Color </th>
<th scope="col"> Spanish </th>
<th scope="col"> French </th>
<th scope="col"> Irish </th>
<th scope="col"> Welsh </th>

</tr>
<tr>
<th scope="row"> Black </th>
<td> negro </td>
<td> noir </td>
<td> dubh </td>
<td> du </td>
</tr>
<tr>
<th scope="row"> White </th>
<td> blanco </td>
<td> blanc </td>
<td> bán </td>
<td> gwyn </td>
</tr>
</table>

5/06/2008

Wait till I come! » Blog Archive » The great implementer swindle - making badge use easy doesn’t make it clever!

Wait till I come! » Blog Archive » The great implementer swindle - making badge use easy doesn’t make it clever!
<script src="badge.js" size="small" skin="blue">Brandname</script>


(badge = function(){
var s = document.getElementsByTagName('script');
for(var i=0;s[i];i++){
if(s[i].getAttribute('src') == 'badge.js'){
var div = document.createElement('div');
var content = s[i].firstChild.nodeValue;
div.innerHTML = '

Awesome badge!

';
div.appendChild(document.createTextNode(content));
var size = s[i].getAttribute('size');
var skin = s[i].getAttribute('skin');
var col,width;
switch(size){
case 'small':width = 100;break;
case 'large':width = 400;break;
default:width = 200;break;
}
switch(skin){
case 'blue':col = '#ccf';break;
case 'green':col = '#cfc';break;
default:col = '#ccc';break;
}
div.style.background = col;
div.style.width = width + 'px';
s[i].parentNode.replaceChild(div,s[i]);
}
}
})();

5/04/2008

Davs Rants and Random Thoughts » YUI Code Samples

Davs Rants and Random Thoughts » YUI Code Samples

yui menu clicktohide

/*
If the target of the event wasn't a menu, hide all
dynamically positioned menus
*/


for (var i in m_oVisibleMenus) {

if (YAHOO.lang.hasOwnProperty(m_oVisibleMenus, i)) {

oMenu = m_oVisibleMenus[i];

if (oMenu.cfg.getProperty("clicktohide") &&
!(oMenu instanceof YAHOO.widget.MenuBar) &&
oMenu.cfg.getProperty("position") == "dynamic") {

oMenu.hide();

}
else {

oMenu.clearActiveItem(true);

}

}

}