呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#前端 #优质博文 #css #grid
CSS Grid full-bleed layout tutorial
AI 摘要：这篇文章介绍了如何使用 CSS Grid 技术解决网页布局中的 “full-bleed”（出血） 问题，即如何让某些元素（如图片和视频）在保持中心文本列宽度固定的同时，能够扩展到浏览器窗口的边缘。作者通过三列布局，中间列固定宽度，两侧列灵活填充空间，实现了文字内容的最佳阅读宽度和其他元素的全宽展示。此外，还提供了适应不同屏幕尺寸的响应式设计思路。
via Josh W Comeau
CSS Grid full-bleed layout tutorial
AI 摘要：这篇文章介绍了如何使用 CSS Grid 技术解决网页布局中的 “full-bleed”（出血） 问题，即如何让某些元素（如图片和视频）在保持中心文本列宽度固定的同时，能够扩展到浏览器窗口的边缘。作者通过三列布局，中间列固定宽度，两侧列灵活填充空间，实现了文字内容的最佳阅读宽度和其他元素的全宽展示。此外，还提供了适应不同屏幕尺寸的响应式设计思路。
via Josh W Comeau
Joshwcomeau
CSS Grid full-bleed layout tutorial • Josh W. Comeau
Certain layouts are surprisingly dastardly. On the modern web, one of the most common layouts is also one of the trickiest. In this tutorial, I break down how to build the "full-bleed" layout using CSS Grid.
#前端 #小知识 #typescript #工程化 #ts
Source Twitter @vikingmute
学 typescript 最蛋疼的地方就是 tsconfig 这个配置文件，无限多眼花缭乱看起来不知所云的选项，官方文档也写的不清楚。过一段时间就忘，每次查文档还很痛苦，昨天看到这篇 TSConfig Cheatsheet 觉得非常棒：
https://totaltypescript.com/tsconfig-cheat-sheet
看完了能基本理解这些配置的大体内容，同时还有人根据这篇文章，写了个可视化工具，更方便了：
https://tsconfig.guide
想学习 typescript 的朋友可以收藏看下，我觉得是很棒的资源。
Source Twitter @vikingmute
Total TypeScript
The TSConfig Cheat Sheet
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
#前端 #小知识 #调试
https://vxtwitter.com/jh3yy/status/1782176868080210159
使用谷歌开发者工具中的 Sensors 在不使用真机设备的情况下调试设备控制的 CSS 视差效果
https://vxtwitter.com/jh3yy/status/1782176868080210159
使用谷歌开发者工具中的 Sensors 在不使用真机设备的情况下调试设备控制的 CSS 视差效果
#优质博文 #交互设计
Invisible Details of Interaction Design
via rauno
Invisible Details of Interaction Design
AI 摘要：这篇文章探讨了交互设计中不易察觉的细节，强调了设计师如何利用我们与实体世界的自然互动来增强虚拟界面的直观性和响应性。作者通过深入分析简单手势如轻触、滑动和捏合的物理和心理层面，阐述了如何在设计中运用这些手势来模拟现实世界的动态。此外，文章还探讨了通过细微的动画和视觉反馈来提高用户界面的直观性和效率的方法。
via rauno
rauno.me
Invisible Details of Interaction Design
What makes great interactions feel right?
#优质博文 #javascript #错误处理
Error handling patterns and best practices
via Filippo Rivolta
Error handling patterns and best practices
AI 摘要：这篇文章介绍了JavaScript中的错误处理模式和最佳实践。核心内容包括Error对象的功能和属性，以及不同内置错误类型的详解。文中详细阐述了基本错误处理技术，如try...catch和finally语句的使用，以及如何利用throw语句生成自定义错误。此外，还讨论了在异步代码、事件驱动代码中的错误处理策略，包括自定义错误类的创建，以及在现代 JavaScript 框架中错误处理的实践。这些内容对于开发者来说是提高代码健壮性和用户体验的关键。
via Filippo Rivolta
#优质博文 #前端 #react #ssr #nextjs
Shiki 性能优化 - 按需加载语法解析
via innei
Shiki 性能优化 - 按需加载语法解析
AI 摘要：这篇文章介绍了如何为 Shiki 代码高亮库实现按需加载语言解析器的功能，以减少加载时间和流量消耗。通过改造现有的组件代码，使其能够在需要时才加载特定的语言模块。此外，文章也探讨了在 Next.js 应用中如何处理 Shiki 组件的服务端渲染问题，以及如何避免页面在首次加载时的布局移动（CLS）。这些优化措施有助于提升页面性能和用户体验。
via innei
innei.in
Shiki 性能优化 - 按需加载语法解析
Shiki 是一个非常优秀的代码高亮库。 https://github.com/shikijs/shiki 众所周知，代码高亮库包含了众多的语言解析器，导致加载比较缓慢，并且加载太多无用的解析器造成大量流量浪费。 这一节我们来实现按需加载 Shiki 需要的语言解析器。 动态加载 开始之前
