Another 10k Apart: Create a Website in 10 KB, Win Prizes (opens in new tab)

(alistapart.com)

39 pointsreybango9y ago31 comments

31 comments

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

astazangasta9y ago

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

3princip9y ago

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

ewindisch9y ago

Reading through, it seems that JS is allowed, but the page needs to be functional without it. Ideally, the page would work with Lynx.

callumlocke9y ago

Looks like the 10KB can include a back end: https://a-k-apart.com/faq#stack

aarongustafson9y ago

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.

latch9y ago

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/

detaro9y ago

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

Ezhik9y ago

I wonder if minifiers are smart enough to do these things.

archgrove9y ago

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

Wait, we're talking about bytes?

eddieh9y ago

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

aarongustafson9y ago

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.

detaro9y ago

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

1 more reply

aarongustafson9y ago

Out of curiosity, which browser are you in? I get 87.9K for the homepage, including all dependencies, lazy loaded JS, the SVG hero, etc. Are you getting WebP images or PNG?

eddieh9y ago

Latest stable Safari on desktop (9.1.2). Getting jpegs actually.

dogma11389y ago

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

maxmcd9y ago

https://a-k-apart.com/faq#size

nekinie9y ago

No Golang support :(

1 more reply

reitoei9y ago

Cue massive traffic spikes on http://microjs.com/

thecosas9y ago

No Javascript :-(

aarongustafson9y ago

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

jonatron9y ago

Using tabs instead of spaces should help

aarongustafson9y ago

:-)

Although minification & GZip should even those out.

thecosas9y ago

This argument makes perfect sense to half of the people reading here :ob

meanJim9y ago

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.

fomq9y ago

You can use JavaScript, just not JavaScript libraries.

clarkmoody9y ago

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

1 more reply

j / k navigate · click thread line to collapse

31 comments

nathancahill9y ago

The winning site: http://web.archive.org/web/20000510060852/http://www.sylloge...

astazangasta9y ago

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

3princip9y ago

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

ewindisch9y ago

Reading through, it seems that JS is allowed, but the page needs to be functional without it. Ideally, the page would work with Lynx.

callumlocke9y ago

Looks like the 10KB can include a back end: https://a-k-apart.com/faq#stack

aarongustafson9y ago

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.

latch9y ago

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

detaro9y ago

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

Ezhik9y ago

I wonder if minifiers are smart enough to do these things.

archgrove9y ago

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

Wait, we're talking about bytes?

eddieh9y ago

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

aarongustafson9y ago

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.

detaro9y ago

1 more reply

aarongustafson9y ago

Out of curiosity, which browser are you in? I get 87.9K for the homepage, including all dependencies, lazy loaded JS, the SVG hero, etc. Are you getting WebP images or PNG?

eddieh9y ago

Latest stable Safari on desktop (9.1.2). Getting jpegs actually.

dogma11389y ago

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

maxmcd9y ago

https://a-k-apart.com/faq#size

nekinie9y ago

No Golang support :(

1 more reply

reitoei9y ago

Cue massive traffic spikes on http://microjs.com/

thecosas9y ago

No Javascript :-(

aarongustafson9y ago

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

jonatron9y ago

Using tabs instead of spaces should help

aarongustafson9y ago

:-)

Although minification & GZip should even those out.

thecosas9y ago

This argument makes perfect sense to half of the people reading here :ob

meanJim9y ago

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.

fomq9y ago

You can use JavaScript, just not JavaScript libraries.

clarkmoody9y ago

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

1 more reply

j / k navigate · click thread line to collapse