写在前面
这篇文章是我在2021年5月写的，首发于我的个人博客：xeblog.cn/articles/60 。事件的起因：当时正睡着觉呢！脑海里一直有个声音在那叫唤，说什么赶紧给你的博客加个啥功能吧，别睡了，起来打代码！！！
当时写这篇文章的时候，把我自己都写乐了，希望你们看的时候也能开心，哈哈哈~
精分现场
⚠️：此文具有人格分裂倾向，请在家长陪同下观看！！！（？？？）
前些天晚上休息时，突然就想着给博客加点新Bug，额...不是，是新东西。
目前博客首页的文章是按照置顶优先，然后再按发布时间倒序排列的，想着再加入两个维度的排序：最热和最新。
还有一点就是，博客太单调了，想加点新玩法。
随机文章的想法“孕育而生”。
下面我将以“神经病”的形式（什么神经病？？？这叫“人格分裂”！），
描述“自给自足”的整个过程：评审 -> 开发 -> 测试 -> 上线。
需求评审
出场人物：产品部（左脑）、开发部（右脑）
产品：“...”
开发：“...？”
产品：“需求都知道了吧，开始开发吧！”
开发：“wtf？”
产品：“还有什么问题吗？”
开发：“原型呢？”
产品：“就这点需求，要个毛的原型？”
开发：“啊这... 你这让我们很难办啊！排序和随机文章入口呢？排序是加选择列表，还是加按钮呢？随机文章到底怎么个随机法呢？是加按钮点一下就跳到文章详情页吗？如果是加按钮，那按钮放哪？如果...阿巴阿巴...***balabala...歪比巴比...玛卡巴卡...（开发部疯了）。”
产品：“加一个按钮，实现所有功能。”
开发：“...”
产品：“这很难吗？”
开发：“祝你身体健康！”
开发："UI呢？"
产品：“垃圾博客，要个毛的UI。”
开发：“臣附议。”
开发：”什么时候上线？“
产品：”现在。“
开发：”...“
开发进行中...
出场人物：部门老大小毅、菜鸡前端实习生小毅、垃圾后端码农小毅
老大：“怎么样了？”
菜鸡前端实习生：“什么怎么样了？？”
垃圾后端码农：“+1。”
老大：“页面画的怎么样了？”
菜鸡前端实习生：“后端接口还没给我...”
垃圾后端码农：“马上就好。”
菜鸡前端实习生：“别急哦，我博客快写完了。《用CSS画一个神奇宝贝精灵球》 xdm，都去给我点赞！”
老大：“都什么时候了，还写博客？”
老大：“不得不说，画的不错！就是不像个球？”
菜鸡前端实习生：“你懂个毛，这叫扁平化设计。”
老大：“...”
垃圾后端码农：“我特么接口都写好了，你塔嘛在这写垃圾博客？？？”
垃圾后端码农：“是画的不错！”
经过垃圾后端小毅与菜鸡前端实习生小毅的相互配合，开发进度逐渐拉满，顺利步入测试阶段。
测试中...
出场人物：无。
测个毛，上线上线！！！
产品交付
出场人物：产品部（左脑）、开发部（右脑）
一个按钮实现三个功能，这对我们开发部来说，确实是一个巨大的挑战。
但经过我们不断的摸索，终于找到了一个完美的解决方案：精灵球。
精灵球的结构是由上半球（红色部分）、下半球（白色部分）、中间一个按钮组合而成的，这正好可以对应我们的三个功能：最热排序、最新排序、随机文章。
点击上半球，触发事件：跳转到最热排序
点击下半球，触发事件：跳转到最新排序
点击中间部分，触发事件：跳转到随机文章页
产品：“妙～啊～”
产品：“但这会不会太幼稚了点？”
开发：“年纪大的人才会觉得幼稚，咱们年轻人只会觉得可爱。”
产品：“附议～”
产品：“精灵球可以拖动吗？”
开发：“可以”
产品：“右下角那只鸭子是怎么回事？”
开发：“哦，你说可达鸭啊，它是神奇宝贝啊，你放出来的呀！”
产品：“点中间那个按钮放出来的？”
开发：“对。”
开发：“点的时候，记得大喊一声 ‘就决定是你啦！’ ”
产品沉默...
开发：“如果不想显示神奇宝贝，可以双击它，立马消失！”
产品：“行，上线上线！”
写到最后
上面整个过程，全是我自言自语（我可不是神经病啊），但有一句话不得不说：
根据真实事件改编
精灵球这个东西，也是突发奇想，想了一整晚，兴奋的很。
凌晨5点爬起来，把这个东西开发完了，直到上午10点发的版。
然后。。。 倒床就睡。
下午起来，发现移动端不能拖动精灵球？？？
原来根本没写移动端拖动的代码。。。
产品：“赶紧给我写！！！”
我就是个垃圾后端码农，我写个毛！！！
产品：“把你另一个人格叫出来写啊喂！”
我又不是人格分裂？？？
菜鸡前端实习生：“马上就好！”
再次声明：我不是人格分裂！！！
CSS实现精灵球
CSS 我真不咋会，为什么跑去做了后端码农呢？就是因为 CSS 样式太难了...
实现出来的效果，我个人觉得不是特别满意，但总归是我自己开动脑筋想出来的写法，真不是抄的，我花肆！
写到最后
文章关联的代码：github.com/anlingyi/xe…
这篇文章的实现代码都在我的开源仓库里，这个仓库本质上是我的个人博客的前端项目，当时就是把那个精灵球给上线到我的博客了。毕竟我只是个后端嘛，前端代码写的有点差，也花了很多的时间去学习怎么调样式，怎么只用 CSS 就把精灵球给画出来，还要实现精灵球的拖动，移动端还要做适配，现在想想就头疼，哈哈~
我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
