Weekly #033
文章推荐
构建可持续发展的个人工作流：认识篇
本文主要讨论了知识管理圈子中关于「重器轻用」和「all-in-one」两种工具使用观点的讨论，指出这种讨论并没有抓住重点。文章认为，真正有效的解决方案是从更高的层面独立思考自身需求，构建稳定可靠的个人工作流。作者提到，工具之间的摩擦力会影响工作流的长期维护，因此需要找到适合自己的工具，而不是盲目追求所谓的「重器」或「all-in-one」。最终，作者强调了输出作为目标的重要性，认为一个稳定可靠且减少阻力的工作流是高效输出的核心。文章提出了在构建个人工作流时需要平衡行动与决策，避免过早优化，注重整体稳定性和扩展性。
Spicing up text with text-emphasis in CSS
https://www.amitmerchant.com/spicing-up-text-with-text-emphasis-in-css
本文介绍了一种在 CSS 中可以使用的新型文本样式属性 —— text-emphasis。通过 text-emphasis 属性，可以为文本添加各种标记，如点、双圈、文字等，以突出文本内容。作者展示了如何使用 text-emphasis 属性来添加不同的标记，并说明了如何改变标记的位置。此外，还展示了使用字母和表情符号来为文本添加强调的方法。
Creating Wavy Circles with Fancy Animations in CSS
https://frontendmasters.com/blog/creating-wavy-circles-with-fancy-animations
本文介绍了如何使用现代 CSS 技术创建复杂的波浪圆形效果。通过使用 mask、三角函数等方法，作者展示了如何利用 CSS 变量控制小圆圈的位置和半径，从而形成具有动感的波浪圆形。文章的核心内容分为两部分：首先，通过移动小圆圈并调整它们的半径以保持它们始终相互接触来创建形状；其次，使用动画组合技术对形状进行动画处理，从而实现更丰富的视觉效果。作者还提到了 @property 特性以及如何利用遮罩复合、梯度、动画组合等 CSS 特性来实现最终效果。通过介绍变量控制、动画效果、@property 等技术，读者可以学习到如何通过 CSS 创造独特的形状和动画效果，同时也可以拓展对 CSS 的理解和运用。
Add Superpowers to Your CSS Variables with Style Queries
https://thathtml.blog/2024/03/superpowered-container-style-queries
本文介绍了最新的 CSS 变量超能力 —— 样式查询（style queries），这是 CSS 领域的又一次革命性进展。通过样式查询，可以根据设置的 CSS 变量来同时调整多个属性，甚至整个布局的样式。文章示范了如何利用样式查询设置主题和断点类型变量，以及如何根据这些变量来动态调整组件样式。虽然目前 Firefox 尚未支持该功能，但 Chromium 和 Safari 已经开始支持，未来在生产环境中可能会逐渐应用。
On popover accessibility: what the browser does and doesn’t do
https://hidde.blog/popover-accessibility
本文介绍了关于浏览器在支持浮出提示（popover）属性时所做和不做的无障碍功能。浏览器在支持浮出提示时会自动处理 aria-expanded 和 aria-details 状态，同时为浮出提示内容添加组（group）角色，以提高键盘可访问性。此外，浏览器会将焦点返回到触发浮出提示的元素，并调整浮出提示内容在 Tab 顺序中的位置。然而，浏览器并不会根据使用的元素或添加的角色来添加其他行为。总的来说，浏览器的无障碍功能主要体现在处理特定的语义信息和键盘交互，而开发人员仍需努力确保组件的无障碍性。
What You Need to Know about Modern CSS (Spring 2024 Edition)
https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition
本文介绍了现代 CSS 中的一些新特性，包括容器查询、样式容器查询、容器单位、:has () 伪选择器、视图过渡、嵌套、滚动驱动动画、锚定位、作用域 CSS、层叠图层等。这些新特性使得 CSS 在布局、样式和动画方面更加灵活和强大，为前端开发带来了更多可能性和选择。文章详细介绍了每个特性的用法、支持情况和应用场景，为前端开发者提供了全面的参考和指导。
Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)
这篇文章主要讨论了在网页设计中实现全屏区域时，使用 100vh 单位可能遇到的问题，并探讨了一些替代性的 CSS 单位。文章指出，在桌面浏览器上，100vh 可以实现预期的效果，但在移动设备浏览器上，全屏区域默认情况下并不完全可见，需要用户滚动屏幕才能看到完整内容。为了解决这个问题，作者提到了几种替代性 CSS 单位：100lvh、100svh 和 100dvh。其中，100lvh 在滚动时更新区域高度，表现与 100vh 类似；而 100svh 则始终使区域保持初始视口高度（地址栏未收缩时的状态），且默认情况下完全可见；最后，100dvh 在视口大小改变时会更新区域高度。作者推荐使用 100svh 创建全屏 hero 区域，并作为 100vh 的备选方案。
Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript
https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript
本文介绍了一种使用最新的 CSS 和少量 JavaScript 支持用户持久化颜色方案偏好的方法。通过使用 CSS 的新特性，如 :has() 伪类，可以在用户交互时修改界面样式，而无需使用 JavaScript。首先，文章讲解了如何根据用户系统的颜色方案偏好设置默认的“浅色模式”，并提供选择“浅色”和“深色”模式的页面级别控制。接着，通过 CSS 转换实现了响应用户系统设置和页面颜色偏好的样式变化，还介绍了如何使用 CSS 过渡效果平滑切换颜色方案。最后，为了让用户的颜色方案偏好能够持久化，文章展示了使用 JavaScript 实现本地存储用户选择，并在页面加载时恢复用户的偏好设置。
工具介绍
cai
cai 是一个通过终端直接向 LLMs 提出提示的 CLI 工具，由 Groq 提供支持。这个工具使用 Rust 构建，具有出色的性能和速度，通常在不到 1 秒的时间内完成。在使用 Cai 之前，需要设置 API 密钥，并支持 Groq、OpenAI 和本地主机等 API。通过在终端中执行 cai 命令，用户可以直接运行提示。
pgs.sh
pgs.sh 是一个为黑客设计的零安装静态网站托管服务，提供 25MB 免费存储空间和 pico+ 计划的 10GB 存储空间，支持终端工作流程，无需客户端安装即可完全管理静态网站。用户可以将静态网站部署到 pgs.sh 服务器上，支持使用 rsync、sftp 或 scp 进行部署，并提供回滚支持、管理 HTTPS、私人项目、自定义域名、重定向、自定义标头等功能。此外，还提供图片处理 API、无带宽限制和一键发布网站等便利功能，通过远程 CLI 可以轻松管理项目，透过 SSH 隧道，还支持私人网站和访问控制列表 API。
CFRS[]
CFRS[] 是一种极简的绘图语言，它只包含六个简单的命令：C（改变颜色）、F（向前移动一格并涂色）、R（向右旋转 45 度）、S（暂停 20 毫秒）、[（开始一个可重复执行的代码块）和 ] （再次执行当前可重复的代码块并退出该块）。这个项目受到了教育性编程语言 Logo 和古怪编程语言 P′′的启发，具有虚拟海龟在画布上绘制图形的功能。用户可以通过在网页 URL 后附加特定数字来访问内置演示和社区演示。此外，CFRS[] 还支持代码共享功能，当代码长度不超过 64 字节时，可以生成一个可分享的链接，通过此链接可以在不同的设备上执行相同的代码。
Maizzle
Maizzle 是一个可帮助你快速使用 Tailwind CSS 构建 HTML 电子邮件的框架。通过 Maizzle，你可以使用 @maizzle/cli 工具快速搭建项目并开始开发电子邮件模板，然后在 HTML 中编写邮件内容并用 Tailwind CSS 进行样式设置。Maizzle 还会处理所有电子邮件优化工作，如 CSS 内联处理。这个工具不仅使电子邮件开发更快速，还能保持整个团队的品牌一致性，让你能够使用现代化的 Web 开发工具，轻松编写漂亮的 HTML 电子邮件。
Docfast
https://larafast.com/tools/doc-fast
Docfast 是一个能够快速免费生成 Markdown 文档的工具，用户可以通过上传代码文件来获取漂亮的文档，并复制其中的内容。该工具不会存储用户的文件，仅用于生成文档。
Excompt
Excompt 是一个可以将任何网页上的 UI 组件导出为 tailwind CSS 样式组件的工具，并支持 HTML、React 和 Vue 输出格式。它通过浏览器扩展实现简化集成，自动生成使用 tailwind CSS 的样式组件，支持灵活的输出格式，并提供 Web 仪表板用于保存和组织导出的组件。用户可以方便地将导出的组件整合到他们喜爱的 Web 开发框架中，轻松地重用设计元素并获得项目设计灵感。
FreeTTS
FreeTTS 是你的免费在线文本转语音解决方案。它可以将文本转换为自然声音的 MP3、WAV、OGG 和 ACC 格式，无缝便捷。除此之外，你还可以享受额外的功能，如语音转录、去除人声、声音增强以及音频编辑工具。
Pagecord
Pagecord 是一个通过电子邮件管理的极简主义博客应用程序，适合长篇写作和微博客分享。用户只需拥有电子邮件账户，即可在喜爱的邮件编辑器中撰写文章并发送。Pagecord 将自动处理其余的发布工作。该应用免费使用，但用户可选择付费获取高级功能，如图片上传、链接展示、分析数据、邮件订阅和自定义域名。
Tailblocks
https://upperhorizon.com/tailwind-to-wordpress-blocks-converter
Tailblocks 是一个自动将 Tailwind HTML 代码转换为 WordPress 块代码的工具，可以编辑 Gutenberg 样式。通过这个工具，开发人员可以快速构建复杂的设计和网站，比使用 Gutenberg 拖放编辑器 UI 或编写 WP 块代码更快速和高效。支持的实用类包括 Flexbox、Margin/Padding、Text、Borders、Backgrounds 等。此外，工具还添加了一些控制 Gutenberg 编辑器样式的类。虽然存在一些已知限制，例如列和按钮块上的某些类无法正常工作，但开发者可以通过提供色彩名称列表来解决类似问题。
Jinjabread
https://github.com/jdeanwallace/jinjabread
Jinjabread 是一个基于 Python 的静态站点生成器。受到 staticjinja、jekyll 和 hugo 的启发，可以在 Markdown、HTML 或文本中编写页面，并在其中使用 Jinja2 模板语言。支持在 Markdown 页面中使用 YAML 元数据，可以将静态媒体文件与静态页面放在一起，并内置了一个 Web 服务器，可以在本地预览静态站点，同时会美化所有生成的 HTML。用户还可以自定义配置文件以调整输出目录、全局 Jinja 上下文变量等，适合用于构建简单而具有灵活性的静态网站。
Pages CMS
Pages CMS 是一个方便易用的内容管理系统，直接在 GitHub 上运行，为 Next.js、Astro、Hugo 或 Nuxt 等网站提供无忧更新体验。该 CMS 支持可配置的内容类型、视图、搜索等功能，拥有富文本编辑器、媒体管理器和快速的全文和分面搜索。用户还可以通过电子邮件邀请团队成员，连接 AWS S3、Cloudflare R2 等文件存储服务，轻松安排内容更新，实现不同内容类型的细粒度访问控制，集成 GA、Cloudflare Analytics 等分析工具，支持团队实时协作编辑和评论功能。
Sveltia CMS
https://github.com/sveltia/sveltia-cms
Sveltia CMS 是一个现代、快速、轻量级的基于 Git 的无头 CMS，是 Netlify CMS 和 Decap CMS 的替代品。它是免费、开源的，专注于用户体验的选择。使用 Svelte 框架构建，提供更好的 UX、性能、生产力、可访问性、安全性和国际化支持。目前处于公共测试阶段，可替代部分 Netlify/Decap CMS 的使用情况。
Paparazzi Docs
Paparazzi Docs 是一款自动化软件文档更新工具，能够自动捕捉产品界面截图，确保在线文档中的图片始终保持最新。通过简单几行代码即可集成到代码库中，实现文档自动化更新。用户可以轻松地使用直观的编辑器撰写文档，无需编程技能。此外，Paparazzi Docs 还可以自动部署文档至静态站点，方便与用户分享。
YT Channel Downloader
https://github.com/hyperfield/yt-channel-downloader
YT Channel Downloader 是一个直观的桌面应用程序，旨在简化下载 YouTube 媒体内容的过程。利用 yt-dlp、scrapetube 和 pytube 的强大功能，并结合现代的 PyQt 6 GUI，该工具提供了一个无缝的下载体验，让用户可以轻松下载自己喜爱的内容。该应用支持输入 YouTube 视频、播放列表或频道 URL 来获取视频列表，选择性下载所需视频，设置视频/音频质量，标记已下载文件等功能，使管理和下载视频变得更加简单方便。
Product Description Generator
https://www.aidirectori.es/tools/product-description-generator
Product Description Generator 是一款免费为你的 AI 工具撰写描述的工具。它旨在提高你的工具的可见性，并使用户更容易理解你的产品的所有内容。
资源汇总
concrete.css
Concrete.css 是一个简洁而直接的无类 CSS 样式表，旨在轻量和简单。它适合作为简单网站的起点，还可以根据操作系统自动切换到暗黑主题。与 normalize.css 搭配使用效果更佳。该样式表受到 Milligram 和 Skeleton 的启发，提供了基本的排版、结构和元素样式，包括标题、段落、按钮、图片、列表、表格等。可以通过 CDN 或 npm 安装使用，适用于简单的网页设计需求。
Eleventy Notes
https://eleventy-notes.sandroroth.com
Eleventy Notes 是一个简单、轻量且灵活的笔记模板，适用于 Eleventy 静态网站生成器。该模板支持创建 Wikilinks 和反向链接，方便浏览内容；使用标签进行内容组织和过滤；在客户端进行快速搜索；选择两种主题和多种配色方案；定制侧边栏以支持文件夹和子文件夹。Eleventy Notes 提供轻量快速的体验，最小化 JavaScript 的使用。无论你是博主、开发者还是热爱写作的人，Eleventy Notes 都能满足你发布内容的需求。
Saas Showcase
https://www.grafit.agency/saas-showcase
Saas Showcase 是一个展示超过 200 个 Webflow SaaS 网站的平台，展示了产品营销的最佳实践。这些网站涵盖了 AI、自动化、客户服务、数据、设计、电子商务、教育、金融、医疗保健、人力资源、管理、营销、无代码、生产力、销售等多个领域。用户可以在这里找到各种 SaaS 网站，了解它们的设计和功能特点，为产品营销提供灵感和参考。
Eleventy Photo Gallery
https://github.com/tannerdolby/eleventy-photo-gallery
Eleventy Photo Gallery 是一个使用 Eleventy 静态网站生成器创建个人照片或艺术画廊的起始网站。这个模板提供了许多功能，如构建时的图像转换、响应式图像标记和 Sass 支持等。用户可以通过克隆仓库、安装依赖项、构建并本地服务站点来快速开始使用。