140byt.es

刚看到的一个很有趣的网站140byt.es,是一帮JS大牛秀js代码的网站,所有的代码的核心部分都在twiiter长度的140字节以内,有很多实用的代码,也有很多不实用——但是可以给写js的带来另一种思维,或者说只是纯粹膜拜的代码……

例如用正则表达式判断是否是质数(这个真的很神奇啊,正在解读中……):

function(a){return!/^,?$|^(,,+?)\1+$/.test(Array(-~a))};

140个字节核心的俄罗斯方块(应该微博上看到这个的不少了吧):
http://jsbin.com/egiqul/49

HTML5 修改浏览器url而不刷新页面

嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来。

详细效果就是类似于用Firefox4+/Chrome 5+/Safari 5+/Opera 11.5+登录新浪微博后看到的个人时间轴,在翻页时可以观察到这个效果,地址栏URL变动,但是页面没有刷新,用firebug观察也观察不到刷新整个页面,只有ajax请求的翻页数据。从先前的理解来说,URL的修改必然引起(请注意我不是在说通过锚点修改)浏览器重载页面,但利用HTML5新加入的history.pushState();history.replaceState();可以完全自己维护一个历史记录列表绕开历史记录完全由浏览器控制的机制,从而实现比锚点更加完美的一种页内更新的体验。

代码方面很简单,只要在需要修改url的地方插入一行:

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle}, 'title', urlPath);
//三个参数,分别为:状态对象,标题(目前被浏览器忽略),地址

即可在历史记录里面产生一个新的历史记录(另一个replaceState方法参数完全相同,只是替代掉当前的状态)。
在体验上,非常接近于使用锚点(window.location = “#foo”;),但是mozilla的文档提出了以下三点好处:

  • 新的URL可以是和原始页面URL同域下的任何URL,如果用锚点,只能更新#后面的部分
  • 仅在需要时更新URL,锚点的历史记录在相同时不会创建(即当前已经是”#foo”的情况下,如果再将当前页面锚点设置为”#foo”,不会产生新的历史记录)
  • 可以记录下任意类型的数据,使用锚点的话将要自己维护一份历史数据列表或者把数据转码到一个字符串里

(翻译&描述的有点别扭,见笑了,不过其实应该自己也能体会到这些好处才是)

我自己实现的一个例子:
http://vifix.cn/atelier/demos/html5-update-browser-url-without-reloading-page

Read the rest of this entry >>

用jQuery写了两个图片幻灯切换效果

周二受委托给公司的美工们讲了一下简单的jQuery用法,于是就简单的写了两个例子给他们看,虽然并不是什么大不了的东西,想了想还是放上网也就当自己博客更新找点题材吧(实在是没话好说……orz),希望能对搜索引擎查询jQuery幻灯切换什么的关键词找到这里的同学有点帮助 :)

例子一号

例子二号

本质上这两个东西是一样的,只是二号做的相对来说效果上更多了一点罢了

两个例子打包下载

PS: 话说投影仪上的Cube Desktop看上去实在是太给力了! (公司我用的桌面环境为KDE 4.5,然后跑了个compiz )

Rhino: Javascript for Java

rhino50

好几天没更新了,过去的一周里忙着补作业(一个学期根本没上课,自然作业也就……),半夜送室友去120(室友哮喘发作),下周则要开始考试,整个人也有点疲劳也没时间顾及这儿 orz

那么今次要介绍的东西是Mozilla旗下的一个名为Rhino的项目,纯Java实现的Javascript解释器,很适合希望在自己的Java程序中内嵌Scripting功能的同学。当然了,也可以用它在J2EE中实现用Javascript作为后台语言的功能。

官方网站为:http://www.mozilla.org/rhino/

PS: Mozilla旗下还有一个更知名的C写的Spider Monkey,被广泛应用于Mozilla的产品中,比如Firefox的Javascript引擎就是它,官方网站为:http://www.mozilla.org/js/spidermonkey/

下面是一个简单的执行js文件的示例代码。

Read the rest of this entry >>

利用Google Map API获取地址坐标

Google.com

朋友拜托改的一段PHP小代码,其实就是Google MAP API FAQ里面提到的例子稍作修改,原文例子还用到了MySQL作为存储因此扯了一堆MySQL和PHPMyAdmin,只是想简单查下的就显得没必要了。

修改 @ 2009-06-07 :

于是今天写了一个Javascript版本的:http://vifix.cn/atelier/address_to_coordinates/
,代码都在HTML里面了,感兴趣可以右键查看源码。

下面是PHP版本的代码:
Read the rest of this entry >>

vxtodo

vxtodo

这段时间研究Google App Engine的成果,今天发布。

一个个人TODO-List管理程序,支持邮件提醒。

服务器端是Python,客户端自然还是 HTML + CSS + JS,话说Javascript的代码比Python还多一倍,没jQuery的话代码量应该会更加冗长……不过用Google App Engine来写程序还是挺幸福的。

欢迎各位使用(会有人用么?),以及帮忙测试和报告Bug

在GPL第二版协议下开源。

地址:
http://vxtodo.ihfs.net/
http://vxtodo.appspot.com/

获取源代码前往:
http://code.google.com/p/vxtodo/

PS.I: google app engine还无法支持.cn域名,因此只好用这个ihfs.net来进行绑定了……
PS.II: 话说appspot偶尔会被GFW掉,无奈……
PS.III: 于是咱也玩了把云计算了啊~

更新@2009-05-14:

  1. 修正了无法输入\和回车的bug
  2. 加入Prism的说明
  3. 制作了LOGO

更新@2009-05-15:

  1. 修改了数据模型,删除了一些无用的测试数据(没办法的选择,这种键-值数据库无法修改“表结构”,只能清空数据库然后重新添加

更新@2009-05-17:

  1. 对状态图标加上了事件,点击可以直接转换状态
  2. 将代码导入Google Code,以GPLv2开源

更新@2010-01-17:

  1. 解决一个换行的问题

首页更新

vifix9

觉得先前的首页在载入效率上很有问题,于是干脆一鼓作气重新做了一个,总共消耗大概16个小时。并且加入了一些细节和效果和内容(主要是一些个人的作品)。嘛,今年过后也得找工作了,就当广告先做起来吧~

访问:http://vifix.cn

眼下似乎还有一些问题,慢慢进行调整了。

滚动和音效分别使用了这两个jQuery插件:jQuery.jScrollPane, jQuery.flashSound

PS: 搞这个东西时项目目录命名为vifix9(因为是09年),真有改成⑨的冲动……

守望 UNIX 时间戳 1234567890

clock

嘛,那么上图与内容无关……只是随便找了个看上去还不错的时钟图 XD

于是~已经开始运作了39年的Unix时间将要在近期迎来一个特别的数字,也就是1234567890,因为其对应的UTC时间正好是星期五十三号,所以某geeker用调侃性的语言写了文章提了一下这个时刻,随后在slashdot上也有人提交了此文章(当然solidot也之后跟进了),至于cnbeta的编辑,则是很脑残的以为又是一个Y2K问题……随后豆瓣上又有人发起了守望UNIX时间戳1234567890的活动,所以作为一个勉强自称的geeker,咱自然也要来参一脚,花了半个小时写了这个倒计时:

http://vifix.cn/atelier/1234567890/

以下是科普~

Wikipedia:
UNIX时间,或称POSIX时间是UNIX或类UNIX系统使用的时间表示方式:从协调世界时1970年1月1日0时0分0秒起至现在的总秒数,不包括闰秒。

Ajax Animator

ajax-animator

http://antimatter15.110mb.com/ajaxanimator

某飞扔来的链接……

一开始还以为是又一个extjs写的GUI Builder,所以并没有太在意,然后才发现原来根本不是什么GUI Builder而是一个类似于Flash的物质,顿时惊到了 -v-

(当然,以Javascript的局限,要完全的实现一个Flash还是有点困难的)

该物尚处在初期开发阶段,期待其后续的发展……

Say “goodbye” to alert()

blackbird

昨天发现的好东西——Blackbird,Javascript用的调试输出用控制台,漂亮并且易于使用,并且甚至支持键盘操作,官网的介绍词就是Say “hello” to Blackbird and “goodbye” to alert()

支持浏览器如下:

  • Internet Explorer 6+
  • Firefox 2+
  • Safari 2+
  • Opera 9.5

官方网站:http://www.gscottolson.com/blackbirdjs/

Page 1 of 212