Inside Flipboard The App

Just for fun, I am working on an html5 version of Flipboard. Not that I am recreating the entire app, but it’s a great way of geeking around with CSS and javascript to mimic its page flip using webkit transforms.

When it’s done I’ll post a full writeup here, but for now enjoy a sneak preview which doesn’t yet run on tablets (I think the final result will run on the iPad, Galaxy Tab, Kindle Fire, etc). In fact I’m pretty sure it only runs in Chrome right now ;)  

dl.dropbox.com/u/3397654/flipboard/index.html

Hosted as a public dropbox page for now, it’s slow too. But it’s just a preview.

But here’s what I wanted to talk about: the cover images. It’s what you see when you start Flipboard for the first time. I got them by downloading Flipboard through iTunes and unzipping the .ipa file. And in it, I found a lot of great stuff that I thought I’d share (and asked permission for).

Not only are the beautiful cover images there in high-resolution, but also these so called “nano-first-time” images:

Or what about this image dubbed “flipboard-ios-team.gif”?

Then, there are a lot of json files that expose their CDN which turns out is located at

cdn.flipboard.com

The json files are labeled

1. config.json
2. default-covers.json
3. defaultSections.json
4. firstLaunchSections.json
5. layouts.json
6. popularSearches.json
7. sections.json
8. services.json

Now if you are interested in digging into more files, download the app yourself and do as I described above. But to highlight a few interesting bits:

The json files link to many images that I haven’t seen before such as this one:

And they expose some nice urls used for displaying RSS feeds:

“FeedTemplateHTMLURLString” :
”cdn.flipboard.com/flipmag/lib/fliprss.html”,
“FeedTemplateCSSURLString” :
“cdn.flipboard.com/flipmag/lib/fliprss.css”,
“FeedTemplateCSSURLStringLarge” :
“cdn.flipboard.com/flipmag/lib/fliprss-large.css”,
“FeedTemplateCSSURLStringXLarge” :
“cdn.flipboard.com/flipmag/lib/fliprss-Xlarge.css”,

January 23rd, 2012 -

• Flipboard json html5 demo pics