我写了一个微信排版编辑器，使用 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 中是否有“学习”这一项呢，对于我来说，我也是，于是就有萌生一个想法，我想统计出掘金的年度高赞文章。

如何盘点出掘金的年度高赞文章？

React 进阶 、Vue 转 React、优质的 React 开源项目，React 源码解读、react hooks 总结。

盘点掘金 2021 高赞 React 文章

vue 接口封装、vue 面试题、vue 源码解读、vue 组件通信、vue性能优化技巧、vue 工程搭建。

盘点掘金 2021 高赞 Vue 文章

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

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

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

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

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

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

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

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

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

如何白嫖一个动态网站

在本文中，我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载静态资源，如何让 React 程序可以直接调用 Node API。

使用 React 和 NodeJS 创建一个全栈项目

CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。本篇将通过实现 VS Code 版 CNode， 来带领大家一起熟悉 VSCode Webview。

一起来写 VS Code 插件：VS Code 版 CNode 已上线

本文将通过实现一个翻译插件实例的方式来熟悉 VS Code 插件

一起来写 VS Code 插件：实现一个翻译插件

VS Code 是前端开发者最佳的开发工具，你在开发中是否疲倦了从一个文件拷贝来新建一个文件呢？那么如何发布一个 VS Code 插件？

一起来写 VS Code 插件:为你的团队提供常用代码片段

对于程序员来说，每天除了写代码，接触较多的可能是各种图表了，诸如流程图、原型图、拓扑图、UML 图以及思维导图等等，我们较为熟悉的是 ProcessOn了

用 NodeJS 开发一版在线流程图网站

最近公司需要给多个 webapp（大概20+）加上多皮肤的功能，原先默认是白色皮肤，我们先从暗黑模式入手，从而逐渐实现多皮肤功能。本篇记录下实现思路。

使用 PostCSS 插件让你的网站支持暗黑模式

这是笔者第三次重构博客应用。本文主要是笔者记录重构博客所用的知识和记录，希望以后每周或者每两周能够有一篇文章，记录和总结知识。

使用 NextJS 和 TailwindCSS 重构我的博客

最近在网上看到 Tailwind Labs的实现的[换肤视频]，决定使用 Tailwind css 实现博客列表主题换肤。

使用 CSS variables 和Tailwind css实现主题换肤

- 当处理量很大时，应该使用 useMemo - 从什么时候 useMemo 变得有用以避免额外处理，阈值在很大程度上取决于您的应用程序 - 数据在处理非常低的情况下使用 useMemo

【译】你真的应该使用useMemo吗? 让我们一起来看看

Prisma是 Node.js 和 TypeScript 的下一代 ORM。经过两年多的开发，我们很高兴分享所有 Prisma 工具已准备好投入生产！

【译】适用于Node.js和TypeScript的完整ORM —— Prisma

大家可以扫描上方二维码（也可以搜索“小程序示例”）体验下微信小程序的功能。 虽然开发的时候可以使用测试号，但为了开发上线，注册 APPID 也是必须的。 下载完成后，点击选择小程序，初次使用，先不使用云服务，点击完成，就会帮我们初始化一个简单小程序项目。 我们看到小程序的初始化…

微信小程序开发

​ 首先我们就回顾一下，我们到底是怎么告别了使用 php/jsp 做服务器端渲染，进入前后端分离的客户端渲染时代，又为什么重新回到了服务端渲染。

最新文章

微信排版工具新选择

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

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

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

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