【图】八三夭《最后一击》演唱会

翻翻自己的个人曲库,发现华语的好音乐越来越少了。从2011年开始尤为明显

早期的音乐很多是“歌红人不红”,因为好歌很多,有机会认住的人就那么几个,现在反过来了……这是一个选秀的年代,新人辈出,一个好声音,让人一个夏天认识了五六十个歌手,可唱的都是老歌。也许八三夭还算不上什么大红大紫的乐团,但是他们的创作和通过演唱会展现出的舞台魅力真是不得了,我觉得这是这个时代的悲哀。

还有个悲哀,是我第一次听他们的演唱会,可他们却是“最后一击”了。貌似他们来年需要服兵役。

阅读剩余部分...

标签?ID?还是CLASS?

想谈一下几个基本的HTML问题,都是围绕着应该怎样使用HTML。

1. 多用有语义的标签,少用div和span,避免使用没有class的div和span。

设想一下HTML的世界最初只有div和span这两个标签,其实网页依然可以写得出来。更多标签的出现,其实是为了替代利用率高但不好书写的 <div class="{tagname}"><span class="{tagname}"> 来的。

想再接着多说一句的是,在HTML5里越来越多常见的div class组合或div id组合被直接命名为了新的标签。理由也是相同的,像header/footer/aside/nav/section/article都是我之前经常使用的class或id。我甚至觉得w3c创造新html标签的工作很简单,定期统计一下最常用的class和id,然后取前几名作为新的标签名就行了。

上周还有人在微博上感慨那个“史上最牛的HTML代码”:

<div class="mod">
    <div class="hd"></div>
    <div class="bd"></div>
</div>

再过几年它真的也许会消失的。

反过来思考也可以,尽量使用有语义的标签名,实在想不出来合适的标签名了,再用div然后起个class或id。这样的思路也不错。

2. 不要滥用class而回避id,该出手时就出手。

和问题1同理,设想一下HTML的世界最初只有class没有id,其实网页依然可以写得出来,语义依然表达得出来。无非就是会出现很多特殊的class呗。因此,我们也很好理解,id的出现,就是可以和class一起协作,使某些语义即使没有现成的标签可以表示它,但依然可以把一般性和唯一性完美的结合在一起。

这里驳斥一个观点:“尽量都使用class,因为控制样式的时候class的优先级是同级的,id的优先级更高,它的出现会破坏样式优先级的平衡”。首先我觉得这是一个假命题,所谓的“平衡”是不存在的,也没有必要去刻意维护,通过id来表示的内容一定是相对特殊的,优先级自然高一些,这样的优先级设计是如此的自然。我能够接受的全部是class的适用范围仅是一些底层的css基础样式,如oocss里的基础样式,或很多网站都会有common.css文件或general.css文件,里面的东西尽量用class没问题。

另一个更重要的理由是,在HTML5里,除了id和class这两个特性可以控制样式之外,还可以通过特性选择器来定义样式,类似E[attr="..."]的写法。我们会发现可以控制样式的方式越来越灵活,选择越来越多。这是Web发展的必然趋势。当其他人已经在用id/class/data-*/tagname对样式展开多重维度攻势的时候,我们实在没有必要把自己还关在class的世界里。

3. 尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。

比如两列布局的左右侧多半是正文和辅助信息的关系,那么就不建议用class="left"和class="right"而是倾向于class="main-content"和class="sidebar",或者直接用article和aside。

在自适应Web设计(responsive web design)如火如荼的今天,页面上的某个元素处在网页什么位置更像是个变量,所以通过位置来定义一个元素显然是会承受很多额外的维护成本和扩展成本。当改变发生的那一天,你发现自己的HTML代码变得文不对题。曾经的left跑到最上面去了,right变成了底部通栏,这都是很正常的变化。

实在没什么语义的,比如为了给IE加圆角而增设的标签,或清除浮动用的额外的标签,再或者是基础样式的,和具体内容无关的,再用div加表象的class来描述。

4. 尽量避免表示纯样式的class或id。

比如class="f14 red"。印象中网上有很多拙劣的例子,也有很多深刻批判这种用法的文章,我想说的是,如果你非要这样改样式,那不如直接写内联style来得直观。

最后想说的是……

互联网是一个快速发展的领域,它的快速发展甚至让人们忘却了很多传统领域的停滞不前。在这样的领域里工作,勇敢尝试,关注新技术,把握新趋势是如此的重要。不要拒绝新事物,不要被不思进取的人拖累,不要对大千世界失去好奇心和求知欲,方可永葆青春。

微创新=伪创新

先说一个跟创新无关的事儿: 最近有个刷火车票的插件非常流行,名字我不想提了。朋友发链接给我的时候,我打开一看,吓了一跳,网站风格几乎和傲游2006年的官网一模一样……

傲游2006年的官网
傲游2006年的官网

这是今天看到的网页
这是今天看到的网页

这跟创新毫无关系,但和创新的一个反面话题有关——抄袭。虽然公司的设计和创意被别人照搬过去对我这种在傲游有些年头的人已经不是什么新鲜事了,但是在今年的新网站,还能够抄回2006年,好设计在国内死绝了吗?

我感觉在我们周围的互联网行业中,创新能力正在急剧群体退化。不论是设计、产品还是技术层面。1.封闭的互联网给山寨版的国外网站带来了巨大需求;2.再加上产权保护不给力,让抄袭变成了“0成本”。所以抄袭者顺风顺水,不甘心抄的人走起路来就变得相对困难。

另外,我不太认同微创新这个说法,原因很简单,如果微小的不同之处也可以看做是创新,那什么又是真正的抄袭呢?我们今天认为的抄袭,哪个会像做蜡像一样真的做个一模一样的东西出来呢?所以没什么争议,抄了就是抄了。如果微创新被鼓励,就等于抄袭被鼓励。

设计:“直接把傲游的官网样式抓下来用吧”
产品:“我们做的东西很简单,就做成跟xxxx一样”,“然后我们再加个xxx,就行了”

我担心在这样的游戏规则之下,人的创新意识和创新能力会在不知不觉中退化。前段时间参加了互联网大会,本来是去给我们CEO捧场的,只听了其中几个专场。直观的感觉是:大家都在讨论别人,上来就说Facebook今年怎么样,Apple今年怎么样,Google今年怎么样,说得不亦乐乎,好像Facebook、Apple、Google是他们自家的公司;一说到自己,就一两句话结束了。听到最后,觉得讲得最有水平的,同时也是中国互联网最有前途的行业,其实是搞数据分析的,因为他们的工作就是名正言顺的研究别人。

隔天凌晨,我又见证了苹果iPhone5等一些列产品的发布会。对比甚是明显:

  • 白天的互联网大会上,国内的某些大公司会怎么“做”产品是没悬念的,但大家都在好奇他们接下来会“做”什么产品;
  • 晚上的苹果发布会,他们在做什么产品是没悬念的,但大家都在好奇他们接下来会把这款产品做成什么样。

我想这就是对国内互联网怪现象的最好总结了……

看过听过经历过后,我更坚定了的是,要拥有一颗强大的内心,面对抄袭,不能妥协,坚持创新的思考和行动。

分享bookmarklet一则:随意阅读

这款bookmarklet是我对主流阅读模式智能识别规则的一种吐槽。

当然,首先,阅读模式本身是一项非常棒的功能!他可以增强文章的阅读体验,统一不同页面的视觉风格。可以让人专注在文章内容中。等等。 而我要吐槽的点,是这个所谓的“智能判断文章内容”的算法。

“智能分析”的阅读器

阅读模式的核心任务之一,就是能够找出我们在各种凌乱广告、装饰物、页眉页脚之中的正文内容。在找内容这件事上,大家不约而同的使用了智能分析的路数。这里是早期开源的Readability脚本库的核心代码,我们可以看到其中包含着大量用来识别某dom结点是否是正文根结点的算法公示。而这套算法,又是从大量已存在的网页中归纳而来的。

Readability

阻力

既然是归纳的结果,而现如今已存在的网页已经数以亿计五花八门了,那不可避免的会存在判断误差。我们希望把内容识别的准确率提到最高,但会遇到一个问题:就是广告主、站长都有各自的小算盘,他们时刻准备着违背这些智能,降低判别的准确率,不让它正常工作,以谋取自己更高的收益或二次点击率。因此,这一智能的识别规则无法完全公开(Readability随后停止了开放源代码,我猜也有这方面的考量)。

how to enable?

可黑盒的智能规则又导致了另外一个问题:智能识别如果出现判断误差,对于那些希望支持阅读模式的网站,又无奈于找不到这些计算规则去适配。于是我们又会看到类似“how to enable safari reader”这样的问题满天飞。

Google搜索截图:如何激活阅读模式

最后阅读模式的识别规则、支持者、反对者扭打在了一起。

阅读剩余部分...

HTML5峰会归来

这次 @HTML5梦工场 的活动真是太棒了!我们了解企业,了解同行,了解技术,了解趋势,吃喝玩乐,雅俗共赏,天南海北共聚一堂,还有什么活动能跟这样的 #html5峰会# 相媲美呢?!虽然2天脚都站酸了,但真心觉得值!

了解企业

这次峰会上,诸多企业都在会场搭建了属于自己的展台:有浏览器,有应用平台、有技术图书出版社,这样不够,后台技术来了,电视来了,物联网来了,广告服务来了,这样还不够,更夸张的是眼镜和糕点也来了。其实仔细想想,中间这部分领域是早晚要和HTML5打交道的,而后面这部分呢,也几乎是每一个前端工程师生活的一部分(你看,干这行的视力都不太好,还经常以庆祝xxx为借口买蛋糕吃)。我们了解形形色色的行业和企业,体验工程师生活的每一部分。

当然说到企业展台,这也包括我的老东家傲游。今年公司启动了全平台的浏览器研发项目,除了已经有的PC、安卓版本,还陆续发布了Mac、iPad、iPhone版本。所以这次的展台内容很丰富,有些朋友甚至来到展台前把所有的设备都试用一遍,才意尤未尽的离开,这让我们这两天“辛苦站台”的同事们倍感欣慰。

傲游浏览器的展台

了解同行

我想说第二天的HTML5作品展真棒!一口气看58份优秀作品,结识58组前端精英,感受大家的创意和热情!这次给我印象深刻的,有一个是用Canvas写毛笔字的,可以根据书写的速度模拟出毛笔的力道来,非常神奇;还有一个作品用到了最新的摄像头媒介接口,做出了类似Kinect的游戏体验,他们的作者自豪的说:“我们的目标就是秒杀Kinect!”;另外我非常有幸结识到了HTML5图形库ichartjs的作者,我觉得他的作品像一阵及时雨,刚好填补了图表制作这个HTML5非常大的领域空白。除此之外的其它作品也都各有千秋,看得出他们呕心沥血的投入和付出。

H5Slides

我也有机会展示了自己参与的一个开源项目:就是H5Slides,我们专门为了这次的峰会搭建了一个供大家试用和体验的网站。不少开发者也对我们的作品产生了浓厚的兴趣。还有些人在网上看到过,现场认出我来了,哈哈好害羞滴说!

阅读剩余部分...