E.J. BLOG

Archive for the ‘Notes’ Category

[Notes] Something you must know when fighting with IE7

leave a comment

Image Credit

全世界 Browsers 的使用率 (July 2012 ~ July 2013)

最近剛好有一些實戰機會可以和 IE7 來奮鬥,身為 FED 卻一直 skip 掉 IE7 好像不太好,有種沒有實戰過的感覺 xD … 現在想要把一些小細節記下來,希望能幫到想要和 IE7 奮戰的隊友們 xDD

δ 前情提要,如果是要解 IE6 的話 … 我只能請你自求多福。不過至少你能先叫做這個決定的豬腦去看一下微軟官方做的網站 IE6 Countdown,如果他發現自己做錯事的話,說不定問題就迎刃而解了呢 hahah。

奮戰流程:

  1. 如果你的作業系統不是 Windows 的話 (就算是 Windows 也是可以),那真的要先感謝一下佛心微軟放出來的 modern.IE ,因為你可以在上面找到各個作業系統上,各個虛擬化平台上內建好各個 IE 版本的虛擬硬碟。你就不用只為了測 IE 再來個什麼雙系統、三系統了,掛個 VirtualBox 就可以省下很多空間還有時間。( 因為我是用 128GB 的 SSD,所以空間有限,我個人的作法是把虛擬硬碟全部丟去行動硬碟上面,跑的很順也省下很多空間,可以參考一下)
  2. 在 fight with IE7 之前,先把戰力放在 Modern browsers。我特別去網路上找有關 browser 市佔率的各種資料,而資料整體上都是呈現出如本文一開始那張長條圖一樣的分佈。所以切記,時間就是金錢,特別是如果整個團隊就只有你這位 FED 的話,真的要先把事情都搞定後,再來打 Boss 呀。
  3. 終於要打 Boss 怪了,FED 們都知道(只有你家的 Boss 不知道) IE7 最強的攻擊技就是「完全沒有 Developer Tool」,這招真的強到讓人完全沒有還擊能力,因為通常 IE7 最大的問題就是 Layout 的不一致,尤其是對 IE7 完全沒有經驗的人來說特別如此,所以總是會很頻繁的手動調整 Layout。不過我找了一陣子後發現其實微軟有開發自己的 Developer Tool 給 IE7,只是並沒有內建在 IE7 裡面,而是需要自己手動下載來安裝,所以切記一定要先把你的 IE7 裝上 Developer Tool 呀。
  4. Let’s fight !!
  5. 特別開一個 IE7 fix,然後透過 Conditional Comments 來引入相關的 CSS / JS 檔案,這樣可以讓你原本的程式碼抽離於這些 hack 之外(我真的認為這些都是 dirty hack),所以不要 pollute 太多東西進去原本的 CSS / JS,這會造成維護上的困難也沒必要。
  6. 如果你使用到一些 CSS3 的東西像是 border-radius 或是 box-shadow 之類的屬性,記得搭配 CSS3Pie 來服用,通常可以解掉 90% 以上的 CSS3 問題,雖然好用但是要記得一些小事,就是有一些屬性只支援 shorthand version,請自行查閱一下 document 別寫得太開心到最後 Pie 看不懂就囧了。
  7. 通常 IE7 Layout 最大的問題是發生在 hasLayout 這個屬性上,根據 Sitepoint 這篇文章的解釋, 可以了解到這個是 IE 賦與元素的一個內部屬性,它的用處是「讓該元素本身及其孫元素(descendant)具有處理定位 (Positioning)及大小(sizing)的能力,而不是依賴於它的祖元素們(ancestors)」。而該文有列出幾個元素像是 img … 等。那為什麼會和這個屬性有關係?因為除了 IE 預設清單內的元素們具有這個屬性外,其他的元素是沒有這個屬性的,文章內有提到幾個常見的現象,像是「元素部分內容存在但是部分卻消失」或是「畫面只出現一半」。而要從 CSS 讓元素強制具有這個屬性有許多做法,最常見的做法就是設定一個 zoom: 1; 就可以了,這就是為什麼我們很常看到很多 3rd party libraries 在 CSS 中會加入這個東西的原因。不過這背後還有很多細節及一些奇特情況,可以參考微軟的這篇
  8. 如果你有使用 font-awesome 的話,請記得加入 font-awesome-ie7.min.css 的 hack,你會發現他都是在利用 zoom: 1; 來解 hasLayout,還有加入 innerHTML workaround 來解 IE7 不支援 pseudo element selector 的問題 xDDD
  9. 如果你有使用 bootstrap 的話(我是用 2.3),我發現如果用組合式 grid 來達成滿版的話(我這邊碰到的情況是 span6 + span6 或是 span4 + span8),整個 Layout 就會炸掉,所以要特別手動調整 width ,這邊要特別留意一下。
  10. 利用 zoom: 1;*display: inline; 來解原本被我們套用 display: inline-block; 的元素們(在 Modern browsers 我們用太習慣了,所以這個問題很多)。
  11. 如果你有用 <ul><li> 的話,不要用 list-style-image 來客製化他的樣式,因為如果有 position 上的需求,並沒有 CSS 可以直接控制這個值,可能會調到死,取而代之的你可以改用 background-imagebackground-position 搭配 padding 來手動 position,效果佳。
  12. … 未完待續

以上是和 IE7 奮鬥過的一些心路歷程,希望能幫到一些人,未來如果還有什麼有趣的狀況也會更新在這個清單內,Rock 😛

Written by EragonJ

August 15th, 2013 at 11:29 am

Posted in Notes

Tagged with , , , ,

[Note] Missing part in Jade template

leave a comment

Image Credit

I have used Jade template for few projects and I really like it ! Its simplicity and indentation are key features to me compared with the other template engines. But recently, I have to build a website which can change layouts easily ( maybe by backend settings or routes ) to extend. But after trial and error and searching from the internet, I have concluded that it is one of important features lost in Jade.

Yeah, it is called “Dynamic Inheritance”.

According to this issue, you can find out that this is a known issue right now in Jade because of performance issues. (when writing this article, its version is 0.31.0) Because right now in the new design of Jade, you have to define your layout to extend in children pages, it is hard ( impossible ) to change layouts dynamically like what Twig or the other templates do.

So if you really want to do that right now in Jade, there is a workaround which you have to define two pages extending different layouts and trigger the right page in controller like this :

That’s it, hope one day Jade can support this feature 😛

Written by EragonJ

June 7th, 2013 at 1:02 am

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