前端早读精选: 如何为你的开源项目编写文档、5 中 node 版本管理方案对比、react-compiler 介绍与使用

xiaoTuiMao
171 阅读8分钟

post-header-bg.png

探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。

JS 文章推荐：利用 JSDoc 为你的开源项目编写文档、5 中 node 版本管理方案对比、react-compiler 基本介绍与项目搭建指南、Dan Abramov 关于React 客户端组件与服务端组件的讨论。 CSS 文章推荐：利用 CSS 绘制图形全面指南、使用 @property 如何完成复杂 CSS 动画、关于 CSS 新特性采用率低的思考

工具推荐：浏览器插件开发框架 -- extension、使用GitHub Actions自动化更新GitHub个人资料

如果觉得有收获，欢迎大家点赞👍🏻订阅

JavaScript 文章推荐

如何为你的开源项目编写文档

文章讨论了利用JSDoc为JavaScript包编写文档的方法。介绍了包括清晰描述功能、为代码添加类型信息、利用JSDoc标签详细说明代码功能，以及包含示例帮助用户理解如何使用。文章还提到了使用deno test --doc保持文档的时效性和准确性，以及通过内部链接增强文档的可导航性。

简要总结，使用JSDoc完善你的README指南，可以按照以下结构化的建议操作：

  1. 文档摘要: 使用JSDoc撰写清晰的功能摘要，概述你的包或模块的主要功能。
  2. 类型信息: 明确指出所有参数、返回值和变量的类型，以增加文档的可读性和实用性。
  3. 详细标签: 利用JSDoc的各种标签（如@param, @return）详细描述函数或方法的行为、参数和输出。
  4. 示例代码: 在文档中包含示例代码，并用JSDoc注释详细解释每个示例，帮助用户理解如何使用API。
  5. 维护文档: 定期运行deno test --doc来验证示例代码的有效性，并确保文档保持最新。

image.png

👉🏻原文链接：如何为你的开源项目编写文档

5个 Node 版本管理工具对比

这篇文章讨论了Node.js版本管理工具的重要性，通过比较五种主要工具：NVM、N、FNM、Volta和PNPM。

  • NVM (Node Version Manager)
    • 优点：最受欢迎，安装简单。
    • 缺点：不支持Windows平台，仅支持POSIX兼容的shell。
  • N
    • 优点：可以从package.json的"engines"部分自动检测Node版本。
    • 缺点：不支持Windows的原生shell，管理的是全局Node版本。
  • FNM (Fast Node Manager)
    • 优点：支持跨平台，安装直观，支持自动根据项目内的 .node-version 文件自动切换 Node 版本。
    • 缺点：需要用户进行一些配置才能实现版本自动切换。
  • Volta
    • 优点：跨平台，无缝的日常使用体验，支持Node和其他工具（如Yarn）版本的动态切换。
      "volta": {
    "node": "18.17.0",
    "yarn": "1.22.22"
  }
    • 缺点：较新，社区支持和资源可能比NVM少。
  • PNPM
    • 优点：支持跨平台，与包管理功能集成。
    • 缺点：本质上是包管理器，只支持全局版本管理，不支持动态版本切换。

image.png

👉🏻原文链接：5个 Node 版本管理工具对比

react-compiler

这篇文章介绍了React编译器的基本情况，这是一个新的实验性编译器，旨在自动优化React应用程序。它可以对代码进行自动记忆化处理，减少因输入不变而不必要的更新。编译器也包含一个eslint插件，能在编辑器中实时显示代码分析结果，帮助提高代码质量。文章还讨论了如何安装编译器、如何检查代码的兼容性，以及如何在不同的开发环境中配置使用编译器。

注意：这个编译器目前还处于实验阶段，尚未完全准备好用于生产环境。

image.png

👉🏻原文链接：react-compiler

两个 React

Dan Abramov 关于使用 React 构建用户界面（UI）时，分别基于客户端和服务器端的数据处理，组件应该在客户端还是服务端运行的问题。在客户端，UI的生成依赖于本地状态（例如交互式组件如计数器），而在服务器端，UI的生成则依赖于服务器数据（如预览卡片显示博客帖子的字数）。作者指出，这两种方法各有优势，但通常看起来无法兼容。文章的核心思想是探索一种能够结合这两种方法的 React使用方式，以充分发挥其在不同环境中的优势。

image.png

👉🏻原文链接：两个 React

CSS 文章推荐

CSS 绘制图形全方位指南

这篇文章是关于如何使用CSS创建各种形状的现代指南。作者Temani Afif详细介绍了利用CSS的clip-path和polygon()功能来制作常见的CSS形状，如六边形、八边形和星形等。文章强调了避免使用过时的CSS技巧和“魔术数字”，而是利用现代CSS技术来创建可重用且易于理解的代码。此外，还提供了一些技巧和方法，帮助开发者理解和创建自定义的CSS形状，而不仅仅是复制粘贴代码。以下是文章中几个图形示例：

  • 三角形：通过设定三个顶点的坐标，使用polygon()函数创建。 
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  • 心形：利用clip-path结合多个曲线和直线段生成心形。 
    clip-path: path('M50 0 Q100 50 50 100 Q0 50 50 0');
  • 波浪形：通过重复的正弦曲线路径，使用clip-path生成动态的波浪形状。 
    clip-path: ellipse(50% 25% at 50% 50%);

image.png

👉🏻原文链接：CSS 绘制图形全方位指南

有时候你需要一个自定义@property 而不是 CSS 变量

文章重点探讨了CSS中@property的特点，强调其在复杂动画和响应式设计中的优势。与CSS变量主要用于值的存储和复用不同，@property允许开发者定义属性的类型、初始值以及是否继承，支持属性值的动态插值。这使得@property在实现平滑的颜色渐变、尺寸变化等动画效果时，能提供更高的控制精度和视觉连贯性。通过具体示例，文章展示了@property在前端开发中的实用性和灵活性。

笔者附：在CSS中，使用@property与CSS变量有显著区别。CSS变量用于存储可复用的值，主要用于简化和统一样式表中的常量。而@property则提供了定义更复杂属性的能力，比如可以设置类型、初始值以及继承性，使得动态改变属性（如动画中的颜色、尺寸变化等）更为流畅和自然。@property允许属性在变化过程中进行计算和插值，提高了动画和响应式设计的灵活性和效果。但 @property 的兼容性存在一定的问题，详细API信息与兼容性信息查看：MDN

css-property.gif

👉🏻原文链接：有时候你需要一个自定义@property 而不是 CSS 变量

old-dogs-new-css-tricks

文章探讨了CSS新功能的低采纳率和原因，特别强调了开发者的习惯性思维和技术借口。讨论了一些最新的CSS特性如容器查询、样式查询、CSS层次结构等，并指出这些功能虽然支持良好，但实际应用仍较少。建议通过渐进增强的方式和重新思考已有的编码模式来更好地利用这些新特性，以解决具体的UI问题和改进代码结构。还强调了实践和示例的重要性，以及逐步适应新技术的方法。

笔者附：关于CSS的应用逐渐被忽视，尽管前端开发的基础仍旧是HTML、CSS和JavaScript。如今，大多数人将主要精力放在JavaScript上，而忽略了CSS和HTML的进展。自从我开始编写“早读精选”系列，阅读了许多关于CSS的精彩文章后，深感现在是时候重新审视CSS了。相信我，当你重新重新了解新时代的CSS后，你会看到一个全新的前端世界。

工具推荐

extension

Extension 是一个即插即用、零配置、跨浏览器扩展开发工具，内置支持 TypeScript、WebAssembly、React 和现代 JavaScript。 开发便捷，使用脚手架（sh npx extension create my-extension ）初始化好工程后，仅需运行npm run dev 即可实现预览，开放你的扩展工具

image.png

👉🏻原文链接：extension

如何将我的 github 个人资料变为动态化

文章介绍了如何使用GitHub Actions自动化更新GitHub个人资料的README文件，包括博客文章和GitHub统计数据。介绍了两个可以动态生成统计数据的库：github-readme-stats和metrics。还展示了如何通过Python脚本从博客自动抓取最新文章来更新README的方法，并通过代码示例详细解释了整个设置过程。

image.png

👉🏻原文链接：如何将我的 github 个人资料变为动态化

avatar
文章
阅读
粉丝