#优质博文 #前端 #javascript #动画 #astro

零 js 开启 View Transitions 动画

AI 摘要：文章介绍了如何在 Chrome 126 中，无需JavaScript，仅通过 CSS @view-transition 在 Astro 框架的多页面应用(MPA)中启用类似原生的页面切换动画。具体步骤包括初始化 Astro 项目，在 BaseHead.astro 中添加 @view-transition at-rule，并在文章列表页和详情页中为图片元素设置相同的 view-transition-name ，从而在页面切换时实现动画效果。最终实现了一个丝滑的动画体验。

via liruifengv

Liruifengv

零 js 开启 View Transitions 动画 | liruifengv

Chrome 126 支持了在 MPA 多页面中启用 View Transitions，零 JS，为你的网站开启类似 native 的动画效果。

#碎碎念
最近的精神状态：我好废物 - 我好幸福 - 我好废物好想摆 - 我好幸福 - 我好废物 - 我好幸福 - 啊头疼想摆😐

#资源推荐 #动画 #前端 #tools

刚刚发现知名博主 3Blue1Brown 平时制作视频使用的动画库 Manim 竟然开源并且 59K Star ⭐️，有点酷炫！

结合之前使用 Manim 制作的 ChatGPT 图解原理实现教程搭配使用，感觉极佳啊 https://youtube.com/watch?v=wjZofJX0v4M

https://github.com/3b1b/manim

Source Twitter @tuturetom

YouTube

Transformers, the tech behind LLMs | Deep Learning Chapter 5

Breaking down how Large Language Models work, visualizing how data flows through.
Instead of sponsored ad reads, these lessons are funded directly by viewers: https://3b1b.co/support

---

Here are a few other relevant resources

Build a GPT from scratch…

#优质博文 #前端 #react #状态管理

一种适用于 Zustand 和 React Query 的前端数据管理方式

AI 摘要：文章介绍了在前端数据管理中结合使用 Zustand 和 React Query 的方法。传统的 React Query 在处理复杂数据和乐观更新时存在效率低和错误率高的问题。通过使用 Zustand 代替 React Query 来托管数据，并建立数据映射表，可以简化数据更新逻辑和提高维护性。具体实现包括利用 Zustand 管理状态，通过 hooks 获取数据，以及在 store 的 fetch 方法中同步远程服务器数据。该方法在一个 RSS 信息流浏览器 Follow 中得到了应用。

innei.in

一种适用于 Zustand 和 React Query 的前端数据管理方式

在上面这篇文章中提到当 React Query 托管的数据过于复杂或者冗余的话，后续在前端做数据的乐观更新会变得非常复杂并且不可控。 [!NOTE] 乐观更新指，前端在进行数据操作时，通过 API 方式向服务器提交数据，之后数据在 UI 上的更新由前端提供，不需要等待服务器的响应。这样的方式对用户

#优质博文 #前端 #react #compiler

I tried React Compiler today, and guess what... 😉

AI 摘要：作者在尝试了 React Compiler 后，总结其在减少重新渲染方面的效果。尽管简单示例中表现良好，实际应用中效果并不理想。作者在三个不同规模的应用中测试，发现 React Compiler 仅在少数情况下能减少重新渲染，远低于预期。最终，作者认为 React Compiler 虽然有潜力，但在当前版本中仍存在诸多局限，尤其在处理复杂项目时需要手动优化。

Developerway

I tried React Compiler today, and guess what... 😉

Investigating whether we can forget about memoization in React, now that the React Compiler is open-sourced.

#碎碎念
https://x.com/rxliuli/status/1799668996201144352

前几天刚有人因为浏览器扩展盗取 cookie 损失 100w 刀，结果就有人写了 cookie 管理的扩展，还自荐进了阮一峰的周刊，你猜他想做什么？🤣

你猜猜它还要什么权限？向你访问的所有网页注入脚本的权限。这样的话，只需要一次恶意更新，你使用浏览器访问的所有网站的 cookie 都会泄露，甚至，还可以记录你的帐号密码🥲

看现在的浏览器的插件推荐真的得长点心♥️

#优质博文 #前端 #tailwind #css #最佳实践

研究三天，我找到了 tailwindcss 的正确打开姿势

【这个基本上就是我们现在团队的tailwind 使用方案，确实是很舒服的一套实践~】

AI 摘要：
1. 痛点再审视：冗长的 class 名可通过提取变量来简化，减少代码重复。
2. 无 CSS 方向：虽可用 @apply 聚合样式，但正式项目中不推荐，以避免失去体积优势。
3. 封装思维转变：借鉴 Unocss，将组件属性设计为布尔值，简化传参。

<Button primary sm>Primary SM</Button>

4. 实用工具：
- clsx 合并 class 名。
- twMerge 处理优先级问题。
- cva 管理多值属性。（补充：也可 tailwind-variants，是cva的套件）

const cls = twMerge(clsx('base', {'bg-blue-500': primary, 'bg-red-500': danger}));

5. 智能提示配置：配置编辑器正则表达式，使智能提示在变量和函数中生效。

6. 总结：TailwindCSS 提升开发效率，特别适合快速编写响应式页面。

via 微信公众号 这波能反杀