d.CAT- the RIA blog » 一星期學會 flex 系列影片!
Adobe 剛放出一系列教學影片，適合初學者看看。
當然要一星期學會 flex 是不太可能的事，不過可以把那些教學內容當作必學大綱(因為只有最重要的才會被包含進來)，然後另外深入找資料個個擊破。
我個人覺得比較有趣的是這些影片居然不是用 captivate 直接產生 flv 然後由 adobe 來 hosting, 相反的，它們是放在 Brightcove (一家超級無敵大的 CDN)的機器上，直接 streaming 服務，更有趣的是，Brightcove 的創辦人 Jeremy Allaire 就是 Coldfusion 的爸爸啊(它將 coldfusion 賣給 macromedia 後待了幾年就決定飛去 Boston 另謀發展，沒想到幾年下來搞的很不錯吶)。
Core JavaScript 1.5 Reference:Global Objects:Function:apply - MDC
The apply method allows you to call a function and specify what the keyword this will refer to within the context of that function. The thisArg argument should be an object. Within the context of the function being called, this will refer to thisArg. The second argument to the apply method is an array.
var result = function.apply(thisArg[, argsArray]);
thisArg
Determines the value of this inside fun. If thisArg is null or undefined, this will be the global object. Otherwise, this will be equal to Object(thisArg) (which is thisArg if thisArg is already an object, or a String, Boolean, or Number if thisArg is a primitive value of the corresponding type). Therefore, it is always true that typeof this == "object" when the function executes.
argsArray
An argument array for the object, specifying the arguments with which fun should be called, or null or undefined if no arguments should be provided to the function.
unction Car(make, model, year)
{
this.make = make;
this.model = model;
this.year = year;
}
function RentalCar(carNo, make, model, year)
{
this.carNo = carNo;
Car.apply(this, new Array(make, model, year))
}
myCar = new RentalCar(2134,"Ford","Mustang",1998)
document.write("Your car is a " + myCar.year + " " +
myCar.make + " " + myCar.model + ".")
Building High Performance HTML Pages
DEFER Your Scripts
indicate to Internet Explorer 4.0 or later that the script tag contains no immediately executing code that impacts the document before the load event fires. Combined with the SRC attribute, the DEFER attribute can be used on a script tag to indicate to Internet Explorer that the associated code should be downloaded in the background while the rest of the components of the page are downloaded and parsed.
Scope Your Object References Wisely
JScript and VBScript are interpreted languages. Because all the work is done at execution time, relative to compiled languages, these languages are slow. Within a script, every reference to an object amounts to two calls from the scripting engine to the DHTML Object Model.
Use Fixed-Size Tables
Set the table-layout CSS attribute to fixed on the table.
Explicitly define col objects for each column.
Set the WIDTH attribute on each col.
Close Your Tags
Unlike XML, HTML has the notion of implicitly closed tags. This includes frame, img, li, and p. If you don't close these tags, Internet Explorer renders your pages just fine. If you do close your tags, Internet Explorer will render your pages even faster.
Leverage the HTTP Expires Header
Browsers typically store the resource along with the expiry information in a local cache. On subsequent user requests for the same resource, the browser can first compare the current time and the expires time stamp. If the time stamp indicates a time in the future, the browser may simply load the resource from the cache rather than retrieving the resource from the server.
Even Faster Web Sites (Google I/O Session Videos and Slides) - Google版的 High performance websites, vol 2
1. Split the initial payload
2. Load scripts without blocking
3. Don't scatter inline scripts
4. Split dominant domains
5. Make static content cookie-free
6. Reduce cookie weight
7. Minify CSS
8. Optimize images
9. Use iframes sparingly
10. To www or not to www
Cuzillion
a tool for quickly constructing web pages to see how components interact
Split the initial payload
split your JavaScript between what's needed to render the page and everything else
load "everything else" after the page is rendered
separate manually (Firebug); tools needed to automate this (Doloto from Microsoft)
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
var se=document.createElement('script');
document.getElementsByTagName('head')
[0].appendChild(se);
se.text = xhrObj.responseText;
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
Ajaxian » Getting around the blocking of script
Non-blocking JavaScript Downloads » Yahoo! User Interface Blog
Let's first take a look at what the problem is with the script downloads. The thing is that before fully downloading and parsing a script, the browser can’t tell what’s in it. It may contain document.write() calls which modify the DOM tree or it may even contain location.href and send the user to a whole new page. If that happens, any components downloaded from the previous page may never be needed.
If you do need several files though, you can attach a listener to the script’s onload event (this will work in Firefox) and the onreadystatechange event (this will work in IE).
<head>
<script>
var url = 'http://www.w3clubs.com/comp.php?type=js&sleep=1';
for (var i = 0; i < 1; i++) {
var js = document.createElement('script');
js.src = url + '&id='+ i + new Date().getTime();
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);
}
</script>
</head>
Dependencies
A problem with including scripts dynamically would be satisfying the dependencies. Imagine you’re downloading 3 scripts and three.js requires a function from one.js. How do you make sure this works?
Well, the simplest thing is to have only one file, this way not only avoiding the problem, but also improving performance by minimizing the number of HTTP requests (performance rule #1).
If you do need several files though, you can attach a listener to the script’s onload event (this will work in Firefox) and the onreadystatechange event (this will work in IE). Here’s a blog post that shows you how to do this. To be fully cross-browser compliant, you can do something else instead: just include a variable at the bottom of every script, as to signal “I’m ready”. This variable may very well be an array with elements for every script already included.
Official Google Data APIs Blog: OAuth for Google Data APIs
OAuth Authentication for Web Applications - Account Authentication API - Google Code
You'll now be able to use standard OAuth libraries to write code that authenticates users to any of the Google Data APIs, such as Google Calendar Data API, Blogger Data API, Picasa Web Albums Data API, or Google Contacts Data API. This should reduce the amount of duplicate code that you need to write, and make it easier for you to write applications and tools that work with a variety of services from multiple providers.
Extremely clever idea: Cache JavaScript in window.name (which persists between page views and can hold several MB of data), but use document.referrer to check that an external domain hasn’t loaded the cache with malicious code for an XSS attack. UPDATE: Jesse Ruderman points out a fatal flaw in the comments.
The window.name transport is a new technique for secure cross-domain browser based data transfer, and can be utilized for creating secure mashups with untrusted sources. window.name is implemented in Dojo in the new dojox.io.windowName module, and it is very easy to make web services available through the window.name protocol. window.name works by loading a cross-domain HTML file in an iframe. The HTML file then sets its window.name to the string content that should be delivered to the requester. The requester can then retrieve the window.name value as the response. The requested resource never has access to the requester’s environment (JavaScript variables, cookies, and DOM).
<p id="content">
hi, <strong>kejun</strong>!
</p>
</body>
<script type="text/javascript">
window.name = document.getElementById("content").innerHTML;
</script>
php: rfc: closures
SitePoint Blogs » Keeping Current With PHP
Looks like a solid implementation—the syntax is similar to JavaScript but makes explicit which variables are to be captured. As with much of PHP, values are copied in to the closure by default but you can use an ampersand to specify JavaScript-style pass-by-reference instead.
minify - Google Code
Ajaxian » Combining JavaScript and CSS for Performance
GWT exceeds at doing this in ways unlike any other toolkit, effectively reducing the number of HTTP requests to load an application down to two, and making all of the application’s code and data effectively cached forever.
It uses a number of mechanisms to do this. It compiles all of the source code and resources at once, aggressively optimizing and obfuscating the Javascript in ways far more compact than JS minifiers/packers. It allows all images to be auto-sprited. It can take sprited images, CSS, locale data, even Flash SWF, and effectively inline them into the same file containing the JS (using data URLs). It includes a CSS optimizer as well, so prior to packing the CSS, it optimizes it.
The end result, is that you can, if you choose, reduce your entire app down to 2 HTTP requests, the second being in the cache 99% of the time, bringing the amortized number of requests to 1. And the data that is cached/loaded, is extremely optimized for size and speed.
The only “downside” for some, is having to use Java. :)
High Performance Ajax Applications
Combine CSS and JavaScript files:
At build time [ http://www.julienlecomte.net/blog/2007/09/16/ ]
At run time
Optimize image assets:
PngCrush [ http://pmt.sourceforge.net/pngcrush/ ]
PngOptimizer [ http://psydk.org/PngOptimizer.php ]
預設的路徑在，圖還蠻不錯的。
C:\Program Files\Mozilla Firefox\chrome\classic.jar
C:\Program Files\Mozilla Firefox\chrome\browser.jar
http://chunghe.googlecode.com/svn/trunk/images/mozilla
Ajaxian » Increase DOM Node Insertion Performance
High Performance Ajax Applications
var div = document.getElementsByTagName("div");
var fragment = document.createDocumentFragment();
for ( var e = 0; e <elems.length; e++ )
fragment.appendChild( elems[e] );
}
for ( var i = 0; i <div.length; i++ ) {
div[i].appendChild( fragment.cloneNode(true) );
}
var docFragm = document.createDocumentFragment();
var elem, contents;
for( var i = 0; i < textlist.length; i++ ) {
elem = document.createElement('p');
contents = document.createTextNode(textlist[i]);
elem.appendChild(contents);
docFragm.appendChild(elem);
}
document.body.appendChild(docFragm);
var original = document.getElementById('container');
var cloned = original.cloneNode(true);
cloned.setAttribute('width','50%');
var elem, contents;
for( var i = 0; i < textlist.length; i++ ) {
elem = document.createElement('p');
contents = document.createTextNode(textlist[i]);
elem.appendChild(contents);
cloned.appendChild(elem);
}
original.parentNode.replaceChild(cloned,original);
Internet Explorer Submit Button Horizontal Padding - 在Ie，input button 的 padding 是沒用的，只要設定 overflow:visible 就可以了。
Button Width in IE
<input type="submit" value="Internet explorer ignores my padding" style="padding: 20px;" />
<input type="submit" value="Internet explorer respects my padding" style="padding: 20px; overflow: visible;" />
Information on Border Slants - 利用 border 來做類似對話框的東西。在ie下空的 div 要設定 height:0, width:0 之外還要多設定一個 line-height:0 才可以弄出一個長寬皆為 0 的 div。
http://chunghe.googlecode.com/svn/trunk/experiment/border.slants/index.htm
http://chunghe.googlecode.com/svn/trunk/experiment/border.slants/slants.as.tag.htm
http://chunghe.googlecode.com/svn/trunk/experiment/border.slants/slants.as.pointer.htm
Opera Web Standards Curriculum
Opera commissioned an impressive sequence of articles from a bunch of very talented people to help address the monstrous learning curve for modern client-side development.
不枉我等了快一個月的缺貨期啊
昨天用變電家去量
從晚上十點吹到早上七點
只吃了二度多的電而已
跟原來的老舊定頻機差真多啊啊啊啊
=========================================
所以改緊改變頻吧！家裡房間一台日立22st，開一整天二十四小時，耗電約5.x度，
我就開玩笑說把一天喝的飲料錢省下就可以涼爽一整天啊！溫度沒有設定的很低，
就是27度，室內溫度一般都在26-28度遊走。不過我都用涼爽模式，這樣濕度可以降
低。冷房模式測試過，溫度會定在設定的溫度，但是濕度降不下來。用涼爽模式會
降低濕度，但是傻的是一般都降到比設定的低15-20，而溫度有時會降到26.x度。
就算溫度降到27度，但是濕度高達75-80，也是很不舒服啊！
22st的EER值高達6.x。
=========================================
定頻機只要一啟動，耗功幾乎都差不多,就是標示值*壓縮機啟動時間
就是他的耗電量, COP 為定值 2.7
但是變頻機呢? 會跟壓縮機轉速成一個類似正比的關係.
比方說某台日本Hitachi COP 4.5 的分離式變頻機, 最高轉速 COP 約 3.0
最低轉速(900 rpm), COP 為 5.5
這也就是說, 轉速越低, COP 越高.. 帶走熱的效率越好.
280 W 帶走 1.5kW 的熱..
跑了四個小時才使用 1.4 度的電. 這就是變頻的優勢.
假如是跑最高轉速.. 那就差不多了.. 跟定頻機一樣耗電，甚至更耗電.
所以買變頻機,千萬不要想省錢買小一號的.. 電費會幫你補回來.
=========================================
: 這個不要買小一號的是說要買大台(BTU高)一點的??
yes :p
反正就是把廠商估的噸數加一兩號上去..
估 2.8 kW 就買 3.5kW
估 4.0 kW 就買 5.5kW 之類的..
電費會在兩年內省回來的 ^_^
=========================================
: 主要這樣的考量是為了利用較大的冷凝器與蒸發器來拉高蒸發溫度
: 降低冷凝溫度跟增加過冷度，用壓縮機的操作條件變化來增加EER
: 不過令人好奇的是若是這樣的考量的話似乎連膨脹閥都得有較大的
: 容調範圍，沒看過家電型的膨脹閥選用，不知這樣的邏輯是否成立？
: 不過依舊還是會令人感到好奇的是若是扣掉設備的固定成本不看的話
: 是否應該將選購的標準放在額定熱負載接近最低運轉速度上會是個
: 最佳的選擇？
在低轉速區的過冷度的確有比較好，但是過熱度差不多, 5~2 C
一般直流變頻空調機都會使用電子膨脹閥，他的開度大約 480-500 pulse 左右
對於空調機控制是非常足夠的。
選用額定為最低轉速... 我是認為錢有點多啦, 沒什麼意義.
因為溫度一旦控制下來，那熱負載沒那麼重，這時候變頻空調機會有停機
的狀況發生，雖然直流變頻機壓縮機開開關關沒什麼，但是空調機生產
廠商還是會建議盡量不要。此外，一旦空調機過大造成的壓縮機開開關關現象，
這時候的溫度控制會非常不好，會有過冷的現象，不符合變頻控制 正負 0.5C
的要求。
所以還是剛好多一兩級就好，錢難賺啊~~
http://mpc-hc.sourceforge.net/
http://sourceforge.net/projects/mpc-hc
Summary: What is the differences between Guliverkli2 and MPC-HC ?
Gabest, the original author of Media Player Classic,
stop working on it by the end of 2006. Since then,
two forks have been created.
Main differences between both is that Guliverkli2
contains a few patches made by various people, and
MPC-HC contains new features. Most patches present
in Guliverkli2 are also present in MPC-HC.
Firefox Party 演講：Firefox & Web Development — hlb’s weblog
Dust-Me Selectors
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.
Enter GridFox. GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.
Selenium IDE is an integrated development environment for Selenium tests. It is implemented as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE includes the entire Selenium Core, allowing you to easily and quickly record and play back tests in the actual environment that they will run.
洞天法國農莊
西式料理‧義大利麵‧下午茶‧蛋糕
111 台北市 士林區 平菁街142號
電話：(02)2862-3831
網址： http://www.twofish.com.tw
營業時間：
星期二至星期四 12:00 ~ 00:00
星期五至星期六 11:00 ~ 01:00
星期日 11:00 ~ 00:00
一般最常用的是刪除 log 檔案, 指定目錄, 並指令時間 (例如保留一週, 一週前的刪除), 就可以利用這個指令進行刪除:
forfiles /p c:\temp /s /m *.log /d -7 /c "cmd /c del @FILE"
或是列舉出指定目錄下的檔案(非目錄)的名稱列出:
forfiles /p c:\ /c "cmd /c if @isdir==FALSE echo @FILE"
再來看看微軟的官方說明: Forfiles
Protocol Buffers: Google's Data Interchange Format
Protocol Buffers: Google's Data Interchange Format. Open sourced today. Highly efficient binary protocol for storing and transmitting structured data between C++, Java and Python. Uses a .proto file describing the data structure which is compiled to classes in those languages for serializing and deserializing. 3-10 times smaller and 20-100 times faster than XML.
http://chunghe.googlecode.com/svn/trunk/experiment/border-shadow/border-shadow-style1.htm
b{display:block}
b {border: 1px solid #F6F5EF}
b b {border: 1px solid #F0EBE6}
b b b{border: 1px solid #E7E0DA}
Peter's Blog - Module Pattern Provides No Privacy...at least not in JavaScript(TM)
The module pattern has been discussed many times and has shown how ECMAScript has the ability to encapsulate data as "private" variables by using closures.
Mozilla's JavaScript(TM), the implementation in Firefox, has a second argument extension to eval that allows external code to spy on otherwise private variables.
// Getting "private" variables
var obj = (function() {
var a = 21;
return {
// public function must reference 'a'
fn: function() {a;}
};
})();
var foo;
eval('foo=a', obj.fn);
console.log(foo); // 21
// Setting "private" variables
var obj = (function() {
var a = 21;
return {
getA: function(){return a;},
alertA: function(){alert(a);}
};
})();
console.log(obj.getA()); //21
eval('a=3', obj.getA);
console.log(obj.getA()); // 3
obj.alertA(); // 3
Fortunately, all safe JavaScript subsets (Caja,
Cajita, ADsafe, FBJS, Jacaranda) already prevent access to the eval
function, as they must. So we should all be safe from this particular
new hole.
常見的一個問題，一個block寬為650px，裡面有一個導覽列佔滿整個blcok，導覽列有四個 item，常見的作法像是這樣：
ul li.item{
width:25%
}
ul{display:table}
ul li.item{display:table-cell}
display:table, 也沒有 display:table-cell
