Eyoz

Weekly #030

Last updated on

文章推荐

CSS for printing to paper

https://voussoir.net/writing/css_for_printing

Ryan Mulligan 的文章介绍了如何使用 CSS 进行打印设计,特别关注于打印生成的 HTML 表单。他提到,使用 CSS 的 @page 规则可以告知浏览器网站的打印偏好,例如设置页面大小和边距。此外,他还强调了在打印样式中使用 margin: 0 的重要性,以避免在打印时内容被挤压或超出页面。Mulligan 还讨论了如何使用 <article> 元素来表示每页内容,并推荐在设计多页打印生成器时使用这一元素。此外,他还分享了一些关于如何处理页眉、页脚和重复元素的技巧,以及在 JavaScript 中如何动态生成页面以适应不同的打印需求。

Some little ways I’m using CSS :has() in the real world

https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world

本篇文章探讨了在实际项目中使用 CSS 新伪类 :has() 的多种方式。Bell 在文章提到,:has() 伪类允许我们选择父元素,这在以往是无法实现的。他将其比作查询父元素的孩子的状态和/或存在,而不是直接从孩子中选择父元素。尽管 Bell 认为 :has() 并非某些人声称的银弹,但对于无法访问标记的场合,它确实能发挥巨大作用。

工具介绍

爱幕

https://aimu.app

爱幕是一个功能全面的在线免费字幕编辑器,它提供了一系列强大的工具和服务,包括语音识别,字幕翻译,字幕转格式,字幕压制等,以帮助用户轻松创建、编辑和管理视频字幕。

Sender

https://dusted.dk/send/

Sender 是一个由 dusted.dk 提供的在线文件传输服务,它允许用户在互联网上的两台计算机之间传输文件,而无需创建账户,也无需在远程服务器上存储文件。该服务通过 Websocket 将数据发送到服务器,但数据仅在服务器上转发,不进行存储。

Feedbase

https://github.com/chroxify/feedbase

Feedbase 是一个开源解决方案,专注于收集用户反馈和沟通更新。这个项目旨在为开发者提供一个平台,以便他们能够更好地与用户互动,收集用户的意见和建议,并及时向用户传达项目的进展和更新信息。

Unscrambler

https://unscrambler.dpw.me

Unscrambler 是 Dave Wilding 开发的一款实验性质的写作助手,它使用了 OpenAI 和 Microsoft 的服务。它旨在帮助那些想要表达中文内容但可能对词汇或语法了解不全的用户。用户可以尽力书写,然后点击“Unscramble”按钮来获取帮助。但该工具对输入内容的理解可能存在偏差,因此建议用户不要完全依赖它。

Box CLI Maker

https://github.com/Delta456/box-cli-maker

Box CLI Maker 是一个由 Delta456 开发的 Go 语言库,旨在为命令行界面(CLI)创建高度定制化的盒子样式输出。该项目支持多种内置样式、颜色以及对 Unicode、Emoji 字符的显示,并且能够适应不同的终端环境。

QRCode Studio

https://qrcode.rainforest.org.cn

QRCode Studio 是一个在线二维码生成工具,专注于创建可以被直接应用于设计的矢量二维码。用户可以通过简单的操作生成具有个性化设置的二维码,包括内容、边距、颜色、背景以及容错等级等选项。这些设置允许用户根据自己的需求定制二维码,以适应不同的设计和应用场景。

Logo Diagram Generator

https://github.com/beveradb/logo-diagram-generator

Logo Diagram Generator 是一个允许用户生成代表技术生态系统的矢量图形(SVG)图表的开源工具。这些图表使用每个工具的徽标,并将它们围绕中心徽标组织成不同的组。该项目旨在帮助用户通过可视化的方式理解技术栈中工具之间的关系和类别。

NextGenCSS

https://github.com/rudransh61/NextGenCSS-

NextGenCSS 是一个灵活且快速的 CSS 框架,以实用工具优先(utility-first)设计,支持自定义语法。这个框架适用于大型团队,并旨在通过 SASS 提供一致的 CSS 命名约定。用户可以在简单点击中更改实用工具名称,无需学习任何类名并查阅文档,使开发过程更快。

资源汇总

NextGenCSS

https://github.com/rudransh61/NextGenCSS-

NextGenCSS 是一个灵活且快速的 CSS 框架,以实用工具优先(utility-first)设计,支持自定义语法。这个框架适用于大型团队,并旨在通过 SASS 提供一致的 CSS 命名约定。用户可以在简单点击中更改实用工具名称,无需学习任何类名并查阅文档,使开发过程更快。

NextGenCSS

https://github.com/rudransh61/NextGenCSS-

NextGenCSS 是一个灵活且快速的 CSS 框架,以实用工具优先(utility-first)设计,支持自定义语法。这个框架适用于大型团队,并旨在通过 SASS 提供一致的 CSS 命名约定。用户可以在简单点击中更改实用工具名称,无需学习任何类名并查阅文档,使开发过程更快。

click-spark

https://github.com/hexagoncircle/click-spark

click-spark 是一个开源项目,它为网页上的点击事件添加了视觉效果,即在用户点击时产生火花效果。这个项目旨在为用户的点击操作增添一些视觉上的趣味。这个项目适合那些希望为网页添加有趣交互效果的开发者和设计师,它可以提升用户体验,使网页更加生动和吸引人。

Landing Page FYI

https://landingpage.fyi

Landing Page FYI 是一个专注于提供最佳着陆页构建资源的网站,该网站旨在帮助用户学习如何构建高转化率的着陆页,并通过提供一系列精选的工具、示例和指南来优化着陆页的创建过程。

Open Graph Examples

https://opengraphexamples.com

Open Graph Examples 是一个提供关于如何创建引人注目的 Open Graph 卡片的网站。它允许用户点击任何示例以获取更多信息,并查看如何使用 meta 标签实现它。通过实际的例子和工具,Open Graph Examples 能够帮助用户理解如何有效地利用 Open Graph 协议来提升他们的网页分享效果。