博客

先看效果，再看代码 最近在做一个项目时，客户要求添加面包屑导航。这玩意儿看起来简单，但实际操作起来还是有不少坑。今天就来分享一下我在这方面的经验。 基础用法：直接上手 首先，我们来看一个简单的面包屑导...

为什么我要对比这几个方案 说到CSRF防护，Double Submit Cookie算是一个比较常见的方案。不过，实现方式有很多种，比如传统的Cookie+表单隐藏字段、使用Header的Token、...

项目初期的技术选型 最近接手了一个移动Web项目，客户要求是能在跑在各种主流手机浏览器上，包括iOS的Safari、Android的Chrome，还有一些小众但用户量不小的国产浏览器。这个需求一听就知...

为什么我要对比这几个Pagination分页方案 做前端开发这么多年，遇到过各种各样的分页需求。有些场景下，分页组件就是个摆设，随便弄弄就完事了；但在有些项目里，分页组件的设计和实现直接影响用户体验和...

项目初期的技术选型 最近我们团队接了一个新项目，是个电商网站。本来以为就是个常规的前端活儿，没想到一上来就遇到了不少问题。其中一个比较头疼的问题就是请求超时处理。 在做这个项目之前，我一直觉得超时处理...

又踩坑了，Middleman部署出问题 最近在用Middleman搞一个静态网站，结果部署的时候发现服务器上渲染出来的页面和本地开发时完全不一样。折腾了半天才发现是配置文件的问题。 排查过程，试过哪些...

我的写法，亲测靠谱 最近在项目中折腾了Turbopack，发现这玩意儿确实挺牛逼的。不过说实话，刚开始用的时候，也踩了不少坑。下面我就来分享一下我的实战经验，希望能帮到大家。 配置Turbopack的...

我的写法，亲测靠谱 在前端开发中，Origin检查是个非常重要的安全措施，尤其是当你需要处理跨域请求时。我一般这样处理： 首先，在服务器端设置CORS（跨源资源共享）策略，确保只有指定的Origin可...

先看效果，再看代码 大家好，我是前端开发者小张。今天要跟大家分享的是H5适配的一些实战经验。咱们直接进入主题，看看核心代码和用法。 核心代码就这几行 首先要说的是viewport的设置，这是最基本的H...

项目初期的技术选型 最近我参与了一个电商网站的前端重构项目，主要任务是提升页面加载速度和用户体验。在这个过程中，CSS性能优化成了一个重要的关注点。选择这个技术方向主要是因为我们的页面元素较多，样式复...

优化前：卡得不行 最近在项目里用了一个Cascader级联选择器，原本以为没啥问题，结果一上线就被用户吐槽了。这玩意儿加载起来慢得要命，每次切换选项都得等好几秒才能看到结果。我一开始还以为是网络问题，...

我的写法，亲测靠谱 在前端开发中，Breakpoints断点是响应式设计中的重要一环。我在多个项目中都用过它，今天就来分享一下我总结的一些实战经验。 首先，来看看我一般是怎么处理的： /* 基础样式 ...

为什么要对比这几个方案 最近在项目中用了TMagic，发现这玩意儿挺火的。我决定对比一下几种常见的技术方案，看看哪个更符合我的需求。主要对比的有TMagic、Vue Formily和Formily（R...

我的写法，亲测靠谱 在使用Monorepo的过程中，我总结了一些实战经验。这些经验都是我在实际项目中踩过坑、调整过的，希望能对你有所帮助。 Monorepo的目录结构 首先，我们来说说Monorepo...

优化前：卡得不行 大家好，最近我在一个项目里搞实时搜索功能，一开始那个性能问题真的是让我头大。每次输入几个字，页面就卡得要命，用户体验简直不能更差了。用户在输入框里打字的时候，页面直接卡成PPT，加载...

图片加载缓慢，用户体验差 最近在做一个项目时，发现首页的图片加载速度特别慢，用户反馈也很不好。这让我挺头疼的，毕竟用户体验很重要。 排查过程和踩坑经历 一开始我以为是图片文件太大了，于是先检查了一下图...

为什么我要对比这几个样式方案 在前端开发中，样式方案的选择一直是个让人头疼的问题。传统的CSS、预处理器（如Sass、Less）、CSS-in-JS、以及新兴的原子化CSS（如Tailwind CSS...

简要介绍 在现代前端开发中，视觉设计与用户体验的融合日益紧密。一个看似简单的背景图案，往往能为网页增添独特的风格和质感。今天我们要深入解析的是一段纯CSS实现的多重渐变背景纹理效果，出自《Patter...

我的写法，亲测靠谱 在前端开发中，Husky钩子是个非常实用的工具，它可以让你在Git操作（如commit、push）时执行一些自定义脚本。这样可以确保代码质量，比如自动格式化代码、运行测试等。我一般...

先看效果，再看代码 大家好，我是前端老司机。今天跟大家分享一下CSS动画的实战经验。直接上代码，看完效果咱们再详细聊。 @keyframes fadeIn { from { opacity: 0; }...