探索運用 JavaScript 拯救宇宙的任務

本週集數

服務工作人員使用 IE 和 Spartan 的例子,在收件匣中使用 Firefox Nightly,在 Chrome 中偵錯 IE、在 Chrome 中使用 Flexbox 為 IE 偵錯、使用 1,000 的 JavaScript 節省宇宙;而產生器也支援 IE 和 Spartan。

每日偵錯

這些實用提示每天都會傳送到收件匣,協助您加速工作流程。Umar Hansa 以 GIF 動畫格式示範如何提供一天的開發人員工具小秘訣。例如跳到「來源」面板中的行號,以及在 cURL 中重播網路要求。

https://www.google.com/url?q=https%3A%2F%2Fumaar.com%2Fdev-tips%2F&sa=D&sntz=1&usg=AFQjCNGgWKnyERWpWflwl-7sk6qV4gngmg

在 Chrome 中偵錯

如果您可以在 Chrome 中對 Internet Explorer 進行偵錯,該怎麼辦?IE 診斷轉接器是最近由 IE 團隊開放原始碼的橋樑,可讓 Internet Explorer 與 Chrome 遠端偵錯通訊協定進行通訊。雖然本專案目前仍在實驗階段,但已讓您執行基本指令碼偵錯,相關團隊預計不久後就會移植至 Spartan。

http://blogs.msdn.com/b/ie/archive/2015/04/02/introducing-the-ie-diagnostics-adapter-for-third-party-developer-tools.aspx

服務人員

由於 Service Worker 將從 Firefox Nightly 開始,因此打造離線體驗可能會比較容易。服務工作人員根據 W3C 規格,可讓開發人員進一步控管網頁,允許他們重新轉送網路要求、從快取提供資源,甚至傳送推播通知。Service Worker 已經在 Chrome 中提供服務,而 Firefox 團隊估計,他們可能會登陸 41 版。

https://blog.wanderview.com/blog/2015/03/24/service-workers-in-firefox-nightly

http://www.w3.org/TR/service-workers/

https://jakearchibald.com/2014/offline-cookbook/

回應式 FLEXBOX

使用 Flexbox 提升網站效能,改善回應式版面配置。開發人員 Zoe Gillenwater 解釋在必須支援舊版瀏覽器的網站外,如何使用 Flexbox 做為漸進式強化功能。內容詳盡的簡報也可以做為一覽表,幫助您記住 Flexbox 屬性的各種內容。

https://vimeo.com/124796320

http://www.slideshare.net/zomigi/enhancing-responsiveness-with-flexbox-smashing-conference

JS1K 競爭

您每用 1,000 個 JavaScript 可以炸出多少外星人?作者:Keith Clark 的《Defender》是今年 JS1K 競賽的得主。參賽者的任務是運用 1,024 位元組的 JavaScript 影片,打造極具吸引力的體驗。今年的跑者包括神秘的單軌列車和不可能的雲霄飛車。

http://js1k.com/2015-hypetrain/demo/2306

http://js1k.com/2015-hypetrain/demo/2322

http://js1k.com/2015-hypetrain/demo/2364

愛爾蘭/蘇丹境內的記者

由於 IE 團隊已經宣布發電機仍在開發階段,回呼可能已過時。在 ES6 中,產生器是特殊函式,可稍後暫停及重新啟用,以同步的方式編寫非同步程式碼。產生器已在 Chrome 和 Firefox 中推出,且已在 Safari 中開發。

https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/6263797-generators

https://www.youtube.com/watch?v=rT-1ZxhjzBw

https://www.chromestatus.com/features/4959347197083648

3D 素描者 (由 Jason)

http://codepen.io/loktar00/full/DphFg/

第 18/100 天階段環按六面

http://codepen.io/sixsided/full/qEeEYm/

高斯分佈圖 (Frank Dumont)

http://codepen.io/fdumont/full/CvdDI/

由 Abhijit Hota 體系化繁為簡

http://codepen.io/XDBoy018/full/JodWKN/

歡迎透過 Twitter #LazyWebShow 與我們分享意見