前端工具箱

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

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

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

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

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

网页开发中有一些隐私数据不能明文展示或者存储，比如用户个人信息等。这个时候就需要对这些敏感信息进行加密解密处理，前端中比较常见使用到的是 crypto-js 这一加密库和 AES 加密算法

在团队协作开发的项目中，清晰的 Git 提交信息对于代码维护有很大的帮助。规范化的提交信息易于追踪更改，结合自动化工具可以自动生成版本更新差异文档。使用 commitlint 规范和校验 Git 提交

patch-package 允许我们在不修改依赖包源码的情况下，为依赖包打补丁，修复其中的问题。在以下场景中特别有用：修复漏洞、适配兼容性、自定义修改。

本文介绍如何 Mock 接口请求，使得前端在无法调用后端服务的场景时也能简易方便快速的 Mock 接口调用和接口数据进行开发，并且无侵入修改代码。也可以使用在 Mock 特定接口数据排查问题的场景

国际化项目中处理时间时，可能会遇到需要处理时区的场景，比如切换不同时区，显示时区列表选择，获取时区对应的时间等场景。那么在浏览器中应该如何处理这些场景，获得时区名称的数据呢。

当我们使用 Docker 部署 Nginx 时，可能会遇到需要根据不同环境，配置不同端口或者反向代理地址的场景。那么 Docker 的环境变量是否能够传递给 Nginx 配置呢？

在具体开发中，前后端联调一直都是比较麻烦的事情，后端需要维护接口文档，前端需要根据接口文档编写网络请求代码和类型申明，接口变更时需要修改对应代码。 目前有不少工具都能简化这一流程，根据后端代码直接生成

在日常开发中，经常会需要比较文件差异或者数据差异。可以使用 Linux/Unix 系统自带的 diff 命令快速比较文件差异。

Playwright 是近年新推出的 E2E 测试工具，相比 Cypress 的优势在于更加简单直观，提供 Codegen 生成测试代码等高效的工具简化测试流程。

服务端渲染中使用模版引擎组织页面常见的操作，Handlebars 是 Node.js 生态中流行的模版引擎之一。除了在服务端渲染将模版转换成页面返回浏览器以外，Handlebars 也支持将模版预编译

当我们需要调试一个网站的网络请求时，可以使用非常方便的 Chrome Devtools 中的网络请求面板看到每一个网络请求。那么我们的后端项目（比如 Node.js）中的网络请求是否也能使用类似的工具

用户登录一般都是使用账号密码登录，但是使用密码登录有一些问题一直无法解决，比如安全问题和不同设备密码同步以及需要借助密码管理器帮助管理不同密码。于是目前业界提出了 Passkeys 的标准

开发完成后都需要对项目进行测试，除了人工根据测试用例测试外，我们也可以使用一些自动化测试工具来完成测试任务，可以解放人工，也可以自动化、重复执行。本文介绍该类工具中 cypress 的安装

本文介绍一个 Google 开源的工具 zx ，可以让我们更方便快速高效的使用 Node.js 编写脚本工具。

常见的前端项目最后都是或者会打包生成 HTML 和静态资源文件，可以独立部署到任意静态资源服务器之后简单配置就能访问。本文介绍一些常见的快速部署前端项目的几种方式（或者说是服务）