关于前端的工具

Mahdhi Rezvi 原作，翻译转载自 New Frontend 。

1、EnjoyCSS
EnjoyCSS 提供了一个简单的交互界面，帮助我设计元素，然后自动输出相应的 CSS 代码。适用于开发简单页面时使用。

2、Prettier Playground
Prettier 是一个代码格式化工具，支持格式化 JavaScript 代码（包括 ES2017、JSX、Angular、Vue、Flow、TypeScript 等）。

3、Postman
测试后端 API 接口。

4、StackBlitz
可以在线尝试一些样例代码或者库。

5、Bit.dev
分享可重用的组件和片段，降低开发量，加速开发进程。

6、CanIUse
可以方便地查看各大浏览器对某个特性的支持程度。

作者：凉皮 来源：转载于麻瓜编程公众号

7、CSS Battle
在线比拼 CSS

8、Learn CSS layout
在线CSS布局学习

9、Flexbox Froggy
学习 Flex 布局的小游戏

10、CSS-Tricks
CSS 技巧

11、Neumorphism
实现新拟态效果

12、uiGradients
分享渐变色

13、JavaScript 秘密花园
JavaScript 的语法文档，如何去避免一些常见的错误，以及找到很难发现的 bug ，比较深入 JavaScript 的语言特性。

14、JS Tips
每天一个 Javascript 小知识。

15、JSweekly
专门讲解 Javascript 的技术周刊。

16、CDNJS
JavaScript 资料库

17、Beautiful Open
开源 JS 库集合

18、JavaScript Fun
一个集合当下最流行的 JavaScript 代码库，显示流行排行，开发者可以轻松的找到想要最新的代码插件、工具和博客。

19、Stack Overflow
全球IT界最受欢迎的技术问答网站之一，一个解决 bug 的社区，称为“ 编程界的十万个为什么 ”。

20、掘金
掘金技术社区是质量很高的技术分享社区，技术大牛和极客们共同编辑筛选的优质干货，这些技术文章包括Android、iOS、前端、后端资源。

21、Codrops
发表技术文章和网页教程，提供经验，少踩坑，资源丰富很丰富，很多优秀的技术都是从这里来的。

22、CodePen
一个网站前端设计开发平台，针对网站前端代码的一个工具，上面有各种效果的案例特效（炫技），可以在他们的 demo 基础上开发自己的前端设计。

23、CodeSandBox
CodeSandBox 网站提供一个在线开发环境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即开即用、实时编译预览，非常方便。

24、JS Bin
轻量级在线编辑器网站

25、ICONSVG
在线自定义设计SVG图标素材

26、OpenMoji
免费表情符号库

27、Share Icon
免费矢量素材图库

28、tableconvert
在线表格编辑器

29、Feathericons
极简 ICON 图标集

30、HTML5 + CSS 3 免费模版
提供大量的HTML5模版，用户可以自己分享和修改模版。

31、Cool Backgrounds
炫酷背景生成器

32、Alteredqualia
网页端 3D 效果合集

---

相关资料
推荐|六个好用的前端开发在线工具
不可错过的实用前端工具
4 个程序员拯救设计的网站，太惊艳了！