呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#前端 #插件推荐 #vscode #资源推荐 #tools
Source Twitter @ccbikai
https://frontmatter.codes/
好啊，好啊，这个好啊，我突然又不想抛弃 hexo 了
#工具推荐 如果你在使用 Hexo、Hugo、Astro、nextjs、VitePress 等静态博客生成器，推荐你安装 VSCode 的 Front Matter 插件，为你的博客带来可视化的 CMS 管理。
写作模式下可以为 Markdown 编辑带来快捷键操作、效率提高很多，而且还可以帮你检查 SEO。
Source Twitter @ccbikai
https://frontmatter.codes/
好啊，好啊，这个好啊，我突然又不想抛弃 hexo 了
frontmatter.codes
Headless CMS right in your code editor | Front Matter
Headless CMS running in Visual Studio Code that helps managing your static sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.
#前端 #优质博文 #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?
