Weekly #022
文章推荐
Making noisy SVGs
https://daniel.do/article/making-noisy-svgs
这篇文章讨论了在网页设计中使用带有噪点纹理的 SVG 图形的方法。作者通过使用 SVG 规范编写了一个简单的插图,其中包含噪点纹理效果。文章介绍了如何使用渐变、遮罩和滤镜来实现这种效果,并展示了最终的插图效果。
HTML: The Bad Parts
https://www.htmhell.dev/adventcalendar/2023/13
这篇文章讨论了 HTML 在可访问性和可用性方面存在的一些问题。作者列举了一些常见的问题,如 <select multiple>
、<i>
元素、<ul>
和 <ol>
元素、title
属性、<datalist>
元素、<input placeholder>
、<input type=number>
和 <input type=date>
。
CSS Frameworks vs Custom CSS – What’s the Difference?
https://www.freecodecamp.org/news/css-frameworks-vs-custom-css
这篇文章讨论了使用 CSS 框架和编写自定义 CSS 两种不同的应用 CSS 的方法。CSS 框架提供了预定义的样式和组件,节省了时间并保持一致性,但学习曲线较陡,可能会导致冗余代码和限制自定义设计。自定义 CSS 则提供完全的控制和更清洁的代码,但需要更多时间和经验。选择哪种方法取决于项目需求和个人能力,也可以结合两种方法使用。最终目标是创建质量高、易用性好的网站。
Finding the best way to create animated gradient borders in CSS
https://bejamas.io/blog/css-animated-gradient-border
本文介绍了在 CSS 中创建渐变边框并对其添加动画的几种方法。这些方法包括使用 border-image
、background
、mask
以及 CSS Houdini 来实现动画效果。此外,作者还在文章中比较了每种方法的优缺点,并给出了选择最佳方式的流程图。
CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study
https://www.smashingmagazine.com/2023/12/css-scroll-snapping-aligned-global-page-layout-case-study
本文介绍了如何使一个全宽度的滑块组件与页面上的其他元素对齐。作者通过使用 CSS Scroll Snapping 技术,改进了一个简单的滑块,使其在滚动时能够停留在图片上。然后,作者探讨了如何在现有页面布局中实现滑块与其他元素的对齐,以及如何使用 CSS 变量来实现这种对齐。
工具介绍
Codify
Codify 是一个可以将代码转化为美观图片的网络应用程序。它能够让用户以优雅的方式展示自己的项目,使自己的代码展示更有吸引力。
Firesnap
Firesnap 是一个全能截图工具套件,可以轻松定制背景、阴影效果,并实现无限创意的无缝协作。用户可以自由选择背景颜色、渐变或自定义颜色,调整边距以达到完美的构图。
EnglishXYZ
EnglishXYZ 是一个可以将 YouTube 打造成个人英语学习教室的插件,它提供双语字幕、沉浸式学习、快捷查词和收藏等功能。可以通过鼠标悬浮在单词上来查看释义,并可以收藏单词以便日后复习。同时,插件还记录学习历程,并支持将已收藏的单词导入欧路词典。
//功能上和 Language Reactor 类似,不同的是后者支持网站多一些。
Github Worth
https://github-worth.vercel.app
Github Worth 是一个根据 GitHub 用户总贡献、总星标和总粉丝来估算其账号价值的工具。
//类似工具还有 Weekly #003 推荐的 Twitter Account Worth。
Whisper Turbo
https://github.com/FL33TW00D/whisper-turbo
Whisper Turbo 是一个快速的、跨平台、支持 GPU 加速并且完全在您的浏览器中运行的 Whisper 程序。
Gemini Next Web
https://github.com/blacksev/Gemini-Next-Web
Gemini Next Web 是一个基于 GeminiPro 并且免费、隐私优先的在线聊天 AI 工具,支持多种语言和功能,具有一键部署、Markdown 支持、快速加载速度等特点,可满足用户的各种需求。
// ChatGPT Next Web 现在也支持 Gemini 了。
资源汇总
Betterfox
https://github.com/yokoffing/BetterFox
Betterfox 是一个针对 Mozilla Firefox 的 about:config
调整的工具,旨在提升浏览器的速度、安全性和隐私保护,同时保持简洁和易用性。它包括了一系列设置和建议,可以帮助用户优化他们的 Firefox 浏览器,并提供了一些可选的增强功能。
Just Laws
Just Laws 是一个简洁、便捷的法律文库,它提供了一个简洁且方便的平台,可以浏览和查询中国的法律文件。该文库具有清晰的结构和整洁的界面,提供了优雅、纯净、极致的阅读体验。
SearchEmoji
SearchEmoji 是一个支持 30 种语言的表情符号搜索引擎,可以通过关键字搜索或浏览分类来找到所需的表情符号。它提供了最大的全球表情符号收藏,用户可以预览并一键复制到文档、消息和社交媒体帖子中。
Comflowy 社区
https://www.comflowy.com/zh-CN
Comflowy 是一个致力于以 ComfyUI 和 Stable Diffusion 为核心,打造更优质生产工具的社区。社区提供系统的 Stable Diffusion 和 ComfyUI 教程,同时建立了 Workflow 和模型数据库,帮助用户分享和选择适用的 Workflow 和模型。此外,社区还计划提供一个开源版的 Better ComfyUI,改进用户体验,推动 ComfyUI 的发展。
A Hacker’s Guide to Git
https://wildlyinaccurate.com/a-hackers-guide-to-git
一份关于 Git 的入门指南,它解释了 Git 的核心概念,包括仓库、树对象、提交、引用和分支等,并强调了理解 Git 内部工作原理的重要性,以及如何使用 Git 的高级功能。
Python Tutorial for Beginners (with mini-projects)
https://www.youtube.com/watch?v=qwAFL1597eM
本教程是为初学者设计的完整的 Python 编程课程,课程包含了许多小型项目,让学习者能够立即将所学知识应用到实践中。课程内容涵盖了 Python 中的运算符、数据类型、用户输入、列表和元组、字典和集合、循环、函数、递归、作用域、闭包等基础知识,并且课程最合还包括了一个最终项目,帮助学习者综合运用所学知识。
随便看看
豆瓣 2023 年度读书榜单
https://book.douban.com/annual/2023
//22 年加入书架的书还没看完,23 年的就来了 😂。