呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#视频更新 #无限暖暖 #游戏
昨天被新场景和新活动各种地方硬控了好久，攒了一堆视频素材！先剪一个小的！
【无限暖暖】游乐场偶遇饱和度战士强如怪物，拼尽全力无法战胜
@余弦Cocos:
GMV - 太！！好！！看！！了！！！无意中调出来的感觉特别童话特别配！！气球套原皮也很好看！！
昨天被新场景和新活动各种地方硬控了好久，攒了一堆视频素材！先剪一个小的！
【无限暖暖】游乐场偶遇饱和度战士强如怪物，拼尽全力无法战胜
@余弦Cocos:
GMV - 太！！好！！看！！了！！！无意中调出来的感觉特别童话特别配！！气球套原皮也很好看！！
#优质博文 #前端 #html
Native Popover Element with HTML
AI 摘要：文章介绍了利用原生HTML和CSS实现弹出框（Popover）的方法，核心是使用
via trevorlasn
Native Popover Element with HTML
AI 摘要：文章介绍了利用原生HTML和CSS实现弹出框（Popover）的方法，核心是使用
<dialog>元素和data-*属性控制弹出框的位置与行为，通过CSS自定义属性优化样式，并用简单的JavaScript处理交互逻辑。方法无需框架，代码简洁高效，兼具可访问性与性能，适合小型项目或纯前端开发场景。via trevorlasn
#优质博文 #前端 #typescript
TypeScript object destructuring and you
AI摘要：TypeScript 的对象解构可以简化 JavaScript 的代码，尤其在处理复杂的异步操作时。通过解构，我们可以更清晰地提取变量，避免使用索引访问嵌套的元组，从而提高代码的可读性和可维护性。本文介绍了对象解构的基本用法及其在 Observable 链中的应用，强调了其在编写干净代码方面的重要性。
via LogRocket Blog
TypeScript object destructuring and you
AI摘要：TypeScript 的对象解构可以简化 JavaScript 的代码，尤其在处理复杂的异步操作时。通过解构，我们可以更清晰地提取变量，避免使用索引访问嵌套的元组，从而提高代码的可读性和可维护性。本文介绍了对象解构的基本用法及其在 Observable 链中的应用，强调了其在编写干净代码方面的重要性。
via LogRocket Blog
LogRocket Blog
TypeScript object destructuring and you - LogRocket Blog
Discover how TypeScript object destructuring makes life easier for developers, and see various examples of object destructuring at work.
#优质博文 #新动态 #前端 #tailwind #css
等晚点下班了再详细写一下
Tailwind CSS v4.0
AI摘要： Tailwind CSS v4.0 带来了性能提升和功能增强。主要变化包括
1. 全新 JIT 引擎优化：编译更快，支持更多的 CSS 特性，并减少生成文件大小。
2. 原生 CSS 变量支持：使用
3. 改进的插件 API：允许插件定义动态规则和条件逻辑，扩展性更强。
4. 更新的断点系统：支持更灵活的屏幕适配逻辑，通过
5. 增强的文档和调试工具：便于开发者快速定位和解决问题。
此版本专注于提升开发体验和性能，是 Tailwind CSS 的重要升级。
相关博文：
Tailwind CSS 4.0 正式发布！ - 公众号 前端充电宝
千万别轻易在生产环境使用 tailwindcss 4.0 - 公众号 这波能反杀
等晚点下班了再详细写一下
Tailwind CSS v4.0
AI摘要： Tailwind CSS v4.0 带来了性能提升和功能增强。主要变化包括
1. 全新 JIT 引擎优化：编译更快，支持更多的 CSS 特性，并减少生成文件大小。
2. 原生 CSS 变量支持：使用
theme() 自动生成 CSS 变量，动态设计更加灵活。 3. 改进的插件 API：允许插件定义动态规则和条件逻辑，扩展性更强。
4. 更新的断点系统：支持更灵活的屏幕适配逻辑，通过
container 和 screens 提高响应式设计效率。 5. 增强的文档和调试工具：便于开发者快速定位和解决问题。
此版本专注于提升开发体验和性能，是 Tailwind CSS 的重要升级。
相关博文：
Tailwind CSS 4.0 正式发布！ - 公众号 前端充电宝
千万别轻易在生产环境使用 tailwindcss 4.0 - 公众号 这波能反杀
Tailwindcss
Tailwind CSS v4.0
We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to…
#优质视频
今天才看完，原来登山这么凶险的...真哈人
和Links爬了一趟雪山，我悟了。
@影视飓风:
数码 - 最刺激的一次梦幻联动？
〰〰〰〰〰〰〰〰〰〰
🔝> @影视飓风:
感谢@影石Insta360对本期节目的大力支持。第一次爬雪山就和Links一起经历了生死时刻，幸好有抗冻耐造的Ace Pro 2 全程为我们记录下了雪山上各种宝贵瞬间和高质量画面，也让我们在攀登时可以更加沉浸其中，感受当下的快乐。
今天才看完，原来登山这么凶险的...真哈人
和Links爬了一趟雪山，我悟了。
@影视飓风:
数码 - 最刺激的一次梦幻联动？
〰〰〰〰〰〰〰〰〰〰
🔝> @影视飓风:
感谢@影石Insta360对本期节目的大力支持。第一次爬雪山就和Links一起经历了生死时刻，幸好有抗冻耐造的Ace Pro 2 全程为我们记录下了雪山上各种宝贵瞬间和高质量画面，也让我们在攀登时可以更加沉浸其中，感受当下的快乐。
好耶！肝出来了！
怎么有人大晚上放 米塔の小曲
【Miside米塔流麻】偶遇疯狂米塔，拼尽全力无法战胜...留下来吧 player 桑
@余弦Cocos:
手工 - 关于再不做米塔流麻游戏热度都要过了这件事www咕咕咕太久了23333
这次练手除了粉放多了没什么别的翻车，但是粉放太多了！！！太多了！
呜呜呜呜呜，覆板这次倒是异常顺利
#优质博文 #前端 #性能优化
Initial load performance for React developers: investigative deep dive
React 开发人员的初始加载性能：深度调查
AI 摘要：文章探讨了提升前端初始加载性能的关键方法，重点在于优化用户首次访问应用时的体验。作者分析了常见的性能瓶颈，包括过大的JavaScript包、未优化的图片和资源加载延迟。提出的优化策略包括：1）代码分割和懒加载以减少初始包体积；2）使用压缩工具（如gzip/brotli）优化静态资源；3）引入服务端渲染（SSR）或静态站点生成（SSG）提升首屏加载速度；4）通过CDN分发资源加速全球访问；5）预加载关键资源（如字体和图片）提升感知性能。文章强调需要通过性能监控工具（如Lighthouse）持续评估并优化加载时间，确保用户获得快速流畅的体验。
via Developer Way
Initial load performance for React developers: investigative deep dive
React 开发人员的初始加载性能：深度调查
剧透警告：除了研究项目之外，本文中不会有 React。今天的内容都是关于基础知识的：如何使用性能工具、Core Web Vitals 介绍、Chrome 性能面板、初始加载性能是什么、哪些指标衡量它，以及缓存控制和不同的网络条件如何影响它。
AI 摘要：文章探讨了提升前端初始加载性能的关键方法，重点在于优化用户首次访问应用时的体验。作者分析了常见的性能瓶颈，包括过大的JavaScript包、未优化的图片和资源加载延迟。提出的优化策略包括：1）代码分割和懒加载以减少初始包体积；2）使用压缩工具（如gzip/brotli）优化静态资源；3）引入服务端渲染（SSR）或静态站点生成（SSG）提升首屏加载速度；4）通过CDN分发资源加速全球访问；5）预加载关键资源（如字体和图片）提升感知性能。文章强调需要通过性能监控工具（如Lighthouse）持续评估并优化加载时间，确保用户获得快速流畅的体验。
via Developer Way
Developerway
Initial load performance for React developers: investigative deep dive
Exploring Core Web Vitals, Chrome performance panel, what initial load performance is, which metrics measure it, and how cache control and different networking conditions influence it.
#优质博文 #git #工程化 #开源
关于 git rebase 的好文章。
从「原子化」提交到妙用 rebase，一次搞定清爽的 Git 提交记录
AI 摘要：这篇文章主要分享了优化 Git 提交记录的三种实用技巧，以提高代码管理效率和协作质量：
1. 原子化提交：每次提交仅处理一个任务，避免将多个功能或修复混在一起，确保提交记录清晰。这样便于排错、复盘、追踪功能开发过程。
2. 善用 git rebase：通过
3. 灵活使用 git commit --amend：在项目早期或功能开发阶段，通过
这些方法不仅利于自身项目管理，也在开源协作中展现专业水准。最后，作者结合实际场景与命令演示了具体操作步骤，帮助读者高效应用这些技巧。
via 少数派 爱拼安小匠
关于 git rebase 的好文章。
从「原子化」提交到妙用 rebase，一次搞定清爽的 Git 提交记录
AI 摘要：这篇文章主要分享了优化 Git 提交记录的三种实用技巧，以提高代码管理效率和协作质量：
1. 原子化提交：每次提交仅处理一个任务，避免将多个功能或修复混在一起，确保提交记录清晰。这样便于排错、复盘、追踪功能开发过程。
2. 善用 git rebase：通过
rebase 合并琐碎的提交，或调整提交顺序，使提交记录更简洁、规范。同时建议合理使用 fixup 和 squash 命令，减少冗余提交。3. 灵活使用 git commit --amend：在项目早期或功能开发阶段，通过
--amend 修改最新提交的内容，避免生成多余的中间提交。项目成型后再切换为细化的提交记录。这些方法不仅利于自身项目管理，也在开源协作中展现专业水准。最后，作者结合实际场景与命令演示了具体操作步骤，帮助读者高效应用这些技巧。
via 少数派 爱拼安小匠
