湖中剑 前端周刊 #6 | 2021-08-30

309 阅读7分钟

周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。

📰 News

TypeScript 发布4.4版本

主要变更:

  • 提供针对 Aliased Conditions 的控制流分析 (Control Flow Analysis)
  • Catch 变量中默认使用 unknown 类型
  • 新增 Exact Optional Property 类型
  • Class static Blocks
  • 针对 tsc --help 的升级和改进
  • 性能改进
  • 添加针对 JavaScript 的拼写建议
  • 等等

完整信息可以查看:

devblogs.microsoft.com/typescript/…

另外TypeScript有了新的主页:

www.typescriptlang.org/

npm registry正在弃用TLS 1.0和TLS 1.1

npm 发布公告称,从 2021 年 10 月 4 日开始,所有与 npm 网站和 npm registry 的连接(包括软件包的安装),都必须使用 TLS 1.2 或更高版本。

Linux 诞生三十周年

1991 年 8 月 25 日,Linus Torvalds 在 Usenet 新闻组 comp.os.minix 上宣布了 Linux 的诞生。他当时对新操作系统并不抱太高的期望,他在邮件中说,“我正在为 386(486)AT clones 写一个(自由的)操作系统(只是爱好而已,不会和 GNU 一样成为广泛且专业的操作系统)。”

30 年后的今天,Linux 已经无处不在。世界上几乎所有的主要网站,包括谷歌、Facebook 以及维基百科,都运行在 Linux 之上。云也是一样,即使是在微软自己的 Azure 当中,最受欢迎的操作系统仍然是 Linux。全球五百强超级计算机全部采用 Linux。另外,得益于 Android 给力的市场表现,Linux 也成为最受欢迎的终端用户操作系统。

延展阅读:《Linus 坚守 30 年,改变了世界》

Go 1.17 发布,说好的支持泛型又推迟

Go 团队发布 Go 1.17,此版本为编译器带来了额外的改进,即传递函数参数和结果的新方法。这一变化表明,Go 程序的性能提高了约 5%,amd64 平台的二进制文件大小减少了约 2%。未来版本将支持更多平台。

Go 团队本来预计在 Go 1.17 中添加泛型,但很遗憾告诉大家,又要推迟了。对于推迟的泛型提案,Go Team 也在其官方博客表示,大家很期待泛型,因此他们一直在努力,为可投入使用做各种细节的打磨,2021 年这块会是重点。目标是 2021 年底,在 Go1.18 的 Beta 中让大家体验,因此不出意外泛型会在 Go1.18 实现,大家可拭目以待。

📖 文章

如何防止他人恶意调试你的web程序

juejin.cn/post/700078…

⭐️ 随机不只是 Math.random —— 前端噪声应用

在了解噪声之前,我对随机的认识,仅仅停留在 Math.random。它很有用,比如 H5 里的简单抽奖程序,或者随机选取一张卡片... 而最近工作中需要实现一些的随机图像效果,让我发现这个函数能做的事十分有限。之后我偶然了解到噪声这一种随机形式,它很完美的解决了我的问题。于是我想写这一篇文章,希望可以让一些前端同学,特别是工作上涉及较多效果还原的前端同学了解噪声,或许在这之后,你会对设计师设计稿上这些随意元素,有更多的想法。

mp.weixin.qq.com/s/cAAv2Bt5Q…

⭐️ 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?

本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣、酷炫的动画效果。认真读完,你将会收获到:

  • 了解 CSS 3D 的各种用途
  • 激发你新的灵感,感受动画之美
  • 对于提升 CSS 动画制作水平会有所帮助

mp.weixin.qq.com/s/yXkfV6ucK…

如何使用React构建一个搜索框

搜索框是一种常见的组件方式,本文介绍了关于搜索框的实现以及测试方式。

www.emgoto.com/react-searc…

使用 Electron 和 Create React App 构建桌面应用

mmazzarolo.com/blog/2021-0…

深入解析基于 Flutter 的 Web 渲染引擎「北海 Kraken 」技术原理

mp.weixin.qq.com/s/EI7loHgtQ…

浅聊WebRTC视频通话

juejin.cn/post/700020…

⭐️ npm 发包 -- tag 重要性

如果你还没发布过npm包,你应该看下。

如果你发布过npm包,你就更应该看下。

npm发布机制太过于简陋,自己手动操作以及使用不常见的功能时一定要注意了。

www.yuque.com/docs/share/…

CSS为什么这么难学?

CSS为什么这么难学?一定是你的方法不对。

mp.weixin.qq.com/s/_B9DAl6yT…

⭐️ 精读《用 Babel 创造自定义 JS 语法》

mp.weixin.qq.com/s/QrdJAnwwG…

微信跨平台硬件直播组件

微信视频号已提供跨平台硬件直播组件,支持移动平台(iOS/Android)、PC 平台(Windows/macOS)和嵌入式平台(以 Raspberrypi 为例)。文章简要介绍了其解决的问题以及实现的方案。相比传统的移动平台,广大云厂商早已推出了各自的成套解决方案,微信视频号这次应该是奔着相关直播硬件而来,只是不知会擦出怎样的火花。有嵌入式硬件需求,或者在设计直播组件的同学都可以仔细看看。

mp.weixin.qq.com/s/qK73om3ue…

技巧

jsc:不需要node即可执行js代码

$ echo "print(1+2);" | jsc
3

如果你是macOS用户,其实不需要安装Node或Deno就可以在终端里运行JavaScript,就像上面的代码👆。

jsc是JavaScriptCore的一部分,位于:

/System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Helpers/jsc

尝试jsc之前,你需要创建软链接或者把路径加入到环境变量中。

furbo.org/2021/08/25/…

SolidJs框架介绍

Solid也是一款响应式框架,但是并没有使用虚拟DOM,相反,在编译时,将状态更新编译为独立的DOm操作方法。

css-tricks.com/introductio…

怎么使用Promise.any()

Promise.any() 接收一个Promise可迭代对象,只要其中的一个 promise 成功,就返回那个已经成功的 promise 。

但是如果接受的promise都是rejected或者传入的数组是空的,那是什么结果呢?

dmitripavlutin.com/promise-any…

async/await 优雅的错误处理方法

帮助你从众多的try cath中释放出来。

juejin.cn/post/684490…

🛠 工具、软件

reaflow

reaflow是一款支持工作流编辑、流程图的React工具库。

github.com/reaviz/reaf…

linaria

一个零运行时的CSS-in-JS库。

  • 将 CSS 纳入到 JS 体系中,并且这种支持是零成本的!CSS 相关代码会在编译期被抽出到 CSS 文件中
  • 类 Sass 的 CSS 的语法
  • 通过使用 CSS 变量,Linaria 支持快速创建动态属性的 React 样式组件
  • 使用 CSS sourcemaps 易于定位样式位置
  • 支持 stylint
  • 不再需要预处理器,可以使用 JavaScript 控制 CSS 的逻辑
  • 但是支持使用预处理器,比如 Sass 或 PostCSS

linaria.dev/

react-webcam

React里的摄像头调用组件。

github.com/mozmorris/r…

ls-lint

快速的文件名、目录名校验工具。

只需要一个配置文件.ls-lint.yml就能自动校验。

ls-lint.org/

simplex-noise

噪声算法在前端里的应用。

什么是噪声算法?

噪声是游戏编程的常见技术,广泛应用于地形生成,图形学等多方面。

那么为什么要引入噪声这个概念呢?在程序中,我们经常使用直接使用最简单的rand()生成随机值,但它的问题在于生成的随机值太“随机”了,得到的值往往总是参差不齐。

github.com/jwagner/sim…

扩展阅读:游戏开发中的噪声算法

www.cnblogs.com/KillerAery/…

iOS App 自动砸壳平台

iOS 中所有 APP 上传到 APP Store 后都会被加上一层保护壳,如果我们想拿到 IPA 进行研究分析, 需要对 IPA 进行脱壳。这个平台可以实现导出全网 IPA 进行自动脱壳功能,不过有些功能需要付费才能体验。

www.dumpapp.com/

tedious

通过tedious可以在node中连接SQL Server数据库。

github.com/tediousjs/t…


周刊首发于GitHub,欢迎订阅:

我的周刊