呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #css #容器查询 #前端
Container Query for “is there enough space outside this element?”
author Chris Coyier
Container Query for “is there enough space outside this element?”
AI 摘要:本文探讨了如何使用容器查询来动态调整用户界面组件的布局,根据外部空间的可用性决定将分页箭头放置在组件内还是组件外,详细介绍了利用视口单位和容器查询的实现方法。
1. 引言
• 介绍了分页箭头的两种布局方式:外部和内部,取决于外部空间的可用性。
• 提到此方法由 Adam Argyle 提出,并对此方法进行详细探讨。
2. 实现原理
• 讨论了使用视口单位和容器查询的基本原理。
• 强调了容器查询的优势,即无需预设容器的具体尺寸,布局可以根据外部空间的变化动态调整。
3. 代码示例
• 展示了 HTML 结构,包含一个包装元素和内部元素,以及箭头元素。
• 提供了 CSS 代码,定义了容器的宽度使用 min(500px, 100vw),确保在不同视口大小下的灵活性。
• 介绍了如何使用 @container 查询来检测容器尺寸,并在满足条件时改变内部元素的样式。
4. 具体应用
• 详细解释了如何使用 calc() 函数计算外部空间是否足够放置箭头。
• 展示了使用 translate 属性移动箭头的 CSS 代码。
• 附上了展示效果的视频,证明方法的有效性。
5. 结论
• 强调了这种方法的灵活性,即容器大小可变,而布局仍能正确响应。
• 提及可以使用自定义属性来进一步提高代码的灵活性。
author Chris Coyier
#优质博文 #前端 #css #布局 #course
初学者友好
The Height Enigma • Josh W. Comeau
author Josh W. Comeau
初学者友好
The Height Enigma • Josh W. Comeau
AI 摘要:本文深入探讨了CSS中高度设置的问题,揭示了为什么百分比高度有时不起作用,并提供了解决这些问题的有效方法。文章详细解释了CSS中宽度和高度计算的本质差异,并介绍了使用Flexbox和Grid布局来解决高度设置难题的策略。
• 引言:作者分享了自己学习CSS初期对高度设置问题的困惑,并指出理解背后的机制是解决问题的关键。
• 循环计算
• 解释了 CSS 中宽度和高度计算的根本区别:宽度基于父元素计算,而高度基于子元素。
• 描述了当子元素尝试设置百分比高度时,父子元素之间形成循环计算的问题,导致浏览器忽略百分比高度声明。
• 可知的高度
• 介绍了通过为父元素设置明确高度(如px或rem单位)来打破循环计算的方法。
• 展示了如何使用 rem 单位替代 px 单位,以提升布局的可访问性。
• 讨论了如何在嵌套元素中使用百分比高度,只要它们基于一个明确的尺寸。
• 从顶到底的百分比
• 探讨了在顶级 html 元素上设置百分比高度的效果,并解释了 html 元素的特殊性。
• 提到过去使用百分比高度确保布局填充整个视口的方法,以及现在使用 svh 单位的替代方案。
• 最终挑战
• 分析了使用固定高度(如 24rem )可能导致内容溢出的问题。
• 展示了使用 min-height 替代 height 的尝试,但指出这仍然不能解决百分比高度的问题,因为 min-height 并不提供固定尺寸。
• 解决方案
• 介绍了使用 Flexbox 和Grid布局来解决高度设置问题的方法。
• 解释了如何通过设置 display: grid 或 display: flex 来创建新的格式化上下文,使子元素自动填充父容器。
• 提供了使用 Flexbox 和 Grid 的具体代码示例,并解释了它们的布局机制。
author Josh W. Comeau
#优质博文 #前端 #node #文件系统 #路径处理 #course
究极详细。
7 Working with file system paths and file URLs on Node.js
author Dr. Axel Rauschmayer
究极详细。
7 Working with file system paths and file URLs on Node.js
AI 摘要:本章节详细介绍了如何在 Node.js 中处理文件系统路径和文件 URL,涵盖了路径相关的功能和 API 的使用方法。
• 路径模块的导入:介绍了如何导入 node:path 模块,并说明了在某些情况下可以省略导入语句。
• 路径 API 的访问方式:列出了三种访问 Node.js 路径 API 的方法,并展示了平台特定版本的 API 使用示例。
• 路径解析:详细解释了 path.parse() 函数在不同平台(Windows 和 macOS)上的使用差异,展示了如何正确解析 Windows 路径。
• 路径分隔符和路径定界符:定义了路径分隔符和路径定界符的概念,并展示了当前平台的分隔符和定界符。
• 环境变量 PATH:展示了在不同操作系统(macOS 和 Windows)上的 PATH 变量的示例,解释了路径分隔符和定界符的使用。
• 当前工作目录(CWD):介绍了 process 全局变量的使用方法,展示了如何获取和设置 CWD,并说明了 CWD 在路径处理中的作用。
• 路径类型:详细解释了 Unix 和 Windows 系统中的绝对路径和相对路径的概念,并展示了如何使用 path.resolve() 解析相对路径。
• 重要目录的路径:介绍了 node:os 模块中的 os.homedir() 和 os.tmpdir() 函数,展示了如何获取用户主目录和临时文件目录的路径。
• 路径拼接:详细解释了 path.resolve() 和 path.join() 函数的使用方法和区别,并展示了如何使用这些函数拼接路径。
• 路径解析和规范化:展示了 path.resolve() 和 path.normalize() 函数的使用示例,并解释了它们的作用。
• 路径相对化:介绍了 path.relative() 函数的使用方法,展示了如何获取从源路径到目标路径的相对路径。
• 路径解析和格式化:详细解释了 path.parse() 和 path.format() 函数的使用方法,并展示了如何使用这些函数解析和格式化路径。
• 路径操作:介绍了 path.dirname() 和 path.isAbsolute() 函数的使用方法,并展示了它们的作用。
• 跨平台路径处理:讨论了如何在不同平台上使用相同的路径,并介绍了如何将路径存储为平台无关的数组。
• 路径匹配:介绍了 minimatch 模块的使用方法,展示了如何使用 glob 表达式匹配路径。
• URL 处理:详细解释了 URL 类的使用方法,展示了如何创建和操作 URL 对象。
• 文件路径与 URL 的转换:介绍了 url.fileURLToPath() 和 url.pathToFileURL() 函数的使用方法,并展示了如何在文件路径和 URL 之间进行转换。
• 模块入口点检测:介绍了如何在 CommonJS 和 ESM 模块中检测当前模块是否为入口点,并展示了相应的代码示例。
author Dr. Axel Rauschmayer
#优质博文 #前端 #node #javascript #新动态
Node Weekly #578
author Peter Cooper
Node Weekly #578
AI 摘要:本文是 Node Weekly 第 578 期的内容,发布时间为 2025 年 5 月 13 日,聚焦于 Node.js 和 JavaScript 生态系统的最新动态。文章涵盖了新工具和库的发布(如 Feedsmith 和 Hyparquet)、Node.js 版本更新(如 v24.0.1)、性能优化进展、以及 npm 包创建的最佳实践等内容。此外,还介绍了 JavaScript 相关工具和技术(如 k6 和 Mantine),并提供了多个实用库和资源的链接。编辑 Peter Cooper 提到将参加 Google I/O,newsletter 将暂停至 5 月 27 日。
1. 更新动态
• Node v24.0.1 发布:修复了 v24.0 中移除的 SlowBuffer 功能,因仍有流行包依赖此功能;同时 Lizz Parody 文章总结了 Node 24 的新特性。
• 性能优化动态:Node 性能专家 Yagiz Nizipli 正在改进 Node 的 HTTP 性能。
• 其他更新:Bun v1.2.13 提升了 Node.js 兼容性(如 worker_threads 支持);VS Code 新增对 Node 网络调试功能的支持;Node.js Next 10 调查仍在进行中,旨在帮助核心团队确定优先级。
2. 技术文章
• 创建现代 npm 包:Brian Clark 提供了一份 2025 年适用的分步指南,介绍创建 npm 包的最佳实践,内容近期已更新。 #工程化
• 文件系统路径与 URL:Dr. Axel Rauschmayer 探讨了在 Node 中处理文件系统路径和文件 URL 的方法。
3. 工具推荐
• Feedsmith:一个 Web 订阅解析和生成工具,支持 RSS、Atom、JSON Feed 等格式,解决了现有库的一些问题,尽管尚处于早期阶段,但核心功能已就绪。Jean-Philippe Monette 的成熟 Feed 库已经有十多年的历史了,如果您想要专注于 Feed 生成,它也刚刚进行了一次重大更新 (v5.0)
• PptxGenJS:一个成熟的库,用于用 JavaScript 创建 PowerPoint 演示文稿,支持图形、表格和其他典型的幻灯片对象等。
• ANSIS 4.0:一个支持多环境的 ANSI 颜色库,适用于终端、浏览器等,v4.0 带来重大更新。
• Hyparquet:无依赖的 JavaScript 库,用于解析 Parquet 文件格式,支持浏览器环境。
• jsdiff 8.0:用于文本差异比较的库,支持多种比较方式。
• Glob 11:JavaScript 中最准确且第二快的文件匹配库。
• 其他工具:包括 sqs-consumer、express-openapi-validator、OpenAI Node、dnt、cron-parser 和 Undici 等库的最新版本更新。
• k6 1.0:Grafana 推出的负载测试工具,支持用 JavaScript/TypeScript 编写脚本。
author Peter Cooper
#优质博文 #前端 #css #新特性
这个在线生成器不错 CSS Generator for Flower Shapes
Creating Flower Shapes using clip-path: shape()
author Temani Afif
这个在线生成器不错 CSS Generator for Flower Shapes
Creating Flower Shapes using clip-path: shape()
AI 摘要:本文详细介绍了如何使用 CSS 的新特性 shape() 函数,通过 clip-path 创建花朵形状。作者从 shape() 函数的基本概念入手,聚焦于 arc 命令,结合几何原理和具体代码示例,展示了如何绘制复杂的花朵形状,并通过调整弧线的大小和方向生成不同的形状效果。文章还探讨了代码优化技巧以及浏览器的兼容性问题,适合对 CSS 高级形状设计感兴趣的开发者学习。
• 什么是 shape() 函数?
• 介绍了 shape() 作为 clip-path 的新值,突破了 polygon() 只能绘制直线的限制,支持绘制曲线。
• 与 SVG 路径语法相似,提供了更多的灵活性,但语法复杂,需要大量练习。
• 本文聚焦于 arc 命令,下一篇文章将探讨 curve 命令,并以创建有趣形状为目标。
• Arc 命令详解
• arc 命令用于在两点之间绘制椭圆弧,本文简化讨论为圆弧情况。
• 通过几何原理解释了两点和半径确定的两个圆,以及由此生成的四种弧线(小/大,顺/逆时针)。
• 提供了 shape(from Xa Ya, arc to Xb Yb of R [large or small] [cw or ccw]) 的代码示例,并通过演示说明不同参数的效果。
• 创建花朵形状
• 以之前的文章为基础,展示了如何使用 shape() 绘制花朵形状,通过多个小圆弧连接形成花瓣。
• 详细讲解了点的坐标计算和半径公式,使用 Sass 循环生成代码,并通过调整参数解决反向形状问题。
• 最终通过 small ccw 和 large cw 组合,得到目标花朵形状,并展示了其他有趣的形状变体。
• 结论与示例
• 总结了 arc 命令的使用,鼓励读者从圆弧扩展到椭圆弧的学习。
• 以心形为例作为最终演示,引导读者自行思考实现方式,并推荐作者的在线生成器获取更多代码资源。
• 浏览器兼容性
• 指出目前仅 Chrome、Edge 和 Safari 完全支持 shape() 函数,提醒开发者注意兼容性问题。
author Temani Afif
#优质博文 #前端 #CMS #astro #技术选型
看着不错
Using Pages CMS for Static Site Content Management
author Ryan Trimble
看着不错
Using Pages CMS for Static Site Content Management
AI 摘要:本文详细介绍了如何使用 Pages CMS 作为静态网站的内容管理系统,结合 Astro 等静态站点生成器,简化内容管理流程。作者分享了 Pages CMS 的核心优势,包括易用性、最小化依赖、协作功能和高度自定义性,并通过实际案例展示了如何将其与 Astro 的内容集合功能集成,管理 Markdown 文件和自定义字段。此外,文章还涵盖了 Pages CMS 的配置、与 GitHub 仓库的连接、内容创建以及自动部署的步骤,为静态网站开发者提供了实用指南。
author Ryan Trimble
#优质博文 #前端 #AI #任务管理 #产品需求 #工程化 #MCP
I didn't think AI can code like this - YouTube
被安利到了 TaskMaster AI,想试试。
Twitter Post
author Dan ⚡️ (@d4m1n)
I didn't think AI can code like this - YouTube
被安利到了 TaskMaster AI,想试试。
Twitter Post
AI 摘要:本文由 Dan ⚡️ 在 X 平台分享了如何利用 AI 和任务管理系统高效构建产品的流程。他强调了详细需求编写、产品需求文档 (PRD) 的创建、任务管理工具的选择以及基于任务的构建循环的重要性。Dan 推荐使用 TaskMaster AI 作为任务管理工具,并提供了一个简单的提示循环来确保任务按逻辑顺序执行,避免复杂项目中的混乱。
• 1. 编写详细需求
• 花费 15-20 分钟深入思考,确保 AI 明确你的构建目标。
• 需求需简洁但全面,包含技术栈等细节。
• 总结:这一步是确保 AI 理解项目愿景的基础,避免后续沟通偏差。
• 2. 创建产品需求文档 (PRD.txt)
• 使用博客中提供的提示,将需求整理成正式的产品需求文档。
• 仔细复查文档内容,确保无遗漏。
• 总结:PRD 作为项目蓝图,是后续任务分解和执行的重要依据。
• 3. 使用任务管理系统
• 推荐了四种任务管理工具:TaskMaster AI、Roocode Boomerang Tasks、Shrimp Task Manager 和 Cline Task Tool。
• Dan 个人更倾向于 TaskMaster AI,原因是其集成了 Perplexity 进行网络搜索,能更好地处理复杂性,正确识别依赖关系并按逻辑顺序执行任务。
• 其他工具如 MCP 与 Cursor 配合良好,也支持 CLI 直接使用。
• 总结:选择合适的任务管理工具是项目有序推进的关键,TaskMaster AI 在复杂项目中表现更优。
• 4. 使用简单的任务构建循环
• 强调构建循环必须严格围绕任务进行,避免偏离任务管理系统,否则复杂项目容易出错。
• 提供了一个简单的提示循环:
• "Show tasks" - 查看任务列表。
• "What's the next task I should work on? Please consider dependencies and priorities." - 询问下一个优先任务。
• "Implement task 2 and all of its subtasks." - 执行具体任务及其子任务。
• "I'd like to add a new task that ..." - 添加新任务。
• 更多示例可在推文中查看,核心是始终保持任务管理的一致性。
• 总结:任务构建循环是确保项目按部就班执行的关键方法,严格遵循可避免混乱。
author Dan ⚡️ (@d4m1n)