如何使用搜索技巧来成为一名高效的程序员

没有人是完全独立的孤岛,每个人都是整体的一部分。—— 约翰·多恩

对于缺乏编程知识的人来说,完全有可能编写一个网页或小程序。如果在用Google搜索相关示例时幸运的话,可以搜到现成的代码。即使是经验丰富的程序员,通常也会为了节省时间和精力而在网上搜索解决方案。

如果不借助搜索技术、网络及集体智慧,现代化高效编程是难以想象的。因此,搜索技巧对高效程序员变得愈发重要。

现在,我们不需要了解和记住如何解决众多的编程问题,可以采用搜索技术。我们正变得更加高效、高生产力,并能够解决更多的问题。但这是否意味着在构建软件时,拥有好的搜索技巧就足够了呢?本文将讨论,搜索技巧在程序员知识的形成过程中的作用,以及如何高效使用搜索技巧。

知识的类型及它在程序员大脑中如何成长。

Continue reading →

js模拟窗口抖动

目前一般的聊天工具都会带一个有意思的功能——窗口抖动,最近研究了下,下面我来模拟一个比较简单的抖动功能。
原理很简单,就是让一个窗口相对于它原来的位置朝四个方向顺时针或者逆时针迅速地偏移几个像素。
首先我们写一个空的div来模拟一个窗口,下面是这个div的基本样式(注意,这里的抖动元素应该设置为绝对定位):

下面是js代码:

其中s[p[i % 2]] = f[i % 2] + ((i++) % 4 < 2 ? -2 : 2) + "px";是关键代码。一开始看起来可能有点困难,我们可以把它当代数一样代入相应的数字或代码,比如当i=0时:o.style['left']=o.offsetLeft+(-2)+'px';也就是向左偏移2像素,这样就比较清楚了。 查看示例

The Google CDN

高性能网站建设指南中的规则2是使用内容发布网络,内容发布网络(CDN)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。

Google在他们的CDN上提供了很多流行的,开源的代码库,包括jQuery(和jQuery UI)。jQuery是一个非常流行的开源框架,在项目中用到的比较多。我们不必把jQuery文件放在自己的服务器上,可以让Google来节省部分带宽开销。使用Google CDN的另外一个好处是当用户访问其他站点时就已经从Google上下载了jQuery文件。当用户访问我们的网站时就会从缓存中载入,这样载入的时间会更快一些。我们也可以用同样的方法导入更多庞大的jQuery UI库,这会让使用jQuery站点的性能有所提高。

我们看到script标签中的URL指向的是Google的服务器,引用的jquery版本是1.4.0的。如果想引用最新版本,可以去掉版本的最后一个数字(例如1.4),这样他就会返回1.4系列的最新版本(1.4.2,1.4.3等),我们甚至可以只保留一个数字(1),让他自动选择整个1系列的最新版本,将来升级到jQuery 1.5的时候就能使用最新的版本了。不过我们需要注意的是版本的改变是否会影响到现有的方法。

关于css的一些文章

在工作中我总会遇到一些很麻烦的兼容性问题,这些问题网上的解决办法甚多,我会亲自尝试,并把问题解决,但我有时候并不清楚问题出现的原因。当类似的问题再次出现,我可能记住了解决的办法,也可能忘了再去网上查,这样效率会十分低下。所以只有弄清事物的本质,才能更快更有效地解决问题。下面介绍一些长期以来能帮我有效解决问题的一些好的文章,希望对大家有所帮助。

在我眼里,IE6一直是个大麻烦,工作中遇到较多的是关于layout的问题,这里推荐一篇译文:
On having layout

下面一篇文章详细地介绍了容易混淆的两个属性line-height和vertical-align:
小结line-height和vertical-align

垂直居中的方法有很多,多数都是已知元素高度的垂直居中,这里介绍了2种未知高度的垂直居中方法,一种用js解决,一种是纯css解决:
未知高度元素的垂直居中
Continue reading →

移动互联网

最近看到开复老师在微博上发布了关于创新工场创业频道的信息,我便顺藤摸瓜探个究竟。

其中有个视频演讲吸引了我:从现实跨越到未来——互联网手机时代的创新机会

这个演讲主要是将未来移动互联网的发展,其实不看这个视频我们也能知道个大概,因为我们都在使用手机,基本上会通过手机上网,对手机的平台和应用都不会陌生,手机的更新换代速度很快,其实我们都置身于移动互联网的发展之中,不难看出它的发展趋势。

过去的智能手机由于受到平台,带宽,资费,支付,用户需求等瓶颈的限制,都不能算是真正的互联网手机。真正的互联网手机已经出现了,第一代真正的互联网手机就是Iphone和Android的手机。他们天生是为了上网和浏览互联网应用而设计的。去过手机市场的都能摸到最新的智能手机,他们的特点都是大屏幕触屏版几乎都不带键盘。我去过顺电试用过各个品牌的手机,印象最深的还是IPhone,其他的品牌的使用体验略逊Iphone。而最近上市的索尼爱立信X10i在我心中的排名第二,他使用的是Android平台。

在这里Android扮演的是一个标准的平台,他是开源的,能被所有的手机厂商使用,能支持完整的互联网标准。这样的一个平台的出现能让大大小小的手机厂商都能投入到智能机或者互联网手机的制造和生产中,这样的一个竞争态势会使智能手机的价格迅速的下来,到那时就是互联网手机的天下。

在未来5年内,网页版应用的数量将超过原生应用,这里HTML5将扮演着重要的角色。他有以下几个优点:
— HTML5能以最轻量级的代码实现互联网的富体验,而无需插件。
— 免下载,用户接入门槛低
— 一次开发,全平台部署,不受多平台开发之苦。

所以作为一个前端开发者,应该了解互联网的发展趋势,不断更新自己的知识结构才能在未来的互联网事业中处于不败之地。

HTML5 Canvas API

<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和一些复杂的)动画。<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,例如Firefox 1.5,也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

当我们在页面中添加一个<canvas>元素时,它就在页面中创建了一个矩形区域。这个矩形区域默认宽为300px高为150px,当然,我们也可以自定义它的宽和高并设置这个元素的属性。<canvas>看起来很像<img>,唯一不同就是它不含src和alt属性。下面演示添加在HTML页面中的<canvas>元素。

Continue reading →

jQuery插件——Roundabout

提示:你可以先修改部分代码再运行。

前面分享的模板中大家印象最深的应该是上面一大块图片轮播吧,我看了下代码,人家用的是一个jquery插件——Roundabout。
Roundabout是一个jQuery插件,它可以改变静态html元素的组织形式并使之成为可按用户需要作更改的转盘式的交互区域(当然可能你不喜欢这种转盘式的,这里他还提供了另外一些形态,点此查看)
在它最简单的配置中,Roundabout可以使用有序或无序列表,然而进行一些快速的配置后,Roundabout则可以使用一些嵌套元素。
这里的三个步骤可以帮助你把无序列表转换成令人兴奋的转盘。
Continue reading →

几款基于AJAX的网页操作系统(WebOS)对比

现在的网页操作系统(WebOS)不是一二般的多。当然,技术上也参差不齐。到了2010年还在谈这个话题是有点过时了,但也无伤大雅。这篇文章将 对总共六款基于AJAX技术的网页操作系统进行对比,它们分别是国产的千脑、Prever Start和进口的EyeOS1.0/2.0、OOS、StartForce、Live Desktop。

第一环节:界面
Qiannao
千脑在界面上不是逊色了一点两点, 不管是整体美工还是细节处理,在这点上赶了当之无愧的鸭子。

Prever-Start

Continue reading →