“思考人生”

前几天欧洲杯,“巴神”巴洛特利一个散步式单刀被后卫回追成功,解说员戏称他停下来思考人生了,一时间“思考人生”变成了个热门词,以至于我们看到谁发呆、低头,都说他们在“思考人生”。其实我最近也在思考人生,也许比他们的严肃一些了。

来北京的第6年,同时也是在傲游的第6年,一转眼小半年快过去了。

这半年过得算是波澜不惊吧,事情异常多,公司的,家里的,亲戚朋友的,各种活动的,还狗屎运出了一趟国。总会有些事情照顾不周,处理不妥,也在意料之中。我只想说:感谢经历,你就自己想办法挺过去吧。

在这不到6年的时间里,我一直没有停止做一件事,就是不断努力发现自己的问题和不足,并尝试改变它——相信很多人也都会这样。这期间有些改变是令我兴奋的;有些事情是立竿见影的,富有成就感的;还有很多事情,在潜移默化的发生着,你无法通过一两件事情看清楚,但经过长时间的积累,暮然回首,你会发现,它真的变了,有好的也有不好的。

阅读剩余部分...

听杨东杰弹吉他

这是一个灰常活泼并且有怀旧感的标题。

原本打算记我上周末成都之行的一篇日志,我觉得除了参加HTML5梦工厂成都站的技术交流活动之外,最大的收获,莫过于同杨东杰童鞋的畅谈。另外今天连续在微博上看了两个罗纳尔多和萨内蒂年轻时候的足球集锦,突然觉得这几年间,很多事情在发生着悄然的改变,比如曾经有个美少女组合叫S.H.E,昨天在地铁外看到Ella的一个活动海报,才发觉,这个团早已淡出了我们的视野。我们上大学的时候,有几个舍友特别喜欢挺S.H.E,导致我也比较熟悉他们的歌曲,后来让我对他们真正产生印象的是《Play》那张专辑,觉得它的概念蛮有意思的,整张唱片都是轻松欢快的气氛。于是《听袁惟仁弹吉他》这首歌一闪而过,于是就有了这个标题……

有点扯远了

阅读剩余部分...

学习精髓

首先,很久没写blog了,最近小忙,今天下午难得清闲,把最近的一些思考写下来。

如何学习XXX?是一个在我周围经常听到和谈论的话题。

比如,如何学习JavaScript,如何学习HTML5,如何学习移动开发。我发现,在这个知识爆炸的年代,人们汲取知识的方式确实非常多元化,有人选择看书,有人选择上课,有人选择实践,有人选择逛微博,有人喜欢订阅RSS,有人喜欢跟牛人交流。。。

从形式上看,他们都各有优劣,我也确实觉得因人而异,因需求而定。同时,学习的内容非常关键,学习的态度也非常关键。

首先,我觉得最正统的学习,自然是边看书,边实践,理论与实际相结合的。书,最好是比较系统的,优质的,经得起推敲和实践考验的;实践,最好是简明的,直观的,循序渐进的。

但这样的学习,要想保证效果,势必需要一些整块的时间和精力,需要耐心和专注:这似乎在大学毕业之后,就比较难了。

我们在高节奏的IT生活中,似乎很难沉住气,于是我们见到了更多“入门级”或“速成”的学习内容,不求深度和广度,但求迅速上手,迈出第一步。再往后,或许生活节奏更快了,人们压力也更大,似乎“速成”都不够快了,人们把之前一本书的东西,浓缩成了一篇文章。。。然后,抽象成“十大要点”。。。最后,变成了一条微博。。。

请允许我以这样的方式归纳如今主流的学习方法吧。尽管并不完备。

我记得自己在Web标准化交流会,被裕波第一次建议分享的技术话题,就是《前端工程师如何学习JavaScript》,那会儿我的想法是,要因人而异,选择不同的内容和方式,大块的新东西,要“啃骨头”,沉住气,要不得半点马虎;已经有一定基础的情况下,可以选择“吃零食”,日积月累,汇流成河。今天看来,我依然是这么想的,但如果方法不对,会很痛苦,或事倍功半,或无法坚持。

而学习的另一个要素,则是内容。有的时候,跟同行朋友交流时,会遇到这类的讨论:我记得好像有人说过这样是不行的(不好的)、XXX(某名人或某本书)说这样是最好的方案。可有的时候,这些观点并不绝对,它可能是片面的,或是过时的,甚至是复述的人记错了理解错了,甚至它本来就是错的。当这样的讨论频繁出现时,我觉得出了问题:首先,他们在学习知识的时候,没有足够的基础,导致无法辨别上层知识的真伪;二来,对知识的学习缺乏深究的精神,知其然不知其所以然;第三,没有找到真正的起点。

导致这些问题的因素可能是多方面的,比如很多基础的材料是英文的,而语言障碍多多少少客观存在;比如我们的视野总是有限的,比如周围的人都是“那样”学来的。可真正的精髓,就这样被错过了,实在可惜。

作为比较普世的道理,我觉得有几件事值得我们参考:

首先,要追根溯源,我想得到的途径有三种,看官方文档,读源码,拜读技术发明人或创始人的书籍,这些都是原汁原味的,不经其他人转述,没有信息偏移和衰减的(说道这里,大家应该见人玩过那种“传声筒”的游戏吧,一句话经过五个人传到最后,变成了完全不同的另一个意思,就是这个信息偏移和信息衰减的道理)。

然后,开放自己的心态,多多参与更广泛交流,避免被狭隘和片面的观点所误导,关于这一点,国内有好多线上线下的技术交流活动,如果大家有心参与,应该足够了(不过,虽然不太严重,但值得指出的是,国内和国际的技术认知还是会有些许偏差,必要的情况下,要走出国门,做跨国交流)。

所以,还有第三点,英文太TM重要了!而且是基础中的基础!

有了基础,了解了本源,开阔了视野,然后再不断积累零散琐碎的知识,此乃成才成功之道。我们能有多大作为,一个重要方面,取决于我们做了多少准备,下了多少功夫。

再说得远一点,技术立本的公司的发展和生存,也需要紧跟趋势,深刻理解行业标准和规范,才有可能真正做到技术领先,甚至技术超前,引领行业趋势和行业标准。

以此作为2年前“如何学习JavaScript”话题的延伸和二次思考。

网站装修笔记20120426

按照严计划,给我的网站加上了投票功能。他已经出现在了网站的侧边栏中。当然在某些media queries条件下,这些内容不在侧边,而在网页的最下面。

这从没有花太多时间在编码上。我直接引入了三方的问卷调查工具:Wufoo。等于嵌入了一个iframe。我会定期更换这里的投票内容,有些投票可能是为了我更了解大家,更好的优化我的网站为大家服务的,我会根据大家的反馈默默做出改变;而方便公开的统计数据和分析结果,我也会公布在这里跟大家分享。

第一期的投票内容比较“肤浅” 囧

您觉得现在囧克斯的皮肤好看吗?

在添加投票功能的时候,我注意到Typecho的一个不足,就是在创建新的侧边栏面板的时候,不免需要修改主题模板的sidebar.php文件,因为Typecho本身并没有给侧边栏预留插件接口,所以不可以生成自定义的侧边栏面板。我觉得改进的方式可以是这样的:

  1. 创建新的配置项,注明要显示的侧边栏面板和排序;
  2. 同时封装面板的html结构,不允许自定义面板结构,只允许自定义内容;
  3. 然后在Plugin一边加入自定义面板的接口。

这样主题模板和插件就进一步解耦,开发者就可以在不改动主题模板的情况下调整侧边栏的内容了。

一点个人心得,不知Typecho是否愿意接纳这个意见。

以上

网站装修笔记20120414

这周主要把我的几个HTML5幻灯片做了一下整理,在这里。从这次播放器的实现上看,幻灯片数据的结构约定有所改变,同时适配了更多的浏览器和设备。

在这个过程中,我也尝试了更多CSS3的变换效果,让幻灯演示多一点精彩,所以最终我为每个幻灯演示分别使用了不同的幻灯片切换动画。有3d的、有2d的,也有WP7中的Metro风格动画等等。

另外说到幻灯演示,我正在发起一个这方面的开源项目(估计经常关注我的朋友都已经听腻了),本月之内会启动。

接下来我想给网站做一个投票系统,放在侧边栏。

网站装修笔记20120406

今天为我的新网站做了两件事情:

  • 第一件事是为我的主题皮肤加入了侧边栏显示,并使用了css3 media queries技术进行了响应式设计,并借鉴了一些metro ui的思路
  • 第二件事是加入了友情链接插件,可以在侧边栏显示一些自定义的链接,方便将来和博友们交换链接

友情链接

先说友情链接插件的事情吧,我在Typecho的插件站找到了一款友情链接的插件,名字就叫Links,非常方便实用。我现在随便放了3个链接,看看样子。大家希望跟我交换链接的,可暂时留言至此,回头我会另外做个交换链接的页面。

友情链接示意图

响应式侧边栏

然后是侧边栏,我把最近文章和最近评论两个侧边栏的widget加入了名为large的css class。这类widget会在条件允许的情况下占用更大的空间。一般情况下宽度是普通widget的两倍。在一些特殊的界面宽度下,widget的宽度是一样的,大家没有什么分别。

对于css3 media queries的利用,我这里按窗口宽度分了5档1400px+/1050px+/650px+/400px+/400px-,进行响应式设计。每一档的内容宽度、侧边栏宽度和布局都不太一样。以适应不同的终端。举其中一个例子(1050px~1400px之间):

@media all and (min-width: 1050px) and (max-width: 1400px) {
    #wrapper {
        position: relative;
        padding-right: 280px;
    }
    #sidebar {
        position: absolute;
        width: 260px;
        top: 160px;
        right: 0;
    }
    #sidebar .widget,
    #sidebar .large {
        width: 98%;
    }
}

最终效果如图:

响应式设计预览

这款皮肤我会稍后更新共享在这里。

另外我最近抽空研究过了SAE Storage,接下来的事情是做一些有趣的侧边栏小控件出来,比如投票、相册、之类的。

先记下这么多

分享Typecho插件:百度统计助手

  1. 百度统计助手
  2. 只支持http协议,不支持https协议
  3. 在插件的“设置”里把统计代码最后的那串随机码填入保存即可
  4. 如果不开启统计,把填入的随机码清空即可
  5. 设置成功后页脚会多出一个百度的小图标

使用步骤

首先我们当然需要有一个百度统计的账号,然后通过这个账号生成我们要统计的统计代码(如下图):

获取百度统计代码

其中有一串随机码,我们把这串随机码记下来。值得注意的是,随机码前面有一个转意后的问号(%3F),不要把这几个字符算入随机码。

然后在插件设置中填入这串随机码(如下图),即可正常工作。

插件配置界面

有需要的童鞋可以移步到这里下载

我的得奖感言

本文摘自 勾三股四 更早时期的 不老歌 博客。

阅读剩余部分...

网站装修笔记20120331

今天给我的网站加入了著名的百度统计。对,就是下面这个东西:

页脚的百度统计

相信这个小家伙会帮我更加了解我的网站的读者。
虽然就是嵌入了一段脚本,不过幕后的工作不止于此。我在此做个备忘:

  1. 更深入的了解了一下Typecho的插件机制,经过群友的提醒,才发现Typecho源码中有一组辅助插件开发的代码,它们被汇总放在了/var/Helper.php中。也弄清楚了Typecho中的Widget机制和命名规律。这让我决定通过插件的方式加入百度统计。
  2. 我不在主题footer.php中直接加入百度统计,还有一层原因,就是为了保持主题的纯净,让主题可以被其他人也使用同时不被百度统计在内。
  3. 通过插件加入百度统计之后,我又想到,可否让这个插件也分享给更多的百度统计的使用者。而不同的使用者,统计码都是不同的,这就需要我们把统计码做成一个插件的参数,而不是写死在插件里。于是又了解了一下插件的参数设置方式,把统计码做成了插件的参数。
  4. 最后,我同时研究了一些Typecho的路由机制(Routing)和SAE的Storage服务接口,这为我给我的网站加入更多的单元或板块提供了更多想象空间。

接下来的计划是把这个插件分享出来,然后重新梳理并设计一下网站的路由规则。

以上

用CSS3制作尖角标签按钮样式

演示地址:https://jiongks.name/demos/css3-tag/

CSS 3 tag demo

如图的效果。标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈。

  • 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片
  • 那你会不会在想这个效果的html结构很复杂呢——答案是最简单的html结构

    <p>

    &lt;a href="#">Tag1&lt;/a>  
    &lt;a href="#">Tag2&lt;/a>  
    &lt;a href="#">Tag3&lt;/a>  
    &lt;a href="#">Tag4&lt;/a>  
    &lt;a href="#">Tag5&lt;/a>  
    

    </p>

之所以可以达到这样的效果,是因为我们运用了一些比较巧妙的技术。接下来告诉你实现方式:

阅读剩余部分...