Weekly #025
文章推荐
My CSS resets
https://keithjgrant.com/posts/2024/01/my-css-resets
这篇文章介绍了作者的 CSS 重置样式，包括盒模型重置、去除 body 边距、表单元素字体设置、图片和 SVG 样式调整以及针对减少动效的媒体查询。作者解释了每个部分的目的和设计考虑，并分享了个人的实践经验和偏好。文章还提到了一些其他流行的 CSS 重置方法，并强调了作者的设计理念和对于简化和平衡的追求。
Design better pagination
https://coyleandrew.medium.com/design-better-pagination-a022a3b161e1
本文介绍了分页 UI 的最佳实践和复杂考虑因素。从基本级别的创建分页开始，逐步讨论了导航页面、编号表示、截断页面导航、第一个和最后一个按钮、显示计数、每页金额、转到页面输入字段、分页页面放置、数据表批量选择操作注意事项等内容。此外，还探讨了分页与无限滚动的比较以及在不需要编号导航时的替代方案。
Designing better target sizes
https://ishadeed.com/article/target-size
这篇文章是关于目标区域大小的重要性，作者详细介绍了如何增加目标区域的大小以提高用户体验。文章包括了 UI 元素的交互设计、目标区域的规范和测试方法，以及一些实际网站的示例和解决方案。整篇文章提供了丰富的信息和技巧，对于前端开发人员和 UI 设计师来说都很有价值。
How to make external links accessible
https://blog.pope.tech/2024/01/02/how-to-make-external-links-accessible
这篇文章讨论了外部链接在网页中打开时应该选择在同一标签页打开还是在新标签页打开的设计问题。作者指出大部分外部链接应该在同一标签页打开，因为这样可以给用户更多选择权，并且对于可访问性和用户体验来说更好。然而，也提到了一些特殊情况下应该在新标签页打开链接的情况，并提供了一些关于如何设计和编写这些新标签页打开链接的可访问性的建议。
Creating an Engaging GitHub Profile: A Step-by-Step Guide
https://dev.to/zanepearton/creating-an-engaging-github-profile-a-step-by-step-guide-4hfl
这篇文章介绍了如何创建一个独特且引人注目的 GitHub 个人资料，包括动态头部、动态 GIF、个人介绍、连接徽章、提交历史可视化、编程语言展示、云技术展示、框架展示、3D 建模/虚拟现实/增强现实技能展示以及 GitHub 统计数据展示等内容。文章还提供了代码片段和示例，让读者能够轻松地为自己的 GitHub 个人资料创建一个丰富、动态且具有吸引力的页面。
Using Heaps of Cutting Edge CSS Features to Build a Progress Indicator
这篇文章讲述介绍了作者如何运用新的 CSS 特性来构建页面滚动进度指示器。文章深入讲解了创建动画、滚动驱动动画以及渐进增强等技术，同时强调了在使用新特性时需要关注浏览器支持情况。文章的重点是展示作者如何利用 CSS 新特性创建了一个精美的页面滚动进度指示器，并分享了相关的代码和技术细节。
工具介绍
Spliit
Spliit 是一款简约的应用程序，用于跟踪和与朋友和家人分享花费。它可以创建群组、记录支出、分配类别、进行高级分摊、分享链接、查看参与者的花费、优化资金转移，并且没有广告、账户限制。
Voluble
Voluble 是一个利用 AI 对 YouTube 视频进行总结和交流的工具，它能够快速生成摘要、找到关键点，并提出问题，用户只需输入 YouTube 视频的 URL 即可开始使用。这个工具能够让观看 YouTube 视频变得更加有趣，节省时间，快速获取信息，并通过智能问答获得即时见解。
FormsLab
https://github.com/Ryczko/FormsLab
FormsLab 是一个开源的问卷调查和体验管理方案创建工具。它可以用于收集客户反馈、创建投票调查或问卷调查，并且支持各种形式的问题类型。
highlight.cool
highlight.cool 是一个让读者可以在网页上对感兴趣的内容进行高亮标记的工具。通过高亮显示感兴趣的部分，使其更加醒目。用户可以添加 highlight.cool 到自己的网站，无需注册即可免费使用。
TikTok Wrapped
TikTok Wrapped 是一个回顾你在 TikTok 上的精彩时刻的工具，通过下载你在 TikTok 上的数据，你可以深入了解自己的 TikTok 旅程，回顾过去一年的热门视频和趋势。
ReplaceAnything
https://github.com/AIGCDesignGroup/ReplaceAnything
ReplaceAnything 是一个高质量的内容替换工具，由阿里巴巴集团的智能计算研究所开发。该工具可以进行高质量的内容替换，包括衣物、背景和人物等，并在 HuggingFace 平台和 ModelScope 上提供了工具的试用。
资源汇总
Web Interface Guide
一个教你如何构建良好 Web 界面的指南，涵盖了互动、字体排印学、运动、触摸、优化、可及性和设计等方面的建议。指南强调了诸多细节，包括互动元素的设计、字体排印的优化、动画效果的控制、触摸设备上的优化、性能优化、可及性考量以及设计原则。
Animated Fluent Emojis
https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis
Animated Fluent Emojis 是一个包含微软所有动态表情符号的资源库，通过悬停在表情符号上，可以将表情符号下载为 png 文件或是将图像标记复制到剪贴板。
A Dark Mode Toggle Without JavaScript
https://github.com/TymekDev/no-js-dark-mode-toggle
一个介绍如何利用 :has() 选择器以及 :checked 状态选择器，在不使用 JavaScript 的情况下实现网站深色模式的案例。作者分享了 HTML 和 CSS 的代码示例，并提到了一些额外的改进和技巧，包括利用 label 的 for 属性、隐藏复选框、美化切换按钮等。
随便看看
LangCSS
LangCSS 是一个为你设计 TailwindCSS 的 AI 对话机器人，该工具可以生成实用的 CSS 类，并提供了 SVG 设计辅助、Monaco 代码编辑器、撤销、流式 AI 和编辑等功能。同时，该工具保证生成的代码归用户所有，不需要许可证。
Mockup Generato
https://mockupgenerator.co/pro
一个免费创建样机素材的网站，只需上传一张图片即可生成多个样机素材，网站提供了海报、书签、便签和日历等多个样机类型。
//在 Weekly #12 中推荐过，现在推出 Pro 版了，价格上有点偏贵，看来是为重度用户准备的。
【STranslate】WPF 开发的一款即开即用、即用即走的翻译 OCR 软件
https://meta.appinn.net/t/topic/51362
STranslate 是一款即开即用、即用即走的翻译 OCR 软件，软件完全免费且提供离线 OCR 功能。软件作者提供免费 API 及部分源代码，并支持自建 API 和百度云翻译 API，同时软件支持识别二维码和历史记录回溯功能。
//软件还不错，继续观望下。