#优质博文 #前端 #react
immer 两篇
1. 群友认识的一个字节大佬写的好文，奈何太低调，文章简介都是123
2. React中的不可变数据——immer是如何实现的？

juejin.cn

111 - 掘金

1231231231231231231231231231231231231231231231231231231231231231231231231231231231231231231231231231

Find Blog👁发现博客

Photo

#优质博文
可以看看这篇文章：清理「内容农场」，还你清爽的 Google 中文搜索体验

少数派 - 高品质数字消费指南

清理「内容农场」，还你清爽的 Google 中文搜索体验 - 少数派

通篇复读、死蹭热点、格式固定、车轱辘话扯上千字……以浪费读者时间为己任、往往还伴随着剽窃行为的「内容农场」之祸该如何根绝？

居然刚刚才发现一个非常好用的 web-server:
https://caddyserver.com/docs/automatic-https
全自动申请证书，反向代理配置超简单，甚至支持h3，性能也好…
多年前被nginx配置狠狠折磨的我眼泪掉下来
#资源推荐

#资源推荐 #前端 #tailwind #css
Tailwind Variants 是为 TailwindCSS 设计的一流变体 API 库。以下是其主要特点：

1. 变体：受到 Stitches 的启发，Tailwind Variants 为 TailwindCSS 引入了一种创建一致性设计系统的方法。
2. 响应式变体：此功能允许开发者将变体应用于不同的屏幕尺寸。
3. 插槽：使用插槽属性，开发者可以同时为多个组件设置样式。
4. 覆盖：Tailwind Variants 提供了一个 class/className 属性，用于覆盖任何组件上的类。
5. 组件组合：它允许开发者使用 extend 参数组合组件，自动合并扩展组件的类、插槽、变体、defaultVariants 和 compoundVariants。
6. 开发者体验：Tailwind Variants 以开发者体验为中心，特别是在使用 TypeScript 时提供了出色的自动完成体验。
7. 自动冲突解决：实现 tailwind-merge 以高效地合并类，确保与 TailwindCSS 类没有冲突。
8. 框架中立：它是一个与任何框架兼容的实用程序库，不特定于 React。

Spinkit

❗️ Source Code

Save and Share 🚀

👉 @frontend_trend

#碎碎念
看了看 git wrapped 的总结，和 myyearwithgit 的22年回顾
感慨啊...

#碎碎念 #tailwind #资源推荐 #css
@tailwindcss/typography 太牛了吧，还是今天搭博客的时候发现的，官方的 Tailwind CSS Typography 插件提供了一组 prose 类，可以使用它们向您无法控制的任何普通 HTML 添加漂亮的版式默认值，例如从 Markdown 渲染的 HTML 或从 CMS 提取的 HTML。好评！

GitHub

GitHub - tailwindlabs/tailwindcss-typography: Beautiful typographic defaults for HTML you don't control.

Beautiful typographic defaults for HTML you don't control. - tailwindlabs/tailwindcss-typography

#资源推荐 #前端 #react #markdown
今天在搭建自己的博客，关于markdown渲染和解析元数据找了这两个库：
1. markdown-to-jsx 最轻量级、可定制的 React markdown 组件。
2. gray-matter 从字符串或文件中解析 front-matter。快速、可靠且易于使用。默认情况下解析 YAML front-matter，但也支持 YAML、JSON、TOML 或 Coffee Front-Matter

GitHub

GitHub - probablyup/markdown-to-jsx: 🏭 The most lightweight, customizable React markdown component.

🏭 The most lightweight, customizable React markdown component. - GitHub - probablyup/markdown-to-jsx: 🏭 The most lightweight, customizable React markdown component.

#资源推荐 #css #tailwind
无意中发现的 Tailwind CSS
Color Generator —— 输入十六进制代码或更改 HSL 值，创建Tailwind自定义色阶

#书摘 #css #前端
《CSS 选择器世界》 任意匹配伪类: is()
:is() 伪类可以把括号中的选择器依次分配出去，这对于复杂的有很多逗号分隔的选择器或者浏览器可能不支持的选择器非常有用。

:is() 伪类本身的优先级为0，整个选择器的优先级是由:is()伪类里参数优先级最高的那个选择器决定的。例如： :is(#article, .section) p {}​​ 优先级等同于 #article p 。这是由参数中优先级最高的选择器决定的。
1. :is() 伪类的语法和两大作用
先讲解 :is()`伪类的语法。和 :not()` 伪类不同，`:is()` 伪类的参数从一开始就支持复杂选择器或复杂选择器列表。例如，下面的写法都是合法的：


/* 简单选择器 */
:is(article) p {}
/* 简单选择器列表 */
:is(article, section) p {}
/* 复杂选择器 */
:is(.article[class], section) p {}
/* 带逻辑伪类的复杂选择器 */
.some-class:is(article:not([id]), section) p {}​​



:is()伪类的一大作用是简化选择器。例如，平时开发中经常会遇到类似下面的CSS代码：


.cs-avatar-a > img,
.cs-avatar-b > img,
.cs-avatar-c > img,
.cs-avatar-d > img {
display: block;
width: 100%; height: 100%;
border-radius: 50%;
}​​



此时就可以使用:is()伪类进行简化：


:is(.cs-avatar-a, .cs-avatar-b, .cs-avatar-c, .cs-avatar-d) > img {
display: block;
width: 100%; height: 100%;
border-radius: 50%;
}​​



这种简化只是一维的，:is()伪类的优势并不明显，但如果选择器是交叉组合的，:is()伪类就大放异彩了。例如，有序列表和无序列表可以相互嵌套，假设有两层嵌套，则最里面的 <li> 元素存在下面4种可能的情况：


ol ol li,
ol ul li,
ul ul li,
ul ol li {
margin-left: 2em;
}​​



如果使用:is()伪类进行简化，则只有下面这几行代码：

css
:is(ol, ul) :is(ol, ul) li {
margin-left: 2em;
}​​



2. :is() 伪类在Vue等框架中的妙用
按道理讲，下面两行CSS语句中的选择器所匹配的元素是没有任何区别的，因为此时:is()伪类仅仅是一个无关紧要的语法糖，既不影响选择器的优先级，也不影响匹配的规则：


.box .some-class {}
.box :is(.some-class) {}​​



如果是在常规的开发场景中，确实如此，但要是在Vue或者React等成熟的框架中，则情况就会不同，可以利用这种特性让我们的开发变得更顺畅。

以Vue框架为例，在Vue框架中，无论是构建模块还是组件，都会使用设置了scoped属性的样式，目的是让CSS私有，避免和外部CSS发生冲突。例如：


<style scoped>
.logo {
height: 6em;
padding: 1.5em;
}
</style>​​



此时框架会给类名.logo创建随机的属性选择器，这样可以确保.logo匹配的元素在当前Vue模块中是唯一的。

但是当我们需要匹配的元素是动态生成的时候（业务逻辑插入或者第三方组件），这种给类名添加随机属性选择器的特性可能会导致元素无法匹配。例如运行下面这段JavaScript代码：


const html = ’<img src=”/vite.svg“ class=”logo“ />‘
const app = document.getElementById(’app‘)
app.insertAdjacentHTML(’afterbegin‘, html)​​



此时插入的 <img> 元素是不会被框架添加随机属性值的（如图9-3所示），而 <style> 元素中类名却自动添加了属性选择器，导致样式无法匹配。

如果此时希望可以匹配这个 <img> 元素，同时CSS代码又要写在设置了scoped属性的 <style> 元素中，该怎么办？除Vue框架内置的:deep()语法外，我们还可以使用:is()伪类。不知是出于什么考虑，所有:is()伪类中的选择器在Vue框架中都是不会添加随机属性选择器的（:where()伪类也有此特性），因此，我们可以利用这个特性，让设置了scoped属性的 <style> 元素中的CSS无属性匹配。例如，CSS代码可以这样书写：

<style scoped>
* > :is(.logo) {
height: 6em;
padding: 1.5em;
}
</style>​​


此时，CSS代码中的.logo选择器就是干干净净的类选择器，如图9-4所示，此时，哪怕页面中的HTML元素没有被组件添加随机属性值，也能被匹配了。

虽然:is()伪类因这一特性在意想不到的地方发挥着作用，但其还是有令人遗憾的地方，尤其是不支持伪元素这一点：:is()伪类并不支持伪元素，例如:is(::before, ::after)是不合法的，这是个巨大的遗憾。

目前现代浏览器已经全面支持:is()伪类，大家可以在一些内部项目中大胆使用。

https://memo.cosine.ren/m/362

Hover Card Effect

❗️ Source Code

Save and Share 🚀

👉 @frontend_trend

#前端 #优质博文 #小程序
分享 11 个 yyds微信小程序开源项目
mark一下，万一哪天用了呢

1. UrShop -多店铺SAAS+三级分销微信小程序
2. ChatGPT-MP -基于 ChatGPT 实现的微信小程序，适配 H5 和 Web 端
3. 前端铺子 -基于 Vue，使用 colorUi 与 uView，完美支持微信小程序
5. 叮点跑腿 -小程序采用 uniapp 实现的一套跑腿下单接单系统
6. wanyue_dangjian -一套智慧党建小程序管理系统
7. GarbageSort -一套垃圾识别精灵基于 uni-app 开发的微信小程序
8. QuestionWechatApp -智慧考题宝小程序适用于考核，评测等场景
9. BookChatApp -通用书籍阅读APP，使用 uni-app 实现，支持多端分发
10. Mall4j商城 -一个基于Vue、element ui 的轻量级、前后端分离、拥有完整 sku和下单流程的开源商城的小程序端
11. WeTravel -一个为游客朋友提供多元化服务的一站式数字文旅平台
12. bee -餐饮点餐微信小程序商城，是针对餐饮行业推出的一套完整的餐饮解决方案

Weixin Official Accounts Platform

分享 11 个 yyds微信小程序开源项目

今天分享11个yyds微信小程序开源项目，希望对大家有所帮助，同时祝大家学业有成、接私活赚钱赚到手软、技能更

#视频 #AI
【几十万人看过的小红书账号，没人发现是AI？-哔哩哔哩】 https://b23.tv/qCNNhe3
6

Bilibili

几十万人看过的小红书账号，没人发现是AI？_哔哩哔哩_bilibili

36氪×阿里云 | 挑战用AI一个月做10个小红书博主关注36氪【WHY】系列视频，来看氪深度解读财经热点资料源于网络整理（详细列表见片尾）, 视频播放量 90765、弹幕量 183、点赞数 8067、投硬币枚数 1255、收藏人数 3465、转发人数 2299, 视频作者 36氪, 作者简介 热点永动机，商业圈纪委，宇宙防骗之光
--氪星研究所，带你先一步看到未来--，相关视频：杭州亚运会写着“中华台北”，却叫“中国台北”？，马保国现身杭州亚运会展示“五连鞭”！网友：马老师最懂流量！，【36氪】我用A…