#demo #前端 #css #codepen
3D Card Hover by Gayane Gasparyan

这个酷诶，感觉适合很多角色展示场景
而且也简单，就是图片+ translate3d

#碎碎念
https://x.com/bearbig/status/1753150853773750780
坏了，看着确实还挺好玩

X (formerly Twitter)

Bear Liu (@bearbig) on X

这可能是Vision Pro真正好玩的功能

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 289 期）：宽容从何而来

1. SQLite 可以替代 MySQL 和 PostgreSQL 吗（英文） 📓 SQLite 一般用于单机的嵌入式数据库，但是最近发展得越来越好，作者讨论是否可以把它用作服务器的主数据库。 #后端

里面有一句话还挺有意思「Most developers tend to over-estimate how many resources a project needs to run, and underestimate the performance and benefits of simple "less shiny" solutions like SQLite. 大多数开发人员往往会高估项目运行所需的资源，而低估像 SQLite 这样“不那么优雅”的简单解决方案的性能和优势。」

2. Noi 🧰 跨平台的桌面应用，在一个界面里面集成了多个 AI 网站，支持复用提示，以及同时向多款 AI 提问。 #AI
3. AITDK 🧰 一款浏览器插件，提供当前网站的流量/Whois/SEO 等信息。 【试了试，这个挺赞的】
4. code-inspector 🧰 一个 JS 打包器的插件，点击网页 DOM，就会自动打开 IDE，并定位到相应的源码位置，目前支持 webpack/vite/rspack 打包器。（@zh-lx 投稿）
5. Process Explorer 🧰 微软官方工具，可以查看 Windows 所有进程的详细信息，免费下载。
6. winlator 🧰 一个安卓 App，让安卓手机可以运行 Windows 应用程序。
7. iOS 应用开发教程 📓 斯坦福大学2023年学年的一个英文课程，现在已经全部上网，包含讲课视频和课件。

#优质博文 #前端 #后端 #react
模块化的请求数据统一管理的构想

AI摘要： 文章讨论了如何在复杂的前端应用中优化数据管理，特别是在使用 React Query 管理多个相互关联的模块数据时遇到的挑战。作者提出了一种解决方案，通过后端和前端协作，减少数据冗余，提高数据更新的效率和准确性。具体方法包括重构数据结构，把引用数据分离出来，并在前端使用如 zustand 或 jotai 这样的库进行集中式的数据管理，使数据更新更加高效，避免在多个模块中重复更新数据​​。

via innei

innei.in

模块化的请求数据统一管理的构想

在一个复杂的业务场景下，一个页面中被拆分多个组件，或者是多个组件共同组成一个独立的模块而不受到其他模块的影响。如下图所示。 ref:file/24q36xw389k03evdxw.excalidraw 上图展现的典型页面中，有三个模块，侧栏的 asset list，中间的 asset detai

#demo #前端 #css #codepen
Moving Waves SVG by Interarrows

这个貌似就是各大博客经常用的 wave 动画（至少shoka主题是这个）
实际是 svg + 动画 translate 移动

#demo #前端 #css #codepen
Logo w/ Superpowers by Hyperplexed

很有创意的一种Logo动画形式？
好DJ啊

#demo #前端 #css #codepen
CSS Scroll-Driven Glow Cards ⚡️ by Jhey

又是经典发光效果，但是滚动驱动

#前端 #css #demo #codepen #svg
Revolving Text by Rafa
SVG Menu Toggle Button with linear(), stroke-box, and individual transform properties 🚀 by Jhey

非常好的svg切换动画，比吃了德芙还丝滑

#前端 #css #demo #codepen
Revolving Text by Rafa

一个酷酷的动态旋转文本效果

「 通过 css 一系列的旋转（`rotateX`, rotateY, rotateZ`）和倾斜变换（translate），以及 `preserve-3d 属性，实现文本的 3D 旋转效果。此外，使用了`@keyframes` 定义了动画序列，使得文本能够不断旋转。通过 createLetters 函数动态地创建了文本字符，并将它们放置在3D空间中的正确位置。
dat.GUI 真是好东西喵」

#demo #前端 #css #codepen
glowy hover effect by Ines

从今天开始偶尔也搜罗一些好看的codepen demo 分享一下
很酷的发光悬停效果，很丝滑

总结下实现：「使用 CSS 变量和 径向渐变蒙版（mask） 在悬停时创建动态发光效果。 JavaScript 会根据鼠标移动动态更新这些坐标变量，从而在卡片上创建跟随光标的聚光灯。 通过 ResizeObserver 确保效果适应卡片大小的变化以提高响应能力。」

#优质博文 #前端 #css
图解 CSS：CSS 层叠和继承

AI摘要：这篇文章介绍了CSS中的层叠、继承和权重三个核心概念，重点解释了层叠和继承的原理和应用。层叠确保了样式按照一定的规则和顺序应用，包括源和重要性、选择器权重、声明顺序等。继承则处理了属性值在DOM树中如何传递和应用。文章还探讨了 @layer 规则，它提供了一种结构化方式来管理CSS规则，使得样式更易于维护和扩展。

via 掘金 大漠

juejin.cn

图解 CSS：CSS 层叠和继承 - 掘金

CSS 中有三个概念是必须要掌握的：层叠、继承和权重。今天我们主要来了解 CSS 中的层叠和继承。层叠是 CSS 固有的一个东东，它赋予了层叠样式表层叠性，也常称级联。

#碎碎念
去年开始就被莫名其妙ban了公开发言前前后后找了spam bot 5次都没解封
群友：你试试开骂，有个朋友开骂就解封了
好吧咱试试.....wtf这谁蚌得住啊

#碎碎念
艹，我这莫名的笑点

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
我说我又忘掉了什么
科技爱好者周刊（第 288 期）：技术写作的首要诀窍

1. 2023年前端技术盘点与展望（中文） 📓 腾讯云开发者公众号与腾讯 MoonWebTeam 前端团队联合推出的长篇技术报告。
2. JS 空数组的 every() 方法（英文）📓 every() 方法对于空数组总是返回 true，这是为什么。 #javascript
3. Echo UI 🧰 一款专为 Web Audio API 设计的 UI 库，适合用来搭建基于 Web 的音频应用，基于 React 和 TailwindCSS 开发。 #组件库 #tailwind
4. Message Nest 🧰 开源的消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。
5. Tiny RDM 🧰 Redis 桌面管理客户端，支持 Mac、Windows、Linux。 #后端 #redis
6. Animotion 🧰 一个网页 CSS 动画生成器，可视化设定动画，自动生成代码。 #css
7. Ada 🧰 一个 URL 解析器，符合最新规范，使用 C++ 编写，可以快速处理 URL。
8. Inpaint-web 🧰 开源的图片修复和超分辨率工具, 纯浏览器端实现。
9. AI 字体模型市场 🧰 该网站列出 AI 生成的字体，可以在线使用它们进行文字渲染。
它还支持网页手写八个字，生成自己的 AI 字体。 #AI 【真会玩】

Weixin Official Accounts Platform

穿越时空：2023年前端技术盘点与2024年技术展望

前端该如何进步？