本周观察 #5 (2019-01-25)

记录过去一周我看到的觉得值得分享的东西。

UX

1、GNOME 将重新设计图标

知名 Linux 桌面环境 GNOME 将在 3.32 版本中启用新的图标,同时也更新了开发者图标指南。

GNOME 现在的图标是 2000 年早期依照 Tango 标准设计的,每个图标需要包含 1 个高清大图标以及 6 个不同尺寸的小图标,以便在不同场景下显示。

这个标准有很多问题,比如很多尺寸其实根本没有用到,这种风格的图标对设计师要求较高,且绘制很耗时,从而导致图标的迭代非常慢,大多数第三方应用都不遵守标准,以今天的眼光来看这系列 2000 年风格的图标过时了等等。

因此,GNOME 决定重新设计图标,并发布新的图标标准,下面是部分新图标的样子:

新图标不再需要做多个不同尺寸的版本了,只需要做一个。另外,看起来也更现代了,有点安卓应用图标的感觉。

技术

1、ES6 中的数组去重

数组去重问题是前端面试中的一个经典问题,这篇文章总结了 ES6 中的三个新方法:

2、将三万行代码从 Flow 移植到 TypeScript 的经历

JavaScript 是弱类型语言,带来灵活性的同时,也给开发大型项目造成一些风险,为了解决这个问题,Facebook 和微软分别给出了一个解决方案,即 FlowTypeScript

Flow 和 TypeScript 各有所长,不过按目前的趋势看,似乎 TypeScript 的前途更光明一些,知名框架如 Vue.js 等也已经在 3.0 版本中从 Flow 转向 TypeScript。

这篇文章总结了作者团队将 3 万行代码从 Flow 转到 TypeScript 的经历。他们首先将 Babel 从 6 升级到 7,Webpack 也从 3 升级到 4,这个升级过程大约花费了两个人日,然后在运行 TypeScript 编译时得到超过 8000 个语法错误,在快速做了一番调整之后,仍然有 1300 个错误。这时他们评估了一下,认为修复这些错误大约需要一周时间,并不是太长,于是便正式开始迁移。

3、使用 emoji 在地址栏显示动画

这篇文章介绍了如何使用 JavaScript 以及 emoji 在浏览器地址栏显示动画的方法,使用这些方法,可以在地址栏 URL 的 hash 部分显示进度条等动画。很有趣味性,不过实用性可能不是很高。

工具/库

1、deno

一个基于 V8 的 JavaScript/TypeScript 运行时,由 Node.js 的作者 Ryan Dahl 开发,安装之后可以在命令行执行 JavaScript 或 TypeScript 脚本。支持 Windows/macOS/Linux。

deno 在大半年前刚推出时,还只是一个 demo,但几个月来作者不断地提交、完善,看起来已经具备一定实用功能。deno 内置了若干常用库,比如文件操作、网络处理等,可用来写一些小工具,详见文档,如果想尝鲜的话,也许现在是开始试用 deno 的不错时机。

2、jsdiff

JavaScript 版本的 diff 算法实现,可用于生成两个字符串的 diff 信息。如果要保存一个文本文档的不同版本,可以使用这个库,在每次文档内容变化后,生成一个 diff 记录。

笔者在写作软件 WonderPen 中即使用了这个库,用于保存文档的历史记录。

3、shiny

模拟反光效果的 JS 库,要求设备支持 DeviceMotion 事件。

4、slat.js

一个现代的富文本编辑器框架,GitHub 上有超过 13000 个 star,看起来很强大,如果你需要开发一个富文本编辑器,可以考虑在这个框架的基础上进行开发。还有中文文档

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s