前端工程师必备：细数那些好用的网站开发工具

来源： 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，会得到不错的配色参考，也方便进行各种配色方案的测试。

注：文中图片来自网络

相关文章

• 基于用户投票的排名算法：Stack Overflow
• 如何招聘一个能干活的程序员
• 为程序员准备的7个社交网站
• 从测试300万个超链接接学到的
• 我是如何在Stack Overflow找到工作的
• 改善网站设计，提升转化率
• 关于网页导航的一些建议
• 为什么说设计是网站的肢体语言？
• 如何恰当地给网站改版？
• 10个网站加载时间比较和测试工具

前端工程师必备：细数那些好用的网站开发工具，首发于 博客 - 伯乐在线。