Eyoz

Weekly #027


本期将是年前的最后一期了,从今天起,周刊将会停更 2 - 4 周。要准备回家过年了,就不更新啦,提前祝大家新年快乐 🎉。

文章推荐

CSS Blurry Shimmer Effect

https://www.smashingmagazine.com/2024/01/css-blurry-shimmer-effect

这篇文章介绍了如何使用 CSS 技术创建一个类似于盒阴影效果的模糊效果。作者通过结合伪元素、渐变和背景滤镜等 CSS 特性,演示了如何在元素周围创建逐渐模糊的效果。文章从 HTML 标记开始,并逐步介绍了定位伪元素、使用透明渐变进行遮罩、细化遮罩效果、逐渐模糊背景以及添加半透明阴影等步骤。整篇文章通过示例和代码演示了实现这一效果的详细过程。

Nested Dark Mode via CSS Proximity

https://jwdallas.com/posts/nesteddarkmode

这篇文章介绍了通过 CSS 继承实现嵌套主题的方法。作者提到了 CSS 选择器不考虑元素之间的关联性,而 CSS 继承是基于“接近性”的特性,使得子元素会继承最近的父元素的样式。作者介绍了如何利用自定义属性和继承来简化嵌套主题的样式设置,并强调了这种方法的简洁性和灵活性。

How to Optimize Your CSS Code for Faster Web Pages

https://www.freecodecamp.org/news/how-to-optimize-your-css-code-for-faster-web-pages

这篇文章介绍了如何优化 CSS 以提高网页性能。它强调了编写简洁、高效的 CSS 代码对网页加载速度和用户体验的重要性,提出了写更短的 CSS、使用浅层 CSS 选择器、分割 CSS 代码和优化 CSS 交付等策略。文章指出,优化 CSS 可以加快网页加载速度,提高用户体验,而这些优化在大规模应用时会产生明显影响。文章最后强调了网页性能优化是一个持续的过程,需要不断审查和改进 CSS 以跟上最佳实践和新趋势。

Accounting for Internationalization with CSS and HTML

https://sparkbox.com/foundry/internationalization_css_html

这篇文章讨论了国际化在开发中的重要性,以及如何在 CSS 和 HTML 中实现国际化。通过使用逻辑属性、CSS Writing Mode、dir 属性和 lang 属性,可以确保页面在不同语言和文化背景下的显示和布局效果。文章还提到了文化化的重要性,以及一些因未考虑国际化而导致的负面案例。最后强调了在产品开发早期就考虑国际化的重要性,以避免后期大规模代码重构。

My take on fading content using transparent gradients in CSS

https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css

这篇文章介绍了作者使用覆盖元素的技术实现文本淡出效果的方法,以及两种不同的 CSS 技术:background-clip mask-image。作者解释了这两种方法的实现和浏览器支持情况,以及它们各自的优缺点。这些技术可以使文本在背景上淡出,而且可以保持文本的可选性和颜色。

工具介绍

ai-o

https://ai-o-app.vercel.app

ai-o 是一个全功能的 AI 助手,能辅助用户进行日常任务,提升生产力。具备与 OpenAI 最新模型聊天、导入聊天记录、组织聊天、定制提示、语音输入和文字转语音以及 Markdown 格式全面支持等功能。未来还将推出 AI 写作助手、AI 邮件助手、AI 翻译器等功能。

Yurt

https://github.com/nichwch/yurt

Yurt 是一个基于 Nomad Hypertext 原则构建的静态网站生成器,可以用于创建自己的语义超链接博客。Yurt 支持 Markdown 格式编写博客内容,并利用本地 AI 模型对博文进行嵌入,创建相关段落的静态索引。Yurt 还支持设置 now 页面,用于展示当前关注的主题,允许读者从当前页面开始查找博客中的相关内容,并提供了其他配置选项和可能的优化方案。

Gitblog

https://gitblog.io

Gitblog 是一个轻量、简单而强大的博客解决方案,利用 GitHub 仓库的 issues 来构建博客。它集成了博客评论和分析功能,所有数据都保存在 GitHub 上,无需担心数据丢失。并且 Gitblog 还具有开发者友好的特性,包括与 GitHub 集成、标签、原生评论、自定义域名、自动 SSL 证书和 AI 生成的 SEO 友好描述和关键词等功能。

Whisper API

https://whisperapi.com/speech-to-text-free-tool

WhisperAPI 是一个免费的在线语音转文字工具。该工具能让你上传音频文件并免费获得高质量的文字转录,这一切都由 OpenAI Whisper 模型支持。它支持 96 多种语言以及常见的音频文件格式。并提供分段标记说话者、翻译功能、初始提示等功能。此外,该工具无需用信用卡注册,用户只需注册账号即可使用 API 获取文本转录。

Invoicer Studio

https://www.generateaninvoice.com

Invoicer Studio 是一个可以快速生成发票的在线工具。用户可以自定义自己的发票,只需点击蓝色按钮就能完成操作。这个网站还提供了多种发票模板供用户选择,并且支持一键更改元素样式。用户可以详细填写发票上的信息,比如公司信息,增值税号,发票号,开票日期,到期日期,费率等等。此外还有额外费用和备注的部分,方便用户添加额外信息。填写完成后用户可以选择将发票打印为 PDF。

Article to Podcast

https://a-to-p.vercel.app

Article to Podcast 是一个可以将文章转换为播客的服务平台。用户可以将任何文章链接输入网站,大约 3 分钟,网站就会为用户生成播客版本的内容,使用户可以以听播客的方式读文章,并且用户可以将生成的播客下载到本地。

Google Indexing Script

https://github.com/goenning/google-indexing-script

Google Indexing Script 是一个可以在 48 小时内让整个网站在 Google 上被索引的脚本,无需任何技巧或黑客行为,只需使用简单的脚本和 Google API。使用该脚本需要安装 Node.js,并在 Google Cloud 上创建项目并启用 Indexing API,同时确保网站在 Google Search Console 上已验证并提交了站点地图。虽然 Google Indexing API 可以让 Google 知道您网站所有页面的存在,但并不会直接提高页面在 Google 上的排名。

Github Profile Generator

https://githubprofile.com

GitHub Profile Generator 是一个用于快速创建令人印象深刻的 GitHub 个人资料的工具。使用 GitHub Profile Generator,用户可以轻松定制 GitHub 个人资料的外观和风格,并将生成的 Markdown 代码粘贴到 GitHub 个人资料存储库中,从而改善其 GitHub 个人资料的可视化效果。

//类似工具还有 ProfileMe.devGitHub Profile Page Creator

资源汇总

CMDExplorer

https://cmdexplorer.space

CMDExplorer 是一个全面的命令行资源,它旨在帮助用户轻松提高他们的命令行技能。该网站提供大量命令和命令的解释,包括导航、文件和目录的创建和移除、权限和所有权、压缩与解压缩、文件查看、编辑和删除、网络命令、系统信息、安全和权限、系统实用程序和任务调度等等。无论是初学者还是经验丰富的开发人员,都可以在这个平台上学到很多。

7000 FREE UI ICONS https://www.figma.com/community/file/1311159026125960259/7000-free-ui-icons

7000 FREE UI ICONS 一款包括界面图标、国家图标和支付图标等多种类型的全新 Figma 图标库,旨在为设计师和创意人士提供免费的高质量图标资源。同时还提供了整理好的图标文件,方便用户下载并在项目中使用。

随便看看

Tran

https://github.com/Borber/Tran

Tran 是一款简洁、快速的划词翻译工具。该工具内置谷歌翻译镜像,可以通过快捷键或划词进行翻译,并支持固定翻译面板、划过关闭和划过复制等功能。

//现在太多类似的划词翻译工具了,好用的没多少,感觉都是在重复造轮子。