Eyoz

Weekly #006


文章推荐

New Viewport Units

https://ishadeed.com/article/new-viewport-units

这篇文章介绍了 CSS 的视口单位以及解决移动端使用 100vh 时出现的问题。作者介绍了新的视口单位,包括 svh、lvh 和 dvh,用于解决移动端浏览器在滚动时地址栏和工具栏的变化导致视口高度计算错误的问题。

Co-authoring Git commits

https://dev.to/cassidoo/co-authoring-git-commits-3gin

这篇文章介绍了如何在 Git 仓库的提交中添加共同作者,并解释了如何在命令行中进行该操作。通过添加 Co-authored-by: name <someemail@example.com> 到提交消息中,可以在 GitHub 或 GitLab 等平台上为其他开发者添加贡献者标识。

CSS Selectors: A Visual Guide

https://fffuel.co/css-selectors

这篇文章详细介绍了 CSS 选择器的各种类型和用法,包括通用选择器、类选择器、ID 选择器、后代选择器、相邻选择器、子元素选择器、兄弟选择器等等。此外,还介绍了属性选择器、伪类选择器和伪元素选择器的用法。这些选择器可以用于在 CSS 中选择和样式化不同类型的元素。

An Overview of CSS Sizing Units

https://www.sitepoint.com/css-sizing-units

本文介绍了 CSS 的四种主要的尺寸单位:绝对单位、字体相关单位、视口相关单位和容器相关单位。绝对单位如 cm 和 px 是基于具体的媒体测量值的,字体相关单位如 em 和 ch 是基于字体度量值的,视口相关单位如 vw 和 vmin 是基于视口大小的,容器相关单位如 cqw 和 cqh 是基于容器大小的。文章详细介绍了每种单位的特点和使用场景。

Scroll progress animations in CSS

https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css

这篇文章介绍了一项新的规范,可以使用 CSS 创建滚动驱动的动画效果。文章首先介绍了滚动进度时间轴,将动画与滚动进度关联起来。然后详细说明了如何使用动画时间轴和关键帧动画来创建进度条动画,以及如何同时应用多个滚动时间轴动画。

The Mad Magazine Fold-In Effect in CSS

https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css

本文介绍了如何在网页上实现纸张折叠效果,使用 CSS 和 HTML 的组合,而不需要 JavaScript。这种方法使用单张图片,而不是将其分割,在隐藏的图像元素中设置了组件的大小和纵横比。通过示例和代码,展示了如何创建这种折叠效果。

Four new CSS features for smooth entry and exit animations

https://developer.chrome.com/blog/entry-exit-animations

Chrome 从 116 和 117 开始引入了四个新的 Web 平台功能,可以平滑地实现进入和退出动画效果。这些功能包括在关键帧中使用 displaycontent-visibility 进行动画、使用 transition-behavior 属性来过渡离散属性、使用 @starting-style 规则来实现入场动画效果,以及使用 overlay 属性来控制顶层元素的动画行为。

工具介绍

AIdea

https://github.com/mylxsw/aidea

一款集成了主流大语言模型以及绘图模型的 APP,它集成了主流的大语言模型和绘图模型,支持 AI 聊天、协作和图像生成等功能。该应用使用 Flutter 开发,代码完全开源,支持 GPT-3.5/4、通义千问和文心一言等多个模型。此外,它还提供了图像处理功能,如文生图、图生图、超分辨率和黑白图片上色。该应用可在 Android、iOS 和 Mac 等平台上使用,并提供 Web 端。

RSSPath

http://www.rsspath.com

RSSPath 是一个 RSS 订阅工具,利用 AI 技术让 RSS 订阅更智能化。它能实时获取最新文章并利用 AI 技术为 RSS 订阅文章生成文章概要,帮助用户快速了解文章内容,让你更高效地阅读。你可以在自己常用的 RSS 阅读器中查看智能过滤后的内容。同时,它还提供 AI 翻译和 AI 过滤等功能,方便阅读外文文章和筛选符合自己兴趣的主题。

开屏跳过

https://github.com/zfdang/Android-Touch-Helper

开屏跳过是一个开源的安卓应用,旨在通过使用无障碍服务来自动跳过开屏广告。它可以通过关键字、指定控件或指定位置的方式自动点击屏幕上的按钮或区域来跳过广告。该项目不需要网络权限或存储权限,并且不会收集或上传任何个人信息。

//类似软件还有 GKD,一个基于 无障碍 + 高级选择器 + 订阅规则 的自定义屏幕点击 APP,软件的更多介绍可见 V2ex

Stability Matrix

https://github.com/LykosAI/StabilityMatrix

Stability Matrix 是一个用于 Stable Diffusion 的跨平台软件包管理器。它支持多种 Web UI 包,可一键安装和更新,内置 Git 和 Python 依赖项,无需全局安装,数据目录可移动到新驱动器或计算机。它还提供了语法高亮的终端模拟器和路由的 GUI 输入提示的启动器。支持多种软件包的预定义或自定义安装选项。还提供了可配置的环境变量和检查点管理器。

Kindle Highlight

https://github.com/chenmoonmo/kindle-highlight

一个通过 Kindle 书摘生成阅读笔记展示网站的项目,目前仅支持中文笔记。

资源聚合

Tailblocks

https://tailblocks.cc

Tailblocks 是一个即用型的 Tailwind CSS 区块,内置数百个可自定义的代码块,涵盖各种常见的 UI 元素和布局,可以帮助开发者快速构建网页。

//推荐 Landingfolio,相比起来这个内容更多,更全一些,除 TailwindCSS 外还有 Figma 和 Webflow。

CSS Loaders

https://css-loaders.com

一个包含 500 多个加载动画效果的 CSS 加载器集合。

随便看看

OnePiece Netflix

https://www.netflix.com/hk/title/80217863

OnePiece Netflix

//不合我胃口,看了一集看不下去了,槽点太多,不过特效做得不错。