呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #react #状态管理
The URL is a great place to store state in React

有时,最佳的状态存储位置就在 URL 中。这很简单、实用,而且常常被忽视。

AI 摘要:本文介绍将状态存储在 URL 中的方法,并分析其优缺点及适用场景。

文章探讨了如何通过在 URL 中存储状态,使得关键组件(如模态窗口)在页面刷新后仍然保持打开状态。为了应对单纯使用 React 的 useState 所带来的局限性,作者详细比较了多种状态存储方式,包括应用内存中的状态、浏览器存储(如 localStorage 与 sessionStorage)、服务器存储以及 URL 存储。每种方式均配有代码示例,展示如何实现状态的持久化。文章重点讨论了使用 URL 存储状态的诸多优势,如便于分享、读取速度快、全局性以及与浏览导航的兼容性,同时也指出了其在调试维护、扩展性和类型安全方面的挑战。最后,作者总结了不同场景下应选择不同存储方案的具体建议。


via React Status 420 The URL is a great place to store state in React
#碎碎念 别的不说,以后家里装修有机会的话一定得整个这种吊椅或者摇椅 ´_>` 感觉真的好棒噢。
#碎碎念 #AI
这几天做 webGL 相关的一些需求的时候 AI(特指 cursor claude 3.7 thingking) 又变得没帮上什么忙了,在特殊定制需求比较多的场景下的能力还是很有限,已经沦为文档查看器了(悲)

举个栗子,根据滚动进度驱动动画的同时多几个动画穿插一下,还有镜头位置的变化、3D 空间中的相对位置什么的也不能理解,再分到几个页面,就会特别容易瞎写了,期待以后 AI 这种能力的提升。

这种时候像 Cursor Tab 的智能提示反而作用大的多。
#前端 #字体 #开源
https://fixupx.com/geekbb/status/1900169791832547425

喜欢!一个开源的可爱的等宽字体, 带连字和控制台图标的圆角等宽字体,中英文宽度完美2:1,细粒度的自定义选项。

https://github.com/subframe7536/maple-font

Geek (@geekbb): 卡哇伊字体 Maple Mono
可变 - 无限的字体粗细,以及手工微调的斜体字形。
☁️ 丝滑 - 圆角,独特的 @ $ % & Q -> 字形和手写风格斜体。
💪 实用 - 大量的智能连字。
🎨 图标 - 提供 Nerd-Font 嵌入的版本,添加图标支持。
🔨 定制 - 可定制OpenType特性。
https://github.com/subframe7536/maple-font
Geek (@geekbb)
#优质博文 #3D #前端 #WebGPU #course
Dive Into WebGPU — Part 1

深入了解 WebGPU — 如果您对在浏览器中创建现代 3D 图形感到好奇,那么这是一个很好的起点。它提供了一个结构良好的多部分指南,用于设置和创建包含各种动画 3D WebGPU 场景的登录页面。需要注意的是,WebGPU 支持目前是好坏参半。

AI 摘要:介绍 WebGPU 的基础知识及使用 GPU-Curtains 库创建 3D 场景的入门教程。

本文是 WebGPU 系列教程的第一部分,旨在帮助开发者从 WebGL 过渡到现代图形 API WebGPU。文章通过构建一个包含 4 个独立场景的落地页,逐步演示如何利用 GPU-Curtains 库实现以下功能:
1. 基础网格绘制:创建随机分布的立方体和球体,调整位置以适应视口。
2. 动画与交互:添加入场动画(GSAP 时间轴)和基于滚动的场景可见性控制。
3. 着色与光照:通过自定义 WGSL 着色器实现 Lambert 光照模型,管理环境光和定向光。
4. 性能优化:禁用视锥体裁剪、复用几何体缓冲、异步设备初始化等。
作者还对比了 WebGPU 与 WebGL 的优势(如异步调用、计算着色器、多画布渲染),并详细解析了 GPU-Curtains 库的设计思想与核心
API。


via FrontEnd Focus 683 Dive Into WebGPU—Part 1 (Tutorial)
#前端 #color #tools
喜欢这个!
Super Color Palette

用于改变色调、饱和度、亮度等的调色板生成器 —— 这里有很多东西可以摆弄,但主要功能是一组滑块,可让您使用 HSL 轻松“调整”调色板。还包括用于生成调色板、辅助功能等的工具。

via FrontEnd Focus 683 Super Color Palette - 100% Free Color Palette Generator
#碎碎念 #旅游 明天跟妲喵去广州东玩耍咯,他去面试我去找表姐玩耍,住到周天 🥰 好耶!
#碎碎念 #美食 KFC 夜宵的生炸大鸡腿串好好吃啊,第一次点(胖胖胖胖胖胖)
「虚构义」- MOCKER44./诗岸
专辑: 虚构义(Feat.诗岸)
#网易云音乐 #mp3 26.90MB 1832.76kbps
via @Music163bot
虚构义
MOCKER44./诗岸
#优质博文 #前端 #css #动画 #视图转换
View Transitions Applied: Smoothly animating a border-radius with a View Transition

AI 摘要:本文介绍了如何利用复制动画到 ::view-transition-group,实现元素边框圆角、背景和边框的平滑过渡。

文章聚焦于 View Transitions 中元素状态转换时遇到的边框圆角(border-radius)动画问题。作者通过具体的 Demo 展示了当同一元素转换时,由于使用快照的特性,会导致圆角动画无法自然过渡,而是简单地淡出替换。为了解决这一问题,作者提出了将动画效果复制到 ::view-transition-group 内的方法,通过自定义关键帧(keyframes),实现圆角、背景以及边框等 CSS 属性的平滑过渡。文章还介绍了如何应对背景颜色变化和边框宽度变化的场景,解释了设置 overflow、box-sizing 以及隐藏部分快照的必要性,从而使动画效果达到最佳。最后,作者总结了如何通过分别捕获背景和前景,进而在 View Transition 中获得更理想的动画效果,并呼吁读者在社交媒体上分享此技术。

via Bramus View Transitions Applied: Smoothly animating a border-radius with a View Transition
#碎碎念 开屏:什么是 vibe coding 啊,查查看,然后学到了奇奇怪怪的新词,原来是这个意思
https://en.m.wikipedia.org/wiki/Vibe_coding

Vibe 编码是一种依赖于 AI 的计算机编程实践,程序员用几句话描述问题,作为对针对编码进行调整的大型语言模型的提示。可以快速创建和调试软件,同时忽略生成代码的细节。Vibe 编码的倡导者声称,即使是业余程序员也可以制作软件,而无需进行以前编码所需的大量培训和技能。该术语由 Andrej Karpathy 于 2025 年 2 月提出。
#碎碎念 今天把卧室的老灯换成了新灯,非常爽xd,终于不用忍受以前的小灯了,好评
Back to Top