Shadcn ui 是最近比较火的一个 React 组件库,官方介绍其并非组件库,因为它并非基于 npm package 的形式来维护,而是通过 nodejs 命令支持将组件源码直接复制到你的项目中。
本篇文章从使用到分析 shadcn cli 命令源码的实现,来深入了解这个组件库内部的一些原理。
Shadcn ui 是最近比较火的一个 React 组件库,官方介绍其并非组件库,因为它并非基于 npm package 的形式来维护,而是通过 nodejs 命令支持将组件源码直接复制到你的项目中。
本篇文章从使用到分析 shadcn cli 命令源码的实现,来深入了解这个组件库内部的一些原理。
TypeScript 全局类型定义或者覆盖在日常开发中经常使用,本文主要介绍几种常见的方式。
当我们说到图片懒加载、页面数据的滚动加载这些体验设计时,一般能够想到基于scroll
事件,通过getBoundingClientRect
方法获取元素相对于视口偏移量top
,来判断元素是否可见,demo 如下
这种实现方式较为繁琐,但是现在我们有了IntersectionObserver
API,可以大大简化这些通过计算元素偏移量来判断可视性的逻辑。
无损压缩目前使用最广泛的图像格式是 PNG,但是近几年也出现了许多新的压缩算法标准,以期望替代 PNG,提供更好的图像压缩效果。
说完了有损压缩和无损压缩的图像格式,来整理下 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
,这篇文章就来简单探讨一下这个非常新的跨域请求的特性。
前端时间实现了一个用canvas
往模板图片绘制数据的功能点,遇到了一个跨域引起canvas
污染的问题,仔细发掘下去发现不少的技术点。