TinyPNG-图片压缩
TinyPNG的原理是将 PNG24位真彩色图片 压缩成 PNG8位索引图片，从而做到基本不损失画质和观感，但是并非完全意义上的无损，TinyPNG压缩图片时确实略有信息数据的损失，只是感官上很难察觉到显著的画质降低。
使用方法很简单，把需要压缩的png或jpg格式的图片拖到网页中即可，一般的png图可压缩到50%以上。
Can I Use-兼容性查询
这是一个检测浏览器对JS、HTML5、CSS、SVG或者其他Web前端相关特性支持程度的列表。可以检测的浏览器包括桌面和移动版的主流浏览器：IE, Firefox, Chrome, Safari和 Opera等。
Iconfont-矢量图标库
阿里巴巴旗下的图标库网站。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
草料二维码-二维码生成器
功能齐全且强大的二维码美化系统，加logo、加背景、加前景、换样式、调码眼，并可保存成模板重复使用。还有专为chrome核心的浏览器开发的工具插件，自动将地址栏链接生成二维码。
CodePen-代码编辑
CodePen提供了一个浏览器内编码环境，专为学习编码和快速原型创作而设计。它经常被用来展示网站的demo，同时它也是学习前端开发基础知识的好地方。
Tridiv-CSS 3D图形编辑器
利用最新的CSS技术，配合支持的浏览器，可以轻松的在线创建、浏览并保存管理Web3D图像。Tridiv是一个基于 Web 的免费编辑器，使用 CSS 创建 3D 图像，直观且容易操作，不需要多余的教程即可轻松上手，并且可基于Local Storage保存管理你创建的3D图像。
Regulex-正则表达式解析和可视化工具
Regulex是一款JavaScript正则表达式解析和可视化工具。通过该工具可以对任何正则表达式进行解析，并以可视化图表的显示显示该正则表达式的解析流程结构，还可以将图表导出为图片。
Ultimate CSS Gradient Generator-渐变背景色设计
http://www.colorzilla.com/gradient-editor/
支持新增删除颜色节点，支持选取颜色，支持改变角度，支持随机生成渐变色，还提供了默认的一系列渐变色供选择。
cubic-bezier-贝塞尔曲线调试
赋予transition-timing-function不同的值可以制作不同的动画效果，结合cubic-bezier，我们可以做出更多表现的动画。cubic-bezier可以用来在线调试立方贝塞尔曲线，预览动画效果。
Clippy – clip-path 裁剪路径
http://bennettfeely.com/clippy/
clip-path是 CSS 中的一个裁剪属性，用于裁剪元素，通过此属性可以实现类似PS蒙版一样效果。Clippy 是一个 CSS clip-atch 属性绘制工具，使用它可以轻松绘制不同的几何形状。
