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

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

📰 News

TypeScript 发布4.4版本

主要变更：

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

完整信息可以查看：

https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/

另外TypeScript有了新的主页：

https://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程序

https://juejin.cn/post/7000784414858805256

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

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

https://mp.weixin.qq.com/s/cAAv2Bt5QsxlYXzEGvdNvA

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

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

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

https://mp.weixin.qq.com/s/yXkfV6ucKZocxxON-jZLIQ

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

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

https://www.emgoto.com/react-search-bar/

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

https://mmazzarolo.com/blog/2021-08-12-building-an-electron-application-using-create-react-app/

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

https://mp.weixin.qq.com/s/EI7loHgtQLG-cqRQVM6mZQ

浅聊WebRTC视频通话

https://juejin.cn/post/7000205126719766565

⭐️ npm 发包 -- tag 重要性

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

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

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

https://www.yuque.com/docs/share/620c0da0-3e12-4473-b2e7-51ee52cf3e66

CSS为什么这么难学？

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

https://mp.weixin.qq.com/s/_B9DAl6yTnxm5VN3zX_ljQ

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

https://mp.weixin.qq.com/s/QrdJAnwwGwv2iZjc9Ye7qg

微信跨平台硬件直播组件

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

https://mp.weixin.qq.com/s/qK73om3ueP_S6i8qp8hgHQ

技巧

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之前，你需要创建软链接或者把路径加入到环境变量中。

https://furbo.org/2021/08/25/jsc-my-new-best-friend/

SolidJs框架介绍

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

https://css-tricks.com/introduction-to-the-solid-javascript-library/

怎么使用Promise.any()

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

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

https://dmitripavlutin.com/promise-any/

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

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

https://juejin.cn/post/6844903767129718791

🛠 工具、软件

reaflow

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

https://github.com/reaviz/reaflow

linaria

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

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

https://linaria.dev/

react-webcam

React里的摄像头调用组件。

https://github.com/mozmorris/react-webcam

ls-lint

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

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

https://ls-lint.org/

simplex-noise

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

什么是噪声算法？

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

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

https://github.com/jwagner/simplex-noise.js

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

https://www.cnblogs.com/KillerAery/p/10765897.html

iOS App 自动砸壳平台

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

https://www.dumpapp.com/

tedious

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

https://github.com/tediousjs/tedious

---

周刊首发于GitHub，欢迎订阅：

我的周刊