http://notes.natbat.net/

This wordpress.com site will no longer be updated.

A quote from the Ubuntu Women wiki page on one of the reasons for the project:

“[to] Transcend the technical barrier which will empower women to create new software and think out-of-the-box.”

Despite the arguable overuse of metaphors, encouraging women in technology is a really good idea. Its no secret that a lot of women do feel intimidated by this mainly male centric industry, there are many reasons why this should be so.

One article on how to encourage women in Linux that has an interesting analogy, comparing the fear to going into a sports bar with a t-shirt saying ‘I hate sport’. Now I don’t personally believe this is entirely correct, while I completely understand that if you are starting out it sometimes feels like everyone is talking a different language, its not trying to be different, you just are.

Some men, and even some women may think it wimpy, perhaps sexist to even admit there is a difference between the genders and their attitudes; but its true, we are not the same, it is sometimes a struggle to prove yourself as a female geek.

One huge difference that has a significant effect could be that women are less prone to self promotion; while this modesty trait may be good in polite society, it doesn’t work well in the geek world. Men are quite happy to promote their ideas, share there excitement and unashamedly display the cool things they have made, this is a great thing and I’m not generalising without exception, there are many women who are able to overcome this and be proud of what they have done. Myself and many others I spoke with are less forthcoming with our enthusiasm and this may well be to our disadvantage.

Another great barrier to entry is a partner with similar interests in the field, naturally a common occurrence due to similar social circles and shared interests, it can happen many people overlook the female partner’s geeky credentials, unintentionally perhaps but noticeable none the less. From personal experience I can confirm this is true, I would never claim to be better than my other half – nowhere near – however a few people who meet me at geek events just think I come along for the ride, and not knowing I work as a web developer and just automatically talk down to me.

Although not being recognised for our abilities as women geeks, is partly our fault for not being outwardly proud enough of our achievements and accolades, the lack of women in technology is not helped by assumptions of others that we have none to be proud of.

Further Reading

• For those of you wishing to join the UbuntuWomen group there is a mailing list, and a place to sign up as a mentor to help a female budding Ubuntu Developer.
• The FAQ on how to encourage women in Linux, also applies generally too.
• Information on the Debian women group and women in open source software in general.
• VERY useful advice to men thinking of getting a geek girlfriend!
• London Girl Geek dinners – I keep meaning to go to, and will do eventually. The next one is on March 14th.
• http://www.linuxchix.org/ – need I say more?

This evening I have had some fun playing with performance, which incidentally seams to work fine now, there appeared to be a problem with the images stacking on top of each other with 'visibility: hidden' and a not-quite-opaque opacity. Using 'display: none' in addition seams to sort things out just fine. I also sorted out the weird forward / back problem pointed out by Richard by not letting the fade start unless it is not already running, unfortunately another global variable but unavoidable in this case I think.

The images now start at 1 not 0 because it made more sense when reading it, I also put in 'page x of x' at the bottom of the image and changed the document.title so that the back history remains understandable, quick fixes but quite a nice effect.

With regards to the image id's not matching the location.hash to avoid jumping, it really was quite a problem so I changed to my initial idea of 'position:absolute; top:0;' with the padding on the image to position it instead, though depending on how it will be used eventually the jump may be unavoidable. Oh well.

I still need to implement the funky image pre-loading trick as it hangs while you wait for the images to load, but other than that – and the hideous browser incompatibilities – I'm relatively happy with it. Tomorrow I show it to the people at work for real, if they don't like it that doesn't really matter as I have had a lot of fun making it!

Current working version:

• Demo (v7)
• CSS
• JavaScript
• CSS over-ride called by the JavaScript

UPDATE [4th Apr 06]: new demo (see comments for list of changes)

I opted for Jeremy’s second method; not waiting for the page to load, instead hiding the images and sorting things out later on. Since the slideshow already relied on importing the CSS with JavaScript I simply moved this outside of the function called onload.

To ensure nothing untoward happens with crazy partial loaded DOM editing I encased the addition of the CSS into a try / catch. On fail of inserting the link rel into the page, the function then simply just calls itself again.

So in the root of the JavaScript file:

...
function setCSS(css) {
try {
// append stylesheet to alter
document.getElementsByTagName("head")[0].appendChild(css);
} catch (e) {
setTimeout(function(){setCSS(css)}, 100);
}
}
// on load
addEvent(window, 'load', setupPage);
// create CSS element to set up the page
var css = document.createElement("link");
css.setAttribute("href","style3.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
// attempt to add the css and then keep trying till we do
setCSS(css);


The CSS then sets all the images except the first one (over-ridden in the JS) to have ‘visibility: hidden;’ and to be positioned absolute in the right place.

Other changes to this version include vague attempts to improve performance through clearing the setInterval() during the fade and resetting after, also through using ‘display: none’ as well as the visibility. This seamed to improve it slightly but nothing revolutionary, it always slows down after 7 or so images regardless of how long you leave between page load and moving to an image.

Image maps work right enough with the slideshow too now which is good, since this was part of the original specification. I also stopped the jumping due to the id’s of the image, I am not too pleased with the solution to this as it involves using a different hash fragment to the image id’s.

The jumping was due to the browser automatically moving to the top of the image with the id, using non-existent id’s stopped this problem but does sort of spoil the seamless effect. For example if i bookmark an image then turn off JavaScript that bookmark will no longer work. The only other solution I can think of to this issue is playing with z-indexes of the other page elements and having the image positioned absolute at the top of the page with padding down to the appropriate height.

This new version is available for your interest here:

• Demo (v4)
  
• CSS
• JavaScript
• CSS over-ride called by the JavaScript

I have only recently begun to appreciate the power and fun to be had hacking at javascript, I used to panic at the thought of it. This was until I joined Torchbox where I received not only the help and confidence boost I needed, but also the office has a copy of Stuart’s book ‘DHTML Utopia‘.

I have only gone through the first three or so chapters in detail but over the past six months I have learnt to love event listeners and writing JavaScript as a seamless behaviour layer. No more do I panic about getting tangled up in ‘onclick‘s and ‘JavaScript:‘ – things become easier and a lot more fun when you can abstract the JavaScript from the page entirely.

I have written one or two snippets that I am quite pleased with, and although I have learnt to love writing JavaScript, I still hate debugging it. My most recent exploit has been into the realm of an accessible slideshow.

For work we wanted a way of showing images as a funky slideshow, the slideshow however needed to change the URL for each image and have the ability for the user to either manually alter the URL to go to an image, use the browser’s back button and bookmark an image. The user should choose when to move to another image so in the previously mentioned situations and when next or previous is clicked the images should fade into the next.

In true 2.0 style I have a ‘beta‘ version up and running, its not yet there but its a start. The next and previous links work and fade nicely, the back button really does work (even with the fade) as does the ability to change the URL manually. All images used are ones I have taken and are licensed under the creative commons.

The final version will:

• Fix all the bugs – so the style ‘issues’, (mainly in IE) there is a flash of the previous image in Safari and some nightmarish debugging is needed for the ‘Permission denied’ error I am getting in IE6! (You may have already guessed that I unashamedly developed this in FireFox.)
• Fix the performance problem – I really don’t know why this occurs but if you click through a number of images by the time you get to 6 or 7 the performance lag is very noticeable. Currently, I am changing the URL with fragment ID’s from the location.hash property and updating the location.href with the id of the current image. Listening to the URL is done through a function on setInterval() on 500ms that checks against one of the few global variables if the location.hash has changed. I’m thinking of changing this to use setTimeout() instead so I can stop it during the fade and start up again straight after, this might work.
• Have ‘further information’ links – per image that then changes (not necessarily fades) as the images do
• Use image maps - As this was the original intention of the slideshow, to work with images that are image maps, I am really hoping that this is going to be a nice easy stage; I have yet to try setting the opacity on image maps.
• Stress test it! - The fun part, its the fixing afterward that might not be quite such a laugh.

Some inspiration for the slideshow came from Matthew Westcott who developed the cool main image fade on http://breakthrough.org.uk/ and from the Image Cross Fader Redux.

Feel free to view my efforts:

• Demo
• CSS
• JavaScript
• CSS over-ride called by the JavaScript