前端技术日志 | 2019 年最佳的 10 个 CSS 框架

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

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

本期热文

2019 年最佳的 10 个 CSS 框架

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

https://www.creativebloq.com/...

ECMAScript 不同版本的新功能列表

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

https://github.com/daumann/EC...

DIETMAR AUMANN

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

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

https://webmasters.googleblog...

GOOGLE

Caniuse 和 MDN 兼容性数据协作

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

https://hacks.mozilla.org/201...

FLORIAN SCHOLZ & ALEXIS DEVERIA (MOZILLA HACKS)

Chrome 78 的 DevTools 的新功能

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

https://developers.google.com...

GOOGLE DEVELOPERS

文章 & 教程

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

http://ajennings.net/blog/a-m...

ANDREW JENNINGS

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

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

https://css-tricks.com/using-...

掌握 HTML 标签

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

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

JEAN-BAPTISTE JUNG

理解 CSS 中的特殊性

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

https://alligator.io/css/unde...

JESS MITCHELL

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

https://httptoolkit.tech/blog...

TIM PERRY

工具 & 资源

Immer 4.0

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

https://immerjs.github.io/imm...

IMMER

Commander.js

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

https://github.com/tj/command...

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/plu...

创意

一个美妙的 CSS Heading 动画

https://codepen.io/kylewetton...

codepen.io

可爱的亲吻

https://codepen.io/Pixmy/pen/...

codepen.io

css 卡片悬停效果

https://codepen.io/Jhonierpc/...

codepen.io

版本发布

  • Babel 7.6.0 (和 7.6.1) - 最流行的 JavaScript 转换器, https://github.com/babel/babe...
  • mustache.js 3.1 - 无逻辑的 JavaScript 模板引擎, https://github.com/janl/musta...
  • 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.r...

往期回顾

  • D3.js 简介
  • JavaScript 是如何成长并成为一门“真正的”语言的
  • 在生产环境中使用原生 JavaScript 模块

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

你可能感兴趣的:(javascript,html,html5,node.js,sass)