I’ve been working on a web-site that used the jQuery framework to render content on the client side and get information from its back-end, via XmlHttpRequests. The whole built-up worked just fine of every modern, popular browser available in the market – like the Firefox, Internet Explorer or Safari (on the Mac platform). Now, I had to test the site and make it workable on the iPhone-plattform as well. The site itself uses OAuth as authentication method and provides the information within a HTTP-header named “Authorization”. The theory is pretty plain: The back-end receives a request, checks for this header and responses accordingly.

However, iPhone’s Safari didn’t behave like the other browsers did. For whatever reason, the XHR was sent to the back-end, including every header that was set on the JavaScript side – except the “Authorization”-header. First, I though that Safari maybe could not handle the parameters of this header, but when I just renamed the setRequestHeader-argument to “Auth”, it worked. It simply just worked.

This happening made me search for other users experiencing this problem, unfortunately there doesn’t really seem to be many users testing JavaScript-sites on their iPhone – to be more precise, I did not find one result on Google that describes the problem I’m experiencing. I though, “Oh well, why not call Apple’s Technical Support?” – bad mistake. I got connected to a very annoyed and stroppy telephone-support which tried to convince me, that the iPhone’s Safari yet does not support Java. When I repeated myself by saying “It’s about JavaScript“, he didn’t really make the impression to understand the difference. I told him what the actual scenario was and all I got as answer was “Fill out the Feedback form on Apple’s site”. This made me a bit angry, because I more and more got the feeling of him trying to simply get rid of me. I asked for someone who is more technically involved into the whole iPhone stuff and he answered with “You’re already calling the most-advanced technical support – there’s no way to go further!”. At this point total disappointment overcame me and the only thing I thought of saying before I would hang-up the phone was “FAIL!” – luckily I was behaving more polite than the support-guy himself. Eh.

The end of the story is, that I (once again) wrote a report via Apple’s Feedback form (which from my impression is saving the submitted content to /dev/null) and implemented a workaround for myself by renaming the “Authorization”-header to “Auth”. Yet again a scenario in which I’m feeling like talking to a wall of bricks and have no possibility to get any information regarding my problem or maybe even correct this sort of bug. I think, this is the other side of closed-source software.

However, I’ve decided to take a quick look at the current iWebKit version and patch the framework to have the sliding-animations working again, even on the latest version. Now, that it seems to be working here and also it seems to be working for Christian, maybe others can also benefit from this.

If you would like to use the sliding-animations (no warranty! :-)) on your iWebKit-based design, just download the Framework package attached to this post and apply it to your iWebKit installation. It should be working pretty much out of the box.

Feel free to report bugs if you should find any regarding the sliding. Enjoy!

Download iWebKit_4.6.2_Framework-likability-patch

Modification of Flarup's "Glow"

Today I’ve just played around a bit with Bluebird and its theme-ability to make it fit more into my actual desktop. First of all, I took a look at what theme I could use best for my first tries. I decided to choose Michael Flarup‘s “Glow”-theme. The theme itself looks very neat and tidy and provides cool effects like avatar-reflections and a menu for each tweet.

First of all, I took some new picks on the colors of each tweet (regular tweet, reply, direct message, own tweet) and turned the gradient around, so that it doesn’t “pop-out” but looks more like “punched-in”. Then, I’ve changed the fonts used by the theme. The CSS definition for the fonts now look this way:


...
font: 12px/16px "Berthold Akzidenz Grotesk BE", "Lucida Grande", "Verdana", "Helvetica Neue", "Arial", Sans-Serif;
...
font: 13px "DIN Medium", "Verdana", "Helvetica Neue", "Arial", Sans-serif;
...


Unfortunately the first fonts to be used (Berthold Akzidenz Grotesk and DIN Medium) are commercial fonts which I can’t just pack-in and distribute. Though, it doesn’t look that bad using the Lucida Grande/Verdana fonts.

However, after that I’ve fixed a bug the theme had at least on my Mac (Safari 4), where the background-height was too small so that a small white line always remained at its list’s bottom.

If you like the theme, feel free to download it here and comment on it.

Enjoy!

WebKit Development Tools

In the past few weeks, I was involved into heavy JavaScript web-development at work and had to work with tools that allow me to debug dynamic web-content in an effortless way. Most people would now say “Use Firefox with FireBug addition!” and I would even agree with them, if I would be using some Windows operating-system instead of my lovely Mac. Everyone who has ever used Firefox on a Linux or a Mac OS X will know, that it’s a pain in the arse. Due to the way Mozilla-developers have taken to make Firefox available on multiple platforms, it lacks of any speed and integration within most implementations.

So what to do on a Mac, where Firefox trying to render a full-blown AJAX-site needs more space and CPU-power than a VMware or Parallels instance of Windows XP, running the IE? Most people don’t really know, that the Mac’s integrated browser already provides a very good toolset for web-development which just got even better with the version 4 (yet, still Beta) of Safari.

The toolset is hidden, on a regular OS X, but it can be unlocked pretty easy. The only thing you gotta do, is quit your Safari, open a Terminal and enter this command:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true


It should quit without any output. After that, you can quit the Terminal and re-start Safari. You might not see any difference to Safari’s appearance before spawning the command, but now just try to do a right-click / command-click within a web-site. You will see, that your popup-menu has just been extended by one new item at its bottom, called “Inspect Element“. By clicking this entrie, Safari either opens a new window or separates your current one with an additional view, depending on what Safari version you’re using. This command works on 3 and 4.

Within that window, you will see a lot of useful information about the page. You can see time and size measurements, script-warnings and -errors and many many more. This extensions to Safari’s WebKit provides you nearly everything you might know from FireFox Add-Ons like FireBug. And besides of that, it allows you to profile your page in a sleek and easy, graphical way.

I’m now working quite some time with those tools, exactly because of all the problems I had with Firefox on my Mac, and I must say that I love them. I love the integration and the way it allows me to debug my sites. The only thing I liked more in FireBug was the precision of its GET/POST/PUT/…-output, but most of the time I don’t need that anyway.

Enjoy!

The red block let's you choose.

I’ve been now using Prologue for quite a very long time – I guess longer than I’ve ever used one WordPress theme before – and I’m highly pleased of it. However, even that Prologue has a built-in iPhone/iPod Touch browser-detection which cuts away the sidebar and only keeps the important news-stream in focus, I haven’t been very satisfied by that. The font is still pretty small, nearly unreadable, the links are therefor pretty hard to hit, et cetera.

However, yesterday then Andi showed me some pretty nice little framework he just found, what actually doesn’t have anything to do with WordPress itself, but made me think of a very cool idea. The iWebKit-Framework is a small set of CSS and image files that concentrates on building a website in a way so that it looks just like an iPhone or iPod Touch Application. The whole thing’s appearance is pretty sexy, you can take a look at the downloads and get the framework plus some example HTML files for testing.

My optimized front-page.

So, I took a closer look on the iWebKit stuff and did some (again better, a lot of!) PHP WordPress theme hacking. I think I spent the whole night building that thing – but I also think that it was worth it, heh. And I guess, I’ve created a revolutionary and new WordPress theme aimed for the usage on iPhones and iPod Touches – the only problem I had left was: How to I get WordPress to use this theme only on the tiny Safari, but on nothing else? After some more PHP hacking, which included modifying my Prologue theme but not the actual WordPress (what’s the really cool thing within the whole story), I’ve found a way.

When you browse my WordPress now using your iPhone, you should be getting a red message right on top of the site, which tells you that it has detected the tiny Safari and suggests you to use the iPhone optimized theme. If you confirm by clicking the first link, the whole site’s design should get to look just like on the pictures I’ve inserted here.

My contact information - optimized.

I will extend the theme some more, maybe by building in JavaScript effects or other Eye-Candy, to make it fit even better into the iPhones Look & Feel. I was also thinking of some Cover-Flow’ish effect for my Gallery (which at the moment just links to my Picasa-Site, but thanks to the great API provided by Google it shouldn’t be too hard to implement that right into the page).

Maybe, after some more testing I’ll be able to provide it for download, including a whole documentation of how to make it work. Until then, I hope you enjoy browsing my Blog, especially over the iPhone or your iPod Touch. Please feel free to write me your impressions, feedback and also suggestions for improvement by commenting here or writing me an e-mail. So far …

Have fun!

Safari 4 Top Sites

Okay, so for now already two days I’ve been testing the public beta of Apple’s new Safari 4 and I need to say that I’m pretty impressed. While talking to colleagues and friends of mine, who seem to be having quite some problems with the browser-beta, I personally can’t confirm any of these.

The noticeable features regarding Safari 4 are the tabbing-feature, the browser history and of course the brand new and likable ability of displaying a graphical “list” of the most visited websites. However, let’s start with the “Top Sites”. By default, Safari opens this as homepage for each new window. I personally turned it off, since I don’t actually really need such a feature. But I think, Apple just tried to copy Google’s Chrome on that. Yet, the feature is – at least on my internet connection – really slow. In my first test, Safari did not manage it to load all previews in an acceptable amount of time, as you can see on the screenshot. This feature can be turned on by pressing the new button (the one with many tiny squares) contained in the Bookmarks-bar.

The browser-history became something of a mixture of the Top Sites preview-feature with a Cover-Flow combination. By that, the history can be browsed now using a graphical interface that display a preview of each site. And I think I don’t even want to know how much disk space and cpu-power this feature needs… but eh.

And of course the last any maybe most important, noticeable feature: The tabs. Actually, Apple moved the tab bar which was beneath the Bookmarks-bar before right into the window’s title. On the right to corner, there’s now a plus-icon for adding a new tab to the window. Moving tabs within or even across different windows is still as simple as it was before, just that now you know exactly which window contains what tabs, even if the window’s in background with only the title-bar visible.

Safari 4 breaking Adium Style

Of course, Apple also improved the browser’s Webkit backend with many different new features and speed enhancements. This was the first thing I’ve noticed, even without having Safari running. How? Well, somehow, after installing the new beta, restarting the system and opening Adium, my Message-window style was broken. It seems like the new engine does something different regarding the CSS stuff that was used by the theme. By that, the picture-reflection didn’t work out anymore the way they should.

Altogether I’m pretty happy with the upcoming version of Safari and despite all other, negative comments I’ve heard, I have to say that here it’s working pretty cool. Of course, I did not have any obscure plug-ins installed in Safari 3 (oh, wait, I had, Cooliris… where is it now, by the way?) nor do I run a MacOsX86 Hackintosh. Heh.

Besides of the missing time, I did quite some clubbing and out-going together with my lovely girl and with buddies of mine. Last weekend we’ve been ice-skating, the weekend before we went clubbing, and so on. Tomorrow I’m planning to visit the Rocker33 in STR – LTJ Bukem and Mc Conrad will be in the house, spinning the vinyls.

What else is new… oh yeah, tomorrow and next monday will be my last days at work until holidays start. Besides, the weather here is really crazy… yesterday a snowstorm started and a total chaos came up on the streets of Filderstadt. The busses couldn’t reach some of their stops anymore, the traffic was actually standing and nobody could really move. Funny stuff, luckily that I have been home until it got really crappy.

And, oh yeah, while talking about new: I just upgraded to WordPress 2.7 and have to say that I’m shockingly amazed by the new administrative-interface design. In my opinion, it looks pretty cool. Of course, it’s full bloated AJAX, but I really like it. Especially since my Safari displays is very clean and tidy.

Oh well, I guess, that’s enough slipslop for today, heh.

Btw: I forgot, today I finally received my cool new mugs! Yay! I love them!

So I thought, let’s upgrade to 3.0.3. And so I did. Well… same thing happend. After searching for a solution for around two minutes I completely deleted this bunch of crap and installed Apple’s Safari. Which works. Without touching anything. Nothing. Not even one thing.

However, I think I really got sick of all that stuff that doesn’t just work, at least at home.

The second thing is the more and more used Shockwave/Flash stuff. With Firefox, I can play videos on YouTube smooth, fluent and with not-that-much CPU load, while the Epiphany nearly hangs up when playing such videos, produces a very high CPU load and the videos itselves studder so that it’s really no fun to watch them.

The third thing that became really annoying is the crashing. My Epiphany keeps on crashing while browsing especially sites with much content or Flash components. That’s really annoying, and the only advantage is, that Epiphany now aks whether to recover the lost session. But even this can become one’s doom when Epiphany re-loads exactly that site what made it crash and understandably hangs up/crashes, again. You can’t even click on the [X]-button, since the interface stops reacting as soon as it’s being displayed. It’s a bummer.

Now I’ve started using Iceweasel for sites that might crash Epiphany and became even more disappointed about the whole stuff. I thought that Epiphany using the Webkit version could maybe solve my problems, but unfortunatelly it’s still very unstable development code and besides, it doesn’t have any Flash-plugins yet. So I think I’m forced to start using Mozilla’s original, even if I dislike it. The freedom to choose (a.k.a. OpenSource) really is a big deal when you have ten products, out of which eight are not using the toolkit you’re working with/do not integrate at all into your desktop, and the preffered one of the two choices left doesn’t do the job at all. On this situation, I say, feel free to restrict me to one choice, which at least integrates and works the way I expect it – talking about Safari on the Mac.

By the way: Webkit is the way to go. Forget this damn Gecko engine.

Great job, Apple! And by the way: Why does this Updater wants to install Safari, if the only software I’ve installed on that Windows is an iTunes?