Chrome 浏览器的更新导致 jQuery 反复发版，只因 :has() 这个伪类
最近 jQuery 似乎又“回光返照”了一下，窜稀式地连更了几个小版本。我仔细看了看，并没有新功能出现，不过还挺有意思的，也让我学习到了新的东西。简单来说，这几个版本的更新主要与 Chrome 引入新选择器产生的缺陷有关。那么谷歌浏览器是如何导致 jQuery 产生 Bug 的，又是为何在修复之后又引发了新 Bug 的，这还得从 :has 伪类说起。
关于 :has() 伪类CSS 在很早前就存在子代和后代选择器，而父元素的选择器出于性能的考虑却迟迟没有浏览器能支持，虽然规范早已存在，但是真正支持它却是不久前才发生的事。
这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法，例如：
1h1:has(+ p) { color: red; }
这段 css 表示的是：选择一个 h1 标签，当它有一个相邻节点是 p 标签时，这个 h1 标签文字会显示为红色，蛮好理解的对吧。
该伪类在 2022 年由 Safari 浏览器首先开始支持，随后 Chrome 105 也启用了这个原生的 :has 伪类，那么这个新选择器的支持为什 ...
聊聊 CSS 隐藏元素的 10 种实用方法
CSS 隐藏元素的方法你能说出来几种？
这是一个在 web 前端面试中常会提及的基础问题，聊这个话题不仅仅只是讨论“茴”字有几种写法，更是能从一个简单的问题中体现出你的 CSS 边界能力，本文提炼了十种最实用的方法，希望对你有所帮助。
常规方法display: none;结构消失，会触发回流重绘（Reflow & Repaint）。
opacity: 0;结构保留，占据空间，可以正常触发事件，因触发硬件加速所以不发生回流和重绘。
visibility: hidden;结构保留，占据空间，仅触发重绘，不会触发事件（无法选中）。
content-visibility: hidden;设置元素内容可见性，设置的元素本身不受影响。hidden 隐藏效果与 display: none 类似，但实际浏览器只是跳过了内容的渲染，还保留着内容的渲染状态，性能上有优势。
注意：该属性目前还处于实验性阶段，使用时需要考虑浏览器兼容性问题。
逃逸视窗position + left/top利用绝对定位 position 设置 absolute 或 fixed，同时 left 或 top 设置 -9 ...
Electron打包错误的踩坑小记
windows墙内打包失败办法在网络环境不好(无科学上网)的条件下，项目可能可以启动成功却无法打包，注意查看报错信息，如下图所示：
这种都是缺少相关包导致的问题，根据报错信息手动下载相应的资源，放入 C:\Users\你的用户名\AppData\Local\electron\Cache 目录下即可。
淘宝镜像：https://npm.taobao.org/mirrors/electron/
NSIS下载：https://nsis.sourceforge.io/Download
我这里windows打包缺少了nsis，下载后放入目录如下：
之后再运行打包即成功：
any-note-book Setup 0.1.0.exe 为安装包，win-unpacked 为直接打开运行的程序。
不同系统 Cache 位置如下：
Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/ ...
他奠定了当今计算机算法的规范化和量化度量
如今的我们对算法可谓并不陌生，由于互联网发展迅猛，哪怕没有系统学习过计算机底层理论的程序员，也接触过无数的算法。
昨天笔者看到一个开放性思考题，内容是这样的：
如果一个程序只运行一次，在编写它的时候，你是采用最直观但是效率较低的算法，还是依然寻找复杂度最优的算法？
可能你心中已有答案，但这个问题我们放到文末再聊，本篇主要是科普向的算法入门文章，我将从最初的计算机讲起，用通俗易懂的话来带你重新认识下算法。
前言图灵提出了计算机的数学模型、冯·诺依曼确定了计算机通用的系统结构，而如果要问图灵和冯·诺依曼之后对计算机科学贡献最大的人是谁，那就不得不提到高德纳了，正是他奠定了计算机算法的基础。我们知道，没有控制程序，只有一系列硬件算不上是计算机，程序之于计算机是必不可少的，而程序的灵魂，就在于算法。
计算机诞生之初在早期计算机领域里，哪些控制功能要通过开关电路做成硬件，哪些又该由程序控制，这些边界其实不像如今这么清晰。
教科书上对世界第一台通用计算机的定义，是20世纪40年代所研制的电子计算机埃尼阿克（ENIAC），而事实上这台计算机在研制时也没有搞清楚程序是怎么一回事，它说到底还是一台专 ...
我写了个免费在线图库生成器，只需三步将你的手机相册搬到线上
项目背景作为一名阿宅，摄影可能是为数不多能让我出门的事情了，以前在广州有很多漫展，基本一两个月必有一场，我也经常会去蹭拍coser，不得不说拍照技术都是在那段时期锻炼出来的。可惜好景不长，这几年疫情反复不断，距离上一次我拿起相机甚至可以追溯到两年前，实在是泪目。既然不能出去拍照，那只能继续宅着敲代码度日了，于是就有了这个在线相册的小项目，用来方便自己放上一些觉得还不错的摄影作品，当然，也可以记录与展示一些生活照片。
这是一个纯前端的项目，不需要开发后端，没有数据库，只需要把照片丢进去，Git提交一下站点就出来了，就很简单。不用买服务器，不搞OSS，总之就是完全免费，全是白嫖的艺术，这篇文章中我会介绍整个项目的开发历程，看完你将收获：
一个 Vue3 + Node 快速生成漂亮的在线相册的项目
实现瀑布流、懒加载、Node解码图片、缩略图生成、元数据读取、提取颜色等技巧
快速集成一个音乐播放器，同步网易云歌单
如何部署仓库地址：https://github.com/palxiao/fast-album
fork项目，clone到本地，运行 npm run pre 安装依赖
把你的照 ...
原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理
前言本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能，无任何第三方依赖，兼容PC与H5，并介绍了如何仅通过指针事件进行多端统一的事件监听，如何实现触屏双指缩放等等，干货满满。
完整代码
为提升阅读体验，正文中代码展示均有部分省略处理。
点击查看完整源码
实现原理实现图片预览/查看的关键在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的 ...
你真的了解 CSS 径向渐变吗？
本文翻译自：《Do you really understand CSS radial-gradients?》所有第一人称口吻均指原作者本人，作者是 Microsoft Edge 开发人员体验团队的 PM，之前曾在 Mozilla 工作。
前言2022 年 10 月 24 日
七年前，我自学了所有关于CSS 线性渐变的知识，从那以后，我一直想了解更多关于径向渐变的工作原理。我花了很长时间才找到一个借口来深入挖掘其背后的逻辑，很庆幸我做到了。
为了学习如何使用radial-gradient CSS 功能，我尝试仅使用 CSS 绘制一双眼睛，仅使用一个元素 par eye，并且仅使用径向渐变。你可以看到是下面这个结果：
https://code.juejin.cn/pen/7159818547550486535
当然，这不是你见过的最好的人眼图（另外，它在 Safari 中无法正确渲染，请参阅浏览器支持部分中的原因），但它确实帮助我更多地了解径向渐变很有效，通过这篇文章，我希望你也能从中学到一两点。
语法描述从专业领域上讲，radial-gradient 语法如下所示：
1radial- ...
如何用 JavaScript 编写你的第一个单元测试
测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试，确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入，甚至可能有害的输入时。
为什么要进行单元测试？进行单元测试有许多不同的方法，一些主要目的是：
验证功能：单元测试确保代码做正确的事情并且不做任何不应该做的事情——大多数错误发生在这里。
防止代码回归：当我们发现错误时，添加单元测试来检查场景可以防止代码更改在将来重新引入错误。
记录代码：通过正确的单元测试，一套完整的测试和结果提供了应用程序应该如何工作的规范。
保护您的应用程序：单元测试可以检查可利用的漏洞（例如启用恶意 SQL 注入的漏洞）。
范围界定和编写单元测试使用单元测试框架使我们能够快速编写和自动化我们的测试，并将它们集成到我们的开发和部署过程中。这些框架通常支持前端和后端 JavaScript 代码的测试。
以下是帮助你编写性能单元测试和可测试代码的一些通用指南。
保持单元测试简短而简单不要编写过重的单元测试，测试应该只有几行代码来检查应用程序的简短功能块。
考虑正面和负面的测试用例虽然编写正确执行函数的测 ...
如何编写一个原生WebComponents组件
当今前端编程中，利用语义化的 HTML 结合 CSS 来完一个组件并不是一件难事，这也意味着无论在 React、Vue 中都可以插入，不过它俩不是今天的主角，接下来我将用一个例子来介绍如何封装一个完整的原生 HTML 的 Web Components 组件，让我们开始吧！
HTML结构首先我们来了解下 HTML 中的 <details> 元素，它可以用于创建一个小部件，其中包含仅在小部件处于“打开”状态时才可见的附加信息，<details>元素内可以包含的内容没有任何限制。
默认情况下，元素创建的小部件<details>处于“关闭”状态（open标签可使其打开）。通过单击小部件在“打开”和“关闭”状态之间切换，以显示或隐藏标签中包含的附加信息，内部标签 <summary> 元素则可为该部件提供概要。
一个简单的例子如下：
1234<details> <summary> 不能说的秘密 </summary> 藏的这么深，可还是被你发现了</details>
1234567891 ...
这道JS经典面试题不要背，今天带你彻底搞懂它！
前言这是一道非常经典的面试题，涵盖了从函数的基本概念、运算符优先级，到作用域链、原型链、this关键字、new关键字等基础知识点考察，可以说能完整答对 JS 基础才算过了关，本文就带大家回顾并剖析这道面试题，应该是全网最详细的文章了，这次彻底搞懂它。
1234567891011121314151617181920212223// afunction Foo () { getName = function () { console.log(1); } return this;}// bFoo.getName = function () { console.log(2);}// cFoo.prototype.getName = function () { console.log(3);}// dvar getName = function () { console.log(4);}// efunction getName () { console.log(5);}
...