The targets were to display his photography as large as possible, while keeping the interface clutter to a minimum. Instead of regarding the website “as is”, we’ll keep on working on the experience with design and technical improvements over time. The current feature list contains:

• Full screen photo viewing with keyboard support (left, right)
• Auto hiding interface, on mouse inactivity
• Dynamic categories and posts based on Wordpress management
• Pre-caching of consequent photographs
• iPhone theme fallback

We’re still looking for a designer to help us with the next release, so if you’re interested, drop me a line!

When first googling the subject, I found a lot of false advice.

Bad: XML-RPC
There are people suggesting to use the XML-RPC connector to get at your data. For me this turned out to be a dead end. The XML-RPC is designed for creating alternate ways to maintain your Wordpress articles, not for read only access of your articles.

Bad: Atom-RSS
Then there’s people using the Atom-RSS feed to get to the data. The Atom feed is XML and you can read the fields and it works fine. But if you want to do anything custom, it will have to pulling your hair in no-time. Plus, it outputs so much more than you actually need, it’s a waste of your time and bandwidth.

Bad: Direct MySQL connection
The third way I got excited about was to completely ignore the Wordpress install and just connect to the database directly. This is without a doubt very powerful, but because Wordpress is updated and changed so often, it’s hard to find something online that works with the current version. No ponies’ Flash press looked promising, even using AMF to speed up things, but it’s no longer compatible with the latest Wordpress. Moving on!

Great: Custom XML Theme
Finally Jankees van Woezik got me in the right direction with a fourth suggestion, which proved to be exactly what I needed for my project. Instead of trying third party plugins and XML connectors to get to your data, just create your own theme from scratch and you’ll be able to access pretty much anything inside Wordpress. It’s not as hard as I though it would be, even with my PHP skills being neglected for several years.

In the end you’ll have a website running on Wordpress, containing all the data you want to display in plain HTML. Google will love the ease of indexing your content, but any human visitor will only see the fullscreen Flash you put on top of it all, utilizing SWFObject. Check out the source at Heemstede Jazz to see what I mean. Just before the SWFObject placement, there’s a little Javascript magic goin on by Peter Nederlof. It takes all the HTML content, converts it to correct XML and then passes it to your application as a flash var. Thanks Peter, for letting me use your cleaner library! As an alternative to passing the HTML content as a flash var, you can also load your content as XML from your site’s index.php directly, if you don’t mind loading the content twice.

Once in Flash, you can parse the passed XML and use it any way you like. By default, Wordpress let’s you output separate fields for any articles title, body text, category, tags and excerpt. If you need more control, Wordpress has the ability to add custom fields to every post, but if you don’t know what you’re doing with them, you can get lost very quickly. Again Jankees pointed me to the great plugin called Custom Field Template. With it, you can assign a certain group of custom fields (text fields, dates, image uploads) to an article, based on it’s category. Click here to see an image of it in action.

Once you have the custom field templates in place, you can start creating your theme. If you’re not a PHP developer, you’ll definately love the Wordpress bundle for TextMate. It has all the important loop methods and will help you get to the right WP-methods for finding your data.

As an added bonus to passing completely maintainable content to your Flash site, your site even has correct fallback content when viewing it with an iPhone. Thanks Jankees and Peter for helping me with all of this!

Here’s the Wordpress xml theme I made for the Heemstede Jazz website if you need a head start.

DFX runs in your system’s background and whenever any other application triggers an open or save dialog, it gets “hijacked” by DFX, and the result is FTW. The new open and save dialog gets a visual makeover, and if you resize it or change the view from column to details or list, it will actually remember this for the next time. The program’s name hints to the feature that you can set a “default folder” for every application on your machine, and it adds some handy shortcuts to the side of your dialog to quickly navigate to previous locations, favorite locations, etc.

Yet the one feature that had me pulling out my credit card (single user license 34.96 USD) is the “Finder-click” feature.

Your whole screen turns dark when you get an open or save dialog, but when you move your mouse over Finder windows in the background, their outline gets highlighted and you can read the Finder window’s name. If you then click the folder, DFX navigates the open/save dialog to the location of that Finder window. It’s the fastest way to navigate to a certain location on your computer, especially if you’re a nested-directory-fan like me.

Before I start on a project, I now open a single finder window and browse to the root folder belonging to that project. It doesn’t need to be big, it should just be present. Then, whenever I need to save a file, be it an image, a text file or -God forbid- a spread sheet, DFX will help me get to the root of my project with one click, and my though process of saving the file and getting my work done never gets interrupted by having to think about where the file should go.

Awesome app. Check it out over at St. Clair Software.

Over time, I’ll be collecting my wonderful app reviews in this post.

Programming is often seen as something technical, nerdy and unimaginative. Yet what I see around me on a daily basis is a great amount of creativity, and an ever expanding community of people that want to create and improve on the experience of the “digital era” we are currently in.

I’ve embarked on a little detour from web development myself, exploring the art of desktop apps, and it has sparked a deep appreciation for the tools that actually make my day better. Taking away frustration, adding speed to my work flow, or just making stuff pretty.

I intend to share the wonderful apps I come across here, if not to share with my non-existent readers, at least to document the reason why these apps are so cool for my own future purposes:

1. Default Folder X, by St. Clair Software

Via the Dutch open social platform Hyves, participants can race each other by betting on the spots with the highest concentration of solar power. Place your solar panel on a map of the Netherlands and tune your racer to be best suited for heavy rainfall or wind, and see your rank rise to the top of the list with thousands of participating Hyves members. The game is fed with near-real-time weather data, creating an entertaining and competitive game that has you coming back as often as you like. The more active you are, the better chances you have on winning the rather awesome prizes.

I was the lead developer for this project, and had great fun laying out the technical details, from little race car animations to weather data interpolation. Thank you, Media Republic, for having this opportunity!

Because this project is only visible within Hyves, I made a screencapture showing some of the features and visual style. Don’t forget the HD button when viewing!

As long as the campaign is still active (ends October 23rd), you can participate and race for the prizes, check out the Nuon Solar Race Holland. Also don’t miss the site of the Nuon Solar Team for full details on the actual race in Australia.

Jankees van Woezik had me thinking of it a while back, when he came up with a little ANT method to focus Firefox, and then a Javascript to reload the page. That however, doesn’t work too well when you’re running an open social platform like Facebook, or its Dutch counterpart Hyves.

With a little more googling I stumbled upon Fresno, a pretty nifty command line tool for executing Javascript in Firefox via MozRepl, a Mozilla add-on. Guess what you get when you combine them with ANT? Instant focus and reloading in Firefox from within your build script!

Download Fresno from their SVN repository (I like having it as an svn:external in the projects that use it) and install the MozRepl add-on. Be sure to actually start it from the Firefox tools menu, or Fresno can’t connect to it. After that, take this ANT target and modify it to have the fresno directory match your project.

<target name="focus Firefox and reload page">
 <exec executable="open">
 <arg line="-a Firefox" />
 </exec>
 <exec executable="flash/tools/fresno/fresno">
 <arg line="-j 'content.location.reload()'" />
 </exec>
</target>

Et voila! Works like a charm, and saves you quite a lot of valuable keystrokes!

Thirty points are spread over a fairly spacious area. Pick a random point D within or close to that area, find the nearest three points A, B and C and interpolate the relative distances to a weight distribution list (a, b and c), that we can use to multiply the actual weather values: A.wind * a + B.wind * b + C.wind * c. That way we can make a good estimate of what the weather must be like at point D. Sounds simple, right? I thought so too, but found it was a lot harder than I assumed. I hope I can spare someone the trouble of going through all this, by explaining what I did.

The first thing to clarify is that if you have the weighing parameters for a given point in space, you can weigh any numerical data. For my project I need to weigh weather data (radiation, wind, heat, etc.), but for figuring out what algorithm to take, I used colors. They’re easy to compute and the visual result will instantly tell you if you’re on to something. So I started out writing a little test that would allow me to draw colored triangles:

As you can see, the fourth point called “D” shows the interpolated value both in color and numbers, and if you let that point wander through every location in the area, you can draw a pretty picture like this this:

The algorithm measures the distance of D to the nearest point on the line opposite of A, which is BC and stores it as the weight of point A. You do this three times and then normalize the values by dividing them through the total of the three distances. You then have three weight values that total 1, or 100%, and you can use them to multiply the original values. This alone is not enough. Because this method will only calculate correctly if the point you’re dealing with is within the borders of the triangle! I was so happy to see the insides of the triangle all pretty and smooth, but I felt pretty stupid when everything outside of the triangle went horribly wrong. The solution is to find out on what side of each line point D is. If it’s on the same side as the corner you’re weighing, the weight is valid. If it’s on the other side of the line, you should set it’s value to zero and stretch the remaining weights to become 100%. That way you get a nice and clean interpolation, whether you’re inside or outside the triangle.

If someone could have told me this, it would have saved me some 30 hours in the last week before going live with the project, but hey, I feel a lot smarter now that I’ve figured it out myself! Here’s an interactive demo:

The resulting images might look familiar to you, if you’ve ever dealt with 3D visualization techniques, because it is called Gouraud Shading. I’m not sure if I’m using the exact same method, because all reference sites that talk about Gouraud are a bit too elaborate for my use. I don’t have a 3D coordinate space, I don’t have lighting, I’m not even working towards a visual result. I just want to calculate the weather!

It took me several wrong approaches before I finally got this one up here, but the solution is still not optimal. For the example of three points, my last method nailed it. But I don’t just have three points, I have thirty! In 3D applications, all points that are used for shading, are always within the triangles of the mesh. But for my application, I neither have a mesh, nor can I stay within the triangles that the weather stations define. Together with automatic sorting of the three nearest points, this introduces a margin of error, as you can see in this image. I have tested it and because the measured weather data is already smoothed out by mother nature, this presents no big issues.

However, if there’s someone out there that knows a better solution to my problem, please share!

People close to me probably know I have a very strong opinion on live coding during conference talks, so it’s only ironic that my session today consisted of 95% live coding. But that went really well, and the latest FDT beta crunched every build flawlessly. I started out demonstrating the ways in which FDT helps the developer get rid of the standard small stuff, like creating classes, methods and variables, and finished with creating a little Indianapolis 500 racing simulation all in about 70 minutes.

Here’s the result, use the arrow keys to drive the track, and correct, there is no collision detection. The *real* annual Indianapolis 500 race is this Sunday, but unfortunately we won’t be here to see it. We did go to the track after the conference today and rode one lap on it with our rental Toyota! That was pretty damn cool, I’ll tell ya! If I get to go to Indianapolis next time, I’m sure going to extend my stay to be able to attend the race.

Starting april 1st I’ll be taking my bike to the Herengracht on a daily basis. How’s that for a change of plans?

In case you noticed my name on the credit roll at Ralph Hauwert’s workshop last week, I am not a member of the PV3D developer team and therefore my workshop follows a different strategy. Instead of creating or modifying the 3D framework I’ve been working on implementing it into numerous websites over the past two years. With every project there were new technological boundaries that were overcome by creative coding solutions or by changing the project contents altogether. It’s the insights gained in these processes that I’d like to share with the workshop’s attendees. Of course the basics of handling Papervision3d need to be covered first, for which I’ll take you into the only real software solution for developing ActionScript: Powerflasher’s FDT.

Oh and in case you’re wondering, the workshop will be held in Germany and I will indeed be speaking German. I’ve had some practice with that in the past, so don’t worry: Ich spreche nicht so wie Rudi Carell!

Check out the signup page if you’re interested!