星期二, 6月 25, 2013

[css] units of css

  這次來介紹 css的度量衡,尺寸介紹。尺寸共有三種類型,一種是絕對數值,如 inch, cm, mm, pt(point), pc(pica), 這種和日常生活相關的尺寸。另外一種是比例上的計算,如 em,ex或 %,最後一種則是特別的單位  px 。

  首先先介紹絕對數值,基於現實生活數值,所以呈現的情況在各種裝置下將會一致,也因此不建議使用在螢幕上,原因是呈現出來螢幕的大小是很多變的,若使用固定尺寸輸出將會造成呈現錯誤。

  絕對數值的轉換公式為 1in = 2.54cm = 25.4mm = 72pt = 6pc。

  接下來來討論比例上的計算,以em當例子,若我們設定字形尺寸為 2in, 1em 就相當於 2in。 em 相關於 font-size大小,所以字體大小也影響到 em的所呈現的大小。我們也常看到 "text-ident: 1.5em" 或是 "margin: 1em"這種用法,都是配合字體大小設定所呈現的格式。下方我做了個 em實例,有機會可以去實驗看看。

Check out this Pen!

  最後介紹 px 這個特別的單位,他和上述兩個不一樣的地方是,他是基於電腦螢幕所發展出來的規格,定義在最小,但是是可以看見的一個單位下所創造出來的螢幕單位。而 px 這名字則是來自於 screen pixels。


  下面這張圖是 W3C 各種單位推薦的的使用方法。也可以參考看看。


參考資料: W3C - EM, PX, PT, CM, IN…

星期三, 6月 19, 2013

[RGBA] difference between index and alpha transparency

  今天稍微介紹一下 Index以及 Alpha 透明度的差異。首先我們先介紹 Index透明度, Index透明度我們以 GIF檔案舉例,一個 GIF檔案會分做兩部分: Color Table 以及圖像的資料。 Color Table 是一個用於此圖像的顏色列表,如果是 8-bit的 GIF圖檔,就會有2^8= 256種顏色在此 Color Table。每一個顏色都被分配一個順序的數字,如下圖表示。

  GIF圖檔對應到 Color Table的數值,而呈現 Color Table紀錄的顏色。如下例,其顏色索引是 008,而相對應的呈現的顏色就是 #d8d3de。


  在 Index透明度,每個在 Color Table的顏色都可以被設定是否要被設定為是否呈現為透明色,若指定為呈現為透明色,則輸出之後就會是透明色,如下圖。
  

Alpha Transparent
  那在討論 Alpha 透明,在 Alpha透明度,每個顏色在圖像當中都有一個 alpha的數值紀錄他的透明程度,所以他們呈現的透明程度是一種可以漸變的情況。我們可以從下面兩張使用不同透明色匯出的圖形知道差異。

GIF 索引色透明
Alpha透明

  我試著用工程師的角度解釋兩者差異,也很希望設計師朋友能以不同角度解釋補述,若有錯誤也歡迎更正。


星期二, 6月 18, 2013

[html] media object

  在 twitter bootstrap裡面有一種元件類別叫做 media object,其樣式就是一個圖像在左邊,而相對應的文字敘述在右邊。這種樣式真的現在到處在哪邊都用的到,當然若使用一些框架,單純直接遵照規定使用撰寫即可,但是如果沒有使用框架,為了之後好維護我把我自己訂的一個樣板分享出來給大家。


   Source Code: https://github.com/kvzhuang/public_html/blob/master/2013/media-object.html
  相信有更好的做法,也很歡迎各位給予意見指教。

星期四, 6月 13, 2013

[css] box model and box-sizing memo

  今天來討論入門討論 box-sizing這個css3的一個屬性,但是在知道box-sizing之前我們必須先知道什麼是 box model,這個目前在前端界很重要的概念。

  W3C的標準的 Box Model

  • Element 所占空間
  • Element 所佔空間高度 = content 高度 + padding 高度 + border 高度 + margin 高度
  • Element 所佔空間寬度 = content 寬度 + padding 寬度 + border 寬度 + margin 寬度
  • Element 實際尺寸
  • Element 高度 =  content 高度 + padding 高度+ border  高度
  • Element 寬度 =  content 寬度 + padding 寬度+ border  寬度
  IE6有特別的算法
  • Element 所占空間
  • Element 所佔空間高度 = content 高度  + margin 高度
  • Element 所佔空間寬度 = content 寬度  + margin 寬度
  • Element 實際尺寸
  • Element 高度 =  content 高度 (包含了 content,padding,以及 border)
  • Element 寬度 =  content 寬度 (包含了 content,padding,以及 border)
  我繪製了圖片,很清楚說明兩者差異如下。


    Box-Sizing

  接下來進入主題,介紹 box-sizing,他有三種屬性:  content-box,padding-box,以及 border-box。從下面的實際範例很容易可以看的出來三者的差異(感謝 Kuro提供,建議使用 Firefox瀏覽)。

Check out this Pen!


div{
    border: 10px solid #000;
    width: 50px;
    height: 50px;
    padding:10px;
    margin:10px 0;
    background-color: #fff;
}
.content-box {
  /*width = content width+padding+border*/
  /*width = 50+20+20 = 90 */
}
.padding-box {
  /*content width only 30 + padding(20) = 50*/
  /*width = 50+20= 70*/
  margin-left: 10px;
}
.border-box {
  /*content width only 10 + padding(20) + border(20) = 50*/
  /*width = 50*/
 margin-left: 20px
}
.content-box{ 
  -moz-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 
}
.padding-box{ 
  -moz-box-sizing: padding-box; 
  -webkit-box-sizing: padding-box; 
}
.border-box{ 
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box; 
}Check out this Pen!
 
  通常元素預設為 content-box,此為保留 W3C的標準 Box Model的行為,其寬高的設定,即是內容的寬高,而元件的寬高則是再加上 padding以及 border。
 
  border-box則是會把元素的寬高計算包括 padding以及 border,所以上例設定寬度為 50px,實際上 padding左右佔掉 20px, border左右占掉20px,實際內容寬只有10px,,根據 Kuro提醒 Chrome的 input type="search" 預設為 box-sizing: border-box。

  而 padding-box則是其寬高的設定會把padding算進去,而不算border,所以設定寬度為50px,padding左右佔掉 20px實際內容寬度就只有30px了。



參考資料: Mozilla Developer Network: box-sizing


星期三, 6月 12, 2013

[html] difference between alt and title

  最近在幫人上課,有人提到, alt以及 title的差別,我稍微整理了一下。

  根據 W3C recommendation "alt"代表著 alternate text 當使用者的圖檔(img tag)如果無法讀取時,替代性會呈現的文字;或是表單輸入( input type="image"),以及 applet無法讀取時的替代文字。"alt" 在 W3C Markup Validation 是必要存在的屬性(感謝 Kuro Hsu補述)。

  而 title則比較是提供提示型的資訊。例如游標移上去的提示訊息。

  以 google search的 googlebot會比較以 "alt" 作為 SEO的搜索的資料。所以如果有想要被 Search Engine搜尋到的話,可以稍微注意一下 "alt" 屬性後面帶的值。

  下方是測試 SEO的實驗內容而已,大家可以忽略。

http://lab.kvzhuang.net/test/2013/seo-test1.html  http://lab.kvzhuang.net/test/2013/seo-test2.html

星期五, 6月 07, 2013

[life] 前端工程師的正確心態

  最近 Front-End Developers Taiwan有人在問想要成為前端工程師,其實小弟也還一直在這領域學習摸索中,抱持著分享的心態提供一些建議給想要從事這領域的朋友。


  • 首先要有追求細節以及原理的心,前端工程師本身的工作多數時間會糾結在 HTML標籤,CSS樣式,以及 JavaScript的行為。若不懂原理根本只懂複製貼上 jQuery的程式碼,卻不懂裡面的 this在每一個階段表達的意義,這樣也難怪很多人說前端工程師只是做網頁的,也是前端工程師常常被輕忽的原因,所以要知其原理而撰寫。

  • 再者要有一定的後端技術,資料庫技術。前端工程師乃是連接視覺設計師與後端工程師的楔石( Keystone),並非前端工程師就不需要知道後端的技術,資料庫正規概念,應用程式介面設計( API Design),資訊安全防護都是需要的基本常識。

  • 必要有溝通能力,由於是連接視覺與工程師的楔石與橋樑,討論是難免的。若不能夠很清楚的表達清楚在擔任前端工程師是有其阻礙的,做好良性的溝通是最重要的事情。

  • 要有實驗精神,我們面對的是極具挑戰性執行平台,五花八門的瀏覽器。而且外界對我們的期望是這些主流瀏覽器都要能夠運作的順暢,所以其實要常常對一些未知的問題做一些原型( prototype)的實驗。

  這是我一些還在學習的心得,跟大家分享。


[JavaScript] Prototype Chain

  這次延續上次的 prototype,稍微討論一下 prototype chain。這也是 JavaScript很特別的繼承方式下的方法。我參照 Professional JavaScript for Web Developers - Nicholas C. Zakas的 prototype chain的範例實作以及圖片說明如下。

function SuperType(){
  this.property = true;
}

SuperType.prototype.getSuperValue = function (){
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

var instance = new SubType();
window.console.log(instance.getSuperValue());Check out this Pen!


 
  我們有兩個類別 SuperType以及 SubType,都各自有其屬性跟方法。其差別在於 SubType有新增一個 SuperType的 instance並且指定為他的 prototype(Line 11)。這差異也造成三個地方要注意:

  1. 上圖有了  SubType Prototype 的 __proto__到 SuperType Prototype這個連結關係,而原本在 SuperType存在的屬性跟方法也同時存在 SubType.prototype。

  2.  getSuperValue()這方法仍然在 SuperType.prototype物件當中,那是因為我們宣告他是在 SuperType.prototype當中。而 property則會在 SubType.prototype這個物件當中,是因為他是 instance物件,隨著 new 的物件而存在,我們宣告了 SubType.prototype = new SuperType(),其 SuperType的  this就相當於 SubType.prototype (若要更加延伸探討原因可以參考 [JavaScript] Conditions of this object)。

  3. 同時也注意一點就是 instance.constructor指向 SuperType,原因是 SubType.prototype的 constructor屬性也被複寫過去而重新指向到SuperType了。

  Prototype Chaining 延展了 prototype搜尋方法跟屬性的機制,若在讀取一個 instance的屬性或方法的時候沒有被找到,會往他的 prototype繼續搜尋。在此案例當我們呼叫 instance.getSuperValue()時候會有三個搜尋的步驟: 1) instance ->2) SubType.prototype->3) SuperType.prototype。

  Default Prototypes

  在 JavaScript的 Reference Type都繼承自 Object,所以上述範例實際上會是下圖(參考Professional JavaScript for Web Developers Chapter.6 Object-Oriented Programming)。當我們呼叫 instance.toString(),實際上是呼叫 Object.prototype的 toString()方法。

  延伸閱讀: [JavaScript] Prototype Memo

  Prototype的觀念一直是 JavaScript蠻值得探討的一個話題,文章若有敘述不清楚地方歡迎大家找我討論,也歡迎大家指教補述。

星期二, 6月 04, 2013

[JavaScript] Prototype Memo

  大家好,這次來探討 JavaScript的 Prototype。老實說在很多地方都有討論這個功能,我自己本身也對這個 JavaScript使用的繼承方式想要探討一番,我用我的方式解釋一次,也希望大家不吝指教。

  首先  Prototype又稱為原型,使用方法我做了一個範例如下。左邊是沒有使用 prototype的方法,右方是使用 prototype進行的方法的差異。(感謝 Vexed的投影片指點。)可以發現使用 prototype所製作出來的 instance屬性跟方法會使用相同的記憶體區塊,這代表這當我們若改變 Person()的 prototype的內容以及方法,其 instance的值也會跟著變動。

  流程上,當上述右例的 Person()被建立的同時 (第一行 function Person (){}),他的 prototype屬性也被建立起來。其中 Prototype的 Constructor也被建立起來,並且指回 Person (如下圖),在這個例子裏面, Person.prototype.constructor 指向的是 Person。如下圖我參照 Professional JavaScript for Web Developers - Nicholas C. Zakas做了其 prototype的示意圖。


  由圖可知 Person的 prototype指向 Person.prototype,而 Person.prototype.constructor也指回 Person,形成一個LOOP。也知道被 new出來的 instance有__proto__屬性, 雖然 __proto__並不能夠直接被存取,我們可以透過 isPrototypeOf來證明上面的關係的正確與否。可以在 console試看看答案會如下。


  • Person.prototype.isPrototypeOf(p1); // true
  走過一次之後大概對 prototype有比較清楚的概念了,下次會介紹 prototype chain的概念。




星期二, 5月 28, 2013

[Git] 讓你的 Github跟公司的 Git分開

  平常我自己會用 Github放一些我做實驗的網頁工具,而公司也用 Git來做版本控管。當然第一次執行git commit的時候, git會請你輸入你的電子郵件跟姓名,這時候就兩難了。輸入公司的,Github就沒辦法有自己的紀錄在,就是在 github的 Your Contribution (很多塊綠色點點)就會是以公司的帳號而不是以你個人的帳號了,用自己的電子郵件,在公司看git 紀錄應該會被釘。

  所以可以在第一次 git commit輸入自己的,然後再到公司的下面輸入個別的公司的帳號。其指令就是。

  git config [--global | --local] user.name "Your Name"
  git config [--global | --local] user.email "yourmane@domain.com"

  --global就是全體的設定值, --local的就是個別的設定值。  你也可以手動到各個 repository的 .git下面修改config檔案。在最後加上:

  [user]
          name = Kevin Zhuang
          email = kvzhuang@gmail.com

每個 repository就有不同的帳號了。



星期一, 5月 27, 2013

[JavaScript] typeof memo

  可以使用 typeof來判斷變數宣告,以避免在某些情況下不確定此變數或 Member存在導致 JavaScript中斷。


  • if (window.android.changeId) {} 
    • 若window沒有 android或是 底下沒有changeId的方法時候,JavaScript會中斷執行
  • if (typeof window.android !== "undefined" &&typeof window.android.changeId !== "undefined") {}
    • 可正常判斷是否有此 Member或是變數。
  也可使用 typeof(window.android),作用一樣。

[Closure] JavaScript使用 Closure模擬出 Private Member

  JavaScript裡面其實並沒有 Private Member的概念,(至少在EMCAScript 4),那如果我們要實作Private Member要怎樣實作呢? 可透過 Closure來完成。

function person (){
  this.age = 10;
  this.name = "Kevin";
};
var p = new person();
console.log(p.age + ":" + p.name);

function person_closure (age, name) {
  this.getName = function () {return name; };
  this.setName = function (newName) {name = newName; };
  this.getAge  = function () {return age;};
  this.setAge  = function (newAge) {age = newAge;};
  
}
var p_c = new person_closure(10, "Kevin");
console.log(p_c.age + ":" + p_c.name);
console.log(p_c);
p_c = null;Check out this Pen!


  如上方例子第一個例子由於沒有使用 Closure來達成 Private,只要打開瀏覽器的 debugger都可以觀察的到裡面的欄位。而第二個 person_closure透過參數傳入 age以及 name也只能使用 getter以及 setter方式存取變數值,進而達到 private 變數。

  最後稍微提醒一下,Closure容易造成記憶體無法釋放的問題,在此例 age,name會一直存在記憶體。所以我最後設定 p_c = null讓瀏覽器回收記憶體。

  這是我參考MSDN JavaScript: 使用物件導向技術來建立進階 Web 應用程式所做的案例探討,也歡迎大家來信更正。

延伸閱讀: [JavaScript] Closure 概念


星期日, 5月 26, 2013

[JSDC] 【JavaScript忍之道特別企劃】JSDC心得分享

  小弟我有上報耶,雖然只有一小段而已還是很開心就是。

【JavaScript忍之道特別企劃】JSDC心得分享


小莊
JSDC志工/前端工程師

前端開發是未來的趨勢,而JSDC在促進JavaScript的產業、人才、社群的結合很努力,因此認同這些想法,才會想要投入擔任志工。這次擔任場控,雖然很忙很累,但也因此認識許多國際級的大師,收獲很多。

星期六, 5月 25, 2013

[Linux] Amazon EC2 Step-by-Step 試玩心得




  最近小莊電台一直有問題,總覺得快差不多了。加上我自己也想找個雲端放我一些實驗性的程式碼,就看 Amazon Web Sevice打廣告打很兇就來玩看看了。主要目標,架設 apache2,php5,以及把 github上面的 nodejs抓回來編譯就好了。

  申請到還蠻簡單的,我稍微列出幾點要注意的地方就好了。我是使用 ubuntu 13版32位元,由於怕被收費請記住開 Micro就好,如果你要在 Conference Demo再開到 Extra Large。

  • 架設過程會產生一組  pem的 key,可透過 puttygen的 Import Key匯入轉換為 ppk檔案讓 ssh能夠和 AWS連線。

  • 開啟 putty 輸入你的 aws 分配給你的 domanin name或是ip,然後選擇 private key進行驗證。



  • ubuntu請使用 ubuntu帳號登入,登入後請用 sudo passwd更換密碼。(這應該是常識吧)
  • 在 AWS的 console有一個 ec2-xxx-xxx-xxx-xxx.us-west-2.compute.amazonaws.com,那個xxx-xxx-xxx-xxx則是你的 IP,為浮動的,請到左邊功能列的Network & Security -> Elastic IPs進行調整。 (感謝 Study提醒)
  • AWS預設只有開 SSH 22 port,請到 Network & Security -> Security Group調整。(80 或其他port)

  • 然後使用 sudo apt-get install build-essential安裝編譯工具。 (感謝 Study提醒)
  • sudo apt-get update, sudo apt-get upgrade。
  • sudo apt-get install apache2,sudo apt-get install php5。
  • sudo apt-get install git ,抓nodejs回來編譯即可。
 另外推一下我們公司的 linux-config: https://github.com/kvzhuang/linux-config。只要執行一行程式都幫你的zsh設定安裝好好的。






星期三, 5月 22, 2013

[CSS] pointer-events

  今天在 Front-End Developers Taiwan社群看到有人問 css3 的 pointer-events,感覺還蠻有趣的,就稍微研究一下。

  我自己實作了一下有點像是透過 css 達到 JavaScript的 preventDefault或是拖拉效果的功能。其主要常用的兩個屬性為 auto 以及 none,若設定 pointer-events: none主要達到下面四點功能:


  • click 功能失效。
  • 指標重置回預設樣式。
  • hover以及 active樣式均失效。
  • JavaScript 點擊功能失效。


JS Bin

  各位也可以去玩玩 google map的地圖圖層的控制項。原本下方這一塊 div是無法拖拉的,只要設定 pointer-events為 none就可以拖動下方圖層。不過上方控制項也不能夠操控了。(感覺是有點無力的豆知識就是。)

  目前 pointer-events在 ie支援不甚理想,有人列出整理表 - Can I use pointer-events?


星期二, 5月 21, 2013

[Tools] 挑色碼不求人好工具 Kuler

  這次在 JSDC聽到 UP Chen介紹了一款由 Adobe 出的挑色碼好工具 - Kuler。使用方法很簡單,輸入一個色碼或是上傳一張圖挑選其中一區塊得色碼。此工具會根據你輸入的色碼找出連續的色票出來。這樣我們很多時候再選取色票就不求人啦!

  我拿我們公司首頁基本常用色塊舉例,我取出色碼#78D5DC

  
  然後到 Kuler點選 Create,在下方 Base Color輸入色碼選擇一個你想要的 Rule即可取得一連串相關色票,其他還有許多功能大家快去嘗試阿。






星期一, 5月 20, 2013

如何跟老闆推廣前端團隊

  最近在 Front-End Developers Taiwan 有人問到如何在台灣跟老闆推廣前端團隊,這真的是超級大哉問阿,我稍微分享一下小弟的一些想法給各位參考。

  首先是向上管理,你要知道老闆或高階主管的屬性,他們是屬於傾聽者(Listener)呢? 還是閱讀者(Reader) 或是簡報瀏覽者。知道他們的偏好吸收知識的屬性才能夠投其所好讓他們慢慢接受你的觀念跟建議。(當然如果你的老闆是不聽者,我會建議你快點跑。)

  第二步老闆們考慮的往往是成本與績效問題,導入前端工程師對團隊有什麼好處? 如果結論只是增加成本,那應該沒有老闆會願意推動的。我建議可以舉幾個例子給老闆們看。
  小弟還在陸陸續續收集各種案例,都顯示台灣前端界是越來越受到重視的一個產業。在技術上有助於橫向的工程師以及視覺設計師溝通,成立前端團隊的確對公司產值有正面幫助。

  第三步你就是前端傳教士,我自己除了公司有前輩教學,自己也非常要求自己學習前端各種領域,並且盡力和同事分享,並且和公司視覺設計師溝通,傳教設計與開發的等好用工具不要把自己局限在工程師這個範圍當中。千里之行始於足下,你不做也沒人會開始做啊! 

  一些心得和大家共勉之。

[Language] 語言的特性- 談論前端致勝

  今天在跟前同事 Ash Wu吃飯聊到為啥感覺做前端寫 JavaScript的工程師好像比較熱血? 例如 Josephj , Node.JS 台灣的招集人 Caesar Chi 還有我好像都有一股熱情存在?

  很好奇的原因為什麼? 是語言的特性? 是什麼原因呢? 我思考後之後提出一個可能的原因。前端工程師創造出來的成果本身是要感動人心。因為你的成果可能直接的感動到看網頁的另一端的使用者,進而創造出價值,也因此往往相對比較其來更直接的面對到使用者的感受。


  我舉個例子 - 歐巴馬募款網站的製作過程,裏頭提到 :
競選總部決定,網站必須改版,盡一切可能爭取捐款。於是,技術團隊開始大規模的擴充,全職的前端工程師從1個人擴充到了14個人,其中6人專門負責製作募款頁面。
 透過前端工程師的技術達成了感動人心進而改變了世界的成果,還有比這更有成就感的軟體工作麼? 或許這也前端工程師的一種小小特性吧,願大家共勉之!

  最近朋友獻給我四個字,我也獻給大家就是"前端致勝"。


[JSDC] 擔任義工的心路歷程

  大家好,我是小莊。就是那個國際會議廳站在角落看著講者議題的小小工作人員之一。這次為什麼會來 JSDC呢? 原因沒有別的,就是想要燃燒自己的前端魂。

  志工總共有兩個行前會,第一個行前會算是總召強哥希望大家聚再一起介紹一下場地以及職務,第二次是布置場地行前會。第一個行前會嘩啦啦的雨下超級無敵霹靂世界大,還大清早的從被窩裡爬起來。幹部還來信請大家務必路上小心再過來,出席率也還是很高。

  五月十七號第二個行前會就是搬東西大會以及整理名牌大會,很令我懷念起大學時代的營隊生活就是。男生就是這時候好用阿!

  五月十八號早上六點半準時出發! 小弟跟負責國際會議廳,基本上開場大部分都會是由 TonyQ或是強哥開頭所以就是讓他們安心上場。

朋友遠拍我跟TonyQ


 國際會議廳最爽的就是有 Keynote拉,馬上就見到國際級的大師,目前現任 Amazon Web Service的 Joe Ziegler (第二天趁地利之便還跟他拍了照片)。


  第二天的 Keynote 是由的 Josephj (Awoo),雖然在工作常常碰面,但是特殊場合還是要拍張照片紀念一下的!

  Josephj的 Keynote老實說只有一個精彩可以形容,很值得身在軟體業界的各位一看! 我轉貼一下連結如下 - F2E, the Keystone 前端工程師 - 軟體開發與設計不可或缺的角色。前端產業正如 Josephj投影片敘述的在一些資訊產業當中還沒有被真正的被意識到其重要性,也因此我們也義無反顧的站出來推廣前端技術。像是 JSDC.tw 以及下面的三個大型技術社團- JavaScript.tw, Node.JS台灣以及 HTML CSS3台灣,都是很努力地在推廣前端技術。

  而小弟我也建立了一個 Front-End Developers Taiwan 的社群並且邀請了上面三大技術社團的幹部擔任管理員。原因是我希望除了從社群帶動技術的角度去推廣給開發者以外,也能夠讓產業,企業看到有一群開發者在前端凝聚了一股力量並且持續成長中。

  這次 JSDC讓我感覺到產業跟社群以及開發者更緊密的結合再一起了,這是良性的循環。企業透過社群能夠找尋到優質的開發者以及做到的技術的傳教,開發者透過社群能夠把技術跟產業結合再一起,社群也能運作得越來越健康成熟。

  最後尾巴是遇到輔大好久不見的朋友 Allen Own以及在他介紹下認識的設計大師 Even Wu。我很常拜讀 Even Wu先生的文章,這次能夠見到本人留下紀念也是非常開心。



星期日, 5月 19, 2013

Front-End Developers Taiwan

  這幾天參加JSDC, 相信這一兩天我會貼上完整心得敘述整個心路歷程。

  不過在這邊我先推廣一下Front-End Developers Taiwan!

  我們努力推動台灣的前端產業,歡迎大家加入啊!

星期四, 5月 16, 2013

[browser] DOMReady, DOM Load - window.onload

  今天跟同事討論到瀏覽器的觸發事件 DOM Ready 跟 DOM Load - window.onload以及若有子模組的時候應該安排在何時觸發?

  我先稍微解釋一下 DOMReady以及 window.onload。


  • DOM Ready : 瀏覽器上面的 DOM 物件建立完成。
    • 適用時機: 適合那些只需要對 DOM 做基本增刪修改操作的。(TonyQ補述)
  • DOM Load - window.onload: image, css等頁面物件載入完成。
    • 適用時機: 適合圖片或之類會有內容大小二次變動的 需要在特定時間抓,或是像 iframe 需要讀取頁面完成做事件。(TonyQ補述)
  • 正常情況下 DOMReady會比window.onload, 不過在老瀏覽器若有快取情況似乎 windows.onload有可能會比 DOMReady來的早,此情況目前應該是不太可能會發生了。


  若有子模組的話 YUI有 ContentReady的事件可使用,子模組DOM TREE建立完成就觸發事件,所以其執行順序就是 ContentReady -> DOMReady -> window.onload。

  如果其他框架如 jQuery相信也有其他的事件可使用,也歡迎來信留言指點。