前端
共 70 条资源
在线跑完整前端项目：CodeSandbox 开箱即用，不用配环境
想试一个 React 组件库、跑一个别人的开源 demo，本地环境要装 Node、装依赖、配构建工具，一晚上就过去了。在线 IDE 点了就跑。
一个图标六种轻重：Phosphor Icons 开源免费，风格弹到最细
界面的视觉密度是变化的：大屏设计稿里图标可以细一点，密集的移动端工具栏就得粗一点。Phosphor Icons 让同一个图标有六种「轻重」可选。
Google 官方图标：Material Symbols 免费，还能调粗细和圆角
谷歌的 Material 图标经历了三代，现在的 Material Symbols 是可变的：粗细、字号、圆角、填充程度都能通过参数调，一个图标能演化出很多种长相。
品牌图标不用手绘：Simple Icons 收录 3000+ 品牌标识，CC0 授权
做「分享到微信」「关注我们」这类模块时，最难的不是排版，是找到风格一致、又不会画歪的品牌标识。Simple Icons 把主流品牌与平台的标识统一重绘了一遍。
网站图标一键生成：favicon.io 从文字、图片或 Emoji 出全套尺寸
给站点配 favicon 看似小事，实际要出 16×16、32×32、180×180、192×192、512×512 好几个尺寸，还要一个 ico 文件。手工切图很烦，生成器一…
写页面时先占位：Lorem Picsum 一行网址就出图，免费无限制
做页面时，图片还没到位是常态。占位图服务让「先搭结构、后填素材」这件事变得很轻：改一下 URL 里的尺寸参数就能拿到一张图。
这个特性到底能不能用？Can I use 查浏览器兼容，一目了然
用了一个新 CSS 特性，上线后用户反馈页面错乱——原因是他的浏览器不支持。写前端之前先查兼容性，是能省掉大量返工的几秒钟。
SVG 太大太重：SVGOMG 在线压缩，去冗余还不动画面
设计软件导出的 SVG 里，往往只有一小部分是真正画图用的路径，其余是编辑器元数据、无用分组、精度过高的坐标。压缩工具能把体积砍掉一大半。
跨浏览器兼容测试：Browserling 在线开各版本浏览器，免装虚拟机
页面在 Chrome 上好好的，在旧版 Safari 或某些国产浏览器内核上就错位。手工装一堆浏览器和虚拟机能累死人。
做深色模式配色不再瞎调：Radix Colors 开源免费，明暗同步设计
做深色模式最难的不是把背景改成黑色，而是让所有颜色在深色底上都还能看。Radix Colors 的每套色板都同时提供了浅色与深色两个版本，且逐档对应。