Weekly #010
文章推荐
Relative rounded corners
https://set.studio/relative-rounded-corners
这篇文章讲述了如何使用 CSS 来创建完美的圆角效果，通过一个简单的公式来计算外部圆角的大小。作者介绍了使用 CSS 自定义属性和 calc() 函数来实现这个公式，并提供了完整的代码示例。
Accessible ANIMATED Accordion
https://dev.to/grahamthedev/accessible-animated-accordion-in-pure-css-no-way-5980
这篇文章介绍了使用 CSS 动画制作手风琴效果的方法。作者使用了 :target 属性来控制只有一个部分可以展开，同时利用 CSS 网格和 visibility 属性来实现动画效果。这种方法虽然可行，但并不理想，因为无法满足辅助技术用户的需求。作者还提到了其他一些有趣的 CSS 技术，如 prefers-reduced-motion 和 @media print。
零代码搭建文章 AI 总结机器人 [飞书版]
https://mp.weixin.qq.com/s/FnpB2ci5zer59RlO5WN3dg
本文介绍了如何利用飞书和知了阅读的 API 实现一个自动化的文章摘要机器人。通过创建一个多维表格，并配置相关字段和自动化流程，可以将文章链接通过 API 发送给知了阅读进行摘要提取，然后将提取的摘要写入飞书文档，并通过飞书发送摘录后的消息。这样就能够自动归档保存文章摘要，方便高效阅读。
8 micro tips for remarkably better typography
https://uxdesign.cc/8-micro-tips-for-remarkably-better-typography-986c8c4f6d85
这篇文章主要介绍了如何通过微调字体的细节来改善网站的可读性和美观性。作者给出了 8 个微小的建议，包括在黑色背景上减轻字体的粗细、大幅度减小标题的行高等。这些建议可以让你在几分钟内快速改善网站的排版效果。
The Death of “Click Here”: CTA Best Practices
https://bootcamp.uxdesign.cc/the-death-of-click-here-cta-best-practices-81e6af037025
这篇文章介绍了 CTA 的重要性以及如何设计一个有效的 CTA。它指出了使用无意义或重复的语言会导致用户困惑和犹豫，而使用带描述性标签的 CTA 能够提高可访问性和增加点击率。文章还提到了设计一个优秀的 CTA 所需的最佳实践，如使用积极的动词和紧迫的语言、个人化和简洁明了的文字等。同时，也列举了一些应避免的 CTA 短语，如“点击这里”和“阅读更多”。最后，文章强调了 CTA 不仅仅是一个按钮，而是引导用户进行有意义互动的窗口。
Understand Units in CSS: A Comprehensive Guide
https://www.hongkiat.com/blog/css-units-guide
本文介绍了 CSS 中常用的单位，包括绝对长度单位（像素、厘米、毫米、英寸、积分、毕加斯）、相对长度单位（em、rem、ex、ch、视口单位、百分比）以及时间单位（秒、毫秒）。同时还介绍了分辨率单位（DPI、DPCM、DPPX）的使用方法。通过了解这些单位，可以更好地控制网页布局，实现精确、响应式和视觉吸引力的设计。
Let’s Make a Rubber Button With HTML, CSS and SVG
https://cloudfour.com/thinks/rubber-button
这篇文章介绍了如何使用 HTML, CSS 和 SVG 来创建一个橡皮按钮，主要是通过使用 SVG 路径和 CSS 过渡实现。文章提供了代码示例和步骤说明，还讨论了一些扩展和使用该技术的可能性。
[CSS Fix] When justify-content: space-evenly overflows, un-center the content
这篇文章介绍了一个 CSS 溢出解决方案，作者通过使用一个 CSS 类来替换原有的布局属性，并结合动画和滚动事件来实现溢出的自动检测和处理。用于解决在使用 space-evenly 布局时出现的溢出问题。此外，作者还提到了 CSS 规范中的一个新特性，就是使用 justify-content 的 safe 关键字来解决这个问题，但目前只支持 center，对于 space-evenly 仍然需要使用上述的解决方案。
工具介绍
Translumo
https://github.com/Danily07/Translumo
Translumo 是一款先进的屏幕翻译工具，可以实时检测和翻译出现在选定区域的文本（例如字幕）。它具有高精度的文本识别能力，简单易用的界面以及低延迟。它集成了多个 OCR 引擎和翻译服务，支持多种识别和翻译语言。
Charts.css
Charts.css 是一个用于数据可视化的开源 CSS 框架，用于显示各种类型的图表。它使用 HTML 标签来展示数据，并可以使用 CSS 自定义图表样式，帮助前端开发人员使用简单的 CSS 类将数据转换为漂亮的图表和图形。
资源聚合
SVGmix
SVGmix 是一个收集 SVG 图标和品牌 Logo 的图标网站，网站拥有 300k+ 的图标资源，并且所有图标素材都可以在相应版权所有者的许可下免费获得。
Illustration.so
https://illustration.so/illustrations
Illustration.so 是一个提供免费插图下载的平台，提供 600 多个免费的插图供用户使用，这些插图涵盖了旅行、网购、咖啡馆、节日、开斋节和瑜伽等各种主题，可用于不同领域的设计和营销项目，并且这些插图全部可以用于商业使用。
Complete Python Bootcamp Go from zero to hero in Python 3
https://drive.google.com/drive/folders/1vbyJ26ojnw5NvEpL2mrRkl5N—zqc1yZ
一门针对 Python 语言的课程，旨在帮助学习者从零开始掌握 Python3。适合从未编程过的初学者、想转向 Python 的程序员以及想提升技能的中级 Python 程序员。
随便看看
乡村真人版《海贼王》
https://www.bilibili.com/video/BV1cN4y1X7nL
//最近刷到很多拿国外版和这条做对比的视频，感觉这种应该才是最合中国海米胃口的，视频拍得非常有意思，哈哈哈哈哈哈。
Perfect knockout text effect
https://twitter.com/noworkforsixian/status/1708441496356340195
这条推文介绍了三种实现完美抠图文本效果的方法：文本笔划、文本阴影和 SVG 的 <feMorphology>。作者比较了它们的优缺点，并推荐了使用 SVG 的方法。
