前端大图切分加载
前言前段时间面试时被问到了一张10M的大图如何能快速加载，当时的回答不是很好，现在来重新研究一下。 本文使用的哭包和主要版本为： 技术调研加载大图，图像10M以上哪怕几十M任何的压缩手段都不在考虑范围内了，而是想办法把图片分割为小图，并行请求后再加载显示。 而把图片切分为小图，可以使用sharp这个库包实现，可以通过 123456789const sharp = require('sharp');sharp(imagePath) .extract({ left: x , top: y, width: tileWidth, height: tileHeight ...
mediaSource使用记录
导读看到网上有采用MediaSource实践视频缓冲区的，我也抱着试一试的态度实践了一下，但是却有许多过不去的坎，特此记录。 首先，可以从MDN官网看到介绍，其可以附着在媒体元素上控制播放和资源加载。 例如，可以和<video>搭配： 123456<video></video><script> const video = document.getElementByTag("video"); const mediaSource = new MediaSource() video.src =...
使用nestjs启动nextjs
导读最近一直使用Nest.js和Next.js做项目开发，这两款都是非常优秀的开源框架，且对于主要从事前端开发工作的我来说，由于其都基于npm生态，使用起来也比其他语言容易得多。Nextjs其主要是一款全栈的SSR的框架，而Nest.js则是纯后端的框架。对于Next.js，官方告诉我们可以在/api路径下自定义常规的api接口，但是由于middleware仅仅支持Edge Runtime这一运行时，很多功能上比较受限，加之/api路径和文件即路由的开发范式只适合简单接口的开发，并不适合大多数情况的接口开发。因此，我会使用Nest.jsl来完成后端接口的开发。然而，新的问题又随之出现。如果分开项目开发，且都采用TypeScript以获得完善的类型提示，就会导致两侧都需要定义相同但又不同的ts定义，十分地麻烦。这时，笔者我想到，Nest.js和Next.js本质上都是一个node创建的服务器，不如将Next.js集成到Nest.js当中，让Nest.js提供给Next.js...
bytemd插件开发--将链接渲染为卡片模式
导读**笔者经常使用语雀这一强大的在线文档编辑网站，在编辑时选择将超链接渲染为卡片的样式。 ...
nestjs使用redis实现ip限流
导读如果使用nestjs开发接口并部署之后，我们通常需要考虑到接口是否会被恶意盗刷消耗过多的资源，一个简单的方式就是限制在单位时间内的访问次数。 本文使用的库包版本如下： 库名 版本号 @nestjs/core 10.0.0 @nestjs/common 10.0.0 @nestjs/schedule 4.1.2 ioredis 5.4.2 本文的主要工作环境基于****Macbook Pro M1 MacOS 14.6.1。 新建nestjs 项目1nest new nestjs-with-ip-limit -g nestjs中的守卫Guardnestjs 提供了一种可以是否拦截请求的方式，守卫（Guard），我们可以通过实现CanActive接口来完成，详细解释参考官方链接。 自定义的一个ip.guard.ts文件，用于最终实现我们的ip请求拦截。 1234567891011121314//ip.guard.tsimport { Injectable, CanActivate,...
Next搭建组件库文档（二）- 支持markdown动态渲染
导读本文所述依赖如下的库包及其版本 包名 版本号 next 14.2.15 react 18.2.0 react-dom 18.2.0 @mdx-js/lodaer 3.1.0 @mdx-js/react 3.1.0 @next/mdx 15.0.2 @types/mdx 2.0.13 remark-gfm 4 remark-frontmatter 5.0.0 rehype-highlight 7.0.1 next-mdx-remote 5.0.0 本文的开发环境****基于 Macbook Pro M1 MacOS 14.6.1。 本地渲染支持由于我们的文档除了从packages/**加载的动态文档，还有next.js内部固定的文档。让我们先实现next.js内部的markdown解析和mdx的支持。 安装依赖与本地配置参考官方网站的配置 pnpm add @next/mdx @mdx-js/loader @mdx-js/react...
Next.js搭建组件库文档（一）项目的初始化配置
导读本文基于以下包和版本配置： 包名 版本号 next 14.2.15 react 18.2.0 react-dom 18.2.0 tailwindcss 3.4.1 @changesets/cli 2.27.9 @commitlint/cli 19.5.0 @commitlint/config-conventional 19.5.0 husky 9.1.6 typescript 5.4.4 本文介绍的开发环境是****Macbook Pro M1 MacOS 14.6.1。 项目启动与打包验证创建项目创建项目，使用next 14.2.15 1npx [email protected] 使用app router的模式 本地运行确保你使用了pnpm作为包管理工具，如果没有安装，请使用 npm i -g pnpm安装。 **本地运行项目，使用 **pnpm...
nextjs 使用react-hook-form和zod实现登录表单验证和提交
背景说明nextjs 使用中不可避免地会碰到使用表单，尤其是登录表单。而对于提交表单来说要关注的几个要素就是数据收集、数据校验和数据提交（涉及异步操作）。本文将围绕这几个要素，并通过zod和react-hook-form提供的能力实现登录表单。 本文所述依赖如下的库包及其版本 包名 版本号 next 14.2.15 react 18.2.0 react-dom 18.2.0 zod 3.24.1 react-hook-form 7.54.2 @hookform/resolvers 3.9.1 本文的开发环境基于 Macbook Pro M1 MacOS 14.6.1。 zod 简单上手zod 提供了简单的表单校验器，且支持typescript,并弥补了typescrip对运行时代码无法校验的不足，通过一次定义，不仅可以通过safeParse方法验证表单数据，导出错误，还可以通过z.infer推断表单模型的typescript类型。下载 1pnpm add zod 以邮箱登录表单为例 123456export const...