让文本框支持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块门票。处于尊重人民群众的意见的考虑,我们也就没上......

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟