星期二, 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的概念。