1x1 GIF
by Pawel Szymczykowski / @makenai
for DHTMLConf 2000
Hi, and thanks for coming to DHTMLConf. First off, I want to do quick audience poll. How many of you want me to say GIF? uh huh. And how many for JIFF? ok. Anyone for other - something else? OK, so ___ it is. I'll try to remember to pronounce it that way.
So, my name is Pawel Szymczykowski, @makenai on twitter.
Vegas JS {}+
I'm here repping VegasJS {}, our Las Vegas JavaScript users group. It's a great group, so please drop by if you're ever passing through town.
I'm also here on behalf of Zappos.com, where I develop back end API's in Java for our mobile apps. When I get back home I'll be sure to tell them how much I enjoyed Java Fest.
I'm here along with Dave Stevens who spoke yesterday on Hapi versioning and Dan Harden who will talk after me.
I hobby around a lot on JavaScript and robotics for education, and it's become my go-to language for most things I write for fun.
I'm not going to make any presumptions that you all do web design, and especially not that you did web design a long time ago when the 1x1 gif trick was popular. Today, we can lay things out very nicely with CSS. You can control how every element on the page is presented - as a block, inline and a host of others. You can also specify the margins, padding and even x/y position of nearly anything very cleanly.
This trick comes from a time before all that was possible, when the only choice for the flow of your web page was down and to the right.
The trick in the 1x1 gif trick was to take a 1 pixel transparent image, and stretch it out so that it would take up enough space to push your content over to achieve the position that you wanted.
<TD WIDTH="325">
<!-- sites -->
<IMG VSPACE="18" SRC="../resources/dot_clear.gif"> <BR>
<!-- adjust the vertical -->
<IMG VSPACE="2" HSPACE="40" SRC="../resources/dot_clear.gif">
<A HREF="/web/20060403150232/http://www.igc.apc.org/womensnet/">WomensNet</A><BR>
<IMG VSPACE="8" HSPACE="32" SRC="../resources/dot_clear.gif">
<A HREF="/web/20060403150232/http://www.voiceofwomen.com/">Voice of Women</A><BR>
...
The code looked a little like this. It worked pretty well, except for the fact that your code was then littered with a bunch of images you couldn't see. It made it hard to navigate and wreaked havoc on screen readers.
It also violated a concept called the 'semantic web' - a term coined by Tim Berners Lee that prioritizes content over presentation to make it easier to use data on the web. An invisible or decorative image has no semantic value.
Does anyone know who this man is?
His name is Dave Siegel. Or is it Seejel? If people like Tim Berners Lee and Jeffrey Zeldman are the patron saints of semantic web and good design using web standards, Dave is like the Satanic priest wearing furry goat leggings, hopping around and poking impressionable developers with smouldering sticks.
He wrote this book back in 1996, it's called Designing Killer Websites. He's also the inventor os the 1x1 gif trick. It wasn't just "this one weird trick", the table of contents of this book is simply brimming with similar tricks, hacks and workarounds of a similar nature. Table based layouts, frames and a whole lot of nope.
"If you want machines to read your web pages, use things like definition lists, unordered lists, headers, etc. If you want people to read them, don’t do it. They take away your typographic control. Specify your own font sizes when you want a size change. If you must use bullets, make your own bullets (I don’t see much point in bullets if your vertical grouping is good). And try not to number your list items. It is hardly ever necessary."
— Dave Siegel
He had an interesting way of looking at things, and often said things that would make Tim Berners Lee cry. You can't really blame him too much. It was a different era, and he came at the problem from the point of view of a print designer. He was a little bit of a control freak, and didn't try very hard to find a middle ground between style and structure. He might have been one of the first people to try to address web DESIGN instead of just web DEVELOPMENT. He just wanted his web sites to look good and didn't apologize for anything.
<IMG SRC="images/dot_clear.gif" WIDTH="48" HEIGHT="2"> Now is the time for all good men to come to the aid of their country.
I'm going to take you a few of the things you could do with single pixel gifs. These are all things that can be done very easily today, but weren't possible then without resorting to trickery. I was a pretty bad web designer back then, and I've done all of these. I even hosted a website called 1x1gif.net for hosting transparent single pixel gifs because I used them so often. I'm still a pretty bad web developer today, but now I use CSS.
You could use a long thin GIF to indent the first line of a paragraph. You'd have insert this in front of every paragraph. Now, you can do a text-indent in a CSS file.
I wish you wouldI wish you would<IMG SRC="images/dot_black.gif" WIDTH="48" HEIGHT="2" VALIGN="ABSMIDDLE"> oh, nevermind.
em dashes - vertically center your long gif and make it black, and you have an em-dash. Esthetically nice, but wrong, and huge pain when copying and pasting. There are now html entities pointing to the proper unicode code points with the correct semantic meaning for this.
Who needsWho needs<IMG SRC="images/dot_clear.gif" VALIGN="ABSMIDDLE" HEIGHT="60" WIDTH="2"> <BR>
css line<IMG SRC="images/dot_clear.gif" VALIGN="ABSMIDDLE" HEIGHT="60" WIDTH="2"> <BR>
spacing?<IMG SRC="images/dot_clear.gif" VALIGN="ABSMIDDLE" HEIGHT="60" WIDTH="2"> <BR>
If you make your invisible gif tall instead of long, you can control line spacing. At this time, the most you could do was double space, so yearning for this level of control is understandable. It also horrible, because you need to insert at least one gif per line and it makes your code a mess. We have a css line spacing property now.
<IMG HSPACE="13" SRC="../resources/dot_clear.gif">
<IMG WIDTH="8" HEIGHT="8" SRC="../resources/dot_purple.gif">
<IMG HSPACE="13" SRC="../resources/dot_clear.gif">
<IMG WIDTH="8" HEIGHT="8" SRC="../resources/dot_purple.gif">
This one just makes me say WHY. There is no good reason to do this. Dave is using a combination of purple and clear gifs to construct an ornate horizontal rule. The amount of space taken by the markup is probably larger than if there was an image. We had the technology for this.
__utm.gif
As an aside - one other really common usage for these transparent gifs is what you call web bugs or creepy pixels. Third party sites have you link them from your website so that your visitors browser load them and they can be tracked. You might be familiar with this one - it's used by Google analytics. Now, the requests of this image are in the - a really large number I don't know the name of-s per day, so you might assume they want to keep it effecient, and you'd be right. The pixel they send is 35 bytes.
Header: 6 bytes ("GIF89A")
Logical Screen Descriptor: 7 bytes
Global Color Table: 6 bytes
Graphic Control Extension: 8 bytes
Image Descriptor: 10 bytes
Image Data: 5 bytes
GIF Trailer: 1 byte (";")
= 35 bytes
http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
A few years ago, a developer over at probably programming (the name is not mentioned) did started investigating the smallest possible gif she or he could make. It turns out that these are the component parts of the gif and the one that google sends is a 1x1 pixel with a whte background. I can't be sure, but I like to think that somewhere there did the research and decided it was worth it losing transparency to send 2 bytes less.
<TABLE>
<TR>
<TD><IMG SRC="images/corner.gif"> </td>
<TD><IMG SRC="images/dot_clear.gif"> </TD>
</TR>
<TR>
<TD><img src="images/dot_clear.gif"> </TD>
<TD>Content Here</TD>
</TR>
Let's take a look at one more bad hack.. rounded corners. My favorite way of doing this was to create a GIF with a white background and a transparent foreground - and you can stick it into a table and change the background color of the table. It's not literally the worse, but it's not elegant.
But then things like Scriptaculous same out and all of a sudden you could keep your markup relatively clean while an inocculous looking javascript makes it pretty for you. Cool, right?
But it does it by stacking up a bunch of single pixel divs. Yuck. I think this might be even a little bit worse. It seems like we went through a phase of 'images are evil and anything is better' but it was just kind of a step in a different but equally wrong direction.
If any of this has any kind of point, I want it to be this: if you don't build things in a way that lets people do what they want. They're going to work around it. If their workaround is convenient enough, other people are going to do it. If enough people do, it maybe it will catch on or someone will write a book about it and it will haunt us for a long time. Maybe it will hurt the internet or javascript.
I'm not even sure it's a bad thing. Each of those hacks I showed you has a nice solution today. If it wasn't for the doing all of the wrong things, we probably wouldn't have found nice ways of doing them. It's kind of a chicken and egg problem - if ES6 was around a few years ago, would coffeescript event be a thing? And if coffeescript hadn't been invented, would the ES6 spec even look the way it does today?
I don't know.
I'm not going to say don't create hacks - that's a time honored and proud tradition in computers. Go ahead and do it! But I would like us to be thoughtful when we're implementing that hack. Also think about how you'd solve that problem in an ideal world. Then maybe we can spend less time doing the wrong thing.
#extendthewebforward
https://extensiblewebmanifesto.org/
But I don't write rendering engines or javascript runtimes! You might say. but you don't have to. The people who do write those things work on a set of standards - and those standards are written and tweaked by people like you.
Please go read the extensible web manifesto, spend some time reading draft specs, maybe just some discussion lists. You might even like it.
Your experience and thoughtfulness today, can help make the future less painful.
end of transmission.
DHTMLConf 2000 continues.
Now is the time for all good men to come to the aid of their country.
oh, nevermind.
