呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#工具推荐 #组件 #前端 #svg #tools #动画 #轻量级
SVG.js: SVG Manipulation and Animation Library

SVG.js 是一个轻量级、无依赖的库，专用于操控和动画化 SVG 元素，具有简洁语法和模块化设计，提供几乎完整的 SVG 规范支持。其功能涵盖形状绘制、动画控制、事件绑定、渐变与图案等，并支持扩展与插件。

via JavaScript Weekly #711
svgjs.dev
Home
The lightweight library for manipulating and animating SVG. SVG.js has no dependencies and aims to be as small as possible.
工具推荐 组件 前端 svg tools 动画 轻量级
#优质博文 #前端 #WebComponent #组件 #响应式 #javascript #css
Hyper-responsive web components

AI 摘要：这篇文章介绍了如何构建“超响应”的Web组件，旨在适应不同网站和视口。作者首先探索了三种方法，最后选择了基于Web组件和Shadow DOM的方式，以实现样式的完全封装。通过使用CSS自定义属性和`clamp()`函数，组件可以在不同屏幕尺寸下自适应文本和间距。此外，使用CSS容器查询解决了流体排版在小容器中失控的问题。最终，文章展示了如何通过灵活的布局和渐进增强技术，实现高效、便携的Web组件设计。

容器查询带来了一个新的长度单位：CQI 。这个单位是以最近的命名容器（container-type：inline-size）的比例来计算的， 1vi === 视口的 1%， 1cqi === 容器的 1%。


via Trys Mudford
Trysmudford
Hyper-responsive web components | Trys Mudford
Hyper-responsive web components | Trys Mudford
Intrinsic design, container queries and cqi typography
优质博文 前端 WebComponent 组件 响应式 javascript css
#优质博文 #前端 #组件 #音频 #react #hook
Announcing “use-sound”, a React Hook for Sound Effects

AI 摘要：Josh W. Comeau的文章介绍了`use-sound`，这是一个轻量级的React hook，用于在Web应用中轻松添加音效。它提供了播放控制、速度调整和音频精灵（audio sprite）等功能，帮助开发者为用户交互增加声音反馈。该工具基于Howler.js构建，支持简单安装和自定义音效，文章还给出了实践示例和无障碍建议，适合为用户界面增添音效效果的项目开发。

via Josh W Comeau
Joshwcomeau
use-sound | a React hook that lets you play sound effects • Josh W. Comeau
use-sound | a React hook that lets you play sound effects • Josh W. Comeau
By and large, using the web is a visual experience. This is in terrible contrast to mobile apps, which interact with three of our human senses (sight, sound, and touch, through haptic feedback). I just released a library to make it easy to add sound to your…
优质博文 前端 组件 音频 react hook
 
 
Back to Top