Tips, Tricks and Tools: November 2009

Friday, November 20, 2009

Is there a better way to change the URL/address of my blog?

Blogger.com allows you to change the URL/address of your blog in blogspot.com. Just go to the dashboard and select tab Settings|Publishing. Change the URL there and Bang! Your original address is gone, together with your traffic and your readers.

I figured out a better way to get your new blog running and not lose your readers.

Step 1: Clone the blog with a new address

You can create a new blog with the address you desire. Then clone your blog to the new one. To clone, you can go to Blogger.com dashboard and (skip the first 2 steps if you haven't manually modified the template of your blog):
   1. Download the template of the old blog on page Layout|Edit HTML;
   2. Upload the template to your new blog on page Layout|Edit HTML;
   3. Export your old blog on page Setting|Basic|Blog Tools;
   4. Import the xml file to your new blog on page Setting|Basic|Blog Tools.

Step 2: Tell the readers your new address

You can add a description below the title of your blog to tell the readers that you have moved by editing the Header in Layout|Page Elements.

Step 3: Automatically redirect to your new address (optional)

With some JavaScript code on the old blog, you can redirect the readers to the new blog. But keep in mind that not all users enable the JavaScript in their browsers.

To add the redirecting code, go to the page Layout|Edit HTML of your old blog. Look for the tag <head> and add these right below it:

<script type='text/javascript'>
function forwardUrl()
{
   var oldDomain = "http://old-url.blogspot.com/";
   var newDomain = "http://new-url.blogspot.com/";

   var myUrl = location.href;

   if (myUrl === oldDomain)
      location.href = newDomain;
   else
   {
      var oldDomain2 = oldDomain + "search/label/";
      if (myUrl.search(oldDomain2) >= 0)
         location.href = myUrl.replace(oldDomain, newDomain);
   }
}
</script>

Change old-url.blogspot.com and new-url.blogspot.com to your own URLs.

Look for tag <body> in the template and change it into:

<body onload='forwardUrl()'>

Save the template. And it is done.

After this, whenever the users enter the Home of your blog or click on any labels, they will be redirected to the new blog.

That was how I changed my blog from ttt-jl.blogspot.com to tiptt.blogspot.com. Click on ttt-jl.blogspot.com and you can see how it will be forwarded.

Before this solution, I have tried to use Settings|Publishing|Custom Domain to forward the old URL to the new one. Unfortunately, Blogger.com doesn't allow me to forward to a blogspot.com address.

If you have any better ideas, please let me know.

Thursday, November 19, 2009

Run Google Chrome as a non-root user on Linux

This guide applies to Ubuntu or other Debian-like system. It should be similar on other distributions.

Google provides the Linux version of Chrome in *.deb package. To install it, you need the root privilege. But what if you just want to try it and don't feel comfortable to install this unstable version in your system? Following these steps, you can try it with a regular user account.

Step 1: Download

As of this writing, the stable release of Google Chrome is not available yet. We can download the experimental version from the development channel. The URL is:
        http://www.chromium.org/getting-involved/dev-channel#TOC-Linux

Look for the Linux section and download the package suitable for your system.

Step 2: Unpack

Create a directory where you want to put the unpacked Google Chrome. E.g.
        mkdir ~/chrome

Extract the Google Chrome package to that directory.
        dpkg -x google-chrome-unstable_current_i386.deb ~/chrome

Step 3: Run

Now you are ready to run it.
        cd ~/chrome/opt/google/chrome
        ./chrome

The current Google Chrome for Linux is not stable yet, so you don't want to use it for serious e-business.

Monday, November 16, 2009

Google Chrome extension options page: store Boolean in localStorage

Google Chrome allow users to customize the behavior of a extension through its options page. An options page can be an HTML page with some JavaScript functions. User's input on the options page can be stored into localStorage and retrieved each time the extension starts.

We may want to put some checkboxes on the options page, like this:

<html>
<head><title>Extension Options</title>
<script type="text/javascript">

// Saves options to localStorage.
function saveOptions() {
   localStorage["tstChkbox"] = document.getElementById("chkbx").checked;
}

// Restores value from localStorage.
function restoreOptions() {
   var value = localStorage["tstChkbox"];
   if (null != value)
      document.getElementById("chkbx").checked = value;
}

</script>
</head>

<body onload="restoreOptions()">

<form>
<input type="checkbox" id="chkbx" /> Check Box <br />
</form>

<button onclick="saveOptions()">Save</button>
</body>
</html>

But this piece of code doesn't work. If you step through it in the debugging tool, it looks perfect. But the checkbox is always checked every time the options page is loaded even if you uncheck it before save. Why?

When you uncheck the checkbox, it seems the following statement have saved the Boolean false to the localStorage. But it actually saves a "false" string.

   localStorage["tstChkbox"] = document.getElementById("chkbx").checked;

So when we retrieve it from the localStorage, we retrieve a "false" string. In JavaScript, any string -- including "false" -- will be converted to Boolean true when the type conversion is needed. So the following piece of code will always check the checkbox when the "false" string is retrieved from localStorage.

   var value = localStorage["tstChkbox"];
   if (null != value)
      document.getElementById("chkbx").checked = value;

This is not what we want. To fix it, we can do a little conversion for the value retrieved from localStorage:

function toBool(str)
{
   if ("false" === str)
      return false;
   else 
      return str;
}

Then we can set the value for checkbox like this:

   var value = localStorage["tstChkbox"];
   if (null != value)
      document.getElementById("chkbx").checked = toBool(value);

Saturday, November 14, 2009

Google Chrome Extension: Boss Key and Button

(Some people complain that the extension does not work for them. If you are one of them, please read the notes at the end of this help.)

This Google Chrome Extension allows you to quickly hide your browser windows by pressing the F12 key or the right button of your mouse.

Features
- Press the F12 key to hide your browser windows. You can also choose to use another boss key.

- Press the right button of your mouse to hide your browser windows. You can also choose to use double right clicks.

- Hide the browser window to the bottom-right corner of your screen. A little window with a Restore button is put there and you should use it to restore the browser. You can also press Shift-F12 on that window to restore the browser.

- Open and focus on a new tab. On the new tab, you can choose to open a preset web page. On the top of the web page, you can see a gray bar which signals that this page is a cover page and you should not use it. When the window is restored, this cover tab will be closed automatically.

- Do the hiding for all the open browser windows. All of them will be hidden at the same place, i.e. the bottom-right corner of your screen. When you click the Restore button, all browser windows will be restored to their original places and all cover tabs will be closed.

Installation
Latest version: https://chrome.google.com/extensions/detail/oodmocecapemhoekoombagkkbocnddjb.

The old versions can be downloaded here: http://code.google.com/p/chrome-ext-boss-key-and-button/. Download the file bkb_XXX.crx and drag&drop it to the Chrome browser to install it.

Options setting

- Enable Boss Key: if it is checked, you can hide the browser window(s) by pressing F12 key. You can also choose Alt-` or Number Pad + as the boss key.

- Enable Mouse: if it is checked, you can hide the browser window(s) by pressing the right button of your mouse. You can also choose to use double click right button as the boss button.

- Hide Window: if it is checked, the browser window(s) would be shrunk and moved to the bottom-right corner of your desktop and a Restore button would be shown when you press the boss key or button; if it is not checked, you can choose to only open a cover web page to hide the current page you are reading.

- Not use Restore Button: if it is checked, the Restore button window is also hidden. If you want to restore the browser, find and focus on the Restore window with the title of "______________" in the desktop's task bar, then press Shift-F12 to restore the browser.

- To All Windows: if it is checked, the boss key or button would act on all open windows; if it is not checked, it would only act on the current window.

- Cover URL: input the URL of the web page you want to open when the boss key or button is pressed. If it is empty, no cover page will be opened.

Notes
The original function of the right button of the mouse is disabled. But you can use Shift-right button to show the context menu. If you do not like this, you can disable the boss button feature of this extension on the Options page to prevent this side-effect.

You must use the Boss Key or Boss Button on actual web pages, i.e. the address bar should have a URL starts with "http://", "https://". If you are staring at an empty page or "chrome://" page when you press the Boss Key or Boss Button, they would not work. The reason is that the extension uses content script to listen to your key and mouse input, and Chrome restricts the permission of content scripts as a security feature. Read my another post about how the limitations of content scripts can affect extensions.

The extension is tested on the latest version of Chrome in the beta channel. If it is not working on your Chrome, try to upgrade it to the latest version.

Version 2.1 enables content scripts on all frames of a web page. This feature is not supported by the old version of Google Chrome. If you are running an old version of Chrome, you may want to try version 2.0 or 1.2 of this extension.

The extension should work right after you install it. If not, try to restart Chrome.

Sunday, November 8, 2009

Connect to the restricted port of a remote host via SSH tunnel

There are some scenarios where you can use this technique.

A remote server allows only local connections

To connect to such a server, you usually have to copy your application to the remote host where the server is running. Then login to that host and run your application there. If you are developing or testing your application, you may think that it is very inconvenient when you are frequently changing your source code. It will be much better if you can code, compile and test your application on your local machine against the remote server.

Supposed the restricted server program is listening on port 20001 on a remote host named restrictedhost and it only accepts local connections. You can create an SSH tunnel with the following command on your machine.

         ssh -L 30501:127.0.0.1:20001 restrictedhost

Input your password on restrictedhost to login. After you login, keep the terminal aside and alive. A secure SSH channel has been established. Now open another local terminal on your machine. Run your application and have it connect to the port 30501 of your machine. The connection will be forwarded to restrictedhost as a local connection to 127.0.0.1:20001. The remote server application will think your connection is from local to its port 20001 and accept it.

A remote server allows connections from certain hosts

Supposed the restricted server program is listening on port 20001 on a remote host named restrictedhost and it only accepts connections from a range of specific hosts.

If your machine is not in the range of the allowed hosts, you will have to copy your application to one of those allowed hosts in order to test it against the server. With SSH tunnel, you can run your application on your own machine and pretend that it is making connection from one of the allowed hosts, e.g. allowedhost1.

         ssh -L 30501:restrictedhost:20001 allowedhost1

Input your password on allowedhost1 to login. After you login, keep the terminal aside and alive. A secure SSH channel has been established from your machine to allowedhost1. Run your application and have it connect to the port 30501 of your machine. The connection will be forwarded to allowedhost1 as a connection from allowedhost1 to the port 20001 of restrictedhost. The remote server application will think your connection is from allowedhost1 and accept it.

To sum it up, your application makes a connection to a local port and the SSH tunnel makes it like a connection from the host you login to.

Saturday, November 7, 2009

Windows: free more disk space by removing backup files

Windows XP and Windows Vista automatically backup the old system when you install new software or updates. They create restore points for the backups. So if you want, you can return to any of the previous restore points.

If you have used the system for quite a while, you would see that your disk C: is getting full because Windows keeps all those restore points from the day you bought your computer. If your system runs quite stable and you don't need to return to the ancient restore points, you can remove all but the most recent restore point.

Here is how you can do that in Windows XP (Windows Vista is similar).

- Login as Adminstrator.
- From the Start button, select Accessories|System Tools|Disk Cleanup.
- In the Disk Cleanup dialog, click the More Options tab.
- Click the Clean up button in the System Restore section.
- A warning pop-up asks whether you really want to remove all but the most recent restore point. Click the Yes button.

Friday, November 6, 2009

Javascript/Firefox: context menu popup

The context menu of Firefox behaves differently between the Windows and Linux platforms. On Linux, the context menu pops up as soon as you press down the right button of the mouse; While on Windows, it shows when you press down and release the right button.

The Linux style behavior makes it difficult for an extension to capture and hack the mousedown event. We can do a little hack to emulate the Windows style behavior on the Linux platform.

The idea is that we capture the mousedown event and suppress the context menu. When the user release the mouse button, we capture the mouseup event and fire a fake contextmenu event.

Here is the demo source code.

1. Capture the mousedown event and suppress the context menu.

1.1 Capture the mousedown event

addEventListener("mousedown", myMouseDown, true);

function myMouseDown(event)
{
   if (2 == event.button)    // right-click
   {
      if (navigator.platform != "Win32")   // No need for Windows
      {
         // Capture the contextmenu event.
         addEventListener("contextmenu", myNoContextMenu, true);

         // remove the listener right after to avoid mess up the other
         // contextmenu events.
         setTimeout(function(){ removeEventListener("contextmenu", myNoContextMenu, true); }, 0);
      }
   }
}

1.2 Suppress the context menu

function myNoContextMenu(event)
{
   // Prevent the default action, i.e. context menu poping up
   event.preventDefault();
   event.stopPropagation();
}

2. Capture the mouseup event and pop up the context menu.

1.1 Capture the mouseup event

addEventListener("mouseup", myMouseUp, true);

function myMouseUp(event)
{
   if (2 == event.button)   // right-click
   {
      myShowContextMenu(event);
   }
}

1.2 Pop up the context menu

function myShowContextMenu(event)
{
   if (navigator.platform == "Win32")
      return;  // on Window context menu is already shown on mouseup.

   // create a contextmenu event.
   var newEv = event.view.document.createEvent("MouseEvents");
   newEv.initMouseEvent("contextmenu", true, true, event.view, 1,
             event.screenX, event.screenY, event.clientX, event.clientY,
             false, false, false, false, 2, null);

   // fire the new event.
   event.originalTarget.dispatchEvent(newEv);
}

Wednesday, November 4, 2009

Firefox Extension: Boss Key and Buttons

This Firefox extension allows you to quickly minimize your browser windows by pressing the F12 key or both the left and right mouse buttons.

(Version 2.0) You can also change the configuration to use other keys or mouse buttons.

Features
- Press the F12 key to minimize your browser windows.

- Press both the mouse buttons (left and right) down to minimize your browser windows.

- Open and focus on a new tab with the URL you preset.

- Hide the tab-bar.

- Press Shift-F12 to show the tab bar and close the new tab opened by the boss key or buttons.

- (Version 2.0) Use the menu Tools|Boss KnB Restore to show the tab bar and close the new tab opened by the boss key or buttons.

- Minimize the browser window.

- Do the hiding for all the open browser windows.

Installation
Download and install it here: https://addons.mozilla.org/zh-CN/firefox/addon/46553

You will need to restart Firefox browser after the installation.

Options setting
Click here to see how to open the "Options" dialog.

- Enable F12: enable/disable boss key F12. By default, it is enabled. It may be obvious but I want to mention that the Firefox browser window must be the active window you are using. If it were at the background, it could not capture the key pressing event and would not do anything.

(Version 2.0) If F12 is used by other extensions, you can choose F8 or the + key in the Number Pad as your boss key.

- Enable mouse: enable/disable using mouse to hide windows. By default, it is enabled. You must press down (and hold) both the left and right mouse buttons together inside your browser window. Do NOT simultaneously press both buttons. Instead, press down one button and while holding it down, press down another button. If you are using Linux, avoid clicking on the Flash plug-in, which seems to have a higher priority to capture the mouse pressing events. You might want to practise a little bit.

(Version 2.0) Some more options are added in this version. You can choose your boss button from the list of:
. Press both left and right buttons: this is the default.
. Double-click right button.
. Double-click middle button. You may need tweak the configuration of Firefox to make it work. Please see the Note section at the end of this help for details.
. Double-click left button.

- Open a new tab and load URL: if checked and the URL is supplied, the boss key or buttons would load the URL in a new tab and bring the new tab to the front. Avoid using this new tab because when you press Shift-F12, it will be closed.

(Version 2.0) with a sign: if checked, the web page opened in the new tab would have a gray bar on the top. It signals you that this tab is a Boss K&B tab and you should avoid using it. When next time you press the Boss Key or Button, this tab will be focused again. By default, it is checked.

- Hide tab-bar: if checked, the boss key or buttons would hide the tab-bar. Pressing Shift-F12 will show the tab-bar again. If you open a new tab by using menu File|New Tab or Ctrl-T, the tab-bar will show up too.

(Version 2.0) You can also show the tab-bar by using the menu Tools|Boss KnB Restore.

- Minimize window: if checked, the boss key or buttons would minimize the browser window.

- Apply to all windows: if checked, the above actions would be applied to all the open browser windows when the boss key or buttons were pressed.

Restore
You can press Shift-F12 to restore the browser window to the previous status before you pressed the boss key or buttons. It would close the new tab and show the tab-bar. Please do not use the new tab.

(Version 2.0) You can also close the new tab and show the tab-bar by using the menu Tools|Boss KnB Restore.

If you accidentally used the new tab and it were closed by Shift-F12, don't panic, you could get it back from the menu History|Recently Closed Tab.

Note
(Version 2.0) For those who have also installed the extension of mouse gestures, you can choose to use double-click middle button or double-click left button. Please be aware that there are some limitations for using them:

- If you choose double-click middle button, you should disable autoscrolling feature. To do that, go to the Options/Preferences dialog, select Advanced icon, then choose General tab. In the Browsing section, uncheck Use autoscrolling.

- If you choose double-click middle button, you should set Firefox parameter middlemouse.contentLoadURL as false -- It is already set as false by default for all but the Linux/Unix platform. To do that, input about:config in the address bar, and double click the parameter to change it.

- If you choose either double-click middle button or double-click left button, avoid clicking on the links. Otherwise, when you come back, you would see a new page following the link you clicked.

The Hide tab-bar option of this extension is imperfect. My other extension Autohide Tabbar is a much better choice.

---
If you like this extension, please share it with your friends.

Monday, November 2, 2009

Ubuntu Linux: clean cached apt archives to free up disk space

If you are using Ubuntu or other Debian like Linux, you may notice each upgrade or update may eat up some of your disk space -- depending on your setup. That is because all the update packages you have downloaded are kept under the directory of /var/cache/apt/archives.

From time to time, you could run command:

        sudo apt-get clean

to remove all those downloaded packages.

If you only want to remove the useless old packages, you can use command:

        sudo apt-get autoclean

You can also do it with the graphic tool Synaptic Package Manager. Click its menu Settings|Preferences. In the pop-up Preferences dialog, select Files tab. Under the Temporary Files section, choose what you want to delete and click the Delete Cached Package Files button.

Sunday, November 1, 2009

Google Docs - spreadsheet - insert chart on another sheet

To insert a chart for your spreadsheet data, you can highlight the wanted cells and select menu Insert|Chart.... The new chart will be put somewhere on the same sheet of the data.

If you click on the chart, its menu will be shown.

By selecting its menu Chart|Move to own sheet..., you can move the chart to another sheet. The chart will have its own sheet and it will fill the whole new sheet.

This may be not what you want. Sometimes, you want a chart sheet which contains several charts representing data from other sheets. To do that, you can add a new sheet first by clicking the Add Sheet button at the bottom-left corner.

Select the new sheet. Insert a new chart by menu Insert|Chart.... In the Create Chart dialogue, you need to manually input what data you want to use. If the data are from Sheet1, you need to add Sheet1! right before the cells range.

Click Save chart button and you have a chart for the data from Sheet1. You can add more charts for the data from different sheets in this way, so that you can have a single "chart sheet" for the whole document.

Tips, Tricks and Tools

Friday, November 20, 2009

Is there a better way to change the URL/address of my blog?

Thursday, November 19, 2009

Run Google Chrome as a non-root user on Linux

Monday, November 16, 2009

Google Chrome extension options page: store Boolean in localStorage

Saturday, November 14, 2009

Google Chrome Extension: Boss Key and Button

Sunday, November 8, 2009

Connect to the restricted port of a remote host via SSH tunnel

Saturday, November 7, 2009

Windows: free more disk space by removing backup files

Friday, November 6, 2009

Javascript/Firefox: context menu popup

Wednesday, November 4, 2009

Firefox Extension: Boss Key and Buttons

Monday, November 2, 2009

Ubuntu Linux: clean cached apt archives to free up disk space

Sunday, November 1, 2009

Google Docs - spreadsheet - insert chart on another sheet

Search This Blog

Products

Popular Posts

Random Posts

Contact

Total Pageviews

Recent Comments (by Readers)

Labels

Friday, November 20, 2009

Thursday, November 19, 2009

Monday, November 16, 2009

Saturday, November 14, 2009

Sunday, November 8, 2009

Saturday, November 7, 2009

Friday, November 6, 2009

Wednesday, November 4, 2009

Monday, November 2, 2009

Sunday, November 1, 2009

Search This Blog

Products

Popular Posts

Random Posts

Subscribe To

Contact

Total Pageviews

Recent Comments (by Readers)

Labels