We love playing with new technology and strive to stay on top of the latest and greatest. We also regularly attend industry events and user groups such as FOTB, Droidcon, 360Flex, DDD, NxtGen and LFPUG and always looking for the next great event.

You’ll get to work with the likes of me, @andreablack, @peterkeating and @colinl along with occasional input from great talents such as @nwebb, @getrichhull, @amw7 and others to help us build world class RIAs.

We get all sorts of interesting projects ranging from sales tools for one of the worlds largest toy manufacturers to really cool audio slow-downers to help people learn to play music. We like to consider ourselves ‘platform agnostic’ which means we don’t get caught up in the “my tech is better than your tech” arguments. We focus on learning as much as possible and using the best tool for the job. This is great fun for us, we don’t get stuck using the same old technology and means our clients get a better result from experienced and unbiased opinion.

If you’re a developer with good OOP experience, familiarity with Flex and/or .Net and a genuine passion for building amazing user experiences and writing great code why not check out our openings and drop us your CV/portfolio.

These sort of issues are always a real pain as it’s a problem not expected, not budgeted for and almost certainly going to eat a lot of time. Oddly I couldn’t find much else out there on the same issue. Fortunately one of the few resources I did find in this case someone had already done the hard work for us!

Jake over at byHook posted some extremely handy classes which use javascript injection to pickup the js mousewheel events in the browser which are much more reliable. It then uses the info from these events to fire off a new mouseevent in Flash.

It was built for use in Flash projects but works seamlessly in Flex also:

Import the classes and add the following to the APPLICATION_COMPLETE event:

private function onAppComplete(e:FlexEvent):void
{
MouseWheelEnabler.init(this.stage);
}

And that’s all, much more consistent and responsive scrolling! It did still feel a little slow for my taste so I added the following bumpDelta method to the system manager to speed things up:

private function onAppComplete(e:FlexEvent):void
{
MouseWheelEnabler.init(this.stage);
systemManager.addEventListener("mouseWheel", bumpDelta, true);
}
public function bumpDelta(event:MouseEvent):void
{
event.delta *= 2;
}

Like I said, couldn’t find much when searching on this issue hence my re-posting of Jake’s solution. I was specifically looking for Flex so thought this might help someone else in the future but all props definitely due to byHook for the code.

Always assume the call you’re making will work.

Some context for the above, I recently got sick of my iPhone and decided to give Android a spin, side-stepping the obvious discussion here, one of the things that has irked me about the Android experience is that it just doesn’t feel as responsive as the iPhone for certain applications, specifically email. So I started to compare the two and realised that the iPhone reacts to my interactions immediately whereas Android seems to wait for approval from the server. This eye-opening discovery led to me imposing a new standard here at Moov2:

Every user interaction must have an immediate and obvious reaction.

Proud and smug feelings of wearing my user experience hat were soon interupted when challenged to explain wtf I actually meant by this. So, for example, deleting an email from a list of viewed email messages. When I hit delete I expect that message to be removed from the list and if that happens as soon as I press the delete button, I’m a happy chap. Conversely, if I have to wait, even a couple of seconds, I may think I missed and try hitting it again… and again… etc. So developers, quite simply, as soon as that delete button is hit, remove the message from the list and THEN send your call informing the server to do it’s part. This approach can be applied to pretty much any application development that involves a rich user interface, Flash, Flex, Silverlight, AJAX, Android, iPhone, native desktop apps and whatever.

But what if something goes wrong?

Of course, just throwing the message away willy-nilly is reckless, there’s a whole host of things that could prevent that message from being deleted. The user might be offline, the email list might not be up to date or there may just be some other bug elsewhere making the delete email process just plain not possible at the moment. In this case, sheepishly, politely and unobtrusively, let your user know the fact and pop the email back where it came from. This will obviously be a nuissance to the user, but how often does this really happen in comparisson to how often it works? Very rarely, and it’s no less annoying for the user than having to sit there waiting with no response only to find out the action failed.

What if I NEED the response in order to update the UI?

So deleting is a fairly convenient example because we’re taking away from an already viewable interface, what about if we’re adding to our interface based on the response from our call? For example displaying the list of emails in the first place. Well, for this I suggest you present all of the interface elements that you know are going to be available and just provide some indication that something else is going on to reassure the user that their input has been acknowledged. So when the user chooses to view their inbox, immediately react and change the view, present them the ‘Inbox’ title, show them any user controls they might be able to interact with and display the space those messages are going to load into with some form of preloader/spinner and note indicating their messages are being retrieved.

So take a minute and review your result handlers to see how much UI stuff is being done there. Could it be moved to before the call was made? This sometimes means you need to think about how to best back-track when things go wrong but for the 95% of the time when you just get the result you’d expect you’ll deliver a MUCH more responsive feeling interface that your users will thank you for.

By the way, if you’d like to actually see some code demonstrating this concept tweet the following message to Pete who has prepared a very clean implementation of this for a Flex application we’re currently working on: “Hey @peterkeating, codez pls http://bit.ly/f8HOyp. I’m sure he’ll oblige with a sample soon enough.

One fairly simple yet useful and perhaps not widely known discovery I made was how to go about getting assets designed in Flash into my Flex skin with just a bit of faffing about. I’d figured this wouldn’t be too high up on many people’s interest list with Catalyst weighing in as the main contender but Paul showed some interest so if for no one else, I know it’s of interest for at least someone out there!

Fla to Fxg to Spark

Will try to keep this to the point and let the visuals do the talking.

We start off with a simple Spark Button and assign it a custom skin:

<?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/mx" 
			   minWidth="955" 
			   minHeight="600">
	<s:layout>
		<s:VerticalLayout gap="20" 
			paddingLeft="20"
			paddingTop="20" />
	</s:layout>
	<s:Button label="My Button" 
			 skinClass="skins.FlaFxgSkin" />
</s:Application>

To create the skin simply File, New, MXML Skin and set the host component to be a Spark Button as so:

With the generated skin we can actually remove everything down to the following which is just an empty button skin with a label:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
	     xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
	     minWidth="21" 
	     minHeight="21" 
	     alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
 
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
 
</s:SparkSkin>

At this point we have a pretty dull skin and want to jazz it up a little with some Flash sexyness, I suggest you find your own but this is what I’ll be using to demonstrate:

Once you have your masterpiece all you need do is File, Export, Export Image and choose the FXG file type. Point this file at your desktop or somewhere handy and you can open it in your text editor of choice.

What I noticed when I did this is that the FXG from Flash has near enough identical paths, fills, strokes, gradients etc as in spark (of course this is obviously by it’s very nature). The only thing that didn’t correlate was the spark namespace. If your shape is simple enough you can just go and manually add the s: by hand but if it isn’t then RegEx to the rescue. You’ll see I’ve used Notepad++* Programmers Notepad in the following screens to do a regex search and replace to insert the namespace we want.

Regex
find pattern - (<|</)(\w)
replace pattern - \1s:\2
(you might need to change the replace to $1s:$2 depending on text editor)

Before:

After:

Then you have your fxg code needed for your skin, simply copy and paste all of the the <s:Path> elements into your skin just above the label:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
	     xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
	     minWidth="21" 
	     minHeight="21" 
	     alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
 
	<s:Path data="M59.2 25.8 59.55 43.35 82.25 50.3 67.7 58.05 85.35 79.95 58.45 71.8 55.5 99.75 42.2 75 20.3 92.65 28.45 65.75 0.5 62.8 25.25 49.5 7.6 27.65 34.5 35.75 37.45 7.85 50.75 32.55 59.2 25.8">
		<s:fill>
			<s:SolidColor color="#009900"/>
		</s:fill>
	</s:Path>
	<s:Path data="M82.25 50.3 59.55 43.35 59.2 25.8 58.9 11.05 89.5 0.5 109 26.25 90.5 52.8 82.25 50.3">
		<s:fill>
			<s:LinearGradient x="58.9" y="26.65" scaleX="50.1">
				<s:GradientEntry ratio="0" color="#414142"/>
				<s:GradientEntry ratio="1" color="#686868"/>
			</s:LinearGradient>
		</s:fill>
	</s:Path>
	<s:Path data="M59.2 25.8 58.9 11.05 89.5 0.5 109 26.25 90.5 52.8 82.25 50.3 67.7 58.05 85.35 79.95 58.45 71.8 55.5 99.75 42.2 75 20.3 92.65 28.45 65.75 0.5 62.8 25.25 49.5 7.6 27.65 34.5 35.75 37.45 7.85 50.75 32.55 59.2 25.8M82.25 50.3 59.55 43.35 59.2 25.8">
		<s:stroke>
			<s:SolidColorStroke weight="1" color="#20343D"/>
		</s:stroke>
	</s:Path>
 
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
 
</s:SparkSkin>

And you’re done! Okay you’ll obviously want to do more with it than that, you can tie this into your button states and also do clever dynamic stuff with the FXG once it’s in but for now I figured this is enough. It would be really nice if this could be done without all the copying and pasting and I think possibly a JSFL script could do alot of the work for us so if anyone wants to contribute that, I’d be most grateful.

I’m going to try to expand on this and demonstrate a bit more of what I’ve been discovering as I find the time and figure more interesting things out.

That said, it definitely feels like it might be a bit of a second class citizen to Adobe. As I mentioned I’ve been using Buzzword for literally years and witnessed it evolve considerably since it’s earlier days. However, that evolution appears to have slowed. The only notable feature to have been added in the past few months is Workspaces. Other than this I know of a long list of feature requests that are as yet, unfulfilled. To be fair, this is more a rant about Buzzword specifically and not Acrobat.com as a whole as I haven’t fully checked out the presentation or ‘tables’ software and they have added support for conferencing with Adobe Connect so maybe that’s where efforts are being spent.

Workspaces is however, a great feature which I would love to make full use of… but can’t:

This has been the case for a long time now and several other aspects such as Connect are restricted by this. Whilst I appreciate there are legal and corporate considerations here that argument only stands for so long, what year is this?! I’ve been a fully-paid up user of a lot of SAAS services who have managed to figure this out. I did moan about this on twitter a while back to which I did get a response from the acrobat twitter account informing me to sign up to be notified when they worked this out, however I have been on the notification list for a long time now and have never had even an update from it.

Talking of SAAS or cloud based software, I’m a techie and a businessman, probably the ideal target audience for Acrobat.com I’m not afraid to be an early adopter of technologies and am comfortable signing up to such things. Which is why I also use Google Chrome as my current browser of choice… which is why this is also annoying:

I appreciate Chrome is a new browser and I don’t expect every new technology that comes along to be instantly fully supported. However before they blocked Chrome it did work, it was glitchy but then a lot of sites are and that’s what you expect in early release software. A much more welcome approach would have been a note saying Chrome wasn’t fully tested yet so an alternative browser is recommended but you’re free to carry on if you choose.

UPDATE: see Bob Treitman’s (Adobe QA engineer – I believe) comment below explaining the above is an FP10.1 issue.

Anyway, I will continue to use Buzzword for now (not to mention stop moaning and get some work done) but I am getting increasingly disheartened by the lack of new features and restrictive US-only availability. I will also have a look at other similar services, I do use Google docs but it still feels like a webpage as opposed to a word processor, feel free to suggest alternatives in the comments.

So I thought rather than spend forever looking up hardware specs, recommended platforms and whatever, I’d just do the lazy thing and put it out there to the #lazyweb and see what came up.

Within moments the ever-helpful seantheflexguy responded with his spec and his endorsement of his setup:

Well, that was very useful and I thought how great it would be if we could collate more information about other RIA developers’ setups and how they rate them.

So feel free to contribute and copy the following into the comments and fill it in and you can help do my research for me share hardware spec for the benefit of the RIA community .

Computer:
Processor:
RAM:
Hard Disk Size:
Hard Disk Speed:
Primary Software Used:
Rating: / 10
Other Comments:


Here’s mine for starters:

Computer: Macbook Pro 17″
Processor: 2.4Ghz Intel Core 2 Duo
RAM: 4Gb
Hard Disk Size: 150Gb
Hard Disk Speed: 5600rpm (i think)
Primary RIA development Software Used: Flex Builder, Visual Studio 2008 (under VMWare Fusion), Sql Server 2008
Rating: 7 / 10
Other Comments: The machine has been a real workhorse for the past 2 years and has taken quite a bit of torment from me. The hardware has been fairly robust although the problems are starting to present themselves now (now i’m out of warranty!) and things are very costly to put right. Runs very hot when running FlexBuilder in OSX and VS in windows and has really started to slow down lately. Never had much of a problem with system crashes or freezing other than the occasional browser fail.

We got to the hotel on Sunday morning with the best intentions of spending the day doing touristy things, unfortunately because of our flight timings we basically traveled throughout the night and just got the hotel and crashed for a few hours. First thing I did after I’d caught up on sleep was sort out wifi access, not good. Best part of £70 for 3 days wifi is ridiculous… and it was slooooow. This was definitely an issue for a hotel full of geeks and would suggest anyone organising a conference takes internet access into serious consideration when finding a venue.

We later went down to the speaker dinner which was a relatively quiet affair but was great to meet new people and the dinner was pretty decent. At this point to be honest I didn’t have particularly high hopes for the conference because of the low number of attendees. Fortunately however my initial concerns were not upheld.

The first day of the conference for me went something like this:

Keynote: nothing new for me here but good to see Adobe having a presence.

Michael Labriola: Dense and Hot – An Introduction to Your Application’s Start Up
Michael has a great presentation style, he was relaxed and managed to get through quite a lot of very useful information in a relatively short space of time. I think conferences could do with more of these sorts of sessions as many seem to have a lot more introductory level sessions. I learnt a lot from Michael in the session and throughout the rest of the conference. He’s also a very smart and funny guy.

Marco Cassario: Better Flex and AIR Applications Using AJAX
Marco gave an interesting presentation on using AJAX in AIR but he also covered some general good practices for Flex development. I learned a few things AJAX related that I didn’t already know but I think generally AJAX just doesn’t get Flex developers very excited. Marco presented his session well and got through a lot of material but I would definitely like to see him present on some more advanced Flex stuff in the future.

Luca Mezzalira: Flex Bitmap Effects!
Luca gave a fun presentation on Bitmap effects and had some good samples to share. I’ve not really done anything with bitmap effects before and definitely now have the required knowledge to do so.

Piergiorgio Niero: 3D Render Engines in the Flash Platform
Piergiorgio gave a great presentation starting with some of the basics of 3D in flash then running through to demonstrate the build up of some very impressive Papervision3D demonstrations and Papervision in Flex. He wasn’t too confident in his English but certainly got everything he needed to across and the examples and sample code provided are great.

Sakri Rosenstrom:Invalidation Routines, Pounded into Your Cranium Once and for All!
Unfortunately I had to deal with some work issues during Sakri’s presentation which was really annoying as I wasn’t able to concentrate on it fully and it was a pretty technical session. What I did manage to keep up with was very useful and well presented and Sakri managed to deal with some unexpected technical issues very well. I hope to catch his session again some time.

Neil Webb: Cairngorm for Beginners
Neil’s a good friend of mine and I’d seen parts of his presentation beforehand but was looking forward to seeing the whole show. He was a little nervous at first and perhaps spoke a little quietly to begin with considering he wasn’t using a mic. However, once he settled into things the presentation went very well. He has some VERY funny slides and if you’re going to scotch on the rocks and/or 360 Flex San Jose definitely check out his session. Even if you know Cairngorm go see it for the Phat controller, Sexed up Flex Frameworks and Sexyometer! If you aren’t familiar with Cairngorm then Neil breaks it down into a very digestible manner and uses great metaphors to explain what’s going on.

Borre Wessel: Cairngorm Deepdive
Borre presented a good session on Cairngorm and other useful good development practices. He covered some topics that I’ve been looking into lately such as view patterns and did a good job of explaining the Presentation Model pattern which is a very nice approach. He seems a pretty laid back guy which made him approachable for questions but perhaps could do with a little more enthusiasm and volume to maintain the audiences interest. Nevertheless another useful session for me .

Finally it was my turn to do my presentation on Developer Best Practices. I was a little worried as I hadn’t prepared quite as much as I’d have hoped to (being ‘dragged’ out for pizza and 1 litre beers the night before didn’t help ). I was more concerned however by the fact that almost everyone I’d met was a very talented and skilled Flex developer who more than likely didn’t need to be told the best practices I was there to present.
This concern was re-affirmed as I kicked things off by asking the group “Who uses source control?” as the preamble to my 10 minutes I’d planned explaining source control… to which all but one of the attendees already did! After struggling preaching to the choir for a few minutes, I decided to scrap that and adopt my reserve tactic of opening the topics in the session up for debate.

This was also a concern of mine as in many of the sessions the audience tended to stay pretty much silent. Fortunately for me I had Michael, Sam, Neil, Robin, Sakri and various others in the session who really came into their own and spoke out. We discussed various OOP practices, design patterns, unit testing and a great debate on pair programming (always a good one to throw in if you want some audience participation!).

I enjoyed the session in the end and definitely would like to try the discussion approach in the future as I managed to learn a few things from the guys I was supposed to be presenting to and I’ve had some good feedback about it (despite the ropey start).

Overall, despite initial concerns 360 Flex Europe turned out to be a great conference and I’ve very glad to have attended. Thanks to the 360 guys for arranging it and thanks to everyone I met there.

Niels Bruin responded with what I think is a very good wake-up call to the starry eyed approach to reviewing web apps with lots of transitions, reflections and other shiny bits. Niels highlights some real basic usability faux pas that Firebrand made such as mystery meat navigation, red punishing looking confirmation messages and inconsistent design touches.

To be honest, I read all the commotion and Niels put down before I looked at the site and to be fair to Firebrand I probably wouldn’t have picked up on those points myself. But then I’m not and would not claim to be a UX hotshot of any kind. The key point for me is that the points raised by Niels do not require a magical usability eye and could very easily be a printed checklist and implemented as part of a quality control assessment before final delivery of a product. To be fair I do also agree with the points Ryan makes in his followup and I’m also all too familiar with things such as expectation and deadlines which can all to easily prevent this much-needed attention to detail. However, if we keep reminding ourselves of it then hopefully it will become second nature and not needed as a time consuming afterthought.

If you’re responsible for the creation, delivery or quality of a customer facing project, take 20 minutes, open up your word-processor of choice (perhaps use it as an opportunity to try out Buzzword) and hack together a simple list of quality control checks.

Here’s a handful of checks plagerised from Niels post and an old post I remembered by Aral to get you started, copy the below and paste into a document, print out 10 copies, run through your current project and tick each one off and you’re well on your way to becoming a quality control engineer!

Niels’ Firebrand wrist-slap:

• Make sure any icons/metaphors are extremely obvious or explained with tooltips or other indicators
• Make confirmation messages look positive and warnings look like warnings (I.e. don’t positively confirm an action in red)
• Is everything laid out consistently? How much effort would it really be to tweak that button a few pixels to line up properly?
• Can familiar controls be used in a familiar manner? E.g. can I scroll a scrollbar using my mousewheel, drag it and click up/down arrows?
• Have you tested on all likely platforms/browsers? At least WinXP, Vista, Linux, OSX with IE6 & 7, Firefox, Safari, Opera

Aral’s old post on UI principles (interpretation by moi for checklisting purposes):

• I can use it but am I a ‘typical user’? Even better: can I get an intended user (or several) to use it?
• Does validation “prevent not scold”? Does the user get scolded “YOU IDIOT, WHY DIDN’T YOU SELECT A GENDER BEFORE CLICKING THAT BUTTON?!” or do we just make the button un-clickable until the gender has been selected with some unobtrusive instruction to do so?
• Does the user receive sufficient feedback? If the user makes an interaction, is it obvious that interaction has been acknowledged by the app and the expected result has happened? (see Niels point on adding to faves).

There’s a load of other things that can be added to this list, for generic testing and I’m sure for specific audiences/companies/application types etc. I’m going to do some digging on other principles people have come up with as I know there are a ton out there but whilst this is topical I thought I’d add my opinion and throw in a call to action to anyone reading.

I mentioned “played with a couple of AIR apps”, why only two? To be honest it’s probably slightly more, but still only very few. I’ve downloaded and installed the Pownce AIR app, now uninstalled as I didn’t use it. I downloaded and installed the Finetune AIR app, now uninstalled as I don’t keep much music on my computer and so it didn’t offer me much more than the in-browser version. I’ve also downloaded a couple of other apps out of interest but only was looking out of my interest in AIR and not so much because of the usefulness of the app. All gone, I currently have zero AIR apps installed.

The fact I uninstalled them isn’t really the point i’m trying to make, for me, those apps just didn’t add much value so I removed them, that could be the same as on any platform. The thing that bothers me about AIR apps is how few I can be bothered to try. I generally am not that inclined to download and install the applications in the first place. This is because breaking out of the browser breaks up my user experience. I love RIAs, I love the ease in which I can access, use and share them. These things just aren’t as good when I have to download and install the application I want to use, I just want to use it.

Okay, so the features that AIR offers aren’t available to the Flash player and I do think those features are hugely valuable. I just don’t think running an RIA as a completely separate entity to the browser works too well. A large draw for an RIA is simplicity and availability, both of which out-of-browser RIAs restrict.

Take Buzzword, which is a truely remarkable RIA and in my opinion is superior to any other online AND offline wordprocessing tool. I’ve not seen the AIR version of it which I believe is on it’s way and I can already see that what AIR offers will be a great addition to it. But wouldn’t it be even better if all the connectivity detection, local file storage, drag and drop etc were available to the in-browser version? If installing AIR gave me all those capabilities as an in-browser resource as well as a stand-alone runtime? Okay so no custom chrome for in-browser. Big deal! Apps like Buzzword already stamp such an impression with their branding and interface you really easily forget you have some boring browser buttons up there. We now have full-screen in Flash Player, let’s work out those secrity issues and make more use of that.

I know it’s not so easy with all the security sandbox constraints of running in browser but is there really that much difference to me saying “yes let this application i’m installing have access to the nether regions of my PC” vs “Oh, I tried to do something in this online app that wants access to my PC? Oh go on then let it”.

Security gurus can tell me that what i’m asking for isn’t possible and why it shouldn’t be, but I feel as long as I ultimately make the decision on what does and doesn’t have access then it shouldn’t matter whether this is in or out of browser. Am I alone in thinking this? Is this something that will be possible in the not-too-distant? I’ve not done enough homework to answer that but it certainly makes more sense to me as in some ways AIR feels like we’re taking a step backwards.

That’s incredible on the easy scale. All i’ve ever done with SWX before now was the moo-card tutorial (which is about 4 lines of code) since my FOTB pledge to myself.

I even struggled with some basic AS syntax (array.length not .count as i was trying), so if I used Flash regularly I think that would have taken me around one minute to do. I had to do this for a project I worked on some months back and it took me best part of a day to get everything in place, setting up a php to xml parser loading the xml into flash, xmlObj-ing the xml when loaded!

+10 kudos points to Aral
+10 kudos points to Florian

My SWX RSS reader:

[kml_flashembed movie="/projects/swx/RSSReader/RSSReader.swf" width="252" height="167" /]
and just so you know how easy: here is the source

Okay it’s not brilliant, but less than 3 minutes!