Weekly #019
文章推荐
The New CSS Math: rem() and mod()
https://danielcwilson.com/posts/mathematicss-rem-mod
这篇文章介绍了 CSS 中的 rem() 和 mod() 函数的基本概念和用法。rem() 函数用于计算余数，类似于 JavaScript 中的 % 运算符，而 mod() 函数则用于计算模数。文章详细解释了这两个函数的参数和单位的要求，并给出了一些示例。此外，文章还强调了在混合正负数时需要注意使用 mod() 函数的不同思维方式。
The Complete CSS Animations Tutorial
https://www.lambdatest.com/blog/css-animations-tutorial
这篇文章主要介绍了 CSS 动画的概念和应用。CSS 动画可以通过使用 CSS 属性来创建各种动画效果，如变换、过渡和关键帧动画。与传统的 JavaScript 动画相比，CSS 动画具有更好的性能和兼容性。文章还提到了使用 CSS 动画需要考虑响应式设计，并推荐了使用响应式网页检测工具来测试网页的兼容性。最后，文章还详细介绍了 CSS 的变换属性，以及如何使用 translate 函数来实现元素的平移效果。
CSS trick: transition from height 0 to auto!
https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de
本文介绍了一种使用 CSS Grid 实现平滑过渡效果的方法，解决了高度从 0 到自适应高度的过渡问题，并通过设置 max-height 或使用 CSS Grid 的技巧，来实现平滑过渡效果，避免出现固定高度的问题。
CSS Art Tutorial: Creating a simple Santa Claus
https://blog.eleftheriabatsou.com/css-art-creating-a-santa-claus
本文介绍了如何使用 CSS+HTML 创建圣诞老人和雪花的方法。通过使用一些类、伪类和动画，作者展示了如何创建圆形、伪类和简单动画效果。文章还提供了一些练习的建议，如添加更多动画和完善圣诞老人的身体。
Understanding the CSS auto-resizing textarea trick
https://til.simonwillison.net/css/resizing-textarea
这篇文章介绍了一个使用 CSS 和 JavaScript 来实现自动调整大小的文本框的技巧。通过使用 CSS Grid 和伪元素，可以使文本框根据内容的增多而自动扩展高度。作者还添加了一些个性化的修改，使文本框在开始时只显示一行文本，并在用户按下回车键时扩展为多行文本框。文章还提到了一些限制和解决方案，以及移动 Safari 浏览器中的一个 bug。
Use variáveis CSS como uma pessoa sênior com essas 5 dicas
https://dev.to/lixeletto/use-variaveis-css-como-uma-pessoa-senior-com-essas-5-dicas-2g52
本文介绍了使用 CSS 变量和 Design tokens 来优化样式表的重复性，实现样式的一致性和可配置性。通过使用 CSS 变量，可以将样式中的重复部分提取成变量，使得样式的修改更加方便和集中。同时，还介绍了 Design tokens 的概念，以及如何使用变量来实现不同的主题和组件变体。最后，还介绍了使用变量组合和类的方式来实现样式的动态修改。
工具介绍
Quiqr
Quiqr 是一个支持 Hugo 框架的本地化静态网站生成工具，它具有快速、安全和易用的特点，可以通过内置的 Hugo 服务器进行实时预览和发布。此外，Quiqr 还提供了丰富的模板库和集成的 Git 客户端，方便用户选择模板和将网站推送到代码托管平台。同时，Quiqr 还拥有简单快捷的内容管理系统，可帮助用户轻松创建和管理网站。
Keystatic
Keystatic 是一个用于代码库的内容管理工具，可以使 Markdown、JSON 和 YAML 内容可被人类编辑。它支持在 GitHub 或本地文件系统上实时编辑内容，而不会干扰现有的代码和工作流程。
Nightwind
一个自动化、可定制、可覆盖的 Tailwind CSS 暗黑模式插件，支持自动暗黑渐变和智能颜色映射。
TailwindMate
https://tailwindmate.jaleelbennett.com
TailwindMate 是一款在 Tailwind 中实现色彩转换的工具，能够轻松地将颜色转换为最接近 Tailwind 对应的颜色或将 Tailwind 颜色类别转换为 HEX、RGB、RGBA、HSL 和 HSLA 格式。
Watermark Remover
一款 AI 去水印工具，可以一键去除照片中的水印。该工具具有自动检测功能，可以快速且准确地重建照片，并且支持批量处理照片，能够同时编辑 50 张照片。
Tailwind CSS Gradients
https://www.sillyui.com/free-tools/gradient-generator
一套免费的 Tailwind CSS 渐变背景，提供 Subtle、Medium、Dark 三种类型的背景。
资源聚合
webdesigner.tools
一个由设计师自己定期维护的设计师工具网站，内容涵盖图标、插图、颜色、字体、样机等工具。
500 FREE Doodles & Scribbles
https://500doodles.amazy.design
一个提供 500 个免费涂鸦素材的设计资源网站。
随便看看
如何拥有一个低资费的境外手机号（美国/香港/澳门/英国/泰国）
https://blog.shuziyimin.org/1380
本文主要介绍了如何拥有低资费的境外手机号，拥有境外手机号可用于注册一些不在国内运营的互联网服务或是在国内直接使用境外流量。文章详细介绍了美国、香港、澳门、英国和泰国这五种境外手机号，详细列出了每种境外手机号的套餐费用及购买方式，并分析了每一种手机号的优缺点。
哪个是程序员最爱的编程字体？2 百万阅读的帖子选出最帅的七种字体
这篇文章主要介绍了程序员喜欢讨论的字体话题，特别是编程字体的选择和推荐。文章提到了等宽字体的特点和编程字体的特殊设计，还介绍了一个编程字体大集合的网站。然后分享了七款网友最喜欢的字体，包括 JetBrains Mono、FiraCode、Source Code Pro、Inconsolata、Iosevka、Ubuntu Mono 和 Github Monaspace。