Ever since I stopped working at the Saxion University of Applied Sciences in 2006 I’ve been trying out ways to stay teaching. I enjoy seeing people unlocking their potential in new areas, regardless of it being something traditional like software programming, or something out of the ordinary like kite surfing. I also found that transferring whatever knowledge I have increases my own understanding of the topic. I totally believe that teachers get the most out of class.

A couple of months back I saw a video of someone explaining how to apply the model of martial arts schools or ‘Dojo’ to the field of teaching programming skills. As a teenager and in my college years I’ve practiced several martial arts myself, so the concept of a ‘Coding Dojo’ instantly appealed to me. I contacted a group of friends from the Flash community to see if they’d be interested in learning how to write code for Objective-C and Cocoa in this setup. The pilot event titled “Coding Dojo: Objective-C for ActionScript developers” was held yesterday, in the wonderful office space of Fonk Mobile here in the city of Appsterdam.

After an introductory talk of about an hour we spent two sessions of 90 minutes writing code. Two people would be writing code or ‘sparring’ together, while the other attendees could see the progress on a central screen. At intervals of 10 minutes the person at the keyboard, the ‘pilot’, would scoot over to become the ‘co-pilot’ for the next interval. This way every attendee participated in writing code and talking about writing code. The other people would be sitting around the external screen, following the writing, googling for solutions and reading the Apple reference guides.

Having spent quite some time in classrooms both as a student and a teacher, this was the best setting I have yet come across for teaching software programming techniques to a group. Because every attendee had to overcome the same hurdles in figuring out how to write the syntax, the pacing was a little slower than I had estimated beforehand, yet it proved to be the right speed for the attendees. In addition, because everyone was preparing for their sparring moment, everyone was paying attention and participated in finding solutions to the problems at hand. I was amazed by the group dynamics and only occasionally found myself explaining concepts that would take too long to acquire as a group.

I had a great time preparing and guiding this Coding Dojo session and when my current commercial project is done, there will for sure be a second installment. Thanks to all my ‘students’, I learnt a lot yesterday and hope you did too!

If you reached the end of this post and are interested in participating in the next Coding Dojo, please fill in this form so I can keep you posted!

“Some people use Twitter for business, others use it to get the latest news or entertainment info. I use Twitter to have fun with my friends and ‘Twuppet’ is the new app that takes this to the next level! Instead of browsing through the vast amount of tweets the platform has to offer, Twuppet lets you interact with your dearest friends in a fun and personal way, so you’ll never miss the messages from the people you care about the most.”

This was the idea I brought to the latest installment of StartupWeekend Amsterdam, where 175 participants battled to form teams and create a start-up company in less than two days time. My idea was not picked from the incredible 74 one-minute pitches we had on Friday night, but after wandering the facility looking for a team that matched my interests, I eventually decided to go on with it anyway. The decision was backed by fellow #swAMS participants and freelance developers Valérie Alloix and Paul Tondeur, who were happy to leave their teams and join forces to create ‘Twuppet’. Awesome!

As we got settled in there was less than a day left to prepare for Sunday’s presentations. We were quite anxious when we saw the other big teams (with up to a dozen members) progressing at top speed, but we had already decided on just having fun with our little project. Because the enthusiastic feedback we got from the jury and SW mentors was so empowering (many thanks especially to @stevenblom and @mathys!), we decided to skip Saturday night’s sleep, called in favors from friends all around the world and made a working prototype of the desktop software in just 24 hours.

The prototype

15 minutes prior to the weekends final presentation run we finished the prototype and it performed great in the live demo on stage. The presentation was streamed live but unfortunately not recorded, but there’s a screen-cast from the prototype below. In addition, you can download the prototype yourself and it runs on Windows, Mac and Linux (You need Adobe AIR to run the prototype, but chances are good that you already have it installed). Watch the video on Vimeo with HD quality.

What’s there to see? Twuppet will present the people in your twitter timeline as little animated puppets walking the bottom of your computer’s screen. The tweets appear in speech bubbles that will take different shapes depending on what the tweet is about. Question marks, exclamation points and hash tags like #fail or #idea will in addition cause the twuppet to act out the emotion in wonderful animations, laughing, crying, winking or raising its fists angrily. And whenever a twuppet is in your way, you can just throw it off to the side. Good fun!

Nightly heroes

In the middle of the night we had help from a number of accidental team members. The animations were done by our 4th team-member from overseas, Jeremy Joseph from Headache Films, who skipped a night just for us working from his office in Portland, Oregon. Our second hero of the weekend is fellow freelance developer Mathijs Baaij, who needed hardly no convincing to trade the Amsterdam night life for an entire night of coding speech bubbles. Lastly, Hugo Dechesne and his girlfriend Anna came over close to midnight to brainstorm the characters for the prototype. You guys are all so amazing, we couldn’t have done this without you!

Next steps?

We’re very proud of the result and would love to take it a step further, exploring the business side of things. Unfortunately we didn’t win any of the prizes so come Monday morning the three of us returned to our day jobs. We do want to polish the prototype just a little more so you as a user can select the friends you really want to have twuppetized, but there’s no guarantee as to when we find the time to do it.

Who knows what Twuppet can grow into…

How people store their files is a matter of personal taste and organization. At the office of Rocket Science Studios we were discussing a once-and-for-all solution to keep the shared office server tidy. One part of this was the convention of using today’s date as a prefix of folder names. These folders are look like “20110323 – Some Folder” and the reversed date prefix makes them easy to sort chronologically. I’ve been doing this myself for ages now, because the chronological „when did I do that” makes more sense to me than „what’s the letter it begins with”.

I’ve noticed more people around me doing the same and since I’ve been dabbling into Objective-C for the past couple of months, I figured I could write a little tool to help with creating the date based folders. It actually turned out quite nicely, so why not share it with the rest of you all. Here’s DateFolder for OSX!

After putting the .app in your application folder, you can drag it (hold a while) to the toolbar of a finder window. Then, whenever you want to create a folder, hit the icon in the finder toolbar. The app will detect the folder of the Finder window you’re in, and create a new subfolder inside it. For added convenience, you can choose to copy the newly created folder location to the clipboard.

Download the zipped app here, please note that this only works on OSX 10.6+. If you have any problems running it, just let me know @epologee!

P.S. This app was actually inspired by CopyPath and ShellTo from the guys at InScopeApps. I even made the icon with their super straightforward ChopShop app. Thanks guys!

During my last posted project, Gilbèrt François’ website, I wrote a little class to deal with exposing the application state to the browser’s address bar via SWFAddress. That was in march 2010, and in the 10 months since that project, this little class turned out to become more and more useful, with every project I ported it to. A couple of months back I extracted the code from my regular library of reusable things, and put it on github as a separate library called Navigator-AS3. Today, I pushed the latest revision with a slew of new features, and if something like a project on github wouldn’t be in eternal ‘beta’ status, I would call this a “1.0″ release.

At it’s core, the library revolves around a combination of two concepts. The first is the concept of a navigation state that your application is in, and the second is the concept of parts of your application reacting to changes of the navigation state  with different behaviors. For the full tour I’d redirect you to the github repository, but a few details I’d like to mention right here.

One aspect of the library that I’m quite proud of, is the fact that the library’s core does not rely on any third party framework or library. This means that you can hook it into your application regardless of what frameworks you base your work on, even if you start from scratch with every project. And although I think the Navigator can be a great addition to any application architecture, on top of the core are a few integration features that ties it very neatly to some well known libraries.

What started it all is the SWFAddress integration. You don’t need to use it, but with as little as one line of code you can have instant deeplinking to any desired state in your application. This wouldn’t be perfect if there weren’t also a way to hide certain states of your application to the externally accessible browser address. I wouldn’t want to develop without this any more.

Then there’s a tight integration with PureMVC, what improved my workflow so dramatically, that I decided to share it on GitHub. Shortcuts to bind mediators to states, with all the added bonus of state cascading, offered a very clear overview of your application’s flow. Something that can be quite challenging in the spaghetti of commands, notifcations, mediators, proxies and the likes.

Yet recently I’ve been mostly working on integration with RobotLegs, the most elegant ActionScript framework I’ve seen to date. The injector and visitor patterns stimulate you to code your application with the least amount of clutter, and the well known MVC pattern make it a framework that’s fairly easy to get going with. The part of your application that RobotLegs does not address however, is setting up your visual components and controlling the flow of navigation, which is where the Navigator comes into play. The way it integrates with RobotLegs is by extending the core application context, and adding support to bind view components and mediators, actors and commands to navigation states. The lazy instantiation of RobotLegs is combined with the just-in-time initialization of the Navigator and the application context becomes the central hub to manage your application’s flow. Lean, clean and super maintainable.

Over the next few weeks I’ll be adding example code to the repository. I’ve already seen work-in-progress of people using the Navigator, can’t wait to see what’s next! Fork, clone, pull or download your copy over at GitHub

UPDATE: A day after this post, my very good friend @micros and the team over at Random and INDG completed this huge project with a the Navigator: QuickStep Floor Advisor

My second WordPress based Flash site went online today, the first release of photographer and friend Gilbèrt François’s new portfolio. It is also my first commercial project that has a fall back theme for mobile browsing.

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!

The idea to use WordPress as a back end for Flash websites is not original and it has been done many times before, yet it’s very hard to find a place where people explain exactly how they did it. For one of my latest projects, the campaign site of the upcoming winter edition of Heemstede Jazz, I decided to go for it. I managed to put the right pieces of the puzzle together and want to share it with you here.

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.

This app was brought to my attention in 2006 I guess, by Floris Drupsteen. Default Folder X does so many things so exceptionally well that the creators themselves seem to be a little lost in explaining the application’s unique selling points, over at their website. Don’t have their site fool you, the app itself is awesome.

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.

If I were to believe the story my parents tell me, I knew how to operate a TV and a video recorder before I could walk, which was still in the seventies. I just love the buttons. Nobody stopped me from becoming the kid that was “good with computers” and from doing everything the digital era had to offer, I eventually stranded in the “software developer” segment, even though I consider ActionScript programming to be one of the lesser art forms out there.

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

When you work with FDT to create flash products, there are a number of ways to compile your code and view the result. My favorite way is by using the External SWF Viewer, which remembers it’s size and where it sits, and correctly obtains focus when ready for action. However, when you’re dealing with a project that needs a specific browser to run in, the standard “open in browser” feature of FDT (or Flex for that matter), has shortcomings. I don’t like that it opens a new window or tab every time you hit compile, which is especially painful if you’re doing things with performance guzzlers like Papervision. The alternative where you have to refresh the page with your keyboard or mouse is equally painful.

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!