THE NEST: 11月 2012

Listening for DOM Creation Event Using CSS3

有時候我們會需要偵測頁面上是否有新增的DOM，最簡單的做法是直接去listen DOMNodeInserted事件，但這方法雖然簡單卻會大幅度的影響效能(由其是頁面DOM元素多的時候)，也因此MDN不建議這樣使用。

沒辦法直接listen dom event那要怎麼搞？Daniel Buchner提出了一種hack，簡略的流程是這樣：針對listening DOM寫個CSS3的animation，讓在DOM建立的時候瀏覽器會生成animationStart事件，只要抓取到這個事件並且判別該animation為該DOM所產生，就可以知道有新的DOM已經建立了。

利用Chrome Developer Tools提昇CSS編修效率

通常在編輯CSS時大略會有這些步驟：

編輯CSS檔案
瀏覽器上預覽
Firebug or Chrome DevTool調整
把修改的部分寫回CSS檔案

但是當需要調整的東西一多的時候，很容易在3~4的步驟中遺忘有哪些需要修改的，或是在copy至CSS檔案的時候寫錯地方，白白浪費許多時間。

幸好，Chrome的開發者工具(Developer Tools)有一個叫做Live Editing功能。這Live Editing的功能很簡單，就是幫你把在網頁上的修改直接存到對應的檔案裡。

Sublime Text2開發CoffeeScript程式：Windows環境設定

最近把CoffeeScript的IDE改成了Sublime Text2
但因為我是使用Windows，所以遇到了不少的麻煩，花了些時間修正，以下是詳細的安裝步驟

安裝NodeJS
安裝coffee-script
(command line下執行下列指令)
```
npm install -g coffee-script
```
安裝Sublime 2
安裝Sublime Package Control：

Javascript中的this到底是？

先學JAVA(或任何其他物件導向語言)再開始學Javascript的人，一定會遇到這個問題：

為什麼Javascript裡的this常常找不到東西？

要了解這問題，我們需要先知道一個最基本的觀念：

JAVA是class-based語言，this指向的是該段程式碼所屬的class
Javascript是prototype-based語言，class實際上不存在，this指向的是呼叫該function的主人

再更精確一點的解釋，在JAVA中所有東西都被定義在一個class內，也因此this代表的就是所在的class，就算這method是繼承而來的，只要你是在這個class內呼叫，那麼this就會指到這個class而不是被繼承的class，也因此this是(相較於Javascript)在物件初始化之後就不會變動的東西。而對於Javascript來說，一個function可以跟著定義好的物件，也可以跟著物件的prototype，甚至你可以(在runtime)拿別人的prototype來用、來修改，這樣的彈性間接的導致了this會隨著呼叫的方式而變動。

利用BORDER-BOX為網頁元素設定正確的長度與寬度

目前的css box model是這樣子決定元素的長/寬的：

width + padding + border = 元素實際寬度
height + padding + border = 元素實際高度

很不直覺不是嗎？一般都會認為往外長的叫做margin，往內長的叫做padding吧？假設我們需要一個width=200px, border=2px, padding=10px，在以前我們實際寫的會是像這樣(如果我們需要把寬度固定在200px)

<div style="width:186px;border:2px;padding:5px">
    ..content here..
</div>

必需從border, padding反推出width。其實元素是固定長寬還好辦，拿出計算機多按幾下而已，但如果我們需要的是width=100%, border=2px, padding=10px這樣子的組合呢？

Bootstrap Navbar 置中

CSS加入以下class

.navbar .nav.pull-center {
  float: none;
  margin: 0 auto;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
}

.navbar-inner {
  text-align:center;
}

然後建立navbar時在nav class後額外加個pull-center即可
範例:

<div class="navbar">
 <div class="navbar-inner">
  <a class="brand" href="#">Title</a>
  <ul class="nav pull-center">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </div>
</div>