超夯!視差捲軸動畫大解密!

前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦! 登登登!傳說中的~視差動畫! 設定你的視差捲軸動畫 先構思好動畫的進行方式,視差故名思義就是景物因遠近不同造成視線內移動速度的差異, 最常見的例子是在坐車時,距離較近的建築物很快從窗前經過,遠方的山卻看不出來有移動, 因此本文前面展示的範例就是示範如何處理遠、中、近不同距.....深入了解

瀏覽器的預設 File Input 不好用!我想自訂美觀實用的照片上傳元件怎麼辦?

接續前一篇介紹 Canvas 刮刮樂的文章, 本篇介紹的是去年九月份 Firefox OS 讓你盡情享受每一刻 活動的照片上傳作法。 有做過上傳表單的人一定對瀏覽器提供的預設上傳元件有一些意見, 它的外觀光用 CSS 來設定樣式也救不了,而且上傳圖片沒有前端預覽很不直覺。 幸好可以搭配<label>元素改變表單元素外觀,以及新的 FileReader API 以在上傳前預覽.....深入了解

人人都可以是指揮家 – Mozart

Mozart 專案是一個利用多個 Web API 來完成的線上遊戲,它使用了 1. Device Motion 來讀取使用者透過手機晃動的幅度, 2. Web Audio 來當成 MIDI 的聲音輸出, 3. Web Socket 來當成手機與伺服器之間的即時通訊。我們只要簡單的搖晃手機,身邊的電腦就如同交響樂團般演奏出音樂。下面就是它的架構圖:   Mozart 專.....深入了解

Inter App Communication – App 的溝通橋樑

在開發 App 的時候,我們有時候需要在App之間傳遞資訊,而今天我們要介紹的主角就是新引入的 WebAPI: IAC (Inter App Communication),有了這個好東西,我們就可以輕易的在 App 間傳遞訊息,以下就用筆者遇到的例子來說明吧: User story 當使用者拿到 Firefox OS 手機,第一次開機的時候,會自動先開啓 FTU (First Time.....深入了解

網頁上也能做刮刮樂!運用 HTML5 canvas 合成功能

我就先不賣關子,底下這個 fiddle 就是這篇文章的刮刮樂範例完整版。 可以玩玩看,試著瞭解裡面的程式腳本,或是 fork 來改改看。 有興趣但看不太懂 code 的話, 就跟著本篇文章的介紹帶你入門吧! 如果大家有看過九月份的「Firefox OS 讓你儘情享受每一刻」活動網頁(註 1), 應該很好奇一開始的刮刮樂是如何做到的吧? 在研究該如何實作這個功能的時.....深入了解

Gecko JavaScript 之 “改 code 卻不 build code" 小徑。

[1] 問: 常常我們會收到某些 Gecko 的問題,但卻是 log 不足或是可能需要在手機上摹擬某些特殊/額外的資訊才有可能重現問題。而我們又確定這個問題,大概會從 Gecko 的 JavaScript 檔案下手。但是,我又不想抓/編譯程式碼,這個症狀可有解? 答: 有的!!的確是有方法可以透過不抓/編譯程式碼的手續就可以把想做的事情達成的。 (記得拿出一台 fi.....深入了解

這裡的犀牛長的不太一樣!#ifdef in JavaScript?

Firefox OS 裡的 Gecko 層,主要是由 C 和 JavaScript 兩種程式語言編寫而成。不過 Gecko 裡的 JS 程式碼長相和我們常見的 client-side JS 非常不一樣。剛開始閱讀程式碼時,常常會看到一些奇妙的玩意。 比方說,JS 裡頭竟然會有 #ifdef !? 原來這是 Mozilla 程式師在內部施展的一點小魔法,讓工程師在 Gecko 層撰寫.....深入了解

Emscripten 與拼音輸入法的相遇

在提到 Emscripten 之前,我們先來回顧一下 JavaScript 的發展歷史。 JavaScript 的歷史 JavaScript 在 1995 年問市時,目標是在瀏覽器中打造一種輕量的腳本語言,用來輔助頁面的呈現以及與使用者互動。為了這個目的,JavaScript 被設計成非常靈活,讓開發者在撰寫過程中不會被太多的規則限制住。雖然想保有彈性的背後通常就得犧牲效能,但如果 Jav.....深入了解

使用 Promise 模式,寫出簡單易懂的 marionette test case

在 Firefox OS 中,我們經常使用 marionette 這套測試框架來進行 web API 的測試,當 test case 越寫越多時,開始會有一些 bad smell 浮現,在這邊我們用 telephony 的 marionette test case 為例,看看目前的 test case 是長什麼樣子的,然後想想 -- Could we do better? 請先大概瀏.....深入了解

一個打十個 – 讓 Gaia 網頁應用(webapp)支援多重設備(二:螢幕大小)

我們發現到:要讓網頁應用支援多種設備,開發者需要根據設備的「像素密度」(Pixel Density)與「螢幕大小」(Screen Size),處理相對應的「排版」與「圖片」問題。接續前一篇,本篇將闡述處理「螢幕大小」(Screen Size)的方式。 (現在Gaia關於多重設備支援的工作正開始著手進行,以下建議都還有修改的可能性,歡迎大家提出自己的建議。想要直接參與 Firefox .....深入了解