990 Bytes

An exercise in restraint

2026-08-30 - theokrueger

I stumbled across the rather interesting 1kB Club this morning, an aggregate of web-pages each less than 1 kilobyte (including HTTP headers).

It's curious, since there's not a lot of room to work with given the standard boilerplate of an HTML page. Yet some of the submissions are quite interesting, with complex animated backgrounds or interactive features.

I decided to make my own for fun. It's simple, but you can find it here! The 'stand-out' feature is the DVD bouncer. Sort of lame, but I didn't want to sacrifice the utility of the page in pursuit of a tiny page.

The Content

The actual HTML itself is only 760B, but there is a FAT http header on top of that due to my hosting being through GitLab pages. I didn't feel like migrating providers just for this novelty, so my budget was significantly smaller than just 1kB.

Here's a readable version with only spaces and newlines added:

<link href=data:image; rel=icon>
<body id=b>
<style>
  * {
    font-family:mono;
	color:#abc;
	text-decoration:none
  }
  :hover {
    color:#def
  }
  h1 > a {
    color:#faf
  }
  #b {
    margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	background:#123
  }
  #a {
    position:fixed
  }
</style>
<a href=http://1kb.club id=a>&lt;1kB</a>
<h1>
  <a href=mailto:me@theokrueger.dev>theokrueger</a>
</h1>
<ul>
  <li><a href=/posts>blog</a><li>
  <a href=/micro>thoughts</a><li>
  <a href=http://github.com/theokrueger>git
<script type=module>
  for(
    let M=Math,
      P=M.PI,
	  s=a.style,
	  x=0,
	  y=0,
	  h=P/4*M.random()+P*5/8,
	  X=M.sin(h),
	  Y=M.cos(h)
    ;;
	x+=X,y+=Y) {
	  let n=b.clientWidth,
	    m=b.clientHeight,
		t=a.getBoundingClientRect();
	  x > n-t.width || x < 0 ? X=-X : y > m-t.height || y < 0 ? Y=-Y : 0;
	  s.top=y+'px';
	  s.left=x+'px';
	  await{then:r=>setTimeout(r,9)};
    }
</script>

CSS Is flexible

There are a few clever tricks save a few chars in our stylesheets:

  • Reference elements by their ID (needed for JS functionality)
  • Use * for everything else, not caring that it's slow
  • The obvious removal of spaces and newlines everywhere we can
  • Remove semicolons

HTML fails silently

Browsers are really good at doing their best to render malformed content. It's kind of dumb in many cases, but very useful for our purposes since we can:

  • Omit boilerplate like <!DOCTYPE html>, and even <html>, <head>, <body>
  • We can remove many tag endings and still keep formatting good
  • Not bother with quotes around strings in tag fields
  • Use a broken data:image as a placeholder to prevent favicon fetching

All of our intentional mistakes do not show to end users at all! It saved quite a few characters

JS Golfing is ridiculous

Javascript is probably the best language to golf in; silly languages are befitting of silly activities.

There are countless little tricks I used over the iterations, but I ended up only needing a few:

  • Ridiculous aliasing
  • Referencing HTML IDs directly as predefined variables
  • Abuse of for loop syntax to save one semicolon by moving and increment and declaration code there, even if not related to the loop control flow
  • Ternary operations as chained if else (unreadable)

I have a few ways to reduce it further in mind, but I don't want to change the functionality.