语言

Facebook, Ruby on Rails, 闲言, 随笔

近期流水账:我和ROR的简单接触

Ruby On Rails

前一段时间一直在研究ROR,就想开发一些小应用,简单记一下这段心路历程:

  1. 想做一个部门内分享资讯的webapp,用来分享图片、网页、文字,基本是想做个简单的twitter类应用。
  2. 鉴于我本人对Ruby On Rails很感兴趣,twitter就是用它开发的,而且好像可以快速开发,就决定用它实现,版本是1.2.6。
  3. 不动手不知道,ROR表面的地方真是很简单,可以快速做出一个原型,但是越深入越复杂,想全面点实现出来需要注意的地方还真不少。
  4. ROR的学习资料还算挺多的,就是高质量的中文内容太少,我其实不是做技术的,只能用部分业余时间写代码,连学带练的拖拖拉拉写了1个多月才像点样子。
  5. 就像《用户体验的要素》里提到的”永远不能发布的项目”一样,因为前期缺少足够的用户分析和功能需求,过程中还过分修改细节,不断加入特性,导致该项目一直不能正常使用。
  6. 看到xdite用ROR快速开发Facebook App,使用CSS库做界面布局,心又乱了,想拿进行中的项目改。殊不知,需要做的事情很多,要装rfacebook的gem和plugin,要到Facebook申请key,又要熟悉Facebook专用的标记语言FBML,很多设置需要在虚拟主机上调试,Dreamhost又诸多不便,最后只能作罢。
  7. 注意到Joyent提供免费的Facebook App空间,就去申请,若干天后通过审核。进入管理界面,傻眼了,超级复杂(如果有人觉得Dreamhost的panel已经很复杂就不用去试了),虚拟服务器配置好后,开始调试FBML。
  8. 没有将现有进行中的小项目转换成Facebook App,只是简单测试了下,做了一个显示所有好友的列表,发现Facebook提供的接口很有限,同时也推翻了我的一个设想”开发通用应用,分别用Facebook、Google等开放平台优化,做成跨平台的应用”,因为有很多功能(如邀请、好友搜索/选择等)只能通过FBML实现,除非其他平台也有对等的实现,否则这个应用只能是FB专用,不是我需要的通用了。
  9. 还是回到我想做的webapp上,考虑到时效性和同事的用户习惯,最后决定还是使用QQ群解决,之后公司又推广wiki协作方式,这个东东就不了了之了。
  10. 我最后把这个webapp发布在Dreamhost上了,没人知道,也不打算公开,也许下次再想做什么的时候可以先看看这个,作为警示自己的工具。

是我太随意,总想用复杂的方式解决本来很简单的事情,好像是挑战自己的极限其实最多算没事找事吧。

其实还没有结束,这件事情的后传是这样子地:

  • 想在公司的Wiki里发网摘,觉得每条链接又要拷贝又要手写代码太麻烦,就用ROR做了个抓Google Reader阅读共享feed并转换成wiki格式的小应用。
  • 结果Google用的是Atom,只能引入了Feedtools,结果页面编码出了问题,绕了个弯子才知道是Feedtools本身的问题,手动打补丁后,终于解决。
  • 其实这个功能完全可以用PHP的lilina或MagpieRSS解决,我又多此一举了~
  • Ruby On Rails 2.0.2出来了,颠覆了1.2系的很多用法,很多特性更加吸引我,又想以后都把小工具用2.0去写,先从这个功能开始,有点无法自拔……

<

p class=”zoundry_bw_tags”> Technorati : , , , , ,

Javascript, 内容管理系统, 随笔

小试Prototype:为静态文章列表加上标志

昨天,用Prototype.js解决了一个以前一直解决不了的问题,即静态文章列表加上New标志。

工作上一直使用静态的CMS(内容发布系统),好处是发布的内容全部都有静态页面、唯一地址,访问速度也比较稳定,缺点是放弃了动态的效果,比如文章动态链接、列表更新等等,以及今天要说的根据文章发布时间给标题加New标志。

原理是用Javascript分析列表代码里面带有时间的条目,时间是不是在时间限制之后,如果是,就在这个条目的时间代码段前面加上New的标志代码。

首先对文章列表进行改造,发布系统生成<ul>,每篇文章都是一个<li>,每个<li>里面用<a>包含标题,用<samp>来包含发布时间(还可以选择<span>或其他标签,我特意选了不常用的<samp>),最外层用<div>包含(看具体使用来定,也可以使用<table>等),并增加ID属性。以下是列表的代码:

<div id="News">
<ul>
<li><a href="link" target="_blank">Title</a><samp>2006-07-26 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-25 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-25 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-24 10:20</samp></li>
<li><a href="link" target="_blank">Title</a><samp>2006-07-23 10:20</samp></li>
</ul>
</div>

Javascript脚本部分,我设定的时间限制是前天0点,也就是说前天发的内容都会加上New的标志。shownew.js代码如下:

//shownew.js
//email: 94smart(AT)gmail.com
//url: http://blog.94smart.com

var TheDay = new Date(); //初始化时间
TheDay.setDate(TheDay.getDate()-2); //将时间设定为前天,看实际需要而定
TheDay.setHours(0,0,0); //将时间设定为前天0点
var newImage = '<img src="images/icon_new.gif" border="0" alt="New" />'; //New字样图片的代码

function showNew(listId){ //参数listId是要处理列表的ID
var thisList = $(listId).getElementsByTagName('li');
var listArray = $A(thisList);
listArray.each(function(listItem){
theSamp = listItem.getElementsByTagName('samp'); //取li里面的samp标签的内容
theSamp = theSamp[0];
theTime = theSamp.innerHTML; //得到文章的发布时间
theTime = new Date(theTime.replace(/\-/g, "/")); //替换时间格式为yyyy/mm/dd h:m:s,如果正好是Javascript的时间格式就不需要这行
if (theTime>=TheDay) {
new Insertion.Before(theSamp, newImage); //如果发布时间比设定的时限晚就在samp标签前面插入New图片代码
}
});
}

使用的时候在<head>区插入代码:<script src="prototype.js" type="text/javascript"></script>
<script src="shownew.js" type="text/javascript"></script>,在列表的HTML代码下方加入:<script type="text/javascript">showNew('News');</script>,ok,刷新你的页面,看到New了吗?没有的话看这里

上面的代码还可以再挖掘一下,这里就不继续了,希望我的代码对其他人有所帮助。

需要说明的是,用的Prototype是Prototype v1.4.0,别的版本没试,应该也可以。Prototype库真的很强大,尤其是对于我这样的懒人,懒得自己写底层的业余JS人员。

Technorati : , ,

PHP, 技术相关, 语言, 随笔

接着讲Flickr的八卦

去年七月份因为Flickr的一次当机,了解到他们的程序使用PHP+PEAR开发,还小小的感慨一下。

前两天,顺着DBA的Flickr 的开发者的 Web 应用优化技巧,找到了Cal Henderson写的Serving JavaScript Fast,又让我窥探到Flickr的些些技术内幕,Flickr用的模板居然是SMARTY,这个之前普遍被人诟病的模板系统。

不是说SMARTY不好,而是太好了,更像一种新的语言,我记得当时用PHP的普遍不喜欢语法复杂的SMARTY,嘿嘿,虽然技术不行但我也是其中之一,到现在还在用PHP Template,感觉好像是挺落后的。

不过,通过这篇文章同时也看到,Flickr技术大牛跟我这样的菜鸟有着巨巨巨巨巨……大的差别,就是他们用适合项目的技术,自己去优化程序语言的执行效率,我用对自己来说是简单的代码,效率问题只能听天由命了。

我觉得这好像也从侧面验证了Yahoo收购Flickr的必然,PHP之父在Yahoo,所以Yahoo有经过特别优化的PHP引擎,Flickr人用自己优化的服务器、脚本,同时使用的也是PHP,不知道这样说合适不合适,PHP的应用导致Yahoo一定收购技术相类似的、可以方便接入的Flickr。

So,扯远点说,用PHP的网络应用更容易被Yahoo收购。有人肯定会说:!$#%%$^%&$%&%^$#%%$^%&$%&%^&*&&*$#%%$^%&$%&%^&*&&^*&^*(*

最近就有个改了版的Feedsky,抛弃微软架构及ASP.net,改去拥抱Linux和PHP,快乐,他们快了。

Technorati : , ,

Javascript, 随笔

比较郁闷的MM_preloadImages问题

最近工作的过程中发现用Javascript做图片预读取总是出问题:

  1. 做个展开菜单,展开项目的底图总是不能直接显示出来。
  2. 做个缩略图切换,左右切换的时候,新换出来的图片总是不显示,非得使用鼠标右键选显示图片才行
  3. ……

代码逻辑应该没问题,所以最后归结到使用的MM_preloadImages()上,不知道为什么好像没起作用,没能在页面显示之前预读取所需图片。

简述一下我的用法,需要预读的图片有10张,我使用的是Dreamweaver 8.0提供的v3.0版本的代码,代码如下:

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

自动生成的预读调用是在body的onload上,我将它改为.js文件,在head里调用,又编写了一个预读函数用window.onload调用,代码如下:

function doPreload(){
for (var index=0; index<10; index++){
url1 = path_prefix+'TN_'+index+path_ext;
MM_preloadImages(url1);}
}

window.onload = doPreload;

运行时并没有得到预期效果,Firefox正常,IE出错,于是我改回body调用,还是失败。我以为是函数和循环的问题,就改成MM_preloadImages(‘img1.gif’, ‘img2.gif’, …)的调用,结果还是不行。

参考了一下Google Group里的文章,说有可能是缓存图片容量太大,可是回头想想一共10张图片,每张3、4K,全读出来也就30、40K,现在的带宽肯定不成问题。

所以我现在很郁闷,不知道其他人是不是也遇到这种问题,欢迎大家来与我交流,同时希望Javascript高手可以不吝赐教,指点我一下。

UPDATE:多谢Reg提醒,让我找到了问题的方向,看样子不是MM_preloadImages预读的问题,而是调用时候的问题,上面的懒得改了,就在下面继续更新。

UPDATE2:看到一篇讲CSS在IE里面的重复渲染问题,说DIV的显隐会影响CSS重新渲染,我不知道做的那个菜单是不是这种情况。

Technorati : ,

Javascript, 随笔

Prototype1.4.0说明文档showLocalLinks例子有问题

链接在这里:http://www.sergiopereira.com/articles/prototype.js.html#EnumeratingArrays

这个showLocalLinks例子有问题,在哪个浏览器里都显示不出结果。

<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
//find links that do not start with 'http'
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !='http';
});
//now the link texts
var texts = localLinks.pluck('innerHTML');
//get them in a single string
var result = texts.inspect();
alert(result);
}

</script>
<p id=”someText”>
This <a href=”http://othersite.com/page.html”>text</a> has
a <a href=”#localAnchor”>lot</a> of
<a href=”#otherAnchor”>links</a>. Some are
<a href=”http://wherever.com/page.html”>external</a>
and some are <a href=”#someAnchor”>local</a>
</p>
<input type=button value=”Find Local Links” onclick=”showLocalLinks’someText’)”>

这个例子的意思应该是取出段落里面的本地链接,原理是链接开头不是http的就算,但是段落里面使用的#链接形式,无论在IE还是firefox里,都会被解释为带有http的形式,所以这个例子的结果永远都是空。

解决方法是把其中#开头的链接改为”javascript:;”,就可以看到效果了。

后话,也有可能是因为我用Apache调试的原因,#xxx全被解释为”http://localhost/#xxx”了。

Technorati : ,

Javascript, Wiki, 互联网, 随笔

本地的Wiki记事本:TiddlyWiki

TiddlyWiki是一个好玩的Wiki记事本,支持Tag,支持丰富的Wiki语法,还支持搜索,用来做记事本不错。

它很简单,界面简单、操作简单,文件简单到所有内容只有一个html文件,所以最适合随身携带,想起了以前U盘携带的Wordpress,再带上TiddlyWiki就齐了,hoho~

TiddlyWiki是一个纯Javascript操作的Wiki,所有动作都是AJAX的,感觉好酷,要研究AJAX的又多了一个对象。

我只放在自己的电脑上玩了玩,还没研究怎么放在服务器上玩。

需要的朋友可以去TiddlyWiki下载。

Technorati : , , ,

PHP, 站务发展, 随笔

今日流水账 – 倒时差

搬来Dreamhost还没几天,感觉还不错,不过因为地域等关系总会出现一些以前没想到的事情。昨天就说过Dreamhost阻止了PHP的远程读取选项,提供另一种解决方法,今天又遇上了时差问题。

今天早上10点看我的Daily.94smart.com的时候,发现内容全是空的,真奇怪,昨天还是好好的。第一感觉是365key当了,但是马上就发现是Daily程序的问题,测了半天,一直没有找到问题。

看了一下这两天的网摘才想起来,1月2号那天没做网摘,我的Daily会把前一天的网摘显示出来,但是今天的为什么没有内容呢,昨天明明摘了不少?

后来才发现,今天虽然是1月4号,但是服务器时间(-8)为1月3号,再往前一天又没做网摘,所以内容才不显示出来,因为程序原来运行在国内(+8)的服务器上,所以没有进行时区设置,搬到国外服务器当然就栽了。

没想到这个小程序被迫出国,还得倒时差,一差还就差到16个小时~

Technorati : ,

语言

今日流水账 – 令人激动的Rails



上次激动应该是为了AJAX,为了他的实现方式,一种用户友好的方式。

自打前天看过Ruby on Rails的演示视频,我就又激动起来了。

这次是为了Rails的高速开发而激动,我以前一直没有发现有一门语言,或者是一个平台能如此简化开发过程,让项目开发人员可以把主要心思放在项目逻辑设计上,去充分发挥自己的想象力。

Ruby on Rails是一门专为开发Web应用的轻量级Framework,使用MVC模式。

本来只想随便看看,没想到看过后还不过瘾,手痒的厉害,于是按照视频指引,一步一步做了个简单的数据存储项目。感觉太棒了,他在设计上广泛使用了约定俗成的习惯,处处体现他设计原则中的“习惯约定优于配置”。

据说他和AJAX的配合很好,我还没有试用,不敢妄下断言,但是光看Basecamp, Backpack, 43 Things, Ta-da List的展示就可见一斑。

推荐对Web开发有兴趣的朋友去试试,没准可以找回以前对PHP的清新感觉~

PHP

用PHP的应该改变态度了

我今天才知道Flickr是用PHP写的。

别怪我八卦,这么好用的东西居然是PHP写的,还用的是PEAR库~

这给我了很大的鼓励,其实语言无所谓,关键是程序做得好。

那些怀疑PHP能力的人可以放心了,PHP的程序也可以做大型应用。

p.s.这个。。。今天的当机跟用PHP有关吗?

PHP

Plog和WordPress试用,与Drupal的对比

上午安装了两个Blog程序,Plog和WordPress,粗用了一下,正好可以和Drupal对比一下。

安装方面,这两个都比Drupal简单,一个执行文件很快就装好了,速度很快。

配置方面,WordPress应该是最简单的,总共也没几项需要设置,Plog就复杂了一点,跟Drupal不相上下。

重点是使用,WordPress的模板真是不错,难怪Drupal都要移植这些模板,另外WordPress的一些插件比较有意思,比如将标题转成图片的插件,效果挺好的,还有就是URL优化比Drupal要好。

Plog的模板虽然也挺多,但是感觉比WordPress差远了,不过Plog的功能还是挺全的,不用安装什么插件就差不多全有了,比如Feed居然提供4种(RSS 0.9、1.0、2.0,Atom)。

使用上的感觉Plog和WordPress差不多,又都是后台和前台分开的系统,像我使用Drupal这么长时间,都不适应了。

另外,Plog和WordPress都忽略了版式,把页面的版式归到了模板上面,而且模板的修改不够方便,不像Drupal的版式控制那么灵活,有左边栏和右边栏可以摆放Block。

好了,粗评结束,还是用我的Drupal吧。

^_^