前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單；本文則是對於半年來發布的前端每週清單中的 JavaScript 相關的教程實踐與開源專案的盤點，可以檢視這裡獲得往期清單或者其他盤點篇。
教程實踐
《2017 前端開發手冊》：Front-End Developer Handbook 2017 由 Cody Lindley 編寫，面向每一個希望學習前端的開發者。該手冊概括地討論了前端工程化的相關實踐：在 2017 年中我們應該使用哪些前端工具以及如何學習去使用這些資料。該手冊的內容包含了 Web 技術的基礎：HTML、CSS、DOM 以及 JavaScript，以及基於這些技術構建的優秀開源專案。
《現代 JavaScript 概念縱覽》：現代 JavaScript 開發在過去幾年中經歷了迅猛的變遷，並且這種變化的勢頭毫無停滯的預兆。對於很多前端開發者而言可能還不是很熟悉那些 JS 部落格或者文件中提及的時興的概念。此文討論了很多起到媒介作用以及高階的概念，和這些概念是如何被適用於現代 JavaScript 開發中的。本文我們會討論 Statefulness 與 Statelessness、Immutability 與 Mutability、Imperative 與 Declarative Programming、Higher-order Functions、Observables、以及 FP、RP、FPR 程式設計正規化。
《JavaScript 啟動效能瓶頸分析與解決方案》：隨著現代 Web 技術的發展與使用者互動複雜度的增加，我們的網站變得日益臃腫，也要求著我們不斷地優化網站效能以保證友好的使用者體驗。本文作者則著眼於 JavaScript 啟動階段優化，首先以大量的資料分析闡述了語法分析、編譯等步驟耗時佔比過多是很多網站的效能瓶頸之一。然後作者提供了一系列用於在現代瀏覽器中進行效能評測的工具，還分別從開發者工程實踐與 JavaScript 引擎內部實現的角度闡述了應當如何提高解析與編譯速度。
《GraphicsJS:輕量級繪相簿》：目前 Web 開發中最常用的建立互動式圖片的技術選型當屬 SVG 與 Canvas，傳統的 Flash 與 Silverlight 已經慢慢淡出歷史的舞臺。而對於 SVG 與 Canvas 的對比也顯示，如果是想建立與操作簡單的互動性圖片，那麼 SVG 當屬首選。SVG 本身是基於 XML 的向量圖，任何通過
svg標籤載入的圖片都會成為 SVG DOM 中可操作的物件。而 GraphicsJS 正是基於 SVG 的簡單易用的 JavaScript 繪相簿。《理解 JavaScript 中的作用域》：JavaScript 中的作用域、閉包以及上下文繫結一直是令人凌亂的知識，此文作者詳細地從函式作用域、塊作用域、詞法作用域、閉包等進行詳細闡述，值得一讀做個梳理。
《ECMAScript 4 背後的故事》: 本文是對於 1999 ~ 2008 年之間 JavaScript 世界發生的大事件的詳細介紹，闡述了 ECMAScript 4 從提出到角力到流產的前世今生。 ( suo.im/phBiE )
《深入瞭解 JavaScript 中錯誤物件與堆疊跟蹤》：JavaScript 中 Error 物件的堆疊跟蹤資訊包含了從異常丟擲點到建構函式的所有棧幀資訊，而手動地去捕獲與操作堆疊跟蹤資訊有助於我們在開發測試或者異常處理相關的框架時有更好地實踐。( suo.im/MiMWd )
《對比探祕 WebAssembly 效能優越之謎》: 本系列文章通過有趣的漫畫介紹了 WebAssembly 的前世今生，並且與 JavaScript 就載入、解析、編譯、執行等瀏覽進行了詳細對比，從而介紹 WebAssembly 的效能緣何相較於 JavaScript 會好上很多。同時作者也強調，WebAssembly 與 JavaScript 各有所長，未來並不會存在太多的競爭，更多的是相輔相成，各司其職。( suo.im/3jsTUH )
《槽糕的 JavaScript 框架們》：此文作者 Matt Burgess 嚴肅地吐槽批評了幾乎所有的現今流行的 JavaScript 框架，與他上一篇文章偉大的 JavaScript 框架一起閱讀效果更佳。當然，作者並不是想讓大家回到茹毛飲血的歲月，而是希望能以辯證地態度去認識與使用框架。( 6me.us/e9R )
《JavaScript 圖片處理庫盤點》：圖片處理一直是客戶端開發中的常見問題，本文則是對基於 JavaScript 的常見的進行圖片濾鏡、裁剪等操作的庫進行了盤點；本文橫向比較了 CamanJS、glfx.js、grafi.js、Jimp 以及 Filtr2 這幾個常用的圖片處理庫，並且給出了不同業務場景下的選用建議。( 6me.us/ylUyM )
《Slack 是如何減少其客戶端記憶體佔用的》：本文是 Slack 在其桌面應用的開發過程中探索出的如何減少應用記憶體開銷的經驗介紹。Slack 最初為使用者的每個登入團隊都啟動了相同的處理程式，而後根據調研發現僅有部分使用者會同時使用多個團隊；因此 Slack 從解除安裝後臺團隊的 DOM 樹、分拆 JavaScript 程式碼進行優雅降級、重構 JavaScript 程式碼庫等多個方式來優化桌面應用的記憶體佔用。( 6me.us/z0XSh3 )
《流行網站上陳舊的 JavaScript 庫留存調研》：本文是 Tobias Laudinger 及其合作者對於客戶端 JavaScript 庫的使用現狀的調研報告；基於對於超過 133K 個網站的調查結果，它們發現大約 37% 的站點仍然使用了某些存在已知漏洞的 JavaScript 客戶端指令碼，它們建議我們一定要慎重思量網站中引入的外部依賴，特別是對於那些已經執行了很久的站點。( 6me.us/csu2da )
《編寫 JavaScript 框架：客戶端路由》：本文是編寫 JavaScript 框架系列的最後一篇，主要著眼於討論如何實現 JavaScript 客戶端路由及其與服務端路由的區別。( parg.co/bOL )
《面向“遠古” Web 開發者的現代 JavaScript 教程》：本文主要是面向那些從 PHP、JSP、Rails 佔據統治地位時開始進行 Web 技術的開發者進行常見的現代 JavaScript 基礎概念的介紹。( parg.co/bsF )
《解密 JavaScript 非同步程式設計》：JavaScript 中非同步程式設計歷經了多個大的迭代，從回撥到 Promise 到生成器以及現在的 Async/Await；本文作者則是高屋建瓴地介紹了 JavaScript 非同步程式設計的變遷歷史以及簡要的內部實現原理。( parg.co/bsz )
《ES7 Async/Await 常見誤區》：ECMAScript 6 引入的 Promise 大大簡化了 JavaScript 中非同步程式設計語法，而 ES7 引入的 Async 則使其更為優雅；本文作者對於實踐中常見的對於 Async/Await 的語法誤用案例進行了解析。( parg.co/bsW )
《Composing Software》：本系列文章由 Eric Elliott 大神釋出，著眼於介紹 JavaScript 函數語言程式設計與大型軟體專案中的可組織性技術的介紹，包括了函數語言程式設計導論、高階函式、Reduce、Functors & Categories 等幾個部分，還在持續更新中。( parg.co/bQY )
《12 個精妙的 JavaScript 程式碼片》：本文作者分享了十二個非常不錯的 JavaScript程式碼片，這些程式碼片能夠幫你優化現有程式碼，讓程式碼更加地賞心悅目。（ parg.co/bhH ）
《JavaScript 中構建響應式引擎》：本系列文章介紹瞭如何在 JavaScript 中構建高效能的響應式引擎，對於有興趣瞭解 MobX 底層原理的同學來說也是個不錯的教程，目前包含了對於可觀測物件的構造解釋、屬性推導與依賴追蹤等內容（ parg.co/bhR ）
《深入淺出構建簡單的 Chess AI》：本文作者介紹瞭如何基於 JavaScript 構建一個國際象棋的 AI，雖然不屬於前端開發範疇，不過還是蠻有意思的一篇文章。本文主要包括移動生成、棋盤視覺化、位置評估、基於 Minimax 演算法的搜尋樹、Alpha-beta 修剪等等。( parg.co/bCw )
《使用 JavaScript 打造智慧咖啡機》：這幾年智慧家居與 IOT 的概念非常火熱，作者也發揮極客精神改造了一下辦公室的咖啡機。文中作者藉助了 Tessel 與 Johnny-Five 智慧硬體平臺，自定義了超文字咖啡機控制協議 HTCPCP，將咖啡機改造為了能夠提供類 REST 服務的終端，能夠遠端控制與實時監控。
《使用 Chrome devtools 檢視程式碼覆蓋》：近日 Chrome Canary 版本中新增了執行程式碼覆蓋率檢查的特性，其能夠反映你的 Web 應用中的每個 JavaScript/CSS 檔案中的程式碼覆蓋率以及所有的未被執行的行。
《JavaScript 模組演化史》：當初 Brendan Eich 草創 JavaScript 之際估計想不到它會在之後的二十年內起到如此重要的作用，本文則是深度回顧了缺乏模組化帶來的困難以及這二十年間從名稱空間、依賴注入、CommonJS、AMD、UMD 到 ES2015 Modules 等等十餘種不同的模組解決方案。( parg.co/bhn )
《使用 Inline Cache 優化動態 JavaScript 程式碼》：本文是作者在開發 JSIL 開源庫時使用的一系列優化手段的總結，主要關於如何使用多型線上快取（Polymorphic Inline Cache）來優化程式碼執行速度，不過這種方式也有可能造成意外的變化。作者介紹了何謂 Inline Cache 及其優化原理和帶來的效能提升評測等內容。( parg.co/b4a )
《基於 JavaScript 構建資料表示式分詞器》：本文是一篇挺有意思的文章，介紹如何利用 JavaScript 解構常見數學表示式並且從中提取出相關實體。本文涉及到的內容包括對於分詞器的簡單介紹、對於抽象語法樹 AST 的介紹以及最終如何使用程式碼來實現分詞演算法。( parg.co/bRO )
《TypeScript 在 Slack 的實踐分享》：維護大型的跨平臺的 JavaScript 程式碼庫是一件非常具有挑戰性的工作，無論是從 Chrome 的 JavaScript 中傳遞物件給 Objective-C 或者單純的接受來自 Node.js 中的回撥結果，你都需要保證不同的程式碼對於通訊物件的期望之間的一致性。而本文即是在開發跨平臺多終端的應用中，Slack 使用 TypeScript 來約束型別，從而避免意外的型別不一致導致的崩潰的實踐經驗分享。( parg.co/bRR )
《2017 裡 JavaScript 帶給我的感動》：本文作者縱覽了在 2017 年中 JavaScript 生態圈可能迎來的一系列巨大變革。他首先對比了 JavaScript 與 Reason，淺述了二者的優劣對比。然後介紹了 WebAssembly 以及另一個新興語言 Rust 未來可能在 JavaScript 生態圈中佔據的一席之地。最後，作者還介紹了 Docker、Now.sh 以及 Github Pages 等一系列優秀的輔助開發工具，並且暢想了去中心化浪潮下 Web 的未來發展。( parg.co/bRh )
《JavaScript 中處理 undefined 的 7 個技巧》：不同於 Python 或者 Java 中僅有 null 或 nil 來表示空值，JavaScript 為我們提供了 undefined 與 null。本文則是深度分析了 undefined 與 null 的區別，討論了實際工程開發中 undefined 的使用場景，譬如未初始化物件、不存在的物件屬性或者方法、越界訪問、無返回值的函式等；作者最後還給出了一些對於 undefined 的注意點，譬如提高內聚性降低耦合性等。( rainsoft.io/7-tips-to-h… )
《2017 年 JavaScript 測試技術概述》：本文涵蓋了 2017 年中 JavaScript 領域流行的測試理念、名詞與概念、工具以及測試的方法論。本文介紹了基本的測試型別的劃分、常用測試工具的劃分、以及 Jest、Mocha、Nightwatch 這樣的常用測試工具的選項與實踐技巧。( parg.co/bf3 )
《Microsoft Edge 中的 JavaScript 效能、WebAssembly 以及 Shared Memory》：JavaScript 的效能表現是 Web 開發中永恆的話題，而 Microsoft Edge 團隊也在實時接收使用者反饋以提升 Chakra JavaScript 引擎的效能表現。本文首先介紹了 Chakra 中的新特性，包括了一系列提升 JavaScript 效能表現的技巧；然後還討論了 WebAssembly、Shared Memory 與 Atomics 等新特性在 Edge 中的具體實現。( parg.co/bfk )
《8 小時內學習 Node.js》：Node.js 是基於 Google Chrome V8 引擎的 JavaScript 框架，其能夠用於開發類似於視訊直播、單頁應用等 IO 密集型的 Web 專案。而本文則是提供了完整的從零到一的 Node.js 學習路線圖，包含了基礎的環境構建、Console 使用、核心模組使用、基本的 Web 伺服器搭建等等內容。( parg.co/bNy )
《CSS-in-JavaScript：基於元件的樣式組織》：通過使用內聯樣式，我們能夠利用 JavaScript 帶來的可程式設計性的便利來組織樣式程式碼。它能夠為我們提供類似於 CSS 前處理器、名稱空間等多方面的輔助。本文則是介紹了幾個常見的適用於 CSS-in-JS 技術的場景，譬如排版、空格等。( parg.co/bNe )
《從零開始基於 JavaScript 構建簡單神經網路》：本文不是純粹的前端開發文章，對於聽說過人工智慧與神經網路並且有興趣的開發者不妨一讀。而本文則是漸進地介紹神經網路與深度學習理論基礎、如何使用 JavaScript 實現簡單的數學公式、如何實現簡單的神經網路等內容。( parg.co/bNa )
《在 Web 開發中謹慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過很多專案在選擇使用 CSS-in-JavaScript 來組織樣式的時候，卻是對於 CSS 與 CSS-in-JS 很多的誤解。本文以 Styled-Component 為例，列舉出了常見的 9 個誤解，譬如使用 CSS-in-JS 才能解決名稱空間衝突、保證樣式的可擴充套件性、帶來了效能提升與樣式檔案的可組織性等等。( parg.co/bNR )
《d3.express：整合互動式編碼環境》：本文介紹了尚在開發中的 d3.express，一個類似於 Python Juypter Notebook 的互動式編碼環境。d3.express 允許開發者使用大量 d3 內建的功能函式，譬如載入遠端的 CSV 檔案；並且允許開發者互動地實時預覽 SVG、Canvas 等繪製結果，有人認為 d3.express 會是一種基於 JavaScript 的更好的資料視覺化解決方案。( parg.co/bNi )
《V8 不再使用基準測試引擎 Octane》：JavaScript基準測試引擎是一段不斷進化的歷史。隨著網頁從原始靜態頁面到現在富客戶端應用，都需要基準測試引擎能夠與時俱進。SunSpider是其中比較早的基準測試引擎，它為快速優化JavaScript提供了基礎。但是，隨著虛擬機器開發者意識到微基準測試的侷限性，基準測試引擎隨之更新，針對SunSpider的短板進行優化，同時瀏覽器社群也將SunSpider從推薦基準測試引擎中剔除。Octane基準測試套件最早釋出於2012年，旨在減輕早期微基準測試引擎的一些缺陷。它源於V8的早期簡單測試用例，最終成為通用網頁效能的基準測試。Octane包含17個不同的測試集，以覆蓋各種不同的工作場景。Octane的內容代表它建立時度量JavaScript效能的主流方式。( parg.co/bN9 )
《JavaScript 程式碼風格要素》：本文是 Eric Elliott 編寫的 JavaScript 程式碼風格要素指南與建議，其借鑑了 1920 年的面向英文語言的 “The Elements of Style” 一文。本文介紹的關鍵要素包括：使用函式最為組合的原子單元並且保證函式的單一職責性、移除不需要的程式碼、使用更直觀具有自解釋性的變數命名、根據特性進行程式碼劃分等等。( parg.co/bMn )
《簡短的 WebAssembly 卡通指南》：現在有很多關於 WebAssembly 與 JavaScript 生態圈的討論，人們往往關注於 WebAssembly 帶來的巨大的效能提升以及它會如何顛覆現代 Web 開發。不過很多的介紹中並沒有詳細闡述隱藏在速度提升之後的具體細節，本文則是從整個 JavaScript 的演化史來介紹 WebAssembly 巨大效能提升的原因。( parg.co/bVa )
《基於 JavaScript 的非同步依賴載入》：在 Web 應用開發中我們經常會將一些首屏不需要的指令碼或者樣式檔案以非同步方式載入；而本文則是介紹了多種非同步載入網頁中依賴資源的方式，作者還將常用的方法整合為了 fetchInject 這個開源庫，方便使用者快速進行指令碼地非同步載入。( parg.co/bkG )
《基於 Electron 構建 Github Desktop Beta》：Electron 是著名的利用 HTML、CSS、JavaScript 等 Web 技術構建桌面應用的輔助工具；本文則是介紹了四個僅有原生應用開發背景的工程師如何利用 Electron 逐步構建 Github Desktop Beta 的經驗。( parg.co/bkK )
《編寫現代 JavaScript 程式碼》：JavaScript 被僅用來更新頁面元素狀態的日子一去不返，我們也需要編寫更加現代的 JavaScript 程式碼。本文則是介紹瞭如何利用 Linter 來格式化程式碼、如何使用 ES2015+ 特性、如何使用函數語言程式設計等建議來提升 JavaScript 的程式碼質量。( dev.to/scastiel/wr… )
《重構 Airbnb 前端架構》：本文是近日 Airbnb 開發團隊在思索重構程式碼庫中 JavaScript 部分的經驗總結，主要著眼於產品驅動開發以及技術沉澱、從傳統的 Rails 架構中積攢的經驗以及新的技術棧的某些特性等方面。本文首先介紹了從 Rails 遷移過程中的一些經驗，譬如將原本完全的服務端渲染介面所需要的資料切分為了 API 與 Non-API 兩大類，並且使用 Hypernova 來進行 React 服務端渲染。然後介紹瞭如何在應用前端通過引入懶載入與非同步載入等方式提升前端效能與使用者體驗。( parg.co/bkA )
《最終，JavaScript 成為了一流語言》：2003年，保羅·格雷厄姆（Paul Graham）在文中提到，他的公司決定使用Lisp（一門程式語言），並且指出自己公司相比競爭對手的優勢在於Lisp。如果Lisp像法語，那麼現如今的JavaScript就像英語一般。儘管二者的語法不一致，但英語是世界上最廣泛使用的語言，JavaScript是最廣泛應用的計算語言。然而，JavaScript仍未得到與其他語言同等的尊重。儘管它的使用率在創業公司和大型公司中持續增長，但若非必要，人們不會認為它是一門有用的語言。大公司的高階工程師聲稱它不是一門“真正的”程式語言，許多人並不知道除了操作畫素外它還能被用於何處。。( parg.co/bkb )
《理解 WebAssembly 的檔案格式》：為了保證 WebAssembly 能夠被人們閱讀與理解，需要提供對於 wasm 二進位制格式的文字表示。該特性著眼於能夠在文字編輯器、瀏覽器開發者工具等開發工具中瀏覽 WebAssembly 檔案，而本文則介紹了這種檔案格式的規範與工作原理，以及底層的位元組碼與上層的 JavaScript 物件之間的關聯關係。( parg.co/bk6 )
《JavaScript 單元測試框架大亂鬥：Jasmine、Mocha、AVA、Tape 以及 Jest》：在開始新的前端專案時，我們常常會考慮應該使用哪一個單元測試框架，或者考慮應該為哪些程式碼新增單元測試。而本文則對於常用的 Web 開發中的單元測試框架 Jasmie、Mocha、AVA、Tape 以及 Jest 進行了橫向對比，並且基於自己的經驗給出了不同應用場景與需求下不同的單元測試框架選項建議。( parg.co/bJ5 )
《Web 前端開發的未來》：本文作者從自己的實踐出發暢想了未來 Web 前端開發的可能方向；主要包括 JavaScript 新特性的增強以及對於狀態管理的深入、從簡單介面逐漸過渡到完整系統、原生與 Web 之間的邊界逐步消失、CSS 會逐步模組化並且前處理器會逐步退出歷史舞臺、效能仍然是關鍵瓶頸以及 URL 會變得愈發重要等多個方面。( parg.co/bJr )
《面向 Web 設計師與開發者的免費電子書合集》：本文介紹了十數本優秀的面向 Web 設計師與開發者的免費的電子書，涵蓋了 CSS&HTML 基礎、現代 JavaScript 開發、Git、PHP 等多個領域。( parg.co/bis )
《hyperapp》：hyperapp 是僅 1KB 大小的用於構建前端應用的 JavaScript 庫，它基於 Elm 架構，支援宣告式介面程式設計與函數語言程式設計，允許使用 JSX 宣告介面並且靈活地分割與合併自定義的標籤。hyperapp 實現的簡潔明瞭，是不錯的可以閱讀原始碼的輕量級框架。( github.com/hyperapp/hy… )
《這 WebAssembly，是 Mozilla 贏了》：Mozilla 提出1 asm.js 與 Google Chrome 提出的 PNaCI 是都是致力於在瀏覽器中執行原生程式碼的技術方案。不過 PNaCI 卻存在著自絕於 JavaScript 以及 HTML 等問題，並且其他的瀏覽器廠商很難去支援 PNaCI 標準。而 asm.js 則以輕量級的對於標準 Web 平臺擴充套件的方式實現了這一目標，也就導致了最終 WebAssembly 決定靠近 asm.js 而不是 PNaCI。( robert.ocallahan.org/2017/06/web… )
《JavaScript 模組現狀》：近日隨著各大瀏覽器紛紛開始支援 ESM（ECMAScript Moduls），Node.js 中也計劃引入
*.mjs作為 ESM 的副檔名，關於 JavaScript 模組化的未來發展也在社群引發了熱切討論。本文則是首先介紹了 ESM 在瀏覽器、Webpack 等構件工具以及 Node.js 中未來的實現，然後討論了個人對於 ESM 未來發展以及對於程式開發本身的潛在影響。( parg.co/bi0 )《WebAssembly 初體驗：重構簡單遊戲引擎》：WebAssembly 為我們提供了構建高效能的前端應用的途徑，而本文則從零開始介紹如何使用 C 來覆寫簡單的 JavaScript 遊戲引擎並且將其編譯為 WebAssembly。本文依次介紹瞭如何搭建基礎的 Emscription 工具鏈、使用 JavaScript 引入 wasm 模組、覆寫並且優化某個小型遊戲引擎、兩個引擎的效能評測等等部分。( blog.openbloc.fr/webassembly… )
《CSS 區域性作用域變數詳解》：CSS 自定義屬性或者所謂的 CSS 變數，為我們帶來了真正的、不同於 SASS 等預處理框架中使用的類佔位符的動態變數。本文介紹了 CSS 變數的基本定義語法與使用，以及如何使用 JavaScript 來動態修改 CSS 變數值從而動態地進行介面重渲染，最後闡述了目前瀏覽器對於 CSS 變數的支援情況以及可以使用的相容方式。( parg.co/bLS )
《Flow 與 TypeScript》：本文主要對比了 Flow 與 TypeScript 這兩個常用的 JavaScript 靜態型別檢測工具，首先介紹了在簡單專案中如何使用 TypeScript 與 Flow。然後對比了二者在型別覆蓋率上的漸進對比，會發現使用 Flow 之後因為其較為嚴格的型別要求會相對較快地實現高覆蓋，而 TypeScript 則相對較為鬆弛。( thejameskyle.com/adopting-fl… )
《JavaScript 中類的私有域定義》：目前對於類中的私有域定義已經達到了 Stage 2，本文即是詳細介紹 #private 語法的使用以及設計理念。顧名思義，我們可以使用 #privateFieldName 方式來定義類中的私有域，該私有域僅允許該類的方法訪問（包括靜態方法）。本文還介紹了使用這種 HashTag 方式而不是其他語言中常見的 private 關鍵字來定義的考量。( thejameskyle.com/javascripts… )
《CSS 的現狀》：毫無疑問我們正在見證著 JavaScript 社群與生態的極速變化，而與此同時可能很多人沒有關注到 CSS 社群的進展，本文作者則是對於 CSS 的現狀進行了綜述並且提出了個人的觀點。本文作者主要提出了五個論點：我們可以使用 CSS Module 來替代原有的 BEM 等命名方案、使用 Flexbox 來替代 float、使用 CSS Grid 來替代第三方網格庫、使用 CSS 內建的變數、計算函式等特性來替代 SASS 等預處理庫，乃至於最終我們完全可以使用 CSS-in-JS 來替代 CSS。本文具有極強的主觀色彩，請批判性閱讀。( parg.co/bLZ )
《billboard.js》：基於 D3 v4+ 的輕量級可重用的 JavaScript 圖表庫，支援 IE 9 以上瀏覽器。billboard.js 為我們提供了常見的柱狀圖、時序圖、餅圖等等多種圖表型別。( github.com/naver/billb… )
《如何用好 JavaScript console》：JavaScript 中最主要的的除錯工具之一即是
console.log，而 console 物件還包含著其他幾個常用的除錯方法。本文則是介紹了 console 物件，以及如何使用它進行簡單的時間消耗評測、優化陣列或者物件輸出格式、通過 CSS 優化輸入等等。( parg.co/b9o )《現代 Web 開發魔法書》：本書是對現代 JavaScript Web 開發中涉及知識的分類與介紹，來源於作者日常工作中傳送給全棧 Web 團隊新人的資源；目前已經納入了超過兩千的涵蓋了專案、工具、外掛、服務、文章、資料、站點等多方面的連結。本書包含了 Web 平臺概述、HTML5，CSS，JS 特性介紹、常用的 GUI 框架與架構介紹、應用開發流程中使用的工具介紹等等欄目。( parg.co/bv9 )
《基於 JavaScript 的機器學習》：人工智慧與機器學習的浪潮洶湧而來，JavaScript 也並非旁觀者；可能有很多人認為 JavaScript 過於緩慢、缺乏大量的科學計算庫、僅適用於 Web 開發，而本文以及系列文章則深入淺出地介紹瞭如何利用 JavaScript 進行常見的深度學習操作。本文即以簡單的迴歸擬合為例，從最基礎的庫安裝、資料匯入、資料預處理到模型訓練、模型預測 介紹瞭如何使用 JavaScript 進行簡單的機器學習任務。( parg.co/b9K )
《JavaScript 記憶體管理速成》：本系列文章以漫畫的方式生動有趣地介紹了 JavaScript 中記憶體管理的相關知識，首先介紹了 JavaScript 與 C 這兩個風格迥異的語言是如何進行記憶體管理的，然後討論了 ArrayBuffers 與 ShardArrayBuffurs 存在的意義以及可能引起的臨界情況，最後討論了在未來 WebAssembly 開發中應該如何使用 Atomics 來處理併發情況下的臨界情況。( parg.co/b9p )
Rust、WebAssembly 與 Webpack：WebAssembly 是新的執行於 Web 平臺的二進位制格式，我們能夠將 C、C++、Rust 這些語言編譯到 .wasm 檔案格式中然後在瀏覽器環境下執行他們；通常這些編譯後的程式碼在包體體積與執行速度上都會比 JavaScript 有明顯提升。而本文則著眼於介紹如何在瀏覽器中執行底層的 Rust 程式碼，也可以參考這篇文章( parg.co/by4 )來了解更多的關於 WebAssembly 快速實踐的知識。( parg.co/byh )
JavaScript 在嵌入式裝置與物聯網中的應用現狀：隨著近年來 Web 的發展與 JavaScript 的崛起，JavaScript 被應用到了許多原本不曾想象到的場景中，從服務端、工作站、資料庫、桌面環境到物聯網裝置中，都可以見到 JavaScript 的身影。而本文則概括了 JavaScript 在不同的嵌入式微型裝置中的應用現狀，並且選擇了具有代表性的裝置介紹了具體的使用場景與實踐方法。( parg.co/byr )
基於 JavaScript 的機器學習：深入監督學習演算法：本文是基於 JavaScript 的機器學習系列的第二部分，主要介紹監督學習演算法 kNN。kNN 演算法通常被用於分類或者回歸問題，本文首先介紹了 kNN 演算法的基礎原理，然後介紹瞭如何利用 ml-knn、csvyojson、prompt 等庫對 Iris 資料集中的資料進行訓練與預測。( parg.co/byR )
JavaScript 中存在純函式嗎？：隨著函數語言程式設計在前端介面開發中的流行，純函式的概念相信很多人都很熟悉，不過文字作者認為 JavaScript 中是否存在真正意義上的純函式還值得商榷。本文首先介紹了純函式的基本定義，然後給出了我們熟知的 JavaScript 中常見的純函式定義正規化。不過作者認為函式是 JavaScript 中的一等公民，函式變數或者某個 Object 的屬性方法都有可能被重新賦值，因此 JavaScript 中無法構建真正嚴格的純函式。( parg.co/by6 )
基於 Headless Chrome 的自動化測試：本文介紹瞭如何在 Headless Chrome 環境中使用 Karma 作為測試驅動執行基於 Mocha 與 Chai 的自動化測試用例。Headless Chrome 允許我們在無介面環境下，使用特性完備的 Chrome 來執行 JavaScript 指令碼並且渲染網頁。本文首先介紹了使用 karma-chrome-launcher 來搭建本地啟動 Chrome 環境，然後介紹了使用 Mocha 與 Chai 來編寫基礎測試用例，最後還討論瞭如何自定義 Headless Chrome 啟動器並且整合到 Travis CI 環境下。( parg.co/beo )
Webpack 中的作用域提升簡介：近日釋出的 Webpack 3 中引入了所謂的 Scope Hoisting 新特性，從社群的反饋來看該特性已經在很多專案中成功地幫助開發者減少包體大小，提高首屏載入效率；本文則是簡要地介紹了 Webpack 3 中作用域提升的基礎原理。本文假設你對於 JavaScript 中閉包與模組語法有所瞭解，首先介紹了在老版本 Webpack 中採用的作用域分割機制及其存在的額外的效能損耗，然後對比呈現了在引入作用域提升機制之後，打包而成的檔案的形式，與其帶來的效能提升原理。( parg.co/beE )
為什麼我們選擇 TypeScript：本文是 Reddit 工程師 Niranjan Ramadas 記述在前端技術選型時選用 TypeScript 的考慮過程。作者認為任何語言都有其優缺點，不過合適的語言應該具備如下特點：強型別、完備的工具鏈支援、能夠用於生產環境等。作者還特地比較了 TypeScript 與 Flow，TypeScript 是能夠編譯到 JavaScript 的超集語言，而 Flow 則是提供了一系列額外的註解來實現型別系統。Flow 能夠保證較好的型別覆蓋，但是其對於多型性的支援並不是很好，並且 TypeScript 的社群也相對活躍。( parg.co/beb )
TC39，ECMAScript 與 JavaScript 的未來：本文是 Nicolás Bevacqua 在騰訊前端大會上發表的同名演講的總結，介紹了 TC39 與 ECMAScript 的含義，概述了 ECMAScript 中提案的步驟以及部分代表性提案，同時還暢談了JavaScript 的未來發展方向。作者介紹了 Stage 0、Stage 1、Stage 2、Stage 3 這四個提案處理進度的具體含義與要求，並且列舉了 Array#includes、Named Captures 等具體的例子來闡述 JavaScript 不斷衍化的語法特性；作者還介紹了未來社群會持續關注的程式碼轉譯與適配、程式碼質量保證、程式碼打包與釋出等多個領域。( parg.co/bXD )
JavaScript 中的函數語言程式設計就是反模式（*本文僅代表原作者個人意見）：作者在本文中對比討論了 JavaScript 與 Clojure，並且介紹了 ClojureScript 的基礎用法與優勢所在。作者首先討論了他認為的函式式指令碼語言應該包含的特性，包括充分的 API、內建的不可變資料結構等；然後闡述了 lodash、fp、Rambda 這樣的單個庫存在的不足，譬如 ImmutableJS 雖然能較好地解決部分問題，但是卻會割裂使用者的開發體驗。最後筆者介紹了 ClojureScripe 的特性與優點，包括能夠在編輯器中單行執行、內建的大量轉化函式、較好地效能與程式碼可讀性保證等等。( parg.co/beH )
JavaScript 專案開發樣式指南：開啟新的專案就好像在綠地上肆意撒歡，此時的開發者擁有極大的自由；不過如果缺乏良好的基石，未來的專案維護可能會成為你的夢魘。本文即蒐集了來自 Hive 研發團隊的 JavaScript 專案開發指南，涵蓋了 Git、文件規範、環境變數控制、依賴管理、測試、檔案結構與命名、程式碼樣式、日誌、API 設計等多個方面；更多 JavaScript 工程實踐資料參考 https://parg.co/bIO 。( github.com/wearehive/p… )
前端 JavaScript 面試問題總結：本文作者發現目前並沒有太多令人滿意的前端 JavaScript 面試問題列表，因此他基於自己的面試經歷與實踐總結出了本文。本文主要包含以下部分，首先是基礎概念的認知，譬如對於閉包、EventLoop、REST 等概念的介紹；然後是對於編碼能力的考量，譬如對於常見的資料結構與演算法的實現、程式碼除錯能力與錯誤定位的評測等等；最後是對於整體系統設計能力的考量，譬如如何設計全棧的 Twitter 實現架構等等。( parg.co/bIL )
JavaScript 開發中常用的十大資料結構詳解：資料結構是軟體開發的重要組成部分之一，也是求職面試中常見的主題之一；本文將回顧介紹 JavaScript 中常用的十大資料結構，並且給出詳細的教程與線上實踐連結。本文涉及到的資料結構包括連結串列、棧、佇列、集合、對映、雜湊表、二叉搜尋樹、Trie 樹、二叉堆、圖等；更多資料結構與演算法相關資料參考 https://parg.co/bIt 。( parg.co/bIC )
程式碼風格約定與標準：本倉庫提供了一系列的各個語言的常用程式碼風格約定與標準，與 JavaScript 相關的包含了來自 Google、Airbnb 等多個公司或者社群的樣式規範，還有包括 HTML、CSS、SCSS 等一系列 Web 相關的規範。
ES6 中的 JavaScript 工廠函式實現：本文歸屬於 Eric Elliott 釋出的 Composing Software 系列，介紹在 JavaScript ES6 語法背景下如何實現工廠函式。所謂工廠函式即是非類或者建構函式的，能幹會某個新建立物件的函式；工廠函式能夠簡化我們建立新物件的過程，本文即是詳細地介紹瞭如何實現工廠函式，也是一篇不錯的 ES6 函式語法講解；更多 JavaScript 相關資料參考 https://parg.co/bMI 。
基於 JavaScript 的 Web 應用的端到端測試工具對比：本文回顧了常見的基於 JavaScript 的，用於對 Web 應用進行端到端測試的工具，並且對它們進行了簡單對比。本文首先探討了專案中應用端到端測試的意義，然後列舉了當前可用的基於 JavaScript 的介面自動化測試框架，然後比較了不同的端到端測試框架的流行程度與基本的程式碼片風格；更多 Web 測試相關資料參考 https://parg.co/bWd 。
JavaScript Binary AST 提案：隨著 Web 應用體積的不斷增加，頁面啟動時間逐漸成為了應用效能的主要瓶頸之一；我們可以通過多種方式來快取程式碼，但是對於大型程式碼庫的解析卻難以直觀解決。譬如在現代的筆記本上，Chrome 在載入 Facebook.com 的時候需要花費 10% 到 15% 的時間來解析 JavaScript 程式碼。本文介紹了由多位工程師提出的旨在提升 JavaScript 解析速度的 Binary AST 方案，本文介紹了當前解析中的瓶頸所在，並且給出了相應的解決建議。
自定義基於 JavaScript 的 16 位虛擬機器：本文介紹瞭如何利用 JavaScript 自定義 16 位虛擬機器，主要包括如何設計某個簡單的組合語言、如何構建某個編譯器能夠將
*.asm檔案編譯為可執行格式、如何構建某個能夠模擬記憶體、CPU 以及部分 I/O 操作的虛擬機器。文章內容依次介紹了虛擬硬體的基礎、限制、組合語言、編譯器、偵錯程式、編碼與解碼等內容；更多 JavaScript 相關資料參考 https://parg.co/bMI 。JavaScript 設計模式學習：本書是 Addy Osmani 著作的開源書籍，主要介紹面向 JavaScript 語言的經典與現代的常用設計模式。所謂設計模式即是軟體設計中常見問題的可複用解決方案，對於任何一門程式語言都是非常值得探索的話題。本文首先概述了設計模式的基礎理論，然後介紹了 JavaScript 中常見的十餘種類與物件的設計模式，接下來介紹了 JavaScript 介面設計相關的 MV* 設計模式，然後還介紹了 JavaScript 模組化設計以及 jQuery 中的設計模式等內容；更多 JavaScript 設計模式相關參考 https://parg.co/bIO 。
V8 新的 Turbofan JIT 編譯器帶來的效能特性概述：V8 JavaScript 引擎最早是 Google 為 Chrome 瀏覽器開發的 JavaScript 虛擬機器，其設計的初衷就是為了讓 JavaScript 能夠高速執行；而這種效能優化的保障就是所謂 JIT 編譯器。本文著眼於介紹 V8 新的 Turbofan JIT 編譯器提供的新的效能特效能夠為應用帶來的優化；本文依次介紹了使用 delete 操作符與設定為 undefined 這兩種不同的去除物件屬性的方式在新的編譯器下的表現差異、對於 Arguments 引數不同操作的對比、柯里函式與 bind 操作符的優化，以及物件遍歷、物件建立和對於新舊引擎中對於常見的 Winston 等日誌框架的效能對比等內容。更多 JavaScript 引擎相關知識參考 https://parg.co/bgp
JavaScript 之路：本書希望為任何對 JavaScript 有興趣的開發者提供 JavaScript 的多領域知識，其兼具了入門簡單、對初學者友好、使用 ES2015 語法以及規範的樣式指南等特點。本書主要包含以下章節：JavaScript 語法基礎、利用 DOM 介面建立互動性的網頁、構建完整的 Web 應用等內容；更多 JavaScript 相關資料參考 https://parg.co/bMI 。
2017 Web 開發趨勢：Web 開發在 2016 年裡得到了長足的發展與進步，而本文則高屋建瓴地分析了 2017 年中 Web 開發可能面臨的機遇與挑戰。作者首先討論了人工智慧的前景以及 Web 與之相結合的案例，然後討論了物聯網行業中 Web 相關的開發案例；接下來作者分析了崛起的 JavaScript 以及目前流行的專案，然後又從靜態網站生成器、虛擬現實、GIFs、Bots 等角度討論其他的發展方向。
JavaScript 中有趣而又無語的例子：JavaScript 是一門有趣的語言，它有著簡單的語法、龐大的生態系統與社群，不過 JavaScript 中也有著很多令人無語的地方。本文即是對 JavaScript 中一些有趣的、出乎意料的用法收集，對於初學者是個不錯的深入教程，而對於資深開發者也可以拿來作為面試題目。本文中包含的例子譬如
[] == ![]、NaN 的用法注意、try-finally 等等；更多 JavaScript 相關資料參考 https://parg.co/bMI 。基於 Proxy 的 PopUnder 庫反混淆：本視訊通過對某個商用的 Chrome 59 中 PopUnder 庫，的執行過程解析，來介紹如何利用 ES6 的 Proxy 進行，簡單的 JavaScript 混淆程式碼逆向破解。視訊還是挺有意思的，作者首先分析了經過混淆的原始碼，發現無法下手；然後利用 Proxy 監聽常見的 Windows 中 createElement 等函式的呼叫來了解該庫的執行流程，最後再根據 API 的呼叫順序復現出該庫。更多 JavaScript 設計模式相關參考 https://parg.co/bIO 。
三週時間打造全棧 JavaScript Web 應用：本文記錄了某個程式設計初學者如何用三週時間，循序漸進地從零構建出，基於 JavaScript 的全棧電子商務應用。本文從最初的產品設計與原型圖構建開始，然後介紹瞭如何選擇合適的資料結構與資料庫。接下來介紹瞭如何建立 Github 倉庫並且使用敏捷開發流程，最後介紹瞭如何利用 Express 與 Firebase 搭建服務端、使用 React 以及 Victory.js 構建前端應用等內容；更多 JavaScript 相關學習參考現代 JavaScript 開發：語法基礎與實踐技巧。
#開源專案
《開源線上程式碼演示網站 Dwitter 釋出 》：Dwitter 是類似於 CodePen 這樣的，不過專注於 JavaScript 程式碼片演示的網站，已經有很多開發者在上面貢獻了奇妙的基於 JavaScript 的動畫或者小程式。
《開源線上程式碼演示網站 Dwitter 釋出 》：Dwitter 是類似於 CodePen 這樣的，不過專注於 JavaScript 程式碼片演示的網站，已經有很多開發者在上面貢獻了奇妙的基於 JavaScript 的動畫或者小程式。
《notie》：這是一個輕量級的、零依賴的面向 JavaScript 的通知、輸入以及選擇套件庫。它允許彈出警示資訊、確認輸入框、允許使用者輸入資訊、允許使用者進行選擇以及進行日期選擇等。( github.com/jaredreich/… )
《在瀏覽器中實現自動駕駛汽車》：人工智慧與深度學習的浪潮滾滾而來，也給我們帶來了很多有趣的應用。該專案利用 JavaScript 建立了一個完整的自我學習的代理，能夠在一個 2D 環境下控制某個車輛自動規避各種障礙 。使用者還可以通過滑鼠繪製出新的障礙，而小車可以通過強化學習不斷進行自我更新，值得一試。( suo.im/4egERz )
《UnCSS》：UnCSS 能夠幫助你從樣式表中移除 HTML 中未被用到的樣式，它支援多檔案以及 JavaScript 樣式定義，並且提供了介面、命令列、構建外掛、POSTCSS 外掛等多種使用方式。( github.com/giakki/uncs… )
《wasm-loader》：wasm-loader 是能夠用於 Webpack 的 WASM 二進位制模組匯入工具，其能夠允許你在 JavaScript 程式碼中匯入 wasm 格式檔案並且將二進位制檔案打包成為 JS Bundle 的一部分 。( github.com/ballercat/w… -loader )
《marky》：marky 是基於 performance.mark/measure 封裝的高效能 JavaScript 計時器，其相較於
console.time()以及console.timeEnd()具有更好地效能表現，相較於簡單的Date.now()具有更好地準確度。( github.com/nolanlawson… )《Planck.js》：Planck.js 是基於 JavaScript 的 2D 物理引擎，能夠用於建立跨平臺的 HTML 遊戲。( piqnt.com/planck.js/ )
《Tippy.js》：Tippy.js 是基於純粹的 JavaScript 的輕量級無新增的 ToolTip 庫。( atomiks.github.io/tippyjs/)
《Fathom》：Fathom 是 Firefox 開源的用於提取網頁中有意義內容的 JavaScript 框架，其能夠有效識別頁面中的前進/後退按鈕、地址表單以及主文字內容等等。( github.com/mozilla/fat… )
《k6》：k6 是基於 Go 與 JavaScript 開發的現代壓測工具，它提供了非常清晰簡單的 JavaScript 介面；同時它基於 Go 提供了分散式的部署方案，支援雲端部署與 REST 介面控制。( github.com/loadimpact/… )
《Mavo》：Mavo 是純粹的基於 HTML 標記的用來建立富客戶端 Web 應用的框架，它允許開發者在沒有服務端或者 JavaScript 指令碼的情況下快速建立動態應用。( parg.co/b8n )
《Workbox》：Workbox 是來自 Google Chrome 團隊的快速將現有應用轉化為 Progressive Web Apps 的 JavaScript 庫；Workbox 允許我們通過 Webpack 外掛、Gulp 外掛以及 npm 指令碼的方式快速地為當前應用的資源建立對應載入 ServiceWorker。( workboxjs.org/ )
《Birdview.js》：Birdview.js 是個非常有趣的 JavaScript 外掛，它能將整個頁面以鳥瞰圖的方式呈現給使用者，並且允許使用者直接進入選中的點。( achrafkassioui.com/birdview/ )
decaffeinate：CoffeeScript 在很長一段時間內幫我們解決了傳統 JavaScript 中存在的痛點，不過隨著 ES6&ES7 的逐步流行，我們還是要從 CoffeeScript 中迴歸到 JavaScript；decaffeinate 正是能夠方便地將 CoffeeScript 程式碼轉化為現代的 JavaScript 程式碼。( github.com/decaffeinat… )
golden-layout：golden-layout 是非常強大的基於 JavaScript 的 Web 佈局工具，它支援視窗的拖拽、縮放以及原生式的彈窗，同時 golden-layout 還提供了豐富的介面以方便動態增刪元素、修改佈局或者自定義主題。golden-layout 官網還提供了與 RequireJS、React、Angular 等多種其他流行框架協同使用的示例。( golden-layout.com/ )
icaro：icaro 是輕量、高效地 JavaScript 物件觀察者實現，能夠自動監測 JavaScript 中物件的變化並且進行相應地譬如 DOM 更新等操作。icaro 使用了大量的 ES6 的特性，譬如 Proxies、WeakMaps、Maps 以及 Symbols，是非常不錯的可以用來學習利用最新的語言特性實現 JavaScript 響應式框架的開源庫。( github.com/GianlucaGua… )
Bundle Buddy：Bundle Buddy 能夠通過分析編譯生成的 SourceMap 來尋找 JavaScript 程式碼塊之間的原始碼冗餘情況。該工具能夠幫助開發者尋找合適的程式碼分割點以降低最終釋出應用的不穩定性，同時還能提升頁面載入效能。
gpu.js：在上週的前端每週清單中我們介紹過 GPGPU（General Purpose Computing on GPUs）的概念與基於 WebGL 的實現方式，而 gpu.js 就是提供了瀏覽器中快速實現 GPGPU 的單檔案 JavaScript 庫。gpu.js 能夠自動地將某些特定的 JavaScript 函式編譯為中間語言，然後利用 WebGLS API 使其執行在 GPU 中；而在某些無法使用 GPU 的環境下，仍然會將這些函式以正常的 JavaScript 執行流執行。
Wade：Wade 是輕量級、高效能的 JavaScript 搜尋庫，Wade 會在構建階段自動地為輸入陣列中的每個字串的字元構建反向索引，然後在搜尋時候快速返回使用者輸入關鍵字對應地下標；Wade 優勢在於對於相同的資料集進行多次搜尋時能夠避免冗餘的遍歷。
swagger-decorator：swagger-decorator 是旨在一處註解多處使用的 JavaScript & Node.js 應用中實體類與方法註解庫，其能夠用於實體類生成與校驗、Sequelize ORM 實體類生成、面向 Koa 的路由註解與 Swagger 文件自動生成的場景。
Nano ID: Nano ID 是輕量級的、支援 URL 的 JavaScript 唯一 ID 生成器，它使用了強力密碼加密的隨機 API，能夠保證生成符號分佈的平均性。