Weekly #023
本期周刊是 24 年的第一期周刊，祝大家新年快乐呀 🎉！
文章推荐
让 VSCode 更好用的设置——前端开发角度
https://www.xheldon.com/life/make-vscode-great-forever.html
本文介绍了作者作为一名前端工程师如何通过优化 VSCode 设置，来提高编码效率。文章详细讲解了作者对于 VSCode 的样式和编辑器设置的修改，包括主题、字体、渲染空白字符、自动添加/删除配对括号、括号着色、矩形选区、复制内容时的语法高亮、自动折叠等。
CSS Tricks to add 3D Effects to your Text
https://verpex.com/blog/website-tips/css-tricks-to-add-3d-effects-to-your-text
本文介绍了一种仅使用 CSS 实现多行文本 3D 效果的方法。作者首先介绍了如何对单行文本应用 3D 效果，然后介绍了如何实现多行文本的效果。作者通过调整 line-height 和 padding 等属性，以及使用 box-decoration-break 和 mask 属性，成功实现了多行文本的 3D 效果。作者还展示了两种不同的 3D 效果变体，并指出只需调整一些数值即可控制颜色、3D 深度和行间距等效果。
The Shrinkwrap Problem: Possible Future Solutions
https://kizu.dev/shrinkwrap-problem
本文介绍了一种使用锚定定位（anchor positioning）解决 CSS 中容器自动换行时无法适应内容的问题的方法。作者展示了如何利用锚定定位在 Flex 或 Grid 布局中优雅地装饰换行的文本或元素。文章还提到了一些限制和解决方法，包括修复 Flex 布局和使用旧的 inline-block 布局来解决问题。作者还展示了一些使用锚定定位装饰文本的实际应用场景。
Using date-based CSS to make old web pages look old
https://shkspr.mobi/blog/2023/12/using-date-based-css-to-make-old-web-pages-look-old
这篇文章讨论了如何通过 CSS 样式来判断网页的发布日期，并根据日期的不同设置不同的样式。文章介绍了一种方法，通过使用 CSS 属性选择器和变量来实现这一目的。作者还提到了一些技术上的限制和如何绕过这些限制。最后，文章鼓励读者思考如何应用这些技术来改进网站的外观和体验。
Basic Git Commands – How to Use Git in a Real Project
https://www.freecodecamp.org/news/how-to-use-basic-git-and-github-commands
本文介绍了如何使用 Git 和 GitHub 管理项目。首先，需要在 GitHub 上创建一个新的仓库，并使用 git init 命令初始化项目。然后，使用 git add 命令将项目添加到暂存区，并使用 git commit 命令将项目永久保存到 Git 仓库中。接下来，使用 git remote add origin 命令将远程仓库与本地仓库关联，并使用 git push 命令将项目推送到 GitHub。最后，介绍了如何添加和删除项目中的文件。通过学习这些基本的 Git 命令，可以更好地管理项目。
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 变量计算偏移大小以及将滑动容器的内边距与页面布局的内边距对齐等。文章还强调了使用 CSS 变量进行计算的优势，以及这种技术对性能的提升和用户体验的重要性。
工具介绍
BIG-AGI
https://github.com/enricoros/big-agi
big-AGI 是一款专为专业人士提供 AI 功能的开源应用程序，拥有声音和聊天功能、可视化工具、编码、绘图、通话等多种功能。它由 8 个供应商的最新模型和开源模型服务器提供支持，具有出色的用户体验，它还提供多个 AI 模型选择、隐私保护和与第三方服务的无缝集成。
AudioCut
AudioCut 是一个自动根据字幕剪辑音频的工具，可以删除间隙、噪音和重复内容。用户可以选择本地文件或通过录制来进行音频剪辑。
BoxSlider
https://github.com/p-m-p/slider
BoxSlider 是一个现代、轻量级的内容滑块库，提供了各种幻灯片过渡效果。它可以在现代浏览器中使用，没有任何依赖。你可以通过 npm 进行安装，也可以直接引入到项目中。通过创建 HTML 结构和使用 JavaScript 初始化滑块，你可以设置滑块的各种选项和效果，还可以使用 API 方法来控制滑块的操作，比如切换到下一张幻灯片、播放、暂停、销毁等。
Flying Git
Flying Git 是一个可以将你的 GitHub Commits 转换为飞机座位的在线可视化工具。
FreshTube
https://github.com/porjo/freshtube
FreshTube 是一个可以显示您最喜欢的 Youtube 频道最新视频的工具，它具有标记新视频、按年龄、时长和未来发布时间筛选显示以及修改点击视频缩略图时使用的 URL 的功能。它从托管在 Nextcloud 上的文本文件（通过共享链接）中获取 Youtube 频道列表，支持 RSS 订阅 URL 和 Youtube，并且它完全在浏览器中运行，所有数据都存储在本地。
Storyteller
https://smoores.gitlab.io/storyteller
Storyteller 是一个自动同步有声书和电子书的平台。它可以生成符合 EPUB 3 标准的电子书文件，可以通过支持 EPUB Media Overlays 的任何电子书阅读器来阅读，也可以使用专用的 Storyteller 移动应用，所有的书籍都存储在用户的设备上，可以自由进行移动、复制和备份。
CapHacker
CapHacker 是一个免费的 AI 视频字幕生成器，可以免费且无水印地生成字幕。它使用最新的技术来将语音转换为文本，并提供多种模板和自定义选项。用户可以将字幕作为文件或视频下载，并可以保存进度以便随时返回。
Private Convert
https://matan-h.com/private-convert
Private Convert 是一个私人的静态网站，可以在你的浏览器中私密地转换媒体文件，并将文件保留在本地计算机上。
SimplePDF Embed
SimplePDF Embed 是一个可以用一行代码来填写和签署 PDF 文件的工具。这个工具简单易用，可以帮助用户快速处理 PDF 文件的填写和签署需求。
AI Emoji Generator
AI Emoji Generator 是一个能够将文本转化为独特表情符号的工具，通过 Stable Diffusion 技术，它能够快速地根据任何文本输入生成个性化的表情符号。
//Weekly #011 中也推荐过这类工具，例如 https://emojis.sh 和 https://www.emoji.is。
Figma 2023 年度报告
Figma 2023 年度报告是一个用于生成个人 Figma 使用记录的工具。该工具可以帮助用户生成可供分享的贡献图，用户可以通过这个工具快速、简便地总结和展示自己在 Figma 上的工作成果和使用情况。
CSS Skeleton Generator
CSSGen 是一个从 HTML/JSX 代码中快速提取类名并生成 CSS 骨架的工具。通过简单的拖放文件或粘贴代码，可以轻松地提取 HTML/JSX 文件中的类，并快速生成 CSS。
AI Funko Pop Generator
AI Funko Pop Generator 时一个能够生成 Funko Pop 图像的人工智能工具。它具有简单易用的界面，用户只需输入描述文本即可生成个性化的 Funko Pop 图像。AI Funko Pop Generator 利用人工神经网络进行训练，能够快速生成符合 Funko Pop 艺术风格的图像。用户可以根据自己的想象力和需求来定制 Funko Pop，并可以下载生成的图像。
资源汇总
Mimic.css
https://github.com/erictreacy/mimic.css
Mimic.css 是一个 CSS 动画库，可以通过在 HTML 文档中添加样式表来实现动画效果。库中包含了多种动画效果，如回旋镖、转椅、颜色闪烁等，用户可以自由添加和贡献新的动画效果。
Mamba UI
Mamba UI 是一个基于 Tailwind CSS 的免费、开源的 UI 组件和模板集合，可以帮助任何人在几分钟内构建网站。它包含了各种元素，适用于电子商务网站或个人博客等不同类型的网站。这些组件和模板都可以免费使用，并且没有使用限制。
Minimalist CV
https://github.com/BartoszJarocki/cv
Minimalist CV 是一个使用 Next.js 和 shadcn/ui 构建的在线简历生成应用。它具有易于设置、自动生成布局、响应式设计等特点，可以通过克隆仓库、安装依赖、启动本地服务器等步骤来在本地运行，也可以使用 Docker 进行构建和运行。
Fancy Symbol
Fancy Symbol 是一个提供各种漂亮和时尚符号、特殊文字和表情符号的网站。通过该网站，用户可以轻松地为社交媒体帖子添加各种符号和特殊文字，提升内容的创意和吸引力。网站还提供了包括数学和技术符号在内的各种工具和符号选项。用户可以复制所需的符号，并在任何地方粘贴使用，无论是在线还是离线都可添加创造力。最常用的符号类别包括星星符号、心形符号、箭头符号和货币符号等。使用 Cool Symbols 可以表达情感、强调文本、添加装饰和视觉效果，非常简便易用。
The Valley of Code
一个介绍 Web 开发的资源手册，内容涵盖了 Web 开发的基础知识，包括 HTML 和 CSS 基础，VS Code、Git 和 GitHub 介绍，JavaScript 基础和高级概念，CSS Grid 和 Flexbox 布局，Tailwind CSS 库，关系型数据库和 SQL 语言，React 和 Alpine.js 等。
随便看看
I Build a GitHub Worth Estimate Generator
https://dev.to/random_ti/i-build-a-github-worth-estimate-generator-4jjd
//又一个 GitHub 账号价值计算工具 —— GitEstimate，工具灵感来自于上期周刊推荐的 Github Worth。