Vue Pikaday

Pikaday 是一个干净小巧不依赖其他库(如 jQuery 等)的日期选择库(只能选日期不能选时间),如果只需要一个简单的日期选择功能,又不想要加载 jQuery 甚至 Bootstrap 这样的大部头可以考虑选择。

最近在使用 Vuejs 做项目,就把这个日期选择库包装了一下,是他可以作为一个组件在项目中使用,组件源代码如下:

使用这个组件以前需要做一点微小的工作,首先安装 pikaday:

然后将所需的 css 文件引入(scsscss);
接着在项目中使用组件:

hava fun!

compass with sass

前段时间将项目里面的css文件全部转换为使用sass(.scss)来管理,迁移工作十分顺滑。其中主要就归功于compass的功劳。

compass是一套基于ruby的,自动化编译sass文件为css文件的工具,使用相对简单:

1. 安装ruby环境(如果你是Mac用户,那么可以忽略此条,windows用户可以参考官方安装文档);
2. 安装sass(同第一条,如果你使用Mac环境,系统就已经内置了sass引擎,如果是其他系统单独安装,请参考官方安装文档);
3. 安装compass,打开终端,运行如下命令

4. 在终端中,将操作路径切换至项目所在目录,运行如下命令创建初始化项目

如果你想在一个已有的项目中启用compass,只需要切换到项目目录,运行

5. 此时终端中会返回一大串的文字,也就是帮助文档了,项目里面会有一个最基本的目录结构,默认情况下,会把sass目录中的.sass/.scss文件编译后以.css文件的方式存放到stylesheets目录下,通过config.rb来修改默认配置。
6. 使用的时候,在终端输入compass compile,会进行一次编译,输入compass watch,会监听sass目录下文件的变化情况,只要文件保存就会编译一次。

Have fun!

PS:有一个很坑爹的问题在于,使用gem的时候,由于源服务器被墙,下载失败的话,请挂全局代理后安装相关软件。

Yosemite 下安装 PIL (Python Imaging Library)

项目里需要导入 pil 包,要不跑不起来,于是在终端输入

提示找不到匹配的安装包,手动到官网下载也无法正常安装。

搜了一圈终于找到了解决方案

问题解决,妈妈再也不用担心我的环境跑不起来了~

Mac 中使用 Sublime Text 编译 Java 文件后自动运行

一看标题一大坨,其实就是实现一个简单的功能,写 Java 程序的时候,按 Command+B 之后,直接在 console 里面显示结果,这样就方便很多,还省了一个终端窗口,有木有?

找了一大圈教程无果(都是简单问题复杂化,并且还无效),最后在 Quora 找到个靠谱的答案,这儿用大白话记录下 Step 吧:

1. 安装 Java 并配置环境(这我就不说了哈,网上一大坨);
2. 打开 Sublime Text,点击 Sublime Text -> Preferences -> Browse Packages,新建文件夹 Java;
3. 新建一个文档,名为 JavaC.sublime-build,其中粘贴如下内容:

4. 将这个文件拖到第二步中新建的那个 Java 文件夹;
5. Command+Q 退出 Sublime Text 后重新打开,随便找个 .java 文件 Command+B 试试。

实际效果如图:

Zen Coding

有幸接触到一种集实用性与逼格于一体的书写代码方式(主要是 HTML 代码了):Zen Coding

Zen Coding 的核心思想是你可以像书写 CSS 选择器那样去简写 HTML 代码,而不需要不停的复制粘贴,这样离搬砖似乎又稍微远了一点。

官网上有一个如此的示例:

然后你按 Tab 之后,它就会被自动填充为这样:

忽然之间就高大上了有木有?这儿有一段操作视频:

目前 Zen Coding 的插件几乎兼容市面上各种主流编辑器,官网上就可以找到对应的,比如我所使用的 Sublime Text 的 package 就在这里可以找到:http://docs.emmet.io/

Have Fun !

基于json数据的jQuery无限级下拉菜单插件

自己写的一个小插件,基于jQuery,取得json数据以后可以生成一个下拉菜单,理论上是无限级的。

点击查看Demo

也可以通过SVN下载(由于代码无限修改中,所以暂不提供压缩包下载,还请见谅):

这个小插件目前只提供了最基本的线框样式,以后会逐步完善,相关实现方法及使用说明都会后续报道的。天冷不想打字,今天先到这了..

用DD_belatedPNG插件修复IE6 PNG

IE6是一个令人作呕的话题,个人极为厌恶IE6,并且恨屋及乌,不过没有办法,中国就是这么一个神奇的国度,到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣,不知道浏览器为何物的也更加不提了,而这种人往往又是互联网中广告点击的生力军,消费能力强,所以你必须照顾到他们的感受。

我对IE6恨之入骨的重要原因之一,恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果,到了IE6这儿就得纠结蹉跎,虽然IE6勉强的支持PNG-8格式的伪半透明,但这个和GIF图片的效果相差并不大,如果你使用PNG-32的话,你所有的半透明区域都会变成灰底。

网上有不少IE6上实现PNG半透明的工具,各有千秋,大多数使用了IE的一个滤镜:AlphaImageLoader,使用后会有各种诸如问题(比如background-position和background-repeat属性支持的不完善,有些还会擅自更改背景图片的尺寸)。DD_belatedPNG提供了一种新的选择,他使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。

查看Demo | 打包下载

其使用方法也不难,先在此下载DD_belatedPNG ,然后插入head标签中:

将所有需要需要修补的元素加上class=”png”即可

PS:对于:focus和:hover伪类,则需要将以上代码中的 :
DD_belatedPNG.fix(‘.png’);
修改为 :
DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’);

BTW:虽然这样可以缓解IE6下PNG的问题,不过会带来性能问题,还有一些其他的问题,自然是不如对png半透明有原生支持的浏览器的。所以,赶快让该死的IE6下地狱吧。阿门!

关于本Blog的页面载入效果

Zed童鞋向我询问本站载入效果的做法,由于比较繁琐,遂写到Blog中来,一来是这样比QQ等手段更有条理性,二来可以保留下来提高重用率。

废话不多说,现在开始:

1.结果
本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。

2.思路
这个半透明遮罩首先被载入,这样他才能在一开始就出现,他上面有一张图片和一段文字告诉浏览者这是在loading,而不是笔记本快没电了或者什么;然后,页面的DOM就Ready了,这个时候为了验证各种库(比如我所使用的jQuery)载入完毕,CSS也下载完了,我们使用jQuery语句来使这个遮罩层隐藏起来,这个时候这个效果就完成了。 继续阅读“关于本Blog的页面载入效果”

在本机安装Shopex

想装一个Shopex在本机玩玩,不料还没装上就出了问题了,一片乱码,不管你更换成哪种编码都一样,貌似一盆凉水扑面而来。
遂打开浏览器Google之,发现是没有装Zend Optimizer,按教程找过去,发现官方下载还要注册,于是乎随便找了个网站下载了(下载链接那个难找啊,还好是真的而且没有毒,赞..),下载以后直接安装,直接无脑yes+next肯定是不行的,要选择正确的php及apache目录,好了,一切搞定,重启apache,我欣喜的发现,乱码还是那个乱码。
最后我用了方法若干,找到了解决办法,打开php.ini ,Ctrl+F找到[Zend],将zend_optimizer.enable_loader = 0 中的0改为1,问题解决。
接下来再次打开Shopex安装页面,这个安装就行云流水轻车熟路了,唯一的可以称之为麻烦的东东也就是需要预先添加一个数据库了。
接下来这个Shopex就算是安装好了,要干什么请便吧。