首發 楓上霧棋的日誌
前端動態
1、2019 前端工具調查結果
在 CSS 工具方面，Sass 仍然是最受歡迎的 CSS 處理器；大多數開發人員現在選擇不在其項目中使用任何 CSS 框架；減少使用 CSS 並使用 CSS 命名方案 的開發人員的數量超過了未使用 CSS 的開發人員；CSS-in-JS 繼續以穩定的速度增長。在 JavaScript 框架和庫方面，React 依舊保持領先地位，Vue 緊隨其後。結果中令人意外的是與 可訪問性測試 相關的數字，有 63.13％ 的受訪者表示他們沒有使用任何工具來對其項目進行可訪問性測試。
2、來自 25 位 React 專家的經驗，使你的工作效率提升
從 React 和 JavaScript 專家那裏獲取的關於如何提升效率的一些提示：為什麼以及如何專注於 Vanilla React；Redux 並不是 React 的一部分；其實你不總是需要 React；擁抱 TypeScript；大佬使用的一些插件等。
3、Lifecycle methods，hooks，suspense：哪個更適合來請求數據
作者綜合比較了 Lifecycle methods，hooks，suspense 三種方式在 React 中請求數據，分別列出了各自的優缺點，最終的結論是 suspense 更接近 React 的聲明式。
4、谷歌推出新提案 Portals：Web 上的無縫跳轉體驗
想要了解新提案的 Portals API 是如何改善頁面跳轉用户體驗的嗎？本文將主要對 Portals 的具體內容、Portals 在 Chrome Canary 中的試用、Portals 的規範等幾個方面進行詳細講解。如果你希望用户在瀏覽自家網站時，能夠在不同頁面跳轉得更加流暢，不妨來讀一讀這篇文章。
5、尤雨溪談 Vue.js：締造自由與真我
尤雨溪回答了關於 Vue 的一系列問題，包括 Vue 的產生，Vue 的發展歷程，Vue 的規劃，以及一些個人經驗的分享等。尤雨溪説，Vue 帶給自己最大的收穫就是 自由。
6、React + Typescript 工程化治理實踐
本文是作者對一次 React + TypeScript 組件的工程化治理過程所做的總結，主要針對靜態檢查，開發體驗和代碼質量三個方面。
7、Lodash 源碼中的那些迷人的細節
在 Lodash 中，函數的實現非常嚴謹、高效、兼容性強，以及具有一定的前瞻性，本文只拎出來一丁點兒細微的點，強力建議去擼源碼。
8、邁向更快的網絡
Chrome 的目標是讓用户告別加載延遲，未來，Chrome 可能會在在用户界面中使用明顯的徽章來標記加載緩慢的網站。Google 希望網站開發者提前做好準備，它推薦了一系列工具幫助開發者識別導致網站加載緩慢的因素，這些工具包括 PageSpeed Insights 和 Lighthouse，並推薦閲讀 Web.dev/fast。
明星項目
1、react-interactive-paycard
有人看到 JavaScript Weekly 最近展示的 vue-interactive-paycard，認為我們也需要 React 版本。
2、react-adaptive-hooks
const MyComponent = () => {
const { effectiveConnectionType } = useNetworkStatus();
let media;
switch (effectiveConnectionType) {
case "slow-2g":
media = <img src="..." alt="low resolution" />;
break;
case "2g":
media = <img src="..." alt="medium resolution" />;
break;
case "3g":
media = <img src="..." alt="high resolution" />;
break;
...
}
return <div>{media}</div>;
};使用這些 hooks 和 utilities 可以幫你向用户提供最適合其設備和網絡的出色體驗。
本週熱點
1、GitHub 將開源軟件保存 1000 年：為了留給子孫後代
GitHub 宣佈開放 Arctic Code Vault（“北極代碼庫”）的計劃。為了把開源軟件留給子孫後代，將在 2020 年 2 月 2 日為所有公共存儲庫生成快照，然後保存在北極一個地下 250 米的廢棄煤礦。快照儲存在膠片上，壽命高達 1000 年。
2、GitHub for mobile
GitHub 首次發佈官方的手機客户端，iOS 用户可 “嚐鮮”，安卓版將稍後發佈。目前還是 beta（公測版），可以通過 官方渠道 進行下載。
最後
問你一個簡單的問題
var a = { n: 1 };
a.x = a = { n: 2 };
alert(a.x); // --> a.x 是什麼
