标签：前端开发
用 TypeScript 和 oclif 从头开始构建 CLI
我目前正在开发一对 CLI 工具，其中一个我已经在这里写过了，另一个我很快就会宣布。我喜欢一个好的基于文本的界面，所以我为自己建立的很多工具，以及在工作中构建的工具，都采用了这种形式。我在这个领域肯定还不是专家（至少现在还不是），但我喜欢为选项找到明智的默认值、清晰的标志名称和有...
在 React Server Component 中使用 CSS - 理解 CSS-in-JS 和 React 的未来
介绍 去年的这个时候，Vercel 宣布了 Next 13.4 的稳定版本发布，成为首个构建在 React Server Component 之上的 React 框架。 这是一件大事！RSC（React Server Component）为我们提供了一种在 React 中编写 仅...
我已经使用React很长时间了，所以当有人说“嘿，你应该尝试一种不同的前端框架”时，我的回答总是“哼，但我已经如此高效了=P”。然而，Vue已经有了足够多的酷炫发展，让我想要尝试一下。结果我愉快地惊讶了！Vue有一堆很棒的功能，让我作为React开发者感到羡慕。让我们深入探讨一些...
我一直知道有 scripting CSS 媒体特性，但我仍然以为它的跨浏览器支持不足。根据 caniuse.com 的信息，发现截至2023年12月，所有现代浏览器都已支持这一特性，这真是一个令人愉快的惊喜。有了这个特性，我们可以根据用户浏览器中是否可用 JavaScript 来...
元素 > 样式中支持@position-try规则 为了帮助你调试CSS锚点定位，元素 > 样式标签页现在支持@position-try CSS规则。该标签页解析position-try-options值，并将每个选项链接到一个专门的@position-try --name部分。...
用户界面密度意味着什么以及如何为其设计 界面变得越来越不密集。 我通常对怀旧情绪和“我们喜欢那样”的偏见持怀疑态度，但将2024年的网站和应用程序与2000年代的同类产品进行比较，软件的扩散是难以忽视的。 为了解释这一趋势，并提出我们如何可能恢复密度，我首先从询问UI密度究竟是什...
HTML中的<style>标签被低估了 <style> 元素必须包含在文档的 中。通常，最好将你的样式放在外部样式表中，并使用 元素应用它们。 -- MDN 然而，在某些情况下，使用<style>标签可以带来性能上的提升，并且已经有尝试利用这一优势。 <head> ...
利用 Chrome DevTools 全面分析 JavaScript 性能
让我们看看如何通过 Chrome DevTools 的 Performance（性能）标签来有效地分析并改进 JavaScript 的性能，同时避免常见错误。我们的用例是提高一个现实世界中 canvas 库的渲染 FPS（每秒帧数）。 几周前，我的一位同事和我在 benc...
在这篇文章中，我将详细介绍一个完整的虚拟DOM实现，代码量略超过200行JavaScript。 结果是一个功能完备且性能足够的虚拟DOM库（演示）。它作为smvc包在NPM上可用。 主要目标是阐述像React这样的工具背后的基本技术。 React、Vue和Elm语言都通过允许你...
注意：这是几年前我写的文章系列的更新版本，但内容仍然非常相关。 构建组件库是一次充满挑战和回报的经历，但不仅仅是编写外观出色的组件那么简单。在旅程的每一步，您都需要做出选择，以确保您的库适合其预期受众。 在构建您的库时，您需要考虑以下困境： 我应该编写纯Web组件还是使...