The Net is Dead

Some completely unsollicited advice to RIM regarding the BlackBerry PlayBook

Tue, 29 Mar 2011 11:43:00 -0700

In the past month or so I've been dabbling around in my free time with developing applications for the BlackBerry PlayBook. There were two simple reasons for this. First of all RIM's 'WebWorks' SDK allows applications to be developed as pure HTML5 applications which is obviously pretty awesome for a front-end guy like me. Secondly the fact that RIM is handing out free PlayBooks may have had something to do with it. By now I have finished two applications that are available for free in BlackBerry AppWorld and I'm working on a third one. Based on the first two applications RIM has already deemed me worthy of receiving a free PlayBook so I'll be the proud owner of one of these puppies as soon as they hit the market. Go me!

BlackBerry PlayBook: awesome.

So what's it like, developing for the BlackBerry PlayBook? There's quite a lot to talk about which is why I figured I'd do a little writeup on it and provide some completely unsolicited advice to RIM for the future. I'm just going to pretend for a while that I'm Head of Tablet Development at RIM. Here's what I would do and what I would not do.

SDK's, SDK's, SDK's

It's not all there yet but it certainly looks like the PlayBook will go down in history as the device with the highest amount of different SDK's to develop applications with. There's an Adobe AIR SDK, a native C/C++ SDK (coming soon), a HTML/JS/CSS based SDK and last week RIM dropped the news that the PlayBook will support Android applications, albeit not completely like an Android tablet would. I suppose that means we have a whopping 4 different ways of developing applications for the same platform. Awesome, right? Yes and no. On one hand it's pretty cool when there's so many different flavors of development for a platform. It means developers can pick whatever environment they're most comfortable with and develop an application. This is great on paper but in my personal opinion not when a device hasn't even launched yet. So here's my first free unsolicited advice to RIM:

1: Focus on only HTML5 and Native C/C++ until both SDK's are fully matured. Only then it may make sense to look at more SDK's. Even then you have to ask yourself: what do any extra SDK's really add?

Currently BlackBerry PlayBook developers are looking at two very immature SDK's (WebWorks/HTML and Adobe AIR) and the native SDK isn't even out yet. In addition RIM is working on getting Android applications to run on the PlayBook. I'm not sure what the point of all this is. Why not focus all energy on just two SDK's first and make sure they're perfect? I'm pretty sure we'd have a more mature WebWorks SDK as well as a released C/C++ SDK by now if RIM hadn't been busy trying to support 'everything'. What in the world does Adobe AIR add that HTML5 can't do? Nothing! And since the PlayBook supports Flash the whole Adobe camp could probably function just fine with WebWorks and an embedded SWF file. Both SDK's will eventually be able to do the exact same thing. So unless Adobe is sending RIM large suitcases full of stacks of $100 bills I wouldn't bother with AIR. Not that there's anything wrong with AIR per se but it's just not worth the extra overhead. And what do mildly crippled Android applications add to this mix? Probably nothing besides enabling RIM's marketing folks to say there's a bazillion applications available that run on the PlayBook. Unfortunately most Android applications are rather crappy and they'll be even crappier than they already are in a crippled runtime. Also, if you really have to do Android just let the applications run free and don't require Android developers to (re)submit their applications to BlackBerry AppWorld. I sincerely doubt many developers will actually do this.

What do you mean, consistent look and feel?

I'm not a fan of Apple's walled iOS garden but if there's one thing they nailed it has to be the super consistent user experience which is present in almost any iOS application. Another vendor that did everything right in this department is HP/Palm. Both provide a robust set of UI components that ensure that all applications look great. Even if they were created by developers with little or no UI design skills. The first batch of PlayBook app are a great example of why this is important. And so is the Android universe. Everything looks and feels different and many applications are simply butt ugly. So here's advice number two:

2: Form a strong team of ninja front-end developers and recreate all QNX widgets in HTML/CSS/JS for the WebWorks SDK. Create a UI style guide, a set of examples and strongly encourage developers to stick to it. It works for Apple, it works for HP/Palm so it can work for RIM as well.

Now we're getting somewhere. We are now on our way towards an app universe of both native and web applications that all have the exact same look and feel. Take my word on this: Users LOVE that. Nobody likes to see a collection of completely different looking applications where people have to scratch their heads and think "How the hell does this thing work?" every time they launch a new app.

Developer feedback

I'm sure this is all about getting things started but still: I personally had to wait for 3.5 weeks before my submitted application got approved for BlackBerry AppWorld. And if you think that's a long time, think again. I've seen plenty of cases where people have been waiting for 2 months or more without receiving a notice of any kind on what's going on and why the approval process is taking so long. This is a huge de-motivator for any developer who wants to put his/her work out there. So here's my last bit of advice:

3: Make sure the waiting time for developers to receive feedback on their app submission doesn't exceed... let's say 3 weeks. Especially when you have a new platform it's VERY important to keep your developers motivated.

Several months is really unacceptable no matter how you put it. Especially if this waiting time comes with absolutely NO communication. Hire more reviewers if you have to!

So there you go. This is my advice for RIM that I could come up with while pretending to be the Head of Tablet Development in Waterloo, Canada. Don't get me wrong, I really enjoyed creating my first two PlayBook applications. The fact that they earned me a free PlayBook is even better. I'll surely be developing more applications in the future. That said, from looking at the WebWorks SDK it's easy to tell that there's a LOT of work to do for RIM still. At the moment the SDK hardly supports any hardware related features which limits applications to what can be done in a regular browser. Obviously this is not nearly enough. We want to be able to take pictures, record video and audio, access files on the device and a whole slew of other things. Only then the REALLY cool applications can be built.

I'm wishing RIM the best of luck with the launch of the PlayBook. I'm sure it won't be easy to engage in battle with Apple and the rest of the competition but who knows, it might just work. The PlayBook sure is a sweet and powerful piece of hardware that's totally up to the task. Now let's make sure the software is too!

WTF Where's my email and messaging?

After reading this article on Wired I felt the need to add a fourth friendly unsollicited advice, even though it has little to do with development on the PlayBook:

4: Put every second of developer time you can get your hands on in the next three weeks behind making sure the PlayBook ships WITH email and messaging.

Seriously RIM, if this isn't on the PlayBook the whole world will have a huge collective 'WTF?????'-moment as soon as people get their hands on the PlayBook. You'll be burned at the stake in any review and people who buy one will go back to the store after they find out they can't read their email on the PlayBook unless they own a BlackBerry smartphone. Absolutely unacceptable. Whoever thought this was a good idea at RIM must be suffering from some serious delusions. I appreciate the security of the BlackBerry Bridge for enterprise use and all but... There's a LOT of 'Joe Users' out there who just want to read their email and do messaging with their friends. Come on RIM, fix this as soon as humanly possible.

JSFiddle: All sorts of awesome!

Fri, 11 Mar 2011 10:52:00 -0700

I just ran into JSFiddle. An absolutely AWESOME way to showcase html/javascript/css examples. Here's my earlier CSS3 LCD display example embedded right into this post.

GREAT stuff!

Screamager a HTML5 application

Thu, 10 Mar 2011 22:30:00 -0700

Lately I've been quite busy messing around with HTML5. Since RIM was so kind to offer a free BlackBerry PlayBook for anyone who develops an app for it I figured I'd go for it. By now it has all horribly ran out of hand and it's becoming a pretty awesome application. A lot of functionality is done but I'm still working on an in-application animation editor which will hopefully allow people to go nuts with it. Have a look at the screencast and let me know what you think!

Screamager will hopefully be available on the day the PlayBook launches. After that I'll be working on porting it to HP WebOS, iOS and Android.

Realistic LCD display effect with pure CSS

Tue, 08 Mar 2011 21:35:00 -0700

You're probably all thinking I must be dead but... I'm not. I suppose those who keep an eye on the Tumblr box at the bottom of this page know but for everyone else: I'm still alive. I've been busy lately with HTML5 and some application programming for the upcoming BlackBerry PlayBook. In one of the apps I made for the PlayBook i wanted to have a realistic looking LCD screen. I managed to achieve this with @font-face and some CSS3 trickery. I figured this would be something nice to share with you all which is why I put up a small example page. The effect is truly convincing and fairly easy to achieve. So, if you're dealing with mobile which is almost exclusively WebKit or you just don't care about Internet Explorer here's what can be achieved:

If you like it, head over to the example page for the code.

Node.js shortened URL decoder

Thu, 02 Sep 2010 16:10:00 -0700

For quite a while I've had Node.js on my list of things to look into as soon as I can. Today I finally messed around with it for the first time. Especially now that HP/Palm's WebOS 2.0 is going to have Node.js for background services I just had to dive into it. Verdict: Awesome. If you know JavaScript you already know Node.js. There's really nothing to it. We can now use JavaScript both on the server and on the client. Bad ass. And it's fast too. The possibilities are endless.

It took me a while to figure out something to do as a first experiment. Eventually I managed to come up with something fairly useful. My first Node.js experiment is a tiny little service that essentially does the same thing real-url.org does. Feed it a shortened URL and this little service will answer with the real URL that's hidden behind it.

The Code

As you can see it really is tiny. But it works like a charm. I've tested it with all common shorteners.

To run it yourself, install Node.js (see the Node.js site for details and simply type:

node urldecoder.js

You can now access the server as follows: http://your-host.com:8888/?http://bit.ly/thenetisdead

The Demo

Here's a demo of the code in live action. I got this up and running by installing Node.js on my Dreamhost account (instructions here).

I'm not sure how stable this is going to be because of course the server will be killed whenever they decide to reboot this box. But here's for trying, right? Enjoy it while it's up!

update: If it's not working it's because Dreamhost keeps auto-killing the process for reasons completely beyond me (it barely uses any resources)

update 2: apparently network services/daemons are against Dreamhost TOS. Bummer. Demo removed.

Let me know what you think and:

What did you do with Node.js? Tell me in the comments!

Stereoscopic 3D television - Some thoughts

Sun, 13 Jun 2010 17:29:00 -0700

A month or so ago me and my wife decided it was time to demote our aging Samsung 32'' LCD to the bedroom and buy a bigger and better television for the living room. Since we're a family of gamers and movie watchers I decided it was ok to go for something really good. After a period of research I decided that the Panasonic TC-P50VT25 plasma TV was the best TV I could buy without breaking the bank completely. Don't get me wrong, the VT25 series is still not cheap but compared to a lot of other large screen TVs it's priced pretty competitively. To add to that this TV pretty much has the best picture money can buy at the moment. The only thing that may or may not be better is the discontinued Pioneer Elite KURO line. Needless to say, this TV rocks. It beats the hell out of any same size LCD TV on the market in terms of picture quality and costs a LOT less too.

But... this post is not a Panasonic TC-P50VT25 review. There's enough raving reviews of this TV on the net already. Instead I'm going to talk about the stereoscopic 3D feature this and some other TVs currently on the market offer. It's important to note that I did not buy this TV because it has 3D. I consider the 3D a (very welcome) bonus to a set that's overall extremely good. Let's take a look. First I will discuss my 3D gaming experiences so far, then I'll take a look at 3D television and finally I'll summarize the good and the bad and take a look at the future of all this.

3D gaming: the PS3 leads the way

Last week, Sony released the first four PS3 games that support stereoscopic 3D. Additionally they promised 20 more titles this year. Funnily enough, this was received with a lot of 'meh' from the fanboys which I found strange for a new offered capability that doesn't actually cost any money. Probably because most of them don't actually have a 3D capable television. It seems the majority of people who downplay stereoscopic 3D as a FAD have not experienced it themselves. The PS3 will also receive a firmware update to enable playback of Blu-Ray 3D discs. I hope they will hurry with this because for now I can't watch any Blu-Ray 3D. I decided it's not worth buying a dedicated player that costs more than a PS3 if the PS3 will have the capability in the near future.

I know for a fact that the much anticipated Gran Turismo 5 is going to have a 3D mode. Being a big fan of this series I find it extremely exciting that 'The Real Driving Simulator' is about to get a whole lot MORE real. For now we have the following titles:

Wipeout HD (full game, including Wipeout Fury add-on)
Super Stardust HD (full game)
Motorstorm Pacific Rift (demo only)
Pain (some levels with 3D I think. I don't have this game)

Wipeout HD running in its regular 1080p glory

I'm interested in how good they will manage to make Gran Turismo 5 look because 3D gaming places massive demands on the processing power of the console. For each regular frame the console now has to render two different frames. One for each eye. For Wipeout this means they had to drop the resolution to 720p per eye. Believe me though when I say it still looks unbelievably good. Because of the added dimension it's hard to see any drop in quality anyway in my opinion. Wipeout HD in stereoscopic 3D is pretty amazing. The game has an incredible depth and the sensation of extreme speed is better than ever. I also found the game easier to play because of the 3D because of the added realism helping to judge the track better. Awesome job, Studio Liverpool! You guys rock the frontlines of the future of gaming.

Obviously you can't see the 3 dimensions on your computer screen but I still thought I'd add a 'through the glasses' shot of Wipeout HD

The other two titles look great as well. In my opinion these first titles show a lot of promise for the future. I for one welcome the addition of stereoscopic 3D by Sony. As you already know, it will work on any 3D capable TV. NOT just Sony's new extremely expensive Bravia 3D line.

The birth of 3D television: FIFA World Cup in 3D

When I heard Comcast is offering ESPN 3D last week I was stoked. This meant I get to see Holland play in 3D! Apparently it required a modern cable box that can do MPEG4 so I had to swap mine out. Luckily this was no problem and I got it all up and running yesterday. This morning I got to give it a good test run with the Germany - Australia match. It was a pretty amazing experience. It's hard to really describe it to people who haven't seen it but I can tell you that this is the closest thing to being in the stadium we're gonna get for a long, long time. Shots taken from the spectator area feel like you're one of them. Wide angle shots allow MUCH better tracking of what's going on in the game than when watching in 2D and the closeup shots are nothing but amazing. 3D adds a whole new level to watching sports!

The only disappointing thing about ESPN 3D is the way they have chosen to broadcast it. The signal is broadcasted in 'side-by-side' format. This means the frames for both eyes are crammed into one 1080i frame.

Side-by-side 3D displayed in 2D

The above photo immediately reveals why this is a bit crappy. When cramming 2 frames in one we lose 50% of the horizontal resolution. Since 1080i already loses 50% of the vertical 1080 pixel resolution this means each eye only gets a 960x520 pixels picture. Barely better than 420p DVD resolution! The PS3 sends whole frames, rapidly alternating while in this case the TV has to create the two frames by stretching each half of the picture back to 1920 pixels wide. The result is a somewhat fuzzy 3D image through the shutter glasses. I suppose choosing this format was done for bandwidth limit reasons. Still this means there's a lot of room for improvement. Blu-Ray 3D produced two true 1080p images per eye which is four times the resolution of what ESPN 3D provides. Let's hope future 3D broadcasts will get better! From playing Wipeout (720p per eye) and Super Stardust HD (true 1080p per eye) I know there's tons of improvement possible here.

The processed ESPN 3D image, seen through the glasses.

That said, it does NOT mean the experience sucks. Quite the opposite. Like I said before, the 3D adds an amazing amount of realism to watching a match that makes it easy to forgive the lack of resolution. Just like with the Wipeout HD downgrade from 1080p to 720p, 3D adds so much that it doesn't seem to matter as much as you'd think from reading this post.

Thoughts about stereoscopic 3D television

Like I said before, I do not yet have access to Blu-Ray 3D because I'm waiting for Sony to release a PS3 firmware update that allows me to play these discs. I don't mind too much at this moment because there aren't all that many movies out in this format yet. I have however seen some Blu-Ray 3D material in an AV store and I can tell you it's mind blowing. Especially on the Panasonic VT25 series. I can't comment on Sony's new sets because I haven't seen them but I do know it looks considerably less good on Samsung sets, both LED TV's and Plasma. They exhibit a visible annoying ghosting that I'd personally not be able to tolerate for a long time. It gave me nausea within minutes. Luckily on the Panasonic everything is fine, at least it is to me. Obviously this technique is very new, making me one of those 'early adopters'. I'm sure future sets are going to make it look even better. A thing to note is that even theatrical 3D can exhibits. I definitely saw some while watching Avatar in 3D. On a TV however the ghosting can be eliminated almost completely because active 3D is fundamentally better than passive 3D which is used in theaters. Heck, I don't see ghosting on my Panasonic which proves to me that it can be done. Active 3D wouldn't work in a theater for obvious financial reasons. Active glasses are too expensive while passive ones cost almost nothing.

The bad

The biggest disadvantage of stereoscopic 3D television is the need to wear special active shutter glasses in order to be able to see the 3D effect. The first big disadvantage of this is the fact that you need a set for every person watching. They don't come cheap either (around 130 dollars) so this is somewhat of a ruiner. Also a lot of people really hate having to wear glasses. I personally don't mind it too much but I understand the people who do. Unfortunately it will be a long time before we will see 3D TV (and movie theatre experiences) that don't require glasses. So for now if you want to see 3D you'll have to either put up with the glasses or miss out on it altogether.

A second disadvantage is the distinct loss of brightness/contrast introduced by the fact that each eye is only seeing something 50% of the time. You can compensate for this somewhat by bumping up the brightness on the TV but the loss is definitely there. While it didn't really bother me I feel I do need to mention this as a disadvantage.

Wishlist for the future

I'm gonna wrap up this post with a wishlist for the future:

MORE games. Bring it on, Sony and Microsoft please jump on board as well!
Sony, please hurry with that PS3 firmware update for Blu-Ray 3D.
More TV broadcasts.
BETTER TV broadcasts. I'd love to see at least 1080i native 3D or maybe even 1080p native.
For the far future: 3D without glasses. Since this is a long way off for now I'd like to see much cheaper sets of active shutter glasses.
Cheaper TV's that support 3D so more people will be able to afford it

I'm interested in your thoughts. Do you have a 3D capable TV? Did you try one in a store? Let me know what you think!

Disclaimer: Panasonic did NOT pay me or sponsor me to write this post. I paid dearly for this TV and didn't receive any compensation for this post. I just happen to really like the TV.

Mass Effect - The best Space Opera of all time

Sun, 11 Apr 2010 12:45:00 -0700

It doesn't really ever happen that I talk about video games on this blog but this time I just can't stop myself. I have played a LOT of videogames in my life starting all the way back at stealing money off some French guy to play Space Invaders. While I usually have a satisfying sense of accomplishment when completely finishing a game things were different with Mass Effect. This was true for part 1 when I played it in London well over 2 years ago and again with Mass Effect 2 in the past month. Only with these two games I felt sad when I finished them. "It's over. NOOOOOO!! It can't be! I need more!".

Asari Liara T'Soni and Alliance soldier Ashley in Mass Effect 1

The Mass Effect Universe

The Mass Effect universe is set in our own Milky Way galaxy. For reasons unknown and probably impossible to understand to humanity and any other sapient life form a race of ancient sentient machines feels the need to purge the galaxy of intelligent life every time it reaches a certain level of technical and social sophistication. These machines, 'The Reapers' as they're called by all advanced species in the galaxy have been doing this for millions of years. The most recent species of importance to be purged from the galaxy were the 'Protheans'. A highly advanced civilization that went extinct about 50.000 years ago. Thanks to the wealth of information found in a small Prothean cache found deep under the surface of Mars, humanity has made it into becoming a space faring civilization. Most other civilizations that are currently space faring have done so thanks to the remains of the once mighty Prothean civilization. In order to make sure the species that are reaching a level of sophistication that warrants a new cycle of extermination the reapers have set up a network of incredibly advanced space stations called 'Mass Relays' which enable instant travel to many star systems throughout the galaxy. This network is believed to be a Prothean legacy by most while in reality it's Reaper technology. At the center of all this there's a space station of epic proportions called 'The Citadel' which is populated by groups of most known space faring races in the galaxy and governed by a galactic council with representatives of the most dominant species.

So there you have it. Humanity, and a lot of other species would never be traveling the galaxy if it weren't for the Prothean remains and the network of Mass Relays. To me this is a very believable scenario because for one I can't really believe humanity will ever leave this level of sophistication on it's own without exterminating itself first.

Sovereign, one of the sentient machines (Reapers) that threaten all sapient life in the galaxy

I won't really say more about the main story of the Mass Effect trilogy because that would ruin things for anyone who hasn't played yet. This article is more about why these games are miles ahead of anything else I've ever played.

What's so awesome about Mass Effect?

So, what's so awesome about this and why should you care? Is it the awesome Unreal 3 Engine powered graphics? Is it the combat system? Is it the missions? Nope. In fact both games are not without their flaws when it comes to these things. This is especially true for Mass Effect 1 which has it's slowdown issues, texture popping and control issues. Most of these things are highly improved in Mass Effect 2. Yet, all this stuff has little to do with why I think this trilogy out does pretty much everything else that's out there. It's the totally engrossing storyline and the characters. I can honestly say that these things exceed the richness and depth of most science fiction BOOKS I've read, let alone movies I've seen. Yep, you got that right. This game beats most BOOKS. And I've read quite a lot of science fiction.

I have to say... this is much better than Dragon Age...

My wife Pam (who hates science fiction stuff)

Each and every character including the ones in smaller side quests have been carefully crafted to be totally believable. Every single line is done in real speech by real actors, some of them pretty famous too. Some highlights are Martin Sheen as 'The Illusive man', leader of Cerberus, a 'human supremacy' organization giving X-Files' cigarette smoking man a run for his money, Seth Green as your pilot 'Joker' and Tricia Helfer as your ship's Artifical Inteligence 'EDI'. There's a whole bunch of side characters done by well known actors as well such as Michael Hogan, Carrie-Ann Moss and Adam Baldwin. When playing these games you'll find yourself actually CARING about what happens to a lot of them, especially your squad members. Every one of them has their own deep background and life story. If you dive deep enough in the wealth of dialog and conversation you can't help but start feeling you really know them. My personal Favorites are Garrus Vakarian, my Turian combat buddy present in both games, Thane Krios, Master Assassin in Mass Effect 2 and Legion, the first intact Geth (sapient robot race that went rogue) to be captured by other species. But there's more. They pretty much all rock. The more you talk to any character, the better they get. These are just a few highlights that I picked. I could go on forever on many other characters and the amazing species they represent. Turians, Asari, Quarians, Salarians, Krogan, the list goes on and on. The depth of the characters in Mass Effect sets the bar really, really high for any future RPG titles.

Thane Krios, Master Assassin and general awesome guy.

The 'Star Wars' or Avatar of games

For me personally it's safe to compare the Mass Effect universe to the Star Wars universe. And I'd definitely call Mass Effect 2 the 'Empire Strikes Back' of games. And what's more, the acting and character development in Mass Effect are leaps BETTER than Star Wars. The universe itself has just about the same appeal. Mass Effect does what Star Wars or Avatar did for engrossing science fiction movies ... and improved upon them in character development and voice acting.

If I had all the time in the world I would make an attempt to cut and edit footage from the Mass Effect games into a series of videos. There's so much there that it would be easy to create two or even more full length TV series seasons of footage without ever getting boring for the viewer. Like I said before, not even most books manage to have as much depth as these games do, let alone movies. I secretly hope someone is going to take on this task. It's so good that it would blow your mind, even if you're not a gamer. I can't think of any other video game that has ever managed to accomplish this.

I am Legion, for we are many. Mobile terminal of the Geth.

Space Opera, redefined

Mass Effect redefines the term 'Space Opera', whether you compare it to books, movies or other games. It's a one of a kind thing. If you haven't played these games yet and you own an XBOX360 or a PC of good spec you owe it to yourself to get these games and be engrossed by them. After finishing both games twice I feel like I'm having withdrawal symptoms. I can't leave them alone. BioWare has released some downloadable content for Mass Effect 2 which kept me happy for a while but I keep wanting more and more. Especially mercenary veteran 'Zaeed Massani' is a pretty cool new squad member. Take him with you on missions and you'll love his comments in a strong mature sounding British accent.

Human, you've changed nothing.
Your species has the attention of those infinitely your greater.
That which you know as Reapers are your salvation through destruction.

-- Harbinger

Go play these games. Even if you don't like RPG's (like me, I usually hate RPG's!) and games that involve a lot of shooting. It won't matter. It's that good.

Which development studio is going to outdo Mass Effect? You tell me! I honestly don't know. I expect I'm just gonna have to wait until Mass Effect 3 comes out which isn't gonna happen before 2011. Thanks Bioware for creating a magical experience I can barely stop thinking about. This is as good as it gets in a Space Opera. You've just redefined the term.

High Quality Cinematic Trailer for Mass Effect 2

Yup, Yet another JQuery Accordion Plugin

Sat, 27 Feb 2010 20:22:00 -0700

Over two years after posting this simple JQuery accordion menu and later on an improved JQuery accordion menu I'm still receiving epic amounts of traffic on these posts. New comments keep getting posted every week as well. When I posted these I never even dreamed they would draw this much attention and they were never intended to be more than just quick code snippets. Apparently I was wrong. JQuery is going extremely strong and somehow it seems I managed to fill some sort of void with my little accordion code snippet.

Questions are being asked, requests are made for things the snippet won't do without modifications and most importantly, problems are being reported with newer versions of JQuery. Because of all this I decided to once again do a new version of this little JQuery accordion. I tried to address most of the issues reported by readers and add some new features. Let's take a look at version 3, now in JQuery plugin flavor.

UPDATE: fixed 2 bugs reported in the comments. See my comment for details.

UPDATE 2: (April 11, 2010): fixed a bug causing erratic behavior in nested accordions.

Get the code

You can view the code for the JQuery accordion plugin, look at demos and download the sourcecode here.

New Features

For those who already know the previous versions I'll start with new things this version can do that the old one can't:

Nested accordions. Yep, they work. It's now possible to have an accordion inside an accordion item without the two disrupting eachother. My advice was and still is: use with caution. If not styled right this can be extremely confusing for your users.
Panels that hold other things than lists. You can now add anything. This is handy for those 'Apple style' accordions with content in each panel.
An 'active' class is now added to each toggle that has an open panel below it. Nice to provide an extra visual cue to your users.
Built according to the JQuery Plugin pattern
No more need for menus to have an ID
Any panel can be opened at page load time by using the class name expand on the list item that holds the toggle + panel you want to be opened

Cool features that were already there:

Collapsible accordion: only one panel can be open at any given time but this one panel can be collapsed in order for the entire accordion to be collapsible
Can function as a regular set of toggle panels where any panel can be open or closed

How to use the JQuery accordion plugin

Create markup that looks like this:

<ul class="menu">
<li>
<a href="#">Item 1</a>
<ul class="acitem">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="acitem">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>

As you can see, the main UL element containing the entire accordion needs to have menu as one of it's class names. Secondly, each item that serves as a toggle panel needs to have the class name acitem. The element with class="acitem" can be any element. It doesn't need to be a list of links. You can use a DIV element containing any kind of content if you like.

Expanding items at page load time

In order to have any item expanded as the page loads, add the class name expand to the panel you want to be expanded. For example:

<ul class="menu">
<li class="expand">
<a href="#">Item 1</a>
<ul class="acitem">
<li>...</li>
...
...

Keeping state

In the comments below the previous version of this plugin, various people were asking for a way to maintain state. I even made a (messy) attempt to do this in Javascript but... I think it's wrong. It's much better (and easier) to maintain state in the code that controls your page markup. Now that you can have any panel expanded at page load time by means of the expand class shown in the above example you can control the state of your accordions by having your page generation code set this class. Nice, easy and no cookie crumbs all over the floor.

Wrapping it up

Like I mentioned at the start of this post, JQuery is going stronger than ever. As much as I love YUI and the accordion widget I built with it there's simply way more interest in the JQuery one. And that's why I just had to do an update to it.

CSS

Important note: The CSS in on the example page is not perfect and certainly not pretty. It's strictly intended for demonstration purposes. This also means I didn't vigorously make it perfect for all browsers. You're strongly encouraged to use your own styling for your accordion menus.

DEMO AND SOURCE CODE

Week In Links: a WordPress plugin for link digest posts

Tue, 02 Feb 2010 20:43:00 -0700

Today I released a new little plugin for WordPress: Week In Links. This plugin was originally written for my wife who runs a book review site at bookalicio.us. The plugin was made to save her time while writing link digest posts on interesting finds during the week on the web. It can take considerable time to write such a post. All links need to be gathered, grouped and a few lines need to be written about each link. I figured this can be done 'on the go' during the week if a social bookmarking service is used, in this case del.icio.us. With a simple but effective tagging strategy each link digest post can be completely automated with the Week In Links plugin. By placing an easy to use special tag in any WordPress post the links will be fetched and displayed through headers and unordered lists.

Week In Links in action

Head over to the announcement post on bookalicio.us for more information and a download link.

Technorati: What happened to you?

Sat, 30 Jan 2010 09:48:00 -0700

At some point, my blog was in the top 5000 of Technorati. I hadn't really looked at it anymore for ages because I felt it kind of lost it's relevance. However recently I had to look into it again because my wife told me that publishers use Technorati to evaluate book bloggers in terms of how relevant they are.

I found out that my wife's book blog has a 'Technorati Authority' of 1. That kind of means: completely irrelevant. Given the amount of inlinks and the amount of traffic her blog gets this is obviously bullshit. Yet this thing is damaging because publishers look at it and think it has value. Just like some people still think Alexa rankings have any meaning.

Then I decided to take a look at my own blog which has been in existence for well over 5 years by now. Pretty well established, 1100+ RSS subscribers and excellent traffic. Guess what?

Hah! Apparently my blog is also COMPLETELY IRRELEVANT in the blogosphere according to Technorati. I think I'll start sobbing now?

Then there's the 'blog claim' process. For some reason completely beyond me Technorati has decided to take this process into the stone age. Once opon a time a blog claim could be made in less than a minute. Technorati would provide a code, you'd stick it in your source and TADAAA claimed. Not so much today anymore. It takes days and days before your claim is complete. And god forbid you do something wrong. If you do (like forgetting what the code was to put in your source) the process is 'stuck'. I can now not delete my wife's blog claim because apparently that TOO needs to take many, many days AND I can't make a new claim because the system already has the site as claimed. Facepalm extraordinaire.

I wouldn't give a rats ass about all this if it weren't for the fact that the '1' authority can potentially hurt my wife's blog. Because my own blog too is 'completely irrelevant' according to Technorati I'm pretty damn sure this number has nothing to do with real-world blogosphere authority. So... WTF Technorati? Why are you guys still even bothering? What once was the most awesome blog directory / radar now seems to have deteriorated in an utterly useless (albeit pretty looking) service.

If anyone has something insightful to say about all this, by all means go ahead and leave a comment!

Some random thoughts about the iPad

Wed, 27 Jan 2010 18:06:00 -0700

Everyone and their mother has an opinion about Apple's latest creation and therefore so can I. Not the most unique blog post I'm sure but hey, what the heck?

So... after months and months of hype, Apple revealed the 'iPad'. I was honestly quite underwhelmed. Sure it's a sexy looking device but the big question is: what am I gonna do with this? I haven't quite figured that out. Let's start with a bunch of things that I consider serious flaws or at least areas in which I think the device is lacking.

Hitler too was underwhelmed

Awkward screen aspect ratio: Apparently it's something between 4:3 and 16:9. What? Why? What is wrong with 16:9? You tell me.
No USB and no card slots: We have to do awkward things to get pics / movies from our cameras onto this device. Meh. If the internal SSD is full we're screwed. Meh.^*
No replaceable battery: I'm sick of the battery hype. They all worsen over time and I'm sure this one will too. My Macbook Pro now runs for 5 minutes on a charged battery. At least I can get a new one for this machine!
No camera: No snapping pics, no videoblogging on the road, no Skyping with my family and no augmented reality. Kinda crappy if you ask me.
Locked down OS: Nothing is open here. Apple and only Apple decides what we run on this thing. I would much rather have had Mac OS X on this thing.

This book thing...

On a lot of blogs I see the iPad being heralded as 'Kindle Killer'. I think this is an absolute nonsense statement.

The iPad is probably going to be great for old media such as newspapers and magazines. It may even breathe a lot of new life into these dusty old fellows. I can see a lively market emerge for electronic magazine subscriptions. Full color magazines, even with embedded videos. Nice! Books however? Not really. For this nothing compares to E-Ink displays as featured by all dedicated E-reader devices including the Kindle. I'm sure fanboys will insist that it's awesome to read a book on a backlit screen but most serious book readers will most likely disagree. Until someone develops a fast-refreshing full color E-ink screen and Apple implements it in the iPad 2.0 or 3.0 I really don't think any E-reader manufacturer including Amazon will have a lot to be afraid of here.

Viable alternatives

I keep asking myself... what would I do with this thing besides surfing and magazine reading? I honestly don't know. It just doesn't seem to add a lot to what one can do with a subnotebook or a netbook. In fact, it takes stuff away compared to those devices. I also realized that for the price of a mid-range iPad you can buy a used MacBook Air. They go for around 600-800 dollars on Craigs List. With this you get Mac OS X, a keyboard, more storage, a camera, USB connectivity and more in a package only slightly larger than the iPad. Secondly there's of course the option of a netbook. Even though Steve doesn't like it, a lot of us run Mac OS X on these as well. Again, a hell of a lot more functionality for the same (or less) money. And I almost forgot, you can actually type properly on all these devices. Not entirely unimportant if you ask me.

So here it is... The iPad looks like a pretty little gadgets for people with too much money to burn in their pockets. As said, I have no idea what I would do with this thing besides the before mentioned magazine reading and surfing. It's useless to me for everything else due to the lack of a keyboard. The completely locked down selection of software, tightly controlled by Apple doesn't particularly appeal to me either.^**. I wanted the iPad to be awesome, I really did. I wanted to be this thing I couldn't resist buying, even if I wouldn't have the money. Unfortunately it really didn't come out that way for me. Oh well, maybe the iPad 2.0 will live up to the original Apple Tablet hype. Or, God forbid, maybe the Microsoft Courier will?

* You can buy an awkward dongle to connect USB devices. I personally tend to lose trinkets like that within weeks. Doesn't quite do it for me. Besides I think it's ridiculous to pay more money for a feature I expect to be built in to begin with.

** Yes I know, a keyboard dock is available. However first of all: More money to pay and secondly: more crap to haul around in my backpack.

Bookalicio.us version 2.0: an attempt to design the prettiest book blog on the net

Sun, 24 Jan 2010 20:46:00 -0700

It's been quiet on this blog for sure. The latest addition to our family surely requires a lot of time. Now that things have settled down a bit I've finally been able to do a full on new website design and implementation. Bookalicio.us is my wife's book review site. She has been running this site for just a little over a year now and she has managed to become one of the more authoritative YA book blogs. She's become a name in the Twitterverse (heck, she's got twice the amount of followers I have), all major publishing houses are aware of her site and many of them work with her and she's an active member of the book blogging community. This is quite an accomplishment for just one year which is why I thought it's time to take her site to the next level. Professional accomplishments demand a professional looking site. While her previous design didn't look all that bad I felt it was somewhat limiting in terms of what can be done with it. Pam's content could use some more space. Space to grow and to accomodate new things.

A fragment of the new Bookalicio.us

Theme

Bookalicio.us focuses on YA (Young Adult), fantasy and historical fiction. I thought this last category would make a great starting point for the new design. We went with what I'd call a 'retro-Victorian' look based on... a book. I took a photo of an open book and several hours of photoshopping later I had managed to turn this photo in a set of textures suitable for use in a website design. From there it was just a matter of adding atmospheric design elements that together build a mood of a nice evening at the fireplace with a glass of wine and a good book. I added an antique notebook for the tag cloud and recent comments and used an antique bookmark to function as a site footer.

The 'brand'

The old design

The image used in the header of the site is based on a photo I took last year. This photo has pretty much become the site's 'branding' over the past year. It's used in Pam's twitter avatar, her Moo cards and more. Therefor it was of vital importance to keep this one element from the previous design intact. I reworked the photo a bit to look a bit old and ragged but the 'feel' of the first design was carefully preserved. As a result the new design still feels familiar to visitors even though pretty much everything else has changed.

Sifting through reviews, YUI datatable to the rescue

All sorts of approaches are being used on review blogs to allow visitors to order reviews by title, author/source, rating and more. For this purpose I figured the YUI Datatable would work great. It allows any kind of sorting in one compact view. The result of this implementation can be seen on the authors page. After taking care of allowing people to easily look through all reviews it allowed for a somewhat more frivolous approach on the reviews page.

WordPress custom fields

While I'm not a huge fan of WordPress it has one feature I really love: custom fields. Custom fields allow all sorts of excellent customization without the need for specialized plugins. I used custom fields to add several bits of metadata to each book review on the site: book title, publisher, amount of pages, rating and a book cover thumbnail URL. This information is used in the YUI datatable I mentioned earlier. It's also used on the actual review pages as shown in the screenshot.

WP custom fields in action

Finally, the thumbnail field allows automatic generation of a page such as the reviews page. Excellent! If you're a WordPress user and you haven't looked into custom fields yet you definitely should!

A strict 'no clutter' approach

If there's one thing that's 'wrong' with most book blogs that would fall under the same category as Bookalicio.us it's the amount of clutter. For some reason most book bloggers have a tendency to stuff their site with banners, badges, widgets and other stuff that distracts visitors from what really matters: the actual site content. While the design of Bookalicio.us is rather 'busy', great care has been taken to keep the content area calm and the sidebar free of distracting elements. After all we do want visitors to actually read the content! I'm pretty sure nobody would like to read a book riddled with irrelevant illustrations, notes in the margins and other things that try to catch the readers eye while reading the story.

My best advice to Pam's fellow book bloggers would be: get rid of all the bits and pieces that don't really matter. It will greatly improve the experience for your visitors!

Phew, I finally get some stuff done again!

It's funny, just like my good friend Stoyan predicted to me, a few months down the road after the arrival of my son Elijah I'm starting to get some stuff done again. I designed a full WP theme from scratch and succesfully implemented it in about 2 weeks of evening hours and weekends. Not too bad. I guess this means 'I'm back'. Missed me?

Me, version 2.0. Released!

Mon, 07 Sep 2009 21:39:00 -0700

Please welcome my son: Elijah Rhys van Hylckama Vlieg!

PreDevCamp SF Bay Area at Palm HQ - a videoblog

Sun, 09 Aug 2009 10:00:00 -0700

My first ever videoblog. I attended PreDevCamp San Francisco which was held at the Palm offices in Sunnyvale. It was a great day and I used it as an opportunity to do my first videoblog. Therefore there's no need to write more about the day here. Just watch the video! Be gentle with me, this is the first time I'm editing a video ;)

By popular demand: same video on YouTube

Tags: palm, predevcamp, pre

Me, version 2.0, almost done

Tue, 04 Aug 2009 21:58:00 -0700

I'm not much of a life blogger but I had to post this. This is some amazing technology. A 3D sonogram of my baby son, still inside the womb. 6 weeks (or so) to go.

Now you also know why it's somewhat quiet on this site at the moment!

Why I choose the Palm Pre to be my next mobile phone

Sat, 20 Jun 2009 11:42:00 -0700

After having been in the USA for well over 7 months I finally got a cellphone. For a few months I've been thinking hard on whether I wanted the iPhone or the brand new Palm Pre. After I made my decision to go for the Pre I figured let's write a blog on why I made that decision.

I spent ample time trying to decide between the iPhone and the Palm Pre, both very nice and capable phones. Let there be no doubt about that.

It's something new

While the iPhone is a very nice and capable device I must admit I've become a bit 'iPhone tired'. Sure, it has 35000 apps (of which 99,9% I'd probably never use) and it's a good phone overall. I've owned an iPod Touch however and I never managed to get REALLY excited about any of it. Strange if you think of it because I'm quite the Apple fan.

The Palm Pre got me excited at the first video I saw of it. I loved the fact that there was finally something new and cool that's no an iPhone. After the reviews started coming in varying from mostly positive to very enthousiastic my interest increased even more.

Easy app development

While I can't do it YET (I don't have the MOJO SDK for the Pre) I'm dying to get into WebOS application development. In sharp contrast to the iPhone I can actually use my skills to build applications. HTML, CSS and Javascript are what powers WebOS applications. I'm not a C programmer and I probably never will be. I am however quite capable at the latter which is why building Palm apps is in my immediate reach. If you read this, Palm, please send me a copy of the SDK already!

no AT&T

I actually ALMOST got an iPhone. I was really truly undecided for a while between the Pre and a new iPhone 3GS. I got as far as actually going into an AT&T store and ask about a family plan and two iPhones. I hated the store, the wait in the store and the lying employees. When they were finally ready to hook me up I got told they wanted a $500 deposit from me. Apparently people who have only lived in the US for 7 months cannot be trusted. Nevermind the fact that I had absolutely no trouble getting a car loan for over $15k but a phone turned out to be a bridge too far. At least it did for AT&T. I told them to stick it where the sun don't shine.

Then there's the costs. AT&T still seems to think it's totally fine to charge $20 per month extra on top of their already pricey plan for TEXT MESSAGING. I kid you not, TEXT MESSAGING. This means that over the course of your 2 year contract you'll pay a whopping $480 to AT&T to get what I have included in my plan on Sprint. That's almost a brand new contract-free iPhone people!

A keyboard

While Apple claims the keyboard is dead I beg to differ. When owning a Touch, data entry has always been the thing that often made me want to smash the device to pieces. I'm sure all of you Apple fanboys are great at it but I can't for the world input data into an iPhone / iPod Touch the way I can on a regular mobile phone keyboard. I suppose my fingers are too big or maybe I have an undiagnosed case of Parkinson. I don't know. The fact that I can't type on an iPhone at greater than snail-speed is an issue. The Palm Pre has a keyboard. It's small but... it does the job. I can type. W00t!

iPhone Fanboys

This may be a somewhat less 'absolute' reason but still: Apple Fanboys drive me insane. Yes, the iPhone is a great device but come on, really. Apple introduced an initially rather limited device and is now slowly adding features the rest of the world has been enjoying on their phones for for many years. OMG we can now copy & paste! OMG soon we'll have MMS (gotta wait for AT&T to get their act together on that though), YAY! video! Seriously guys, Steve has got you all by the balls. The iPhone is the one and only device I've ever seen that managed to get it's fans outrageously excited about common features that used to be missing. It's like getting all hyped up over Starbucks coffee introducing that their coffee will now be served HOT.

Notifications

The notification GUI on the Pre ROCKS. Period. No intrusive popups. Nothing is gonna interfere with what you're doing on the phone right now. Instead an elegant bottom section of the screen is used to notify you of new emails, texts, MMS messages and other things. It's freakin' brilliant.

Some interesting features

While many iPhone owners don't seem to care about the complete lack of multitasking, I kinda do. It's kinda convenient to stay on IM when you want to look up where you're gonna eat tonight isn't it? It's quite nice when you see a link in your Twitter app and you can actually visit it without shutting down the Twitter app. And there's many more examples where multitasking comes in handier than one may think. I'm not talking about running tons of background processes draining your battery. I'm talking workflow here. Apple can throw in all the marketing talk they want but the lack of multitasking kinda sucks, no matter how you look at it. Funny thing is, I'm sure it will get introduced at some point and the fanboys will probably once again treat it as if a revolution has just occurred. Not so much really.

Then there's the GPS feature. An iPhone is totally USELESS for driving, unless you want to slam your car into a tree while looking at the map on your iPhone. The Pre comes with Sprint Navigator which is pretty much a full blown car GPS system including spoken directions. Like it should!

Rounding up

Once again, don't get me wrong here. I'm not anti-Apple and I'm not a fanboy. In fact I love Apple products and I think the iPhone is a fine phone. I'm not a Palm fanboy either because by no means I think this phone is perfect. I plan to write my own review about it in a week or two after some heavy use. I suppose it really depends on what one wants from a phone (and a provider) which phone is the best pick. For me it turned out to be the Pre. I think the device has tremendous potential and I hope I can get my hands dirty on some Pre app development soon!

Feel free to comment on which phone you have chosen and why! No fanboyism please though!

Tags: palm,palm_pre,pre,phone