3 websites, 30 hours and 30kb

I decided to join the A-K-Apart competition. I will explain my planning, both for myself and as a reference to anyone who might find it valuable.

I love programming and making usable and beautiful websites, but I find that increasingly the web is more and more bloated. While I was a student in Spain with my crappy 3G, it would take ages to load any website so I’d learn to love fast websites and SVGs.

I also have a big backlog of projects I’d like doing, some of them could fit into 10kb. So as per the competition rules “We permit 3 entries per person” that’d be 30kb. Two of them are not too far apart and I want to learn how to optimize my time better, so I’ll try to finish them all in 30 hours.

Time Distribution

After this is over I will check this planning against inconsistencies and missed deadlines. This is the 30h distribution that I will try to do during the first week of Hacker Paradise:

1. [2h] Planning + Setup
2. [4h] Medium — before; this article
3. [4h] Header structures 2h + Initial text and content structure
4. [2h] Draft of YCity content
5. [4h] Final copy of SF
6. [6h] SVG Project setup + Images
7. [4h] Build pipeline and final copy for YCity
8. [4h] Post mortem in Medium

ycombinator.city

Before I was a programmer I knew I wanted to be an Engineer; I could see so many things that were simply broken or could be much better but didn’t have the capacity to do anything.

I spent countless nights thinking on my head ways to optimize trains, to improve buildings and to create new infrastructure.

Then the people at YCombinator launched New Cities, but my life plans weren’t compatible back then so I didn’t apply. I hope that if I make this good enough there’s a non-trivial chance that they or anyone that has the capability to do something about it takes something away from it.

So I will be introducing many of the ideas in here in a readable and clear format, including images in SVG. Then after the contest I will try to give back the domain to them (or hopefully help them re-launch it with their desired format).

san.francisco.io

My website is http://francisco.io/ , and it was suggested to me once that http://san.francisco.io/ would be a really cool page. While I can think of many ways of monetizing it, I prefer to give it back to the city’s community.

So my entry for the contest will be a simple city presentation:

• A hero header with a svg cartoon-ish Golden Gate.
• Some basic information about the city in a feature-style-layout in two part sections.
• Information about how I plan to give the domain back to the community, not actionable yet (at least until the end of the contest).

The main challenge for me will be doing a svg header image that looks great, since so far I’ve only followed what I think was within my reach (even if not simple) and this time I want to outperform my previous attempts.

The second challenge will be putting many images within the 10kb limit; however using simple SVG optimizers I don’t think this will be a such a big feat.

SVG Gallery

This last project is a pure technical challenge for me. I want to manipulate svg through CSS (and maybe a bit of JS to make my life not so difficult) to make the largest possible array of images that fit within 10kb. I will use this as base:

Then change all of the elements dynamically. You can see a really-early prototype here.