Wappalyzer 是一个用于识别网站使用的库和框架的工具。它也是一个 Chrome 插件，是目前为前端开发人员最有用的工具之一。下一次你想知道一个网站使用什么库，来创建一个特定的可视化功能，Wappalyzer 帮你搞定。

字体是设计中相当重要的组成部分，而这个工具就是能帮你找到，当前网站用的什么字体。这是个 chrome 插件，只需要简单的点击一下即可出现字体的详情。

前端开发人员工作时，经常需要查询或调用 API 。Postman 是一个方便的工具，可以帮助你向API发出请求。当开发人员需要调试一个网页是否运行正常，并不是简简单单地调试网页的 HTML、CSS、脚本等信息是否运行正常，更加重要的是网页能够正确是处理各种 HTTP 请求，毕竟网页的 HTTP 请求是网站与用户之间进行交互的非常重要的一种方式，在动态网站中，用户的大部分数据都需要通过 HTTP 请求来与服务器进行交互。

Postman 插件就充当着这种交互方式的“桥梁”，它可以把各种模拟用户 HTTP 请求的数据发送到服务器，以便开发人员能够及时地作出正确的响应，或者是对产品发布之前的错误信息提前处理，进而保证产品上线之后的稳定性和安全性。

程序员客栈是领先的程序员自由工作平台，倡导未来互联网企业的用人方式。您可以点击下方链接了解并联系：程序员客栈-领先的程序员自由工作平台​www.proginn.com

程序员客栈可以帮助技术开发者精准匹配你所擅长的领域的项目，帮助你开展副业，甚至帮助你实现全职的远程工作，并且获得可观的收入。

一、素材类网站

Unsplash是一个分享免费高质量照片的网站，照片分辨率都挺大，而且都是真实的摄影师作品，图片多是风景和静物。

二、配色类网站

这个网站给我们提供了很多的配色方案，我们直接使用就OK了。使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色到工具里就可以使用了。

这个是Adobe公司出的，他提供了多种配色方案。我们点击圆盘中间的点，就可以调整出我们想要的配色方案。

这是一个提取现有图片配色方案的工具。我们上传一张图片，它就会帮我们把图片的配色提取出来供我们使用。

这个网站是为WEB设计，开发中经常用到的安全色。网站内列出了颜色的十六进制码和RGB码，复制粘贴就可以了。

这是一个在线RGB和十六进制颜色码转换工具。在对应的位置填入十六进制代码，点击转换，我们就可以获取到RGB颜色的代码了。

三、图标类网站

这是阿里巴巴旗下的图标库网站，直接搜索关键词就可以找到大批的图标。下载图标的时候我们还可以选择颜色、大小、格式，根据自己的需要下载就好了。

这也是一个非常有名的图标库，与上面那个不同的是，这里的图标不是单一颜色的，而是设计好的颜色。下载图标也很简单，直接点击对应图标上面的格式就可以下载。

奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。

四、字体类网站

五、工具类

JavaScript 库/框架

JavaScript是全世界最受欢迎的Web编程语言。人们为了快捷开发网站或应用预先编写一些JS类库。你可以通过一些公用CDN很方便地在自己的网站上引入这些库：

jQuery: 方便快捷，功能强大全面，居家旅行必备，近乎JS的替代品，你可以不会js，但是不能不会jQuery。

BackBoneJS: 模型、视图、集合、事件，让你的前端代码更有框架感。

D3.js: 数据可视化必学必会，只有你想不出来的，没有D3画不出来的。

React: 学会React，再学学React-native，你就能从一个前端化身Web app工程师、IOS/Andorid开发者、桌面应用工程师……

jQuery UI: 几行代码就能写一个带动画带ajax的Web应用。

jQuery Mobile: 移动端专用js开发框架，和上面的类似。

Underscore.js: 非入侵式框架，提供了众多有用的函数方法，弥补jQuery的不足。

Moment.js: 原生的JS显示输出日期时间真的很痛苦，Moment为你解决了一切啦～

Lodash: 模块化且高效，lodash和underscore很相似。

前端框架Bootstrap: 全世界最流行的响应式前端框架。

Foundation: 提供了很多模版，针对网站、移动端、邮件提供了很多好用的模块和样式。

Semantic UI: 个人非常喜欢的一个前端框架，样式非常好看，更重要的是就像它语义UI的名称一样，类命名特别友好，写网页就像和人说话一样。

uikit: 漂亮、可定制，即将发布uikit3版本，感兴趣可以试试看。

Web应用框架Ruby on Rails: Ruby on Rails 是一款用ruby语言编写Web应用的MVC框架，github就是用它写的！

AngularJS: Google主导的Web开发框架，数据绑定、MVVM，很可惜被后来更灵活的React、Vue等框架抢去了风头。

Ember.js: 用来开发单页Web应用的JS前端MVC框架。

Express: Node.js上的Web框架，搭建网站或API服务只要一秒钟！

Meteor: JS全端框架，是的，你只需要学习JavaScript一门语言，就可以完成Web应用前后端、数据库的开发。

Django: Python的Web框架，人生苦短，请用Python.

Flask: Python的Web框架，据说只要学好flask就能随意找到好工作？

ASP.net: 老一辈人的最爱。

Laravel: 最优雅性感的PHP Web框架，好用到不能再好用，优雅到不能再优雅，毕竟PHP是全世界最好的语言嘛。

Phalcon: 用C语言扩展的，据说是最快的PHP框架。

自动化构建/包管理

Grunt: JavaScript自动化工具。

Gulp: 个人感觉是最好用的自动化构建工具。

webpack：模块化加载构建一切，CSS/JS连图片都可以

npm: NPM虽好，但不要太依赖。

Bower: 前端框架包管理工具，各类框架和库一键安装。

编程语言PHP: 全世界最好的语言不解释。

NodeJS: 可以运行在服务器端的JS，只需学习一门语言即可全栈编程。

Javascript: 日益强大的脚本语言，现如今学前端基本就是学JS编程。

HTML5: 网页的标记语言。

Python: 人生苦短，请用Python。比好用更好用。

Ruby: 简洁高效，学Ruby基本就是为了学用rails

Scala: 兼容函数式、面向对象、命令式编程，可以和JAVA互通。

CSS3: 网页的样式。

SQL: 操作数据库必学。

Golang: Google出品，简单易用。

Rust: 高效高性能，保证线程安全，防止声明错误。

Elixir: 开发扩展可持续的应用的动态函数式语言。

数据库MySQL: 开源免费性能好，全世界都在用它。

MariaDB: 日趋流行起来，同样由MySQL的开发者创造的数据库。

MongoDB: 非关数据库，通常在MEAN/MERN架构中使用。

Redis: 提升应用数据访问性能，内存读写并可持久化储存的数据库。

PostgreSQL: 功能强大完整，兼容数据类型丰富，并且开源免费。

CSS预处理器Sass: CSS的扩展，可以声明变量，引入模块，嵌套属性等等。

Less: 为CSS添加声明变量，样式模块，命名空间，继承等特性。

Stylus: 写CSS再也不用写烦人的括号啦～

代码编辑器Atom: Github的发明，基于Web技术开发，漂亮又好用。

Sublime Text: 最性感的代码编辑器，你会因为爱上一款编辑器而爱上写代码。

Notepad++: Win平台下开源好用的代码编辑器，不需要装什么插件就已经很棒啦。

Visual Studio Code: 很多人也推荐并且喜欢用VS Code这款微软出品的编辑器。

TextMate: OSX上的一款比较火的编辑器。

Coda 2: OSX平台，你可以在这款编辑器里写代码、连接远程FTP/SSH/数据库，还能查询手册，代码方法快捷查询等等，一款编辑器满足你写网站的所有需求。

WebStorm: JS开发利器。

Vim: Vim是编辑器里神一般的存在。

Brackets: Adobe公司出品的一款编辑器，预览功能很不错。

Emacs: 也有很多人喜欢支持Emacs啦。

Markdown编辑器StackEdit: 一款在线Markdown编辑器。

Mou: Mac上一款非常棒的Markdown编辑器，不过据说作者重酬之后携款跑路了？

ulysses: 很棒的一款Markdown写作软件，可以生成为任何格式。

图标库

版本管理应用SourceTree: 最好用的Git图形化客户端。

GitKraken (Beta): 一款免费好用的全平台Git客户端。

Tower 2: 界面很好看。

GitHub Client: Github官方桌面客户端。

Gogs: Go语言开发的可以自主搭建的开源托管平台。

GitLab: 免费的私有项目Git托管。

本地开发环境XAMPP: 免费的 MariaDB, PHP, and Perl软件集合安装包。

MAMP: 提供Mac上PHP开发运行环境。

WampServer: Windows 下最好用的包含 Apache2, PHP MySQL 的开发运行环境。

Vagrant: 虚拟机软件。

Laragon: 喜欢Laravel的话，用这个最棒咯。

代码差异检查Diffchecker: 一款在线的检查代码异同的小工具。

Beyond Compare: 检查代码修改差异的软件。

在线编程JS Bin: 在线编写并运行HTML/CSS/JS网页代码。

codeshare: 实时和其他开发者共享你的代码。

Dabblet: 交互测试HTML/CSS代码。

Cloud9: 一键创建在线开发环境，完整的服务器操作命令行，代码在线编辑，项目在线运行，还可以分享链接给他人预览，最重要的当然还是免费不要钱啦。

协作工具Slack: 团队通信应用。

Teambition: 号称最好用的团队协作工具。

Worktile: 一站式企业协同管理平台.

交流社区CodePen: 在线分享编写你的前端代码，推荐！

Dribble: 设计师分享社区，灵感的源泉。

Web性能测试

Web开发社区

上面工作向的生产力工具介绍完了，下面在介绍两个娱乐向的生产力工具。舒适的工作环境有助于提升效率。

Boom for Mac，可以有效地提高苹果操作系统的音质，具有各种音效增强工具，比如提高系统的音量，改善语音聊天或者音乐播放的音效等，同时 Boom Mac 还具有加大音频文件音量的功能。比如下载的音乐音量太小，可以使用 Boom Mac 处理后再同步到苹果设备中。

很多创意工作者喜欢咖啡店的氛围，http://Noiz.io(有 mac 和 iOS 版本)可以让你的拥有这种氛围，可以调节出咖啡店，雨天，雷电和海浪的感觉。

我的其他相关回答：