那些写代码就是比别人快，比别人好的人，原来手里多多少少都知道一些别人不知道的编程技巧或工具资源。
而善用工具就是能够提高你的开发效率，大幅减少996的时间。
接下来，拿出压箱底的前端必备资源，赶紧收藏起来，你一定用得着！
1. github
地址：github.com
当之无愧的开源网站之首。
当你在朋友圈、微博闲逛打发时间的时候，大佬们却在逛 github，每天上班的时候打开 github，看看最新的开源项目，学习优秀开发人员的编程技巧，日积月累，差距就会越来越大。
每天都逛逛 github，看看前端那些知名的项目：ant design、vue、react 或者是每天学习一个 lodash 函数，看看那些小而美的开源库，了解前端社区正在发生什么，什么在流行，久而久之，技术会越来越精进的。
tips: 阅读 github 项目代码时，可以在进入项目的首页后，点击 . 按钮来打开一个类似 vscode 的在线编辑器哦。
2. Undraw
免费好用的 svg 图片资源。
在这里你可以很方便的找到适合用于背景、缺省页、404状态等地方的 svg 图片资源，并且都是免费下载的。
如果你对图片的颜色不满意，还可以在线调整图片的颜色，然后再下载下来。
当你开发一个项目，又苦于找到好用的 svg 图片资源的时候，Undraw 非常适合你。
3. IconFont
阿里妈妈出品，图标集大成者。
图标是前端开发中必不可少的资源之一。iconfont 提供了多种类型的精美图标，几乎没有你找不到的图标，你还可以上传自己的图标和 iconfont 上的图标整合起来一起使用。
官方提供了 Unicode、Font Class、Symbol 3种图标类型供你使用。
除了下载到本地使用外，还有在线 CDN 的使用方式。
现如今，图标库已经和前端项目结合得很好，有很多种方式能够很方便的在项目中运用。快去看看吧，打造一个你自己的图标库。
4. iconpark
地址：iconpark.oceanengine.com/home
字节跳动推出的图标库。
多达 2600 个图标的官方图标库，还支持在线调整图标的诸多细节，更棒的是，这些图标都是免费可直接商用的。
5. stackblitz
在线运行 github 项目。
当你看到一个优秀的 github 前端项目，想要运行起来查看效果，以前的是需要这么做：下载项目代码->安装依赖->运行。现在的你只需要：访问网址 stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}，就能直接在线运行。
比如：stackblitz.com/github/ant-…
类似的在线运行平台还有：gitpod.io，比如：gitpod.io/#/https://g…
6. uigradients
CSS 渐变利器。
想设置好看的渐变效果却不知该配置什么颜色？试试这个网站。这里提供了多个美观的渐变效果，还贴心的给出了 css 代码，这些渐变组合既能用于背景渐变，也能用于文字渐变，快去试试吧。
7. canva
地址：www.canva.cn
经常拿来制作文章的封面图。
看看别人文章吸引人的封面图，再看看自己的，惨不忍睹。这时候你就很需要这个网站了，制作文章封面信手拈来，大 V 们都在偷偷用。
8. codepen
地址：codepen.io
在线编程。
css、javascript、vue、react，这些统统都能直接在线编写和在线编译。还能学习别人的优秀 Demo。这个网站有太多值得称赞的地方了。
在 codepen 中寻找 css 的开发灵感是真的不错！
9. mastergo
地址：mastergo.com
UI/UX 设计工具。
不懂设计的前端不是一个好前端。
原型制作、UI设计都可以在这里完成，资源广场还有大量的优质可直接使用的设计资源。官方每天会提供跟练教程，对 UI 设计感兴趣的不妨一试。
10. mdnice
markdown 写作必备！
如果你用 markdown 来写文档，这个网站你必须要知道，如果你还没有用 markdown 来写文档，这个网站你必须要知道。
能够对 markdown 编写的文章进行美化的文档利器，让你的文档看起来更漂亮；支持一键复制到微信公众号、知乎等多个平台。
