挑战一键自动1比1复刻 B 站首页动态 Banner【番外篇】
嗨害嗨！这里是又在不务正业的前端菜鸡茶无味de一天。关注我的朋友可能看到这个标题已经审美疲劳啦，好吧，我也是真没想到 复刻 B 站首页 Banner 这个内容我能写三篇文章……为什么会有这个番外篇呢，原因是上次我把复刻 Banner 加上了自动化并发布到 Github 上（详情查看：三分钟复刻 B 站首页动态 Banner），然后最近 B 站的 Banner 又更新啦，由于复刻最新效果已无需再写任何前端代码，于是我想让一位 Java 后端选手来试试，最终他调试半天自信提交一个 PR，结果却实在是差强人意。
其实这次 B 站更新的效果并不复杂，但由于需要调试的图层数量也不少，且重叠度较高，不得不承认一个事实是：手动调试大约的确是真的很考验眼力！
我也实在不是闲的，是真的忍不住啊！又抽时间给这个项目加了一个功能，通过 puppeteer 模拟鼠标滑动来自动计算每个图层的速度变化率，从而实现精确复刻！例如下图鼠标滑动一段相同距离后的对比图，可以看到所有细节都是 1:1 完美对应：
ps. 以上配图使用 迅排设计 在线制作生成，这是我独立开发的一个功能强大的在线海报图片设计器，目前还在持 ...
聊聊迅排设计近期有哪些值得一看的更新
开源在线图片设计器，支持PSD解析、AI抠图等，基于Puppeteer生成图片
迅排设计自从正式开源以来受到了各界广泛关注，Github 仓库更是短短一个月时间就突破 1000+ Star 🎉，受宠若惊！期间我也在不断地对项目进行更新和优化（查看迭代计划），其中自动抠图功能是不少朋友关注的重点之一，于是国庆期间我持续鏖战，对抠图功能进行了全方位的优化和迭代，这也是近期较大的更新内容。
在项目持续曝光期间，我也发现了不少问题并逐一进行记录和修复，希望第一个较为稳定的 Releases 版本可以早日和大家见面~
一些美化更新此次从网上无版权图库中又扒了些作品过来，并将之前杂乱的图片进行了分类，鼠标放置在图片上还可显示来源作者与相关描述等，带来更多挥洒创意和灵感的空间~其它与图片相关的懒加载和排版也进行了一些优化。
分类
懒加载
画布背景支持透明度下载
这个看似不起眼的更新背后实际也有些故事，起初画布背景调为透明是有 Bug 的，底部会透出一个深色而非透明，这是因为画布本身有一个深颜色，只不过它在某些样式的作用下变得半透明了，而调整画布透明度则让原本的颜色显现了出 ...
三分钟复刻B站首页动态Banner（视差效果头图）
之前我尝试使用 JS 实现 B 站的首页 Banner，实现了基本1:1的复刻效果，一来是觉得很有意思，二来也是为了练习前端技术。与此同时我也写了一篇技术文章，详细讲解了整个实现过程的技术细节和原理：《如何用原生 JS 复刻 Bilibili 首页头图的视差交互效果》
肝完文章时 B 站就更换了新的 Banner 图，文章发布一个月后又更新了中秋版本，这次更新也出现了此前未曾谋面的 video 元素效果，我又跃跃欲试，打算复刻一遍这个 Banner 效果。
新增视频类型由于这次的 Banner 中增加了水面波光和萤火虫的复杂动态，所以加入了视频图层来展示，是 webm 格式的视频文件，体积非常小。在之前所写代码的基础上只需要增加一个类型字段，然后按类型创建标签即可：
1234const child = document.createElement(item.tagName || 'img');if (item.tagName === 'video') { child.loop=true; child.autoplay=true; ...
技术文章创作心得分享
本文将分享近段时期以来的技术文章创作心得体会，如果你也正在写作的路上，希望这篇文章能对你有所帮助或启发。
笔者在去年下半年发表了约莫 40 篇文章，几个月内在掘金升级到优秀创作者，达成了里程碑式的小目标，其中一篇文章被官方评选为 2022 年度爆款好文，也算是十分难得的肯定。
为什么写作技术写作确实没有什么门槛，还会有诸多好处，比如：
加深对知识的理解
写文章需要你对问题展开较为全面的思考，同时这个过程中你也可能会需要查阅资料对观点进行补充，促使你主动持续学习，持之以恒必将大有裨益。
集思广益
文章下开放性的讨论往往可以启发你的想法。
求职亮点
经常写技术文章能在一定程度上证明你的学习力，面试官甚至可以参考你的博客内容对你的水平进行更深层次的评估，这比起口头交谈更有说服力。
提升表达力
能把技术原理讲明白透彻是一种不可多得的能力，文字表达同样也需要长时间的锻炼。
如何开始写作
其实说起来，所有的技术文章大体上都可归为两类：记录或分享。
对于大部分人来说，很难一开始就创作体系化的文章，所以我起初都是想到什么就写什么，这个阶段比较多都是写些笔记，谈不上真正的文章。
笔者实践类文章写的 ...
别让时代的悲哀，成为你的悲哀
本文首发于公众号：品味前端，作者：茶无味de一天，转载请注明出处。
前言最近这段时间，可谓一直都很不太平。
一开始有人说“前端已死”的时候，我身处其中，冷暖自知。
这是我今年找工作，在Boss直聘上花 68 元巨款开的会员，主要功能就是每天有 5 次机会告诉你在某岗位的竞争力，纯纯花钱买焦虑。上面两张图只是普通小公司的一个前端岗位，竟有上千人竞争。
后来也有人说“前端死不了”，我没有发表过什么看法，因为我觉得不值得讨论。
前端发展迅速，同时也充满困境，只有站在一线的开发，才能明白前端本就半死不活。像前两年还有《现代 Web 开发困局》这样的文章在分析前端困局、讨论如何解放生产力，而现在这种声音大部分人可能并不关心。
再到现今一众技术公号不是《前端岗位又爆了》就是《前端这波起飞》的，我也只是微微一笑，软广吹牛从不打草稿。
这篇文章不聊技术，不蹭热点，只是单纯地从一个普通互联网从业者的角度，讲点近段时间以来的一些思考。
危机历史的车轮滚滚而来，它与每个人息息相关。
随着口罩病三年的折磨、俄乌冲突爆发、漂亮国霸权制裁，国家整体经济呈现明显下滑，我们能切身的感觉到，大环境确实变差了 ...
原生JS实现惯性滚动，给鼠标滚轮增加阻尼感，纵享丝滑
本文首发于公众号：品味前端，作者：茶无味de一天，转载请注明出处。
前言当我们在移动终端上滑动页面，手指离开屏幕后，页面的滚动并不会马上停止，而是在一段时间内继续保持惯性滚动，并且滑动阻尼感和持续时间与滑动手势的幅度成正比。
这种物理学效果的应用在移动端普及后，大部分笔记本触控板也都支持同样的效果。
然而鼠标滚轮的传感器通常采用光电或机械的方式运作，由一个旋转轴和一个传感器组成，旋转轴通常无法做出细微的距离控制，使得距离检测更像是段落式的，这些信号在传输到计算机后，并不能实现丝滑的滚动。
可以通过以下例子感受两种滚动的差异：
https://code.juejin.cn/pen/7272919488994279484
本文将教会你如何让鼠标滚轮也能够丝滑地操作网页，带来更舒适的页面惯性滚动体验，同时讲解其中技术原理与细节，用最少量的代码实现 JS 鼠标惯性滚动。
使用插件要实现平滑的惯性滚动可以引入 lenis 这个库，使用非常简单：
1npm i @studio-freight/lenis
12345678const lenis = new Lenis()fun ...
几行代码实现上传接口，白嫖Github做为在线图床
事情是这样的，某天我在项目里临时需要一个图片上传接口来测试功能，简单来说就是从前端上传图片到服务器然后返回一个可访问的静态资源链接，如果为了这个而去开发一个服务端接口实在是麻烦，而对接阿里云、七牛云这类 oss 服务一样要开发而且还要钱，许多免费在线图床也不会提供 API 的功能。。
于是我经过一番摸索，发现其实白嫖 Github 提供的 api 就可以不用服务器、不花一分钱，简单快速实现我要的上传接口，还自带 https 链接，下面就把详细的过程分享给大家。
0. 注册一个小号先随便用一个邮箱注册个 Github 小号，注意不要使用你正式的 Github 账户，因为下面创建的 Token 如果做权限管控会比较麻烦，所以我们直接用一个小号来创建仓库，这样可以省去许多工作。
1. 创建 Token登录你的小号（注意别登错了），访问：https://github.com/settings/tokens ，点击 Generate new token 按钮，创建一个新 Token：
设置一下过期时间，这里我们选择“不会过期”，然后勾选一下 repo 所有权限：
接着滚到底下点击生成按钮，会 ...
如何用原生 JS 复刻 Bilibili 首页头图视差交互效果
本文首发于公众号：品味前端，作者：茶无味de一天，转载请注明出处。
最近网上冲浪的时候，发现了 B 站这个首页头图的交互效果非常有趣，如下图所示，当鼠标在画面中左右滑动时，海洋生物会栩栩如生地动起来：
这是通过给图层设置不同的移动速度来实现的视差效果，在佩服 UI 与前端对网页交互效果方面的努力和探索之外，我也沉浸在这片“海洋”中疯狂摸鱼：尝试只使用原生 JS 来复刻它，最终实现了非常还原的效果：
可点击图片进入 码上掘金 中体验完整效果。
本文将一步步介绍整个制作思路，讲解涉及的相关知识点，干货非常多，搬好你的小板凳，咱们话不多说直接开摸吧。
准备工作打开浏览器控制台，查看B站头图的 HTML 结构：
不难看出，我们接下来的思路就是把 banner 中所有的图片用一个 .layer 的 div 包住堆叠起来，然后编写鼠标事件对每张图片应用相应的变换(transform)操作，由于接下来的操作我们都用 JS 来完成，所以布局很简单，只需要一个 div 来充当容器：
1<div id="app">loading...</div> ...
教你在超低配的服务器上部署令人惊叹的AI抠图工具
前言对于一款数字时代的图片编辑工具而言，抠图工具扮演着越来越重要的角色。它能轻松地将图像中的目标与背景进行分离，为用户提供便捷高效的编辑体验。
在过去，抠除图像背景往往是一件复杂又繁琐的工作，而实现一个 AI 自动抠图工具也并非易事，因为它需要不少服务器的算力消耗以及大量训练模型的成本。
而现在，我将展示在仅使用 1核1G运存 的超低服务器资源下，可以实现多么令人惊叹的抠图工具！如下所示，只需上传图片，便可自动抠除背景。在线体验
因为带宽也很小（仅 1M ）所以在线体验建议不要上传太大的图像。
接下来，我将带你学习如何部署，通过简单几步即可实现这款强大的 AI 抠图工具。同时，我也将用通俗易懂的文字带你剖析 AI 抠图工具背后的工作原理，帮助你更好地理解其背后的算法和逻辑。废话不多说，让我们开始吧！
开始部署首先我们需要使用 Rembg 这个库，它是基于 U^2-Net 模型构建的一个用于图像背景去除的 Python 工具。
为了让开发者快速掌握它，我们并不需要学习 Python（除非自己训练模型），我们只需要会一点 docker 的使用，然后运行以下命令：
1docker r ...
开源在线图片编辑器，支持PSD解析、AI抠图等，基于Puppeteer生成图片
自从我上次分享一个人开发仿造稿定设计的图片编辑器到现在，不知不觉已过去一年时间了，期间我经历了裁员失业、面试找工作碰壁，寒冬下一直没有很好地履行计划…..这些就放在日后谈吧。
最近挤出时间来完善了这个项目，正式开源后在一天内就收获了上百个Star，今天想向大家分享下这个开源图片编辑器项目——迅排设计，以及我的一些感悟和开源体验。
在线 Demo | 文档网站 | Github 开源地址: palxiao/poster-design
项目速览1234git clone https://github.com/palxiao/poster-design.gitcd poster-designnpm run prepared # 快捷安装依赖指令npm run serve # 本地运行
将同时运行前端界面与图片生成服务(3000与7001端口)，合成图片时本地会启动一个Chrome浏览器实例。
👇🏻下面一起来看下都有些什么功能吧。
上传 PSD 模板点击 “我的” - “资源管理”，上传PSD模板按钮，进入PSD解析上传界面界面 ...