For Women In Software

I think from this day forward I’m going to take February 12th as a day to reflect on the history of women in computer science and software development. This is on account of the coincidence that a dear friend (and classmate from Concordia) of mine shares today as her birthday with Kathleen Antonelli. ‘Kay’ Antonelli was one of the first programmers of ENIAC… which was the first electronic computer so I assume that means she’s one of the first programmers in general.

As a matter of fact, the first programmers of the ENIAC were all women.

Honestly, between those first 6 ENIAC programmers and Ada Lovelace – credited as being the first programmer – I often wonder how (and when) software became a guy thing.

Software is A Guy Thing starring Jason Lee and Julia Stiles and Selma Blair
Serisously; how did this happen?

I think I’ll pass some time today looking at Wikipedia’s page on Women in Computing, going over all the amazing contributions made to software development by woman which are kind of a big deal. Among them, the first compiler – created by Mary Allen Wilkes, whose name I’ve never even heard before.

There’s no such thing as bad hyperlinks

So today I found out Superhero of the Month has been the victim of Internet Plagiarism, as announced in the SHotM post Plagiarism isn’t cool.

Superhero of the Month is one of my favorite web sites, and not just because the SHotM staff are kind enough to feature my sub-par artwork.

This is not an uncommon occurrence nowadays – uncredited stealing of material on the World Wide Web – but I find that so often the victims always make the same mistake. They link back to the plagiarizer, and people seldom realize that that is a pretty silly thing to do.

Hyperlinks are the blood of a web site. If there are no links to a web site, that web site might as well not exist. Links bring a web site traffic, customers and search engine ranking. In this way, hyperlinks have a huge influence on which web sites are successful on the Web. They’re practically like the Spice Melange of the World Wide Web; he who controls them controls the Universe. When someone links to your site, there are pretty much no disadvantages.

…unless you suffer the SlashDot Effect.

All that to say that when you link to a web site, you’re doing them a favor. It doesn’t matter if you linked to them in a blog post about how much you hate plagiarizers; all that matters is you linked to them at all. Maybe you know the old saying "there’s no such thing as bad publicity" – well on the Web, there’s not such thing as bad hyperlinks.

Which is why when someone steals your content, it’s important you don’t write something like…

Click here to see who stole my work!

… because you’re only doing them a favor. Instead just offer a plain-text URL, but not a clickable hyperlink.

Visit http://plagiarize.example.com/leguen.ca/ to see who stole my work!

Linking to the web site makes it easier for new customers to find them. It encourages your readers and consumers to visit there, probably bringing ad revenue and potentially exposing them to malware. It raises the offending web site’s Google Page Rank. The victim of this kind of theft should not offer these kinds of benefits to the offending web site.

This is part of why I think websites like You Thought We Wouldn’t Notice are kind of stupid, since it’s free advertising for thiefs.

On top of the "free advertising" side of things, Web sites involved in Internet Plagiarism are more than likely already involved in some black hat search engine optimization. That means they’re already cheating their way into better-than-normal search engine rankings. If – on top of whatever sneaky tricks they’re already pulling – popular web sites like You Thought We Wouldn’t Notice start linking to them, their page ranks go through the roof, and that’s how a plagiarizer’s content can end up scoring higher in search results than the original.

Don’t think scrapper/plagiarizer sites can out-rank the original material? That was a big problem being faced by StackOverflow in the early 2011s.

So don’t link to plagiarizers. Any end users who would have followed that link and left a mean comment are smart enough to follow a plain text URL. There’s a world of benefits you’re handing to a web site when you link to it; never offer those benefits to thieves.

What Makes a Big Name in Software?

Mark Zuckerberg’s been in the news a lot lately for a variety of reasons:

  • killing the animals he eats
  • talking at a G8 summit
  • insisting that Facebook is a great tool for education
  • being Time Magazine’s Person of the Year for 2010

Personally, I’m disinclined to think that his is an opinion which should be listened to on economic matters at a G8 summit. I would probably even be disinclined to listen to the man’s opinions on technology and software development.

And yet he’s a big name in software. Ask a random stranger off the street for the name of an important person in computers and software, you’ll probably hear his name. Maybe Bill Gates or Steve Jobs.

I don’t think these people should be the face of software development in the eyes of the public, though. Really, these people are far from great computer scientists (if they can be called scientists) and far from being great engineers who shaped the field; rather these are all great entrepreneurs who shaped the industry.

I think all the admiration and credit Mark Zuckerberg gets for networking millions of people together should be given to Tim Burners-Lee, who invented the World Wide Web and never got to be Time Magazine Person of the Year.

While Steve Jobs was pivotal to the personal computer revolution, I also think a fair chunk of the technological cred given to Steve Jobs should go instead to Steve Wozniak.

I don’t know who should get more credit for Gates’ work than Gates, but business decisions such as marketing to programmers (so they’d develop 3rd party apps for Windows) and buying QDOS from IBM made Microsoft a success; not technological innovation.

Edit: re-reading this… I get the impression that maybe I’m a tad confused over the history of QDOS, Microsoft, MS DOS and IBM…

When you boil down to it, Zukerberg, Jobs and Gates are entrepreneurs and business men before they are either scientists or software engineers.

Ask people to name physicists and you’ll hear the names of great physicists like Einstein, Curie and Feynman. Ask people to name biologists, and you’re bound to hear Darwin or Dawkins. Ask for chemists and you’ll hear names like… uh… ok, I don’t any chemists off the top of my head. Maybe that guy who dreamed about the benzene ring… whatever his name was.

Ask for computer scientists, and you will hear the names of business men like Zuckerberg, Jobs and Gates. You will hear no names like Dijkstra, no Berners-Lee, no Zuse, no John McCarthy… not even Shanon, who is often credited with writing the most important thesis of all times. Of all times – not just in the field of computers.

I think this is a bad thing. Somehow the fields of computer science and software engineering have become indistinguishable from the technology industry, and not only in the eyes of the average joe; ask students of Software Engineering or Computer Science the same question and you’ll probably get the same answers. These students work with Java but don’t care to know the name James Gosling; they write Perl but have never heard of Larry Wall (or his web site, which I credit as the ugliest in the world). They write PHP but can’t identify Rasmus Lerdorf… and I could continue like this.

Maybe it would do us well to have a Software History Month…

How Is XKCD In 3D?

So today is April Fool’s day and all the xkcd comics are now in 3D!

XK3D for N64
It’s like xkcd64 or something.

When I first visited xkcd this morning, I was immediately temped to use the F word – Flash. A little right-clicking though revealed that this was not the case, which led me to the the golden question of the day – how?

What xkcd did today is an incredible demonstration of how a little knowledge of CSS can go a long, long way.

The comics are actually several PNG files layered on top of each other using absolute positioning:

<div id="comic">
	<!-- style attributes omitted -->
	<img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_bike.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_girl.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_mask.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_desk_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_guy.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
	<img src="http://imgs.xkcd.com/xk3d/880/headache_text.png" >
</div>

If you want to see all those images individually, see the bottom of this post.

In the HTML for xkcd you can find a <style> element which is applying relative positioning to #comic:

<style>
	#comic { position:relative; display:inline-block; margin:10px; }
</style>

… since #comic is using relative positioning, as opposed to the default static positioning, any absolutely positioned elements inside <div id="comic"> are positioned with respect to <div id="comic">. By manipulating all the images/layers individually it creates a 3D-looking effect.

Try This at Home

If you want to skip the trying part and just see the result, I posted it online.

For kicks, try this: take the following 2 images…

A square box with transparency in the middle
and
Corner dots and more transparency

… and put ‘em together in an HTML document like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>How Is xkcd In 3D?</title>
	<style type="text/css">
		#comic {
			position:relative;
			top:0px;
			left:0px;
			margin:auto;
			height:183px;
			width:202px;
		}
		#comic img {
			position:absolute;
			top:0px;
			left:0px;
		}
	</style>
</head>
<body>
	<h1>How Is xkcd In 3D?</h1>
	<div id="comic">
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image" />
	</div>
</body>
</html>

Each of these layers is supposed to appear further away than the last, so use some style attributes along with the CSS width property to make them appear smaller: (see one point perspective on wikipedia)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>How Is xkcd In 3D?</title>
	<style type="text/css">
		#comic {
			position:relative;
			top:0px;
			left:0px;
			margin:auto;
			height:183px;
			width:202px;
		}
		#comic img {
			position:absolute;
			top:0px;
			left:0px;
		}
	</style>
</head>
<body>
	<h1>How Is xkcd In 3D?</h1>
	<div id="comic">
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image"
			style="width:200px"/>
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:195px" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:190px" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:185px" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:180px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:175px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:170px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:165px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:160px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image"
			style="width:155px;" />
	</div>
</body>
</html>

… and then also offset the position of each image using the top an left CSS properties:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>How Is xkcd In 3D?</title>
	<style type="text/css">
		#comic {
			position:relative;
			top:0px;
			left:0px;
			margin:auto;
			height:183px;
			width:202px;
		}
		#comic img {
			position:absolute;
			top:0px;
			left:0px;
		}
	</style>
</head>
<body>
	<h1>How Is xkcd In 3D?</h1>
	<div id="comic">
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image"
			style="width:200px;top:0px;left:0px;"/>
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:195px;top:2px;left:2px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:190px;top:5px;left:5px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:185px;top:8px;left:8px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:180px;top:10px;left:10px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:175px;top:12px;left:12px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:170px;top:15px;left:15px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:165px;top:18px;left:18px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:160px;top:20px;left:20px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image"
			style="width:155px;top:22px;left:22px;" />
	</div>
</body>
</html>

The result should be similar to 1 point perspective:

One point perspective

Now, add some JavaScript: use jQuery’s mousemove function to track the movement of the mouse:

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('body').mousemove(function(event) {
				var msg = 'How Is xkcd In 3D? (' + event.pageX + ', ' + event.pageY + ')';
				$('h1').html(msg);
			});
		});
	</script>

Generally speaking, the images which are "further" need to be offset more as the mouse is moved further from the center of the box. The following uses a fairly simply equation to achieve that effect:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>How Is xkcd In 3D?</title>
	<style type="text/css">
		html, body {
			height:100%;
		}
		#comic {
			position:relative;
			top:0px;
			left:0px;
			margin:auto;
			height:183px;
			width:202px;
		}
		#comic img {
			position:absolute;
			top:0px;
			left:0px;
		}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('body').mousemove(function(event) {
				var x = event.pageX;
				var y = event.pageY;
				var msg = 'How Is xkcd In 3D? (' + x + ', ' + y + ')';
				$('h1').html(msg);
				var i=0;
				$("#comic img").each(function() {
					$(this).css("top", ((0-y)*i)/100+"px");
					$(this).css("left", ((0-x)*i)/100+"px");
					i++;
				});
			});
		});
	</script>
</head>
<body>
	<h1>How Is xkcd In 3D?</h1>
	<div id="comic">
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image"
			style="width:200px;top:0px;left:0px;"/>
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:195px;top:2px;left:2px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:190px;top:5px;left:5px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:185px;top:8px;left:8px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:180px;top:10px;left:10px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:175px;top:12px;left:12px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:170px;top:15px;left:15px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:165px;top:18px;left:18px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/corners.png" alt="A layer in my 3D image"
			style="width:160px;top:20px;left:20px;" />
		<img src="http://richard.jp.leguen.ca/images/howIsXkcd3d/box.png" alt="A layer in my 3D image"
			style="width:155px;top:22px;left:22px;" />
	</div>
</body>
</html>

Give it a try! Mind you, xkcd is using some significantly more interesting math (parallaxes and stuff like that…I don’t know anything about paralaxes which doesn’t involve the destruction of Coast City…)

All The Images From xkcd880:

For those interested, here are the layers from today’s comic (01/04/2011) which has 25 layers – some of them are the same image repeated, and some of them are re-sized using CSS: (all these images are from xkcd.com)

A layer from the 3D comic
These ‘box’ around the web comic.
A layer from the 3D comic
The handle to the girl’s (Megan?) bike
A layer from the 3D comic
The corners: these ‘corners’ are repeated, just like in the above example I wrote.
A layer from the 3D comic
The girl’s (Megan?) bicycle.
A layer from the 3D comic
The girl’s (Megan?) herself.
A layer from the 3D comic
The desk
A layer from the 3D comic
I have no idea what this one is for… it’s empty.
A layer from the 3D comic
The guy’s (Cueball?) computer.
A layer from the 3D comic
The desk corners, which move independant of the desk
A layer from the 3D comic
The guy (Cueball?) himself
A layer from the 3D comic
The webcomic text