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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #前端 #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 地址在线体验
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #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
#资源推荐 #tools #AI
推荐下tg机器人 :Coze 创建 GPT-4 bot 然后链接 telegram 群组

https://www.coze.com/docs/zh_cn/publish/telegram.html

via David Zhang 投稿
#碎碎念
乐,类型笑话永不过时(x
#优质博文 #杂谈
After 14 years in the industry, I still find programming difficult

上面文章里提到的博文

AI 摘要:文章分享了作者从业14年后对编程的深刻认识。作者回顾了自己从一个对编程充满憧憬的学生到成为一名经验丰富的程序员的过程,并指出编程并不随经验的增加而变得简单。文章强调了编写好代码的难度,认为好的代码应该是易于人类理解的。作者提出了提高编程技能的方法,包括阅读经典软件项目和编程书籍。同时,文章讨论了创造性、避免完美主义、重视人际关系、有效学习方法和单元测试的重要性,并最终强调了控制复杂度的必要性。

via piglei
#优质博文 #杂谈
中外程序员差异

AI 摘要:文章探讨了中外程序员在工作习惯和文化上的差异。作者通过个人经历和观察,指出国外程序员更注重细节、文字表达能力强、个人职业目标明确,并且拥有较多的业余时间。这些差异反映了不同的工作环境和价值观,以及对技术和生活平衡的不同追求。

via 程序员的喵
https://github.com/maqrtineLzjulyie/spotify-check-premium/blob/main/main.py
你能看出这个脚本里隐含的恶意代码吗?
幻术大师了属于是
#优质博文 #前端 #css #grid #博客推荐
CSS Grid 的交互式指南(全英)

群友推荐的很棒的博客,进去看了看质量确实很不错,文章都是交互式。可以进去看看历史文章

AI摘要:这篇教程是一个关于 CSS Grid 的互动指南,详细介绍了如何使用 CSS Grid 创建复杂的布局。文章通过各种示例和代码演示,解释了 CSS Grid 的基础知识,包括网格流程、行列的隐式和显式定义、使用 repeat 函数简化定义、子项的定位、网格区域的定义以及如何考虑键盘用户的体验。文章还讨论了对齐技巧和如何利用 CSS Grid 解决常见的布局挑战,旨在帮助读者建立对 CSS Grid 的直观理解,并掌握其强大功能。

via Josh Comeau An Interactive Guide to CSS Grid • Josh W. Comeau
Back to Top