前端工程师必备：细数那些好用的网站开发工具
- - 博客 - 伯乐在线Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App，其中包含各类字体库、代码库、插件库、配色方案和测试工具. 他同时指出，Web开发环境将慢慢转向云端. CodeVisually是一个开源项目. 在它的分类目录下有各种插件、 模板、 主题和脚本程序，你可以找到很多有用的 JS 库，也为WordPress开发人员提供了框架和模板.
前端工程师必备：细数那些好用的网站开发工具
标签：
工具与资源
CodePen
CodeVisually
CSS
snippets
Pictaculous
| 发表时间：2013-04-17 11:02 | 作者：刘志成
出处：http://blog.jobbole.com
来源： pingwest
Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App，其中包含各类字体库、代码库、插件库、配色方案和测试工具。他同时指出，Web开发环境将慢慢转向云端。
CodeVisually是一个开源项目。在它的分类目录下有各种插件、 模板、 主题和脚本程序，你可以找到很多有用的 JS 库，也为WordPress开发人员提供了框架和模板。如果你是一个jQuery框架或JavaScript 爱好者，那么你一定要经常去CodeVisually上看看，你会发现有许多新的插件能够为你的网站增添一些令人振奋的功能。同时，通过用缩略图形式显示插件也帮助你能比在 GitHub 或其它代码库中更好的整理它们。
Cmmntr是日本开发者Motoshi Goto面向Web设计中的新闻和热点问题所搭建的网站。网站中的资源主要是一些教程和插件，也包含一些很棒的Demo演示和开源项目。Jake Rocheleau说，他最喜欢Cmmntr的一点是——它将相似的资源都整合在一起，并列出了详尽的比较，例如 CSS DB框架。总体来说，Cmmntr有着很高的文章和丰富的开发资源。
这项Google的 网站字体资源是免费的并且兼容各个 浏览器，因为只是从 Google 引入了一个字体库的 link 样式，无需担心像各个浏览器对 CSS 解析不同导致各种bug。同时，无需引入 JS，那么即使用户 PC禁止加载 JS，也不会影响 Google 字体库的使用。另外，WordPress博客可以使用WP Google Fonts插件方便的更改字体。
Jake Rocheleau认为 Stack Overflow是能够帮助网站开发者解决困难的最好的问答网站。除了用户回复意愿很强烈外，这些答案也很少会被删除，利于开发者归档和搜索。Jake Rocheleau说，通过在Google里搜索问题并加上stackoverflow.com作为关键字，可以找到许多靠谱的解决方案，他在编码中90%的疑问都可以通过这种方式得到解答。
Web App—— CodePen是一个云端的Web集成开发环境。它提供了非常多的效果，也有开发者不断开放自己的demo和代码给他人使用。开发者只需选择不同的效果就可以轻松搭配出想要的网站页面，也可以在这些Demo的基础上自己开发。它的另一个好处是——你可以将自己做的demo都以书签的形式存于CodePen中，当你像他人展示时可以方便调用，而无需再将代码上传到服务器中。
如今，越来越多的用户开始通过平板电脑和手机来查看网页，针对移动产品的网页效果测试就成了一个非常重要的领域。在 iPad Peek中，你只需选择你想测试的设备（包括iPhone 4、iPhone 5和iPad的横竖两种屏幕模式），就可以在PC上查看他们在不同移动设备上的呈现效果。
Web设计师Chris Coyier的博客中有单独的一个页面—— CSS snippets专门搜集那些可以被经常使用的CSS代码段，利用像Coda这样的网页编辑应用，你就可以将这些代码段归档整理。这帮助Web开发者可以节省大量的开发时间，另一个相似的工具还有Eric Meyer建立的 CSS Resets，它更适合保存网页局部效果的代码。
Pictaculous是一个思路非常新颖的网站，当你上传一张图片到Pictaculous时，它会帮助你选择最合适的配色方案。所以，当你设计一个新的网站，尤其是要根据一些限定的Logo的搭建时，将它们上传到Pictaculous，会得到不错的配色参考，也方便进行各种配色方案的测试。
注：文中图片来自网络
相关文章
相关 [前端 工程师 网站] 推荐：
前端工程师技能汇总
- - 博客园_新闻还记得@jayli 的这幅前端知识结构图么. 缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个 github 项目. 我们可以通过协作的方式来共同维护这个项目. Git 的历史记录也可以见证前端行业的一些变迁. 尽管会变成文字的方式来维护这些内容，但是我承诺写一个小工具帮大家生成更好玩的图形（基于 DataV 项目）.
【xxx】前端技能汇总（Jackson Tian） 前端工程师们，珍重！
- - 王跸西的生命体验blog-WangBiXi.comFrontend Knowledge Structure 项目起源. 还记得@jayli 的这幅前端知识结构图么. 缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个github项目. 我们可以通过协作的方式来共同维护这个项目. Git的历史记录也可以见证前端行业的一些变迁.
前端工程师的编码遭遇战
- Zacky - Taobao UED Team导语：由于历史原因，淘宝网的页面编码一直都是gbk，F2E手册中也有明确规范，刚开始的一段时间，F2E们并未遭遇太麻烦的乱码问题，大家相安无事，但随着淘宝的合作方越来越多，合作方的API接口编码可谓五花八门，淘宝的系统和第三方的数据对接之后就暴露出各式各样的乱码问题. 我想，可能是在做第一个淘宝网的页面时，工程师只顾写代码，而忘了看一看编辑器的默认编码设置，再后来就将错就错直到今天，如果稍微留神，可能就不会犯下这么一个低级错误.
黄锦诚：前端工程师新手必读
- - 博客 - 伯乐在线公司招了几个刚毕业的学生，作为 重构的新手让我来带. 首先感谢感谢党、感谢国家、感谢公司给了我这样的一个机会，对我工作的肯定和认可，让我带这样的一个重构团队，同时我也明白任务的艰巨，但我一定会将工作做好，不负公司对我的期望. （哈哈，好像从小到大，老师都是教育我们要这样先说的. 在网站的发展史上，初期的网站建设根本不需要网页重构这个职位，WEB1.0时代的网页，只需要 程序员，一堆堆的表格嵌套就完成，或者美工进行配合完成，先由美工负责设计好，再用一些自动化的软件拉伸几下，直接将设计好的图就可以通过软件输出表格的布局了，根本不需要重构这个多余的职位.
支付宝、腾讯前端开发工程师谈实战HTML5
- - 脚本爱好者如今大热的 HTML5 到底美在哪里. HTML5到底能为实际的移动开发带来哪些改变. 来自支付宝和腾讯的前端开发工程师们有他们自己的看法. 上周，在一场名为“技术风云会”的定期讨论活动中，HTML5小组杭州联盟的同学、阿里巴巴集团 HTML5 爱好者，以及支付宝浙大校友会的会员集中讨论了 HTML5 对前端开发带来的直接改变.
前端工程师的编码遭遇战
- - 博客 - 伯乐在线导语：由于历史原因，淘宝网的页面编码一直都是gbk，F2E手册中也有明确规范，刚开始的一段时间，F2E们并未遭遇太麻烦的乱码问题，大家相安无事，但随着淘宝的合作方越来越多，合作方的API接口编码可谓五花八门，淘宝的系统和第三方的数据对接之后就暴露出各式各样的乱码问题. 我想，可能是在做第一个淘宝网的页面时，工程师只顾写代码，而忘了看一看编辑器的默认编码设置，再后来就将错就错直到今天，如果稍微留神，可能就不会犯下这么一个低级错误.
前端工程师面试问题列表
- - 博客 - 伯乐在线前言：@ darcyclarke 在 GitHub 上分享了一个 repo，其中包括了不少前端面试问题，可用于检验潜在的候选人. 绝不推荐在单个候选人身上用上所用的问题（那样会花费好几个小时滴）. 从这个列表选择一些，应该能从候选人身上，检测出你所需要的技能. 请记住，下面的很多问题都是开放式的，无标准答案，并能引发有趣的讨论.
前端工程师的价值体现在哪里？
- - 博客 - 伯乐在线注：原问答贴来自 知乎，由 CSDN整理. 这是一个很老的话题“前端工程师的价值体现在哪里. 有人说：“前端工程师之于网站的价值犹如化妆师之于明星的价值. ”一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度. 当然，Web前端工程师并不是设计师，每天接触最多的是代码，代码，还是代码.