keypress event name is misleading

The keypress event is not triggered when user do backspace or delete on keyboard. This is true according to [webkit-dev] Changes to keyboard event handling

If you want to detect backspace or delete key depress, use keyup or keydown event. keypress event name is misleading, it is actually meaning character inserted (textenter?) 

keydown: Fires when the user depresses a key. It repeats while the user keeps the key depressed.
keypress: Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.
keyup: Fires when the user releases a key, after the default action of that key has been performed.

According to above definition, when the user presses special keys such as the arrow keys, backspace, or delete key, the browser should NOT fire keypress events. For cross browser behaviors, check out
http://www.quirksmode.org/dom/events/keys.html

Here is my backspace and delete key depress detection code:
if (e.keyCode === 46 || e.keyCode === 8)  {
     //do something
     return false;
}

Back to Windows

It has been around 1 year to use windows, and I sort of forget the short-cut keys on desktop. In current project, there is a requirement to support IE9 web browser on windows, so I have to get Windows back. When community is moving from OS war to browser war, OS platform is not so important for me. For daily use, I really don't care too much about OS now, I just need an IDE, some browser, and command lines. Occasionally I need some tools, fortunately new products or tools usually provide both Windows and Mac support.

Here is the way back to Windows:

• Download and install VMware-Fusion Free Trial from VMWare
• Download and install Windows 7 Professional
• If you have Windows disk, you might also need USB SuperDrive
• Upgrade Windows 7 built-in IE8 to IE9
• Download and Install Adobe Flash (By default, Adobe installed Chrome toolbar and Chrome browser)
• Windows come back again (Windows 7 x64.vmwarevm, which takes around 11GB disk size)

GMail changes height to min-height

In email template we usually use table to control layout, so old school taught us to use tr for row, td for cell etc. My previous blog html email tips has more info about HTML email template tips and tricks. Here I only want to talk about how to deal with Gmail specific behavior.

If we want to control td height, we use inline CSS height to control the height. It works well on most email client, but not Gmail because it changes height to min-height. Two solutions based on my understanding.

1. Put a div to td, and set div height
2. Use line-height which is well supported by email clients

window, top, self and parent

In Javascript, esp. when we deal with frames or iframes, we might frequently see window, top, self, and parent. They are all about browser window, but with different meanings:

window     Returns the current window
self    Returns the current window
top     Returns the topmost browser window of the current window.
parent    Returns the parent window of the current window

If a window does not have a parent (not within any frame), these will all just be a reference to the current window.

If current window is within one level of frame, top and parent will both be a reference to the same window. And self and window is current sub-frame.

Encode XML in Javascript

I have not worked on XML for a while since headed to JSON. In my project, I use JSON for exchanged data format, configuration file, build script and so on. I almost forgot XML in daily work. However, when we are looking at SVG which is XML syntax. I want to reiterate an old topic here. When we generate SVG text or text area data, we should do XML encode (escape). There are 2 ways to approach this.

1. XML reserved characters must be replaced with their corresponding XML entities

• ' is replaced with '
• " is replaced with "
• & is replaced with &
• < is replaced with &lt;
• > is replaced with &gt;

if (!String.prototype.encodeXML) {
  String.prototype.encodeXML = function () {
    return this.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
               .replace(/"/g, '&quot;')
               .replace(/'/g, '&apos;');
  };
}

2. Use CDATA (unparsed character data)
A CDATA section starts with "<![CDATA[" and ends with "]]>". The only downside using this method is A CDATA section cannot contain the string "]]>", so we need make sure there is no nested CDATA section in XML.