Wuff, Wuff!!: 11/2008

11/30/2008

document.compatMode and almost standards mode

http://chunghe.googlecode.com/svn/trunk/experiment/almost.standard.mode/
http://chunghe.googlecode.com/svn/trunk/experiment/almost.standard.mode/standard.mode.htm
document.compatMode - MDC


mode = document.compatMode

mode is a string containing "BackCompat" for Quirks mode or "CSS1Compat" for Strict mode.
There is a third mode, Gecko's "Almost_Standards" Mode, which only differs from Strict mode in the layout of images inside table cells. This third mode is reported the same way as Strict mode: "CSS1Compat".

Gecko's "Almost Standards" Mode - MDC - 在 almost standard mode 設定 img{display:block} or img{vertical-align:bottom} 看起來跟 standard mode 一模一樣

"Almost standards" rendering mode is exactly the same as "standards" mode in all details save one: the layout of images inside table cells is handled as they are in Gecko's "quirks" mode, which is fairly consistent with other browsers, such as Internet Explorer. This means that sliced-images-in-tables layouts are less likely to fall apart in Gecko-based browsers based on the rendering engine found in Mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode. (See the DevEdge article "Images, Tables, and Mysterious Gaps" for a detailed explanation of how such layouts are treated in "standards" mode.)

The DOCTYPEs that will trigger "almost standards" mode are those which contain:

* The public identifier "-//W3C//DTD XHTML 1.0 Transitional//EN"
* The public identifier "-//W3C//DTD XHTML 1.0 Frameset//EN"
* The public identifier "-//W3C//DTD HTML 4.01 Transitional//EN", with a system identifier
* The public identifier "-//W3C//DTD HTML 4.01 Frameset//EN", with a system identifier
* The IBM system DOCTYPE "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"

A complete DOCTYPE contains a public identifier and a system identifier.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

The parts are as follows:
* Public Identifier: "-//W3C//DTD HTML 4.01 Transitional//EN"
* System Identifier: "http://www.w3.org/TR/html4/loose.dtd"

Images, Tables, and Mysterious Gaps - MDC

The most crucial part of Figure 3 is the baseline (represented by the blue line), and its placement within the line box. The baseline's exact placement is dependent on the "default" font for the line box (represented by the red box), which is determined by the value of font-family for the element that contains the line box. It isn't possible for an author to change the baseline's position directly, so wherever it ends up is where it will be. The space below the baseline is referred to as "descender space" since that's where the descenders in lowercase letters like "j", "y", and "q" are drawn. Figure 4 shows what happens when we add an image to the mix.

Note where the image sits by default: its bottom edge is aligned with the baseline of the line box. This placement can be changed with vertical-align.
he other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line box. For example, you could try the following:
td img {vertical-align: bottom;}
This will cause the bottom edges of the images to be aligned with the bottom of the line box, instead of the baseline.
here have been many proposals to fix the problem, but one of the most promising approaches is the property line-box-contain, which has been proposed for inclusion in CSS3. Should this property be adopted, then any browser supporting it could emulate traditional "shrinkwrap" behavior without risking other layout upset with the following rule:
td {line-box-contain: font replaced;}  /* proposed for CSS3 */

The Skinny on Doctypes

The Skinny on Doctypes
At Google, we have this obsession with byte size. And by byte size, any “lack-therof” the better. Therefore the doctype you will find on most Google webpages while still triggering the browser into “standards mode” is as simple as you see below:


<!doctype html>

[ref] All you need is <!doctype html> - David’s Web Development Blog
Website overview - Browsershots

11/28/2008

invert color


    var invertColot = function(c) {
      var t1 = '0123456789abcdef#'
      var t2 = 'fedcba9876543210#'
      return c.replace(/./gi, function(s){
        return t2.charAt(t1.indexOf(s));
      })
    };

11/26/2008

Alud Lang Syne

via: Alud Lang Syne 友誼地久天長

11/25/2008

Personas

Personas - from Wiley about face 3

To create a product that must satisfy a diverse audience of users, logic might tell you to make it as broad in its functionality as possible to accommodate the most people. This logic, however, is flawed. The best way to successfully accommodate a variety of users is to design for specific types of individuals with specific needs. When you broadly and arbitrarily extend a product’s functionality to include many constituencies, you increase the cognitive load and navigational overhead for all users. Facilities that may please some users will likely interfere with the satisfaction of others.

A simplified example of how personas are useful. If you try to design an automobile that pleases every possible driver, you end up with a car with every possible feature, but that pleases nobody. Software today is too often designed to please too many users, resulting in low user satisfaction. Figure 5-2 provides an alternative approach.

11/23/2008

Forms in HTML documents

The enctype attribute of the FORM element specifies the content type used to encode the form data set for submission to the server.
application/x-www-form-urlencoded
This is the default content type. Forms submitted with this content type must be encoded as follows:
1. Control names and values are escaped. Space characters are replaced by `+', and then reserved characters are escaped as described in [RFC1738], section 2.2: Non-alphanumeric characters are replaced by `%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character. Line breaks are represented as "CR LF" pairs (i.e., `%0D%0A').
2. The control names/values are listed in the order they appear in the document. The name is separated from the value by `=' and name/value pairs are separated from each other by `&'.

multipart/form-data
The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters. The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data.
A "multipart/form-data" message contains a series of parts, each representing a successful control. The parts are sent to the processing agent in the same order the corresponding controls appear in the document stream. Part boundaries should not occur in any of the data; how this is done lies outside the scope of this specification.

11/19/2008

Code: Flickr Developer Blog » Lessons Learned while Building an iPhone Site

We did this by hijacking all links of the page: when a link is clicked, we intercept the event, fetch the page fragment using Ajax, and insert the HTML into a new div.
Using this system complicates your code a bit. You need JavaScript to handle the hijacking, the page fragment insertion, and the address bar hash changes (which allow the back and forward buttons to work normally). You also need your backend to recognize requests made with Ajax, and to only send the page content instead of the full HTML document. And lastly, if you want normal URLs to work, and each of your pages to be bookmarkable, you will need even more JavaScript.

3. Don’t Build for Just One Device
Most of the differences lie in layout. It’s important to structure your pages around a grid that can expand as a percentage of the page width. This allows your layouts to work on many different screen sizes and orientations. The iPhone, for example, allows both landscape and portrait viewing styles, which have vastly different layout requirements. By using percentages, you can have the content fill the screen regardless of orientation. Another option is to detect viewport width and height, and use JavaScript to dynamically adjust classes based on those measurements (but we found this was overkill; CSS can handle most situations on its own).

5. Tell the User What is Happening
To combat this problem, we added loading indicators to every link. These tell the user that something is happening, and reassures them that their action was detected. It also makes the pages seem to load much faster, since something is happening right away; In our testing, these indicators were the difference between a UI that seems snappy and responsive, and one that seemed slow and inconsistent.

One Easy Option

The iUI framework implements a lot of these practices for you, and might be a good place to start in developing any mobile site (though keep in mind it was developed specifically for the iPhone). We found it especially useful in the early stages of development, though eventually we pulled it out and wrote custom code to run the site.

ydn-javascript : Message: Re: [ydn-javascript] grids not valid css when validating css against w3.org

First, YUI Fonts sets *font-size:small; and *font:x-small; after initially setting a pixel font size. They are both instances of what I described above for IE, however "*font:x-small;" is also flagged for a different reason. The "font:" syntax is shorthand for all of the various font- properties (family, weight, line-height, etc). It is an error to use shorthand without specifying all the values. When IE is in Quirks Mode is don't fail on this error, and instead applies the value. So, by taking advantage of this mode-specific behavior in IE I can efficiently pass one value to Quirks Mode and another value to Standards Mode. I need to do this because the default font size is different in the two modes. (YUI recommends you use Standards Mode, but we strive for the library to work well in both modes.)
A Philosophical Note
A final note: Some CSS developers advocate that non-standard or non-valid CSS used to accommodate a specific browser's peculiarities should be quarantined within a discrete .css file that is provided to that specific browser only. (For IE, it's often delivered via "conditional comments.") Another argument suggests that filters and hacks should always be isolated to facilitate long-term maintenance. I do not generally contest those points of view, however, I feel that when developing library/framework code (as opposed to authoring site-specific code), the decision has different criteria. I think keeping keeping all the CSS for all the browsers in a single file makes the library easier to use, and helps it perform optimally (because it reduces HTTP requests). And I think the maintenance issue is less critical for library code since the library has dedicated custodians tending to it permanently.

11/18/2008

YouTube - 【汚部屋☆４７】Honeyを踊ってみた。

Ajaxian » Testing Ext Applications With Selenium

Ajaxian » Testing Ext Applications With Selenium - 除了 Selenium ide 以外還有 selenium rc 可以把 browser 叫起來執行預錄下來的 script.

Selenium IDE provides a great way to create your tests and execute them in Firefox. Tests can only be run by manually opening Firefox and executing tests. What if you want to run you want to automate your tests and run them in other browsers? This is where Selenium Remote Control comes into play.

From the Selenium website: “Selenium Remote Control (RC) is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. Selenium RC comes in two parts. 1. A server which automatically launches and kills browsers, and acts as a HTTP proxy for web requests from them. 2. Client libraries for your favorite computer language.

Ajaxian » How Do You Prototype Your Apps?

Ajaxian » How Do You Prototype Your Apps?
Interface Driven Requirements Docs | commadot.com - 這篇的 powerpoint 用法真是神乎其技
其他在這篇提到的 prototyping tool還有
http://irise.com
http://axure.com - very popular
Wireframe Wonder To Speed Up Web Development - Social media, web development and digital life - JungleG

Popular JavaScript Framework Libraries: An Overview - Part 2 / Page 2

YAHOO.lang.extend provides a simple mechanism for setting up the prototype, constructor and superclass properties for objects that are extending other objects. It also prevents the constructor of the extended object (i.e., the superclass) from being executed twice. Let's take a look at an example. The following code assigns a namespace for our classes, creates a Person superclass and a child Investor class that inherits from it. You can see that code conciseness is being traded for clarity. Depending on your personal views, you may prefer a $ sign over YAHOO.test:


YAHOO.namespace("test");

YAHOO.test.Person = function(name) {
    alert("Hi, I'm " + name);
};

YAHOO.test.Person.prototype.speak = function(words) {
    alert(words);
};

YAHOO.test.Investor = function(name) {
    // chain the constructors
    YAHOO.test.Investor.superclass.constructor.call(this, name);
    alert("Hi, my name is " + name + " and I'm an investor.");
};

// Investor extends Person.  Must be done immediately after the Investor constructor
YAHOO.lang.extend(YAHOO.test.Investor, YAHOO.test.Person);

YAHOO.test.Investor.prototype.speak = function(words) {
    // chain the method
    YAHOO.test.Investor.superclass.speak.call(this, words);
    alert("It has not been a good year for investors!");
};

var investor = new YAHOO.test.Investor("Bill");
investor.speak("I don't feel so good.");

11/17/2008

Getting your ASCII on with Flickr - Nihilogic

The Flickr search part is pretty straight forward. A single request is sent, calling the "flickr.photos.search" method. We then get a list of photos from Flickr, but we can't access the data in these directly due to the same-origin policy of the Canvas element. To get around this, we're using a small proxy script (written in PHP) that does nothing other than retrieve the image file and pass it straight through to the browser.

The image is then painted (and downscaled since we're not using all pixels) on a hidden Canvas element, the image data is retrieved using getImageData() and each pixel in the image is analyzed. The brightness of the pixel is calculated using a simple RGB to brightness formula and this level of brightness is then mapped to a list of characters selected for their varying apparent brightness. The list used here is [ .,:;i1tfLCG08@] for black/white output and [ CGO08@] for colored output.

jsAscii - ASCII art from images with Javascript and Canvas - Nihilogic
tag: ascii, asciified

Code: Flickr Developer Blog » On UI Quality (The Little Things): Client-side Image Resizing

Tweaking image resampling in IE

IE 7 supports high-quality bicubic image resampling, producing results akin to what you’d see in most image editing programs. It’s disabled by default, but you can enable it using -ms-interpolation-mode:bicubic;. It’s probably safest to apply this only to images you are explicitly showing at non-native sizes.

IE 6 is a riskier proposition, but can show improved image resizing when the AlphaImageLoader CSS filter is applied, the same filter commonly used for properly displaying PNGs with alpha transparency. For example, filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');. While there is no transparency to apply here, the resizing method applied gives a higher-quality result.

Clickjacking

Dealing with UI redress vulnerabilities inherent to the current web
[whatwg] Dealing with UI redress vulnerabilities inherent to the current web
hackademix.net » Clickjacking and NoScript

11/16/2008

物件導向Javascript - 封裝

可以把Javascript看成用 execution context 為單位組成的結構，javascript在執行的時候，會在不同的 execution context 間切換。 execution context 有三種： Global , Function 以及 Eval 。Javascript變數解析的規則叫做 scope chain ，每次進入不同的 execution context ，執行環境就會為它建立一個 scope chain ，結構類似一個堆疊，目前正在執行的 execution context 放在堆疊的最上面，然後依次是其他的 execution context 。舉例來說，當函數a裡面定義了另一個函數b，那在執行函數b裡面的程式時， scope chain 會像是：b->a->Global，Javascript會依照這個順序尋找變數、函數等的定義。（還是有點像天書）>


function test() {
 global1 = 1;
 var private1 = 2;
}
function check() {
 alert(global1);
}
test();
check();

用 scope chain 規則來解釋：當執行test()時，碰到了global1這個東西，在test函數裡面並沒有定義，所以執行環境到 Global 找，也沒找到，然後執行環境就在 Global 定義了一個變數，名稱叫做global1，然後把1這個值assign給他。之後執行check()，碰到 global1這個東西，在check函數裡面也沒定義，所以執行環境跑到 scope chain 中的下一個 execution context ，也就是 Global 中找，然後找到了。所以alert()就會秀出1。

javascript datatype

javascript的data type可以分為(1) primitive type (2) reference type (objects)
primitive: fixed size in memory, ex: numbers, boolean values, null, undefined
reference(objects): can be of any length, ex: array, objects, functions.


var a = 3.14;  // Declare and initialize a variable
var b = a;     // Copy the variable's value to a new variable
a = 4;         // Modify the value of the original variable
alert(b)       // Displays 3.14; the copy has not changed


var a = [1,2,3];  // Initialize a variable to refer to an array
var b = a;        // Copy that reference into a new variable
a[0] = 99;        // Modify the array using the original reference
alert(b);         // Display the changed array [99,2,3] using the new reference

11/15/2008

uesrful imagemagick command

// convert images to png8
convert foo.png png8:foo.png


  # Use a simple shell loop, to process each of the images.
  mkdir thumbnails
  for $f in *.jpg
  do   convert $f -thumbnail 200x90 thumbnails/$f.gif
  done

  # Use find to substitute filenames into a 'convert' command
  # This also provides the ability to recurse though directories by removing
  # the -prune option, as well as doing other file checks (like image type,
  # or the disk space used by an image).
  find * -prune -name '*.jpg' \
         -exec  convert '{}' -thumbnail 200x90 thumbnails/'{}'.gif \;

  # Use xargs -- with a shell wrapper to put the argument into a variable
  # This can be combined with either "find" or "ls" to list filenames.
  ls *.jpg | xargs -n1 sh -c 'convert $0 -thumbnail 200x90 thumbnails/$0.gif'

  # An alternative method on linux (rather than plain unix)
  # This does not need a shell to handle the argument.
  ls *.jpg | xargs  -I FILE   convert FILE -thumbnail 200x90 th_FILE.gif

ImageMagick: One-Second Gradient Images
generate a image named temp.png with gradient from #000 to #fff
convert -size 300x200 gradient:'#000'-'#fff' temp.png
在window下必須改寫為雙引號
convert -size 300x200 gradient:"#000"-"#fff" temp.png
Canvas Creation -- IM v6 Examples
For example you can use a Sigmoidal Contrast function to create a more natural looking gradient.
convert -size 100x100 gradient: -sigmoidal-contrast 6,50% gradient_sigmoidal.jpg
Fundamentals of Image Processing
draw a 100x100 transparent canvas, then draw a red line from 10,10 to 90,90
convert -size 100x100 xc:none -fill red -draw "line 10,10 90,90" output.png
the fill color draws the line, not the stroke color. Note that setting the stroke width doesn't affect the images; however, the linewidth setting will change the width of the line
The arguments to the circle shape are slightly different from the rectangle shape. The first
argument is the center of the circle, and the second argument is how far the circle extends.
create a transparent canvas and a circle
-draw 'circle 50,50 50,80' 圓心在50,50 半徑從50到80
convert -size 200x200 xc:none -fill gray20 -draw "circle 100,100 30,30" output.png
create a transparent canvas and a rect with blue background and 20px red border
convert -size 100x100 xc:none -fill blue -stroke red -strokewidth 20 -draw "rectagnel 10,10 90,90" rect.png

Image Optimization, Part 3: Four Steps to File Size Reduction » Yahoo! User Interface Blog

Image Optimization, Part 3: Four Steps to File Size Reduction » Yahoo! User Interface Blog
< pngcrush -rem alla -brute -reduce src.png dest.png
* src.png is the source image, dest.png is the destination (result) image
* -rem alla means remove all chunks but keeps the one for transparency
* -reduce tries to reduce the number of colors in the palette if this is possible
* -brute tries over a hundred different methods for optimization in addition to the default 10. It’s slower and most of the times doesn’t improve much. But if you’re doing this process “offline”, one or two more seconds are not important since there’s a chance if a filesize win. Remove this option in performance-sensitive scenarios.
Here's a command to copy the source image, optimize it and don’t carry over any metadata in the new copy:
< jpegtran -copy none -optimize src.jpg dest.jpg
You may be able to further improve image size by using jpegtran's -progressive option. It produces JPEGs that load progressively in the browser, starting from a lower quality version of the image and improving as new image information arrives. You can see this behavior if you look at photos on Picassa, but you have to switch photos fast, because otherwise while you’re looking at one, the next one is being preloaded.
Important note on stripping meta information: do it only for images that you own, because when jpegtan strips all the meta, it also strips any copyright information contained in the image file.
In order to automatically change your GIFs, you can use ImageMagick’s convert:
< convert image.gif image.png
If you want to force PNG8 format you can use:
< convert image.gif PNG8:image.png
tools:
1. ImageMagick to identify the image type and to convert GIFs to PNG.
2. pngcrush to strip unneeded chunks from PNGs. We're currently experimenting with other PNG tools such as pngout, optipng, pngrewrite that will allow for even better png optimization.
3. jpegtran to strip all meta data from JPEGs (currently disabled) and try progressive JPEGs.
4. gifsicle to optimize GIF animations by striping repeating pixels in different frames.

11/14/2008

call() and apply()

obj.method.call(another_obj, param1, param2)
obj.method.apply(another_obj, [param1, param2])

function f() {
   var args = [].slice.call(arguments, 1, 3);
   return args;
}

>>> f(1, 2, 3, 4, 5, 6)
2,3

[].slice.call can also be Array.prototype.slice.call


function one() {
    alert(1);
    return function() {
        alert(2);
    }
}
>>> my = one(); // alerts 1
>>> my(); // alerts 2

Adding properties to the function objects, e.g. cache, 'coz functions are objects


function myFunc(param){
    if (!myFunc.cache) {
        myFunc.cache = {};
    }
    if (!myFunc.cache[param]) {
        var result = {}; // …
        myFunc.cache[param] = result;
    }
    return myFunc.cache[param];
}

a is private, sayAh() is privileged


function MyConstr() {
    var a = 1;
    this.sayAh = function() {
        return a;
    };
}

>>> new MyConstr().sayAh();

Protoscript - Popup Behavior Demo

Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it's easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.


$proto('img#avatar', {
  Click: {
    onClick: {
      Fade: {
        opacity: {to: 0},
        onComplete: {Close : {} }
      }
    }
  }
});

11/13/2008

Archive - Bill Scott's Portfolio

Bill Scott's Portfolio - 是一座寶山
Changing Jobs - New Challenges
http://looksgoodworkswell.blogspot.com/2006/03/all-i-really-need-to-know-i-learned.html
Upcoming O'Reilly Book - Designing Web Interfaces: Principles and Patterns for Rich Interactions
Anti-Pattern: Animation Gone Wild - Borders.com
Designing Web Interaces Talk (Ajax World)
Pattern: Teaser Pattern - Carousel
Velocity Conference: Improving Netflix Performance Presentation
Anti-Patterns: Talk
Yahoo! Teachers and the Yahoo! Gobbler
Designing for AJAX

11/11/2008

Plank - Lang's little gems

 YAHOO.lang.substitute('Hello {world}', {'world':'earth'});


var foo = {
  count :0,
  'method' : function(data) {
    this.count++;
    if(this.count == 10) {
      timer.cancel();
    }
    console.log(this.count);
  }
}  
var timer = YAHOO.lang.later(1000, foo, 'method', [{data:'bar', data2:'zeta'}], true);


var myAwesomelWidget = function(oConfigs) {
  oConfigs = oConfigs || {};
  var defaults = {
    'awesomeness' : '11',
    'shiny'       : 'high',
    'sparkle'     : 'high'
  }
  var combinedConfigs = YAHOO.lang.merge(defaults, oConfigs);
  //Shiny is now set to low, everything else in combinedConfigs is set to the defaults
};
myAwesomelWidget({'shiny': 'low'});`

Ajaxian » Reminded of speaking your YAHOO.lang

Gotcha (programming) - Wikipedia, the free encyclopedia

In programming, a gotcha is a feature of a system, a program or a programming language that works in the way it is documented but is counter-intuitive and almost invites mistakes because it is both enticingly easy to invoke and completely unexpected and/or unreasonable in its outcome.

Yahoo! Front End Developer's Summit 2008 - Tal

Yahoo! Front End Developer's Summit 2008 - Talk

Back To The Future

View SlideShare presentation or Upload your own. (tags: f2esummit2008 f2esummit)

Resize or Scaling -- IM v6 Examples

Image Optimization Part 2: Selecting the Right File Format » Yahoo! User Interface Blog

A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution

Whereas PNG supports alpha transparency, GIF only supports binary transparency

Image Optimization Part 2: Selecting the Right File Format » Yahoo! User Interface Blog - 這篇講得很詳細。

GIF
* GIF is a palette (also called “indexed”) type of image. It contains a palette of indexed colors, up to 256, and for every pixel of the image there is a corresponding color index.
* GIF is a non-lossy format, which means that when you modify the image and save it, you don’t lose quality.
* GIF also supports transparency, which is a sort of boolean type of transparency. A pixel in a GIF image is either fully transparent or it's fully opaque.

JPEG
* JPEG doesn’t have the 256 colors restriction associated with GIFs; it can contain millions of colors and it has great compression.
* It's a lossy format, meaning you lose quality with every edit, so it’s best to store the intermediate results in a different format if you plan to have many edits.
* There are, however, some operations that can be performed losslessly, such as cropping a part of the image, rotating it or modifying meta information, such as comments stored in the image file.
* JPEG doesn't support transparency.

PNG
* PNGs is a non-lossy format that comes in several kinds, but for practical purposes, we can think of PNGs as being of two kinds: 1. PNG8, and 2. truecolor PNGs.
* PNG8 is a palette image format, just like GIF, and 8 stands for 8 bits, or 28, or 256, the number of palette entries. The terms "PNG8", "palette PNG" and "indexed PNG" are used interchangeably.
* How does PNG8 compare to GIF? Pros: (1) it usually yields a smaller file size. (2) it supports alpha (variable) transparency. Cons: (1) no animation support
* The second type of PNGs, truecolor PNGs, can have millions of colors, like JPEG. You can also sometimes come across the names PNG24 or PNG32.
* And how does truecolor PNG compare to JPEG? On the pros side, it's non-lossy and supports alpha transparency, but on the cons side, the file size is bigger.
* This makes truecolor PNG an ideal format as an intermediate between several edits of a JPEG and also in cases where every pixel matters and the file size doesn't matter much, such as taking screeenshots for a help manual or some printed material.

Internet Explorer and PNG transparency
* With PNG8, whenever you have semi-transparent pixels they appear as fully transparent in IE (version 6 and lower). This is not ideal but it’s still useful and is the same behavior that you get from a GIF.
* Below is an example that illustrates this, note how in IE6 the semi-transparent light around the bulb is missing

* For truecolor PNGs, the situation is a much less attractive compromise. All the semi transparent pixels appear grey in IE prior to version 7
* IE7 introduces proper native support for alpha transparency in both PNG8 and truecolor PNGs. For earlier IE versions you need to fix the truecolor PNG transparency issue using CSS and an AlphaImageLoader filter
* Although PNG8 should be the preferred of the PNGs, because it’s smaller in filesize and degrades well in early IEs without special CSS filters, there are still some use cases for truecolor PNGs:
(1) When the 256 colors of the PNG8 are not enough, you may need a truecolor PNG: in the other hand, if the colors are around a thousand or so, you may try to convert this image to a PNG8 and see if it looks acceptable. Very often, the human eye is not sensitive enough to tell the difference between 200 and 1000 colors. That depends on the image, of course; often you can safely remove 1000 colors, but sometimes removing even 2 colors results in an unacceptable image.
(2) When most of the image is semi-transparent: If only a small part of the image is semi-transparent, like around rounded corners, the GIF-like degradation of PNG8 is often OK. But if most of the image is translucent (think a PLAY button over a video thumbnail), you might not have a choice but to use the AlphaImageLoader hack.

Conclusion
* JPEG is the format for photos.
* GIF is the format for animations.
* PNG8 is the format for everything else — icons, buttons, backgrounds, graphs…you name it.

11/10/2008

YUI: Weighing in on Pageweights » Yahoo! User Interface Blog

YUI: Weighing in on Pageweights » Yahoo! User Interface Blog A la Carte Pageweight of Individual YUI JavaScript Components, Including All Dependencies

Loading YUI: Seeds, Core, and Combo-handling » Yahoo! User Interface Blog

Loading YUI: Seeds, Core, and Combo-handling » Yahoo! User Interface Blog
Loading TabView with YUI Loader

K-weight for common YUI components.
2. Using YUI Loader Plus Core as a Seed File
1. Using YUI Loader as a Seed File
* You have access to Event Utility’s event listener methods and its crucial page-timing methods (like onDOMReady and onContentReady) right away;
* You have access to the Dom Collection’s swiss-army knife of DOM convenience methods right away.


<script type="text/javascript" 
src="http://yui.yahooapis.com/combo?2.6.0/build/yuiloader-dom-event/yuiloader-dom-event.js"></script> 
<script>
(function() {
 //create Loader instance:
    var loader = new YAHOO.util.YUILoader({
        require: ["tabview"],
        onSuccess: function() {
         //when TabView is loaded, instantiate Tabs:
         var tabView = new YAHOO.widget.TabView('demo');
        },
        combine: true
    });
    
    //When our target element is ready, bring
    //in the non-blocking, combo-handled script
    //download.  We can use Event here because
    //we've loaded YUI Core at the top of the page:
    YAHOO.util.Event.onContentReady("demo", function() {
     loader.insert();
    });

})();

3. Combining All Requests in a Single FileBest practice according to Yahoo’s

Exceptional Performance guidelines would be to put this single file as close to the bottom of the page as possible, allowing the content and design to be processed before the browser hits your JS files. (Note: this is one reason why you might find approaches 1 and 2 useful — putting the 17.4KB YUI Loader + YUI Core file at the top of your file has minimal performance impact, and it allows you to load other JavaScript-dependent modules onDOMReady where appropriate.)

YAHOO.env.modules & YAHOO.env.ua

YAHOO.env.modules裡面紀錄著該頁所用的所有yui componets and version number.
YAHOO.env.ua裡面紀錄著user agent and version number.
每一個 yui components 通過 YAHOO.register把自己的information紀錄在YAHOO.evn.modules這個object裡面。ex: YAHOO.register("editor", YAHOO.widget.Editor, {version: "2.6.0", build: "1321"});

11/09/2008

disk benchmark

FDBench--磁碟機傳輸速度測試軟體
 Crystal Dew World - Software - CrystalDiskMark
系統監測 ATTO Disk Benchmark 2.41 繁體中文化版 - 軟體資訊 - ::: NOVA專業論壇 ::: - Powered by Discuz!
HD Tune

11/07/2008

Master the Linux bash command line with these 10 shortcuts

4. Use key shortcuts to efficiently edit the command line
bash supports a number of keyboard shortcuts for command-line navigation and editing. The Ctrl-A key shortcut moves the cursor to the beginning of the command line, while the Ctrl-E shortcut moves the cursor to the end of the command line. The Ctrl-W shortcut deletes the word immediately before the cursor, while the Ctrl-K shortcut deletes everything immediately after the cursor. You can undo a deletion with Ctrl-Y.

7. Quickly jump to frequently-used directories
You probably already know that the $PATH variable lists bash's "search path" - the directories it will search when it can't find the requested file in the current directory. However, bash also supports the $CDPATH variable, which lists the directories the cd command will look in when attempting to change directories. To use this feature, assign a directory list to the $CDPATH variable, as shown in the example below:
bash> CDPATH='.:~:/usr/local/apache/htdocs:/disk1/backups'
bash> export CDPATH

Now, whenever you use the cd command, bash will check all the directories in the $CDPATH list for matches to the directory name.

Alphanum: Javascript Natural Sorting Algorithm

這篇提到的問題跟我之前遇到的一模一樣，只要把str modified過之後，存回變數本身，IE就變得怪怪的，我遇到的狀況是會死在sorting function裡面，不過也不是每一次都會發生，ex: a = 'foo.png'; a = a.slice(0, a.indexOf('.'));，解決的辦法就是用另外一個變數來接。
Alphanum: Javascript Natural Sorting Algorithm - The Roost - by Brian Huisman

  a = chunkify(a);
  b = chunkify(b);

Note the variable names, where the assignment tries to place the result back into the original variable. Actually, all that's required for the bug to manifest is to assign any array to the incoming a and b variables. For some strange reason this would fail in IE6 and IE7 while sorting arrays with larger than 23 or 24 elements. In these cases, at seemingly random times during the sort, "undefined" would be passed back to a, causing the next reference to it to trigger an exception.

11/06/2008

SproutCore

SproutCore » demos
SproutCore - Wikipedia, the free encyclopedia

SproutCore is an open source JavaScript framework. Its goal is to allow developers to create web applications with advanced capabilities and the feel of desktop applications. It uses Ruby to generate static HTML and JavaScript files. SproutCore, initially created in 2007 by Sproutit as the basis for their Mailroom application, is available under the MIT License.

Apple announced MobileMe at WWDC in 2008, noting that much of it was built using SproutCore. Apple has contributed greatly to the project as part of a Web 2.0 initiative.

11/02/2008

PCDVD數位科技討論區 - 轉貼國外近期100顆CPU大測試!! (不錯的參考~)

訂閱：文章 (Atom)

Search