Wuff, Wuff!!: 01/2009

1/20/2009

mozilla firefox browser default style

resource://gre/res/
file:///C:/Program%20Files/Mozilla%20Firefox/res/html.css

1/17/2009

Beginning Object-Oriented JavaScript - SlideShare

Constructor functions
when invoked with new, functions return an object known as this
you can modify this before it’s returned

Built-in constructors
Object Array Function Regexp Number String Boolean Date Error, Syntax Error ,...

Prototype…
is a property of the function objects
>>> var boo = function(){};
>>> typeof boo.prototype
"object"
The prototype is used when a function is called as a constructor

__proto__
The objects have a secret link to the prototype of the constructor that created them
__proto__ is not directly exposed in all browsers

Inheritance
function NormalObject() {
  this.name = 'normal';
  this.getName = function() {
   return this.name; 
  };
}   
function PreciousObject(){ 
  this.shiny = true; 
  this.round = true; 
}  
PreciousObject.prototype = 
  new NormalObject(); 
Beget object
function object(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

Ajaxian » Seeding the clipboard in Flash10 with Zero Clipboard

Instructions - zeroclipboard - Google Code
Ajaxian » Seeding the clipboard in Flash10 with Zero Clipboard
Following the bombshell of Adobe announcing that Flash 10 will not support unsolicited clipboard access from Flash and JavaScript as malicious flash ads flooded clipboards a lot of developers were wondering how to make the “copy to clipboard” still work without having to do it in Flash itself.

An interesting and also slightly creepy approach to the problem is the JavaScript library Zero Clipboard

1/14/2009

Archive - smashing magazine

10 Useful Web Application Interface Techniques | How-To | Smashing Magazine
Web Form Design Patterns: Sign-Up Forms | How-To | Smashing Magazine
10 Most Common Misconceptions About User Experience Design
http://www.smashingmagazine.com/2009/02/08/50-extremely-useful-javascript-tools/

Sloppy - the slow proxy for dial-up modem speed simulation (slow down)

Sloppy - the slow proxy
Sloppy deliberately slows the transfer of data between client and server.
Example usage: you probably build web sites on your local network, which is fast. Using Sloppy is one way to get the "dial-up experience" of your work without the hassle of having to install a modem.

Bill Scott's talks on slideshare

Designing for Ajax

closure

Looks Good Works Well


function main(links) {
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            alert(i + 1);
        }
    }
};
main(document.getElementsByTagName("a"));


function main(links) {
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = (function(i) {
            return function() {
                alert(i + 1);
            }
        })(i);
    }
};
main(document.getElementsByTagName("a"));

Fiddler PowerToy - Part 2: HTTP Performance

When a resource is needed by the client, there are three possible actions:
* Send a plain HTTP request to the remote Web server asking for a resource
* Send a conditional HTTP request to the origin server asking for the resource only if it differs from the locally cached version
* Use a locally cached version of the resource, if a cached copy is available

When sending a request, the client may use one of the following headers:
Pragma: no-cache The client is unwilling to accept any cached responses from caches along the route and the origin server must be contacted for a fresh copy of the resource.
If-Modified-Since: datetime The server should return the requested resource only if the resource has been modified since the date-time provided by the client.
If-None-Match: etagvalue The server should return the requested resource if the ETAG of the resource is different than the value provided by the client. An ETAG is a unique identifier representing a particular version of a file.

A client indicates that it has a cached response available for use by sending a "Conditional request" containing the headers If-Modified-Since or If-None-Match. If the server replies to a conditional request with HTTP/304 Not Modified, the client is directed to reuse its cached response. Otherwise, the server should return a new response and the client should discard its outdated cache item.

Observe two consecutive requests for an image file in the following code sessions. In the first session, no locally cached version of the file is present, so the server returns the file along with an ETAG value and the date-time of the last modification of the file. In the subsequent session, a locally cached version of the file is now available, so a conditional request is made, passing up the ETAG of the cached response as well as the Last-Modified time of the original request. Since the image has not changed since the cached version (either because the ETAG matches or the If-Modified-Since value matches the Last-Modified value) the server returns a 304 to the client to direct it to use the cached response.
Session #1

GET /images/banner.jpg HTTP/1.1
Host: www.bayden.com

HTTP/1.1 200 OK
Date: Tue, 08 Mar 2006 00:32:46 GMT
Content-Length: 6171
Content-Type: image/jpeg
ETag: "40c7f76e8d30c31:2fe20"
Last-Modified: Thu, 12 Jun 2003 02:50:50 GMT

Session #2

GET /images/banner.jpg HTTP/1.1
If-Modified-Since: Thu, 12 Jun 2003 02:50:50 GMT
If-None-Match: "40c7f76e8d30c31:2fe20"
Host: www.bayden.com

HTTP/1.1 304 Not Modified
Setting Cache copy is fresh Cache stale No cache-directives were present
Every visit to the page No request Conditional request Conditional request
Every time you start Internet Explorer No request Conditional request Conditional request
Automatically No request Conditional request Heuristic (see below)
Never No request Conditional request No request

Setting	Cache copy is fresh	Cache stale	No cache-directives were present
Every visit to the page	No request	Conditional request	Conditional request
Every time you start Internet Explorer	No request	Conditional request	Conditional request
Automatically	No request	Conditional request	Heuristic (see below)
Never	No request	Conditional request	No request

1/13/2009

24 ways: Shiny Happy Buttons

If you’ve not seen text-shadows before well, here’s the quick back-story. Text shadow was introduced in CSS2, but only supported in Safari (version 1!) some years later. It was removed from CSS2.1, but returned in CSS3 (in the text module). It’s now supported in Safari, Opera and Firefox (3.1). Internet Explorer has a shadow filter, but the syntax is completely different.

So, how do text-shadows work? The three length values specify respectively a horizontal offset, a vertical offset and a blur (the greater the number the more blurred the shadow will be), and finally a color value for the shadow.
text-shadow: 1px 1px 1px #000;
button {
 width: 15em;
 padding: .5em;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000;
 border: solid thin #882d13;
 -webkit-border-radius: .7em;
 -moz-border-radius: .7em;
 border-radius: .7em;
 -webkit-box-shadow: 2px 2px 3px #999; 
 box-shadow: 2px 2px 2px #bbb;
 background-color: #ce401c;
 background-image: -webkit-gradient (linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}

Do websites need to look exactly the same in every browser?

A Snapshot of The Yahoo! Photos Beta (from 2006)

When the user is drawing a selection marquee over a number of photos, it is faster to directly modify the style attributes of the selected photo items. Changing class names on the photo items as they were highlighted made the browser eat up more CPU and therefore took longer to update visually.

Photos creates a "PhotoItem" object instance for each thumbnail that is shown. Each object has a number of DOM node references (eg. an image or a DIV,) methods, properties and references to other objects in some instances.

Internet Explorer: "The Wall"
Having many more than 100 "PhotoItem" objects active at a time begins to degrade DOM, XML parsing, general javascript performance in IE (seen in development on IE6, Windows XP) in a seemingly non-linear fashion. The more active photo objects, the more memory is used at once and the slower the browser runs. Though unconfirmed, it may be possible there's a correlation between this and the number of image elements being generated and loaded, as well.
"The Wall" Workaround
To avoid hitting the wall, Photos will destroy PhotoItem objects as they are not needed. PhotoItem objects are created as needed, as the user is viewing and scrolling through photos. Once they move to the next "page" (javascript-driven, same URL) of photos, the previous page is hidden from view and its related objects are destroyed. Throwing away these objects is enough to avoid the effects of the wall without introducing other performance side-effects.

Lightweight event handling: Event Delegation
Since event handlers can be somewhat expensive to individually create, assign and maintain, Photos has taken a higher-level approach of assigning a "controller" object which watches events at the document level, determines the object that should handle the event, and dispatches the event accordingly.
 - Watch "global" document.onmousedown
 On mousedown:
  Capture event target (element that received mousedown)

  IF (event target is a child element of the thumbnail area - ie., user clicked inside thumb area) {

   CASE: mousedown on a thumbnail {
     watch mousemove for start of drag
     ON (mousemove) {
       begin drag/drop, assign event handlers (mousemove/mouseup event handlers change)
       mousemove: drag photos and coordinate checking (target "collision detection")
       mouseup: stop drag/drop (reset handlers,) determine drop target, take action if necessary
     }
     ON (mouseup) {
       IF (CTRL key was held down, multi-select mode) {
         Toggle selection (highlight) on this photo, retaining other selections
       } ELSE IF (SHIFT key was held, range select mode) {
         Select "from last-clicked photo (or first photo) to this one"
       } ELSE (no modifier keys) {
         Select only this single photo
       }
     }
   }

   CASE: mousedown in empty/whitespace inside photo area {
     watch mousemove for start of selection marquee
     on (mousemove) {
       draw selection marquee, do coordinate checks to determine photos to highlight
       selection highlighting logic changes to "toggle" with CTRL key - existing selection retained, items "hovered over" toggle their selection status.
     }
     mouseup: reset event handlers
   }

  }
Event Handler Throttling Example
function SomeObject() {
  var self = this;
  this.lastExecThrottle = 500; // limit to one call every "n" msec
  this.lastExec = new Date();
  this.timer = null;
  this.resizeHandler = function() {
    var d = new Date();
    if (d-self.lastExec<self.lastExecThrottle) {
      // This function has been called "too soon," before the allowed "rate" of twice per second
      // Set (or reset) timer so the throttled handler execution happens "n" msec from now instead
      if (self.timer) {
        window.clearTimeout(self.timer);
      }
      self.timer = window.setTimeout(self.resizeHandler,self.lastExecThrottle);
      return false; // exit
    }
    self.lastExec = d; // update "last exec" time
    // At this point, actual handler code can be called (update positions, resize elements etc.)
    // self.callResizeHandlerFunctions();
  }
}

var someObject = new SomeObject();

window.onresize = someObject.resizeHandler;

YUI Theater — Douglas Crockford: "Ajax Performance" » Yahoo! User Interface Blog

Duck typing - Wikipedia, the free encyclopedia

In computer programming, duck typing is a style of dynamic typing in which an object's current set of methods and properties determines the valid semantics, rather than its inheritance from a particular class. The name of the concept refers to the duck test, attributed to James Whitcomb Riley (see History below), which may be phrased as follows:

If it walks like a duck and quacks like a duck, I would call it a duck.

In duck typing one is concerned with just those aspects of an object that are used, rather than with the type of the object itself. For example, in a non-duck-typed language, one can create a function that takes an object of type Duck and calls that object's walk and quack methods. In a duck-typed language, the equivalent function would take an object of any type and call that object's walk and quack methods. If the object does not have the methods that are called then the function signals a run-time error. It is this action of any object having the correct walk and quack methods being accepted by the function that evokes the quotation and hence the name of this form of typing.

Duck typing is aided by habitually not testing for the type of arguments in method and function bodies, relying on documentation, clear code, and testing to ensure correct use. Users of statically typed languages new to dynamically typed languages may want to add such static, (before run-time), type checks which defeats duck typing, constraining the language's dynamism.

Pythonic programming style that determines an object's type by inspection of its method or attribute signature rather than by explicit relationship to some type object ("If it looks like a duck and quacks like a duck, it must be a duck.") By emphasizing interfaces rather than specific types, well-designed code improves its flexibility by allowing polymorphic substitution. Duck-typing avoids tests using type() or isinstance(). Instead, it typically employs the EAFP (Easier to Ask Forgiveness than Permission) style of programming.

perfection kills » Blog Archive » `instanceof` considered harmful (or how to write a robust `isArray`)


function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]'; 
}

instanceof considered harmful (or how to write a robust isArray

JavaScript’s instanceof operator breaks when dealing with objects that may have been created in a different document or frame, since constructors are unique to each frame. Instead, you can check for arrays using the default Object.toString method which the JS spec guarantees will return [object Array].

myArray instanceof Array fails after passing to a different page - comp.lang.javascript | Google 網上論壇

When you say 'Array', you are talking about 'window.Array'. 'window' is the
browser's context object, and you get one per page (or frame). All of the arrays
created within a context will have their constructor property set to
'window.Array'.

An array created in a different context has a different window.Array, so your
test
myArray instanceof Array
fails.

/trunk/jquery/src/core.js - jQuery - Development


isFunction: function( obj ) {
    return toString.call(obj) === "[object Function]";
},

isArray: function( obj ) {
    return toString.call(obj) === "[object Array]";
},

Why Google App Engine is broken and what Google must do to fix it.

Aral Balkan - Why Google App Engine is broken and what Google must do to fix it.
24 ways: Using Google App Engine as Your Own Content Delivery Network

The first is that you can’t host a file larger than one megabyte. If you want to use App Engine to host that 4.3MB download for your latest-and-greatest desktop software, you’re out of luck. The only solution is to stick to smaller files.

The second problem is the quota system. Google’s own documentation says you’re allowed 650,000 requests a day and 10,000 megabytes of bandwidth in and out (20,000 megabytes in total), which should be plenty for most sites. But people have seen sites shut down temporarily for breaching quotas — in some cases after inexplicable jumps in Google’s server CPU usage. Aral, who’s seen it happen to his own sites, seemed genuinely frustrated by this, and if you measure your hits in the hundreds of thousands and don’t want to worry about uptime, App Engine isn’t for you.

http://chunghe.appspot.com/

1/12/2009

Donovan Preston experiments with the cleverly named idea of ptth, where servers send HTTP requests to clients.

24 ways: User Styling

The web geek advent calendar is up and running again this year, with a striking new design.

json-head

I’ve deployed another App Engine mini-app, which provides a JSON-P API for running HEAD requests against an arbitrary URL (useful for checking things like Content-Length and Content-Type headers and whether a URL returns 200). App Engine’s urlfetch limitations mean it can only deal with port 80 and 443 requests.

jsontime

Nat and I threw this together this morning—it runs on Google App Engine and exposes Python’s pytz timezone library over JSONP.

Visual Event

Allan Jardine | Reflections | Visual Event
Visual Event

External code loading bookmarklet that visualises the JavaScript events hooked up to the current page, and lets you view the source code of the event handling function for each one. Only works for events added by jQuery, YUI or MooTools since those libraries maintain a cache of event handlers that they add, to work around the standard DOM’s omission of handler introspection.

BSBlog » Blog Archive » Using SVG on the Web

Inline SVG is an attractive option because it doesn’t require an external file. Unfortunately, inline SVG has one significant problem: authors are forced to use XHTML and the application/xhtml+xml MIME type, instead of standard HTML and the text/html MIME type. XHTML is not a very forgiving language, and one I would generally discourage.

The <object> element is the generic HTML mechanism for embedding external content. It can be used just like an <iframe> for external HTML document. It can be used to embed plugin-rendered content such as Flash, and it can be used to embed SVG:
<object type="image/svg+xml"
        data="http://benjamin.smedbergs.us/blog/wp-content/uploads/2008/12/svg-document1.svg"
        width="250" height="250">
  Alternate markup here. If you see this, your browser may not support SVG, or a content aggregator may have stripped the object element.
</object>

'param' Example

To pass parameters to an SVG, use the <object> element with child elements. Each element should have name/value pairs with the 'name' and 'value' attributes; these will be exposed to the embedded SVG document.
<object type="image/svg+xml" data="params.svg" style="width: 150px; height:150px; display:inline;">
<param name="color" value="red" />
<param name="label" value="stop" />
</object>
function SetParams() {
    var paramArray = [];
    if (document.defaultView.frameElement) {
        var params = document.defaultView.frameElement.getElementsByTagName("param");

        for (var i = 0, iLen = params.length; iLen > i; i++) {
            var eachParam = params[i];
            var name = eachParam.getAttribute("name");
            var value = eachParam.getAttribute("value");

            paramArray[name] = value;
        }
    }

    var light = document.getElementById("light");
    var label = document.getElementById("label");

    light.setAttribute("fill", paramArray["color"]);
    label.appendChild(document.createTextNode(paramArray["label"]));
};

Image Optimization, Part 5: AlphaImageLoader

Image Optimization, Part 5: AlphaImageLoader » Yahoo! User Interface Blog

#some-element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}
The reason to target IE prior to version 7 is that IE7 supports the alpha transparency natively without the need for filters. (IE8 does too and it actually changes the filter syntax completely.)

It’s interesting to note that the filter doesn’t change the image; rather, it changes the HTML element this style is applied to. The other interesting thing is that each element is processed synchronously in a single UI thread. The process applying the filter takes some resources for each element and the more “filtered” elements you have, the worse it gets, even if you use the same image for all the elements.

DD_belatedPNG: Medicine for your IE6/PNG headache!
tag: alpha imageloader transparent vml

SitePoint » PNG8 - The Clear Winner

SitePoint » PNG8 - The Clear Winner
PNG Alpha Transparency - No Clear Winner

"Chancho, when you are a man, sometimes you wear stretchy pants in your room. It's for fun." — Nacho

Firefox/Firebug extension creator wizard

Firefox/Firebug extension creator wizard
Extending Firebug, Hello World! (Part I.)
Extending Firebug, toolbar (Part II.)
Extending Firebug, options (Part III.)
Extending Firebug, localization (part IV.)
Extending Firebug, domplate (part V.)
Extending Firebug, Yahoo! Search (part VI.)
Extending Firebug, customize Net panel (part VII.)

Background repeat and CSS sprites

The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case: when you want to repeat horizontally, sprite vertically.

demo:
http://www.phpied.com/wp-content/uploads/2008/04/sp.html

RegExp.exec( ): general-purpose pattern matching

Note that exec( ) always includes full details of every match in the array it returns, whether or not regexp is a global pattern. This is where exec( ) differs from String.match( ), which returns much less information when used with global patterns. Calling the exec( ) method repeatedly in a loop is the only way to obtain complete pattern-matching information for a global pattern.

window.location vs. document.location

document.location - MDC

Returns a Location object, which contains information about the URL of the document and provides methods for changing that URL. In Gecko browsers you can also assign to this property to load another URL.

document.location was originally a read-only property, although Gecko browsers allow you to assign to it as well. For cross-browser safety, use window.location instead.

To retrieve just the URL as a string, the read-only document.URL property can be used.

window.location - MDC

var locationObj = window.location;
window.location = newLocation;
where
* locationObj is an object of type Location, providing information about the current URL and methods to change it. Its properties and methods are described below.
* newLocation is a Location object or a string, specifying the URL to navigate to.

manipulate css by javascript

http://chunghe.googlecode.com/svn/trunk/experiment/manipulate.css.by.javascript/javascript.inline.important.htm


// inserting css styles to the existing css file
var ss = document.styleSheets[0];
var rules = ss.cssRules?ss.cssRules:ss.rules;

if(typeof ss.insertRule != 'undefined')
    ss.insertRule("#foo{background:blue !important}", rules.length);
else if(typeof ss.addRule != 'undefined')
    ss.addRule('#foo', 'background:blue !important', rules.length);

更簡單一點的方法是，新增一個 stylesheet 掛在 document.body 裡面


var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#foo{background: blue !important}';
document.body.appendChild(style);

不過上面的寫法在 IE 下會有 "未知的執行階段錯誤"，正確的寫法如下：


var csstext = 'body{background:blue !important}';
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
if (style.styleSheet) { // for IE
    style.styleSheet.cssText = csstext;
} else { // for everyone else
 var textNode = document.createTextNode(csstext);
    style.appendChild(textNode);
}
document.body.appendChild(style);

cross browser insertRule


var style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style);
var sheet = style.sheet||style.styleSheet;
var n = function(m, Y) {
 var wrap = m + " { " + Y + " }";
 sheet.insertRule ? sheet.insertRule(wrap, sheet.cssRules.length) : sheet.addRule(m, Y);
};
n('#foo', 'display: block !important');

1/10/2009

Taobao.com UED Team

Taobao.com UED Team » Blog Archive » 用户研究角度看设计（1）“复制链接”的故事
 Taobao.com UED Team » Blog Archive » 陌生网页交互行为分析（1）——奇怪的关闭按钮

挑战：怎样以一种清晰的方式告诉用户隐藏和移除的区别，两个动作行为结果是一样的，即此组件从当前页面消失，区别是隐藏的组件还可以在组件列表被找到而移除的组件则不能。

解决思路：对动作进行相对详细的文字解释是表现这种区别的最直接的方法，但页面空间非常有限，因此不可能在页面中直接添加动作解释。这时候选择弹出窗成了一个很自然的选择（就是在点关闭按钮后弹出窗口，在弹出窗中我们可以对隐藏和移除两个行为做出更清晰的解释，用户就可一作出更明确的选择）。最终，设计师选择的是，类似于下拉菜单的，小面积的浮出层。

最终方案：把两种操作整合为一个关闭按钮（关闭按钮恰好可以概括两个操作在当前页面的相同结果，是这两个操作的交集，因此语义上非常恰当），在点关闭后用户会看到两个有详细注释的按钮，“hide from my profile（在当前页面隐藏）”和“remove this application（移除此组件）”这时候用户就可以作出相对准确的选择了。

Taobao.com UED Team » Blog Archive » 用户研究角度看设计（2）：用户为何视若无睹

http://ejohn.org/files/pretty.js


function prettyDate(time){
 var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
  diff = (((new Date()).getTime() - date.getTime()) / 1000),
  day_diff = Math.floor(diff / 86400);
   
 if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
  return;
   
 return day_diff == 0 && (
   diff < 60 && "just now" ||
   diff < 120 && "1 minute ago" ||
   diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
   diff < 7200 && "1 hour ago" ||
   diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
  day_diff == 1 && "Yesterday" ||
  day_diff < 7 && day_diff + " days ago" ||
  day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

1/09/2009

OmniGraffle Wireframe Stencils | Konigi

OmniGraffle Wireframe Stencils | Konigi

Design Stencils - Yahoo! Design Pattern Library

(almost) pixel perfect buttons

1/08/2009

Cross-Domain Communication with IFrames

window.location.hash = '' will cause browser reload,
window.location.hash = '#' won't
Cross-Domain Communication with IFrames - 不同 domain 的 parent 跟 child 透過 fragment identifier 溝通

child的js


window.onload = function() {
  setInterval(function() {
    var hashVal = window.location.hash.substr(1);
    document.body.style.backgroundColor = hashVal;
  }, 1000);
  $("speedUp").onclick = function() { parent.window.location.hash = "speedUp"; }
  $("slowDown").onclick = function() { parent.window.location.hash = "slowDown"; }
}

parent的js


setInterval(function() {
    if (window.location.hash == "#speedUp" && liftInterval >= 60) {
        liftInterval = Math.round(0.8 * liftInterval);
        window.location.hash = "#";
        launchLift();
    }
    if (window.location.hash == "#slowDown" && liftInterval < 500) {
        liftInterval = Math.round(1.2 * liftInterval);
        window.location.hash = "#";
        launchLift();
    }
}, 100);

update: ie下這個方法不work
Julien Lecomte’s Blog » Introducing CrossFrame, a Safe Communication Mechanism Across Documents and Across Domains
Cross-Domain Communication Between IFrames

1/07/2009

javascript write css inline important

如果樣式裡面有加上 css important, ex: #foo{background: red !important}，如果要用 javascript override掉了會你會這樣寫: $('foo').style.background = 'blue !importnat'，不過這種寫法在ie下面會是一個 js error，在 firefox 也不會 work，在firefox下可以這樣寫$('foo').style.setProperty('background', 'blue', 'important')，不過由於 ie 不支援 setProperty，似乎也沒有任何辦法可以加上 inline css important，替代方案是在 css 最後一行加上#foo{background: blue !importnat}，或者是直接新增一個 style 再 append 在 <head>

What determines that a script is long-running? | NCZOnline

What determines that a script is long-running? | NCZOnline
Internet Explorer determines that a script is long-running by the total amount of statements the JScript engine has executed. By default, the value is 5 million statements and can be altered via a registry setting. When your script exceeds this maximum number of statements, you’ll get this dialog:
IE Dialog: A script on this page is causing Internet Explorer to run slowly. If it continues to run, your compute rmay become unresponsive.
Firefox determines that a script is long-running by timing how long the script engine has been executing code continuously. The default time is set to 10 seconds and can be altered via about:config. Note that the amount of time modal dialogs, such as alerts, are displayed does not count against the script engine execution code. When this execution time has been reached, Firefox displays a dialog with the following message:
Firefox Dialog: A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.
Safari also uses script engine execution time to determine when a script has become long-running. After some digging around in the WebKit source code, it looks like the default timeout is 5 seconds. When that threshold is reached, the following dialog is displayed:
Safari Dialog: A script on the page [url] is making Safari unresponsive. Do you want to continue running the script, or stop it?
Opera is an interesting case: it doesn’t appear to have a long-running script limit. I ran several tests that completed even after minutes of code execution. During the time, the browser remain mostly responsive, which is impressive. I’m not sure if this approach is a good thing or a bad thing at the moment, but it’s what is implemented.


function chunk(array, process, context) {
    var items = array.concat(); //clone the array
    setTimeout(function() {
        var item = items.shift();
        process.call(context, item);
        if (items.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    },
    100);
}

Steve Souders - High Performance Web Sites

Hammerhead
CS193H
UA Profiler
Episodes
Cuzillion
Compare

Fiddler Web Debugger - Script Samples

Fiddler Web Debugger - Configuring clients 這邊有寫如何讓 fiddler 也可以紀錄 firefox 的 http request. 基本上只要把 proxy 指到 127.0.0.1:8888 或者把 proxy.pac 設到 {my document}/Fiddler2/Scripts/BrowserPAC.js 就可以了
另一方面因為 fiddler 是一個 proxy, 中間自然可以做一些手腳, 透過 fiddler script 可以做到一些有趣的事情, 可以參考 FiddlerScript CookBook

// Simulate modem uploads 
// Delay sends by 300ms per KB uploaded.
oSession["request-trickle-delay"] = "300"; 

// Simulate modem downloads
Delay receives by 150ms per KB downloaded.
oSession["response-trickle-delay"] = "150"; 

// Display in the "Custom Column" the number of milliseconds from the moment of the request until the last byte was received.
oSession["ui-customcolumn"] = oSession["X-TTLB"]; 

// Display the # of milliseconds until the First Byte was received from the server, followed by the # of ms until the Last Byte.
oSession["ui-customcolumn"] = "FB: " + oSession["X-TTFB"] + "; LB: " + oSession["X-TTLB"];

1/04/2009

私宅料理

《小路的陽台‧西班牙私家菜》

小路的陽台
0926144013
台北縣永和市環河西路1段85巷8弄1號4樓
小路的陽台怎麼去？真的非常難去
建議就是走環河西路到一段85巷下車(下圖為85巷口, 有個警衛亭)
然後往前走到T字形處，
左轉後兩步就立刻右轉進另一條巷子，
往前走發現摩托車群在你左手邊就對了，
再來就是注意右手邊的門牌號碼，
小路的陽台是個紅色的門，樓上就是了。

私宅打邊爐

其實在台北原本就有幾家私宅餐廳，在饕客圈裡也小有名氣，以我個人吃過的而言，像是臨沂街的郭老師滿舍私廚、敦化南路巷子裡的OA+、永和小路的陽台、新中街的法烹沙龍、龍江路的Bagel Bage等等，而私廚餐廳的最大特色，通常是裝潢氣氛別具特色，或是有其獨家祕方的菜餚，二者特色兼備的其實很難，而二者特色都沒有的，那大概開沒多久就要倒了

正宗沙茶火鍋老店‧麒麟閣

麒麟閣
地址:台北縣永和市永和路二段57號2樓 (頂溪捷運站附近)
Tel：( 02 ) 2924 - 9259‧( 02 ) 2925 - 3423
網址:http://www.kirinhouse.com/
營業時間：上午 11 : 00 - 15 : 00　　下午 17 : 00 - 24 : 00
休假時間：6 月 1 日 - 7 月 30 日

1/02/2009

非凡大探索 » 11/8店家資料-日港客必吃精選

店名：茂園餐廳
地址：台北市長安東路二段185號
電話：(02)2752-8587、(02)2711-4179
營業時間：12:00-14:00、17:00-22:00
老闆：第三代小老闆標先生 0935-591-213
推薦：白斬雞 450元／半隻(每日限量20隻)、花枝丸 30元／顆、鹹冬瓜蒸魚時價、蚵仔仁 200元／小份

店名：欣葉創始店
地址：台北市雙城街34-1號
電話：02-2596-3255
營業時間：
老闆：大廚鄭坤銀
推薦：菜脯蛋 180元、紅蟳米糕 680元、滷肉 240元/三塊、三杯雞 680元、蠶絲大蝦 260元/尾

店名：吉祥樓
地址：苗栗縣三義鄉勝興村二十份283號
電話：037-875-923
營業時間：公休:每月最後一週星期一公休
老闆：老闆范發良
推薦：招牌白玉三寶 400元、芋頭糕 300元、椒鹽豬腳 400元

店名：金都餐廳
地址：南投縣埔里鎮信義路236號　　
電話：049-2995-096
營業時間：11：00~14：30 17：00~21：00
老闆：主廚劉恆宏
推薦：紹興醉香雞 360元、蓮花仙子羹360元、紹興宣紙蔗香扣肉 560元、紹興原鄉米飯480元、埔里米粉炒200元

店名：鼎泰豐
地址：台北市信義路2段194號(永康街口)
電話：02-2321-8928
營業時間：10:00-21:00
老闆：廚房負責人：戴伶軒
推薦：陽春麵:60、蝦仁炒飯:170、小籠包:180、蝦仁炒手:140

店名：阿美飯店
地址：台北市大安區吉林路81號
電話：02-25235115 25215999
營業時間：
老闆：店長：陳志翔大廚：林景瑋
推薦：擔仔麵 NT.35 紅蟳米糕 NT.490

店名：台一生態水上花園餐廳（台一生態教育休閒農場內）
地址：南投縣埔里鎮中山路一段176號　
電話：049-2997-848
營業時間：11：00~14：00 16：30~20：30
老闆：主廚潘志宏
推薦：梅汁蝦280元埔里金瓜米粉160元梅干扣肉240元

店名：呂桑食堂
地址：台北市永康街12-5號
電話：(02)2351-3323
營業時間：11:30-14:00；17:00-21:00
老闆：方國昌
推薦：糕渣 100元肝花 100元棗餅 100元味噌大腸 140元紅糟肉 140元

訂閱：文章 (Atom)

Pragma: no-cache	The client is unwilling to accept any cached responses from caches along the route and the origin server must be contacted for a fresh copy of the resource.
If-Modified-Since: datetime	The server should return the requested resource only if the resource has been modified since the date-time provided by the client.
If-None-Match: etagvalue	The server should return the requested resource if the ETAG of the resource is different than the value provided by the client. An ETAG is a unique identifier representing a particular version of a file.

Search