第一名：Matt Cutts，计有47801个订阅者。来自Google公司内部，大名鼎鼎的Matt Cutts，在SEO届可谓无人不知，无人不晓。MattCutts在Google担任高级工程师已经9年了，是Google Webspam小组的老大，在SEO届他讲出来的话是最有权威的，许多Google最新的资讯，都是通过他的博客透露出来的。

第二名：SEOmoz，搜索引擎MOZ，提供专业的网络营销和搜索引擎优化服务。截止今天，计有35492个订阅者。Rank Fishkin的这个SEO博客经常透露一些非常值得分享的SEO机密。

第三名：Search Engine Land，搜索引擎大地。计有33762个订阅者。Danny Sullivan和Vanessa Fox是SearchEngineLand.com的两位编辑员。这两个名字在SEO界是公认的。这个博客提供了各个主流搜索引擎的最新新闻，是每个专业SEO必读的。他们还组织搜索引擎会议，SMX（Search Marketing Expo）在世界大部分都有场所。

第四名：Search Engine Watch，计有28568个订阅者。这个叫搜索引擎观察的SEO博客，是最大的搜索引擎组织。

第五名：Search Engine Journal，搜索引擎杂志。计有18006个订阅者。

第六名：Search Engine Roundtable，搜索引擎圆桌会议。计有17163个订阅者。

第七名：Online Marketing Blog，在线营销博客。计有15794个订阅者。

第八名：Search Engine Guide，搜索引擎指南。计有12463个订阅者。

第九名：Marketing Pilgrim，营销皮尔格林。一位网络营销专家Andy Beal的个人博客，更新速度非常快，文章观点得不错。计有13433个订阅者。

第十名：Pronet Advertising，Pronet广告。计有8896个订阅者。

第十一名：Graywolf’s SEO Blog，Graywolf的搜索引擎优化博客。这个SEO Blog是唯一一些能得到Matt Cutts评论的SEO博客，他给许多国外着名的站点做过优化。计有8585个订阅者。

第十二名：Get Elastic，获得弹性。电子商务博客。计有6937个订阅者。

第十三名：HubSpot，计有7016个订阅者。

第十四名：Yoast，计有5361个订阅者。

第十五名：BlogStorm，博客风暴。一个英国人写的关于搜索引擎优化和在线营销的SEO博客。计有4188个订阅者。

第十六名：redfly，计有3875个订阅者。

第十七名：Small Business SEM，针对小企业的搜索引擎营销。计有3659个订阅者。

第十八名：Web Analytics World，WEB分析世界。计有3244个订阅者。

第十九名：Sugarrae，计有3205个订阅者。

第二十名：SEO Pedia，搜索引擎优化Pedia。计有2337个订阅者。

第二十一名：Net Business Blog，计有2256个订阅者。

第二十二名：PPC Hero，计有2413个订阅者。

第二十三名：Conversation Marketing，计有2255个订阅者。

第二十四名：SEO Scoop，独家搜索引擎优化。计有2953个订阅者。

第二十五名：SEO 2.0，计有个1640订阅者。

第二十六名：StepForth SEO News Blog，计有1371个订阅者。

第二十七名：Hobo，计有1258个订阅者。

第二十八名：Cre8pc Blog，计有879个订阅者。

第二十九名：aimClear Blog，计有个879订阅者。

第三十名：SEOBook、WeBuildPages等SEO知名博客，未知订阅者

源地址：不详

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性！我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容中将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。

HTML5 & CSS3 准备就绪

该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。

HTML5安全手册

CSS3按钮生成器

所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。

When can I use…（HTML5 & CSS3 浏览器兼容性）

很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。

CSS3颜色值/名称速查手册

CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等…

CSS3生成器

在线测试CSS3新特性，即时生成效果。

Modernizr

当前浏览器对HTML5支持情况测试

该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细，很有用！

CSS 边框半径(代码生成器)

通过输入数值即可生成CSS3代码的CSS 边框代码生成器。使用很简便。

FindMeByIP（HTML5 & CSS3 浏览器兼容性手册）

很详细的HTML5和CSS3浏览器兼容性手册。

CSS3渐变生成器

CSS3 Watch

前端开发工具&资源小集合

CSS3, please!(实时体验CSS3代码)

font dragr

CSS3生成器

CSS桌面

CSS桌面可以让你在线练习CSS3代码，并实时将渲染效果呈现在右侧，很棒的CSS3在线练习工具。

HTML5修订版本跟踪器

font-face 生成器

CSS3 选择器测试工具

IE 打印保险器

详细CSS 浏览器支持情况列表

源地址：http://blog.bingo929.com/html5-and-css3-tools-list.html

LaunchList
站点发布前的工作清单，预设了28个需要检查的事项，也可以自定义。同类工具： Ultimate Website Launch Checklist 以及 The Ultimate Website Prelaunch Checklist。

Pencil Project: Sketching and Prototyping with Firefox
一个开源 GUI 原型设计工具。

Zootool
一个非常漂亮的书签工具，可以将你收集的各种素材，图片，文档，链接，视频等在线组织到一起。

Bounce （推荐）
输入一个站点地址，该程序会给该站点截图，然后，你可以在上面批注，加评论，并和朋友分享。非常适合用来和您的客户在线就某个站点的设计进行讨论。

Ninite Batch Installer
这个站点可以将很多免费的流行软件（最好的版本）打包在一起，一次性安装到你的机器，支持 Windows7，Vista 和 XP。

Support Details （强烈推荐）
假如你想让你的用户提供他/她所使用的浏览器环境，比如 Flash 版本，操作系统，屏幕分辨率，Cookie，JavaScript 状态等，可以让他/她访问一下这个站点，这个站点或自动将这些内容探测出来，并允许用户现场通过邮件将报告发送给你。

MugTug’s Darkroom
一个在线图片处理程序，可以调整对比度，白平衡，曝光，饱和度等，可以从 Picasa 及 Flickr 上传图片，同类产品：Pixlr 及 Sumo Paint。

Visual Website Optimizer （强烈推荐）
Visual Website Optimizer 绝对是你所能见到的最好的 A/B 测试工具。

Keyonary
这个简单的在线工具可以帮你列出 Mac OS X， Photoshop 等工具的快捷键清单。

gridr buildrrr
一个在线网格设计工具，选择你希望使用的网格布局，帮你预览并生成 CSS 代码。

Instant Blueprint – Create a web project framework in seconds.
帮你瞬间生成一个 Web 项目框架，基于合法 HTML/XHTML 和 CSS。

Hummingbird
一个实时的（真正的实时，每秒刷新20次）站点流量分析工具，基于 Node.js.

jsFiddle
在线 Web 编辑器，支持 JavaScript, MooTools, jQuery, Prototype, YUI, Glow, Dojo, HTML 以及 CSS。

String: create a multi-language website or app
帮你创建多语种 Web 应用的资源文件，

Titanpad
可以多人同时编辑同一个文档，别的改动会实时以不同颜色标识，可以是同一个办公室的多个用户，也可以是地球另一边的多个用户。

Pixelnovel Timeline: Version Control for Adobe Photoshop
该工具通过插件方式集成 Subversion 客户端，可以在 Photoshop 中实现版本控制。非免费工具。

0to255
给出一种颜色，会帮你列出这种颜色由浅入深的各种颜色变化，并特别针对 Web 做了优化。

Load Impact: Website load/stress test
一个在线压力测试工具，模拟多用户同时访问你的站点，并出具报告以分析你的站点可以支撑的访问者数量。

Ideone: Online IDE & Debugging Tool
一个在线 IDE 和调试工具，支持多达40种语言，包括 C++, Java, JavaScript, Perl, PHP, Python and Ruby，同类产品：PHP Anywhere 以及 CodeRun 。

Online Dummy Image Generator
快速帮你生成一个在线虚拟图片，以便您进行某些测试。

HiFi RegExp Tool
在线正则表达式工具。

Tableizer （推荐）
将你 Excel 表格中的内容复制粘贴到这个站点，它会帮你生成 HTML 格式的表格（HTML Table）。

FollowUpThen: Easy Email Reminder
-假如你希望有人提醒你什么时候该做什么事，你可以给比如 1day@followupthen.com 一类的地址发个邮件，1day 表示一天后，这样，一天后，你会收到他们的提醒邮件，1day 可以改成人和别的时间间隔。

Divine: Conversion tool from PSD to HTML
这个工具是一个 Photoshop 插件，可以将你的 PSD 转换成 WordPress 主题。（译者：有待验证）

Kaleido
为你的代码创建视觉化标识。来自麻省理工。

Sketchpad
一个强大的在线图像编辑器。难能可贵的是，这是基于 HTML5 的。

Unicode code converter
虽然界面有些乱，但这个工具能把一段文字转换成各种编码形式。

Grid System Generator
另一个网格设计生成器。

ud.com namecheck （强烈推荐）
这个看似简单的工具，可以帮你查询某个名字是否还可以注册域名，商标，已经社会媒体网络入口。

Typograph — Scale & Rhythm
这个工具可以帮你即时预览各种不同的 Web 排版效果，并生成代码。

ColorBrewer Intro – Selecting Good Color Schemes for Maps
适用于地图的配色工具。

CSS Inliner Tool （推荐）
将独立的 CSS 定义转换为 Inline CSS。假如你使用电子邮件进行营销，会发现这种工具非常实用，因为邮件客户端常常会将你独立的 CSS 代码过滤掉，而 Inline CSS 不会被过滤。

HTML Purifier – Filter your HTML the standards-compliant way!
这个使用 PHP 设计的工具，可以对你的 HTML 代码进行过滤，去除其中的恶意代码，并按 W3C 标准对代码进行净化。

Rendera
在线编写 HTML5 和 CSS 代码，现场看到效果。

RegExr
又一个在线学习，体验，测试正则表单式的地方。

try ruby! (in your browser)
Ruby 在线体验。

Google Command Line
使用命令符访问 Google 的一些产品和服务。

Tiny Fluid Grid
又一个网格设计工具，很小巧。

Fonolo.com
这个很别致的站点，可以帮你快速接通那些大公司的免费技术电话，不过目前只能用于美国和加拿大。

Producteev: Creating To-Do Lists with Emails （推荐）
把重要的工作安排发到 task@producteev.com，他们会帮你生成一个任务列表，以便安排你的日程。

AddUse – User research made easy
一个在线用户测试或调查管理工具。

bookwhen （推荐）
帮助你的用户在线预订你的展会，课程等服务，免费版支持150个项目以及每月300个预订。

本文国际来源：Smashing Magazine 50 Powerful Time-Savers For Web Designers （原文作者：Vitaly Friedman）

1. 页面基本结构和命名约定
2. assets 目录组织和文件命名规范
3. TBra 使用说明

Basic Style Platform

1. 样式重置 reset.css
2. 栅格布局 grids.css 栅格使用说明
3. 基本样式 base.css

Taobao Common Styles

1. Box
2. 价格
3. 图片
4. 商品信息块
5. 按钮
6. 面包屑
7. 信息提示
8. 步骤条

Taobao Common Icons

1. 交易类图标
2. 会员等级
3. 杂类图标
4. …

Modules

1. 页头和页尾过渡版本v2简头v2
2. 反馈页面
3. 旺旺点灯
4. 日历
5. 弹出框
6. 卡盘
7. 排行榜
8. 标签云
9. 自动完成
10. 协议
11. 搜索
12. 级联列表
13. 就地编辑
14. …

Misc

1. 2008年Icons年终汇报

原文链接：http://assets.taobaocdn.com/tbra/dpl/

目录建立的原则

• 以最少的层次提供最清晰简便的访问结构
• 基本的文件我们用这些文件夹将其归类划分 [ css ] 、 [ images ] 、[ script ] 、[ fla ]

• 确保整个文件树的简洁有序，命名尽量采用简短英文，尽量避免简写、缩写，一律小写
• html 文档的扩张名均以 .html 结尾
• 每个栏目首页以栏目名命名

例如，积分商城下的首页 shop/shop.html

• 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔

例如，news_01.html

开发环境的统一

• 统一文档类型
  • HTML编码类型采用目前主流的 XHTML 1.0 Transitional 格式
  • 尽量采用国际通用的 utf-8 编码格式
• 避免因开发工具的不同所造成的差异
  • 编写前应事先声明开发工具
  • 避免因工具不同Tab键造成的缩进程度不同，统一使用4个空格位的缩进度
  • 避免过分缩进(一些常见的编辑器会对 <html> 标签下的 <body> 进行缩进)

CSS样式文档组织结构

通过合理有效的组织样式文档结构，控制样式文档的优雅降级，使得网站能更好的符合浏览器的解析要求，同时方便日后的维护工作。

基础样式 （base.css）//加载给所有页面最基础的样式

模块样式 （module.css）//同类页面及相似页面的共同样式

页面级样式 （list.css 、member.css 、shop.css 、service.css）

所有独立页面使用自己独有的样式文件，命名以页面功能或所在模块为基准

• 首页 的样式文档组织结构，如下：

//结合首页的特性，仅加载了base.css 和 home.css，文档home.css用来给予首页的独有的样式。

• 产品专区系列&列表页 的样式文档组织结构，如下：

//通过给product&list（产品专区系列&列表页）页面加载list.css样式文档，来提供给此系列独有的样式。

• 会员专区系列 的样式文档组织结构，如下：

//通过给member（会员专区系列）页面加载member.css样式文档，来提供给此系列独有的样式。

• 积分商城系列 的样式文档组织结构，如下：

//通过给shop（积分商城系列）页面加载shop.css样式文档，来提供给此系列独有的样式。。

• 客户服务系列 的样式文档组织结构，如下：

//通过给service（客户服务系列）页面加载service.css样式文档，来提供给此系列独有的样式。

• 以上样式文件均由上至下逐级加载，不可随意调换位置，后期新样式入应在其后置入。

HTML文档的布局规划

• 两栏第一种布局：主内容在左边，侧栏在右边，如下图

//将主内容content放置于左侧，使得用户能很好的聚焦于主内容content区块，这种布局将主内容content放在左边，辅助内容放置在右边以rightbar命名，如：产品专区系列页面 。

• 两栏第二种布局：主内容在右边，侧栏在左边，如下图

//将侧边栏放置于左侧，使得用户能很方便的操作以快速查看适合的信息，这种布局将主内容content放在右边，辅助内容放置在左边以leftbar，如：客户服务系列页面

• 通栏单列布局，如下图

//这种布局在container容器中仅放置了主内容content，减少干扰因素，提供清晰的环境，以便用户更快速的锁定进入下一步操作，如：产品介绍页。

Box盒模型

• 简洁的box，未添加任何前缀

//HTML代码部分

//有上面这段代码可以看出，我们通过更换box-skin-yel（yel在这里代表yellow）可以很方便的控制box的皮肤，注释fillet style所包含的代码部分用来控制圆角标签，如：投保指南页面下的“温馨提示”这个box

• 通过为box添加前缀ms，设置特定的盒子ms-box

//HTML代码部分

//这里的class=”lt”为左部圆角，class=”rt”为右部圆角，底部class=”ms-btm”可以用来添加扩展，如：更多链接。

Css Sprites拼合优化

• 通过Css Sprites有效的减小页面请求次数，如下图

//这里我们列举的是通过Css Sprites技术将多个图标拼合在一张图片上进行优化处理（具体规格为50px的等边网格分布），有效的将原本需要多次http request的页面请求，降为只需加载一次即可完成同类所需的全部加载，以提升网站的性能。

//上图为全站navigation的特效图片优化，同样的还有button的优化，优化的源文件保存在（../ Css Sprites拼合源文件）文件夹下。

Css语句缩写

• 颜色

color:#333333;    缩写为  color:#333

• 盒子（常用的四种写法）

property:value1;   //表示所有边都是一个值value1

property:value1 value2;   //表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3;   //表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4;   //四个值依次表示top,right,bottom,left

• 边框 (border)

border-width:1px;

border-color:#ccc;

border-style:solid;

可以缩写为一句: border:1px solid #ccc;

• 背景 (background)

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

• 字体 (font)

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:”Lucida Grande”,sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

// 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

• 列表(list)

取消默认的圆点和序号可以这样写

list-style:none;

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif)

习惯的设立 （如注释、代码排列等）

• 注释
• 通过注释有效的组织管理代码文档，将相关的文档放归类在一起，以便阅读与修改，示例供参考

/**************************************/
/*                                  Globals                               */
/**************************************/

/***************************************/
/*                                   Header                                 */
/***************************************/

/***************************************/
/*                               Navigation                             */
/***************************************/

/***************************************/
/*                         Main Content                               */
/***************************************/

/***************************************/
/*                                     Footer                                */
/***************************************/

//这里将多个CSS文件合并在一个文档，以便通过减小请求次数，达到优化的目的。

• 通过适当的注释将合并后的文档进行有效的组织管理，方便日后查找、维护
• 尽量避免特殊符号的使用

• 代码排列及结构

所编代码按照字母的排序A-Z来编写，如下面的例子：

div.test1 {

text-align: left;

margin: 5px;

z-index: 1;

padding: 0 8px;

border: 1px solid #ccc;

}

div.test2 {

border: 1px solid #ccc;

margin: 5px;

padding: 0 8px;

text-align: left;

z-index: 1;

}

//在多行代码的情况下，按照字母排序(如div.test2)来编写的代码，会更易于查找

• 代码结构上配合上一条提到的字母的排序方式，采用多行编写，对于一个标签下的CSS属性 ≤3 时，我们将其编写在同一行内，合理的节省空间
• 每个标签的后面和左花括号之间加上一个空格便于区分查找

例如，div.test1 { 中 “div.test1” 和 “{“ 之间用空格隔开

• 每个Css属性后面加上均分号，即便是一组属性的最后一个，避免后期添加因遗漏而导致的错误

根目录下的 readme.txt

• 详细记录了web开发过程中的更新内容；
• 首次更新对重要文档给出适当的解释（重要文件的关联部分)

PS：box部分用了position属性来实现圆角，这样一来在IE6中不得不去添加width属性以解决错位问题(但并不是所有)
下次在更新这里吧，阴雨天睡觉看起来是个不错的选择O(∩_∩)O~

font-family:"Microsoft Yahei"; 

也可以是对应的unicode

font-family:"\5FAE\8F6F\96C5\9ED1";

但微软雅黑对应的unicode2即&#x5FAE;&#x8F6F;&#x6B63;&#x9ED1;&#x4F53;写在样式文档里是没有效果的，因为unicode2是以文本形式输出的，这个可以将对应的unicode2放到html文档中尝试一下，对应输出微软雅黑四个字

有时候找起来还真是麻烦，索性将找到的整理了一下在这儿种下，暂放这么多。

概要：

• 在线工具集
• 常用Firefox插件
• IE下的调试工具
• 参考手册
• 批处理工具
• IDE及其他工具
• Bookmarklet
• 前端开发者社区及权威网站
• 推荐订阅的博客和网站
• 前端开发工具集

在线工具集

• 书籍类：
  • Book Shelf 2.0 beta —— 荐，分类很清晰，下载很方便
  • Book Go!
  • 原版图书免费下载链接收集站
  • 51CNNET.NET
• JavaScript类：
  • Beautify JavaScript —— JavaScript格式化工具，效果很理想
  • AJAX Libraries API
  • Regex Tester
  • Compressor Packer —— 以前一直用这个压JS，自从有了TBCompressor，就放弃他了
• CSS类：
  • CSS选择器性能测试
  • CSSTidy —— CSS格式化工具
  • CSS Compressor  —— CSS压缩
• 其他：
  • GUID 生成器 —— 做某些东西(Firefox插件)时需要唯一资源标志符时用
  • W3Counter
  • WebWait – Benchmark Your Website

常用Firefox插件

• 支付宝安全控件 和 旺旺协议 —— 网购专用，Firefox+浦发网银，无敌了
• Firebug —— 这个不用介绍了吧，附空帏的外部编辑器乱码修正版
  • Firecooike —— 支持Cookie的查看和编辑
  • Jiffy —— 调试性能的，用起来比较麻烦，没试过
  • YSlow —— Why Slow? YUI出品
  • Pixel Perfect —— 把设计稿直接拖到Firefox里进行对比
  • Rainbow for Firebug —— JS高亮，性能不是很理想
• Fiddler 开关 —— 简化在Firefox里切换Fiddler的操作，感谢Taobao UED的空帏同学
• Web Developer
• DevBoi —— 把Html, Dom, JavaScript等手册放在侧栏里，可以自定义增加，快捷键Ctrl+F9。可以在这里找到更多的Package。
• RefControl —— 针对每个站点发送想要的HTTP Referer
• GreaseMonkey —— 看某个网站不爽，写个小脚本来优化下还是不错的
• HttpFox —— 查看当前Http链接状态，类似IE下的HttpWatch
• User Agent Switcher —— 切换User-Agent，同时开发iphone和web版本的时候很方便
• FoxyProxy —— 穿墙工具，配合专业代理公布器使用很和谐

IE下的调试工具

• Fiddle2 —— 非常强悍的一款http流查看工具，默认支持IE，其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件。
• IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能，IE8自带了一个加强版的。
• Microsoft Script Debugger + Companion.JS —— 调试JS用，虽然报错还是有误差，但是我已经满足了。安装顺序是：Microsoft Script Debugger，Companion.JS，在”IE选项-高级”里取消禁用脚本调试。
• 多版本IE共存两种方案：
  • IE7/8 + IE Tester —— 大众型配置，可以基本满足日常需要。
  • IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代，我还是推荐这种方案，因为只有神奇的原装IE 6，才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话，建议再装个IE 8 + IE Tester，因为IE 8下的Developer Toolbar还是有很大改进的，调试起来会方便一些。
• 以下三个软件相对不重要些：
  • HttpWatch —— http流查看
  • Instant Source —— 可查看JS生成的源码
  • NetLimiterPro —— 网速限制

参考手册

• XHTML、CSS & DOM W3C 手册 —— 玉伯整理的版本，包含了W3C手册以及其他有用的资料。
• 苏昱的CSS中文手册和Dom中文手册
• JScript语言参考
• XML指南
• XMLHTTP参考手册
• jQuery 1.2.6 API和jQuery and jQuery UI Reference 1.2
• Apache 2.2 中文版参考手册在线版
• MySQL 5.1 参考手册 (在线版)
• PHP手册
• YUI Cheatsheet
• Cheat Sheet Roundup – Over 30 Cheatsheets for developers
• 23个Cheatsheet打包下载

批处理工具

• TBCompressor —— 淘宝UED的JS/CSS压缩工具，详见玉伯的介绍
• pngOptimizer —— png优化工具
• jpegTran —— jpeg去冗余meta工具

IDE及其他工具

• Editplus v301 汉化版
• Tortoise SVN
• 移动版本的 Apache + PHP —— 灰常灰常好用，灰常灰常移动，见明城的说明
• …

Bookmarklet(右键另存)

• Firebug Lite —— 官方介绍
• Xray —— 官方介绍
• MRI —— 官方介绍
• ‘+ window.document.documentElement.outerHTML+ ””>查看生成的源码，‘+ window.document.documentElement.outerHTML+ ”);})()”>打开新窗口查看生成的源码 —— for IE

开发者社区及权威网站

• Mozilla Developer Center (MDC)
• YAHOO! Developer Network (YDN)
• Dev.Opera
• Apple Developer Connection
• MSDN
• IBM Developers中国 (Web 前端开发技术专题)
• WebKit
• AOL Developer Network
• SlideShare – Share PPT —— 在线PPT分享，资源丰富
• Google Doctype —— Web开发人员的百科全书
• W3C (香港，中国)
• Position Is Everything
• HTML Dog
• 维基百科

推荐订阅的博客和网站(排名不分先后)

• 国外
  • 内容聚合：A List Apart，Ajaxian，Smashing Magazine，456 berea street，Script & Style，CSS Globe，CSS-Tricks，SitePoint
  • 团队Blog：Yahoo! User Interface Library (YUI)，IEBlog
  • 个人Blog：John Resig，PPK: QuirksMode，Douglas Crockford，Dean Edwards，Nate Koechley，Julien Lecomte，Eric A. Meyer，Andy Budd，Steven Levithan，HedgerWow
• 国内
  • 内容聚合：Blueidea，无忧脚本，网页设计师(W3CN)，JavaScript教程网
  • 团队Blog：淘宝，口碑，阿里巴巴国际站，阿里巴巴中文站，阿里巴巴中文站前端开发团队(方凳)，阿里妈妈，支付宝，阿里软件，19楼，九天音乐，金蝶与友商网
  • 个人Blog，这里列出的是原创并更新相对频繁的博客，如有遗漏，请告之(sorrycc#gmail.com)：怿飞，手气不错，Realazy，old9(需穿墙术)，沙滩凉鞋(空帏)，射雕(玉伯)，Aether，振之，嗷嗷，JunChen，爆牙齿，秦歌，克军，5key，小志，Rage(正淳)，麦鸡，云烈，老冒，番茄红了，Joyqi，卢力，CSS森林(Ghost)，Twinsen，Gulu77，Rlog，Dlog，子鼠，西风坊 …

PS：整理好时间，上路吧，已经老大不小了，耽搁不起的