Andy Baio nicely described what /r/Place (a subreddit on Reddit) is:
On April Fool’s Day, when the rest of the internet devolves into a cesspool of unfunny press releases and fake product launches, Reddit becomes the most interesting place online by unleashing a social experiment on its enormous community.
This year, it was Reddit Place, a collaborative canvas of one million pixels. You can color any pixel, but only one pixel every 5-10 minutes. It ended 72 hours later.
This is what happened.
Over here on CodePen, Steve Gardner took a crack at replicating the idea right in a Pen!
The whole point of this is that it changes over time, but I’m seeing some fun stuff happening already:
While perhaps CodePen has a slightly smaller community than Reddit 😉, we still have our own /r/Place!
What I find interesting (of course) is the tech! It’s a giant realtime
<canvas> with a data store. Data?! CodePen doesn’t exactly offer a database. Perhaps someday! That would be awesome, but for now, we don’t have any back-end persistent storage we offer directly. The best you could do would be to use client-side storage like
indexDB, but that’s just for one machine, not everybody at once.
Fortunately, there are tools to help do this kind of thing. I wrote about Airtable one time, that is great for storing data and has great API’s for this kind of thing. Then there is Firebase, which has Realtime Databases and also Auth so that you can manage who has access to what.
Steve chose Firebase, which seems pretty smart here. It might look at a little weird to “expose” your API keys and other config, but that’s just how it works. It’s configured such that the data is anonymously readable, requires Twitter auth to write, and Steve himself has full control.
It’s kind of amazing what is possible when you start thinking about authenticated data read and write entirely from the front end. A blog? Sure. Firebase even has writeable file storage, analytics, and all kinds of more stuff that enable building really complete web apps without needing a server of your own. There is even Cloud Functions in case you do need some kind of server side processing, but still accessible entirely client side.