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…

#优质博文 #前端 #react
NestJS + tPRC 与 CSR 侧的 React Query 集成指南

innei.in

超级组合！NestJS + tRPC 与CSR绝佳搭档React Query，开启全新开发时代！

最近在重写一个 NestJS 的项目，想着这么集成下 tRPC 供管理面板前端使用。原本在管理面板都是裸写的 API 接口，也没有任何响应类型。如果使用 tRPC 的话，不仅不用手写 API 还能做到 End-to-End Type-safe. tRPC 是什么 RPC 是指远程过程调用 (Re

悄悄发个boost喵
https://t.me/cosine_front_end?boost

Telegram

cosine - 前端人の日常频道

Boost this channel to help it unlock additional features.

#书摘 #css #前端
《CSS 选择器世界》 不容小觑的逻辑组合伪类

标签选择器、属性选择器直接匹配元素，树结构伪类通过DOM结构进行匹配，而本章要介绍的伪类则通过逻辑进行匹配，这进一步增强了CSS选择器对HTML元素匹配的能力。

目前CSS中的逻辑组合伪类主要有4个，分别是 :not() 、`:is()` 、`:where()` 和 :has() 。这4个伪类自身的优先级都是0，当伪类选择器自身和括号里的参数作为一个整体时，整个选择器的优先级各有差异，有的由参数选择器决定，如:not()，有的参数选择器的优先级也是0，如:where()。

:not()伪类从IE9浏览器就开始支持，非常实用，务必掌握。其他3个伪类适用于无须兼容IE浏览器的项目，其中的:has()伪类是一个功能强大的伪类，可以实现类似于父选择器的效果，日后定是个“大杀器”，大家一定要重点关注。现在先从:not()伪类说起

1. :not() 是否定伪类，如果当前元素与括号里的选择器不匹配，则该伪类会进行匹配。:not()伪类其他相关细节如下。
- :not( 伪类的优先级是0，即最终选择器的优先级是由括号里的表达式决定的。例如 :not(p) {}​​ 的优先级就是p选择器的优先级。
- :not( 伪类可以不断级联。例如：

input:not(:disabled):not(:read-only) {}​​



表示匹配所有不处于禁用状态也不处于只读状态的 <input> 元素。
- 从2021年开始，所有现代浏览器均已支持在:not()伪类中使用多个表达式，例如下面这种写法是合法的：

/* 现代浏览器均支持 */
.cs-li:not(li, dd) {}​​



但是在过去，浏览器是无法解析上述用法的，需要使用下面这种冗长的写法代替：


.cs-li:not(li):not(dd) {}​​



在过去，下面几种写法也不支持，但是现在没有这个限制了，只要项目无须兼容IE浏览器，就可以放心使用。


/* 过去不支持，现在均支持 */
input:not(:disabled:read-only) {}
input:not(p:read-only) {}
input:not([id][title]) {}​​



此外，`:not()` 伪类的参数值不仅可以是选择器，还支持选择符。例如下面的语句也是可以被现代浏览器解析的：


/* 现代浏览器均支持 */
input:not(.a > .b) { border: red solid; }​​



2. 告别重置，全部交给:not()伪类
:not()伪类的最大用处就是可以优化过去我们重置CSS样式的策略。由于重置样式在Web开发中非常常见，因此:not()伪类的适用场景非常广泛。例如：


.cs-panel {
display: none;
}
.cs-panel.active {
display: block;
}​​



实际上，这种效果有更好的实现方式，那就是使用:not()伪类，推荐使用下面的CSS代码：


.cs-panel:not(.active) {
display: none;
}​​



使用:not()伪类有如下优点。
(1)使代码更简洁。
(2)更易于理解。
(3)最重要的是**保护了原类名的优先级，扩展性更强**，更利于维护。

对于某类重置场景，如果:not()伪类使用不当，可能会有预料之外的情况出现。例如，对于一些阅读类的网站，希望 <article> 元素内的 <ol>`、 `<ul> 元素依然保留默认的样式，不希望被重置。传统的实现一般是外部CSS重置，在 <article> 元素里再还原，CSS示意代码如下：


ol, ul {
padding: 0;
margin: 0;
list-style-type: none;
}
article ol,
article ul {
all: revert;
}​​



有些读者学了本节的内容后会想到使用:not()伪类来实现，然后使用了如下的CSS代码：

:not(article) ol,
:not(article) ul {
padding: 0;
margin: 0;
list-style-type: none;
}​​



实际上这是有问题的。例如，有如下HTML代码：


<article>
<div>
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
</div>
</article>​​



这里的 <ol> 元素的margin和padding等CSS属性样式理论上不应该被重置，但实际上这些样式都被重置了，因为 <ol> 元素外面的 <div> 元素也匹配 :not(article) ol 选择器。

所以，对于这种场景，:not()伪类的使用并没有想象的那么简单，不过也不是不能实现，而是需要使用:not()伪类在CSS选择器Level4规范中的新语法，也就是使用选择符：


ol:not(article ol),
ul:not(article ul) {
padding: 0;
margin: 0;
list-style-type: none;
}​​



上面的例子有演示页面，读者可以通过链接https://demo.cssworld.cn/selector2/9/1-1.php 访问。

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

demo.cssworld.cn

article标签内的ol, ul样式不重置 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 article标签内的ol, ul样式不重置

#书摘 #css #前端
《CSS 选择器世界》匹配类型的子索引伪类 —— :nth-of-type() 伪类和 :nth-last-of-type() 伪类
1. :nth-of-type() 伪类匹配指定索引的当前标签类型元素，:nth-of-type()伪类从前面开始匹配，而:nth-last-of-type()伪类从后面开始匹配。
- :nth-of-type() 伪类和 :nth-child() 伪类的相同之处是它们的语法一
- :nth-of-type() 伪类和 :nth-child() 伪类的不同之处是：:nth-of-type() 伪类的匹配范围是所有相同标签的相邻元素， 而:nth-child() 伪类会匹配所有相邻元素，忽略标签类型。
-

2. :nth-of-type() 伪类适用于特定标签组合且这些组合会不断重复的场景。在整个HTML中，这样的组合元素并不多见，较为典型的是“dt+dd”组合：


<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>​​


以及“details > summary”组合：


<details open>
<summary>订单中心</summary>
<a href>我的订单</a>
<a href>我的活动</a>
<a href>评价晒单</a>
<a href>购物助手</a>
</details>​​


这段代码中的 <a> 元素就可以使用 :nth-of-type() 伪类进行匹配。

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

#书摘 #css #前端
《CSS 选择器世界》匹配类型的子索引伪类 —— :first-of-type 伪类和 :last-of-type 伪类和 :only-of-type 伪类
匹配类型的子索引伪类类似于子索引伪类，区别在于，匹配类型的子索引伪类是在同级列表中相同标签元素之间进行索引与解析的。

写HTML的时候要注意使用语义化标签，甚至可以使用自定义标签，因为要想使本节中的这些伪类在项目中大放异彩，离不开标签的区分，如果全部都是类是在同级列表中相元素，就无法使用这些伪类。

1. :first-of-type 表示当前第一个标签类型的元素。例如：


dl > :first-of-type {
color: deepskyblue;
font-style: italic;
}
<dl>
<dt>标题</dt>
<dd>内容</dd>
</dl>​​


结果:first-of-type伪类匹配了 <dt> 和 <dd> 元素，文字表现为深天蓝色倾斜体

如果有如下HTML代码，其中有多个 <dt> 和 <dd> 元素，则对于后面的 <dt> 和 <dd> 元素，`:first-of-type` 伪类不会匹配，文字表现为默认的黑色且非倾斜体，代码如下：


<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>​​


标题2和内容2不会被匹配

2. :last-of-type 伪类的语法和匹配规则与 :first-of-type 的类似，区别在于，`:last-of-type` 伪类匹配最后一个同类型的标签元素。在上面的代码中就是匹配标题1和内容1。

3. :only-of-type 伪类
:only-of-type 表示匹配唯一的标签类型的元素。例如：
使用:only-of-type伪类也可以匹配例1中的 <dt> 和 <dd> 元素，因为这两种类型的标签均只有一个。

> :only-child伪类匹配的元素，:only-of-type伪类一定匹配。但是:only-of-type伪类匹配的元素，:only-child伪类不一定匹配。

:only-of-type伪类缺少典型的应用场景，大家需要根据实际情况适时使用。

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

#书摘 #css #前端
《CSS 选择器世界》nth-child()的参数索引特性
对于nth-child()、nth-last-child() 以及8.4.3节要介绍的 nth-of-type()、nth-last-of-type()，还有一种大家可能没见过的语法，就是使用 of 关键字配合特性的CSS选择器，对已经匹配的树结构元素进行进一步的匹配。例如，有如下HTML结构和CSS代码：


<dl>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
<dt>标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
<dd>列表3</dd>
</dl>
dl > :nth-child(even of dd) {
color: red;
font-weight: bold;
}​​


表示匹配所有子元素集合中的偶数项的 <dd> 元素。

顺便提一下，选择器:nth-child(even of dd)和选择器dd:nth-child(even)是不一样的，even关键字是相对整个子元素而言的，而不是仅相对于 <dd> 元素。

另外，of后面的选择器除了标签选择器，类名选择器、属性选择器都是支持的，可以让子元素的匹配更加精准可控。可惜这个特性目前仅被Safari浏览器支持，Chrome等浏览器暂时没有支持的迹象，因此，大家先了解即可。

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

#博客更新
NestJS 学习之优秀项目分析与最佳实践
这篇写的超用心！一不小心一天就过去了。

AI 生成的摘要：这篇文章是关于NestJS学习的优秀项目分析与最佳实践。文章介绍了NestJS的基本概念和模块，并通过分析优秀项目和代码示例来帮助读者更好地理解和应用NestJS。文章还解释了常见的后端术语和目录结构，以及模块、服务、控制器等的作用和用途。通过阅读这篇文章，读者可以更全面地了解NestJS的架构和设计理念，提高后端开发的效率和自信。

Hexo博客链接🔗 https://ysx.cosine.ren/nest-learn-project-1
xLog链接🔗 https://x.cosine.ren/nest-learn-project-1
RSS订阅 📢 https://x.cosine.ren/feed/xml