前端技术日志 | 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