最近， Chrome 发布了 Chrome 125 稳定版本，其中我觉得最有亮点的新特性就是 CSS 锚点定位了。 我觉得 CSS 锚点定位 API （ CSS anchor positioning API ）可以在一定程度上改变 Web 的开发方式，因为它允许我们以原生方式定位相对于其他元素（称为锚点）的元素。 它可以帮助我们简化许多界面功能的复杂布局要求，例如菜单和子菜单、工具提示、选择、标签、卡片、设置对话框等。借助浏览器内置的锚点定位，我们可以在无需依赖第三方库的情况下简单构建分层用户界面。 此 API 的核心就在于锚点和定位元素之间的关系。 锚点指的就是使用 anchor-name 属性指定为参考点的元素，定位元素则是使用 position-anchor 属性或在其定位逻辑中明确使用 anchor-name 相对于锚点放置的元素。 创建锚点非常简单，将锚点名称属性应用于所选元素，并为其分配一...

没有一个会的 在晨会上，我要求我的团队成员小林编写一个 Node.js 脚本，自动化地将组件库 components 文件夹中的组件按以下格式在根目录的 index.ts 文件中导出： export { default as BasicTable } from './BasicTable'; 他有些为难地看着我说：“这个Node.js没学过，不会，要不要让其他人做？” 我扫视了一圈，没有得到回应，于是我一个一个点名，结果没有一个人表示能够完成，都说不熟悉Node.js。我感到困惑，毕竟他们作为有五六年前端经验的团队成员，连一个简单的 Node.js 脚本都不会写！ 不要过度神秘化 Node.js 脚本 有些人可能会误解 Node.js 脚本，认为它是用 Node.js 编写的。他们可能会觉得如果不懂 Node.js 的语法就无法编写 Node.js 脚本，感觉会写 Node.js 脚本就很神秘。实际上

JavaScript 是一种应用场景多且功能强大的语言，对于现代 Web 开发至关重要。以下是一些超级技巧，它们将帮助你成为更高效、更有效的 JavaScript 开发人员，每个技巧都有详细的解释和示例。 1. 使用 let 和 const 代替 var 问题： var 具有函数作用域，这可能导致错误和不可预测的行为。 解决方案：使用具有块作用域的 let 和 const 。 let count = 0; const PI = 3.14; 使用 let 和 const 有助于防止与作用域相关的错误，确保变量只能在定义的块内访问。 2. 默认参数 问题：如果没有提供参数，函数可能会失败。 解决方案：使用默认参数设置后备值。 function greet(name = 'Guest') { return Hello, ${name}! ; } console.log(greet()); // "Hello, Guest!" 默认参数确保函数具有合理的默认值，从而防止错误并使代码更加

现代 CSS 布局允许开发人员只需敲击几下键盘即可编写有意义且强大的样式规则。今天的内容主要是想和大家分享 10 个功能强大的 CSS 布局，它们做了一些非凡的工作。 01. Super center: place-items: center 对于我们的第一个“单行”布局，让我们解决 CSS 中最大的谜团：居中。我想让你知道，使用 place-items: center 比你想象的更容易。 首先，指定 grid 作为显示方式，然后，在同一个元素上写上 place-items: center 。place-items 是同时设置align-items 和justify-items 的快速方法。通过将其设置为居中，align-items 和 justify-items 都将设置为居中。 .parent { display: grid; place-items: center; } 这使得内容可以在父级中

前言 换肤功能是一项普遍的需求，尤其是在夜晚，用户更倾向于使用暗黑模式。在我负责的公司项目中，每个项目都有换肤功能的需求。 过去，我主要使用 SCSS 变量，并利用其提供的函数，如 @each、map-get来实现换肤功能。但因其使用成本高，只能适用于SCSS项目，于是后来我改用 CSS 变量来实现换肤。这样无论是基于 LESS 的 React 项目，还是基于 SCSS 的 Vue 项目，都能应用换肤功能。并且使用时只需调用var函数，降低了使用成本。 Demo地址： https://github.com/cwjbjy/vite-vue-ts-seed/tree/feature/css 1.一键换肤 1.1前置知识 CSS变量：声明自定义CSS属性，它包含的值可以在整个文档中重复使用。属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值 --fontColor:' fff' Var函数 ：用于使用CSS变量。第一个参数为CSS变量名称，第二个可选参数作为默认值 color: var(--fontCo

分享一个有趣的滚动特效 「庆余年2」 终于开播了 最近起点读书APP内上架了庆余年典藏书，最大的特色是里面新加入了全新的阅读皮肤，一个拟物化的卷轴滚动效果，效果如下 就是在拖动页面时，卷轴会随着页面的滚动而展开或卷起，就像在拖动真的画布一样，非常舒适，录屏可能看着不是很清晰，强烈建议去端内自行体验。 当时看到这个效果时就在思考，如何在 web 中也实现这样一个效果呢？🤔 经过一番琢磨，发现仅使用 CSS 就能完成这样的效果。下面是我复刻的效果 这是如何实现呢？一起看看吧 一、CSS卷轴滚动的原理 首先 CSS 中并没有真正的 3d 滚动，立方体还可以勉强拼接，这种圆形的不行，因此我们需要用其他方式来实现。 这里其实是一个最简单的平移动画，只需要将纹理上下无缝...

正常情况下，网页中的列表都是从左到右，从上到下的，如下 但有时候可能需要从上到下，从左到右的排列方式，就像这样 其实这种排序更符合日常生活中的排列方式。 虽然在网页中不常见，但如果真的碰到了这种布局，该如何处理呢？ 有些同学可能会想到用 JS 将元素数组分成三份，做成一个二维数组，然后每个数组嵌套一层容器水平排列就行了。其实呢，纯 CSS 也是可以完成的，一起来看看吧 一、grid 布局 很多同学很自然会想到 grid 布局。没错， grid 也能实现这样的效果，不过有些局限性。 简单写一下页面结构， HTML 如下 <pre data-line="32" <section <span </span <span </span <span </span </section <c...

在Web 开发领域中，CSS（层叠样式表）是构建网站视觉美感和布局的支柱。虽然许多开发人员熟悉常用的 CSS 属性，但仍有大量隐藏的宝石等待被发现。 在今天这篇文章中，我们揭示了 15 个隐藏的 CSS 属性，这些属性可能没有引起您的注意，但在增强您的网页设计能力方面具有巨大的潜力。 1.backdrop-filter: 此属性将图形效果（例如模糊或色移）应用于元素内容后面的区域。它非常适合创建磨砂玻璃效果或为元素添加微妙的视觉增强效果。 .element { backdrop-filter: blur(5px); } 2.clip-path： 剪切路径允许您定义剪切区域以有选择地显示元素的一部分，从而实现简单矩形之外的复杂且富有创意的形状。 .element { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } 3.mix-blend-mode: 此属性控制元素的内容与其背景混合的方式，提供与图形设计软件中类似的

前言 jquery时代更新视图是直接对DOM进行操作，缺点是 频繁 操作真实 DOM，性能差。react和vue时代引入了虚拟DOM，更新视图是对新旧虚拟DOM树进行一层层的遍历比较，然后找出需要更新的DOM节点进行更新。这样做的缺点就是如果DOM树很复杂，在进行新旧DOM树比较的时候性能就比较差了。那么有没有一种方法是不需要去遍历新旧DOM树就可以知道哪些DOM需要更新呢？ 答案是：在编译时我们就能够知道哪些节点是静态的，哪些是动态的。在更新视图时只需要对这些动态的节点进行靶向更新，就可以省去对比新旧虚拟DOM带来的开销。vue3也是这样做的，甚至都可以抛弃虚拟DOM。但是考虑到渲染函数的灵活性和需要兼容vue2，vue3最终还是保留了虚拟DOM。 这篇文章我们来讲讲vue3是如何找出动态节点，以及响应式变量修改后如何靶向更新。 注：本文使用的vue版本为 3.4.19 靶向更新的流程 先来看看我画的整个靶向更新的流程，如下图：![图片](https://static.developers.pub/83c8149bf0db47febb449a6794...

作为一门不断演进的语言，JavaScript每年都会引入新特性。这些特性的加入，能够帮助我们编写更加简洁、高效、易于维护的代码。然而，并非所有新特性都会立即广泛应用。它们的采用往往取决于社区的接受度以及浏览器的支持情况。比如我，会根据项目需求、团队习惯以及特性的成熟度来选择是否使用这些新特性。以下是一些我认为特别有用的新JavaScript特性，以及一些补充的实例代码，大家一起共勉。 可选链 可选链让我们能够以安全的方式访问嵌套对象的属性，避免因为中间某个属性不存在而抛出错误。 const user = {   profile: {     name: 'John Doe',     contact: {       email: 'john@example.com',     },   }, }; const userEmail = user.profile?.contact?.email; console.log(userEmail); // "john@example.com" const userPhone = user.profile?.conta

React 18 已经发布两年多了，现在终于要迎来 React 19 了。这个版本将引入期待已久的全新 React 编译器！它通过自动化优化来简化前端开发流程，减少手动进行记忆化优化的需求。本文就来看看 React 编译器是什么？它是如何工作的？又带来了哪些好处？ React 19 新特性 React 19 不仅是向前迈进的一步，而且想要改变开发人员在 React 中构建应用的方式。React 19 计划引入的一些最令人兴奋的特性包括： 服务端组件 ：通过服务端组件，React 19 能够实现更快的页面加载速度和更好的 SEO 效果。这意味着在将页面交付给用户之前，服务器会预先处理组件，从而提升用户体验和搜索引擎可见性。 Actions ：React 19 引入了 Actions，这是一个全新的机制，用于简化网页内数据和交互的管理。通过 Actions，开发人员可以更方便地通过表单更新页面信息，减少复杂性并优化用户体验。 优化的资源加载 ：React 19 在资源加载方面进行了优化，允许在后台加载站点资源，以实现更平滑的页面过渡。这意味...

1.配置浏览器网络速度 首先配置浏览器网络速度，使现象更明显。 1. 打开chrome控制台(按下F12)，选择No Throttling，并在Custom中选择Add 2. 对浏览器上传与下载速度进行限制 2. CSS加载不会堵塞DOM的解析，但会堵塞DOM的渲染 <!DOCTYPE html <html lang="en"   <head     <title

在不断发展的 Web 开发领域，掌握 CSS（层叠样式表）对于制作视觉上令人惊叹且响应迅速的网站至关重要。 然而，陷阱比比皆是，即使是经验丰富的开发人员也可能会发现自己陷入了常见的 CSS 错误中。 本文剖析了 15 个常见错误，提供分步说明和代码示例，帮助您创建完美的网页设计。 1. 过度依赖!important： 问题： 过度使用 !important 会导致代码混乱。 解决方案： 对于更干净和可维护的样式，优先考虑特异性而不是 !important。 / Incorrect / .element { color: red !important; } / Correct / section.element { color: blue; } 2. 使用通用选择器进行全局样式设置： 问题： 当使用通用选择器 ( ) 设计所有元素的样式时，会出现意想不到的后果。 解决方案： 选择特定的选择器来精确定位元素。 / Incorrect / {

介绍下 Node.js 近期更新的 3 个功能，每个都很实用哦！ 1. 自带 热更新 开发模式下，每次代码的修改我们期望无需重启代码即可看到最新的变化， nodemon 模块在这个场景已经是标配功能了。 有时只是写一个简单的脚本，做些测试或其它场景可能不太需要第三方模块，此时 Node.js “自带热更新” 功能就再合适不过了！ 一个 --watch 标志搞定这个场景。该标志首次添加于 Node.js v18.11.0，当前处于试验性状态。 执行命令 node --watch test.mjs 看到如下结果： 将输出结果 a 修改为 b 后，无须手动重启进程，可看到文件已自动刷新重启。 2. 内置环境变量支持 Node.js 21.7.0 版本增加了...

谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。 谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。 要开发谷歌浏览器插件，开发者通常需要创建一个包含 清单文件（manifest.json）、背景脚本（background script）、内容脚本（content script） 等文件的项目结构。清单文件是插件的配置文件，包含插件的名称、版本、描述、权限以及其他相关信息。背景脚本用于处理插件的后台逻辑，而内容脚本则用于在网页中执行JavaScript代码。 谷歌浏览器插件可以实现各种功能，例如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。开发者可以通过谷歌浏览器插件API来访问浏览器的各种功能和数据，实现各种定制化的需求。 插件开发涉及的要点： ![图片](https://static.developers.pub/adcad461f2f64cf4bceb343b4fb118f...