技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 奋斗 --> 双屏显示提升前端开发10%工作效率

双屏显示提升前端开发10%工作效率

浏览:1743次  出处信息

    双屏不是什么新鲜事,不过相信国内前端工程师还是用单屏的多,前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和ALT-TAB的频繁键盘操作中?利用双屏显示让你从中解脱出来!我也刚用上了双屏开发,效率提升感觉值能有10%,所以来鼓动下大伙都来用双屏吧。

    windows的双屏显示有很多种模式,我用的模式是主屏辅屏模式,两个屏是独立的窗口,可以进行窗口全屏。桌面和任务栏之显示在主屏,可以把主屏的一个或几个窗口拖到辅屏上,并全屏显示。看下图,右边的显示器为主屏,拖了个FX到左边的辅屏在该屏幕中最大化。

    screen

    数数我们前端开发在工作流程中并行的全屏显示需求有多少个:

    1、视觉稿(JPG图/PSD图)

    2、编辑器(HTML文件/CSS文件/JS文件)

    3、浏览器(FX/IE6/IE7/…)

    这些窗口不需要同时都在打开状态。但在我们的工作过程中,总是有两到三个窗口需要同时打开着,并频繁的在两个窗口之间进行切换。

    在完成对项目中一张或多张页面的规划后,具体到单张页面的开发,页面可以被分成若干个小模块,开发就一个一个的完成这些小模块,从编写代码到浏览器测试通过。当进入到对小模块的开发阶段,双屏显示就发挥出了它的显示优势。小模块的开发可以分为以下几个阶段:

    1、看视觉稿,编写HTML结构。 - 这个阶段,主屏编辑器里编辑HTML文件,辅屏用FX的一个TAB来显示JPG视觉稿。

    2、看视觉稿,编写CSS结构。 - 这个阶段,主屏编辑器里编辑CSS文件,辅屏用FX的一个TAB来显示JPG视觉稿,放一把屏幕尺子量取尺寸。(这里会发生少量第三屏的需求,比如需要配合主屏开一个PS,在PSD文件里取色,也会在编辑器里切换到HTML文件上进行结构调整)

    3、看FX下的效果,修正HTML和CSS代码。 - 这个阶段,主屏仍然是编辑器,辅屏FX下开启第二个TAB,用于显示HTML页面效果。主屏编辑器显示CSS代码为主,偶尔切换到HTML代码调整。

    4、对比视觉稿和FX下的效果,继续修正HTML和CSS代码的像素级细节或者BUG。 - 这个阶段,是个三屏的需求,,我们需要在辅屏的FX下两个TAB,视觉稿和HTML页面来回切换来对比差异,并在编辑器里调整CSS代码,偶尔需要切换到HTML代码进行调整。

    5、看IE下的效果,继续修正HTML和CSS的细节和BUG。 - 这个阶段,我一般放在整张页面完成时,而不是单个页面完成时就去做。看大家的习惯了。这里也是多屏的需求,需要在视觉稿、FX、IE6、IE7、代码之间进行切换。

    我用的两个17寸普屏,不知道有没有用大宽屏开发的,想像下22寸或者24寸的屏幕,一个当两个来用也是可行的。而市面上流行的几百块钱一个19宽屏似乎当一个用多余,当两个用面积又不够点。

QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1