Published on

2024-第一周

Authors

该周报主要为各个地方内容的汇总整理

技术

一步一步解码 PNG 图片

这段文字主要介绍了如何解码 PNG 图片的二进制数据，包括获取二进制数据、解析数据块的开始信息和数据信息，以及校验和。其中还解释了数据块中的各个字段的含义，如图片的宽高、色彩类型等。

  • 解码 PNG 图片的过程是将二进制数据转换为包含像素数据的 ImageData。
  • PNG 图片的二进制数据以特定的签名开头，然后包含数据块，每个数据块都有开始信息、数据信息和结束信息。
  • 数据块的数据信息包括图片的宽高、色彩类型、压缩算法等信息，而结束信息包括了 CRC32 校验和。

React Server Components: the Good, the Bad, and the Ugly

React Server Components 是将服务器专有功能引入到 React 中的新范例。作者对这一范例进行了评估，认为它具有一些好处，但也存在一些问题。React 现在不仅仅是一个 UI 渲染框架，还可以控制路由、数据获取和突变等服务器端功能。新的 Server Components 特性可以将组件转换为可序列化格式，在服务器端渲染为 HTML，并通过网络传递到客户端进行渲染。同时，React 还提供了处理用户交互的服务器端功能。然而，这种新的范例也存在一些问题，例如组件之间的关联性变差、复杂性增加等。此外，Next.js 在扩展 fetch API 方面也存在一些问题。

  • React Server Components 是一种新的 React 编程范式，将服务器独有的功能引入 React，提供更好的用户体验和开发者体验。
  • React Server Components 允许在服务器上进行数据获取和 UI 渲染，使得代码更加简洁和高效。
  • 虽然 React Server Components 有一些局限性和不足之处，但它仍然是一个有潜力的技术，可以提升 Web 应用程序的性能和可维护性。

A new blog for 2024

这篇文章主要讲述了作者重新开始建立个人博客的过程，并介绍了一些使用的技术和库。他希望博客具有良好的开发体验和简洁的设计，并在 5 天内完成建设和发布。作者还分享了一些设计细节和使用的工具，包括 Catalyst UI Kit、Tailwind 库、Next.js 框架、Contentlayer 等。他还提到了一些未来想添加的功能，但强调了及时发布的重要性。

  • 作者决定重新开始一个博客，目的是为了提高开发体验和简化文章创作过程。
  • 作者在设计中加入了一些细节，如动态背景、饱和的文字和微噪音，以营造独特的视觉效果。
  • 作者使用了一些新的库和技术，如 Catalyst UI 套件、TWC 库、Next.js 框架和 Contentlayer 插件，以改善博客的功能和开发效率。

More Than You Need to Know About ReactDOM.­flushSync

本文介绍了 React 中的一个不常见的函数 ReactDOM.flushSync 的作用和用途。flushSync 是 React 中的一部分，用于强制同步地将状态更新应用到 DOM 中。它可以解决一些特定情况下 React 更新 UI 的延迟问题，例如在状态改变后立即读取 DOM、测量 DOM 节点、在状态改变后立即执行 DOM 副作用等。通常情况下，React 会自动处理这些问题，但在特定情况下使用 flushSync 可以绕过批处理机制，强制同步更新。flushSync 还可以在类组件中模拟 this.setState 的回调功能。此外，本文还提到了其他相关的 React 特性和 API，以及一些使用 flushSync 的实际应用例子。总之，flushSync 是一个较为冷门的 React 函数，通常情况下不需要使用，只有在特定情况下需要手动控制更新时才会使用。

  • ReactDOM.flushSync 用于强制 React 同步刷新状态更新到 DOM，适用于需要立即更新 UI 的特定场景。
  • 使用 flushSync 可以解决 React 更新 UI 的延迟问题，例如管理焦点和滚动位置等。
  • flushSync 在某些情况下也可用于处理必须同步更新 DOM 的回调，如测量 DOM 节点或在状态更新后立即执行 DOM 副作用。

Next.js 14 Intercepting Routes

Next.js 的应用程序路由器引入了两种高级路由模式：并行路由和拦截路由。拦截路由允许您在浏览 UI 时拦截或停止默认的路由行为，以展示替代视图或组件，同时保留预期的路由，以便在页面重新加载时使用。这对于在保持当前页面上下文的情况下显示路由非常有用。拦截路由可以用于登录模态框、照片展示等场景。在 Next.js 中，通过使用 (.) 约定来拦截路由，并且还可以使用其他高级拦截模式。拦截路由是 Next.js 的一个强大功能，可以提高 Web 应用程序的灵活性和用户体验。

  • 拦截路由允许在 UI 导航时拦截默认路由行为，以显示替代视图或组件，同时保留预期路由，适用于页面重新加载等场景。
  • 实际应用包括登录模态框和照片流，通过拦截路由可以在 URL 保持不变的情况下显示登录模态框或放大照片，以提供更好的用户体验。
  • 在 Next.js 中定义拦截路由可以通过使用不同的约定来拦截不同层级的路由，例如使用 (..) 来匹配上一级路由段，以增强应用的灵活性。

6 CSS snippets every front-end developer should know in 2023

这篇文章介绍了一些有用的 CSS 技巧和特性，包括容器查询、滚动捕捉、使用网格布局避免使用 position:absolute、快速创建圆形、使用层叠样式表达变体、使用逻辑属性减少代码量。

  • 容器查询：通过使用容器查询，可以根据宽度对元素进行样式调整。
  • 滚动捕捉：使用滚动捕捉可以创建平滑的滚动体验，并在合适的位置停止滚动。
  • 逻辑属性：通过使用逻辑属性，可以根据不同的语言和布局方向自动调整样式，避免手动修改左右边距和填充。

The Two Reacts

这篇文章讨论了 React 的两种运行方式：在客户端运行和在服务器端运行。在客户端运行的组件可以实现即时交互，而在服务器端运行的组件可以处理数据。作者提出了一个问题，即如何将这两种运行方式结合起来，以实现更灵活的编程模式。

  • React 是一种 UI 编程范例，它允许将显示内容分解为独立的组件，并像乐高积木一样组合它们。
  • 组件可以在客户端或服务器上运行，客户端运行的组件可以实现即时的交互性，而服务器运行的组件可以进行数据处理和预处理。
  • 在实践中，我们需要将组件分配到客户端和服务器两个环境中，并找到一种方法来组合和嵌套这些组件，以实现灵活和高效的 UI 开发。

工具

novel

具有 Notion 风格的所见即所得编辑器，支持 AI 动力自动完成功能

style-guide

Vercel 工程团队的编码规范指南

build-it-figma-ai

在 Figma 和 FigJam 中绘制和草图 UI

vx.dev

Vercel 的 v0.dev 可以通过输入需求，直接生成网站。这里是它的一个开源仿制品，通过逆向工程进行模仿

copilot-gpt4-service

将 Github Copilot 请求转换为 ChatGPT 请求，免费使用 GPT-4 模型

更新

Announcing Vue 3.4

Vue 3.4 发布了，主要改进了模板解析器的速度和响应系统的效率，还改善了一些 API，修复了一些错误。此外，删除了一些过时的特性。更新到 3.4 时需要更新相关依赖，并注意一些潜在的行动。

  • Vue 3.4 发布，内部改进包括重写的模板解析器，速度提升 2 倍，响应性系统重构以提高计算属性的重算效率。
  • 新增的 defineModel 功能已稳定，可简化支持 v-model 的组件的实现。
  • v-bind 指令现在支持同名缩写，可简化模板中属性绑定的写法。

设计

Introducing Catalyst: A modern UI kit for React

Stripe 发布了他们的全新 UI 套件 Catalyst 的第一个开发预览版。Catalyst 是一个完全组件化、内置电池的应用 UI 套件，提供了一系列基于 React 的实用组件。该套件旨在满足设计追求完美的团队的需求，他们希望拥有自己的 UI 组件而不选择现成的库。Catalyst 以细节精致的设计为目标，力求在竞争中脱颖而出，并兼顾时尚和实用性。它还提供完整的暗黑模式支持，并模仿 HTML 的结构，使组件易于使用和定制。此外，Stripe 还发布了 Headless UI 的新版本，包括内置锚定定位、复选框组件、表单组件以及改进的 hover 和 focus-visible 检测等功能。Catalyst 对所有 Tailwind UI All-Access 用户免费提供，并鼓励用户在使用过程中提供反馈意见。

  • Catalyst 是一个全新的应用程序 UI 工具包，提供了真实的 React 组件和精心设计的 API，旨在帮助设计团队打造自己的 UI 组件体系。
  • Catalyst 注重细节，力求在视觉风格上与网络上最美观的界面媲美，同时追求永恒的设计，以及高效的用户体验。
  • Catalyst 基于 HTML 模式，通过组合形式的 API，使得使用者可以轻松地定制和使用组件，同时利用 Headless UI 提供的功能增强，进一步简化开发流程。

AI

发挥 AI 在职场中的作用：如何在新的 2024 年保持领先！[译]

人工智能（AI）已经成为推动创新和提升效率的核心力量。AI 在各行各业发挥着重要作用，如医疗保健、金融和客户服务等领域。AI 的发展以生成式 AI 为标志，对语言理解和生成能力有了飞跃。AI 的普及促使企业重新思考运作方式和未来策略。将 AI 融入工作流程可以提升生产力和创新能力。AI 的目的是提升工作效率，而不是减少工作量。要将 AI 与自身能力结合，利用其加速实现非凡成就。要不断学习和适应 AI 的发展，将其融入工作中并提升自身技能。保持开放态度，敢于面对变化。

  • AI 已经成为推动创新和效率提升的核心力量，影响着多个领域的变革。
  • AI 在医疗保健、金融、客户服务等领域的应用，为提供更准确的诊断、实时欺诈检测和个性化支持带来了巨大的潜力。
  • AI 的发展以生成式 AI 的广泛应用为标志，将工作流程自动化、解决复杂问题，成为提升生产力和创新的强大推动力。

使用 AI 将草图生成 3D 图标

IconCraftr 是一个生成 3D 图标的工具，可以通过上传线稿图并输入关键词和生成图片数量来快速生成多种风格的渲染图，使用最先进的 AI 能力，每张图片生成时间只需 3 到 5 秒。用户可以随意下载喜欢的图片并在项目中使用。

crewAI

CrewAI 是一个最先进的框架，用于协调角色扮演的自主人工智能代理。通过培养协作智能，CrewAI 使代理能够无缝地协同工作，解决复杂的任务。CrewAI 具有灵活性、可扩展性和易用性等优势，支持本地开源模型，并提供了一些示例，如旅行计划、股票分析和登录页面生成器。

高级 RAG 技术：图解概览 [译]

本文系统地介绍了高级检索增强式生成技术（RAG）及其算法。RAG 结合了搜索技术和大语言模型的提示功能，通过从数据源检索信息来生成回答。文章介绍了 RAG 的原始方法和标准方法，并提到了提示优化技术。此外，文章还概述了高级 RAG 技术的核心步骤和算法。

  • 本文介绍了高级检索增强式生成技术（RAG）及其算法，以及其在大语言模型系统中的应用。
  • RAG 将搜索技术和大语言模型的提示功能相结合，通过从数据源检索信息来生成回答。
  • 高级 RAG 技术包括标准 RAG 方法、提示优化和其他可选工具，用于提升 RAG 流程的性能和效果。

其他

专利流氓利用 AI 生成大量想法，然后逐一申请专利，这只是时间问题。

-- Hacker News 读者

Discuss on Twitter • View on GitHub