E.J. BLOG

Archive for October, 2012

[Notes] MOPCON 2012

leave a comment

mopcon

剛從 MOPCON  回來,想說趁著對幾個議題還有些印象的時候記錄一下當時做的筆記:

  1. Registrano by hlb
    • 自訂表單 
      滿足使用者客製化的需求,這個困難點應該是在於如何把「使用者自訂的表單」儲存在現有的資料庫結構之下,應該要設計出一個特定(或統一)的格式(類似 JSON or ? )來達到真正的「客製化」。
    • 超賣
      票券類型的服務大多時候都會有名額上的限制,所以要避免超賣(Oversell )的問題。關鍵字:Table Lock, Row Lock, Unique Sequential Number
  2. Firefox OS by Cervantes
    • Gaia
      The UI for Boot to Gecko ( B2G ) ,前端工程師可以參考他們的 UI 設計細節
    • 備註
      給予 Web App 使用更進階 API 的權限來存取 Device 底層的資訊(Web App can work like Native App now )
  3. pjax by XDite
    • What is pjax
      HTML5 pushState +  ajax
    • 備註
      • 解決 ajax 動態載入但是無法 prev / next 的問題(因為透過 ajax 方式載入的內容是沒有辦法被記錄在 History 裡面的)
      • 解決 Twitter 以前透過 #! hashchange 的方式來達成 prev / next  但是不夠 SEO Friendly 的問題
      • jQuery pjax 可以依 browser 支援程度來做到相對應的 fallback,堪稱神器。
  4. 行動網路上 API 設計準則 by gslin
    • 前提
      行動網路上的先天限制,就是很容易斷線、不穩、電量不足、速度慢。
    • API redesign
      因為 device 的差異所以要調整 API 以降低 request 次數。實作則是可以透過 extra parameters 把額外的 API 做一個整合,雖然 dirty 但是可以省 request。要注意的部份有:透過某種 Serial 的值讓 Server Side 知道該 device 的某個一次性行為曾經執行過,以「確保」不會被重覆執行。
    • Atomic API
      對 mobile 的 API 設計時,要盡量以 Atomic 的方式設計,讓很多關聯性的動作 ( 例如開專輯、設定歌、 …  ) 一次做完,不要分開做。這個 Atomic 的思惟有幾個層面,就 Server Side 來說,只要回傳「必要的」資料就好,同時在傳遞資料前要先做一層壓縮以加快傳輸的速度,「即使」 Client Side 要多花 effort 來做解壓的動作,但是總比維持在一個「不穩定」的連線上面瘋狂 retry 好,因為總的來說,其相對所花的時間也會比較少。(請參考前提)

以上就是這次活動讓我收獲比較多的部份,也歡迎留下你的看法 😉

Written by EragonJ

October 31st, 2012 at 1:01 am

Posted in Notes

Tagged with ,

[Notes] CSS Cross-Country

leave a comment

Image Credit

最近為了讓自己保持繼續學習的動機,所以就很衝動的花了 25 USD 買了一個月份的 Code School 資格,而首當其衝的課程就是身為 Front-End 不能不了解的 CSS。

雖然不是說完全不了解 CSS,但是我很想知道如果是付費教學的話,它會怎麼樣「教」CSS 這種很難以捉摸的東西?(你說 CSS 簡單它還真的可以很簡單,但是在這著重視覺特效還有正在經歷瀏覽器大戰的世界,CSS 還是真的可以他媽的難。)

最後証實沒有白花錢,因為這個教材也直接切入很多 CSS 技巧的核心,都是我在外面亂撞好幾十次得到的慘痛教訓,除此之外也有一些我沒有留意過的細節,看完整個教材加上 Challenge 的練習之後整個就是對 CSS 的掌握更多了一點,以下就是我由 Level 1 ~ Level 8 覺得很重要的筆記:

  1. Non-Conflicting properties will be combined
  2. 浮動的元素如果超過了 parent 的寬就會被擠到下一個「可能的」位置,這個時候如果元素之間的高度不同,就會影響被擺放的位置(可以想像一下 Pinterest 的 Layout ,他不是依照由左到右的順序擺放格子,而是會去尋找「上一層高度最小」的位置去插入來達到不規則的瀑布流,它的演算法下次再來開新文章分享。)
  3. 同時有多個 float : left | right; 的元素「會依 DOM 的先後順序」來決定誰在最左或最右邊
  4. 如果子元素有 float 的話,要記得在 parent 設定 clearfix (參考 Bootstrap 很有名的 clearfix 方法,我在面試 T 公司的時候就是用這個方法來解決 floating 的問題)
  5. CSS 的 Specificity 計算( 0, 0, 0, 0 → inline style, # of ID selectors, # of class selectors, # of element selectors )
  6. 不要用 !important 讓未來的自己後悔 …
  7. Box Model 還有 width / height 的計算(因為和我們直覺想的完全不一樣,所以要留意。)
  8. 父元素 postion : relative 搭配子元素 position : absolute 是一個超重要也常用的排版技巧
  9. Z-index 要發揮效用的前提是該元素一定要被 positioned
  10. CSS property shorthands
  11. Block element / Inline element / Inline-Block element 的差異
  12. 置中 Block element 的方法 – margin : 0 auto;
  13. 置中 Inline / Inline-Block element 的方法 – text-align : center;
  14. Collapsing margins
  15. Content 用的 images 和 裝飾 Layout 用的 images 要用不同的形式呈現,前者建議是以 inline images 的形式,而後者建議是用 background images 的形式
  16. Image Crop with overflow hack
  17. 增加「說明用的文字」在要被 image 替換的元素上,利用 text-indent : -99999px 的 hack
  18. CSS Sprites 好處:減少和 Server 的溝通次數、避免 :hover 等事件出現閃圖的情況
  19. 善用 Pseudo Class (有些真的很強大 … )

以上,特別筆記一下!

Written by EragonJ

October 24th, 2012 at 1:21 am

Posted in Notes

Tagged with , ,

[Slide] Pipes

leave a comment

Few days ago, I shared a slide with teammates called Pipes. For me, I used it to communicate with Plurk and chose the JSONP response to conquer cross domain problems in JavaScript.

Written by EragonJ

October 22nd, 2012 at 12:32 am

Posted in Slide