个人Web工具箱&资源整理（1） - Qboooogle

公告

个人Web工具箱&资源整理（1）

很久就想把使用的工具及收藏的资源整理一番；一是为了传达博客社区的理念：资源共享，而是方便自己及团队快速获取。

学习资源：

首推两个入门级在线参考网站。

1 w3c school.

2 Runoob.com(菜鸟教程）。

HTML5：标记语言，是HTML和XHTML的最新版本。

HTML5 Outliner HTML5在线生成。

模板：

jade:Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。

jade API:运行在Nodejs上的模板工具。

CSS： CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS的最新版本。

CSS3：
Bootstrap CSS样式。

CSS 预处理器：

Less: Lesscss是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

Less-css中文网:LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
Less:在线编辑器：LESS2CSS

Sass: Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

JavaScript ：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言.

文档(document):英文文档。
Javascript秘密花园: 这篇文章的作者是两位 Stack Overflow 用户, 伊沃·韦特泽尔 Ivo Wetzel（写作）和张易江 Zhang Yi Jiang（设计）。
Javascript小插件下载。
JavaScript与HTML代码美化平台：JSbeautifier

Javascript库：

jQuery：快y速，小巧，功能丰富的JavaScript库。
- jQuery: 最火的前端开发框架。
  - C在线工具： jQuery插件在线演示。
  - 　 jQuery++:jQuery插件。
  - 　 jQuery UI:jQuery ui库。
  - jQuery Mobile:支持移动端的开发框架。
  - 　 jQuery API ：jQuery　API中文文档。
  - 　　　jQuery在线手册：
  - 　　　 jQuery视频教程：jQuery入门级教程。
  - 基于jQuery，非常好用的日期选择插件：Pickadate.js
zepto :Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库， 它与jquery 有着类似的api。如果你会用 jquery，那么你也会用 zepto。
Three.js:
Ember.js:
BackBoneJS：为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。
D3.js：D3是基于数据的文档操作javascript库,D3能够把数据和HTML、SVG、CSS结合起来,创造出可交互的数据图表。
React:：Facebook的Javascript库为构建用户界面而开发。
jQ uery UI：jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。
jQuery Mobile：基于HTML5用于创建移动 web 应用程序的框架。
Underscore.js：JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。
Moment.js：一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。
Lodash：一个 JavaScript 实用工具库,提供一致性,模块化,性能和配件等功能。
Vue：Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Angularjs:

Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

Nodejs入门：菜鸟教程。
Express:
Express API :Express 4.x 中文API。

SQL： 结构化查询语言(Structured Query Language)简称SQL，是一种特殊目的的编程语言，是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统；同时也是数据库脚本文件的扩展名。

前端框架：通俗的前端由HTML，CSS，JavasScript等构成。当然为了适应Web开发日益增长的需求，应运而生许多独立的前端框架，例如Bootstrap。一个优秀的框架可以为前端开发人员在开发过程中增益，减小开发压力。

Bootstrap: Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷，Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
- Bootstrap中文文档：Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
- 在线编辑器：
        1 ：Bootply ：被称为是Bootstrap的活动平台。它不但是一个Bootstrap的编辑器和生成器，同时也拥有非常广泛的代码库。该编辑器可以让你拖拽Bootstrap组件并可以编辑你自己的代码。

         2：LayoutIt：是一个简单但是高效的Bootstrap界面生成器，它可以让你的前端开发更简单。你可以从零开始或者使用基本的模板开始。

         3：Brix ：是一个强大而且时尚的在线Bootstrap生成器，它能够帮助你快速的制作响应式界面和网站。

      4：Divshot：不仅仅是一款可视化的Bootstrap编辑器，同时也为开发者提供一个应用级托管环境。
Foundation：迄今为止最好的响应式前端框架，更快、更轻、更多功能、更灵活、更强大！
Semantic UI：Semantic UI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
uikit：UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式界面。

数据库：

MySQL：MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。
MongoDB:MongoDB 教程 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。

素材下载：

17素材：
CSS 样式模板。

Web APP:

Ionic(ionicframework):一款接近原生的Html5移动App开发框架，基于angularjs与Coedova实现APP开发。

Ionic (官网）:IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从 web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

任务批处理工具/包管理器：

任务批量处理工具可将你的工作流程全自动化.例如你可以创建一个任务，使用JavaScript语言编写的工具来进行自动化的处理。然后打包，这样会大大提高开发效率。包管理器它能跟踪所有已安装的软件、自动化进行安装和删除应用程序、以及确保所有软件都保持更新以获得最新的增强功能和错误修复。

Grunt: Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。
Glup: Gulp.js 是基于 Node.js 构建的一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
npm: NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。
Bower: Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。
Webpack: Webpack一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

开发工具：

Atom：Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器在代码编辑器、文本编辑器领域,有着不少的「神器」级的产品。
Sublime Text：Sublime Text 是一个代码编辑器（Sublime Text 2和3是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。
Notepad++：Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能。
Visual Studio Code ：微软推出，一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
TextMate：TextMate是Mac下的著名的文本编辑器软件，与BBedit一起并称苹果机上的emacs和vim。
Coda 2: OS X下快速，简洁，功能强大的编辑器【需要付费】.
WebStorm：jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。
Vim：Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。
Brackets：Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。
Emacs：著名的集成开发环境和文本编辑器。Emacs被公认为是最受专业程序员喜爱的代码编辑器之一。

icon图标： 在线透明icon图标生成工具 ICO。

Font Awesome：Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
IconMonster：免费，高质量, 庞大且资源不断增长的简洁的icon图标库。
IconFinder：Iconfinder提供美丽的图标,服务数以百万计的设计师,开发商和其他有创意的专业人员。
Fontello：一个目测有200+个图标（数量还在增加）的 Web-font 图标市场，对于广大设计师、前端开发者来说是很棒的资源。
阿里妈妈矢量图标库：Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中
iconpng：图标下载。

调试器：

firefox,
Chrome调试器，
nodejs运行环境。

代码托管：

github

版本控制：

git Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

GitHub Client：有助于无缝连接GitHub和GitHub的企业的项目。
Coding：Coding 的代码托管功能除了基本的 Git 仓库以外，还有保护分支，分屏对比， Code Review 等高级功能。并且整合了 Pages 服务，质量管理，演示平台等开发工具，提升研发效率。

本地开发环境搭建：

根据您运行的是什么操作系统和计算机配置，有时候进行测试的时候就有可能需要搭建一个快速的本地开发环境。有很多将Apache，Nginx，MySQL和phpMyAdmin进行打包一体化的软件。这些软件很是方便我们来进行本地测试。

XAMPP：XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。
MAMP PRO：MAMP Pro for mac是Mac OS平台搭建本地服务器环境的组合软件套装,包含 Macintosh、Apache、MySQL和PHP 四大开发环境。
WampServer：Wamp就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。
Vagrant：Vagrant是一个基于Ruby的工具，用于创建和部署虚拟化开发环境。它使用Oracle的开源VirtualBox虚拟化系统，使用 Chef创建自动化虚拟环境。
Laragon：Laragon工具就是Laravel的一键安装工具吧，还集成了一整套wamp工具，除去Laravel安装外，它也是一款不错的wamp工具，干净简单，便捷迅速。Diff Checkers
Wnmp：WNMP是Windows下便捷，安全的Nginx+MariaDB+PHP开发环境环境集成套件包。

文本对比差异：

Diffchecker：Diffchecker 是一款非常好用的在线文本对比工具,能够高亮显示有差异的行和字符。Diffchecker 提供了文件上传对比功能,还可以选择对比的存储时间。
Beyond Compare：Beyond Compare是一套由Scooter Software推出的软件，主要用途是对比两个文件夹或者文件，并将差异以颜色标示。

代码共享：

JS Bin：JS Bin能够让你编辑和测试JavaScript和HTML代码。你还可以将编辑后的代码保存到本地,或将URL地址发给其他人,让其协助调试代码。JS HTML CSS 在线演示
JSfiddle：jsFiddle是一个在线的shell编辑器,通过流行的JS框架创建自定义的环境,以简化JS代码。可以用于测试示例代码。
codeshare：与其他开发者实时共享代码。
Dabblet：Dabblet是一个开源互动测试工具,用于测试CSS和HTML。Dabblet支持实时更新、匿名备份、嵌入网站、与他人共享或者存储到GitHub。

在线演示：

1：JS Bin

如下图所示：（非常方便与别人共享代码，且能实时看效果，本人就非常喜欢）

JS HTML CSS在线演示2 :Liveweave

如下图（界面非常漂亮，简洁，强迫症一定爱不释手）

JS HTML CSS 在线演示3：Plunker

如图所示：功能超级强大

协助工具：

Slack：Slack 是聊天群组 + 大规模工具集成 + 文件整合 + 统一搜索。
Trello：Trello的目标是提供简洁清晰的团队协作工具。介绍如果将Trello用来建立自己的时间管理系统。
Glip：Glip:在线团队办公协作平台是一个类似于Slack网站的网络办公集合体,内置了邮箱、网盘、即时通讯应用、协作服务等,把所有和网络办公有关的服务和工具都整合在了一起。
Asana：Asana是一款团队任务管理软件方便人们去制定和跟踪团队的项目任务的完成情况.
Jira：JIRA是Atlassian公司出品的项目与事务跟踪工具，被广泛应用于缺陷跟踪、客户服务、需求收集、流程审批、任务跟踪、项目跟踪和敏捷管理等工作领域。

灵感创意：

CodePen：全球web前端开发人员的圣地！可以展示个人的创意和建立一个测试实例来解决bug。
Dribble：Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

前端项目：

博客发布：

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。Markdown 十分轻量,学习成本也不高。

代码压缩和自动化：

Grunt
Gulp.

图片制作：

PS软件(Photoshop CS6).
在线PS：在线版本的简化PS。

图标制作：

心智图制作软件：

在线1：Coggle
在线2：Popplet
中文版（活跃社区）：MindManager

云平台（托管在云端）：

Cloud9 ： Nodejs 大型项目最佳（并且它与github合作，可以直接从github上clone到云端进行编写）：
Surge.sh 静态页面(个人最喜欢的平台推荐）：

网站测速工具：网站的速度是用户体验关键因素。网站速度快与慢决定是否能更高的搜索引擎排名，更高的转换率，更低的跳出率，以及更好的整体用户体验和。值得高兴的是很多免费软件可以用于测试网站速度，帮助我们找出加载缓慢的问题，方便我们去解决。

Google PageSpeed Insights：PageSpeed Insights是一款可以分析网页速度瓶颈,让网页设计人员开发出速度更快的网站的谷歌浏览器插件。
Google Chrome DevTools：Chrome DevTools 是公认的优秀的前端调试工具，功能强大，使用起来有一定的学习门槛，
WebPageTest：WebPagetest是一款Web应用程序,它将一个URL以及一系列配置参数作为输入,并对那个URL运行性能测试。
Pingdom：pingdom全面的网站监测服务网站,可测速和ping跟踪路由,可以免费监测1个站点,最短1分钟监测一次。
GTmetrix：主要优点在于提供了丰富的详细的测量结果，并建议如何来优化网页中每个元素的，最重要的是会根据网站的具体情况，直接告诉你导致网站加载速度变慢的根源在哪里

web开发社区：当开发者在开发的过程中有遇到问题时，除了询问他人以外，还可以使用搜索引擎搜索。社区的重要性就显而易见了，大部分开发者会在开发社区分享他们经验，如何避过不必要踩的坑。

（1 国内社区）

谷歌开发者社区(GDG)：开放 · 分享 · 创新
segmentfault：是中国领先的开发者技术社区。为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。
全栈社区：中国最大的全栈开发者社区,致力于打造一个问题解答,技术文章分享,全栈人员创业的服务平台,让开发更容易,让创业更简单.
github17: 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者.

（2 国内社区）

Stack Overflow：Stack Overflow是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容，在创建主页的时候使用简单的HTML。
Quora :开发者社区。
Front-end Front：在Front-end Front，前端开发者可以提出问题，分享有趣的链接，并展示他们的项目作品。
Hashnode：Hashnode是开发者讨论技术问题，分享解决方案，与世界各地的开发者共享资源的聚集地。
Refind：有着开发者, 黑客, 设计师收集和分享最好的资源的社区。
Google+ Web Developers Group：Web 开发者,Web设计师和Web开发.
Google+ Web Developers Group：Java, PHP, Ruby, JavaScript and Python 资源。
Facebook WordPress Front-end Developers Group：WordPress 前端开发者的分享社区，可以提问题，分享开发者的项目作品，还有讨论WP未来发展趋势。
LinkedIn Web Design and Development Professionals Group：与专业网页设计师，网页开发者共享Web开发资源
LinkedIn Web Site Development Group: 网站设计和开发。
LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
LinkedIn WordPress Developers Group: WordPress 开发. 使用WP来创建CMS和CMF.
Webdeveloper.com：帮助Web开发者和设计师学习使用HTML，java和javascript开发网站。
Sitepoint Forums: Web开发者论坛。
/r/perfmatters: 讨论关于 web 性能
/r/webdev: 关于Web开发和开发者的新闻

Web新闻聚焦：

（1 国内）

掘金：掘金是中国质量最高的技术分享社区，邀请稀土用户作为Co-Editor 来分享优质的技术干货，从前端到后端开发，从设计到产品，让每一个掘金用户都能挖掘到有价值的干货。
开发者头条：一个以程序员为中心，基于学习和分享的开发者社区。你可以阅读头条新闻、分享技术文章、发布开源项目，订阅技术极客们创建的学习主题和关注编程牛人。
极客头条：技术文章聚合站点，目测现在运营力度减弱。
推酷：以技术为驱动，以聚合挖掘为核心，打造个性推荐和订阅，给你一站式的阅读。更汇聚优质公开课和线下活动，让信息知识获取更便捷。

（2 国外）

wdrl.info：精心挑选的Web开发相关资源，每星期进行整合报道。
Ycombinator news:专为提高英文阅读水平的平台。
webopsweekly.com：每周进行报道关于网络运营，应用部署，网站性能和工具分享类的文章。
web tools weekly：专注于前端开发和网页设计工具分享。每一个问题都有一个简短的提示或教程，另外每周都会分享的各种应用程序、脚本、插件和其他有用的资源。

一个免费而且高效的web应用托管平台：Firebase

webAPP开发 Extjs ，Sencha官网，实例地址：Sencha

JavaScript优秀在线课程 Code School

JavaScript在线debug，友好的提示及实时监测能提高编码的效率：JShint

如图所示：

Stackoverflow社区 JavaScript很火的问答社区，基本我遇到问题在上面能得到帮助。

Strapdpwnjs 一款适合前端开发者的Markdown文本编辑器，多种主题可选，界面很漂亮。

多说：前端一款很流行的评论系统，甚至不需要你管理。直接加上它给的几行代码，放在项目中，就能实现多功能评论了。其中个人设计时可以参考这里，搭建漂亮的评论区。

静态网站生成器1 Static Site Generator 静态网站发布服务介绍

静态网站生成器2 （github pages) Jekyll

一名前端工程师的知识图谱是什么？（来自知乎社区的问答）

大神写的 git入门教程。