了解下自定义数据属性 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 …
CSS 中的 inherit 选项 ByAI
5月 14, 2024
在 CSS 中，inherit 关键字用于明确指定一个属性应从其父元素继承其值。几乎所有的 CSS 属性都可以使用 inherit 值，但并非所有属性默认继承自其父元素。使用 inherit 可以确保某个特定元素的属性值与其父元素相同，即使这个属性默认是不继承的。 以下是一些常见的 CSS 属性，它们通常不会自动继承父元素的值，但可以设置为 inherit 来强制继承： width …
我的 2023 年总结 R
12月 31, 2023
播放配乐 Blowing in the Wind - Bob Dylan，阅读效果更佳。 2023 这一年，工作上相当生活，生活上相当工作。 生活 # 因为生活上相当工作，所以我觉得还是先说生活，琐事我断断续续记录在了周报里，这里就不再重复，只说重点。 装修 # 人生第一次全程参与装修，学习相关行业知识，挑选装修公司，参与设计、施工，每项工作完成后都严格跟进质检，装修是今年我付出绝大部分心血的地 …
tar 命令中的绝对路径和相对路径使用注意 ByAI
3月 14, 2023
tar 命令是在 Linux 操作系统中用于打包和压缩文件的命令，先看下基本使用，然后再讨论相对路径和绝对路径的问题。 基本使用方法 # 压缩 # 要将多个文件打包成一个文件，可以使用以下命令： tar -cvf {输出文件名} {要打包的文件1} {要打包的文件2} ... 其中， c 选项表示创建一个新的压缩文件； v 选项表示显示详细的打包信息； f 选项表示指定要输出的文件名。 例如，要将 …
Python 的 dict.fromkeys 的坑
3月 10, 2023
目前使用到 dict.fromkeys 方法主要有两个场景：一个是按照数组的原有顺序去重，另一个就是正常的根据 keys 构建一个 dict，这里讨论的是第二种情况。 下面这个例子： l = ["foo", "bar"] v = {"age": 0} d = dict.fromkeys(l, v) …