呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页: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
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 投稿
#优质博文 #杂谈
After 14 years in the industry, I still find programming difficult
上面文章里提到的博文
AI 摘要:文章分享了作者从业14年后对编程的深刻认识。作者回顾了自己从一个对编程充满憧憬的学生到成为一名经验丰富的程序员的过程,并指出编程并不随经验的增加而变得简单。文章强调了编写好代码的难度,认为好的代码应该是易于人类理解的。作者提出了提高编程技能的方法,包括阅读经典软件项目和编程书籍。同时,文章讨论了创造性、避免完美主义、重视人际关系、有效学习方法和单元测试的重要性,并最终强调了控制复杂度的必要性。
via piglei
After 14 years in the industry, I still find programming difficult
上面文章里提到的博文
AI 摘要:文章分享了作者从业14年后对编程的深刻认识。作者回顾了自己从一个对编程充满憧憬的学生到成为一名经验丰富的程序员的过程,并指出编程并不随经验的增加而变得简单。文章强调了编写好代码的难度,认为好的代码应该是易于人类理解的。作者提出了提高编程技能的方法,包括阅读经典软件项目和编程书籍。同时,文章讨论了创造性、避免完美主义、重视人际关系、有效学习方法和单元测试的重要性,并最终强调了控制复杂度的必要性。
via piglei
https://github.com/maqrtineLzjulyie/spotify-check-premium/blob/main/main.py
你能看出这个脚本里隐含的恶意代码吗?
幻术大师了属于是
你能看出这个脚本里隐含的恶意代码吗?
幻术大师了属于是
#优质博文 #前端 #css #grid #博客推荐
CSS Grid 的交互式指南(全英)
群友推荐的很棒的博客,进去看了看质量确实很不错,文章都是交互式。可以进去看看历史文章
AI摘要:这篇教程是一个关于 CSS Grid 的互动指南,详细介绍了如何使用 CSS Grid 创建复杂的布局。文章通过各种示例和代码演示,解释了 CSS Grid 的基础知识,包括网格流程、行列的隐式和显式定义、使用
via Josh Comeau
CSS Grid 的交互式指南(全英)
群友推荐的很棒的博客,进去看了看质量确实很不错,文章都是交互式。可以进去看看历史文章
AI摘要:这篇教程是一个关于 CSS Grid 的互动指南,详细介绍了如何使用 CSS Grid 创建复杂的布局。文章通过各种示例和代码演示,解释了 CSS Grid 的基础知识,包括网格流程、行列的隐式和显式定义、使用
repeat 函数简化定义、子项的定位、网格区域的定义以及如何考虑键盘用户的体验。文章还讨论了对齐技巧和如何利用 CSS Grid 解决常见的布局挑战,旨在帮助读者建立对 CSS Grid 的直观理解,并掌握其强大功能。via Josh Comeau
#前端 #css #demo #codepen
Shattering Images by Szenia Zadvornykh
一个独特的图片破碎效果,是需求时调研发现的。
技术分析:
- 使用Delaunay三角剖分算法将图片分割成若干个三角形片段
- 每个三角形创建一个Fragment对象。
- 每个Fragment对象包含一个小的canvas元素,该元素只绘制对应的三角形片段。
- 通过对每个Fragment的canvas应用动画效果,实现整个图片的破碎效果。
- 动画效果使用gsap库(TweenMax和TimelineMax)来实现
Shattering Images by Szenia Zadvornykh
一个独特的图片破碎效果,是需求时调研发现的。
技术分析:
- 使用Delaunay三角剖分算法将图片分割成若干个三角形片段
- 每个三角形创建一个Fragment对象。
- 每个Fragment对象包含一个小的canvas元素,该元素只绘制对应的三角形片段。
- 通过对每个Fragment的canvas应用动画效果,实现整个图片的破碎效果。
- 动画效果使用gsap库(TweenMax和TimelineMax)来实现