前端技術日誌 | 19年8月21日 | 新的 React DevTools 介紹

Web 前端技術突飛猛進，在你鞏固底層技能的同時，別忘了還要跟上前沿技術的發展步伐。

本期刊專一於 Web 前端前沿技術，收集的內容來自國外各大前端技術週刊，這裏把值得分享的內容作了整理。

本期熱文

2019 年爲 React App 製做動畫的 5 種方法

當心別錯過它哦， 咱們收集的一系列很好的能夠在 React 項目中動畫的方法。

新的 React DevTools 介紹

若是您是 React 開發人員，那麼您應該使用 DevTools，由於您使用了它們，就能夠更快，更簡便的駕馭 React。 它支持 React 15 及以上版本。

BRIAN VAUGHN

關於「CSS-in-JS」的不一樣觀點

有些人很討厭 CSS-in-JS，認爲它混淆了我的的意圖，而另外一些人則很喜歡它提供的便利。 在這裏，Chris Coyier 經過不一樣的立場，經過實踐來讓你更詳細的進行了解。

CSS TRICKS

jQuery的歷史和遺產

jQuery 可能在 web 開發中有些失寵，但它仍然爲 74％ 的網站提供支持，併爲現代web 框架鋪平了道路。

DANNY GUO

JavaScript 和 Node 測試最佳實踐

將近 50 種最佳實踐，分爲：後端，前端，CI 等幾大類，並附有代碼示例。 不只包含基礎知識，它還涉及到視覺迴歸、生成式測試（Property-Based Testing）和契約測試（Contract Testing）等領域。

YONI GOLDBERG

什麼是 TTFB（Time to First Byte）

一塊兒來了解下 TTFB 在前端性能方面的重要性。

HARRY ROBERTS

Largest Contentful Paint

在 Chrome 77 中實現的最大內容繪製（ LCP ） API，宣佈了已經獲得的最大可視化內容元素的渲染時間。你能夠從谷歌的博客中瞭解更多相關信息。

面向全棧開發者的 VS Code 擴展列表

不少 VS Code 擴展，主要面向 JavaScript 開發者。 有趣的是，由於原始版本在社區被吐槽且爭議不斷，因此做者聽取了許多人的建議並重寫了它！

JON R. CORBIN

最小化 SVG

一位軟件工程師爲你講述，他是如何爲他的博客進行 SVG 優化的。

VICTOR ZHOU

https://victorzhou.com/blog/m...

有趣的 404

關於 404，網絡上有不少有創意的、有用或者有趣的錯誤頁面：

• 谷歌 Android 操做系統的錯誤頁面提供了一個有用的列表，列出了下一步的流行建議，還有一個可愛的小遊戲能夠玩。
• 設計工具 Figma 採用與其產品相關的有趣方法——您能夠調整屏幕上 404 文本的一些定位點。
• 在鼓勵您進行新的搜索的同時，亞馬遜用 404 頁面來展現公司員工的狗狗。當你刷新頁面，會出現新的狗狗。
• 在 NPR 網站上迷失了怎麼辦？404 頁面突出強調了丟失的人、位置和東西。
• GitHub 的錯誤頁面用一個 Obi-wan Kenobi Octocat 和靈巧的懸停效果向《星球大戰》致敬。
• 你能在藝術家史蒂夫蘭伯特的 404 頁面上找到一個尷尬的長視頻。
• 令我驚訝的是，谷歌（全部地方）在很是簡單的 404 頁面上都沒有搜索欄。但 YouTube有。
• 英國設計諮詢公司 Laser Red 的特點是約翰特拉沃爾塔的你有膽再說一次 404，還作了一個有趣的模糊處理。

在構建本身的 404 錯誤頁面時，你能夠爲用戶提供任何有價值的幫助。包括搜索欄，有用或者熱門的連接列表，以及報告錯誤的方法等，都是一些值得考慮的最佳實踐。

文章

如何使用 await / async 正確的連接多個函數

NICHOLAS DUNKEL

5個有趣的 JavaScript 解構用途

DMITRI PAVLUTIN

開發人員的設計原則：更好的 Web 設計過程和 CSS 技巧

瞭解 Web 設計的成分是一回事，但將它們組合到優秀的 Web 站點又是另外一回事。 讓咱們看看做者關注了哪三個方面來更好地進行開發設計。

ANDREW SPENCER

在 Sass 中處理未使用的 CSS 以提升性能

探索麪向 Sass 的解決方案，用於處理未使用的 CSS 代碼，避免涉及無頭瀏覽器和仿真 DOM 的複雜依賴性。

LUKE HARRISON

'Logic-Less' JSX

JSX 爲邏輯和標記的混合提供了機會，這頗有意義，可是......你能夠走得更遠。 這篇文章是關於如何保持代碼純淨的一些想法。

JONATHAN VERRECCHIA

原生懶加載已經到來

英國廣播公司（BBC）的一名軟件工程師經過 Chrome 的新原生延遲加載功能和他在公司使用的經驗進行了討論。

ANDY POTTS

使用 scrollIntoView() 讓新增元素在溢出容器中顯示

當你在瀏覽頁面文檔時，可能在並不能意識到一些東西是否存在，使用 scrollIntoView() 會使這種任務變得容易。

CHRISTIAN HEILMANN

Tailwind CSS 簡介

簡要介紹 Tailwind CSS，這是一種流行的基於實用程序的CSS庫。

JOSHUA HALL

教程

讓它動起來：零基礎建立 Web 動畫（視頻）

如何爲 Web 動畫建立和構建圖形（使用 SVG 和 JS ），以及如何制定或平衡創意與技術決策。

CHRIS GANNON

使用 CSS 和 Splitting.js 實現可變字體動畫.

這將向您展現如何僅使用 CSS 爲可變字體設置動畫，以及如何經過在頁面上包含 Splitting.js 來動態處理任意大小的文本（可是您應該將其用於標題）來使其變得更容易。

CI / CD 的安全性最佳實踐

幫助你實施 CI / CD 管道安全性標準的安全措施的多種方法。

CIRCLECI

資源

漸變魔法

一個獨特的 CSS 漸變庫，您能夠經過各類方式進行更改，並按流行或新的排序。

IE11 的 CSS 變量

IE11 的自定義屬性（ CSS 變量） polyfill 。我不是一個爲一個已經很慢的瀏覽器墊片的忠實粉絲，但若是你須要它的話，這是一個可選方案。

vue-willtable

適用於 Vue 的可編輯的類 Excel 表組件。

useAuth：將 Auth 添加到 React App 的最簡單方法

使用身份驗證平臺和 Auth0，爲您提供許多「開箱即用」的功能。

SWIZEC TELLER

工具

Acorn 7.0：一個用純 Javascript 編寫的微型 JavaScript 解析器

HAVERBEKE, STEPANYAN, ET AL.

NPKILL：查找和刪除舊的或巨大的 node_modules 文件夾

使用此工具刪除你係統中不須要的 node_modules 文件夾。

ESTEFANÍA GARCÍA GALLARDO AND JUAN TORRES GÓMEZ

UI Faces：用於設計實物模型的頭像

若是您須要使用真實用戶頭像當ui界面，那麼這些聚集整理的文章可能會對你有所幫助。

ALEKSANDAR TASEVSKI

用於佈局的五個 CSS 網格生成器

MARIA ANTONIETTA PERNA

在線圖像顏色選擇器

想要一個與您的圖像匹配的調色板？ 使用咱們的在線顏色選擇器找到您完美的 html 顏色。 單擊圖像以得到 HEX，RGB 和 HSL 格式的顏色。

伊娃設計系統

一個深度學習顏色生成器。選擇好一個主要顏色，應用程序將在這基礎上顯示各類「語義」顏色。

vue-to-react

將 Vue 組件轉換爲 React 組件。

OverVue

一種原型設計工具，容許開發人員動態建立和可視化 Vue 應用程序，實現組件層次結構的實時直觀樹形顯示和實時生成的代碼預覽。

快速發佈預覽

• Parcel 2.0 alpha 1：零配置打包工具。
• V8 7.7：爲 Chrome 和 Node 提供支持的 JS 引擎。
• Jest 24.9：流行的 JavaScript 測試解決方案。
• Raphaël 2.3：跨瀏覽器矢量圖形庫。
• TUI編輯器 1.4.6：強大的 Markdown WYSIWYG 編輯器。
• Create React App 3.1：「快速啓動新 React App 」的工具。

內容來源

• Frontend Focus: https://frontendfoc.us/
• JavaScript Weekly: https://javascriptweekly.com/
• Responsive Design Weekly: https://responsivedesign.is/
• Web Tools Weekly: https://webtoolsweekly.com/
• CSS Animation Weekly: https://weekly.cssanimation.r...

若是你喜歡，你也能夠關注個人微信公衆號：zhao-buhan