AI 摘要：介绍在 NodeJS 中使用 Puppeteer 和在浏览器中使用 html2canvas 将 HTML 转换为图像的方法。

本文详细讲解了两种将 HTML 转换为图像的技术方案：
1. 服务器端方案（NodeJS）：通过 Puppeteer 库控制无头 Chrome/Chromium 浏览器，实现 HTML 渲染与截图。作者逐步演示了安装、启动浏览器实例、设置 HTML 内容、生成截图（支持 PNG/JPEG/WebP 格式）和关闭浏览器的完整流程，并列举了 page.screenshot() 方法的参数配置（如区域裁剪、背景透明、图像质量等）。
2. 浏览器端方案：使用 html2canvas 库将指定 HTML 元素异步转换为 Canvas 画布，再通过 toDataURL 生成图像数据并触发下载。文中提供了 CDN 加载方式和核心代码示例。

AI 摘要：作者基于频繁制作 PPT 的需求，对比了三种基于 Markdown 的幻灯片制作方案（Obsidian 原生插件、Marp、Slidev），分析其优缺点并提出适用场景。

文章从作者因频繁制作 PPT 的痛点出发，指出传统工具（如 PowerPoint）在排版灵活性和公式编辑上的不足，以及 AI 生成工具的局限性。由此提出用 Markdown 制作幻灯片的思路，并通过实践对比了三种工具：
Obsidian 原生插件：操作简单但排版效果差，缺乏自定义和导出功能，仅适合概念验证。
Marp：支持实时预览、主题定制和导出多格式，但高级排版需学习 CSS 语法，适合轻量需求。
Slidev：功能强大，支持深度定制（布局、动画、代码高亮等），但需前端知识，适合技术型用户。
最终，作者建议根据需求选择工具，并推荐 Slidev 作为长期方案。

我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式（在我的例子中是一个按钮）时，它会在 SVG 上绝对定位。但是当我移除 opacity 后，它就按照预期定位了。调试这个问题花了我几个小时。

尝试将您的 foreignObjects 包裹在 group 元素中。我发现使用变换样式 foreignObjects 在 Safari 中效果不佳。

Sing with me Safari is the new IE！

AI 摘要：探讨 2024 年 React 生态的三大趋势：Astro 框架集成、新一代身份验证方案和 tRPC 全栈类型安全实践。

www.robinwieruch.de

React Trends in 2024

React Trends in 2024 which should be on your watchlist. A walkthrough of the state of React ...

AI 摘要：本文通过案例项目逐步解析 React 中 SSR、预渲染、水合和 SSG 的实现原理、性能成本及优缺点，并探讨无 JavaScript 环境对 SEO 和社交预览的影响。

Developerway

SSR Deep Dive for React Developers

Explore step-by-step how Server-Side Rendering (SSR), pre-rendering, hydration, and Static Site Generation (SSG) work in React, their costs, performance impact, benefits, and trade-offs.