技术文章创作心得分享
本文将分享近段时期以来的技术文章创作心得体会，如果你也正在写作的路上，希望这篇文章能对你有所帮助或启发。
笔者在去年下半年发表了约莫 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解析上传界面界面 ...
对话框、模态框和弹出框看起来很相似，它们有何不同？
本文翻译自外网文章《Dialogs, modality and popovers seem similar. How are they different?》，作者 Hidde de Vries 是一名自由职业前端、可访问性和系统设计专家，曾在荷兰政府、W3C (WAI)、Sanity.io 和 Mozilla 等组织工作。
Web 平台概念有时可能完全不同，但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出，所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。 我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似，至少在我看来是这样的，那就让我们开始吧！
注意：在撰写本文时，popover它仍然是一个提案，仅作为实验提供。目前 popover 可以在以下环境测试：
Chromium，在“实验性 Web 平台功能”标志的背后（计划于 2023 年 5 月底在稳定版 Chrome/Edge 中发布）
S ...
关于我的网站突然崩溃，误以为被攻击这件事
本文记录了一次服务器严重故障的问题排查历程，故事虽然颇为曲折，最后却发现是天灾不是人祸，虚惊一场，还是我太菜了啊。
事情是这样的，那是一个炎热的下午，我正吹着空调欣然品茶，突然命运之手向我伸出了魔爪，打断了我摸鱼的美妙时光——我的所有站点都无法访问了！这让我的心情热得像天气一样火啊！
直觉告诉我这是服务器出问题了，于是我赶忙登录查看主机，进门直奔 docker：
事情似乎有点严重，我赶紧 check 其它地方：
linux 系统关键目录均没有遭到破坏，首先排除服务器被黑
mysql 数据库完好无损，肯定不是勒索病毒
这种奇怪的违和感不知道是怎么回事，但我也松了一口气，至少不是最坏的情况。紧接着我打开了云主机的后台看了一下数据，除了下午三点时的链接数突然飙高以外，没有发现其它异常：
由于之前就一直受到垃圾漏洞扫描工具的骚扰，链接数飙高这种事我已见多不怪，只是时机太过巧合，究竟是天灾还是人祸？我一时间也不得而知，所以先整理一下目前的情况：
docker 容器基本全报异常退出了，但没有被删
宿主机容器的映射目录空了，所以现在基本也没办法重新启动容器
容器 drone 还在活跃状态 ...
如何在页面中监听“不存在”的 DOM 节点
MutationObserver 是用于监视 DOM 树内的特定节点的 Web API 接口，一旦监测到节点发生变化，就会通知回调函数执行相应的逻辑。该 API 的兼容性很好，但由于如今流行的 JS 框架都旨在“数据驱动视图”，使得这个 API 容易被大众遗忘。
本文将介绍 MutationObserver 的基本原理、使用方法和应用场景，帮助读者更好地理解和应用这个灵活且强大的 API。
前言事情是这样的，某天我想给文档网站加个访问量统计的插件，这个插件是第三方的，工作原理是将数据填充到页面中特定 id 的节点上，例如有一个 <span id="pv"></span> 的节点，插件加载完成后就会通过 dqS (document.querySelect) 找到 id 为 pv 的节点然后把 pv 数据渲染上去。问题就在于，我这个文档网站并不是静态的，所有工作都是在运行时完成，类似一个用 Vue 驱动的网页，一开始只有 #app 节点，所以这个第三方脚本不能直接放在 index.html 文档中加载，否则可能页面还没渲染完，脚本就已经开始 dq ...