Monthly Archives: January 2006

thoughts on SVG for icons in websites

My CMS uses FCKeditor for a lot of the text-editing fields.

When the editor is being loaded, there is a very noticeable lag while the various icons are loaded up. The average editor has about twenty separate icons. Each one of those represents a request to the server. Even if the icon is already loaded, the browser makes a request anyway, to see if a newer version is available.

That’s bloody awful! Even with broadband, it’s not good. The ideal would be that there are only three requests – one for the JavaScript, one for the CSS, and one for the images. Instead, there are about thirty, comprising the icons, the CSS, and the JavaScript.

There is one easy way to fix this – get all the icons, paste them all into one large bitmap, and use CSS to display the appropriate cropped part of the bitmap as needed. The unfortunate part of this method is that all icons must be located at predictable locations and have predictable sizes. This could be a mistake, if you want to display the toolbar with different themes, which may have different-sized icons.

But – there’s another way which would be useful for much more than just FCKeditor: what if all the icons were provided in one file as sections of SVG? With SVG, the locations of the icons in the file are not a problem, and the icons are whatever size you want them to be.

So – I believe that SVG may be the answer to the problem.

However, as far as I know, not many browsers natively support SVG. Firefox does recently, and I think Opera does as well, but IE (the most popular one) doesn’t, and even Konqueror, which I’m writing this in, only supports it if you specifically compile it in. (don’t bite my head off if I’ve got something wrong in this paragraph – it’s all voodoo anyway)

So, a workaround must be built for those browsers that don’t support SVG. I think that workaround is to figure out whether the browser supports SVG, and if it doesn’t, then the SVG should be loaded via Ajax, and drawn dynamically using a library such as the JavaScript Vector Graphics Library.

Anyway… there y’are. Just an idea. I’m not promising that I’ll do this any time soon, but you never know – I may just sit down and write it. If I’m lucky, I may be able to convince the boss that the project is worthwhile (which it is), and will be allowed to do it during work hours (I’m usually too tired outside of that time to get anything done).

generating electricity with the coriolis effect

Yeah – another mad idea…

The “Coriolis effect” is quite simple to understand when you think about it.

Imagine a big wheel balanced on its axis, some place other than at the equator. It is easier to imagine this by exagerrating the size – make the wheel quite large, and the world a few times larger than the wheel in your imagination.

Now, imagine what happens at the north end and the south end as the world turns.You can measure the distance that the ends travel by measuring from either end to the axis of the planet, then multiplying by 2*pi.

You might imagine that balancing a wheel on its axis doesn’t make any difference to how far it travels, but… when the wheel is balanced on its axis, the north end is closer to the axis of the planet than the south end, meaning that the north end actually travels less than the south end!

Of course, the various laws of conservation of momentum, angular velocity, etc, come into play then, and you will find that the wheel will turn slightly to compensate for the difference in distance between the north and south! (I have not tested this, but in my imagination, it works perfectly)

So, my idea is this – attach a generator to the axis of the wheel, and you get free energy! You will of course need to attach some gears to the axis to make the Coriolis motion usable.

Note that the wheel does not need to be flat against the earth – in fact, the most optimal angle would be such that the wheel is perpendicular to the axis of the earth.

Your Mileage May Vary.

thoughts on a more transparent screen emulation

Last night, I put in some work on my Mapper project (creating a 3D mesh from photos automatically). This morning, I was thinking about the background image on my laptop, and realised it should be possible to automatically emulate a realistic transparency by using the project I’m working on. (the linked photos are very painstaking to set up)

How it would work is that a camera mounted on my lappie would keep track of where my eyes are (there are programs out there that can already track the head – the eyes are located in predictable points based on that). The laptop would already have a mesh version of the present room in its memory.

By the view of the room minus “volatile” elements such as me, the lappie could figure out the location of the screen of the lappie.

Combining that information, the lappie could figure out what the left eye and right eye should see where the laptop screen is, if that screen was not there.

What is very interesting about this is that the computer should be able to account for the head moving, and for the laptop moving as well!

for loop tip and gotcha

The usual for loop looks like this:

  var arr=['a','test','of','this'];
  for(var i=0;i<arr.length;i++)alert(arr[i]);

One quick tip is to use the in construct to improve the readability:

  var arr=['a','test','of','this'];
  for(i in arr)alert(arr[i]);

Note that I did not initialise the i variable. for some reason, initialising in the in construct screws up in JavaScript.

Now, the gotcha!

I was working through my JavaScript library to improve loops in this manner, and came to this function (which prototype users will recognise):

function $(){
  for(var i=0,a=[];i<arguments.length;++i){
    var e=arguments[i];
    if(typeof e=='string')e=document.getElementById(e);
    if(arguments.length==1)return e;
    a.push(e);
  }
  return a;
}

At first glance, translating the above into the in construct looks possible:

function $(){
  var a=[];
  for(i in arguments){
    var e=arguments[i];
    if(typeof e=='string')e=document.getElementById(e);
    if(arguments.length==1)return e;
    a.push(e);
  }
  return a;
}

the above code was corrected, based on Christof’s comment

However, if you do that, then you will spend hours debugging problems in code without knowing what is going wrong!

There is no syntactical problem with the above code, so you will not be alerted to any problem in that function. However, it should be noted that arguments, although it acts like an array, is actually an object, and cannot be used as we want to use it.

I hope this saves someone some time. It certainly puzzled me for a long time!

shading the background of a document

I’m working on a new newsletter project, and will be using a huge amount of Ajax in it. One of the features I want to implement will be creating and editing entries in address-books, etc, with “popup” forms.

In order to make those forms really stand out from the rest of the page, I thought it was important to shade the rest of the page. A few seconds thought came up with the perfect solution.

the example

What happens is that the form for editing/etc is created with a z-index 2 above the rest of the page, then a half-transparent black layer is placed between it and the rest of the page.

A few hacks were needed for most of the main browsers:

  • for Internet Explorer, I had to use filter:alpha(opacity=num) to do the opacity.
  • Opera does not support opacity, so I used a semi-opaque PNG image.
  • Konqueror supports neither opacity nor semi-opaque PNGs, so I used a cross-hatched GIF image.

blonde joke

I don’t usually post jokes, but couldn’t resist this one: blonde joke

oss initiative thing

I usually don’t concern myself with the "politics" of business, so this post is a bit off-topic for me. My company, webworks.ie, is involved with what could be a very interesting project – the plan is to build an open-source company group which can handle quality assurance for open source for Irish businesses.

I’m a little vague on the details, as I’m really more interested in technical implementations of stuff than in how the technology is then used by other companies.

Anyway – here’s the press release of the thing, and a photo of some of the speakers at the last event:


left-to-right: Brian Cleland (InterTrade Ireland), Kevin Buckley (Mandriva Ireland), Martin Pauly (Unite Solutions), Ciaran O’Riordan (Free Software Foundation Europe), Mel McIntyre (Openapp), Paul McCormack (NETC Facilitator)

This is interesting to me in a sort of "this could be good" way. If all goes well, then I may end up working on more publicly open work, vs what I do at the moment, which tends to filter out slowly and via kinda techy channels.

cloneNode caching

In my code, I like to be concise. I hate long-winded code. For instance, I usually replace the function document.createElement() with a function called newEl(eltype) which returns a new element as requested.

There is a small timing price to pay for that abstraction, though, as the shorter newEl() is simply a function encapsulating the original code.

I was reading through my blogs today, and came across this article, which discusses the use of element.cloneNode() instead of groups of document.createElement() blocks to create repetitive elements.

I thought a bit about that, and did a little test, and now have a very fast replacement for my newEl(eltype) function. Basically, it tests to see if a cached created version of that element type exists already, and if it does, then it returns a clone of it. If not, then it creates one, caches it, and returns a clone.

I have written up a test for it, which creates a p element 10,000 times with both methods, and the answer is definitive – cloneNode is definitely the way to go.

My new newEl(eltype) function:

var elCache=[];
function newEl(eltype){
	if(!elCache[eltype])elCache[eltype]=document.createElement(eltype);
	return elCache[eltype].cloneNode(true);
}

Update

After working on some tests based on the comments below, here is an updated version of the above, which takes into account that some browsers show no significant improvement with cloneNode:

var elCache=[];
function browserCheck(str){
	return navigator.userAgent.toLowerCase().indexOf(str)+1;
}
var newEl=(browserCheck('konqueror')||browserCheck('opera')||browserCheck('safari'))?
	function(eltype){
		return document.createElement(eltype);
	}:
	function(eltype){
		if(elCache[eltype])return elCache[eltype].cloneNode(true);
		elCache[eltype]=document.createElement(eltype);
		return elCache[eltype].cloneNode(true);
	};

new year resolutions

Every year, I plan on doing some things. Usually, I fail miserably. Anyway, here goes again…

General plans

  • Get my robot to the stage that it can move around and map its surroundings.
  • I will get FCKEditor working in Konqueror.
  • Get a mortgage and a car.
  • Get that weight down.
  • Look into getting an education. I’m basically a Junior Cert educated person – left school before I finished (I was bored…) – time to look into distance learning, as I don’t have time for classroom learning. “Doctor Kae Verens” would have a nice ring to it.

WebMeCMS plans

These are improvements that I plan for webworks.ie‘s CMS.

  • Convert the “simple table” object so it can work as a spreadsheet.
  • Filter for importing/exporting Open Office spreadsheets (or, more precisely, Open Document spreadsheets (list of compatible applications)).
  • Complete the PHP code abstraction/normalisation that I started last year (reduces lines of code, and makes it easier to debug/maintain).
  • Complete the move from pure XMLHTTPRequest to Sajax (makes AJAX so much easier!).
  • Filter for importing Open Document word processor files and converting to HTML.
  • Vastly ease the installation of the CMS.
  • Consider allowing the use of SQLite, instead of / in addition to, MySQL, allowing easier installation and migration.
  • Improve the directory structure such that designer-editable files are kept completely separate from internal files.
  • Allow the templates and css to be edited from the back-end.
  • Complete the integration with FCKEditor.
  • Install a bugs database, to encourage people to report errors instead of silently fuming.

I’m sure there is a lot more that I want to get done that I can’t think of at the moment…