- 博客(1056)
- 资源 (39)
- 收藏
- 关注
RSS订阅原创 从Tailwind CSS回归SASS：一个前端团队的技术选型反思
在前端开发领域，技术选型往往会对项目的成败产生深远影响。最近，我们团队在开发一个基于React的实时聊天应用时，经历了从采用Tailwind CSS到最终回归SASS和CSS Modules的曲折过程。这段经历不仅让我们深刻认识到了技术选型的重要性，也为其他开发者提供了宝贵的经验教训。初期的美好愿景Tailwind CSS作为一个备受推崇的 utility-first CSS框架，最初吸引我们的是...
2024-09-21 10:10:48
80
原创 这一新的 JavaScript 操作符绝对能改变游戏规则
在JavaScript的发展历程中，我们不断见证着语言特性的革新。最近，一个名为"安全赋值操作符"（?=）的新特性引起了广泛关注。这个操作符不仅简化了错误处理的流程，还大大提高了代码的可读性和简洁性。传统上，我们处理可能抛出异常的代码时，常常需要使用try-catch块：而现在，借助?=操作符，我们可以将上述代码简化为：这种写法不仅消除了深层嵌套，还提供了更直观的错误处理方式。?=操作符允许我们在...
2024-09-20 08:34:43
113
原创 聚焦于 Web 性能指标 TTI
在优化网站性能的过程中，我们经常遇到一个“为指标而优化”的困境。指标并不能真正反映用户体验，而应该最真实地反映用户行为。在本节中，我们将研究 TTI（Time to Interactive）。在深入探讨这个话题之前，我们先了解一些背景知识。RAIL 模型RAIL 是一个以用户为中心的性能模型。每个 web 应用程序在其生命周期中都有四个不同的方面，这些方面以不同的方式影响性能：1.响应：输入延迟时...
2024-09-19 14:17:48
940
原创 告别CSS margin 和 padding 简写,拥抱更优雅的解决方案
在前端开发中,CSS的外边距(margin)和内边距(padding)是使用频率极高的属性。多年来,开发者们习惯使用它们的简写形式,例如:margin:10px20px15px5px;padding:5px10px;这种简写方式看似简洁,实则暗藏玄机。随着项目规模的扩大和设计需求的频繁变更,这种简写方式逐渐显露出其局限性。首先,我们回顾一下外边距和内边距简写的基本规则:一个值: 应用...
2024-09-17 10:25:04
343
原创 34.打字机效果 & 水平滚动贴合
打字机效果创建打字机效果动画。定义两个动画,typing 用于字符动画,blink 用于光标动画。使用 ::after 伪元素在容器元素中添加光标。使用 JavaScript 为内部元素设置文本,并设置包含字符数的 --characters 变量。这个变量用于文本动画。使用 white-space: nowrap 和 overflow: hidden 在必要时隐藏内容。<divclass=...
2024-09-15 21:39:12
178
原创 36.悬停时的透视变换 && 交替文字
悬停时的透视变换在元素上应用带有悬停动画的透视变换。使用 transform 与 perspective() 和 rotateY() 函数为元素创建透视。使用 transition 在悬停时更新 transform 属性的值。将 rotateY() 的值改为负数,可以从左到右镜像透视效果。<divclass="card-container"><divclass="ima...
2024-09-15 21:39:12
402
原创 35.交错动画 & 导航列表项的悬停和聚焦效果
交错动画为列表的元素创建交错动画。设置 opacity: 0 和 transform: translateX(100%) 使列表元素透明并将它们全部移到右侧。为列表元素指定相同的 transition 属性,除了 transition-delay。使用内联样式为每个列表元素指定 --i 的值。这反过来将用于 transition-delay 以创建交错效果。使用复选框的 :checked 伪类选择...
2024-09-15 21:39:12
104
原创 43.如何创建一个自适应暗色模式的自定义响应式网站图标?
近年来,随着暗色模式的兴起,许多网站图标在某些情况下感觉很尴尬,甚至无法看到。如果你有合适的资源,创建一个能适应用户配色方案偏好的响应式网站图标相对简单。为了创建一个响应式网站图标,你需要一个尽可能少颜色的SVG 图标,以及两种配色方案,一种用于浅色模式,一种用于暗色模式。关于图标清晰度和复杂性的常规规则适用,所以确保你的图标满足在任何情况下都能视觉上可区分的所有必要标准。在我们的示例中,我们将使用来自出色的 Feather 图标集的单色图标。利用 SVG 图像中的嵌入式样式和。
2024-09-15 21:29:41
187
原创 42. 自定义滚动条
为具有可滚动溢出的元素自定义滚动条样式。使用来设置滚动条元素的样式。使用来设置滚动条轨道(滚动条的背景)的样式。使用来设置滚动条拇指(可拖动的元素)的样式。💬 注意：滚动条样式似乎并没有在任何标准轨道上。这个技巧只适用于基于 WebKit 的浏览器。< div class = " custom-scrollbar " > < p > 这是一些示例文本。< br /> 这是一些示例文本。< br /> 这是一些示例文本。< br /> 这是一些示例文本。< br /> 这是一些示例文本。
2024-09-15 21:28:51
193
原创 41.在 CSS 中使用 clamp() 实现响应式排版
通过减少实现响应式排版所需的代码量和复杂性,它可以帮助你更快、更高效地创建现代、适应性强的网页设计。函数是创建响应式排版的一个非常有用和直观的工具。函数,它可以通过一行代码轻松创建响应式排版。使响应式排版变得更容易,但它并不能取代对排版原则的理解。在某些情况下,你可能需要更多的控制,或者你可能需要支持不支持。函数通过将所有这些合并为一个简洁、描述性的声明,大大简化了这一过程。在这些情况下,传统的媒体查询方法可能更合适。有关更复杂的示例,请查看"流式排版"代码段。只是帮助你实现你的设计愿景的工具。
2024-09-15 21:27:02
321
原创 40.带水平滚动的图片库
这个带水平滚动的图片库是 CSS 和 JavaScript 如何协同工作以创建引人入胜的交互式用户体验的一个很好的例子。通过理解这些技术,你可以创建真正独特而令人难忘的图片库和旋转木马,给你的用户留下深刻印象。它有一个固定的宽度和高度,允许垂直滚动。这个技巧创建了一个可水平滚动的图片库,有吸引人的滚动贴合效果和同步的缩略图导航。当用户滚动图片库时,它会平滑地贴合到每个图片,同时相应的缩略图会被突出显示。应用于每个单独的图片容器,确保它们贴合到滚动容器的开始边缘。选择器为当前活动的缩略图设置不同的背景色。
2024-09-15 21:26:00
367
原创 39.自定义单选按钮
创建一个样式化的单选按钮,在状态改变时具有动画效果。创建一个,并使用 flexbox 为单选按钮创建适当的布局。重置<input>上的样式,并使用它创建单选按钮的轮廓和背景。使用::before元素创建单选按钮的内圆。使用和 CSS 过渡在状态改变时创建动画效果。
2024-09-15 21:24:07
248
原创 38. 带浮动分区标题的列表 & 移动卡片
通过理解这些技术,你可以创建真正独特和令人难忘的用户体验,让你的网站脱颖而出。这个技巧创建了一个有趣的交互式卡片,当用户将鼠标悬停在卡片上时,卡片会移动并倾斜,创造出一种 3D 效果。过度使用或在错误的地方使用可能会分散用户的注意力,或使你的设计看起来杂乱无章。这个技巧在许多情况下都很有用,例如字母顺序的联系人列表,或者按类别分组的项目列表。当用户滚动列表时,每个分区的标题会粘附在列表的顶部,直到下一个分区将其推离屏幕。当滚动列表时,每个分区的标题会浮动在内容的顶部,提供清晰的视觉结构。
2024-09-15 21:20:38
494
原创 理解生成器在2024年的秘密力量
JavaScript，这门编程语言中的变色龙，总是让我惊叹不已。就在你认为已经掌握了它广阔的领域时，它又揭示了另一个强大的特性，推动你更深入地探索。今天，我想带你踏上探索这样一个特性的旅程：生成器（Generators）。JavaScript 中的生成器乍看之下可能像是一个小众工具，但一旦你理解了它们的真正潜力，你就会明白为什么即使在 2024 年，它们仍然保持着相关性和强大。什么是生成器？????让我...
2024-09-14 08:35:20
261
原创 为什么在JavaScript中 [] == ![] 返回 TRUE？
这毫无道理。一个数组怎么可能不是一个数组呢？[] 是真值，而 ![] 应该是 false。那么 [] 怎么可能等于 false 呢？而且这种情况似乎并不发生在其他类型上，比如字符串和数字：JavaScript的数组是不是坏了？这里发生了什么把所有的责任都推给危险的 == 运算符。这只是我们总是告诉JavaScript新手永远不要使用它（真的永远不要）的又一个例子。尤其是如果他们之前一直在使用像C#...
2024-09-11 08:35:30
409
原创 7 个鲜为人知的 JavaScript Console 方法
在使用 JavaScript 进行调试时，console 对象的方法不仅仅只有 log、error 和 warn。你是否知道 console 其实有多达 20 种不同的方法？它们不仅仅用于记录文本，还可以实现丰富多彩的数据可视化、调试、性能测试等等。以下是 7 个强大的 console 方法：1. trace()想知道代码是从哪一步开始调用的吗？使用 trace() 可以回溯调用栈，非常适合调试。...
2024-09-10 08:35:25
475
原创 停止使用 `let` 或为什么它在 JavaScript/TypeScript 中是不必要的
你可能已经遇到 let 关键字上百万次了。它是 JavaScript（以及扩展的 TypeScript）中那些最初看起来像是救星的特性之一。终于有了一种声明变量的方式，可以尊重块级作用域！var 造成提升和产生反直觉 bug 的日子一去不复返了。但是重点来了：在 2024 年，使用 let 可能是你在代码中做的最不必要的事情之一。没错，你没听错。是时候停止使用 let 了。让我来解释一下为什么，什...
2024-09-09 08:34:35
615
原创 79.Options Object 模式
有许多模式可以用来改进你的组合式函数（composables）。使用对象来传递参数是一种非常有用的模式，在很多地方都有使用 — 只需看看 VueUse 的源码就知道了。但是，虽然这种模式乍看起来很简单，在实现时还是有一些需要考虑的事项：当你有很多选项时会发生什么？真的很多？当你只有几个选项时该怎么办？如何判断你是否在错误地使用这种模式？在本文中，我们将探讨 Options Object 模式。...
2024-09-08 10:41:16
561
原创 如何编写技术文档
为软件系统编写文档在软件开发中并不是什么新鲜事。几乎每个人都明白这个原则:你的软件产品对用户来说有多优秀并不是最重要的,因为如果你的文档不够好,用户就不会使用它!即使在某些情况下用户不得不使用你的产品,他们也需要好的文档才能高效使用,否则可能会误用你的产品。不幸的是,几乎没有正确组织技术文档的实践和方法论。在团队合作中,编写文档仍然面临挑战。仓促开始和结束编写技术文档的任务似乎总是优先级很低:它需...
2024-09-07 10:22:53
1018
原创 曾经非常厌恶 SSR，现在终于不再需要它了 | 如何在考虑 SEO 的情况下构建 CSR 应用...
SSR（服务器端渲染）曾经被誉为解决单页应用（SPA）在性能和 SEO 问题上的灵丹妙药，而这正是一个快速发展的领域。然而，在 2024 年，SSR 真的仍然是它通常被认为的那种万全之策吗？在这篇文章中，我将讨论为什么 SSR 可能被高估了，以及当代的工具和技术如何让我们仅使用 CSR（客户端渲染）就能实现同样的目标。什么是 SSR 以及我们为什么需要它？????服务器端渲染（SSR）指的是在服务器上渲...
2024-09-06 08:35:15
943
原创 我尝试重现 React 的 useState() Hook 并失去了工作机会 | 高级 React
在 React 中创建自定义钩子（hooks）是一个非常有价值的练习，甚至可以说是许多开发者的“啊哈”时刻。剧透警告：第一次尝试是在 Revolut 的一次高压面试中，结果并不如意。在这篇文章中，带你一起回顾我重现著名的 useState() 钩子的历程，称它为 useMyState()。同时，我也会给出一些建议，帮助你下次面试时避免失败。让我们一起来探讨哪里出了问题，我是如何重新拾起信心的，以及...
2024-09-05 08:02:40
1064
原创 Next.js国际化全面指南
Next.js作为一个流行的React框架，为构建多语言支持的应用程序提供了强大的支持。本指南将引导你完成在Next.js项目中实现国际化(i18n)的步骤。我们将涵盖路由设置、本地化处理和翻译内容管理。理解国际化术语区域设置（Locale）区域设置是一组语言和格式化偏好的标识符。它包括用户的首选语言，也可能指示他们的地理区域。例如：'en-US'：美国使用的英语'nl-NL'：荷兰使用的荷兰语'...
2024-09-04 10:10:49
447
原创 停止使用 .d.ts 文件（如果你想让你的应用变慢） | 高级 TypeScript
TypeScript 自推出以来已经走了很长一段路，现已成为为 JavaScript 添加类型安全的首选工具。无论你是经验丰富的 TypeScript 老手，还是刚刚入门的初学者，你可能都遇到过 .d.ts 文件——这些神秘的类型声明文件似乎有自己独立的世界。在这篇文章中，我们将深入探讨为什么在 2024 年我们需要使用 .d.ts 文件，它们如何融入我们的开发流程，以及什么时候你可能更愿意坚持使...
2024-09-03 08:35:35
1145
原创 Vue 3.5 即将到来：探索最新特性与性能提升
Vue 正在为 Vue 3.5 版本进行准备。这一新版本（目前处于 Alpha 阶段）带来了一系列的增强功能、新特性以及重要的改动，以提升开发者和用户的体验。根据官方的更新日志，我们来看看 Vue 3.5 中即将推出的内容。github:https://github.com/vuejs/core/blob/minor/CHANGELOG.md响应式属性解构响应式属性解构已经处于实验状态大约一年了，...
2024-09-02 08:30:56
1171
原创 32.带前缀的输入框 & 带图像剪切的卡片
带前缀的输入框创建一个带有可视化、不可编辑前缀的输入框。使用 display: flex 创建一个容器元素。移除 <input> 字段的边框和轮廓。将它们应用于父元素,使其看起来像一个输入框。使用 :focus-within 伪类选择器来相应地设置父元素的样式,当用户与 <input> 字段交互时。<divclass="input-box"><s...
2024-09-01 10:20:30
290
原创 30. 如何确保页脚始终位于页面底部? & 弹跳加载器
如何确保页脚始终位于页面底部? & 弹跳加载器如何确保页脚始终位于页面底部?防止页脚在页面上浮动对于创建精美的网站很重要。内容较少的页面可能会遇到这个问题,但使用几行 CSS 就可以轻松解决。假设你的 HTML 类似于下面的代码片段,这里有两种现代方法来确保页脚始终位于页面底部:<body><main><!--主要内容--></main&...
2024-09-01 10:20:30
258
原创 31.高度过渡 & 带粘性分区标题的列表
高度过渡当元素的高度未知时,将元素的高度从 0 过渡到 auto。使用 transition 指定 max-height 的变化应该被过渡。使用 overflow: hidden 防止隐藏元素的内容溢出其容器。使用 max-height 指定 0 的初始高度。使用 :hover 伪类将 max-height 更改为由 JavaScript 设置的 --max-height 变量的值。使用 Elem...
2024-09-01 10:20:30
292
原创 79.高效的状态管理
高效的状态管理如何更有效地在应用中组织状态？这是我多年来一直在思考的问题，因为状态在应用开发中至关重要，但也很难掌控。我的主要建议是：尽量将状态向组件树的底层推进——但不要过头。在解释为什么之前，我们需要先了解两个概念：状态距离（State Distance）和状态范围（State Scope）。这些概念支撑了关于状态的大部分讨论，并在我们探索如何更好地结构化状态时非常有用。它们帮助我澄清了自己对...
2024-08-31 09:08:43
163
原创 37.悬停时的图像叠加效果 & 鼠标光标渐变跟踪
通过理解这些技术,你可以创建真正独特和吸引人的设计,让你的用户感到愉悦和投入。通过理解这些技术,你可以创建真正独特和吸引人的图像库和展示,给你的用户留下深刻印象。始终提供禁用动画的选项,并确保你的设计在没有任何悬停效果的情况下仍然可用。这个技巧创建了一个引人入胜的图像叠加效果,当用户将鼠标悬停在图像上时,会显示额外的信息。你也可以尝试不同类型的渐变,如线性渐变或锥形渐变,以创建独特的视觉效果。变量,跟踪鼠标的位置。过度使用或在错误的地方使用可能会分散用户的注意力,或使你的设计看起来杂乱无章。
2024-08-30 22:54:47
2272
原创 36. 悬停时的透视变换 && ### 交替文字
通过理解这些技术,你可以创建真正独特和令人难忘的网页设计,给你的用户留下深刻印象。通过理解这些技术,你可以创建真正动态和互动的网页设计,给你的内容增添活力和个性。这个技巧使用 CSS 3D 变换创建一个有趣的视觉效果,当用户悬停在元素上时,元素似乎在 3D 空间中旋转。确保动画的速度足够慢,以便舒适地阅读,并提供一种暂停或禁用动画的方法。如果交替的文本包含重要的关键词或短语,请确保它们也出现在页面的静态部分。这个技巧创建了一个有趣的视觉效果,文本似乎在不同的单词之间交替。将显示数组中的第一个单词。
2024-08-30 22:52:24
2251
原创 35. 交错动画 & 导航列表项的悬停和聚焦效果
这个导航列表项悬停和聚焦效果是 CSS 伪元素和变换如何协同工作以创建引人入胜的用户体验的一个很好的例子。此外,过度使用或不恰当地使用这种效果可能会分散用户的注意力,或使你的导航看起来杂乱无章。当用户与导航项交互时,一个彩色的背景似乎从链接的中心扩展开来,创建了一个引人注目的视觉效果。这个技巧创建了一个有趣的悬停和聚焦效果,当用户与导航项交互时,导航项似乎在扩展。这可以帮助指示当前或潜在的选择,提高导航的可用性。确保导航在没有悬停效果的情况下仍然可用,并为使用键盘导航的用户提供清晰的焦点指示。
2024-08-30 22:50:52
2527
原创 34. 打字机效果 & 水平滚动贴合
需要注意的是,虽然滚动贴合是一个强大的工具,但它不应该被过度使用。确保贴合点是逻辑的,增强了用户体验,而不是喧宾夺主。过度使用或在不恰当的地方使用可能会分散用户的注意力,或使你的页面难以阅读。这个技巧创建了一个水平滚动的图片库,当用户停止滚动时,图片会自动贴合到视口的中心。它告诉浏览器,滚动应该在水平方向上"贴合",并且贴合是强制性的,意味着滚动将总是结束于一个贴合点。你可以通过改变网格的尺寸、图片的样式或贴合的位置来轻松定制这个效果。这定义了每个元素应该贴合的位置——在这种情况下,是在容器的中心。
2024-08-30 22:04:53
841
原创 JavaScript中的新数组切片表示法——array[start:stop:step]
使用这种新的切片表示法，我们将不再编写如下的 slice() 代码：而是可以像这样编写代码：这种写法不仅更简洁、可读性更强，而且更直观。更棒的是，我们不必等到它正式发布——现在就可以使用它。你可以通过扩展 Array 类来实现这个功能：处理未指定的结束索引如果我们省略第二个数字（即 end 参数），数组会切片到最后一个元素吗？它不会这样做？这是因为 end 被赋值为空字符串，而 Number(''...
2024-08-30 08:32:21
638
原创 React Native 0.75 重磅发布：性能飞跃与重要更新全面解析
React Native 0.75 的发布标志着一个重要的里程碑，该版本通过一系列有影响力的更新和更改，旨在提高性能、稳定性和整体开发者体验。以下是此版本中包含的增强功能、新特性和重大更改的全面概述。亮点 ????Yoga 3.1 的增强和布局改进React Native 0.75 引入了 Yoga 3.1，它带来了一些增强功能和新的布局能力。一个重要亮点是对布局属性（如间隙和位移）的百分比值的支持。这...
2024-08-29 08:30:49
1069
原创 新消息：Node.js 终于内置 TypeScript 支持
令人兴奋的消息！Node.js 终于迎来了原生的 TypeScript 支持！是的，现在你可以在 Node.js 中直接使用 TypeScript 类型了。看来我可以把 typescript 和 ts-node 扔进垃圾桶了。❌ 在此之前：Node.js 只支持 JavaScript 文件。像下面这样的代码根本无法运行：尝试运行时，你会得到一个令人不悦的错误提示：我们以前的最佳选择是安装 Type...
2024-08-28 08:31:57
1008
原创 在JavaScript中从外部解决Promise：实际应用场景
这是JavaScript中那些在现实世界中极其强大的酷炫技巧之一。强大的实际应用场景动作(A)等待另一个动作(B)A正在进行，但用户想做B，而A需要先发生。例如：社交应用，用户可以创建、保存和发布帖子。就像Medium。<p>Savestatus:<b><span id="save-status">Notsaved</span><...
2024-08-27 08:35:26
339
1
原创 JavaScript 中的 bind()、apply() 和 call()：鲜为人知的差异
每个开发者都应该充分理解它们的工作原理，并能够辨别它们之间的微妙差异。首先要知道，JavaScript 函数是“一等公民”。这意味着它们都是对象值——所有函数都是 Function 类的实例，拥有方法和属性：因此，bind()、apply() 和 call() 是每个 JavaScript 函数都具备的三个基本方法。bind()你还记得 React 的早期痛苦时代吗？当时我们仍在使用类组件，并且事...
2024-08-26 08:35:24
741
原创 33.鼠标悬停时的波浪线效果 & CSS 重置
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
2024-08-25 08:29:31
530
原创 33.带前缀的输入框 & 带图像剪切的卡片
通过理解这个技巧背后的概念,你可以创建你自己的独特变体,适应你的特定需求和风格。当所有这些样式组合在一起时,它们创建了一个引人注目的卡片设计,图像看起来像是从背景中剪切出来的。这个技巧的优点是它创建了一个视觉上统一的输入体验,而不需要 JavaScript。确保任何重要的文本内容都包含在真实的 HTML 元素中,而不仅仅是背景图像,以便屏幕阅读器用户可以访问。图像看起来像是从卡片的背景中剪切出来的,创造了一个有趣的视觉效果。它使用较小的字体大小和较浅的颜色,以便与实际的输入文本区分开来。
2024-08-25 08:28:33
45
原创 31. 高度过渡 & 带粘性分区标题的列表
这个技巧在任何你有一个长的、分区的列表的情况下都很有用,比如字母顺序的联系人列表,或者按类别分组的产品目录。这个技巧创建了一个平滑的高度过渡效果,当用户悬停在触发器元素上时,会展开一个隐藏的元素。当用户滚动列表时,每个分区的标题会留在列表的顶部,直到下一个分区将其推离屏幕。它提供了一种简单而有效的方法,可以在不需要时隐藏内容,同时在需要时允许平滑地访问内容。当用户滚动列表时,每个分区的标题会粘附在容器的顶部,直到下一个分区的标题将其推离屏幕。在非常小的屏幕上,你可能需要调整列表的高度或标题的样式。
2024-08-25 08:27:30
66
ZigBee和重力传感器
2013-01-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人