100+ 超全的web开发工具和资源

100+ 超全的web开发工具和资源

 

作为Web开发者，这是好的时代，也是坏的时代。Web开发技术也在不断变化。虽然很令人兴奋，但是这也意味着Web开发人员需要要积极主动的学习新技术和新的编程语言，并愿意和渴望接受新的挑战，以适应变化。新的挑战可能会包括一些开发上的要求，如利用适应现有的框架来满足业务需求。测试一个网站，能从中知道出了哪些技术上的问题，并且我们针对这些问题进行优化和消除。便于后端的开发进程加快和测试。所以我们列出了完整的web开发所需要的工具和资源，助力开发者提高开发效率！学不止步，让我们努力成为一个优秀的开发者！

Web开发工具和资源整合

在这里说声抱歉，对于开发者开发使用的工具，我们无法一一囊括，这里是选取较为热门的工具和资源作为范例。我们希望能从中找到适合自己的工具助力自己的开发！

注：工具和资源排序不分先后。

JavaScript库

 

我敢说JavaScript语言是目前web开发最流行的编程语言。JavaScript库又称JavaScript框架，封装了很多预定义的对象和使用函数。是网站更容易兼容各式各样的浏览器。那么您就可以使用以下JavaScript库来帮助你的开发更好进行。

• jQuery：快y速，小巧，功能丰富的JavaScript库。
• 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 实现响应的数据绑定和组合的视图组件。

前端框架
 

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

• Bootstrap： Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
• Foundation： 迄今为止最好的响应式前端框架，更快、更轻、更多功能、更灵活、更强大！
• Semantic UI：SemanticUI 是一款语义化设计的前端开源框架,其功能强大,使用简单,为设计师和开发师提供可复用的完美设计方案。
• uikit：UIKit使用的变量基于LESS,具有体积小、模块化、可轻松地自定义主题及响应式界面。

Web应用框架
 

Web应用框架作为一个软件框架，意在帮助和缓解开发者在进行Web应用的开发与维护时遇见的开发问题。例如：AngularJS，您可以在您的项目完全免费使用它，详细文档请您参见 angularcdn.com.

• Ruby：Ruby on Rails 是使用 Ruby 语言编写的网页程序开发框架，目的是为开发者提供常用组件，简化网页程序的开发。
• React：React 起源于 Facebook 的内部项目，React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。是现在非长热门的框架。
• Vue：Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。
• AngularJS：AngularJS 通过新的属性和表达式扩展了 HTML，可以构建一个单一页面应用程序。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
• Ember.js：一个用于创建 web 应用的 JavaScript MVC 框架，采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、计算属性（依赖其他属性动态变化）、自动更新模板、路由控制、状态机等。
• Express：基于 Node.js 平台的 web 应用开发框架 基于Node.js 平台,快速、开放、极简的 web 开发框架。
• Meteor：Meteor 是一个构建在 Node.js 之上的平台，用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间，保持二者之间的数据同步更新。
• Django：Django是一个开放源代码的Web应用框架,由Python写成。采用了MVC的软件设计模式,即模型M,视图V和控制器C。
• ASP.net：ASP.NET是免费，高兼容的WEB应用框架，能够提供标准化WEB应用构建时所需的解决方案。
• Laravel：一个免费，开源的PHP Web应用程序框架，可以基于MVC模式来创建Web应用程序。
• Zend Framework 2：一款的Web应用框架，基于PHP来创建Web应用和服务端应用。
• Phalcon：Phalcon 是开源、全功能栈、使用 C 扩展编写、针对高性能优化的 PHP 5 框架。
• Symfony：Symfony是一个基于MVC模式的面向对象的PHP5框架。Symfony允许在一个web应用中分离事务控制，服务逻辑和表示层。
• CakePHP：CakePHP是一个运用了诸如ActiveRecord、Association Data Mapping、Front Controller和MVC等著名设计模式的快速开发框架。主要目标是提供一个可以让各种层次的PHP开发人员快速地开发出健壮的Web应用，而 又不失灵活性。
• Flask：Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2
• CodeIgniter：CodeIgniter 是一个简单快速的PHP MVC框架。它为团队提供了足够的自由支持，允许开发人员更迅速地工作。

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

 

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

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

编程语言 / 开发平台

 

所有Web开发都需要编程语言的支持.编程语言（programming language），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。.当然进行Web开发不仅仅只有一门语言来进开发。

• PHP：PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域
• NodeJS：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
• Javascript：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
• HTML5：标记语言，是HTML和XHTML的最新版本。
• Python：Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。
• Ruby：Ruby，一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言
• Scala：Scala是一门多范式的编程语言，一种类似java的编程语言，设计初衷是实现可伸缩的语言、并集成面向对象编程和函数式编程的各种特性。
• CSS3：CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS的最新版本。
• SQL：结构化查询语言(Structured Query Language)简称SQL，是一种特殊目的的编程语言，是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统；同时也是数据库脚本文件的扩展名。
• Golang：Go是Google开发的一种编译型，可平行化，并具有垃圾回收功能的编程语言。
• Rust：Rust是Mozilla开发的注重安全、性能和并发性的编程语言。
• Elixir：Elixir 是一种函数式编程语言,建立在Erlang虚拟机之上。它是一种动态语言,灵活的语法与宏支持,利用Erlang的能力来构建并发、分布式、容错应用程序与热代码升级。

数据库

 

数据库（Database）是按照数据结构来组织、存储和管理数据的仓库。

• MySQL：MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。
• MariaDB：MariaDB数据库管理系统是MySQL的一个分支，主要由开源社区在维护，采用GPL授权许可 MariaDB的目的是完全兼容MySQL，包括API和命令行，使之能轻松成为MySQL的代替品。
• MongoDB：MongoDB 教程 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。
• Redis：Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。
• PostgreSQL：ostgreSQL支持大部分 SQL标准并且提供了许多其他现代特性：复杂查询、外键、触发器、视图、事务完整性、MVCC。

CSS 预处理器

 

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。例如：Sass，Less，Stylus。

• Sass： Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
• Less：Lesscss是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
• Stylus：Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。

如果你是刚刚开始使用CSS的预处理器，你可能要先使用第三方编译器进行开发，如下所示。

文本编辑器 / 代码编辑器

无论你是做笔记，敲代码，或者Markdown文档编写，一个好的文本编辑器都是必须拥有的！

• 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被公认为是最受专业程序员喜爱的代码编辑器之一。

Markdown 编辑器
 

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

• MWeb：专业的 Markdown 写作、记笔记、静态博客生成软件 【付费】
• Markeditor：MarkEditor 是最新的一款 Markdown 编辑器，除了基本功能外，还包含了诸如表格编辑、图表、高亮、公式等等丰富的功能！【付费】
• StackEdit：一个开放源码免费使用的 MarkDown 编辑器, 基于 PageDown,使用了 Stack Overflow 和其他 Stack Exchange 网站的 MarkDown 库
• Dillinger：Dillinger 是一款在线的 Markdown 编辑器,支持更换主题,字数统计,云服务保存,导出 HTML、PDF 等功能。
• Mou: Mac OS X下的免费Markdown编辑器【作者貌似已经跑路了】
• Texts：Windows和Mac OS X下纯文本编辑器。

表示有些付费的Markdown编辑器宝宝买不起。

icon图标
 

几乎每一个Web开发者，尤其是前端开发人员都会需要icon图标来增色项目。

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

Git 代理 / 服务

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

• SourceTree：SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端。支持创建、克隆、提交、push、pull 和合并等操作。
• GitKraken (Beta)：一款自由、直观、快捷、美观的跨平台Git客户端。
• Tower 2：一款美丽，高效，强大的Git管理，让Git版本控制变得容易。
• GitHub Client：有助于无缝连接GitHub和GitHub的企业的项目。
• Gogs：Gogs (Go Git Service) 是一款极易搭建的自助 Git 服务。 开发目的 Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自助 Git 服务。
• GitLab: GitLab是利用 Ruby on Rails 一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。
• Coding：Coding 的代码托管功能除了基本的 Git 仓库以外，还有保护分支，分屏对比， Code Review 等高级功能。并且整合了 Pages 服务，质量管理，演示平台等开发工具，提升研发效率。

本地开发环境搭建
 

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

• XAMPP：XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。
• MAMP PRO：MAMPPro 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开发环境环境集成套件包。

文本对比检查

 

Diff checkers 可以帮助您比较文件之间的差异，然后合并更改。帮助我们更直观的看见文本之间的差异。

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

当然有很多免费的文本编辑器，包括我们上面提到的也有插件和扩展，可以协助开发者方便的进行文件比较。

代码共享 / 代码测试

 

前端开发者在公司内或者团体间需要进行协作，共享代码，那么一下工具很值得开发者一试。

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

协作工具
 

每一个很棒的开发团队需要一种方式来保持联系，协作，来帮助提高生产力。

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

灵感创意

 

当我们进行开发时，偶尔迸发的灵感会使我们的项目或者产品增色不少。当然不仅仅依靠自我的灵感，我们也需要从别人的作品中得到灵感来保证我们的Web设计界面或者产品不落后这个时代。

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

网站测速工具
 

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

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

Web开发社区
 

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

国内：

• 谷歌开发者社区(GDG)：开放 · 分享 · 创新
• segmentfault：是中国领先的开发者技术社区。 为编程爱好者提供一个纯粹、高质的技术交流的平台, 与开发者一起学习、交流与成长。【老实话我觉得这名字不好记】
• 全栈社区：中国最大的全栈开发者社区,致力于打造一个问题解答,技术文章分享,全栈人员创业的服务平台,让开发更容易,让创业更简单.
• 稀土区：专注开发设计资源分享，UI模板资源，ICONS资源，HTML模板资源等等.......

国外：

• Stack Overflow：Stack Overflow是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容，在创建主页的时候使用简单的HTML。
• 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开发新闻聚合

阅读开发和设计的技术干货，及时的知道技术圈内更新了什么，保持信息流新鲜，有助于我们更好的开发！

国内：

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

国外：

• wdrl.info：精心挑选的Web开发相关资源，每星期进行整合报道。
• webopsweekly.com： 每周进行报道关于网络运营，应用部署，网站性能和工具分享类的文章。
• web tools weekly：专注于前端开发和网页设计工具分享。每一个问题都有一个简短的提示或教程，另外每周都会分享的各种应用程序、脚本、插件和其他有用的资源。
• freshbrewed.co：每周为前端开发者和设计师提供开发和设计类的阅读摘要。
• smashingmagazine.com： Smashing Magazine是一款专门为个人前端开发者和设计师提供的在线报纸，每周二都会定时的更新有用的资源。
• front-end dev weekly: 每周为前端开发者提供新闻, 包含工具资源，还有灵感。
• friday front-end：邮件订阅，每日为前端开发者发关于开发资源的邮件。
• /dev tips: 收集开发者的问题和建议, 用gif呈现，会每周发邮件通知。

当然, 你也可以关注稀土区，来找到你需要的文章，顺便解决你的问题。

备注

如你所见，有数以百计的网络开发工具和资源，可以帮助简化你的开发工作流程，帮助开发更高效。我们无法一一列出所有工具或资源，如果有重要的工具或资源有遗漏，那就要麻烦小伙伴们在下面的评论里进行补充，谢谢！

文章是楼主搬来的找了好久找到了资源 这是地址：100+ 超全的web开发工具和资源

想要学习前端看免费的直播课程的加一下这个群https://jq.qq.com/?_wv=1027&k=45vs1z3里面有很多资源和干货加群找群主要就好了这是2群了。

发布于 15:32

二〇一六年的前端入门指南

 

JavaScript is supposed to be easy and powerful, for all of us.

 

年初在 V2EX 看到很多人发帖问前端如何入门，我姑且来分享一下我的经验。

或许你不知道我是谁，不过如果你对前端有兴趣，都可以联系我帮你 Review 代码、提供改进建议，这有我的 GitHub 地址。

我假设阅读者只了解过简单的 HTML/CSS。

HTML

HTML 没有了 CSS 就什么都不是，它相当于给网页各个区域命名，然后让你可以进行更多的操作。比如头部导航栏，你经常会给它起个名字叫 header。

CSS

CSS 是层叠样式表（Cascading Style Sheets）的缩写，它是用来定义你的 HTML 的展现形式的一种语言。比如让你的 HTML 里的文字显示不同字体，一个元素显示不同的高度。

HTML+CSS

HTML 和 CSS 都是语法非常松散的语言，这样的导致了它们入门非常简单，然而一旦代码量变大维护就会很困难。

模板引擎

假设你有两个网页，它们共用一个导航栏（header），然后只有主体（content）部分显示不同的内容，在已有知识背景下你只能做两个网页，把导航栏的代码复制两次。

于是有了模板引擎，比如 jade，他可以让你复用重复的模板，减少代码量，提高可维护性。

CSS 处理器

看下面这段代码:

 

.post {
	font-size: 14px;
	-webkit-box-shadow: 0 0 1px #ccc;
	-moz-box-shadow: 0 0 1px #ccc;
	box-shadow: 0 0 1px #ccc;
}

.post .post-content {
	font-size: 16px;
}

.post .post-content .post-date {
	color: #999;
}

你会发现上面的 box-shadow 写了三次，以便支持不同内核浏览器下的 box-shadow 这个属性。

还有随着代码量增大像 .post .post-content .post-date 这样长的定义会越来越长。

这是有了 CSS 处理器之后的代码:

 

.post {
	font-size: 14px;
	box-shadow: 0 0 1px #ccc;
	.content {
		font-size: 16px;
		.date {
			color: #999;
		}
	}
}

嵌套的风格让作用域更清晰，你同时可以尽可能地只用标准的 CSS 属性然后让 CSS 处理器帮你兼容其它浏览器。推荐使用 PostCSS，它本身并不改变你的 CSS 代码，但它把你的代码抽象成一个 JavaScript 对象让你能够通过插件来随心所欲地进行操作，比如实现嵌套风格以及自动加 -moz -webkit 这些前缀。你可以自己写插件同时它已经有大量现成的插件供你使用。

要记住的是，它只是将你自定义的 CSS 风格转换成符合浏览器标准的 CSS，至于为什么？标准的 CSS 不够好用呗，比如刚才遇到的问题。

HTML+CSS 小结

现在你知道了 HTML/CSS 在一起使用的时候能干什么，也知道了用模板引擎、CSS 处理器可以让你更好地写 HTML/CSS。要记住，「更好」也许只是在代码量增大的情况下更明显。

那么这些模板引擎和 CSS 处理器是怎么实现的？很多都是用的 JavaScript。

推荐阅读: Learn to Code HTML & CSS 正如其松散的特性一样，你需要多使用才能更好地掌握用法。

JavaScript

JavaScript 是一门真正的语言，它简单且强大。（以下简称 JS）

正如 HTML/CSS 是用于网页的样式呈现，JS （在过去）则是用于网页的交互操作上，比如用户点击了一个按钮然后弹出一个框，这些需要 JS 完成。

JS 本身并不具有「监听用户点击」这一功能，在浏览器上，现代浏览器都内置了网页 DOM API，它提供了一套 JS 接口，让你可以用 JS 调用来实现相应功能，而这些功能本身是基于更低级的 C/C++ 语言实现的。

因此，一名及格的前端需要掌握 JS 的基础，比如变量、数组、函数这些几乎所有语言都有的特性，然后就是 DOM API，缺了这个实现网页交互就是纸上谈兵。

推荐阅读: MDN Web API 非常全，需要更渐进的指南建议 Google。

至于学习 JS 这门语言，推荐三本众所周知的，你并不需要全部都看，挑一本或两本尽量搞清楚就行了:

JavaScript 权威指南JavaScript 高级程序设计JavaScript 语言精粹

Node.js

刚才说过，过去的 JS 就是 JS 本身加上浏览器的 DOM API，于是就有人想到了：能不能把浏览器 DOM API 换成用户操作系统的 API？这样 JS 看起来就更像一门「真正的语言」，即可以在用户本地环境而不只是在浏览器中运行。

幸好，谷歌浏览器（Chrome）使用的 JavaScript 运行环境（v8）发展到近几年已经能非常快地将 JS 代码转为机器码，于是 Node.js 的先驱们就成立了这个组织，基于 Chrome v8 引擎实现了一个跨平台 JavaScript 运行环境 —— 即现在非常流行的 Node.js。

这样的感觉是不是很好? JavaScript 开发者的工具也能用 JavaScript 开发了！这才是副标题里描述的「easy and powerful」的前提。

如何学习 Node.js

大同小异，如果你在之前知道了如何学习 JavaScript。无非是 JS 本身加上 Node.js 提供的 API 而已。你可以直接打开 Node.js 官网查看其 API。

Node.js 只是一个运行环境，类似于 Java 的 JVM，最重要的还是 JavaScript 本身。

ES6

很大的可能你现在都是在用 ES5 标准的 JavaScript 语法，而 ES6 则是 TC39(负责制定 JavaScript 语言标准的机构) 在 2015 年新推出的语言标准。

 

为什么我要学新的 ES6 标准?

• 你不必。因为 ES6 及以后的任何一个新的 JS 标准都是向后兼容的，也就是说任何你现在写的代码也是符合未来版本的 JS 的标准的。
• 为什么不？试试又不会怀孕，而且你会有眼前一亮的感觉。任何语言都是在进化的，特别是前端发展那么快！
• 小编是一个有着5年工作经验的前端开发工程师，关于前端编程，自己有做材料的整合，一个完整的前端编程学习路线，学习材料和工具，＋我的威信收取，免费送给tanzhou-10838大家，希望你也能凭着自己的努力，成为下一个优秀的程序员。