訂閱

上次更新

July 24, 2014 04:00 PM

所有時間皆為協調世界時(UTC)。

Powered By

Planet

摩茲工寮

這邊是工作人員碎碎念的地方,您可獲得最新出爐的資訊以及最不成形的想法 :P

July 22, 2014

orinx

Webmaker 的新工具:Appmaker

Screen Shot 2014-07-22 at 4.04.34 PM

最近 Mozilla 的教育專案之一 ,Webmaker 有了全新的工具 - Appmaker!Appmaker 是一個簡單的手機 Web App 設計、製作平台,個人覺得有呼應到 Web is a platform 的概念。光是用自己熟悉的瀏覽器來製作自己的手機軟體就已經夠酷了,但是 Appmaker 還可以透過平板來設計手機軟體…

Appmaker_Nexus7

我在我的 Nexus 7 上操作 Appmaker 的樣子

老實說 Appmaker 的操作上面真的很簡單,針對任何的「磚塊」都是透過設定「頻道」去決定資料的傳遞方向。左邊通常是輸入或是設定,右邊通常是輸出。關於 Appmaker 的詳細操作我錄製了一個短片,不過由於這是第一次錄製邊唸邊操作的短片。因此如果有什麼奇怪的地方歡迎給我建議 ;)

by Orin Chen at July 22, 2014 10:00 AM

MozLinks-zh

七月份精選附加元件

本月精選:SearchWP

作者:Georges-Etienne Legendre 及 Robert Katić

這個元件可以讓你輕而易舉的在搜尋欄找到你想要的字詞。它會將你曾經輸入過的字詞變成按鈕,放在搜尋欄裡,讓你更容易找到你曾經瀏覽過的頁面。

「對一個在做深度網路研究的人來說是一個必備的附加元件。我的工作是會計研究,而 SearchWP 幫我省了不少盯著螢幕的時間。」

下載 SearchWP »


更多精選附加元件

FireSSH by Mime Čuvalo

FireSSH 是一個 Mozilla Firefox 上免費、又可跨平台的 SSH 用戶端附加元件。完全使用 Javascript 編寫!馬上來使用»

KeeFox by Luckyrat

簡單且安全的管理你的密碼。全自動化的登入、永遠不會忘記其他不同的密碼;不僅增加密碼的安全性,也讓你的密碼完全在你的掌握之中。馬上來使用»


提出你喜歡的附加元件吧!

這些推薦的附加元件是由附加元件的開發者、使用者還有粉絲們所組成的社群委員會挑選出來的。每半年都會更替一次委員會的成員,所以有很多參加機會。如果你想要加入我們,請多留意這個部落格公佈的下一次申請時間吧。

如果你想要告訴我們一些實用的附加元件,請寄信到 amo-featured@mozilla.org 讓委員會審查。歡迎你告訴我們你所使用的附加元件!

原文 / July Featured Add-ons
授權 / 創用 CC 姓名標示-相同方式分享-3.0

φ Zoeee 翻譯 - 極地狐、Irvin 編輯

by 極地狐 (noreply@blogger.com) at July 22, 2014 04:00 AM

July 19, 2014

Othree

ECMAScript 6 at COSCUP

今天在 COSCUP 的投影片,因為前一場 delay 導致後面講的有點趕,小可惜,不過該說的都有說到了~

July 19, 2014 02:50 PM

July 18, 2014

Othree

mozjpeg 2.0

昨天 Adobe 和 Google 聯手發表了思源黑體,算是亞洲資訊圈的一件大事,結果就把另外一個消息壓下去了,其實昨天 Mozilla 發表了 mozjpeg 2.0,這個專案的目標是在保持相容於市場上現有的 jpeg decoder 之下,想辦法讓 jpeg 檔案能夠更小,第一輪的成果發表是就是昨天的 2.0 了,結果而言平均可以讓 jpeg 圖片品質不變差的情況下減少 5% 的大小,看到這個 5% 數據讓我想到 Google 曾經推出相容於 gzip, deflate 的 Zopfli,不過 mozjpeg 應該是不用花到 100 倍的壓縮時間啦,目前 Facebook 還有贊助這個計畫的下一輪發展,也就是 3.0 的開發。mozjpeg 目前是以 c lib 的形式釋出,可惜還沒有看到有命令列工具支援,希望能帶動一波圖片最佳化工具的更新潮啊。

其實 Mozilla 在去年還有發表了一篇對於目前市場上破壞性壓縮圖片格式的品質比較,比較了 JPEG、JPEG XR、WebP 和 HEVC-MSP,結果表現不離預期,最好的是 HEVC-MSP4,這是 H.265 Profile 的靜態圖片格式,算是比較項目中最新的格式了,表現最好好像不意外,不過其實高壓縮比相對的來說解壓縮需要的運算資源就會多,所以 Mozilla 才不會完全往新技術走,而開了這個 branch,顧到的前提下相容度,盡量的減少網路傳輸,這個計畫目前看來是還會繼續發展,不知道接下來還能夠提升多少壓縮比,還蠻令人期待的。

July 18, 2014 03:33 AM

July 17, 2014

orinx

SITCON 夏令營擺社群攤心得

SITCON Camp 2014 MozTW Booth

前情提要

很高興 MozTW 能夠收到 SITCON 夏令營 籌備團隊的社群攤位擺攤邀請,能夠讓我們有機會認識新朋友!我覺得今天的社群攤位還算滿順利的,想說趁著記憶還很清晰的時候趕快來寫一篇心得文。分享一下!

SITCON 是什麼

SITCON – ( Students’ Information Technology Conference ) 是一個以學生為主的研討會籌辦團隊,可以說是我所知道以學生為主軸在台灣最大的資訊研討會吧!我覺得這個研討會出現的開源專案其實不占少數,不過這個研討會的主軸主要是學生。

參與對象

以下大多都是憑自己的感覺分析出來的,也沒有數據。歡迎大家糾正!我覺得這次活動裡面大多數的成員都是對資訊有興趣的朋友,可能是網路的愛好者,或是剛開始學習程式/腳本設計的朋友。有一個有趣的現象是年齡層差距很大,從國中生至碩士生都有!

攤位分享主軸

「嘿!我們是 Mozilla ,雖然我們以 Firefox 聞名,但是你知道我們不止這些嗎?」每次跟別人介紹我總是喜歡邊播著 Mozilla Story  ,同時快速解釋一些 Mozilla 現有的專案。

除了介紹 Mozilla 以外,我也會與他們推薦我們舉辦的定期聚會 – MozTW Lab。不過立刻發現其實現場大多數的成員都不住在我們的「有舉辦 Lab 的地區」,所以到後面我開始和一些對 Mozilla 有興趣的朋友分享我們的 MozTW 連續聚 。很開心現場有朋友對我們的 MozTW 連續聚 很有興趣,希望能夠借由這次活動招募到更多社群成員!

心得

這次在攤位上跟不少朋友聊了關於 Firefox OS, 社群活動, Webmaker 以及 Firefox Add-ons 等主題。整體而言我覺得和大家聊的算是蠻開心的,也實質上口述了一些專案的內容。這一次我們攤位規劃上面沒有做人力招募的表單有點可惜,下次應該準備一下;這樣才可以把他們有興趣的資要寄給他們看!

還有在 SITCON 的夏令營 社群攤位只有三個人帶感覺還是太少了,其實是看帶什麼內容。如果規劃 20 分鐘的內容的話,基本上不可能可以消耗掉人潮。所以一開始一直瘋狂的被會眾 DDoS,我覺得如果下一次的話也許要準備 10 分鐘版的闖關模式跟 20 分鐘版的會比較恰當!有興趣的私下再多聊聊 : P

by Orin Chen at July 17, 2014 03:39 PM

MozLinks-zh

Firefox 小秘笈:在 Android 系統看 Flash 影片

有誰會不喜歡在網路上看影片呢(特別是看有趣的影片),不過你知道怎麼在你的 Android 行動裝置上用 Firefox 看 Flash 影片嗎?

首先,你需要下載 Adobe Flash 到你的裝置—點這裡看教學

在 Android 上開 Flash

你的裝置有了 Flash 之後,在你想看 Flash 影片時,你會看到頁面上有個插座圖案的灰色箱子,點一下那個灰色箱子就可以開始播放影片了。

如果你有什麼密技想分享給其他 Firefox 使用者的,請貼在我們的 Facebook 粉絲頁、或是 Twitter 上,附上 #FirefoxTips 標籤並標記我們。你也可以在我們的網站裡看更多密技。

編按:Flash Player 下載網址在此,請根據 Android 版本選擇「Flash Player for Android 4.0 archives」或「Flash Player for Android 2.x and 3.x archives」內的安裝程式。
原文 / Firefox Tip – Watch Flash Videos on Firefox for Android | The Den
授權 / 創用CC 姓名標示-相同方式分享-3.0

φ 交大服務學習 翻譯 - Yao Wei、極地狐、Irvin 編輯

by 極地狐 (noreply@blogger.com) at July 17, 2014 04:00 AM

July 15, 2014

Othree

ES6 的數字

這篇想要介紹的是 ES6 的整數規則上的一些變化,首先是 parseInt,看過 JavaScript Good Part 的話都會知道,這個函數的第二個參數 radix 一定要給,不然如果遇到 0 開頭的字串時,會自動被當成八進位的數字,這個被人詬病許久的設計終於在 ES6 中拿掉了,未來 parseInt 只會自動判斷 0x 0X 為 16 進位,不然沒給 radix 就是當 10 進位。

另外一個改變是多了可以直接表示 2 進位和 8 進位整數的語法:

bin1 = 0b11;
bin2 = 0B1000;

oct1 = 0o1199;
oct2 = 0O17;

2 進位要 0b 或是 0B 開頭,8 進位則是 0o 或是 0O,雖然和 16 進位一樣設計,不過要注意的是 parseInt 目前的 spec 設計是只會自動判斷 16 進位的喔。

July 15, 2014 07:52 AM

MozLinks-zh

尊重您的客製化服務

Mozilla 的使命要求我們提供尊重使用者的網路體驗,讓大眾能掌控自己的線上生活。尊重某個人的含義也包括了尊重他們的隱私。我們渴望一個「沒有驚喜」的原則:當收集關於一個人的資訊時,那個人知情,而且被搜集的資訊也同時對他有益。大眾應該要知道,資訊是如何被收集及使用的。每個人也應該要能夠判斷,個人資料和獲取的服務之間,是否公平與公正。這可是個具有挑戰性的目標,特別是方便性和易用性之間的平衡:人們希望沒有過多的提示和混亂的選擇,就可以擁有快速、流暢的用戶體驗。而我們一直朝著這個理想努力。

Mozilla 是現今網路經濟生態系統的積極參與者。人們大部分擁有及受益的內容跟資訊是由數位營銷和贊助商資助的。這是一個有效的商業模式。我們單純地認為,當服務商使用收集到的個人資料時,必須要懂得尊重大眾,並獲得他們同意才行。因為在用戶了解他們從事的交易時,電子商務會運作得最好。而最佳的長期客戶關係,建立在彼此的信任上。

Mozilla 立志要達到個人化—廣告定制、內容、建議、優惠或是其他更多的資訊—這些東西不應該是建立在隱埋事實,將大眾蒙在鼓裡,讓他們不知道到底誰有權取得該資訊、或是該資訊被分享給誰了。Mozilla 身為一個主要的網頁瀏覽器供應商—現在還兼 OS 開發者,角色定位會朝著這個目標實驗並創新。作為一個開源專案,我們歡迎所有的捐款,並鼓勵所有的行業公開透過建設性的建議與合作來幫助我們達成目標。

以下是 Mozilla 正在運行中的,一些尊重您的客製化服務:

  • Persona 是 Web 的身份識別系統,讓人掌控自己在網路上進行登入。人們可以選擇對特定的服務要用什麼樣的個人身分。特別的是,可以讓人可以將他們的工作、個人、與生活的其他方面區隔開來。

  • Do Not Track 讓你告訴網站,你想選擇拒絕行為廣告等用途的第三方追踪。它讓使用者表達,他們想要自己料理自己的資訊,這樣其實好處多多。使用 Firefox 的人必須主動地啟用 Do Not Track 功能,這樣就可以清楚地表明,使用者已經做了明確的選擇。此外,Do Not Track 獨立於任何特定的技術,提供了技術演進方面的彈性。我們將繼續與各種關係團體合作,讓網路界採用 Do Not Track。

  • 為了在個人化廣告、及未經同意的追蹤行為間,取得更好的平衡, 第三方 Cookie 政策還在持續評估當中。舉例來說,Firefox 的測試版本之一,允許第一方以,及儲存過該網域 Cookie 的第三方,進行 cookie 的設置。但預設會將網域尚未儲存在 Firefox cookie 裡的第三方 Cookie,通通拒絕掉。我們一直在評估這個做法,也與來自各種行業的利益相關者合作。

在取悅使用者的同時,應該也可以尊重地對待他們(沒錯,在對的時間提供對的服務會很令人高興)。我們持續在嘗試和評估新的方式,令使用者可以掌控自己的網路體驗。也鼓勵你加入我們,朝著這個願景努力。我們會盡快分享更多的消息。

原文 / Personalization with Respect | The Mozilla Blog
作者 / jsullivan
授權 / 創用CC-姓名標示-相同方式分享-3.0

φ 江茂榮 翻譯 - 小迅、極地狐 編輯

by 極地狐 (noreply@blogger.com) at July 15, 2014 04:00 AM

July 14, 2014

Othree

YAJS: Yet Another JavaScript Syntax for Vim

前陣子把我 fork 的 Enhanced Javascript syntax 大改後,乾脆改名上到 Vim Scripts 了,名字就叫做 YAJS,全名是 Yet Another JavaScript Syntax for Vim(又一個 JS Syntax),當然也有 github repo 方便安裝,為什麼這次會自己大修呢,主要的原因是想要弄支援 ES6 的一些新語法,不過剛好有一些問題也已經很久了,就一口氣處理,大概整理一下和其他版的差異如下:

  • javascript 做 group name 的 prefix,如此才符合 Vim doc 的規範,並且可以直接讓 SyntaxComplete 使用
  • 完整重新整理過的 Web API、DOM、JS 關鍵字
  • 可以完美的和 javascript-libraries-syntax.vim 共用
  • 把許多歷史遺跡的 syntax rule 都砍掉了
  • 當然最後就是支援許多的 ES6 syntax,像是 arrow function、 method definition 等

第一點這問題很久了,我好像之前也有說過,第二個一開始弄之前有點猶豫,因為關鍵字真的很多,目前整理了大概有 1800 個上下,不過後來看到 Vim 內建的 xs 的 syntax 我就釋懷了,這個檔案有三千多行,而定義關鍵字的每行都有數個關鍵字,1800 其實還只整理了一部份,除了 Global 物件都有加上外,很多新 Spec 是還沒整理的,例如 Mozilla 為了 Firefox OS 定的那些和硬體溝通的 API 等。

第三點是我重新整理的時候才注意到的,本來我的 javascript-libraries-syntax.vim 會把 . 的 group 取代掉,也就是原來的 syntax rule 裡面,和 . 有關的東西在套用過 libraries syntax 之後就會消失,只是不太容易注意到,這次修改就讓這個問題不會發生,不過 JS 僅限於 YAJS,,其他還有 CoffeeScript、LiveScript 其實不受影響,不過是因為他們本來在 . 之後就沒其他的 syntax highlight 了。

第四點就是把一些不明用途或是過時的東西砍掉,最後就是 ES6 的語法了,目前大概知道會有的都已經做上去了像是 block scope、let、const、class、新的 number literal 等都支援,如果有缺什麼歡迎報 bug 摟。

July 14, 2014 10:35 AM

ES6 Method Definition

以前在產生 function 時,一定不外乎是 function declaration:

function foo() { return; }

或是 function expression:

var foo = function () { return; }

不過在 ES6 有一種新的特殊的語法可以使用,叫做 method definition,顧名思義,這個新的語法是專門用在產生物件的 method 上用的,所以嚴格說來不是用來做 function 的,然後也因此很特別的不需要使用到 function 這個關鍵字,基本的用法通常會在 class syntax 中使用:

class foo {
  constructor() {
    //blah
  }

  fooMeth() {
    //blah
  }
}

在上面這段程式碼中,constructorfooMeth 都是 method definition,其實就很接近以前的 prototype method,但是大幅簡化了語法,而除了這樣使用,還可以配合 getset 讓它變成 accessor function:

class foo {
  get bar() {
    return this._bar;      
  }
  set bar(v) {
    this._bar = v + this._bar;
  }
}

Accessor 其實在 ES5 就已經有了,不過因為一直被 IE 卡著所以不太有人用,而且寫起來實在也麻煩很多,以前是要用 defineProperty 才能定義 accessor:

Object.defineProperty(foo.prototype, 'bar', {
  get: function () {
    return this._bar;
  },
  set: function (v) {
    this._bar = v + this._bar;
  }
});

當然除了比較麻煩外,還有一個問題就是 defineProperty 只能用在實體物件上,所以上面的 class 範例,要做出一樣效果就要在 prototype 上使用,實在不直觀,加上 defineProperty 其他功能真的是很少看到使用需求,新的語法這樣設計真的是很不錯,不過看到 defineProperty 要在實體物件上用,就會讓人反過來想,method definition 可以不用在 class 上,而是用在普通物件上嗎?事實上是可以的,ES6 的物件語法多了簡化的寫法,其中一個就是支援 method definition,所以可以這樣寫:

var object = {
  value: 42,
  toString() {
    return this.value;
  }
};

July 14, 2014 08:47 AM