前端开发工程师如何在2013年里提升自己——阅读笔记（三）

2019独角兽企业重金招聘Python工程师标准>>>

二. 工作方式（Workflow）

第一篇文章：Tooling for the Modern Web App Developer, Addy Osmani

web开发中需要使用的工具包括：

1. 浏览器+开发者工具：浏览器内嵌的开发者工具。以chrome的开发者工具为例，可以用Timeline来观察性能，用Profiles查找内存泄露和DOM泄露。
2. 文本编辑器
3. 终端
4. 设备

两个链接：

1. The New Wave Utility Belt (FOWA)
2. Yeoman

第二篇文章： A Modern Web Designer’s Workflow, Chris Coyier (Video)

首先作者推荐了几个网站：shoptalkshow.com、codepen.io和css-tricks.com，这几个网站在之前的文章中也有作者推荐。

作者总结的开发网站的几步：

1. 在photoshop中设计：从subtlepatterns.com中选择合适的背景，dribbble上也提供很多非常棒的设计素材（还可以到web开发人员招聘网站authenticjobs.com上招聘合适的设计人员）
2. 开发环境的搭建：
   1. 本地开发：用MAMP Pro搭建Mac+Apache+MySQL+PHP的开发环境
   2. 协作开发：Local-->Tower（Mac上的git客户端）-->Beanstalk（免费的SVN服务）-->Server或者Local-->Tower-->Github（版本控制）-->Capistrano（部署Web应用到服务器）-->Server
3. 代码编辑器：Sublime Text2
4. 代码开发：对代码进行处理，可以借助于一些框架如CSS框架Compass。这里作者推荐web开发的全能神器CodeKit。
5. 性能：压缩样式表、脚本、图片，作者推荐了一些辅助工具：
   1. LiveReload是一个很棒的Web开发辅助工具，它可以让我们在修改完HTML、CSS、JavaScript或是图片文档后，立即在浏览器上看到成果，而不需要重新整理页面。
   2. SoFresh与LiveReload类似，也是不必刷新浏览器便自动显示CSS修改之后的效果。
   3. PNGGauntlet：PNG图片压缩工具
   4. GZip：HTTP压缩工具
   5. gzipWTF：检测使网页变慢的原因，查看哪些资源没有被gzip压缩
   6. Boilerplate：HTML5前端模板
6. 缓存（cache）：
   1. 服务器端：下载插件
   2. 客户端：设置失效头部（expires header）
7. 测试：在不同版本的浏览器下面测试网站效果

   	过去	现在	将来
   Safari	michelf.ca/projects/multi-safari  （无法打开）	support.apple.com/ downloads#safari	nightly.webkit.org
   Chrome		google.com/chrome	tools.google.com/dlpage/chromesxs
   Firefox	（1）davemartorana.com/ multifirefox （2）ftp.mozilla.org/pub/ mozilla.org/firefox/releases	mozilla.org/firefox	nightly.mozilla.org
   Opera	www.opera.com/browser /download/?custom=yes	www.opera.com	www.opera.com/browser/next

   测试IE浏览器，作者推荐了一个在线测试网站www.browserstack.com/
   

上一篇文章：前端开发工程师如何在2013年里提升自己——阅读笔记（二）

下一篇文章：前端开发工程师如何在2013年里提升自己——阅读笔记（四）

转载于:https://my.oschina.net/warmcafe/blog/99905