呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#前端 #阮一峰的科技周刊
科技爱好者周刊（第 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. 小技巧 | 一行代码实现头像与国旗的融合
#优质博文 #阮一峰的科技周刊 #前端
科技爱好者周刊（第 274 期）：加密通信的最后一块拼图
『如果 cloudflare-ech.com 发生故障，或者种种原因无法访问，那么所有 Cloudflare 托管的网站是否都无法访问？
这是很现实的问题，因为 Cloudflare 是世界最大 CDN 服务商，很多网站都放在上面。而且，它对免费用户都启用了 ECH，还无法关闭（这是付费功能），等于是让免费用户当小白鼠。
我今天写这个话题，就是想提醒大家。如果由于 ECH 的问题，托管在 Cloudflare 的网站无法访问，有两个解决办法。
一个是站长向 Cloudflare 付费，关了 ECH；另一个是访问者不要使用加密 DNS，因为 ECH 依赖加密 DNS，没有了它，就不会触发 ECH。』
1. CSS 嵌套来了（英文）📓
以前的 CSS 不支持嵌套的写法。但是，现在 Firefox 和 Safari 的正式版本，都已经支持这种写法了
2. CSS 重置详解（2023版）（英文） 📓 著名 CSS 作者 Chris Coyier 的最新文章，解释浏览器的 CSS 重置（CSS reset）每一行的意思。
3. 我用 Web Components 开发了自己的网站（英文） 📓 作者记录怎么使用 Web Components 这种技术，开发自己的网站，他对结果非常满意。如果你想了解 Web Components，这是一篇不错的参考资料。
4. 我的创业技术栈（英文） 📓 作者记录了自己创业所使用的各种 SaaS 服务，免费的优先。【跟我司很像】
#资源推荐 #tools
1. LocalSend 🧰 一款开源的跨平台文件传送软件，不需要互联网连接，依靠共享 Wifi 分享文件。
2. Mycelite 🧰 一个 SQLite 扩展，用来从一个 SQLite 实例同步到另一个，适合从本地向服务端同步数据。
3. Auto-i18n 🧰 它使用 GitHub Actions 和 ChatGPT，将仓库里面的 Markdown 文件翻译成其他语言，适合制作网站的国际化版本。【这个好诶】#AI #i18n
4. little-rat 🧰 一个 Chrome 插件，用来统计并关闭其他插件发出的 HTTP 请求，可以了解插件是否在偷偷上传数据。
科技爱好者周刊（第 274 期）：加密通信的最后一块拼图
『如果 cloudflare-ech.com 发生故障，或者种种原因无法访问，那么所有 Cloudflare 托管的网站是否都无法访问？
这是很现实的问题，因为 Cloudflare 是世界最大 CDN 服务商，很多网站都放在上面。而且，它对免费用户都启用了 ECH，还无法关闭（这是付费功能），等于是让免费用户当小白鼠。
我今天写这个话题，就是想提醒大家。如果由于 ECH 的问题，托管在 Cloudflare 的网站无法访问，有两个解决办法。
一个是站长向 Cloudflare 付费，关了 ECH；另一个是访问者不要使用加密 DNS，因为 ECH 依赖加密 DNS，没有了它，就不会触发 ECH。』
1. CSS 嵌套来了（英文）📓
以前的 CSS 不支持嵌套的写法。但是，现在 Firefox 和 Safari 的正式版本，都已经支持这种写法了
2. CSS 重置详解（2023版）（英文） 📓 著名 CSS 作者 Chris Coyier 的最新文章，解释浏览器的 CSS 重置（CSS reset）每一行的意思。
3. 我用 Web Components 开发了自己的网站（英文） 📓 作者记录怎么使用 Web Components 这种技术，开发自己的网站，他对结果非常满意。如果你想了解 Web Components，这是一篇不错的参考资料。
4. 我的创业技术栈（英文） 📓 作者记录了自己创业所使用的各种 SaaS 服务，免费的优先。【跟我司很像】
#资源推荐 #tools
1. LocalSend 🧰 一款开源的跨平台文件传送软件，不需要互联网连接，依靠共享 Wifi 分享文件。
2. Mycelite 🧰 一个 SQLite 扩展，用来从一个 SQLite 实例同步到另一个，适合从本地向服务端同步数据。
3. Auto-i18n 🧰 它使用 GitHub Actions 和 ChatGPT，将仓库里面的 Markdown 文件翻译成其他语言，适合制作网站的国际化版本。【这个好诶】#AI #i18n
4. little-rat 🧰 一个 Chrome 插件，用来统计并关闭其他插件发出的 HTTP 请求，可以了解插件是否在偷偷上传数据。
WebKit
CSS Nesting and the Cascade
You might have noticed that Safari Technology Preview 179 includes an update to CSS Nesting that adds support for the new “relaxed parsing behavior”.
看了一下代码，貌似还可以部署到 Vercel ，不过开发者并未提供方法
该项目更新频繁，如果你想做一个工具站，那么可以尝试一下
傲星工具箱 - 一款开源的在线工具箱程序
📮投稿 📢频道 💬群聊
#书摘 #css #前端
《CSS 选择器世界》 默认选项:default伪类
CSS :default伪类选择器只能作用在表单元素上，匹配处于默认状态的表单元素。
虽然:default伪类用来标记默认状态，以避免选择混淆，但实际上，它更有实用价值的应用应该是“推荐标记”。
例如，某产品有多个支付选项，其中商家推荐使用微信支付
以前的做法是默认选中微信支付选项，并在后面加上“（推荐）”。这样实现有一个缺点：如果以后要改变推荐的支付方式，需要修改单选框的checked属性和“（推荐）”文字的位置。
有了:default伪类，可以让它变得更加简洁，也更容易维护。
由于:default伪类的匹配不受之后checked属性值变化的影响，因此“（推荐）”会一直跟在“微信”的后面，功能不会发生变化。这样做之后维护更方便了，例如，如果以后想将推荐支付方式更换为“支付宝”，则直接设置“支付宝”对应的
读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-3.php 体验与学习。
https://memo.cosine.ren/m/401
《CSS 选择器世界》 默认选项:default伪类
CSS :default伪类选择器只能作用在表单元素上，匹配处于默认状态的表单元素。
虽然:default伪类用来标记默认状态，以避免选择混淆，但实际上，它更有实用价值的应用应该是“推荐标记”。
例如，某产品有多个支付选项，其中商家推荐使用微信支付
以前的做法是默认选中微信支付选项，并在后面加上“（推荐）”。这样实现有一个缺点：如果以后要改变推荐的支付方式，需要修改单选框的checked属性和“（推荐）”文字的位置。
有了:default伪类，可以让它变得更加简洁，也更容易维护。
input:default + label::after {
content: '（推荐）';
}
<p><input type="radio" name="pay" id="pay0"> <label for="pay0">支付宝</label></p>
<p><input type="radio" name="pay" id="pay1" checked> <label for="pay1">微信</label></p>
<p><input type="radio" name="pay" id="pay2"> <label for="pay2">银行卡</label></p>
由于:default伪类的匹配不受之后checked属性值变化的影响，因此“（推荐）”会一直跟在“微信”的后面，功能不会发生变化。这样做之后维护更方便了，例如，如果以后想将推荐支付方式更换为“支付宝”，则直接设置“支付宝”对应的
<input> 单选框为checked状态即可，“（推荐）”文字会自动跟在“支付宝”的后面，整个过程我们只需要修改一处代码。读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-3.php 体验与学习。
https://memo.cosine.ren/m/401
#书摘 #css #前端
《CSS 选择器世界》 占位符显示伪类 :placeholder-shown
:placeholder-shown 伪类的匹配和 placeholder 属性密切相关。:placeholder-shown顾名思义就是“占位符显示伪类”，表示当输入框的placeholder内容显示的时候，匹配该输入框。使用场景如下
1.可用于实现Material Design风格占位符交互效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题存在。
首先，使浏览器默认的 placeholder 效果不可见，只需将 color 设置为 transparent，CSS如下：
然后，用下面的.input-label元素替代浏览器原生的占位符而成为我们看到的占位符。我们可以采用绝对定位：
最后，在输入框聚焦以及占位符不显示的时候对
效果达成！显然，这要比使用JavaScript写各种事件和判断各种场景简单多了。
眼见为实，读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-1.php 体验与学习。
2.:placeholder-shown与空值判断
由于placeholder内容只在空值状态的时候才显示，因此我们可以借助:placeholder- shown伪类来判断一个输入框中是否有值。
例如：
可以看到输入框中尚未输入内容的时候出现了空值提示信息
https://memo.cosine.ren/m/400
《CSS 选择器世界》 占位符显示伪类 :placeholder-shown
:placeholder-shown 伪类的匹配和 placeholder 属性密切相关。:placeholder-shown顾名思义就是“占位符显示伪类”，表示当输入框的placeholder内容显示的时候，匹配该输入框。使用场景如下
1.可用于实现Material Design风格占位符交互效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题存在。
首先，使浏览器默认的 placeholder 效果不可见，只需将 color 设置为 transparent，CSS如下：
/* 默认placeholder颜色透明不可见 */
.input-fill:placeholder-shown::placeholder {
color: transparent;
}
然后，用下面的.input-label元素替代浏览器原生的占位符而成为我们看到的占位符。我们可以采用绝对定位：
.input-fill-x {
position: relative;
}
.input-label {
position: absolute;
left: 16px; top: 14px;
pointer-events: none;
}
最后，在输入框聚焦以及占位符不显示的时候对
<label> 元素进行重定位（缩小并移动到上方）：
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
transform: scale(0.75) translate(0, -32px);
}
效果达成！显然，这要比使用JavaScript写各种事件和判断各种场景简单多了。
眼见为实，读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-1.php 体验与学习。
2.:placeholder-shown与空值判断
由于placeholder内容只在空值状态的时候才显示，因此我们可以借助:placeholder- shown伪类来判断一个输入框中是否有值。
例如：
textarea:placeholder-shown + small::before,
input:placeholder-shown + small::before {
content: '尚未输入内容';
color: red;
font-size: 87.5%;
}
<input placeholder=" "> <small></small>
<textarea placeholder=" "></textarea> <small></small>
可以看到输入框中尚未输入内容的时候出现了空值提示信息
https://memo.cosine.ren/m/400
