Design a Web Page in Under 5k

jhines sent us a nifty bit over at Wired about a Web design contest.. . the catch is the 5k maximum. The prize? 5120 cents ;) I won't enter: the best I could do was Slashdot's Light Mode.

You shouldn't be using font tags anyway...

CSS allows you to specify all of the font styles for the elements of the document in ONE place. Want your H1s to be in "BastardWeird"?

<STYLE TYPE="text/css">

<!--
H1 { font-family: BastardWeird; }
// -->
</STYLE>

... this once, at the top of the file (the HTML comments are optional -- just there to prevent the CSS code from showing up in non-CSS browsers), instead of having:

<FONT FACE="BastardWeird">...&lt/FONT>

... around every single H1 in the document. That's a savings of about 39 bytes PER H1, after an initial cost of about 70 bytes. Maybe H1 is a bad example (it doesn't get used more than once or twice in a document usually), but this extends to other tags too, and not just to fonts. CSS also replaces FONT COLOR and a lot of other things that before needed to be coded multiple times into the same HTML document.

This is an even bigger win when you use a single, central css file (referenced via LINK REL=stylesheet), rather than coding CSS into every document. Maintainence also magically becomes easier. Want to change your whole site's look? Edit one file.

Use scripts

Couldn't you just use a small bit of JavaScript to pull the whole page from somewhere else?

Alternatively, you could use PerlScript [activestate.com] and write the whole page in obfuscated Perl.

Now all we need is a web browser in under 5Kbyte.

I had 120 digits of code on one 80 column card

Friend and I had a contest on an IBM 1620 Mod I, who could get the fanciest program on one card. I overlapped instructions and data. 120 or so digits (decimal machine), self loading of course. It typed "THIMK" over and over again. The M was because that was the halt instuction; N was useless. One sense switch made it go faster, one made it stop.

--

Re:Small programs

One of the best tricks on the VIC-20 and C-64 (and I assume any other CBM BASIC machine) was that to save memory when typing in your programs you could use the Tokenized equivalents. eg. for GOTO you typed "G shift-O" which resulted in one of the keyboard graphics shapes, but when LISTed transformed into GOTO.
You could save memory and more importantly keystrokes doing this! G shift-O took 2 bytes where GOTO takes 4, etc.
I had a blackjack program in BASIC that was around 3.5K. if you tried to modify it using straight BASIC commands, you got "Out Of Memory" errors, but if you used the Tokenized shorthand, you could debug and change the code.
Pretty cool!

Pope

Cunning Plan

Heh, why not try to use one of the HTML compression tools which have a short javascript header which unpacks html on the fly? Problem is finding a small enough bit of "header JS", but it might be a cool way to get around the 5k limit while sticking to it.

Look at this freshmeat entry for AlgART HTML Picker [freshmeat.net] to see what I mean :)

Compressed HTML

Most HTML can be compressed pretty well by removing comments, unneeded meta tags, and spaces/new lines that have no contribution to the final page. This program [jitit.com] will automatically compress html files for you. When I ran it on /. I can sometimes get a 50% compresssion ratio (not including graphics).

Re:Tight coding contests in history

My favourite bite-sized (haha) challenge would have to be the "chip tune" competitions. The idea was simple - create a ".mod" (.s3m, .it, etc..) song under 4k, including samples, pattern lists, etc..
Perhaps even more amazing, from a technical standpoint, were the 4k "demo" competitions. Apparently, these are still reasonably popular. The idea here is to create a graphically pleasing demo in 4k or less (go asm!).
The 64k limit was (is) a popular barrier for graphical demos too, with an absolutly incredible amount of power crammed into each and every byte.
For fun, check out the following URLs:

The Hornet Archive [hornet.org] - While no longer "active", there are still a lot of resources available. Search for "64k" (while you still can!).
Future Crew's "Second Reality" [extremezone.com] - One of the definitive demos of all time.
Distance'99 [neutralzone.org] - a recent competition covering many types of demos. Both amiga and PC 4k and 64k bundles of joy are available. :)

.------------ - - -
| big bad mr. frosty
`------------ - - -

Content - formatting fluff = faster loading pages

I remember how people used to write really small, really fast assembly code because, quite frankly, the hardware didn't allow for you to be wasteful. Memory and processing power was a precious resource. Programmers tried to squeeze every last ounce of memory and processing power out of a computer. And we *liked* it, damn it! ;-)

Obviously, in the days of cheap memory, processing power, and Microsoft, bloatware is the norm instead of the exception.

I pretty much stay away from just about every advancement that has taken place in HTML and it's bretheren since the IMG tag and tables. The reason: I want the most number of people to be able to make use of my web pages. Just by leaving out a lot of the advanced features, you can reduce the web page to little more than the actual text. Okay, it's not "pretty," but it loads really fast even over a modem connection (actual text compresses on modem connections).

I may have "big" pages but that's because they are heavy on actual content and light on fluff.

-- PhoneBoy

I nominate...

The 'pre-announcement' (date 1/19/00) Transmeta site.

It attracted a HUGE amount of attention, and weighed in at what??? 100 bytes?

Just how big is "This page is not here yet." wrapped in the minimal obligatory HTML tags?

5120 Bytes?? Yikes

5k is not a lot of space to do anything useful in....for any amount of text, it usually comes out more than that.

But....it can be done. My home page weighs in at 3199 bytes, and that's with graphics! The only thing is, they propose that most web pages should be small, similar to this, but most useful pages that have more than two or three paragraphs on them will swell to 10 or 20k, and that's without using any kinds of graphics.

50k for a web page is great, and having alternate slimmed-down versions for new wireless and lo-bandwidth devices is a good thing, but not all web pages should be 10-20k. You'd never get any useful information(above all--you would NEVER get to read Slashdot--the lite page was 40+kb!).

But in any case, looks like a good thing to try, similar to the 4096kb democompos that I think they still have at the demo parties in Europe.

-Julius X

Re:Tight coding contests in history

If people want see tight code in action, I'd recommend a 4k PC intro called mesha [scene.org]. It really is excatly 4096 bytes, but is has something like two minutes of 3D graphics, textures and everything. I'm not a big follower of the demoscene, so there might be stuff that is better than this one, but this really blew me away when I saw it. It runs in DOS. The 10KB zip actually has two versions of the same program!

Flexing my brain

'Bout time somebody did this. Be warned -- I plan on winning --not because I'll get picked as the best entry, but because it will give my design skills a challenge.

So if I don't get the $50 bucks, why do I consider this a win? Well, once a person catches on to some of the better techniques, it's relatively easy to write complex, data driven sites -- you develop a good site plan, work with folks until all of the pieces have been agreed on, test the functionality, then make it pretty.

Of course, if you work develop high end web sites like I used to, we're talking about billing $100K+ to the client for the whole process, at a bare minimum.

But it's not pushing my skills much any more -- I can do roughly the same things in Perl, PHP, Python, TCL, SSJS, etc., the same things and a few more fun by throwing in Java and Javascript. Flash is cool, but not web-wide, so it's not gonna pay my rent for a while yet.

But proving that 5K is enough to do something useful/pretty, etc. -- that's a challenge. See ya there!!

easy winner

Give the prize to: 404 File Not Found The requested URL (foobar.htm) is not found. Possibly the most popular web page in the world

Re:Done

If you liked that, you ought to check out ApostropheColon [ubersoft.net].

Yet Another Slashdot Parody, but it's damn funny. You might not like it though; it does not contain grits.

Interestin

Sounds like the demo scene of years ago. With the availability of higher bandwidth connections web designers have often have forgotten about the people with the 14" monitors and the slower modems. I personally (due to a move) have stepped back from a cable modem to a 56k connection and the multimedia rich enviorment is a beast and a burden because of it. I have actually had to change my surfing habits. I hope to be out of the land of the 'bandwidth impaired' very soon though. The outcome of the contest should prove to be interestig

Validation a big problem here

Something that may get overlooked is that many of these pages won't come anywhere near validation. Who's going to waste precious space on DTD statements and alt=""? We shouldn't assume that small pages are valid simply because they probably don't use a ton of tags. We definately shouldn't convey that attitude to the children. Won't somebody please think about the children?

Show me a page under 5k that validates, and I'll be impressed. Of course, I won't make any outward indication that I'm impressed, probably a contemptious "but it's supposed to validate ANYWAY" snort, but that's the way I am.
--

Link to the actual contest

Here's a link to the actual contest rules and so forth.

http://www.sylloge.com/5k/ [sylloge.com]
---

Immediately disqualified..

.. is any article by one Jon Katz. :)

server side--no, client side--maybe

from their FAQ:

How about client-side processing? Can I use JavaScript? What if the page shows up as larger than 5k in the browser as a result of the scripting?

Client-side scripting, including the use of scripts which write out additional HTML (i.e., by using JavaScript's "document.write()" function) are permitted. The size component of the judging will be done by examining the files which sit on the server, not the browser's rendering of those files. The normal caveats apply however (see the next question); make sure you are confident about your scripts running in the judges' browsers. Also, please note that gratuituous exploitation of this provision may cause low marks by some judges in the concept & originality category.


The server side question is answered elsewhere in the FAQ--clearly not allowed. What's interesting is that client side scripting could be used to generate much more than 5k worth of HTML, as long as the original page on the server is less than 5k. Of course, you'll want to read the entire FAQ for any caveats.

FAQ available at http://www.sylloge.com/5k/faq.html [sylloge.com].

numb

Tight coding contests in history

Ah, this sort of thing takes me back.

I remember the days of Byte (when it was a real magazine), Compute!, et al. The magazines were full of code back then, pages and pages and pages of typing that you'd laboriously enter by hand, and then debug. A few of 'em had 1k programming contests monthly, which (along with typing in the loooong programs) really gave you an appreciation for style, efficiency, and elegance in coding. Atari Basic (this was on the 400/800 machines) also allowed you to enter more than one statement on a logical line (which was something like 107 or 112 characters), so they also had 'one liners' every month. They were usually cute little graphics demos, since easy graphics programming was Atari's forte'.

Now we're doing it in HTML instead of BASIC, and with a 5kB limit instead of 1kB. What goes around, comes around, eh?

Cool stuff.