篮球 与 Web 前端开发的初探
如果一个技术人员能把他习得的技能发挥得淋漓尽致,那么他必定在这个技能所涉及的大部分事物上体现出了强烈的认同感和真切的关心。然而一本对这项技能阐释详尽的书籍或者一个优秀的老师却不是决定性的因素。我们应该有过这样的体验:一个你极其信赖的人,对于一件事情,你认为他绝对不会让你失望——因为你知道他在这件事情上有十足的把握,而不是因为他随手携带着一本百科全书或有一个很好的师傅。
我们所喜爱的网站,经常去逛的网站,肯定存在着一些让我们在乎和被我们所需要的内容或功能,而不只是它华丽的外观。
网页从它刚被发明伊始,其结构就不断地改变。比较重要的一个变化就是从表格布局到区块与CSS布局。这个转变让网页开始更易于运营和维护,并且有更漂亮的外观。是的,更漂亮的外观,无数开发人员在这上面付出了大量心血,网页已经今非昔比,它们拥有比以往友好得多的界面和交互。然而,我们比以往看到更多的网页在华丽的外观上努力,却忽视了内容。于是,渐进增强(Progressive Enhancement)这个概念被提出,它认为网页应该注重于内容本身,在这之上再针对先进的引擎设计出更优秀的外观。
拥有能设计出效果极其华丽的网页的能力,无疑是好事,但如果所建设的不是一个纯粹展现技术的示例网页,在这之前请先确保所要传达的内容已经颇具意义并易于理解,能让希望接收到的读者所接收到。
每当人们对某些事情感兴趣的时候,他们就会开始关心这些事情,并且很有可能会越做越好。
大学毕业后,我开始打篮球。这并不是指刚刚接触,而是说把篮球这个运动当一回事。我有空时会走到球场练习,若遇到一些学生,就会被为了凑人数而拉着开场。即使多数是我被虐。
我想通过这些事情来为以后要说的铺路。再者,我需要这些事情来作为我思考的依托,让我起跳,也让我有地方着落。
一个周末的傍晚,晔和我还有几个同学来到以前中学母校附近打球,遇到了一个小前锋。他眼珠的转动把我整个身体都骗过后,潇洒地上篮得分。那时的感觉,与第一次看到CSS里面的 *font-size:100% 这种写法时的惊奇来得十分相似。
世界上有众多浏览器,并且它们对CSS乃至整个网页结构的解析在很多细微的地方是不一样的。为了让尽量多的浏览器都能展现出我们希望的效果,我们就必须针对不同的浏览器去写不同的CSS代码,这个过程就是CSS hack。它是繁复的,而且写出的CSS并不是规范的CSS,在W3C CSS上对其进行验证的话,hack部分都给予了警告,因为这一切终将随着web的发展而被舍弃。然而,在我国的客户端浏览器里IE6所占的份额不容忽视,我想这大概与国家部分经济水平偏低以及一些中年人需要上网却不太懂计算机有关。如果我们建设的网站不对IE6进行支持,很可能就会失去大量机会。所以,CSS hack不能放弃。
在CSS hack之前,其实还有一个比较重要的东西,就是reset.css。因为不同浏览器对同一个HTML标签的默认样式可能会不一致,所以衍生出了reset.css这个解决办法。它的动机和hack一样——让不同的浏览器展现出相同的效果。它将诸如i、strong、em等等一系列的默认特殊样式恢复为正常样式,如此便可在自定义的样式表里重新定义这些标签的样式,从而达到效果统一的目的。
除此之外,reset.css还意外地助了“标签语义化”一臂之力——根据语义而不是样式来设置标签。没人会知道在每个浏览器上对每个标签的默认样式,所以重新定义样式是很重要的。
对于标签语义化,在此举个例子:如果我因为一个div的宽度是200px而把它的class设置成“width200”,而到维护更新的时候改成了220px,就会产生误会。我应该根据这个div的内容为其设置一个相关的class,因为它的内容是相对固定的。
关于如何选取class和id名称,可以参考HTML5的标签,那些都是经过统计及甄选的。
我相信有一个问题将会在随着更新的HTML的普及得到解决,然而现在我们必须做出一个选择——要不要用table来布局form?从语义角度来说table只是表格,form是有功能的表单。form的缺点是布局,它不能把自己安排在特定的地方。再者,从结构与表现的分离这个观点上,布局应该交给CSS。但是,table布局实在是太方便了,或许还能省下一大段的CSS代码。所以,如果项目没有要求,我觉得还是可以使用table。若你是一个憧憬未来的工程师或者是完美主义者,不要动摇,用CSS布局吧。
篮球是团队合作的运动,华丽的个人技术和精准的投球能为此锦上添花。在球场边上,如果细心观察,我们总能发现有一些球队会有不具备身高优势、不会抢攻甚至没有假动作的球员。而这个球员却能在恰当的时机把手中的球传给了最有机会得分的人,从而使他们球队逐渐推向胜利。控球后卫很少独自进攻,他很有可能会把球传给小前锋或得分后卫。假如入球失败,便会产生篮板球,此时便是中锋或大前锋发挥的时候,若抢到篮板就能再次进攻。
这并不是规范,而是一种约定——结构、表现与行为的分离。一个网站,往往不只是一两个人去建设、运营与维护,这需要一个团队。恰巧在这些时候,大部分人都往这个方向走,并且也证实了这是一个不错的做法。
从终极意义来看,对一件事物进行分割是不明智的,因为最后还得再重新组合起来。然而网站是需要运营维护的,没人希望看到它的终点,只要存在,便会有变化。这种分割法(指以上所说的分离)能让熟悉不同领域的技术人员去完成自己所擅长的事情,而且哪怕真的是只有一两个人做的网站,这样分割也会比把所有内容混杂在一起更好管理。
这样分割也有一定的缺陷,就是有可能造成相关的技术人员只熟悉自己所管辖的范围,而对其他领域非常陌生甚至不屑一顾,这将会是大灾难。至少,我们应该在自己邻近的领域花些时间学习,这样才能与其他技术人员一起做好相关的衔接。比如晔跟我说过的一个例子:把background-image写在HTML文件里面吧,除非是动态改变的。因为程序员可以修改HTML而不会接触到你的CSS(当然这也要看具体分工情况,一般来说CSS只由前端负责)。
篮球场上,空中接力是十分帅气的。终于有一天,我们出来练球,大家都觉得可以一试,然后就疯狂地练习空中接力,可是在接下来的几场球中都没能有一次把练习的成果发挥出来。晔告诉我,如此的奇技淫巧在真正的球赛中也不会屡建奇功,因为比起这些,更重要的是扎实的篮球功底,比如说运球、传球、投球。至少,团队合作的方式也并不只有空中接力。
影响网站性能的因素有很多,包括客户端网速、浏览器引擎、网页结构等,网页设计能通过改善网页结构来优化性能。
在这之上,有一点很重要,就是在网站开发时,需要考虑项目的周期、代码维护的效率然后才是用户使用网站过程中的性能问题。我想,开发人员落入“过早优化”和“微观优化”的陷阱之中并不是罕见的事情吧。所以我认为目前应该做的就是从前人的经验与智慧中尽早得知一些性能相对更优的办法,在网站开发时首选使用,从而把更多时间投入到项目周期和代码维护的思考上,之后再考虑那毫秒级别的性能提升,这样便不会因小失大。
这次的叙说就到这里吧,肚子饿了,做饭去。
2013.5.22
我们所喜爱的网站,经常去逛的网站,肯定存在着一些让我们在乎和被我们所需要的内容或功能,而不只是它华丽的外观。
网页从它刚被发明伊始,其结构就不断地改变。比较重要的一个变化就是从表格布局到区块与CSS布局。这个转变让网页开始更易于运营和维护,并且有更漂亮的外观。是的,更漂亮的外观,无数开发人员在这上面付出了大量心血,网页已经今非昔比,它们拥有比以往友好得多的界面和交互。然而,我们比以往看到更多的网页在华丽的外观上努力,却忽视了内容。于是,渐进增强(Progressive Enhancement)这个概念被提出,它认为网页应该注重于内容本身,在这之上再针对先进的引擎设计出更优秀的外观。
拥有能设计出效果极其华丽的网页的能力,无疑是好事,但如果所建设的不是一个纯粹展现技术的示例网页,在这之前请先确保所要传达的内容已经颇具意义并易于理解,能让希望接收到的读者所接收到。
每当人们对某些事情感兴趣的时候,他们就会开始关心这些事情,并且很有可能会越做越好。
大学毕业后,我开始打篮球。这并不是指刚刚接触,而是说把篮球这个运动当一回事。我有空时会走到球场练习,若遇到一些学生,就会被为了凑人数而拉着开场。即使多数是我被虐。
我想通过这些事情来为以后要说的铺路。再者,我需要这些事情来作为我思考的依托,让我起跳,也让我有地方着落。
一个周末的傍晚,晔和我还有几个同学来到以前中学母校附近打球,遇到了一个小前锋。他眼珠的转动把我整个身体都骗过后,潇洒地上篮得分。那时的感觉,与第一次看到CSS里面的 *font-size:100% 这种写法时的惊奇来得十分相似。
世界上有众多浏览器,并且它们对CSS乃至整个网页结构的解析在很多细微的地方是不一样的。为了让尽量多的浏览器都能展现出我们希望的效果,我们就必须针对不同的浏览器去写不同的CSS代码,这个过程就是CSS hack。它是繁复的,而且写出的CSS并不是规范的CSS,在W3C CSS上对其进行验证的话,hack部分都给予了警告,因为这一切终将随着web的发展而被舍弃。然而,在我国的客户端浏览器里IE6所占的份额不容忽视,我想这大概与国家部分经济水平偏低以及一些中年人需要上网却不太懂计算机有关。如果我们建设的网站不对IE6进行支持,很可能就会失去大量机会。所以,CSS hack不能放弃。
在CSS hack之前,其实还有一个比较重要的东西,就是reset.css。因为不同浏览器对同一个HTML标签的默认样式可能会不一致,所以衍生出了reset.css这个解决办法。它的动机和hack一样——让不同的浏览器展现出相同的效果。它将诸如i、strong、em等等一系列的默认特殊样式恢复为正常样式,如此便可在自定义的样式表里重新定义这些标签的样式,从而达到效果统一的目的。
除此之外,reset.css还意外地助了“标签语义化”一臂之力——根据语义而不是样式来设置标签。没人会知道在每个浏览器上对每个标签的默认样式,所以重新定义样式是很重要的。
对于标签语义化,在此举个例子:如果我因为一个div的宽度是200px而把它的class设置成“width200”,而到维护更新的时候改成了220px,就会产生误会。我应该根据这个div的内容为其设置一个相关的class,因为它的内容是相对固定的。
关于如何选取class和id名称,可以参考HTML5的标签,那些都是经过统计及甄选的。
我相信有一个问题将会在随着更新的HTML的普及得到解决,然而现在我们必须做出一个选择——要不要用table来布局form?从语义角度来说table只是表格,form是有功能的表单。form的缺点是布局,它不能把自己安排在特定的地方。再者,从结构与表现的分离这个观点上,布局应该交给CSS。但是,table布局实在是太方便了,或许还能省下一大段的CSS代码。所以,如果项目没有要求,我觉得还是可以使用table。若你是一个憧憬未来的工程师或者是完美主义者,不要动摇,用CSS布局吧。
篮球是团队合作的运动,华丽的个人技术和精准的投球能为此锦上添花。在球场边上,如果细心观察,我们总能发现有一些球队会有不具备身高优势、不会抢攻甚至没有假动作的球员。而这个球员却能在恰当的时机把手中的球传给了最有机会得分的人,从而使他们球队逐渐推向胜利。控球后卫很少独自进攻,他很有可能会把球传给小前锋或得分后卫。假如入球失败,便会产生篮板球,此时便是中锋或大前锋发挥的时候,若抢到篮板就能再次进攻。
这并不是规范,而是一种约定——结构、表现与行为的分离。一个网站,往往不只是一两个人去建设、运营与维护,这需要一个团队。恰巧在这些时候,大部分人都往这个方向走,并且也证实了这是一个不错的做法。
从终极意义来看,对一件事物进行分割是不明智的,因为最后还得再重新组合起来。然而网站是需要运营维护的,没人希望看到它的终点,只要存在,便会有变化。这种分割法(指以上所说的分离)能让熟悉不同领域的技术人员去完成自己所擅长的事情,而且哪怕真的是只有一两个人做的网站,这样分割也会比把所有内容混杂在一起更好管理。
这样分割也有一定的缺陷,就是有可能造成相关的技术人员只熟悉自己所管辖的范围,而对其他领域非常陌生甚至不屑一顾,这将会是大灾难。至少,我们应该在自己邻近的领域花些时间学习,这样才能与其他技术人员一起做好相关的衔接。比如晔跟我说过的一个例子:把background-image写在HTML文件里面吧,除非是动态改变的。因为程序员可以修改HTML而不会接触到你的CSS(当然这也要看具体分工情况,一般来说CSS只由前端负责)。
篮球场上,空中接力是十分帅气的。终于有一天,我们出来练球,大家都觉得可以一试,然后就疯狂地练习空中接力,可是在接下来的几场球中都没能有一次把练习的成果发挥出来。晔告诉我,如此的奇技淫巧在真正的球赛中也不会屡建奇功,因为比起这些,更重要的是扎实的篮球功底,比如说运球、传球、投球。至少,团队合作的方式也并不只有空中接力。
影响网站性能的因素有很多,包括客户端网速、浏览器引擎、网页结构等,网页设计能通过改善网页结构来优化性能。
在这之上,有一点很重要,就是在网站开发时,需要考虑项目的周期、代码维护的效率然后才是用户使用网站过程中的性能问题。我想,开发人员落入“过早优化”和“微观优化”的陷阱之中并不是罕见的事情吧。所以我认为目前应该做的就是从前人的经验与智慧中尽早得知一些性能相对更优的办法,在网站开发时首选使用,从而把更多时间投入到项目周期和代码维护的思考上,之后再考虑那毫秒级别的性能提升,这样便不会因小失大。
这次的叙说就到这里吧,肚子饿了,做饭去。
2013.5.22
-
简杂 转发了这篇日记 2013-05-22 21:05:54