訂閱

上次更新

November 21, 2014 04:00 PM

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

Powered By

Planet

摩茲星球 | MozTW Planet

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

November 13, 2014

Othree

ES6 Promise

ES6 Promise 目前各家瀏覽器的支援程度雖然還沒到可以直接用的程度,但是目前已經有非常多的 polyfill,差不多是可以開始使用的時候了。

如果習慣了 jQuery 設計的 Deferred 物件,應該會對於 ES6 的 Promise 設計很不習慣吧,相較於 jQuery 是產生好物件然後提供一些 method 做操作,要不要封裝起來也是開發者的事,ES6 Promise 的設計更是強調了封裝的特性,要怎麼 resolve、reject,在一開始就要決定好了,只有在建構函數裡面碰的到 resolve 和 reject 的觸發點:

new Promise(function (resolve, reject) {
  //...
});

這樣的設計雖然在物件封裝上比較嚴謹,但是其實會讓一些程式碼多了一層的縮排,例如本來用 jQuery Deferred 包起來的 XHR:

function JQXHR(url) {
  var xhr = new XMLHttpRequest();
  var dfd = new $.Deferred();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) { dfd.resolve(xhr.response); }
  }
  xhr.open('GET', url);
  xhr.send();
  return dfd.promise();
}

用 ES6 Promise 就要改寫成:

function ESXHR(url) {
  var xhr = new XMLHttpRequest();
  var dfd = new Promise(function (resolve) {
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) { resolve(xhr.response); }
    }
  });
  xhr.open('GET', url);
  xhr.send();
  return dfd;
}

第二個差異就在於回傳的 thenable 物件要怎麼把結果改掉,以前 jQuery 的時候可以在 callback 裡面回傳新的 Deferred 物件改結果:

dfd.then(null, function () {
  return $.Deferred().resolve();
});

沒特別傳 Deferred 物件的話不管用 then 串接幾次的話結果都不會改變,不過 ES6 Promise 就不一樣了,不管是 resolve 狀況還是 reject 狀況,then 回傳的預設就是一個新的 resolved 狀態的 Promise 物件。那要怎樣改變狀態呢?這裡就要用 throw new Error() 了。在 ES6 Promise 的 then 裡面,不管是 resolve 還是 reject 的 handler,都是回傳任意值會讓後面拿到新的 resolved 的 Promise 物件,而如果在執行中 throw error 出去,就會讓後面拿到 rejected 的 Promise 物件:

dfd.then(function (val) {
  if (val === 0) {
    throw new Error('');
  }
});

然後就是 rejected 狀態的 Promise 也是有值的,如果是 throw error 產生的,那就是看 throw 什麼東西,那個東西就會變成新的 Promise 物件的值,而以往手動 throw error 時,為了相容性都會產生 Error 物件,在這邊就不必如此了,其實可以隨便傳想要給後面使用的值。

再來,有時候只想要處理 reject 的狀況,會寫成:

dfd.then(null, function () {
  //rejected handler
});

有個 null 放前面其實蠻討厭的,不過 ES6 有提供一個 catch 可以用:

dfd.catch(function () {
  //rejected handler
});

這個以前倒是沒有類似的東西,蠻方便的。大概瞭解到這樣就可以使用 ES6 Promise 了,另外還有 Promise.allPromise.race 可以做和 jQuery.when 類似的事情(race 是新的控制),至於我為什麼說現在差不多可以開始使用呢,除了 Polyfill 齊全外,其實還有一個原因是一些新的網路標準也開始使用 ES6 Promise 了,像是 Web Crypto,看 spec 比較不明顯,不過看 MDN 的介紹,就有列出 encrypt、decrypt、sign 等花時間的 method 回傳都是 Promise 物件,實做就可以丟到背景的 Worker 去處理,才不會把 UI 卡住。而除了 Web Crypto 外,還有像是 ES7 可能會有的 await 語法也是要接 Promise 物件,總知識個未來趨勢,我覺得現在比較尷尬的是在 ES6 Promise 出來前的一堆標準都是用 event base 設計的,像是 File Reader 之類的,不知道有沒有機會慢慢都改到 Promise。

November 13, 2014 03:54 PM

November 03, 2014

timdream

Tim’s Dream for the Web

Even before I get myself this username (timdream) and polluted the search result, search result of that term will give you a link to on LogicError, appropriated titled “Tim’s Dream for the Web”. That “Tim” was Sir Tim Berners-Lee, and he imagines the Web to be the powerful means for collaboration between not only people, but machines.

Weaving the Web, credit: W3C.

Weaving the Web, credit: W3C.

Collaboration between people has been closer than ever because of the Web. It have already grew closer thanks to the technologies set branded as “HTML5”, and the technologies will only grew stronger, hopefully beyond the catchphrase. As of the machines, a form of Semantic Web is indeed slowly emerging, but not in the ideal open, collaborative way and in a more top-down, proprietary approach, limited to the centralized design in which many are asked to interface with few proprietary platforms who encapsulates all data.

It’s a good thing for people to start enjoying what it is possible when the data is linked — yet, having them linked in a more open way while safeguarding our privacy remain the work to be done. This week we saw the 20th anniversary of W3C, and the HTML5 spec reaches Recommendation status — the events themselves are testimony of the rough history of the Web. I remain cautiously optimistic on this one — the organizations rally on this front is largely intact, and people will, eventually more aware of the danger when as they enjoy the convenience of the technologies.


The LogicError page was in my bookmark since a long time ago, like Firefox 0.8-ish, but not until now I realized LogicError is in fact an Aaron Swartz project. The footnote itself, with the name, kind of say something.

by Timothy Chien at November 03, 2014 03:32 PM

MozLinks-zh

Firefox 10 週年了,短片募集中!

一個轉眼之間,MozTWFirefox 都已經十歲了。上述的影片是 Mozilla 的一個行銷活動,希望能夠邀請全球愛用 Firefox 的使用者手持著「Firefox 是我自己的選擇」的自製看板拍照;並加上 hashtag 「#ChooseIndependent」以及「#fx10」上傳至自己的社群網路上 ( Twitter / Facebook / Plurk 等等 )。

獨立自主的選擇,為何如此重要

十年前的這個時候,為了追求更加進步的網路,於是 Firefox 因應而生。在這十年,我們獨立自主、自由選擇,不因財團主意而破壞追求網路自由與開放的意願。

照片、影片募集中

看到了這個活動之後,立刻讓我想到 Mozilla 曾經拍攝過的一部影片叫「I am a Mozillian」。自己覺得如果能夠拍攝類似的影片的話,應該還蠻酷的!而且 MozTW 打算為 Firefox 在 11/15 舉辦一場盛大的 10 週年生日趴,所以我自己希望能夠透過這部影片吸引更多人來參加活動、認識 MozillaMozTW

* 影片中除了會推廣 MozTW 所舉辦的 Firefox 10 週年派對 以外,也會宣傳 Mozilla Taiwan Firefox 10 週年系列活動

募集方式

感謝你願意協助拍攝,照/影片中可以一個人或多個人;拍攝的時候別忘了要拿著一張板子上面寫「Firefox is my independent choice in “你所在的都市”」。影片的格式希望能在 720p (含) 以上,檔案格式可以為 mp4 / mts / m2ts / mov 。

拍攝完畢之後上傳到任意免空或自己的空間,然後寄信給我 orin@moztw.org 就可以囉。謝謝大家 !!

原文 / Orin's Blog - Firefox 10 週年了,短片募集中!
作者 / Orin

編按:由 MozTW 社群舉辦的 Firefox 10 週年歡慶派對已經在日前開放報名了。活動適合想認識 Mozilla、MozTW、及 Open Sourse 或是完全沒有經驗但覺得有趣的人來(簡單來說就是適合各式各樣的人),內容非常豐富有趣,絕對不會讓你失望,請大家務必報名參加喔! ;-)

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

October 30, 2014

orinx

Firefox 10 週年了,短片募集中!

一個轉眼之間,MozTWFirefox 都已經十歲了。上述的影片是 Mozilla 的一個行銷活動,希望能夠邀請全球愛用 Firefox 的使用者手持著「Firefox 是我自己的選擇」的自製看板拍照;並加上 hashtag 「#ChooseIndependent」以及「#fx10」上傳至自己的社群網路上 ( Twitter / Facebook / Plurk 等等 )。

獨立自主的選擇,為何如此重要

十年前的這個時候,為了追求更加進步的網路,於是 Firefox 因應而生。在這十年,我們獨立自主、自由選擇,不因財團主意而破壞追求網路自由與開放的意願。

照片、影片募集中

看到了這個活動之後,立刻讓我想到 Mozilla 曾經拍攝過的一部影片叫「I am a Mozillian」。自己覺得如果能夠拍攝類似的影片的話,應該還蠻酷的!而且 MozTW 打算為 Firefox 在 11/15 舉辦一場盛大的 10 週年生日趴,所以我自己希望能夠透過這部影片吸引更多人來參加活動、認識 MozillaMozTW

* 影片中除了會推廣 MozTW 所舉辦的 Firefox 10 週年派對 以外,也會宣傳 Mozilla Taiwan Firefox 10 週年系列活動

募集方式

感謝你願意協助拍攝,照/影片中可以一個人或多個人;拍攝的時候別忘了要拿著一張板子上面寫「Firefox is my independent choice in “你所在的都市”」。影片的格式希望能在 720p (含) 以上,檔案格式可以為 mp4 / mts / m2ts / mov 。紙板可以在這邊下載

拍攝完畢之後上傳到任意免空或自己的空間,然後寄信給我 orin@moztw.org 就可以囉。11/5 收稿之後會先剪第一部影片,等 12 月初的時候我還會用這些素材來完成 Firefox 10 週年活動的回顧影片喔。謝謝大家 !!

 

by Orin Chen at October 30, 2014 12:38 PM

October 24, 2014

Othree

IE video 標籤記憶體問題

最近遇到一個 IE 會 crash 的問題,找很久才發現是記憶體問題,然後因為那頁有用到大量的 <video> 標籤,所以就直接鎖定目標,結果發現果然 video 就是問題元兇,測試到 IE 11 還是同樣行為。

目前發現的問題有兩層,第一層問題是如果 IE 在遇到 video 沒有設定 poster 時,會自動初始化整個 video 元件,去把影片抓下來,只為了產生 poster 圖片,第二層問題,就是這個初始化 video 元件的動作,會吃掉很多的記憶體,即使我的影片只有五百多kb,IE 還是一個 video 就吃掉數十 mb 的記憶體,即使這些 video 都沒有播放,甚至還用 CSS 藏起來了,然後因為一個頁面上有很多的影片輪流播放,所以把記憶體吃光後就當掉了。

要解決這個問題,一開始是想說設定正確的 poster 圖片就好了,確實解決了第一層的問題,但是因為影片還是會輪撥,遲早會把記憶體吃光,所以試了幾個方法想要避免這種情形,像是把 dom node detach 甚至砍掉之類的,不過都沒有效果,吃掉的記憶體不會還回來,最後只好讓 IE 不做輪撥了。

這個問題我看 stackoverflow 好像也沒有,看來在單一頁面上放很多 video 的使用情形真是很少見啊。

October 24, 2014 04:01 AM

October 23, 2014

Othree

Resource Hints

Resource Hints 是最近剛公開的一個 W3C Working Draft,目前看作者都是 Google 的人,Resource Hints 是依附在 <link> 標籤或是 header 下的,用來告訴瀏覽器有哪些資源可以先讀好的一個慣例語法,犯例如下:

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com">
<link rel="preload" href="/assets/font.woff" as="font" loadpolicy="next">
<link rel="preload" href="/assets/logo.webp" as="image" loadpolicy="next inert">

可以發現有兩種 hint,分別是 preconnectpreload,當然就照字面上的意思就可以理解了,preconnect 就是先建立好連線,像是 HTTPS 連線就需要先做 handshake 交換好加解密用的 key,影響比較直接,preload 當然就是先把特定的檔案拉下來,而且還可以指定要不要先做處理,像是 decode jpg 圖檔之類的動作可以推遲到真的需要圖片時才做。

目前看起來是不適合大量的檔案,應該還是要用來指派較關鍵的一些檔案,像是主要背景、大圖、字形之類的,而且因為可以根據設定 block onload event,拿來讀字形似乎可以避免 FOUT 的狀況,感覺是個看似簡單,但是功能其實還蠻多的新東西。

October 23, 2014 06:18 AM

October 22, 2014

MozLinks-zh

2014 Webmaker 社群發展

這篇文章檢視了 Mozilla Webmaker 社群的原則,以及我們在 2014 年推動社群的主要努力方向

一起型塑出以下成果希望來年能有更多更多人一起加入,讓 Mozilla 的使命能散佈與擴大到更多地方。

以下是 Chris Lawrence 跟我暱稱作「後設敘事」的草稿。這篇稿子試圖描述一些我們 2014 年預計要做的事情,以及為什麼要做這些事。非常歡迎大家提供各種想法與建議!

MozFest

我們的原則

我們相信,讓人們能透過開放平台進行協作,對個人的成長與眾人的未來是很重要的。

Webmaker 社群團隊承諾會基於 Mozilla 使命,建立一個符合以下敘述的網際網路:

  • 易於了解:它是透明的-我們可以關注它、認識它。
  • 協同工作:它提供一個可以輕鬆玩及創新的機會。
  • 屬於眾人:它對所有人公開,由我們自己去定義它。

我們可以藉由 Connected Learning principles 來引導我們,它主張學習該是:

  • 以生產力為中心:透過實際動手操作,將會擁有更深入的學習。
  • 開放地連結起來:不管在學校、家庭還是社群都可以使用。
  • 互相分享目標:利用網路的力量,讓有志同道合的人一起合作。

將這些原則編織在一起後,我們的目標是:

  • 塑造充滿創意、創新以及合作的環境
  • 建立產品、專案、實作練習,讓更多的人藉由動手做而學習。
  • 茁壯社群,使之能參與並致力其中。
  • 開放的教與學,給人一項生活中可以實際用上的工具。

為什麼要有 Web 素養?

我們已經有很多透過 Web 所得,不論是數位或類比的經驗。網路讓我們更完整地看待世界、並與其他人互動。不論是無意識或是過度地,網路都正在建構著我們,而同時我們也正塑造它

教與學無法自外於這個轉變;通常人們害怕的心態會多於被賦予能力的感覺。到底我們要怎樣,才能夠讓人更加能夠學習關於網路的五四三呢?

我們相信,能有 Web 素養是很重要的,意思就是說我們要增長以下的知識:

  • Web 文化
  • Web 技巧
  • Web 公民權

重要的是,網路素養是一個整體的觀點。他不僅僅只是簡單的「學寫程式」,而是闡述線上與線下地帶變得模糊的地帶,以及網路和現實世界複雜的互動方式

到目前為止的故事

為了先闡述這件事,我們透過網路組織,號召個人和團體一起推行讓人知道得更多、做得更多、做得更好的運動

在 2013 年 1 月,我們啟動了第一輪行動。Webmaker 社群開始測試一些催化全球網路素養躍進的策略與專案,於各地扎根。

我們集合現有的行動,諸如 Hive Learning NetworkSummer Code Party,同時也規劃新的活動,好比 Teach the Web MOOC網路素養一覽

現在,一年過去,這些計畫還在持續散佈及擴展

Webmaker 社群

我們的社群成員尋求:

  • 提升他們的 Web 素養。
  • 建構和分享教學工具。
  • 增加實際的人脈網路。
  • 參與並協同行動。
  • 鑑別具有在地風格的全球運動。

下面這張圖是我們的「領先用戶」。 這裡有一些在專案中,非常積極參與的社群成員,這些成員可以被分成幾種類型。本圖只是大致繪製,並不是非常完整。目的在於蒐集一些社群成員的動機,然後以視覺化方式互相比較。

我們的團隊

我們提供我們的社群:

  • 開放的網路群體:連結人群及尋找合作、創新的組織。
  • Webmaker.org:完整、具影響力,專注為推展 Web 素養設計的產品。持續提供入門課程、工具、徽章和使用者頻道,讓使用者能夠成為 Web 的製造者。有了這個產品,我們將能推行在「學習寫程式」之外,另一個差異化的「Web 素養」空間。(webmaker.org)
  • Web 素養:定義人們真正地「懂 Web」時所需具備的素養和能力(Web Literacy Map
  • 發展專業能力:使用開放的網路平台,增進開放的教學技巧和方法。(Teach the Web)
  • 運動:舉辦活動以擴展與宣傳我們「從做中學」的理念。(Maker Party)
  • 脈絡化的品牌識別:建構具有在地特色的全球品牌。(Hive Learning Network)

更詳細的未來路線,將會在近期推出。

這是提供支援與貢獻的組織成員概觀

2014 年大事件:

在 2014 年,我們將會進行:

  • #teachtheweb 訓練:一月開始 – 進行中,有線上活動,也在某些地方舉辦實體活動
  • Hive Summit:二月,位置未定
  • Webmaker 社群工作週:暫定在第一季結束時推出,地點待定
  • Maker Party:六月~九月,全球活動
  • Mozfest :十月中後期,地點位於倫敦

持續還有很多活動企劃中。

我們剛開始計劃本年的活動,非常歡迎你提供意見給我們。如果你很感興趣的話,寄信給我們來湊一咖吧!

編按:本文寫於 2014 年初,上述預定活動剩下 10 月底倫敦舉辦的 Mozilla Festival。MozTW 將會在活動結束後舉辦連續聚,邀請參加 Mozfest 的朋友們,談談這個令人感到好奇的活動裡面到底有些什麼!屆時請不要錯過囉~
原文 / Webmaker Community in 2014 | Michelle Thorne
作者 / Michelle Thorne
授權 / 創用 CC 姓名標示-相同方式分享-3.0

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

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

October 16, 2014

MozLinks-zh

TED 演講:Ryan Merkley 展示 Popcorn

TG12_45577_2R6A8993_1920

今日,來勢洶洶的 Popcorn Maker 首度在 TED.com 亮相,展示 Popcorn 擁有在網路裡改變敘事方法的潛力。

Mozilla 營運長 Ryan Merkley,6 月 29 日在 Edinburgh 的 TED Global 中,現場實際操作 Popcorn Maker。 這個線上工具是 Mozilla Webmaker 專案的一部份,非常容易上手,它可以讓任何人將即時的內容添加到任何影片內 - 像是照片、地圖、社交媒體等等。

影片突破框架

「影片誕生於網路世界時是在一個小小的盒子裡,與它相關的眾多資訊跟影片本身並沒有辦法連動。但 Popcorn Maker 改變了這個框架。」Merkley 這樣說。

「Popcorn 將影片打造成新的模式,讓它就好像是網頁本身一般——動態的、充滿超連結、可混搭,然後他就突破以往的框架了。」

Popcorn + TED 演講

Mozilla 也實驗性的 在 TED Talks 內用其他的方法演講。Popcorn 團隊今天發佈了 Dr.Beau Lotto 做的 TED Talk 混搭版。他在影片裡加入了一層可點選的圖層,讓任何人都可以在這一層當中加些新東西、編輯、或者混製。

「我們將 TED 影片加入一些內容,來測試新的 Popcorn Maker 應用程式。這是個很棒的方法,Popcorn Maker 的新功能是我們去年在做的東西。」Popcorn 計劃總監、Brett Gaylor 這樣說。 「我們直接用 Popcorn 在影片內新增連結、維基百科條目、圖片及地圖。這讓我們有更多學習的機會,也能夠更深入地溝通。」

對 TED 來說是非常興奮的事,Popcorn Maker 擁有讓 TED Talks 創造出更多、更豐富的資訊生態的潛力。——來自編輯團隊、演講者、還有身為觀眾的你」—— TED.com

在 Mozilla Festival 推出 Popcorn Maker 1.0

Mozilla 會在十一月位於英國倫敦的 Mozilla Festival 推出 Popcorn Maker 1.0。同時,我們也會放出跟今天在 TED 演講上發表的內容一樣的新 Beta 版。 在團隊為最後成品努力的同時,Beta 版就已經有完整的功能,可以給任何想第一個嘗試的人使用。

深入了解

關於TED

TED 是一個非營利組織,透過科技、娛樂與設計的世界致力宣揚「理念值得推廣」。全世界的人在 TED.com 上都可以免費觀賞最精彩的演講與表演。

開放原始碼行動

Popcorn Maker 是由許多摩茲人建構的,包括 Popcorn.js 的社群貢獻者,例如 Bobby Richter、Jon Buckley、Kate Hudson、Scott Downe 以及 Ben Moskowitz,這些有才華的團隊成員加強了工具功能。貢獻者還包括與 Mozilla 有特別合作關係的 Toronto’s Seneca 大學。Popcorn Maker 如果沒有由老師 David Humphrey 領導學生 Christopher de Cairos、Matthew Schranz、還有 David Seifreid 的話,也不會完成。

原文 / TED Talk: Ryan Merkley demos Popcorn
授權 / 創用 CC 姓名標示-相同方式分享-3.0

φ 交大服務學習 翻譯 - 極地狐 編輯


編按:
這篇是 2012 年的文章,Popcorn 的 TED 演講影片已在 ted.com 釋出繁中版本,Popcorn Maker 也已有繁中的成品了。另外 Webmaker 整個專案也有其他好用的工具等你來玩玩看喲!

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

October 13, 2014

Othree

node-ffi

今年的 JSDC 分享的是 node-ffi,不過我覺得沒講很好,反而練習講得比較好...

October 13, 2014 02:48 PM

October 02, 2014

MozLinks-zh

咱們來說說 Popcorn Maker


Brett Gaylor 在 Mozilla Festival 中發表 Popcorn Maker。

今天,很榮幸地在 Mozilla Festival 上發表 1.0 版本的 Popcorn Maker。Popcorn Maker 是一個免費的網頁應用程式,它可以讓網路影片具有互動性、能夠豐富影片內容、讓它充滿魅力。

Popcorn Maker 可以輕易的讓你在網路影片裡加進一些內容、也可以混搭不同素材,然後再分享出來。只要簡單地拖拉物件到頁面中,就可以在任何影片裡增加生動的內容——像是照片、地圖、連結、社群媒體等等,而且只要在瀏覽器當中就可以進行了。 讓影片增加些內容及連結,讓人每次觀看都覺得獨特,這樣播放影片的方式,在網路上是個全新的方法。

Popcorn Maker 故事

直到現在,網路影片依舊藏在小小的黑色盒子裡。」 Mozilla Popcorn 總監 Brett Gaylor 這樣說到:「Popcorn Maker 改變了這個局勢,影片製作好像變得像是網頁的一部份了:可以改、可以放連結、也能重新混搭,它把周圍的世界也一起連結起來了。」

去年 Mozilla 發表了一個給開發者的 Javascript 函式庫,Popcorn.js。它帶來了一些開創性的作品,比如說像是 NFB 的 One Millionth Tower、PBS 和 NPR 的 2012 election coverage 、還有其他作品等等。

但在此之前,Popcorn 的能力大多只針對開發者有用。」 Brett 說「Popcorn Maker 將這股力量放在每個人的手中,藉由直覺性的操作介面,讓每個人都可以上手。我們對於這個工具未來能夠在這個世界中創造出什麼,感到無比興奮。」

身為 Mozilla Webmaker 專案的一部分,Popcorn Maker 擁有非常獨特的合作方式,它是 Mozilla 和數個電影工作者、開發者、年輕的媒體工作者,還有 Seneca College 的開放科技發展中心一起設計、協同合作下,建造出來的成果。

Popcorn Maker 完全使用 Open Web、用 HTML、CSS 和 Javascript 寫成。 「它基本上就是用一個網頁製造出另一個網頁。對於在網路應用程式能做到什麼,Mozilla 有著更大的願景,我想這是一個非常好的範例。」Brett 這樣說。

加入我們

原文 / Introducing Popcorn Maker | The Mozilla Blog
授權 / 創用 CC 姓名標示-相同方式分享-3.0

φ 交大服務學習 翻譯 - 極地狐 編輯

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