本文翻译自ExamplesofGreatURLDesign，作者：JimNielsen，略有删改。 以下是KyleAster关于URL的设计为何重要的观点（2010年）： URL是通用的。它们可以在Firefox、Chrome、Safari、InternetExplorer、cURL、wget、iPhone、Android中使用，甚至可以写在便签上。它们是网络的一种通用语法，但别认为这是理所当然的。 我喜欢这个关于URL无处不在的提醒。它们不只是用来在浏览器栏里打字的。它们有很多用途： 作为脚本的时候抓取数据以及其他编程数据检索的地址。 作为参考，写在实体书的脚注和附录中。 作为可操...

本文翻译自MakeVue'stemplaterefsclean&simple，作者：RoobinSơn，略有删改。 在Vue项目中有时候我们可能需要直接访问模板中的DOM元素。一个常见的用例是，当我们为组件定义expose（defineExposes）时，父组件需要访问该组件来调用已暴露的函数或属性。 当我第一次使用Vue的templaterefs时，我感觉有些奇怪。这是一个例子： <template> <inputref="input"/> </template> setup脚本： <scriptsetup> import{ref...

2023-12-11AntDesign发布5.12.2版本。 🐞MISC:修复React17以下使用webpack构建时报错useId找不到的问题。46261Pagination 🐞修复Pagination在低版本浏览器上报错的问题。react-component/pagination545 🐞修复Paginationsimple模式下current受控选中分页不生效的问题。react-component/pagination546 🐞修复Table筛选菜单在CSS变量模式下丢失背景色的问题。46314 🐞优化Spin交互，全屏状态时禁止用户触发鼠标事件。46303@li-jia-...

本文翻译自13HTMLAttributesYouShouldKnowAbout，作者：Shefali，略有删改。 在HTML中，属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性，它们可以增强网站的视觉吸引力。 接下来开始吧！🚀 Accept属性 您可以将accept属性与<input>元素（仅用于文件类型）一起使用，以指定服务器可以接受的文件类型。 <inputtype="file"accept=".jpg,.jpeg,.png"> ALT属性 您可以将alt属性与<img>元素一起使用，以指定图像无法在网页上显示时的替代...

本文翻译自TheCSSpropertyyoudidn'tknowyouneeded👈，作者：FrancescoVetere，略有删改。 大家好！👋今天我想谈谈一个CSS功能，在我看来没有得到太多的关注。但它应该被关注！我说的就是isolation属性！ 基本上它提供了更多对元素与文档其他部分交互的控制，并且通常是解决z-index问题的一种优雅的解决方案。 让我们从一个实际的例子开始。我做了一个简单的卡片： 它的HTML代码非常简单，如下所示： <articleclass="card"> <headerclass="card__header"> <img...

本文翻译自CSSNesting，作者：AhmadShadeed，略有删改。 如果你是一个前端开发人员，那么你应该使用过CSS预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能，我一直都在使用CSS预处理器。 今年所有的主流浏览器都支持原生CSS嵌套：Chrome、Firefox和Safari。这是一个重要的CSS功能，这将使编写CSS更加容易。在本文中我将记录到目前为止我所学到的关于CSS嵌套的知识，并与您分享我的发现，包括使用案例和示例。 介绍 CSS嵌套是许多开发人员期待已久的功能之一。我们曾经依赖于CSS预处理器，如Sass或Less。让我们来回顾一下以前的做法： 请看下面的...

本文翻译自ABetterFrontendComponentStructure:ComponentTrees，作者：WilliamBernting，略有删改。 自很久以前遵循互联网上的建议以来，我一直采用了某种“能工作就行”的组件结构。 场景 让我们首先想象一个简化的前端应用程序目录结构，如下所示： public/ some-image.jpg pages/ index.tsx components/ Heading.tsx Logo.tsx Layout.tsx BoxContainer.tsx Footer.tsx 问题所在 上面的简单应用程序结构很难解释这些组件之间是如何相互作用...

在React中，组件之间的通信是一个非常重要的话题。当我们构建复杂的应用程序时，经常需要不同的组件之间共享数据或者进行相互协作。React提供了几种方式来实现跨组件通信，下面我将详细其中几种通信方式，并提供实际的代码示例。 使用ReactContext 基于ReactContext实现跨组件通信的一个常见用例是创建一个能够在不同组件间共享和触发行为的上下文。以下是一个简化的例子，展示了如何在app.tsx中触发其他组件（例如，一个弹窗组件）中的方法。 1.创建一个Context 首先，我们创建一个新的Context。这个Context将包含我们想要在应用中共享的方法。 importReact,...

本文翻译自10Must-KnowGitCommandsforSoftwareEngineers，作者：RabiSiddique，略有删改。 Git和GitHub是每个软件工程师必须知道的最基本的东西。这些工具是开发人员日常工作的组成部分，因为我们每天都与它们互动。熟练掌握Git不仅可以简化你的工作，还可以显著提高工作效率。在这篇博客文章中，我们将探索一组命令，可以大幅提升你的生产效率。随着你对这些命令变得更熟练，你将节省宝贵的时间，并成为一个更有效率的软件工程师。 Git常用术语 现在，在我们探索Git命令之前，让我们熟悉一些基本的Git术语。以帮助您更好地理解命令，避免在本博客的后面部...

如图所示，这是一个文本阴影效果，阴影有多个颜色，鼠标悬停时文本阴影效果消失，文本回到正常的效果。让我们逐步分解代码，看看如何使用纯CSS实现这个效果的。 基于以上动图可以分析出以下是本次实现的主要几个功能点： 文本有多个颜色的阴影的效果 文本有空心镂空的效果 鼠标悬停时文本回到正常效果 鼠标悬停时英文字体的粗细有变化 实现过程 多层颜色阴影 文字的阴影用text-shadow实现，但是一般情况下我们都是只控制一个颜色，多个颜色应该怎么控制呢？其实该属性支持添加多个文本阴影层，以创建特殊的阴影效果。每个层各自控制水平偏移量、垂直偏移量、模糊半径和颜色定义。这里的多个颜色的阴影代码如下： t...

如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。 在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。 实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如果页面是使用服务端选择则不需要这个初始化的JS。 以下是本次实现的主要几点： 整体文本布局呈正方形，包含需要高量的英文单词，但也包含一些不需要高亮的字母，仅是为了组合整个正方形布局 时间的跳动不是以一分钟级别的进行，而是以英文5分钟级别跳动 当前时间所需单词需要高亮 不需要使用JS定时器，...

如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。 基于以上动图效果可以分析以下是本次动效实现的主要几点： 文本中有多个颜色的动画 每个颜色显示的半径不同，有大有小 整体动画是有规律的重复进行着 实现过程 接下来开始正式的代码实现过程，通过以上可以分析出会有多个元素来实现颜色的动画，每个元素的动画轨迹和运行速度不一致，但当多个不同颜色的元素和文本结合起来就会产生一种很美丽的效果，这里的动画元素和文本结合是用了一个很重要的属性，混合模式mix-blend-mode，对于混合模式文本不做详细介绍，这是一个很强大的属性，有兴趣的可以了解看看...

在开发中可能有遇到过屏幕录制的需求，无论是教学、演示还是游戏录制，都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多，现在浏览器中的MediaRecorder也提供了这种能力。MediaRecorder是一种强大的技术，可以在浏览器端实现屏幕录制功能。本文将介绍如何使用JSMediaRecorder实现屏幕录制。 代码实现 要实现屏幕录制，我们需要通过navigator.mediaDevices.getDisplayMedia()方法获取屏幕媒体流，这个方法会弹出一个选择窗口，让用户选择要录制的屏幕或窗口。但出于安全原因，发起录制时必须确保用户手势触发捕获，例如点...

如图所示，这是一个很炫酷的卡片效果，关键效果在于卡片的边框呈渐变色变化着，在网页中有这样一个卡片相信可以极大的增强用户体验交互。本次文章将解读如何使用纯CSS实现这个炫酷的卡片效果。 基于上面的动图可以分析出以下是本次实现的主要几点： 卡片的边框是渐变色 卡片的边框呈顺时针动画 卡片底部还有阴影随着边框动画而变化 鼠标悬停时动画隐藏显示静态的卡片 实现过程 看到这样的边框首先要想到的是CSS本身是不支持这种效果的，所以需要从其他的地方入手，其实实现的方式很简单，卡片黑色内容区域是一个独立的盒子，看到的渐变边框区域是另一个盒子，只不过内容区域的层级更高且四周都空出了边框的距离，所以肉眼看到...

如上面gif动图所示，这是一个很炫酷的文字动画效果，文字的每个字符呈波浪式的扩散式展开。本次文章将解读如何实现这个炫酷的文字效果。 基于以上的截图效果可以分析出以下是本次要实现的主要几点： 文案呈圆环状扩散开，扩散的同时文字变小 文字之间的间距从中心逐个扩散开，间距变大 文案呈圆环状扩散开，扩散的同时文字变大 文字之间的间距从中心逐个聚拢，间距变小 动画重复执行以上4个步骤 实现过程 核心代码实现需要基于一下两个库： Letterize.js是一个轻量级的JavaScript库，它可以将文本内容分解为单个字母，以便可以对每个字母进行动画处理。这对于创建复杂的文本动画效果非常有用。 使用...

目前市面上的前端代码质量评分中的代码可维护度是大都是基于typhonjs-escomplex这个库扫描而来，但是这个库的官方文档并没有介绍相关指标数据的计算规则，不知道规则如何提升指标数据呢？所以本文对typhonjs-escomplex源码进行探索，探索其关键指标计算逻辑。 使用方式 使用方式很简单，引用后调用analyze方法传入需要检测的源代码即可。 importescomplexModulefrom'typhonjs-escomplex-module'; constast=<someparsedAST>; constreport=escomplexModule.anal...

本文翻译自UnderstandingtheJavaScriptModuloOperator，作者：joshwcomeau，略有删改。 当我第一次学习编码时，我记得发现模运算符（%）非常令人困惑。😬 当你不明白它的原理的时候，它产生的值看起来完全是随机的： constwhat=10%4;//2 constthe=10%10;//0 constheck=4%10;//4 在这篇文章中，我们将通过改进除法的心理模型来学习这个运算符是如何工作的，文末还将介绍一个实用的日常实践。 受众群体:这篇博客文章是为初级到中级JavaScript开发人员所写。一些JavaScript知识是假设的，但核心...

在如今的互联网时代，网页源码的保护显得尤为重要，特别是前端代码，几乎就是明文展示，很容易造成源码泄露，黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的Web开发者工具面板，今天推荐一个不错的npm库，可以帮助开发者更好地保护自己的网站源码，本文将介绍该库的功能和使用方法。 功能介绍 npm库名称：disable-devtool，github地址：github.com/theajack/disable-devtool。从f12按钮，右键单击和浏览器菜单都可以禁用Web开发工具。 🚀一行代码搞定禁用web开发者工具 该库有以下特性: 支持可配置是...

本文翻译自CSSFindingsFromPhotoshopWebVersion，作者：Ahmad，略有删改。 几周前，Adobe发布了一个Web版的Photoshop，它是用WebAssembly、Web组件、P3颜色等网络技术构建的。 Photoshop是我14岁时学会的第一个专业设计应用程序。这是我成为设计师并最终成为前端开发人员的原因之一。正因为如此，我认为看看CSS是如何助力像Photoshop这样的大型应用开发会很有趣。 在这篇文章中，我将分享在Web版的Photoshop中我觉得有趣的CSS发现。 Photoshop旧版Logo 我注意到的第一件事是在浏览器控制台中使用Pho...

本文翻译自Node.js21isnowavailable!，来源：TheNode.jsProject，略有删改。 我们很高兴地宣布Node.js21的发布！亮点包括V8JavaScript引擎更新到11.8，稳定fetch和WebStreams，一个新的实验性标志来切换模块默认值（--experimental-default-type），一个内置的WebSocket客户端，我们的测试运行器的更多更新，等等！ Node.js21将取代Node.js20作为我们的“当前”发布线，当Node.js20在本月晚些时候进入长期支持（LTS）时。根据发布时间表，Node.js21将在未来6个月内发布，...