呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页: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
#优质博文 #前端 #资源推荐 #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
AI 摘要: Shiki v1.0,一个由Nuxt推动发展的语法高亮工具,基于VS Code使用的TextMate语法和主题。与其他在浏览器运行的高亮工具不同,Shiki通过预先高亮代码并将HTML发送给客户端,实现了零JavaScript下的精确和美观的代码高亮显示。为了克服其无法在浏览器中运行和处理动态代码的限制,引入了一个新版本Shikiji,旨在使Shiki运行环境无关、性能高效且完全支持ESM。这个改进使得Shiki不仅可以在任何运行时环境中工作,还可以通过单行代码从CDN导入并在浏览器中运行。此外,通过合并回Shiki,v1.0版本解决了之前版本中的绝大多数开放问题,提高了整个社区的利益。
via Anthony Fu
#优质博文 #前端 #开源
一个六岁开源项目的崩溃与新生
「太棒了,致敬一下,还是头一次见到打开来卡这么久的 PR,这工作量哈人」
AI 摘要:RSSHub 开源项表面上项目活跃,有3万星、900 多贡献者、月请求 3 亿多次,然而背后是高昂的服务器费用和繁重的维护工作。该项目在六年前开发,当时流行的许多 Node.js 技术和依赖性,被吹捧为“下一代”,现在已经过时。今天流行的许多新技术,如 JSX、TypeScript 和无服务器,无法应用,项目架构不合理,各路由信息分散,更改困难,增加了工作量和出错机率。为了解决这个问题,该项目已使用现代框架Hono进行了重设计和重写。变化包括从 Koa 切换到 Hono,转向 TypeScript、 ESM 和 JSX,并实施了新的路由标准。这些改进旨在提高可维护性和性能,使 RSSHub 能够专注于开发新功能。
via DIYgod
一个六岁开源项目的崩溃与新生
「太棒了,致敬一下,还是头一次见到打开来卡这么久的 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 开源了 V4 Alpha
AI 摘要:Tailwind CSS v4 Alpha 已公开源代码,引入 CSS 优先的配置方式,提升迁移至 v4 的便捷性。新特性包括零配置的内容检测,自动爬取项目模板文件。v4版本采用全新引擎,性能提升10倍,减小了体积,部分使用 Rust 语言提升处理速度。支持通过 Vite、 PostCSS 或 CLI 体验 Alpha 版本。详情可参考。
【V4 目标在6月左右发布:相关链接】
via Paul Redmond
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 中的
2. 定义了一个 notify 函数,接收通知的数量和自定义属性(如铃铛颜色、速度等),并根据这些参数动态生成 SVG 内容,展示通知的数量和铃铛的动画。
3.
4.
这些动画被应用于铃铛的不同部分:
- 铃铛体的旋转动画(
- 徽章的脉冲动画(
- 铃舌的左右移动(
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> ),配合铃铛体的旋转,增加了动画的真实感。#优质博文 #前端 #vue #动画
The Magic in Shiki Magic Move
【这个代码块过渡动画太酷啦!】
AI 摘要:这篇文章介绍了 Shiki Magic Move 的原理和实现方法。Shiki Magic Move 是一个用于代码块动画过渡的工具,灵感来自 Keynote 的 Magic Move 功能。文章详细解释了如何使用 Shiki 和 Vue 的
via Anthony Fu
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
📓 Obsidian 是一款私密且灵活的笔记应用程序,它提供免费、多拓扑关系的笔记呈现方式,并支持使用各种插件和模版,有点类似于一个致力于笔记领域的 VSCode。而 LifeOS 项目说白了就是一个 Obsidian 的模版,能够让你方便使用。
#优质博文 #前端 #tailwind #vue
新年福利!TailWindCSS+Vite+Vue3打造个性化在线简历项目
【这个主要是讲 tailwind 在 vue 里的使用,跟简历没关系2333,我一开始还以为是制作在线简历的项目】
AI 摘要:这篇文章介绍了如何使用 TailWindCSS、Vite 和 Vue3 创建一个个性化在线简历项目。作者分享了在失业后为提升技术栈和求职准备而开始的项目经历,重点介绍了 TailWindCSS 的学习和应用,强调了其在项目中的灵活性和优化性能。文章通过实际案例,展示了如何通过 TailWindCSS 快速实现响应式设计和状态处理,以及如何结合 Vue3 和 Vite 进行项目实践,最终创建了一个可自定义的在线简历模板。文章还讨论了 TailWindCSS 的核心概念,包括效用优先、处理状态、响应式设计等,旨在帮助读者快速掌握并应用 TailWindCSS。
via 掘金 霪霖笙箫
新年福利!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 类型声明。
科技爱好者周刊(第 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 类型声明。
Drams Framer
赛博解压玩具网站 (x)
超解压且写实的按钮动画和音效()
Product Hunt 链接:https://www.producthunt.com/posts/drams
#资源推荐 #tools #AI
推荐下tg机器人 :Coze 创建 GPT-4 bot 然后链接 telegram 群组
https://www.coze.com/docs/zh_cn/publish/telegram.html
via David Zhang 投稿
推荐下tg机器人 :Coze 创建 GPT-4 bot 然后链接 telegram 群组
https://www.coze.com/docs/zh_cn/publish/telegram.html
via David Zhang 投稿