呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #tailwind #css
tailwind 总给我一种前端界的原神的感觉(暴论x
认真的说,这篇写挺好的,有一些 tailwind 实用小技巧。
Tailwind’s @apply Feature is Better Than it Sounds
author Zell Liew
认真的说,这篇写挺好的,有一些 tailwind 实用小技巧。
Tailwind’s @apply Feature is Better Than it Sounds
AI 摘要:本文为 Tailwind CSS 的 @apply 功能辩护,认为其价值被严重低估。作者通过对比 Sass 的 @include 机制,展示了 @apply 在代码复用、响应式设计和可维护性上的优势,并提供了实用案例(如布局工具类)证明其灵活性,同时指出其虽不如 Sass 混入强大,但结合现代 CSS
1. 作者对 Tailwind 的矛盾态度
• 肯定 Tailwind 方法论在样式可维护性和性能上的优势,但批评原生 Tailwind 的某些设计。
• 强调 @apply 是被低估的核心功能,尽管 Tailwind 创始人 Adam Wathan 曾建议避免使用。
2. @apply 的功能解析
• 允许将 Tailwind 工具类复制到自定义 CSS 中,类似 Sass 的 @include。
• 示例对比单属性工具类(如 p-4)与复杂工具类的应用场景。
3. 与 Sass 混入的对比
• 优势 :
• 直接用于 HTML 无需额外选择器(如 <div class="utility">)。
• 支持响应式变体(如 md:utility)。
• 劣势 :
• 不支持多变量或逻辑控制(如 Sass 的 @if/@for)。
4. 实用案例展示
• 布局工具类 :定义 vertical 和 horizontal 工具类,通过 flex-direction 快速切换布局,并支持响应式(如 sm:horizontal)。
• 网格系统 :grid-simple 工具类结合 CSS 变量(--cols)动态调整列数,减少重复代码。
5. 灵活使用建议
• 混合 @apply 与原生 CSS 编写复杂布局(如媒体查询内应用工具类)。
• 提倡将 Tailwind 视为工具而非教条,平衡实用性与可读性。
author Zell Liew
#新动态 #前端 #优质博文 #react
JavaScript Weekly #731 — April 11, 2025
JavaScript Weekly #731 — April 11, 2025
AI 摘要:本期 JavaScript Weekly 聚焦 2025 年前端生态的最新动态,涵盖 Next.js 15.3 的 Turbopack 构建优化、Node.js 测试最佳实践,以及 Tauri 与 Electron 的桌面应用开发对比。同时介绍了 JavaScript 新特性,以及多个开源工具更新。
1. 博文与教程
• 2025 年开发者应掌握的现代特性:迭代器助手、structuredClone() 深拷贝、集合操作等(Suren Enfiajyan 撰文)。
• Node.js 测试最佳实践:一群精通 Node 的开发者撰写的关于现代 Node 测试的详细指南。
• Tauri vs. Electron: performance, bundle size, and the real trade-offs:对比 Rust 框架 Tauri 的性能优势与适用场景(Costa Alexoglou 分析)。
• React Reconciliation:组件背后的隐藏引擎:React 使用协调算法根据虚拟 DOM 的更改来更新 DOM。了解它的工作原理对于开发更快的应用程序至关重要。
2. 工具与库更新
• Next.js 15.3:现在包括 Turbopack 构建
• Cloudflare 更新:支持 Next.js 一键部署至 Workers、Cloudflare Vite 插件 v1 发布,现在可以在单 Worker 中部署全栈应用(支持 React Router、Astro、Vue.js、Svelte),可以在 Git 仓库中添加 “部署到 Workers”按钮。
• pnpm 10.8、Prisma 6.6、React Native 0.79、Bun 1.2.9......
3. 社区动态
• npm 令牌问题:npm 注册表疑似清除所有访问令牌,建议用户临时创建新令牌。
• Git 20 周年: GitHub 的 Taylor Blau 采访了 Linus Torvalds, 讨论了这一里程碑和该项目的背景。
• p5.js 2.0 似乎即将发布——它的第八个 Beta 版本刚刚发布。beta 2 的发行说明详细介绍了即将推出的功能。
• Mozilla 的 Simon Pieters 告诉我们, H1 元素的默认样式正在发生变化 ,并且浏览器也开始对嵌套部分标题的默认样式进行更改。
1. CSS/SVG 中的圆角三角形框
AI 摘要:本文探讨了如何使用 CSS 和 SVG Filter ( feGaussianBlur ) 创建带有圆角的三角形框,并分享了作者在优化 CSS 选择器性能过程中的经验与教训。
2. CSS Shapes with rounded corners
AI 摘要:本文介绍了一种使用 CSS 和 SVG 滤镜为任意形状添加圆角的技巧,通过结合 clip-path 和 SVG 滤镜实现复杂形状的平滑圆角效果,并讨论了该技术的应用场景与浏览器兼容性问题。
#碎碎念 #前端 #趣站 #动画 #demo
感觉在手机上加个陀螺仪的效果会更美妙更好玩儿,点子源源不断的冒出来了!(为什么我想到了陀螺仪因为之前做过类似的需求,ios 上陀螺仪权限得请求,加了陀螺仪就是那种很好玩儿的游戏了hhh)
₍˄·͈༝·͈˄*₎◞ ̑̑
https://fixupx.com/hellokaton/status/1910125154929357277
感觉在手机上加个陀螺仪的效果会更美妙更好玩儿,点子源源不断的冒出来了!(为什么我想到了陀螺仪因为之前做过类似的需求,ios 上陀螺仪权限得请求,加了陀螺仪就是那种很好玩儿的游戏了hhh)
₍˄·͈༝·͈˄*₎◞ ̑̑
katon (@hellokaton):😎 听说你很懂 Web 渲染?
试试这个用 Three.js 和 Ammo.js 搞的 3D 物理引擎个人主页,
让你在浏览器里体验真实世界的碰撞和互动!
➤ 实时碰撞、互动,物理效果炸裂
➤ 光线投射,点哪打哪
➤ 移动端也能流畅运行
在线体验:https://0xfloyd.com
源码仓库:https://github.com/0xFloyd/Portfolio_2020
https://fixupx.com/hellokaton/status/1910125154929357277
#优质博文 #前端 #typescript
难得一见的比较不同的思路
Understanding the Value of TypeScript Enums
author Yazan Alaboudi
难得一见的比较不同的思路
Understanding the Value of TypeScript Enums
AI 摘要:本文为 TypeScript 的枚举(enum)功能辩护,指出当前对其的批评多源于误用而非特性本身的问题。作者强调枚举应作为符号化(symbolic)工具用于内部逻辑,而非直接绑定字面值或暴露为公共 API,并详细分析了错误使用枚举的三大风险及正确实践方法。
1. 引言与背景
• 近年来越来越多开发者批评 TypeScript 的枚举功能,倾向于使用联合类型或常量对象。
• 作者认为问题在于对枚举的误解和误用,而非特性本身。
2. 枚举的符号化本质
• 枚举应代表抽象概念而非具体值(如 "red" 或 #FF0000 ),类似 ES6 的 Symbol 特性。
• 示例:交通灯状态应通过 enum TrafficLight { Red, Yellow, Green } 抽象表示,而非绑定字符串或颜色代码。
3. TypeScript 枚举的陷阱
• 允许字面值赋值:如 enum TrafficLight { Red = "red" } 导致以下问题:
• 抽象泄漏:逻辑层与表示层耦合(如 UI 直接依赖 "red" 字符串)。
• 脆弱性:字符串比较易受大小写或拼写错误影响。
• 公共 API 污染:枚举值暴露后难以修改(如后端 API 返回 "Processing")。
4. 正确使用建议
• 仅用于内部逻辑:枚举值应作为代码中的符号标签,不直接序列化或展示。
• 显式转换层:通过 Map 或映射函数将枚举值转换为外部需要的表示形式。
5. 结论
• 批评者常抱怨枚举“不易序列化”,但作者指出这是误用——枚举本就不应直接用于序列化场景。
• TypeScript 枚举虽有设计差异,但在符号化场景中仍具价值,关键在于区分抽象与具体表示。
author Yazan Alaboudi
#优质博文 #前端 #css #javascript #性能优化 #新动态
Smashing Newsletter #502: New Front-End Techniques
author Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter #502: New Front-End Techniques
AI 摘要:本期探讨了前端技术的最新进展,包括 CSS 自定义 <select> 菜单、更柔和的文本下划线样式、新的 command 和 commandfor 属性,以及 scheduler.yield() 方法优化任务调度。此外,还介绍了流体排版(fluid typography)的改进思路、高延迟环境下的性能优化策略,以及 Chrome 用户体验报告中新增的往返时间(RTT)指标。
1. 新交互属性:command 与 commandfor
• 替代 popovertargetaction 和 popovertarget,无需 JavaScript 即可触发浏览器内置行为,提升按钮交互的可访问性(如自动关联 aria-expanded)。
• 推荐阅读 Keith Cirkel 的技术解析及他在二月份伦敦 Web 标准聚会上的演讲
2. 链接样式优化方案:Chris Coyier 对经典的蓝色链接进行了改进 ,提出通过 currentColor 和透明度调整下划线,平衡可识别性与阅读流畅性。
3. 完全可定制的 <select> 元素
• Chrome 135+ 支持通过 CSS 定制下拉菜单的所有组件(包括选项图标),并支持嵌入 HTML 内容(如图片)。
• Adam Argyle 总结了您需要了解的有关可自定义 <select> 及其提供的创意可能性的所有信息
4. 高延迟环境优化策略:Chrome 用户体验报告新增 RTT(往返时间)指标,Harry Roberts 提供应对高延迟的实践建议:协议优化、缓存策略等。
5. 流体排版再思考:Miriam Suzanne 指出当前 clamp() 方案的局限性,主张以用户默认字体大小为基准,避免“魔法数字”计算。
6. Web 平台开发速查表
• Patrick Brosset 整理浏览器新特性追踪与开发者参与标准制定的速查表,它重点介绍了如何追踪可用的功能、浏览器的新功能,以及如何通过发表自己的意见来影响平台的开发。
7. 任务调度优化:scheduler.yield()
• 新的 scheduler.yield() 方法 可以帮助我们分解长任务,从而消除在返回主线程和完成任务之间出现延迟的风险
• 优先执行现有任务而非新建任务,减少主线程阻塞(需注意 Chromium 浏览器兼容性)。
• 该 API 目前仅适用于基于 Chromium 的浏览器,因此如果您决定使用它,则需要为其他浏览器提供回退功能。
author Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
#demo #前端 #动画 #codepen
好酷,好有创意的黑洞。
Creative Black Hole
好酷,好有创意的黑洞。
Creative Black Hole
It's hard to avoid getting totally drawn in to the soft gradients and texture details of Antoine Wodniack's neon JavaScript black hole.
在 Antoine Wodniack 的霓虹 JavaScript 黑洞作品中,你很难不被柔和的渐变和纹理细节所吸引。
#优质博文 #新动态 #node #tools
Node Weekly #572
Node Weekly #572
AI 摘要 :本期 Node Weekly 聚焦 JavaScript 生态的重要更新与工具动态,包括 Express 5.1 正式成为 npm 默认版本、Node.js LTS 版本生命周期提醒、npm 恶意软件事件,以及 V8 引擎优化进展。同时推荐了开发者工具链优化、开源替代方案(如 Teable 和 Neutralinojs),并汇总了 Vue.js 社区报告、LLM 与浏览器交互等前沿技术动态。
1. Express 5.1 成为 npm 默认版本
• Express 5.0 去年发布后经历安全审计和治理重构,5.1 版本现标记为 npm 官方 "latest" 版本。
• 升级需谨慎,官方提供迁移指南。
• 维护者 Wes Todd 幽默称 Express 如同“僵尸”般难以淘汰,团队努力使其恢复活力。(ref)
2. Node.js 版本更新与安全事件
• Node v18.20.8 (LTS) :本月将结束生命周期,建议升级至 v20/v22。 (ref)
• CI 基础设施漏洞 :Node.js 测试环境因未公开漏洞临时限制访问,完整报告待发布。
• npm 恶意软件 :首次发现本地安装包感染其他合法包的反向 Shell 攻击(ReversingLabs 报告)。
3. 工具与框架更新
• Teable:Postgres 上的开源 Airtable 替代品 :基于 NestJS 和 Postgres 的开源 Airtable 替代方案。
• Nōdo :通过 Unix Socket 实现 Ruby 调用 Node.js 函数的 IPC 工具。
• Playwright MCP :微软推出的 LLM 与浏览器交互协议(支持 Claude、Cursor 等模型)。
• Neutralinojs 6.0 :为 Electron 之类的东西提供了一种有趣的轻量级替代方案,因为它仍然允许您构建在 Linux、Windows 和 macOS 上运行的应用程序,但 Chromium 并未捆绑——而是使用现有安装的浏览器引擎。
• ls-lint 是一个用于检查项目中文件和目录名称的成熟工具。
• 其他工具版本更新 :zx 8.5(Google 脚本工具)、node-llama-cpp 3.7(本地 LLM)、Fastify 5.2.2 等。
• Gemini AI 新功能:支持生成 HTML/React 组件的画布模式。
• 开发者工具创新:Simon Willison 推出“不完整 JSON 格式化工具”解决调试痛点。
4. 教程与文章
• Land Ahoy: Leaving the Sea of Nodes — V8 JavaScript 引擎团队核心成员发表的一篇技术性很强的文章,解释了 Turbofan(V8 的优化编译器之一)的局限性。如果您不关心 JavaScript 的内部编译和运行方式,请放心,V8 团队正在努力使其运行得更快!
• 如何使用 Node.js 和 Express 设置 TypeScript 本文详细介绍了如何在 Node.js 和 Express 项目中配置 TypeScript,包括初始化项目、安装依赖、配置编译器选项以及设置开发工具链(如 nodemon 和 concurrently)。
然后这个 collaborator 在宣传图里面嗯把对的改成错的...
(useEffect 里面不能直接 await,一般写 promise.then(setState) 这种)
但是 LLM 不太会犯这种低级错误,说明是阿三做图做错了(
#优质博文 #新动态 #前端 #javascript
JavaScript Weekly #730
JavaScript Weekly #730
AI 摘要:本期 JavaScript Weekly 涵盖了多个重要动态,包括轻量级 JS 运行时 Bare 的发布、Deno 与 Oracle 的 JavaScript 商标之争、React 19.1 新特性、Safari 18.4 更新,以及一系列工具和教程推荐。此外,还介绍了 Wasp 全栈框架、Anime.js 4.0 动画库等新工具,并分享了开发者资源和行业趋势。
1. Bare: 轻量级模块化 JS 运行时
• 类似 Node.js 但更精简,基于 V8 和 libuv,支持多引擎。
• 仅提供模块系统、插件系统和线程支持,依赖用户态模块扩展。
2. Deno 与 Oracle 的 JavaScript 商标争议
• Deno 向 USPTO 申请撤销 Oracle 持有的 "JavaScript" 商标。
• Ryan Dahl 呼吁开发者支持,签署公开信反对 Oracle 的商标主张。
3. 社区动态
• Safari 18.4 更新
• 新增 Declarative Web Push、迭代器助手、Error.isError,优化 JSON 解析性能。
• TC39 将讨论 TypeScript 风格枚举提案
• 长期以来一直有人提议将 TS 风格的枚举引入 JavaScript,作者 Ron Buckton 将在下次会议上向 TC39 提出该提案。 这里有一个幻灯片介绍了该提案的好处。
• ES2025 规范 进入候选阶段,预计将于 6 月最终获得批准。
• Express 5.1:长期存在的 Node.js Web 框架得到了升级,5.x 最终成为 npm 上的 latest 标记版本。
• Chrome 135+ 支持 CSS Overflow 5 规范,这使得创建原生滚动和轮播体验变得更加容易。
• Astro 5.6, Ember 6.3, Turborepo 2.5, Node.js v23.11.0, Bun v1.2.8......
5. 教程与文章
• 探讨 JavaScript 同步 await 的可行性(Dr. Axel Rauschmayer) 本文探讨了 JavaScript 中同步与异步代码的“颜色”问题,提出通过同步 await 解决现有异步编程的局限性,但分析了其潜在的性能损耗和操作风险,最终认为该方案可能不可行。
• 我第一次接触 WebAssembly 时学到的经验教训 本文作者分享了首次接触 WebAssembly( #WASM )的经验
• Breaking down circular dependencies in JavaScript 本文通过实验深入解析了 JavaScript 中的循环依赖问题,解释了其成因、表现场景、错误机制及解决方案,并对比了不同运行环境(浏览器、Node.js、打包工具)下的差异。
• GitHub 为项目维护者提供的一些提示: 每个维护者都需要知道的 5 个 GitHub Actions
• 如果您想写一篇可以刊登在 JavaScript Weekly 上的博客文章,那么阅读 Michael Lynch 撰写的《如何撰写开发人员阅读的博客文章》 是个不错的主意.. :-)
#优质博文 #react #前端 #开源 #tools #新动态
React Status #423 — April 2, 2025
React Status #423 — April 2, 2025
AI 摘要:本期聚焦 React 19.1 的功能更新、全栈工具链(如 Wasp)、安全漏洞提醒及社区动态(如 styled-components 的未来)。同时推荐了多个实用库(如 TinyBase、React Email)和开发者活动。
1. React 19.1 发布
• 主要更新
• Owner Stacks (开发工具功能):帮助开发者追踪组件渲染关系。
• 边缘环境流式支持 :优化边缘计算场景下的性能。
• 服务器端预渲染 RSC 的新 API (与 Parcel 2.14.0 兼容)。
• 增强 Suspense 支持 。
• 未发布官方博客,但包含多项修复和小功能改进。
2. 工具与库更新
• Wasp - 基于 React、Node 和 Prisma 的全栈框架,提供传统全栈开发体验。
• TinyBase v6.0 - 响应式本地优先数据存储,支持 React 19,仅提供 ESM 版本。
• React Email 4.0 - 新增邮件链接分析工具、垃圾邮件评分器及客户端兼容性检查。
• Svggles - 通过 React 增强 SVG 交互性(如发光、动画效果)。
• Remotion React-to-video 工具包添加了一个简洁的听力图模板 ,用于渲染音频媒体的波形样式视图。
3. 安全与社区动态
• Remix/React Router 漏洞 :CVE-2025-31137 影响 Remix 2 和 React Router 7(Express 适配器用户需注意)。
• 愚人节玩笑 :Vercel 的 Guillermo Rauch 假称 React 将弃用 className 改用 class,实际未发生。
• styled-components 进入维护模式:社区讨论替代方案 ( Linaria / Vanilla Extract / CSS Modules ......)
4. 其他新闻
• Material UI v7 稳定版发布 。
• React Native Gesture Handler 2.25 :优化原生触摸 API。
• Express 5.1 发布 :Node.js 框架正式进入 5.x 阶段。
• Vue.js 2025 社区报告 :包含对 Evan You 和 Nuxt 团队的深度访谈。
#碎碎念
最近搬家整理回家拿东西装货架各种事搞得非常忙(虽然我没帮上什么忙),搬个家真不容易唉。
另外,妲喵昨天发现长途打货拉拉上的网约车比高德等网约车便宜好多……90 多 km 跨省在高德上 200 左右(不含高速费)货拉拉上 120,而且不是那种货车也是网约车。
今天晚上去浅试试广州的潮汕牛肉火锅!看看实力!
最近搬家整理回家拿东西装货架各种事搞得非常忙(虽然我没帮上什么忙),搬个家真不容易唉。
另外,妲喵昨天发现长途打货拉拉上的网约车比高德等网约车便宜好多……90 多 km 跨省在高德上 200 左右(不含高速费)货拉拉上 120,而且不是那种货车也是网约车。
今天晚上去浅试试广州的潮汕牛肉火锅!看看实力!
#前端 #tailwind #css #新动态
想了想还是加一个 #新动态 的 tag,虽然很多更新一般没时间看,但是看过得还是 mark 一下。
tailwind 更新的这些功能差不多都是以往需要插件支持或者直接写的。
话说被喷多之后貌似改进了旧版本浏览器兼容性噢,颜色不会一团浆糊了,有没有小伙伴升级测测看。
Tailwind CSS v4.1 发布:新增文本阴影、遮罩工具等多项功能
想了想还是加一个 #新动态 的 tag,虽然很多更新一般没时间看,但是看过得还是 mark 一下。
tailwind 更新的这些功能差不多都是以往需要插件支持或者直接写的。
话说被喷多之后貌似改进了旧版本浏览器兼容性噢,颜色不会一团浆糊了,有没有小伙伴升级测测看。
不幸的是,其中一些功能在较旧的浏览器中降级得非常糟糕,以至于对于使用卡在 Safari 15 上的旧 iPhone 或 iPad 访问的人来说,即使是颜色和阴影等基本内容也可能根本无法呈现。
For Tailwind CSS v4.1, we put a bunch of effort into coming up with and testing our own framework-specific fallbacks to make your sites render as best as possible in older browsers, even if some super modern things still don't behave quite the same.
对于 Tailwind CSS v4.1,我们投入了大量精力来提出和测试我们自己的特定于框架的回退,以使您的网站在较旧的浏览器中呈现得尽可能好,即使一些超级现代的东西仍然表现得不尽相同。
在 oklab 中定义的颜色现在可以在旧版本的 Safari 中呈现
Tailwind CSS v4.1 发布:新增文本阴影、遮罩工具等多项功能
AI 摘要:Tailwind CSS v4.1 引入了文本阴影、遮罩工具、浏览器兼容性优化等多项新功能,提升开发体验。
Tailwind CSS v4.1 是一个重要版本更新,新增了多项实用功能和优化。主要包括:
• 文本阴影工具(text-shadow-*):提供五种预设阴影大小,支持颜色和透明度调整。
• 遮罩工具(mask-*):支持使用图片或渐变遮罩元素,优化了 API 设计。
• 浏览器兼容性改进:在旧浏览器中更优雅地降级,同时充分利用现代浏览器特性。
• 精细文本换行(overflow-wrap):防止长单词破坏布局。
• 彩色投影支持(drop-shadow):新增彩色投影工具。
• 输入设备适配(pointer-* 和 any-pointer-*):针对触摸设备优化设计。
• 基线对齐(items-baseline-last 和 self-baseline-last):支持将 Flex/Grid 项目对齐到文本最后一行的基线。
• 安全对齐(safe):防止内容在空间不足时消失。
• 构建优化:支持忽略特定路径(@source not
)和强制包含工具类(@source inline(...)
)。
• 新变体:如 noscript、user-valid、inverted-colors 等。
文章还提供了升级指南,支持通过 npm 安装最新版本(CLI、Vite、PostCSS)。
#优质博文 #前端 #性能优化 #LCP
Lighthouse 直接内置在 Chrome DevTools 了 ´_>`
Insights sidebar in the DevTools Performance panel
Lighthouse 直接内置在 Chrome DevTools 了 ´_>`
Insights sidebar in the DevTools Performance panel
AI 摘要:Chrome DevTools 新增的 Insights 侧边栏将 Lighthouse 的性能分析直接集成到 Performance 面板中,帮助开发者更高效地定位和解决性能问题。author Brendan Kenny
通过将 Lighthouse 的性能分析结果直接集成到面板中,提供更直观的性能问题定位和解决建议。
Insights 侧边栏会列出录制过程中发现的性能或用户体验问题,并允许开发者通过悬停或点击直接在高亮的时间轴上查看相关事件。文章详细说明了如何使用该功能,包括如何展开侧边栏、查看不同页面的性能分析结果,以及如何利用 LCP(Largest Contentful Paint)阶段分析来优化页面加载性能。
此外,文章还介绍了针对页面加载、响应性和布局稳定性等方面的具体分析功能,帮助开发者全面优化网站性能。
#优质博文 #前端 #UX #表单
Better form design: UX tips, tools, and tutorial
author Joe Bernstein
Better form design: UX tips, tools, and tutorial
AI 摘要:本文介绍了如何设计高转化率的表单。文章涵盖了表单设计的重要性、表单构成要素(操作、描述符、输入控件、反馈机制)、表单类型(简单表单、向导式表单、可导航表单)、十个表单设计最佳实践(简洁、清晰标签、避免只用占位符文本、分组相关字段、单列布局、有效处理错误、预防错误、启用内联验证、确保无障碍性、移动端优化)以及三个表单创建工具(Typeform, Zoho Forms, Jotform)的优缺点。核心要点在于:保持表单简洁明了,减少摩擦以鼓励填写完成,优先考虑无障碍性和包容性。
author Joe Bernstein
#优质博文 #前端 #css #背景 #渐变
CSS Bursts with Conic Gradients
author Chris Coyier
CSS Bursts with Conic Gradients
AI 摘要:介绍如何使用 CSS 的conic-gradient()
和repeating-conic-gradient()
创建条纹和爆发式背景效果。
文章首先回顾了使用 CSS 线性渐变(linear-gradient
和repeating-linear-gradient
)创建条纹背景的基本方法,并介绍了新的简化语法。接着,作者将这一概念扩展到圆锥渐变(conic-gradient
),展示了如何通过硬色停(hard stops)创建爆发式背景效果。文章还提到如何通过叠加径向渐变(radial-gradient
)调整中心区域,并参考了 Robinhood 首页的设计,探讨了如何通过更多渐变或 SVG 实现更复杂的动态效果。最后,作者鼓励读者尝试用@property
实现动画效果。
author Chris Coyier