990 Bytes

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. Despite this, some of the submissions manage to be quite interesting, with complex animated backgrounds or interactive features.

So 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 novel features.

The Content

The actual HTML itself is only 760B, but there is a FAT HTTP header in addition to the page itself 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.

The minified version is neigh unreadable.

<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>

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>

It was fun to do this kind of problem solving, since it is really an entirely different set of skills than just making a nice page.

CSS Is flexible

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

• Reference elements by their ID (those IDs are 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 from the last style in each selection

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>
• Remove trailing tag endings and still keep formatting correct
• Not bother with quotes around strings in tag fields
• Use a broken data:image as a placeholder to prevent favicon fetching

And 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 tried over the iterations, but I ended up only needing a few:

• Ridiculous aliasing of variables
• Referencing HTML IDs directly as predefined variables
• Abuse of for syntax to save one semicolon
• if else as chained ternary statements

I have a few ways to reduce it further in mind, but I don't want to change the functionality of the site in doing so. There are already two critical bugs I don't have the ability to fix, both stemming from having to cut down bounds checking as much as possible.