“有个小项目，接不接？”
墨尘的消息弹出时，林小凡正在调试他的待办事项列表——最后一个顽固的BUG：当用户连续点击“完成”按钮时，任务会被标记两次，状态反而会重置。
他揉了揉酸胀的眼睛，犹豫了一下，回复：
“什么项目？”
“一个企业官网，预算不高，但适合练手。”
林小凡盯着屏幕，心跳加速。
真正的项目。
不是教程里的仿写，不是自娱自乐的练习，而是有人愿意付钱让他写代码的——
商业项目。
他深吸一口气，手指在键盘上悬停了两秒，然后重重敲下：
“我接！”
第一节：需求文档的“艺术”
两天后，某咖啡厅。
林小凡紧张地坐在客户对面——一位四十岁左右的中年男人，自称陈总，经营一家本地建材公司。
“我们想要一个现代化、国际化的官网。”陈总推过来一份“需求文档”。
说是文档，其实只有半页Word：
- 首页要大气
- 产品展示要直观
- 联系方式要醒目
- 最好能有点动画效果 林小凡眨了眨眼：“呃……有没有更具体的设计稿或者参考网站？”
陈总大手一挥：“你们专业人士自由发挥！对了，我们主打环保建材，所以整体色调要——”
他停顿了一下，然后郑重地说出那个令无数前端工程师闻风丧胆的要求：
“五彩斑斓的黑。”
林小凡的咖啡杯悬在半空。
第二节：设计稿的诞生（并没有）
“他是不是在耍我？！”林小凡对着电话那头的墨尘哀嚎。
墨尘的声音带着幸灾乐祸：“欢迎来到真实世界。客户要是能准确表达需求，还要产品经理干什么？”
“可连设计图都没有！”
“那就你来做。”
“我不会设计啊！”
“Figma，学。”
三个小时后，林小凡用Figma拼出了人生第一份“设计稿”——
- 纯黑背景
- 渐变金色文字（“这算五彩斑斓吗？”）
- 产品图片悬停时有粒子扩散特效
发给陈总后，对方回复惊人地快：
“不够高端。”
林小凡瘫在椅子上，突然理解了为什么程序员论坛常有人说：“想打客户。”
第三节：IE兼容地狱
当林小凡终于搞定设计（经过七轮修改后，陈总勉强接受了“深空灰+生态绿”的方案），他自信满满地交付了第一版。
然后收到了测试团队的邮件：
BUG列表：
1. 在IE11浏览器下：
- 首页布局错乱
- Flexbox特效失效
- 图片懒加载不工作
2. 在Safari 12下：
- CSS动画卡顿“都什么年代了还有人用IE？！”林小凡愤怒地敲键盘。
墨尘发来一个悲伤的表情：
“企业客户，永远有还在用Windows 7的领导。”
接下来的三天，林小凡学会了：
- 用
-ms-前缀写兼容代码 - 引入
polyfill模拟现代API - 把优雅的CSS Grid降级成丑陋的
float布局
当他终于在IE11上看到勉强能用的页面时，他对着屏幕竖起中指：“R.I.P. Internet Explorer.”
第四节：移动端的暴击
“陈总说他的手机上看图片是变形的。”测试小姐姐发来消息。
林小凡掏出自己两千块的安卓机测试——完美显示。
借来同事的iPhone 13——也没问题。
最后他见到了陈总的手机：
一台屏幕比例奇特的折叠屏旗舰。
“这……”他眼睁睁看着精心设计的Banner图被拉伸成诡异的长条，产品展示区挤成一团。
连夜加班后，他学会了：
@media (aspect-ratio: 11/8)这种冷门查询min()/max()等现代CSS函数- 如何向客户解释“不是所有设备都能100%还原设计稿”
第五节：上线前的终极考验
交付前一天，陈总突然提出：
“能不能加个功能？让客户点击产品时直接弹出微信二维码。”
林小凡忍住摔键盘的冲动：“这需要后端支持……”
“不用那么复杂！”陈总兴奋地说，“我侄子说用<img onclick>就行！”
最终解决方案：
javascript
// 当用户点击产品图片时
productImage.addEventListener('click', () => {
// 创建一个漂浮的微信二维码div
const qr = document.createElement('div');
qr.innerHTML = `
<div class="wechat-popup">
<p>扫码咨询</p>
<img src="wechat-qr.jpg">
</div>
`;
document.body.appendChild(qr);
// 点击其他地方关闭
document.addEventListener('click', (e) => {
if (!qr.contains(e.target)) {
qr.remove();
}
}, { once: true });
});这个粗暴的实现后来导致了一个隐藏BUG：快速连续点击时会生成多个二维码层叠在一起。
但陈总很满意：“高科技！这才是互联网思维！”
终节：第一桶金
项目上线那天，林小凡收到了一笔3000元的转账。
他盯着银行APP的余额提醒看了很久。
这不是父母给的生活费，不是兼职打工的时薪，而是用代码亲手创造的价值。
深夜，他更新了自己的GitHub主页：
Skills:
- HTML (能写)
- CSS (会调)
- JavaScript (勉强不报错)
- 忍耐力 (Max Level)墨尘发来贺电：
**“恭喜，你现在正式成为：
‘被产品经理虐过的前端工程师’。”**
林小凡笑着关掉电脑。
窗外，城市的霓虹灯在雨后的地面上折射出五彩斑斓的黑。
（第四章 完）
下一章预告：
第五章：BUG的诅咒——调试的噩梦
“没有经历过‘在我电脑上是好的啊’的程序员，不足以谈人生。”——某匿名测试工程师
