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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#资源推荐 #tools #设计 #AI
Lummi | AI 人工智能生成图库,完全免费可商用!
网站地址 🔗 https://www.lummi.ai/

Lummi是一个AI人工智能生成的图库,所有图片都完全免费且可商用。该图库有着丰富的色彩搭配和精细的构图设计,甚至有摄影大作的感觉。涵盖各行业的如人物、动物、实物、风景、艺术等主题的图片在库中都能找到,并且是通过AI生成的,特别适合需要寻找免费商用图片的朋友们以及博主们。如果你是Figma的设计师,还可以使用专用的Lummi插件进行图片搜索,操作方便,简化了下载和使用流程,整体体验跟 Unsplash 图库很像

via Boss设计
#优质博文 #前端 #资源推荐 #tools
The Evolution of Shiki v1.0

AI 摘要: Shiki v1.0,一个由Nuxt推动发展的语法高亮工具,基于VS Code使用的TextMate语法和主题。与其他在浏览器运行的高亮工具不同,Shiki通过预先高亮代码并将HTML发送给客户端,实现了零JavaScript下的精确和美观的代码高亮显示。为了克服其无法在浏览器中运行和处理动态代码的限制,引入了一个新版本Shikiji,旨在使Shiki运行环境无关、性能高效且完全支持ESM。这个改进使得Shiki不仅可以在任何运行时环境中工作,还可以通过单行代码从CDN导入并在浏览器中运行。此外,通过合并回Shiki,v1.0版本解决了之前版本中的绝大多数开放问题,提高了整个社区的利益​​。

via Anthony Fu The Evolution of Shiki v1.0 · Nuxt Blog
#优质博文 #前端 #开源
一个六岁开源项目的崩溃与新生

「太棒了,致敬一下,还是头一次见到打开来卡这么久的 PR,这工作量哈人」

AI 摘要:RSSHub 开源项表面上项目活跃,有3万星、900 多贡献者、月请求 3 亿多次,然而背后是高昂的服务器费用和繁重的维护工作。该项目在六年前开发,当时流行的许多 Node.js 技术和依赖性,被吹捧为“下一代”,现在已经过时。今天流行的许多新技术,如 JSX、TypeScript 和无服务器,无法应用,项目架构不合理,各路由信息分散,更改困难,增加了工作量和出错机率。为了解决这个问题,该项目已使用现代框架Hono进行了重设计和重写。变化包括从 Koa 切换到 Hono,转向 TypeScript、 ESM 和 JSX,并实施了新的路由标准。这些改进旨在提高可维护性和性能,使 RSSHub 能够专注于开发新功能。

via DIYgod
#优质博文 #前端 #tailwind #css
Tailwind 开源了 V4 Alpha

AI 摘要:Tailwind CSS v4 Alpha 已公开源代码,引入 CSS 优先的配置方式,提升迁移至 v4 的便捷性。新特性包括零配置的内容检测,自动爬取项目模板文件。v4版本采用全新引擎,性能提升10倍,减小了体积,部分使用 Rust 语言提升处理速度。支持通过 Vite、 PostCSS 或 CLI 体验 Alpha 版本。详情可参考​​。
【V4 目标在6月左右发布:相关链接

via
Paul Redmond Tailwind has Open-sourced the V4 Alpha - Laravel News
#资源推荐 #tools #白板 #在线工具

好久之前star的了,今天被人提到突然想起来,mark一下

Excalidraw 是一个开源的在线虚拟白板工具,特点是可以模拟手绘风格的图表。它提供无限画布、支持暗模式、可定制、支持图片和形状库、多语言支持、导出PNG、SVG和剪贴板等功能。除此之外,它还提供实时协作和端到端加密功能。Excalidraw 可以通过npm包集成到其他应用中。

Github 地址在线体验 GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools

科技爱好者周刊(第 292 期):所有代码都是技术债

1. 为什么我选择 Tauri 而不是 Electron(英文) 📓 作者本来使用 Electron 开发跨平台桌面应用,后来改成了 Tauri。本文讲述了原因,以及他的感受。 #跨端 #electron #tauri 【好文】
2. text-wrap 的换行控制(英文) 📓 长文本的自动换行,由 CSS 的 text-wrap 属性控制。本文讨论如何使用这个属性,让标题产生更美观的自动换行。 #css
3. Ente 🧰 一个云相册软件,Google Photos 和 iCloud Photos 的替代品,以前是闭源产品,最近刚刚开源。它的主要特点是提供端对端加密。其他的云相册软件,还有 ImmichPhotoPrism
4. Earthly 🧰 一个开源的 CI/CD 框架,可以在本地架设自动构建服务。
5. 日语短文排版小工具 🧰 一个在线工具,生成漂亮的日文排版,支持横竖版式、自动假名标注、深浅两种主题、字体配置、高亮、下划线、字体等。(@miusuncle 投稿)
6. Web-Check 🧰 开源的网站分析工具, 可以分析网站的 IP 信息、SSL 链、DNS 记录、Cookie、域名信息、服务器位置、网站性能等,查看 Demo
7. ImageTools 🧰 AI 一键抠图(去除背景)的在线工具。(@handsometong 投稿) #AI
8. zz-plan 🧰 甘特图/横道图的在线制作工具。(@lizhichao 投稿)
9. Rsdoctor 🧰 一个 JS 构建器的分析工具,能够查看构建产物的模块关系,并分析构建器对代码的更改,支持 Rspack 和 Webpack。(@easy1090 投稿)
10. ast-grep VSCode 🧰 一个 VSCode 插件,是一种结构搜索/替换工具,可以更精确、更高效地搜索和替换代码元素。(@HerringtonDarkholme 投稿)
#vscode 【如图,还挺方便的】
#前端 #资源推荐 #tools #css
Figma Dev Mode 要收费?这个插件帮你省下每月的百来块钱

「推荐Figma Dev Mode替代品 - fubukicss-tool 浏览器插件」

AI 摘要:Figma在一月底将开发模式(Dev Mode)改为付费功能,仅组织版用户每月支付$25起可使用,引发广泛不满。回应用户反馈后,Figma将Dev Mode加入$12起的专业版。同时,Figma削减了免费版的功能,比如移除了CSS Style Inspect功能,使得免费用户的使用体验大幅下降。为此,开发者推出了一个替代方案—— fubukicss-tool 插件,能够在浏览器中实现Dev Mode的功能,包括展示CSS代码、生成Tailwind和UnoCSS代码,以及导出图片或SVG等。该插件提供了高度便利的功能,如代码复制、代码块折叠和TextNode文本内容复制,有效地解决了Figma Dev Mode付费问题,节省了用户每月的费用。插件已上架Chrome Web Store,开发者正在积极迭代更新。
#前端 #css #demo #codepen #notify #svg #anim
the 🔔 tolls for thee by leimapapa

一个动态通知铃铛图标,可通过不同设置触发不同的通知状态。

技术浅析:
1. SVG 中的 <animateTransform><animate> 标签被用来添加铃铛晃动和数字切换的动画效果。
2. 定义了一个 notify 函数,接收通知的数量和自定义属性(如铃铛颜色、速度等),并根据这些参数动态生成 SVG 内容,展示通知的数量和铃铛的动画。
3. <animateTransform> 标签用于对 SVG 元素进行变换动画,比如旋转、缩放、移动等。在这个例子中,它主要用于实现铃铛摇摆的动画效果。


attributeName="transform    // 指定要进行动画的属性名。
attributeType="XML"         // 定义动画属性的类型,这里为 XML 类型,表示操作 SVG 属性。
type="rotate"       // 指定变换类型为旋转。
values              // 定义旋转动画的值序列,格式为 "0 50 45; -12 50 45; 0 50 45; 12 50 45; 0 50 45"`,意味着铃铛会围绕 `(50, 45) 这一点进行前后摇摆。
dur                 // 动画持续时间,由 ringSpeed 属性动态指定。
repeatCount         // 动画重复次数,根据通知数量动态决定。
calcMode="spline"   // 动画计算模式,spline 使动画按照特定的速率曲线运动,使动画更平滑。


4. <animate> 标签用于添加基本的属性动画,比如颜色变换、透明度变化等。在这个例子中,它被用于实现徽章大小的动态变化和铃舌的左右移动。


attributeName  // 指定要进行动画的属性,如 r (圆的半径)和 cx (圆心的 x 坐标)。
values         // 定义属性值随时间变化的序列。例如,徽章大小的动画使用 "15;17;15" 表示半径从 15 变到 17 再变回 15,模拟一种跳动效果。
// dur 和 repeatCount 同上,指定动画持续时间和重复次数。


这些动画被应用于铃铛的不同部分:
- 铃铛体的旋转动画( <animateTransform> ),模拟接到通知时铃铛的摇晃。
- 徽章的脉冲动画( <animate> ),通过半径的变化给用户一种“通知”正在“跳动”的感觉。
- 铃舌的左右移动( <animate> ),配合铃铛体的旋转,增加了动画的真实感。
#优质博文 #前端 #nextjs #react
Server Action & Streamable UI

AI 摘要:这篇文章探讨了在 Next.js 中使用 Server Action 和 Streamable UI 来实现流式UI更新的方法。通过 Server Action,可以在服务器端执行异步操作并流式传输结果到客户端,实现页面数据的实时更新。文章通过一个打字机效果的示例,展示了如何利用 React Suspense 和异步组件创建流式UI,实现动态内容的逐步显示。这种方法虽然可以带来流畅的用户体验,但需要考虑到服务器保持长连接的资源消耗和带宽压力。

via innei Server Action & Streamable UI | 聊点不一样的 Next.js
#优质博文 #前端 #vue #动画
The Magic in Shiki Magic Move

【这个代码块过渡动画太酷啦!】

AI 摘要:这篇文章介绍了 Shiki Magic Move 的原理和实现方法。Shiki Magic Move 是一个用于代码块动画过渡的工具,灵感来自 Keynote 的 Magic Move 功能。文章详细解释了如何使用 Shiki 和 Vue 的 <TransitionGroup> 组件实现代码块中单词(token)的平滑过渡,包括进入(Enter)、移动(Move)和离开(Leave)三种动画效果。为了解决动画中遇到的挑战,作者采用了文本差异算法来精确匹配变化前后的 token,以及开发了一个自定义渲染器来处理特定的动画效果。Shiki Magic Move 已开源,鼓励社区为不同框架贡献更多集成。

via Anthony Fu
#App #GitHub

🧠 基于 Obsidian 打造的人生管理系统 —— LifeOS

🔍 最近发现一个非常有意思的项目,是基于 Obsidian 来打造的一个本地项目。致力于让用户可以通过 Obsidian 打造一个全方位的个人生产力系统。无论是生活,还是工作,都可以在这个 Obsidian 系统中得到有效的记录和管理。

📓 Obsidian 是一款私密且灵活的笔记应用程序,它提供免费、多拓扑关系的笔记呈现方式,并支持使用各种插件和模版,有点类似于一个致力于笔记领域的 VSCode。而 LifeOS 项目说白了就是一个 Obsidian 的模版,能够让你方便使用。

🤔 如果你是 Obsidian 的使用者,你可以直接下载 LifeOS 项目的下载示例仓库到本地,无需繁复配置,即可立马上手,配合无压笔记等一系列使用的组合完成对生活的及时记录,对任务和目标的充分复盘,以及利用 CODE 模型 + PARA 组织法,组建你的第二大脑。

💻 你可以前往 LifeOS 的 官网 来查看更详细的项目介绍和功能说明。
#优质博文 #前端 #tailwind #vue
新年福利!TailWindCSS+Vite+Vue3打造个性化在线简历项目

【这个主要是讲 tailwind 在 vue 里的使用,跟简历没关系2333,我一开始还以为是制作在线简历的项目】

AI 摘要:这篇文章介绍了如何使用 TailWindCSS、Vite 和 Vue3 创建一个个性化在线简历项目。作者分享了在失业后为提升技术栈和求职准备而开始的项目经历,重点介绍了 TailWindCSS 的学习和应用,强调了其在项目中的灵活性和优化性能。文章通过实际案例,展示了如何通过 TailWindCSS 快速实现响应式设计和状态处理,以及如何结合 Vue3 和 Vite 进行项目实践,最终创建了一个可自定义的在线简历模板。文章还讨论了 TailWindCSS 的核心概念,包括效用优先、处理状态、响应式设计等,旨在帮助读者快速掌握并应用 TailWindCSS。

via 掘金 霪霖笙箫
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊(第 291 期):AI 没有护城河

1. AI 没有护城河(全英) 📓 去年上半年,一份谷歌内部报告泄漏,据说是某个研究员写给谷歌高管的,看上去可信度很高。当时,谷歌内部正在讨论,如何应对 OpenAI 公司的 ChatGPT。这个研究员提出自己的看法。 #AI
2. 透明笔记本 📓 联想在世界移动通信大会(MCW)上,展示了一款透明笔记本。
3. structuredClone() 详解(英文) 📓 JS 新增的全局方法structuredClone()可以实现对象的深拷贝。本文详细介绍该方法相比其他方法的优点,以及局限。 #javascript
4. B 树原理解释(英文) 📓 数据库使用 B 树作为数据结构,能够加快查询速度,本文介绍它的原理。 #后端
5. AI 图像音乐生成器 🧰 这个 Web 服务可以将上传的图像,转换为一段音乐,适合为图文视频配背景音乐。 #AI
6. WeWe RSS 🧰 全文订阅微信公众号的一个本地服务,可以生成公众号的 RSS,基于微信读书。 #rss
7. Marker 🧰 一个命令行工具,将 PDF、EPUB、MOBI 文档转成 Markdown 文件,必要时会进行 OCR(文字识别)。
8. TSDiagram 🧰 一个在线工具,让你用 TypeScript 写类型关系,自动生成图表。 #typescript
9. How I get there 🧰 这个页面可以显示,你的 IP 地址到该网站所经过的路由。
10. 3Blue1Brown 🧰 著名数字科普作者 3Blue1Brown 写的微积分系列教程。
11. TS Docs 🧰 这个网站可以查看 npm 模块的 TS 类型声明。 Google “We Have No Moat, And Neither Does OpenAI”
#趣站 #css #交互设计
Drams Framer

赛博解压玩具网站 (x)
超解压且写实的按钮动画和音效()

Product Hunt 链接:https://www.producthunt.com/posts/drams
Back to Top