摘要: 最近开始使用github pages来管理自己Blog的静态DEMO,发现的确很方便,并且还顺带了DEMO的版本管理。可惜我对jekyll、liquid都不熟,每次都ci到github后再预览十分不便,遂决定搭建一个本地的jekyll环境,以便调试和学习之用。 1、安装/升级本地ruby 安装rvm 阅读全文
posted @ 2013-04-24 00:26 猫哥_kaiye 阅读(4386) 评论(0) 推荐(0)
摘要: 最近开始做一些PHP的项目,发现经常要读写URL参数,没找到PHP中类似的方法,所以自己封装了两个。如果有类似方法请帮忙留言指出。若直接用$_GET['param']的方法读取URL参数,在参数没有设置的时候会有Notice的错误提示,因此针对参数未设置与参数为空的情况也做了些处理。//解析URL参数function parseUrlParam($query){ $queryArr = explode('&', $query); $params = array(); if($queryArr[0] !== ''){ foreach( $q 阅读全文
posted @ 2012-11-27 14:20 猫哥_kaiye 阅读(7355) 评论(2) 推荐(0)
摘要: 在kamal的建议下,整理了博客中用到的一些DEMO页:工具类:http://yekai.net/demo/?q=tool游戏类:http://yekai.net/demo/?q=game将以下PHP代码,丢入DEMO根目录即可自动生成列表:<!doctype html><title>叶落花开:DEMO列表</title><style>body{line-height:1.8;font-size:14px;}.xxxxx{color:#666;font-size:12px;}</style><h1>叶落花开:DEMO列表& 阅读全文
posted @ 2012-11-16 20:25 猫哥_kaiye 阅读(307) 评论(0) 推荐(0)
摘要: 20121101更新:atrl同学给出了一行代码的实现,很漂亮:[].splice.apply(arr, [].concat.apply([ toPos ,0], arr.splice(pos,1) ) );———————–搞重构JS写得少了,jQuery很不熟,不知道有没有预设的这个方法,只好自己先写了个。function changeArrayItemPos(arr, pos, toPos){ //目标索引溢出修复下 toPos = Math.min(Math.max(0, toPos), arr.length - 1); //待换索引溢出或与目标索引相同,则不做处理 ... 阅读全文
posted @ 2012-10-25 21:17 猫哥_kaiye 阅读(2262) 评论(0) 推荐(1)
摘要: 前端开发过程中会经常和后台沟通一些接口的联调,做拍拍首页项目尤其频繁。因为涉及到跨域问题,所以数据基本都是JSONP格式。市面上JSON数据格式化工具挺多,却一直没有找到一款JSONP的,于是自己动手做了这个JSONP Viewer的chrome插件。十分感谢姚小M同学设计的icon~目前提交的为1.1.0版本,包含特性:当前页面为JSON或JSONP数据文件时,进行代码格式化当前页面不为数据文件时,询问是否需要打开工具页工具页支持手工输入数据,进行数据分析对象属性默认使用字母排序,便于查看鼠标移到单条数据上时,出现对应属性引用值的title提示数组数据展示下标值,折叠后可查看数组长度遇到个小 阅读全文
posted @ 2012-07-03 22:33 猫哥_kaiye 阅读(881) 评论(1) 推荐(0)
摘要: 今天伟大的交互设计师高高问到表单select控件能否限制最大宽度,于是我随手写了个用max-width + IE6 expression的实现方案(写完DEMO才发现IE7不支持select的max-width)。最近花花群里也有人问expression性能优化的问题,这里就一并说下。Yslow、PageSpeed以及各类性能优化的原则中通常都会包含一条“Avoid CSS Expressions”,关于这条优化原则的成因与解决方案,Steve Souders早在N年前就写有专题详细阐述过。当我第一次看到DEMO中的expression counter飞速增长时,内心十分震撼,我发现自己津津乐 阅读全文
posted @ 2012-06-06 00:18 猫哥_kaiye 阅读(1871) 评论(0) 推荐(1)
摘要: 在今天的小组分享会上,我抛出了一个“后IE6时代”的想法,提醒各位前端开发同学为即将到来的前端新时代做足充分的准备,重新思考我们的核心竞争力与价值。这些想法源于红衣教主的一条微博,以及jacob校长翻译的《推动web向前发展》。相关的感悟没有在PPT中提及,这里一并分享交流出来。1、设计原理:Humans First, Machines Second.工具是为人服务的,人类制造和使用工具是为了更好的生活。从这条原理可以引申出一条类似的重要结论:工作是为了生活,因此生活第一,工作第二。乔老板也说要学会享受生活。2、用户体验设计的终极目的是为了提高效率看看工业革命最伟大的发明,神奇的洗衣机。洗衣机 阅读全文
posted @ 2012-05-31 00:41 猫哥_kaiye 阅读(242) 评论(0) 推荐(0)
摘要: 最近想在QQ弹窗每日精选上做个比较炫的角标动画,于是乎发现了这么些有意思的东东。CSS版最先想到的是做个纯CSS版的,原理也简单:a标签默认一张背景图,a:hover后换成另一张动态gif图。这种方法的特点是:设计成本中,兼容性中,性能影响中。我们期望的效果是:鼠标mouseover时,播放一遍动画,mouseout时恢复原状,再次mouseover时要重头播放一遍动画。比较搞笑的是原生IE6/7上可以满足要求(可能因为没有做优化,每次hover都会重新渲染gif,好在没有发起新的请求)。但其他浏览器却缓存了hover的状态,不管是播放一次的gif,还是循环播放的gif,都无法完美实现这样的效 阅读全文
posted @ 2012-04-06 01:00 猫哥_kaiye 阅读(995) 评论(0) 推荐(0)
摘要: CSS中写中文字符可能会导致样式失效,所以一般在写到font-family的时候会做个转码,这样通篇都是ASCII字符的CSS随便设置个啥@charset都能解析正常。例如:font-family:宋体; /* 做个转码写成: */font-family:\5B8B\4F53;这个\5B8B\4F53咋弄的?简单的方法,打开firebug,在控制台输入“宋体”,然后会出来一个报错提示:ReferenceError: \u5B8B\u4F53 is not defined,其中的“\u5B8B\u4F53”就是JS中的“宋体”字符串unicode标准化之后的表示。在CSS中,去掉中间的小u就好了 阅读全文
posted @ 2011-12-14 23:41 猫哥_kaiye 阅读(392) 评论(1) 推荐(0)
摘要: 先看DEMO,在chrome、safari、firefox下,页面显现正常的绿色背景,而在IE下,页面背景为白色。经过分析引起的原因是:1、HTML页面编码与CSS编码不同(DEMO中HTML为gbk,CSS为utf-8)2、CSS文件中未指定@charset头声明,导致IE默认使用页面编码来解码CSS文件(DEMO中IE浏览器使用gbk来解码一个utf-8的CSS文件)3、中文注释中的汉字为奇数个数时,会与结尾的“*/”组合成新的合法字符,导致注释未能正确关闭,造成紧跟其后的样式被自动注释,从而引起样式失效。例如,该DEMO中CSS代码为/*叶落花*/body{background-colo 阅读全文
posted @ 2011-07-30 17:34 猫哥_kaiye 阅读(747) 评论(0) 推荐(0)