GitHub Actions 自动发布 npm 包简易指南
概述 GitHub Actions作为GitHub原生的CI/CD工具，为开发者提供了强大的自动化能力。通过GitHub Actions自动发布npm包，可以显著提升开发效率，减少人为错误，确保发布流程的一致性和可靠性。
前端
21 篇文章
如何集成Github登录
现在越来越多的网站不再自建登录系统，而是采用第三方登录的方式。比如：QQ、微信、微博、Github等。 其中Github登录是偏技术类网站或新一些的网站的首选，因为它的开放API和生态系统非常强大。 那么如何集成Github登录呢？本文介绍前端主导的Github登录流程。
小程序组件库该用rpx还是px？
一、问题背景：组件库用 px，业务开发用 rpx 1.1 现状冲突 目前小程序的开发领域有一个奇怪的现象： 组件库 ：Vant、Uni UI 等主流组件库的样式表中， width: 100px 随处可见 业务代码 ：业务前端清一色使用 width: 200rpx ，开发者对 rpx 趋之若鹜 这就引出一个 矛盾点 ：当开发者引入一个 px 单位的按钮组件时，
【译】什么是前端架构
英语原文在此： 一开始看到了其他人的翻译，比较认可这篇文章的不少内容，所以进行一个转载，但又不想纠结于一些版权方面的问题，所以干脆基于原文让最近大火的 DeepSeek R1 帮我翻译一遍。 当你思考系统设计时，不要纠结于技术选型，而应聚焦于你希望系统具备的核心特性。技术选型只是这些特性的载体。 —— Gregor Hohpe 免责声明 ：如果你自认为只是个
图床系列之tinypng自动压缩图片
前置内容： 使用cloudflare R2托管图片 使用cloudflare搭建个人图床 R2的存储空间虽然很便宜，但图片尺寸仍然应该尽可能小，节约存储空间的同时也减少传输体积，节约加载时间。所以图片在上传前最好是能压缩一下。目前非常好用的压缩图片的工具网站是 tinypng，所以之前一般是手动去 tinypng 对图片进行压缩后再上传，但这样很麻烦，所以今
React 里的 key 不只是列表优化
最近组里的同学问我，在小程序里想强制重建一个组件要怎么办。 背景是一个表单渲染器内部状态处理得不够干净，切换数据后偶尔需要销毁再创建。我之前也遇到过，处理方式比较直接：用条件渲染让组件先消失再出现。比如先把 a:if 改成 false ，下一轮再改回 true 。 同学说，PC 里的 React 只要改一下 key 就行，小程序不支持吗？
小程序页面顶部的空隙
TL;DR：移动端web页面顶上如果有空隙的话，可以对页面父元素用 padding 或者加空元素防止因 margin 塌陷造成的不正常滚动。 起源 强迫症同学有没有注意到，很多小程序的页面，明明不超过一页，但是却可以滚，但又只能滚一点点。
画图工具-excalidraw
画图一直是我的弱项。也可能单纯是想得不够多，不够清晰，想好才能画好。 思路也许需要较长的时间去培养，但是技巧和工具可以通过练习快速掌握。最近发现了一个很不错的画图工具 excalidraw
codespace初体验
恭喜GitHub做成了真正可用的云IDE 现在我正在使用iPad编写这个内容，体验非常丝滑，唯一可能有点不足的是初次进入等场景下网络有点慢。有了这个工具，只需要记住GitHub的账号密码，真的是可以实现随时随地写点东西了。
CSS之图片下的空隙与文本居中
前端工程师应该都有遇到过，使用图片时会在下方有个小空隙。这个小空隙很难找到它是如何形成的，但是还好我们有搜索引擎，因此很容易会知道解决办法：
前端依赖与可信构建
背景 前端使用npm来作为包管理工具，它的使用门槛/发包门槛低到惊人，好处是培养了非常丰富的社区和庞大的第三方包，包的数量远超第二名maven。 但所有东西都会有代价，坏处是npm的包质量方面良莠不齐，依赖链非常深，很简单的小工具方法都可能去使用包。
滴滴出行小程序I18n最佳实践
背景 I18n = Internationalization，国际化，因为单词由首末字符i/n和中间18个字母组成，简称i18n。对程序来说，就是要在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面，以支持不同语言的人顺利使用程序。 业务背景 互联网行业进入下半场，精细化运营是关键。多语言支持能让产品更好地服务境内的其他语言用户，也为产品出海打下基
滴滴出行小程序体积优化实践
概述 2019年下半年，为了将微信钱包/支付宝九宫格入口的滴滴出行迁移为小程序，团队对小程序进行了大量的功能升级与补全。在整个过程中也遇到并克服了一系列问题和挑战，其中包体积问题尤为突出。接下来全面介绍一下滴滴出行小程序在体积控制方面做的努力与沉淀。
nginx+express做一个简易代理服务
用 NGINX + EXPRESS + Let's Encrypt 构建HTTPS接口服务
NPM小技巧
package.json里描述依赖时候一般版本声明是前面带 '^' 的形式，意味着安装依赖时npm会自动尝试去安装声明版本的最新patch，多人合作一个项目时就可能出现大家依赖不一致的问题，出现问题后的复现与调试会比较麻烦，容易出现仅在某台电脑上可以复现的情况。
小程序开发者，为什么你应该尝试下MPX
MPX框架 是滴滴出行推出的一款专注小程序开发的增强型框架。本篇文章将从使用角度谈谈MPX的优势与好处。如果嫌内容太长，优势部分每个小节都有简单的一句话总结，可以快速阅读。如果想了解更多设计细节，可以阅读 前一篇文章 MPX2.0发布。 背景 在小程序逐渐火热的今天，越来越多的开发者需要进行小程序的开发。原生小程序的开发有诸多不便，开发者又需要在众多的小程序
前端项目工程化实践
17年9月起和朋友合作了一个项目，一套组件库Antue，好听点说叫造轮子。主要是把蚂蚁金服的Ant Design给“翻译"成Vue可用的组件库。这是一个蛮正式的项目，规模也挺大，所以给了我一个实践工程化的好场景。
谈谈CORS下前端的cookie
跨域有多种解决方案，包括JSONP，CORS，反向代理等等。CORS是我感觉最“优雅”的一种方案。但是这个方案下的cookie有一些不一样的表现，做相关尝试后做点记录。
package-lock.json[译]
为了更好的理解这个package lock.json是干什么的，花了一点时间把npm官网这篇文档翻译了一下，第一次翻译英文文档，很多地方拿不准，用 标注了。
vue-cli webpack模板mock数据的方法
vue cli是Vue提供的脚手架生成工具，类似于yeoman，它提供的webpack模板非常好用。但在前后端分离的开发模式下，没有提供较好的mock数据的方案。应该是留给用户自己解决，毕竟mock数据的方案比较多。我这里只介绍通过修改改模板的express服务器，添加一些路由的形式来使本地的json文件作为服务器响应返回来提供mock数据。
写了个前端渲染的教程
写了个前端渲染的教程。 Github地址 打滚求星星。