呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
https://www.v2ex.com/t/1052717
gitcode 的事大家都知道了，嘻嘻一查发现我也被搬了n个项目，查了一圈发现某人写的校园网客户端也搬了，tmd 我自己写着玩的名不见经传的小仓库为什么也搬了那么多，有种被赛博 ntr 了的感觉
https://gitcode.com/Gitcode-offical-team/GitCode-Docs/issues/132
haha，我突然理解一切
真恶心啊
#优质博文 #前端 #typescript #投稿
理解 TypeScript 类型编程
via suica
由 @hyoban 投稿
理解 TypeScript 类型编程
AI 摘要：文章概述了 TypeScript 类型编程的核心概念和方法。文章首先介绍了值编程与类型编程的区别，并指出在 TypeScript 中，类型编程可以通过泛型、高阶类型等技术手段实现。具体内容包括 TypeScript 的值空间与类型空间的定义和转换关系，类型编程在函数式编程语言中的应用，以及如何利用 TypeScript 类型系统实现复杂类型操作，如自然数加法、模式匹配等。文章还讨论了 TypeScript 高阶类型的实现方法，尽管目前 TypeScript 对高阶类型的支持有限，但通过一些技巧仍可以部分实现高阶类型编程。最后，文章提供了类型编程的实用工具和测试方法，强调了类型编程在实际项目中的应用价值，特别是在库设计和业务建模中的重要性。
via suica
由 @hyoban 投稿
GitHub
GitHub - suica/typescript-type-level-programming: An experimental transpiler that makes simple typescript computations happen in…
An experimental transpiler that makes simple typescript computations happen in type-level. - suica/typescript-type-level-programming
#优质博文 #前端 #react #dom
A virtual DOM in 200 lines of JavaScript
【关于 Virtual DOM 的一篇挺不错的实现文章】
via Marcelo Lazaroni
A virtual DOM in 200 lines of JavaScript
【关于 Virtual DOM 的一篇挺不错的实现文章】
AI 摘要：这篇文章详细介绍了如何用约200行JavaScript代码实现一个虚拟DOM库。该库通过创建虚拟DOM节点、对比新旧虚拟DOM并生成差异(diff)，然后将这些差异应用到真实DOM来管理UI。文章涵盖了DOM表示、diff算法的实现、事件处理及属性设置等内容，并提供了一个完整的状态管理API示例。最终，展示了使用该库实现的一个计数器应用和一个百万节点的虚拟化列表。完整代码和示例可在文中找到。
via Marcelo Lazaroni
#优质博文 #前端 #javascript #promise
Promises From The Ground Up
【一篇关于 promise 的好文章】
via Josh W Comeau
Promises From The Ground Up
【一篇关于 promise 的好文章】
AI 摘要：这篇文章详细介绍了JavaScript中的Promise，从基础概念开始，解释了回调地狱的问题及其解决方法。文章涵盖了如何创建和使用Promise，链式调用，处理异步操作，以及如何处理Promise的成功和失败状态。最后，文章还介绍了更现代的async/await语法，展示了其背后的Promise机制。适合初学者和中级开发者理解和应用JavaScript的异步编程。
via Josh W Comeau
Joshwcomeau
Promises From The Ground Up • Josh W. Comeau
The “Promises” API is a surprisingly tricky part of modern JavaScript. Without the right context, it doesn’t make much sense at all! In this tutorial, you’ll build an intuition for how Promises work by getting a deeper understanding of JavaScript and its…
#优质博文 #前端 #工程化
字节三年，谈谈一线团队如何搞工程化一（全景篇）
via 掘金 五一劳模
字节三年，谈谈一线团队如何搞工程化一（全景篇）
AI 摘要：本文主要介绍了字节跳动商业化前端团队（Cuckoo FE）在工程化实践中的经验和方法。团队面对人员和业务快速增长带来的规范不足、文档缺失、流程不畅等问题，着重进行工程化体系建设，通过连接公司已有基建和团队内部沉淀，提升整体效率和质量。
#### 前端工程化定义与发展
前端工程化旨在通过流程、工具和规范降低成本、提高效率。其发展经历了页面动态化、模块化、跨平台大前端和智能化四个阶段，每个阶段都解决了不同层面的技术问题。
#### 工程化实践具体措施
1. 规范建设：规范团队流程、编码和业务，逐步推进和工具化运营，确保规范有效落地。
2. 统一技术选型：基于团队沉淀，逐步从自研框架过渡到社区成熟方案和公司内部自研工具。
3. 研发物料沉淀：构建业务组件、物料库和最佳实践库，提高研发效率。
4. 中台渲染引擎：通过页面配置化实现高效开发，适用于低复杂度业务逻辑。
via 掘金 五一劳模
#优质博文 #前端 #javascript #动画 #astro
零 js 开启 View Transitions 动画
via liruifengv
零 js 开启 View Transitions 动画
AI 摘要：文章介绍了如何在 Chrome 126 中，无需JavaScript，仅通过 CSS@view-transition在 Astro 框架的多页面应用(MPA)中启用类似原生的页面切换动画。具体步骤包括初始化 Astro 项目，在BaseHead.astro中添加@view-transitionat-rule，并在文章列表页和详情页中为图片元素设置相同的view-transition-name，从而在页面切换时实现动画效果。最终实现了一个丝滑的动画体验。
via liruifengv
Liruifengv
零 js 开启 View Transitions 动画 | liruifengv
Chrome 126 支持了在 MPA 多页面中启用 View Transitions，零 JS，为你的网站开启类似 native 的动画效果。
#资源推荐 #动画 #前端 #tools
Source Twitter @tuturetom
刚刚发现知名博主 3Blue1Brown 平时制作视频使用的动画库 Manim 竟然开源并且 59K Star ⭐️，有点酷炫！
结合之前使用 Manim 制作的 ChatGPT 图解原理实现教程搭配使用，感觉极佳啊 https://youtube.com/watch?v=wjZofJX0v4M
https://github.com/3b1b/manim
Source Twitter @tuturetom
