手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年09月的文章

BUZZ

buzz是什么?不知道了吧?我也不知道,不过看上去的感觉是和twitter差不多。
自从twitter流行后,国内各种各样的推啊拉啊围脖啊就如雨后春笋一样冒个不停

说白了,QQ应该会很开心,QQ签名就是最早的twitter了。哈哈,老马一定很兴奋自己走在世界前列,但也会很郁闷没有把握好机会。不过,总是这样的,外国的月亮比中国的圆,在中国流行的东西,没人记得住 ,如果从外国流行了再回来,那用的人就多了。

BUZZ这玩意真不错,至少,我手机可以buzz了。手机打开buzz.google.com,就可以象twitter一样写写心情了。【对于手机,暂时只支持几款OS,而Gphone必须要android OS 2.0+,郁闷啊,就在等啊兴更新了】

虽然我不是个完全的谷粉,但主要是google带给我很大方便。当然如果buzz可以follow twitter或者其他数据,我会更开心。

» 阅读全文

Tags: buzz, google, gmail

Rel与CSS的联合使用

说实话,rel在我眼里除了link CSS的时候用过,其他时候我还真没用过。根本不知道REL是用来干嘛 的。看了这篇文章才知道原来Rel还可以这么用。

原文是

Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。

Wordpress很早就引入了rel标准,在我们添加新链接的时候就可以看到“关系”属性。

早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系,但它对网页开发来说并无意义,值得庆幸的是随着浏览器的逐渐升级,我们可以利用 CSS属性选择器以及REL来做一些有意思的功能。

这是一段带有REL属性的HTML结构。

XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  

页面中他呈现这个样子

大小: 3.47 K
尺寸: 238 x 148
浏览: 1775 次
点击打开新窗口浏览全图

因为局长和小李是两个不同的阶级,所以我们应该有区分他们,我打算在小李和局长后面增加两张图片让他表现出这个样式。

大小: 5.38 K
尺寸: 169 x 115
浏览: 1802 次
点击打开新窗口浏览全图

过去,我们需要在两个链接标签上增加不同的class来实现这种样式,并且我们需要针对不同的样式书写不同的CSS

XML/HTML代码
  1. <style>  
  2.  .c,.b {background:url(01.png) right center no-repeat;}  
  3.  .b {background-image:url(02.png);}  
  4. </style>  
  5. <ul>  
  6. <li><a href="#" rel="civil" class="c">小李</a></li>  
  7. <li><a href="#" rel="party" class="b">局长</a></li>  
  8. </ul>  
现在,我们可以利用REL属性以及属性选择器来完成这个工作。
CSS代码
  1. a[rel~="civil"]{background:url(01.png) rightright center no-repeat;}  
  2. a[rel~="party"]{background:url(02.png) rightright center no-repeat;}  
同时,我们的HTML结构也可以剔除那些多余的样式了。
XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  
另外:ie6不支持属性选择器,但我们可以用JS来修复这个问题。

--EOF--

最后一句话实在让人寒心,不过总算也可以这样的做了,再过一两年,还有IE6的存在吗?IE6的时间够长了吧?好象从02年开始到现在,都经历了8年左右的时间了,居然还没有被消亡。习惯这东西真害人。。。。

原文地址为:rel与CSS的联合使用,不过其实我更喜欢第二幅图后面的小图标

 

Tags: 前端, css, rel

JavaScript单元测试工具 — QUnit

好象这篇文章的原始链接来自cssrain,不记得了。。如果作者看到,请联系我一下,我加上链接,SORRY了。

文章来自google doc,内容如下:

QUnit是jQuery团队开发的 JavaScript单元测试工具,使用方便,界面美观。近期试用了一下并进一步了解了JavaScript单元测试,记录一下所思所得。

什么是单元测试

XML/HTML代码
  1. 单元测试又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑,也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。  
  2.   
  3. 通常来说,程式設計師每修改一次程式就會進行最少一次單元測試,在編寫程式的過程中前後很可能要進行多次單元測試,以證實程式達到軟件規格書 (en:Specification)要求的工作目標,沒有臭蟲;雖然单元测试不是什么必须的,但也不坏,這牽涉到專案管理的政策決定。  
  4.   
  5. —— 维基百科 (中文英文)  

 

为什么 JavaScript需要单元测试

由于存在浏览器解析环境、用户操作习惯等差异,前端程序的许多问题是无法捕捉或重现的,现在前端程序的测试多是黑盒测试,即靠点击点击点击来寻找程序bug。这种方式既费时费力,又无法保证测试的覆盖面。

同时,前端逻辑和交互越来越复杂,和其他编程语言一样,一 个函数,一个模块,在修改bug或添加新功能的过程中,很容易就产生新的bug,或使老的bug复活。这种情况下,反复进行黑盒测试,其工作量和测试质量 是可想而知的。

此外,浏览器兼容性测试是前 端程序测试的重要一环,在多个浏览器之间测试前端程序,上面说的工作量就会成n倍的增加。

为什么我们的前端程序如此脆弱?就是因为没用单元测试。。

假如使用了单元测试,上边的问题就变得很容易了,当然前提 是你要花时间去研究和编写测试用例。

根据函 数或模块的源代码,编写出包含各种情况的测试用例,每次解决bug或添加新功能,都随时更新这个用例然后进行测试,很容易就找出新bug和“复活”的老 bug。

测试兼容性,只需要在不同的浏览器 中分别运行这个测试,问题就一目了然了。

也 许白盒比黑盒要多费几倍的脑子,但想想我们那脆弱的程序,想想那些随时冒出来的烦人的老bug,费点脑子,值了!

使用QUnit

注:下面的内容主要参考了 QUnit文档 和 NetTuts+的这篇文章

建立一个测试页面,引入 qunit.js 和 qunit.css 这 两个必需的文件,这两个文件是存放在github上的,鉴于目前操蛋的互联网环境,最好下载到本地调用。

注:body中的元素id命名必须依照如下形式,否则无法 正常显示。

XML/HTML代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.   <link rel="stylesheet"href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css"media="screen" />  
  6.   <script type="text/javascript"src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>  
  7. </head>  
  8. <body>  
  9.   <h1 id="qunit-header">QUnit example</h1>  
  10.   <h2 id="qunit-banner"></h2>  
  11.   <h2 id="qunit-userAgent"></h2>  
  12.   <ol id="qunit-tests"></ol>  
  13. </body>  
  14. </html>  

测试示例

下面是一个最简单的函数测试用例,解释请见程序注释。

JavaScript代码
  1. //定义测试模块  
  2. module( "测试示例" );  
  3. //定义一个简单的函数,判断参数是不是数字  
  4. function simpleTest(para) {  
  5.   if(typeof para == "number") {  
  6.     return true;  
  7.   }  
  8.   else{  
  9.     return false;  
  10.   }  
  11. }  
  12. //开始单元测试  
  13. test('simpleTest()'function() {  
  14.   //列举各种可能的情况,注意使用 ! 保证表达式符合应该的逻辑  
  15.   ok(simpleTest(2), '2 是一个数字');  
  16.   ok(!simpleTest("2"), '"2"不是一个数字');  
  17. });  

module( name, [lifecycle] ) 函数指定测试模块和周期。

ok( state, [message] ) 是QUnit中最常用的一个判断函数,只能判断true和false。

DEMO在这里,看一下测试结果:

大小: 19.15 K
尺寸: 326 x 221
浏览: 1692 次
点击打开新窗口浏览全图

结果都是绿的,说明两条测试语句都符合设定的规则。可以尝试修改下规则

JavaScript代码
  1. //...  
  2. ok(simpleTest("2"), '"2"是一个数字');  
  3. //...  

就可以看到爆红了。。

更多测试判断

除了ok()之外,QUnit还有如下几个判断函数:

相等判断equals( actual, expected, [message] )

示例:

JavaScript代码
  1. //定义一个简单的函数,返回数字和2的乘积  
  2. function simpleTest1(para) {  
  3.   return para * 2;  
  4. }  
  5. //开始单元测试  
  6. test('simpleTest1()'function() {  
  7.   //列举各种可能的情况  
  8.   equals(simpleTest1(2), 4, '2 * 2 等于 4');  
  9.   equals(simpleTest(2), 3, '2 * 2 等于 3');  
  10. });  

 

相同判断 (包含数组、对象等)same( actual, expected, [message] )

示例:

JavaScript代码
  1. //定义一个简单的函数,返回一个数组  
  2. function simpleTest2() {  
  3.   return [1, 2];  
  4. }  
  5. //开始单元测试  
  6. test('simpleTest2()'function() {  
  7.   //列举各种可能的情况  
  8.   equals(simpleTest2(), [1, 2], '函数返回数组[1, 2]');  
  9.   equals(simpleTest2(), [1, 1], '函数返回数组[1, 1]');  
  10. });  

same()和意思和equals()差不多,但 same()可以判断数组、对象等的相同,而equals不能。

异步与Ajax

对于异步程序的测试,如setTimeout、 setInterval、Ajax等情况,按照上面的方法,在异步调用执行之前,测试就已完成并输出了结果。这时,配合使用QUnit提供的两个函数:stop( [timeout] ) 和 start(),也可以轻松搞定。

直接看例子:

JavaScript代码
  1. //异步测试  
  2. module( "异步测试示例" );  
  3. //setTimeout  
  4. test('asynchronous test'function() {  
  5.   // 暂停测试  
  6.   stop();  
  7.    
  8.   setTimeout(function() {  
  9.     ok(true'完成运行');  
  10.     //待测试完成后,恢复  
  11.     start();  
  12.   }, 100)  
  13. })  
  14. //另一种形式  
  15. asyncTest('asynchronous test'function() {  
  16.   setTimeout(function() {  
  17.     ok(true);  
  18.     //待测试完成后,恢复  
  19.     start();  
  20.   }, 100)  
  21. })  
Ajax也是类似的道理:
JavaScript代码
  1. //Ajax测试  
  2. function ajax(successCallback) {  
  3.   $.ajax({  
  4.     url: 'server.php',  
  5.     success: successCallback  
  6.   });  
  7. }  
  8.    
  9. test('asynchronous test'function() {  
  10.   // 暂停测试  
  11.   stop();  
  12.    
  13.   ajax(function() {  
  14.     // 异步调用判断  
  15.   })  
  16.    
  17.   setTimeout(function() {  
  18.     //异步测试完成后,恢复  
  19.     start();  
  20.   }, 2000);  
  21. })  

了解更多

 

 

Tags: 单元测试, qunit

Patch1 for NetBeans IDE 6.8 Now Available

这次更新对PHP来说只有两个更新,但这两个更新都很重要,一个是自动缩进的问题,还有一个是interface的问题。
interface我不知道是什么问题,因为没仔细注意过,自动缩进也只是偶尔出现,有时候代码没有写全时,敲回车到新行时,却不由自主的缩进了。。

看看官方的说明先:
The NetBeans team has released a new patch, which is an update to the NetBeans IDE 6.8.

The patch includes bug fixes in modules for C/C++, EJB and EAR, GUI Builder, IDE Platform, Java, Java Debugger, JavaFX SDK, Java Persistence, Java Web Applications, JSF, Local History, PHP, RCP Platform, RESTful Web Services, and Team.

To obtain the fixes, the NetBeans IDE must be installed and running. You can download the fixes through the IDE's Plugin Manager.

关于PHP的更新只有两条:

5-Feb-2010 PHP - Provides tools and support for PHP development. 1.11.2 178542 Wrong indentation when using new line for braces placement.
05-Feb-2010 PHP - Provides tools and support for PHP development. 1.11.2 178103 [68cat] Wrong code genaration from interface

Tags: netbeans

PHP 中如何处理时区

小记录,一般情况而言,默认安装好的lamp中,时间都是标准GMT时间,基本上,我们中国时间都应该是+8才对,但很多人往往不设置。

因此,为了时间正确,建议你还是设置一下默认时区,否则出现这8小时的误差也很郁闷的。

那么如何知道自己的时区是否正确呢?在不知道一些系统函数的情况下,直接输出 date('Y-m-d H:i:s', now()) ,就可以了解了。。

那么,我在知道这样的问题后,怎么能够知道当前设定的时区是哪里呢?这时可以通过:date_default_timezone_get()函数来获取,理所当然,设置时区就是date_default_timezone_set()了。

手册上也说明,在PHP 5.1之后,如果时区不正确,那每次在调用Date或者time函数时,都会有一个warning 或者 notice出现:

XML/HTML代码
  1. Note: Since PHP 5.1.0 (when the date/time functions were rewritten), every call to a date/time function will generate a E_NOTICE if the timezone isn't valid, and/or a E_STRICT message if using the system settings or the TZ environment variable.   

当然,如果你觉得这样设置很麻烦,你可以更改php.ini文件中的 ;date.timezone = ,添加自己需要的时区,例如 date.timezone = Asia/Chongqing,然后重启服务器就可以了。PHP支持的 timezone 的字符串在手册中能够查到。

手册中的:Appendix J. List of Supported Timezones,可以查看所有支持的时区。

Note: The latest version of the timezone database can be installed via PECL's timezonedb. For Windows users, a pre-compiled DLL can be downloaded from the PECL4Win site: php_timezonedb.dll.

Tags: 时区