“工欲善其事，必先利其器！” 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 文章

从零用 JavaScript 实现一个 ReAct Agent：工具定义、系统提示词、Action 解析、流式输出和 TAO 循环，最后跑出能写多文件贪吃蛇的极简 Codex。

使用 JavaScript 从零实现一个 ReAct Agent

hello，各位做自媒体的朋友们，你们在社交平台上发布内容的时候是否会存在以下问题，

Vibe Coding 自建一个知识星球

storyboard 是 AI 剪视频的前置条件

不吹不黑。国产大模型 minimax 3.0 对比 GLM 5.1，对比小米MiMo-V2.5-Pro。 前端设计效果，同样的提示词，哪个效果比较好？aicoding

国产大模型前端设计效果对比

这套流程做的事很简单：给一段视频和一段配音，先用本地工具识别字幕，再修掉明显错字，最后把带样式的硬字幕烧进视频。需要的话，还可以从字幕里提炼封面标题，把封面插到视频开头。

我用 Codex 跑视频字幕的大致流程

现在大家都会用 AI 辅助写作，但 AI 写出来的内容有一个很明显的特征，就是特别像 Markdown 里的结构化文字。

AI 写作用哪个 Agent skill 好？

Codex token 限额之后，大家怎么办？等下一个 5 小时，还是升级 token plan？

如何在 Codex 中使用DeepSeek模型

最近把「纸笺工坊」又完善了一版，想找一些朋友帮忙体验一下。

Codex 额度又超了，找人体验我的 VibeCoding 网站

昨天刷 Hacker News，看到一条讨论挺热闹：有人做了个叫 Reasonix 的终端 coding agent，专门对接 DeepSeek API，主打 prefix cache 命中率高、长会话成本低。帖子 500 多 upvote，评论 200 多条。我顺着链接点进去看了看，也翻了翻评论区...

Reasonix：一个 DeepSeek 专用的终端 Coding Agent，值不值得试？

最近我在尝试用 Codex 做一个更好看的网页，发现一个比较实用的流程：不要一上来就让它照着某个网站直接生成页面，而是先让 GPT Image2 帮你把设计稿和素材准备好，再交给 Codex 去实现。

如何使用Codex做出更有细节的网站

最近新上线了一个网站，叫做纸笺工坊，可以快速生成手写风图片，做这个网站的目的是为了和 md2card 互补。

新上线「纸笺工坊」：把文字变成手写稿

做视频不一定要用 Premiere 、剪映等剪辑软件了，

使用 Codex 来做视频，来试试 HyperFrames

我一直在找一个前端设计能力出色的国产大模型，想在产品中代替 gemini 3 模型，今天我们来的对比 Xiaomi MiMo-V2-Pro 和 DeepSeek 专家模式，简直让我惊呆了，其他能力暂且不论，就论前端设计能力，已经超出了我的心理预期，下面开始测评。

DeepSeek 专家模式对比 Xiaomi MiMo 前端设计能力

这不是一次黑客攻击，也不是内部员工泄密。

Claude Code 把 source map 开源了？

Vibe Coding 的效率天花板，不在你写 prompt 的能力，而在你给 AI 搭建的"工作环境"。

Vibe Coding 做了2个项目后，我总结了这些实战技巧

使用 md2card 将文章转成了卡片形式

Vibe Coding 后，我是如何上线两款SaaS产品

最近我上线了我的新产品 vibe2design，然后就想——能不能自己做几个产品宣传视频？毕竟 remotion-best-practices 爆火，周安装量 89.0K。那咱就试试呗。

用 Remotion 做产品宣传视频，我走过的坑和建议

嗨大家好，我是小马,  今天想和大家聊聊一个最近让我挺兴奋的产品——Vibe Design。

这款Figma插件让设计师能够 Vibe Design

今天看了赛博禅心的公众号文章，尝试了 lovart + nano-banana 生成长图的功能，简直太好用了。并且这2天使免费使用的。

nano-banana 加 lovart 生成长图比 md2card 还好用

哈喽大家好，我是小马。今天要和大家分享 md2card 的最新功能更新，这次我们带来了两个非常实用的改进：

md2card 更新啦！组合纹理背景模式

你好，我是 小马，MD2Card 的作者。今天带来一个激动人心的更新！

MD2Card 重磅更新，推荐返现

在日常的知识整理和卡片笔记中，如何让内容更生动、更有趣？md2card 的贴纸功能，正是为此而生！

md2card 让卡片制作妙趣横生

最近网络上，ai 生成的胶囊图💊很火。

如何用豆包生成这种“胶囊图”？

如何从零构建 Deep Research Agent ？

最近经常收到一些老师和同学的反馈，希望将知识自己整理 Markdown 文档制作成美观知识卡片，并且需要打印出来方便知识巩固和记录。

如何将知识卡片导出PDF，适配A4纸打印

在 21st.dev 上找到组件，就可以直接通过 shadcn cli 集成到项目中。

5 分钟完成 😛emoji 选择器

在 Next.js 中快速支持 PWA

最近，我上线一款应用 md2crad 可以将 markdown 转变为知识卡片， 但是昨天DeepSeek的这次更新， 让我刚上线的产品就失去了价值。因为可以直接在 deepseek 中实现知识卡片的制作，并且UI审美也非常出色。

DeepSeek 更新打破了我刚刚上线的产品，可直接生成精美的小红书卡片

今天看到看到橘子老师 《用 Figma 和 AI ，解锁文字卡片自由》的文章，很有帮助，右边是@橘子汽水铺老师制作的卡片。文章中提到的 ai 工具就是 Claude，而国内大部分人是无法使用到 Claude，今天就花了几小时调整，让 md2crad 也支持了这种风格，大家可以用 Markdown来制...

波普艺术，到底是什么风格？

在V2EX 社区发了帖子推广，V2EX的氛围很不错，发帖半小时就有 70 的在线访问量，那是相当的不错了，可能大家对我提到的哪些是 AI 实现的比较感兴趣。

MD2Card 支持移动端访问啦

用 http://md2card.com 粘贴 Markdown，直接生成爆款卡片！

Markdown 秒变小红书卡片

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

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

来来来，给你们安利一个宝藏网站——Shots.so！这个网站简直就是前端设计的救星，让你轻松创建惊艳的Mockups，分分钟提升你的作品集质感！

Mockups 宝藏网站，帮你生成惊艳产品宣传图

2 句对话，Ai 就帮我实现了图片剪裁工具

这是一个一站式前端开发工具集合，旨在提升开发效率。

我用 Cursor改版了前端工具箱功能展示

作为一个前端开发者，最近真的被小程序劝退了！😭 虽然小程序开发成本低，但坑真的不少，今天就来给大家扒一扒为啥小程序没那么香了👇

小程序开发为什么不香了？真相揭秘！💔

打开闲鱼，随便看了下，销量还挺高，先有在闲鱼卖部署教程，后有卖 APIkey。

在闲鱼卖deepseek 赚疯了

🌟 Google官宣Gemini 2.0家族三款新模型！开发者必看！

真是把我能想到的，和想不到的都整理出来了，真的很佩服，只是没有这般执行力\[尴尬\]

当我问deepseek前端工程师失业后，如何挣钱时，我呆了

今天要给大家分享一个超棒的消息呀🎉 订阅号助手现在支持 Markdown 排版咯👏

😍订阅号助手支持 Markdown 排版啦✨

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

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

本文是通过插图详细解释每个 Kubernetes 组件。

在项目开发中，Docker Compose 是一种常见的工具，能够帮助开发者在本地轻松启动多容器应用。然而，当应用扩展到生产环境，单节点的 Docker Compose 可能无法满足高可用性、容错和扩展需求。这时候，我们可以考虑将 Docker Compose 部署迁移到 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

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

所有文章

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

使用 esbuild 来打包一个 React 库

TailwindCSS 资源推荐

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

盘点掘金 2021 高赞 React 文章