呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#书摘 #css #前端
《CSS 选择器世界》 :target 伪类与锚点
假设浏览器地址栏中的地址如下：
则
URL锚点可以和页面中id匹配的元素进行锚定，浏览器的默认行为是触发滚动定位，同时进行:target伪类匹配。
举个例子，假设页面有如下HTML代码：
以及如下CSS代码：
则第二行列表的颜色为天蓝色，同时文字加粗显示。
这就是:target伪类的作用——匹配URL锚点对应的元素。
https://memo.cosine.ren/m/399
《CSS 选择器世界》 :target 伪类与锚点
假设浏览器地址栏中的地址如下：
https://www.cssworld.cn/#cs-anchor 则
#cs-anchor 就是“锚点”，对应术语是哈希，即JavaScript中location.hash的返回值。URL锚点可以和页面中id匹配的元素进行锚定，浏览器的默认行为是触发滚动定位，同时进行:target伪类匹配。
举个例子，假设页面有如下HTML代码：
<ul>
<li id="cs-first">第1行，id是cs-first</li>
<li id="cs-anchor">第2行，id是cs-anchor</li>
<li id="cs-last">第3行，id是cs-last</li>
</ul>
以及如下CSS代码：
li:target {
font-weight: bold;
color: skyblue;
}
则第二行列表的颜色为天蓝色，同时文字加粗显示。
这就是:target伪类的作用——匹配URL锚点对应的元素。
https://memo.cosine.ren/m/399
#书摘 #css #前端
《CSS 选择器世界》 姗姗来迟的关联伪类 :has()
:has() 伪类是一个功能非常强大的伪类，它可以实现类似父选择器和前面兄弟选择器的功能。
:has()伪类的语义非常明确，和渲染表现保持一致。举个简单的例子，下面的CSS代码表示如果
类似地，我们还可以使用+或者~这样的选择符实现“前面兄弟选择器”的效果，即根据后面的兄弟元素选择前面的元素。例如：
理论上，有了:has()伪类，页面中任意DOM元素变化都可以被其他DOM元素感知到
https://memo.cosine.ren/m/398
《CSS 选择器世界》 姗姗来迟的关联伪类 :has()
:has() 伪类是一个功能非常强大的伪类，它可以实现类似父选择器和前面兄弟选择器的功能。
:has()伪类的语义非常明确，和渲染表现保持一致。举个简单的例子，下面的CSS代码表示如果
<a> 元素里面有 <img> 元素，则 <a> 元素就匹配：
a:has(img) { display: block; }
类似地，我们还可以使用+或者~这样的选择符实现“前面兄弟选择器”的效果，即根据后面的兄弟元素选择前面的元素。例如：
h5:has(+ p) { font-size: 1rem; }
理论上，有了:has()伪类，页面中任意DOM元素变化都可以被其他DOM元素感知到
https://memo.cosine.ren/m/398
#书摘 #css #前端
《CSS 选择器世界》 实用的优先级调整伪类
的优先级等同于p选择器，参数中的选择器的优先级被完全忽略。
我们可以巧妙地借助这一特性来降低某些全局 CSS 的优先级。相比使用@layer规则降低 CSS 的优先级，使用 :where() 伪类的方法更敏捷且兼容性更好。
https://memo.cosine.ren/m/397
《CSS 选择器世界》 实用的优先级调整伪类
:where():where() 伪类的优先级永远是0，完全忽略其中参数选择器的优先级。例如：
:where(.article, section) p {}
的优先级等同于p选择器，参数中的选择器的优先级被完全忽略。
我们可以巧妙地借助这一特性来降低某些全局 CSS 的优先级。相比使用@layer规则降低 CSS 的优先级，使用 :where() 伪类的方法更敏捷且兼容性更好。
https://memo.cosine.ren/m/397
#阮一峰的科技周刊 #前端
我就说我好像忘了什么
科技爱好者周刊（第 273 期）：任正非的三篇最新谈话
#优质博文
1. GPT-4V 的图片应用（英文） 📓 #AI 十一期间，OpenAI 公司推出了 GPT-4 的新版本，支持上传图片。
AI 既能处理文字，也能处理图片，打开了许多全新的用法，本文演示其中几种，令人思路大开。
2. Astro 岛屿（英文） 📓 前端框架 Astro 提出的一个概念：静态页面包含动态组件，后者就好像页面里面的"岛屿"（island）。
3. 我爱死静态类型了（英文）📓 作者用实例解释，为什么他认为静态类型总是正确的选择。
#资源推荐 #tools
1. Gitness 🧰 #git 最新出现的 GitHub 开源替代品，用于自己架设服务，托管代码。【我要革了自己的命】
2. Dexie.js 🧰 浏览器原生数据库 IndexedDB 的包装库，提供易于操作的 API。
3. WeOCR 🧰 #图片处理 #OCR一个图片文字识别的 OCR 网站，可以离线使用。【感觉还不错】
4. AnyBT 🧰 一个新出现的磁力链接搜索引擎。
5. DevToys 🧰 一款 Windows 的小工具集合，收入了开发者会用到的许多小工具。
我就说我好像忘了什么
科技爱好者周刊（第 273 期）：任正非的三篇最新谈话
#优质博文
1. GPT-4V 的图片应用（英文） 📓 #AI 十一期间，OpenAI 公司推出了 GPT-4 的新版本，支持上传图片。
AI 既能处理文字，也能处理图片，打开了许多全新的用法，本文演示其中几种，令人思路大开。
2. Astro 岛屿（英文） 📓 前端框架 Astro 提出的一个概念：静态页面包含动态组件，后者就好像页面里面的"岛屿"（island）。
3. 我爱死静态类型了（英文）📓 作者用实例解释，为什么他认为静态类型总是正确的选择。
#资源推荐 #tools
1. Gitness 🧰 #git 最新出现的 GitHub 开源替代品，用于自己架设服务，托管代码。【
2. Dexie.js 🧰 浏览器原生数据库 IndexedDB 的包装库，提供易于操作的 API。
3. WeOCR 🧰 #图片处理 #OCR一个图片文字识别的 OCR 网站，可以离线使用。【感觉还不错】
4. AnyBT 🧰 一个新出现的磁力链接搜索引擎。
5. DevToys 🧰 一款 Windows 的小工具集合，收入了开发者会用到的许多小工具。
Roboflow Blog
GPT-4 with Vision: Complete Guide and Evaluation
In this guide, we share findings experimenting with GPT-4 with Vision, released by OpenAI in September 2023.
