前端开发大众手册(包括工具、网址、经验等)

Por chencheng — 39 条评论 »

一直觉得前端开发缺个手册，这是个体力活。不过总得有人来干。

今天闲来无事，把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，可以直接留言，也可以发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字，因为以下资源对于高手来说可能早就很熟悉了。

另外想提一句，工具是死的，好不好用得看你会不会用。比如Firefox、Fiddler等，除了显而易见的功能以外，都有一些小的技巧，掌握了可以让你事半功倍。

更新记录：

  • [20081025] 第一版

快捷导航：

另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询。数据放在线上(Google AppEngine)，速度应该会有保证，更新也会比较方便哈，见图。

在线工具集

常用Firefox插件

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还是有很大改进的，调试起来会方便一些。
  • 以下三个软件相对不重要些：

参考手册

批处理工具

IDE及其他工具

Bookmarklet(右键另存)

开发者社区及权威网站

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

En: 资料汇总 — 10月 25, 2008

Trackbacks

Para hacer un trackback a este post usa esta URL

评论列表

Los comentarios de este post en RSS

  1. 支持你！

    bob - 10月 26, 2008 @19:38

  2. 下载手册，box.net提示This user is out of bandwidth.

    bob - 10月 26, 2008 @19:40

  3. 多谢提醒，已修正

    chencheng - 10月 26, 2008 @19:52

  4. 好强大。。。

    hauy - 10月 28, 2008 @06:49

  5. Firefox下的菜单快捷(D)和地址栏冲突，我无法 Alt+D 快速定位到地址栏了

    kevin - 10月 29, 2008 @19:27

  6. @kevin 按F6多好啊，记录一下，下个版本改进

    chencheng - 10月 29, 2008 @19:29

  7. @chencheng

    发现淘宝工程都有写博的习惯，尤其搞前端的。

    ps：我刚做过评论，怎么cookie记不住我的用户名？

    kevin - 10月 29, 2008 @19:40

  8. 呃…感谢分享
    十分感谢

    vsky - 11月 13, 2008 @04:37

  9. ¿Añadir la URL de tu blog?

    firefox评论区域，出现乱码?

    额，我是来感谢博主提供的Yslow插件的……

    cuikai - 12月 7, 2008 @19:52

  10. [...] 陈成的博客 — 前端开发大众手册(包括工具、网址、经验等) - [...]

    Bookmarks for December 23rd from 10:24 to 10:42 - 12月 22, 2008 @20:09

  11. very good

    yaosl - 12月 25, 2008 @06:54

  12. [...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]

    如何做好一份前端工程师的简历？ @ 随网之舞 - 02月 16, 2009 @09:41

  13. so酷~~ 辛苦啦。先收藏。有空再细看。

    ※潇洒※ - 02月 25, 2009 @03:00

  14. [...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]

    口碑UED:如何做好一份前端工程师的简历？ | TechUED - 03月 14, 2009 @06:11

  15. 强大啊 学了很多 支持楼主

    牛： - 04月 6, 2009 @18:39

  16. [...] 春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。 一、你是前端工程师 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。 二、内容为王 个人信息  姓名 （必需）  性别 （必需）  年龄 （必需）  联系电话 （必需）  学历及学位 （必需）  薪资期望  个人照片  邮箱  Blog  外语能力  职业技能  HTML、CSS、JavaScript/ActionScript等  Web标准、可用性、可访问性  一门非前端脚本的语言(Java、PHP、Python、C#等)  任何有利于前端开发的技能和兴趣  职业和教育经历  起始时间、单位名、职位（学位）和收获  简而精  按照时间倒序排列  代表作品  能体现自己现在前端技能或者重要经历的作品  简而精，且可以简要附上自己在这个作品中的收获  和别人合作的作品要注明自己具体完成的内容  在线链接要测试以保证可用，如果有其他人的变更应注明，较大变更就无需提交了  提供附件要注明与之对应的文件名  按完成时间倒序排列  依据实际情况，代表作品也完全可以直接融入到职业技能和经历中体现。当然内容不仅仅是这些，可以任意增加能体现前端工程师职业素质的信息。 三、Web是平台 毫无疑问，Web才是真正的平台，当这个平台的后端逐步被云所统治时（Amazon的很多服务和Google App Engine都初见端倪），那么云端的用户代理（比如浏览器）就是前端工程师的战场。前端工程师是可以长期从事且有前途的职业。 简历作为前端工程师迈向新征途而提交的第一份作品，应该毫不迟疑的用它来体现其专业技能和职业精神，所以Web页面是前端工程师简历的最好载体。它能体现前端工程师诸多专业素质： 知道为什么选择的DTD是下面中的一个而不是其他，这是对  HTML标准 的理解和思考 。   针对内容选择合适的HTML标签，合理的id和class命名，尝试使用 微格式 ，这是对语义化的理解和思考。  至少兼容 YUI中列出的A-grade浏览器 ，这是对跨浏览器和CSS Hacks的理解和思考 。  虽然Web性能在大访问量下才比较容易凸显，但把尝试把 YAHOO性能团队的34条最佳实践 应用上，一定会小中见大且受益终生的 。  JavaScript的应用  简历的信息结构一般很简单，但是这并不意味着无法使用JavaScript来增强它的交互。找出其JavaScript技能和简历相互结合的地方。  可以尝试使用某种框架（YUI、jQuery、Prototype、Mootools等），很明显框架能提高我们的开发速度，掌握至少1中优秀的框架能增强我们的价值。  可以利用JavaScript做出几个彩蛋在简历里面么？  实现结构、样式和行为的分离。  理解和体现DOM Scripting、预留退路（Graceful Degradation）、渐进增强（Progressive Enhancement ）、无侵入的JavaScript（Unobtrusive Javascript）等思想。  空帷翻译的《理解“渐进增强(Progressive Enhancement)》是篇这方面的好文章。 可访问性，在这上面每一步的深入研究和应用都值得赞赏。  HTML5、CSS3、SVG、Canvas甚至离线技术、安全技术都可以和我们的简历结合起来。列表When can I use… 提供了一些新技术在主流浏览器的支持情况。  打印样式，很明显前端简历不仅仅是其主管看，还有HR和大老板看，所以准备打印样式是很重要的，这不仅仅是技能问题，更是一种前端开发的素质。你需要知道，打印样式应该是黑字白底，且尽量少的装饰图片，因为现在的绝大部分办公打印机还是黑白的，且黑色更费墨，所以当你的简历是黑色背景时更应该注意这点。  简单设计，千万不要把你的简历搞一团糟，设计虽然不是前端工程师最重要的技能，但是良好的视觉设计更能体现前端工程师的价值，所以审美其实也是前端工程师的基础素质。如果对视觉设计感到困惑，你可以从看 《推荐给大家看的设计书》 开始。  四、细节决定体验 标识性的文件名，比如“秦歌的简历”、“秦歌的作品”，而不是“个人简历”、“我的作品”。  发完信后记得检查一下发件箱，确保没有忘记发附件。  简历和众多作品整体打一个包。不要一个大包里面无数个小包。且整个包应该整理过，去掉垃圾，不应该太大。  不要重复发邮件，特别是拒绝以后，还发一个同样的邮件，除非一段时间后你有较大进步。  检查链接有效性，无效链接很伤感情的，可以使用Firefox的插件LinkChecker或  Pinger。  实际上，前端工程师的工作成果是直接面向千万用户的，他直接决定了最终的用户体验，所以每个细节都至关重要，就像JavaScript编程一样，只要我们掌握 良好的风格要素，我们就能避免很多错误，实际上这个思想贯穿整个前端开发的始终，包括制作简历。 我很喜欢有个人blog的应聘者，因为通过其blog不仅仅可以看出他的前端技能、工作积累、职业素质和分享精神，同时他通过维护blog可以贯穿一个简单开发的始终，从内容、交互、视觉、前端一直到后端维护，而这些角色都是前端在开发过程中的上下游，需要经常协作，这种经历能使前端更高效的沟通和更务实的换位思考。同样，当我推荐前端的简历应该是以Web页面为载体时，也是基于这个想法，并适当的给出一些相关知识以备有兴趣的朋友朝这个方向走下去。虽然我的建议偏向于“HTML+CSS+JavaScript”方向的前端工程师，但实战中肯定有更多能够在简历中体现前端的技能和创意，这本身就是抛砖引玉，这仅仅是一个开始。 简历很重要，但人品、职业精神和专业的前端技能更重要，最重要的是这两者是相辅相成的。虽然很羡慕兄弟团队淘宝UED、支付宝UED 和 阿里巴巴B2B国际站UED能有创意、时间和精力搞出那么精致的招聘站点，但我更希望我未来的同事用技能、创意、时间和精力整出一个巨牛的前端工程师简历来震住我（kaven.yan@yahoo.com）吧。 This entry was posted on 星期五, 四月 17th, 2009 and is filed under 前端技术. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. « 腾讯页面重构招聘试题 [...]

    舟 » Blog Archive » WEB前端工程师简历 - 04月 16, 2009 @19:44

  17. Book Shelf 2.0 beta —— 荐，分类很清晰，下载很方便
    提供下载了吗？没有吧

    d - 04月 18, 2009 @00:22

  18. 移动版本的 Apache + PHP 以后会在以下的页面不定期更新 :^)

    http://code.google.com/p/gracecode/downloads/list

    明城 - 04月 18, 2009 @05:18

  19. 我能看看吗www.lovejk.com

    juzi - 04月 30, 2009 @02:44

  20. http://osteele.com/是不可遗漏的大牛之一。建议加上：）

    dyw - 05月 9, 2009 @23:45

  21. [...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]

    给老伙计转载写文字看看 :普照博客 - 05月 14, 2009 @23:30

  22. Great post! I’ll subscribe right now wth my feedreader software!

    KattyBlackyard - 06月 15, 2009 @04:36

  23. [...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]

    如何做好一份前端工程师的简历？（转） « RIA sky - 06月 21, 2009 @23:41

  24. http://regexpal.com/在线正则工具。
    这个也是相当有用的。

    dansion - 07月 3, 2009 @06:29

  25. 太强大了,谢谢分享啊

    vincent - 07月 9, 2009 @00:51

  26. [...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看 陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]

    如何做好一份前端工程师的简历 | CssRainBow.cn - 07月 22, 2009 @02:11

  27. [...] 前端开发大众手册(包括工具、网址、经验等) Filed in xThink « 上网本，购前调查 [...]

    Web 前端工程师 » Sea-X 海玄 - 10月 16, 2009 @06:37

  28. sorrycc,好几个链接都不能下载

    yobin - 11月 6, 2009 @01:07

  29. [...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]

    如何做好一份前端工程师的简历？ | 我是UED - 12月 18, 2009 @05:45

  30. [...] 在线工具集 [...]

    行骏-IT Player » Blog Archive » 前端开发大众手册(包括工具、网址、经验等) - 12月 25, 2009 @09:07

  31. [...] Frontend Engineering》 克军总结的“前端工程师应该关注什么”的思维导图中 陈成总结的《前端开发大众手册(包括工具、网址、经验等)》 YUI中列出的A-grade浏览器 YAHOO性能团队的34条最佳实践 [...]

    新年了，该整整了. | 样式共享，共同协作 - 01月 5, 2010 @08:47

  32. Some people can’t get know how to notice the doctoral thesis referring to this good post. Hence, I would recommend your superior release. Moreover, some of them shoulld look for the thesis writing.

    Ella22 - 01月 16, 2010 @21:41

  33. [...] 在线工具集 [...]

    郑羽的博客 » 前端开发大众手册(包括工具、网址、经验等) - 01月 19, 2010 @23:39

  34. 怎么没有 stevesouders 的。
    http://stevesouders.com

    myhere - 01月 21, 2010 @06:27

  35. It’s not so simply to make a pretty good essays written, first of all if you are occupied. I consult you to define buy essays and to be free from disbelief that your work will be done by writing service

    vuElla - 01月 22, 2010 @00:39

  36. [...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。 [...]

    钟爱一生 » Blog Archive » 如何做好一份前端工程师的简历？ - 01月 23, 2010 @01:11

  37. [...] 您在使用什么好的前端开发工具呢？ 还有其他前端总结的工具可以看一下，如云谦的http://www.chencheng.org/blog/2008/10/25/f2e-manual/，嗷嗷的http://www.aoao.org.cn/resource/ [...]

    前端开发工具整理 - Hi, I’m Adam Lu. - 01月 27, 2010 @01:36

  38. Hello! kddcegd interesting kddcegd site!

    Pharmg105 - 02月 1, 2010 @23:42

  39. Very nice site! cheap cialis http://oixapey.com/aqasar/4.html

    Pharmk782 - 02月 1, 2010 @23:43

发表评论


(obligatorio)


« 《iPhone 上的Web前端开发》PPT 分享
用google做了一个前端开发搜索引擎 »

关于

文档

最近发表

有情链接


Wordpress Themes & Dalarnas

陈成的博客 © 2010 — Algunos derechos reservados