大猫の意淫网志

打老婆加入林志玲配音

bigCat — Wed, 08 Sep 2010 00:33:03 +0800

HTML5让世界变得更美好，打老婆(beatWife) v4.1战斗系统融入声优志玲配音（源自魔兽世界台服某BOSS）

插件地址 https://chrome.google.com/extensions/detail/cgoebjgkiiapifcpclljbdbmmodmmdff

代码很简单

<audo src="beatWife.mp3"></audio>

用JS的话根本就不用写标签，直接new一个玩儿

var snd = new Audio("beatWife.mp3");
snd.play();

有性趣的同学继续深入 http://www.w3.org/TR/html5/video.html

===分割线===============
ubuntu10.04 chromium 跑 .play()的时候提示undefined，Google了下貌似确实支持不好
求教有无解决方案……？

暧昧贴

Chrome 扩展 beatWife 打老婆 (34)

Chrome 扩展 beatWife 打老婆

bigCat — Wed, 01 Sep 2010 22:46:15 +0800

高举爱老婆旗帜勇往直前（就和小学生手册一样，先宣誓再干坏事）

为了让自己在学习新技术新知识的道路上越走越远，最近偶正在整一个 Chrome 的扩展

他就叫挣钱花 beatWife 打老婆！

有 Chrome 的同学可以玩一把图个乐子，木有的同学可以下嘛

插件地址 https://chrome.google.com/extensions/detail/cgoebjgkiiapifcpclljbdbmmodmmdff

乐此不疲哇，保持一天至少发一个版本

v1 hello wife
v1.1 bug: 暂时移除计数
v2 增加弹出以及大按钮（和咪咪一样越大手感越好）&& 修复计数bug
v2.1 增加彩蛋 [konami]
v3 增加选项页面 （重置/隐藏计数）我恨星期一
v3.1 右键点击小图标可以进入选项设置，现在你可以换妻了?呸呸呸，我的意思是换个人来揍
v3.6 增加了隐藏头像 && 启用通知系统（我知道你讨厌QQ弹窗）
v3.7 样式了一下选项页

目标是做一个涉及所有能涉及技术的 helloWife
然后分享之～

计划内的功能
1.上传硬盘图片（其实用canvas或php转为base64存到HTML5离线存储里）
2.丰富抽打反馈（CSS3 -webkit-等，还有诱人的canvas）
3.抽打排行榜（例如被抽最多的图，抽最多的数量，等SNS元素）
4.华丽上流的视觉（高速发展期，功能优先）

一定要坚持啊，某个删WOW删了几十次木有丝毫毅力的人

暧昧贴

打老婆加入林志玲配音 (0)

如何获取 Gravatars 头像的路径

bigCat — Fri, 30 Jul 2010 00:32:31 +0800

什么是 Gravatar

Gravatar 是 Globally Recognized Avatars (地球人公认的阿凡达)
可以去 http://gravatar.com/ 关联你的 Email 和头像
这样子在任何启用 Gravatar 的博客留言,即可显示对应的头像
例如 i(a)ooxx.me 对应的是

Gravatar 是如何构建滴

一个 Gravatar 是服务器动态返回的图片,下面是一坨 src 图片地址

http://www.gravatar.com/avatar/ddb61c44b09ee3e8cb2700249ec9eac7&r=X&s=80

我们来肢解一下

Gravatar 总是以如下URL开头

http://www.gravatar.com/avatar/

接下去是 E-mail 对应的 Hash 结果, 这 E-mail 地址在 hash 之前必须要小写,并且要木有空格

ddb61c44b09ee3e8cb2700249ec9eac7

然后是 rating 分级, 有[ G | PG | R | X ] 4档
(在网站设置头像的时候会让你分级,建议选G)
约X的头像越不和谐,用专业的英语就叫 hardcore sexual
网址里这个分级设置的是容许最极端的那档
例如网址设置容许G,那么只有G的头像会显示
容许PG 会显示 G 和 PG
容许X 会显示 G 和 PG 和 R 和 X

&r=X

最后是 size 图像尺寸 , 有效范围是1到512

&s=80

还有一坨可选的默认头像地址,就是说如果email找不到对应的头像了或者不在分级范围内,就用这张默认图
可选参数为
* '404' (返回 a 404)
* 'mm' (mysteryman)
* 'identicon' (unique, generated image)
* 'monsterid' (unique, generated image)
* 'wavatar' (unique, generated image)
都是些奇形怪状的丑图,建议自定义一张拉轰的(http://ooxx.me/me.jpg)

&d=http%3A%2F%2Fooxx.me%2Fme.jpg

那么在主题里调用 Gravatar 就很简单的用

 <?php
   echo get_avatar(i@ooxx.me,50);
   ?>

这里的邮件地址可以用 get_the_author_meta('user_email') 获取本文作者的email
如果用在评论循环里,可以用 get_comment_author_email() 获取当前循环里的email
记得小写哦 strtolower(get_comment_author_email()) 会自动转为小写
记得MD5哦 md5(strtolower(get_comment_author_email())) 会进行 hash

加起来就是

 <?php
   echo get_avatar(md5(strtolower(get_comment_author_email())),50);
   ?>

会吐出来

<img alt='{$safe_alt}' src='{$out}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />

不幸的是get_avatar()默认吐img标签
幸运的是如果只要src值,可以这么写

<?php
echo "http://www.gravatar.com/avatar/".md5(strtolower(get_comment_author_email()))."&r=X&s=80";
?>

挨吻老湿就是这么写再结合jQuery 配合 CSS3 搞图片圆角来输出头像滴
点这里看

暧昧贴

不用插件实现 WP-PageNavi 功能(进阶版)

bigCat — Sun, 18 Jul 2010 13:26:57 +0800

开始本文之前请先阅读 WordPress 技巧：不用插件实现 Pagenavi 功能

接着是一坨广告：如果有企业要建站，推荐凶器 WP Jam

然后开始正文：

根据先阅读的那篇文章，教偶们如何用 wordpress 自带函数实现 pagenavi 功能
整完后输出的就是12344567的数字了

但还木有实现 pagenavi 的表现,也木有左边那坨当前页面/总页面指示数
这就是为啥要写这篇文章的原因了

pagenav的缺点：多一个外挂样式表一个http 请求是非常占速度的，可参考yslow说明书
以插件形式载入，虽然灵活，但以性能为代价

因为水煮鱼已经介绍过了，我直接就说修改的地方了，输出结果可以参考截图

第一步：在 functions.php 的 <?php 和 ?> 之间插入


function ooxx_nav(){
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;

$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => '&laquo; ',
'next_text' => ' &raquo;'
);

if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg('s',get_pagenum_link(1) ) ) . 'page/%#%/', 'paged');

if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array('s'=>get_query_var('s'));

echo '<div class="ooxx_nav"><span class="page-numbers pages">Page'.$pagination[current].' of '.$pagination[total].'</span>'.paginate_links($pagination).'</div>';
}

第二步：在 style.css 里插入


.ooxx_nav{clear:both;margin:5px -2px;overflow:hidden;zoom:1;text-align:center;}
.ooxx_nav .page-numbers:hover{background:#FF3D86;color:#FFF;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .page-numbers,
.ooxx_nav .dots:hover,
.ooxx_nav .pages:hover{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#FFF;display:inline-block;float:left;height:18px;margin:2px;min-width:28px;_width:28px;padding:1px;}
.ooxx_nav .page-numbers:visited{opacity:0.5;}
.ooxx_nav .current,
.ooxx_nav .current:hover{background:#7BAFA7;color:#FFF;font-weight:bold;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .pages,
.ooxx_nav .pages:hover{color:#CCC;width:120px;}

第三步：在需要导航的适当位置，例如index.php search.php 里插入


<?php if(function_exists('ooxx_nav')) {ooxx_nav(); } ?>

要直接用的拷贝上头代码直接用即可，听解释的继续看

第一步里 function ooxx_nav() 作用就是新建一个输出页码的函数，名字随便来，当然调用的时候要对上
这里改动不大

1. 基于语义考虑<p />标签改为<div />，当然最好改成<nav />如果你已经createElement的话，哈
2. 调用变量 $pagination 数组里的当前页和总页数组重新合成左侧那坨功能
3. 左箭头和右箭头用字符实体标示一下更规范

第二步里你可以根据自己的主题修改颜色
box-shadow 为页码数投影
border-radius 为圆角程度
-moz- firefox 私有
-webkit- chrome safari qq浏览器 maxthon 等webkit内核私有
不细说，有需求留言即可

第三步加入 function_exists() 判断 ooxx_nav() 是否存在，要是不存在也没关系
如果不加判断，天会塌下来

--update--

感谢 yun77op 找茬
'base' => @add_query_arg('page','%#%'), 应改为 'base' => @add_query_arg('paged','%#%')
少了个d,非permalinks固定连接的同学会链接失效

暧昧贴

搜狗拼音皮肤-鼹鼠家族之课堂传说

bigCat — Sat, 10 Jul 2010 16:28:17 +0800

看媳妇在用的皮肤超 cute ,马上拆了QQ拼音装搜狗

好玩的是拆了QQ拼音后提示文件损坏,然后它自个儿在哪里修复,修复完了又给装上了... 继续拆

超可爱鼹鼠家之族课堂传说下载
点了还会脸红~

下载地址 http://pinyin.sogou.com/skins/sv_329089.html

暧昧贴

Google Calendar界面推荐 (47)

jQuery 配合 CSS3 搞图片圆角

bigCat — Thu, 08 Jul 2010 18:18:14 +0800

挨吻老湿分享了一坨圆角图像的另类实现方式文章 CSS3 Rounded Image With jQuery

很赞,翻译了下记录一把

开始之前,可以先把 Demo 点开对照着看

目标

目标是用 CSS3 border-radius 和 box-shadow 来实现如下图效果

左手: 圆角+外投影
你的右手旁边是我的左手: 圆角+内投影

问题
问题是这年头木有一档浏览器可以完美的在图片上应用圆角和阴影
webkit 可以显示圆角,但木有内投影
firefox 和内裤被戳破一样还坚挺的直着

CSS 淫技

灰常简单: 在图片外头套一层超薄<span />然后把原图作为 background-image.
要隐藏原图的话,可以 opacity:0 或 display:none
偶发现 opacity 更淫荡点,因为这么整用户还能图片另存为
当然出于某些阴暗目的或光明磊落隐私考虑,可能会偏向 display

最终用 jQuery 的解决方案

本着怎么偷懒怎么来的原则,我们用 jQuery 来自动给图片套<span />

不解释, 上代码先

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});

</script>

接下来开始解释
1. 调用 jQuery 库
2. ready 就是 DOM 全部加载后再触发的事件, 否则一旦有图片的 DOM 节点后于 JS 加载,就会绑定不到
3. $(".rounded-img, .rounded-img2") 选中所有 class 名为 rounded-img 和 rounded-img2 的元素
4. 给俩元素集绑定 load 事件 (偶很疑惑为何这么写)
5. 在每个图片外面包含一个 span, 这个 span 的 class 为原元素的 class ,这个 span 的 style 里的 background 取值自原图的 src 值, 宽高同理
6. 给每个图片写个style="opacity:0"

看起来素酱紫滴:

大猫的调整

$(function(){
  $(".avatar").wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    }).css("opacity","0");
});

理由:
1. $(document).ready(function(){}) 相当于 $().ready(function(){}) 相当于 $(function(){}) ,貌似有这么一说,嘻嘻
2. class名改为 .avatar 如果你是 wordpress 的评论头像, 都封装好了,要改结构也不是很方便,哈
3. 去掉图片的 .load 事件, 因为如果图片从缓存中获取, 有可能就不会触发这个事件, 反正是 DOM ready,霸王硬上弓了
4. 直接用链式写法点花点月点秋香

然后你得在你的主题 style.css 加上那么几条
因为 webkit 的内阴影配合圆角就是一坨屎,所以我用外阴影了
iPhone 的safari 还不支持 inset 内阴影, 如果有内阴影控, 可以用线性渐变配合RGBA假装是阴影...


.avatar {
	display: inline-block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

IE 呢?
screw you!

不过目前偶是弄个中间镂空PNG遮罩,多一个请求
要是平滑那还得PNG32
要是PNG32那IE6捏?
IE6用 AlphaImageLoader 滤镜一旦图片加载失败,整个页面就脱光了死给你看

screw IE!

Opera
这孩子长得漂亮,龙飞(dragonfly)也不错就是没有用的欲望
10.x之后不用-o-了直接支持圆角阴影,值得鼓励

暧昧贴

IE8 标准模式 max-width bug 求解

bigCat — Tue, 29 Jun 2010 22:48:19 +0800

今天遇到一挺郁闷的bug
IE8 标准模式
要实现如图的效果,图片宽度最大100px,小于100就自适应,
右边文字围绕左边的图

症状:
图片外容器宽度还是取决于图片原始大小而非max-width定义的大小

测试可跑如下代码
<!DOCTYPE html><html><body><div style="background:#2CA0B7;float:left;"><img src="http://ooxx.me/me.jpg" style="max-width:50px;" /></div></body></html>

也可以看DEMO页
http://code.sh/lab/demo/bug_ie8_max-width.html

哪位大湿有无解决方案?

暧昧贴

高段位路由入侵分析

bigCat — Mon, 21 Jun 2010 23:20:15 +0800

我的导师挨吻老湿神秘嘻嘻的发来家里路由器截图让我帮忙看看

大猫: 被蹭网?

挨吻: 郁闷

大猫: 关了SSID广播？

挨吻: 关了

大猫: MAC绑定, PSK 密码超复杂?

挨吻: 绑定了,密码是程序生成绝对复杂

大猫: admin:admin 改了?

挨吻: 也是超级复杂,自己都记不住的密码

大猫: 看来遇到高手了

挨吻: ...

大猫: [熟练的按了alt+f2 输入 gcalctool 启动了计算器,12835+25014=37849]

大猫: 果然

挨吻: ...

大猫: 是你路由器的MAC地址

挨吻: [关机面床]

滚烫贴

预缓存(Preload the cache) WP Super Cache

bigCat — Mon, 21 Jun 2010 13:06:40 +0800

不知道 wp-super-cache 的建议看一下最佳 WordPress 缓存插件：WP Super Cache补补课

这会儿后台直接升级Wordpress 3.0 花了1秒钟,感觉巨爽
wp-super-cache 顺手也升了,有几个特性还是要提一下

下面是翻译自官方blog的预缓存(Preload cache) 介绍
Preload the cache in WP Super Cache

看到本周帅气的下垂了么? 我上周日启用了 WP Super Cache 的预缓存(preload cache),这玩意儿明显的降低了服务器的负载,创建缓存时会有个峰值,很黄很暴力

我一直不鼓励用户使用预缓存,主要是因为文件数量会导致一些问题,如果你有几千个缓存文件,硬盘挂了会需要很长时间才能恢复.
(注: 有些主机商会限制文件数)
但反过来说,Google把速度作为一个网站的衡量标准之一.在过去,这个插件会忽略爬虫,因为爬虫每次只访问每个页面一次,缓存相对它们是毫无意义的.所有的页面都应该在 Google 还没开始爬过来之前就缓存好
(注: WP Super Cache 工作流程是第一次请求页面时把PHP+MySQL处理结果生成静态页面,再次访问时甚至都不用执行一行代码 )

如图所示,一旦你启动预缓存,它会挂载在 wp-cron 去获取100 个帖子, 过10秒后再去获取100个帖子直到读完所有帖子. 它同时会禁止掉老帖子的垃圾回收机制,但有评论和新帖子的时候还是会干掉一些适当的缓存文件
目前它只缓存文章页 (注:is_single()那种,中文差不知道咋翻译),貌似没啥必要去缓存 archive 或 tag 页,因为很多站已经写了 robots.txt去忽略这些页面

这次 WP Super Cache 的更新包括了

更好的支持移动设备插件,例如 MobilePress (注:之前会有电脑访问出现手机界面的bug,不知道现在如何,有遇到问题的朋友请留言)
增加了缓存测试功能(注:之前只能通过查看页面源代码最底下的注释了解情况)
可设置只在评论更新的时候更新缓存,而不是前台或相关页面
Works in WordPress 3.0.

它还有一堆 bug 要修, 和其他功能要增加

愿意当小白鼠的可以尝试开发版本 from the download page ,有问题就反馈到 support forum

=====补刀======================

如何安装 WP Super Cache ?
答: 进入后台,选择左侧 plugins -> Add New ->输入 WP Super Cache 点 Search Plugs -> Install Now

小博客很适合开启全站预缓存
个人觉得没必要设置定时重新生成全站缓存,如果你老帖子变动不频繁的话
因为即使老帖子变动了,对应的也会自动生成

有同学问,我网站规模太小,是不是不需要缓存?
答: 缓存是为了自己爽, 提速不是一个段位

=====补2刀=====================

使用 (miao) 服务器的同学不用开启 gzip ,偶已经配置了默认压缩指定文件类型
也不用担心文件数的问题, 偶木有做限制

QQREADERD1F79C5048631991

滚烫贴

日本队苍井空球迷

bigCat — Tue, 15 Jun 2010 00:02:54 +0800

果然日本队比中国队靠谱
1:0 了！
苍井空老师加油，我永远支持你
以上

球迷大猫

PS 据说腾讯微薄上可以选球队了，欢迎 Follow
http://t.qq.com/bigcat

没有开的同学用如下邀请码

http://t.qq.com/invite/b418f5bba186a15c01ff

http://t.qq.com/invite/aa002d785eb4ded18881

http://t.qq.com/invite/70a084b48b011f2d4823

http://t.qq.com/invite/542d1f53f2f9b5c46991

http://t.qq.com/invite/eaa3208035a4f2b948ad

http://t.qq.com/invite/ccf3cdb06c707e5d44af

http://t.qq.com/invite/7d1abb5c2b4f9ba33545

http://t.qq.com/invite/0e59ab0989487b147cf9

http://t.qq.com/invite/b6e6ad9af318ba1caac5

http://t.qq.com/invite/4346a5d0257b03e31b15

http://t.qq.com/invite/f199391419e95e38f4d3

http://t.qq.com/invite/183716c6fded2bb39227

http://t.qq.com/invite/e7473a62854c4d1c47db

QQ 2010 正式版直接集成了微薄到面板里，方便的很
至于那个什么软件助手之类的，我也不知道什么时候就一起按上了
搬小板凳看和360互日

-update-

http://t.qq.com/invite/9f3370858070d4bb31a7

http://t.qq.com/invite/f3312da68c4b05a50fb3

http://t.qq.com/invite/79b47ceb0e525077787f

http://t.qq.com/invite/6417b9a5a64054e36ff9

http://t.qq.com/invite/22a170e947a410fd6ea1

http://t.qq.com/invite/0e59ab0989487b147cf9

http://t.qq.com/invite/eaa3208035a4f2b948ad

http://t.qq.com/invite/542d1f53f2f9b5c46991

-update2-

http://t.qq.com/invite/4754e4cbb28836e552a3

http://t.qq.com/invite/30ae2a92ab9c9e5a1a31

http://t.qq.com/invite/bf24dc0795fc9d7a1a51

http://t.qq.com/invite/ac99c639471ff3d1f503

http://t.qq.com/invite/086c45ce13fbeb9d20cf

-update3-

http://t.qq.com/invite/7e7c21fe4c83b9b4ba2f

http://t.qq.com/invite/9e4f67fa864b4dcfd5f3

http://t.qq.com/invite/9b78115a7351a2fd6923

http://t.qq.com/invite/9ecf8c598875027b4573

http://t.qq.com/invite/8527d2d89e9d29185795

-update4-

http://t.qq.com/invite/cb75d633176c0b97c4df

http://t.qq.com/invite/2aa236825d8699548a57

暧昧贴