Gmail strips HTML emails

At work we have a section where people can set up emails that go out to their own customers (we have a reseller scheme). There are placeholders like [NAME] and [BASKET] that the customers can put in their email templates which we then replace with the actual information when we send the emails out.

Recently I’ve been asked to add some IDs and classes to the HTML elements we generate for the placeholders so that the whole section can be styled by our resellers.

I quickly added a bunch of classes and then began testing with a <style> tag in in my email. I spent quite a while wondering why it wasn’t working correctly before the DOM Inspector showed me that Google strips the IDs of elements. I then went on to read that they also remove all <style> content. You also can’t use a <link> tag to include a stylesheet (which is a good thing).

The only way to style email for Gmail is apparently to use the style attribute for each element. This is fine if you are fully writing the emails yourself, but our resellers never even see the actual tags, they just put in a placeholder. That leaves them no way of adding a style attribute to a section, which means we can’t let our resellers fully style their emails. Ridiculous.

Thanks Google.

Theremin-eqsue HTML5

I’ve spent the last few days thinking about theremins, the musical instrument that you play without touching. When I went to see a band called Spaceships Are Cool the other day it triggered my mind. One night I suddenly decided it would be possible to make a theremin that worked using only one hand using a different design.

I plan to make one at some point in the future, when I get the parts in one place… For now I decided that I would build my concept in the browser. I started out making it with a bunch of div tags, which was frustrating, and then I realised that I could use the <canvas> tag from HTML5 to do it.

I threw together a quick page and then began thinking about the sound. I found a page detailing generating sound in Javascript in Firefox 4 and decided to go with that. I installed Firefox 4 and then started playing around with scripting everything. I started out by picking apart Paul Irish’s harmony.js file (view that site in Google Chrome and scroll to the bottom). Then I added in the sound stuff once I had values for the cursor position.

What I ended up with was a very plain page that generates sound (in Firefox 4) with the pitch determined by the cursor position on the X axis, and the volume on the Y axis. The sample time is 50ms, and at the moment there’s a bit of an annoying click. I think I might be able to get rid of that by keeping the audio element playing at 0 volume or something like that, but that’s debugging for another day.

Anyway, if you’re viewing this on my page in Firefox 4 then you should see the finished product underneath. If you’re viewing this in a feed or on Facebook then you’ll want to go here. If you’re not using Firefox 4, or you’re not sure what browser you’re using then this probably won’t work for you and you’re probably very bored of reading this by now.

Browser frustrations

Earlier on I was writing some code that inserted some text into a textarea on a webpage. After the text has been inserted I needed the cursor to be at the end of the textarea so that the user could then type more text in afterwards without any messing around.

I thought it would be a simple matter, but it turned out to be quite frustrating.

Needed for all
var t = document.getElementById('add-comment');

Gecko (Firefox, Mozilla, etc.)
t.focus();

Webkit (Chrome, Safari, etc.)
t.selectionStart(t.value.length);
t.selectionEnd(t.value.length);

Internet Explorer
t.setSelectionRange(t.value.length, t.value.length);
t.focus();

Is there some standard way of doing this that I’m unaware of? I think jQuery would be overkill for this one purpose.

jQuery Form failure

I’ve used the jQuery form plugin a few times before, but today I ran into an error I’d not seen before that took a few minutes to solve. I started out by searching Google, but couldn’t find the solution, so I’m writing it here in the hope of helping others in my unfortunate situation. 🙂

The error was caused in jquery-1.3.2.min.js and went like this: (E || "").replace is not a function

I upgraded to jQuery 1.4.2 uncompressed and found that the same thing happened, but with a more helpful message: return (text || "").replace( rtrim, "" ); is not a function

I opened up jquery.form.js and did a quick search for ‘trim‘ and it only returned one result: var url = $.trim(this.attr('action'));

This is when I realised that my form had no action attribute, which is bad HTML even though fairly consistent browser behaviour is to submit to the current page.

Once I added the attribute to my form it all worked as expected. I’ve written a patch for the jquery.form.js file that I’ll submit to the developer in a couple of minutes. 🙂

Cash Gordon sucks

Just been looking at the Cash Gordon website and decided it’s not very good. Thought I’d share that with you all. 🙂

More info
I just thought I’d take a second to explain this post… The Conservative Party put up a website that I’m not going to bother linking to that had a Twitter stream of all posts with a certain hashtag. They had no filtering of content, and no sanitising either. All HTML and Javascript got rendered directly on their page.

Cue carnage. People posted massive pictures, huge text, and a few people (myself included) posted Javascript redicrects to various other sites around the Internet.

The site appears to be down now. Whether that’s on purpose by the sysadmin team in the data centre, or because of a DDoS I don’t know. I guess it won’t be coming back up in its original form though. 🙂

Google Analytics data:
Cash Gordon Google Analytics data

It was fun while it lasted.

WordPress Google Analyticator plugin

I use the Google Analyticator WordPress plugin by Spiral Web Consulting on my site because it saves me the bother of checking my stats on the actual Google Analytics page all the time.

Over the last couple of days I noticed that one of the searches bringing people to my site wasn’t showing up in the widget on my dashboard. After going to the Google Analytics page I discovered that the search term was <!– IE 8 quirks mode please –> and it wasn’t showing up because that’s what an HTML comment looks like.

I poked around the Google Analyticator code for a little while and discovered that the data was retrieved from Google and then just included in the output of the dashboard page in WordPress. This could lead to something as simple as search terms not showing up, or turning all of the text after a certain point bold (if a search term was <strong> for instance), or it could lead to particularly nasty people crafting a top search result containing a <script> tag and from there they could do some fairly nasty stuff.

I’ve created a very simple little patch to solve this problem. It basically involves running the data through PHP’s htmlspecialchars() function before it’s printed to the screen.

Download the patch.

EDIT
Google Analyticator 5.2.1 has been released to address this issue. Upgrade your installation! 🙂