本期刊专注于 Web 前端前沿技术，收集的内容来自于国外各大前端技术周刊，这里把自己感兴趣的，并值得分享的内容做了整理。

部分链接可能无法直接打开，你需要通过科学上网的方式来解决。

热门推荐

2019 年为 React App 制作动画的 5 种方法

小心别错过它哦， 我们收集的一系列很好的可以在 React 项目中动画的方法。

https://medium.com/@dmitrynozhenko/5-ways-to-animate-a-reactjs-app-in-2019-56eb9af6e3bf

新的 React DevTools 介绍

如果您是 React 开发人员，那么您应该使用 DevTools，因为您使用了它们，就可以更快，更简便的驾驭 React。 它支持 React 15 及以上版本。

BRIAN VAUGHN

https://reactjs.org/blog/2019/08/15/new-react-devtools.html

关于“CSS-in-JS”的不同观点

有些人很讨厌 CSS-in-JS，认为它混淆了个人的意图，而另一些人则很喜欢它提供的便利。 在这里，Chris Coyier 通过不同的立场，通过实践来让你更详细的进行了解。

CSS TRICKS

https://css-tricks.com/the-differing-perspectives-on-css-in-js/

jQuery的历史和遗产

jQuery 可能在 web 开发中有些失宠，但它仍然为 74％ 的网站提供支持，并为现代web 框架铺平了道路。

DANNY GUO

https://blog.logrocket.com/the-history-and-legacy-of-jquery/

JavaScript 和 Node 测试最佳实践

将近 50 种最佳实践，分为：后端，前端，CI 等几大类，并附有代码示例。 不仅包含基础知识，它还涉及到视觉回归、生成式测试（Property-Based Testing）和契约测试（Contract Testing）等领域。

YONI GOLDBERG

https://github.com/goldbergyoni/javascript-testing-best-practices/

什么是 TTFB（Time to First Byte）

一起来了解下 TTFB 在前端性能方面的重要性。

HARRY ROBERTS

https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/

Largest Contentful Paint

在 Chrome 77 中实现的最大内容绘制（ LCP ） API，宣布了已经得到的最大可视化内容元素的渲染时间。你可以从谷歌的博客中了解更多相关信息。

https://web.dev/largest-contentful-paint?mc_cid=9b9b1e749d&mc_eid=b7a4344d04

面向全栈开发者的 VS Code 扩展列表

很多 VS Code 扩展，主要面向 JavaScript 开发者。 有趣的是，因为原始版本在社区被吐槽且争议不断，所以作者听取了许多人的建议并重写了它！

JON R. CORBIN

https://www.jonrcorbin.com/the-best-vs-code-extension-list-for-full-stack-developers/

最小化 SVG

一位软件工程师为你讲述，他是如何为他的博客进行 SVG 优化的。

VICTOR ZHOU

https://victorzhou.com/blog/minify-svgs/

有趣的 404

关于 404，网络上有很多有创意的、有用或者有趣的错误页面：

在构建自己的 404 错误页面时，你可以为用户提供任何有价值的帮助。包括搜索栏，有用或者热门的链接列表，以及报告错误的方法等，都是一些值得考虑的最佳实践。

文章

如何使用 await / async 正确的链接多个函数

NICHOLAS DUNKEL

https://nikodunk.com/how-to-chain-functions-with-await-async/

5个有趣的 JavaScript 解构用途

DMITRI PAVLUTIN

https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

开发人员的设计原则：更好的 Web 设计过程和 CSS 技巧

了解 Web 设计的成分是一回事，但将它们组合到优秀的 Web 站点又是另一回事。 让我们看看作者关注了哪三个方面来更好地进行开发设计。

ANDREW SPENCER

https://css-tricks.com/design-principles-for-developers-processes-and-css-tips-for-better-web-design/

在 Sass 中处理未使用的 CSS 以提高性能

探索面向 Sass 的解决方案，用于处理未使用的 CSS 代码，避免涉及无头浏览器和仿真 DOM 的复杂依赖性。

LUKE HARRISON

https://www.smashingmagazine.com/2019/08/handling-unused-css-sass-performance/?ref=heydesigner

‘Logic-Less’ JSX

JSX 为逻辑和标记的混合提供了机会，这很有意义，但是……你可以走得更远。 这篇文章是关于如何保持代码纯净的一些想法。

JONATHAN VERRECCHIA

https://verekia.com/react/logic-less-jsx/

原生懒加载已经到来

英国广播公司（BBC）的一名软件工程师通过 Chrome 的新原生延迟加载功能和他在公司使用的经验进行了讨论。

ANDY POTTS

https://medium.com/bbc-design-engineering/native-lazy-loading-has-arrived-c37a165d70a5

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

当你在浏览页面文档时，可能在并不能意识到一些东西是否存在，使用 scrollIntoView() 会使这种任务变得容易。

CHRISTIAN HEILMANN

https://christianheilmann.com/2019/08/09/quick-tip-using-scrollintoview-to-show-added-elements-to-a-container-with-overflow/

Tailwind CSS 简介

简要介绍 Tailwind CSS，这是一种流行的基于实用程序的CSS库。

JOSHUA HALL

https://alligator.io/css/tailwind-css/

教程

让它动起来：零基础创建 Web 动画（视频）

如何为 Web 动画创建和构建图形（使用 SVG 和 JS ），以及如何制定或平衡创意与技术决策。

CHRIS GANNON

https://vimeo.com/showcase/6133041/video/351539135

使用 CSS 和 Splitting.js 实现可变字体动画.

这将向您展示如何仅使用 CSS 为可变字体设置动画，以及如何通过在页面上包含 Splitting.js 来动态处理任意大小的文本（但是您应该将其用于标题）来使其变得更容易。

https://css-irl.info/variable-font-animation-with-css-and-splitting-js/?mc_cid=9b9b1e749d&mc_eid=b7a4344d04

CI / CD 的安全性最佳实践

帮助你实施 CI / CD 管道安全性标准的安全措施的多种方法。

https://circleci.com/blog/security-best-practices-for-ci-cd/

CIRCLECI

资源

渐变魔法

一个独特的 CSS 渐变库，您可以通过各种方式进行更改，并按流行或新的排序。

https://www.gradientmagic.com/

IE11 的 CSS 变量

IE11 的自定义属性（ CSS 变量） polyfill 。我不是一个为一个已经很慢的浏览器垫片的忠实粉丝，但如果你需要它的话，这是一个可选方案。

https://github.com/nuxodin/ie11CustomProperties

vue-willtable

适用于 Vue 的可编辑的类 Excel 表组件。

https://github.com/KevinMint55/vue-willtable

useAuth：将 Auth 添加到 React App 的最简单方法

使用身份验证平台和 Auth0，为您提供许多“开箱即用”的功能。

SWIZEC TELLER

https://swizec.com/blog/useauth-the-simplest-way-to-add-authentication-to-your-react-app/swizec/9179/

工具

Acorn 7.0：一个用纯 Javascript 编写的微型 JavaScript 解析器

HAVERBEKE, STEPANYAN, ET AL.

https://github.com/acornjs/acorn

NPKILL：查找和删除旧的或巨大的 node_modules 文件夹

使用此工具删除你系统中不需要的 node_modules 文件夹。

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

https://github.com/voidcosmos/npkill/

UI Faces：用于设计实物模型的头像

如果您需要使用真实用户头像当ui界面，那么这些汇集整理的文章可能会对你有所帮助。

ALEKSANDAR TASEVSKI

https://uifaces.co/

用于布局的五个 CSS 网格生成器

MARIA ANTONIETTA PERNA

https://www.sitepoint.com/css-grid-generators/

在线图像颜色选择器

想要一个与您的图像匹配的调色板？ 使用我们的在线颜色选择器找到您完美的 html 颜色。 单击图像以获得 HEX，RGB 和 HSL 格式的颜色。

https://image-color.com/?mc_cid=9b9b1e749d&mc_eid=b7a4344d04

伊娃设计系统

一个深度学习颜色生成器。选择好一个主要颜色，应用程序将在这基础上显示各种“语义”颜色。

https://colors.eva.design/

vue-to-react

将 Vue 组件转换为 React 组件。

https://github.com/egoist/vue-to-react

OverVue

一种原型设计工具，允许开发人员动态创建和可视化 Vue 应用程序，实现组件层次结构的实时直观树形显示和实时生成的代码预览。

https://www.overvue.io/

快速发布预览

  • Parcel 2.0 alpha 1：零配置打包工具。

    https://medium.com/@devongovett/parcel-2-0-0-alpha-1-is-here-8b160c6e3f7e

  • V8 7.7：为 Chrome 和 Node 提供支持的 JS 引擎。

    https://v8.dev/blog/v8-release-77

  • Jest 24.9：流行的 JavaScript 测试解决方案。

    https://github.com/facebook/jest

  • Raphaël 2.3：跨浏览器矢量图形库。

    https://github.com/DmitryBaranovskiy/raphael

  • TUI编辑器 1.4.6：强大的 Markdown WYSIWYG 编辑器。

    https://github.com/nhn/tui.editor

  • Create React App 3.1：“快速启动新 React App ”的工具。

    https://github.com/facebook/create-react-app/releases/tag/v3.1.0

内容来源

关注微信公众号：zhao-buhan，定期获得技术日志推送

赵不寒的网络日记