小薑雜談 / 資訊月 98：Intel CPU 何其多！

小薑雜談 / 資訊月 98：Intel CPU 何其多！

# i7-720QM，透過自家Turbo Boost技術，時脈可以提升到2.8GHz，且該顆CPU為4核心，但全速功耗較高，為45W。（Funnypig比較想等Core i5）
# CPU前面的英文代表功耗，P與SP開頭為25W功耗，T開頭為35W或以上，SU開頭與Atom則可到10W以下（端看單核雙核）。
# P與SP功耗一樣，P系列為3MB L2快取，但SP則提昇為6MB，功耗同為25W。
# T3XXX以下就是Intel Celeron，L2快取1MB，且不支援虛擬化
T4XXX為L2快取1MB的Core 2，且不支援虛擬化
T6XXX為L2快取2MB的Core 2，且不支援虛擬化
T9XXX為L2快取6MB的Core 2，並且支援虛擬化
TDP功耗皆為35W
# SU2XXX開頭的是超低電壓版的Celeron，並且支援64bit與虛擬化
SU3XXX則是單核3MB L2快取超低電壓版Core 2 Solo，並且支援虛擬化
SU4XXX則是雙核2MB L2快取超低電壓版Core 2，並且支援虛擬化
SU7XXX為雙核3MB L2快取超低電壓版Core 2，並且支援64bit與虛擬化 。
SU9XXX為雙核3MB L2快取超低電壓版Core 2，且支援64bit與虛擬化 。
# 就目前的情況來看，Intel的P系列（如P8400）CPU是筆電選購時最超值選擇，等級也比T系列高（以筆電角度來看），當然，預算允許的話，SP系列（如SP9600)會更好。

2. Atom 330 其性能介於 Celeron 723 與 2300 之間，而 Celeron 723 (這款並沒有採用HT技術)性能略強於 Atom 230 (部分網站說明約為1.5倍左右，與 230 性能相近的 N270 處理器進行比較)。

AJAX APIs Playground

AJAX APIs Playground
closure simple:

/*
* When a function is defined in another function and it
*    has access to the outer function's context even after
*    the outer function returns
* An important concept to learn in Javascript
*/

function outerFunction(someNum) {
  var someString = 'Hai!';
  var content = document.getElementById('content');
  function innerFunction() {
    content.innerHTML = someNum + ': ' + someString;
    content = null; // IE memory leak for DOM reference
  }
  innerFunction();
}

outerFunction(1);

closure for events:

/*
 * One great use is for event handlers
 * If a handler prints a value, it prints the value at trigger time
 * If you want to hardcode a value into handler, use closure
*/

var content = document.getElementById('content');

// BAD SETTING HANDLER
for (var i=0; i < 5; i++) {
  var button = document.createElement('input');
  button.type = 'button';
  button.value = 'Closure-less Button number ' + i;
  button.onclick = function() {
    alert("Closure-less Button number " + i);
  };
  content.appendChild(button);
}
content.appendChild(document.createElement('br'));


// GOOD SETTING HANDLER
function buttonClick(buttonNumber) {
  // buttonNumber is now snapshotted in this function that is returned!
  return function() {
    alert('Closure Button number ' + buttonNumber);
  };
}
for (var i=0; i < 5; i++) {
  var button = document.createElement('input');
  button.type = 'button';
  button.value = 'Closure Button number ' + i;
  button.onclick = buttonClick(i);
  content.appendChild(button);
}

Javascript Memory Leaks

JScript Memory Leaks

When a DOM object contains a reference to a JavaScript object (such an event handling function), and when that JavaScript object contains a reference to that DOM object, then a cyclic structure is formed. This is not in itself a problem. At such time as there are no other references to the DOM object and the event handler, then the garbage collector (an automatic memory resource manager) will reclaim them both, allowing their space to be reallocated. The JavaScript garbage collector understands about cycles and is not confused by them. Unfortunately, IE's DOM is not managed by JScript. It has its own memory manager that does not understand about cycles and so gets very confused. As a result, when cycles occur, memory reclamation does not occur. The memory that is not reclaimed is said to have leaked. Over time, this can result in memory starvation. In a memory space full of used cells, the browser starves to death.

IBM developerWorks - Memory leak patterns in JavaScript

Internet Explorer and Mozilla Firefox are two browsers that use reference counting to handle memory for DOM objects. In a reference counting system, each object referenced maintains a count of how many objects are referencing it. If the count becomes zero, the object is destroyed and the memory is returned to the heap. Although this solution is generally very efficient, it has a blind spot when it comes to circular (or cyclic) references.

What's wrong with circular references?
A circular reference is formed when two objects reference each other, giving each object a reference count of 1. In a purely garbage collected system, a circular reference is not a problem: If neither of the objects involved is referenced by any other object, then both are garbage collected. In a reference counting system, however, neither of the objects can be destroyed, because the reference count never reaches zero. In a hybrid system, where both garbage collection and reference counting are being used, leaks occur because the system fails to identify a circular reference. In this case, neither the DOM object nor the JavaScript object is destroyed. Listing 1 shows a circular reference between a JavaScript object and a DOM object.

<html>
<body>
<script type="text/javascript">
document.write("Circular references between JavaScript and DOM!");
var obj;
window.onload = function(){
 obj=document.getElementById("DivElement");
 document.getElementById("DivElement").expandoProperty=obj;
 obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
};
</script>
<div id="DivElement">Div Element</div>
</body>
</html>

As you can see in the above listing, the JavaScript object obj has a reference to the DOM object represented by DivElement. The DOM object, in turn, has a reference to the JavaScript object through the expandoProperty. A circular reference exists between the JavaScript object and the DOM object. Because DOM objects are managed through reference counting, neither object will ever be destroyed.

Learning about closures

<html>
<body>
<script type="text/javascript">
document.write("Closure Demo!!");
window.onload=
function  closureDemoParentFunction(paramA)
{
 var a = paramA;
 return function closureDemoInnerFunction (paramB)
 {
  alert( a +" "+ paramB);
 };
};
var x = closureDemoParentFunction("outer x");
x("inner x");
</script>
</body>
</html>

In the above listing closureDemoInnerFunction is the inner function defined within the parent function closureDemoParentFunction. When a call is made to closureDemoParentFunction with a parameter of outer x, the outer function variable a is assigned the value outer x. The function returns with a pointer to the inner function closureDemoInnerFunction, which is contained in the variable x.

It is important to note that the local variable a of the outer function closureDemoParentFunction will exist even after the outer function has returned. This is different from programming languages such as C/C++, where local variables no longer exist once a function has returned. In JavaScript, the moment closureDemoParentFunction is called, a scope object with property a is created. This property contains the value of paramA, also known as "outer x". Similarly, when the closureDemoParentFunction returns, it will return the inner function closureDemoInnerFunction, which is contained in the variable x.

Because the inner function holds a reference to the outer function's variables, the scope object with property a will not be garbage collected. When a call is made on x with a parameter value of inner x -- that is, x("inner x") -- an alert showing "outer x innerx" will pop up.

Closures and circular references
In Listing 5 you see a closure in which a JavaScript object (obj) contains a reference to a DOM object (referenced by the id "element"). The DOM element, in turn, has a reference to the JavaScript obj(innerFunction). The resulting circular reference between the JavaScript object and the DOM object causes a memory leak.

<html>
<body>
<script type="text/javascript">
document.write("Program to illustrate memory leak via closure");
window.onload=function outerFunction(){
 var obj = document.getElementById("element");
 obj.onclick=function innerFunction(){
  alert("Hi! I will leak");
 };
 obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
 // This is used to make the leak significant
};
</script>
<button id="element">Click Me</button>
</body>
</html>

Avoiding memory leaks
Listing 6. Break the circular reference

<html>
<body>
<script type="text/javascript">
document.write("Avoiding memory leak via closure by breaking the circular
  reference");
window.onload=function outerFunction(){
 var obj = document.getElementById("element");
 obj.onclick=function innerFunction()
 {
  alert("Hi! I have avoided the leak");
  // Some logic here
 };
 obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
 obj = null; //This breaks the circular reference
};
</script>
<button id="element">"Click Here"</button>
</body>
</html>

Listing 7. Add another closure

<html>
<body>
<script type="text/javascript">
document.write("Avoiding a memory leak by adding another closure");
window.onload=function outerFunction(){
 var anotherObj = function innerFunction()
 {
  // Some logic here
  alert("Hi! I have avoided the leak");
 };
 (function anotherInnerFunction(){
  var obj =  document.getElementById("element");
  obj.onclick=anotherObj })();
};
</script>
<button id="element">"Click Here"</button>
</body>
</html>

Listing 8. Avoid the closure altogether

<html>
<head>
<script type="text/javascript">
document.write("Avoid leaks by avoiding closures!");
window.onload=function()
{
 var obj = document.getElementById("element");
 obj.onclick = doesNotLeak;
}
function doesNotLeak()
{
 //Your Logic here
 alert("Hi! I have avoided the leak");
}

</script>
</head>
<body>
<button id="element">"Click Here"</button>
</body>
</html>

Mozilla developer center - A re-introduction to JavaScript ( Simon Willison )

Browser hosts need to manage a large number of objects representing the HTML page being presented - the objects of the DOM. It is up to the browser to manage the allocation and recovery of these.

Internet Explorer uses its own garbage collection scheme for this, separate from the mechanism used by JavaScript. It is the interaction between the two that can cause memory leaks.

A memory leak in IE occurs any time a circular reference is formed between a JavaScript object and a native object. Consider the following:

function leakMemory() {
    var el = document.getElementById('el');
    var o = { 'el': el };
    el.o = o;
}

The circular reference formed above creates a memory leak; IE will not free the memory used by el and o until the browser is completely restarted.
Closures make it easy to create a memory leak without meaning to. Consider this:

function addHandler() {
    var el = document.getElementById('el');
    el.onclick = function() {
        this.style.backgroundColor = 'red';
    }
}

The above code sets up the element to turn red when it is clicked. It also creates a memory leak. Why? Because the reference to el is inadvertently caught in the closure created for the anonymous inner function. This creates a circular reference between a JavaScript object (the function) and a native object (el).

There are a number of workarounds for this problem. The simplest is this:

function addHandler() {
    var el = document.getElementById('el');
    el.onclick = function() {
        this.style.backgroundColor = 'red';
    }
    delete el;
}

Surprisingly, one trick for breaking circular references introduced by a closure is to add another closure:

function addHandler() {
    var clickHandler = function() {
        this.style.backgroundColor = 'red';
    }
    (function() {
        var el = document.getElementById('el');
        el.onclick = clickHandler;
    })();
}

The inner function is executed straight away, and hides its contents from the closure created with clickHandler.

Fixing Leaks - Drip IE Leak Detector

function loadMyPage() {
   var elem = document.getElementById('myelement');
   elem.onclick = function () {
      window.alert('hi!');
   };
}

To solve this, you could add:

elem = null;

Or, you could refactor the code somewhat:

function onMyElemClick() {
   window.alert('hi!');
}
function loadMyPage() {
   var elem = document.getElementById('myelement');
   elem.onclick = onMyElemClick;
}

Understanding and Solving Internet Explorer Leak Patterns

Leak Patterns
1. Circular References—When mutual references are counted between Internet Explorer's COM infrastructure and any scripting engine, objects can leak memory. This is the broadest pattern.
2. Closures—Closures are a specific form of circular reference that pose the largest pattern to existing Web application architectures. Closures are easy to spot because they rely on a specific language keyword and can be searched for generically.
3. Cross-Page Leaks—Cross-page leaks are often very small leaks of internal book-keeping objects as you move from site to site. We'll examine the DOM Insertion Order issue, along with a workaround that shows how small changes to your code can prevent the creation of these book-keeping objects.
4. Pseudo-Leaks—These aren't really leaks, but can be extremely annoying if you don't understand where your memory is going. We'll examine the script element rewriting and how it appears to leak quite a bit of memory, when it is really performing as required.

Circular References
Circular references are the root of nearly every leak. Normally, script engines handle circular references through their garbage collectors, but certain unknowns can prevent their heuristics from working properly. The unknown in the case of IE would be the status of any DOM elements that a portion of script has access to. The basic principle would be as follows:

CodeProject: Memory Leakage in Internet Explorer - revisited. Free source code and programming help
Fabulous Adventures In Coding : How Do The Script Garbage Collectors Work?

Interestingly enough though, JScript and VBScript have completely different garbage collectors. Occasionally people ask me how the garbage collectors work and what the differences are.

JScript uses a nongenerational mark-and-sweep garbage collector. It works like this:

* Every variable which is "in scope" is called a "scavenger". A scavenger may refer to a number, an object, a string, whatever. We maintain a list of scavengers -- variables are moved on to the scav list when they come into scope and off the scav list when they go out of scope.
* Every now and then the garbage collector runs. First it puts a "mark" on every object, variable, string, etc – all the memory tracked by the GC. (JScript uses the VARIANT data structure internally and there are plenty of extra unused bits in that structure, so we just set one of them.)
* Second, it clears the mark on the scavengers and the transitive closure of scavenger references. So if a scavenger object references a nonscavenger object then we clear the bits on the nonscavenger, and on everything that it refers to. (I am using the word "closure" in a different sense than in my earlier post.)
* At this point we know that all the memory still marked is allocated memory which cannot be reached by any path from any in-scope variable. All of those objects are instructed to tear themselves down, which destroys any circular references.
Actually it is a little more complex than that, as we must worry about details like "what if freeing an item causes a message loop to run, which handles an event, which calls back into the script, which runs code, which triggers another garbage collection?" But those are just implementation details. (Incidentally, every JScript engine running on the same thread shares a GC, which complicates the story even further...)

You'll note that I hand-waved a bit there when I said "every now and then..." Actually what we do is keep track of the number of strings, objects and array slots allocated. We check the current tallies at the beginning of each statement, and when the numbers exceed certain thresholds we trigger a collection.

The benefits of this approach are numerous, but the principle benefit is that circular references are not leaked unless the circular reference involves an object not owned by JScript.

However, there are some down sides as well. Performance is potentially not good on large-working-set applications -- if you have an app where there are lots of long-term things in memory and lots of short-term objects being created and destroyed then the GC will run often and will have to walk the same network of long-term objects over and over again. That's not fast.

The opposite problem is that perhaps a GC will not run when you want one to. If you say "blah = null" then the memory owned by blah will not be released until the GC releases it. If blah is the sole remaining reference to a huge array or network of objects, you might want it to go away as soon as possible. Now, you can force the JScript garbage collector to run with the CollectGarbage() method, but I don't recommend it. The whole point of JScript having a GC is that you don't need to worry about object lifetime. If you do worry about it then you're probably using the wrong tool for the job!

Raphaël—JavaScript Library

Raphaël—JavaScript Library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

For more examples take a look at charting plugin: gRaphaël

Google Visualization API:
http://code.google.com/apis/ajax/playground/#motion_chart_time_formats

tag: svg, vml, Raphael

node.js

http://nodejs.org/

evented I/O for V8 javascript”. It’s a toolkit for writing extremely high performance non-blocking event driven network servers in JavaScript. Think similar to Twisted or EventMachine but for JavaScript instead of Python or Ruby.

http://s3.amazonaws.com/four.livejournal/20091117/jsconf.pdf

node.js in brief:
Server-side Javascript
Built on Google’s V8
Evented, non-blocking I/O. Similar to EventMachine or Twisted.
CommonJS module system.
8000 lines of C/C++, 2000 lines of Javascript, 14 contributors.

Many web applications have code like this:

var result = db.query("select * from T");
// use result

What is the software doing while it queries the database?
In many cases, just waiting for the response.

I/O latency
L1: 3 cycles
L2: 14 cycles
RAM: 250 cycles
DISK: 41,000,000 cycles
NETWORK: 240,000,000 cycles

Better software can multitask.
Other threads of execution can run while waiting.


Apache uses one thread per connection.
NGINX doesn't use threads. It uses an event loop.
Context switching is not free
Execution stacks take up memory
For massive concurrency, cannot use an OS thread for each connection.
Green threads or coroutines can improve the situation dramatically
BUT there is still machinery involved to create the illusion of holding execution on I/O.

Node.js is genuinely exciting

other http servers.
nginx
Tornado Web Server
Yaws, Apache vs. Yaws

graphviz

Graphviz - Graph Visualization Software, documentation
canviz: graphviz on a canvas
Graphviz FAQ
http://graphviz.org/Documentation/dotguide.pdf

dot draws a graph in four main phases. The layout procedure used by dot relies on the graph being acyclic.
(1) Thus, the first step is to break any cycles which occur in the input graph by reversing the internal direction of certain cyclic edges.
(2) The next step assigns nodes to discrete ranks or levels. In a top-to-bottom drawing, ranks determine Y coordinates. Edges that span more than one rank are broken into chains of “virtual” nodes and unit-length edges.
(3) The third step orders nodes within ranks to avoid crossings.
(4) The fourth step sets X coordinates of nodes to keep edges short, and the final step routes edge splines.

* The dot language descries three kinds of objects: graphs, nodes, and edges. With in a main graph, a subgraph defines a subset of nodes and edges.
* It is often useful to adjust the representation or placement of nodes and edges in the layout. This is done by setting attributes of nodes, edgets or subgraphs in the input file. Attributes are name-value pairs of character strings.

2. Drawing Attributes
* Nodes are drawn, by default, width shape=ellipse, width=.75, height=.5 and labeled by the node name. Other common shapes include box, circle, recode and plaintext.
* The node shape plaintext draws a node without any outline, an important convention in some kinds of diagrams.
* In case where the graph structure is of main concern, and especially when the graph is moderately large, the point shape reduces nodes to display minimal content. When drawn, a node's actual size is the greater of the requested size and the area needed for its text label, unless fixedsize=true, in which case the width and height values are enforced.
* The shape polygon exposes all the polygonal parameters, and is useful for creating many shapes that are not predefined. In addition to the parameters regular, peripheries and orientation, polygons are parameterized by number of sides sides, skew and distortioin.
* Graphs and cluster subgraphs may also have labels. graph labels appear, by default, centered below the graph. Setting labelloc=t centers the label above the graph. Cluster labels appear within the enclosing rectangle, in the upper left corner. The value labelloc=b moves the label to the bottom of the rectangle. The setting labeljust=rmoves the label to the right.
* Sometimes avoiding collisions among edge labels and edges forces the drawing to be bigger than desired. If labelfloat=true, dot does not try to prevent such overlaps, allowing a more compact drawing.
* An edge can also specify additional labels, using headlabel and taillabel, which are be placed near the ends of the edge. The characteristic of these labels are specified using the attributes labelfontname, labelfontsize and labelfontcolor.
2.5 Node and Edge Placement
* The rank of a subgraph may be set to same, min, source, max or sink.
* A value same causes all the nodes in the subgraph to occur on teh same rank. If set to min, all the nodes in the subgraph are guaranteed to be on a rank at least as small as any other node in the layout.
* This can be made strict by setting rank=source, which forces the nodes in the subgraph to be on some rank strctly smaller than the rank of any other nodes (except those also specified by min or source subgraphs).

diagraph G {
  size = "4, 4";
  main [shape=box]; /* This is a comment*/
  main -> parse [weight=8]
  parse -> execute;
  main -> init [style=dotted];
  main -> clean up;
  execute -> {make_string; printf} /* makes edges from execute to make_string and printf*/
  init -> make_string;
  edge [color=red];
  main -> printf [style="bod, label="100 times"]
  make_string [label="make a\nstring"];
  node [shape=box, style=filed, color=".7 .3 1.0"];
  execute -> compare;
}

3.2 Clusters
* A cluster is a subgraph placed in its own distinct rectangle of the layout. A subgraph is recognized as a cluseter when its name has the prefix cluster.
* Labels, font characteristics and the labelloc attribute can be set as they would be for the top-level graph, though cluster labels appear above the graph by defaut.
* Clusters are drawn by a recursive technique that computes a rank assignment and internal ordering of nodes within clusters.
* If the top-level graph has the compound attribute set to true, dot will allow edges connecting nodes and clusters. This is accomplished by an edge defining an lhead or ltail attribute. The value of these attributes must be the name of a cluster containing the head or tail node, respectively.
How can I create edges between cluster boxes?
This only works in Graphviz version 1.7 and higher. To make edges between clusters, first set the graph attribute compound=true. Then, you can specify a cluster by name as a logical head or tail to an edge. This will cause the edge joining the two nodes to be clipped to the exterior of the box around the given cluster.

digraph G {
 compound=true;
 nodesep=1.0;
 subgraph cluster_A {
  a -> b;
  a -> c;
 }
 subgraph cluster_B {
  d -> e;
  f -> e;
 }
 a -> e [ ltail=cluster_A,
   lhead=cluster_B ];
}

ref:
lf387, Graphics: Automate the creation of graphs with Graphviz

The CouchDB Project

The CouchDB Project

Apache CouchDB is a document-oriented database that can be queried and indexed in a MapReduce fashion using JavaScript. CouchDB also offers incremental replication with bi-directional conflict detection and resolution.

CouchDB provides a RESTful JSON API than can be accessed from any environment that allows HTTP requests. There are myriad third-party client libraries that make this even easier from your programming language of choice. CouchDB’s built in Web administration console speaks directly to the database using HTTP requests issued from your browser.

CouchDB is written in Erlang, a robust functional programming language ideal for building concurrent distributed systems. Erlang allows for a flexible design that is easily scalable and readily extensible.

See the introduction and the technical overview for more information.

CouchDB了解(-) 特性及实现

CouchDB内部默认使用JavaScript作为View的编写语言，之所以采用Javascript，是和CouchDB一种半结构化面向文档的分布式，高容错的数据库系统，其提供RESTFul HTTP/JSON接口。其拥有MVCC特性，用户可以通过自定义Map/Reduce函数生成对应的View。

在CouchDB中，数据是以JSON字符的方式存储在文件中。

CouchDB面向Web开发相关的。CouchDB使用Mozilla的spidermonkey作为JavaScript的解析运行平台，为了和Erlang进行交互，其使用c书写了一个Port程序couchjs，/server/main.js作为View Server服务器。

CouchDB: The Definitive Guide

get a list of databases: curl -X GET http://127.0.0.1:5984/_all_dbs

create a database: curl -X PUT http://127.0.0.1:5984/baseball

delete a database: curl -X DELETE http://127.0.0.1:5984/plankton

tag: couch

Recreating the button

Recreating the button
http://simonwillison.net/2009/Feb/5/recreating/
Fascinating article from Doug Bowman on the work that went in to creating custom CSS buttons for use across Google’s different applications, avoiding images to improve performance ensure they could be easily styled using just CSS. I’d love to see the Google Code team turn this in to a full open source release—the more sites using these buttons the more familiar they will become to users at large.

Automating PowerPoint with Python

Automating PowerPoint with Python

import win32com.client, sys
Application = win32com.client.Dispatch("PowerPoint.Application")
Application.Visible = True
Presentation = Application.Presentations.Open(sys.argv[1])
for Slide in Presentation.Slides:
     for Shape in Slide.Shapes:
             Shape.TextFrame.TextRange.Font.Name = "Arial"
Presentation.Save()
Application.Quit()

import urllib2, csv
url = 'http://spreadsheets.google.com/pub?key=phNtm3LmDZEOoyu8eDzdSXw&output=csv&range=B2:C51'
# Open the URL using a CSV reader
reader = csv.reader(urllib2.urlopen(url))
# Convert the CSV into a list of (asset-size, bank-name) tuples
data = list((int(s.replace(',','')), b.decode('utf8')) for b, s in reader)

I created a simple Treemap class based on the squarified algorithm — you can play with the source code. This Treemap class can be fed the the data in the format we have, and a draw function. The draw function takes (x, y, width, height, data_item) as parameters, where data_item is a row in the data list that we pass to it.

archive

Fixing IE by porting Canvas to Flash
Fixing IE by porting Canvas to Flash. Implementing canvas using Flash is an obvious step, but personally I’m much more interested in an SVG renderer using Flash that finally brings non-animated SVGs to IE.

Practical, maintainable CSS
Practical, maintainable CSS (via) Nat’s posted slides and a video from her latest talk at last week’s Brighton Girl Geeks evening.

Google App Engine - Uploading and Downloading Data
We've been working on a set of tools that will make the process of uploading and downloading data from App Engine applications easier. Today we're excited to announce an early release of our new bulk uploading client. You can try it out here. Let us know what you think in our Google Group!

Yahoo! Query Language thoughts
Yahoo! Query Language thoughts. An engineer on Google’s App Engine provides an expert review of Yahoo!’s YQL. I found this more useful than the official documentation.

YQL opens up 3rd-party web service table definitions to developers
YQL opens up 3rd-party web service table definitions to developers. This really is astonishingly clever: you can create an XML file telling Yahoo!’s YQL service how to map an arbitrary API to YQL tables, then make SQL-style queries against it (including joins against other APIs). Another neat trick: doing a SQL “in” query causes API requests to be run in parallel and recombined before being returned to you.

rev=canonical bookmarklet and designing shorter URLs
A rev="canonical" HTTP Header
I like rev="canonical"

favicon generator

favikon.com. Small, easy to use online favicon generator.
favicon.ico Generator
favicon.cc is a tool to create or download favicon.ico icons, that get displayed in the address bar of every browser.

How to submit blogger sitemap successfully and fix the maximum limit issue?

How to submit blogger sitemap successfully and fix the maximum limit issue?

Webmaster Tools > Sitemaps > Add Sitemap.

Food for the thinking mind: If you don’t include redirect=false, webmaster tools will throw warning. If you don’t include start-index=1&max-results=100, the maximum number of URLs submitted will be shown as 26, always. Remember if you have more than 100 pages on your blogspot site, you would need to include two sitemaps one having an index starting with 1 and ending with 100(start-index=1&max-results=100) and the other having an index starting with 100 and ending with 200(start-index=100&max-results=100)

jsbeautify : a javascript source code formatter

jsbeautify : a javascript source code formatter
http://www.jsbeautifier.org/

DamnIT (beta) A JavaScript error reporting service

DamnIT (beta) A JavaScript error reporting service
https://damnit.jupiterit.com/home/learn

F5 vs. ctrl+F5 IE Doesn’t Refresh Ajax Based Content Before Its Expiration Date

Ajax Caching: Two Important Facts

As you develop a page like this, it is tempting to refresh the page in an attempt to update the embedded Ajax content. With other embedded resources such as CSS or images, the browser automatically sends the following types of requests depending on whether F5 (Refresh) or Ctrl+F5 (Forced Refresh) is used:

1. F5(Refresh) causes the browser to build a conditional update request if the content originally had a Last-Modified response header. It uses the If-Modified-Since request header so that server can avoid unnecessary downloads where possible by returning the HTTP 304 response code.
2. Ctrl+F5 (Forced Refresh) causes the browser to send an unconditional GET request with a Cache-Control request header set to ‘no-cache’. This indicates to all intermediate proxies and caches that the browser needs the latest version of the resource regardless of what has already been cached.

In Internet Explorer, the load-time Ajax request is treated as though it is unrelated to the rest of the page refresh and there is no propagation of the user’s Refresh action. No GET request is sent to the server if the cached Ajax content has not yet expired. It simply reads the content directly from the cache, resulting in the (Cache) result value in HttpWatch. Here’s the effect of F5 in IE before the content has expired:



Even with Ctrl+F5, the Ajax derived content is still read from the cache:

Let's make the web faster - Google Code

Let's make the web faster - Google Code
Capturing and analyzing browser paint events using Page Speed Activity

Using Ctrl+F5 in IE 7 - HttpWatch Blog

Using Ctrl+F5 in IE 7 - HttpWatch Blog

Only the HTML of the page is returned with a 200 OK response; the other items return a 304 Not Modified response. Looking more closely with HttpWatch you can see that If-Modified headers were sent with every request. This is what you would expect from typing F5 or clicking the Refresh button.

It turns out that Ctrl+F5 only works in IE 7 if the keyboard focus is on the web page itself. If you move the focus anywhere else, such as back to the location bar, it ignores the Ctrl key and behaves as if F5 were typed on its own.

So if you really want to do a forced refresh in IE7 make sure you click on the web page or tab first.

.

I found this behavior in IE7 & IE8 too. I thought that IE 7/8 have changed “Ctrl + F5″ behaviors. Thanks for pointing out it is due to focus.

Primitive Datatype Wrapper Objects

from javascript the definitive guide, 3.13 Primitive Datatype Wrapper Objects

 
>>> s = 'hello'
"hello"
>>> typeof s
"string"
>>> t = new String('hello')
hello 0=h 1=e 2=l 3=l 4=o
>>> typeof t
"object"

When we discussed strings earlier in this chapter, I pointed out a strange feature of that datatype: to operate on strings, you use object notation. For example, a typical operation involving strings might look like the following:

var s = "These are the times that try people's souls."; 
var last_word = s.substring(s.lastIndexOf(" ")+1, s.length);

If you didn't know better, it would appear that s was an object and that you were invoking methods and reading property values of that object.

What's going on? Are strings objects, or are they primitive datatypes? The typeof operator (see Chapter 5) assures us that strings have the datatype "string", which is distinct from the datatype "object". Why, then, are strings manipulated using object notation?

The truth is that a corresponding object class is defined for each of the three key primitive datatypes. That is, besides supporting the number, string, and boolean datatypes, JavaScript also supports Number, String, and Boolean classes. These classes are wrappers around the primitive datatypes. A wrapper contains the same primitive data value, but it also defines properties and methods that can be used to manipulate that data.

JavaScript can flexibly convert values from one type to another. When you use a string in an object context i.e., when you try to access a property or method of the string JavaScript internally creates a String wrapper object for the string value. This String object is used in place of the primitive string value. The object has properties and methods defined, so the use of the primitive value in an object context succeeds. The same is true, of course, for the other primitive types and their corresponding wrapper objects; you just don't use the other types in an object context nearly as often as you use strings in that context.

Note that the String object created when you use a string in an object context is a transient one; it allows you to access a property or method, and then it is no longer needed, so it is reclaimed by the system. Suppose s is a string and the length of the string is determined with a line like this:

var len = s.length;

In this case, s remains a string; the original string value itself is not changed. A new transient String object is created, which allows you to access the length property, and then the transient object is discarded, with no change to the original value s. If you think this scheme sounds elegant and bizarrely complex at the same time, you are right. Typically, however, JavaScript implementations perform this internal conversion very efficiently, and it is not something you should worry about.

Primitives as objects
It's possible to instantiate these wrapper objects; this is a bad idea, as it doesn't give you any benefit:

  var s = new String('abc');
 var n = new Number(5);
 var b = new Boolean(true);

Avoid doing this.

Programming languages datatype

Programming languages datatype

statically typed language
A language in which types are fixed at compile time. Most statically typed languages enforce this by requiring you to declare all variables with their datatypes before using them. Java and C are statically typed languages.
dynamically typed language
A language in which types are discovered at execution time; the opposite of statically typed. VBScript and Python are dynamically typed, because they figure out what type a variable is when you first assign it a value.
strongly typed language
A language in which types are always enforced. Java and Python are strongly typed. If you have an integer, you can't treat it like a string without explicitly converting it.
weakly typed language
A language in which types may be ignored; the opposite of strongly typed. VBScript is weakly typed. In VBScript, you can concatenate the string '12' and the integer 3 to get the string '123', then treat that as the integer 123, all without any explicit conversion.

So Python is both dynamically typed (because it doesn't use explicit datatype declarations) and strongly typed (because once a variable has a datatype, it actually matters).

Weak typing - Wikipedia, the free encyclopedia

In computer science, weak typing (a.k.a. loose typing) is a property attributed to the type systems of some programming languages. It is the opposite of strong typing, and consequently the term weak typing has as many different meanings as strong typing does (see strong typing for a list and detailed discussion).

One of the more common definitions states that weakly typed programming languages are those that support either implicit type conversion (nearly all languages support at least one implicit type conversion), ad-hoc polymorphism (also known as overloading) or both. These less restrictive usage rules can give the impression that strict adherence to typing rules is less important than in strongly typed languages and hence that the type system is "weaker". However, such languages usually have restrictions on what programmers can do with values of a given type; thus it is possible for a weakly typed language to be type safe. Moreover, weakly typed languages may be statically typed, in which case overloading is resolved statically and type conversion operations are inserted by the compiler, or dynamically typed, in which case everything is resolved at run time.

Preserve line break in textarea

http://chunghe.googlecode.com/svn/trunk/experiment/textarea.preserve.line.break.htm
* set the textarea's value by textarea.value, not textarea.innerHTML
* use br2nl before inserting a<br>b into textarea

var br2nl = function (str) {
    return str.replace(/<br\s*\/?>/img, "\r");
}

FreeRapid Downloader

FreeRapid Downloader

FreeRapid is my next application after Wordrider and Damaq. It's a simple Java downloader that supports downloading from Rapidshare and other file-sharing services.
Simply copy and paste your links from a browser to this application. FreeRapid Downloader will handle the rest itself. No more clicking or uncomfortable waiting.

Clear upload file input field

Clear upload file input field
1. inputFile.value = '': work for ff, not work for ie6.
2. reset form: not very useful
3. use filewrapper.innerHTML = filewrapper.innerHTML, workable for ff/ie, remember to re-bind event listeners.

scripiting form elements

"An important thing to know about event handlers is that within the code of an event handler, the this keyword refers to the document element that triggered the event. Since all form elements have a form property that refers to the containing form, the event handlers of a form element can always refer to the Form object as this.form. Going a step further, this means that an event handler for one form element can refer to a sibling form element named x as this.form.x."

<form name="sample">
<input type="text" name="text">
</form>

docuemnt.sample.text.form == document.sample

* The <button> tag may be used anywhere in an HTML document and need not be placed within a <form>.

* When the user clicks on a toggle button, the radio or checkbox element triggers its onclick event handler to notify the JavaScript program of the change of state. Newer web browsers also trigger the onchange handler for these elements. Both event handlers convey the same essential information, but the onclick handler is more portable.

jsdoc-toolkit

jsdoc-toolkit
Annotating JavaScript for the Closure Compiler

javascript templating

Closure Templates
#haml
EJS - JavaScript Templates
test.ejs // template file

<%= title %>

    <% for(var i=0; i<supplies.length; i++) { %>
        

            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        
    <% } %>

test.html

another form: // put data in comments.json

new EJS({url: 'comments.ejs'}).update('element_id', '/comments.json')

google closure

http://erik.eae.net/archives/2009/11/05/22.27.29/

At the time we were considering using Dojo as our base for this new library. We were very impressed with Dojo but back then Dojo was too unstable and we had heard too many horror stories of upgrade migration head aches. We also looked at MochiKit which was more stable but it did not really solve any of our problems. (*)

http://www.moretechtips.net/2009/11/getting-closer-to-google-closure.html
http://blog.louisgray.com/2009/11/story-and-impact-of-closure-googles.html
http://blog.ericsk.org/archives/1366
Closure Library API Documentation
java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js hello.js --js_output_file output.js


GNU ls for Microsoft Windows

GNU ls for Microsoft Windows
解開把"*.exe"丟到windows下就算裝完了，裝完後可以在cmd下這樣的指令:
ls --color| grep 'avi' | sort | more
GunuWin32 這邊還有一些其他的 porting, ex: sed, awk

Modal window - Wikipedia, the free encyclopedia

Modal window - Wikipedia, the free encyclopedia

In user interface design, a modal window is a child window that requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.

Modal windows are commonly used in GUI systems to command user awareness and to display emergency states. In the web, they are often used to show images in detail.[1]

完美解碼 PureCodec

完美解碼 PureCodec
Intel DG45FC Mini-ITX 小而美的HTPC實現-開啟G45硬解
最佳化KMPlayer設定-開啟DXVA

yui panel - fixedcenter:contained

http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html#config_fixedcenter

fixedcenter - Boolean | String
Determines whether or not the Overlay should be anchored to the center of the viewport.

This property can be set to:

true
To enable fixed center positioning

When enabled, the overlay will be positioned in the center of viewport when initially displayed, and will remain in the center of the viewport whenever the window is scrolled or resized.

If the overlay is too big for the viewport, it's top left corner will be aligned with the top left corner of the viewport.
false
To disable fixed center positioning.

In this case the overlay can still be centered as a one-off operation, by invoking the center() method, however it will not remain centered when the window is scrolled/resized.
"contained"
To enable fixed center positioning, as with the true option.

However, unlike setting the property to true, when the property is set to "contained", if the overlay is too big for the viewport, it will not get automatically centered when the user scrolls or resizes the window (until the window is large enough to contain the overlay). This is useful in cases where the Overlay has both header and footer UI controls which the user may need to access.

YUI 2: Overlay

fixedcenter Boolean / String false

Specifies whether the Overlay should be automatically centered in the viewport on window scroll and resize.

It also supports the string value "contained", which will enable fixed center behavior, but only if the Overlay fits within the viewport. If the Overlay is larger than the viewport, automatic fixed centering will be disabled until the viewport is large enough to contain the Overlay.

IE中伪类:hover的使用及BUG

IE中伪类:hover的使用及BUG
http://chunghe.googlecode.com/svn/trunk/experiment/ie.hover.bug.htm
tag: bug, ie, pseudo class, hover,

code printing

TxtPrint homepage

vim setting

set printfont=monaco:h7
set printoptions=header:1,syntax:n,left:4pc,top:4pc,right:2pc,bottom:2pc

means:
font-family: consolas,
font-size: 9px
header occupy 1 line,
syntax off
margin on each side.

printer setting:
雙面, 向上翻頁

tag: text print

How to disable automatic proxy caching in Internet Explorer

How to disable automatic proxy caching in Internet Explorer

When you configure Internet Explorer to use an automatic proxy configuration script, it caches the proxy that is returned by the FindProxyForURL call. The caching mechanism (Automatic Proxy Result Cache) is performed on a host basis (that is, not on an URL basis). This prevents you from using different proxies to gain access to the same Web server.

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Policies\Microsoft\Windows\CurrentVersion\Internet Settings]"EnableAutoProxyResultCache"=dword:00000000"