realazy » Blog Archive » 使用 iframe 获取网页片段的一个好处
1. 使用 XMLHttpRequest 直接访问 partial，获取 responseText 后赋予 index 页面上某个元素的 innerHTML 即可完成。partial 必须是一个纯粹的 HTML 片段（基于以上假设）。
2. 在页面上创建一个隐藏的 iframe, 使用 iframe 的 src 请求 partial, partial 可以作为一个完整的页面，里面包含 JavaScript，由 partial 里的 JS 完成替换 index 上页面片段替换。
但在第二种情况下，用户看到内容可能也只是 HTML 片段，但这却是一个完整的页面，一个可以执行 JS 的完整页面。我们只需检查这个页面的 parent 对象有没有我们预设的值，就可以判断它是不是在 iframe 之内了，然后我们可以让它跳转到正常的页面。
Check Latency
This isn't actually a test. Many of the tests measure how long it takes for a resource to load, but the load time can vary greatly depending on the user's network latency. This page measures the average latency to the UA Profiler server, and then adjusts the timing thresholds throughout the remaining test pages accordingly. If you have high latency (slow network connection), the tests take longer to load. If you have low latency (fast network connection), the tests are run faster.
Connections per Hostname
When HTTP/1.1 was introduced with persistent connections enabled by default, the suggestion was that browsers open only two connections per hostname. Pages that had 10 or 20 resources served from a single hostname loaded slowly because the resources were downloaded two-at-a-time. Browsers have been increasing the number of connections opened per hostname, for example, IE went from 2 in IE7 to 6 in IE8. This test measures how many HTTP/1.1 connections are opened for the browser being tested.
Max Connections
The previous test measures maximum connections for a single hostname. This test measures the maximum number of connections a browser will open total - across all hostnames. The upper limit is 60, so if a browser actually supports more than that it'll still show up as 60.
Parallel Scripts
When most browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if scripts can be downloaded in parallel with other resources in the page.
Parallel Stylesheets
Similar to scripts, some browsers block all downloads once they start downloading a stylesheet. This test determines if stylesheets can be downloaded in parallel with other resources in the page.
Parallel Stylesheet and Inline Script
A lesser known performance problem is the problems caused when a stylesheet is followed by an inline script block. If a browser doesn't block when downloading stylesheets (as measured by the previous test), then a stylesheet followed by an image could both be downloaded in parallel. But suppose an inline script block was placed between the stylesheet's LINK tag and the image IMG tag. The result, for some browsers, is that the image isn't downloaded until the stylesheet finishes. The reason is that the image download must occur after the inline script block is executed (in case the script block itself inserts images or in some other way manipulates the DOM), and the inline script block doesn't execute until after the stylesheet is downloaded and parsed (in case the inline script block depends on CSS rules in the stylesheet). It's important to preserve the order of the stylesheet rules being applied to the page, followed by executing the inline script block, but there's no reason other resources shouldn't be downloaded in parallel and not applied to the page until after the inline script block is executed. A subtlety of this test is that if the test is determined to be a failure if the inline script is executed before the stylesheet is done downloading - although this is faster it could lead to unexpected behavior.
Prime the Cache
This page isn't a test - it merely loads resources that will be used in the next few pages to test caching.
Cache Expires
This test determines if a resource with a future expiration date is correctly read from the browser's cache, or issues an unnecessary HTTP request. This is really testing the browser's memory cache.
Cache Redirects
Many pages use redirects to send users from one page to another, for example http://google.com/ redirects to http://www.google.com/. Unfortunately, most browsers don't pay attention to the cache headers of these redirects, and force the user to endure the redirect over and over again. This test measures if a redirect for the page is cached when it has a future expiration date.
Cache Resource Redirects
Whereas the previous test measures redirect caching for the main page, this test measures redirect caching for resources in the page.
Link Prefetch
This test determines if the prefetch keyword for the link tag works. (See the link prefetch description in this MDC FAQ and in a working draft of the HTML 5 spec.) Prefetch is an easy way for web developers to download resources they know the user will need in the future.
Compression Supported
Compressing text responses typically reduces the number of bytes transmitted by approximately 70%. This test measures if the browser sends an Accept-Encoding header announcing support for compression.
data: URLs
A "data:" URL (aka an inline image), is a technique for embedding other resources directly into the main HTML document. Doing this avoids an extra HTTP request. This test checks if an image inserted using a "data:" URL is rendered correctly.
H! Hover Selector
1. use row_hover.call(this);
2. use "row_hover" in window rather than typeof window["row_hover"]
3. this.runtimeStyle.behavior="none" for one-time css expression
tr {
behavior: expression(
/*you can remove these following comments, make it clearner*/
("row_hover" in window)
/*detect wherther window.row_hover is declared*/
? window.row_hover.call(this)
/*call window.row_hover from*/
: window.row_hover =
/*declare window.row_hover if it`s not declared*/
/*pretty cool, let`s put JS function here, huh!*/
function() {;
this.runtimeStyle.behavior = "none";
/*OK, remove`s behavior since it had finish his job*/
this.onmouseover = function() {
this.className = "hover";
};
/*go on~*/
this.onmouseout = function() {
this.className = "";
};
/*go on~*/
});
/*OK, that`s it~*/
}
/*Let`s make it compatible for most modern browsers*/
tr.hover, tr:hover{background:#336699;color:white;}12/29/2008
12/28/2008
JavaScript timers - using functions and scope
JavaScript timers - using functions and scope - Robert’s talk - Web development and Internet trends
setElmBGColor function - using a function and scope
function setElmBGColor (bgColor) {
var currentElm = this;
setTimeout(function () {
currentElm.style.backgroundColor = bgColor;
}, 1000);
}
setElmBGColor function - using a function with scope and closure
function setElmBGColor (bgColor) {
setTimeout(function (elm) {
return function () {
elm.style.backgroundColor = bgColor;
};
}(this), 1000);
}call - MDC
call - MDC
You can use call to chain constructors for an object, similar to Java. In the following example, the constructor for the product object is defined with two parameters, name and value. Another object, prod_dept, initializes its unique variable (dept) and calls the constructor for product in its constructor to initialize the other variables.
function product(name, value){
this.name = name;
if(value >= 1000)
this.value = 999;
else
this.value = value;
}
function prod_dept(name, value, dept){
this.dept = dept;
product.call(this, name, value);
}
prod_dept.prototype = new product();
// since 5 is less than 1000, value is set
cheese = new prod_dept("feta", 5, "food");
// since 5000 is above 1000, value will be 999
car = new prod_dept("honda", 5000, "auto");12/22/2008
yui - custom event
yui - custom event
Step 1: Define a custom event
var onCustomEvent1 = new YAHOO.util.CustomEvent('onCustomEvent');
Step 2: Make methods subscribe to the event
onCustomEvent1.subscribe(method1);
onCustomEvent1.subscribe(method2);
etc.You can also pass arguments to the subscribe method, which can be accessed by the subscribed method, as explained below.
Step 3: Whenever that event is supposed to be triggerd, cause the event to be executed
onCustomEvent1.fire();
You can also pass arguments to the fire method, these arguments can then be accessed in the subscribe method explained below.
onCustomEvent1.fire({action:'fire'});
function method1(event, arguments, obj) {}
* event returns the name of the custom event
* arguments is the set of arguments that are passed in the fire event
* obj is the argument that is passed in the subscribe method.
var fooEvent = new YAHOO.util.CustomEvent('fooEvent');
fooEvent.subscribe(function (a, b, c) {
console.log(arguments); // ["fooEvent", [Object { hello="world"}], Object { foo="bar"}]
}, {foo: 'bar'})
fooEvent.fire({hello:'world'})12/20/2008
User Generated Charity 2.0 - Microfinance 與 Microcredit 的 Kiva 初體驗
User Generated Charity 2.0 - Microfinance 與 Microcredit 的 Kiva 初體驗
私募基金金主週記：Kiva 微型貸款初體驗這幾天都在摸 Kiva ，對整個價值鍊又有更多的了解。由於 Paypal 贊助（這很重要），所以手續費全免，貸出的金額理論上 100% 會到申貸者身上，我放款 300 美金，申請微型貸款的人就會完整拿到 300 美金。但這個錢不是直接從 Kiva 撥下去，而是透過各國的微型貸款機構，也就是類似Grameen Bank（鄉村銀行）這樣的組織來進行。
各地的微型貸款組織從 Kiva 獲得金錢後，再轉給小販、小農，並且負責追蹤、輔導、寫報告、按月催討。這些 Microfinance 機構當然也都是非營利性質的社會企業，雖然不以營利為目的，但也是要吃飯、喝水、過生活的。所以申貸者還款時還要給利息，這些利息就是各地微型貸款機構的營運費用。
Kiva 本身目前不收利息，所以只能靠金主捐款。現在 Kiva 貸出去的錢大約 3 億台幣，在美國應該不算大錢，但對一天收入只有幾塊的地方而言，感覺應該很像 Blackstone 或 Carlyle 了。
Kiva作為一個網站型社會企業的策略調整
我的Kiva 怎麼生出下線了
賀！Kiva放款客戶超過20組！很巧的是，昨天收到了最新一期的 COLORS 雜誌，主題是 Money，雜誌還附上了兩張類似海報的「Microcredit」漂亮文宣，是 Benetton 跟 Birima 這個組織聯名的，裡面很圖像式的告訴你微型貸款如何幫助那些每日生活費在1美金以下的人可以從事商業活動，改善生活，有99%的微型貸款者會還款，其中93%的貸款者可以因此獲利，平均2年內靠微型貸款增加一倍的收入。
Microfinance 在台灣－先進國家的微型貸款能成功嗎？－
Kiva大暴走，還款改成逐月回吐
《窮人的銀行家》─ 給窮人一根釣竿
尤努斯發現，窮人並不是由於好吃懶做或是天性愚笨，只是因為他們沒有財產擔保，所以不能向銀行借錢，於是只好日復一日被高利貸壓得喘不過氣，如果給窮人們一根釣竿，他們就能脫離貧困的生活，同時也能改變下一代的命運。
比起有錢人的還款率，窮人更重視信用，因為他們知道，他們唯有跟鄉間銀行進行小額借款，抱持良好信用，才能真正翻身，尤其是婦女，鄉間銀行的推行能讓婦女也加入改善家庭經濟的行列，尤努斯為了推展鄉間銀行，眼睜睜讓妻女離去，這份心意實屬難得可貴(後來他有結婚啦!)INET6: 「Yahoo!奇摩字典」Ubiquity Script
INET6: 「Yahoo!奇摩字典」Ubiquity Script
CmdUtils.CreateCommand({
name: "fy",
homepage: "zhpy.googlecode.com",
author: {
name: "Fred Lin",
email: "gasolin+ubiquity@gmail.com"
},
license: "MIT",
description: "yahoo dict",
help: "fy [keyword]",
takes: {
"keyword": noun_arb_text
},
preview: function(pblock, directObject) {
searchText = jQuery.trim(directObject.text)
var previewTemplate = "輸入要搜尋的單字 ${query}";
var previewData = {
query: searchText
};
pblock.innerHTML = CmdUtils.renderTemplate(previewTemplate, previewData);
},
execute: function(directObject) {
var url = "http://tw.dictionary.yahoo.com/dictionary?s={QUERY}"
var urlString = url.replace("{QUERY}", directObject.text);
Utils.openUrlInBrowser(urlString);
}
})12/18/2008
Pike's Mozilla Firefox Extensions
Pike's Mozilla Firefox Extensions - Bookmark Backup
Description
Bookmark Backup is a simple extension that helps to keep your bookmarks (and optionally other Firefox settings) safe. Each time Firefox is closed, a copy of your bookmarks file will be made to a backup location. If Firefox's bookmarks become corrupted or lost, find the most recent uncorrupted backup and copy it into your profile folder. By default the backups can be found in the Backups folder inside Firefox's profile folder, though this location can be changed in Bookmark Backup's Options dialog.
Additionally, thanks to code contributed by Nickolay Ponomarev, other files may also be backed up along with the bookmarks file. You can specify which files to backup in the Options dialog. Just check the box for each type of setting you want backed up, any other files can be listed in the following text box separated by a | character. Please refer to the Firefox Support Knowledge Base for details about what data is stored in each file.
Please remember, this extension should be used in addition to a regular profile backup not as a replacement.12/16/2008
strfriend - visualize regular expressions simply
strfriend - visualize regular expressions simply
example:/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]+\]|[^[\]]+)+\]|\\.|[^ >+~,(\[]+)+|[>+~])(\s*,\s*)?/g- from sizzle
tag: regular expression regexp12/15/2008
Conditional stylesheets vs CSS hacks? Answer: Neither!
Conditional stylesheets vs CSS hacks? Answer: Neither!
* Conditional stylesheets mean 1 or 2 additional HTTP requests to download
* As they are in the the <head>, the rendering of the page waits until they're totally loaded.
* Also - Yahoo's internal coding best practices do not recommend conditional stylesheets
* It can separate a single CSS rule into multiple files. I’ve spent a lot of time wondering “Where the eff is that rule coming from!?” when it turned out to be tucked away in a conditional stylesheet.
<!--[if lt IE 7 ]>
<body class="ie6"><![endif]-->
<!--[if IE 7 ]>
<body class="ie7"><![endif]-->
<!--[if IE 8 ]>
<body class="ie8"><![endif]-->
<!--[if !IE]>
--> <body><!--<![endif]-->Ajaxian » More JavaScript Inheritance; Prototypes vs. Closures
Ajaxian » More JavaScript Inheritance; Prototypes vs. Closures
JavaScript Inheritance via Prototypes and Closures | ruzee.com - Steffen Rusitschka
Prototype-based
var A = function(){}; // This is the constructor of "A"
A.prototype.value = 1;
A.prototype.test = function() { alert(this.value); }
var a = new A(); // create an instance of A
alert(a.value); // => 1
alert(a.test()); // => 1
Closure-based
var C = function() {
// a private function
var print = function(msg) {
alert(msg);
};
this.value = 1;
this.test = function() {
print(this.value); // calls our private function
};
};
var c = new C();
alert(c.value); // => 1
alert(c.test()); // => 1Ajaxian » CSS Spriting without background-image
Ajaxian » CSS Spriting without background-image
Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting1. You can’t attach alternate text to divs for accessibility purposes
2. CSS Spriting and the IE6 PNG fix are incompatible
3. The images will not print out on printouts unless the client option to print background images is selected (this is bad for logos and menus, etc)
4. For images in pages (that are not actually background images), it seems semantically bad to hide the image in CSS.
3 ways to do the css sprites.
1. background-image
2. image-map
3. image tab with rect.YQL - converting the web to JSON with mock SQL
YQL - converting the web to JSON with mock SQL
Hence we need converters. You can use cURL and beautiful soup or roll your own hell of regular expressions. Alternatively you can use Yahoo Pipes to build your converter. Pipes is the bomb but a lot of people complained that there is no version control and that you need to use the very graphical interface to get to your data (which was the point of Pipes but let's not go there).
for all the open services that don't need authentication you can use these YQL statements as a REST API with JSON output and an optional callback function for JSON-P by adding it to http://query.yahooapis.com/v1/public/yql?. For example to get the latest three headlines from Ajaxian's RSS feed as JSON and wrap it in a function called leechajaxian do the following:
http://query.yahooapis.com/v1/public/yql?select title from rss where url="http://feeds.feedburner.com/ajaxian" limit 3
You can also search the web with YQL: http://query.yahooapis.com/v1/public/yql?q=select title,abstract,url from search.web where query="json" limit 3&format=json&callback=leechajaxian
What about screenscraping? You can get data from any valid HTML document using XPATH with select * from html. For example to get the first 3 tag links on my blog you can do the following:
http://query.yahooapis.com/v1/public/yql?q=select * from html where url="http://wait-till-i.com" and xpath='//a[@rel="tag"]' limit 3&format=json&callback=leechajaxian
yql test console
Creating an OAuth Application - YDN
Wait till I come! » Blog Archive » YQL is so the bomb to get web data as XML or JSON
<script type="text/javascript" charset="utf-8">
function photos(o){
var out = document.getElementById('photos');
var html = '';
for(var i=0;i<o.query.results.result.length;i++){
var cur = o.query.results.result[i];
html += ‘<img src="’+cur.thumbnail_url+’" alt="’+cur.abstract+’">’;
}
out.innerHTML = html;
}
</script>
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20search.images%20where%20query%3D%22rabbit%22%20and%20mimetype%20like%20%22%25jpeg%25%22&format=json&callback=photos"></script>
Beautiful Soup: We called him Tortoise because he taught us.Beautiful Soup is a Python HTML/XML parser designed for quick turnaround projects like screen-scraping. Three features make it powerful:
1. Beautiful Soup won't choke if you give it bad markup. It yields a parse tree that makes approximately as much sense as your original document. This is usually good enough to collect the data you need and run away.
2. Beautiful Soup provides a few simple methods and Pythonic idioms for navigating, searching, and modifying a parse tree: a toolkit for dissecting a document and extracting what you need. You don't have to create a custom parser for each application.
3. Beautiful Soup automatically converts incoming documents to Unicode and outgoing documents to UTF-8. You don't have to think about encodings, unless the document doesn't specify an encoding and Beautiful Soup can't autodetect one. Then you just have to specify the original encoding.12/08/2008
12/04/2008
GNU Core Utilities - Wikipedia, the free encyclopedia
GNU Core Utilities - Wikipedia, the free encyclopedia
yes (Unix) - Wikipedia, the free encyclopediayescan be used to send an affirmative (or negative; e.g. yes n) response to any command that would otherwise request one, and thereby causing the command to run non-interactively.
This usage may be obsolete today, as most commands that would request response from the user have either a 'force' option (e.g., rm -f) or an 'assume-yes' option (e.g., apt-get -y in Debian).
As an example, the following:
rm -f *.txt
is equivalent to
yes | rm *.txt» 编程珠玑番外篇-8.Smalltalk 中的珠玑 | 4G spaces
» 编程珠玑番外篇-8.Smalltalk 中的珠玑 | 4G spaces
关于反射的基本概念在脚本语言里面是屡见不鲜的了. 大家都知道, LISP 里面的 eval 后面可以加任何的字符串, 构造出一个运行时对象. 脚本语言实现反射也很简单: 本来就是解释执行的语言, 多一个 eval 等价于多调用一次解释器而已. 而编译型语言就麻烦了, 因为解释器已经在编译期用过了, 运行的时候解释器是不存在的. 这样, 就造成了编译型语言没有运行时信息这个本质困难. Smalltalk 用了一个巧妙的方法解决了这个问题, 也就是 Java 和 Python 等现代语言用的方法: 虚拟机. 能编译的代码被先编译, 需要解释的代码在运行时可以被虚拟机自带的解析器再解析. 除了加入一个小的解释器到虚拟机外, Smalltalk 更进一步, 把对象的元信息也抽象成一个对象, 这样运行时需要的一个对象的所有元信息都能在面向对象的标准框架下表达. 我们用类 Java 的语言来举例: 一个叫 a 的 Foo 对象, 包含一个 a.hello() 的方法, 这个方法既可以通过 a.hello() 来调用, 也可以通过 a.class 先得到 a 的类, 再通过 a.Class.findMethod(”hello”) 找到这个方法. 最后再通过 .invoke() 调用这个方法. 这样的流程在没有虚拟机的 C++ 里面是没法完成的.
现在做单元测试的框架, 一般都被称为 xUnit 家族. xUnit 家族最早的成员, 不是 JUnit, 而是 SUnit (Smalltalk Unit). SUnit 的历史比 Junit 悠久得多, 大约在1994年的时候, Kent Beck, 也就是 Junit 的作者之一, 写了 SUnit. 而后才有了 JUnit (1998). 所以, 在 SUnit 的网站上, 极其显摆的写着”一切单元测试框架之母” (The mother of all unit testing frameworks). 事实上这是大实话 — 所有单元测试框架里面的名词术语, 都从 Sunit 来的, 如 TestCase, Fixture 等等.
既然 SUnit 和 Junit 是同一个作者, 而早在1996年, Java 就已经成为工业界炙手可热的语言, 为什么要等到两年之后, JUnit 才横空出世呢. 这里面的原因说简单也简单: 自动单元测试需要反射支持. 1998 年前的 Java 没有反射, 直到1998年 Java 1.2 发布, 反射才完整的被支持. 所以, 只有1998年之后, Java 才有办法做自动单元测试.
我们回顾一下 Junit 的工作流程: 继承一个 TestCase, 加入很多以 test 开头的方法, 把自己的类加入 TestSuite 或者直接用 TestRunner, 让测试跑起来. Junit 能够自动覆盖所有 test 开头的方法, 输出红棒绿棒. 这地方的关键是自动覆盖. 假如每个测试都是靠程序员自己写 printf 比较, 那不叫自动. 假如每个 TestCase 里面的每个 test 开头的方法都要程序员自己写代码去调用, 那也不叫自动. 所谓的自动, 就是在机器和人之间形成一定的规约, 然后机器就去做繁琐的工作, 最小化人的工作(RoR就是很好的例子).
注意到我们的需求是 “让 Junit 自动调用以 test 开头的方法”, 而不需要自己很笨的一个一个自己去调用这些方法. 这意味着 Java 语言必须支持一个机制, 让 JUnit 知道一个测试类的所有方法名称, 然后还能挑出 test 开头的方法, 一一去调用. 这不就是反射么! 事实也证明了这一点: 目前互联网上找到的最早的 Junit 的源代码, 1.0 版的核心就只用了一个 Java 的标准库: reflect. 相反, 不支持反射的语言, 就得告诉单元测试的框架我要运行哪些. 比如说 C++ 的单元测试框架 CppUnit, 就很不方便–必须告诉框架我要测哪几个函数, 就算他们以 test 开头也不行. 还有一个好玩的例子是 J2ME 的测试框架. J2ME 是 Java 小型版, 不支持 reflect, 因此, JUnit 平移不上去. 如果细看所有的这些移植 JUnit 的尝试, 很容易发现, 移植出去的版本作用到有反射机制的语言上, 使用起来就很方便, 就比较成功, 比如NUnit; 没反射机制的就比较麻烦, 用的人也相对少, 比如 CppUnit 和 J2MEUnit. 反正任何对于 JUnit 的移植, 都绕不开”反射” 这个机制. 有反射者昌, 无反射者弱. NUnit 这个移植版本, 还曾经被 Kent Beck 夸设计好, 其原因, 与 C# 语言比 Java 更加良好的 attribute 和反射机制, 是息息相关的.
Reflection (computer science) - Wikipedia, the free encyclopediaIn computer science, reflection is the process by which a computer program can observe and modify its own structure and behaviour. The programming paradigm driven by reflection is called reflective programming. It is a particular kind of metaprogramming.
In most modern computer architectures, program instructions are stored as data - hence the distinction between instruction and data is merely a matter of how the information is treated by the computer and programming language. Normally, 'instructions' are 'executed' and 'data' is 'processed'; however, in some languages, programs can also treat instructions as data and therefore make reflective modifications. Reflection is most commonly used in high-level virtual machine programming languages like Smalltalk and scripting languages, and less commonly used in manifestly typed and/or statically typed programming languages such as Java and C.
Metaprogramming - Wikipedia, the free encyclopedia12/03/2008
12/01/2008
[].slice
Array-like Objects in JavaScript - Blog - ShiftEleven
slice
this extracts a section of an array and returns a new array, and without a beginning and ending index, it simply returns a copy of the array
var $A = function(obj) {
return Array.prototype.slice.call(obj);
};
// Example usage:
$A(document.getElementsByTagName("li"));
JavaScript数组操作 - Richie - 博客园
//Supported by Firefox, IE6, IE7, Opera, Safari
var arrayLike = { 0:"ccc", 1:1, 2:"eee", 3:8, length:4 }; //an object that looks like an object
var trueArray = [].slice.call(arrayLike, 2, arrayLike.length); //make a new array with arrayLike
trueArray.push("2008-02-12");
document.write(trueArray.join(" | ")); //result: eee | 8 | 2008-02-12
document.write("
");
Array.prototype.map = function(callback){
if(!callback || typeof callback!="function") return this;
for(var i=0; i<this.length; i++) callback( this[i], i);
return this;
};訂閱： 文章 (Atom)RSS Feeds
