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