2022 Week 42

也可以在竹白上订阅更新

Web Programming

7 GUIs

作者整理了 7 个具有代表性的 GUI 任务，基本覆盖了 GUI 编程会遇到的各类问题，从最简单的 Counter 到类 Excel 的 Cells，随着复杂度的提升，对 API 设计、状态管理、算法的要求也越来越高，感兴趣的同学可以自己实践下。这里是网友的一套解法。

How Turborepo Run Tasks

Turborepo 是一个针对 js/ts 的高性能构建工具，需要将项目设置为 monorepo。

Turborepo 的两个核心理念是并行和缓存。尽可能地并行，尽可能地缓存。并行的前提是明确依赖关系，这样相对独立的任务就可以同时进行，缓存则是将 input 内容进行 hash，执行下次任务时，先检查两次 input 的 hash 是否一致，是的话，直接使用上次构建内容。

Details of the Cloudflare outage on July 2, 2019

Cloudflare 的故障报告，堪称业界典范，有详细的故障发生背景，故障内容（非常细致），解决过程，为了把过程说清楚，还会附上相应的流程图，内部的 CI 截图等等。而且针对这个正则问题，还挖出了 Ken Thompson 在 1968 年写的一篇论文。

有条理，有过程，有细节，有钻研精神，如果以后你也有类似的需要写事故报告的场景（希望你用不到😂），可以参考一下。

Building a dialog component

要写一个 Dialog Component 并不容易，从表现形式上来说，貌似挺简单的，点个按钮，出来一个框（div），但要写出一个 Production Ready 的 Dialog 要考虑的场景很多，比如：要响应页面缩放，出场效果（淡入，还是从底部/顶部弹出等）、背景元素是否模糊、Dialog 内的滚动、弹出时聚焦的元素、弹出位置等等。这篇文章比较全面地介绍了如何应对这些场景。

Pure UI

Vercel CEO 7 年前的一篇文章，描述了他在做 VideoPress 过程中，对 React，GUI Programming，Design 的一些感悟，如何能最大化地提升效率、保障正确性和完备性，从中也能一窥 GUI 编程的复杂度。

把 React Component 看作 UI function，不同的参数可以返回不同的 UI 描述，这些参数可以抽象为不同的场景值。
设计的过程包含 Design and Discovery，Discovery 的过程会不断发现新的场景，进而完善 Design。
类似 Storyboard 工具的重要性，可以设置不同的 Component 参数，然后看这些参数下 UI 和交互是否正常。

SSR, Streaming, and CSS-in-JS

当 SSR, Streaming 和 CSS-in-JS 在一起时，它们之间会不会有冲突，尤其是当存在 Suspense 模块的时候。这篇文章描述了它们的共存之道。

SSR 过程中 styled 对于生成的 style 是有完全感知的，所以可以生成 class，以及该 class 对应的 style，如 stitches-xyz，这个 xyz 是一个 hash 值。
SSR Render 结束后，会在 head 里，把 styled 生成的 class -> style dump 出来，这样不同的 class 就能找到对应的 style 了。
对于 SSR w/suspense 场景，则是把 style 放在 body 里渲染。

Adaptive Polynomial Curve Fitting

还是来自 Shu Ding 的一篇文章，讲了他如何优化 Vercel 的 Analytics Charts。之前是单纯的点点连线，但这样看不到趋势，而且 delta 计算也过于简单。采用多元线性回归后，趋势线就很清晰了，实践过程中也遇到了一些挑战。

多元线性回归，就是由多个自变量组成的方程，有一个很重要的参数：order，比如 order = 2 就是二元线性回归。文章花了不少篇幅介绍如何找到这个合适的 order，他的做法是拿到一批真实数据，然后将其中的一部分设置为 Training Data，另一部分作为 Test Data。然后设置不同的 order 来验证，尽量让两者的 MSE（均方误差）都足够小，最后发现当 order = 2 时效果最好。

你看，这不就是数学在实际场景中的应用么。

Experimenting A New Syntax To Write SVG

为什么 SVG 语法看起来跟 HTML 挺像的，但就是没有 HTML 写起来顺手呢，作者从 Tags 和 Attributes 两个维度来分析两者的差异，HTML 因为很多的 attributes 由 CSS 来处理，所以就剩一个维度的复杂度（Tags），而 SVG 虽然也支持 CSS，但只有部分属性支持。

作者也想用类似 CSS 的方案来降低 SVG 在 Attribute 方向的复杂度。但毕竟 SVG 有自身的独特性，所以不能直接套用 CSS Syntax，需要做一些调整。最后的效果大体如下：

结合作者的另一个项目（css-doodle），可以写出一些很有意思的效果，在线感受下。

Generative Art with CSS

@yuanchuan 2019 年的一个视频，讲了用 css-doodle 来实现 Generative Art，一些看似平平无奇的 css 属性好像忽然有了生命，比如下面的这个效果就是用 border-image 结合 radial-gradient 实现的。

对应的代码：

@grid: 50x1 / 320px;

@place: center;
@size: calc(@i * 11%);

mix-blend-mode: hard-light;
transform: rotate(calc(@i * 10deg));

--c: @p(
	#f5c8e5, #74dce3, #137ec7, #65d7e1
);

border-width: 10px; 
border-style: solid;
border-image: radial-gradient(var(--c), transparent 60%);
border-image-width: calc(@i/1);

其实就是不同大小的 rect 旋转叠加的效果，只不过这些 rect 的可视部分只剩下四个点了。

Write your own task queue

写一个任务队列是一个不错的系统设计题目，没有跟业务强相关，需要考虑的点又不少（优先级、衡量指标、重试等等）。有空也可以自己写一个，看看会遇到哪些坎，然后再去看看业界的实践是怎样的，这样会更加印象深刻。

零知识证明

李永乐老师的一期讲解「零知识证明」的视频：待验证方不透露任何实现细节，而又能让验证方相信待验证方已经具备了某种能力或事物。视频中举了阿里巴巴与四十大盗的例子，比如如何让对方知道自己能够完成数独游戏，又不暴露最终的结果，这些证明过程还挺有意思的。姚期智的百万富翁问题就属于零知识证明：两位富翁如何在不透露各自具体财富的前提下，知道两人谁的财富更多。顺便出一道类似的题目：几个打工人坐在一起，如何在不透露自己薪资的前提下，知道自己的薪资是高于还是低于这些人的平均数？

这容易让人想到 NP 问题，这类问题的求解过程非常耗时（指数级），但结果又可以在较短（P 多项式级）时间内被验证。关于 P 和 NP，强烈推荐 Matrix67 的这篇文章：16 年后重谈 P 和 NP，里面以一个自己遇到的问题为引子，结合各种例子来细致的聊了下 P 和 NP 的定义，以及他们的关系。

零知识证明还有一个使用场景是隐私保护，比如参与一场投票，不想暴露自己的选项，但又可以在最终的结果上验证自己的投票。Matrix67 的这篇文章讲到了用盲签名来实现隐藏选票内容，末尾的「不知道文件内容的情况下签署协议」方法挺巧妙的。

Cool Stuff

Arc Browser

从友人那得到一枚 Arc 邀请码，就下载下来体验了下，确实挺惊艳的。集成了不少有意思的Feature（虽然不一定是原创）如 Vertical Tab，Auto Close Tab，Boost（Programmable Web），Workspace，Command Bar，Clean Mode 等等，有点 OS 的感觉了，有时会有些迟滞感。

这位同学录了两个较完整的开箱视频：上，下

tixy.land

The most minimalist creative coding environment.

给一个 15 x 15 的方块，指定 function 的 input (t, i, x, y)，你需要做的就是给出 output，尽量不要超过 32 个字符。

关于 dot 的颜色、大小，返回值的内容是什么，简单探索一阵就能知道了，我喜欢这样的设定。

Pake Tauri(Web App) -> Mac App

tw93 开源的一个工具，借助 Tauri 将一个网页变成 Mac App，这样就不用再启动浏览器，输入网址，与其他 Web 挤在一起了。由于 Tauri 使用了系统自带的 Webview，包体积上相比 Electron 会有很大的优势。

Lucide.dev

一套挺耐看的开源 SVG 图标库（fork 自 Feather Icons），可以方便地 download SVG，自己的项目有个别地方需要用到 SVG icon 的话，就可以在这里直接下载了，还是挺方便的，对流行的 UI Libraries 也有做适配。

Ecosia

从友人那知晓了这家公司，以搜索为主业，以广告作为主要收入来源，不同的是，他们会将所有收入都用来种树，目前已经在30多个国家种了一亿多棵树了。

Plant trees while you search the web

注重用户隐私，财务透明，不会被收购，所得收入都用来种树。我已经将它设置为 Primary Search Engine，为这个星球贡献自己的一份绵力。

Ciechanowski

用交互式动画来一步步解剖数学、物理、工程或自然现象。文章一般都很长，非常细致，一层层抽丝剥茧，尤其是里面的交互动画做得实在是太棒了。

Find Your Pi Day

Wolfram 做的一个网站，界面很酷。我们都知道 Pi 是一个无理数，也就是小数点后有无穷多个数字，所以一定存在一组数字正好是你的生日。这个网站就可以帮你找到你的生日位于 Pi 的小数点后第几位。如 190869，你还可以用这个数字来代替生日作为其他需要用到数字作为密码的场景哦。

Worth Mention

Change Your Life – One Tiny Step at a Time

这个视频讲了为什么做出改变很难，以及如何做出改变。几个关键字：Routine，Trigger，Tiny Step。

Routine: 或者说习惯，那些不用动脑就会自动执行的任务，做起来基本不费力。
Trigger: 特定场景下会触发的机关，只要这个机关被触发，就会执行 Routine。
Tiny Step: 不要试着一次对生活模式做出大的调整，而是巧妙地把新习惯与 Trigger 和 Routine 相关联。