從 JavaScript 的 Map/Reduce 談起 Functional Programming

自 ECMAScript 5.1 開始 JavaScript 加入了兩個關於陣列的函式:Array.prototype.map/reduce。這兩個函式可以針對陣列,讓開發者更清楚的描述接下來程式碼所要表達的運算性質。除此之外,也簡化了每次手寫迴圈進行尋訪陣列的繁瑣過程,特別是當尋訪實際上是要將原本的陣列映射(map)成另一個陣列,或是進行加總、檢驗等具有化簡(reduce)性質的操作。 左.....深入了解

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

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

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

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

Gecko Layer 除錯工具: LayerDump & LayerScope

在 Firefox 的 Rendering Pipeline 中,一路從 Layout 到 Layer tree,在 Layer tree 中的每一個 Layer 會依序的畫到螢幕上,所以通常畫面出現問題後(ex. 某個畫面下面剛好少了一個 pixel ),我們會先從 Layer 開始下手從下到上去檢查到底是那一個環節出了問題。 不過 Layer 這麼複雜,有什麼好用的工具可以幫助我們快速的.....深入了解

Gecko 多彩多姿多媒體

自從個人電腦愈來愈普及之後,影音娛樂的應用一直是大家關注的焦點之一。在其中,多媒體的播放功能已經變成基本功能中的基本功能。為了能處理各式各樣的多媒體功能(諸如:錄製、播放、串流、轉換格式、後製處理等),每個平台上幾乎都有設計出一套多媒體框架用來應付各種的需求,像是 Windows 上有 DirectShow 跟 Media Foundation 、 Linux 上有 GStreamer 、 Mac.....深入了解

我也想成為 mozillian!教你如何貢獻到 mozilla code base

看了這麼熱血的影片,想必你也迫不及待想成為個 mozillian 吧?!只要有心,人人都能成為 mozillian,如果坐在電腦前的你是個 developer 那就更適合不過了! 這篇就來告訴你如何貢獻到 mozilla 的 code base。 Step 1:新增 Bugzilla 帳號 首先,你需要新增一個 Bugzilla 帳號。Bugzilla 是一套追蹤 bug 的系統.....深入了解

人人都可以是指揮家 – Mozart

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

Firefox OS 的 MP4 container 簡介

前言: MP4 是目前最常見的影音格式之一,在這篇文章中,我們主要在介紹 container 的格式,以及 MP4 在 Firefox OS 中的現況跟常見問題。 MP4 的 container 格式主要是定義在 ISO/IEC 14496-12 [1] 中,從最早期的 Apple Quicktime format,一路延伸到後來的 MP4、3GPP, 以及 3GPP2 等等 [2]。 而 .....深入了解

CGDB – 更好用的 GDB

我們在開發過程中,常常會使用 GDB 來找 bug,但是它是純文字介面,使用上還是有些不便,幸好現在可以找到不少 open source project 來改進這些問題,今天所介紹的 CGDB[1] 工具,是我使用過覺得相當好用的工具,讓你在漫漫長夜的 debug 過程中,得到一點小小的慰藉。CGDB 其實沒有 DEBUG 的能力,它底層還是需要呼叫GDB的,它使用 GDB MI[2] 的.....深入了解