That is the conclusion after spending most of my time on my last project writing a framework, in order to make the project “easier” to write.

The trouble is every minute you divert to the framework, half of your project dies. And since there is an inherent division between project and framework, by the time you have everything working you have lost your original train of thought.

Then you realize: the project is way behind schedule; there goes a cool feature that could gave landed you a multitude of sales. Or even worse, everyone has lost interest.

Instead, I suggest the following mode of thought:

• Find an existing framework that does most of what you require.
• If the framework falls short, rethink your approach.
• If you find your code has become a mess, re-factor it into a small library.

Don’t be tempted to spend time writing a monolith of a framework. And beware the trap of thinking you can turn it into a product in itself; after all, there is a reason why a large proportion of frameworks are free.

Specifically, i’ve always wanted to track my time, but i never seem to find a solution that works. The solution is either too simple and doesn’t give me any feedback, or it’s extremely complicated and hard to use.

So i set about to make a time tracking solution that was both ridiculously simple to use, and could give me some useful reports back. Thus, Twackr was born!

I modelled the entry system after Twitter: at its simplest, all you need to do is type in what you are doing, and Twackr will start tracking your time instantly. When you are done, simply click on “Finish” and it will be done!

Already spent some time doing something but couldn’t get to Twackr? Then you can backdate entries by adding “-1H“. Still working on something? Then try “-1H+“. Blocking out some time? Then use “+1H“. Want to see if you’ll make the deadline? try typing “1H“.

Time can also be categorised into “Services” (#service) and “Projects” (@project).

You can check out a live demo of twackr on heroku. Just sign up, and check it out – it couldn’t be any simpler!

Like most of my other rails projects, Twackr is Open Source. So feel free to fork it on github.

Anthony explains in great detail how he built the AT-AT, but i couldn’t help but think “I’ve got a better way of doing this!”.

Last year i made a CSS Transform Exporter for Blender, which can take any scene and generate a corresponding version in a nice and simple HTML page.

So it can take this:

And turn it into this:

Admittedly simple, but it does show off the potential power in adopting CSS3 and HTML5. After all, who needs to use Flash when you can make everything work in actual web browser instead?

Whenever i hear someone talk about the Ovi Store, they never have anything good to say about it. Having not experienced the store myself, i remained skeptical.

Recently the Ovi Store on the Nokia N900 opened, so naturally i decided to check it out and see if it really was as bad as people suggested. What follows are my experiences, illustrated with accompanying screenshots.

To Start

First i tap on the “Ovi Store” icon on my device. After a short while, a web browser opens in fullscreen mode. So far, not bad.

Not sure what i want to do, i tap around the tabs (each loading a new page). Now i realise: i just saw something interesting on the last page, and want to see it again. But how do i go back? Well first i need to exit fullscreen mode. Next, i need to tap the back button. Then from the history list which appears:

I must then select the previous slide. *THEN* if i am really unlucky, i get to see the page load again.

Now i decide i want to download a game, so i tap on the “Games” tab. The “Games” page loads, showing:

So now i think “I’ll try and download Angry Birds.” Herein lies a puzzling problem. Nothing happens. A few more taps, and the browser zooms in. Finally after a bit more tapping, i manage to get it to recognise i selected the app. The “Angry Birds” page loads.

Ok, so “Download”. But first i need to sign up for an Ovi Account!

After filling out all the forms, i get a “Thanks for signing up” page. By this time, i’ve all but forgotten what app i was going to purchase.

What would come in handy here would be… i don’t know, some sort of “Click here to continue your purchase” button perhaps? Instead, i have to use… the back button.

Finally, i tap the download button again. This time it loads the “Application Manager”, which after a while asks me if i want to continue installing “Angry Birds.”

At last, the app is installed. Eager to run it, i looked in my applications list, but couldn’t find it. Until i looked closer…

Yes, Angry Birds is represented by… a blue box.

Thankfully though, the app ran fine.

All in all, i found the experience of downloading my free app to be unnecessarily frustrating. I can’t help but feel that nobody was really thinking when they designed the Ovi Store. From the constant page reloading, to the confusing appearance of the app on the device itself. I’d dread to think what would happen if i tried to buy an app.

I can safely say that currently the criticisms i have heard of the Ovi Store are well founded.

As the title implies, the exporter script runs in Blender. Simply construct a 2D scene using planes, add in an animation track, run the script and click Export. It’s as simple as that!

Each plane is exported as a HTML DIV. If present, any Ipos will be exported as CSS keyframes.

The exporter even supports parenting, so you can build up complex hierarchies of elements which can easily be transformed in an animation, or even javascript.

Note that currently the exporter only supports Webkit-based browsers (i.e. Chrome, Safari, MobileSafari). It also has limited support for Firefox (sans animations).

For the curious, there are 3 examples:

• Walking Orange Guy
• Transform Test (not animated)
• Animated Image

As for the actual exporter script, it’s available on github.

Happy animating!

EDIT: For those of you who for whatever reason want a video demonstration, there’s a video of it in action on youtube.

Rather than taking the easy route out and attempting to load the gif using UIImage, i decided to take advantage of glgif’s decode routines to create an accurate representation of the current state of the gif playback.

Put simply, i took the palette texture which is generated for display, and decoded it into a new UIImage.

The actual process is triggered by assigning a delegate (thumbDelegate), which will be invoked when the next frame in the gif is decoded. The delegate is then cleared.

Simple, right?

More Technical Details

The format of a palette texture in GLES is as follows:

The palette can either be 16 or 256 entries long, depending on the format you use. Likewise the pixel data will either use 4 bits or 8 bits. To keep things simple, glgif uses an 8bit palette with 3 8bit entries for the color (GL_PALETTE8_RGB8_OES).

(Note that an 8bit palette can be insufficient as a gif can actually display more than 256 colours across multiple frames, but this is a necessary trade-off for speed)

So in order to decode it:

1. Read and decode the palette
2. Decode each pixel as an index into the palette
3. Using the decoded pixel data, create a new CoreGraphics bitmap context (using CGBitmapContextCreate)
4. Convert the bitmap context into a UIImage (using CGBitmapContextCreateImage and [UIImage imageWithCGImage:])

The resultant UIImage can then easily be used as a base to generate a sized down thumbnail of the gif, as illustrated below.

As always, the code for glgif is hosted on github, so feel free to check it out!

The answer is of course to completely remove Webkit from the equation, which leaves us with CoreAnimation. The end result being that the animation can be directly compiled into an iPhone or Mac OS X application.

Not going into much detail, CoreAnimation is essentially the library used by Webkit to display and animate any elements which have been transformed by a CSS Transform.

The actual scene is simply constructed using transformed CALayers. As for the animation, a CAKeyframeAnimation is created and attached to each CALayer. In the case of multiple properties being animated at the same time, a CAAnimationGroup is used to group these animations together.

The end result is a handy animation class which creates both the scene and the related animation tracks. i.e.:

    CALayer *root = [self.view layer];

    // Make anim
    MyAnim *anim = [[MyAnim alloc] init];
    CALayer *animRoot = anim.root;
    [root addSublayer:animRoot];

    [anim play]; // easy!

As an example, the MyAnim class for the previously featured walking orange figure is as follows.

Which leads onto a repeat of the question, is there a real-world demand for such a tool yet?

This methodology pretty much kills any creative aspirations anyone might have in making these animations. So while there are quite a few cool looking examples out there they lack the glamour of say, flash animations.

It seems to me there is a need for a tool which allows anyone to create these css animations in a visual way. As far as i know, no such tool currently exists. So naturally, i set about making something myself.

Rather than make an entire tool from scratch though, i decided to simply write an exporter script for another tool – in this case, Blender.

Why Blender? Well, it exposes pretty much all of the information i require to construct both a scene and animation tracks. Also, since Blender handles 3D scenes, there is a potential to work with 3D CSS Transforms in the future.

As an example, here’s a simple animation of an orange stick man walking across the screen. The stick man was both constructed and animated entirely within Blender, and exported using my export script.

And the scene as seen in blender:

Which is simply a set of planes linked together and animated. Really, it couldn’t be any simpler.

Currently the only browsers which seem to support both CSS transforms and animations are based off Webkit. i.e. Safari and Chrome (including the iPhone and Android browsers).

Which leads onto the question, is there a real-world demand for such a tool yet?

Wrong.

In fact, i can officially reveal that with the exception of development contracts, my iPhone apps have netted me a grand total of:

£0

Yes, £0. It takes a lot of face up to facts, but it can’t be much more blunt than that. Granted i did sell a few units, but these were nowhere near the amount required to release any real payment into my bank account.

So what went wrong?

Well to be quite honest, i didn’t really market my apps at all well. I was hoping that simply being in the App Store combined with a word-of-mouth viral networking effect combined with some online ads would be sufficient. From there i could perhaps get some feedback, and introduce improvements in line with demand.

Did it work? Far from it.

Sadly since the iPhone market is pretty much saturated with thousands of apps, this is pretty much impossible to accomplish. You’d probably have more chance winning the lottery than going with that approach.

I even tried making one of my apps free and promoting one of my paid apps in the description. The actual response in sales was negligible.

It seems to me the only viable ways of attracting people to a new app are:

1. Getting it featured on the App Store
2. Pushing it out to as many review sites as you can ahead of time
3. Making it free

With regards to #3, not getting into in-depth analysis i will say this: if you have an app with a remotely useful purpose, people will consistently download it.

For example one of my apps, Anim8gif, gets at least 20 downloads a week – mind you, that figure isn’t really useful since none of those 20 people bother to write a review or send any useful feedback.

Right now though, i’m a bit tired of spending my budget coming up with the next big idea with elaborate marketing that’s likely to bring in tons of revenue. So here’s what i’m going to do.

I’m just giving up on making money off my own iPhone apps altogether. All my current apps: Anim8gif, VidSplit, and Overthecam are now free.

As for making future free apps, i am still undecided. Am i really getting anything out of the experience? Current signs point to no.

Note: Examples only work in Safari 4+, or other recent webkit-based browsers.

“Cool?” you say. Well admittedly i could have gone for something a bit more elaborate, however as it stands it pretty much serves its purpose – that is to demonstrate that using the magic of CSS Transitions you can create fast, useful web effects which run at acceptable framerates on an iPhone, and even on the desktop (since the tweening of properties is done by the browser).

However to get this admittedly simple demo working, i had to battle through a few odd issues with how these transitions operate.

The problems

To start off, resetting transitions is a bit tricky. Since properties are not processed immediately, you need to wait for the browser to detect you have reset transition values before you transition to any new values.

Thankfully a nice event called webkitTransitionEnd is provided which is fired as soon as a transition is complete, so you could conceivably use it to handle resetting the transition.

The only problem? webkitTransitionEnd seems to only fire when it feels like it.

The above example demonstrates the peculiarity of webkitTransitionEnd. The green/pink circle is meant to change colour every time the event is fired. Since there is an interval running every 100ms which changes the rotation of the circles, what typically happens 99.9% of the time is the transition never really ends, thus no event.

In general, the transition event seems to behave as follows:

So safe to say, unless you’ve got a transition you aren’t going to mess about with then don’t rely on webkitTransitionEnd.

Onto quirky platforms…

Finally, with regard to the iPhone platform there are even more quirks. Compared to desktop Safari, the tweening acts quite differently.

One notable quirk is if you make a new element with a transition on Desktop safari, it performs that transition. If however you do the same thing on Mobile Safari, the transition starts at the end. Whether or not this is some bizarre timing issue, i have no idea.

So safe to say, while CSS Transitions are a powerful tool to use, beware of the quirks.