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.
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!
0 Number
NaN (not a number) Number
'' (empty string) String
false Boolean
null Object
undefined Undefined
.yui-imgload-somegroup { background:none !important; }
...
...
someGroup.className = 'yui-imgload-somegroup';
var scrollGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
scrollGroup.className = 'yui-imgload-scrollgroup';
scrollGroup.foldConditional = true;
scrollGroup.addTrigger(window, 'resize');
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.
Gets/sets the name of the window.
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>
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 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.
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.
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;
}
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
1. convert date to raw timestamp
>>> new Date().valueOf();
1210564949062
>>> new Date(1210564949062)
Mon May 12 2008 12:02:29 GMT+0800 (Taipei Standard Time)
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.
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
| 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
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);
}
}
}訂閱： 文章 (Atom)RSS Feeds
