盘点那些点赞高达 6000，收藏过万的文章，前端居多，看完后保证有很大收获，收藏这一篇就够了，2022 继续学习。

盘点掘金 2021 点赞高达 6000，收藏过万的文章

前言 本文承接上文 如何测试驱动开发 React 组件？，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试异步组件。

[TDD] 如何测试 React 异步组件？

时光飞逝，岁月如梭，转眼来到 2021 年底，这一年少了些理性，多了点感性，少了些自由，多了一份责任，这一年视乎没做什么事情，但又过得非常充实，最欣慰的是回家有个人等待着我的拥抱，最快乐的是...

9 年小厂老前端的年终总结

什么是TDD（Test-driven development），就是测试驱动开发，是敏捷开发中的一项核心实践和技和技术。

如何测试驱动开发 React 组件？

我们知道，想要搭建一个网站往往需要一下几个步骤： 域名注册 服务器购买、 数据库购买或部署、网站设计、 网站开发、网站备案 网站上线、本文将介绍如何用最小的成本和最短时间开发部署一个动态网站。

如何白嫖一个动态网站

在网站迁移过程中，301 重定向是至关重要的一步。它不仅可以确保用户访问旧域名时自动跳转到新域名，还能将旧域名的 SEO 权重传递到新域名，避免流量损失和搜索引擎排名下降。

网站迁移后，如何通过 Cloudflare 实现 301 重定向？

如何使用 Playwright 来模拟 API 请求和修改 API 响应

10 张图，说透 Kubernetes 架构和数据流

如何将 docker 单节点部署应用改成集群部署？

使用 Next.js 复刻【汉语新解】应用

提示词工程天花板【汉语新解】- 原理浅析

playwright 介绍 Playwright 是一个端到端（E2E）测试框架， 它可在所有现代浏览器中运行功能强大的测试和自动化。支持多种编程语言 API， 包括 JavaScript

【质量保障】Playwright 使用入门

【质量保障】E2E 中的 mock api 测试

前言 之前有期视频介绍过，在 Vercel 上可以免费部署很多应用，包括 Next.js、Nuxt、Remix。除了 Node.js 甚至还支持其他语言，包括 Go、 Python、Ruby

将 Node 应用 Express.js 部署到 Vercel

Hello 大家好，我是一名 90 后、工作 10年+ 的前端程序员。 其实已经离职 2 周多了，本以为这只是一个短暂的过渡期，但是没想到会这么长，甚至会长时间。在 BOSS 上沟通了 250+

35岁，我失业了

失业一个月，聊聊被裁后这一个月，我找工作的情况，这个月内总共打招呼了 385 家，投递了 56 家，实际应该不止 56，因为我把简历写在了自己的博客中。约面 5 家，最后只通过了 1 家。

35 岁，被裁后，一个月找工作现状

AI 爆发，技术写作还有意义吗？ 2023 年，人工智能爆发，ChatGPT 的出现对许多行业产生了巨大的冲击。对我来说，原本以为写博客、建立个人知识库等学习方式会变得可有可无，但实际情况是，写作变得

普通程序员要如何技术写作变现？

Shadcn UI 现代 UI 组件库 前言 不知道大家是否使用过 Shadcn UI，它在Github 上拥有了 35k star，它与大多数 UI 组件库(如 Ant desgin 和 Chakr

Shadcn UI 现代 UI 组件库

上周 Next.js 14 发布了，该版本相较于 13，没有任何 API 变更，主要更新点是 Turbopack 带来了大幅的性能提升以及 Server Actions 功能进入稳定版本。

大家都在嘲笑 Next.js 14

本文视频地址 前言 大家好，我是小马。 去年，我开发了一款微信排版编辑器 MDX Notes。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功

基于 Tauri， 我写了一个 Markdown 桌面 App

Vercel 是一个流行的 React.js、Next.js 等前端应用部署平台，我们可以一键将 Github 上的应用部署上线，但它缺少一个重要部分：数据库。不过现在已经有了四种新数据库可供选择。

Vercel 推出数据库存储服务，助力全栈开发

随着 AI 的不断发展，我们前端工程师也可以开发出一个智能语音机器人，下面是我开发的一个简单示例，大家可以访问这个视频地址查看效果。

使用 Web Speech API 和 ChatGPT API 开发一个智能语音机器人

在过去的一年里，我们在网页设计领域看到了很多令人兴奋的发展。而在这篇文章中，我们来预测下 2023 年的设计趋势。本文附有所有例子的链接。准备好了吗？让我们来看看!

2023 web 设计趋势

本文介绍了 openai 的 api 使用方法，以及如何使用 openai 的 playground 生成需要的 messages 信息。并且通过一个 Next.js 实战例子，结合 ChatGPT

如何使用 ChatGPT 3.5 API 创建自己的智能应用？

最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本，openai-translator， 短时间内 star 冲到了 9.7k， 功能上除了支持翻译外，还支持润色和总结功能。

基于 ChatGPT API 的划词翻译浏览器脚本实现

ChatGPT 大家应该都已经用了一段时间了，功能非常强大，作为开发人员，我用它写文档、写日报、润色 OKR，知识搜索等等，它给我带来了极大的帮助，但我在使用过程中最大的痛点就是网络。

三分钟 ChatGPT 接入钉钉机器人

上周微信公众号推出了一种新的形式，类似小红书这样子，群里有小伙伴调侃，是否是小红书的产品经理跳槽到微信了，那作为一个公众号运营者，我也想利用这一点。那么如何快速设计出好看的小红书封面，便成了我的目标。

油猴脚本去水印实现原理

推荐 6 款贼好用的油猴脚本，其中有 4 个是笔者开发的，看完了文章，要是对这几款脚本感兴趣的话，赶紧去试试看，且用且珍惜！

【对话ChatGPT】如何提高网站的访问量？

上在上一期视频中，我介绍了 Tailwindcss 的优点，很多小伙伴也在评论中谈论了自己的看法。 今天这期视频我们就来实战一下，如何使用 Tailwindcss 写官网？那么一起来看看吧

如何使用 Tailwind CSS 写官网？

本文主要介绍了 ONLYOFFICE，以及使用 docker 在 Linux 部署ONLYOFFICE，并且使用 Nodejs 对接的过程。

如何使用 ONLY OFFICE 在你的 WEB 中集成 OFFICE 文档编辑功能

前几天，群里有有伙伴问，在Next.js中，该使用哪个UI框架？我强烈推荐 tailwindcss， 因为你不再需要写 CSS 代码了，这 2 天还录制了一个视频，包括录屏、录音、剪辑、动画等，花费蛮多时间，在视频最后，借一个 demo 给大家拜年了，祝您在新的一年中，事业蒸蒸日上，幸福美满，健康长久。

用 TailwindCSS 打造美好祝福：给大家送上新年祝福的 demo

Hello ，大家好，我是小马，一名小厂前端工程师，普通的不能再普通的小前端，本来不想写年终总结了，因为一年下来，也没啥变化。

2022 年终总结，知识沉淀这一年

习惯使用 markdown 写作的朋友，肯定会有自己的图床，七牛云的对象存储对于个人用户每月免费 10GB，可谓是白嫖的上上之选，只需要注册后，绑定一个域名就可以使用了。

用 React 开发了一款 Chrome 插件【七牛云图床】

本月初，ChatGPT 以惊人的速度问世，在技术圈中引起了广泛讨论。在 GitHub 上近期还诞生了多个 ChatGPT 相关的开源项目，数量之多令人瞠目结舌。

ChatGPT 以及相关开源项目体验

本文例举创建 react 应用的常见 7 种方式，首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra) 项目是零配置。

创建 React 应用的 7 种方式，你用过几种？

阅读本文，你将收获： 学会使用 Monaco Editor 开发多文件编辑器；学会使用 mdx 在线编译 ；实现剪切板的劫持；学会使用云函数和云数据写接口；

Next.js 全栈开发微信公众号 Markdown 排版编辑器

有时候我们使用了useMemo useCallback 来优化性能，这些函数与外围的 state 形成闭包，导致缓存函数中获取到的 state 不是最新的值，这就是闭包陷阱。

如何避免 React hooks 闭包陷阱？

Git 是每个程序员的必备技能，良好的 Git 提交习惯，不但可以让代码阅读更清晰，还可以提高我们的我们的工作效率，接下来我将分享我在工作中关于 Git 的使用经验，或许对你有帮助。

我在工作中使用 git 的几个技巧

本文，我们从零开始，使用 Next.js 和 pnpm 搭建了一个组件库文档，主要使用 Next.js 动态导入功能解决了开发服务缓慢的问题，使用 Next.js 的 SSG 模式来生成静态文档。

使用 Next.js 搭建 Monorepo 组件库文档

今天我们就聊一聊权限系统的设计与实现，要在网站中实现复杂的权限管理对应新手来说，这可能会是比较困难的，但权限系统是软件中不可或缺的部分，我们只要掌握一个套路，就会变得非常简单，一起来看看吧！

Next.js 应用实现权限管理

Next.js 提供了 CSR、SSR、SSG、ISR、 Streaming 这么多渲染方式，本文就从渲染方式方面来讲解，让我们可以更好地理解 Next.js 以及使用 Next.js。

理解 Next.js 中的 CSR、SSR、SSG、ISR 以及 Streaming

上周发布了 Next.js 的一个全新的版本 13，它带来了全新的理念（server component），作为一名 Next.js 的爱好者，我们有必要重新学习和认识下它。

你好，Next.js 13

在本文中我们给 Next.js 应用配置了 vitest 和 React-testing-library 测试环境，这套配置同样适用于其他 react 项目，只需要依照步骤配置即可。

使用 Vitest 和 React Testing Library 给 Next.js 应用单元测试

在上一篇文章中，我们使用 prisma 和 Next.js，创建了一个视频网站，本文将继续开发视频网站，实现邮箱登录、 Github 授权登录，以及密码登录。

使用 NextAuth.js 给 Next.js 应用添加鉴权与认证

本文将以实现一个视频网站为例，介绍 Next.js 和 Prisma 开发的全过程，prisma 对于 Next.js 来说，可谓是如虎添翼，有了它们，我们前端工程师轻松步入了全栈开发。

使用 Next.js、 Prisma 和 PostgreSQL 全栈开发视频网站

今天我就得带大家来白嫖一下 Notion 数据库，让我们的个人应用轻松上线，本文记录了利用 Next.js 和 Notion API 编写了一个前端刷题网站的全过程。

使用 Notion 数据库进行 Next.js 应用全栈开发

本文主要介绍了使用 strapi 和 Next.js 实现了一个简易的微博，我们不必写后端，只需要后台配置便可以创建 api 接口，通过本文，我相信你对 strapi 有了一定了解。

使用 Strapi 和 Next.js 开发一个简易微博

在本文中，我将分享我的方法，通过掘金 API 打造个性博客，只要在掘金发表文章，就会自动同步到自己的博客中。

使用 Next.js 和掘金 API 打造个性博客

本文基于我之前写的一篇文章《Markdown 写 PPT 是如何实现的？》，我们要在此之上实现视频录制的功能。

码上掘金不仅可以写 PPT，还可以录视频

CSDN 的百度搜索权重很高，比如我们搜索一个关键词， 输入`react 性能优化`，第一个就是 CSDN 的链接，打开 CSDN 的链接，里面有很多广告，我们可以通过油猴脚本来净化页面。

使用油猴脚本净化 CSDN

本文简单介绍了油猴脚本开发步骤以及实现，结合 webpack 让脚本实现工程化，并且配合 github action，让脚本实现自动化构建和部署。

油猴脚本开发教程

前言 iPad 有个口号，就是“买前生产力，买后爱奇艺”，使用 iPad，配合 Procreate 来作画体验还可以， 如果你想让你的 iPad 可以编程，你却不得不为之花费时间和精力。

iPad 编程生产力

自从我在稀土掘金社区技术更文以来，每天非常关注文章点赞评论消息，而我常使用的是聊天软件是钉钉，所以我在想，是否可以利用云函数对接掘金，实现一个钉钉机器人，把我的掘金消息自动推送给我。

用云函数开发掘金钉钉机器人

一个非常好用的工具 slidev, 可以使用 markdown 来制作演示文稿，其他类似的工具还有 Nodeppt、 marp 等，那么这类工具是如何实现的？

Markdown 写 PPT 是如何实现的？

在开发过程中，我们经常需要用到代码对比，对比下代码是否一致，有哪些改动，方便我们可以查看问题，今天我们就来说实现下，其实很简单。

开发一个在线代码对比工具

前段时间开发了一个面试刷题小程序——面试狗，主要使用了 uniapp + unicloud 云开发实现，今天我们来开发一个与之对应的 PC 版面试刷题网站。

【实战】Next.js + 云函数开发一个面试刷题网站

在 web 开发中，少不了用户系统，开发者需要开发注册登录这些重复的功能，而对于用户来说，要要注册才可以使用，往往会不愿意，因为我们有太多的账号和密码了，而现在可以使用小程序来实现扫码登录。

 用小程序来实现扫码登录

大多情况下，我们不必上传自己的图标，只需要在 iconfont.cn 便捷的搜索，就可以将图标加入到自己的项目图标库中，但最近工作中却遇到了比较严重的问题。

Iconfont 还是不能上传，如何维护你的 Icon？

所以我写了一个油猴脚本，可以在 iconfont.cn 上直接复制 React component 代码，本文讲述改脚本的实现原理。

【油猴脚本】在 Iconfont 上直接复制 React component 代码

许多开发人员花费了大量时间优化网页性能，比如优化 js、css、减少http 请求等等，但减小图片大小产生的优化比其他所有领域加起来影响更大。

30+ 图片压缩工具集合，包含在线压缩和CLI工具

「时光不负，创作不停，本文正在参加2022 年中总结征文大赛」 哈喽，大家好， 我是小马，2022 年不知不觉已经过半了，看到朋友圈关于年中总结的文章，一时间不知道该如何写起

2022 在微笑中成长

之前写过一篇文章，《将 React 应用迁移至 Vite》介绍了 Vite 的优势，并且和 webpack 做对比，但 webpack5 有个很重要的功能，就是模块联邦，那么什么是模块联邦？

Vite 也可以模块联邦

相信很多朋友都玩过这款小游戏，叫成语秀才，这款小游戏开发起来还是比较困难的，首先要有一份海量的题库。。。文末有源码。

《成语小秀才》部署教程

Vite 充分利用了浏览器的加载机制和缓存机制等，大大提示了研发效率，vite 虽然快，但不是所有的项目react 项目都可以迁移成功

将 React 应用迁移至 Vite

本文讲述了我在准备团队内容分享的小技巧，我认为最重要的就是结合公司实际来做分享修改，无论主题也好文章内容也罢，虽然文章是别人写的，但要经过自己的思考和消化，变成自己的知识，这样我们才可以快速成长！

如何快速在团队内做一次技术分享？

前段时间在掘金 app 多了一个推广中心，分享课程链接，若有其他用户从你分享的链接购买，你就可以获得佣金，本篇介绍下全民分销功能实现原理。

Uniapp 实现全民分销功能

在 web 应用中，模拟编辑器的输入效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，其实使用的是 web 动画模拟打字机效果，本文将和大家探讨打字机效果的实现方式以及应用。

打字机效果的实现与应用

这两天公司一位妹子问我，“我这边调试的时候本地显示没问题，到手机端就有问题，该怎么办呢？” 测试环境没问题到线上就有问题了？对此我也很纳闷。

前端妹子问我 position fixed  失效问题该如何解决？

我写了一个微信排版编辑器，使用 MDX，可自定义组件、样式、生成二维码、代码 diff 高亮，可导出 markdown 和 PDF。

微信排版工具新选择

本文介绍了生成缩略图的方式，包含客户端生成，和服务端生成，并简要分析了阿里云、腾讯云和 vercel 生成浏览器截图的方式。

实现一个 Code Pen：（六）云函数生成网页缩略图

前段时间掘金上线了一个新功能 Code pen，可以在线写代码，笔者对这种在线实时编辑的功能充满了好奇，所以打算开发一个简易的 Code pen。

实现一个 Code Pen：（一）项目初始化

Monaco Editor 是 VS Code 中使用的开源代码编辑器， 拥有代码高亮和代码自动补全的功能，本文介绍 Monaco Editor 的加载方式和 React 组件封装

实现一个 Code Pen：（二）在 Next.js 中使用 Monaco Editor

在上文中，我们使用 monaco-editor 结合 Next.js，打造了编辑器的功能，在本文中，我们将继续优化 monaco-editor， 使它拥有代码格式化的功能。

实现一个 Code Pen：（三）10 行代码实现代码格式化

前面的文章中，我们配置好了编辑器，实现了 css、html、js 的编辑，现在我们需要做代码实时运行的功能了，并且可以直接写 less、scss、JavaScript、typescript。

实现一个 Code Pen：（四）浏览器编译代码

本篇主要介绍如何使用 uniapp 中的云函数和云数据库，并且通过云函数 URL 化，来给外部应用访问。

实现一个 Code Pen：（五）白嫖云数据库

通常我们在开发博客网站或者技术社区（类似掘金）这类网站的时候，就会有需求“对代码进行语法高亮”，本文主要记录笔者在开发的时候遇到的问题以及解决方案。

使用 Prism.js 对代码进行语法高亮

在 webpack 5 中推出了 experiments 配置，目的是为了给用户赋能去开启并试用一些实验的特性。Lazy Compilation 是只有在用户访问时才编译。

在 Webpack 5 中开启懒编译（Lazy Compilation）

我们的博客网站有时候 404 页面比较普通，我们可以通过SVG 加动画来实现一个有个性的页面。

SVG + 动画 实现一个有个性的404页面

使用 phaser3 从零实现一个战疫小游戏

本文主要讲述如何使用 nodejs 爬虫，以及如何用nodejs 下载图片。为什么要下载这么多图片呢？ 前几天使用 uniapp + uniCloud 免费部署了一个壁纸小程序。

我用 nodejs 爬了一万多张小姐姐壁纸

上周 react 官网 发布了react@rc 版本，该版本是候选版本(Release Candidate)，这意味API已经基本稳定，跟最终版本不会有太大差别，官网也发布博客《如何升级到 react18 RC 版本》，鼓励大家尝试升级，所以我们可以在项目组中使用了！下面内容来自是官方文档的翻译。

如何升级到 React 18发布候选版 

在本文中，我将介绍如何在 react 项目中使用 react-three-fiber 创建的一个3D 软件程序，配置3D 参数(如 Blender 或 Maya ) 。在本文结束时，您将能够在您的网站上渲染一个3D模型 (gltf / glb)。

如何使用 react 和 three.js 在网站渲染自己的3D模型

哈喽，大家好，我是小马，这两天在研究文本转音的功能，有时候担心自己的普通话不标准，比方说要录制一个视频，即兴讲可能会卡壳，这个时候我们就可以先准备好文本，然后再利用人工智能来生成音频，下面就分享下我的研究成果吧！

文本转语音如此简单

VS code 使用的代码编辑器

我们在上网的时候经常会看到一些优秀的博客顶部有个进度条，这个进度条有助于读者衡量阅读进度，我认为这个功能可以带来良好的用户体验，所以，应该将其添加到我个人博客上的文章中。

使用 React 和 Tailwind 创建阅读进度条

我们前端工程师也可以做设计了，日常我需要为博客首图设计和公众号设计首图，下面分享下我的设计方法和技巧。

使用免费插画资源网站设计公众号首图

MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到内容当中。

MDX 让 Markdown 步入组件时代

本文推荐 HTML 转为 markdown 的工具和实现方式，并找到了一个快捷技巧，收藏等于学会。

HTML 转 Markdown 如此简单

在本文中，我将对比 Next.js 和 Remix 的一些重要特性，来帮助您选择最佳的React 服务端渲染框架。

Remix 对比 Next.js ：一文深度解析

React PDF 是一个使用 React 创建 PDF 文件的工具，支持在浏览器、移动设备和服务器上创建PDF文件。

使用 react-pdf 打造在线简历生成器

前两天我准备用 create-react-app 创建一个新项目，然后遇到了一个问题，涉及到 npx

一个 create-react-app v5 的问题

首先在“知乎” “微信” 等平台搜索“土味情话”，然后利用抓包工具将一些回答都保存到一个 JSON 中。然后利用随机数就可以随机生成了。

免费部署一个“土味情话”生成网站

转眼又是到了2月14日，今天不单单是情人节，我做了一个JS相册，并嵌入大屏了百度首页中，偷偷给对象装个油猴脚本，百度都会帮你告白。

情人节，让百度首页帮你告白

现在大部分网站也加入了暗黑模式，包括 Tailwindcss、antd design 等都支持了暗黑模式，因此我们的网站也要适配系统皮肤。

使用 React hooks 监听系统的暗黑模式

为什么要写这个脚本 最近开了个前端公众号，需要推送一些优质的文章，但由于时间的关系，原创内容太少，常规的做法是转载一些优秀的文章到自己的公众号。

[油猴脚本]文章拷贝助手，文章一键拷贝到微信公众平台

Tauri 是一个为所有主流桌面平台构建小型、快速二进制文件的框架。开发人员可以集成任何编译成 HTML、 JS 和 CSS 的前端框架来构建他们的用户界面。

初步尝试 tauri，并且与 electron.js 对比 

老板买了一个抽奖程序，我使用 react 来实现一版与公司年会一模一样的功能，并且还可以设置内定名额。

年会没中奖，老板买了一个抽奖程序

本文承接上文 如何测试 React 异步组件？，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试路由系统。

如何测试 React 路由 ？

前言 2016年起，低代码概念开始在国内兴起，当年该行业总共有 10 起融资事件，之后低代码行业融资笔数整体呈上升趋势，并在2020年增长至14起，其中亿元以上融资有13起。

使用 React-DnD 打造简易低代码平台

前言 https://beta.reactjs.org React 的新的文档已经 完成了 70 % 并且呼吁社区进行翻译工作。 新的文档采用了全新的架构 next.js + Tailwind CSS

React 新的文档用到了哪些技术？

“工欲善其事，必先利其器！” vscode 作为前端开发的重要工具，其插件能大幅提升战斗力，精心收集12+插件，总有几款你还未曾拥有。

盘点那些好玩有趣的 VSCODE 插件

esbuild 是一个非常快的 Javascript 打包工具，本文结合 react 对 esbuid 这个打包工具进行了简单使用。

使用 esbuild 来打包一个 React 库

TailwindCSS 发布了 3.0， 功能也越来越好用，那么是否有与之相关的组件库呢 ？本文是我将推荐我个人认为比较好用的资源。

TailwindCSS 资源推荐

我的新年 Flag ，就是掘金等级到达 V4，而对于绝大多数读者来说，新年 Flag 中是否有“学习”这一项呢，对于我来说，我也是，于是就有萌生一个想法，我想统计出掘金的年度高赞文章。

所有文章

盘点掘金 2021 点赞高达 6000，收藏过万的文章

[TDD] 如何测试 React 异步组件？

9 年小厂老前端的年终总结

如何测试驱动开发 React 组件？

如何白嫖一个动态网站