JIN Weijie

Step by Step Setup Git Server on Windows with CopSSH + msysGit and Integrate Git with Visual Studio

jinweijie — Sun, 04 Dec 2011 10:51:52 +0000

First of all, let me clarify that Git doesn’t need to specify the side for client and server. Your workstation can be both the client and server. That means you can get code from other computer, you’re the client; while others can also get code from your computer, you’re the server. That’s why Git is great.

In this post, the “Git server” means to make your computer available for others to pull/push code from/to.

The post is long because it’s step by step and with lots of screenshots. In fact, it just takes about 10 minutes to setup all.

Note: CopSSH is not open source any more, please buy it if you want to use it.

We need the following software:

Software required to setup a Git server:
CopSSH (install on the server side)
msysgit (install both on the server side and client side)
PuTTY (install both on the server side and client side)

Software required to integrate with Visual Studio:
GitExtensions (install both on the server side and client side)

Setup steps

1. Install msysgit.

a. When you installing the msysgit, please choose c:\Git as the installation directory, because the space in the directory name may cause issue in bash commands.

b. In the “Adjusting your PATH environment”, I recommend to select “Use Git Bash only”.

c. Other settings are default. After installation, you get the icon on your desktop. You can try it with git command, if you get the following screen, you’ve installed the msysgit successfully.

d. Add C:\Git\bin and C:\Git\libexec\git-core to Path. This step is very important.

2. Install CopSSH

a. Just like the msysgit, we don’t install the CopSSH in program files folder to avoid some space issues. We install it to c:\ICW

b. Just use the default account as CopSSH provides:

c. After installation, open COPSSH Control Panel

d. Click Add button in Users tab

e. Choose an existed user on your computer(You can create one in computer management). Here in my sample the user is jinweijie

f. Allow all the access:

g. After the user is activated, click the Keys… button in the Activated Users section:

h. Click Add:

i. Use default key settings:

j. Enter the Passphrase and File name:

k. The private key will be save to c:\ICW\home\jinweijie\ryan-vm-01_2048.ppk

[test step]Now we try to use the activated user to log on through SSH, open Git Bash, enter commands:
ssh jinweijie@ryan-vm-01
enter “yes” to continue

[test step]After enter your passwords (the windows account’s password), then you try to run git as the ssh user, but it isn’t perform as you expected:

That’s because CopSSH cannot find the git.exe on the server, so we need to tell CopSSH the git path.

3. Config CopSSH with Git path.

a. Open C:\ICW\etc\profile with your favorite editor, add :/cygdrive/c/git/bin:/cygdrive/c/git/libexec/git-core (don’t forget the starting colon) to PATH , the whole line will be:
export PATH="/bin:$syspath:$winpath:/cygdrive/c/git/bin:/cygdrive/c/git/libexec/git-core"
Then Save.

b. Restart the CopSSH by click twice the big button in CopSSH Control Panel:

c. If we run Git Bash again, ssh jinweijie@ryan-vm-01, enter your password and run the git command, git should be found this time:

4. Configure private key on client

a. Copy the private key(we generated in step 1-k) from server to client.

b. On the client side, use puttygen.exe to load the key(if you set the password in 1-j, you need to enter the password while loading the key):

c. Click “Save private key” to save a copy of private key for plink.exe to recognize.

5. Create repository, integrate with Visual Studio

a. Install gitextensions on both server and client.

b. Since we have already install the msysgit in step 1-a, we skip the “Install MsysGit”. But if you haven’t install msysgit on the client machine, you can check the checkbox and install it.

c. Install to C:\GitExtensions\, Other settings are default.

d. On the server side, open Git Extensions, click “Create new repository”

e. Set the path to the project name under you CopSSH user’s home directory, select “Central repository, no working dir”(because we are the server), then “Initialize”:

f. On the client side, open Git Extensions, click “Clone repository”:

g. On the client side, the repository address should be ssh://jinweijie@ryan-vm-01/ICW/home/jinweijie/mydotnetproject Please be aware that, the repository should begin with c:\ on the server.

h. On the client side, click “Load SSH Key” and load the key which was saved in step 4-b:

i. On the client side, enter the password if you set password to the key, then click Clone:

j. On the client side, add ignore files:

k. On the client side, open Visual Studio, create a project to mydotnetproject folder(which is the cloned repository), you may find the files are already under git source control:

l. Click the “Commit” button on the menu bar, then click “Commit & Push”:

m. Push succeeded:

n. On the server side, you can find the new pushed files:

That’s all, happy GITTING!

Migrate/Move Albums of Picasa Desktop Application

jinweijie — Fri, 07 Oct 2011 13:49:28 +0000

Scenario

I have a new computer and I want to move the Picasa(It’s the desktop application, not online album) album from my old computer to the new computer. The photos are the same, but the root folder is different. In this case, the old location is on the desktop, and the new location will be c:\my_new_albums . The album name for demo is Test Album.

The album on the old computer looks like:

Steps

1. Menu Tools –> Back Up Pictures…

2. In the dialog, in the first section, click New Set. Then in the popup, give a name of your backup, then choose Disk-to-disk backup(for external and network drives). Click Create.

In the second section, click Select None. This is important because we just want to move the structure of the album.

Click Burn.

3. You can find your backup files under C:\Picasa Backup\ . The album information is stored in C:\Picasa Backup\$Application Data\Google\Picasa2Albums\(hash code)\(hash code).pal . Open it using your favorite text editor.

4. Replace the old path(on the old computer) with new path(on the new computer). In my case, I replace the $Desktop with [C]\my_new_albums .

5. Copy the Picasa Backup folder(which is exported in Step 2) to the new computer. And make sure your photos already exist in the new location.

6. In the Picasa Backup folder, run the PicasaRestore.exe. Choose Original locations. Click Next.

7. Click Restore.

8. You’ve done. Open your Picasa and check if the album restored. Make sure your photos already exist in Picasa.

That’s it, hope it helps.

Modify Nextgen Gallery to Extract Picasa’s Caption

jinweijie — Tue, 04 Oct 2011 03:20:02 +0000

I use Picasa to manage my photos locally and Nextgen gallery(a wordpress plugin) as my online photo albums.

And in Picasa, captions can be added to photo’s meta tags, like this:

When upload to Nextgen gallery, I would like to have this caption to be added to the photo’s title and description. So I modified the Nextgen gallery to support this.

The modifications in Nextgen gallery plugin:

1. Modify admin/function.php:

At line number 661, replace

$alttext = empty( $meta['title'] ) ? $image->alttext : $meta['title'];

// get the caption / description field
$description = empty( $meta['caption'] ) ? $image->description : $meta['caption'];

with

if (!$alttext = $meta['title'])
    $alttext = ($meta['keywords'] . " " . $meta['camera']);

// get the caption / description field
if (!$description = $meta['caption'])
    $description = ($meta['exif_desc'] . " " . $meta['keywords'] );
else
    $description = ( $description . ' [EXIF :: ' . $meta['exif_desc'] . ']' );

if( trim($alttext) == "" || trim($alttext) == "Exif_JPEG_PICTURE" ){
    if( $meta['caption'] )
        $alttext = $meta['caption'];
    else
        $alttext = $description;
}

At line 734, add:

$meta['exif_desc'] = ($pdata->get_META('camera') . " :: " . $pdata->get_META('focal_length') .  " :: " . $pdata->get_META('shutter_speed') . " :: " . $pdata->get_META('aperture') . " :: ISO " . $pdata->get_META('iso') . " :: " . $pdata->get_META('created_timestamp'));

2. Modify lib/meta.php:

At line 237, replace:

if ($this->iptc_data[$key])
    $meta[$value] = trim(utf8_encode(implode(", ", $this->iptc_data[$key])));

with

if($this->iptc_data[$key] && $key == "2#120"){
    $meta[$value] = mb_convert_encoding(implode(", ", $this->iptc_data[$key]), 'UTF-8', 'gb2312');
}
else if($this->iptc_data[$key]){
    $meta[$value] = trim(utf8_encode(implode(", ", $this->iptc_data[$key])));
}

And the final result looks like:

You may download the modified package here. (in the package, there are also some modification in the UI, you may compare the package with the original one to see the difference.)

Mask Mobile Number Using C#

jinweijie — Fri, 30 Sep 2011 07:07:12 +0000

A small piece of code which mask any string with specific mask characters.

// Mask the mobile.
// Usage: MaskMobile("13456789876", 3, "****") => "134****9876"
public static string MaskMobile(string mobile, int startIndex, string mask)
{
    if (string.IsNullOrEmpty(mobile))
        return string.Empty;

    string result = mobile;
    int starLengh = mask.Length;

    if (mobile.Length >= startIndex)
    {
        result = mobile.Insert(startIndex, mask);
        if (result.Length >= (startIndex + starLengh * 2))
            result = result.Remove((startIndex + starLengh), starLengh);
        else
            result = result.Remove((startIndex + starLengh), result.Length - (startIndex + starLengh));

    }

    return result;
}

Getting Started with Selenium in CSharp

jinweijie — Tue, 31 May 2011 06:51:27 +0000

Selenium is a suite of tools to automate web app testing across many platforms.

You may download and use Selenium from http://seleniumhq.org/

In this post, I would like to introduce the basic usage of Selenium in .Net development.

Create Selenium instance

In Selenium 2.0, there is a concept named WebDriver which is used to interacting with browsers. There are three build-in drivers in Selenium 2.0b3, FirefoxDriver, InternetExplorerDriver, ChromeDriver.

After adding Selenium reference to your project, you can use the Selenium WebDriver to control the browsers to do the automatic things. First, you need to create an instance of one of the drivers:

RemoteWebDriver driver;

public SeleniumDemo()
{
    driver = new InternetExplorerDriver();
}

Navigate web pages

When you got your WebDriver instance, you can send commands to WebDriver to operate browsers, for example, let the web browser visit Google:

driver.Url = "http://google.com/";
driver.Navigate();

Find elements in a web page

After landing some page, you probably want to check when some specific elements are on the page. You have several ways to do so thanks to the nice APIs from Selenium. For example, you want to make sure a textbox with id “txtMyData” existing on the page. You can write:

IWebElement txtMyData = driver.FindElementById("txtMyData");

Then you want to set the text of the textbox:

txtMyData.SendKeys( "blar blar blar..." );

After that, you want to submit the form by clicking the submit button:

IWebElement btnSubmit = driver.FindElementById("btnSubmit");
btnSubmit.Click();

The form should be submitted.

You can use other ways to find elements like by className, xpath, etc.

Wait elements loaded in Selenium

When you do the browser automation, one thing you need to be aware is that you cannot operate elements until they loaded in browser. So in Selenium, there is a way to wait for the element appearing in the page.

For example, in the previous sample, we want to make sure the submit button is loaded before submitting:

first, we need to create an WebDriverWait instance:

RemoteWebDriver driver;
WebDriverWait wait;

public SeleniumDemo()
{
    driver = new InternetExplorerDriver();
    //the wait will check the element intervally until the expire time.
    wait = new WebDriverWait( driver, new TimeSpan( 0, 0, 3 ) );
}

Then we change the submitting code:

IWebElement btnSubmit = wait.Until( d => d.FindElement( By.Id( "btnSubmit" ) ) );
btnSubmit.Click();

Another way to wait when executing:

Thread.Sleep(5000);//wait for 5 seconds

Summary

This is just a brief introduction of Selenium. I think you may able to write some automation tests with these basic concepts. It’s a lot of fun playing with Selenium, just try it.

Copy files between servers in different(without) domains

jinweijie — Fri, 15 Apr 2011 08:49:00 +0000

It’s quite tough there days because of the file uploading failure on our live servers. The situation is that we have the Application Server and DB server(which also used as file server) in two different domains(in fact, both servers are not in domain).

At first, we use the following code to save files to another server:

file.SaveAs(newFilePath);

The code is ok if two servers are in same domain. But it fails in the situation describe above. We cannot change the environment, so we can just do an impersonation to logon the file server first, then copy the files, we updated the code:

The definition:

#region consts

const int LOGON32_LOGON_NEW_CREDENTIALS = 9;
const int LOGON32_PROVIDER_DEFAULT = 0;

#endregion

#region Windowns API

[DllImport("advapi32.DLL", SetLastError = true)]
public static extern int LogonUser(string lpszUsername, string lpszDomain, string lpszPassword, int dwLogonType, int dwLogonProvider, ref IntPtr phToken);

#endregion

Copy file code:

//do the impersonation to save the file
IntPtr admin_token = default(IntPtr);
WindowsIdentity wid_current = WindowsIdentity.GetCurrent();
WindowsIdentity wid_admin = null;
WindowsImpersonationContext wic = null;
string domain = "your_domain_or_target_server_name";
string userName = "target_server_local_user_name";
string password = "target_server_local_user_password";

try
{
    if (LogonUser(userName, domain, password, LOGON32_LOGON_NEW_CREDENTIALS, LOGON32_PROVIDER_DEFAULT, ref admin_token) != 0)
    {
        wid_admin = new WindowsIdentity(admin_token);
        wic = wid_admin.Impersonate();

        //write the file
        file.SaveAs(newFilePath);
    }
}
catch (System.Exception se)
{
    int ret = Marshal.GetLastWin32Error();
    throw;
}
finally
{
    if (wic != null)
    {
        wic.Undo();
    }
}

Then it should work.

JavaScript File Selection Simulation

jinweijie — Tue, 12 Apr 2011 08:32:35 +0000

Context

The build-in file selection elements of browsers are ugly and cannot be customized easily.
If developer need to change the appearance of the file selection element, it’s almost impossible because of some security issues. So I wrote this script to simulate the file input selection by javascript so that the end user can click upon an image to open the dialog, and the image button can be customized to any of style.

Compatiblity

Tested in IE6, IE7, IE8, Firefox4, Chrome10.

Use the script

Link the js file to your page.

Create HTML elements.

Add some style.

Initialize the fileSelectManager instance.

Result

The script will attach event handler function to the trigger and file container element. The effect is, when the end user move his mouse over the trigger, the file container will move to right under the mouse position. If the user click his mouse, he is clicking the file selection element actually.

Finally, the script will set the selected file name to the trigger:

Demo Download

Click here to download the full working sample.

Object-Oriented Javascript borrow context for event handling

jinweijie — Fri, 18 Mar 2011 08:27:33 +0000

In object oriented Javascript programing, I used the following method to create “class”(in fact, there’s no class concept in Javascript):

var MyObj = function(){
};

MyObj.prototype={
    aaa : function(){
    }
    ,
    bbb : function(){
    }
    ,
    ccc : function(){
    }
};

Now I want to implement:

Click an element in the page, call the aaa method in MyObj instance, then in aaa method, call ccc method. Attach event to the element in bbb method.

So I can write like this:

Click Me

In aaa method, we get the event, but wait, this.ccc(); raises error: this.ccc is not a function

What’s the problem?

Because, when the click event fires on the element, the aaa method is executed but the context/scope is not in the instance of MyObj, in another word, this is the div element.

The solution:

In this situation, we can use the call method of Function to borrow the context from the MyObj instance, so that the this.ccc() method is available in aaa method at execution time. First let’s see the definition of call method(from http://www.javascriptkit.com/jsref/function.shtml):

Lets you call a function (funcA) as if it’s a method of another function (funcB). Specifically, the "this" keyword when used inside funcA now returns funcB. The two methods apply() and call() are useful when you wish an object to "borrow" a method from another object and use it within its own context.

Then we write a help method:

MyObj.BindAsEventListener = function(object, fun) {
    return function(event) {
        return fun.call(object, (event || window.event));
    }
};

At last, we modify the code to make it work:

Click Me

Please refer the comments in the code, that’s it.

You can also download a executable sample.

新浪微博RSS生成器Ver 1.0 同步Twitter帐号

jinweijie — Mon, 14 Mar 2011 03:38:21 +0000

同时在用twitter和新浪微博，在twitter上主要看贴为主，在新浪微博上发帖比较多。于是就想到是否搞一下将新浪微博同步到twitter上。搜索了下，发现月光博客上提供了解决方案，不过稍有遗憾的是没有图片的同步。于是就自己用asp.net实现了下，用下来感觉还行，所以分享一下，同时提供源代码，如果有定制开发的朋友可以修改源码，但如果再发布时候，请注明出处，先谢谢了！

下载

新浪微博RSS生成器Ver 1.0 发布包

新浪微博RSS生成器Ver 1.0 源代码

部署步骤

首先，需要一个.Net Framework 2.0以上的IIS环境。
将SinaFeed_Bin_ver_1.0.zip解压以后，部署成网站或者虚拟目录。
将包里面的db文件夹赋予network service以及aspnet用户可写权限，偷懒且安全的话，给everyone即可。
运行起来的话，应该会是个Authentication Error的错误，这是正常的，因为接下来要配置下。

同步原理

用FeedBurner绑定Twitter，在FeedBurner中配置Rss源到SinaFeed应用。当FeedBurner每次来ping的时候，SinaFeed抓取新浪微博的内容，检查是否已经抓取过，把结果保存在Access数据库中，返回Rss给FeedBurner。

实现功能

同步新浪微博到Twitter。
包含图片链接，可配置。
包含转发原文及作者。

配置

在Web.Config里，有以下几个可以配置的选项：

代理服务器相关，例如你的网站访问外网需要代理的话，请设置一下配置：
UseProxy , ProxyAddress, ProxyPort, ProxyDomain, ProxyUserName, ProxyUserPassword

AuthCodeConfig 配置在应用里的授权码，自己设定一个，例如abc，当外面请求RSS的时候，需要在Url传递一个AuthCode，要和所配置的（abc）一直，程序才会返回结果，否则报Authentication Error错误。

AllowedUserIds 允许被处理新浪微博Id，如何得到你的Id？只要点击“关注”，在Url里就会出现你的Id，例如，我的Id是：1650422717 。SinaFeed支持多个Id，用逗号(,) 分割。

RssChannelUrl 所生成的Rss的ChannelUrl

RssBaseGuid 所生成的Rss的唯一标识

RssTitle 所生成的Rss的标题

RssDescription 所生成的Rss的描述

使用步骤

例如，你部署在www.example.com上，虚拟目录为SinaFeed，你的新浪Id为1650422717，AuthCodeConfig你配置了jinweijiesinafeed那么

访问http://www.example.com/SinaFeed/Default.aspx?SinaUserId=1650422717&AuthCode=jinweijiesinafeed

就可以得到用户1650422717的Rss了。

另外的一些可传参数的配置：

UseOriginalImage 是否使用原来的大图片，默认True，如果False的话，将会使用新浪微博的缩略图。

RssMaxItemCount 返回RSS Items的最大数量。

AttachImageToEnclosure 是否将图片已Enclosure的方式发布到RSS

AttachImageToTitle 是否将图片地址添加到RSS Item的Title后面。

AttachImageToDescription 是否将图片地址添加到RSS Item的Description后面。

AttachOriginalMblogToRT 如果是转发微博，是否添加原微博到。

一般我的配置：

http://www.example.com/SinaFeed/Default.aspx?SinaUserId=1650422717&AuthCode=jinweijiesinafeed&AttachImageToDescription=true

同步结果

新浪微博：

Twitter:

FeedBurner的配置

有了RSS，然后我们就可以配置FeedBurner来绑定Twitter帐号了。

首先，你需要一个FeedBurner的帐号，需要翻个墙，如何注册这里就不赘述了，大家应该各有神通吧。
然后填入你的SinaFeed应用的地址：
在Publicize tab里的Socialize菜单绑定你的Twitter帐号，保存。
一般FeedBurner更新周期是30分钟，你也可以用它的ping功能，马上实现同步。

我的新浪微博

有任何问题可以加我的微博进行讨论。我的新浪微博和twitter都是@jinweijie 。谢谢！

Add UTF-8 Signature(BOM) at the Start of Response File

jinweijie — Mon, 31 Jan 2011 02:50:55 +0000

In ASP.Net, if you write a file to the client using code like this:

HttpContext.Current.Response.Clear();
HttpContext.Current.Response.AddHeader( "content-disposition", string.Format( "attachment; filename={0}", fileName ) );
HttpContext.Current.Response.ContentType = "application/ms-excel";

using( StringWriter sw = new StringWriter() )
{
    using( HtmlTextWriter htw = new HtmlTextWriter( sw ) )
    {
        //  Create a form to contain the grid
        Table table = new Table();

        //  render the table into the htmlwriter
        table.RenderControl( htw );

        //  render the htmlwriter into the response
        HttpContext.Current.Response.Write( sw.ToString() );

        HttpContext.Current.Response.End();

    }
}

My situation is to render a table to a file named xxx.xls(Excel file) and send to the client. And the file contains Chinese or other languages, it may cause some error codes in the file. This could happen randomly, sometimes error codes sometimes not.

After trying, I found if you save the file to UTF-8 with Signature, the error codes gone.

Then I tried to add the BOM the file before sending to the client:

HttpContext.Current.Response.Clear();
HttpContext.Current.Response.AddHeader( "content-disposition", string.Format( "attachment; filename={0}", fileName ) );
HttpContext.Current.Response.ContentType = "application/ms-excel;charset=UTF-8;";

//prepare a memory stream
MemoryStream ms = new MemoryStream();

using( StreamWriter sw = new StreamWriter( ms ) )
{
    using( HtmlTextWriter htw = new HtmlTextWriter( sw ) )
    {
        //  Create a form to contain the grid
        Table table = new Table();

        //process your table here

        //  render the table into the htmlwriter
        table.RenderControl( htw );

        //remember to flush
        htw.Flush();

        //add the BOM
        byte[] bBOM = new byte[] { 0xEF, 0xBB, 0xBF };
        byte[] bContent = ms.ToArray();
        byte[] bToWrite = new byte[bBOM.Length + bContent.Length];

        //combile the BOM and the content
        bBOM.CopyTo( bToWrite, 0 );
        bContent.CopyTo( bToWrite, bBOM.Length );

        //write to the client
        HttpContext.Current.Response.Write( Encoding.UTF8.GetString( bToWrite ) );
        HttpContext.Current.Response.Flush();
        HttpContext.Current.Response.End();

        ms.Dispose();
    }
}

The file being rendered will be added the BOM at the beginning.