Using Programming to renovate your house

Anyone that has gone through the motions of renovating know how expensive it can be. Material costs can really add up over the course of the job and having excess is something we want to try and avoid.

During a recent bathroom renovation we needed to work out the number of tiles required for a splashback in a herringbone pattern. The traditional way is to lay the pattern out and then determine the number of tiles and positioning from that.

Instead I wrote this simple tool that uses Fabric.js and some basic collision detection to work this out.

There are still a couple of features that I’d like to add including working out if I can reuse corners of tiles if only one corner is needed.

Work out how many tiles you need
Work out how many tiles you need
Subway Layout
Subway Layout
Checkered Layout
Checkered Layout

Catalyst could save you time

I’ve just come back from attending the Brisbane leg of the Australian Adobe User Group. It showcased the new features and overall direction for the development suite of products which included the new Flash Catalyst, Flash Builder, Flex 4, Cold Fusion 9 and Bolt.

I was really interested in Catalyst as it’s something that I could see a lot of benefit in using personally.

Adobe has made a conscious effort to further improve the work flow between designer and developer which the introduction of Catalyst.

A tool to help create interactive user interfaces transitions and all, without having to worry about a single line of code. It also enables the user to port this directly into flex for the developer to turn this into an application.

By having something like Catalyst can remove the steps involved going back and forth between Interactive Designer and Developer as the explanation of transitions and state changes are nutted out in the design stage for the developer to see. Of course this is the ideal scenario and we all know it never exactly works out as smoothly as that.

For a designer it can eliminate the need to provide multiple screen shots of piece of interaction and the need further explain your concepts through emails, phone calls, power point presentations, smoke signals or interpretive dance.

It’s still in Beta so I’m sure there will be many more tantalizing features to come but so far it’s looking great.

Overall I can come away from the user group meeting knowing that Adobe is indeed heading in the right direction. They have identified the need to streamline the design/development work flow, as well as further enhancing an existing suite of core products.

Having said that I still think a developer that can touch type could save you more time 🙂

You can download the beta version of Catalyst from the Adobe Labs here

Mac and PC working together with Synergy

I’m running both a Mac and PC in my current development environment. I’ve got some software on both platforms that I use that gotten around to port accross to either the mac or pc. Another benefit is browser testing for any type of css/HTML work.

This nifty piece of software called Synergy allows you to share your mouse across multiple machines. It also allows copy and paste although with a PC/MAC combination bitmap data is not yet supported so only text can be stored on the clipboard at the moment.

You can download the software here and you’ll need to allocate a server and the clients that connect to it.

For those fence sitters out there that can’t decide which platform to use this may be a solution 🙂

Are UI roles changing?

With the release of design based applications like Fireworks CS4 Beta from Adobe, it has again further blurred the lines between the UI professions.

Although there are other tools that can provide similar more detailed functionality that the new version of Fireworks CS4 does such as Microsoft VISIO and Omnigraffle, no other package wraps most the most common RIA Development processes in one package. Fireworks has stepped up from the shadows and has reinvented itself as a somewhat dedicated RIA Development tool.
UI experts can create interactive step throughs for clients, UI wireframes, create custom components, and even export the UI Designs as MXML(flex markup) or XAML(Silverlight markup). I think Adobes decision to add these kinds of attributes to Fireworks was a great one. I always wondered what would happen to Fireworks after the merge, as it was often neglected in favor of the other Image editing tool owned by Adobe… what was the name of that one again?

I generally see UI Teams in 3 Groups

  • UX – User Experience design – They primarily look after the interaction model of the application working with concepts such as wireframes and application storyboards.
  • UI Design – They are responsible for the look and feel of the application.
  • UI Development – They are responsible for the actual coding and software development.

In small practices more often than not, a single developer is responsible for all aspects of an Application, UX, UI Design and all development both client and server. In these cases the Applications are normally built from the database up. By that I mean the backend services are written and test harnesses/wireframes created to start bringing the application together. However I can see the trend going forward in RIA development lending itself to design based/user centered development where the UI drives the design cycle of the application no matter what size the practice. And by allowing a number of client side design tools to publish working code emphasises that.

I would be interested to know how will this affect current software development cycles for teams and individuals. For those that do have resources such as usability experts how will their roles be affected? will they need retraining in current toolsets? Will graphic designers start writing and publishing MXML and XAML code?

The crossover is inevitable from UX, UI Design and UI Developer. The switch between having a UI Designer hat on and a UI Developer hat on is literally a click away.

More information about Fireworks CS4 Beta can be found here.

Toolkits for CS3 Extensions

If you were wondering why the Flex Component Toolkit for Adobe Flash CS3 isn’t where the documentation says it is. You’re eyes aren’t deceiving you.

Previously it was located in the SDK_install_dir\frameworks\flash-integration. However for the final release of the FLEX 3 SDK they removed it.

It can now be found here along with the other CS3 extensions.

Ha ha ha I’ve caught you… you http request.

Have you ever been sick and tired of trying to use the flash remote debugger to debug those nasty remote errors. Well don’t pull your hair out any longer. Why don’t you try Service Capture, the ultimate tool for seeing http requests from your browser.

Service Capture has to be one of my favourite tools in RIA Development. It is especially helpful when dealing heavily with remote packets being sent to and from flex and flash. One is able to browse the specific arguments and view any server side errors returned to the UI.

It runs on both Windows and Mac and for the small price of $30 it’ll save you 3.33 times the amount in your time when it comes to debug that problem and double as your alibi when your standing toe to toe with your server side buddy arguing the fact that flex is indeed sending the correct information.

You can read more about it here