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

Textbooks in iBooks 2 can access online audio and video

One of the caveats of Apple’s attempt to disrupt the textbook industry is that the entry-level iPad not only costs $500 but it comes with a mere 16 Gb of storage. Have a few interactive books with video on the shelf like the new media-rich Life On Earth and you’ll run out of disk space in no time.

But here’s an interesting new setting in iBooks 2 that might help in addressing that challenge:

“Online Audio & Video”

Will it be used for embedding hosted video’s, piecharts, sound clips as an extra bonus to the book, or will authors use it to keep a trimmed download size of their books?

January 20th, 2012 -

• apple textbooks ibooks education learning ipad

Het Fronteers certificaat: AJAX of WC Eend?

Ik heb het persoonlijk niet zo op Fronteers. Dat komt mede door mijn allergische reactie op de elitaire wijze van oprichting destijds door de op “international guru level” functionerende Peter-Paul Koch en het chauvinisme wat weer boven komt drijven bij de discussie of de “vakvereniging” niet toch een eigen front-end certificaat in het leven moet roepen.

Even terugspoelen naar 2007

De kandidaatstelling voor het voorzitterschap van de vereniging vond plaats op ppk’s persoonlijke site, en de aanmelding van Lon Boonen als tweede kandidaat daarvoor werd meermalen verwijderd. Lon’s verontwaardigde reacties daarop overigens ook.

Lon, ikzelf en anderen waren huiverig voor het idee dat onze international guru een ridikuul certificaat zou opstellen met zijn eigen richtlijnen om front-enders te bestempelen als “goed” of “slecht”. 1 van de voorgestelde geboden was “gij zult geen tabellen gebruiken”, of je nou genoeg braincells had om traditioneel out-of-the-box-model te denken of niet. Ook werd de visualisering overwogen om een gouden sterretje achter je naam te mogen plaatsen. I kid you not.

Instellingen zoekend naar een creatief team (bv de overheid en bedrijven) kunnen onwetend zijn wbt de kwaliteit van een front-end developer, en zouden best waarde kunnen gaan hechten aan zo’n certificaat, terwijl het zo kansloos is om concreet waarde daaraan toe te schrijven. Hoe ga je de waarde bepalen, waarborgen en handhaven? Het is allemaal vrij dubieus, en het vakgebied is nu eenmaal een enorm grijs gebied aan mogelijkheden die je op een miljard manier slim kunt combineren. Het is geen verkeersexamen waar je dingen goed of fout kunt doen. 

“U wilt deze span een padding-top geven van 42 pixels. Kan dat?”

En dan de norm. Hoe leg je die, en op welke schaal bepaal je de resultaten. Mijn voorstel toen was om een “ppk level” in het leven te roepen dan maar. Ik ben nog maar level 7 ppk hoor, dus ik zal het vast allemaal verkeerd zien.   

Maar goed, het is nu dus 2012 en de drang om te certificeren komt weer naar boven drijven blijkbaar. 

Waarom deze post?

Om twee redenen:

1. Om op het Fronteers forum  te reageren moet je registreren, maar dat kan niet, dus zul je wel lid moeten worden. Dan maar mijn mening op mijn eigen site. Gelukkig mag je met #frontcert op twitter reageren, ware het niet dat…

2. Je nu ook op twitter te maken krijgt met fronteers censuur [update: Krijn zegt de tweet met een biertje op niet als censuur te hebben bedoeld maar snapt dat het zo opgevat kan worden. Zie onder voor details]

Vandaar ook dat ik de censuur uit het verleden even aanstip. Ik wil graag mijn mening kwijt over dat certificaat zonder er geld voor te betalen, en zonder een weerwoord genuanceerder te moeten scrhijven.

Wat ik vind van zo’n certificaat

Om zo’n fronteers-certificaat te behalen moet je lid zijn van Fronteers. Naast de verenigingscontributie betaal je elke 2 jaar om je fronteers-certificaat te verlengen tegenover een deskundige vakjury bestaande uit… fronteers. Wel de beste natuurlijk (die met een ppk level van minimaal 80, je herkent ze aan een gouden sterretje achter hun naam). 

Zo’n certificaat doet aan de onwetenden overkomen alsof het een kwaliteitsgarantie is. Maar wiskundig gezien scheidt het puur de fronteers-leden van niet-leden en maakt het van de vereniging zelf een Animal Farm. Het zegt niks over iemand’s creatieve vaardigheden, iemands vermogen tot oplossen van complexe problemen, iemands betrokkenheid bij klanten of iemands passie voor het vak. En net als bij de politie is handhaving een tweede. Ik zag dat Peter vd Zee op het forum met een alternatief komt wat in ieder geval al beter werkt, al denk ik dat je gewoon helemaal geen van deze kanten op zou moeten.

Het certificaat biedt enkel een extra vinkje bij hoe sommige instellingen tot hun keuze van uitvoerend creatief team komen; door RFP’s uit te sturen met een vergelijkingstabel:

• Wat kost ‘t?
• Wat voor CMaSs ga je gebruiken?
• Hoeveel social media stop je er in?
• Doe je AJAX of wc-eend?
• …
• [NIEUW!] Hoeveel werknemenrs hebben een fronteers diploma?

Oke, even alle gekheid op een stokje. Als ik de oprichting en ppk buiten beschouwing laat dan doet Fronteers een hoop goede goede dingen voor mensen die verder willen leren. Ze bieden cursussen aan, houden congressen en meetups, bieden een vacaturebank, prima allemaal. Een hoop collega’s en lui die ik respecteer zijn lid, volgen cursussen of zijn anderszijds betrokken.

Ik vind zo’n certificaat gewoon pure flauwekul.

Vraag een individu gewoon naar wat hij of zij in de vrije tijd allemaal heeft gedaan, dat geeft een retegoeie indruk, zelfs over de motivatie. En je wilt ook een persoonlijke klik als klant, dat haal je ook niet uit een certificaat. Ben je geinspireerd door iemands professionele werk of gehobby dan kun je ook nog naar een portfolio vragen en contact opnemen met voorgaande opdrachtgevers. 

Laten we desnoods een manifest schrijven op iets als hoekiesikeenfrontender.org met een stappenplan hoe je als potentiele klant je selectie maakt om tot een goede front-ender te komen, en refereer daarnaar. Collectief, met z’n allen. Fronteer of niet.

Maar hou alsjeblieft op met dat elitaire certificatengezeur en al helemaal met die poging tot censuur.  Als je een hashtag openstelt dan kun je ook commentaar verwachten. Ik verwacht ook een stormlading kritiek op deze post, vind ik prima. Discussie is gezond.

Zoals Stef Brooijmans zo mooi kan zeggen:

“Zonder wrijving geen glans”

De overeenkomst tussen een Fronteers certificaat en WC-Eend?

1. Daarom adviseren wij van Fronteers… Fronteers

2. Je kunt WC-Eend en een front-end certificaat door de plee spoelen

Fijne dag.

[disclaimert; bovenstaand is typisch mijn persoonlijke mening, eentje waar collega’s van ons op-guru-level-opererende bedrijf het mee oneens zouden kunnen zijn]

Update 1: diplomering zou ook gelden voor niet-fronteers

Update 2: Reactie op feedback van Krijn

Ik koester geen haat richting Fronteers, en als ik een tweet start met “@chriseidhof …” zonder #frontcert ben ik van mening dat ik ongenuanceerd mag tweeten tussen mij en die persoon, en ja, vanuit mijn eigen beleving en ervaringen met Fronteers. Het ging zelfs om een lolletje, maar de reactie die ik als censuur heb geschouwd zetten me aan om deze post te schrijven.

PPK vind ik gewoon een rare druif. Maar het vrijwilligerswerk van een aantal Fronteers heb ik wel degelijk respect voor, dus excuses als ik met deze post die personen raak.

Update 3: Heerlijk als blijkbaar een reply niet wordt geplaatst als ik gas geef tegen censuur :D Ging om een reactie van Sander en ook van mezelf. Beetje vragen om censuur grappen natuurlijk. Lijkt me eoa hickup met disqus ofzo. Vaag. Mail me anders op martin [ at ] q42 [ puntje ] nl dan plaats ik hem via een update erbij. 

January 12th, 2012 -

• frontcert fronteers certificaat ppk houtochop

How to change the CSS hover state with webkit inspector

Chuck Norris can hover over an element and inspect it with Webkit Inspector at the same time. For us mere mortals, Webkit Inspector has a few tickboxes to toggle an element’s state.

Expand the Styles section and press the little arrow icon on the right. It opens a panel with the following states:

:active
:focus
:hover
:visited

January 2nd, 2012 -

• css tip webkit inspector

Flipbird

December 20th, 2011 -

• flipboard logo fun

6 UX suggestions for Grand Theft Auto III on iOS

GTA 3 is one of my all time favorites. If Rockstar would’ve created an app with the radio channels alone it would’ve been a justified purchase and perhaps a massive hit too, so bringing the full game to iOS is a treat. For that I thank Rockstar.

A treat that sadly has its caveats. So many even that the game is unplayable on my iPad (1). Literally. It crashes in between missions so frequently that after a few hours of trial and error I were forced to give up.

So while I await an update to fix these errors I wanted to share my thoughts on what could’ve done to improve this title’s playability on iOS. I won’t review the game, and many glitches where already mentioned in the TouchArcade and TechCrunch reviews (such as the crazy lock-on system). 

1. Add quick-save

Ten years ago it seemed like a good idea to save your game by driving to a safehouse, parking the car in the garage and entering the building. Times have changed, and especially for iOS this is a no-go. When I’m about to leave the train I want to save my game in a second; tap menu, tap save, done.

2. Add auto-save when a mission is completed

The game crashed so many times for me that it was hard to finish a mission. When I did finish one, I immidiately tried to reach a safehouse prior to the game crashing, often without success. So if the crashes aren’t fixed, and the beforementioned quick-save isn’t added, the least Rockstar could do is auto-save after completing a mission. Right?

3. Extend the free-look touch area to the right side of the screen

Right now the touch-area is limited to the center of the screen. In the screenshot below, your right hand thumb usually is in the area of the wall you see there:

Right now you can’t look around when your hand is resting there (which is the default control scheme for many 3D shooter/action/RPG-like games). In GTA3 you have to lift your hand and touch the center of the screen to look around. Pity.

And there’s no way to change this touch area either :(

4. Don’t auto-pan on free-look and give us precise controls

When you look around, the camera feels laggy and tries to shift its panning and view back to a certain position that I really don’t understand. I’m sure it’s some perfectly sane calculation to optimize the viewport and prevent clipping issues, but the camera doesn’t feel free, nor does it feel responsive. Many iOS games have proven better camera controls, so from a company such as Rockstar I expected more.

5. Remove the unnecessary scrolling in menus

The menu options are a bit over-designed. Sure, they look really nice, but their big size requries you to scroll around to reach them, which really slows down navigation a lot. For instance, when you open the briefs option and return to the main menu again, it looks like this:

I am accustomed to hit the Play button in order to continue my game, but in this case it always shows “Start game” which causes a restart. In the screen above, the “Resume” button requires a swipe to the right in order to make it appear. It may be a minor detail, but details matter.

6. Make the target icon on the map more clear

When you’re on a mission, the destination is marked on the map. This marker is a small 5x5 green square on a brown map. So there’s hardly any contrast and it’s extremely easy to miss. I found myself searching for it quite often.

Add to these the ridiculous lock-on system when in a firefight and the huge amount of buttons they’ve put on screen without merging some into a more ambiguous trigger button and it feels the UI team should be sent back to the drawing board.

The thing that strikes me most is; most of these things feel so obvious that I don’t understand that the GTA3 iOS team itself didn’t feel bothered by these issues. I mean; we all know GTA 3 is a gem, so why not polish it?

December 19th, 2011 -

• ux ios gta games

Reason 42 why I hate Eclipse

I won’t beat around the bush. I love to rant and I hate Eclipse. I really utterly hate everything about it. To the bone. The GUI (the horror), the buttons glyphs (ONOES), the keyboard shortcuts (my god, the keyboard shortcuts), the dialogs (they haunt me), the annoying helper icons (MAKE IT STOP), AAAAAAaaaah!!!!!!

To pick just one of all the horrifying aspects I “dislike” about Eclipse is a difficult task, but for my rant of today I managed to do just that. As I was unable to terminate a running project as the uglified-square-with-rounded-corners thingy that ought to pass through as a “stop/terminate process” button was greyed out, it struck me that I didn’t even notice its positioning.

Yes. Its positioning.

Its terrible positioning that is the result of an utter lack of focus when its UI was put together by a disfocussed-whitebearded-enterprise-savy-open-source-loving-comittee of clueless people that tried to make every single pixel of the IDE configurable.

They came up with the following bright idea. Click on it to see a more detailed picture that - purely for the sake of this rant - was taken from a somewhat stretched window in order to allow me exaggerate my point.

What can I say? God I hate Eclipse. And Java. Oh, and aluminium.

December 9th, 2011 -

• eclipse rant

My talk about game emulators in javascript at OnGameStart - The first HTML5 Game Conference.

December 2nd, 2011

How to use Firebug on your iPad and iPhone

Web developers targetting HTML5 on iDevices would really benefit from having Web Developer Tools or Firebug on Mobile Safari. Enter Firebug Lite! However, iPads, iPhones and bookmarklets don’t go well together, so I put together this little howto.

All credits to Joe Hewitt for creating Firebug.

1. Surf to this page on your iPad or iPhone and bookmark it 
2. Rename the bookmark to “Firebug”. As you can see, the URL is uneditable right now
3. Tap on this textarea …
4. Tap it again, choose “Select All” followed by “Copy”
5. Edit the Firebug bookmarklet, remove the URL and paste the bookmarklet
6. Choose “Done” (on the virtual keyboard) and you’re all set

Hitting that bookmarklet should give you a fully functioning Firebug at the bottom of your iPad’s viewport, like this:

December 2nd, 2011 -

• firebug ipad iphone

It’s on iPad like Donkey Kong

q42games.com/donkeykong2

One of my all time favorite games is Nintendo’s Game & Watch device “Donkey Kong II”. You can now play it on your iPad in HTML5. It is without sound on your precious tablet, but that’s due to Apple’s lack of proper audio support in Mobile Safari.

To play with sound effects, point your desktop browser there.

On the iPad it plays offline too, right after you’ve installed it on your home screen.

I hope that Nintendo will engage and support this tribute to a game long forgotten, in a similar way that Activision is endorsing sarien.net. Whatever Nintendo’s response will be (if any) - it would indicate that the games industry should take HTML5 more seriously, as it’s becoming a more mature gaming platform.

September 14th, 2011