星期二, 3月 19, 2013

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

星期四, 3月 07, 2013

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

星期一, 3月 04, 2013

[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應該要知道的原理.