距离上一篇介绍shadcn文章已过去一年之久啦😅。在这一年多的时间内，随着AI Generate Web技术的快速发展，shadcn凭借其 AI 友好的组件开发模式，生态发展得极为庞大。shadcn本身也经过了一些架构调整，新增了一些特性，比如add命令支持第三方registry以及支持build命名等。本篇在解析shadcn CLI 的基础上详细介绍一下如何加入shadcn组件生态。

Shadcn ui 是最近比较火的一个 React 组件库，官方介绍其并非组件库，因为它并非基于 npm package 的形式来维护，而是通过 nodejs 命令支持将组件源码直接复制到你的项目中。

本篇文章从使用到分析 shadcn cli 命令源码的实现，来深入了解这个组件库内部的一些原理。

TypeScript 全局类型定义或者覆盖在日常开发中经常使用，本文主要介绍几种常见的方式。

当我们说到图片懒加载、页面数据的滚动加载这些体验设计时，一般能够想到基于scroll事件，通过getBoundingClientRect方法获取元素相对于视口偏移量top，来判断元素是否可见，demo 如下

这种实现方式较为繁琐，但是现在我们有了IntersectionObserver API，可以大大简化这些通过计算元素偏移量来判断可视性的逻辑。

无损压缩​

无损压缩目前使用最广泛的图像格式是 PNG，但是近几年也出现了许多新的压缩算法标准，以期望替代 PNG，提供更好的图像压缩效果。

nodejs 图像处理库​

说完了有损压缩和无损压缩的图像格式，来整理下 nodejs 方面图像处理相关的库。

背景​

根据 httpachive 的统计数据，在统计的 5,431,533 个 PC 页面中:

• 图像流量平均占页面的 44.5%（1032.0 KB -> 2317.8 KB）

• 请求数量平均占页面的 33%（25 -> 76）

所以图像数据在网站内容部分占比巨大，使用合适的图像格式能有效降低网站的流量带宽，同时降低网络传输延时，提升用户体验。

有损压缩​

有损压缩目前使用最广泛的是 JPEG 压缩算法和文件格式，下面来整理一下三种有损压缩格式。

背景​

这两天又遇到一个图片问题，具体就是在 HTTPS 协议网页请求完的 HTTP 图片会被限制下载，这...，web 静态资源的问题还挺多坑。

背景​

上一篇 blog 提到了跨域访问图像资源引起的 canvas 污染的问题，其实当时我在查看跨域请求到的图像资源时，还无意中发现了一个新的 HTTP 响应头Access-Control-Allow-Private-Network，这篇文章就来简单探讨一下这个非常新的跨域请求的特性。