2012年8月31日

摩茲動手做(三)貢獻 MDN 的第一步

這是來自於 Jérémie Patonnier 的客座稿件,原文以法文撰寫。

兩年來,Jérémie Patonnier 一直是個活躍的 MDN 貢獻者,他組織了 Mozilla 巴黎辦公室每週三晚上的 doc sprints,在活動中,人們問了許多 MDN 相關的問題,以下是一些最常被提及的部份,希望它們可以幫助您瞭解如何貢獻 MDN。

什麼是MDN?

拜託,先別笑,您並不知道這問題我聽過多少次了。

直接了當的說,MDN 就是 Mozilla 開發者社群(Mozilla Developer Network),它是一個集中了幾乎所有 Mozilla 產品文件的網站,基本上這個網站提供三種資源:

  • 關於如何使用網路技術的文章及外部資源連結。
  • 現代瀏覽器中最新的網路技術展示(這些 DEMO 來自於 John Karahalis 組織的每月 Dev Derby 競賽)。
  • 關於 Mozilla 產品(API、元件、屬性、內容)及更重要的開放網路技術(HTMLCSSJavaScriptSVGWebGL ……等)的參考文件。

最後一項的開放網路文件,從質與量上皆是最重要,也是 Mozills 目前投注最多心力的部份;此外這些文件是不限定瀏覽器的,內容包含跨瀏覽器的相容性表格及應用提示,不只是 Firefox 而已。

即便這些文件可說是網路上目前最好的資料,但它離完成還很遙遠。非常歡迎各位來補完所有的缺陷 ;)

參與貢獻困難嗎?

一點也不,相反地這意外的超級簡單,我甚至覺得這是貢獻 Mozilla 最簡單的方式。(不需要去面對Bugzilla :-P)

實際上,貢獻 MDN 您只需要兩樣東西:

  1. 貢獻的意願
  2. 一個 MDN 的帳號

就這樣而已。

最困難的部份就是去找到右上角的「登入」按鈕,落在醜醜的白色 Mozilla 分頁鈕旁,是的——不算什麼最好的位置。一旦您點擊它之後,會跳出一個輸入電子郵件與密碼的提示框(MDN 使用 Mozilla Persona/BrowserID 帳號系統),登入完成到下一頁後,您只需要提供一個「使用者名稱」來辨識您在 MDN 的貢獻,然後——登愣!您已準備好開始了。

做出貢獻一樣非常地簡單。基本上 MDN 有八成是一個 Wiki 系統,所以在 wiki 的每個頁面都可以看到一個「編輯」按鈕(在右上角)。點擊就可以將頁面載入一個所見即所得的編輯器中(如果您是硬派玩家也別擔心,還是可以切換到純 HTML 編輯器)。作出所有您想要的改變,並點擊在右上角的儲存按鈕來儲存。

恭喜!您已經踏出了貢獻 MDN 及 Mozilla 的第一步:當中沒有愚蠢的發佈程序、沒有延宕也沒有審查(當然您可以要求,但非必須),超簡單的 :)

我可以做什麼,從哪裡開始?

簡短的回答就是「你想要的任何事情與任何地方」,但經驗此時告訴我,這並不是新手期望的答案。

基本上您可以在 MDN 上做以下兩件事:

  • 如果您是開發者的話,可以製作 DEMO 參加每個月的 Dev Derby 競賽,這還蠻酷的。
  • 如果您覺得您有一顆作家的心,您可以從文件方面下手。

對文件做出貢獻有以下幾種方式,取決於您的時間及參與的意願:

  • 寫新文章
    這是最花時間的付出,但也是對多數人最有用的。

  • 內容的在地化
    如果您對於除英文以外的語言也很熟悉,將英文文章翻譯成該語言是個好主意。世界上並非每個人都熟悉英文,而讓網路對於每個人友善是很重要的。

  • 寫程式範例
    解釋清楚很好,但有範例參考更好。通常一個好的範例,比起五段的長篇大論更容易讓事情清楚明瞭,所以撰寫程式碼範例是最實用的貢獻之一,MDN 的確需要更多。

  • 檢閱內容
    如我前面所述,在 MDN 上審查是很有限的,但貢獻者可以透過標籤系統來要求進行。這可以是文自編輯上的檢視、也可以是技術上的檢視。(在頁面上尋找 NeedsTechnicalReview 或 NeedsEditorialReview 標籤,當頁面確認沒問題後移除標簽)。如果您時間不多,這是個絕佳的貢獻機會可以幫助許多人。

  • 更新相容性表格
    MDN 的開放網路文件內容越來越跨不同瀏覽器了,為了實現這個目標,有許多的 MDN 頁面有瀏覽器相容性表格,讓使用者知道哪些 API、元件、屬性與內容是哪些瀏覽器可以使用的。這東西超級無敵實用,而且只要花五分鐘就可以加上一些相容性資料,毫無疑問這是最快最簡單對MDN做出貢獻的方式。

最後一個小提示:建置開放網路文件是個艱巨的任務,沒有人可以獨立完成。因此,專注在您個人有興趣的主題上是個好主意。如果您想要針對某個特定的領域進行,MDN 的「主題導航員」可以幫助您,請別介意聯絡他們,他們會非常高興的協助您。

另外 MDN 上有兩個蠻有幫助的介紹頁面:Getting startedTo-do list

結語

如您所見,對 MDN 做出貢獻是非常簡單的。如果您想更進一步瞭解,請在以下管道自由提出:irc.mozilla.org 的 #devmo 頻道,或是透過我們名為 dev-mdc 的郵件列表及 Google Group

而如果您想要與某人直接講話,最佳的接觸點是 Eric Shepherd(也叫 Sheppy),Janet Swisher 和 Jean-Yves Perrier (Teoli)。這三位是負責 MDN 的 Mozilla 員工,請不要害怕連絡他們,他們是召募來做這些事的 :-P

文件萬歲!

原文 / MDN First steps ✩ Mozilla Hacks
授權 / 創用CC 姓名標示-相同方式分享-3.0

φ Mika 翻譯 - Irvin 編輯

2012年8月28日

摩茲動手做(二)用 Add-on SDK 寫簡單的 Firefox 套件

摩茲動手做系列是 Mozilla Links 中文版的特別企劃,本專題中將會有一系列如何貢獻 Mozilla 與開放網路的心得分享,歡迎大家在閱讀後按部就班,與我們一起動手實作,加入貢獻開放網路的行列!

第二集的分享者為 Browser Pairs(瀏覽器翻牌)遊戲的作者 WM,他將與大家分享如何透過 Add-on SDK 動手撰寫一個簡單的 Firefox 套件。

編按:本文著動在擴充套件本身的程式邏輯,關於可線上擴充套件開發網站 Mozilla Add-on Builder 及用來離線開發擴充套件的 Add-on SDK 使用方法,可先參考 WM 的以下兩篇文章,及本文末的介紹影片:


之前用來解說 Firefox Add-on SDK 的範例 NOWnews Onepage 雖然很有挑戰性,但用到了底層 API 好像有些太複雜了,其實 SDK 作者群也有提供簡單的範例放在 Builder,不過這次我要分享的是 SDK 開發文件在改版前的示範套件,並加上一些修改讓它實用化。

這次打算做一個直接在頁面上顯示字典查詢結果的功能。

首先在 Add-on Bar 上用 Widget 模組顯示圖示按鈕:

var widget = require("widget").Widget({
   id: "kimo",
   label: "奇摩字典",
   contentURL: data.url("kimo.ico"),
   panel: panel,
   onClick: function() {
  panel.contentURL = "http://tw.dictionary.yahoo.com/";
   }
});

指定當觸發點擊事件時,在彈出的 Panel 中載入字典首頁,而 Panel 模組的宣告則是:

var panel = require("panel").Panel({
 width: 680,
 height: 550,
 contentURL: data.url("loading.html"),
 onHide: function() {
  panel.contentURL = data.url("loading.html");
 }
});

當 Panel 隱藏時,把內容改為顯示載入中的頁面,這樣在目前的查詢結果還沒載入完成前,使用者就不會看到上一次的查詢結果。

最後一個用到的模組 Context Menu,就是最重要的文字選取後右鍵查詢選項:

var menuItem = contextMenu.Item({
 label: "奇摩字典",
 image: data.url("kimo.ico"),
 // Show this item when a selection exists.
 context: contextMenu.SelectionContext(),
 // When this item is clicked, post a message back with the selection
 contentScript: 'self.on("click", function () {' +
  '  var text = window.getSelection().toString();' +
  '  self.postMessage(text);' +
  '});' + 
  'self.on("context", function () {' +
  '  var text = window.getSelection().toString();' +
  '  if (text.length > 20)' +
  '    text = text.substr(0, 20) + "...";' +
  '  return "奇摩字典: " + text;' +
  '});',
 // When we receive a message, look up the item
 onMessage: function (item) {
  panel.contentURL = "http://tw.dictionary.yahoo.com/dictionary?p=" + item;
  panel.show();
 }
});

設定 context 為當選取文字時才顯示,並在 contentScript 中描述當有文字被選取時改變選項文字,還有選項點擊後的查詢動作。

就是這麼簡單,這樣就完成了一個實用的擴充套件!

原本還想把字典顯示頁面清理一下,但目前要對 Panel 裡面的外來頁面調樣式還挺費工的,不過可以參考之前的這篇 Yahoo!奇摩字典去廣告稍作處理。

由於是簡單的實作,未來有機會再加上自訂與新增字典種類的功能。
這次的成果原始碼一樣放在 Github,想直接安裝來試試的,也可以在附加元件裡找到:Dictionary Panel


以下是兩部 Mozilla 針對 Add-on Builder 的簡介影片及 Step-by-step 套件製作教學:


Firefox 的最大特色就是五花八門的套件,讓每個人的 Firefox 功能都很獨特。
如果您也有撰寫套件的經驗,歡迎在留言中與我們分享你的作品!

φ 原文 / WM 撰寫,Irvin 編輯

2012年8月27日

搖滾你的 Firefox:Lazarus = 你的生命救星

Lazarus 可以讓你快捷、安全地恢復丟失的 email 文本,blog 文章,評論和其他網頁表單

花些時間使用 Lazarus: Form Recovery 擴充套件,然後你會感到悲喜交加:興奮的讚嘆這東西竟然存在,接著沮喪的懊悔你居然現在才知道。

當頁面載入超時、意外的重新載入,又或者其他類似的折磨,把你史詩長度的 email、評論或者 blog 文章變成一場空時,感覺實在很無力。如果你要在不同的網頁裡填寫重複的表單、記起一大堆備份文件的命名規則,這一切都枯燥無味。

論壇管理員、內容經理、社交網路迷和線上購物狂們都經常遭遇這種令人沮喪的事,但直到 Lazarus 之前,都還沒有一個真正安全、方便管理的表單恢復程式。

安裝 Lazarus 後,你所輸入的任何東西都被儲存、排序好,並且可以即時取用。它是這樣運作的:當你在網頁表單或者評論框裡打字,然後又把它們弄丟時,這時你並沒有真正失去它們,只要在表單中右擊滑鼠,就可取回來了。

Lazarus 不僅會保存你當下鍵入的文本,還能保存你過去幾個月的表單內容(時間長度取決於你的設定值)。恢復丟失的文本,你就能重返正軌啦。

在瀏覽器右下角,點擊 Lazarus 的十字章圖示會開啟右鍵選單。在這裡你可以調整常見設置,也可以刪除不要的表單。你可以在 Lazarus 的偏好設定→安全性分頁中決定資訊要保存多久、設置表單恢復密碼、或者禁用文本搜尋(另一個強大的功能,讓你可以在沒有原始表單時搜尋並恢復丟失的內文)。

Lazarus 會將你的資訊加密,所以別人無法取用或是查看它。

Lazarus 是頁面意外重載或關閉的救星,但它也能在輸入工作中有所貢獻:在多重表單中填入相同內容(比如信用卡帳單地址)時、發送相同郵件給不同信箱時,或者如果你同時維護多個部落格或論壇的話,也可在不同頁面裡取用曾寫過的內容。

在失去之前你不會真正感到想念,有了 Lazarus 裝在你的 Firefox 裡,你就不用學到這麼痛苦的一課了。立即安裝 Lazarus: Form Recovery

原文 / Lazarus = Lifesaver ❍ Rock Your Firefox
授權 / 創用CC 姓名標示-相同方式分享-3.0

φ 陈三 翻译 - Irvin 编辑

2012年8月26日

Firefox 小秘笈:全能網址列簡單搜尋

耶!你用 Firefox 網頁瀏覽器了!然後呢?

有很多的技巧和竅門可以幫你提升你的 Firefox 及上網體驗,最棒的是很多都來自 Firefox 社群的分享,Firefox 用戶幫助其他 Firefox 用戶們,這真是讓我們樂開懷。

這是我們最喜歡的其中一個:

你知道可以直接從智慧位址列(Awesome Bar)即網址列裡搜尋嗎?不需要打開一個新分頁或新視窗,只要鍵入搜尋詞,瞧,搜尋結果出來了!

請參照網址列搜尋的詳細資訊

原文 / Firefox Tips: Easy Awesome Bar Search | The Den | Tips on Using Firefox
授權 / 創用CC 姓名標示-相同方式分享-3.0

φ 陈三 翻譯 - Irvin 編輯

編按:如果你發現這個訣竅很實用,可以在這裡找到更多 Firefox 秘笈。你也可以幫忙翻譯為中文分享給 Mozilla Links 的讀者,所有待譯文章都置於翻譯機動隊待譯資料夾中,您可直接打開動手翻譯。