Withings drinks the kool aid

Posted on Thursday, December 22, 2011 @ 12:16 CET

We own a Withings scale as well as the blood pressure monitor with the aim of getting healthier - being able to measure this stuff and see progress is a great motivator.

We logged in today to the dashboard only to see that things weren't working quite right.

Gone was the ability to scrub, and also the dates at the bottom were strange. "Aou" for August and two Septembers. I believe the first error is because its showing us the dates in French for some reason. The second I'm not so sure about.

The close button for the weight panel is also a tiny little "X" that you could select with your mouse. At which point it became apparent. They have HTML5-ified the dashboard.

So the question is why. To join the cool kids in the anti-Flash movement perhaps? Initially I thought well now it will run on my iPad, except they already built an app for that. Luckily all is not lost. You can click on the "Standard dashboard" link to go back to the old Flash-based one and scrub to your heart's content.

But this isn't about Flash vs HTML.

My problem with this is that they replaced their dashboard with one that does less, works worse and set it as the default. WTF dudes?

Lastly, if you resize your browser window it doesn't scale. And they call this the "Enhanced dashboard".

By all means embrace and play with new technologies - but the only direction to go is up. If the experience is not better then don't throw out the baby with the bathwater.

My suggestion is simple: detect if Flash is installed, if not serve up the new dashboard. Otherwise keep the old one as the default until these issues get resolved.

- paulo

Permanent link 2 Comments »

Automatically generating an HTML5 cache manifest

Posted on Monday, September 26, 2011 @ 10:34 CET

When we were developing fotb.me we ensured the app would run offline using the fancy, new HTML5 app cache API. It can be a pain to create the cache manifest file by hand, this is obviously something that should be automated.

I looked around and found a plugin for Coda and a bundle for TextMate and TextWrangler which are good, but they don't allow me to ignore certain files and only add certain filetypes which were two things I needed. Not wanting to have to remember to edit the generated files manually I rolled our own.

CacheManifestGenerator is a simple Ruby script that traverses any folder recursively and makes a note of each file. You can add specific files to be ignored and the specific file extensions to look for. Very, very simple yet effective.

It also adds a comment with the time of creation. This is enough to trigger browsers to check the manifest contents as the file itself is different.

Oh and btw, Ruby is fun!

Update:

John Allsopp reminded me of manifestR, an online tool that creates a manifest for any page you are visiting via a bookmarklet. Very cool stuff, but it didn't work for us as the site has to be online, not be password protected (something we were avoiding pre-launch) and also the ignore files bit I mentioned above. However if you don't need those things then its definitely the easiest way of generating a manifest automatically.

- paulo

Permanent link 1 Comment »

A Flash on the Beach 2011 retrospective

Posted on Wednesday, September 21, 2011 @ 20:38 CET

This time last week marked the end of Flash on the Beach as we know it. The end of what I have always considered the best fucking conference I've ever attended. John Davey who organises it, always pours his heart and soul into it along with his wife and team of volunteers and it shows. FOTB has a special place in my heart for various reasons.

I remember sitting at my desk, working at a startup in Norway talking to some friends over IM who had just come back from the first one in 2006 ranting and raving about how amazing it had been. I decided then and there that I was going to the one next year even if it meant taking some vacation time because this was obviously something I had to experience for myself.

So in 2007 I flew over in November and stayed at a very simple bed and breakfast in Kemptown where I could marvel at the rainbow flags. Thanks to my good friend Chris Pelsor I managed to meet pretty much everybody who I had followed through the years, via their blogs and work. These were "rockstars", people who's work amazed me and yet, at the end of the day were just people. People like you and I, most of them awesome, some of them extremely shy. I think that was my biggest take away from the conference and something FOTB gets right every time. There is so much mingling between attendees and speakers that it sort of becomes this one collective mass of people who enjoy making cool shit. How can that not be fun.

Most importantly though had it not been for FOTB I would've probably never have come over to Brighton and fallen in love with the city. I would have not come over the following years, gotten to know a certain someone better only to eventually fall head over heels in love and leave everything behind to move to this very city and set up shop here.

So for that reason alone I owe John and FOTB a huge amount of thanks. It may not have been the main reason but it certainly was a catalyst to changing my life. Damn.

But this year was different in one way. I was speaking.

When I was asked at the end of last year I said fuck yes, and then had several months of getting to grips with that idea. I haven't done an enormous amount of speaking - mostly user group sessions, a Flash Camp in Lisbon (which was ridiculous amounts of fun) and a remote session for a one-day conference in Ottawa. But FOTB was special and therefore the goal was simple - don't fuck it up.

The week before I would have been nervous but Niqui, Matt and I were still working on finishing this year's conference guide, a web app you can play with at fotb.me. How we built that is another blog post.

The only problem was my slot. I was speaking on Wednesday, right before lunch. This meant I couldn't really enjoy myself fully on Monday and Tuesday as I couldn't properly relax. No biggy, but hey. I was probably the only person who woke up Wednesday morning without a massive hangover so I guess I win :)

I feel that the session itself went well. I got some great feedback and was actually amazed at all the people that showed up. Being up against the JAM session, and Lee Brimelow from Adobe who stole the show at the Keynote I was expecting the room to be empty. Especially with the JAM session being described as:

Thanks John.

I did consider changing this and Lee's description to "Probably shit. Don't bother going."

Alas, the Pavilion Theatre (the little of the three venues) was actually half full. I was super impressed and if you were there, thank you :) There were several friends in the audience which only made it easier. The lighting guy made them all disappear too - in retrospect I think seeing people's faces might have been better. This was a smaller crowd than Lisbon for sure, but it was still FOTB. Don't fuck it up.

My favourite piece of feedback was from Neil Keith Young:

I owe this man a beer.

The guys at Ubelly also took some notes as well as Jens Brynildsen on Flash Magazine. He also took this pic where I have a pointier chin than Leno!

Anyways, enough about me. I wish I had gotten to see more sessions but I missed everything on Monday except the last two because I was in a state of panic going over my slides. I say going over, I mean recreating them because they original ones weren't good enough. Takes alot longer than you think.

My favourite sessions were Lee's bit of the keynote (hilarious), Jon Burgerman (who could happily leave painting for standup), Joel Gethin Lewis (who is actually helping people through technology. amazing), Remy Sharp (who got sung happy birthday twice! bet the W3C don't do that shit), Cyriak Harris (madman doing live AfterEffects'ing), Jared Ficklin (smoke machines mean instant win) and Josh Davis (who scares the shit out of me).

There are so many I would have loved to have seen but hopefully the videos will make it online sometime soon. Another highlight was the debauchery that happened at MyHotel. Less so than previous years, but still tons of fun. The Zacapa... mmm. The speaker discount didn't hurt either :)

Anyways, another year, another awesome FOTB. I'm really looking forward to what next year brings and hopefully once again see all of these wonderful friends who live in interesting places all over the world descend upon our little village once more, for whatever the new FOTB becomes.

- paulo

Permanent link Add a comment »

Feeding Android browsers accelerometer data via Flash

Posted on Saturday, September 17, 2011 @ 17:56 CET

In a forthcoming blogpost I'll talk about not only the awesome Flash on the Beach conference that just flew by but also the web-app we built for it at fotb.me.

In one of the many bar chats, I was talking to Paul King about our experience building it and he asked if we'd played around with the accelerometer data. I said we had, albeit briefly and I incorrectly stated that we had gotten it working on iOS, Android and PlayBook.

iOS 4.2+ devices support the DeviceMotion API and so does the PlayBook. The only gotchas is that instead of listening for the devicemotion event you have to hook into the window.ondevicemotion function itself for this to work on the PlayBook.

For Android phones I quickly threw together a SWF that would simply listen to a flash.sensors.Accelerometer instance and then send those over ExternalInterface to a JavaScript handler which then takes it from there.

This is an extremely basic example, but all the code is on GitHub so get it there or check the demo. Since the PlayBook supports both Flash and devicemotion a simple check is done so we don't get the data twice.

It should go without saying that if your Android phone doesn't have Flash installed then you get nothing.

- paulo

Permanent link 2 Comments »

Icons and splash screens for iOS web apps - retina displays also welcome

Posted on Wednesday, August 31, 2011 @ 10:28 CET

When creating web apps that are targeting iOS devices Apple provides a few hooks to allow things such as custom home-screen icons and splash screens for when people add them to their home screen. For icons you simply add the following to the <head> tag:

<link rel="apple-touch-icon" href="icon.png" />

If you want an icon without the default gloss you add -precomposed:

<link rel="apple-touch-icon-precomposed" href="icon.png" />

Different devices will need different sized images. The default of 57x57 is for older iOS devices, if you're targeting iPad you want 72x72 and if you're going to look good on the retina display on iPhone 4 you want 114x114. To tell the device which ones are present there is a sizes attribute where you can supply the size. So it looks like:

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/icon-ipad.png" />

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/icon-iphone4.png" />

<link rel="apple-touch-icon-precomposed"  href="/images/icon-iphone.png" />

Notice how the last, default one does not have a sizes attribute - it doesn't need it. However, we found that it has to go last otherwise it may get overlooked on iOS3 devices.

Retina display splash screens

So far so good right? Well not so fast. Sadly Apple has not provided the same level of flexibility for splash screens. The sizes property does not work and there is no official documentation on how to provide a high-quality image for retina displays.

Disappointing but I suppose its currently an unsupported feature. Bleeding edge, cuts, etc.

Using media queries

Googling around you'll find lots of people asking this question but none of the solutions I tried worked. Some suggested using the aforementioned sizes property. Others suggest using media queries to target the right device. This does work for iPad and you can target a splash screen for landscape or portrait as follows:

<link rel="apple-touch-startup-image" href="/images/splash-ipad-landscape.png"  
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<link rel="apple-touch-startup-image" href="/images/splash-ipad-portrait.png" 
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

The only strange thing is that the landscape splash image must be 748x1024 and you have to rotate the contents 90 degrees counter-clockwise. For portrait the dimensions are 768x1004.

So the logical thing would be to use the same sort of thing for targeting retina display. The regular splash image is 320x460 and the high-quality one is 640x920, so we were thinking we could target the right device using something like:

<link rel="apple-touch-startup-image" href="/images/splash-iphone.png" 
media="(max-device-width: 480px) and not (min-device-pixel-ratio: 2)" />

<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" 
media="(max-device-width: 480px) and (min-device-pixel-ratio: 2)" />

The first image is for devices that do not have a minimum device pixel ratio of 2. Sadly this does not work at all. So media queries do work for iPad detection and even iPad start orientation but not for iPhone 4. Frustrating.

PS: adding the -webkit prefix to min-device-pixel-ratio has no effect, I saw this a few places too.

So in an act of desperation we turned to JavaScript. We can check what type of device you are and if you have a retina display so we can try to inject an image for these devices. Select for spoiler alert -> this works.

JavaScript to the rescue

The logic is as follows:

1. wait for when the document is ready
2. check that the device is running iOS
3. check that the device has a retina display
4. check that the device is running iOS5 or above

The last point is important because an iPhone 4 running iOS4 does not support high-quality splash images (640x920) and will simply ignore any you provide. They don't display the low quality (320x460) one either, they just flat out refuse to display a splash image because you told it to do something it couldn't do. Its a bit touchy.

In any case we use jQuery to figure out when we have loaded, and general DOM magic allowing us to insert the high-resolution splash screen into the <head>, but only for iOS devices with a retina display running iOS5 or later.

function hasRetinaDisplay() {
	return (window.devicePixelRatio >= 2);
}
function isAppleDevice() {
	return (/iphone|ipod|ipad/gi).test(navigator.platform);
}
function iOSNewerThan(majorVersion) {
	if(isAppleDevice()) {
		// Check the version
		var pattern = /iPhone OS (.*) like Mac/;
		var result  = navigator.userAgent.match(pattern); // Returns "iPhone OS X_Y like Mac, X_Y"
		var version = result[1].split(''); // Returns X, Y
		var release = version[0];
		return (release >= majorVersion);
	}
	return false;
}

// When we're ready to go...
$(document).ready(function() { 
	if(hasRetinaDisplay() && iOSNewerThan(5)) { 
		var highResSplash = '<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" />'; 
		$('head').append(highResSplash); 
	}
});

So this is our CSS:

<link rel="apple-touch-startup-image" href="/images/splash-ipad-landscape.png"  
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<link rel="apple-touch-startup-image" href="/images/splash-ipad-portrait.png" 
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

<!-- iPhone 4 devices running iOS5+ will get a high-res one via magic JS -->
<link rel="apple-touch-startup-image" href="/images/ios/splash-iphone.png" media="screen and (max-device-width: 320)" />

To sum up:

• iPads will get the a splash screen for each orientation,
• non-retina display iOS devices will get the lower quality image,
• iPhone 4's running iOS4 will get the lower quality image (sadly), but
• iPhone 4's running iOS5 or above will get a glorious, high-quality image (depending on your design skillz of course).

Hopefully Apple will sort this out in iOS5 and add support for the sizes attribute to the splash screen (or something cleverer). As it stands it appears to be very much an unsupported feature but, getting a high-res splash image on my phone? Totally worth it.

- paulo

Permanent link 4 Comments »

People Who Shit On Everything

Posted on Monday, August 01, 2011 @ 18:59 CET

There has been something bothering me for a while now about how people "behave" on Twitter. It can become this cesspool of negativity which, on occasion, I am also guilty of contributing to and I am trying to get better.

It reminds me of this Louis CK bit on Conan.

Now this isn't a constant thing of course, otherwise I wouldn't still be using Twitter but occasionally events occur, products are announced/released, something goes down and it rears its ugly head. This includes friends and people I respect. And it just sickens me.

I was going to tweet the following:

The snark level is off the charts. After reflecting on it I realized that it is completely inappropriate of me to ask anyone to self-censor because who the fuck am I. Thankfully on Twitter I have the power of the unfollow button. Silent yet effective.

And there's no reason to tell them - that's just rude.

So I spent the next 10 minutes doing just that, knowing that anything of any interest will surely bubble to the surface. And if not, I'm fine with that too.

So to those people. Its not you, its your negativity. And it very well may be my misinterpretation, but that's good enough for me.

Do not want.

- paulo

Permanent link 3 Comments »

A very belated goodbye to 2010

Posted on Monday, April 25, 2011 @ 22:27 CET

So here we are at the end of February and I'm trying to put together what it was exactly that happened last year.

That's how this post started two months ago, already two months late. Now its the end of April and I still haven't put this up, how nuts is that. Its been a crazy busy time, but who isn't nowadays. Lets see how I can go about summing up the past 12, nay, 14 months.

Last January I gave my landlord notice and got ready to emigrate from Norway. After a little over 10 years in Oslo it was strange to think that I was leaving all of this behind for sights unknown but I had become enamored with the bright city lights of Brighton and more importantly one of its residents.

In February we went over to Lillehammer for an extended weekend in Lillehammer to celebrate Niqui's birthday and do some snowboarding at Hafjell, one of the resorts used for the 1952 winter Olympics.

In March I closed the door to my apartment for the last time and waved goodbye to Oslo.

April was my one month anniversary of Brighton living and things were good. I was still working for the Norwegian consultancy Tarantell (which has since become part of Making Waves), as "the UK office". I held two talks at Flash Brighton (since become dot brighton) on transitioning to iOS development from ActionScript.

We also won an award for Best Mobile Solution at Gulltaggen for the 2009 Flash on the Beach app. And somewhere in my spare time I built the "Where is Influxis" thing which I really should revisit.

In May I quit Tarantell. Niqui and I joined forces and started up Jade Hopper - a micro-agency for web and mobile development, though we have yet to take on a web-based project. Starting our own company (along with the Brighton move) has been the smartest thing I've ever done. Even though people reassured me everything would be fine, you never really know until you actually take the plunge. No risk, no reward as they say. And the reward is definitely worth it. Its also given us the chance to work with some friends which has definitely been a learning experience, challenging at times but fun and great overall.

That month I also did a talk at async - the local JavaScript user group - on using JS in Adobe's Creative Suite applications. Showed an example of scripting Photoshop to generate random "artwork" and as a very simple workflow tool within Flash.

This was also the month I started to work with the clever guys at ribot to further develop the Tesco Groceries app for iPhone. If you haven't seen the clever ad you should check it out on YouTube.

In June we headed over to Slovenia to celebrate my birthday by road-tripping around the country. Beautiful place. Highly recommended. Flickr pics coming... sigh.

We also saw our two friends Nat and Simon tie the knot in what was a beautiful (and geek-filled) wedding.

In July we headed over for a long weekend in Dublin. Temple Bar Porterhouse oyster stout. NOM!

In August I did my first ever remote-talk which was a completely bizarre experience for the Ottawa Mobile Developer Day. Yelling at your laptop over Skype while people are listening in across the pond. No feedback other than a Skype chat. Nuts.

We also built a virtual chat room for some friends that put on the play "Closer". Basically a simple, scripted Flash app that animated pieces of text when triggered from behind the scenes. Watching people act around your SWF was great fun. You can check it out here - click on it and press Space to go through it. It is quite explicit.

September was the yearly pilgrimage to Flash on the Beach though this time as a local. Once again we had good fun building the official app for iPhone and this time AIR for Android too.

Around the same time we launched the Tesco Groceries app for iPhone which has been a great success.

October involved more flying, this time to Lisbon for Flash Camp Portugal where both Niqui and I were invited to speak. We had a great time there thanks to the lovely Paulo Moreira, Joao Fernandes and Joao Goncalves along with our great driver Fernando.

Around that time we finally launched v1 of GoodStuff - a streetwear and sneaker store finding app. Its a cool concept and its fun to see where they are taking it.

In November I experienced my very first Guy Fawkes day in Lewes which was mental and highly recommended. Remember earbuds. A week later I flew off to Canada to spend 10 days working in Ottawa. We can talk about that soon.

December included 3 awesome (truly awesome) weeks driving all over South Africa with Niqui and Natimon clocking in 5,000 kilometers of terrain covered. Elephants, rhinos, zebras, great white sharks, giraffes, lions, cheetahs, mongeese and monkeys. All were spotted - amazing.

This was followed by 3 weeks visiting my mom on the Cayman Islands for the Christmas and New Year's festivities while working on designing an exciting new app.

January included a short stint back in Oslo to visit friends and kick off a project, then Switzerland for the Swiss instalment of gotoAndSki.

February was filled with crazy work and an unfortunate deportation. In March we spent three weeks in Canada with a short stint back for NSConference and Ian's 35th.

We've since spent all of April back in Ottawa where we've been working on things we would love to be able to talk about but can't.

Yet.

In any case 2011 has been pretty kick-ass thus far. And on Saturday we head off to Toronto for FITC before heading back home to pack for the next set of epic adventures.

Onwards!

- paulo

Permanent link 3 Comments »

Flash on the Beach 2010 app is live!

Posted on Thursday, September 23, 2010 @ 13:33 CET

Its official! Our latest app - the official conference guide for this year's Flash on the Beach conference is now available on the App Store. Håvard Gjelseth of ThisWayDesign did a fantastic job on the design once again, this time following the Warhol theme of this year's conference. As biased as I am I think it looks absolutely beautiful - and especially so on a retina display.

FOTB 2010 from Paulo Fierro on Vimeo.

Its also the first app for our 4-month old company Jade Hopper, so its doubly exciting. Its free, so what are you waiting for, go get it!

Technical details

I didn't do this last year but figured it might be interesting to someone. There are a few datasets in the app. First off the speaker info, sessions, schedule, etc - all of that is provided to us by John as an XML dump of his database that powers the site itself. This is then bundled within the app and parsed with TouchXML. I simply don't quite get the nutty way NSXML works - TouchXML does it the way I think and its super easy to use with XPath support. The wifi hotspots, courtesy of BrightonWifi.com are also brought in as a KML file.

Tweets are brought in by using the Twitter Search API and brought down as JSON which is much easier to deal with via SBJSON. One line to convert the downloaded NSData to NSString, and then run it through SBJSON which converts this string to an NSDictionary and you're done. Tres awesome.

Speaking of Twitter - the tweets view is probably the most complex one. Lots of things going on here. The rows themselves are subclasses of ABTableViewCell by Loren Brichter (of Tweetie/Twitter fame). The profile images are brought down asynchronously and displayed via AsyncImageView with some of my own modifications. The tweets themselves are a bit tricky.

Basically you get this string in it which is the tweet. It contains no HTML tags but it may contain HTML entities - for example, € for €. You probably don't want to show the code, but the character itself so you have to replace them. For this I used the NSString+ORSCanaryAdditions category from Canary (an open-source Twitter client developed in Objective-C).

Once the string is looking prettier you need to figure out what to do about the links. The tweet may contain http:// links, and you probably want to make @usernames and #hashTags clickable too. The other question is how to display this. UILabel does not allow you to have parts of it be clickable. In ActionScript this is easy enough, wrap <a> links around the appropriate text, with "event:" prefixing the URL and then display it in a TextField as htmlText. These fire TextEvent.LINK events you can listen for and deal with.

Now I figured there are hundreds of Twitter clients out there and someone must have run into and solved this before so I looked around and sure enough, someone had. Craig Hockenberry from the Iconfactory (and Twitterrific fame) released IFTweetLabel which solves both of these problems. It uses RegexKitLite to find the links (I ported these expressions to ActionScript for other uses) and then creates an amalgamation of UILabels and UIButtons and sticks them in a UIView you can use. So with some minor modifications this was exactly what I needed.

Talk about standing on the shoulder of giants.

Finally, I also added in Enormego's pull to refresh library. And with that we had a read-only Twitter client based on the #fotb hash tag for the conference. We figured that people already have their own favourite Twitter client anyways, so why try to compete with that.

Android?

I must admit the amount of people asking for an Android version on Twitter was unexpected (at least by me), but for those of you carrying an Android phone, hold tight...

- paulo

Permanent link Add a comment »

Bronze prize winners at Gulltaggen 2010!

Posted on Thursday, September 23, 2010 @ 13:27 CET

Somehow I forgot to write about this, or thought I had when I clearly hadn't but back in April - ahem... - we won the bronze prize for Best Mobile Solution at Gulltaggen for last year's Flash on the Beach solution. Very exciting! The solution consisted of an iPhone app (designed by Håvard Gjelseth, developed by myself) along with a Flash-based interface to a social network called FOTB Connect (designed and developed by Paul Holliday and Chris Pelsor).

Gulltaggen, Norwegian for the Golden Tag, is in their own words:

Some pics:

And a vid of the app itself:

Flash on the Beach '09 iPhone app from Paulo Fierro on Vimeo.

- paulo

Permanent link Add a comment »