OXXD

目录 初始化 README.md next-snippets eslint & prettier simple-git-hook & lint-staged & commi...

网页开发中存在需要获取用户是否在线的场景及用户网络状态，浏览器提供了 navigator.onLine 和 navigator.connection 可以实现这一需求。...

在上传图片时，存在需要判断图片的宽高是否符合需求的场景（如指定 Icon 尺寸）。那么前端如何判断上传图片尺寸（宽度和高度）？...

本文介绍使用 Turborepo 管理的 Monorepo 项目跨项目时如何共享代码，主要介绍外部库的打包和发布版本方式。...

本文介绍在使用 Turborepo 管理的 Monorepo 项目中如何共享代码。如何搭建和使用一个内部库...

Monorepo 开发方式对比多个项目的开发方式已经有很多优秀的最佳实践和示例、配套的工具支持。本文介绍使用 Turborepo 管理 Monorepo 项目。...

Next.js 使用本地自定义字体十分简单，只需要指定好字体文件的加载路径，然后通过 className 设置给需要自定义字体的元素即可。...

使用 Prisma 这个 ORM 删除记录时会遇到存在关联记录的情况。一般的做法是同时删除关联的记录，可以保证数据的完整、避免冗余数据。 本文介绍使用 Prisma 删除记...

Framer Motion 是一个强大的动画库，它提供了简单、强大和可扩展的 API用于创建各种类型的动画效果。 本文介绍Framer Motion 的基本使用和如何使用其...

搜索功能是网站中提供用户快速查找内容的重要功能，尤其在文档类型网站中几乎是必不可少的。本文介绍使用 FlexSearch 这个用于浏览器和服务器端（Node.js）高性能全...

这篇文章简单介绍了如何制作一个搜索组件的 UI，使用了Tailwind CSS + shadcn/ui...

在较长的页面中，使用 #id 可以快速跳转到指定 id 的段落是一个很常见的技巧。但是常见的页面一般都是由导航栏和正文组成，如果直接这样跳转可能会出现被导航栏遮挡的效果...

获取滚动距离是页面中常见的操作， 在原生 DOM 操作中一般是通过添加 scroll 事件监听可以获取到滚动位置，在 React 应用中，如何将这一部分逻辑封装成一个 ho...

使用 react-countup 组件实现数值滚动特效。基于CoumtI[.js 实现的 React 组件...

在 React 中，如果使用的是类组件可以通过 this.ref.current.state 直接获取绑定 ref 后子组件中的状态。但是函数组件无法这样直接获取子组件中的...