前端工程师

前端专享

代码在线跑，知识轻松学

Python精品学习库

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

博客搬家 | 分享价值百万资源包

往期视频·干货材料·成员作品 最新动态

技术创作特训营·精选知识专栏

新邀入驻腾讯云开发者社区，福利多多！

如何运用「云、端融合的数智化安全体系」高效护航数据安全

左手AI，右手安全 —— 一汽丰田数字化转型之路

去年，我开发了一款微信排版编辑器 MDX Editor。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功能。然而，作为一个微信排版编辑器，它的受众面比较有限，并不适用于每个人。因此，我基于该编辑器开发了 MDX Editor 桌面版，它支持 Mac、Windows 和 Linux，并且非常轻量，整个应用的大小只有 7M。现在，MDX Editor 桌面版已经成为我的创作工具。如果你对它感兴趣，可以在文末获取。

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

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

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

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

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

最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本，openai-translator， 短时间内 star 冲到了 9.7k， 功能上除了支持翻译外，还支持润色和总结功能，除了浏览器插件外，还使用了 tauri 打包了一个桌面客户端，那抛开 tauri 是使用 rust 部分，那浏览器部分实现还是比较简单的，今天我们就来手动实现一下。

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

上周微信公众号推出了一种新的形式，类似小红书这样子，群里有小伙伴调侃，是否是小红书的产品经理跳槽到微信了，那作为一个公众号运营者，我也想利用这一点。那么如何快速设计出好看的小红书封面，便成了我的目标。我在 google 上搜索到了一篇文章，可以通过一个好用的网站，比格设计，设计出好看的封面。它跟稿定设计一样，也是一个在线制图的网站，当然如果你没开会员的话，下载下来也是有水印的。那么我在想，是否也可以写一个油猴脚本来实现白嫖呢？

油猴脚本去水印实现原理

上周给博客开通的 Google adsense，收益比微信公众号好一些，收益跟访问量成正比，于是我问了 ChatGPT 这个问题。

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

首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)

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

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

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

前段时间开发了一个面试刷题小程序——面试狗，主要使用了 uniapp + unicloud 云开发实现，详情可以看这篇文章《【实战】使用 uniapp 开发一个面试刷题小程序》 ，今天我们来开发一个与之对应的 PC 版面试刷题网站。

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

Markdown 是一种轻量的标记语言，我们只需要写 md 格式文件，不必考虑文档的排版，被广泛用于博客写作，技术文档编写等，程序员们都热爱，但我们工作中除了写文档，有时候还需要汇报工作，技术分享等，需要用到 PPT，但设计 PPT 可能不是每个程序员所喜欢的，所以我们可以使用一个非常好用的工具 slidev, 可以使用 markdown 来制作演示文稿， 这个工具很多小伙伴都知道，尤大的分享就经常使用，其他类似的工具还有 Nodeppt、 marp 等，那么这类工具是如何实现的？

Markdown 写 PPT 是如何实现的？

在 web 开发中，少不了用户系统，开发者需要开发注册登录这些重复的功能，而对于用户来说，要要注册才可以使用，往往会不愿意，因为我们有太多的账号和密码了，而现在，微信拥有 12 亿的月活用户，使用微信实现扫码登录，会大大减少需要用户注册而造成的流失率，而实现微信扫码登录有一定门槛，首先需要是企业用户才可以在微信开发平台注册账号，紧接着需要认证缴费 300 元才可以，简直就是黑店，而现在我们可以使用小程序来实现，今天就来讲讲小程序扫码登录的实现方式。

用小程序来实现扫码登录

之前写过一篇文章，《将 React 应用迁移至 Vite》介绍了 Vite 的优势，并且和 webpack 做对比，但 webpack5 有个很重要的功能，就是模块联邦，那么什么是模块联邦？Vite 中也可以实现吗？ 我们一起来探究下。

Vite 也可以模块联邦

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

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

在上文中介绍了使用 iconfont 的缺点，以及使用 SVG 的优点，简单归纳为以下几点：

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

使用 iconfont 有很多优势，比如只需要加载一次，全部图标都可以设置字号大小，颜色、透明度等，可以随意变换字体的形态，并且图标是矢量的，不会随着字体大小的变化失真，得益于 iconfont.cn 提供的便利，大多情况下，我们不必上传自己的图标，只需要便捷的搜索，就可以将图标加入到自己的项目图标库中，但最近工作中却遇到了比较严重的问题。

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

iPad 有个口号，就是“买前生产力，买后爱奇艺”，使用 iPad，配合 Procreate 来作画体验还可以， 如果你想让你的 iPad 可以编程，你却不得不为之花费时间和精力，我搜了网上的教程，大致可以总结为以下 2 步：

【玩转 Cloud Studio】iPad 编程生产力

相信很多小伙伴跟我一样，是一位奋斗在一线的业务开发，每天有做不完的任务，还有项目经理在你耳边催你，“这个功能今天能完成吗？”其实作为一名前端工程师，任务就是完成 Leader 的任务， 但公司实行 OKR 以来，你就不得不在完成任务的基础上加上几条，“提示个人能力”是我任务之外一个长期目标。 

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

前段时间在掘金 app 多了一个推广中心，分享课程链接，若有其他用户从你分享的链接购买，你就可以获得一笔佣金，我们称类似的功能叫全民分销，全民分销在互联网推广中很常见，比如腾讯云、阿里云等都有，只不过叫法不一样、腾讯云叫 SCP，阿里云叫推广云大使。笔者也通过类似的活动，也获得过一些收益，由于全民分销功能使用门槛较低、传播速度快、对于平台商家和用户都是零成本的，成了互联网中热门的推广功能，本篇介绍下全民分销功能实现原理。

Uniapp 实现全民分销功能

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

打字机效果的实现与应用

哈喽，大家好，我是小马，去年年底，我开通了微信公众号“JS 酷”，也开始陆陆续续开始写文章， 发到微信公众号，作为一名程序员，我酷爱 Markdown，相信很多朋友跟我一样， 也经常会有写技术文档的需求。Markdown 由于语法简洁、使用方便、深受广大程序员们的喜爱。

微信排版工具新选择

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

腾讯云开发者社区推出了前端专享专栏，为你提供了前端专享的相关文章，致力于帮助开发者快速成长与发展。

前端专享

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐