我的 2024 年总结 R

2月 2, 2025

2024 年是意志坚定的一年，不管是工作、学习还是生活，来一起听一下 Gloria Gaynor 的《I Will Survive》。另外总结拖到现在才发出来的原因是，最近一个月 Windsurf 帮我写代码很上头，再没心思搞别的。现在不能再拖了，明天要开始新年第一天上班。 参与 AI# 年初和朋友有一次关于人工智能的聊天，无意地交流各自感兴趣的方向，手头在做的尝试，过后冷静下来我有了一些对于自己 …

零宽度空格与 CSS 换行行为 ByAI

11月 22, 2024

在解决 Tags 页面行尾词语被迫换行的问题时，发现   并不能强制连接字符，于是调查发现，还有零宽度空格这一概念。在 HTML 中，如果你需要一个既不会占用额外空间，又能用作连接的字符，可以使用零宽度符号，它们也是一种 HTML 实体（HTML Entities）。 零宽度符号# 1. 零宽度空格（Zero-Width Space）# HTML 实体：​ …

理解和使用 CSS 自定义属性（CSS 变量） ByAI

6月 30, 2024

在现代 Web 开发中，CSS 自定义属性（也称为 CSS 变量）提供了一种强大的方式来创建易于维护和灵活的样式表。本文将探讨如何定义和使用这些变量，以及如何通过它们来实现更高效的设计。 什么是 CSS 自定义属性？# CSS 自定义属性，也叫作 CSS 变量，是一种可以在 CSS 中定义并在整个文档中复用的变量。使用 CSS 变量，您可以避免重复定义相同的样式，从而更便于维护和更新。 …

2024 年我的工具列表 R

5月 30, 2024

从桌面端的应用软件这个角度来看，当下也是一个动荡的年代，不管是之前已经有的形态，还是还未出现的形态，也不管是开源的还是收费的，好用的新工具层出不穷，AI 的入场更是要把所有软件重新设计的节奏。我希望整理下最近几年一直在用的软件，记录当前的状态，这是相关主题的第一篇，争取后面每年都能关注下一下这个话题。 macOS# 首先需要声明下，我没有 Windows 电脑，哪怕打游戏也是在 MacBook 上 …

了解下自定义数据属性 data-* ByAI

5月 27, 2024

测试主题切换功能时，遇到了 data-theme 这个属性，问了下 gpt， 发现 data-theme 不是 CSS 标准中的预定义属性，而是一个自定义的属性。更准确地说，它是 HTML5 中的 “data-” 数据属性的一种。 HTML5 中的 “data-” 属性# HTML5 引入了 data- 属性，允许你为元素添加自定义的非标准属性。这些 …

使 HTML 元素居中有哪些方案？ ByAI

5月 25, 2024

有多种方式可以实现HTML标签的居中，具体的方式会根据需要居中的元素类型（块级元素还是行内元素）以及具体应用的上下文来决定。下面将介绍几种常见的方法，涉及到的知识包括 CSS 盒模型、Flexbox 布局和 Grid 布局等。 1. 居中块级元素# 1.1 使用 margin: auto# 这是最常用的方法，适用于块级元素的水平居中。 <div …

CSS Modules 是什么 ByAI

5月 20, 2024

CSS Modules 是一种 CSS 文件的模块化和组件化的解决方案。它允许你将 CSS 样式局部化到组件中，从而避免全局命名冲突问题。每个 CSS 类名和动画名称默认都被视为局部作用域的，只有在特定模块中才会生效。这种方式非常适合在现代前端开发中使用，特别是与组件化框架（如 React、Vue 等）结合使用时。 核心概念# 局部作用域# 在 CSS Modules 中，每个类名和动画名称默认都 …

了解 glob 模式匹配 ByAI

5月 18, 2024

在 Visual Studio Code（VSCode）以及许多其他工具和库中，文件路径匹配通常使用 glob 模式。 Glob 模式中的通配符# *：匹配任意数量的字符（不包括路径分隔符 /）。 **：匹配任意数量的目录层级，包括子目录。 ?：匹配单个字符。 [abc]：匹配方括号内的任意一个字符。 {a,b}：匹配花括号内的任意一个模式。 Wildcard Description …

使用 EditorConfig 和 Prettier 来规范代码风格 ByAI

5月 16, 2024

写前端代码实践下来一段时间，如果是我自己的前端项目，缩进类型一定是空格，长度必须是 2，因为 4 还是太长了，对 HTML 类的模板以及 js 代码不友好。但是如何约束队友呢，不论是有意还是无意的差异，为了让大家保持风格统一，我发现下面工具可以解决问题。 EditorConfig# https://editorconfig.org/ EditorConfig 插件使用 .editorconfig …

理解 useMemo、useCallback 和 memo ByAI

5月 15, 2024

虽然 React 的官方文档已经写的很清楚了，但我还是想总结下。形而上地讲前两个是 Hook，而 memo 是 API。形而下地说，useMemo、useCallback 和 React.memo 是 React 中用于优化性能的工具，它们帮助你避免不必要的重新渲染。 https://zh-hans.react.dev/reference/react/useCallback …