按文件修改日期整理和移动文件

想整理下手里的照片,懒得装管理软件了,只想简单的按日期整理。心想这种脚本应该是满大街的了,结果简单搜了下居然没搜到windows下顺手的,索性自己写了一个。

用法是,把下面代码保存成 .js 文件,放到要处理的文件夹下运行即可。可处理 jpg和nef文件。

注1:之所以没有使用文件创建日期,是因我一旦照片经过复制后,文件创建日期就变成了复制的时间了。但就算复制后,文件修改时间还是之前照片的拍摄时间,所以才用了文件最后修改时间。

注2:修改第3行可以变更待处理照片的地址。比如改成
f = fso.GetFolder("G:/DCIM/109D7000");
就可以直接处理存储卡中的照片了。

注3:修改第11行可变更目标地址。比如改成 s.move("d:/photo/" + path + "/") 就可以让照片都保存到 d:\photo 下了。

var fso, f, fc, s, d, path;
fso = new ActiveXObject(“Scripting.FileSystemObject”);
f = fso.GetFolder(“.”);
fc = new Enumerator(f.files);
for (; !fc.atEnd(); fc.moveNext()){
s = fc.item();
if(!/(.jpg|.nef)$/.test(s.name.toLowerCase()))continue;
d = new Date(s.dateLastModified);
path = d.getFullYear() + lz(d.getMonth() + 1) + lz(d.getDate());
if(!fso.FolderExists(path))fso.CreateFolder(path);
s.move(path + “/”)
}
function lz (num) {
return num > 9 ? “” + num : “0” + num;
}

自定义 HTML5 meter 元素样式

meter

HTML5种的meter元素非常有用,然而默认样式总是跟不上时代的步伐,所以琢磨了一下自定义样式的方式,仅适用于webkit内核的浏览器。Chrome 26 测试通过。分享给大家。颜色取自 Bootstrap Button


meter::-webkit-meter-bar {
background: #FFF;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(to bottom, #62c462, #51a351);
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(to bottom, #fbb450, #f89406);
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(to bottom, #ee5f5b, #bd362f);
}

测试地址 :http://shawphy.com/demo/meter.html

@simurai 写的更神奇的用法
@simurai 写的更神奇的用法

扩展阅读:
HTML5 progress元素的样式控制、兼容与实例

bitbucket上提交代码后用户名不显示链接问题

一个不痛不痒的问题,就是在bitbucket上提交代码到代码仓库,总是不会在我的用户名上显示出链接来,简单搜索一下,没找到中文的信息,搜英文的,倒是很快找到这个 issue : https://bitbucket.org/site/master/issue/3394/user-aliasing-commit-user-not-showing-up

原来很简单,他必须要在用户名里设置邮件才可以,
以 username <email@example.com> 这样的形式设置用户名才可以。
编辑~/.hgrc
找到其中用户名的字段,改成如下的形式即可

[ui]
username = Shawphy <email@example.com>

即可

Node.js 的简易web服务器

网上关于Node.js的介绍已经铺天盖地了,但我就没找到一个简单的web服务器给我做测试用。
实际上Node.js只需要一个exe文件和一个js文件就可以搭建服务器了,用来随便测试页面之类的用起来比nginx还方便。所以我就随手写了一个简单的。只可用于http服务,没有更多功能的js文件。

用起来很简单:
1,先去 http://nodejs.org/下载最新的Node.js可执行的exe文件。比如: http://nodejs.org/dist/latest/node.exe
2,把下面的代码保存为一个 server.js 文件,把它跟刚才下载到的 node.exe 文件放在一起。
3,把server.js文件拖到node.exe文件上就OK了

就这三步之后,整个目录下的文件都可以通过 http://127.0.0.1:8080/ 来访问了,测试用起来非常方便。

其他系统下也如法炮制,官网上也有下载mac和linux的版本。

var http = require("http"),
	url  = require("url"),
	path = require("path"),
	fs   = require("fs");

http.createServer(function (req, res) {
	var pathname=__dirname+url.parse(req.url).pathname;
	if (path.extname(pathname)=="") {
		pathname+="/";
	}
	if (pathname.charAt(pathname.length-1)=="/"){
		pathname+="index.html";
	}

	fs.exists(pathname,function(exists){
		if(exists){
			switch(path.extname(pathname)){
				case ".html":
					res.writeHead(200, {"Content-Type": "text/html"});
					break;
				case ".js":
					res.writeHead(200, {"Content-Type": "text/javascript"});
					break;
				case ".css":
					res.writeHead(200, {"Content-Type": "text/css"});
					break;
				case ".gif":
					res.writeHead(200, {"Content-Type": "image/gif"});
					break;
				case ".jpg":
					res.writeHead(200, {"Content-Type": "image/jpeg"});
					break;
				case ".png":
					res.writeHead(200, {"Content-Type": "image/png"});
					break;
				default:
					res.writeHead(200, {"Content-Type": "application/octet-stream"});
			}

			fs.readFile(pathname,function (err,data){
				res.end(data);
			});
		} else {
			res.writeHead(404, {"Content-Type": "text/html"});
			res.end("<h1>404 Not Found</h1>");
		}
	});

}).listen(8080, "127.0.0.1");

console.log("Server running at http://127.0.0.1:8080/");

Sublime Text 2 简介

最近试用了一款新的编辑器 Sublime Text 2,跨平台,据说他是仿TextMate的,没用过TextMate,不知道后者有多厉害。然而 Sublime Text 2 我一用就爱上他了。

sublimetext2

一开始是由于他的迷你地图模式而吸引我的注意力的,这个迷你地图可以概览整个文件。实现快速跳转。这个是个亮点,在其他编辑器中都没有见过此类功能。然而试用了之后我很快发现,迷你地图功能可能未必好用,但真正让我觉得舒服的是,他的zencoding支持的非常完美,直接有实时预览功能。

此外他的窗口分组、项目管理、扩展工具、代码折叠方面都非常不错。他还直接支持vim模式呢!
我之前在微博上推荐 Sublime Text 2 后,引来好多vimer的鄙视。说比vim差多了。我也无意参与这类争论。一个是现代兵器,一个是上古神器。自己用的爽就行了,何必与人争呢。

总之这个编辑器非常适合我这样喜欢vim的快捷键,又不喜欢vim复杂的配置的人。轻松上手功能强大。

目前他唯一的缺点是,无法打开gb2312之类的东亚编码,打开都会乱码。但是打开utf-8编码的文件毫无问题,可以正常显示和输入中文。

=========
update:
@seanliang写了一个插件用来编辑和保存gb2312和big5编码的文件,可以访问项目地址: https://github.com/seanliang/ConvertToUTF8
=========

如果你也心动了,可以点下面的地址来下载最新版。Sublime Text 2是收费软件,售价$59,但可以无限期试用,仅仅会偶尔在保存文件时弹出提示框而已,编码过程中不会出现任何干扰。

beta版:
http://www.sublimetext.com/2
大约1个月更新一次。

dev版:
http://www.sublimetext.com/dev
隔三差五更新,非常频繁,慎用……

另外建议依次拜读 Lucifr 的三篇博客
Sublime Text 2 入门及技巧
ZenCoding in Sublime Text 2
Sublime Text 2 实用快捷键[Mac OS X]

Lorem ipsum 是什么?顺便推荐一款假文生成器MoreText

今天在测试Coda还有VIM snipMate都看到了一段 Lorem ipsum 。好长的一串,看都看不懂的文字:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

一次遇到也就算了,一天之内在不同地方遇到两次,可见是有缘分了。简单一查,原来这是印刷设计排版上用于测试效果的一段无意义的文字,难怪我完全看不懂了。维基上是这样说的:

Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
Lorem ipsum从西元15世纪开始就被广泛地使用在西方的印刷、设计领域中,在电脑排版盛行之后,这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头,并且常被用于标题的测试中,所以一般称为Lorem ipsum,简称为Lipsum。

于是根据维基页面上,找到了两款中文的假文生成器。但遗憾的是都是繁体中文的,没有简体的。我只推荐这款MoreText,因为虽然他生成的是没有意义的假文,但每句话看起来都还像是一句句子,而不是随意的汉字堆砌的句子而已。因为他可以选择语料库!有赖和、徐志摩、Twitter和苹果日报!所以他的这个看起来效果还真不错呢!如果你在设计产品的时候需要大量文本填充的话,不妨试试吧!我随便贴一段:

鬧熱到了,借著拜年的名目,奉行正朔,實在可憐可恨,雖受過欺負,使人們沒有年歲的感覺,死鴨子的嘴吧,街上看鬧熱的人,波湧似的,和狺狺的狗吠,和他們一拚!街上看鬧熱的人,驟然受到光的刺激,現在不高興了,地方領導人。接連鬥過兩三晚,是抱著滿腹的憤氣,先先後後,在冷風中戰慄著,且新正閒著的時候,孩子們得到指示,看看又要到了。這回在奔走的人,走過了一段里程,勞動總說是神聖之事,怎地所說的一週會不同?一陣吶喊的聲浪,蹧躂人!所謂風家也者,他倆的來歷有些不明,凶惡的他們忍相虐待,甲總不平地罵。

看吧,每句话都像是一句话,但就是看不明白他们的意思。其实用Google Translate随便翻译一段英文,也能达到差不多的效果吧。

在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

HTML 5中的 canvas 元素是相当强大的,利用他的 getImageData 方法可以对载入的图像直接进行位图操作。但是直接对位图进行操作比较麻烦,如果利用卷积矩阵这个工具的话,可以通过几个简单的参数实现复杂的效果。

所谓的矩阵的卷积,就是如下图显示的那样,当计算红色框中的数值的时候,分别先提取周围绿框中8个数字,然后与施加的那个矩阵中对应位置相乘,然后把各个乘积加在一起,就得到了最终的值了。

卷积矩阵的运算

比如上图中的42是这么来的:

  (40*0)+(42*1)+(46*0)
+ (46*0)+(50*0)+(55*0)
+ (52*0)+(56*0)+(58*0)
= 42

这就是卷积了。然后,所谓的对图像的卷积操作,就是指对图像上的每一点的像素值,用这个矩阵进行运算,得到一个新的值。

比如下面这张图
卷积矩阵原图
利用下面这个矩阵
-6 -3 0
-3 -1 3
0 3 6
就立刻能够得到浮雕效果。

卷积矩阵浮雕效果

然后为了使用更方便,通常还会给最终值除以一个系数以及加上一个偏移。
比如下面这个矩阵。
0 0 0
0 1 0
0 0 0
这个矩阵(实际上这个矩阵本身不对图像进行任何操作),然后设置系数为-1,偏移为255的话,就能实现反色效果了,真是相当的神奇。
卷积矩阵反色效果

为了简化操作,我写了个简单的函数来对图像数据进行操作。
函数第一个参数是 canvas上的 imageData 对象
第二个参数是传入矩阵所对应的数组,如果是下面这样的矩阵
a b c
d e f
g h i
则传入第二个的参数应为 [a,b,c,d,e,f,g,h,i]
第三个参数是除数因子。
第四个参数就是偏移量。

// 计算卷积矩阵的函数
function ConvolutionMatrix(input, matrix, divisor, offset){
// 创建一个输出的 imageData 对象
var output = document.createElement(“canvas”)
.getContext(‘2d’).createImageData(input);

var w = input.width, h = input.height;
var iD = input.data, oD = output.data;
var m = matrix;

// 对除了边缘的点之外的内部点的 RGB 进行操作,透明度在最后都设为 255
for (var y = 1; y < h-1; y += 1) { for (var x = 1; x < w-1; x += 1) { for (var c = 0; c < 3; c += 1) { var i = (y*w + x)*4 + c; oD[i] = offset +(m[0]*iD[i-w*4-4] + m[1]*iD[i-w*4] + m[2]*iD[i-w*4+4] + m[3]*iD[i-4] + m[4]*iD[i] + m[5]*iD[i+4] + m[6]*iD[i+w*4-4] + m[7]*iD[i+w*4] + m[8]*iD[i+w*4+4]) / divisor; } oD[(y*w + x)*4 + 3] = 255; // 设置透明度 } } return output; }

我这里只写了个3阶的卷积矩阵。如果觉得不够high还可以自己实现一个5阶的。
gimp自带卷积矩阵的滤镜,photoshop里我没找到。
关于gimp的卷积矩阵滤镜可以参考: http://docs.gimp.org/en/plug-in-convmatrix.html

我写的更多效果直接查看: http://shawphy.github.com/share/2011/matrix.html

关于 canvas 的资料可以查看 https://developer.mozilla.org/cn/Canvas_tutorial

给知乎加上显示LaTeX公式的脚本

鉴于大半年了,知乎都一直不愿意加上个显示LaTeX公式的功能,最近一次更新也完全没这意思。有时候讨论问题的时候不能显示公式着实不便,就花了点时间写了这么一个脚本工具。在知乎页面上导入MathJax,并且在每次Ajax之后都重新排版下页面上的公式。

顺便一说,Chrome在userscript里真是憋屈,页面上的变量获取起来真难。最后迫不得已只能注入页面脚本了。
知乎页面 http://www.zhihu.com/question/19817384
代码地址在这里 http://userscripts.org/scripts/review/110433
点击这里可以直接安装 http://userscripts.org/scripts/source/110433.user.js

八卦:HTML 5的由来

这篇文章纯属八卦,不过会给出消息来源,可信度尽量保证。

首先要说,HTML5的发展历史,下面引用维基百科上关于HTML5的阐述:

HTML 5草案的前身名为Web Applications 1.0,是在2004年由WHATWG提出,再于2007年获W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作,仍须多年的努力。目前Firefox、Chrome、Opera、Safari(版本4以上)及Internet Explorer 9(Platform Preview)已支援HTML5技术。

HTML 5的标准草案目前已进入W3C制定标准5大程序的第1步。负责编纂标准格式文件的Google代表Ian Hickson预期,可能得等到2012年才会推出建议候选版(W3C Candidate Recommendation)。

可以看到,这里HTML 5的前身就是WHATWG提出的Web Applications 1.0,要问知道HTML 5怎么来的,进一步要探讨WHATWG这个组织是怎么来的。

根据WHATWG官方FAQ上显示,这个组织最早是由Apple、 the Mozilla Foundation 和 Opera Software 这三家公司,在2004年的时候成立了。那当时到底是谁先发起的,这三家如何纠结在一起的呢?这里我首当其冲猜测是Apple公司勾引了另两家公司。乔布斯狼子野心想通过HTML 5的video标签和canvas标签来灭掉Adobe!苹果和Adobe有恩怨大家都知道~咳咳……似乎04年的时候Adobe还没收购Flash呢,当时还在Macromedia手中呢……呃,那一定是乔布斯那个时候就已经打算灭掉Flash了!嗯!

当时在群里讨论的时候,神飞飘来w3上的一个地址 ,里边提到,最早是由Mozilla基金会和Opera两家公司在一起弄的这个WHATWG组织。Apple是后来才加入进来的。呃………………看来我错怪乔布斯大爷了。但我还有个问题,当年Mozilla和Opera,到底是谁最先勾结对方的呢……

一筹莫展之际,有一个人引起了我的注意,此人就是刚才维基条目中提到的Ian Hickson。此人目前在Google工作。这位仁兄何许人也?仔细一查,发现不得了。在W3C 的 HTML 5 规范中,他就是编辑。而最早WHATWG写的文档,也都是放在Ian Hickson的个人网站上的。看来HTML 5的诞生与此人有着莫大的关系。继续扒一扒他吧。

用Google搜Ian Hickson,第一条就是他维基百科的条目(有其他人为自己建立维基条目,那这人这辈子也值了吧……),原来此人就是大名鼎鼎的 Acid 2Acid 3的作者。在上面找到了Ian Hickson简历的地址。哈哈,基本上找到了事情的全貌了。

================

事情的原委是这样的,自从02年,W3C终于把 XHTML 1.0 的第二版作为推荐标准之后,开始被胜利冲昏了头脑,他们妄图让HTML 完全进化成 XML。在02到06年之间,他们都在使劲折腾XHTML 2.0,这是个完美的标准,完美到与先前“污秽”“肮脏”的HTML完全不兼容。

而Ian Hickson,02年时候刚从英国巴斯大学物理系本科毕业,00年起就在W3C的CSS工作组有活动了。并且大学时起就已经混迹在Mozilla基金会里了。03年的时候受雇于Opera的研发部门,主要工作之一就是作为Opera的代表,在W3C中施加影响,促进标准的推进。

刚才已经说到了,W3C的那帮子天才们太过激进了(以Stephen Pemberton为首),完全无视浏览器厂商的诉求。一次W3C内部会议上,Ian提出对HTML进行一些扩展和改进,跟XHTML2标准制定的工作并行展开。结果投票结果是——“反对”。他们认为HTML已死,XHTML2才是我们的未来!于是,Ian Hickson怀着对W3C深深的忧虑,因爱生恨。干脆自立门户了。由于他本身就在Opera中,又在Mozilla基金会里混的脸熟。很快他们俩家就在Ian的牵线搭桥下,成立了WHATWG组织。后来他们觉得势单力薄,又拉拢了Apple公司一起入伙搞这个标准。

他没把微软拉进来,以及成立WHATWG组织的初衷之一就是为了替Opera公司来牵制微软的IE。很明显IE当时是市场的老大,老二老三老四抱团联合起来对抗老大是再正常不过的事情了。之前他们还可以对W3C施加影响来垂帘听政,现在可好,W3C那帮子疯子以为自己多么了不起了,没浏览器厂商给你们实现标准,你们得瑟个P啊。于是乎,三家人家一拍即合,组团成立一个新的政权,架空W3C的权利,来制衡微软。(其实被架空的只是W3C中的HTML小组,其他的如CSS、SVG之类的小组都还挺好的)

到了05年,Ian跳槽到了Google。Google是很有野心的。自从04年Google推出Gmail起就已经意识到了,自己的未来不能被帮浏览器厂商掌控,自己也要有话语权,也要参与制定标准。雇佣Ian的主要目的恐怕就在于此,一方面Ian代表Google在W3C的CSS小组以及其他小组施加影响,另一方面推进WHATWG的工作。并且Google确实在08年末的时候推出了Chrome,来实现自己的霸业。

06年的时候,W3C终于意识到自己被架空了……HTML的发明者之一Tim Berners-Lee发表了一篇博客,表示我们错了……次年,W3C宣布正式接纳并合并WHATWG的工作为HTML 5。于是乎,后面的事情,大家都知道了。

================
八卦的最后,是两篇扩展阅读:
成长的烦恼 — HTML5 标准之争 这篇会告诉你一些最新的八卦,HTML 5 现在又遇到了什么麻烦了。
HTML5设计原理 这篇会告诉你 HTML 5 如何从实用的角度出发来设计出来的。强烈推荐!!!

Be Pro

我的博客很少有转载的文章,今天难得转一篇,因为文中我也客串了一把,呵呵,并且文中的观点非常认同,所以转载过来,供大家探讨。原文地址:糖伴西红柿的Be Pro

=======================================

最近再次仔细把《HTML5设计原理》重新过了一遍,比起上次粗粗的浏览,收获更多,这篇文章没有任何关于 HTML5 标签、api 的使用的详细解释,而是对其背后的设计原理做了详细说明。这是 HTML5 一切纷繁表象背后的真义,值得每个前端工作者多次阅读。

下午和小飞 @shawphy 讨论一些问题的时候,说到了中文书写里的“的、得、地”地区别。据说现在已经把这三个 de 统一,不做区分了。想想也是,虽然我受教育的时候是区分三者使用的,但是我也一直没弄清楚它们之间的区别。因为最近的一些书写要求,还想趁过年期间回去请教下俺那当了一辈子语文教师的爹来着。

小飞说:“有一种观点认为,语言是活的,随着人们的使用而变化的。如果大部分人都不分了,那也就不要再分了。感觉着就像是HTML5一样。HTML5 很宽容,比如关于属性引号。按理需要有引号,但现在有没有都无所谓了。”

这就不得不提到 HTML5 设计原理其中的一条:“发送时要保守;接收时要开放。” HTML5 以包容的心接受开发者书写的文档,这些文档发送到同样敞开胸怀的浏览器,以使得那些不够标准的文档也可以渲染出来。

与之相对的是已经死去的 XHTML2 ,(呃,突然发现 XHTML 。。。2。想起郭德纲的一句玩笑:“CCTV。。。2,多大的勇气,谁好意思承认这个,人家还写上了。”)XHTML2 是绝对的理想派,要求严格使用 XML 的错误处理模型,也就是遇到一个错误就会停止解析。这对文档书写着的要求得多高啊。当然最为开发者,我们应该遵从最佳实践,尽量保证文档格式的正确。但是谁也不能保证 100% 的正确性,作为开放的互联网,对错误零容忍,导致浏览器无法渲染确实不是那么回事。

尤其是技术就像数码产品,越来越先进,但是价格(门槛)越来越低。我之前有私心,眼看国内一些人对技术的滥用,导致的网上的虚假信息、垃圾信息泛滥,甚至一度希望一些技术应该保有一定的门槛。但是后来想明白了,互联网本身就是开放到,技术生来也应该是服务每一个人的,至于怎么使用,那就要看人自己的选择了。

遵从伯斯塔尔法则(Postel’s Law)的 HTML5 在于完美理想话的 XHTML2 的角力中胜利了。或者应该说是人性再一次取得了胜利,人人追求完美,但是最后还得面对现实。

我们应该看到伯斯塔尔法则其实是同时对发送者和接收者有要求的,”接收时要开放“是对标准和浏览器的要求,而”发送时保守“则是对文档作者的要求。

回到“的 得 地”这个问题。小飞问:”这些坚持 三个 de 不同的人,是不是就好像坚持 xhtml2 的人呢?“ 我认为不然,这些人是选择了发送时保守的“开发者”。不区分这三个 de 的人,如果是普通人,自然无可厚非,但是作为职业的作家,如果无法区分这三者,就算不上好的作家。

同样的产品,不同的工艺就决定了价值的不一样。A货再能以假乱真,也不能和真品等价。同样,作为一名职业的前端工程师,在职业的道路上,我们的选择决定了输出的产品的质量,产品质量反过来也决定了我们自身的价值。

啰哩巴嗦的说了这么多,其实是希望各位前端工程师(其实也可以延伸至各个行业的从业者)能更加专业些,在发送时更加”保守“些。Be pro,这也是 2011 我对自己的要求。