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

Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库、代码库、插件库、配色方案和测试工具。他同时指出,Web开发环境将慢慢转向云端。

1

CodeVisually是一个开源项目。在它的分类目录下有各种插件、 模板、 主题和脚本程序,你可以找到很多有用的 JS 库,也为WordPress开发人员提供了框架和模板。如果你是一个jQuery框架或JavaScript 爱好者,那么你一定要经常去CodeVisually上看看,你会发现有许多新的插件能够为你的网站增添一些令人振奋的功能。同时,通过用缩略图形式显示插件也帮助你能比在Github 或其它代码库中更好的整理它们。

2

Cmmntr是日本开发者Motoshi Goto面向Web设计中的新闻和热点问题所搭建的网站。网站中的资源主要是一些教程和插件,也包含一些很棒的Demo演示和开源项目。Jake Rocheleau说,他最喜欢Cmmntr的一点是——它将相似的资源都整合在一起,并列出了详尽的比较,例如CSS DB框架。总体来说,Cmmntr有着很高的文章和丰富的开发资源。

3

这项Google的网站字体资源是免费的并且兼容各个浏览器,因为只是从 Google 引入了一个字体库的 link 样式,无需担心像各个浏览器对 CSS 解析不同导致各种bug。同时,无需引入 JS,那么即使用户 PC禁止加载 JS,也不会影响 Google 字体库的使用。另外,WordPress博客可以使用WP Google Fonts插件方便的更改字体。

4

Jake Rocheleau认为Stack Overflow是能够帮助网站开发者解决困难的最好的问答网站。除了用户回复意愿很强烈外,这些答案也很少会被删除,利于开发者归档和搜索。Jake Rocheleau说,通过在Google里搜索问题并加上stackoverflow.com作为关键字,可以找到许多靠谱的解决方案,他在编码中90%的疑问都可以通过这种方式得到解答。

5

Web App——CodePen是一个云端的Web集成开发环境。它提供了非常多的效果,也有开发者不断开放自己的demo和代码给他人使用。开发者只需选择不同的效果就可以轻松搭配出想要的网站页面,也可以在这些Demo的基础上自己开发。它的另一个好处是——你可以将自己做的demo都以书签的形式存于CodePen中,当你像他人展示时可以方便调用,而无需再将代码上传到服务器中。

6

如今,越来越多的用户开始通过平板电脑和手机来查看网页,针对移动产品的网页效果测试就成了一个非常重要的领域。在iPad Peek中,你只需选择你想测试的设备(包括iPhone 4、iPhone 5和iPad的横竖两种屏幕模式),就可以在PC上查看他们在不同移动设备上的呈现效果。

12.09.09Web设计师Chris Coyier的博客中有单独的一个页面——CSS snippets专门搜集那些可以被经常使用的CSS代码段,利用像Coda这样的网页编辑应用,你就可以将这些代码段归档整理。这帮助Web开发者可以节省大量的开发时间,另一个相似的工具还有Eric Meyer建立的CSS Resets,它更适合保存网页局部效果的代码。

7

Pictaculous是一个思路非常新颖的网站,当你上传一张图片到Pictaculous时,它会帮助你选择最合适的配色方案。所以,当你设计一个新的网站,尤其是要根据一些限定的Logo的搭建时,将它们上传到Pictaculous,会得到不错的配色参考,也方便进行各种配色方案的测试。

注:文中图片来自网络

订阅更多文章