高效前端er必备技能

高效前端er必备技能

不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度也没什么进展。然后,只能晚上加班,在夜深人静时还得敲代码,苦逼。。。 如果我们的工作效率能高一点 ,那也就不会那边的苦逼了。下面是我的总结的一些提高前端工作效率的方法: 管理时间 所谓时间管理,就是关于如何高效的使用时间。如果要详细的聊如何做好时间管理,那足够写一本书了,呵呵。我就简要谈谈我的一点经验吧 做好计划。在自己效率高的时候,做一些难的事情;效率低的时候,做一些简单的事。 专注。在我们专注工作时,如果有人来打扰,可以和他沟通,如果事情不紧急,可以稍后来处理他的事情。 一段时间只做一件事情。当一件事做的告一段落,再做另外一件事,而不是穿插着做。比如,写页面时,我会先写 HTML ,再写 CSS ,再切图,再写js。 善用工具 善用工具,就是选择一个好用的工具,并且好好利用它。 善用工具可以 减少一些重复劳动。如 Compass 可以自动生成图片精灵(CSS Sprites ) 减少做一件事情的路径。如 cutterman 是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出,以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 从而提高我们的工作效率。下面具体的聊聊: 编辑器 在我看来好用的编辑器至少有以下功能 语法高亮 括号匹配 能快速定位 快速打开文件 在文件中查找 在文件夹中查找 跳至某一行 能安装插件 熟练用浏览器进行调试 主要包括 审查元素 打断点和条件断点 改变元素的状态,例如:hover,focus 熟练的使用浏览器的控制台 移动端调试:用PC浏览器模拟手机浏览器;在PC上远程调试手机页面的工具,推荐用Weinre 想了解更多好用的软件见这里。 项目模板 项目模板包括一个项目的文件结构,公共的一些资源,一些第三方的插件,构建工具等等。一个好的项目模板,能帮助我们进行快速高质量的开发。 推荐在 HTML5 BOILERPLATE 上做一些自己的定制。 如果是移动端的项目,推荐用 MOBILE BOILERPLATE。 我的项目模板,见这里,仍在完善中~ 快速的生成模板项目,推荐使用 Yo。 项目的组件页 创建一个项目的组件页,以便查阅参考。 可以参考bootstrap的。见这里 积累高质量的常用第三方组件,并自己写一些使用组件的demo 网上总是不缺各种第三方组件。其中不乏很多带很多坑的组件。所以,发现高质量的组件,那就赶紧mark吧。我积累了一些,见这里。 虽然很多组件都有官方写的demo。但看官方的demo总是需要花一些时间去理解。我的做法是,理解了官方的demo后,自己也写一些demo。那以后再次使用时,就可以看自己写的demo了。 积累些常用的代码片段 类似 http://css-tricks.com/snippets/ 。 如果编辑器是用的sublime的话,可以创建代码片段(snippets)。要再用的时候,只需输入几个键,就可以将代码片段输出。 最后,欢迎大家来补充~
阅读 1,573 次
告别手写代码,HTML5可视化游戏开发工具震撼发布

告别手写代码,HTML5可视化游戏开发工具震撼发布

昨晚,小编在朋友的推荐下,偶然得知一款HTML5可视化游戏开发神器:Egret Wing,因为小编也是不折不扣的HTML5迷,所以特此撰文力荐给钟爱HTML5的开发者朋友们,尤其是移动游戏开发者朋友们。下面先看下官网的介绍: 又是一年尾声,进入12月份,白鹭引擎以及行业的伙伴很快就会和2014年说声再见。这一年中,白鹭进行了Egret Engine内测,发布了Egret Engine1.0。不仅如此,Egret产品也收到广大HTML5游戏开发者的热捧,不少开发者用灵巧的双手,借助Egret引擎和工具,制作出数款深受大家喜爱的HTML5移动游戏。 Egret Wing让开发者彻底告别手写代码 现在,HTML5移动游戏在行业一致助推的大环境下,即将迎来市场爆发。作为开发者的你,是否已经做好准备,让HTML5移动游戏拥有更为丰富的内容,更具可玩性,甚至让HTML5移动游戏成为具备一流的中度,重度化体验? 在中度游戏和重度游戏开发中,开发者朋友必不可少的要制作大量游戏界面。根据行业者反馈的保守估计,这些界面制作时间会占用游戏开发中近50%的工作量。其中要面对的问题不仅仅是多种多样的界面元素,例如按钮,菜单等,更令人头疼的是大量分辨率适配和令人烦躁的反复修改的工作。 为了解决开发者面对GUI开发的难题,经过半年的准备和近两个月的内测活动,Egret 官方GUI可视化编辑器Egret Wing 1.0 Final正式和广大开发者正式见面。Egret Wing的正式版的发布,不但奏响了Egret即将以全新面貌走向2015年的号角,同时也标志着HTML5移动游戏开发,在未来将彻底告别枯燥的手写代码,迎来高效开发的全新时代。 Egret Wing全新功能助开发者实现高效开发 那么此次Egret Wing 1.0 Final为广大开发者带来了什么新奇的功能,它又是如何帮助开发者,实现高效开发的呢? 首先,Egret Wing 1.0 Final独创的可视化操作,让产品的GUI制作变得更加简单。Egret Wing采用全程可视化操作模式,将原有传统的GUI代码编辑操作转变为可视化操作模式,同时支持实时效果预览,让你在改变的同时看见最终的画面效果。借助Egret Wing,开发者可在GUI开发阶段提升数倍工作效率,让GUI开发不在成为枯燥无味的机械化工作。 其次,Egret Wing能够放手让策划与美术把控一切,让艺术更加艺术。Egret Wing开发团队针对界面交互体验反复优化,力争让用户交互变得更加简单、人性化。经过几个月不懈的努力,我们已经在用户交互体验上进行了大量创新性修改。普通策划人员,于美术人员,经过简单的培训即可上手使用Egret Wing。 再次,应用Egret Wing制作GUI,代码可以统统抛掉,让开发者着眼于界面与设计。与以往开发模式不同,Egret Wing致力于让界面制作可视化,模块化,无代码化。在Egret Wing中,你可以放心的使用可视化方式制作游戏界面,无需关心代码编写。所有制作好的界面,均会保存为exml格式文件,用户无需关心界面代码如何修改。最终制作后的界面文件交于开发人员与逻辑合并即可。 最后,Egret Wing强大的分辨率自适应布局,使得分辨率兼容不再是问题,大屏小屏横屏竖屏,对于应用Egret Wing的开发者来说都不叫事。面对各种分辨率的移动设备,不同的类型的游戏,开发者往往会在界面制作上耗费大量时间,解决分辨率兼容问题,现在,这些通通成为过去。Egret GUI中包含一套完整的自适应流式布局(Adaptive Fluid Layout)解决方案。有了它会让你的界面可大可小,可宽可窄。为了能让用户更快的理解自适应流式布局,Egret Wing团队在软件中隐藏了底层晦涩难懂的概念,并提出了组件对齐约束概念。让非开发人员可以非常直接的理解界面元素布局概念,让屏幕自适应处理更加简单高效。 此次Egret Wing 1.0 Final我们更新了大量功能,进行了200多项修改,力求为开发者打造最好用的GUI可视化编辑器。 轻微编后语:相较于传统的游戏开发工具,譬如小编曾用过的Unity 3D,毋庸置疑,Egret Wing是非常符合我个人喜好的,不知电脑前的开发者/程序员朋友们是否也和我一样钟情于她并按捺不住激动的心情呢,如果答案是肯定的,那就赶快行动起来吧! 不过值得注意的是,Egret Wing依赖于其自身的游戏引擎Egret Engine(白鹭引擎),所以在只安装了Egret Wing就启动工具的情况下,系统会弹窗提示需要下载安装Egret Engine才能正常启动工具进入操作界面。因而必须同时安装Wing+Engine! Egret 产品白皮书官网预览地址:http://www.egret.com/images/egretbaipishuv1.1.pdf Egret Wing(白鹭之翼)官网下载地址:http://www.egret-labs.org/egretwing Egret Engine(白鹭引擎)官网下载地址:http://www.egret-labs.org/egretengine Egret Wing+Engine套装百度网盘高速下载地址:http://pan.baidu.com/s/1gdDybVd