#前端 #css #demo #codepen
Progress of this year. Keep tracking by Andrey

感觉适合博客之类的场景 #progress

#前端 #趣站 #webGL #cocos #投稿
Cocosmos 掌上宇宙

一个实时精确的可交互 3D 宇宙模型，可以无缝视野缩放，效果超级震撼，体验非常丝滑，天文爱好者一定不要错过。

这个是真的牛逼，无愧掌中宇宙的名号，界面动效太酷了，感兴趣的可以看一下项目介绍。

via guang

#前端 #优质博文 #tailwind #css
Tailwind marketing and misinformation engine

AI摘要：这篇文章讨论了Tailwind CSS的发展、推广策略和其中的误导信息。文章指出，Tailwind的创始人Adam Wathan利用了开源社区的尊重精神，通过重新解释CSS最佳实践和引入新术语，来推广其独创的样式语言。文章批评了Tailwind推崇的工具类优先方法，认为这种方法导致代码冗长难维护，并锁定用户在Tailwind生态系统内。文章还批评了Tailwind的闭环系统和对开发者的锁定效应，以及其最新的UI工具包Catalyst如何进一步深化这种依赖。最后，作者提倡回归Web标准和学习CSS基础，以实现更加可维护和标准化的Web开发实践，而不是依赖特定供应商的解决方案​​。

前端原神 tailwind 实锤（x） 我觉得重点（供应商）和例子举的都不太对，但部分观点可取
评论区的讨论更有意思的，可以看看：https://news.ycombinator.com/item?id=39416558

摘一些评论(机翻)：

和许多人一样，我最初也对 Tailwind 持怀疑态度，因为我认为它让代码看起来 "丑陋"。但后来我开始使用它，几乎立刻就注意到了它对工作效率的提升。在使用过程中，我注意到了两件事：

1. 在我不再需要命名之前，我从来不知道自己有多讨厌命名；
2. 保持 id/classes 和 CSS 之间的映射是多么大的精神负担，更不用说整个级联部分了，光是扫一眼代码，你根本无法确定结果会是什么样的 CSS。

第二点可能是 Tailwind 最低调的功能 - 您再也不必担心元素的样式，因为所有内容都在类名中。额外的好处是，它基本上迫使您使用组件编写 UI 代码以防止重复 - 它鼓励最佳实践（请注意，这是我认为 OP 在询问“如何清理东西？”时出错的地方 - “@apply”关键字存在，但并不意味着被过度使用来替代正确的代码重构）。

它并非没有缺陷--你必须学习一种新的语法（在大多数情况下非常直观，例如，"align-items: center "变成了 "items-center"，"margin: 0 "变成了 "m-0 "等）。 它也有自己的缺陷（例如，在构建时，它会通过扫描你的代码来生成 CSS，并提取你使用的类，以防止生成未使用的 CSS，这就导致无法动态构建类名，如 "gap-${value}`"），但我认为这些问题比以其他方式编写 CSS 更重要。

有一点我100%同意作者的观点--在学习Tailwind之前，你应该先学习CSS。这不仅是因为 Tailwind 有一天可能会消失，还因为这会让你更深入地了解东西的工作原理和原因。

理想情况下，我们不必为那些从未重用的东西命名。通常类名只使用一次。为类命名并没有多大好处。

方案 1：

查找视觉错误，打开 devtools，找到最接近的描述性类或 ID（.primary？ 哦不......），打开 IDE，在样式文件夹结构（最有可能但不是唯一查找 CSS 的地方）中全局搜索".primary"。返回 40 个文件。15 分钟后，找到一个看起来可能是正确的文件。10 分钟了解 CSS（这里有很多高级 CSS......）。找到视觉错误的原因，修改一行。30 分钟--工作完成。

方案 2：

找到视觉错误，打开 React Devtools 等软件，找到组件名称，打开集成开发环境，找到组件源文件，找到 HTML，更改实用样式类，5 分钟完成工作。

这些例子都不是凭空捏造的。几周前，我花了 40 分钟才在一个代码库中才找到一条单行代码。这并不夸张。

我曾经确实相信关注点分离，但现在我不再相信了，因为多年来我不得不花时间与“选项 1”代码库作斗争。几乎任何具有普通 CSS 的大型代码库最终都将成为“选项 1”，除非它是单个优秀 CSS 开发人员的工作（罕见技能），或者是一个团队，其中一个优秀的领导者也足够关心 CSS 来强制执行像 BEM 这样的惯例是永久性的（甚至是更罕见的技能）。

如今，任何人在构建任何复杂的东西时，都会使用一些组件抽象（无论是否在客户端）来管理复杂性。如果它已经存在，我们不妨将其用于风格设计。

之所以对关注点分离、级联和（低）特异性产生强烈反对，是因为从长远来看，这些事情对于可维护性来说都是一场彻底的灾难。

在制作 Catalyst 按钮的示例时需要注意一点。如果您写出完成该按钮正在执行的工作量所需的所有样式，那么它也将非常难以理解，而且，它会位于一个完全不同的文件中，与赋予它任何意义的单个文件完全不同 - HTML。

Cults are bad for tech because it prevents out-of-the-box thinking.
邪教对科技不利，因为它阻碍了创新思维。

via Tero Piirainen

nuejs.org

Tailwind marketing and misinformation engine / Nue

The origins of Tailwind and how it is framed to solve the proposed issues of CSS

#前端 #优质博文 #react #nextjs
NextJS/React 加载远程组件

AI 摘要：这篇文章介绍了如何在普通的Markdown中渲染远程组件。作者构想了一个名为RemoteComponentRender的逻辑，通过加载远程组件并将其嵌入到React中进行渲染。为了简化Markdown的语法，作者使用了CodeBlock进行扩展，并提供了一个新的DSL语法来定义远程组件的导入和渲染。文章还介绍了如何将React和ReactDOM附加到全局对象上，并提供了一个基础版的组件实现。最后，文章讨论了远程组件的构建和打包，并提供了一个使用Rollup进行构建的示例配置。

via innei

cn.innei.ren

NextJS/React 加载远程组件

前言 写过文档的大佬们都知道 MDX 这个东西，对原本的 Markdown 进行了扩展，可以在 Markdown 中直接使用框架组件（React，Vue 等等）。 现在也有很多静态生成的博客使用 MDX 去编写博文，在博文中内嵌了 React 组件，在一些需要交互式的场景中，在传统的 Markd

#前端 #css #demo #codepen
Merging Letter Toggle by Jon Kantner

「拨动开关与 FF 或 N 组合可拼写“OFF”或“ON”，字母根据状态合并或拆分。#switch #toggle #input #animation #svg 」

这是我见过最丝滑的svg切换开关动画之一（）

#前端 #css #demo #codepen
Tab bar Animation by Aaron Iker

没见过的 tab bar 切换动画，%%%

#前端 #css #demo #codepen #svg
Hamburger menu - Dice animation by Pedro Ondiviela

非常好的svg菜单切换动画，比上一个还酷

#demo #前端 #css #codepen
Fishbowl - Save the fish by Pedro Ondiviela

鱼鱼————

#demo #前端 #css #codepen
Animated Login Form - CSS by Vincent Van Goggles

酷炫 Login 表单

#碎碎念
京东活动白嫖的花花到了，好大只~还挺好看
白嫖了俩，另一个送回家给老妈了，乐呵

🧨 React 携手 useEffect 祝祝您您财财源源广广进进，钱钱途途无无量量
🧨 React 携手 useEffect 祝祝您您财财源源广广进进，钱钱途途无无量量

via std::ranges::shuffle(recv);

#demo #前端 #css #codepen
Gradient Borders w/ Translucent Backdrops using container queries 😍 by Jhey

遭受过渐变边框+圆角+backdrop+响应式难以实现的朋友会懂
同样适用于有透明度的圆角渐变边框+透明背景
原理是 mask padding-box使得内容透明后blur

#demo #前端 #css #codepen
Canva's Magic Mouse Effect by Hyperplexed

鼠标飘落星星特效
感觉适合博客之类的用

#demo #前端 #css #codepen
3D Rotate by Rei Lin

实现简单，原生的css 3d旋转，带深度，很酷啦

主要依靠：
1. transform-style: preserve-3d; 使子元素在三维空间中定位。默认为平面。 MDN - transform-style
2. backface-visibility: hidden; 隐藏卡片背面，直至其可见。 MDN - backface-visibility
3. transform: translateZ(100px); 使元素更接近或远离观察者。MDN - translateZ
4. perspective: 1200px; 设置元素与用户之间的距离，以确定三维元素的透视， 降低该值会使动画更加“直观”。 MDN - perspective

#碎碎念
瑞幸你……
竟然有点想尝尝，看着就甜