使用google closure 压缩合并 js 文件的 python 脚本

google很早就推出了 google closure ,但是是JAVA的,你需要安装 JAVA的运行环境、配置等等。另外虽然google 也推出了WEB版的closure,但是用起来也是比较麻烦的,操作步骤比较多。如果你想使用 google closure,又懒得配置,又喜欢命令行的方便,现在有了另外的选择,google closure 提供了 API,这样我们就可以用其他的方式来压缩合并文件了。

我根据google 的python 事例,做了一些小修改,来方便压缩合并文件。这基本上算是我第一次写python,并放出来让人使用,python我只懂皮毛,大家看了代码不要笑话我。

项目地址:http://github.com/allenm/js-css-compressor 使用方式详见README

目前默认压缩级别是:SIMPLE_OPTIMIZATIONS 将来会有选项让用户选择压缩级别。

另外项目名称虽然是 js-css-compressor。但是目前没有 css 压缩的功能,因为 closure 不提供CSS的压缩,这个将来我会使用其他方式实现。

我把这个脚本放在VPS上来压缩合并我博客上的JS文件,准备一步步的优化这个博客的性能,拿这个作为试验田。

欢迎给我提意见和建议,联系方式在博客的About me 页面。

HTML DEMO中例图自动生成器

我们在制作HTML DEMO 的过程中,往往需要制作页面中需要的尺寸的例图,很多时候我们是通过 photoshop 来做,但是这样多烦啊,这种很机械的工作还是交给机器来做吧。

我写了一个简单的例图生成器,访问 http://img-api.allenm.me 有简单说明。在应该放例图的位置,只需要在 img 的 src 属性中写类似 ”http://img-api.allenm.me/200-300.png”  这样就可以了。其中200代表宽度,300代表高度,上面的代码显示如下:

例图

实现方法很简单,用 php的 GD 库,配合服务器的 url rewrite 功能。把所有的以 .png 结尾的文件到 rewrite 到 index.php中,然后用正则来获取高度和宽度。现在代码还有一些地方需要修改,暂时不放出来,有兴趣的可以和我交流一下。现在兼容 Apache和 nginx,其他的 http 服务器我没玩过,不会配置,不过原理应该都一样。

如果有前端从业人员需要,建议自己搭建内部的这个服务,因为我的这个服务稳定性保证不了。

touchstart, touchend, touchmove 与移动互联网开发

你为移动互联网准备好了吗?

大家都可以感受到iPhone,Android,iPad带来了移动互联网革命,前端程序员们,大家准备好了吗?移动互联网早已不是那个WAP的时代,WAP基本被淘汰了,新一代的智能移动终端,都具有了标准的HTML,CSS,JS的解析能力,但是又和桌面不同,比如这样的终端是没有光标的,也就是我们平时经常用到的 mouseover这些光标相关的东西,在这些终端上是没有作用的。同时,这些终端又具有一些他们自己的特色,比如 touch 事件,因为操作全是 touch ,所以这个事件如果好好利用,在移动互联网开发中会发挥大用处的。

正好现在手里有个 Android 设备,做毕设用的,现在也想为毕设搞点新鲜内容,所以就做了对 Android 浏览器的 touch 事件的测试。说了这么多,是因为这个东西很简单,不说点废话撑下门面,那这个博文就太短了。

touth相关的事件有 touchstart,touchend,touchmove。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。

其中 touchstart 在开始触摸的时间激发, touchend 在触摸结束的时间激发, touchmove 这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。

这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend,但是在我这里测试实际看到的确是上一段中提到的那样。

现在 Android 官方也没有一个好的关于 WEB APP 的文档,不过有了 touchstart, touchend 这两个事件的 pageX,pageY,timeStamp 属性已经可以开发出好玩的东西了。比如我想让用户通过划屏幕,来做 tab 切换。

关于 touch 事件的测试,你可以用你的 iPhone,Android,iPad访问 http://lab.allenm.me/touch.html,然后触摸屏幕,看结果。注意由于为了完整展示效果,所以对屏幕宽度有要求,最好横批浏览。同时,预告一下,我以后会用 allenm.me 这个域名,等有空了做迁移。

另外附上apple 官方关于这个事件的文档.有兴趣的可以去看看,iPhone 可是支持多点触摸的,在这个文档里,我们也可以看到处理多点触摸的方法。

WEB前端优化

刚刚读完了《高性能网站建设指南》,作者给出了网站前端优化的14条建议,第一次系统的了解到了前端性能优化需要做的事情。

简单说来,这14条建议是下面这些:

  1. 减少HTTP请求(因为HTTP1.1协议规定同一域名下默认有两个HTTP同时下载,这条是最基本的,最应该去做的)
  2. 使用内容发布网络(主要是针对静态内容,具体请搜索CDN)
  3. 添加Expires头。(告诉浏览器来缓存那些不容易变化的内容,来加快“回头客”的访问速度)
  4. 压缩组件。(使用gzip来压缩组件降低数据传输量)
  5. 将样式表放在顶部(避免白屏和闪屏等情况发生)
  6. 将脚本放在底部(脚本会阻塞并行下载,所以某些脚本可以放到底部,让页面先显示出来)
  7. 避免CSS表达式(CSS表达式计算频繁,用其他方式来实现需要CSS表达式的效果)
  8. 使用外部JavaScript和CSS(利用缓存来减少这些组件的下载)
  9. 减少DNS查找(DNS查询是要耗时间的,减少DNS查找和增加并行下载是相悖的,这点需要权衡一下)
  10. 精简JavaScript(使用工具删掉不必要的空格,注释等)
  11. 避免重定向(redirect需要耗时间,尽量避免这种方式)
  12. 移除重复脚本(大网站,开发人员多,可能会带来重复脚本的问题,可以借助服务端程序来消除)
  13. 配置ETag(ETag经常会破坏缓存规则,他比Expires头权限高。合理配置或者禁用之)
  14. 使Ajax可缓存(分析Ajax请求,缓存可以缓存的,同时合理使用一些主动Ajax,以及参照前面指导原则优化Ajax请求)

作为前端开发人员,应该具有前端优化的技能,这些优化花不了多少成本,却相当有效,比改进后台代码的某个算法带来的性能增强性价比要高多了。

网站打开速度快才是王道,速度是用户接触到这个网站的第一体验!!!

上面这些指导原则在实际生产的时候都是需要好好分析的,看自己的网站适合怎么样。

uchome二次开发中的feed发送问题

对于SNS来说,feed是个必不可少的东西,有了feed才可以让SNS有黏性,让应用有黏性,同时也是一个在站内推广应用的好方法。(只想知道怎么使用的,请跳到本文的最后面吧)

于是今天要为我给普特英语听力开发的应用添加feed发送功能了,但是uchome没有官方的开发文档,所以只好自己看代码了。先分析了踩日志后,发送feed的这个过程,在 /home/source/cp_blog.php 这个文件里,关于踩日志的feed相关代码在111行。

$feed_title = cplang('feed_trace');
$feed_data = array(
'username' => "<a href=\"space.php?uid=$blog[uid]\">".$_SN[$blog['uid']]."</a>",
'blog' => "<a href=\"space.php?uid=$blog[uid]&do=blog&id=$blog[blogid]\">$blog[subject]</a>"
);
feed_add('trace', $feed_title, $feed_data);
$feed_title = cplang('feed_trace'); $feed_data = array( 'username' => "<a href=\"space.php?uid=$blog[uid]\">".$_SN[$blog['uid']]."</a>", 'blog' => "<a href=\"space.php?uid=$blog[uid]&do=blog&id=$blog[blogid]\">$blog[subject]</a>" ); feed_add('trace', $feed_title, $feed_data);

可以看到有个cplang和feed_add的这两个函数,于是找这两个函数在什么地方定义的就可以了。懒得猜,也懒得通读代码了,用工具来暴力查找吧,我用的是notepad++这个东西指定文件夹,暴力搜索关键字。

找到了function feed_add 在 home/source/function_cp.php 中定义,第384行,有兴趣的自己去看,这里就不贴出来了,比较长。其中feed-add函数的第一个参数是feed图标的名字,例如上面的那个 trace ,就指定到 home/image/icon/中的trace.gif图片。第二个参数是feed的模板,第三个参数是feed的数据,后面的参数都有缺省值,简单的feed可以不使用了。以cplang为关键字找到了在 home/language/lang_cp.php 文件里定义了一个名字为$_SGLOBAL[‘cplang’]的数组,一看内容就是各种feed的模板,好了,function cplang也不找了,就修改这里吧,照着上面已经存在的feed模板,加上了我自己需要的模板格式。然后测试了一下,OK,成功了。

feed模板的用法很简单,看个和上面代码相关的模板你就明白了,里面有这样一行定义:’feed_trace’ => ‘{actor} 踩了一脚 {username} 的日志 {blog}’,看明白了吧,feed中用大括号来括起来动态的部分,然后你在使用add_feed的时候,第三个参数 feed_data是个关联数组,其中key就是这个模板里的名字。

好吧,知道怎么使用了,但是要怎么部署才好呢?如果按照uchome的这种结构部署的话,要修改好几个文件,而且像 lang_cp.php还要在服务器上直接修改才行,因为我这里本地的文件和服务器上的文件是不一样,因为还有其他开发者修改过这个文件,所以不能简单的修改后覆盖。想了想,这个文件无非就是提供一个feed的格式而已,我直接写在我自己app中的代码文件中是一样的。uchome这样使用的理由是,可以支持好几种语言,针对不同语言使用不同的模板,但是我这个就没必要了,都是给中国人用的,所以就不使用 cplang函数来,直接定义$feed_title ,然后传给 add_feed函数就可以了。这样就只用覆盖一个文件就可以完成添加feed功能了。

总之,要在uchome二次开发中使用feed功能,建议是:在 home/source/cp_blog.php中看111行附近的代码,这是个使用示例,然后看 home/source/function_cp.php 384行附近的代码,这个是 feed_add的定义,然后看 home/language/lang_cp.php 这个文件关于feed模板的定义就可以了。另外准备一个图片放在 home/image/icon下面。做了这些就可以很轻松的添加简单的feed功能了,想要更高级的feed功能,就去研究 feed_add 这个函数的定义吧。

收到google wave邀请了

实际上已经收到3天了,但是这几天一直比较忙,没时间写日志。

初步体验感觉还不错,只是这个东西应该是需要学习一段时间才能掌握怎么使用,加上还是内测,还有很多东西都没开放。

而且在目前的这种硬件下,爆卡,google还需要进一步优化才行,或者要等硬件进一步升级,或者浏览器js引擎进一步快才行。

今天上午一个两个人的wave聊了一会儿后,就很卡很卡。对方和我都很卡。

这个东西确实很先进,只是出来后还是会比较小众吧,因为需要一定的时间学习摸索才行。

PS:现在我们这些刚被邀请进入的人还没邀请名额,所以邀请不了别人。

十一假期第三天记录

今天中秋节,上午给爸妈打了电话,还给姐姐打了电话,这些我认为是必须的,中国人嘛,在这种节日里,就是应该这样。虽然没有团聚,但是总该电话聊上几句。

今天一天没有出宿舍大门,一直在宿舍,吃饭就在楼下食堂。

上午和下午看了GAE的相关内容,主要是数据存储部分,目前用的大多都是关系型数据库,但是GAE给了一种不同的数据存储方式,按照google的说话,这种方式SELECT的时候应该效率比较高吧,比较适合做WEB应用。我还不是完全掌握,现在不便随便说,应该要等我想用GAE做什么时候的时候,才会慢慢的来更深入的理解吧。

晚上开始看《 core python programming》 这本书,开始看的中文版的,但是总是感觉翻译很蹩脚,只好看英文版的了,虽然看的要慢一点,但是要比中文版的看的要舒服的多了。

然后晚上解决了我的这个博客不能发送邮件的问题,现在访客已经可以选择自己的评论被回复后是否有邮件提醒了。

现在感觉身体不大舒服,很想运动,看看明天天气这么样吧,另外看有没有时间吧。虽然十一没什么必须要干的事情,但是还是有很多书要看,很多事情要干。

这肯定是一个很充实的假期,虽然我的心情目前还是不好,在等待着一个结果,希望那个结果对我来说是个很好的结果。

解决wordpress发不了邮件的方法

很多wordpress博客都有可以用email订阅评论的功能,游客在这里发表的评论,如果主人回复了,或者其他人回复了,都会发送一个email到原来的游客,这样可以很好的加强这种“对话”,要不然很可能回复的内容,别人看不见。

但是我这个虚拟主机虽然支持smtp,但是我一直发送不成功,因为PHP的mail()函数其实是不支持设置smtp参数的,是靠系统设置的,我想我这个发不出去的原因,是因为我的域名的Mx记录没有指向这里吧。具体的我也不是很清楚。

但是wordpress有插件可以解决这个问题,可以用其他支持smtp的邮箱,甚至GMAIL来发送邮件。

我现在用的是 config smtp 这个插件,设置很简单,我本来打算想用163的邮箱来发送,但是失败了,不知道是我的163不支持smtp,还是我设置错误了。只好改用GMAIL,设置就很简单了,设置完测试了一下,可行。

现在你在我的博客comment,就可以选择是否有邮件通知了。

晚上去了川大的腾讯宣讲会,腾讯的这次校园招聘的第一场

本来明天在我们学校的,但是在清水河,太远了,就跑到川大去了,还是腾讯第一场呢。只是陪川大歧视了,开始不让外校人进,要凭学生证才能进,不过最后还是让我们进来,而且由于前段时间我和那个负责人说好话,让我在外校人中第一个进来,还好,找了个座位,要不会很累的。

腾讯的CDC还是很牛的,一直在关注他们的博客。现在给我的感觉是,腾讯已经开始发力,在努力改变中国互联网,不再像以前只是模仿,而是要为互联网的技术做出贡献。

另外今天腾讯透露了一下腾讯的下一个版本的QQ,据说这是第一次向外界透露。据说版本号叫Q7,应该是只能在WIN7下才能有那些效果的吧,效果很炫,加上了Multi touch功能,另外我最喜欢的是,几个聊天窗口可以合在一个里面,成标签的形式,这个其实在QQ for LINUX中早都有了,只是在for win的版本里一直没出现,倒是有人开发外挂来实现这个,但是总是没有原生的好嘛。另外这段时间经常使用WEB QQ,还是做的很成功的,RIA技术做的很牛了。

我很看好腾讯在未来的发展,这个公司正在转变,已经开始在互联网领域做出自己的贡献,有自己的创意了,相信这些东西会越来越多。另外赞一下腾讯邮箱的功能,在国内确实可以算第一了。