Previous month:
July 2008
Next month:
September 2008

August 2008

Sync up your life: Sync Files, Notes and remote access on Multiple PCs for Free

Do you work on different computers at different places? If you do, then you must always miss things that you have left on the other computer. I did! I used to miss relevant information from my home notebook when I am working on the office PC. Sometimes I jot down a phone number or some other information on my office PC and then look for it when I am home. These scenarios are quite frustrating. For last few months I have gotten rid of all these issues. How ?

There are several principles that we need to look at before we come to a solution

First Principle: You are connected to the Internet and all you data can be synched via Internet.

Second Principle: Even though you are connected to Internet all your devices are not always online. For example when you come to office you home PC might be or might not be online. A solution to this scenario need to be provided.

Third Principle: Sometimes just file/folder sync is not enough, you need remote access to the computer and you always do not have a public IP and sometime you are behind a private IP and a firewall and you still need proper access.

Fourth Principle: Sometimes you may need to access your files from the web when you are using them from someone else’s computer.

File and Folder Synchronization with Live Mesh

Microsoft Live Mesh (http://www.mesh.com) is so far the best free file and folder synchronizer that I have seen. It offers free 5 Gigabyte storage space. It lets you synchronize folders between multiple computers, not just two computers. It will let you sync between a MAC and a PC very soon . Microsoft is also going to release a version for windows mobile soon that will let you add a windows device to live mesh.

LiveMeshSite

In Live Mesh every PC is called a device. You need to add you PC as a device to Live Mesh. When you try to do this, Live Mesh will allow you to download a client software that you will need to install on you computer. You can then select a folder to sync using Mesh. One of cool features of Mesh is that you can select which devices to synch with the folder, and you even omit devices that you do not want that folder synched. You can choose the PCs where the folder will be synched. Also you can choose if the folder will be synched to web under your account. Now all you have to do is put files in the folder and live mesh will sync with web to upload your files, and also it will update changes as well.

One good feature here is that you do not need to explicitly sync information, Mesh will do it. Lets think of a scenario where I have put a document in a Mesh synched folder at home. When I open my office PC then Mesh client software will automatically download that document and put it in the proper folder. The experience is seamless. I even used it to put my C# project solutions in synced folders so that I can work on them seamlessly from home and work. Live mesh also allows you to remotely connect to you PC, but I failed to get that working properly at it is still in tech preview.

Benefits

1. Live Mesh allows you to sync you folders seamlessly

2. The folder data can be downloaded by logging into Live Mesh from any browser so that you data is available online ( of course you decide if its is public or private)

3. You can also sync other softwares that cannot be synched normally and have no web access. For example I use TodoList (open source versatile hierarchical list) for Getting Things Done and managing my work and I use KeePass ( open source password manager) to store various passwords to different websites, email, and software licenses that I bought. Both of these softwares do not have web access where it can sync. But I keep the todolist files and the encrypted password files in the synced folder of Mesh. That way these software data are synched between different computers.

3a. If I am traveling to different country and do not have access to my PC I can just download the files to different computer and download the software and access from there.

By the way, Live Mesh supports sharing files with other people as well.

Notes synchronization with Evernote

Evernote2 was a amazing piece of software for organizing information but it was a software that you had to buy. Evernote3 is till in beta and has an awesome UI. I personally prefer it over Microsoft OneNote. Evernote (http://www.evernote.com)  has the capability to read text from images, even handwritten text. You can use it to take a picture of the whiteboard and later search items that were written on the white board.

evernote

The coolest thing about Evernote is that you can synchronize the data. So this is what I do ...

Whenever I need write down some piece of information at office I use Evernote to write it down. Later I press the big “Synchronize” button and the notes are synced to the web.

Later when I come back home, I press the “Synchronize” button and I can see the notes that I have taken in office. 

Unlike Evernote version 2, the current beta version 3 is free to use as long as you upload 40MB data max. 40 Megabyte gives you 19,000 typed notes, 250 web clips, 380 camera phone photos, 37 audio files or 10 high resolution photos. Since I do not need more that 40MB space each month ( just like free flickr – 30 MB limit) for notes I can use it for free.

Second ultra cool thing about this software is that I can just login online to the my Evernote account and then use that account to search my notes online. When you are traveling without your notebook, this is a cool feature.

Evernote even has mobile version for windows mobile and iPhone. Things can’t get any better than this.

Ultimate Remote Access, File transfer and VPN with TeamViewer

TeamViewer (http://www.teamviewer.com) is a software that just blew my mind away when a colleague introduced me to it. Stop buying any remote desktop software Now! Why ?

Because you can have a better software for personal use. TeamViewer lets you to connect to 5 PCs for free (personal use only). When you download the software you would be amazed to see that it is a download less that 2MB. When you run it, it will let you run in two different modes, one is run another is install. The run mode can be used to run the software and provide support. See the software screen in run mode (below). If you provide someone the computer ID and the password, then he will able remotely connect to you PC using his copy of TeamViewer. (See image below)

TeamViewer1

Now if you want to do remote access to your PC then you should install TeamViewer and then set a permanent password. Install it or just go to the options screen and make it start with windows and set a permanent password like this ...

TeamViewer2

Then from a remote computer type in the computer ID and password when prompted and then, Walla! You can see your screen and access it. If you need some files from you laptop at home just ask a someone at home to turn on the laptop and then you can remotely connect to it or you can just leave it running when you leave home.

Coolest Feature : Access behind private IP

I have tried many different software and none of those let me access my PC from a private IP. I had to forward the port from the public IP to the private IP etc. But you don’t have do any of that hassle from with TeamViewer.

File Transfer

You can also connect to transfer the files and transfer files between two computers when both of you are behind private IPs.

Presentation and VPN

You can also allow remote access to someone and demo from your computer. It also lets you run a VPN connection between the two computers.

Screen Recording

When you are accessing remotely, you can also record the screen of the remote access PC and view it later.

Conclusion

These are the 3 software that I use to sync my life at home and at work and at other remote places. The combination of these 3 software have made my life a lot easier and simpler. I hope this makes your life easier and simpler as well.


Get started JQuery by example in 15 mins : Reduce Your Javascript Size and Development Time

I am one of those few developers who will not give one ounce of respect to Javascript development and does not even consider it a serious programming language even. Unfortunately with the advent of Web 2.0 the Javascript has taken a more serious role, still I did not get to grow any respect for it. My attitude has always been like, use it when needed, learn if needed ... then throw it out of your brain as it is wasting precious neural pathways.

However, the Web 2.0 and startup surge is waning and it has got a few good developers to work on this dynamic language who have come up a few good development frameworks which I have finally learned to respect. The most amazing framework here is JQuery, which have changed my outlook on Javascript. I have taken an hour of my time to learn what JQuery does and I must say I am impressed. To give a short example I would say at my first try with JQuery I was able to write code in one single line that would normally take me 8 to 10 lines. I was also able to write it in 2 or 3 minutes, which would have taken me 15 mins.

The objective of this post is to provide you with a very basic and very fast start to JQuery . I know there are a million really good posts and tutorials out there on the internet. So, if you already know JQuery you can skip this.

Getting started and the ‘$’ function

The first step is to download the JQuery js file from the site and adding a script reference to your html page. If you want to see how it works internally then download the uncompressed version 100KB, otherwise use the compacted 15KB runtime js. The basic function in JQuery is the ‘$’ and  is used everywhere. Any JQuery notation starts with $. If you are already using the ‘$’ character for some functions then you can still use JQuery by calling the ‘noConflict()’ function. It will revert back the use of $. The ‘$’ is a selector function.

Here are some sample JQuery notations

// Makes an element visible which has the id 'mydiv'
$("#mydiv").show();
// Makes each odd tr element to have a blue backcolor $("tr:odd").css("background-color", "blue");

Simple Selectors by Example

The $ function serves as a selector that selects a single html element or multiple html element. Here is how to select the span elements that are children of a div element and make it have 1 pixel solid border. Here all span that are inside a div element (may not be immediate child of the div) will be selected.

$("div span").css("border", "1px solid");

Here is how we select the links that are descendent of span which are direct children of a div

$("div > span a")

Here is how we can select a div with id mydiv

$("div#mydiv")

Here is how we select all links under div elements that have css class set to mycss

$("div.mycss a")

We can also use attributes to search for elements. The format is [attribute name=attribute value]. For example if we want to find a link that points to http://www.google.com then we would write

$("a[href=http://www.google.com]")

We can also use partial match. For example if we want to find any image that have been used outside of our domain we can try looking for the images that have started with the ‘http://’. The operator for starts with matching looks like this [attribute name ^= starts with value]. See example below

$("img[src^=http]")

Similarly if we can also match string that ends with a specific word. The format is [attribute name *= end with value]. This is how we can find only the png images ..

$("img[src$=.png]")

JQuery can also match any part of the string with the *= operator. If we want to find any link that refers to the word ‘washington’ anywhere in its path then we would write

$("a[href*=washington]")

How do we find an element that has an attribute which is optional. For example we want to find images that have alternative text assigned. This is how …

$("img[alt]")

Position Selection By Example

JQuery also has very strong support for selection based on position of an element.  So in order to demonstrate lets use a table. Click the the button below see a table.

$("#results").fadeIn("slow");  // Show table with fade in effect
$("#results").fadeOut("slow"); // Show hide with fade out effect
Show Table Hide Table Reset Table

Before you read any further, please make sure that you have clicked show table and can see a table

If we want to make all the odd rows of the table to have a bluish gray color we would write

Show Me

$("#results tr:odd").css("background","#ccccff");

Now lets make the even rows  have lighter bluish gray Show Me

$("#results tr:even").css("background", "#ddddff");

What if we want to make the header row have a different look ? Show Me

$("#results tr:first").css("background", "black");
$("#results tr:first").css("color", "white");
$("#results tr:first").css("font-weight", "bold");

We also could have assigned a class name to the header tr element like this

$("#results tr:first").addClass("header");

JQuery has other advanced ordering operators, but we don’t have the scope to cover that here.

Modifications By Example

Modification to the html DOM in JQuery is fairly simple and easy. See the examples below

Let assume that  we want add an image banner at the top of the document. Here is how ...

$("body").prepend("<img src='banner.jpg' />");

Change the inner html of an existing div or any html element

$("div#mydialog").html("<p>Hi There!</p>");

What if we want to wrap a div around an existing table? Use the wrap function ...

$("#mytable").wrap("<div></div>");

How to replace all hr elements (horizontal line) with a br element

$("<br/>").replaceAll("hr");

Call the empty function to remove all child nodes. The code example below will clean all div elements with class set to ‘header’. The div will be empty.

$("div.header").empty();
The ‘clone’ function clones any html element. You can also clone with the event handler in place. 
$("#mybutton").clone();     // clone the button
$("#mybutton").clone(true); // clone the button with event handlers

Learn it, there is so much more ...

In last 15 minutes I have only covered a fraction of what JQuery can do with very little code. JQuery can do so much more. It can do animation, ajax, superb event handling, extreme css manipulation and much more. I have only covered the surface of what it can do in selection and modification. The areas I have covered is less than 10% of the core JQuery library, imagine what the thousand other plugins can do. Stop using plain JS, learn JQuery, Its efficient, excellent and is worth the time. With my very little experience, I would say JQuery can reduce your JavaScript code to a minimum of 60% or its original size and on average 20%-30% of original code size. Don’t waste a second ... grab JQuery from the net and learn it, IMMEDIATELY!

kick it on DotNetKicks.com