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

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

本期热文

2019 年最佳的 10 个 CSS 框架

2019 年了,你完全可以使用 Flexbox 和 CSS Grid 布局你的项目。但这些框架中的模块仍然很有帮助,但如果你只是用到它们的 Grid 功能的话,还是推荐尝试下 CSS Grid。

https://www.creativebloq.com/features/best-css-frameworks?goal=0_df65b6d7c8-a3972a1b38-59188657

ECMAScript 不同版本的新功能列表

带有基础示例的 ES2015、ES2016、ES2017 等的新 ES 特性列表。

https://github.com/daumann/ECMAScript-new-features-list

DIETMAR AUMANN

谷歌正以识别链接的性质的新方法发展 “ nofollow ”

谷歌在 2005 年引入了 rel='nofollow' 为网站所有者标记不可信的链接。这些链接不会被 Google 的算法命中并跟踪。现在 Google 正在为特定类型的内容引入两个新的 rel 值。

https://webmasters.googleblog.com/2019/09/evolving-nofollow-new-ways-to-identify.html

GOOGLE

Caniuse 和 MDN 兼容性数据协作

MDN 的浏览器兼容性数据现已集成到流行的 caniuse 网站中,其目标是向 Web 开发人员展示更多 Web 兼容性信息。

https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/

FLORIAN SCHOLZ & ALEXIS DEVERIA (MOZILLA HACKS)

Chrome 78 的 DevTools 的新功能

Chrome 78 的 DevTools 中,在 Audits 面板中包含了 Lighthouse 5.2,在 Performance 面板中包含了 Largest Contentful Paint,等等。

https://developers.google.com/web/updates/2019/09/devtools

GOOGLE DEVELOPERS

文章 & 教程

9 行 JavaScript 代码生成百万位的 Pi

http://ajennings.net/blog/a-million-digits-of-pi-in-9-lines-of-javascript.html

ANDREW JENNINGS

使用自定义属性来纠正关键帧动画中的变化

该示例使用了自定义属性来替换动画关键帧中的缩放值,然后在应用了动画的元素上设置自定义属性。

https://css-tricks.com/using-custom-properties-to-wrangle-variations-in-keyframe-animations/?goal=0_df65b6d7c8-a3972a1b38-59188657

掌握 HTML <audio> 标签

深入介绍 HTML 的 <audio> 标签,以及如何使用它。

https://catswhocode.com/html-audio-tag/

JEAN-BAPTISTE JUNG

理解 CSS 中的特殊性

涵盖了 CSS 中的特殊性基础,以及为什么你永远不需要 !important

https://alligator.io/css/understanding-specificity-in-css/

JESS MITCHELL

TypeScript 3.7 的 5 大特性及其使用方法

https://httptoolkit.tech/blog/5-big-features-of-typescript-3.7/

TIM PERRY

工具 & 资源

Immer 4.0

一个流行的工具包,能很方便的来处理 JS 数据的不可变状态。

https://immerjs.github.io/immer/docs/introduction

IMMER

Commander.js

Node.js 命令行界面的完整解决方案,启发于 Ruby commander。

https://github.com/tj/commander.js

React Suite 4.0

一套“智能的”UI组件。支持 React 16+,使用 TypeScript,适用于所有主流浏览器。 组件包括按钮、模态、抽屉、导航栏、表单输入字段、表格和日历等。

https://rsuitejs.com/en/

HYPERS

NativeScript

用 Angular,Vue,TypeScript 或 JavaScript 构建真正的原生移动应用的开源框架。现在的版本已经到 6+ 了。

https://www.nativescript.org/

Mithril.js

用于构建单页应用的现代客户端 JavaScript 框架。体积小,速度快,gzip 压缩后不到 10kb ,并提供了开箱即用的路由和 XHR 等实用工具。

https://mithril.js.org/

Moveable

让页面上的一个对象可拖动、可调整大小、可缩放、可旋转、可变形以及可插入。

https://daybrush.com/moveable/

date-fns

现代的 JavaScript 日期实用程序库,提供最全面,最简单和一致的工具集,用于操作 JavaScript 日期。现在版本为 2+。

https://date-fns.org/

Humanize Duration

可将毫秒时间转换为可读的字符串。比如:humanizeDuration(97320000) 变为 "1 day, 3 hours, 2 minutes"

buffer

来自 Node.js 的 buffer 模块,可用于浏览器。

https://github.com/feross/buffer

TypeLighter.js

轻巧,多功能的打字机效果插件。

https://edernclemente.com/plugin/typelighterjs

创意

一个美妙的 CSS Heading 动画

一个美妙的 CSS Heading 动画

https://codepen.io/kylewetton/pen/omgBgG?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter

codepen.io

可爱的亲吻

可爱的亲吻

https://codepen.io/Pixmy/pen/KKPWjbq?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter

codepen.io

css 卡片悬停效果

css 卡片悬停效果

https://codepen.io/Jhonierpc/pen/MWgBJpy?utm_campaign=CSS%20Animation%20Weekly&utm_medium=email&utm_source=Revue%20newsletter

codepen.io

版本发布

  • Babel 7.6.0 (和 7.6.1) - 最流行的 JavaScript 转换器, https://github.com/babel/babel/releases/tag/v7.6.0
  • mustache.js 3.1 - 无逻辑的 JavaScript 模板引擎, https://github.com/janl/mustache.js
  • Bootstrap-Vue 2.0 - 面向 Vue.js 的 Bootstrap 框架, https://bootstrap-vue.js.org/

内容来源

往期回顾

关注我的公众号,关注前端技术

赵不寒的网络日记