我不知道的周刊第 15 期
Tremor - React仪表盘组件库
来源: tremor.so
Tremor 是一个基于 React 和 TailwindCSS 的仪表盘组件库，提供35+个开源组件和300+个模板，帮助开发者快速构建专业的数据可视化界面。
核心特点
- 开箱即用:精美的默认样式设计
- 简单易用:简洁直观的API设计
- 可访问性:基于Recharts和Radix UI构建
- 类型安全:完整的TypeScript支持
- 丰富模板:300+个专业模板和示例
组件类型
- 图表组件:折线图、柱状图、饼图等
- 数据展示:表格、卡片、列表等
- 过滤器:日期选择、范围滑块等
- 数据输入:表单、选择器、复选框等
- 布局组件:网格、卡片、分隔符等
技术特色
- React驱动:现代化的组件开发
- TailwindCSS:灵活的样式定制
- 响应式:完整的响应式支持
- 主题切换:支持亮暗主题模式
- 性能优化:高性能的图表渲染
这是一个备受欢迎的开源项目，得到了Vercel、Cal.com等知名公司的认可。它的设计理念是"我们已经处理好了像素，让你专注于数据"，帮助开发者快速构建专业的数据可视化界面。
Sink - 基于Cloudflare的短链接服务
来源: github.com
Sink 是一个完全运行在 Cloudflare 上的短链接服务，提供访问统计分析功能，支持 AI 生成短链和自定义短链，已获得3.1k+ stars。
核心功能
- 短链生成:压缩URL到最短长度
- 访问分析:监控链接访问数据和统计
- AI短链:使用AI生成智能短链
- 链接过期:支持设置链接有效期
- 自定义短链:支持个性化短链设置
技术特点
- Serverless:无需传统服务器部署
- 数据存储:使用Cloudflare KV
- 分析引擎:Cloudflare Analytics Engine
- 前端框架:Nuxt + Tailwind CSS
- UI组件:shadcn-vue组件库
部署方式
- Fork项目到GitHub
- 创建Cloudflare Pages项目
- 配置环境变量和KV存储
- 启用Analytics Engine
- 一键部署完成
这是一个完全开源的短链接服务，特别适合需要自建短链服务的开发者。它利用Cloudflare的基础设施，提供了高性能、低成本的解决方案，同时还包含了完整的访问统计分析功能。
Cult UI - 为设计工程师打造的组件库
来源: github.com
Cult UI 是一个专为设计工程师打造的组件库，使用 TailwindCSS 构建，完全兼容 Shadcn/ui，支持复制粘贴即用。项目完全开源，已获得1.6k+ stars。
核心特点
- 设计优先:精心设计的组件和交互
- 易于使用:支持复制粘贴直接使用
- 高度可定制:基于TailwindCSS的样式系统
- 类型安全:完整的TypeScript支持
- 兼容性强:与Shadcn/ui完全兼容
技术栈
- React:现代化的组件开发
- TailwindCSS:原子化CSS框架
- TypeScript:类型系统支持
- Framer Motion:流畅的动画效果
- Turborepo:monorepo工程化
使用场景
- 快速原型:快速构建产品原型
- 设计系统:构建团队设计系统
- 个人项目:个人网站和应用开发
- 商业产品:企业级应用开发
- 学习参考:学习现代组件开发
这是一个非常实用的开源项目，特别适合需要快速构建高质量UI的开发者。它的设计优先理念和易用性，让开发者能够专注于产品功能而不是组件开发。
UI Libs - Vue/Nuxt UI库选型工具
来源: github.com
UI Libs 是一个帮助开发者选择 Vue 3/Nuxt 3 UI 库的工具，通过交互式界面展示各个库的特性和组件支持情况，已获得430+ stars。
核心功能
- 特性筛选:通过功能特性过滤库
- 组件对比:详细的组件支持列表
- 实时更新:持续更新库的最新信息
- 交互体验:悬停查看特性说明
- 开源维护:社区驱动的数据更新
选型维度
- 组件完整性:基础组件支持情况
- 技术特性:TypeScript/SSR等支持
- 设计风格:Material/Fluent等风格
- 开发体验:文档/工具链支持
- 社区活跃:维护频率和社区规模
使用说明
- 悬停功能:查看特性详细说明
- 点击筛选:按特性过滤UI库
- 组件列表:查看每个库的组件
- 数据更新:通过PR提交更新
- 本地部署:支持自行部署使用
这是一个实用的UI库选型工具，通过可视化的方式帮助开发者更好地了解和选择适合自己项目的UI库。项目完全开源，欢迎社区贡献数据保持信息的及时更新。
Pretty TypeScript Errors - 美化TS错误提示
来源: marketplace.visualstudio.com
Pretty TypeScript Errors 是一个让 TypeScript 错误提示更美观、更易读的 VSCode 插件，已获得120万+安装量。它通过优化错误展示方式，帮助开发者更快理解和解决类型错误。
核心功能
- 错误美化:更清晰的错误信息展示
- 语法高亮:支持亮暗主题的类型语法高亮
- 类型跳转:快速跳转到类型定义位置
- 错误解释:集成typescript.tv视频讲解
- 翻译支持:集成ts-error-translator
支持范围
- Node/Deno TypeScript文件(.ts)
- JSDoc类型错误(.js/.jsx)
- React/Solid/Qwik(.tsx/.mdx)
- Astro/Svelte/Vue
- Ember/Glimmer模板
使用特点
- 一键安装:通过VSCode市场安装
- 零配置:开箱即用的设计
- 主题适配:自动适配编辑器主题
- 性能优化:不影响编辑器性能
- 广泛支持:支持主流前端框架
这个插件获得了JSNation 2023生产力提升类别的奖项，并得到了Kent C. Dodds、Matt Pocock等知名开发者的推荐。它的设计理念是让TypeScript错误提示更人性化，帮助开发者更快地定位和解决问题。
HTML to Design - 网页转Figma设计稿
来源: figma.com
HTML to Design 是一个强大的 Figma 插件，可以将网页或 HTML/CSS 代码直接转换成完整的 Figma 设计稿，保持原始样式和布局不变。
核心功能
- 网页导入:支持URL直接导入
- 代码转换:支持HTML/CSS代码转换
- 样式保持:完整还原网页样式
- 自动布局:智能转换为Auto Layout
- 组件生成:自动创建可复用组件
使用场景
- 网站重设计:快速导入现有网页
- 原型制作:将代码转为可编辑设计
- 设计系统:提取网页组件和样式
- 竞品分析:研究其他网站设计
- 协作效率:开发设计快速同步
技术特点
- 精确转换:保持像素级还原
- 响应布局:支持响应式布局
- 可编辑:转换后可自由编辑
- 高性能:快速处理复杂页面
- 免费使用:社区版完全免费
使用限制
- 层级问题:转换后的设计稿缺乏合理的图层组织
- 维护困难:由于缺少分层，后期编辑和维护不便
- 组件关系:自动生成的组件缺乏合理的层级关系
- 复杂页面:对于复杂布局的页面，可能需要手动调整
- 设计系统:不适合直接用于构建完整的设计系统
这个插件极大地提升了设计师和开发者的协作效率，让网页设计和开发之间的转换变得更加顺畅。它的出现解决了长期以来代码到设计的转换难题，是提升设计效率的得力工具。
Google代码评审最佳实践
来源: hitzhangjie.pro
这篇文章总结了 Google 内部的代码评审最佳实践，包括评审标准、流程和具体建议，对提升团队代码质量很有帮助。
评审标准
- 持续优化:保持代码质量不断提升
- 责任共担:Reviewer对评审过的代码负责
- 平衡取舍:追求改进而非完美
- 及时反馈:快速响应和处理评审意见
- 友好沟通:保持礼貌和建设性态度
评审重点
- 代码设计:架构设计是否合理
- 功能实现:代码功能是否符合预期
- 复杂度:实现是否足够简单清晰
- 测试覆盖:是否有完善的测试用例
- 命名规范:命名是否清晰准确
- 代码风格:是否符合团队规范
最佳实践
- 小批量提交:保持变更简单可控
- 清晰描述:写好变更说明
- 及时响应:快速处理评审意见
- 分批处理:合理拆分大型变更
- 保持礼貌:友好和专业的沟通
这篇文章不仅介绍了代码评审的具体操作指南，更重要的是传达了 Google 对代码质量和团队协作的理念。通过规范的代码评审流程，可以有效提升团队的代码质量和开发效率。
p5.js创意编程入门教程
来源: freecodecamp.org
freeCodeCamp 推出的 p5.js 创意编程教程，通过5个实战项目教你如何用代码创作艺术作品。课程由创意编程艺术家 Patt Vira 主讲，总时长2小时。
核心项目
- 交互式旋转方块:学习用户交互和动画基础
- 三角函数可视化:探索数学之美与图形绘制
- 3D动态文字:掌握3D空间和文字动画
- 动画花朵生成:学习循环和动画进阶
- 蒙德里安风格:实现生成艺术创作
技术特点
- 易于入门:专为初学者设计的API
- 交互性强:支持鼠标、键盘等输入
- 可视化:直观的图形和动画效果
- Web集成:完美融入HTML/CSS生态
- 扩展性好:支持高级功能定制
适用人群
- 艺术家和设计师
- 编程初学者
- 可视化开发者
- 创意工作者
- 教育工作者
这是一门非常适合入门创意编程的课程，通过实战项目的方式让学习者理解代码与艺术的结合。p5.js 的设计理念是"编程应该像素描一样自然"，这门课程很好地体现了这一点。
web.dev - Google官方Web开发学习平台
来源: web.dev
web.dev 是由 Google Chrome 团队推出的 Web 开发学习平台，提供了全面的前端开发课程，从入门到高级，涵盖了现代 Web 开发的各个方面。
核心课程
- HTML基础:从新手到专家的HTML指南
- CSS深入:从无障碍到Z-index的全面指南
- JavaScript:深入浅出的JS基础教程
- 性能优化:网页性能优化最佳实践
- PWA开发:现代渐进式Web应用开发
专题内容
- Web无障碍:构建无障碍的网站应用
- 图像处理:从格式选择到性能优化
- 自适应设计:响应式设计的各个方面
- 表单开发:提升Web表单开发技能
- 测试指南:软件测试的深入课程
特色优势
- 官方资源:Chrome团队维护和更新
- 实践导向:大量实际案例和最佳实践
- 多语言:支持包括中文在内的多种语言
- 免费开放:所有内容完全免费
- 持续更新:定期添加新的内容
这是一个由 Google 官方维护的高质量学习平台，特别适合想系统学习 Web 开发的开发者。它的内容涵盖了从基础到高级的各个主题，并且始终保持与最新的 Web 技术同步。
Bizarro - 创意技术专家作品集
来源: bizar.ro
Luis Bizarro 是一位专注于 WebGL、着色器和 JavaScript 的创意技术专家，目前在 Apple 工作。他在创意开发领域有超过十年的经验，作品涵盖网站、游戏、交互装置等多个领域。
代表作品
- Apple Vision Pro:开发实时体验工具
- Apple 3D Viewers:iPhone 15和MacBook Pro的3D展示
- Xbox Museum:3D场景和交互功能开发
- YouTube Tarot:塔罗牌选择和动画效果
- Adventure Time:游戏交互和动画开发
- WebGL作品集:获得多个Awwwards奖项
合作品牌
- 科技品牌:Apple、Google、Microsoft、Samsung
- 时尚品牌:Nike、Ambush、Peggy Gou
- 媒体娱乐:HBO、Cartoon Network
- 其他领域:Airbnb、Lufthansa、Shell
技术专长
- 实时3D:WebGL和着色器开发
- 交互设计:用户界面和动画效果
- 创意编程:JavaScript和前端技术
- 3D建模:场景和模型制作
- 性能优化:实时渲染优化
这是一个展示了现代网页技术艺术性的个人网站，作者通过一系列高质量的商业项目，展示了WebGL和创意编程在实际应用中的无限可能。