Friday, July 17, 2009

Browser Highlighter Firefox extension / plug in

On my site we noticed that some of our users had some JavaScript problems which was affecting content editing. After a bit of nosing around we found the problem was a Firefox extension called The Browser Highlighter.

This extension was created by eBay and it injects some JavaScript into the page which can affect the JS in your site. You can view this JavaScript in Firebug (it is in the script tag added just after the head tag)

What follows is a means of detecting this extension so you can protect your code from it.

Unfortunately, Mozilla Firefox does not provide an API into detecting browser extensions, but there is a work around.

If the extension injects a graphic into the page (which this one does), it does so by referencing it from the chrome protocol.

i.e.
chrome://shim/content/compareLang-1/eBayCompareIcon_yellow.gif

as opposed to the normal http protocol

So all you have to do is reference this image and place an onload event on it. If the event fires then the extension is installed.

So you can have the following script

<script>
var browserHighlighterPluginInstalled = false;

function alertUser() {
alert("You have The Browser Highlighter extension installed");
}

</script>

<img src="chrome://shim/content/compareLang-1/eBayCompareIcon_yellow.gif" onload="alertUser();" />

You may also want to include instructions on how to remove the extension (Tools -> Add-ons -> Extensions -> Disable).

PS This extension has not been getting very good reviews, please feel free to add your own...

https://addons.mozilla.org/en-US/firefox/reviews/display/11808

Thursday, May 14, 2009

VOO!

So the site I have been working on is now in public beta.

VOO! can be many different things, but I like to basically think of it as a collaborative blog (where you and your friends can post stories and photos and play games).

As always, this site is in beta so new features will be forever forthcoming.

Probably the best place to start is the gallery.

http://www.veryvoo.com/gallery

Sunday, April 19, 2009

jQuery: When does a library become a language?

jQuery is a great JavaScript library which allows web developers to write cross platform code, but some of its syntax looks like it is based more on Ruby than JavaScript. When does a library become a language?

So first of all, what is the difference betwen a programming library and a programming language?

A programming language is a means by which we (as humans) can give instructions to a computer to get it to do various tasks (algorithms, computations, etc...). They are largely artificial constructs created for human readability which then need to be compiled or interpreted into actual instructions which the computer can then carry out. A compiler turns a program into machine readable instructions ahead of time (compile time) where as an interpreter does so on the fly (runtime). Languages such as C and Java are generally compiled and JavaScript, Perl and Ruby are generally interpreted. While there is no real reason why this has to be the case, these factors normally affect the syntax of the languages in question.

A library is a collection of functions and methods of (normally) common actions which are not expressed in the original language. These are not included in the main language because not everyone will need to use them all the time. They are also written independently of the main language compiler/interpreter and they also encourage code re-use (so not everyone needs to write their own String.trim() function for example).

Because of the fact that there are many JavaScript interpreters out in the internet and JavaScript developers cannot control which one will be used to interpret their code, a few years ago some people released their own framework/libraries which iron out these differences and allow developers to write one set of unified code from which any browser differences could be abstracted out into the library.

The most popular of these are Prototype and jQuery.

jQuery primarily gives developers a generic way to access and manipulate DOM elements (one of the main differences between browsers).

However, the syntax used looks very different from plain old JavaScript.

Here is a typical JavaScript loop.

var elements = getElementsByTagName("div");
for (var i = 0; i < elements.length; i++){
alert(elements[i].id);
}

Here is the same loop in jQuery

var elements = $("div");
elements.each(function(i){
alert($(this).attr("id"));
});

Do these look remotely alike?

How about this?
JavaScript
var element = document.getElementById("myDiv");
alert(element.innerHTML);

jQuery
var element = $("#myDiv");
alert(element.html());

To the untrained eye, one might think these are different languages.

jQuery is not another language though, not only does it use the same JavaScript interpreter, not only is it useless without JavaScript (i.e. it is not independent), but in jQuery you are really creating and manipulating a jQuery object and you are given the option to access the JavaScript object it references using the get() method.

It is possible though to write a language based on another language. The Ruby runtime is essentially built on the C++ framework. JavaScript runs in browsers written in C++ as well. These languages have no direct relation to C++ in their syntax though. In theory you could probably write a C++ compiler in Ruby should you want to (though that would be pointless and slow). You can write programs which translate programs from one language to another (the Google Web Toolkit translates Java into JavaScript).

I would argue that jQuery is a dialect of JavaScript or else even a kind of JavaScript slang. It differs from the main language, but it doesn't veer far enough to be completely independent or incomprehensible.

Saturday, April 18, 2009

IE6 Update

Calling all web developers.

The folks over at this site have done something wonderful.

http://ie6update.com/

Basically, you include this code on your site, and all IE6 users see a drop down bar which looks like an ActiveX update and links to download IE8.

This is such a brilliant idea. If MicroSoft won't force people to upgrade, then we, as a community, should.

Tuesday, April 14, 2009

CSS Hacks = Lying

There are many similarities between using CSS hacks and lying.

First of all, what is a CSS hack? A CSS hack is a means by which you can get different browsers and browser versions to see and render your stylesheets differently so you can give them different directions (ironically though it's normally done to achieve pixel perfect cross platform web pages). They are also mostly done for Internet Explorer (which for some reason refused to implement standards based CSS until recently).

CSS hacks mostly exploit bugs in a particular browser such as the Star HTML hack. This hack was used to get code to run in IE6 and lower in a different manner than other browsers.

IE also introduced conditional comments which allow you to add an extra stylesheet to "fix" any CSS issues. This is not technically a hack, but it does require you to write and maintain extra CSS.

There are also more subtle types of hacks to make up for some things that are missing in IE like the IE min-height hack (which adds min-height style functionality to IE).

So why is using a CSS hack like lying?

Well, when you tell a lie not only are you telling an untruth, but you are essentially telling one person a different story than someone else. This is not admirable behaviour, but you can probably get away with it, once or twice. However as you have no control (mostly) which clients can see your site this is akin to lying to someone whilst there are other people in the same room. After telling the lie you then have to sneak over to all the other people and tell them a story and hope the first person doesn't cotton on.

Often with lying (as with CSS hacks) telling one lie requires you to tell another one (and to keep track of all the lies you tell). You then end up with a snowball effect wherein you lose track of what is true and what is not and you end up with more code than you ever needed.

Why use CSS hacks in the first place?

Because not only do these little CSS browser differences open hacks, they often are the cause for rendering differences between the browsers. There is a temptation to therefore use other hacks to fix these differences.

So there is often a judgement call to be made as to how far you can push a hack, and pile hack upon hack. At some stage compromises need to be made in the design.

So basically, I am not saying one should never lie, in web development (like in life) there are times when you need to use hacks and there are times when you need to lie. Just be careful not to do it too often (and document it carefully).

One more thing, if you are going to be using a lot of JavaScript to move your page elements around, you need to be doubly careful about using CSS hacks as there are some browser differences that don't reveal themselves when a page is static (but do so when a page is dynamic).

Wednesday, April 01, 2009

Getting Search Engines to read Flash Content

Ok, so I lied. While Google supposedly now does index Flash content, what this article is really about is a quick a dirty way to get search engines to index your pages which contain Flash without having to display that content to the user in the HTML.

Basically this technique relies on swfobject (http://code.google.com/p/swfobject/). One thing swfobject does in dynamic mode is allows you to specify alternative content in a div for non flash users which gets switched out via JavaScript once the page loads:

    <script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>

<div id="myContent">
<p>Alternative content</p>
</div>

So basically you can duplicate the content which goes into the Flash app in the Alternative content section. Search engine spiders index HTML, but don't run JavaScript so are none the wiser that the user is actually going to see a Flash app.

The best case scenario is when the content in the Flash app is dynamic so you can easily duplicate it in the HTML. Static text needs to be manually copied. Most app related text will be instructional in any case and not really suited for search engines.

Saturday, March 21, 2009

IE8 readiness

I know people have done in depth reviews etc..., but here is a quick a low down of what you need to do as a web developer to support IE8.

I am going to assume that you have been a standards based web developer for the last couple of years and that you have not been doing too many hacks to support IE7.

1) Add the new metatag in the top of the to force IE8 to render in standards mode.

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Without this tag a little button appears next to the location bar which allows the user to view the site in IE7 compatibility mode. You probably don't want to do this because you want people to view your nice standards compliant website and also the render mode is slightly different from real IE7 in any case.

2) If you were using conditional comments to catch IE and add some extra CSS, you will probably need to update the condition from

<!--[if IE]>
<link rel="stylesheet" type="text/css" src="ie-hacks.css" />
<![endif]-->

to

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" src="ie-hacks.css" />
<![endif]-->

3) You will probably want to put the above tags in a conditional which is controlled by a parameter so you can switch back and forth easily while testing

<% if params[:ie] != '7' %>

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" src="ie-hacks.css" />
<![endif]-->

<% end %>

And then access the IE7 mode in the following manner

http://yourserver.com/login?ie=7

4) There is currently a known bug with the scrollHeight and scrollTop properties (this broke the Yahoo Rich Text Editor I had embedded in my site http://www.quirksmode.org/blog/archives/2008/03/ie8_beta_1_firs.html). It does not appear to be fixed yet in the release version.

I am sure there is plenty more, but this is what I have discovered so far.

Monday, February 09, 2009

sudo = Stupid Utility, Distinct Overkill

I think XKCD said it best...

"Make me a sandwich."

"What? Make it yourself."

"sudo make me a sandwich"

"ok"

The UNIX OS was originally designed to run on computers that many people would use and in those situations you don't want every Tom, Dick and Janie installing stuff that could break a shared computer. However, on desktop Linux (which one person normally uses) , sudo is kind of useless. Why not just prompt for the user password without sudo (if root access is needed to install or change modifications)?

I guess sudo IS easier than logging out and then logging in again as root, but it's annoying (especially if you give your normal user permission to administer the system). It almost becomes a point of politeness (in which the word please would make much more sense). Instead of sudo apt-get install ruby you could just ask please install ruby. No wonder people think techies speak their own language. You are probably saying please out loud to your computer anyways when it doesn't work. I know I was when I was having trouble configuring the microphone for use with Skype.

Skype: Hello, welcome to Skype call testing service. After the beep, please record a message.

Me: Please please please work! I don't want to have to go back to Windows!

Ah yes, Windows. As bad as sudo is, it will never be as bad as Vista's User Account Control.

That's still no excuse though...

Life with Linux

I have been using Ubuntu Linux at home for the last month (courtesy of those folks over at Wubi). Overall I think it is great. So much faster than MS Vista and it helps inject life back into old machines.

However I have spent a fair amount of time configuring and re-configuring things (partly my own fault, and also partly because of the learning curve involved with any new OS). I even had to do one re-install (more on that later). Mostly though it worked out of the box.

So here are a few good ground rules for newbies...

1) Make sure you have more than one Internet enabled computer in the house before you do anything. If for some reason you have a hardware conflict (as I did with the wireless card on my wife's laptop) you will need to look up how to fix it.

2) Most of what you need is available through Synaptic Package Manager or Applications > Add/Remove. If you need a program or driver search there first before the Internet. The only notable exceptions I can think of are Skype and Adobe Flash. Basically Ubuntu has a number of great free programs available which you don't need to install externally.

3) Don't mess around with settings and config files unless you really know what they do. It was this that led me to my re-install, partly because of the next category...

4) When going online for info on configuring your computer, don't automatically use the first solution you read (especially if it asks you to update your settings and config files). Manually updating settings and config files with your text editor should be a LAST resort. More often than not the GUI tools are safer. You wouldn't normally update your Window's registry by hand would you? There are sometimes exceptions, but if an article tells you to go to your terminal and do anything with sudo, vi, pico, rm or gedit think twice. The only exception is sudo apt-get install (which is pretty safe because you are just using the command line version of Synaptic Package Manager). Also be wary of shell scripts (.sh files).

Apart from that I found Ubuntu much faster and easier to install than any Window's distribution (way faster). Provided you have the disk or the files on hand I would say it takes twice as long to install as Vista takes to boot up on an old machine.

Tuesday, February 03, 2009

On gambling and computer languages

Today's entry will be a bit more esoteric than most others, it's basically an broad analogy between gambling a choosing a software language to learn/specialize in.

Basically as a programmer you have many choices in your career as to how which languages to learn and what level. The main 2 choices though are whether or not to become a specialist or a generalist.

Take a roulette table, it's possible to make sure you will have a better chance of winning by spreading your money around it (being a generalist) but if you win, your win will be offset by your losses. If you put all your money on one square, if you will you will win big but your chances of winning are lower.

Now look at specializing vs generalization in programming. Some of the people I know who earn the most money as programmers (at least per hour) tend to specialize in small areas. I know one who only really knows JavaScript (at an architect's level), another who writes add ons for Outlook, and another who specializes Adobe Flash. On a per hour basis they are all doing quite well, however the number of companies they can work for are quite limited and while COBOL programmers were making great money up until Y2K, a lot of them aren't doing very much now.

The generalists may not make as much per hour, but the number of places they can work are much higher and if demand falls off in one of their languages then they can pick up another language and focus on that. They are also people who have the luxury of choosing which tool they want to use for a task as opposed to trying to make their only tool do the job (i.e. hammering in a nail with a wrench).

Roulette however is totally probability driven and not experience driven. Perhaps in that case a better analogy would be horse racing. Before one chooses a horse (or horses) one has to do a lot of research into how it's been doing as a predictor of how it will do in the future. The same applies to computer languages. Some will obviously be around for a while, some are on their way in, and some on their way out. If you learnt Java or C++ chances are you will be able to work in those languages for the rest of your career.

But as with horses, sometimes one chooses a language because one just instinctively likes it.

As for myself, I am an unabashed generalist. I will continue to back several horses and while I may not make as much, at least one of them will win.