Multiple HTML Reply Signatures for Gmail

I've upgraded the HTML Reply Signatures for Gmail script. The Multiple HTML Reply Signatures for Gmail Greasemonkey script does the following:

1. When the user composes or replies to a message, an HTML signature is inserted in the Gmail editor by default.

2. At any time before pressing 'Send', the user can select another HTML signature from the drop down list in the left navigation menu of Gmail.

Multiple HTML Reply Signatures for Gmail Demo

1 Personal Signature
2 Work Signature
3 Other 1
4 No Signature

Hello,

This is a demo Gmail content window that demonstrates the plug-in behavior of the Multiple HTML Reply Signatures for Gmail script. Use the drop-down list on the left to toggle between different signatures.

--

I've also addressed issues regarding the HTML signature placement. This script places the signature at the end of the reply, not at the end of the thread. I've noticed that the subject of HTML signature placement is a hotly debated topic. However, my reasons for placing the HTML signature at the end of the reply are as follows:

1. I find that I rarely, if ever, scroll through quotes from previous emails in a thread unless I need to refresh my memory; therefore, I find that I am less likely to see a signature that is at the bottom of the thread.
2. After several replies back and forth, signatures will begin to accumulate at the bottom of the thread. Because of reason #1, none of these signatures will be seen anyway, unless I need to reference an earlier part of the conversation. If I do scroll to the bottom, I'll see multiple instances of my signature and that of the person I've been collaborating with.
3. Keeping the entire message content at the top of a reply helps identify the boundary of where one message ends and another begins. Placing the signature at the end of the reply clearly identifies where the end of the reply is and where the previous email begins.

However, I realize that there are people who will disagree and insist that the HTML signature be placed at the bottom of the thread. If you want to move the HTML signature to the end, by all means, go for it. It is actually easier to code the script so that signatures are placed at the end. So, if you need help with this modification, let me know.

It is also worth noting that the dropdown list can be configured to plug in different signatures for replies than for initial composes; however, the drop down list values will be the same. What this means is this: I can configure a "Personal Signature" for replies and a "Personal Signature" for initial composes. Likewise, I can configure a "Work Signature" for initial composes and a "Work Signature" for replies. I can also set them to be the same. However, in any case, the dropdown list values will always be the same.

Finally, the script can be configured to insert no HTML signature by default. As long as the htmlsignature and/or htmlreplysig variable has a beginning span tag with an id="image_sig" and a closing span tag, anything, including whitespace, can be placed in the innerHTML. Once an HTML signature is selected from the dropdown list, only signatures from that list can be selected. Therefore, it is important to ensure that the default HTML signature is also in the dropdown list. It is for this reason that the fourth option in the dropdown list is configured as "No Signature", which sets the innerHTML to whitespace. Therefore, if a user decides not to use an HTML signature after selecting one, it can be removed by selecting this option.

In order to use this script, you must have Mozilla Firefox 1.5 or higher and the Greasemonkey firefox extension installed. If you've already installed Firefox and Greasemonkey, you can go ahead and install the Multiple HTML Reply Signatures for Gmail script.


UPDATE: The script is now available as a Firefox Extension!

Static Pages and Blogger

I've come across several forums regarding how to create static pages in Blogger. Using my own domain name and Google as my hosting provider, I have come up with yet another solution. Check out my article on how to Create Static Pages in Blogger.

Gmail HTML Reply Signatures and JavaScript

Nested Quotes causing Bug in HTML Reply Signatures for Gmail

After doing a google search to see where my blog ranks, I've found that some people have been having trouble with the Gmail HTML Reply Signatures script that Greasemonkey uses to embed HTML signatures in Gmail. Consider this to be your user-guide for the script, as well as a little lesson in the intricacies of JavaScript.

Unless you've spent hours banging your head against your computer trying to get JavaScript code to do what you want it to do, you may be confused by the different syntax that you would see when reading code written by different programmers. Come to think of it, even after banging your head against your computer trying to get the code to do what you want it to do, you may still be confused.

In the Gmail HTML Reply Signatures script, the code you are instructed to modify looks like this:

var htmlsig = '<br><p><img src="http://mydomain.com/image.jpg"></p><br>';

Notice that there are quotes and there are apostrophes. The apostrophes represent the beginning and the end of a string of text that is assigned to the variable called htmlsig. The string also happens to be HTML. However, in JavaScript, the HTML is simply a string that will be used to generate HTML in the Gmail compose window. When this string is written to the browser, it is then read as HTML and interpreted as such.

Now, consider this line of code, which will not work properly due to errors:

var htmlsig = "<br><p><img src="http://mydomain.com/image.jpg"></p><br>";

Can you see why this won't work? Yes? Good! You've probably had quite a bit of JavaScript experience! You may have even made this mistake yourself in the past. But if you can't see the error, no worries, this is a great learning experience for you! Notice that there are four quotes ("). The JavaScript parser -- if that is what you call it -- is confused because the first quote represents the beginning of a string and the second quote represents the end of the string. But the second quotation mark is actually for the string within the string; it is supposed to mark the assignment of the url to the src attribute.

Nested Quotes JavaScript Analogy

Think about the last book you read where the main character quoted another character:

Mark said to Tammy, "What did John tell you?". Tammy replied, "Mark, John said: 'The only dumb question is the one that is never asked!', and I think he really means it.". Mark raised an eyebrow...

Notice how the storyline is told outside of quotes, quotes are used to indicate a character speaking, and apostrophes are nested within quotes to indicate a person speaking about a person speaking. Could this pattern be nested deeper, such as a person speaking about a person speaking about a person speaking? It could, but we only have two delimiting characters: Quotes and apostrophes. We'll come back to this problem later.

For now, lets apply this really horrible story about Tammy, John, and Mark to our Gmail HTML Reply Signatures nested quote problem. I'm a big fan of analogies, so lets use the following analogies to compare the story to our JavaScript problem:

• Narrator text outside of quotes - The story - JavaScript API (functions, variables, etc)


• Character text within quotes - A string assignment - What JavaScript will say to Gmail


• Character quoting character text within apostrophes - A quote within a string - What JavaScript will tell Gmail to tell the src attribute

Now, what would the reader think of this:

Mark said to Tammy, "Tammy, my writing career is in the toilet, what is this story about?". Tammy looked puzzled. Finally she said, "John said, "This quote is confusing because it is a quote within a quote.", and not to worry about our careers".

Notice the inner quotation uses the same type of quote. Instead of an inner quote, the text would actually represent the narration and not any type of quote.

Think of writing JavaScript as writing a book where the JavaScript parser is your reader, or audience. Unlike a human who could more than likely look past the incorrect usage of quotation marks, the JavaScript parser will become extremely confused by incorrect nesting of quotes.

Which nested JavaScript quote comes first?

Now here comes the really interesting part. You can use quotes in whatever order you want. Consider this:

var htmlsig = "<br><p><img src='http://mydomain.com/image.jpg'></p><br>";

Notice that I reversed the (') and the ("). The quotation mark is now the outer string wrapper and the apostrophe now represents the inner string wrapper. Be prepared to see differences, as unlike publishing a novel, there is no rule determining whether an apostrophe is used first or a quote is used first. As long as one type is used for the outer string and the other type is used for the inner string, your result will be the same.

Quote within a Quote within a Quote within a ...

If you feel that you now have a good understanding of this concept, I've got a little exercise for you. Remember the story with John, Tammy, and Mark? I mentioned that it was possible to have a character quote a character quoting another character. Can you represent this third-level quote in JavaScript? How would you solve this problem? Remember that there are only two types of quotes, the (") and the ('). There is a solution to nest quotes deeper, good luck!

Feel free to drop me an email if you have any questions or would just like to chat about this topic. My email address is . If you are a beginner to JavaScript, please give me some feedback. Let me know if I have completely confused you. Have I cleared up any misconceptions you may have had and helped you see the light? Let me know.

Thank you,
James Mortensen

UPDATE: The article, Nested-Nested Quotes, describes the concept of nested quotes even deeper using real code and provides the solution to this problem!

The Battle between Tangible, Functional, and Practical

Source

I remember my parents' huge record collection from when I was a kid. They kept them in a lockable wooden chest. This record repository had a cushion on top of it so it doubled as a bench seat. It was heavy, and it probably cost quite a bit of money.

Today, I have friends who sell their CDs to pawn shops or other resellers whenever they are tight on cash. Although I have a CD collection, I sometimes wonder why. Even though CDs are but a fraction of the size of a 33" vinyl record, they still are something I have to constantly sidestep in my tiny apartment.

It is strange. Audrey is right. People are attracted to the idea of holding onto what is physical and tangible, even when its digital equivalent is also a functional equivalent. Maybe one day I'll get tired of sidestepping my CD's, and they will end up sitting in the local pawn shop. That is, unless I see a nice cedar chest specifically designed for compact discs.

Web 2.0 and Family Networks

We didn't necessarily walk to school uphill both ways in the snow, but Web 2.0 technologies were still a distant dream. Back in the 80's, we didn't have the same technological advances that we have today. As a result, living in Maryland, I didn't see much of my relatives who lived in Delaware.

Source

My grandmother was the first of four children, each of these children has his or her own family, and many of their children have their own families now. I can remember being 6 or 7 years old and having a lot of fun at "The Family Reunion", so titled because it was one of the few large family events I remember that didn't involve a wedding or a funeral. I remember wishing that we had more of these kinds of events when I was little.

In 1987, people kept in touch through the phone lines or by writing letters. Family memories were shared in real, tangible photo albums. Get-togethers and keeping up to date on family events was much more difficult than today as it involved real-time collaboration, a lot of planning, and in some cases, quite a bit of travel.

Now we have virtual photo albums that can be viewed anywhere, anytime, as long as an Internet connection exists. Using such a service offered by a hospital, my sister sent me a link to show off my niece. Through such services, I can view pictures and leave messages and comments. As a result, our lives are less disconnected although we live many states apart. My younger brother and sister both have MySpace pages, as do I, and we can link to each other and our friends simply by adding each other to our "friends list".





Back in November, my grandmother passed away. Once again, the four families were reunited; unfortunately, this time it was without the company of one of the four eldest members. I saw family whom I hadn't seen in years. I talked to people I barely knew who were friends with my grandfather, whom I never had the opportunity to meet. Some of us exchanged emails; we even spoke for a few months. However, now we've all gone back to continuing our lives.

RememberWell, founded by Heather Swain, is dedicated to end of life issues, celebration, and remembrance. While creating a memorial for my grandmother, I realized that there could potentially be a market for family-centered Web 2.0 websites that provided the means for families to link their trees together. Some websites, such as MySpace, allow members to create groups, which could serve a similar purpose. However, Tom Anderson and Chris DeWolfe have not included this in their marketing efforts. When I think of MySpace, family collaboration is not what comes to mind.





Of course, I'm not the first person to come up with the idea of family-centered websites. I found Geni in my search results for "Web 2.0 family tree", which is one of 15 companies that is part of a $50 million dollar venture capital fund. In just minutes, I created an account and added members to my tree. Each person I choose to add will, upon my request, receive an invite to join the service. They will have the ability to add members to their own tree and connect them together.

The Geni family genealogy is presented to viewers as a tree. As it grows, navigational buttons are provided to allow directional scrolling so that different sections of the tree can be viewed. Geni uses Ajax to send and receive information from the server without needing to reload the entire page. Combined with Flash development, the user interface is smooth and responsive, which once again demonstrates the power of the Web in terms of creating a rich user interface. In addition, users of this website can zoom out to see more of the tree in the browser.

As a result of my lack of family genealogical knowledge, my tree appears relatively flat when zoomed out, but I'm hoping that the tree will grow -- both upwards as well as downwards -- as new members accept invitations.

In addition to the family tree display, each person has an associated profile to add information. This includes the basics, such as age, height, place of birth, a biography, current occupation, interests and activities, and much more. Furthermore, each profile contains an "immediate family" section that lists the members of that person's immediate family and provides links to their profiles.


Conflict Resolution

After editing my profile, I returned to my family tree to find that one of my cousins had already accepted my invite and has been adding more members to the tree. Alas, a bug of sorts has crawled its way into the tree. While Google Spreadsheets does an excellent job of instantaneously updating a collaborated spreadsheet without conflict, Geni still has some work to do in this area. In the Help section, Geni outlines some of the design challenges their developers face in order to implement a confict resolution feature; they do acknowledge that this is indeed an issue that should eventually be addressed.

Most of these conflicts could be avoided if my changes were instantly recognizable, as is the case with Google Spreadsheet collaboration. Despite the use of Ajax to reduce page reloads, there are now two profiles for my grandmother, mother, and aunt. Apparently, my cousin must have added them and not realized that they were already there due to a delay in the system. Of course, after my changes were recognized she must have realized that there were duplicates and removed them.


Security

Source

When creating a profile, users will notice a status bar which reflects how far he or she is from its completion. Next to this status bar in the top right section of the window, there is a link to add a password to the profile. Afterwards, an additional 10% will be added to the status bar. Just out of curiosity, I wanted to find out what would happen if I logged out before completing this part of the process. If I was able to regain access without a password then this could present a privacy issue, and if I wasn't able to regain access, there could potentially be a lot of new members who would simply go somewhere else, frustrated by the loss of the time spent entering irretrievable data. As competition is almost a guaranteed in this industry, Geni has ensured that these issues are handled appropriately.

I found that if you do disconnect from the system without first creating a password, as long as you've entered an email address you can click the "Forgot password" link on the login page and a temporary password will be issued.

In summary, I'm fairly impressed with this Web 2.0 technology, and now that I've got the ball rolling, I look forward to seeing how my family tree grows.

Gmail HTML Reply Signatures

NOTE: See Multiple HTML Reply Signatures for Gmail for an update on this script.


Greasemonkey is a Firefox Extension that I recently discovered while I was searching for a way to automatically embed HTML image signatures inside of a Gmail thin client. There is a large pool of solutions to this problem on the Internet that range from dragging and dropping images into the Gmail compose window textbox to using a Greasemonkey script written by Garett Rogers.

However, none of the scripts that I found would insert the signature into a Gmail reply, only a blank email. After hours of searching, I went to Greasemonkey's Web site and found a free online book titled "Dive Into Greasemonkey". This is a great way to learn how to write your own Greasemonkey scripts!

From there, I installed Firebug, a Firefox Extension DOM Inspector, and used this tool to try and determine exactly what tag id corresponded to the reply email text editor. After some trial and error, I found id attributes labelled hc_0, hc_1, hc_2, which correspond to each conversation in a thread. For instance, the first reply in a series of emails is labelled hc_0. If I respond to it and then receive another reply, it is labelled hc_1. Thus, for the N'th reply, the id attribute is hc_N. However, my script only handles the first 5 replies.

If you would like to add your signatures to your replies, complete the following steps:

1. Install Firefox, if you haven't already done so.
2. Install Greasemonkey, if you haven't already done so.
3. Download the "Gmail HTML Reply Signatures" script. Greasemonkey will prompt you to install the script.
4. Go to http://www.signaturegenerator.net to create a free image signature.

My next experiment will be to attempt to use Greasemonkey to manipulate the Google Docs and Spreadsheet interface in order to add more shortcut keys to the interface. Another option is to use a Firefox Extension called iMacros to record a left-click of the Google Docs "File" button. I tried this, and it was successful; however, iMacros is missing what I consider to be an important feature: I need to be able to create a toolbar button for the macro which can also be activated by using a shortcut key. Perhaps this will be yet another experiment.

Until next time,




P.S. You can create a similar signature image for free at http://www.signaturegenerator.net, which I listed above in step 4.

Remote Applications and Operating Systems

There has been quite a bit of discussion centered around the use of the Mozilla-based XUL technology in order to create a rich user interface on top of a thin client. In the past two weeks, I've learned quite a bit more about the power of XUL, and I've gained more perspective as to where application development is heading in regards to Web applications, rich user interfaces, and operating systems.


Mozilla Amazon Browser

When I think of XUL, I think "Firefox Extension". I visualize browser overlays and add-in software that functions in conjunction with Mozilla Firefox. But yesterday, a co-worker introduced me to the Mozilla Amazon Browser, which renders rich web content through a Mozilla interface. This shattered my previous notions of XUL.



The Mozilla Amazon Browser looks and feels exactly like a client-side application, yet the entire application, including the user interface, is run from a remote server! In addition, the application can also be installed locally as a Firefox Extension with the same look and feel as the remote version! The only limitation is that Mozilla Firefox must be used in order to use the application; it won't run using other browsers, such as Internet Explorer.

This completely changed my view of what XUL is capable of! In 2004, Joel Spolsky of Joel on Software wrote an article about How Microsoft Lost the API War because of emerging Web development technologies. He described the user interface of Web-based applications as "a huge step backwards in daily usability". Because of this inability of Web tools to render a rich user interface to Web users, client-side applications will always have their place on the desktop. People like Mr. Spolsky and myself would much prefer to use a client-side interface that allows us to make full use of the keyboard to speedily control an application rather than stumble around the screen with a mouse pointer, reducing productivity and wasting time.

Technologies, such as XUL, that allow a Web application to look and feel like a rich client-side application and still allow users to access that content from anywhere have set the stage to replace client-side applications completely because they eliminate the user interface problem.


Client email vs. Web-based email

Many businesses are using Web-based email in place of using a mail client simply because email providers, such as Gmail, only provide POP access. The POP protocol only allows a user to download his or her email to one computer, so if employees within an organization use multiple computers this creates quite a challenge for using mail clients. Thus, as an employee working at such an organization, one loses much of the functionality that only the client can provide.

On the flipside, organizations whose employees use only one computer and do not rely on Web-based email, reap great benefits from the ability to perform certain actions, such as embedding signature images in emails. This is something that Mozilla Thunderbird can do in Gmail with POP access but something that the Gmail thin client cannot do without the help of a third-party Firefox Extension, such as Greasemonkey combined with the HTML Signatures for Gmail script.

What I see here in terms of client-side applications vs Web-based applications is a hierarchy of priorities which determine whether or not a user will use the client interface or the Web interface. If the user requires access from multiple locations then he or she must sacrifice user interface for mobility. However, if mobility is not necessary, then the user will be more likely to use a client-side application, especially if speed and the use of advanced features is required.

With XUL, developers now have the necessary tools to offer customers both mobility and a strong user interface. We can see this already just by testing Firefox Extensions, like Greasemonkey, to improve the features of Gmail.


Google Docs and Spreadsheets

Google Docs and Spreadsheets is yet another example of a Web application that offers users tremendous benefits in regards to mobility, yet still needs some work in terms of user interface. I am a big fan of this mobile Office suite because I can record information regardless of where I am or what operating system I am using. I even use the spreadsheet for complex tasks that would be much easier using Microsoft Excel or Open Office Calc, but mobility is ranked as a higher priority than user-interface, so I make do with Google Docs and Spreadsheets as-is.

However, in the last month I've been doing some experimenting of my own. I've been trying repeatedly, yet unsucessfully, to use XUL to interact with the File menu in Google Docs. As I previously stated, shortcut keys are important to me. When I press "Alt-F", I expect to see a drop-down appear with a list of File controls, such as "Save" or "Save As"; instead, My Firefox File menu expands. Reluctantly, I move my hand away from the keyboard to reach for the mouse, stumble around the screen while I point at Google's 'File' button, and perform a left-click.

One of the features of XUL is the ability to use the 'accesskey' attribute to allow users to use a shortcut key in place of a mouse click. My hope was that I could use this to call Google's ActionMenuLoader(fileMenuButton,'more') functionality from a local Firefox Extension.

Although my methods have not proved successful, I believe the secret to successfully implementing a richer Google Docs and Spreasheets interface can be found by studying the two Firefox Extensions mentioned earlier: Greasemonkey and the Mozilla Amazon Browser.

With Greasemonkey, local JavaScript code within a user's local Mozilla profile directory can manipulate browser content. Therefore, I wonder if it would be possible to add an HTML 'accesskey' attribute to Google's File button, allowing Google Docs and Spreadsheets to expand the File menu by using an "Alt-F". The advantage of this approach for someone like Google is that their application can still be accessed normally using a non-Mozilla browser yet still add this additional functionality to a Firefox user without making changes to existing code.

However, the Mozilla Amazon Browser has taken the user interface a step further by developing a user interface that interacts with remote content. It basically is remote content, depending on whether or not the user installs the Extension or accesses it remotely. I wonder if a similar interface could be developed for Google Docs and Spreadsheets to allow users the full functionality of a word processor and spreadsheet, minimizing the use of the mouse, yet still giving priority to those who require mobility.


Remote Operating Systems

Free Geek in Portland uses a technology called Lessdisks, which basically allows a computer terminal workstation to run an operating system from the server! In other words, the machine is essentially nothing more than a motherboard, a processor with RAM and other basic components, and a monitor. The machines they use do not have any disks. None whatsoever. They don't have a floppy drive, they don't have a hard drive, and they don't have CD-ROM drives.

If you logon to one of these Ubuntu Dapper 6.06 machines, it looks and feels as if you are running Ubuntu locally. I asked the head of Tech Support at Free Geek, Michael Westwind, if it were possible to run Lessdisks over the Internet. Although he seemed to feel that the system would be sluggish due to graphical delays as a result of slow communication, I totally see where we are heading. High-speed Internet may be too slow right now, but what about in the next few years? I can already successfully logon to my Windows machine through the Internet using Remote Desktop, and I experience very minimal graphical delays while productively working in this manner.



In fact, I'm writing this blog article using the CapOS Browser Operating System. This application allows the user to drag and drop windows within the browser! The browser window looks just like a desktop background, and I have windows that I can minimize, maximize, and close. I haven't had a chance to fully explore its feature-set yet, but this does hint that in the future all applications could be hosted in one location, be accessed anywhere, and have a rich client interface, possibly without the need for a local hard drive or operating system!

I think Microsoft is in trouble.

James Mortensen