
Another 10k Apart: Create a Website in 10 KB, Win Prizes - reybango
http://alistapart.com/article/another-10k-apart
======
nathancahill
From the 5k challenge in 2000: "Indeed, the winning site offered a witty yet
powerful critique of the current state of the web via a fully functional
e-commerce shopping cart. In less than 5K. Bastards."

The winning site:
[http://web.archive.org/web/20000510060852/http://www.sylloge...](http://web.archive.org/web/20000510060852/http://www.sylloge.com/5k/entries/182/index.html)

~~~
astazangasta
Where "fully functional" means "just a dummy, can't actually manage payment or
shipping".

------
3princip
>Build a compelling web experience that can be delivered in 10KB and works
without JavaScript.

It's difficult to imagine what such an experience would contain, CSS animation
trickery?

I'm very pro minimal UI code, my last hobby project didn't include any
framework libraries and the front-end came in at 23kb including images, CSS,
HTML and JS.

But without a back-end, and without JS (no SPAs), is this just a contest to
build the best looking static page?

~~~
callumlocke
Looks like the 10KB can include a back end: [https://a-k-
apart.com/faq#stack](https://a-k-apart.com/faq#stack)

~~~
aarongustafson
You can use a back-end in Python, Node, PHP, or .NET Core. The size of your
back-end doesn’t factor in, just the markup, CSS & JS you deliver.

------
latch
I know a simple blog isn't the type of site this contest has in mind, but a
couple years back I tried to shrink my blog's homepage. I got some good
feedback and was happy with the result. Since I go long stretches of time
without doing frontend, I felt it was a worthwhile exercise.

This is what I learned from the experience: [http://openmymind.net/Minimalist-
Markup/](http://openmymind.net/Minimalist-Markup/)

~~~
detaro
Interesting link, but they don't seem to say anything about "what type of
site" they have in mind or would find impressive. A blog probably "wastes" to
much space with actual content though...

------
archgrove
Woah now, everyone knows making a site with less than 10,000 dependencies
isn't possible these days.

Wait, we're talking about bytes?

------
eddieh
Cool, but the contest page ([https://a-k-apart.com](https://a-k-apart.com)) is
204.5 K. Disappointed.

~~~
aarongustafson
Disable JS and view on a small screen :-) It progressively enhances to that
size. I’ll be writing about the process and design in forthcoming posts.

Smallest view (240px wide) with no JS renders in 6.9kB (DOMContentLoaded hit
at 94ms, Load at 119ms). Also in play: client-side caching with ServiceWorker
and some localStorage goodies to speed things up on modern browsers.

~~~
detaro
Honestly, >10k google analytics doesn't sound like "progressive enhancement"
from a user perspective, but I get why it's included. How would that be rated
in the actual challenge? (Maybe do and publish a mock "grading" of the
announcement page as an example, to make clearer how the rules work?)

~~~
aarongustafson
I plan to write up how the site was built and give some hints as to how you
can use lazy loading, etc. to your advantage.

------
dogma1138
Is the 10kb limit per page? Per site(including backend)? Per content served to
the user on a single page load?

~~~
maxmcd
[https://a-k-apart.com/faq#size](https://a-k-apart.com/faq#size)

------
nekinie
No Golang support :(

------
reitoei
Cue massive traffic spikes on [http://microjs.com/](http://microjs.com/)

~~~
thecosas
No Javascript :-(

~~~
aarongustafson
You can use JavaScript, but it needs to be an enhancement, not necessary for
the user to do what they need to do.

------
jonatron
Using tabs instead of spaces should help

~~~
aarongustafson
:-)

Although minification & GZip should even those out.

------
meanJim
I got really excited until I realized I couldn't use JavaScript. Over the last
year I got super passionate about making the smallest JavaScript bundle size
possible with RiotJS or Preact.

I guess they really mean the old school 'website' (like the html 1.0 strict
days), so maybe a html document with everything inline and no special fonts.

~~~
fomq
You can use JavaScript, just not JavaScript libraries.

~~~
clarkmoody
Not true. JS libraries simply count against your 10kB. In the past, they may
have been "free resources"

~~~
fomq
So what does this mean?: "In order to encourage folks to use native JavaScript
functionality and keep their project as slim as possible, this year we’ve
chosen to remove JavaScript libraries from the “free resource” camp."

~~~
detaro
You could previously include JS libraries and they didn't count against the
10k limit. now they do. EDIT: Somehow, since lazy-loading not strictly
required stuff apparently doesn't? ([https://a-k-
apart.com/faq#size](https://a-k-apart.com/faq#size))

~~~
aarongustafson
You can lazy load libraries for sure. I would still keep those to a minimum,
including only what you need. For instance, don’t load all of jQuery if you
only need one feature. And use native JavaScript code when you can get away
with it—dataset instead of data(), querySelectorAll() instead of $(), etc.

