呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#优质博文 #前端 #nextjs #image
在搜索引擎奇怪的内容农场发现的好文章，觉得肯定有原文于是找了下看看发现是微信公众号的文章。
教你如何玩转Next Image
AI 摘要：本文详细介绍了如何使用 Next.js 中的 Next Image 组件来进行图像优化。Next Image 支持现代格式（如 webp、avif ），并根据不同屏幕尺寸生成优化版本，以提高性能。其核心架构由 React 组件、Image API 和 Image 优化器（Sharp 或 Squoosh）组成，优化图像加载、质量和缓存策略。
本文还澄清了一些常见误解，例如 Next Image 不进行图像裁剪，只调整尺寸；显示的图像宽度不等于加载的图像宽度等。同时提到，开发者可以直接使用 Image API 以便在特定场景中获得更灵活的图像控制。为了优化加载性能，文章还建议合理配置 deviceSizes 和 imageSizes，并通过 sizes 属性优化图像选择，从而提高 Lighthouse 的得分和整体性能。
via 微信公众号 前端新世界
在搜索引擎奇怪的内容农场发现的好文章，觉得肯定有原文于是找了下看看发现是微信公众号的文章。
教你如何玩转Next Image
AI 摘要：本文详细介绍了如何使用 Next.js 中的 Next Image 组件来进行图像优化。Next Image 支持现代格式（如 webp、avif ），并根据不同屏幕尺寸生成优化版本，以提高性能。其核心架构由 React 组件、Image API 和 Image 优化器（Sharp 或 Squoosh）组成，优化图像加载、质量和缓存策略。
本文还澄清了一些常见误解，例如 Next Image 不进行图像裁剪，只调整尺寸；显示的图像宽度不等于加载的图像宽度等。同时提到，开发者可以直接使用 Image API 以便在特定场景中获得更灵活的图像控制。为了优化加载性能，文章还建议合理配置 deviceSizes 和 imageSizes，并通过 sizes 属性优化图像选择，从而提高 Lighthouse 的得分和整体性能。
via 微信公众号 前端新世界
#前端 #tools #性能优化 #图像优化
https://github.com/unjs/ipx
IPX 是一个高性能、安全且易于使用的图像优化工具，基于
https://github.com/unjs/ipx
IPX 是一个高性能、安全且易于使用的图像优化工具，基于
sharp 和 svgo，支持 CLI 和编程 API，可作为中间件集成于各种服务。它支持多种图像处理功能，包括格式转换、大小调整、裁剪、旋转等，被 Nuxt Image 和 Netlify 所使用。
GitHub
GitHub - unjs/ipx: 🖼️ High performance, secure and easy-to-use image optimizer.
🖼️ High performance, secure and easy-to-use image optimizer. - unjs/ipx
#前端 #新动态
我火星了，但是尤老板真成尤老板了hhhh
https://voidzero.dev/posts/announcing-voidzero-inc
Source Twitter@youyuxi
我火星了，但是尤老板真成尤老板了hhhh
AI 摘要：VoidZero 旨在构建统一的高性能 JavaScript 工具链，解决当前生态系统的碎片化问题。由 Evan You 创立，获得了 460 万美元的种子融资，基于 Vite 的成功，VoidZero 计划开发如 Rolldown 等工具，专注于性能、一致性和开发者体验。其开源项目覆盖打包、代码检查和测试等核心领域，旨在显著提升现有解决方案的性能，为 JavaScript 开发者提供一体化、可扩展的开发体验。
https://voidzero.dev/posts/announcing-voidzero-inc
Source Twitter@youyuxi
void(0)
Announcing VoidZero - Next Generation Toolchain for JavaScript
Read the founding announcement of VoidZero, a company dedicated to building the next generation of toolchain for JavaScript.
#css #前端 #在线网站 #工具推荐 #tools
无意中看到的，mark 一下：https://uiverse.io/
Uiverse 是一个开放源码的 UI 元素库，包含了由社区贡献的各类 UI 组件，如 HTML/CSS、Tailwind、React 和 Figma 格式，供开发者免费使用。用户可以在网站上搜索、复制代码并将其用于个人或商业项目，非常适合设计师和开发者寻找灵感或快速构建界面组件。该平台还支持 Figma 集成，提供直接复制粘贴功能，便于设计工作流程。
无意中看到的，mark 一下：https://uiverse.io/
Uiverse 是一个开放源码的 UI 元素库，包含了由社区贡献的各类 UI 组件，如 HTML/CSS、Tailwind、React 和 Figma 格式，供开发者免费使用。用户可以在网站上搜索、复制代码并将其用于个人或商业项目，非常适合设计师和开发者寻找灵感或快速构建界面组件。该平台还支持 Figma 集成，提供直接复制粘贴功能，便于设计工作流程。
uiverse.io
Uiverse | The Largest Library of Open-Source UI elements
Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all free to copy and use in your projects. Uiverse can save you many hours spent on building & customizing UI components for your next project.
我 telegram 上关注的时事频道列表，感觉放在social media 最合适...
原来可以 0 power 啊，那没事了
https://app.follow.is/list/63153404864915456
#前端 #组件库 #工具推荐 #tools
发现我 star 过这个组件库但好像没推过，再 mark 一下：Magic UI
Source Twitter@vikingmute
发现我 star 过这个组件库但好像没推过，再 mark 一下：Magic UI
有人用过这个 MagicUI 没有？
https://magicui.design
是一个全新思路的组件库，主打一个 Landing page 上面的动画视觉效果，完美适配 shadcn/ui ，组件我全都感受了一遍，好喜欢的，如果大家想把页面的颜值上升一个等级，强烈建议试试看。Stars：9.3K
我很喜欢那个 Border Beam 的效果。一点小小的提升让我看了以后爽心悦目。
Source Twitter@vikingmute
magicui.design
Magic UI
Beautiful UI components and templates to make your landing page look stunning.
自建 rsshub 之后，今晚 pixiv 的图都挂了，一查发现反代问题，官方默认推荐的 i.pixiv.re 挂了，然后根据这篇博客顺手 cf worker 搭了个反代......cf 真乃大善人
Pixiv 图片反向代理 | https://blog.yuki.sh/posts/599ec3ed8eda/
#优质博文 #阮一峰的科技周刊 #tools #工具
科技爱好者周刊（第 319 期）：如何拍出爆款视频
1. 使用 @layer 自制一个 CSS 框架（英文） 📓 一篇 CSS 高级教程，介绍使用 @layer 指令，自己写一个 CSS 框架。 #css
2. LosslessCut 🧰 一个开源的跨平台视频剪切软件，目标是成为 FFmpeg 的图形前端。 #ffmpeg
3. Compress JPG 🧰 一个基于谷歌的 squoosh 算法、一次性压缩多张图片的网站。
4. git cliff 🧰 一个自动总结提交信息，生成 changelog 文件的命令行工具。（这个 gif 小动画怪有意思的hhhh） #git #cli
5. APPLORE 🧰 这个网站收集了5000多个应用程序的图标，可以分类搜索。
科技爱好者周刊（第 319 期）：如何拍出爆款视频
1. 使用 @layer 自制一个 CSS 框架（英文） 📓 一篇 CSS 高级教程，介绍使用 @layer 指令，自己写一个 CSS 框架。 #css
2. LosslessCut 🧰 一个开源的跨平台视频剪切软件，目标是成为 FFmpeg 的图形前端。 #ffmpeg
3. Compress JPG 🧰 一个基于谷歌的 squoosh 算法、一次性压缩多张图片的网站。
4. git cliff 🧰 一个自动总结提交信息，生成 changelog 文件的命令行工具。（这个 gif 小动画怪有意思的hhhh） #git #cli
5. APPLORE 🧰 这个网站收集了5000多个应用程序的图标，可以分类搜索。
https://tools.cosine.ren/rsshub-url-converter
一个自建 rsshub 的 url 转换小工具，纯 LocalStorage，填入部署时设定的ACCESS_KEY和路由（后续还有批量转换路由到opml的功能上），原因是现在follow 的官方源感觉压力比较大挂一片，所以我昨天折腾了自建的rsshub 把 twitter 和pixiv 的订阅都转换到自建了，晚点把批量转换导出opml 的脚本也放上去一下。
页面不好看orz 先能用就行
