呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #编码
2023 年每个软件开发者都必须知道的关于 Unicode 的最基本的知识（仍然不准找借口！）
让我们总结一下：
1. Unicode 已经赢了。
2. UTF-8 是传输和储存数据时使用最广泛的编码。
3. UTF-16 仍然有时被用作内存表示。
字符串的两个最重要的视图是字节（分配内存/复制/编码/解码）和扩展字位簇（所有语义操作）。
4. 以码位为单位来迭代字符串是错误的。它们不是书写的基本单位。一个字位可能由多个码位组成。
5. 要检测字位的边界，你需要表格。
6.对于所有 Unicode 相关的东西，甚至是像 strlen、indexOf 和 substring 这样的无聊的东西，都要使用 Unicode 库。
7. Unicode 每年更新一次，规则有时会改变。
8. Unicode 字符串在比较之前需要进行归一化。
9. Unicode 在某些操作和渲染中依赖于区域设置。
10. 即使是纯英文文本，这些都很重要。
总的来说，是的，Unicode 不完美，但
1. 有一个能覆盖所有可能语言的编码、
2. 全世界都同意使用它、
3. 我们可以完全忘记编码和转换之类的东西
2023 年每个软件开发者都必须知道的关于 Unicode 的最基本的知识（仍然不准找借口！）
让我们总结一下：
1. Unicode 已经赢了。
2. UTF-8 是传输和储存数据时使用最广泛的编码。
3. UTF-16 仍然有时被用作内存表示。
字符串的两个最重要的视图是字节（分配内存/复制/编码/解码）和扩展字位簇（所有语义操作）。
4. 以码位为单位来迭代字符串是错误的。它们不是书写的基本单位。一个字位可能由多个码位组成。
5. 要检测字位的边界，你需要表格。
6.对于所有 Unicode 相关的东西，甚至是像 strlen、indexOf 和 substring 这样的无聊的东西，都要使用 Unicode 库。
7. Unicode 每年更新一次，规则有时会改变。
8. Unicode 字符串在比较之前需要进行归一化。
9. Unicode 在某些操作和渲染中依赖于区域设置。
10. 即使是纯英文文本，这些都很重要。
总的来说，是的，Unicode 不完美，但
1. 有一个能覆盖所有可能语言的编码、
2. 全世界都同意使用它、
3. 我们可以完全忘记编码和转换之类的东西
blog.xinshijiededa.men
（译）2023 年每个软件开发者都必须知道的关于 Unicode 的基本知识
仍然不准找借口！
#书摘
《CSS 新世界》符合CSS世界“流”概念的逻辑属性margin-inline-end
在CSS2.1时代，CSS属性的定位都是基于方向的，而不是“流”。这样的设计其实是有问题的，基于方向进行定位虽然符合现实世界认知，但和CSS世界基于“流”的底层设计理念不符，margin-right就是一个基于方向的CSS属性，因为right表示右侧，和现实世界的右侧匹配。
通常情况下，我们这么使用是不会有任何问题的。但是，如果开发者使用direction属性改变了文档的水平流向，希望按钮从右往左排列，就会有预期之外的表现，此时margin-right产生的间隙就不是我们想要的，margin-left 才是我们想要的。
但是，如果我们一开始设置的不是符合现实世界认知的margin-right属性，而是符合CSS世界“流”概念的逻辑属性margin-inline-end，代码如下：
也就是说，当文档流的方向是从左往右的时候，margin-inline- end属性的渲染表现就等同于margin-right属性；当文档流的方向是从右往左的时候，margin-inline-end属性的渲染表现就等同于margin-left属性。
存在非常适合使用这类CSS逻辑属性的场景，那就是对称布局，例如，模拟微信对话的效果就是典型的对称布局。只需要使用CSS逻辑属性实现一侧的布局效果，然后另外一侧的布局效果我们只需要使用一句direction:rtl就完成了。
https://memo.cosine.ren/m/419
《CSS 新世界》符合CSS世界“流”概念的逻辑属性margin-inline-end
在CSS2.1时代，CSS属性的定位都是基于方向的，而不是“流”。这样的设计其实是有问题的，基于方向进行定位虽然符合现实世界认知，但和CSS世界基于“流”的底层设计理念不符，margin-right就是一个基于方向的CSS属性，因为right表示右侧，和现实世界的右侧匹配。
通常情况下，我们这么使用是不会有任何问题的。但是，如果开发者使用direction属性改变了文档的水平流向，希望按钮从右往左排列，就会有预期之外的表现，此时margin-right产生的间隙就不是我们想要的，margin-left 才是我们想要的。
但是，如果我们一开始设置的不是符合现实世界认知的margin-right属性，而是符合CSS世界“流”概念的逻辑属性margin-inline-end，代码如下：
button {
margin-inline-end: 10px;
}
margin-inline-end 是一个“流淌”在文档流中的CSS逻辑属性，表示内联元素文档流结束的方向。也就是说，当文档流的方向是从左往右的时候，margin-inline- end属性的渲染表现就等同于margin-right属性；当文档流的方向是从右往左的时候，margin-inline-end属性的渲染表现就等同于margin-left属性。
存在非常适合使用这类CSS逻辑属性的场景，那就是对称布局，例如，模拟微信对话的效果就是典型的对称布局。只需要使用CSS逻辑属性实现一侧的布局效果，然后另外一侧的布局效果我们只需要使用一句direction:rtl就完成了。
https://memo.cosine.ren/m/419
#书摘
《CSS 新世界》3.1.3 深入了解min-content关键字
1. 元素的 padding-box、border-box和margin-box的尺寸表现规则不会因为元素的不同而有所不同，但是content-box不一样，它随着内容的不同，首选最小宽度也会不同。
- 替换元素（按钮、视频和图片等元素）的首选最小宽度是当前元素内容自身的宽度。
- CJK文字，指的是中文、日文、韩文这几种文字。这里以中文为代表加以说明。如果是一段没有标点的中文文字，则首选最小宽度是单个汉字的宽度。如果包含避头标点或避尾标点，同时line-break的属性值不是anywhere，则最终的首选最小宽度需要包含标点字符的宽度
（连续的中文破折号都会被认为是一个字符单元。）
- 非CJK文字（除中文、日文、韩文之外的文字，如英文、数字和标点等字符）的首选最小宽度是由字符单元的宽度决定的，所有连续的英文字母、数字和标点都被认为是一个字符单元，直到遇到中断字符。
首先无论是哪个浏览器，Space空格（U+0020）都能中断字符单元，并且忽略Space空格前后字符的类型。而其他字符的中断规则在每个浏览器中都是不一样的。
2. 一个元素最终的首选最小宽度是所有内部子元素中最大的那个首选最小宽度值
https://memo.cosine.ren/m/418
《CSS 新世界》3.1.3 深入了解min-content关键字
min-content 关键字实际上就是CSS2.1规范中提到的“preferred minimum width”或者“minimum content width”，即“首选最小宽度”或者“最小内容宽度”。1. 元素的 padding-box、border-box和margin-box的尺寸表现规则不会因为元素的不同而有所不同，但是content-box不一样，它随着内容的不同，首选最小宽度也会不同。
- 替换元素（按钮、视频和图片等元素）的首选最小宽度是当前元素内容自身的宽度。
- CJK文字，指的是中文、日文、韩文这几种文字。这里以中文为代表加以说明。如果是一段没有标点的中文文字，则首选最小宽度是单个汉字的宽度。如果包含避头标点或避尾标点，同时line-break的属性值不是anywhere，则最终的首选最小宽度需要包含标点字符的宽度
（连续的中文破折号都会被认为是一个字符单元。）
- 非CJK文字（除中文、日文、韩文之外的文字，如英文、数字和标点等字符）的首选最小宽度是由字符单元的宽度决定的，所有连续的英文字母、数字和标点都被认为是一个字符单元，直到遇到中断字符。
首先无论是哪个浏览器，Space空格（U+0020）都能中断字符单元，并且忽略Space空格前后字符的类型。而其他字符的中断规则在每个浏览器中都是不一样的。
2. 一个元素最终的首选最小宽度是所有内部子元素中最大的那个首选最小宽度值
https://memo.cosine.ren/m/418
#前端 #阮一峰的科技周刊
科技爱好者周刊（第 275 期）：彼得·蒂尔的实验
#优质博文
1. Flutter 与 React Native 的开发体验比较（英文） 📓 作者分别使用 Flutter 和 React Native 开发手机 App，总结了自己的感受。
#资源推荐 #tools
1. TinaCMS 🧰 一个网站 CMS（内容管理系统），特别之处是它的内容不放在数据库，而是放在 Git 仓库，也可以用于 Git 仓库的网页编辑器。
2. SecretiveMac 🧰 电脑的 SSH 密钥管理工具，支持使用 Touch ID 或 Apple Watch 进行身份验证，通过后才能访问密钥。
3. BackgroundRemover 🧰 去除图像和视频的背景，它是命令行工具，方便批量处理和脚本编程。 #AI
4. pear-rec 🧰 一个开源的 Electron 应用，可以截图、录屏、录音等。 #electron
5. TwitterShots 🧰 一个网页工具，生成推文的截图。
6. CSS Loaders 🧰 该网站收集各种 CSS 的页面加载特效。#css
科技爱好者周刊（第 275 期）：彼得·蒂尔的实验
#优质博文
1. Flutter 与 React Native 的开发体验比较（英文） 📓 作者分别使用 Flutter 和 React Native 开发手机 App，总结了自己的感受。
#资源推荐 #tools
1. TinaCMS 🧰 一个网站 CMS（内容管理系统），特别之处是它的内容不放在数据库，而是放在 Git 仓库，也可以用于 Git 仓库的网页编辑器。
2. SecretiveMac 🧰 电脑的 SSH 密钥管理工具，支持使用 Touch ID 或 Apple Watch 进行身份验证，通过后才能访问密钥。
3. BackgroundRemover 🧰 去除图像和视频的背景，它是命令行工具，方便批量处理和脚本编程。 #AI
4. pear-rec 🧰 一个开源的 Electron 应用，可以截图、录屏、录音等。 #electron
5. TwitterShots 🧰 一个网页工具，生成推文的截图。
6. CSS Loaders 🧰 该网站收集各种 CSS 的页面加载特效。#css
Stack Overflow Blog
Flutter vs. React Native: Which is the right cross-platform framework for you?
Building traditional native apps often requires maintaining two or more codebases. Let's look at two frameworks that let you keep your code unified.
#优质博文 #前端 #css
小技巧 | 渐变消失遮罩的多种实现方式
省流：mask实现
今天刚用mask实现类似的羽化效果
三篇推荐博文：
1. 奇妙的 CSS MASK
2. 使用 mask 实现视频弹幕人物遮罩过
3. 小技巧 | 一行代码实现头像与国旗的融合
小技巧 | 渐变消失遮罩的多种实现方式
省流：mask实现
今天刚用mask实现类似的羽化效果
三篇推荐博文：
1. 奇妙的 CSS MASK
2. 使用 mask 实现视频弹幕人物遮罩过
3. 小技巧 | 一行代码实现头像与国旗的融合
