个人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库为构建用户界面而开发。
• jQuery 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是一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

 前端项目：

•    托管在github上的项目1;
•    托管在github上的项目2.

 博客发布：

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

代码压缩和自动化：

1.    Grunt
2.    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入门教程。

   视频教程   百度云盘分享- 瓢城web俱乐部创始人李炎恢

   Web设计者和开发者必备的27个Chrome插件

   sublimeGit使用教程

  

  WakaTime ： 一款实用的项目分析系统（程序员装逼系统），方便分析优化，管理你的所有项目，并能进行分享。

  如图（多个项目被同时监控）：

 

 项目案例（grunt_less时间记录分析结果如图-主要用来装逼哒，程序员都不炫富，炫时间哒）：

Express 项目生成： 基于Nodejs快速生成一个项目。

 Mongoose:基于nodejs的数据库

视频教程：

•             1 百度前端；
•             2 51CTO
•             3 极客
•             4 麦子

 类似本文的前端开发工具库链接：1 github_JackTian

                                           2 github_foru17

在线工具开源集合： aTool