Weekly #012

2023-10-16

文章推荐

Making a nice neon button

这篇文章介绍了如何使用 HTML 和 CSS 制作霓虹按钮效果，包括文字发光、按钮发光和放大效果，并提供了相应的代码和示例。

An Anchored Navbar Solution

https://meyerweb.com/eric/thoughts/2023/10/05/an-anchored-navbar-solution

这篇文章讲述了作者如何使用锚点定位来创建一个连接导航栏的效果，以及如何通过更简洁的方法实现。作者介绍了之前使用的一种“hack”方法，并表示希望能够通过锚点定位来更清晰地实现。现在，随着 Chrome 浏览器支持锚点定位，作者可以尝试使用它来实现他之前想要的效果。文章中详细介绍了作者如何通过逐步改变 CSS 样式来实现所需的效果。最终，作者成功地使用锚点定位来创建了连接导航栏的效果。

如何制作落地页：保姆级实操指南

https://www.bmms.me/blog/landing-page

本文是一篇介绍如何制作落地页的实操指南，并介绍了海外产品运营逻辑和跳转不同页面的应用。此外，文章还分享了编写有效常见问题解答的技巧，并提供了一些相关案例和落地页手册展示。

The Ultimate Low-Quality Image Placeholder Technique

https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique

本文介绍了低质量图像占位符（LQIP）的概念和应用。LQIP 是一种在图像加载过程中为用户提供较低质量的图像占位符的技术，以填补加载时间的等待。然而，LQIP 在最大内容绘制（LCP）指标中存在一些限制，可能无法提高 LCP 得分。在实施 LQIP 时，需要注意不要对占位符图像进行放大处理，因为放大后的图像会受到惩罚，并且可能不会被视为 LCP 候选。文章还详细解释了 LCP 的计算方式和放大惩罚的计算方法。

How to Build Responsive Websites – Best Practices for Developers

https://www.freecodecamp.org/news/responsive-design-best-practices

响应式网页设计是一种能够在不同设备上良好展示和正常运行的设计方法，使用媒体查询、弹性布局和灵活的单位等技术可以实现响应式网页设计。本文介绍了在构建响应式网站时要考虑的几个原则，如使用媒体查询定义断点、使用弹性布局和网格布局、选择合适的单位等。响应式网页设计可以为用户提供更好的用户体验，使用户能够方便地在不同设备上访问网站。

The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()

https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark

这篇文章介绍了 CSS 中的 light-dark() 函数，可以根据使用的 Light Mode 或 Dark Mode 来改变颜色。该函数接受两个颜色值作为参数，根据使用的颜色模式输出第一个或第二个参数的颜色。此外，文章还提到了将来可能会有更多功能的 schemed-value() 函数，并列出了 CSS light-dark() 函数在不同浏览器上的支持情况。

工具介绍

Memex

https://github.com/WorldBrain/Memex

Memex 是一款具有全文搜索、高亮、注释等功能的浏览器扩展，旨在解决书签、查找旧网页和分散的笔记问题，帮助用户轻松整理和查找保存的网页。所有数据都存储在本地，用户可以自己导入书签和历史记录，且支持移动应用、加密同步、键盘快捷键和标签管理功能。

Bubbles

https://www.usebubbles.com/notetaker

Bubbles 是一个可以自动转录 Google 会议和 Zoom 的会议记录和协作工具，并提供由 AI 生成的摘要和行动项。用户可以在录制的会议中进行屏幕、摄像头和文本标注，并能与无法出席会议的人员进行沟通。此外，Bubbles 还提供了异步协作的功能，可以用于检查项目进度、解决问题、分享反馈和与客户合作。

纵横秒图

https://zhmt.article.cool

一个拖入表格数据就能生成漂亮图表的工具，目前仅支持 Windows。

Visual Copilot

https://twitter.com/builderio/status/1712508625518792850

Visual Copilot 是一款全新的 Builder Figma-to-code 插件，支持多种前端框架和样式库，可以一键将 Figma 设计转换为 React、Vue、Svelte、Angular、Qwik、Solid 或 HTML 代码，并支持自动响应，同时还支持自定义代码结构和与现有代码库的无缝集成。

Coooool Space

https://coooool.space

Coooool Space 是一个建立在人工智能时代的跨模态信息搜索和管理的空间。他们正在构建一个个人 AI 助手，名为”Coooool Assistant”，可以帮助用户消化各种形式的内容，如音频、视频、文章或大量图片。用户只需提供内容的链接，就可以与 Coooool Assistant 进行交流，获取所需的信息和来源。

Realtime Colors

https://www.realtimecolors.com

Realtime Colors 是一个帮助用户为网站选择颜色的个性化调色板工具，用户可以通过选择背景颜色、文字颜色以及主要和次要颜色来获取自己的调色板，并可以将结果导出为不同格式的文件。此外，工具还提供了对比度检查器和字体设置等功能。

Mockup Generato

https://mockupgenerator.co

一个免费创建样机素材的网站，只需上传一张图片即可生成多个样机素材，网站提供了海报、书签、便签和日历等多个样机类型。

蔚蓝档案标题生成器

https://tmp.nulla.top/ba-logo

一个蔚蓝档案风的标题生成工具。

Hotshot-XL Text to GIF

https://huggingface.co/spaces/fffiloni/text-to-gif

Hotshot-XL 是一个由 AI 驱动的文本转 GIF 模型，用户只需输入 Prompt 即可获得一张由 AI 生成的 GIF 图，并且该项目还可以与 Stable Diffusion XL 一起使用。