Category Archives: javascript

IE – why oh why do you taunt me so??

I’ve been working on a couple of plugins for the YUI editor to allow insertion of Flash Movies (YouTube and Google Video). It’s all working swimmingly well in Firefox and Safari but in IE – it just would not work. Why? because of IE’s JS engine bastarding implementation of innerHTML and pasteHTML. I know that innerHTML is not part of the ECMA spec but it is well supported across browsers and is alot quicker than document.createElement. The YUI editor uses it extensively too. I’ve also never encountered problems with it before.

My JS plugin for the editor takes and parses a Google Video URL and inserts it into the editor content area using the appropriate YUI editor action “inserthtml”. In Firefox – I get the alternate image as it doesn’t render the markup in the editor’s iframe properly and as such does not know to load the Flash plugin (this is fine and I have no problems with it). Internet Explorer inserts the HTML and then displays a broken flashmovie icon (white with red x in top left indicating it can’t find the movie specified), which is not fine. This is the markup I insert.

Correct markup

IE (6 and 7), in all it’s wisdom decides that that is not what I really want to insert -in fact what I really want is –

Incorrect markup

Hmmmmm….. No that’s not what I fucking well want – you piece of shit(or so I was shouting late last night). This is due to the JS engine’s HTML normalization – excuse me what?????. Very annoying. To get the editor to display the movie I had to (“shock horror”) add the deprecated embed element.

Another problem was that when submitted server side – we use a HTML parser and IE’s version of the markup would not parse correctly as the attribute values were not quoted. So I have one momma of a regex to fix the object element.It all works now and works well but it’s so disappointing that it happens like this.

In summary – firstly: beware of innerHTML especially when inserting an object element and finally: I hate internet explorer more than I ever did.

Debugging to your clipboard (firefox extension)

I’ve started using Google reader again and came across the truly brilliant Dust Me Selectors extension (good work brothercake). It’s aim is to report on the CSS redundacy on your site. I hooked it into our selenium test suite and set it to run on page load. Selenium closes the browser when done and deletes the profile directory so I had no way of accessing the data (stored in preferences in a json string). A quickly hacked the js

var oClipboard 	= Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  oClipboard.copyString(str);

I set a pause on the last selenium test and then chose view saved data from the Dust Me Selectors context menu.  I then had the full report in html on my clipboard and could let selenium continue with it’s profile cleanup.

Ajax header image rotation

Previously on Philroche.net, the header images were populated from a PHP Array which generated a ul with javascript links to change the header image. Not nice as it relied on javascript. After some ajaxian fun, the list is now generated from an XML playlist and the list is fully accessible with click events attached to each link to change the header image. You can view all the source below but there’s also an example page. Please note that this is version 0.1 (read- possibly buggy) so if there’s any problems let me know and I’ll debug.

Source code

Extend Your Browser

Tuesday 6th (the day of my presentation) eventually rolled around. Due to a crazy machine rebuild and re-install fest, I only finished writing the presentation at 1:30pm on the day. It went really well, some very good questions at the end. As I mentioned in my previous entry – the description of the presentation was –

Firefox and the Gecko family of browsers are not simply web browsers, they can be extended to provide custom functionality, and used as platforms for building standalone applications. During the presentation I will discuss the anatomy of the Gecko engine and the Firefox browser, extensions and how to create an extension for the Firefox 2.0 browser using Aggreg8 (http://aggreg8.mozdev.org ) as an example.

Philip is a 2003 Software Engineering graduate of Dublin City University. He has been working at Karova Ltd for two years, on ecommerce and custom web applications, and now holds the position of Senior Developer. Outside the office, he hacks on Firefox extensions and small Python or Perl based open source projects. He loves C#, XSLT, Python, MySQL, WxPython, SVG, XUL, Gecko, Javascript, RSS, CSS, his Labrador puppy, Ubuntu and Mono.

You can now download my preentation-

In MP3 audio format – (no pen clicking this time 🙂 )
ITWalesExtendingYourBrowserPhilipRoche.MP3 [mp3 31 MB – 1 hour 2 minutes]
PDF of my presentation slides
ExtendingYourBrowser-Slides.pdf [pdf 501 KB]
PDF of my presentation slides – including my notes
ExtendingYourBrowser-Notes.pdf [pdf 548 KB]

Enjoy

Extend your browser – ITWales

Snippet from Extend your browserLast year I gave a presentation to the ITWales group on Content Syndication. I have been bullied into giving another presentation next Tuesday. I have entitled it “Extending your browser”. Directly from the flyer –

Firefox and the Gecko family of browsers are not simply web browsers, they can be extended to provide custom functionality, and used as platforms for building standalone applications. During the presentation I will discuss the anatomy of the Gecko engine and the Firefox browser, extensions and how to create an extension for the Firefox 2.0 browser using Aggreg8 (http://aggreg8.mozdev.org ) as an example.

Philip is a 2003 Software Engineering graduate of Dublin City University. He has been working at Karova Ltd for two years, on ecommerce and custom web applications, and now holds the position of Senior Developer. Outside the office, he hacks on Firefox extensions and small Python or Perl based open source projects. He loves C#, XSLT, Python, MySQL, WxPython, SVG, XUL, Gecko, Javascript, RSS, CSS, his Labrador puppy, Ubuntu and Mono.

You can also download a PDF version of the flyer. I’m even half way through writing the presentation so this weekend will be a busy one. Once I’m done, I’ll upload the PDFs of the presentation.

Aggreg8 lives

This weekend I have gone on an all out Open Source offensive. I have released a new version of ACR (Automatically Create Rewriterules) with some bug fixes and faster processing of sites. I have released an updated version of PEA (Photoshop Elements Album Export) with improved accessibility and more options in the python script header.

Aggreg8 lives again I also started work on Aggreg8 again. I have a working version for Firefox 2.0 (not released yet) which will be my basis for my future plans.

  • Get Aggreg8 working on Firefox 2.0 – Done but not released
  • Get auto-subscribe working – Done but not released
  • Use built in Feed parser
  • Use SQLite for storage
  • Have an options panel
  • Ability to import and export OPML
  • Clean up XULs and Javascripts – especially the location of some functions
  • Add license to header of each file (MPL)
  • Create some nicer CSS stylesheets
  • Create a Norwegian language file
  • Change all references of Aggreg8.net (now a microsoft portal) to Aggreg8.org
  • Implement some sort of caching (although the aim of Aggreg8 is to be simple – caching might be overkill)

After 3 years of inactivity on the aggreg8.mozdev.org site. I am again on the active projects list and am raring to go with the above features. The aim of Aggreg8 version 0.3 is to be a super simple RSS reader with no fancy feature, just an easy way to read your RSS feeds. Using SQLite and the built in parser, I hope will improve performance too.

Graduate c# devleopers x2 wanted

As part of Karova‘s expansion, we are looking at taking on 2 more graduate developers. If you want to apply, you’ll need at least a 2:1 in a technical degree, knowledge of object oriented programming techniques, XML and XSLT, web standards and CSS. C# would be benifical, as would a good grasp of IIS. If you want good pay and a chance to be part of a growing and exciting company – please see http://www.karova.com/jobs for more detail. We are after a sales manager too for you sales guys.

local.live.com Snowdon Mashup

I don’t like the term “mashup” but I wrote a quick “mashup” to show the route I took up Snowdon on sunday (I didn’t go all the way). Try it out. The javascript needs some cleaning but it works for now. Note: I haven’t tested in in IE.

To tie this in with a handheld GPS (which I plan to get for christmas) would be really cool. You could download the Longitudes and Latitudes that you have walked and add them to the Javascript config and presto you can see an aerial view of your trip.

Snowdon Mashup

Update: It does seem to work in IE6 but as Andy pointed out below – I haven’t tested in Safari but I havn’t done any Javascript naughtiness so it should be fine.

Another update: It doesn’t work in Safari – Not because of anything I have done – Local.live.com doesn’t work in Safari – phew

Yet another update: I’ve updated the Javascript, it’s much neater and half the size. It works in IE (the menu is out of position though), Firefox and Opera.