After upgrading my Macbook Pro to Snow Leopard I found that my 3 Mobile Broadband USB (Huawei Mobile Connect E169G) stick no longer functioned. The quite frankly rubbish MobileConnect software that they have on the stick refused to start on Snow Leopard and promptly crashed every time.

So after some fiddling and searching around the interwebs I finally got it working again, all without that horrible MobileConnect stuff.

Firstly you need to remove all of the software and drivers that might be on your machine, delete the following if they are there:

/Applications/MobileConnect
/System/Library/Extensions/HuaweiDataCardDriver.kext
/Library/Modem Scripts/HUAWEI Mobile Connect

Don’t worry if none of the above are there, it’s worth checking before you go any further.

Now reboot your Mac. When restarted pop in your USB Modem stick it should appear in the finder as a CD. Open it up and you will see the Mobile Connect app. Right click and select “Show Package Contents”.

Then navigate to Contents/Resources/Mobile_Connect_Drv_App.pkg. Double click this to run the driver only installation.

After this has installed head over to Network Preferences window. If there is an existing HUAWEI Mobile listed in the left menu, select it and hit the minus button to delete it.

Now go and add a new one choosing HUAWEI Mobile from the Interface dropdown, giving it a name if you wish. Now in the telephone Number enter *99#, leaving the remaining fields blank. Keep the “Show modem status in menubar” checked because you then get quick instant access for dialling up with your new HUAWEI Mobile connection.

Hit Advanced entering the following details for 3 Mobile Boradband UK. APN: 3internet. Your APN might be different if your not in the UK.

You should be all set, go and connect. Working 3 Mobile Broadband (UK) with the HUAWEI E169G on Snow Leopard.

Please leave any comments or suggestions.

I have been looking to purchase an iPhone since the launch of the 3Gs. The original plan was to make a purchase while I was on holiday in Italy during August, the primary reason for this was because unlike our unhelpful country here in the UK Italy by law has to sell unlocked phones and I needed a new phone after surrendering my free Nokia when I left to join Tweetdeck.

I knew the cost for the iPhone would be expensive due to the euro exchange rate but well worth not being tied in to an operator and having the freedom to use any SIM plan I like. This would also have the advantage of easy upgrade when Apple release the next generation of iPhone.

So off we go to Italy and I casually approached a number of stores in Rome, our first port of call on our trip. The first store I tried was an official Vodafone store. The response was quite short and sweet “iPhone all finished” I was told. Hmm “all finished?”: i questioned, “yes all gone, finished”. So off I go to the Three Italy store further down the street. Again I got the response “iPhone all finished”. What was going on. After further enquiry the assistant also informed me that the Three iPhones could only be purchased with an Italian credit card as you got a free data plan with them. I offered to pay cash and not have the plan but the assistant informed me that was not possible, plus they had no stock anyway.

After visiting over 11 stores in Rome, Milan and Venice I got a very similar response, in short no iPhones. I was unsure if it was because I was English and they had been ‘advised’ not to sell to anyone who was not Italian or that there was truly no stock in the whole of Italy.

So I returned to the UK iPhone less and a bit disheartened, I personally know two people who have purchased their iPhones 3G’s from Italy with no hassle.

My next option was to purchase a legitimate iPhone 3Gs 32GB from Play.com. They appear to be the only company shipping original unlocked phones from manufacturers. Oh wait a minute they want £899.99 for a 32GB 3Gs!!! Are they serious that is the price of a decent laptop, then add on your airtime billing no way Jose. So moving on it’s back to the O2, the UK’s official iPhone provider.

I don’t have anything against O2, I just was against being locked in for 18 months plus all of the hassle of upgrading. Plus the likelihood of Apple releasing a new upgraded iPhone in the next 12 months is quite high.

So after having a chat over a few beers with my mate Richard (@richardcornock) he enlightened me to the fact that you could grab a pretty decent SIM only package from O2 (simplicity) and use that in a Pay As You Go iPhone. On the surface this sounded like a more expensive option but after close investigation it is the clear winner for me, here how it breaks down.

A PAYG iPhone 32GB costs a hefty £538.30 from O2. This comes with a PAYG SIM card that offers free data and free Wi-Fi (with BT & The Cloud). Of course your calls are going to be really expensive on PAYG. The Simplicity plan from O2 comes in a variety of flavours and varies in time from a 1 month rolling contract to a 12 month contract. The benefit of ordering on line and going for the 12 month tariff are increased minutes and texts PLUS a free O2 bundle. For only £19.58 (correct as of Sept 2009) you get 800 anytime UK minutes plus 1600 texts and free data via the bolt on.

Compare that to the iPhone tariff of £34.26 that only gives you 500 minutes and 600 texts. You DO get free Wi-Fi with your iPhone tariff that you lose with the Simplicity although you could add this on using a bolt on for around £7 a month. I have heard that you can still use your PAYG SIM number to use the Wi-Fi as it’s tied to the IMEI number of your iPhone, this is as of yet untested.

So you can see where I’m going with this, if you can live without the Wi-Fi bundle then the overall cost to you for 12 months 32GB iPhone 3Gs goodness is £773.26 (800 min’s & 1600 txt’s) compared with £890.91 on the iPhone 18 month tariff (500 min’s & 600 txt’s). Total cost of ownership is virtually the same over the course of 18 months £890.00 but you get more minutes and more text’s plus your not locked in for 18 months with the PAYG phone and can upgrade when you like!

If you have the hard earned cash to stump up front then work your figures out, it might not be an unlocked iPhone but I’m still in a better position with more minutes & texts!

Please leave your comments and thoughts.

Yes that’s correct I’m leaving my position as front end architect for Nokia Music and heading off down to London town to join the TweetDeck team.

If your not sure what TweetDeck is then where have you been?!

I have known Iain for a few years now and have been really impressed by what he has achieved with TweetDeck. So when the offer came to join the team how could I refuse, oh and I get to work at the ‘bat cave’!.

Having been involved in the Flash and Flex community for a number of years and more recently with Adobe AIR as a Community Expert it’s going to be great working with these technologies on a daily basis.

Combining my knowledge of UI, UX and development with my recent mobile device experience I really feel that we can take the TweetDeck proposition to new heights across multiple platforms reaching to and connecting people world wide. It’s an exciting time.

I’m sure I will see some of you around London town and might even pop along to some of the London Flash community meetups.

The latest release of TweetDeck and the TweetDeck Directory are fantastic if your not using Tweetdeck then get it. There really is no better way of keeping track of your social connections across Twitter, Facebook, MySpace and more.

Andrew Shorten (Adobe EMEA Evangelist) interviews TweetDeck founder

Let us know what you like and don’t like about any TweetDeck products by visiting the support site.

As you can imagine things have been a little busy of late, but I’ll still be running the Adobe AIR website RefreshingApps and speaking at more conferences and community events. Don’t forget to follow me @jmwhittaker.

I’m really excited to have my first tutorial published in the premier web design magazine .NET issue 192 (Practical Web Design in the USA). The 4 page tutorial uses Flex and Adobe AIR to create a desktop application for uploading and viewing your movies on YouTube. All tutorial files and the finished AIR application are packaged on the CD with the magazine.

Using a few open source API’s the tutorial guides you through creating the project in Flex Builder importing the libraries and instructs on how to create a SWC for use across many projects. Moving on we cover basic Flex UI elements like lists, item renderers, view states and stacks. Finally simple skinning and styling then it guides the user through exporting the final AIR installer file.

The great thing about this tutorial is that you can build upon it in so many ways. Maybe add some Degrafa to the UI and create a great interface, or mix it up with some more web API’s. There is also some useful links, a quick guide on creating the AIR installer badge for your app and where to find more interesting AIR applications like RefreshingApps.com.

You can also download the source files for the tutorial here (ZIP 1.3MB).

I have had some great feedback from this and hopefully the .NET guys will ask me to do another tutorial soon.

I’m really excited to be presenting a session on Adobe AIR at Bath Camp on July 1st. It’ going to be an introductory session into what Adobe AIR is, how you can develop for it and a view of some cool apps created using the framework.

Bath Camp is going to be the first non Adobe focused event that I’m speaking at so it’s a great chance to meet up with other developers and designers from the Bath & Bristol region.

Looking at the Bath Camp Ning pages I will be following in the footsteps of Paul Boag (Boagworld & Headscape) and Ryan Carson (Carsonified) who have previously delivered sessions.

Also confirmed is Joe Leech from usability consultancy CX Partners who is talking about user centered design, usability and all good stuff like that.

So if you are around Bath and fancy coming along and saying hi over a beer or two register here and we’ll see you there from around 7pm onwards at the Assembly Inn (see map below).

View Larger Map

For my session at Flash Camp Birmingham I wanted to introduce people to declarative skinning within Flex. I was skinning Flex applications back in Flex 2 and to get the right visual appeal it was quite a tricky thing to get right. There was a reliance on heavy external assets brought into Flex and scaled using Scale9 techniques. There were many times I wanted to have better control of the UI I was creating through not only a more advanced CSS capability but without having to resort to creating skins from scratch directly with the Flash drawing API.

Degrafa is a declarative graphics framework for Flex (and soon for pure ActionScript projects). It makes sense using MXML like syntax for creating your graphical skins. The work the Degrafa team have done is amazing, I had a very good email conversation with Jaun Sanchez of Effective UI before my talk so that I could clarify a few things and get an insight into the future of Degrafa, especially with Flex 4 and FXG from Adobe going into public beta.

FXG is a graphical interchange format developed by Adobe and is similar in many ways to SVG. Adobe are building future tooling to take advantage of this format and enable rich graphics to be transferable between developer and designer tools. FXG is also similar in approach to Degrafa the syntax is very alike. Both have their place and advantages and disadvantages depending upon your toolset choice and project requirements.

Flash Camp session slides

Here are my session slides for Flash Camp Birmingham (UK), 16th June 2009. Taking an introductory look at Degrafa and FXG I demonstrated the code for skinning a simple UI in both implementations. The skin is part of a project i’m working on for creating a Palm Pre looking skin for Flex 3 with Degrafa and Flex 4 with FXG.

As you can see in the examples further down the page they are very visually close! The full skin will be available soon but for now take a look at the code and I welcome any comments or suggestions on my implementation.

Degrafa skin

For this skin I’m using Flex 3 and a CSS file to target the skin classes for the components. To get a Degrafa skin to match the width and height of the component you no longer need to override the updateDisplayList() method. There are two exposed variables called skinWidth and skinHeight that you should use.

The MXML structure for this Flex 3 example is simply:

	<?xml version="1.0" encoding="utf-8"?>
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:degrafa="http://www.degrafa.com/2007" viewSourceURL="srcview/index.html">
 
		<mx:Style source="default.css"/>
 
		<mx:TabNavigator verticalCenter="0" horizontalCenter="0" width="250" height="380">
			<mx:VBox label="Menu item 1" verticalGap="15">
				<mx:HBox>
					<mx:Button label="Button A"/>
					<mx:Button label="Button B" selected="true"/>
				</mx:HBox>
				<mx:HBox width="100%" height="50" verticalAlign="middle" styleName="preItem">
					<mx:Text text="Some Text"/>
				</mx:HBox>
				<mx:HBox width="100%" height="50" verticalAlign="middle" styleName="preItem">
					<mx:Text text="Some Text"/>
				</mx:HBox>
				<mx:Box width="100%" height="50" verticalAlign="middle" styleName="preItem">
					<mx:Text text="Some Text"/>
				</mx:Box>
			</mx:VBox>
		</mx:TabNavigator>
	</mx:Application>

Then the Degrafa button is skinned as follows (refer to the source in the download for full code):

	<?xml version="1.0" encoding="utf-8"?>
	<GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://www.degrafa.com/2007">
 
		<!-- use skinWidth and skinHeight for setting component dimensions -->
 
		<fills>
			<LinearGradientFill id="topHighlight" angle="90">
				<GradientStop color="#FDFDFD" ratio="0" alpha="0.8"/>
				<GradientStop color="#FDFDFD" ratio="0.2" alpha="0"/>
			</LinearGradientFill>
			<LinearGradientFill id="upFill" angle="90">
				<GradientStop color="#8A8A8A" ratio="0" alpha="0.8"/>
				<GradientStop color="#595957" ratio="0.45"/>
				<GradientStop color="#4E4E50" ratio="0.55"/>
				<GradientStop color="#686B6B" ratio="1"/>
			</LinearGradientFill>
			<LinearGradientFill id="overFill" angle="90">
				<GradientStop color="#8AA2BE" ratio="0" alpha="0.8"/>
				<GradientStop color="#525C68" ratio="0.45"/>
				<GradientStop color="#464E58" ratio="0.55"/>
				<GradientStop color="#6A7686" ratio="1"/>
			</LinearGradientFill>
		</fills>
 
		<strokes>
			<SolidStroke color="#676767" id="upStroke" weight="0.5"/>
			<LinearGradientStroke id="highlightStroke" angle="90">
				<GradientStop color="#FDFDFD" ratio="0" alpha="0.6"/>
				<GradientStop color="#FDFDFD" ratio="0.3" alpha="0"/>
			</LinearGradientStroke>
		</strokes>
 
		<geometry>
			<GeometryComposition>
				<RoundedRectangle id="buttonRect"
								  width="{skinWidth}"
								  height="{skinHeight}"
								  cornerRadius="15"
								  fill="{upFill}"
								  stroke="{upStroke}"/>
				<RoundedRectangle width="{skinWidth-1}"
								  x="1"
								  y="1"
								  height="{skinHeight}"
								  cornerRadius="15"
								  stroke="{highlightStroke}"/>
			</GeometryComposition>
		</geometry>
 
		<filters>
			<mx:DropShadowFilter color="#676767"
								 blurX="5"
								 blurY="5"
								 angle="90"
								 distance="2"
								 alpha="0.8"/>
		</filters>
 
		<states>
			<State name="upSkin">
				<SetProperty target="{buttonRect}" name="fill" value="{upFill}"/>
			</State>
			<State name="overSkin">
				<SetProperty target="{buttonRect}" name="fill" value="{overFill}"/>
			</State>
			<State name="downSkin">
				<SetProperty target="{buttonRect}" name="fill" value="{overFill}"/>
			</State>
			<State name="selectedUpSkin" basedOn="downSkin"/>
			<State name="selectedOverSkin" basedOn="downSkin"/>
 
		</states>
 
	</GraphicBorderSkin>

Download the Flex 3 source here.

FXG skin

The MXML is slidghtly different here because of Flex 4 using the new Spark components. Not all components have been created in Spark so elements like tabNavigator are still Halo components. This is not an issue as you can mix and match Halo and Spark components with certain rules like a Halo navigator can only have a Halo container as it’s first child. Inside that container you can then place Spark components.

Looking around the Flex 4 SDK there is a set of Spark skins for Halo components so that is the technique I have used here. SparkSkin is the base class for these skins so I was able to skin the tabNavigator using FXG.

Using skinnableComponent you can then hang Spark skins off them as they support skinning (obviously!). So the simple MXML structure we have is:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" backgroundColor="#333333" viewSourceURL="srcview/index.html">
 
	<fx:Style source="styles/default.css"/>
 
	<mx:TabNavigator verticalCenter="0" horizontalCenter="0" width="250" height="380">
		<mx:VBox label="Menu item 1" verticalGap="15">		
			<s:HGroup>
				<s:Button styleName="preSkin" label="Button A"/>
				<s:Button styleName="preSkin" label="Button B"/>
			</s:HGroup>
			<s:SkinnableContainer width="100%" height="50">
				<s:SimpleText text="Some Text" verticalCenter="0" verticalAlign="middle"/>
			</s:SkinnableContainer>
			<s:SkinnableContainer width="100%" height="50">
				<s:SimpleText text="Some Text" verticalCenter="0" verticalAlign="middle"/>
			</s:SkinnableContainer>
			<s:SkinnableContainer width="100%" height="50">
				<s:SimpleText text="Some Text" verticalCenter="0" verticalAlign="middle"/>
			</s:SkinnableContainer>
		</mx:VBox>
	</mx:TabNavigator>
</s:Application>

Then as an example the skin for the button in FXG is:

	<?xml version="1.0" encoding="utf-8"?>
	<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
			xmlns:fx="http://ns.adobe.com/mxml/2009"
			xmlns:ai="http://ns.adobe.com/ai/2008"
			xmlns:d="http://ns.adobe.com/fxg/2008/dt"
			minHeight="35"
			minWidth="25">
		<s:states>
			<s:State name="up"/>
			<s:State name="over"/>
			<s:State name="down"/>
			<s:State name="disabled"/>
		</s:states>
 
		<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
 
		<s:Rect id="upFill"
				top="1"
				right="1"
				left="1"
				bottom="1"
				radiusX="15"
				radiusY="15">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="#8A8A8A" color.over="#8AA2BE" ratio="0" alpha="0.8"/>
					<s:GradientEntry color="#595957" color.over="#525C68" ratio="0.45"/>
					<s:GradientEntry color="#4E4E50" color.over="#464E58" ratio="0.55"/>
					<s:GradientEntry color="#686B6B" color.over="#6A7686" ratio="1"/>
				</s:LinearGradient>
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke color="#676767" weight="0.5"/>
			</s:stroke>
		</s:Rect>
 
		<s:Rect id="highlightFill"
				top="2"
				right="2"
				left="2"
				bottom="2"
				radiusX="15"
				radiusY="15">
			<s:stroke>
				<s:LinearGradientStroke rotation="90" weight="1">
					<s:GradientEntry color="#FDFDFD" ratio="0" alpha="0.6"/>
					<s:GradientEntry color="#FDFDFD" ratio="0.2" alpha="0"/>
				</s:LinearGradientStroke>
 
			</s:stroke>
		</s:Rect>
 
		<s:SimpleText id="labelElement"
					  color="#FFFFFF"
					  right="20"
					  left="20"
					  verticalAlign="middle"
					  horizontalCenter="0"
					  verticalCenter="1"/>
 
		<s:filters>
			<s:DropShadowFilter color="#676767"
								blurX="5"
								blurY="5"
								angle="90"
								distance="2"
								alpha="0.8"/>
		</s:filters>
 
	</s:Skin>

Download the Flex 4 source here.

What’s next

I’m looking to release the skins very soon and hopefully the guys at Degrafa will add it to the samples page.

If you have any feedback please leave them in the comments and please Tweet out this post.

Flash Camp Birmingham (UK) organised by the Flash Midlands user group. After a very good Flash Camp London it was always going to be interesting to see how the format would work outside of London. The answer very well!

For those of you who are not familiar with a Flash Camp it’s basically a free event run by the community for people working with or interested in the Adobe Flash Platform. It’s not a marketing event, although Adobe help with sponsorship, where prominent members of the community forego their time to come and give presentations and demos on the latest happenings with the Flash platform. And it costs nothing, how fantastic is that.

The sessions were 45 mins in length so long enough to give an insight into a particular topic kind of whetting you appetite for your own further study, yet short enough that it’s not too long until the next session.

So Birmingham it was at the Central Library theatre which was surprisingly good. A large screen and an auditorium that seated 250, the only thing that was lacking was a decent sized breakout area for mingling. There were some great sponsors, usability experts Bunnyfoot were showing off their eye tracking system and it was great to see ex colleagues Jon and Mark again. In fact it was like a mini reunion for quite a few people who I used to work with plus a good friend of mine Richard from the Birmingham Conservatoire made the event a really sociable affair.

So after a few network niggles the day started off with Adobe’s Enrique Duvos EMEA Evangelist manager introducing the latest product updates like Flash Builder, Flex 4, Catalyst and Flash player penetration rates. Enrique did a great job of setting the scene for later presentations.

The sessions

Simon Bailey was the first of us Community Experts to hit the stage on PureMVC. Great delivery but possibly a bit over the heads of some of the audience! It was a great introduction and I certainly picked up a few tips and will be heading across to his blog for more PureMVC stuff in the future.

A short break ensued before the infamous Mike Jones aka Flashgen hit the stage with a session on Flex components and a comparison between the new Spark components in Flex 4 and the old Halo components from Flex 2 & 3. Really informative session on some of the core differences between Spark and Halo right down to how the component and skinning lifecycles differ.

Adobe have really gone down the correct path on the new Spark model. It addresses many of the concerns and limitations of the old Halo model by separating out the behaviour, layout and skin of components. Mike also takes the prize of phrase of the day for “datagrids are the Marmite of the component family…” thanks to Elsa for making this public on Twitter!
Mikes session was a good precursor to my session on skinning Flex.

So I was up next with my session entitled “Skinning Flex”. I wanted introduce declarative graphics and take a look at what people can use today in their Flex 3 projects using Degrafa, then introduce FXG that arrives in Flex 4, the Creative Suite and of course Flash Catalyst. After an introduction to the basics I demoed an example using a sample from my Palm Pre esque skin. One version was done in Flex 3 and Degrafa the other Flex 4 and FXG the results were virtually indistinguishable and showed how easy both are to work with. I didn’t get to show any Flash Catalyst due to time but the later Adobe OnTour session from Adobe by Enrique showed a detailed CS > Catalyst > Flex 4 & Flash Builder demo.

Lunchtime followed and everyone was beginning to feel the heat inside the auditorium so the timing was perfect. Time for a chat and sandwich with old friends and we were back on again with Rob Bateman from Away3D up next.

I’m always very inspired and taken back by some of the Flash 3D demos I have seen (like Seb Lee-Delisle Papervision demos) and this was no exception. Many people don’t know that Away3D started life as a Papervision branch back in the day. The speed and advancement of the features always amazes and Rob is always a step ahead of the game with the vision for Away3D. I’m not a 3D expert by any means and I wished I had the time to delve into it more. Some great demos were shown and I’m sure many were left very inspired.

I didn’t catch the session on mobile and FLash Lite from Anthony and Jerome Ribot unfortunately although I heard it was an interesting session. Always good to get some mobile stuff to be shown.

After a short break the last session at Flash Camp Birmingham was a panel ready to answer questions on freelancing, contracting and how to break away from the company man. The entertaining panel consisted of Mike Jones (Flashgen.com), Stefan Richter (Muchos Media), Simon Bailey (Newtricks.com) and Ross Flemming from specialist recruitment company TEK Systems. Even the intros were great talking points hearing about how the panellists got into Flash Platform development. A few good questions were raised and answered. I personally think that having panels for open questions and discussion offer a interesting alternative to one way presentations and sessions that are usually delivered.

What followed was the prize giving and raffle. Jodie I think you have a new career if all of this Flash stuff collapses! Very reminiscent of the end of Flash on the Beach many attendees had left already to catch transport home or just to get a breath of fresh air. Of the O’Reilly books being raffled out it was obvious that the Web 2.0 book by Duane Nickull was going to be the last on on peoples wish list no offense Duane! My ex colleague Greg (part of the Away 3D team) won a copy of Flash Builder and a couple of other lucky attendees got full passes to this year Flash on the Beach courtesy of FOTB’s John Davey.

So wrapping up another great Flash Camp for me again after London. I enjoyed my session on Degrafa and FXG and looking at some tweets afterwards the audience enjoyed it too. A bog thank you has to go to all the behind the scenes help from everyone involved that made this event flow smoothly and feel organised. Thanks also to the sponsors for making it happen and keeping free for the attendees. Until the next time happy coding.

Photos

Here are some photos by Elsa from Flickr:

Videos

Here are some videos that I took with my Flip MinoHD. A great camera but in HD it picks up every little shake of your hand so apologies for the shaky cam effect it was not intentional!

See my next post for my presentation notes and code examples.

Having been in an agile working environment for the last few years, I’m certainly becoming more aware of how similar techniques can be used outside the office.

I have recently come across the Pomodoro technique, it’s an interesting take on how to improve your personal productivity. As I do a lot of work outside of the office on personal and freelance projects I have struggled to get focus sometimes, this is where the Pomodoro Technique can be applied; to get your focus back on track. I have seen it referred to as one technique for a solo scrum.

The name comes from those plastic kitchen timers in the shape of a tomato (or pomodoro if your Italian). So how do you go about getting into using the technique? Well firstly there is a comprehensive website that you can refer to and even download a free PDF that details the technique.

To get you started I’ll give my outline of how to use the Pomodoro technique:

Stop everything!

Yes that’s right close your email, Twitter client your mobile phone anything that could be a distraction during your Pomodoro. It’s best to locate your self away from other people who could inadvertently cause you to break off, I normally go down to my office room and close the door.

Estimate your work breaking down into tasks

When working on a project just like in agile you will have a backlog, a list of all the story items that need to get done to complete your project. Now that list is too big and scary to tackle all at once so select a story to break down into tasks to do today.

Place these tasks onto your To Do Today list. When you have been using the technique for a little while you get better at estimating how much you can actually get done in each Pomodoro. Use this knowledge in your planning for future Pomodoros, just like in agile.

Begin your Pomodoro

Get a timer and set it for 25 minutes. It’s best that the timer does not make a ticking sound as this will be a major distraction! This is your work time begin and focus on the first task you have to complete without any interruption. If you have an interruption then there are a couple of ways in which you can tackle it, see the interruptions section further down.

End of the Pomodoro

When the timer goes off after 25 minutes STOP immediately. Don’t finish your task or say ‘just a couple of minutes…’ STOP NOW.

This is where you take a 5 minute break, step away from the computer go and make a tea anything but think about your current task and nothing too brain intensive.

If you have note finished your task on the To Do Today list then fine just carry it over into your next Pomodoro. Just place a mark against it on the list to indicate you have spent 1 Pomodoro already on that particular task. If you finish within a Pomodoro then use the time wisely maybe you want to review what you have done, check for any obvious bugs or tidy your code formatting. Only if the task has been completed within the first ten minutes of a Pomodoro can you select the next task on your To Do Today list.

Now you start again. After the fourth Pomodoro it’s best to take a much longer break say half an hour or what ever suites you just as long as it’s more that 5 minutes and the same rules apply – no thinking about that task!

Interuptions

The Pomodoro technique classifies interruptions on two levels; internal and external. Internal is where you basically interrupt yourself. These are usually not urgent at all and could well be a distraction to your current task. External is where other people interrupt you that you have no control over. If there is no choice but to abandon the Pomodoro then you must void it completely, not ideal and should be avoided at all cost.

Make a note of the interruption under the heading of Unplanned & Urgent on your To Do Today sheet. Mark with a U and a possible deadline date & time if required (although this is rarely the case).

This is just a very simple guide to how I have started to use the technique on my personal projects to improve my focus and delivery. I would suggest that you read the whole technique and see how you can adapt it to your needs. You might be more comfortable with 45 minute Pomodoros for example.

What do you use to get focused and get things done? I’m interested in hearing how others tackle the problem especially on remote working and individual projects.

Tools & resources to help

Being an interactive developer I was on the hunt for an AIR application to do the trick. I found a couple but ultimately found nothing that suited my needs directly so I have started to build my own. In the mean time checkout:

• Pomodairo AIR app built with Flex (Open Source)
• A very simple timer done in AIR

Also for Mac there is the Pomodoro desktop.

Adobe Flex is a great platform to work with for creating rich engaging applications of all sizes for the web and now the desktop with AIR. Now we are at Flex version 3 and the next version Flex 4, which is the SDK, and the editor now called Flash Builder are just around the corner.

There are a number of resources, guides and articles that I use regularly when building Flex or AIR applications. This is a growing resource so bookmark the page and feel free to suggest anything that I may have missed.

Here we go then:

Explorers

• Flex 3 style explorer (Adobe)
• Tour de Flex – Flex 3 component explorer also available as an AIR application (Adobe)
• Regular Expression explorer
• Effects explorer (James Ward)
• Designer effects for Flex components (Tink)

Guides and cheat sheets

• Flex 3 Developers Guide (Adobe)
• Flex 3 Language Reference
• Flex Builder cheat sheet (OS X)
• Debug a remote application in Flex Builder

Coding standards, conventions and best practice

• The guidelines used by the Adobe team on the Flex SDK
• Flex best practices part 1 (Adobe DevNet)
• Flex best practices part 2 (Adobe DevNet)
• Top 10 Flex mistakes

Flex performance

• AS3 and Flex optimisation techniques (Inside RIA)
• Improve client performance (Adobe DevNet)
• Creating smaller SWF’s (3 part)

AIR performance

• Idle CPU usage in AIR (Grant Skinner)
• Writing efficient AIR applications (AIR core team developer)
• AIR performance tips (Adobe AIR blog)

Styling & skinning Flex

• Flex 3 CSS properties list
• Degrafa – declarative graphics framework for AS3 and Flex
• Axiis – data visualisation in open source

External Libraries

• Flexlib – open source components (Google code)
• AS3CoreLib – open source core library (Google code)

Further help

• Flexdeveloper.eu forum
• Adobe community forum for Flex
• ActionScript.org
• Adobe Flex Cookbook

This is just a small list that you can use everyday. It’s not definitive and does not try to be.

Here we go it’s Flash Camp time again but in my area of the UK the Midlands!

There is a great mix of sessions to be had by some fantastic speakers so there should be something for all including designers, developers and general others. There are some great sponsors too so come down on the 16th June but remember to register today as places are limited. Also did I mention it’s FREE!

I’m excited to be giving a session on Flex UI skinning. Always a hot topic and with many ways to enhance the engagement and appearance of your Flex applications I will cover techniques you can implement today with the fantastic Degrafa framework. While taking a peek at what will be arriving in Flex 4 and Flash Catalyst with FXG. Oh yes baby!

So please come and say hi and collect a Moo card, I’ll be happy to help with any AIR or Skinning questions you may have or even just to talk about the weather.

Yes there is life outside of London in the Flash, Flex and RIA community. So sign up now for a hedonistic day of Flash Platform activity, cool sessions and the chance to meet other great people. I’m really interested to meet others from the Midlands area who are working on interactive projects using the Flash Platform. There appears to be quite an underground scene going on with many small agencies and freelancers that I’m only just discovering on my doorstep.

Register now at Flash Camp (UK)