分享我收集的前端好资源：网址、文章、工具、框架、电子书

前言

开始全职前端开发已经9个月了，在这9个月中收集了一还自认为还不错的资源，整理在了一个小网站上（http://www.cnfeinfo.com/），现在分享出来，希望对各位前端攻城师有用。

如果看了本文后，觉得这些资源还不错，对你有所帮助，别忘了“推荐”一下哦，能帮到大家是我最大的动力，谢谢！

前端好网址

CSS3动画参考

提供CSS3的案例、动画手册和CSS3动画生成工具

张鑫旭-鑫空间-鑫生活

张鑫旭个人博客，主要为web前端方向的技术文章。

司徒正美博客

司徒正美个人博客，博客园推荐博客，主要为web前端方向的技术文章。

Web技术研究所

次碳酸钴的技术博客，文章原创，每日更新。

前端技术分享网站，为前端技术人员提供所需的资讯及资源。

每日前端开发新闻，跟踪前端开发趋势。

大前端是一个关注web前端开发、用户体验设计、wordpress主题、前端招聘信息的独立博客,提供前端开发技巧资源和wordpress主题定制服务,是值得开发人员收藏的站点。

中国最大的HTML5中文门户，提供各种HTML5资料、网站、资讯、应用、游戏、教程、视频、论坛等。

觉唯是一个分享设计博客，推崇以用户为中心的设计，致力于互联网视觉设计、交互设计、前端开发、用户研究。

WEB前端开发

web前端开发，专注前端开发，关注用户体验，关注国内外最新最好的前端开发技术和前端开发资讯的专业博客。

致力于互联网视觉传达、交互设计、前端开发，关注用户体验研究、品牌形象管理、创意产业研发。

天猫UED 用户设计体验部，主要有视觉设计，前端开发，交互设计等。

专注于用户体验

AlloyTeam团队Blog

来自QQ互联、腾讯Q+、WebQQ、QQ群空间项目团队，致力于Web前端技术的研究。

TID-财付通设计中心

腾讯财付通设计中心，主要有交互设计、视觉设计、前端开发、页面重构等。

腾讯游戏官方设计团队TGideas

腾讯游戏官方设计团队，主要为网游产品的包装、创意、网站等设计工作，由专业的视觉设计师、网站重构工程师、FLASH动画设计师、视频包装设计师构成。

腾讯社交用户体验设计部ISUX

ISUX是腾讯核心设计团队，重点产品包括QQ、QQ空间、QQ会员、QQ秀、QQ情侣、QQ提醒、朋友网、云平台、广点通、Qrobot以及相关移动终端应用等。

阿里巴巴（中文站）用户体验设计部博客，主要有交互设计、视觉设计、前端开发、用户研究等。

新浪微博UDC

主要有交互设计、用户研究、视觉设计、页面构建等。

畅游视觉设计中心

从游戏和生活中汲取创意和灵感的一群设计精灵，用爱去释放奇妙的设计魔法，描绘让你我感动的虚拟人生。

迅雷用户体验设计中心

主要有交互设计、网页重构、视觉设计

主要为前端技术研究。

csser 前端技术社区

CSSer 定位在前端技术内容社区，以内容为中心，将用户、分类（标签）、文章资源和问答有效的连接在一起。

致力于普及W3C标准，将定期与不定期组职前端开发活动，与大家一起分享与交流前端技术。

内容涵盖行业资讯、原创教程、资源分享、疑难解答、招聘信息等，旨在提供一个信息交流、经验分享、互帮互助的平台。

阮一峰的网络日志

作者的文章循序渐进，图文并茂，通俗易懂。另外，作者视野开阔，对经济历史、法律文学、医学电影、音乐美术、摄影政治、科学创业等均有所涉猎。

以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。

外刊IT评论网

外刊IT评论网以介绍外国IT方面的评论为主，偏重于软件编程,技术,科技,创业,测试,程序员开发等方面。

专注web前端开发，专注用户体验。

JavaScript Weekly

由Peter Cooper发布的周刊，收集了JS社区正在发生的新项目、更新、新闻、视频、播客、会议信息等等。JavaScript Weekly还可以发到你的邮箱，让你随时了解最新动态。

这里有一些还不错的电子书。如果喜欢，请帮忙向同事和同学推荐该站。

前端好文章

jQuery诞生记-原理与机制

该文结合具体代码和实例，讲解了jQuery的原理和机制，整篇文章图文并茂，循序渐进，通俗易懂，特推荐给大家。

Web前端工程师编程能力飞升之路

本文将WEB前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级，参考突破之法破之。

HTTP协议详解

本文详细讲解了HTTP协议的概念、原理、结构、GET与POST的区别、状态码等内容，并在系列文章中讲解了认证，缓存，压缩，代理等知识，强烈推荐前端开发人员阅读。

正则表达式30分钟入门教程

本文详细讲解了正则表达式的概念，并结合实例，由浅入深，在30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。

高质量JavaScript代码书写要点

本文详细讲解了编写高质量JavaScript的一些要素，例如避免全局变量，使用单变量声明，在循环中预缓存length(长度)，遵循代码阅读，以及更多。

深入理解JavaScript系列

汤姆大叔写的一系列深入理解JS系列文章，包括了原创，翻译，转载，整理等各类型文章。主要有JS最佳实践、原型链、函数表达式、闭包、作用域、面向对象、设计模式等。

IE和Firefox的Javascript兼容性总结

本文主要结合具体实例，从函数和方法、样式访问、DOM方法及对象引用、事件处理及其他差异的兼容处理等方面对IE和FireFox的Javascript兼容性作了总结，非常值得阅读。

JavaScript的那些书

本文主要结合作者自身经历，推荐了一些学习JS的书籍，并对书籍做了一些点评，比较适合初学者参考。

前端必读：浏览器内部工作原理

浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。

开发者需要了解的WebKit

Paul Irish是著名的前端开发工程师，同时他也是Chrome开发者关系和jQuery团队成员。针对大家对WebKit的种种误解，他发表了《WebKit for Developers》试图为大家解惑。

Javascript 异步编程的4种方法

本文总结了"异步模式"编程的4种方法，理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。

jQuery的bind、live和delegate区别

jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的，然而，如果我们对所有的不同之处都有清晰的理解的话，那么这将会有助于我们编写出更加简洁的代码。

jQuery设计思想

对于网页开发者来说，学会jQuery是必要的。虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。本文试图理清jQuery的设计思想，找出学习的脉络。

jQuery最佳实践

本文主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》。他是jQuery开发团队的成员，具有一定的权威性，提出的结论都有测试数据支持，非常有价值。

jQuery的deferred对象详解

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作，这些操作都不能立即得到结果。deferred对象就是jQuery用来解决此类问题的回调函数解决方案。

Javascript执行效率小结

Javascript是一门非常灵活的语言，我们可以随心所欲的书写各种风格的代码，不同风格的代码也必然也会导致执行效率的差异，本文将整理一下平时比较常见并且容易规避的问题。

JS杂谈之哪种写法你更喜欢？

老是在写js，你平时是怎么写你的js呢？更喜欢哪种方式呢？今天就把常见的跟大家唠叨唠叨。

说说JSON和JSONP

JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种跨域数据交互协议。

Web安全测试之XSS

XSS是Web程序中最常见的漏洞。指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的。

悟透JavaScript

编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。

解析CSS设置默认字体样式

默认字体样式会因为浏览器不同，版本不同，甚至操作系统不同的设置不同导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，本文对此进行了较为详细的讨论。

由hasLayout引发的CSS Bug表

hasLayout是IE的特有属性。它决定着一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算组织内容。本文总结了由hasLayout引发的CSS Bug。

关于BFC和IE的hasLayout

BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。

CSS3 必须要知道的10 个顶级命令

本文对CSS3中最重要的10个命令进行了总结。

IE下 z-index 的各种坑

本文对工作中遇到的IE下 z-index 的各种坑进行了总结。

Developing Chrome Extensions

The basics to creating your own Google Chrome extension using mostly JavaScript and some JSON.

Fiddler是最强大最好用的Web调试工具之一，它能记录客户端和服务器的http和https请求，允许你监视，设置断点，修改输入输出数据，无论对开发还是测试都有很大的帮助。

浏览器缓存机制

浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等），但是也有非HTTP协议定义的缓存机制，文本对此进行了比较详细的讲解。

团队行为守则—如果你们由我来领导

如果你是在我领导的团队里，有几个额外的事情我要告诉你。我深信这些行为守则是一个高效团队的润滑剂，我并不只是要求别人这样做，我自己也严格恪守。

不可多得的HTML/CSS学习资料，作者为豆瓣前端工程师。

网页设计最常见可用性错误

在过去十年中高品质的可用性一直是业内讨论的核心，因为它对用户来说越来越重要。好的可用性也可以帮助建立品牌知名度，从而提升用户对一个网站或者是一家公司的评价。

图片原理与优化

该文收集了一些关于图片优化的技巧，并对于各个方法的优化原理做了一些研究总结，希望能给大家对于图片优化这一块起到抛砖引玉的作用。

Developing Chrome Extensions

The basics to creating your own Google Chrome extension using mostly JavaScript and some JSON.

计算机科学中最重要的32个算法

奥地利Christoph Koutschan博士他做了一个调查，参与者大多数是计算机科学家，他请这些科学家投票选出最重要的算法，以下是这次调查的结果，按照英文名称字母顺序排序。

前端好工具

DevDocs:前端API阅读器

DevDocs是一个界面简单优雅的HTML、CSS、DOM、DOM事件、JavaScript和jQuery等API阅读器。

开源中国在线工具-OSTools

为开发设计人员提供在线工具，提供jsbin、CSS、JS、JAVA API,PHP API、Node.js API、Less CSS编译器，MarkDown编译器等工具

W3C CSS 验证服务

W3C CSS 验证服务

一个很不错的图标搜索引擎

Base64 Image Encoder

一个提供把图片转换为Base64格式编码的网站

提供在线编写、展示html、js、css代码的网站。

提供在线编写、展示html、js、css代码的网站。

提供在线编写、展示html、js、css代码的网站。

一个针对网站前端代码设计的开发工具，提供多种效果，有丰富的案例特效，用户可以在已有demo基础上进行开发。

在线正则表达式测试

在线正则表达式测试工具

在线代码着色

在线代码着色(采用SyntaxHighlighter实现)

一个提供在线写代码交流的网站，常被国外公司用来做电话面试。

CSS3动画参考

提供CSS3的案例、动画手册和CSS3动画生成工具

一个CSS的解析、检查、修复与压缩的工具集

CSS参考手册

web前端开发参考手册系列之CSS3参考手册：为Web前端开发人员提供最新、最全的CSS资料，涵盖CSS3.0。

CSS3代码生成工具

图形化的CSS3代码生成工具

NEC : 更好的CSS样式解决方案

NEC包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案。

JS版的PPT生成工具，很容易制做出非常炫的网页式PPT。

最喜欢的前端开发工具，没有之一。

Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。

Adobe Dreamweaver

一个可视化的网页设计和工具，支持HTML检查、HTML格式控制等技术.

说起编辑器，当然少不了这货啊。

Windows系统上的一个好用的文本编辑器，在使用sublime Text之前，这货可是我的御用IDE。

Notepad++ 是一款Windows环境下免费开源的代码编辑器。

Komodo是一个免费/收费、支持多种语言、以及跨平台（可用于 Windows、Mac OS X 和 Linux）的IDE.拥有后台语法检测、颜色匹配、错误捕捉、自动补齐等特性。

WebStorm 是jetbrains公司旗下一款JS开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JS IDE”等。

Zend Studio 是专业开发人员在使用PHP整个开发周期中唯一的集成开发环境 (IDE)，它包括了PHP所有必须的开发部件。有一整套编辑、调试、分析、优化和数据库工具。

非常强大的前端调试工具

非常强大的HTTP抓包分析工具，对IE6来说简直就是神器啊。

IEdeveloptoolbar

IE6调试利器。

IE兼容性测试必备工具之一。

验证JS代码格式的工具，有众多IDE插件。

用java写的一个代码压缩工具

JS/CSS/HTML压缩

在线JS/CSS/HTML压缩(采用YUI Compressor实现)

在线JS格式化工具

可以将HTML源代码转换成JavaScript形式的编写代码。

格式化、压缩、eval压缩JS/HTML代码。

URL编码解码

一般情况下，网页间的参数都会经过URL编码后传输，将这些URL进行解码，可以帮助使用者了解网页的内容。同时，编码解码工具也为技术人员提供一个实用工具。

JSON 数据生成工具

在 Web 开发中，经常会需要一些测试数据来测试接口或者功能时候正确。JSON Generator 就是这样一款生成随机 JSON 数据的在线工具。

HTML特殊字符对照表

HTML特殊字符对照表

apidq是最具权威的api网址大全，汇集最优秀的api资源。及时收录API分类的网址和内容，收录网络科技企业的技术开放平台。让您的API开发、开放平台开发更简单精彩。

语义化标签规范

详细讲解了语义化标签规范，可以作为工具在需要时查看。

前端好框架

jQuery是一个兼容多浏览器的JS库，核心理念是write less,do more(写的更少,做的更多)，如今已经成为最流行的JS库。

Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。

Node.js是一个可以快速构建网络服务及应用的平台。该平台的构建是基于Chrome's JavaScript runtime，即是对Google V8引擎进行了封装。

YUI是由雅虎开发的开源JS函数库，包含了多种工具、函数库以及网页操作界面，适合企业级开发。

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。功能丰富，无人能出其右。

Dojo是一个用JS实现的开源DHTML工具包，目标是解决开发DHTML程序遇到的那些，长期存在、历史问题。

Prototype JS库设计巧妙，兼容标准的类库，能够帮助开发人员轻松建立有交互性良好的web2.0特性富客户端页面。

MooTools是一个简洁，模块化，面向对象的开源JS web应用框架。它为web开发者提供了一个跨浏览器js解决方案。

UEditor（百度）

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制等特点。

KindEditor 是一套开源的在线HTML编辑器，主要让用户获得所见即所得编辑效果，比较适合在 CMS、商城、论坛、博客等应用上使用。

Sea.js（淘宝）

Sea.js理念是：海纳百川、有容乃大。期望能成为海，开放而自由。提供简单、极致的模块化开发体验。

Tangram（百度）

Tangram是一款实用的JS基础库，通过她可快速构建出高度互动的Web应用程序，简单而高效。

JX 是模块化的非侵入式Web前端框架，特别适合构建和组织大规模、工业级的Web App。

AlloyImage（腾讯）

alloyImage是一个基于html5的图像处理js代码库，提供了简单快捷的API，多图层操作，与PS对应的17种图层混合模式，多种风格处理效果。

KISSY（阿里）

KISSY是阿里工程师创建的开源JS框架。具备模块化、高扩展性、组件齐全、接口一致等特性。

Arale（支付宝）

Arale 基于SeaJS和CMD规范，建立了一套从编码测试到部署的开发体系，是一个开放、简单、易用的前端解决方案。

NEJ（网易）

NEJ是由网易工程师创建的简洁美观，跨平台的web前端开发框架；她自由定制、小巧灵活、简洁易用、愉悦编码、快乐开发。

Bootstrap是Twitter工程师推出的开源的前端开发框架，该框架提供了优雅的HTML和CSS规范，是GitHub上的热门开源项目之一。

960 Grid System

960 Grid System（960网格系统）是一套为了简化Web开发工作流程的CSS框架。

LESS 将 CSS 赋予了动态语言的特性。LESS既可以在客户端上运行也可以在服务端运行。

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

Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI组件，如表单按钮、Tabs等。

Normalize.css 是一个可以定制的CSS文件，通过研究不同浏览器默认样式的差异，它让不同的浏览器在渲染网页元素的时候形式更统一。

Animate.css包含一些实现了各种跨浏览器的动画效果的CSS，你可以在项目中使用。

前端电子书

JavaScript权威指南(第6版)

语言：简体中文

简介：经典权威的JavaScript工具书，是程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册。

JavaScript高级程序设计(第3版)

语言：英文

简介：本书是JavaScript 超级畅销书的最新版。是学习JavaScript最好的入门书籍之一，力荐。

JavaScript DOM编程艺术(第2版)

语言：简体中文

简介：本书是JavaScript 经典书籍之一。

High Performance JavaScript

语言：英文

简介：本书揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能，包括代码的加载、运行、DOM交互、页面生存周期等。

JavaScript设计模式

语言：英文

简介：本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识。第二部分则专注于各种具体的设计模式及其在JS语言中的应用。

Beginning CSS Web Development

语言：英文

简介：CSS入门经典书籍之一。结构清晰，语言生动。 css的细点很多，难以记忆，这本书让人可以方便的查找。将css技术由浅入深的展现在你面前。

CSS: The Missing Manual

语言：英文

简介：中文意为CSS实战，书中有大量实例教程帮助你循序渐进地学习。

精通CSS:高级Web标准解决方案(2)

语言：简体中文

简介：将最有用的CSS技术汇总在一起，还总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，填补了一直以来CSS图书的空白。

注：以上电子书仅供个人预览使用，获取方法在这里（请不要上传到网上供免费获取），如果你喜欢该书，强烈建议购买正版图书。

小结

本文内容主要取自个人搭建的前端导航网站（http://www.cnfeinfo.com/），该站资源会陆续补充完善。如果大家有优秀的资源(网址、电子书)想分享给所有前端开发人员，请发邮件到cnfeinfo@gmail.com或给本文留言（本站仅添加对大家有用的电子书、高质量并且经常更新的网站），如果大家有什么意见建议欢迎留言或发邮件。

如果看了本文后，觉得这些资源还不错，对你有所帮助，别忘了“推荐”一下哦，能帮到大家是我最大的动力，谢谢！

posted @ 2013-07-21 12:45 artwl 阅读(15723) 评论(65) 编辑收藏举报

刷新页面返回顶部

个人简介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"设计模式"
	],
	"hobby": [
		"阅读", "旅游",
		"音乐", "电影"
	]
}