让文本框支持Tab键缩进
文本框是Web输入必不可少的一个控件,虽说现在有了很多所见所的的编辑器,但是在做一些输入比较简单的功能的时候,总不能引入一个庞大的编辑器代码是吧?比如说,syntax-heighlighter 的代码输入框。
一般情况下,textarea写些示例代码已经够用了。但是遇到需要缩进的时候就比较蛋疼。页面上的Tab按钮默认行为是跳转焦点,无法实现对文本框的内容进行缩进。如果要缩进,就得自己敲4个空格,天啊,敲死我咩~~
所以,想要不蛋疼,就得做hack。more
话说textarea有两个很好用的属性,selectionStart、selectionEnd(不确定ie是否有这......
禁止iframe页面时产生历史记录
最近做的一块功能,需要在页面A中,用iframe嵌入一个页面B。本来嘛,这是件easy到吃生菜都没那么容易的事。问题在于:iframe的这个页面B,也继续嵌入了另一个页面C。其实呢,这还是个正常得不能再正常的事。然后呢, 那个呢,在B页面iframe C页面的时候,就产生了一个历史记录了。表现就是,原来不能点击的后退按钮变得可点击了。是不是有点乱,看看下面的示意图:
由于这个页面是个Web App,同时要保证浏览器的前进/后退/刷新按钮可用。无端端的多出个没意义历史记录,而且这种历史记录,点击后退时是不会有hashchange和popstate事件触发的,兼容起来是相当的狠蛋......
【魅力CSS】使用CSS3绘制网格线
话说昨天在写在线素描的时候,想着给画布加上些网格,就跟PS里面的一样。但是用canvas画是不行的(注:不是它不行……),图片又让我不齿,就作罢了。
今天想着要不尝试着用CSS3画一个,找了些资料,看了下CSS3的所有属性,竟然也被我找到画网格的方法了,喔~哇哈哈哈~~
这些属性就是——linear-gradient、background-size,大家鼓掌欢迎他们~
那到底要怎么做呢?我们暂时不考虑网格,先想想,怎么画一条横线呢?more
……(10分钟过去鸟)
好,看下面的代码(只贴了webkit的实现,其他的太多,不想写,下同~ <......
使用Canvas把照片转换成素描画
一、引子
话说前阵子想把一张照片转换成素描,然后发个微博。结果发现mac上没找到能直接转换素描的软件(PS不算,可要好几步呢),坑爹啊~~google 了下,Web上竟然也是没有直接把照片转换成素描的东西,连让我包含期望的美图秀秀(Web版)竟然都没有素描功能,T_T。
手机上是有很多这类app,但是我只是想一键转换下,发个微博嗟,至于这么折腾么……
所以自己动手整一个在线版的吧,没怎么用过canvas,正好可以顺道熟悉下。等不及的童鞋可以先到这里看看效果(http://appx.imatlas.com/sketching/)。
二、怎么转换
刚冒出这个想法的时候,简直......
根据SVN版本号自动更新图片时间戳
项目开发中,经常会用到的图片进行修改,而CDN都会对图片做cache,如果图片更新了不做其他处理的话,用户端的图片则无法更新(删浏览器cache刷新除外)。
因此每次修改完图片,都需要去更新css所引用的图片url。通常的做法是给图片后面加个时间戳,如:./images/sprite.png?20120714001。但是人工修改这东西是个挺蛋疼的事,咱是程序员, 不应该干这些繁杂无趣的事对不对。
所以阿拉整了个python脚本来干这事(貌似最近写脚本写上瘾了,汗-_-||)。原理是读取css文件,遍历图片url,然后读取图片的svn版本跟url带的版本号比较。如果比较新则更新u......
【WordPress插件】懒人工具之快速插入代码按钮
用Wordpress写技术文章,经常都要插入一些代码。代码高亮的插件就不说了,目前本人感觉最好用的还是SyntaxHighlighter,具体使用也不说了,网上也有同学写个SyntaxHighlighter for Wordpress插件,简化了插件的嵌入。
这里要说的是,插入代码的时候,需要切换的html源码视图,然后自己打入<pre></pre>标签,并把代码贴入。是挺简单的,但是对于我这种懒人来说,这可是相当的烦呀。于是花了点时间,给wordpress的编辑器加了个按钮,一点击就可以插入代码了,是不是很爽咧,哈哈~~more
效果图如下,按钮只在可......
JS计算字符串所占字节数
废话不说,直接正题吧。
最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的。而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16。因此本文只对这两种编码进行讨论。
下面这个定义摘自维基百科(http://zh.wikipedia.org/zh-cn/UTF-8),做了部分删减。
UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,可以表示Unicode标准中的任何字符,且其编码中的第一个字节仍与ASCI......
Windows平台安装NodeJs环境
惊喜,最近版的NodeJs(目前是0.6.19)提供的msi安装包已经把npm打包进去啦,感兴趣的朋友可以到官网下载。如果你很懒,点这里直达,^_^。
下载后的msi直接双击运行,不过不能选安装路径,有点令人不爽~~强暴的装在了“C:\Program Files\nodejs”。
安装完成之后会自动把安装路径加入%path%,之后就可以为所欲为的用node和npm啦,哈哈哈~
安装模块
npm install intelligent-spriter
卸载模块
npm remove intelligent-spriter
附上个安装截图
......
NodeJs智能合并CSS精灵图工具iSpriter
一、引子
根据雅虎的网站优化准则,合并页面用到的图片,可以减少加载时发起的http请求数目,可以加速页面加载。具体能提速多少,本人没测试过,也就不好说了。
话说这排手上的项目里用到的图片都怎么合并,并不是不想合并,而是一个个图片去拼实在是太累了啊。另外桂总做的autosprite又还没成型,未能支持旧有项目;自己做的AutoSprites也是一个烂摊子——java写脚本功能的代码真不是一般的痛苦啊;至于炜哥的GoPng在线合图工具,说实话,这类需要人工定位图片的工具,我着实不喜欢。还是那句话,我可是个程序员呐,这种机械化无趣的工作就该交给电脑来完成,不然电脑是拿来干嘛的?
二、所......
【走四方】西安自由行
_千里之行,始于:2012-5-28_
眨眨眼一年就过去了。明显的年假又要过期了,无奈只能抓紧时间休假。五月连续加了两个周末的班,手上的项目后续需求不断,总找不到空档。眼看着暑假就要来了,到时又是一堆学生们的旅游季。狠狠心,怎么样都要修个假再算了。于是收拾行囊,跟桂总跑了趟西安,顺便爬了趟华山,累成狗一样滴回来了。
第一日
早上11点的飞机,在空中呆了两个多钟,终于落地了。Google Maps告诉我,从咸阳机场到西安市区要两个钟,结果40几分钟就到了钟楼了。他妹的又骗我。都说钟楼、鼓楼上面没有什么东西看,而且还有收40块门票。处于尊重人民群众的意见的考虑,我们也就没上......