[公告] 網誌搬家

各位好，最近把網誌搬到 - http://kvzhuang.logdown.com/ (其實已經搬了一段時間了)。

是個很不錯的部落格，歡迎大家多多瀏覽推薦阿。

之後會把網域也一併搬過去。

[COSCUP] 2013 COSCUP 參與心得

  這次參加COSCUP是我第一次參加。雖然我本身專注前端技術，但是其實本次的議程我並沒有只關注前端的議題，反而到處去看 Open Data，零時政府的議題。我才發現一個感覺是，我們並不是一群關上門來寫程式的人。我們十分關注時事，關切社會。

g0v.tw 高嘉良臥病仍不忘撰寫程式碼。(圖取自 inside.com.tw)

  這次的議題到處可以看到和時事相關的議題，拆政府，國防布。CLKao也有一句讓我印象十分深刻的話"政府應該停止使用網頁點擊率當作績效的KPI，而是資料的使用率做為績效的KPI"。

  文人使用文字改變社會，程式設計師使用程式碼改變社會。 Code 不再是只有社會的高級分子，立法委員能夠撰寫，你我都能夠參與改變社會，是我這次參加活動最大的感動。

零時政府網站
如何參與零時政府 g0v hackpad

  還有我在師大資工研究所老師，中央資工副教授鄭永斌老師也上台說 Lighten talk，表達他對希望資工所甄試有所變革的期望所下的行動。都是令人十分值得推廣的。

[人文] 驚喜合唱 101 Flash Mob Chorus in Taipei 101, Taiwan

  最近看到朋友分享了一個驚喜合唱 101 Flash Mob Chorus in Taipei 101, Taiwan。就很想要幫忙宣傳一下，真的會令人感動的台灣情!

  大家也可以幫忙轉貼出去啊! 台灣人就是那麼熱情有感情的民族。

[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…

[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透明

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

參考資料: What Are Index and Alpha Transparency?

[html] media object

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


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

[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

[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

[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蠻值得探討的一個話題，文章若有敘述不清楚地方歡迎大家找我討論，也歡迎大家指教補述。

[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的概念。

[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就有不同的帳號了。

[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 概念

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

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

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


小莊
JSDC志工／前端工程師

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

[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設定安裝好好的。

[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?。

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

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

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

  

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

如何跟老闆推廣前端團隊

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

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

  第二步老闆們考慮的往往是成本與績效問題，導入前端工程師對團隊有什麼好處? 如果結論只是增加成本，那應該沒有老闆會願意推動的。我建議可以舉幾個例子給老闆們看。

• 歐巴馬募款網站的製作過程
• 透過前端工程師感動人心進而達到2.5億美元募款
• 上帝就在細節中，Amazon怎麼讓「下拉式選單」反應超級快
• 零售業界的空降單位 Amazon在資訊界如何重視前端細節以搶攻市場。
• 好房 House Fun
• 本土相當重視前端技術的房仲銷售網站
• 進軍4G 鴻海積極布局八屏一網一雲
• 鴻海也很重視前端技術，聘請講師授課。
• 八屏一雲時代來臨 教你HTML5六小時打通(1)
• 八屏一雲時代來臨 教你HTML5六小時打通(2)
• 八屏一雲時代來臨 教你HTML5六小時打通(3)

  小弟還在陸陸續續收集各種案例，都顯示台灣前端界是越來越受到重視的一個產業。在技術上有助於橫向的工程師以及視覺設計師溝通，成立前端團隊的確對公司產值有正面幫助。

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

  一些心得和大家共勉之。

[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先生的文章，這次能夠見到本人留下紀念也是非常開心。

Front-End Developers Taiwan

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

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

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

[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相信也有其他的事件可使用，也歡迎來信留言指點。

[Music] 卡比牌手工USB音效盒

  我喜愛音樂! 所以在經濟可以容許的範圍內偶爾也會買些小裝備，滿足自己耳朵音感的慾望。 之前買了 Denon c400，最近在朋友卡比的友情贊助下請他手工幫我製作了一個全世界獨一無二的 USB音效盒。

  只要插上USB就有很不錯人聲以及配樂，鼓聲的感覺也很清楚分明。其內容是使用飛利浦荷蘭製老電容還有首次嘗試的銀膜雲母電容，濾高頻雜訊用。下面貼照面炫耀一下內容，還有 LED燈! 可惜外殼是塑膠殼,一包覆起來就看不到內包裝了。

  目前不接受預訂，這也算是製作者的堅持吧。若商業化就會失去了一些靈魂了。

[Category] 我的前端文章彙總

  近期我在公司指導新進 F2E員工, 途中參考 Awoo (Josephj)的 f2eclass.com. 但是後來發現, 在做很多教材補充的時候, 我的部落格儼然也成為一段心路歷程.

  由於在接受 Awoo前端指導的時候我自己也下很多工把所有認為該知道的東西我都自己補充上來, 才老王賣瓜的會把這些連結寄給新同事吧.這邊我自己也做個分類分享給大家, 雖然是一些基礎.但是就像我說的前端就在細節與基礎當中.

• [CSS] 如何使用 white-space
• [CSS] 如何計算 css selector的優先順序
• [CSS] Display筆記
• [CSS] Z-index筆記
• [CSS] Clear:both 範例

• [JavaScript] Bubble 以及Capture的事件處理範例
• [JavaScript] Object-Orient 筆記
• [JavaScript] KeyEvent 操作

• [JavaScript] [進階] Closure 概念
• [JavaScript] [進階] Drag and Drop 實作 I, 實作 II
• [Layout] 960 Grid System

  Keep writing!

[JavaScript] Conditions of this object

  各位好, 又再一次介紹 this 物件. 這是重點放在 this 物件會出現的情況. 我列出我常使用的四種情況.

出現情況	this 說明	範例程式
物件方法的呼叫	呼叫方法的物件  (Caller)	var obj = new Object();  obj.id = "test";  obj.findThis = function(){ alert(this.id)};  obj.findThis(); // this is obj.
Global Function 呼叫	window,  strict mode is   undefined.  Caller is window	function test(){ 　alert(this);  }  test();
使用 new產生一個 instance	就是 這個物件本身	function test(){ 　　alert(this)  }  var o = new test(); //this is o
使用 Apply, Call呼叫函數  帶入第一個參數值改變  Context.	被改變的 Context值	function test(){     alert(this.id);  }  var m = {id: "m"};  var n = {id: "n"};  var o = {id: "o"};  o.fn = test;  o.fn.apply(m); // this is m  o.fn.call(n);    // this is n

  我們可以說, this 物件重點在於 caller. caller代表著 context, 在大多數情況下也代表著 this.如果有缺的部分或是我有敘述錯誤的地方歡迎來信補述!

  補充說明: [JavaScript][OO] this object memo

Reference

Ref.1 [MSDN] JavaScript: 使用物件導向技術來建立進階 Web 應用程式

[Java] Set, Map and List

   在Java當中的資料型態Set 以及Map,以及Linked List 跟ArrayList的差別 

首先我先列出Collection 跟Map的大致架構

Collection 
├List 
│├LinkedList 
│├ArrayList 
│└Vector 
│　└Stack 
└Set 
Map 
├Hashtable 
├HashMap 
└WeakHashMap 

• Collection 為基本的介面, 定義了一些基礎操作, 一個 collection代表一組物件 (objects). 有些物件可以重複有些不行. 有些可以排序有些不行.

          不過基本上又分做兩類, 一個是 List一個是 Set.

• List 為有順序性的 Collection, 也因此允許重複的物件存於其中.

• LinkedList 繼承 List, 他是雙向的 List(FIFO, FILO), 也因此可透過他實作 Stack, Queue,不過 LinkedList並沒有使用 synchronize方式存取.

          可用此方式操作　List   list   =   Collections.synchronizedList(new   LinkedList());

• ArrayList 實作了 List, 然而也提供了動態陣列大小的操作 (這邊我自己覺得有點類似C++的動態陣列),如 size, isEmpty, get, set, iterator, listIterator operations均是常數時間,然而add則是O(n).

          同樣他也是沒有使用synchronize方式存取.

• Vector 跟 ArrayList類似, 不過他是有進行同步處理的,因此要處理 ConcurrentModificationException,此exception.

• Stack 繼承 Vector, 並且提供了一些額外的方法, 如 peek.

• Set 不能包含重複的物件, 即是兩個物件 objec1, object2同時存在此set的話, 則o1.equals(o2)則為false.

  下面則是 Map分類.

• Map 提供Key->Value的對應關係, key不能重複, 一個 key對應一個 value(object), 這邊我們常用所謂的 keySet(), 就是代表 Map當中的 key只能唯一.

• HashTable 實作了 Map,提供了 Key-> Value的方式, 而且他是同步(synchronize)的!

• HashMap 跟 HashTable類似, 不過他是非同步可進行存取的.

• WeakHashMap 跟 HashMap類似, 如果他其中的 key不再被引用,他將會被回收.

  如果要使用 Stack, Queue等實作, 若要快速插入, 刪除元件,應該使用 LinkedList, 若要快速存取其中物件,應該使用 ArrayList.

  而若沒有同步存取問題, 可以使用非同步的型態如 HashMap, 如果有就要用同步的資料型態.

[grid system] why grid system is 960?

  在前端界有個頁面設計寬度的共識, 叫做 960 Gird System. 主要目標若原型設計是根據 960 Grid System來設計, 實做或是整合到產品時, 這些排版設定跟 CSS可以很快速地符合原有的原型設計.我們這群前端工程師就不用很苦工的調來調去了!

  然而這就帶到第二個問題, 為何是960呢? 從 Nathan Smith 960 Grid System [ref.1] 這篇文章有提到 960是 根據 1024*768 以下的 magic number. 他是 1024寬度底下合理使用的大寬度, 又能夠被整除 ( 12等分, 16等分)的一個數值, 也因此選定了 960這數值.

Reference

ref.1  Nathan Smith, http://sonspring.com/journal/960-grid-system

[CSS3] How to make marquee by CSS3 animation

  這次要來探討如何使用 CSS3的 animation達成跑馬燈效果, 原因是原本的 HTML的 marquee標籤是非標準標籤 (refer from wiki), W3C也不建議使用囉. 所以乾脆自己用 CSS3的動畫效果刻一個.分享出來給大家玩看看.

  主要規格是當我  focus到一個連結後底下的字樣會進行跑馬燈的效果.使用到 CSS3的 animation跟 keyframe來呈現.當然有設定文字呈現最基本的 white-space以及overflow: hidden (這樣才有跑馬燈效果阿) .

Check out this Pen!

  透過 keyframes可以設定在動畫的秒數內文字的位置來做到跑馬燈效果, 算是很彈性的作法!

[JavaScript] Closure 概念

  最近跟 Vexed在討論 JavaScript的 Closure概念, 就參照了他的投影片加上自己參考 Nicholas C. Zakas的 Professional JavaScript for Web Developers以及 wiki當中的 Closure概念.自己試著講解了一次什麼是 JavaScript Closure.


  其實 Closure的定義就是一個方法能夠存取到非同一個scope的方法的變數. Closure在很多語言都有使用到, 而在 JavaScript當中是透過 Scope Chain去達成.

  下面這個例子很有趣, 很明顯的表達出 Scope Chain是 Lexical 分析時候決定, 而非 Execution time決定.

var arg = 1;   
 function funcTest() {   
      alert(arg);   
      var arg = 2;   
 }   

 funcTest(); 
 function funcTest2() {   
      alert(arg);   
      //var arg = 2;   
 }  
funcTest2();
Check out this Pen!

Mobile App Simple Classification

  引用Matt Legend Gemmell 的看法, Mobile App 分作下列四種

1. 明確在瀏覽器內運行的應用。
2. 由 home screen 啟動，運行在特定瀏覽器中的應用 (在啟動上有 native app 的味道)。
3. 運行在 native app 當中的 web view 的應用。
4. 純 native app，沒有 HTML / CSS 的介面。

  從這個角度來看，PhoneGap屬於第3類，而Titanium Mobile屬於第4類。 [ref.1]

  而PhoneGap跟Titanium的開發的實際差別在於:

  PhoneGap就是透過提供一個可以執行 HTML5 + CSS + Javascript 的 Container 來執行開發者所撰寫的程式，然後透過 和 PhoneGap 各自所提供的 API 來存取各手機作業系統提供的 API.

  而Titanium則是透過編譯的技術將程式碼編譯成 Native Code.

  以效率上 PhoneGap執行多一層會較慢,而 Titanium快.

  可是以相容性應該是 PhoneGap會比 Titanium好(因為要有各家的 SDK)

Reference

1. http://www.brownylin.com/2011/07/native-app-vs-web-app.html

2. http://www.arthurtoday.com/2012/07/titanium-vs-appmobi-vs-phonegap.html#.UDSTA93ibFw

[CSS] Calculation a selector's specifiicity.

  這篇文章其實是參照 W3C - Calculating a selector's specificity 應該會有點像是翻譯文章, 不過我會盡量白話的解釋如何計算 CSS的最後優先順序的數值, 並且呈現最後結果.

  我們把 css selector分做四類, 相對應有四個變數, 定義為 a, b, c, d.
  a for style, b for id, c for pseudo-classes, d for pseudo-elements.

  四個定義如下:

• 如果有設定值來自於 "style" 屬性設定 a為1, 由於這個規則並不沒有任何 CSS Selector的規則, 所以 a = 1, b = 0, c = 0 , d = 0.
• 如果 CSS Selector 有設定 ID 屬性, 則設定 b加一.
• 如果 CSS Selector 有設定 classes, 設定一個 c加一.
• 如果 CSS Selector 有設定 element names 設定一個 d加一.

  最後將四個數值串接起來 a-b-c-d.比較, 優先順序是a > b > c > d. 相通者比較下一級數字差異,若仍相同者後宣告者會覆蓋掉前方的設定值.

  我稍微修改了一下 W3C的範例加了一些自己的測試案例, 會更能理解 css是怎樣計算出來的.

*             {background-color:grey;}  
/* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li            {color:blue;}  
/* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {background-color:yellow;}  
/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul li         {background-color:pink;}  
/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul ol+li      {}  
/* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

h1 + *[rel=up]{}  
/* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

ul ol li.red:first-line {background-color:red;} 
/*a=0 b=0 c=1 d=4 -> specificity = 0,0,1,4 */

ul ol li.red  {background-color:cyan;}  
/* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level  {background-color:lime;}  
/* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#x34y         {color:red;}  
/* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

Check out this Pen!

[JavaScript] ESC block href issue

  最近 Awoo遇到個很有趣的問題, 我們需要再按下 ESC鍵之後, 轉址到其他頁面 (使用 location.href 等方式轉址). 在 Chrom以及 FireFox底下都沒問題.但是在 IE就是怎麼按都不願意轉.

  後來找到原因是 ESC在 IE的預設行為是中斷連線, 所以切換網址等指令也因此失效.所以只要加上此 event的 preventDefault (不執行預設行為)即可.

YUI().use('event-key', function (Y) {
  Y.one("body").on("key", function(e){
    e.preventDefault();
    alert("esc press");
    location.href = "http://codepen.io";
  }, "esc");
});
Check out this Pen!

  超級小細節,不過也是F2E應該要知道的原理.

[3C] 購買筆電心得,極不推薦崑碁資訊

  最近採購筆電,因為有朋友崑碁資訊就想說做個面子在哪邊採購, 沒想到其服務態度讓人一整個無法接受, 我直接把我的投訴信件貼出來讓大家看. 以便大家之後再採購筆記型電腦可以作為一個參考.


您好崑碁資訊

我是禮拜天在貴公司購買 Lenovo Y500的顧客,而這次的購買體驗讓我非常的失望.
首先,我也是資訊工作從事人員, 面對客戶我永遠秉持著專業態度,並且以我的專業為傲.

可是這次購買經驗,我完全感受不出貴公司從事人員的專業以及敬業精神.

有兩件事情我會隨時會掌握住就是客戶的時程以及對客戶的承諾.
以及不把客戶當作玩具耍的心態.
而這次購買經驗, 我完全感受不出專業度, 首先連最基本的交貨時程都都無法確切掌握.

我可以理解由於Lenovo原廠維修問題, 所以機器晚到.(我也並非因此而憤怒)
可是好幾次我聯絡我的購買窗口的手機沒有一次聯絡成功.
而打貴公司的電話, 也是要碰運氣才有人接到才有人幫忙轉.
而我主動詢問時間的結果(幾乎都是我主動詢問才會有回電), 往往得到的時間也都很不明確.

第一次是禮拜一下午 3, 4點.
第二次是禮拜一 8, 9點.
之後延期到禮拜二下午 3, 4點.
之後延期到禮拜二下午 8, 9點.
最後我決定要退訂了才跟我有一個比較明確的時間. 禮拜二下午 7點30.

而當我抵達那邊取貨時, 取貨的人員似乎根本不知道我的貨品在何處.
打了一堆電話跑了一堆地方才把我的貨品從某個地方搬下來.

而最後當我已經要脫離這場購買經驗噩夢之後, 貴公司的收納小姐打來說:
他發票金額打錯, 請問我能不能走回去跟他換發票.(好像因為月底了吧有點趕).
那請問一下有考慮上班時間來我公司跟我拿發票麼?

請尊重客戶的時間時程以及不要把客戶當作玩具耍. 這是我的結論.
我要求兩件事情, 第一 - 把我拆下來的8GB記憶體歸還給我, 這是我應該取回來的元件.
第二我要求金額 1000新台幣或等值的電子產品賠償, 老實說賠償不大.
我只是希望相關人士記住, 請尊重客戶, 尊重自己的工作.

[JavaScript] Drag and Drop implementation - Drop

  上一篇我們介紹 Drag and Drop的 Drag, 現在我們來實作看看Drop.的困難點會在哪邊呢? 我們就來討論看看.

  Drag and Drop操作主要分做三部, mouseDown, mouseMove 以及 mouseUp. 而 Drag則複雜的在前面兩個 (Down 跟Move). 所以 Drop自然就在 mouseUp囉!

  我本來一度很天真的以為有辦法透過 onMouseUp(event) 的 event取得 drop區域的物件. 結果實作才知道, 這 event指的是我們操作的 draggable物件. 所以要取得 drop區域這邊其實是要經過計算的, 才能算出我們到底有沒有丟到到我們想要的區域.
  下面是範例, 請大家點擊 edit on 點開來看會比較完整.

Check out this Pen!

  我們在一開始宣告一個變數存放 dropArea, 而在onMouseUp這邊我們增加了了判斷. 判斷拖拉的物件是不是有落在掉落的此在範圍的 offsetWidth跟 offsetHeight裏面.

  這個 Drag and Drop的範例的重點我大致擷取如下.

• 三個步驟
• onMouseDown
• onMouseMove
• onMouseUp
• onMouseDown: 取得滑鼠點擊物件的偏移量 ( mouseOffset 不然移動時候設定位置會錯位)
• onMouseMove: 
• 將拖拉物件 display設定為 absolute.
• {x,y} = 滑鼠位置-滑鼠點擊物件偏移量
• 滑鼠位置.x = event.clientX + document.body.scrollLeft - document.body.clientLeft
• 滑鼠位置.y = event.clientY + document.body.scrollTop  - document.body.clientTop 
• onMouseUp:
• 利用物件的 offsetWidth跟 offsetHeight計算是否落在 drop區域.

  當然 Drag and Drop作法很多種. 只是趁這次探討這問題的同時提出一種做法而已.

[JavaScript] Drag and Drop implementation - Drag

  之前有人問過我, 如果沒有 jQuery或是 YUI的函式庫, 要你實作一個拖拉的效果 (Drag and Drop)的效果,你會怎麼做? 好的問題比好的答案更為難得, 雖然時間有點久了我還是找時間自己思考了一下我會怎樣做.

  先從下面三個行為來思考, 首先就是要算出滑鼠的位置.這邊真的就是一門數學大工程了.

Ref.1 瀏覽器的各位置寬度屬性

  

  雖然有點這範例圖示瀏覽器版本舊了, 不過很多概念都還是可以使用的.

• onMouseDown: 將滑鼠點擊的物件取出.
• onMouseMove: 
• 設定滑鼠 style為 absolute.
• 計算滑鼠位置: mousePosition - mouseOffset
• x: (event.clientX + document.body.scrollLeft - document.body.clientLeft) - mouseOffset.x
• y: event.clientY + document.body.scrollTop  - document.body.clientTop  - mouseOffset.y
• mouseOffset: 設定物件為滑鼠的點擊後經過運算的位置 (請參考下方原始碼)
• 因為沒人知道使用者會點在物件的哪個位置上, 所以這邊要稍微計算一下.(使用offsetLeft跟 offsetTop做運算.)

• onMouseUp: 取消滑鼠物件,設定為NULL.

  這是 Drag的作法, 還有 Drop的做法待續.

Check out this Pen!

[Reference] 

[Ref.1] Browser client X scrollLeft client left
[Ref.2] Event对象的5种坐标

[CSS] how to use white-space

  最近在玩這 css屬性: white-space, 相信很多人在用的時候常常都是一知半解在玩他. 不過瞭解原理跟定義之後其實是蠻簡單的屬性. white-space有六個 property values, inherit是繼承父元件屬性值就不另外介紹, 下面跟各位一一就定義說明一下.

• normal: 連續的空白將會被合併為一個, 文字在容器內會合理的換行.
• nowrap: 連續的空白將會被合併為一個, 文字直到遇到 <br> 標籤才會換行.
• pre: 空白將會被保留, 換行符號 (line break)也會呈現. 效果類似 HTML的 <pre> 這個標籤.
• pre-wrap: 空白將會保留, 在容器內文字也會合理換行, 遇到換行符號 (line break)也會換行.
• pre-line: 連續的空白將會會合併為一個, 在容器內文字也會合理換行, 遇到換行符號 (line break)也會換行.

  下面我實做了這幾個案例, 各位可以觀察 第一句子後面的 Vestibulum這邊空白字元跟換行的情況, 就比較知道white-space的實際運作情況. 可以點擊右上角 Edit on CodePen連結顯示完整程式碼.

Check out this Pen!

[JS] keyCode for KeyDown, KeyPress and KeyUp

  之前就一直蠻困惑這問題的, 這次索性做個例子解釋一下原因.首先還是從最基本原理先解釋一下. 為求看得清楚,我這邊就使用 KeyDown, KeyPress 跟KeyUp 大小寫區分.

• KeyDown: 鍵盤按鍵按下去所觸發事件, 若一直按著, 就一直觸發. (合理! 因為一直按著字就一直出來.)
• KeyPress: 鍵盤按鍵按下去所觸發事件, 順序是先 KeyDown 然後再觸發 KeyPress.
• KeyUp: 放開鍵盤按鍵時候觸發事件.

  下面是我使用 YUI所建立的範例, 若執行可以很簡單看出來 KeyDown, KeyPress所回傳的 key code是不同的.
  而 KeyPress的 key code就是按鍵的 ASCII值. 而我們使用Shift去切換大小寫對KeyPress的key code有影響, 但是對 KeyDown沒影響 (以大寫的 key code為主).

• KeyCode範例

Check out this Pen!

• ASCII Table
• Key Codes - Helge Willum Larsen

  附註一點我試做了若持續按著鍵盤觸發, 擷取 KeyDown跟 KeyPress先後順序的記錄下來看, 發現其先後順序並非交錯執行( KeyDown-> KeyPress-> KeyDown-> KeyPress), 這是要注意的地方.

[JavaScript][OO] this object memo

  最近在跟Josehpj (啊嗚)討論 JavaScript的 Object Oriented 時候討論到 this 物件, 啊嗚有提到一段話,我直接引用如下:

JavaScript 在語言本身、模擬物件導向的開發中，this 都是很清楚的代表一個 instance。

把 this 搞複雜的原因，其實是瀏覽器特有的 DOM API。
像是 DOM Event、或像是 window.XMLHttpRequest 這樣的全域方法。
this 在對應的處理函式中都不會是所預期 instance。
這也是為什麼在 Y.on 或 Y.io 都有提供設定 context 的參數。
或者得自己去使用 call 或 apply 取執行 Handler、讓 Handler 正確處理。

如果今天開發的是沒有瀏覽器的 JavaScript，例如 Node.js,
this 通常是不會造成太大的困擾的 :)

  再說程式之前我先名詞解釋一下: "context", 何謂 context, 中譯最接近的意思就是上下文, 前後文. 常常我們看到一個句子會不太懂他的由來的時候, 若知道他的上下文, 我們很快就可以知道他的涵義.

  這邏輯推到變數也是一樣, 看到一個變數我們可能不太知道意義的話, 若能知道他的上下文, 大概就比較知道他到底是誰使用他了, 而下面例子當中所舉的的 this, 就是上面說的 context(上下文). 以程式舉例, 我後面有標 (1) (2) (3) 註解:

 on: {
   viewload: function () { 
      api = this;
      api.get(node).
         one('form').on('submit', _handleSubmit, api); 
      // (1).api is the context
    }
 }
 _handleSubmit = function (event) {
   var _api = this; //(2) this is api from (1) context
   _api.get(node).all('input');

   _enableForm.call(_api, arg1, arg2); 
   //(3.1) this _api is context
   _enableForm.apply(_api, [arg1, arg2]); 
   //(3.2) this _api is context
 }

  上述的範例說當一個模組在頁面載入完成要執行的 function call (on viewload). 當按下 Submit 按鈕送出之後相對應的handler (_handleSubmit) 會處理相對應的動作.

submit是 event的名字,  _handleSubmit是 callback funciton, 而第三個參數就是context了.

  而 (3.1) , (3.2)則是 JavaScript常拿來執行函式的方式.

  下方例子則是特別情況, 假設我有個物件 _api有 confirm的方法( 類似於 JavaScript的 confirm), 傳入message, 以及 callback. 而此時callback有需要 _api當其 context.則此時可以使用YUI的 Y.bind.

_api.confirm(message, callback); 
//callback will need _api as context

_api.confirm(message, Y.bind(callback. _api)); 
//callback will need _api as context

這次的 JavaScript this之旅真是學到不少東西啊!

[CSS] Display Memo

  大家好! 太久沒上來寫東西了,大家應該都忘記這邊了吧. 沒辦法, 最近真的是太忙了, (我絕對不會承認我買了 XBOX, AppleTV等有的沒的東西就忘記這邊了).

   標題這邊是來筆記一下 CSS的 Display 這屬性, 為何會想要筆記這屬性呢? 原因是看了  Evenwu的給網頁設計師的建議. 這篇文章, 才發現這些問題如果當下問我, 我可能也都會回答不出來, 可是包括 CSS reset, float 的 clearfix, 我其實每天都在用.

   這時候我就來問我自己原因, 為什麼我每天再用的東西, 別人換個角度問就回答不出來呢? 答案很簡單, 就是我底子還不夠紮實.所以今天就從很簡單的 CSS Display自己筆記一下囉!

• display: none 
• 設定元素在網頁上呈現消失掉. 我們常常會拿他和 visibility比較. visibility是不顯示, 實際上還是佔有空間.而display: none則是不占空間.
• display: inline
• 寬度高度均不可設定, 文字圖片均不換行, 內容的文字或圖片寬度即是他的寬度.
• 可以有 margin-left, margin-right, padding-left, padding-right.
• 但margin-top, margin-bottom, padding-top, padding-bottom, width, height, background 為無效.[ref. 1]
• 預設為inline的標籤有: span, a, input, img, em, i, b,iframe.
• iframe 不是block 讓我訝異了一下!
• display: block
• 可設定寬度高度, 所以就會以區塊方式呈現. 至於呈現位置則相關於position以及float的相關設定.
• 由於為區塊設定, margin, padding等範圍設定均可生效.
• 預設為block的標籤有: div, p, h1, h2...

 

       Display還有很多可討論的, 不過我覺得這三個屬性最重要, 若之後有研究的更清楚的話,我再把一些研究整理出來.

參考資料

Ref. 1 Vexed's Blog- CSS 屬性 display 的值 inline block inline-block none