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

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#前端 #新动态 #shadcn #组件库
shadcn 推出 shadcn/create,可以打造专属的 shadcn/ui
立即体验:访问 https://ui.shadcn.com/ 点击 +新建项目

https://fixupx.com/i/status/1999530424234643716

shadcn (@shadcn):隆重推出 shadcn/create – 打造专属的 shadcn/ui
全面定制。自由选择组件库、图标、底色、主题、字体,打造与众不同的视觉体验。
现已支持 Next.js、Vite、TanStack Start 及 v0 版本。

从最初的提交开始,shadcn/ui 的目标就是为您提供可靠的默认设置:间距、颜色标记、动画效果、无障碍支持,让您在此基础上自由发挥。
调整代码。添加新组件。更改颜色。
借助 npx shadcn create,这一切变得更加轻松。
从组件库开始:Radix 或 Base UI。
我们为Base UI重构了所有组件,保留相同抽象层级。它们与现有组件完全兼容,甚至支持远程注册库中的组件。
添加组件时,我们会自动检测库类型并应用对应转换规则。
同时新增5种视觉风格,助您打造独特设计:
1. Vega——经典shadcn/ui风格
2. Nova——紧凑布局的缩减间距
3. Maia——柔和圆润,间距充裕。
4. Lyra——方正锐利,与单线字体完美搭配。
5. Mira——紧凑型,专为高密度界面设计。
这远不止主题切换。
您的配置不仅改变颜色,更会重写组件代码以匹配设置。字体、间距、结构乃至所用库,一切皆可适配您的偏好。
全新命令行工具将自动完成所有配置。
立即体验:访问 https://ui.shadcn.com/ 点击 +新建项目
特别鸣谢 @base_ui 团队打造的卓越组件库。他们的成果让我们得以在保持抽象层完整的前提下轻松构建所有内容。意义重大。
The Foundation for your Design System - shadcn/ui
#优质博文 #前端
1. 宣布推出 TypeScript 5.8 —— 经过四个月的发展,TypeScript 5.8 以 Node 为重点。您现在可以在 nodenext 模块中对 ES 模块使用 require() ,对于希望继续以 Node 18 为目标的开发人员,有一个新的 node18 模块,最值得注意的是,现在有一个 --erasableSyntaxOnly 选项来确保不能使用仅限 TypeScript 的运行时语义(如果您使用 Node 的类型剥离功能直接运行 TypeScript 代码,则这是理想的选择) #typescript #node (机翻)
2. 使用 Playwright 进行动态网页数据抓取
本文通过 YouTube 案例,介绍如何利用 Playwright 工具解决动态网页(依赖 JavaScript)的数据抓取问题。
文章首先指出传统基于 Cheerio 的静态网页抓取工具无法处理动态渲染内容的问题,提出使用 Playwright 的浏览器自动化方案。 文章包含详细的代码片段和配图说明,重点展示了 Playwright 的 Locators API 和浏览器上下文操作能力,最终实现动态加载视频数据的结构化抓取。 #WebScraping #javascript #网页抓取 #教程


3. 具有现代依赖项的 Electron 应用程序样板 —— 一个基本的模板应用程序,使用 React 19、Tailwind CSS 4、shadcn/ui、Electron Vite、Biome,并包括 GitHub Actions 发布工作流程。 #template #tailwind #shadcn

via Node Weekly 568 Announcing TypeScript 5.8
#前端 #工具推荐 #浏览器插件 #tools #tailwind #shadcn #color
CSS Variables Editor —— CSS Variables Editor 是一款浏览器扩展,旨在简化 CSS 变量中颜色的管理。 其主要功能包括:

- AI 生成的色彩方案:通过集成 OpenAI 或 Anthropic API,快速生成并在实际应用中预览色彩方案。

- 无障碍测试:根据 WCAG 指南检查色彩对比度,确保设计的可访问性。

- 实时颜色编辑:直接在浏览器中修改 CSS 变量的颜色值,实时预览更改效果,提升设计与代码的协作效率。

- 支持 daisyUI 和 shadcn/ui:提供官方文档中的颜色描述,确保在应用中正确使用,并避免忽略弹出框、聚焦环等状态的设计。

- 导出更改:支持导出修改后的 CSS 变量,遵循 Tailwind 的推荐实践。

该扩展可从 Chrome 网上应用店安装,适用于设计师和开发者,提升设计系统中颜色管理的效率。
 
 
Back to Top