專注在該費心的工作上,用 CI 來提昇程式品質

在開發的過程中,很常會遇到新上的 patch 不小心弄壞了已經存在的功能。處理這種 regression bug,尤其是在已經有大量 patch 加入了程式碼之後,要找出當初弄壞這個功能的 patch 更是難上加難。現在已經有一些工具能夠幫助你用 bisect 以二分法來找出造成問題的 patch,但還是要花費不少時間,若是能夠在第一時間預防,在 patch 加入後就進行測試,就能夠大輻降低開發時.....深入了解

從 UI 元件上測試你的 App

謀智台客之前的文章提到了有關 Gaia-ui-test ,在 Mozilla 工作團隊的努力下,這套工具已經越來越健全,足以寫出貼近使用者體驗的測試了。 對於開發者來說,更重要的是如何使用它來幫助自己開發的程式。下面以 Contact App 的例子,如何透過 Gaia-ui-test 的架構來測試 App 。所有的範例都可以從 Github 上查看原始碼。 安裝 client Gaia u.....深入了解

WebIDL Extended Attribute 大解密

在 Gecko 的 New DOM bindings 文章中,Kan-Ru 曾經介紹過 Mozilla 開始改用 WebIDL Binding 的歷史小故事,也在文中手把手的教大家如何透過 WebIDL expose API 給 application。本篇將進一步介紹 WebIDL 中的 Extended Attribute 與其在目前 code base 中的使用情形,讓大家對於常用的 Ex.....深入了解

RWD 流言終結者

RWD 全稱為 Responsive Web Design(適應性網頁設計),簡單來說就是讓你的網頁能夠伸縮自如的設計方式。在前兩篇文章介紹完九個 RWD 小撇步之後,接下來小小分析一些常見的 RWD 流言,並不是說這些流言都是胡謅一通,但我們如果常因為流言中的一些負面模糊形容而卻步,很可能就錯失了一些正面的改變機會,所以我在這邊針對一些形容詞,提供數據和參考資料,並對應現實的情況讓大家有一個基本.....深入了解

九個適應性設計小撇步,把你的網站打造成變形金剛!(下篇)

接續上一篇所介紹的一些基本 CSS 排版小技巧,本文第一部分開始介紹 CSS media queries 常見的使用方式,以及一些在開發初期就要先注意的地方;第二部分則介紹一些適應性設計相關的工具及 Javascript 套件。希望這些小撇步可以幫助你在開發網站上事半功倍囉! 運用 CSS media queries 撇步四:排版避免設定高度及絕對位置,寬度設定儘量集中 右下角可拖曳縮放.....深入了解

九個適應性設計小撇步,把你的網站打造成變形金剛!(上篇)

繼之前蓋索林大師的一個打十個系列文章,介紹了 Gaia WebApp 支援多種設備的技巧,本系列文章將深入介紹一些網頁適應性設計相關的通用工具及方法。如果你還不知道什麼是適應性設計,底下有簡潔的介紹。 什麼是適應性設計?它適合我嗎? 適應性設計 (Responsive Web Design,簡稱 RWD,亦有人譯作「自適應網頁設計」、「響應式網頁設計」) 簡單來說,就是試圖使用同一份 HTML.....深入了解

航向 128MB 的偉大航道-Gaia • 神奇的可視範圍監視器

隨著超低價的市場崛起,我們對各項資源也開始斤斤計較。不論是 CPU、RAM、及 Flash,每一個項目都是我們努力減少的目標。先前丹尼兄及艾倫兄已分別為大家介紹過 gecko 在處理記憶體管理上的文章[1][2]。這些都是著墨在記憶體管理上,今天醬糊小弟將向各位介紹一個在 gaia 存在已久的可視範圍監視器(Visibility Monitor)。   起源 Visibilit.....深入了解

六個神奇 CSS 特效,搭起七夕鵲橋

在八月份的七夕搭鵲橋活動裡,用網頁動畫呈現了牛郎織女團聚慶祝的畫面。不知道有沒有眼尖的網友發現,其實活動網頁裡的動畫效果都是運用 CSS animation 及 CSS transition 所做出的特效喔!揪~竟~要怎麼做出這些特效呢?讓我們繼續看下去。 這邊也順便工商服務一下,之前香蕉人也介紹了一些 CSS 的特異功能。 星星堆滿天 你可能沒料到,星空的效果完全不需要.....深入了解

Audio 就是矯情!

  "聽  海哭的聲音  這片海未免也太多情   悲泣到天明" 是低,大家都知道是阿妹經典到不行的歌,但是如果阿妹聲音播不出來,那哭的人就換成是我而不是那片海了 Orz ! 請大家先從阿妹的歌聲裡 (或是我的哭聲?) 回到現實來,聽我來聊聊 Firefox OS 裡聲音的部分。基本上聲音系統裡可以簡單分成兩種,一種是 voice 另一種則是 audio,簡單的分法就是".....深入了解

像原生應用程式一樣的 WebApp?趕快學起來!

經常收看謀智台客的讀者可能已經看過怎麼開發一個 (Firefox) WebApp,或是可在 MDN 上找到相關開發資訊。 簡而言之,Mozilla 提出的開放 WebApp 標準草案,允許把使用網頁技術製作的網頁做成 App 來使用。提供的方式除了 App 使用者所習慣的 App Store 模式(如 Firefox Marketplace),即使用者到固定的應用商店下載整包封裝好的 App.....深入了解