本期刊专注于 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
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 动画
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 卡片悬停效果
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/
内容来源
- 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.rocks/
往期回顾
关注我的公众号,关注前端技术