Source map 原理
Source map 本身是一个 JSON，如
如对
首先
之后是
最后的
如果得到 5 个数，则在上面 4 个基础上，再追加一个 name index，对应于 JSON 中的
#learning
Source map 本身是一个 JSON，如
{"version":3, "mappings":";;;MADF,cAtBF;mBAAkB", "sources":["~/code/Cat.tsx"], ...}mappings 是 source map 关键，它记录了源码与转换后代码的映射关系。每个 ; 表示新的一行，因此其后的 MADF 在第 4 行，表示该行的列映射关系，多个使用 , 隔开，它的每个字符基于 Base64 编码，解码后正好是 6 bits。如对
cAtBF 解码，c:011100 A:000000 t:101101 B:000001 F:000101，解码后的数据以 VLQ(variable-length quantity) 形式表示，每组的最高位是 continuation(C)，表示是否连续，最低位是 sign(S)，1 为负。首先
c:011100，C、S 都是 0，表示“非连续正数”，因此可以直接拿中间的位 1110=14。其后 A:000000 按照同样方式，0000=0。之后是
t:101101，C、S 均为 1，表示“连续负数”，“连续”指其后的 B:000001 也是它的一部分，为了更加充分利用空间，后面每组都省去了 S，因此最终是 t:0110（除去 C、S），B:00001（除去 C），连起来 00001 0110=22，补上符号 -22。最后的
F:000101，C=0，S=1，表示“非连续负数”，因此 0010=2，补上符号后 -2。最终 cAtBF 得到 [14,0,-22,-2] 四个数，分别表示 output column、input filename index、input line、input column，所有数字都是相对于当前的偏移量，input filename index 对应于上面 JSON 中的 sources。如果得到 5 个数，则在上面 4 个基础上，再追加一个 name index，对应于 JSON 中的
names（未列出）。如果只有 1 个数，那么仅表示 output column，无其它更多信息。#learning
🌸
与 Tab 缩进和解 很长一段时间我都在坚持“2-spaces”缩进，但直到今天我才意识到，这种风格的要点，不在“Space”，因为即使是“Tab”，只要将 size 调整为 2 就行了。 这算是长久以来我对“Tab”的和解，纠结 Spaces or Tabs 是没意义的，现在看来，我只是在纠结缩进的宽度。 在下个项目，我将尝试使用 1-tab 缩进，并设置 tab 的 size 为 2。 这样做有 2 个显而易见的好处：更少的字符占更少的空间；其他人可以根据自身偏好设置 tab 的 size。 …
GitHub 的 Tab 支持真是差强人意
- GitHub Actions 的 yaml 只能用 Space
- Markdown 会把 Tab 渲染成 8-width，即使用户设置了 Tab size preference，也不会遵照
在看到 GitHub 改善之前，我决定 Markdown 先用 space 作为替代。
- GitHub Actions 的 yaml 只能用 Space
- Markdown 会把 Tab 渲染成 8-width，即使用户设置了 Tab size preference，也不会遵照
在看到 GitHub 改善之前，我决定 Markdown 先用 space 作为替代。
推荐一个 MS Edge theme
https://microsoftedge.microsoft.com/addons/detail/pride/gpahbdchbfofplfeaeipcphhbdhdpnae
非常漂亮！inspired by the many flags of the LGBTQI+ community
https://microsoftedge.microsoft.com/addons/detail/pride/gpahbdchbfofplfeaeipcphhbdhdpnae
非常漂亮！inspired by the many flags of the LGBTQI+ community
CSS Nesting Module
CSS 终于支持选择器嵌套了，https://drafts.csswg.org/css-nesting/
过了一遍，和 Sass 语法基本差不多，浏览器目前仍在实现，或将在 Chrome 109 中可用（with a flag）。
另外刚刚查资料时，发现了 postcss-nesting 这个插件，它允许你提前体验该语法，原理是将 nesting selector 编译为
如
CSS 终于支持选择器嵌套了，https://drafts.csswg.org/css-nesting/
过了一遍，和 Sass 语法基本差不多，浏览器目前仍在实现，或将在 Chrome 109 中可用（with a flag）。
另外刚刚查资料时，发现了 postcss-nesting 这个插件，它允许你提前体验该语法，原理是将 nesting selector 编译为
:is()。如
div{+span#my-id{}} 编译为 :is(div)+span#my-id{}。
🌸
CSS Nesting Module CSS 终于支持选择器嵌套了，https://drafts.csswg.org/css-nesting/ 过了一遍，和 Sass 语法基本差不多，浏览器目前仍在实现，或将在 Chrome 109 中可用（with a flag）。 另外刚刚查资料时，发现了 postcss-nesting 这个插件，它允许你提前体验该语法，原理是将 nesting selector 编译为 :is()。 如 div{+span#my-id{}} 编译为 :is(div)+span#my…
试了下已经支持了欸，不过 DevTools 显示还有问题。
Chrome 版本
flag 参数
Chrome 版本
Version 109.0.5402.0 (Official Build) canary (arm64)flag 参数
--enable-blink-features=CSSNestinghttps://sxyz.blog/functors-applicatives-and-monads-in-pictures/
把 Aditya Bhargava 的这篇经典文章重新翻译了一版。
它是了解函数式编程非常棒的一篇文章，但现存的中文译文却都不可用了。
#blog
把 Aditya Bhargava 的这篇经典文章重新翻译了一版。
它是了解函数式编程非常棒的一篇文章，但现存的中文译文却都不可用了。
#blog
sxyz.blog
图解 Functor、Applicative、Monad
序言 这篇文章是对原文 Functors, Applicatives, And Monads In Pictures 的翻译，由 Aditya Bhargava 撰写，翻译时已取得作者授权。 它是了解函数式编程非常棒的一篇文章，但它的两篇中文译文已不再可用（404、全部图片丢失），另外仅剩的一篇却是以 Kotlin 为导向的，因此
现在国行 iPhone 限制了 AirDrop，如果哪天限制只能国区 App Store 下载 App，那岂不是不越狱，连个梯子都用不了了😅
或许以后只有 Android，或除中港澳 iPhone是安全的。想想还挺恐怖的，希望也只是想想。
或许以后只有 Android，或除中港澳 iPhone是安全的。想想还挺恐怖的，希望也只是想想。
Atomic CSS 类名编码方式，对文件体积的影响
现代 Web 将 gzip、brotli 这些压缩算法，应用到了各种类型的，浏览器所需的文件上。其原理就是寻找数据中的公共子串，并将其替换为较短的表示形式。
因此，很早有个想法，想以 Atomic CSS 为例，测试看看类名的不同命名方式，究竟对 gzip、brotli 的压缩率有多大影响。现在终于想动了。
这里我随便找了一个使用 Atomic CSS 构建的博客，它的类名是
结果是，
另外，这种连续编码方式，还可以进一步优化，我统计了一下整个 page 只有 315 个不重复类名，因此理论上
#experience
现代 Web 将 gzip、brotli 这些压缩算法，应用到了各种类型的，浏览器所需的文件上。其原理就是寻找数据中的公共子串，并将其替换为较短的表示形式。
因此，很早有个想法，想以 Atomic CSS 为例，测试看看类名的不同命名方式，究竟对 gzip、brotli 的压缩率有多大影响。现在终于想动了。
这里我随便找了一个使用 Atomic CSS 构建的博客，它的类名是
gSBWlu kJzccJ hsxujn 这种随机字符，我写了个简单脚本，将其重编码为 aaaaaa aaaaab aaaaac 这种连续字符，然后通过 brotli cli 分别压缩它们，观察文件大小变化。结果是，
b-brotlied.html 比 a-brotlied.html 体积小了 12%，具体图片见评论。这个数字其实是超出我预期的，因为这还只是一个博客首页。理论上，页面规模越大，这个数字就会越明显。另外，这种连续编码方式，还可以进一步优化，我统计了一下整个 page 只有 315 个不重复类名，因此理论上
aaaaaa aaaaab aaaaac 可以进一步简化为 aa ab ac，但我却给它们补全了 aaaa 的前缀。#experience
👍2