使用一行 CSS 去除图像背景

1 月 21 日
阅读 2 分钟
134
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读通过一个 CSS 属性,你就能去除任何图像的背景。这一属性在大多数现代浏览器中都得到了支持。假设你遇到这样的情况:你已经完成了一个很棒的布局,完全响应式,效果也如预期。但有几张图像的背景与网站的背景不匹配,就像下面这张图:图像的背景颜色与预期的背景色完...

Next.js 与 React.js 的对比分析

1 月 17 日
阅读 3 分钟
295
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读核心区别的理解 React.js 是一个专注于构建 UI 组件的库,它灵活但需要自行搭配其他工具(如 React Router)才能构建完整的应用。 而 Next.js 则是在 React 基础上发展出来的框架,自带服务端渲染(SSR)、静态站点生成(SSG)和 API 路由等特性,更倾向于为你提供一...

只有 2% 的开发人员知道的 7 种神奇 JavaScript 数组方法

1 月 17 日
阅读 3 分钟
178
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读很多人使用 JavaScript 数组时,最多就是 for 循环、map() 或者 filter() 等常见方法,但其实数组还有不少“隐藏招数”。这篇文章介绍的 7 个方法,也许会让你眼前一亮。1. copyWithin()想象一下:取走一片披萨,然后又把它塞回披萨盒的另一个角落,这就是 copyWithin()...

Monorepo设置:新手指南

1 月 17 日
阅读 4 分钟
287
Monorepo是一种项目代码管理方法,指在单个代码仓库中管理多个项目,有助于简化代码共享、版本控制、构建和部署的复杂性,并提供更好的可重用性和协作性。

为什么我喜欢在 CSS 中使用 RegEx

1 月 16 日
阅读 2 分钟
227
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读说到正则(RegEx),我们第一反应往往是“在编程中用来匹配或验证字符串”,比如做表单验证。但其实在 CSS 中,也能用到与正则类似的选择器特性,为我们的样式管理带来诸多便利。别怀疑,以下就是如何在 CSS 里“以正则之名”提升效率的真实案例。当类名越来越多时举个例...

利用 Tree Shaking 提升 React.js 性能

1 月 16 日
阅读 3 分钟
171
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读Tree Shaking 是现代 JavaScript 应用中不可或缺的优化技术,它通过移除未使用的代码来减少最终打包的大小。对于 React.js 应用,这一技术尤为重要,因为随着组件和第三方库的增多,打包体积可能迅速膨胀。Tree Shaking 能显著提升加载速度并改善整体性能。本文将结合...

成为 JavaScript 生成器的专家,掌握 JavaScript Generators:5 个实用案例

1 月 16 日
阅读 4 分钟
302
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在阅读完这篇文章后,你将成为 JavaScript 生成器的专家。它们不仅仅是一个花哨的功能,我们将探索它们的多种强大用例,包括创建引人入胜的动画、通过互联网流式传输视频、节省内存等。如果你从未听说过它们,可能会错过很多有趣的东西。什么是 Generators?Generator...

只有 1% 的开发人员能在 60 秒内找到代码中的错误

1 月 15 日
阅读 1 分钟
310
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读下面这段简单的 JavaScript 代码里藏着一个不起眼但足以让人抓狂的错误: {代码...} 表面看上去,这只是一个“把两个数相加,然后返回对象”的函数,可实际运行后却并非预期的 { result: 5 }。乍一眼看不出任何毛病,但结果可能会让你大吃一惊。Bug 原因实际输出会是 un...

CSS Houdini:一种足以颠覆想象的 API

1 月 14 日
阅读 4 分钟
385
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读CSS 中其实有一项名为 Houdini 的 API,它的强大程度堪称“魔法”。不多说,先看看它能做的事就知道有多惊艳。本文将一步步讲解这个“魔法”的基础原理和常见用法,并穿插一些示例以帮助理解。CSS Houdini 为什么这么特别?在正常情况下,CSS 提供的属性集合是固定的,比...

如何管理较长的移动表单

1 月 12 日
阅读 3 分钟
335
在移动端设计表单是一项考验用户体验设计师能力的任务,而长表单的设计更具挑战性。由于屏幕尺寸有限,如何兼顾功能性和可用性,同时避免用户被表单吓退,是关键所在。

24小时掌握一项新技能的高效方法

1 月 11 日
阅读 2 分钟
304
首发于公众号 大迁世界,欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问?我来回答本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

如何只使用 CSS 实现网站的暗黑模式切换

1 月 6 日
阅读 3 分钟
287
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读想让你的网站从“明亮清新”切换到“暗黑酷炫”,而不依赖任何 JavaScript?没问题! 仅用 CSS 就能完成这个任务,根据用户设备的系统设置动态切换主题。本教程将教你如何实现一个可以随系统设置自动切换明暗模式的网站,完全抛弃 JavaScript。第一步:基础 HTML 页面结构...

用户暗中评判的 12 种前端微交互

1 月 4 日
阅读 4 分钟
399
今天或许你只花了 50 毫秒就对一个网站做出了“好”或“坏”的判断。其实我们大多数人都这样。而那些给人“高端”感觉的网站,与让人觉得“比较业余”的网站之间,往往差在微交互上——那些用户没注意到但又在期待的界面小细节。

在使用 React 五年后,真正明白 useMemo 的意义

1 月 2 日
阅读 2 分钟
390
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读刚接触 useMemo 时,我以为它的核心作用就是用来做缓存。很多开发者都有类似误解:认为 useMemo 主要是为了性能优化,以避免组件中不必要的重新计算。然而,经历了五年的 React 开发,我才意识到 useMemo 的真正价值不只是性能——更关键的是,它能保持数据引用的稳定性...

不要再这样编写 async/await

1 月 2 日
阅读 6 分钟
538
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读最开始接触 async/await 时,很多人都会发出“终于有这个功能了!”的感叹。它的语法清晰、可读性强,用起来直观又顺手。然而,用得越久,就会发现一些常见的“坑”时常在各种项目里出现:有些是代码审查时发现的,有些是和同事讨论时暴露的问题。这些都说明异步编程本质...

为什么需要重新考虑将 Zustand 与 Next.js 结合使用的问题?

2024-12-25
阅读 4 分钟
274
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读为什么需要重新考虑 Zustand 与 Next.js 的结合?在现代 Web 开发中,状态管理是一个不可或缺的环节。Zustand 作为一款轻量、简洁的 React 状态管理库,因其不依赖 Context Provider 而备受开发者青睐,常被认为是 Redux 的高效替代品。但在与 Next.js 集成时,尤其是...

摆脱 `<div>`!7 种更语义化的 HTML 标签替代方案

2024-12-22
阅读 3 分钟
291
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在开发 Web 应用时,项目往往从简单开始,但随着需求的增长,文档结构会变得复杂起来。 <div> 标签虽然灵活,但滥用会导致代码杂乱、难以维护。原因在于 <div> 是纯粹的容器,没有任何语义意义。幸好,HTML 提供了语义化标签这一优雅的解决方案。根据 W3S...

Next.js 重写和重定向:深度解析

2024-12-19
阅读 2 分钟
356
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读什么是重写和重定向?重定向:重定向是一种服务器端指令,告诉浏览器从一个 URL 导航到另一个 URL。这通常会导致用户浏览器中的 URL 发生变化,并且浏览器会向目标 URL 发出新的请求。重定向通常用于 URL 重构、内容移动或确保 SEO 友好的 URL。重写:重写是一种服务...

Next.js 15.1 发布:全面升级开发体验

2024-12-19
阅读 3 分钟
387
Next.js 15.1 带来了多项更新与优化,重点提升开发流程效率、性能表现,并紧跟现代 Web 开发的需求。通过全面支持 React 19、引入先进的调试工具及创新 API,Next.js 再次巩固了其在构建动态 Web 应用框架中的领军地位。以下是本次更新的主要亮点。

你不知道的 7 项 CSS 新功能

2024-12-19
阅读 3 分钟
281
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读CSS 一直在进步,不断推出新的功能,让开发更加强大、简单、有趣。以下是一些最新的 CSS 更新,它们不仅能优化你的工作流程,还会改变你对 CSS 的使用方式。我们也会通过一些示例帮助你理解这些功能的应用场景。1. 无需 Flexbox 或 Grid 的快速居中对齐还记得以前用 C...

深入解析 Next.js 中 next.config.js 的 `output` 选项

2024-12-12
阅读 2 分钟
287
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在 Next.js 14 和 15 中,next.config.js 文件中的 output 选项扮演着越来越重要的角色。本文将深入探讨 output 选项在与 App Router 配合使用时的工作原理,如何针对不同的环境和部署目标进行优化。什么是 output 选项?output 选项允许开发者控制 Next.js 应用的构...

对 Tailwind CSS v4.0 的期待

2024-12-12
阅读 4 分钟
618
Tailwind CSS v4.0 带来了大量新特性,旨在提升开发效率,优化性能,并为开发者提供更多的创意空间。此次发布不仅提升了性能,还引入了更强大的实用工具、改进的配置选项和增强的设计工具。借助这些更新,使用 Tailwind 构建现代化、可扩展的 Web 应用变得更加轻松。

如果你能正确回答这 7 个问题,你的 JavaScript 技能已经不错了

2024-12-11
阅读 2 分钟
298
JavaScript 有时会有些“出人意料”,即便是看似简单的问题也可能暗藏玄机。以下是七个涵盖不同 JavaScript 特性的经典问题。它们看起来很简单,但往往会让人意外!如果你能答对这些问题,说明你对 JavaScript 的掌握已经很扎实了。

互联网几乎崩溃的七个 JavaScript Bug

2024-12-09
阅读 3 分钟
350
JavaScript 是现代网页的核心技术,但即使是小问题也可能引发严重后果。以下是互联网历史上七个著名的 JavaScript Bug,它们提醒我们在开发中时刻保持谨慎,注重测试和代码质量。

你了解 CSS 的全部 4 种焦点样式吗?

2024-12-05
阅读 2 分钟
384
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在网站开发中,确保用户能够轻松地浏览和操作页面是非常重要的。CSS 焦点样式是一种有效的方式,可以直观地展示页面中哪个元素被选中了。本文介绍了 4 种处理 CSS 焦点样式的方式,每种方式都附有简单的示例,帮助你快速掌握这些技巧。什么是 CSS 焦点样式?CSS 焦点...

我常用的 10 个 CSS 一行代码技巧

2024-12-03
阅读 2 分钟
406
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在 CSS 开发中,一些简单的一行代码往往可以让你的页面变得更加优雅高效。以下是 10 个我喜欢使用的 CSS 一行代码,它们不仅简洁,还能在实际项目中起到很大的作用。1. 设置宽高比例(Aspect Ratio)通过 aspect-ratio 属性,可以根据指定的宽度自动调整高度(反之亦...

特性标记清理:GitHub Actions 来帮忙!

2024-12-01
阅读 3 分钟
750
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在项目中使用特性标记的原因、好处和用例是什么?特性标记是一种强大的软件开发技术,它允许在不需要重新部署应用程序的情况下,动态控制功能和其他代码的开启或关闭,而且都是实时的。我们可以"暗暗地"推出新功能,只在必要时且当我们完全准备好时才使其可用。有人可...

Vite 6.0 发布:引领现代前端开发新方向

2024-11-29
阅读 2 分钟
463
Vite 6.0 带来了大量更新与优化,旨在简化开发流程、提升性能,并解决现代 Web 开发中的诸多挑战。本次更新引入了 实验性环境 API 和现代化的工具链,进一步巩固了 Vite 作为开发者首选工具的地位。以下是关于新特性、生态发展以及重要更新的全面解读。

最难的 JavaScript 面试题解析

2024-11-29
阅读 2 分钟
367
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读觉得自己的 JavaScript 功底还不错?那来试试这道复杂的面试题吧! 下面是一段代码,请分析每一行的输出,并解释其背后的原因。问题描述以下是代码,预测输出并说明逻辑: {代码...} 分析与输出A:obj1.getValue() {代码...} 解释:obj1 是 Foo 的实例,obj1.getValue...

浪费我时间的 7 个 JavaScript 错误(以及如何纠正它们)

2024-11-27
阅读 2 分钟
316
JavaScript 是初学者友好的语言,简单易学……至少我刚开始是这么认为的。但随着时间的推移,深入了解后才发现,这门语言隐藏了一些非常棘手的陷阱。