Sublime Text 2 使用及插件介绍

之前就听说过该软件,试用了下,自己不太熟悉就没去深入了解使用了,昨天在公司上班的时候,小王子又在群里介绍了这个软件,于是乎再次打开试用,自己摸索了下,发现确实很不错。整体配色方案看上去也很舒服自然。可扩展性很强。

一、快捷键

Sublime Text 2包含了大量快捷操作,而且还很方便修改和追加自己喜欢的快捷键。查看快捷键的方式也很简单。点击菜单栏:Preferences->Key Bindings – Defaults 即可查看。

如果要定义自己的快捷键,可以在Preferences->Key Bindings – Users 里进行设置,相当方便。

Ctrl+L 选择整行(按住继续选择下行)
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词(按住-继续选择下个相同的字符串)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+Shift+/ 注释已选择内容
Ctrl+Space 自动完成(win与系统快捷键冲突,需修改)
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+Shift+V 粘贴并自动缩进(其它兄弟写的,实测win系统自动缩进无效)
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Ctrl+Enter 插入行后
Ctrl+Shift Enter 插入行前
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Shift+UP 与上行互换
Ctrl+Shift+DOWN 与下行互换
Shift+Tab 去除缩进
Tab 缩进
F9 行排序(按a-z)

二、插件

个人感觉,支持插件的软件或工具,都是相当不错的。

插件可手动安装和自动安装,有点不爽的是,这软件无法设置代理,有些网络环境可能不允许访问陌生网络,从而导致自动安装方式失效。比如我公司,自动安装无法使用,只能选择手动安装。当然,也可以在家用绿色版的Sublime Text ,将插件装好配置好,再拿到公司用。也是一样的方便。

1、手动安装

直接下载安装包解压缩到Packages目录(菜单->preferences->packages)

2、自动安装(使用Package Control组件安装)

1)按Ctrl+`调出console

2)粘贴以下代码到底部命令行并回车:

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

3)重启Sublime Text 2

4)如果在Perferences->package settings中看到package control这一项,则安装成功。

如果这种方法不能安装成功,可以到这里下载文件手动安装

用Package Control安装插件的方法:

  1. 按下Ctrl+Shift+P调出命令面板
  2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

一些常用的插件,可查看如下文章:

http://www.qianduan.net/essential-to-sublime-the-text-2-plugins.html

http://www.jankerli.com/?p=1359

http://www.gbin1.com/technology/javascript/20120229essentialsublimetext2/

我猜都是翻译国外某些文章,插件推荐的也都大同小异的。个人觉得SideBarEnhancements这个插件不错。

这么多年来,还一直用Dreamweaver,其中一个原因是它搜索查找功能很强大,可以整个项目或文件夹进行搜索,也支持正则查找替换。而这插件也有类似的项目搜索功能,用起来也是相当方便。

三、代码片段

写代码,都少不了自己一些常用的代码片段,Sublime Text也提供了设置代码片段的方法。

在Tools->New Snippet 中可以新建自己的代码片段

新建snippet会默认显示如下代码,可以这个为模板进行修改。

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

使用时,先取消注释的内容。

content标签包含的内容就是需要显示的代码片段。其中${1:this} 是表示产生代码片段后,光标停在this这个位置。${2:snippet}表示,产生代码片段后,按tab健光标跳到 snippet位置。

tabTrigger标签 相当于快捷键,比如上面代码hello:输入hello然后按tab键即可显示content标签的内容。

scope标签可选,默认不写则对所有文件格式生效,如果设置了,则对相应的文件或文件格式生效。

最后设置好后, 将文件保存在”packages/User”目录下,以sublime-snippet为扩展名。重启sublime text 2,该snippet即可使用了。

关于snippet的详细内容可参看文章:http://sublimetext.info/docs/en/extensibility/snippets.html

最后不得不说这是个很强大又轻量的软件,工程师必备!

Adobe AIR教程for HTML/JAVASCRIPT开发

最近想研究下Adobe Air ,发现网上的资源很少。以前在kalengo学的FLEX差不多都忘光了,这次想从HTML、JS方向来学学。网上看到这篇入门教程,便转过来放着。

第一步 — 安装Adobe AIR和Adobe AIR SDK

如果你还没装,可以去网站上下载Adobe AIR Runtime和Adobe AIR SDK.

装完Adobe AIR SDK以后,为了方便,你还需要把它的bin目录添加到系统的path变量下,这样你可以直接运行它的打包和debug工具。

第二步 — 创建一些目录

接下来创建一些目录来放置代码,比如:

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

第三步 — 创建一个Application Descriptor

AIR需要一个Application Descriptor来描述它的内容和属性,这是一个XML格式的文件。

它的文件名是application.xml,放置在/appname/source/目录。

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.appname </id>
  <version>1.0 </version>
  <filename>AppName </filename>
  <initialWindow>
    <content>index.html </content>
    <visible>true </visible>
    <width>600</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/appname-16.png</image16x16>
    <image32x32>icons/appname-32.png</image32x32>
    <image48x48>icons/appname-48.png</image48x48>
    <image128x128>icons/appname-128.png</image128x128>
  </icon>
</application>

这个xml文件很有些复杂,也很有一些历史,最可恶的是AIR beta1到后来的beta2乃至最后的1.0,从来就没统一过,变了又变,所以我在网上找到的一些教程都失效了,只能针对早期的beta版使用。

关于它的详细内容,可以参考模板,在adobe sdk安装目录下的templates/descriptor-template.xml.

第四步 — 创建你的应用

下一步,创建一个index.html.

<html>
<head>
  <title>My Window Title</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

如果需要添加css,javascript以及图片,可以在/appname/source/下创建子目录放进去,就像平常写web应用那样。

第五步 — 测试你的应用

如果你已经配置好了path环境变量(见第一步,需要重启电脑),下面很简单,首先打开一个命令行窗口,进入/appname/source/目录,然后运行:

adl application.xml

一切顺利的话,你的应用应该已经跑起来了,一个弹出的AIR应用窗口好不容易的展示它的第一次。

第六步 — 打包你的AIR应用

在很多磕磕碰碰,反复调试之后,你可能已经完成了应用,现在你准备向朋友或者网上的菜鸟炫耀一下你的处女作。那么我们开始打包,这一步其实比我想象的要简单。

首先需要生成一个签名Certificate,并放置在应用的根目录/appname/

adt -certificate -cn SelfSign -ou Dev -o “Example” -c US 2048-RSA cert.pfx 换成你的密码

然后就是进入source目录打包:

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

不出意外的话,会当场生成一个AppName.air文件,你可以安装一下感受亲手做的第一个Air应用。

原文:Adobe AIR Tutorial for HTML / JavaScript Developers

出处:http://www.ooso.net/archives/354 (Volcano )

aptana studio 3 添加jquery 提示功能

aptana 3 相比之前的aptana 2,在代码提示的选择上有一点改变。以前是直接到插件中心下载,然后再到editor里面打对勾的,现在应该找不到了(确切的说是换地方也换名称了) aptana studio 3使用的是PortableGit的方式进行插件扩展,如果要装插件,则需要先安装aptana 3 的PortableGit。一般安装完aptana 3 首次打开时也会提示你安装的。 如果不打算安装PortableGit,也可以直接下载。 1、先说PortableGit下安装jquery代码提示插件的方法: 依次点击 Commands > Bundle Development > Install Bundle > jQuery。 这时会开始下载jquery插件包进行安装。 然后在项目里应用jquery。 依次点击 Properties > Project Build Path > jQuery 1.6.2 然后选择 相应的Jquery库即可。 整个过程无误的话,就可以使用jquery代码提示啦。

如果无法安装,可以试试直接把安装包下载(下载地址:https://github.com/aptana/javascript-jquery.ruble),然后放到目录:C:\Users\【用户名】\Aptana Rubles\javascript-jquery.ruble\ 下试试。

 

2、另外一种安装方法是

首先下载:https://raw.github.com/aptana/javascript-jquery.ruble/master/support/jquery.1.4.2.sdocml 一定 要保证是.sdocml文件不是文本文档,此链接打开后可能是一个文本网页,将网页中的内容复制保存为jquery.1.4.2.sdocml文件。

再下载:http://code.jquery.com/jquery-1.4.1-vsdoc.js

然后把这2个文件放到项目的根目录下(其实任意目录都可以),然后重启aptana就可以了。具体可查看https://wiki.appcelerator.org/display/tis/Using+JavaScript+Libraries

IE6 | IE7 li底部多出几像素bug

先看2个截图

IE6、IE7

chrome:

图示代码地址:http://jsfiddle.net/baofen14787/tH4YL/1/

会发现在IE6–7下,LI底部会多出几个像素,网上很多人说这是li的3pxbug,实际不然。底部的空隙和字体大小和高度有关。并不一定是3px。

出现这个bug的条件如下
必要条件:
li的子元素设置了浮动(例如:本例中的span设置了左浮动)

充要条件:
(IE6/7)li设置了width、height、zoom 之一 (例如:本文中的li设置了width)

解决方案也很简单:

1、别让li获得layout
2、设置li {vertical-align:middle} (推荐这种方法,简单方便)
3、设置li {font-size:0} li span{font-size:12px}。
4、设置li{float:left;width:100%}

还有其他方法就不一一说了。

其他解决方案也有

(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一

delicious不再支持yahoo!账户登录

好久没上delicious了,估计至少有3个多月了,今天再次登录,发现网站改版了,yahoo登录方式也没了。

搜索了一下才发现,yahoo!公司已经把delicious卖掉了,可看看月光博客《Delicious被Yahoo卖了》。

这下不得了,里面还有好几百个bookmark呢,现在没账户密码,登录不上。

再次google了下,无果,唯有自己动手将原有delicious账户上的bookmark导入到新账户里。

原理其实也很简单,只是实现起来有些繁琐。我先是通过火车头采集器,写了个采集规则,将原有账户上的bookmark采集入库,然后用pentaho的kettle工具导出成delicious需要的格式。最后把数据导入到新注册的delicious账户上,原有账户就丢弃不用了。

具体实现方法:

1、数据采集

稍后上图更新

2、kettle导出

Kettle这个ETL工具集,它允许你管理来自不同数据库的数据,通过提供一个图形化的用户环境来描述你想做什么,而不是你想怎么做。

先去pentaho网站下载kettle,解压或安装后,点击Spoon.bat文件即可运行。需要注意的是,kettle需要jdk支持。

整个界面如图:

简要说明:

1、在输入端选择 access input,拖入控件到操作界面,然后设置access的路径之类的,获取字段就可以了。

2、再拖个js模块要输出组装数据,编写js脚本

//Script here

var newVal = '<DT><A HREF="'+ 链接.getString() +'" ADD_DATE="1326716591" TAGS="'+ tag.getString() +'">'+ 标题.getString() +'</A>';

到时就输出newVal这个值即可。

3、最后拖一个文本输出控件到操作界面,填写输出路径之类的,运行一下整个流程,就将数据导出了。

附,delicious导入模板

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
     It will be read and overwritten.
     DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL>
    <DT><A HREF="http://www.didatuan.com/about/10days" ADD_DATE="1322017107" TAG>360度无忧团购</A>
	<DT><A HREF="http://www.didatuan.com/about/10days" ADD_DATE="1322017107" TAG>360度无忧团购</A>
</DL><p>

外部调用zblog最新文章和随机文章

外部调用ZBLOG文章的方法2011-5-15更新代码是网上搜的,经测试可用。

原理是直接从数据库读取数据。不多说 直接上代码


<!-- #include file="../c_option.asp" -->
<!-- #include file="c_system_base.asp" -->
'*********************************************************
' 目的:
' 输入:文章标签
' 返回:HTML
'*********************************************************

Function GetLastInfo()
Dim objRS
Dim html
Dim strDbPath

strDbPath = Server.MapPath("/blog/" &amp; ZC_DATABASE_PATH)
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" &amp; strDbPath

Set objRS=Server.CreateObject("ADODB.Recordset")
objRS.open "SELECT top 13 log_ID,log_Title,log_PostTime FROM [blog_Article] order by log_ID DESC",objConn,1,1

do while not objRS.eof
html = html &amp; "
<ul>
	<li><a title="" target=""><span>["&amp; Month(FormatDateTime(objRS("log_PostTime"),2)) &amp; "/" &amp; Day(FormatDateTime(objRS("log_PostTime"),2)) &amp;"]</span>" &amp; objRS("log_Title") &amp; "</a></li>
</ul>
"

objRS.MoveNext
loop

objConn.Close
Set objConn=Nothing

GetLastInfo = html

End Function

FUNCTION GetRandInfo()
Dim objRS
Dim html
Dim strDbPath

strDbPath = Server.MapPath("/blog/" &amp; ZC_DATABASE_PATH)
Set objConn = Server.CreateObject("ADODB.Connection")
objConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" &amp; strDbPath

Set objRS=Server.CreateObject("ADODB.Recordset")
objRS.open "SELECT top 13 log_ID,log_Title FROM [blog_Article] order by rnd(time()-log_ID)",objConn,1,1

do while not objRS.eof
html = html &amp; "
<ul>
	<li><a title="" target="">" &amp; objRS("log_Title") &amp; "</a></li>
</ul>
"

objRS.MoveNext
loop

objConn.Close
Set objConn=Nothing

GetRandInfo = html
END FUNCTION
'*********************************************************
%&gt;

将以上代码保存为文件c_html_article.asp。

使用方法:

1、把文件c_html_article.asp放在zblog所在路径下面的FUNCTION文件夹中
2、调用博客文章页面(必须是asp的)头部插入如下代码:
[asp][/asp]
3、在需要展示文章的位置插入调用代码:

调用最新文章:

<div class="article-list"></div>

调用随机文章:

<div class="article-list"></div>

注意:请在c_html_article.asp 文件中修改博客所在目录和调用文章数量.

源码下载:外部调用ZBLOG文章的方法2011-5-15更新

minify:css和js的优化合并工具

Minify 是 PHP5 应用程序,它能合并、压缩 js 和 css 文件,并且能通过 HTTP gzip/deflate 及一些相关头,优化客户端缓存。

它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件。

下载地址:http://code.google.com/p/minify/

这个工具安装使用也非常简单。下载后放到网站根目录或任意目录,然后访问。

如放网站根目录,访问地址:http://localhost/min/builder/,则看到如下界面

在项目中的使用方法:

把 js 和 css 文件的路径按 Minify 的方式写,就完成了。

如单个css

<link media="screen" type="text/css" href="/min/f=style.css" rel="stylesheet" />

如果有多个,就用“,”隔开,如

<link media="screen" type="text/css" href="/min/f=style1.css,style2.css" rel="stylesheet" />

js也是一样写法

<script type="text/javascript" src="/min/f=script.js,script2.js"></script>

如果不知道路径怎么写,不要急,可以在http://localhost/min/builder/ 输入你需要合并压缩的 js 或 css 路径,按 Update 按钮后,它会给你生成一个完成的代码,你只需要将代码粘帖到文件中即可。

在wordpress下,也有一个插件,核心也是通过minify进行合并压缩,插件名称是wp-minify,
http://wordpress.org/extend/plugins/wp-minify/

我博客也试用了这个插件,呵呵。

win7 64位系统下安装zblog报数据库连接错误的解决方法

今天闲来无事,搭了个zblog玩玩,结果登陆后台管理页面的时候,页面老是报错“错误原因:数据库连接错误”.

估计和自己系统配置有关,因为之前也用过zblog,没出现过这个问题。百度了一下,找到了解决方案。

其实原因是在64位Windows7操作系统中,IIS7应用程序池默认没有启用32位应用程序,而我们连接ACCESS数据库的驱动程序Microsoft.Jet.OLEDB.4.0是32位的,所以就出错了,要想正常运行,只需启用32位应用程序即可。

方法如下:

1、打开IIS信息服务管理器。点击左侧菜单的“应用程序池”。

2、选中网站的程序池之后,点击右侧菜单的“高级设置”。

3、在弹出的设置框里,把“启用32位应用程序” 这个选项设置为“true”。

4、重启程序池即可。

整个步骤可查看下图:

 

解决PHP file_put_contents函数输出文件为UTF-8乱码问题

在做TES项目时,有个奇怪问题,生成html文件是UTF-8编码。而生成的CSS文件却是GBK编码。
代码都是一样,输出的编码类型却不一样。
经过测试,得出以下结论:
1、输出纯英文字符串时,其编码默认是GBK的,因为没有中文字符存在,则无法判断是否是utf-8。
2、有中文存在,则文件输出UTF-8的。

故解决方法如下:

<?php 

$f="Post.txt";
$p=iconv("ASCII","UTF-8","I love you.");
if(is_writable($f)){file_put_contents($f,chr(0xEF).chr(0xBB).chr(0xBF).$p);
}?>

原理很简单,主要是这句代码“chr(0xEF).chr(0xBB).chr(0xBF)”,人工指定输出BOM头即可。
否则的话,需要有UTF8编码的字符,例如中文字符。英文则UTF8和ASCII是一样的。

php 创建png8格式的图片 与png、jpg格式互转

php 创建png8格式的图片 代码如下

<?php
// Create a new true color image
$im = new imagecreatetruecolor(100, 100);;

// Fill with alpha background
$alphabg = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $alphabg);

// Convert to palette-based with no dithering and 255 colors with alpha
imagetruecolortopalette($im, false, 255);
imagesavealpha($im, true);

// Save the image
imagepng($im, './paletteimage.png');
imagedestroy($im);
?>

php实现jpg图片与png图片互相转换函数:

/**
 *转换格式
 *
 */
function change_type($filepath,$filename,$type = 'png') {
	//获取图片的宽高等信息
	$img = $filepath.$filename;
	$info = GetImageSize($img);
	$width = $info[0];
	$height = $info[1];
	$temp = explode(".",$filename); 
	$new_filename = $temp[0] .'.' . $type;
	$save_path = $filepath . $new_filename;
	switch ($type) {
		case 'png' :
			$im = imagecreatefromjpeg($img);
			// Fill with alpha background
			$alphabg = imagecolorallocatealpha($im, 0, 0, 0, 127);
			imagefill($im, 0, 0, $alphabg);
			
			// Convert to palette-based with no dithering and 255 colors with alpha
			imagetruecolortopalette($im, false, 255);
			imagesavealpha($im, true);
			// Save the image
			imagepng($im, $save_path);
			imagedestroy($im);
			$process = true;
			break;
			
		case 'jpeg' :
		default :
			$image = imagecreatefrompng($img);
			imagejpeg($image, $save_path, 60);;
			imagedestroy($image);
			$process = true;
			break;
	}
	$filesize = filesize($save_path);
	$json_all=array();
	$json=array(
		"filename"=>$new_filename,
		"width"=>$width,
		"size"=>$this->formatSizeUnits($filesize)
	);
	array_push($json_all,$json);


	return $json_all;

}