#优质博文 #前端 #后端 #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年技术展望

前端该如何进步？

#优质博文 #前端
作为前端，工作中处理过什么复杂的需求？

AI摘要：腾讯 IMWeb 团队成员分享了在疫情期间，负责腾讯课堂前端研发时面临的复杂挑战。流量激增带来了前所未有的考验，包括核心 HTML 入口的稳定性、音视频直播服务的稳定运行、SAS 数据管理配置平台的稳定性、IMPush 消息通道的压力、以及监控、日志和灰度控制的重要性。此外，团队还积极参与后台保护工作，帮助后台团队共渡难关。在极端业务需求压力下，团队快速推出了腾讯课堂极速版，并采用 Nohost 方案和 Tolstoy 方案提高开发效率，以及 Thanos 方案确保稳定上线。个人技术能力和文档建设在这一切中起到了至关重要的作用。

via 微信公众号 前端技术编程

Weixin Official Accounts Platform

作为前端，工作中处理过什么复杂的需求？

#demo #前端 #css
CSS 灵动环动画

分享一个好看的CSS动画，通过不断叠加 box-shadow 实现

codepen 可以查看
👉「https://codepen.io/lonekorean/pen/KKVdQPX」

via 微信公众号 前端侦探

#优质博文 #前端 #react
React 19 即将推出的 4 个全新 Hooks，很实用！

AI摘要：React 19即将引入4个全新的Hooks： use 、 useOptimistic 、 useFormState 和 useFormStatus ，主要针对数据获取和表单管理。use Hook允许读取类似于Promise或context的资源，能在客户端进行“挂起”的API操作。useOptimistic 为乐观更新提供支持，可以在提交操作同时更新用户界面。useFormState 用于根据表单动作更新状态，主要应用于显示确认消息或错误消息。useFormStatus 用于获取表单提交的状态信息，如提交状态、数据、方法等。这些新特性旨在简化数据获取和表单处理流程，提升开发效率和用户体验。

via 微信公众号 前端充电宝

Weixin Official Accounts Platform

React 19 即将推出的 4 个全新 Hooks，很实用！

实用~