重学系列

前言 我们在开发过程中会听到URI，这个和URL有什么区别呢？我们就来了解下其中的关系和区别。 我们先看一张图，大致了解其中的关系，再深入了解下： 1. 基本定义 1.1 URI URI（Unifor

前言 作为前端开发者，CSS过渡动画是我们提升交互体验的重要工具。本文将介绍CSS过渡动画的6种基础应用场景，包括悬停过渡(hover)、缩放(scale)、颜色变化(color)、尺寸变化(size

前言 作为前端开发者，CSS动画是我们必须掌握的核心技能。本文将系统介绍CSS动画的6种基础类型，包括位移（translate）、缩放（scale）、旋转（rotate）、尺寸变化（width/hei

前言 在日常开发中，我们经常遇见支付完成的情况，会有一个完成的动画。这次我们用css实现一个这样的动画，话不多说，先看效果： 1. 具体实现 1.1 实现思路 主要使用了​​SVG​​绘制圆形和打钩图

前言 我们实现一个拖拽留言板卡片，通常会使用js的方式去实现拖拽。这一次我们用纯CSS方式去实现，会带给你另一个思路，让你眼前一亮。 1. 基础知识 在说实现思路之前，我们先认识下一个css属性res

前言 视差滚动效果是一种视觉设计。这种效果通过让页面中不同元素创造出层次感，让网页看起来更加生动。 本文将详细介绍如何使用纯CSS实现滚动视差效果，重点分析三种不同的实现方式。 1. 实现思路 在CS

前言 web端验证码输入框常用于用户注册、登录、支付确认场景。与传统的单输入框验证码相比，多输入框分离能够有效防止自动填充和机器人攻击，同时提供更直观的用户体验。 本文将详细介绍如何使用纯前端技术实现

前言 在日常应用中，验证码是防止恶意攻击的重要手段。其中滑动拼图验证码的用户体验更好。 本文将详细介绍如何仅使用HTML、CSS和JavaScript实现一个纯前端的滑动拼图验证码功能，无需后端支持即

前言 滚动驱动的动画效果是提升用户交互体验的方法。本文将详细介绍如何使用纯CSS实现一个页面滚动的导航进度条效果，仅依靠CSS实现功能。 1. 效果演示 需要实现的效果是：顶部的导航栏进度条会随着页面

前言 在需求开发中，二维码扫码已经是一个非常常见的操作。前端实现中扫码需要添加对应的动画效果，是一个非常友好的体验。本文将详细介绍实现二维码扫码器动画效果。 1. 效果实现思路 需要实现这个效果，二维

前言 最近需要使用uniapp开发一个智能对话页面，其中就需要使用SSE进行通信。 本文介绍下在uniapp中如何基于uni.request实现SSE流式处理。 SSE传输格式 返回输出的流式块: C

1. BFF层架构 BFF（Backends For Frontends，​​服务于前端的后端​​）是一种架构模式，核心目标是为不同前端（如Web、App、小程序等）提供定制化的API接口，用于处理多

前言 本文主要介绍下Tailwind CSS V4版本更新的一些新特性。 1. 全新引擎 新引擎完全从头重写，带来的是： 速度提高10倍效率提升 占用空间更小 一个依赖项 自定义解析器 1.1 配置方

背景 常用的后台管理，需要快捷键进行快捷操作，提高用户的使用便利。接下来说明如何实现快捷键功能，需要支持的功能有： 支持单个和批量注册或者取消快捷键 支持组合键（如 Ctrl+S, Ctrl+Shif

前言 上两篇文章主要介绍vscode中debugger基本操作和常见语言的调试, 内容如下： 轻松玩转vscode中Debugger调试 轻松使用VSCode调试(TS、C/C++、Python、Ru

背景 先看一个问题：如何动态获取屏幕视口尺寸的大小，显示在页面上。 效果如下： 1. 使用js方式 正常我们的做法是使用js处理，这很简单。 如下所示： 如果只是这样，那就没有意思了。 下面介绍一种方

背景 日常开发中，我们使用固定大小的图片，但是对于不同的设备，设备像素比（dpr）的不同，图片的清晰度会受到影响。 我们可以在img标签中使用srcset和sizes属性来解决这个问题。 1. 不同d

前言 接上面一篇 轻松玩转vscode中Debugger调试之后, 仅说明了常规debugger的一些方式和概念。 如何通过vscode调试其他语言，我们进一步尝试。 接下来主要介绍下以下语言的调试过

前言 对于前端来说，vscode调试是我们必须要掌握的技能包。可能我们会简单的调试，但是不知道调试有哪些方式，也不清楚调试中launch.json配置的作用。 本文介绍下在vscode中调试的几种方式

本文中我们将了解如何使用 CSS Grid 的 subgrid 功能来对齐并排放置框的内容。 注意：在深入学习 subgrid 之前，了解 Grid 布局的基础知识很重要。可以参考MDN。 1. 问题