Archive for Posts Tagged 前端开发:

前端的责任心

07月 25th

前端开发是个蛮模糊的职业,你也可以说他很综合,前台后台连photoshop都要会用,html css javascript php 搞不好vbscript 和java你也要搞,浏览器要装一堆烦也烦死。
最近圆心推荐了篇文章:工作:近況 v.s. 回憶,是tw yahoo的前端开发工程师的日志。其中有提到 Hedger对他的影响。今年在yahoo召开的D2有幸也见到了Hedger Wang,一名很优秀的前端开发工程师。这里的优秀一方面是指技能很高,更重要的是他有非常良好的前端开发的责任心。
何谓责任心?这一阵都在做项目。也在思考,前端开发工程师该如何去发展?在其位谋其职,必然要尽力做到现在的最好。那么该如何做好呢?
ali系都是用p级别来划分技术序列。按照类比一下做一个小划分
p1

了解web标准,能够制作出基本符合w3c标准的页面。
知道基本的html标签的语义化含义。
了解基本的hack方案,能够让页面在主流浏览器上拥有一致的展现。

p2

了解web标准,可以在项目实施中解答成员对于web方面的疑惑。
了解主流浏览器中的常见bug,在遇到页面问题时可以去分析出是什么导致问题的出现。
在制作页面时抛开像素级的细节问题不提,在ie6,ie7,ff中可以做到一次成形。
有基本的脚本能力。

p3

深入了解web标准,并可以影响他人。
可以深刻理解在前端中表现层和行为层的概念,能够在coding中做到良好的分离。
有一定的脚本能力。
在开发中开始考虑前端的页面性能并做出优化,例如完全理解并使用css sprite、优化http连接数、脚本加载顺序对页面的影响等。
了解可用性问题,不仅包括用户可用性,也包括前端和后台的可用性问题。
在项目初始阶段可以开始审核设计方案是否存在“不经济的设计表现”。

p4

深入了解web标准,并跟踪业界前沿。
开始追求更优的页面实现方案,例如良好的、可扩展、易于维护的html结构,可大量复用的代码。
了解更多诸如css、html、javascript的技术细节,这意味着在有同事请教“为什么这样”时你可以很快告诉他问题在哪里。
开始注重可用性问题:例如用户在出现疯狂的状况时,脚本是否任然有效率。在主流浏览器上运行良好的页面,在非主流浏览器上能否任然可用。用户网络状况糟糕时,还能否满足交互流程的继续进行。有没有处理好多个ajax请求的状况,
哪些是重要的,哪些是次要的。
在项目阶段,能否提出“经济的、更好的前端设计”

p5
一个有责任心的前端开发。ok,我们已经到了p5了。相对于责任心,技能真的是一个其次的东西。你的责任心在哪里,项目的测试在加载你的代码时可能看不出code的好坏,工程在将你的代码和前台合并时也不知道你的代码好不好,只有离你很远的、很特殊的用户也许才能知道(因为糟糕的网速、陈旧的机器或者疯狂的操作)。剩下的都在你的心里面。
要:让你的每行代码都有灵魂,让你的页面在大多数的情况下都可以发光发热。
晕了。我好像不是代码狂人,菠萝才是
不过Progressive Enhancement。把细节一一做好了,那么也就越来越有责任心

网站优化,人人有责

04月 14th

网站优化,人人有责,他不仅是前端的责任。从一开始的视觉,交互的设计时,我们就应该开始考虑网站的优化。下面我要说的有一个大前提:我们要非常注意网站的视觉表现,并不能妥协。但是也可以在设计和交互的时候,就开始考虑网站的优化。
现在网站的主要构成元素之一,也是最占开销的:图片,图片,还是图片。图片是视觉的重要元素。前端们为了节约服务器的开销。创造了css sprites的方法,如其名一样,他的确是一个神奇的方法。在web上常用的格式,有GIF,JPG,哦,还有PNG,yahoo的优化原则上也描述过 了:我们要尽可能的使用PNG来节约资源。同样的可以参考芸苓之前在联盟blog上和大家的分享。
PNG有2种,PNG 8 和PNG 24,可以类比成GIF 和高品质的JPG。但是比相同质量的GIF和JPG来说。要更小。一分小也就一分强大。PNG 8又比PNG 24更小。PNG 8中又有256和128等若干种选择,他的意思是,在当前选择下所包含的不同颜色信息的数量。 在测试之后得到:png似乎主要决定图像大小的是颜色的多少。如此可以知道,在做css sprites的时候,尽量选择类似色调的图片元素在一起,可以在同样大小的情况下获得更高的图片质量。所以在png中,通常所使用的平铺背景来节约图片 大小的开支,似乎变的并不重要了。在合理的状况下,好像并不能为你节约多少大小,相应的html和css大小也会增加。前端们要权衡
但:视觉的责任就来了。首先重复一下大前提:“我们要非常注意网站的视觉表现,并不能妥协。但是也可以在设计和交互的时候,就开始考虑网站的优化”。在做设计的时候,视觉们是否有优化的概念?视觉语言有很多种,我们可否少用对比色,少用渐变色?换一个表现形式来达成视觉表现的目的?我们和前端一起来减少图片大小,开始优化。这样前端们在实现的时候,css sprites可以更小更强大。我们是web设计,而且基石是我们是大众的,商业化的设计。代码需要复用,视觉风格也一样

Size

Colors