Version 24-09-2011 is live, and what does it bring?

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

Back in 2006, Apple had announced the iPhone. It was slick, it was the combination of the iPod, a phone and internet connectivity. It was unique, it was touch based, and I’m pretty sure we’ll look back at the launch of the iPhone as one of the definers of technology for the next decade. Device makers had never built a device that is for personal use with such power, of course we had the Palm’s and Windows Mobile’s, but they were designed for business. For once, a smartphone was developed for your life, and with that, rolled in a new generation of touch-capable, internet-focused devices from all over trying to catch on to the pie.

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.

I had been talking on my Twitters about experimenting with HTML5+CSS3 with touch events a few times, so I thought I should share as someone out there might find these useful. I got my iPad to play around with touch, and it’s already given me a few ideas about what to do next.

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!

So you have a fancy new mobile web app, it loads OK, but wouldn’t it be good if the user was in 3G they didn’t have to suffer longer load times? Or waste their bandwidth each time they loaded your large JavaScript? HTML 5 thought this needed rectifying, so in rolls the Web Application Cache.

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.

Get a Home and this blog will experience a little disruption as they switch servers. This has already been kicked off, Get A Home will regenerate with a new version with lots of enhancements, while this blog will die for a little while until I fix it. Patience!

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).

Mobile is going to be big, so what better way to dig your heels in by making a web site that’s made with that in mind. For a while I had been thinking about what to do with the Trade Me API, and it hit me just before Christmas last year that there are lots of Google Maps + Trade Me Property mash-ups, but not many specifically for open homes.

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 am now a proud iPad 2 owner. When the new one was announced, it was pretty much a done deal (and no, I didn’t have a first generation one). I sold my old MacBook and moved into the touch. One of the things I wanted to get it for was reading, so I started with the magazines.

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!
Continue reading…

OK, OK, I’ll admit it. I screwed up! I thought I’d take this blog to Tumblr and everything would be awesome… I’d post more, I’ll be able to bring more of personality to it, etc etc.

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!

Valve has just announced that the PlayStation 3 version of the game will feature cross-platform multiplayer (with your mates on Steam PC/Mac), and even Steam Cloud (all your save games are stored on their servers so you never lose them). This is what Gabe Newell meant when the PS3 will be the only console with the full SteamWorks experience.

But wait… there’s more… you get the Steam version of Portal 2 as well. So that means that with the PS3 version of the game, you get the Windows and Mac OS versions along with it. You can play the PS3 version, and then pick up where you left off on the PC/Mac, and back again. Brilliant!

This is coming from a company that has publically dismissed the PS3 as a gaming platform in the past. I guess a little sweet talking and some leniency of the platform developer allowed for everyone to benefit in the end.

No word on whether the Xbox 360 version would come with a Steam version, however it certainly won’t support Steam cloud or cross-platform multiplayer due to the restrictions on that platform.

• Portal 2 on PS3 features cross-platform chat, multiplayer and a free Steam copy | Joystiq