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時大略會有這些步驟:
  1. 編輯CSS檔案
  2. 瀏覽器上預覽
  3. Firebug or Chrome DevTool調整
  4. 把修改的部分寫回CSS檔案

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

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

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

最近把CoffeeScript的IDE改成了Sublime Text2
但因為我是使用Windows,所以遇到了不少的麻煩,花了些時間修正,以下是詳細的安裝步驟
  1. 安裝NodeJS
  2. 安裝coffee-script
    (command line下執行下列指令)
    npm install -g coffee-script
  3. 安裝Sublime 2
  4. 安裝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>