Mastering JavaScript — concept and resource guide » d’bug – here’s a list of advanced javascript.
Access Control
* Private Members in JavaScript
* How to achieve private, public, and privileged members in JavaScript
* Private JavaScript
Closures
* JavaScript Closures for Dummies
* JavaScript Closures
* Closures and executing JavaScript on page load
Classical OOP
* JavaScript Object-Oriented Programming Part 1
* Objectifying JavaScript
* JavaScript and Object Oriented Programming (OOP)
* Douglas Crockford Video: Advanced JavaScript
Namespaces and Self-invoking Functions
* Namespacing your JavaScript
* JavaScript Namespaces
* JavaScript: Put everything in a namespace
Concepts in AJAX
* AJAX Queue Class
* Reusing XMLHttpRequest Object in IE
* AJAX Patterns
* Managing sessions in an Ajax-enabled application
終於有syntax highlighting了, powered by syntaxhighlighter – Google Code, 色調是vim desert theme, code 直接看source就有了. Blogger的使用者要看這篇 BloggerMode – syntaxhighlighter – Google Code
無限猴子定理 – Wikipedia
Infinite monkey theorem – Wikipedia, the free encyclopedia
無限猴子定理說明，一隻猴子隨機在打字機鍵盤上按鍵，最後必然可以打出法國國家圖書館中的每本書。
OPML – Wikipedia, the free encyclopedia – bloglines 可以匯出 OPML 格式的 feeds list 給 google reader吃
OPML (Outline Processor Markup Language) is an XML format for outlines. Originally developed by Radio UserLand as a native file format for an outliner application, it has since been adopted for other uses, the most common being to exchange lists of web feeds between web feed aggregators.The OPML specification defines an outline as a hierarchical, ordered list of arbitrary elements. The specification is fairly open which makes it suitable for many types of list data.
http://chunghe.googlepages.com/prototype.wrapper.for.YUI.Dom.utilit.htm
用prototype把常用的一些 YUI Dom utilities (getRegion, getXY, getViewportHeight/getViewportWidth, getDocumentScrollTop/getDocumentScrollLeft)重寫一次，還是比較習慣YUI的naming convention，順便熟悉一下在prototype的哪些function mapping到YUI的哪些function。
值得一提的是 document.viewport.getDimensions().width;這個會把viewport width多算’17px’，之前在lightbox.js也有遇到一樣的問題，不是很確定，所以用了YUI的code把這部分補起來。另外YUI在IE底下，getXY在X與Y都多算了’2px’，prototype算起來倒是正確的。
var PUD = {
getXY: function(ele){
var ele = $(ele);
var pos = ele.positionedOffset();
return [pos.left, pos.top];
},
getRegion: function(ele){
var ele = $(ele);
var pos = ele.positionedOffset();
var t = pos[1];
var r = pos[0] + ele.offsetWidth;
var b = pos[1] + ele.offsetHeight;
var l = pos[0];
return [t, r, b, l];
},
getViewportHeight: function(ele){
return document.viewport.getDimensions().height;
},
getWrongViewportWidth : function(ele){
// belowing method provided by prototype has '17px' margin error
return document.viewport.getDimensions().width;
},
getViewportWidth : function(ele){
// belowing method provided by prototype has '17px' margin error
//return document.viewport.getDimensions().width;
var width = self.innerWidth;
var mode = document.compatMode;
if (mode || Prototype.Browser.IE) { // IE, Gecko, Opera
width = (mode == 'CSS1Compat') ?
document.documentElement.clientWidth : // Standards
document.body.clientWidth; // Quirks
}
return width;
},
getDocumentScrollLeft : function(ele){
return document.viewport.getScrollOffsets()[0];
},
getDocumentScrollTop : function(ele){
return document.viewport.getScrollOffsets()[1];
}
}
centricle : css filters (css hacks) – 非常詳細的列出各式樣的 css hacks & filters 以及在不同的 browsers & OSs 下面的情形。
ie7 ie6
* html div N Y
_property:value Y Y
*property:value N Y
MSDN – About Conditional Comments
Hack-free CSS for IE – Arve Bersvendsen
<link rel="stylesheet" type="text/css" href="common.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->
<!--[if IE lt 6]>
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->
Internet Explorer box model bug – Wikipedia, the free encyclopedia
務必記住用 YUI: YAHOO.util.Dom.getRegion 算出來的 height/width 是整個 box 的 高度/寬度, 也就是包含 padding, border 但不包含 margin
Internet Explorer versions 6 and 7 are not affected by the bug if the page contains certain HTML document type declarations. These versions maintain the buggy behavior when in quirks mode for reasons of backward compatibility.[4] For example, quirks mode is triggered:* When the document type declaration is absent or incomplete;
* When an HTML 3 or earlier document is encountered;
* When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;
* When an SGML comment or other unrecognized content appears before the document type declaration, or if there are errors elsewhere in the document;
* Internet Explorer 6 also uses quirks mode if there is an XML declaration prior to the document type declaration.[5]
Box model hacks have proven unreliable because they rely on bugs in browsers’ CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comments to work around the box model bug in older versions of Internet Explorer.[6][7]
女工程師的紐約生活手札 – “You Speak Good English.” “Thank You!”
Amazon.com: How to Win Friends & Influence People: Books: Dale Carnegie
第一章講不要批評抱怨，第二章強調稱讚的重要性。裡面搭配很多政治人物、名人、成功企業家遇到衝突的狀況與如何以智慧的言語化解危機與贏得人心。原來美國這種講話著重稱讚的哲學是其來有自的，書上提到的政治人物、商場企業家都知道要成為成功領導者，通常並不是最有能力的者，而是那個可以有效溝通想法並影響、啟發、說服他人與自己一起朝目標前進的人。而要讓對方能照自己的意思去作，當中很重要的是了解對方的想法，而首當其衝的是誠心的稱讚。每個人都想要追求”A feeling of importance”，能適時誠心的稱讚你的伴侶、小孩、親人、員工、朋友等，不但可以免除很多衝突、不滿、仇恨的情緒，真誠的稱讚也將在對方的腦中如美妙的音樂般，盤旋許久。
Nate Koechley: “The YUI CSS Foundation&quo – Yahoo! Video
components
- Reset – a clean foundation(把所有的樣式取消, 包含h1-h6都同樣size, em.strong的效果也都取消.)
- Fonts – typographical control-> for free(1)arial (2)13px font size (3)16px line height
- Grids – layout and page control
- Base – basic helper/snippets lib (把Reset取消的code放回來, 如果要自己design style, 就不需要include這支, 因為production的css會蓋過Base蓋過Reset不太make sense)
fonts.css (font.css在IE下可以改變字型大小的原因是因為apply到後面的*font-size:small & *font:x-small而不是前面的13px)
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
de,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;}
grid.css
1. 決定total page width，有下面五種 doc width
(1)#doc 750px, (2)#doc2 950px, (3)#doc3 100%, (4)#doc4 974px, (5)#doc-custom
#doc-custom的作法(1) 決定寬度: ex: 650px (2) 除以13: 46.15em (3) 乘上0.9759: 45.04 em
#custom-doc{
margin:auto;
text-align: left;
width: 46.15em;
*width: 45.04em;
min-width: 600px; /* not necessary but recommanded */
}
2. 決定邊欄的位置&寬度，有以下6種template
(1).yui-t1: 160 left, (2).yui-t2: 180 left, (3).yui-t3 300 left, (4).yui-t4 180 right, (5).yui-t5 240 right, (6).yui-t6 300 right
Two content blocks: yui-b for blocks, 一個是比較寬的main，另一個是比較窄的的邊欄
<div id="doc">
<div class="yui-b"></div>
<div class="yui-b"></div>
</div>
把主要的main用yui-main包起來: identify the main block:
<div id="doc">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
所以整個結構變成
<div id="doc" class="yui-t3">
<div id="hd"></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
<div id="ft"></div>
</div>
3. 建立grid: 第一個yui-u or yui-g要多一個class ‘first’，用來決定float方向
.yui-g: grid holder
.yui-u: grid units
兩個column,各佔50%
<div class="yui-g">
<div class="yui-u"></div>
<div class="yui-u"></div>
</div>
四個column,各佔25%
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u" first>
<div class="yui-u">
</div>
<div class="yui-g">
<div class="yui-u" first>
<div class="yui-u">
</div>
</div>
uneven grid holder
.yui-gb 1/3 1/3 1/3
.yui-gc 2/3 1/3
.yui-gd 1/3 2/3
.yui ge 3/4 1/4
.yui-gf 1/4 3/4
review
1. Page width: div #doc
2. Templates: .yui-t1
3. Grids: .yui-g .yui-u
4. Fills all space
5. Nestable & stackable
只有两种计算机语言：一些语言天天挨骂，另外一些没有人用。(Bjarne Stroustrup)
You have reached this web page by typing “example.com”, “example.net”, or “example.org” into your web browser.These domain names are reserved for use in documentation and are not available for registration. See RFC 2606, Section 3.
http://developer.yahoo.com/yui/examples/container/overlay.html
The markup for overlay1, plus the context element ctx and the buttons to show all our Overlays, is displayed below. Note that overlay1 has an inline style of visibility:hidden set in advance. Most browsers are slower to render CSS than inline styles, and we want this marked-up Overlay to be hidden by default. If the inline style isn’t present, it may cause a brief “flash of unstyled content” where the Overlay may be visible on slower machines.
YAHOO.lang.dump
var t = {
'who': 'foo',
'email': 'foo@example.com',
'c': function(){
alert( 'who:' + this.who + ' email:' + this.email )
}
}
alert(YAHOO.lang.dump(t));
//{who => foo, email => foo@example.com, c => f(){...}}
YAHOO.lang.trim
Returns a string without any leading or trailing whitespace. If the input is not a string, the input will be returned untouched.
var t = ' example string ';
YAHOO.lang.trim(t);
alert('|' + t + '|');
alert('|'+ YAHOO.lang.trim(t) + '|');
//| example string |
//|example string|
Ajaxian » Unobtrusively Mapping Microformats with jQuery
Published December 19, 2007 informations Leave a CommentAjaxian » Unobtrusively Mapping Microformats with jQuery – jQuery寫起來真好看
最後的成品
Simon puts together jQuery, microformats, and the Google Maps API to grok hCard and show maps of any hCard data that is found, ending up with:
jQuery('.vcard').each(function() {
var hcard = jQuery(this);
var streetaddress = hcard.find('.street-address').text();
var postcode = hcard.find('.postal-code').text();
var geocoder = new MapstractionGeocoder(function(result) {
var marker = new Marker(result.point);
marker.setInfoBubble(
'<div class="bubble">' + hcard.html() + '</div>'
);
mapstraction.addMarker(marker);
}, 'google');
geocoder.geocode({'address': streetaddress + ', ' + postcode});
});
function getStyle(el, prop) {
if (document.defaultView && document.defaultView.getComputedStyle) {
return document.defaultView.getComputedStyle(el, null)[prop];
} else if (el.currentStyle) {
return el.currentStyle[prop];
} else {
return el.style[prop];
}
}
So what is wrong with this you might ask? Lets add some background and then
we can get back to that question. …
All browsers except IE has a way to get the computed style. The way to do
this is to use document.defaultView.getComputedStyle. Only IE has a way to get
the cascaded style. This is done using element.currentStyle.
The Django Book – great online django book. The comment system is cool as well.
TrueCrypt – Free Open-Source On-The-Fly Disk Encryption Software for Windows Vista/XP/2000 and Linux – free & open source
Free open-source disk encryption software for Windows Vista/XP/2000 and Linux
Main Features:
* Creates a virtual encrypted disk within a file and mounts it as a real disk.
* Encrypts an entire hard disk partition or a storage device such as USB flash drive.
* Encryption is automatic, real-time (on-the-fly) and transparent.
* Provides two levels of plausible deniability, in case an adversary forces you to reveal the password:
1) Hidden volume (steganography – more information may be found here).
2) No TrueCrypt volume can be identified (volumes cannot be distinguished from random data).
* Encryption algorithms: AES-256, Serpent, and Twofish. Mode of operation: LRW.
Further information regarding features of the software may be found in the documentation.
IE/win Expanding Box
Stopping long words destroying layout
Contrary to spec, IE allows very long words to expand a box widthwards – which can then easily destroy a layout if other boxes are floated right.
Add this rule to the box that holds blog comments (or do what I did, and just add it to the body tag):
body {word-wrap: break-word;}
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
<nobr> equivalent
.nowrap { white-space: nowrap; }
BIRDEGG\'s WEBLOG 
You must be logged in to post a comment.