CSS Transforms combined with animations are undoubtedly useful. Unfortunately though, the only way to create them is to manually input values and pretty much guess the result.
This methodology pretty much kills any creative aspirations anyone might have in making these animations. So while there are quite a few coollooking 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?
After almost a year of developing a and releasing a handful of iPhone apps to the App Store, i should be rollinginmoney, right?
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:
Getting it featured on the App Store
Pushing it out to as many review sites as you can ahead of time
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.
Recently in a little experiment, i made a rather cool demo which makes use of CSS Transforms, combined with CSS Transitions.
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:
Setting…
Result
Initial transition (element just created)
FAIL
Transition continuously (during transition)
MOSTLY FAIL
Transition after a sufficient undefined delay
PASS
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.
Recently it has come to my attention that there is no way to view hints on images on an iPhone.
Normally on any modern desktop web browser when you hover your mouse cursor over an image, a hint if provided will be displayed. Certain websites use these hints to comedic effect, and it’s a shame you can’t see them.
Fortunately i have come up with a nice and simple bookmarklet to solve this issue. Simply add it to your bookmarks in Safari, sync over to your iPhone and run the bookmarklet.
To view a hint, simply hold down two fingers over an image. The associated hint will be displayed in a pop-up alert.
Drag this link to your bookmarks to add the bookmarklet.
It’s been a while since my last truly silly project, so i thought i’d come up with something else.
There has been a lot of talk recently about how the web is essentially replacing desktop applications, which to me sounds great.
But there is something missing from this new age of web applications. In order to run web apps you need a web browser, which is still a desktop app. It seems to me odd that a platform which replaces another still requires that platform to operate.
Which is where htmlcanvas comes in. It’s a HTML renderer implemented in JavaScript, which runs nicely in any capable web browser which supports the Canvas element.
In essence, it’s a web browser implemented within a web browser. The above example was rendered from this HTML:
<html>
<head>
<title></title>
</head>
<body><!-- Begin test -->
<p class="woo" id="render">
Rendering <b>HTML</b>...</p>
<p><span>In <b>Canvas</b></span>!</p>
<p>0_0</p>
</body>
</html>
This sort of recursive abstraction is not uncommon in the computing world. For example, C compilers are written in C, Pascal compilers are written in Pascal. There’s even a version of Python implemented within Python. So a web platform implemented within a web platform is quite natural.
Still, it will be a long while before htmlcanvas is remotely capable of running within itself, so a truly recursive web browsing experience is still a long way off.
As with most of my silly projects, the code to htmlcanvas is hosted on github. Fork it here!
Note: Currently only known to work in Safari 4, FireFox 3.5, or Google Chrome.
I recently stumbled across the much-loved Jekyll, a “blog aware” website generator.
I say “blog aware” since i have yet to be convinced it is. Jekyll seems to work fine if you have a flat layout of _posts with topics, but as soon as you stray away from that, it begins to fall apart.
An Example
I’ll give you a real world example. This blog. Simply enough, i’ve got posts organised into categories. I’ve also got a few tags on the posts, though they are mainly intended for the website feed. After reading the Jekyll documentation, it says:
Categories are derived from the directory structure above the _posts directory. For example, a post at /work/code/_posts/2008-12-24-closures.textile would have this field set to ['work', 'code'].”
So i think “right, i’ll make folders for my existing categories then stick their posts into each respective _posts folder“.
This actually works rather well: if i list {{ site.posts }} from /index.html, each post gets listed with their .categories attribute set.
However if i list a posts .categories in the actual post, the list is mysteriously empty. It’s like Jekyll decided to make the categories act as some weird reverse breadcrumb system. Why this would be remotely useful, i have no idea.
The problem with how posts are listed gets further compounded when you start to use topics. All of my real blog posts are tagged “blog”, so in order to list them i actually use site.topics.blog. This works fine, until i try and list posts from within a “category”.
For some bizarre reason, the list of posts varies depending on which category you list from. For example, i have a /feed folder which contains an rss feed template. The only posts listed in the feed are those in my “dev” topic.
My only guess is that since alphabetically “d” comes before “f”, Jekyll is going through each category one-by-one and making posts on-the-fly. Pre-processing? We don’t need pre-processing!
The only real solution seems to be to store all of your posts in the top-level _posts folder, but that sort of defeats the purpose of using a folder-based category system.
Onto pagination and beyond!
Now assuming you have got your posts sorted out, you’ll probably want to paginate them, right? Well good luck with that; while Jekyll will allow you to split posts up into pages, the paginator is a global option. So if you want pages, you’ve got to have pages on everything.
Got multiple lists of posts on a single page? Well watch out, you could be in for a nasty surprise!
Which brings me onto the rather limited Liquid markup Jekyll uses. Now i don’t have much of an issue with the Liquid markup itself, after all i thought it was used rather well in Mephisto.
But in Jekyll, i’m constantly trying to find a workaround for its rather limited set of liquid tags. Want to list posts by date? How about multiple tags? Good luck with that!
So safe to say, unless you have a pretty simple blog with a flat layout then out-of-the-box Jekyll quite simply doesn’t cut it yet – sad but true.
Unfortunately it’s still in development, so it’ll be a while till the general public can get its hands on the awesomeness of this game. Still, when it’s available you’ll be sure to find a nice mac version.
So until then, keep your eyes peeled for Frozen Synapse!
Back when the Android SDK was first released, i thought i’d check it out. Turns out there was a google competition where you could win cash prizes for making android apps. “Simple!”, i thought. That was until i looked further at the SDK and found it to be far too incomplete and with little documentation.
Safe to say, i didn’t make an Android app.
Recently, the has been another Google competition so i thought i’d check out the SDK. “It’s bound to be far more mature and usable!”, i thought (not to mention it’s supposed to be the greatest platform in the world to develop for). Unfortunately, it was just as bad as it was the last time i looked at it.
The Problems
Firstly, it’s based on Java, which isn’t really Java. Even so, it inherits all of Java’s problems. A weird and nonsensical class hierarchy for one. The overuse of abstraction for fairly simple API’s is another. Not to mention, the overload of XML files, which seem to permeate everything you do for no good reason.
In general i’d probably call it a rewrite of J2ME, only 10 times worse. Why worse? well at least with any decent J2ME SDK, you usually get some sort of usable GUI builder. Instead with Android, you get this mess…
Seriously, it’s the 21st century and i’m reduced to building a GUI using a spreadsheet and dragging a few nondescript labels around the screen in the vain attempt to build something which actually looks good. It’s so bad, even the tutorials recommend editing XML files rather than using it.
Earth to Android: people were making far better gui builders as early as 1989.
The distributed emulator application doesn’t exactly instil me with confidence either. Not only do i have to wait 5 minutes for it to boot up, it’s also horrifically slow for anything other than a simple “Hello World” application.
Seriously, if Android is supposed to be OS agnostic, why not make a simulated environment rather than a whole emulator? Would be a whole lot faster and usable if you ask me!
And of course, the real killer. The preferred IDE is…
If you asked a bunch of random strangers to build a bridge, you’d get a hideous construction which leads nowhere. In a similar vein, Eclipse is built by a complete bunch of strangers and ends up being an unusable mess. What’s worse is they’ve had 3 whole versions to sort it out, and rather than getting better it seems to be turning into an increasingly bloated mess.
I’ll give you an example. The code window is by default cramped in the middle of the window, it’s like looking through a keyhole to get at your code. Want to find the configuration settings? Good luck. You’ll have to dig through a whole myriad of menus just to change the font size.
Lets not forget the quirks. Want to scroll through a list using a mouse wheel? Well you’d better watch out for those pesky hint boxes which pop up and completely block focus.
But i digress; continuing with the Android SDK, another issue i have is with the actual documentation. Most of the time it follows a policy of listing what i can do, but not giving me any good examples of how to do it.
I’ll give you an example, looking at the “3D with OpenGL” section:
“Writing a summary of how to actually write 3D applications using OpenGL is beyond the scope of this text and is left as an exercise for the reader.”
Want to write OpenGL applications? We’ll just vaguely describe how you could do it and just leave you to guess it all out on your own. Not that your app will be usable on all devices of course.
It also likes to mention technologies with little to no explanation of what they do. Taking the “Audio and Video” section as an example, a reference is made to “Playing JET content”. What is “JET content”? I seriously have no idea.
Not to mention, there are a lack of comprehensive tutorials.
Take the Notepad tutorial for example, for every exercise you have to start from an archive of what the project should look like. It is impossible to follow the tutorial through without starting all over again with these archives.
There is even an “Extra Credit” section. I’m not even going to comment on that one.
Really, it feels just like i’m copying and pasting code. i.e. not learning anything.
To Conclude
So safe to say, i’m not going to make an Android app anytime in the near future.
Now i realise why Google is offering cash prices for making android apps: The SDK is so horrible, you’ll need all the money to pay for the therapy you’ll need after you finish your app.
Those of you who happen to follow me on Twitter might have heard a while back that i tried releasing a camera app for the iPhone, which simply allowed you to overlay arbitrary images as guides over the camera.
Unfortunately it was rejected last month because of the following criteria:
“3.3.1 Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs.”
Which to me was extremely annoying. Until you get rejected for something as arbitrary as this, i don’t think one truly understands how frustrating it can be to have a weeks worth of work flushed down the toilet.
My objections to this were as follows. All the API’s i used were documented. I simply made a UIImagePickerController, a UIView and overlaid it on top of the camera view. The only potentially problematic thing i did was to check for the presence of the TPCameraPushButton in the view hierarchy (again, a public api) to see when the overlay should vanish.
This check was written in such a way that if the class name of the camera button changed in a future release, the overlay would just stay visible all the time.
But no, apparently i didn’t use the API correctly “in the manner prescribed by Apple”. Thus no camera app was released.
Now i would have just left it there and waited until Apple made a nice API for me to properly overlay images over the camera (if ever), but what do i find posted on tuaw today?
Yes, a camera app which overlays images on the camera. But not only that, it completely modifies the camera, and what’s more, it was both updated and approved well before and after my application.
(Note that i did not know about this particular camera app before i made mine. In addition it doesn’t appear to allow custom overlay images, one of the features of my app)
I guess it’s ok to make a camera application which completely modifies the camera UI. But if you just overlay images and check to see if the camera button exists then no, that doesn’t utilise the API in the manner prescribed by Apple.
So i have a challenge for you iPhone Developers out there. I have released the sourcecode to my ill-fated camera app, OverTheCam, under the GPL. Your mission, should you choose to accept it is to get it approved by Apple.
I’m going to award points based on :
How much of the app you need to change to get it approved.
How many “Camera Genius” UI enhancements you can get away with
How long it takes to get approved
The alternate name you pick
Additionally entries designed for any version of the OS later than 3.0.1 will not be counted. I’d also like to point out that you’ll also need to change the name of the application when submitting, for obvious reasons.
So what are you waiting for? Grab the code here on github and get submitting!Update:Since overthecam has finally been approved on OS 3.1, the competition has ended. The code is no longer available on github, but feel free to pop over a message if you want to check it out!
For a few years now, i’ve been hosting this site on Dreamhost. Despite the subpar performance, 90% of the time the site was up churning out requests, which for me worked out great.
Still, there’s something about shared hosting that makes me cringe, so i’ve been meaning to move to a VPS (Virtual Private Server) for quite some time now. After much consideration, i’ve decided to go with gandi.net. The reason? I’ve tried it before and they offer a fair price for what they offer: a single 256mb “slice” for $16/month, scalable up to 16 slices.
It may be a little bit more expensive than Dreamhost, but in the long run, i reckon it will pay back in terms of uptime and expandability.
