And if you’re using a POST with a custom content-type (like application/xml) you’re screwed. What is this business?

So, in Simple OAuth.net, if you want to get an access token, you do this:

var tokens = new Tokens() { ConsumerKey = "key", ConsumerSecret = "secret",
    AccessKey = "key", AccessKeySecret = "secret" };

var request = WebRequest.Create("https://api.twitter.com/oauth/request_token");
request.Method = "POST";

request.SignRequest(tokens)
    .WithCallback("oob")
    .InHeader();

var accessTokens = request.GetOAuthTokens();
tokens.MergeWith(accessTokens);

After you have all your access tokens, and you want to POST, say, a status update, that’s easy too:

var tweet = "status=Hello%20world&trim_user=true";

var request = WebRequest.Create("https://api.twitter.com/1/statuses/update.json");
request.Method = "POST";
request.SignRequest(tokens)
    .WithPostParameters(tweet)
    .InHeader();

using (var stream = new StreamWriter(request.GetRequestStream())) {
    stream.Write(UrlHelper.Encode(requestString));
    stream.Close();
}

This came about because I kept complaining on Twitter about OAuth, and mentioned that OAuth libraries in .Net should just be extension methods off a WebRequest object. I got challenged to make it and open source it, so a couple of months later I did. (Thanks, John-Daniel Trask).

It provides some helper methods to get through the OAuth handshake (like GetOAuthTokens and Tokens.MergeWith), and it doesn’t completely abstract that process away from you. It’s something I dislike about many OAuth libraries, they all try to be all fuddy-duddy and hide the choicest bit of OAuth – the handshake.

So simply,

1. Create a WebRequest object to your OAuth call.
2. Set any Method and query string/form post sections.
3. Start with .SignRequest() and pass in your tokens.
4. Then finish it off with .InHeader()

BAM! Done, you have an OAuth signed request that’s ready to be used. Just call for the Response Stream like you normally would.

It is not a Portable Library unfortunately. It’s currently in progress when I have time (or you could do it, the power of Open Source!). It’s under the MIT License.

• Simple OAuth.net – download, fork and read the docs at GitHub

Well, saying that, it’s the first major front-end release in a while. It’s a pet project, one that I make sure still functions, so recently there have been a few mishaps, both from Trade Me and Google… fortunately, I just needed to upgrade the calls to be all proper in the backend, and with Google I had to downgrade the maps (until they reverted the changes they made earlier this week). Since these changes, things have been working tickity-boo.

One of the first changes you’ll note is the markers have changed colour. Red with a square dot in the middle indicates it’s an open home upcoming, but yellow with a down-facing triangle indicates that it’s coming up in the next… erm… day. There are still time sync issues I need to resolve, one of those issues where I work on the code in one timezone, and the code runs in a completely different timezone. They should be tidied up shortly. The colours should even be distinctive for colour blind users too (even without the symbols).

The bigger change comes in with the info pane. More info, but using less space! Price, bedrooms and bathrooms are all at the top, followed by photos, open home times and the description. The rest of the details (including Agent details) appear at the end. Not only that, but todays open home time appears at the very top so you can quickly glance at it while out and about. The thing you’ll need to look out for is the change of the close button, it’s now a cunningly placed tab on the very edge. This is bigger, and should be easier to hit with your finger on iPad/iPhone/Android.

I had feedback asking for the zoom to stop happening, which is a fair comment as things get a bit crazy confusing when you click on something and suddenly you’re whisked into the middle of no where (a known bug). So, Get a Home will no longer take over your zoom

Meanwhile, if you have it bookmarked on your iPad homescreen, you might want to redo it as it now features a slick new splash screen. No longer do you have to look into the empty white space of no splash screen while the iPad loads in the cached stuff.

I’ve learnt recently that the appcache will take a while to tick over, so you need to either completely clear your cache in your browser, or wait patiently for up to a week before you get it. This shouldn’t be a problem in the future.

• Get a Home for open homes in New Zealand

One of the more curious aspects of this device was that it did what Apple does best… it stripped something and replaced it in favour of something else. While in the past Apple would strip out the floppy disk drive in favour of a CD drive, and these days the DVD drive in favour of the web, in this case they stripped out native applications in favour of web-based apps.

It didn’t last long. The developer community was unhappy that they couldn’t get direct hardware access, invented the term “jailbreaking” and launched Cydia – your iPhone hackers app portal. For Apple this meant the web to take a backseat while things got sorted out, and in rolled an official SDK and an App Store in 2008.

Here we are 3 years later, and what has happened? Well, we’ve got iPads now, and the rise of the “web app.” But not quite where it should be. Thanks to Internet Explorer 6 (and other reasons), the internet is 10 years behind. HTML 4 was released in 1998, and it took a separate working group to develop the next iteration, HTML 5. It’s almost ready, almost. But HTML 5 doesn’t just need the semantic markup, it needs the APIs to access hardware, and for the first time in a wee while, we’re seeing rapid development in this area.

Thanks to the likes of Google, Mozilla and even Apple, we’re seeing some fantastic work being done. You can now access the GPS and the accelerometer. You can have up to eleven fingers of touch input (on iPad and iPhone, and Android 3.x). You can have hardware rendered special effects that run silky smooth. Soon, Android browsers will have access to the camera via HTML 5′s Device APIs. Chrome now enables C/C++ applications. The web standards today are being just as dynamic as the web it’s trying to deliver.

The web isn’t suited to everything, and that’s the case even on the desktop. On the desktop the native application is solving what I’d consider niche problems now. When was the last time you saw someone running a native mail client? The only people who would are running Outlook where email and communication demands are not the same as your general consumer. Games and music players are other examples, however music is already floating up in the cloud thanks to Last.fm and Grooveshark.

Native apps on mobile are sure to do the same… eventually the web will win out and native apps will solve niche problems that the web can’t solve (but may take a couple of years to get there). The current wave of native apps are pretty much a stop-gap. The argument that people expect a native experience all the time is a farce, people are more accepting of differences and quirks more than some realise. Look at the iPhone app landscape – everyone is banging on about “native! native! native!” and then rave about TapBots TweetBot which looks like no other iPhone app on the store.

Is the demand for native apps for websites coming about because websites aren’t creating adequate mobile web experiences? If you look at Facebook, it doesn’t function quite right on the iPad, so demand for an iPad app grows (and is to be announced?). Something that can be solved by Facebook easier if they accept that using Facebook on an iPad sucks. Utilising touch in your website isn’t hard, if you have a photo scroller, use something like jQuery.swipe to add left/right scrolling when someone swipes their finger.

I saw one of my friends’ friends had an iPhone and asked her how she found it, considering she wasn’t the most computer literate person and didn’t work around technologists. She described it as “awesome” and that email on it was “amazing.” Looking at her homescreen however, she was using Gmail. Yup, the mobile version of Gmail’s website. It was adequate for her.

The only factor not in favour of using the mobile web is Apple’s curious decisions with its HTML 5 “App Platform.” Keeping homescreen apps one-step-away from normal Safari, not having any way to upload files (even just photos), and limiting WebGL to their ad platform. Still, it does have the better HTML 5 device support, it’s just the web app developers need to talk louder.

The Canvas experiment was my first foray into touch events. Put your finger down, and it draws circles. Put two fingers down, it draws lots of circles. Put all 10 of your fingers down, and you have a storm of circles.

This uses the touchmove event to loop through all the fingers that are passed through the touch event handler, drawing a circle at each.

The Flick experiment was on applying CSS3 transforms and animations to make a nice smooth effect when you attempted to drag around a box. I’m planning on applying this to Get a Home for the photo pop-up.

Put your finger on the box and drag left/right. Let go and it’ll animate back to its original position. Not only is it using Touch events, but also WebKit Transition Events. Basically, in the touchend event, I apply the CSS3 “Transition” property – “all 0.25s ease” – and then remove the “Transform” property. It makes this nice effect that you’d be used to when, say, you don’t drag your finger enough to go further in a list, or even you are at the end of the list and get that bounce effect.

You can use them in Chrome, but you won’t get the full effect. Plus it appears that Chrome 14-dev is rather broken right now with Canvas. (However, while developing the Flick experiment, I found that Safari Mobile ran it better than Chrome-dev did).

Feel free to modify either as you see fit. There are a lot of effects you can play around with in the Flick experiment!

The cache identifies files that need to be stored on the users device to use in subsequent visits to the site. Funny, you may say, that this is what the cache that’s built in your browser is supposed to do, right? Well… yeah, it doesn’t quite work that way. The benefit of HTML5 application caching is that you explicitly tell the browser to store bits and pieces, and it remembers it, seemingly forever. It also doesn’t even attempt to download those files again, unless either the cache changes or you tell it to.

Get a Home has just enabled this offline application cache support, so I’ll go through the steps I went through to add it in.

First thing’s first, figure out what you want to cache. When you want to cache a webpage, you don’t automatically get a free pass to cache everything on a webpage. As soon as you add support to your page, your site will break. That is unless you set it up correctly.

You then need a cache manifest. This can be any extension, it seems that some use .appcache and others use .manifest. It doesn’t matter, but what does matter is that it must be sent as text/cache-manifest, there is no way around it and if you use a shared host that doesn’t let you change MIME types then your SOL.

The file starts with the line CACHE MANIFEST, and then a list of addresses. These do not have to be on your server, you can provide a full URL to cache or just a relative path. There can only be one per line, and you don’t get a wildcard, nor can you specify a folder to fully download. As an example,

CACHE MANIFEST
style/style.css
script/getahome.js
image/logo.png
image/load-big.gif
image/logo-black.png

You do not need to include the page that is calling it. The page that you set the offline manifest on is treated as the master page and will be included in the cache regardless.

Let’s say you called this file offline.manifest. To add your cache, just add the manifest attribute to your html element, like,

<html manifest="offline.manifest">

Visit your site and, presto! Hey wait… everything’s broke!

Here’s the fun part, the browser will only ever load things explicitly set in your manifest file, unless you add a handy NETWORK section. This section will specify what to give access to no matter. In this section, you can specify folders. But you can also give it a wildcard to mean “anything and everything that isn’t specified in this manifest can be downloaded.” So our example,

CACHE MANIFEST
style/style.css
script/getahome.js
image/logo.png
image/load-big.gif
image/logo-black.png
NETWORK:
*

Now visit your site and, presto! It’s all working again! Kill your internet connection, and try, you’ll see your site still loads.

How do you get it to update? Simple! Add a comment below the 1st line, these start with a #. Change this every time, as the web browser will check byte-for-byte any changes to the manifest file when you go to the page (online). If it’s different, it’ll redownload everything again.

CACHE MANIFEST
# rev 20110531
style/style.css
script/getahome.js

Chrome’s inspector provides some good debugging information for offline applications. Hit Ctrl+Shift+I, and reload your page to see what it’s doing, including what events are fired and where its manifest is coming from. If you go into the Resources section, you can see what files have been downloaded.

If you wish to remove your application cache, Chrome provides a way, but you have to delve a little deeper. In your address bar, enter chrome://appcache-internals to get a list of apps that have been installed, and you can delete them individually.

One thing you may have noticed is that there is a little notification if the cache is set up on Get a Home. This is done by using one of the caching events, there are a few of them, but in this example, I’ll just use the cached event.

var cache = window.applicationCache;
if (cache) {
 cache.addEventLister("cached", function() { alert("Cached!") }, false);
}

That little snippet will throw up an alert saying that the site was successfully cached when it’s completed.

Note that this is best for single page JavaScript applications, not multi-page or those requiring lots of dynamic resources to function properly. You can’t stick an offline manifest on every page of your static site, as it’s likely it won’t function as you expect it to.

Now, one more gotcha before I finish. iOS. You’d think that Apple wouldn’t break something like a simple web view, but you would be wrong. If your application is Web App Compatible, the home screen version of your app won’t use the offline cache. It could be a bug, however it has been around since iOS 4.2, and iOS 4.3 doesn’t even allow web apps to use the speedier Nitro JavaScript engine.

Ironically, one of the best references for the application cache I found was from the Safari Developers Website. No word in there as to how to get the application cache working on home screen apps!

HTML Rocks also has a tutorial on application caching.

And we’re done! The service disruption was mostly because I backed up the wrong database. Fortunately, GoDaddy provided a grace period so I could go and grab that. Phew! Now all hosted by HostGator (and domains with 1st Domains).

So, Get a Home was born.

By using new HTML5 and CSS3 tricks and techniques, I was able to build up a web site that could be used on the PC, iPhone and iPad (Android too, but it’s not tested). It took a while, and some lost weekends, but it is finally here.

I’ll cover off some of the things I did on the site on here over time. And hopefully new features can start pouring in now that some of the little niggles on the site have been fixed (I hope). Let me know what you think!

I have a problem with magazines… what do you do with them afterwards? I no longer have a fine collection of PC World magazines from 1997 through to 2002 when I let the subscription expire, and they just gathered dust. I’m a hoarder, but not of magazines. If the iPad had reading in its future, how did it stack up and would I want to save trees with it?

After a week, I’ve tried four different magazine readers. None of them are perfect, but a couple of them are close. Let’s look!

Atomix

My first magazine purchase was Atomix, the first video game magazine geared towards the iPad. My history of video game magazines goes only to New Zealand Official PlayStation Magazine for the free demo disks that came with it (although, “free” as in, “I paid $16 for this so damn right I get a CD with it”).

Atomix is a well-done magazine. A collaborative effort between Atomix Magazine in Mexico, and Area 5 in the US, with (currently) 50% of content produced specifically for the magazine itself by Area 5. They hope to increase this to about 70-80% in the future. You swipe left and right to go between articles, featured articles have beautiful “cover” images and sometimes animations. You then scroll to read the story.

Rotate the iPad to landscape mode to view a beautiful gallery of images related to the article – but this isn’t the case for every article. There are interactive elements, such as touching cables to see the best video output, as well as video. The first issue has a three part series on iOS gaming and their future, the quality was great.

My only issue was the downloader. The magazine comes in at 420MB, and the software is rather new. If your iPad locks, or you go into another app, you’re going to have to restart the download from the beginning again. They’ve promised a fix in the future, but it seems leaving the app open to download is a curse with all magazine apps. Each issue is a steal at $1.29.

Project, Wired and Zinio at the jump!

Project

I had someone tell me that Project had a free issue going in April, so I thought I’d nab it. Boy, I’m glad it was free. It was the worst app I’ve used, full of bugs and glitches… in fact, I never got around to reading the actual magazine itself due to the annoyance.

Project Magazine is the first iPad specific magazine brought to you by Richard Branson’s Virgin Digital company. As far as I can tell, it’s a mens lifestyle mag. It actually looks like an interesting read, but it’s plagued with problems.

Once again, you have to leave the app sitting there to download it. However at one point the download stopped completely at 44%, and I cannot continue the download any longer (it says that it can’t retrieve issue information). I can’t even purchase it either, so I have a half downloaded magazine sitting there.

One good thing is that while it is downloading, you can actually open and read the magazine and it’ll download each section on the fly. This is great. The only downside was when I did this, every page just said “Waiting” (see right) and I kept getting errors whenever it attempted to load them.

So did I manage to play with anything? Yes, the main feature article on Eric Bana did download, so I had a quick flick through it. Nice high-res imagery, and apart from the line spacing which makes all caps text hard to read, is nicely laid out. One of the interesting things is that you can tap a [+] on the images to get a run-down on what he’s wearing. A nice touch if all you want to see is hotness but don’t care for what label of clothing he was told to wear that day.

One more thing, I almost completely gave up on it when I couldn’t figure out how to get back to the main screen. Being bombarded with “Waiting” and error messages, and then not being able to get back to the library page just made the whole experience worse. It wasn’t until a friend pointed out that you actually tap the lower third of the screen to bring up the menu.

The issue is no longer free, however each one sets you back $4.19.

Wired

Another one I managed to grab while a free issue was running… in fact, the May edition is free right now! Wired is a magazine I’ve known about for years but have never read. It’s not iPad specific, however you could be deceived.

The main landing screen works like any other, browse through issues and hit the Buy button to get it, leave the iPad open on that app only and you’ll have it in no time. If your download stops, it’ll resume exactly where it left off. The large cover view is much nicer, however the default is the grid view.

One of the things I noticed about Project was that the cover video was different for both landscape and portrait orientations, and nicely worked its way as the cover image. Wired on the other hand, has only one video designed for landscape, that seems out of place as once its over it just flashes to the cover.

Actually, while I’m at it… just make the videos easily skippable. With Atomix, I could flick straight past the video on to where I wanted to go. On Wired, I had to tap the screen and hit “Done” to get it over with. Whilst having Andy Samberg with a bobbing head kitten is amusing, once or twice, it gets annoying after your 10th accidental click of the “Home” button. I don’t know why, but I keep hitting the Home icon in the app thinking it takes me to the contents page. I think my mind is going crazy here though.

Anyway, Wired isn’t just a replica of the paper version. It’s a well designed, fully iPad-ified version. Holding the iPad in portrait will give you a different layout (and sometimes different photos) than if you were in landscape. Some articles are complimented with good quality video, and images are replaced with simple galleries and touchiness.

You tap anywhere on the screen to bring up the menu, where you can access the index to go straight to a section. Swiping left/right changes the article and scrolling down lets you read the story. There are lots of indicators that scrolling down should be performed.

It looks like I’ll be making it a regular purchase. It was interesting to read the Wired editors blog post on making it free, indicating they’ve got this digital thing:

But, ironically, a digital edition creates the opportunity to distribute for free in a way you simply can’t in print. There is no real incremental cost to making as many copies as you need (no paper, printing or postage); copies can be made to order (no waste); they can all be distributed from a single location to anyone, anywhere (nobody is left out because we ran out here, even though we have a surplus there).

Each issue is $5.29.

Zinio

If it’s one thing that iTunes hasn’t got yet, it’s a magazine store. I’d imagine Apple want every magazine publisher to do their own thing. For those magazines that won’t, they have the option to go Zinio.

It’s a magazine store and reader for those magazines that haven’t transitioned over to an app on the store, which probably is good. Zinio isn’t limited to iPads however, it can be downloaded for iPhone/iPod, PC and Mac. However, the PC/Mac edition might make you want to throw your mouse into the bin.

This app probably shows that the magazine industry knows what’s what. While an issue of the New Zealand PC World will set you back $8.90 with a one year subscription at $80, on Zinio an issue is $6 with a yearly subscription at $40… yep, 50% off. You can find massive discounts like this all over the show, one magazine I found had the yearly subscription cost at the price of two magazines. Browsing the store on the iPad though is a bit painful, with rendering errors all over the show. It’ll bump you off to the website to purchase it anyway, so you’d mightaswell browse there.

Zinio will automatically download new issues, once again with all the problems outlined above. You can also open up a magazine while it’s downloading and take a look around, which I wish the other two apps in this article would do too.

Swiping left and right flicks you to different pages, and putting your pad in landscape will show the pages side by side. However, don’t expect re-laid out iPad goodness, these are the print version of a magazine transformed into digital form. They can add links (so if you find an article in the contents page you’d like, you can skip to it), and publishers can apparently add video, but I’m not sure which do.

Another thing, images can be low resolution when you zoom in, which is disappointing. Fortunately however, text is always crisp… so long as it isn’t in an image. Sometimes it is like flicking through a paged version of a website, but you can double-tap to zoom in on a specific column of text – you have to do that manually.

Downloading Zinio now seems to give you a complimentary copy of Men’s Fitness and Elle magazines. Also, last week they had a promotion where you can sign up and get a complimentary subscription to a mag for 3 months, however that seems to have finished. The app itself is free.

But that experiment clearly failed.

So here I am, again, the third time, reviving this blog. What a nightmare… OK it wasn’t. The Tumblr is going to be there for old times sake, but the new blog, situation right here on blog.daniels.net.nz will replace it – forever! No more Tumblr!

However, I hit a stub. It seems in an effort to move my Tumblr stuff over to this blog, it screwed up my database. So here I am, back at square one. I’ll slowly import the old posts one by one, they’re still around on my local install of WordPress so they aren’t gone forever.

I won’t be one to post all the time (obviously), but when I do, I hope it’ll be worthwhile. So, what have I done here then?

It’s new, it’s shiny, it’s HTML5+CSS3 in harmony!

Last time I did my blog, I said that it’s HTML5 compliant… by only changing the Doctype. This time around I went all out.

For starters, the layout is all HTML5 syntax… yup, you have your headers, articles, sections. You name it! Thanks to the great Dev.Opera article on using them correctly.

The CSS being used utilises a lot of CSS3. If you take a poke, transitions, transforms, shadows, rounded corners. It’s enough to make IE6 scream… if only it knew what it was it was screaming about it. Then there are the fonts, from the Google Font Library comes Bevan for the headings and PT Sans for the main body text. I’m not a font guru, (or maybe I am), but I quite like them. You may get a flash of unstyled text as they get loaded in.

What’s more, the CSS was done using the fantastic SASS utility, that’s Syntactically Awesome Stylesheets. It’s really made developing and debugging the CSS a joy, so why not give it a shot?

That’s it from me. Enjoy the rest of your night, or day, or morning, or… whatever.

Media Molecule have a pretty awesome office, and really love their community. Got LittleBigPlanet 2 yesterday, very fun!