#优质博文 #前端
1. CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids
CSS 遇上像素艺术：使用堆叠网格构建渲染引擎 —— Codrops 的另一个精彩教程，这次展示了变换、透视和堆叠网格如何创建完全可寻址的 3D 空间，突破了纯 CSS 的界限。您可以在此处创建自己的像素创作 。 #css #demo

文章介绍了 Agustin Capeletto 的最新项目 —— CSS Voxel Editor，展示了如何利用纯 CSS 构建 3D 空间。作者从设置场景透视入手，详细说明了如何使用 perspective 属性与 transform-style 保持子元素的 3D 布局，进而营造出接近等距视角的视觉效果。接着，文章深入解析了 HTML 体素（cuboids）的制作过程，介绍了通过每个立方体的六个面及其对应的变换（如 rotate、translateZ 等）来构建具有 X、Y、Z 三轴坐标的体素系统。文章配以示例代码和图示，帮助读者理解纯 CSS 3D 渲染的原理和实现细节。

2. Freesound：670,000+ 免费声音的协作集合 — 可下载 WAV 格式，可能有助于将 UI 声音添加到应用程序或添加到视频中。请注意任何声音的许可证，因为并非所有声音都是 CC。 #音效

via FrontEnd Focus 682

Layoutit

Layoutit Voxels - 3D CSS Grid Generator

A voxel editor powered by CSS grid and 3D transforms. Build models with HTML cuboids!

#碎碎念 #游戏 #评测
双影奇境 非常好 —— 年度最佳家庭游戏，没有争议，可以预料到又养活一大堆电玩店的场面。

无论是优化还是游戏性都无可挑剔，太稳了！国区低价，上一作难用的 EA 联机这一作吸取教训加入了 steam 联机，硬要说缺点的话，中配翻译腔太浓我全程英配玩的，还有剧情略显老套，但是这种游戏剧情没那么重要，玩到后面有些操作的重复感还是有些强（一口气玩完是这样的）

好玩儿，好玩儿，还tm的是好玩儿啊！拼尽全力跟妲喵这个周末玩到还差两章节结局感觉爽到爆炸，虽然结局我还没玩到，迫不及待先写点儿！

本作相比双人成行，一个是科幻作家一个是奇幻风作家，俩作家的故事夹杂在一起，把小游戏干掉了，变成了一个个较长的支线剧情，支线剧情的风格特别天马行空，有的也很黑深残（米欧你这个人真是满脑子都是黑深残呢！）有些支线剧情的点子简直能让人：卧槽NB这主创怎么想的，包括但不限于——

以下是严重剧透评价：
我最喜欢的几个支线剧情，一个是魔法世界那个找猫咪的，内容大而且有意思的东西特别多，还有一个是农场生活里的🐷变成肠然后自己烤自己，还有一个是甜品世界（天呐简直就是小时候梦想的查理巧克力工厂和喜羊羊大电影里的那种甜品天堂很可爱的），还有一个手绘纸片风格的支线剧情，超有创意，还有超新星爆炸的支线剧情，开着HDR玩又闪又亮能闪瞎眼。


ps：为什么是 16h 是因为中途有一阵子跟我妹玩儿了一会儿之前的章节~~所以现在还没打到结局。

pps：再补充一点，游戏中各种 neta 特别多，比如我在某一个奇妙的地方看到了 neta 黑魂的彩蛋（）还有前作的 neta

#碎碎念 #游戏 乐，落地成肠（x

#前端 #动画 #gsap #demo

https://codepen.io/snorkltv/full/YPzVOzY

gsap 的 ScrollTrigger 很直观的可视化工具

https://fixupx.com/snorklTV/status/1897685784075075845

codepen.io

toggleActions Explainer

...

#碎碎念 一想到连我妹今年都要高考了要 18 岁了就感觉时间过得好快啊—— 18 岁啊，那是我逝去的青春 😭 怎么这么快就要成年了

#优质博文 #前端
1. 宣布推出 TypeScript 5.8 —— 经过四个月的发展，TypeScript 5.8 以 Node 为重点。您现在可以在 nodenext 模块中对 ES 模块使用 require() ，对于希望继续以 Node 18 为目标的开发人员，有一个新的 node18 模块，最值得注意的是，现在有一个 --erasableSyntaxOnly 选项来确保不能使用仅限 TypeScript 的运行时语义（如果您使用 Node 的类型剥离功能直接运行 TypeScript 代码，则这是理想的选择） #typescript #node （机翻）
2. 使用 Playwright 进行动态网页数据抓取

本文通过 YouTube 案例，介绍如何利用 Playwright 工具解决动态网页（依赖 JavaScript）的数据抓取问题。
文章首先指出传统基于 Cheerio 的静态网页抓取工具无法处理动态渲染内容的问题，提出使用 Playwright 的浏览器自动化方案。 文章包含详细的代码片段和配图说明，重点展示了 Playwright 的 Locators API 和浏览器上下文操作能力，最终实现动态加载视频数据的结构化抓取。 #WebScraping #javascript #网页抓取 #教程

3. 具有现代依赖项的 Electron 应用程序样板 —— 一个基本的模板应用程序，使用 React 19、Tailwind CSS 4、shadcn/ui、Electron Vite、Biome，并包括 GitHub Actions 发布工作流程。 #template #tailwind #shadcn

via Node Weekly 568

Microsoft News

Announcing TypeScript 5.8

Today we’re excited to announce the release of TypeScript 5.8! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by adding syntax for types. Writing types in our code allows us to explain intent and have other tools…

#优质博文 #前端
1. 不要用 TypeScript 枚举（英文） TypeScript 官方已经不建议使用 enum（枚举）语法，作者建议改用字符串的联合类型代替。 #typescript
2. olmOCR 一个使用 AI 模型进行文字识别（OCR）的 Python 工具。 #AI #OCR
3. MTranServer 开源的离线翻译服务器，号称资源消耗低，CPU + 1G 内存即可运行，支持调用沉浸式翻译。 #翻译

via #阮一峰的科技周刊 340

Blog | Georges Haidar

An ode to TypeScript enums

Pouring one out for a fallen friend

cosine - 前端人の日常频道

#碎碎念 #游戏 游戏买了，我陪玩呢？（

#碎碎念 喜报，双影奇境支持家庭共享！之前双人成行不支持！

#碎碎念 #游戏 游戏买了，我陪玩呢？（

#优质博文
AI 流程平台对比——Dify、Fastgpt、Ragflow

AI 摘要：对比 Dify、FastGPT 和 RAGFlow 三个 AI 流程平台的功能与特点。

本文对 Dify、FastGPT 和 RAGFlow 三个基于 Web UI 的 AI 流程平台进行了详细对比，涵盖了团队管理、模型管理、第三方工具、知识库、应用管理、开源协议和部署难度等多个维度。通过对这些平台的功能、优缺点和适用场景的分析，帮助读者选择最适合自己需求的 AI 流程平台。文章最后总结了各平台在不同维度的表现，指出 Dify 在应用管理和扩展性方面的优势。

#AI #agent

via 关木

AI关乎未来

AI 流程平台对比——Dify、Fastgpt、Ragflow

#优质博文 #前端
适合初学者的一篇指南。

2025 React + TypeScript 实战指南！
https://mp.weixin.qq.com/s/3hW5HokQINsO_w15pMYPpg

AI 摘要：本文总结在 React 中使用 TypeScript 的常见场景，涵盖组件类型定义、Hooks 类型化、事件处理及异步请求类型安全实践。

本文系统梳理了 React 与 TypeScript 协同开发的核心技术点。首先对比函数组件的两种类型定义方式（ React.FC vs 直接定义 Props），分析其灵活性与适用场景；其次解析类组件中泛型、Component 与 PureComponent 的类型定义逻辑，并探讨动态 Props 的泛型解决方案。针对 Hooks，文章详细说明 useState 、 useRef 、 useMemo 等常用 Hook 的类型化实践，包括空值处理和对象类型断言等细节。此外，还覆盖事件对象类型定义、元素属性扩展、错误边界实现及异步请求（Fetch/Axios）的类型安全方案，最终形成完整的 React + TypeScript 开发指南。

#react #typescript #course

via 微信公众号 前端充电宝

Weixin Official Accounts Platform

2025 React + TypeScript 实战指南！

cosine - 前端人の日常频道

#折腾 #碎碎念 #插件 #浏览器插件 #开源 https://github.com/yusixian/moe-copy-ai 跟 cursor 合作拿 plasmo 搓了个自用的浏览器插件，因为暂时没找到符合我这个需求的类似 Chrome 插件（欢迎安利我），先发个最小的可用版本，后边慢慢整吧~大 logo 和小 logo 都是自己用figma画着玩过过手瘾的w 需求很简单，是我想在手机端 kiwi 浏览器访问的时候能够直接复制全文、标题、作者和网页元信息等，排除干扰，就类似 llms.txt…

#碎碎念
插件成功发布到 Chrome 扩展商店啦～好耶
Moe Copy AI
https://chromewebstore.google.com/detail/moe-copy-ai/dfmlcfckmfgabpgbaobgapdfmjiihnck

感觉得加几个配置，接着等审核吧，开心！

Google

Moe Copy AI - Chrome Web Store

✨ 萌萌哒的 AI 网页数据提取助手 ✨