The last time this happened, my developer (who wrote about it here) and I were taken aback until we came across a solution on a Media Temple Wiki. We both use Media Temple and although I hope not, I wonder if that’s how it’s spreading. Regardless of how it got there, it is a frustrating thing to remove. Thankfully someone has written an amazing script for Media Temple that works very quickly and makes removal very easy. This time around, however, the links had changed and that beautiful script took a bit of finessing in order to work. Building on this unknown ninja’s coding skills, I’ll show you how I updated the script.

The original script handles these 4 script addresses:

• ae.awaue.com/7
• ie.eracou.com/3
• ao.euuaw.com/9
• ue.oeaou.com/31

If you have one of those at the end of your post, then you don’t need to do anything except follow the wiki, ssh in, and copy/paste the script. For me, however, I had the script

• http://uoauer.com/si

Reformatting the Code

So there’s 3 places in the script that you need to make changes.

Change 1

Find the line that looks like this:

[sourcecode language="plain" wraplines="0"](ae\.awaue\.com/7|ie\.eracou\.com/3|ao\.euuaw\.com/9|ue\.oeaou\.com/31)[/sourcecode]

And somewhere in between those pipes (this “|” character) you need to add your address. You’ll notice a “\” before each “.” and no “http://” so you’ll need to format your address in the same fashion. Mine came out as

[sourcecode language="plain" wraplines="0"](ae\.awaue\.com/7|uoauer\.com/si|ie\.eracou\.com/3|ao\.euuaw\.com/9|ue\.oeaou\.com/31)[/sourcecode]

This line is the one that does all the hunting for you so it’s very important that your offending link is correctly added.

Change 2

Next, we’ll be adding a “replace” command for removing it from the database. Find the line with all the replaces.

[sourcecode language="plain"]replace(replace(replace(replace([/sourcecode]

and add one more

[sourcecode language="plain"]replace(replace(replace(replace(replace[/sourcecode]

Change 3

And lastly, you’ll need to add the string it needs to replace. So copy one of the script examples

[sourcecode language="plain"]src=\"http://ao.euuaw.com/9\">’, ”),[/sourcecode]

and modify it with your address, making sure to add the \”

[sourcecode language="plain"]src=\"http://uoauer.com/si\">’, ”),[/sourcecode]

Here’s my final script (note that when you run it, the cursor just blinks until it’s done). Let me know if any of this is confusing! And as Andrew said, “whoever wrote that original [script] deserves 1000 gold medals!”

When comparing with Javascript methods like Cufón and Typkit, I mainly prefer @font-face embeds for it’s consistency (not even going to bring up Flash-based embeddings… wait, oops). I’ve found that when testing out fonts in tight areas like navigation and headings, Javascript methods tend to jump around a bit after the page has loaded, making things tricky to guess when margins and paddings are crucial. Font-facing, on the other hand has much less lag (with the exception of what Paul Irish calls “FOUT“) and also tends to render the same in all browsers.

So as I was building a theme for Posterous this past week, I used @font-face and everything looked fine locally. Font Squirrel even works some font magic to make IE cooperate with no effort at all. So I was happily moving along until I had posted everything online, linking to my assets and I realized that things looked great in every browser but Firefox. For reasons unknown to me at the time, Firefox would not show my embedded font. This was a bit of a surprise, so I spent a few minutes tweaking my links and making sure everything was right. This turned into a few HOURS of headache and frustration. I’ll spare you the horrors and just get to the juicy bits.

The Fox Fix

As it turns out, Firefox 3.5+ prevents cross-domain linking of font files as a security measure. What this means is that if you’re trying to link to a font from a different site, as you’re currently forced to do with services like Posterous and Tumblr (unless you use Typekit), it will work in every browser but Firefox. Thankfully, however, there’s a workaround. Font Squirrel can actually embed the font into the CSS using Base64 encoding.

What you’ll need to do is upload your font to Font Squirrel’s Font Face Generator and choose the expert mode.

Here are the settings that I used.

We don't need WOFF since Firefox is the only browser that uses it and we'll be embedding Firefox's font as a TrueType.

Font Squirrel makes an amazing little zip file for you with CSS and and example HTML file to get you going. With the Base64 encode you’ll have a super long file, but your fonts will work in all browsers. What I did was copy the CSS and paste it at the bottom of my main CSS file to help eliminate any possible errors and then changed the links to fit.

Hosting the Files

If you currently don’t have a server of your own to host the files, then the easiest solution is to use DropBox. You can put up to 2GB on Dropbox completely free and then link to the files in your theme. All you need to do is put the folders/files somewhere in your Public Dropbox folder, and get the link by selecting “get public link.” Then plug that into your theme/CSS file.

If you’re curious, the theme I made is still in the works for full Tumblr and WordPress compatibility, but you can check it out on my Posterous blog about Japan and missions at http://reedsinjapan.com

Posts and People that Helped Me

Adam Singer from Posterous gave me a big hand troubleshooting this.
Cross domain workaround for @font-face and Firefox
The article that showed me the error in Firefox’s ways
Other reasons I like Drop box.

Font gone bad!

Above you can see a styled font from a recent project we did that has been ruined by CSS. We embeded this font using @font-face (which is much more consistent than a js/flash embed). The image above is using the default H3 tag which likes to bolden things and ruin your great looking fonts. The quick fix for this is just to add “font-weight: normal;” to your CSS and you will get results like what you were looking for.

How the font should display

More Help:
You can find awesome font-kits for free from fontsquirrel.com

Rounded corners on Merig.com Firefox vs. IE

Currently, I am finishing up a design/development project for Meriwether Godsey, a catering company based here in Lynchburg VA and my current employer (until Feb 26). The design features a series of rounded boxes to feature all of their sidebar content as opposed to a “stacked blocks” look it had before. I had an interesting revelation during the development of this site. I came to my boss with the proposition of giving modern browsers the CSS to have rounded corners, knowing that IE would be forced to render the content as squared “blocks.” After showing her the proposed solution in both sets of browsers, she replied “that’s fine!” I was a bit stunned, but excited at the same time. My goal was to save development time and to ensure cleaner code while providing a nicer look. In addition, I was able to save the user precious seconds that they would spend waiting on another image to download.

Was It Worth It?

With the bulk of the code now done, I can ask myself “Was it worth it?” The answer is a resounding “YES!” Using CSS3 now saved development time, it got the boss’s approval, it saves the user time, and eventually Microsoft will catch up with the rest of the world and users will see these great-looking corners. In the mean time, it’s not a big sacrifice. The design doesn’t look bad in Internet Explorer, so it’s not a big loss. If you’re on the fence about jumping into CSS3, my suggestion is go for it! You’ll be glad you did.

Blog Question

I write these articles for you, the reader more than for me. I want everyone to benefit from what I’ve learned. So, my question is “Do you like a shorter format like this? Or would you rather see a more detailed article?” I’d really appreciate it if you let me know in the comments or on twitter. Thanks!!

In this post, I will introduce you to the latest analytics code from Google, show you how you can update your inline external link tracking to work with it, and then demonstrate how to use a javascript framework to do all the heavy lifting for you.

Back in December of 2009, Google released a fantastic update to it’s analytics (urchin?) app which they called asynchronous tracking. Without getting technical, the big advantage of this update is that it loads the necessary files faster. In addition, you can now safely move you analytics code into the head of your HTML. This matters because you can get a better idea of who is coming to your site and “bouncing” away before the entire page loads. When the script is in the footer, a visitor can leave before the page fully loads and Google never tracks the visit.

Here’s the new asynchronous script from Google:

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

How to update your external or outgoing link tracking

I don’t claim to be much of a developer (you’ve been warned!) so my big dilemma was figuring out how to get outgoing link tracking working with the new google analytics code. You can find the official usage guide here, but it wasn’t clear enough to me, so I went searching for a better explanation. I found a nice write-up well worth reading on using the async script and jquery to track click events here, which I’ll come back to, but what I initially wanted to know was how to track outgoing links inline with an “onclick” event.

The old method was to use the “_pagetracker” variable and looked like this (if you were linking to my site for example *wink* *wink*):

<a onclick="pageTracker._trackPageview('/outgoing/painteddigital.com');"  href="http://painteddigital.com" target="_blank">

But the new method uses the “_gaq” system to manage things and throws in some brackets to confuse you, but you can format it like this:

<a onclick="_gaq.push(['_trackPageview', '/outgoing/painteddigital.com']);" href="http://painteddigital.com" target="_blank">

That’s all there is to it! …unless you want to make things easy for yourself and automate this so you don’t have to enter it into each link. With Jquery, this is is pretty simple. I have a client who needed to track on Joomla which is stuck on Mootools 1.11 so I’ll post that code here as well.

How to automatically track outbound links with JQuery

I recommend that you also use the new Google CDN Ajax library to load your JQuery for you, so I initialize with that (If you have any questions, just ask in the comments). You could also switch out target*=”_blank” for rel*=”external” if you use that tag.

google.setOnLoadCallback(function() {
	$('a[target*="_blank"]').click(function () {
		_gaq.push(['_trackPageview','/outgoing/'+$(this).attr('href')]);
	});
});

How to automatically track all external links with Mootools 1.11

The try/catch isn’t necessary, but it’s a nice catchall

window.addEvent('domready', function() {
	$$('a[target*="_blank"]').addEvent('click', function(){
		try {
			if(_gaq) {
				_gaq.push(['_trackPageview', '/outgoing/'+ this.getProperty('href');]);
			}
		}
		catch (err) {}
	});
});

If you find that something I’ve posted is not working out for you, let me know and I will try and help in the comments as best I can.

More reading from Google:

Google Analytics Blog: Google Analytics launches asynchronous tracking
Google Code Blog: Google Analytics Launches Asynchronous Tracking

.some-class{
columns: 2;
}

but excited to see that it worked once I added
.some-class{
-moz-column-count:2;
-webkit-column-count:2;
columns: 2;
}


I just wanted to share that with you. I’m still tinkering around with the new site and I hope to add more features, posts and work very soon. Also, I received an invite to basekit, which is a new CMS/coding platform that is supposed to cut up your psd for you. I’ll give it a try and review very soon.

One last note, I stumbled across a great article on Smashing Magazine today entitled How to Support Internet Explorer and Still Be Cutting Edge. I enjoyed it so much, I actually retweeted it twice! It’s actually what turned me on to this wonderful bit of CSS3 and I would encourage everyone to jump over and give it a read.

As with any CSS changes, it took some pulling and arm twisting to get the CSS working, but I was able to get it going right here!  Thanks a lot Matthew.

If anyone has a suggestion for removing that dotted line in IE8, let me know in the comments.

Flash Actionscript:
[as3]
import flash.external.ExternalInterface;
ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);
function getTextFromJavaScript(str):void {
trace(str);
}[/as3]
That’s it! All you need to know is that “sendTextToFlash” is the name of the Javascript function Flash is listening for, and then it calls “getTextFromJavaScript” once it hears the call. “str” is the variable that is passed to Flash from the Javascript.

HTML/Javascript (don’t worry, it’s simple):
[javascript]<script type="text/javascript">
var currentPage="Home";
function setCurrentPage(newPage) {
currentPage = newPage;
SendDataToFlashMovie(newPage);
}
[/javascript]
This bit is called when the user clicks on a link in the page, which looks like this:
[javascript]<a href="javascript:void(0);" onClick="setCurrentPage(‘Home’)">Home</a>
[/javascript]
And in turn, it calls “SendDataToFlashMovie” Now, back to the Javascript (For those of you unfamiliar with HTML and Javascript, please read a bit on the two before reading on. Otherwise I may confuse you).
[javascript]
function getFlashMovieObject(movieName){
if (window.document[movieName]){
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1){
if (document.embeds &amp;&amp; document.embeds[movieName])
return document.embeds[movieName];
}
else{
return document.getElementById(movieName);
}
}
[/javascript]
The above function is for handling all the lovely browsers and their rendering engines. It should make this setup work on both Windows and Mac. You shouldn’t need to change much there.
[as3]
function SendDataToFlashMovie(newPage){
var flashMovie=getFlashMovieObject("main_flash");
flashMovie.sendTextToFlash(newPage);
}
</script>[/as3]
Here is where the magic happens. The flashMovie is set by the function above it. “main_flash” should be changed to the name of your flash embed id. I recommend using swfobject to embed your swf.