mozilla firefox browser default style

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

Beginning Object-Oriented JavaScript - SlideShare

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

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 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

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

24 ways: Shiny Happy Buttons

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)

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;