Kwot JS

Remember Kwot, my Flash quote viewer? I published it back in December 2008.

It is a mix of Flash (most part of it), JS (for the add form and its communication with the main UI) and PHP (CRUD logic). Read the blog post for more details on it.

I recently started looking at JavaScript frameworks and tools, probably like most Flash developers. Not because Flash is dead, but because the more tools you master, the better you are. And because yes, everyone is asking for JS and CSS3 these days. After some investigation I decided to give Backbone.js a try. And re-writing Kwot from scratch with it seemed like a great exercising opportunity.

So here its: Kwot JS!

It should work really well on Safari, OK on Chrome, not-that-perfect on Firefox and poorly on Internet Explorer. You were looking for a reason to continue using Flash for building "experience sites"? There you have it: compatibility. Kwot JS relies on CSS3 transforms to allow this perspective view on quotes, and on property transitions to animate the quotes' colors. Of course this doesn't work in all browsers!

Now, about Backbone.js. The framework's requirements and logic are good, but coming from an AS3 world mostly everything looks odd, for better or worse. Note this is my first project with it and I might have missed some good practices or handy tips.

The good thing is its persistence layer. In Kwot, quotes are stored in a database, I simply wrote a simple RESTful API with Slim (try this PHP framework: win) and connected it to my Model classes. That's it, it just works. Underscore.js' templating system is handsome, too. Never used that before, cool stuff.

The bad things are, as far as I'm concerned:

  • No strong typing. Of course this isn't Backbone's problem, but rather JS' one. On this particular point your IDE can help, but you won't get runtime errors.
  • The "this" keyword. You always end up with plenty of lines all starting with a "this.something". It frustrates me.
  • Scope issues: when listening to events you pretty much always have to use Underscore.js' bind method in order not to lose your infamous "this" scope. I don't like that.
  • The MVC pattern. If you ask me: it sucks. I'm no integrist but I wouldn't have called what Backbone provides MVC. I was always wondering "who should do that?" and never really came up with a satisfying answer.

Overall the learning curve is pretty steep, I think it took me less time to write this version than the Flash one, but I'm a 3 year more mature developer. Also, when I wrote the Flash version I didn't really know where I was going and I kept experiencing with concepts and ideas to see what would look best.

On a side note the Flash version uses Neutra, whereas this one uses Questrial (hosted and served by Google Webfonts).

Tell me what you think, both about the app and the framework!

La Classe Américaine – Android

Hey, fellow english-reading visitor, this post is going to be in French! Hope you don't mind.

Si comme moi vous ne pouvez pas vous empêcher de dire "flim", "ouiche" ou encore "un pour l'argent, deux pour le spectacle et trois pour le caillou", cette application est pour vous.

Après une semaine de vacances avec une personne touchée par cette maladie et sans avoir accès à Internet j'ai vite réalisé qu'il me fallait une application contenant tout le script de ce magnifique flim : La Classe Américaine. Je savais qu'un fou avait déjà fait tout le sale boulot et qu'il ne me restait plus qu'à extraire ces données et créer l'interface pour les parcourir...

Grâce à Google Chrome et ses Outils de développement j'ai pu injecter MooTools dans la page. Petite astuce très simple et très pratique (script à copier/coller dans la console) :

  1. var scriptNode = document.createElement('SCRIPT');
  2. scriptNode.type = 'text/javascript';
  3. scriptNode.src = 'https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js';
  4. var headNode = document.getElementsByTagName('HEAD');
  5. if (headNode[0] != null) headNode[0].appendChild(scriptNode);

Après ça, quelques lignes pour extraire les données, les nettoyer et les stocker directement dans le presse-papier au format JSON :

  1. var data=[];
  2. var images=$$('table.script img');
  3. for (var i=0; i<images.length; i++) {
  4. var tr=images[i].getParent().getParent();
  5. var o={};
  6. var scriptTag=tr.getElements('td')[2];
  7. scriptTag.getElements('a').dispose();
  8. data.push({
  9. ts:tr.getElement('small').get('text'),
  10. script:scriptTag.get('html')
  11. .split('’').join("'")
  12. .replace(/\n/, '')
  13. .replace(/<br>\n$/, '')
  14. });
  15. }
  16. console.log(data.length);
  17. copy(JSON.encode(data));

Un petit coup de Flash Builder, saupoudré de Robotlegs et hop, une appli Android ! Pas de version iPhone pour l'instant, mais si quelqu'on m'offre de quoi me payer un certificat de développeur, je ne dis pas non !

Au revoir, Messieurs-Dames. C’est ça, la puissance intellectuelle. Bac + 2, les enfants.

Okr – Story of a failure

Some projects become real, others never see the light of day. This one is more of an abortion.

Six month ago I've been contacted by an architectural firm to provide some consulting on a project of theirs (I'm not going to name names, you'll understand why). The goal was to find ideas to make a building's front more interesting. The building being a place to help and promote Hip-Hop culture.

So I started working on it and came up with ideas and concepts. The architect I was in contact with seemed pretty happy with it and everything was looking good.

Until I no longer received any answer to my e-mails... Our last interaction is now 5 month old and I think time has come to mourn. What I came up with can be interesting and since it involves an OpenSource project, here are a few bits about it.

At that time I was discovering  GML (Graffiti Markup Language) and Evan Roth's work. Bordeaux hosted Les Grandes Traversées and all of this really inspired me. So I thought of a mash-up between GML's #000000book (black book, open archive of GML tags), a player of my own (Okr), the building itself and Twitter. Here's the document I presented to explain what I had in mind.

The steps are:

  1. Creating and sending a graffiti;
  2. Receiving data;
  3. Converting it to an image;
  4. Projecting it on the building's front;
  5. Photo-shooting of the front;
  6. Sending to Twitter;
  7. Online consultation.

After a few e-mails with Jamie Wilkinson (heads up!) I started working on the core classes writing GMLPlayer and GMLCreator. The goal was to provide both a way to display tags and to create/upload them. I then built a UI around all that (a Flex one, after noticing Minimal Comps didn't work the way I expected).

iframe: <a href="http://toki-woki.net/p/Okr/">http://toki-woki.net/p/Okr/</a>

Note: you'll also find the app on its dedicated page. Try searching for "dasp" or "hello world" for example and play with the settings (the 3 top sliders).

Unfortunately it is only after creating all this that I realized the project would never become real... So I simply stopped working on it. I am well aware that some parts of the code is a bit raw and could be optimized and I haven't built the creation/upload feature into the UI yet. Don't know if I will, but the project is OpenSource so feel free to give it a spin! I also share my initial attempt and a pixel version in case you're interested.

Pretty happy that — even if not feature complete — Okr made it to the GML project gallery, yay!

And just because a project will never see the light of day doesn't mean it doesn't need a proper logo, right?

AIR Application Updater: switch to the 2.5 namespace

I just wasted a few hours on understanding how to update an AIR app from the 2.0 namespace (or earlier) to the brand new 2.5 one. As you may know, two new tags have been introduced ("versionNumber" and "versionLabel") to replace the old "version" one.

To avoid breaking things you have to create an intermediary app version that will smoothly switch from 2.0 to 2.5, here's what you can read on the release notes page:

In order to be able to update from version 1 to version 2, an intermediary update step must be added as follows: application version 1, packaged with AIR 2 and using the 2.0 namespace gets updated to: application version 1.5, packaged with AIR 2.5 and using the 2.0 namespace. This version of the application must include the version of the Application Updater SWC/SWF included with the AIR 2.5 SDK. This gets updated to: application version 2.0, packaged with AIR 2.5 and using the 2.5 namespace.

Where "application 1.5" is the intermediary step.

All of this looks quite simple but really it isn't; or at least it wasn't for me. To be really explicit here are my 3 application descriptors and the update descriptor (version numbers changed to match Adobe's example).

Application descriptor – Version 1 (packaged with AIR 2.0):

  1. <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/2.0">
  3. (...)<version>1</version>(...)
  4. </application>

Application descriptor – Version 1.5 (packaged with AIR 2.5):

  1. <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/2.0">
  3. (...)<version>1.5</version>(...)
  4. </application>

Application descriptor – Version 2 (packaged with AIR 2.5):

  1. <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  2. <update xmlns="http://ns.adobe.com/air/framework/update/description/2.5">
  3. (...)<versionNumber>2</versionNumber>(...)
  4. </update>

Update descriptor (PHP script receiving the caller's current version as "currentVersion" GET variable):

  1. <?php
  2. header("Content-Type: text/xml; charset=utf-8");
  3. echo '<?xml version="1.0" encoding="utf-8"?>';
  4. $currentVersion=array_key_exists('currentVersion', $_GET) ? (float)$_GET['currentVersion'] : 1;
  5. $isNewNamespace=$currentVersion>=2;
  6. $ns='http://ns.adobe.com/air/framework/update/description/'.($isNewNamespace ? '2.5' : '1.0');
  7. $version=$currentVersion>=1.5 ? 2 : 1.5;
  8. $versionTag=$isNewNamespace ? 'versionNumber' : 'version';
  9. ?>
  10. <update xmlns="<?php echo $ns ?>">
  11. <<?php echo $versionTag ?>><?php echo $version ?></<?php echo $versionTag ?>>
  12. <url>http://www.your-site.com/update/your-app-<?php echo $version ?>.air</url>
  13. </update>

Not that simple, right? And this is not only annoying to the developer, but also to the end user. He will be notified of an update from version 1 to 1.5 and when he's done he'll get prompted about the new-new version (2): bang, another update process.

If you're curious of how I send the app's version to the update descriptor, here it is:

  1. _appUpdater.updateURL='http://www.your-site.com/update/version.php?currentVersion='+App.getVersion();

The App class is available in my as3bits repository.

Some helpful links on the subject:

I hope this helps!

Evnt — Custom AS3 Event File Generator

I recently started working with Robotlegs on a daily basis and I've never had to write that much custom event classes, so I felt like it was starting to be a little bit boring... That's why I wrote a pretty basic/simple app that does hard part for you!

Simply enter you custom event's class name and package, drop in some constants and properties: you're all set!

Pro-tips:

  1. Reorder the constants and properties by dragging and dropping them
  2. Use custom types for the properties, imports will be taken care of for you
  3. Hit "Copy to Clipboard" or "Save As..." for a quick export!

Project is brand new so it might require some fixes or improvements... If you have ideas, please share!

And before you ask: no, it wasn't written with Robotlegs... But it's OpenSource so if you want to take a spin and write the RL version of it, you'll be able to do so!

Hope this helps!

Dok — AS3 Doc. UI

Meet Dok, my latest and nicest AIR app to this day!

Always looking for help when writing AS3 for Flash, Flex and AIR? Think Adobe's reference is rich but browsing it sucks? Well, I did too. So I wrote this little thingy that loads, parses and caches help pages and then presents them in a slick and quick UI!

Since this app is only intended for devs and therefore may not be very interesting to others, I decided it should look good. So I tried my best and worked hard on those pixels and styles (colors and textures inspired by that sweet clock)... Jump to the project page for life-size screenshot!

This project is absolutely OpenSource, from top to bottom. AS3 classes, MXML, Illustrator and Photoshop files, PNGs and so on... Help yourself.

Flash+iPhone!

Quick news, good news. Developing for the Apple iPhone using Flash is now possible, hell! Read more here and there.

Expect me to build stuff with it!

Kwot

A new project is online! It's called Kwot, and it allows you to share and store your favorite quotes.

The UI is quite minimalistic, with focus on simplicity. Navigate through quotes with your mouse wheel, your keyboard's left and right arrow or the mini timeline at the bottom. Add a quote by clicking on the plus button at the bottom right hand corner. If you don't pick any color they'll be automatically chosen via a magic algorithm! Another magic algorithm will rotate your quote in 3D space. But don't worry you will preview that in real-time, ha!

I might add user (login) support, language tagging, an RSS feed and stuff like that but don't expect that too soon, holidays are coming!

If you don't have the Flash plugin or if you visit the site on an iPhone the site will look quite different but everything will remain!

A few things I used in case you wonder: swfaddress (you will love deep-linking!), GTween, FlashDevelop, AMFPHP, the viewport width attribute... Oh, and by the way, the font face is called Neutra.

Add some quotes and drop feedback!

eduMedia ’08

We have just updated our site!

We've been working on this new version for about 9 months and now it's here. The URL hasn't changed, but the site has!

Let me show you what's new...

Before/After

The site used to be designed for 800×600 screens, it is now for 1024×[anything], so the UI is wider and not as high as it used to be.

First thing you can notice: the blocks holding the thumbnails have been through a diet! Many UI elements have been removed for cleaner and simpler navigation. Here's a quick comparison:

All of the buttons have been removed but the functionalities are still here, they've just moved to a more logical place. Also, the cross that indicated that you where not logged and had only partial access to the simulation is not here anymore. This limitation is now shown with semi-transparency of the thumbnail and its holder (not present in this screenshot).

The login form (at the top of every page) is now hidden and accessible via a click on the "Log in" link. No extra click, though: your cursor will jump in the field automatically.

You now have a direct access to our tree at the bottom left of the homepage, faster! You can also search, with suggestions!

We worked on icons to illustrate the header's menu items.

On to the browse page!

Not much to say here, simpler, clearer, nicer. The RSS feed is clearly shown and you can subscribe to our newsletter, this is new!

We used to have a 3×3 grid of thumbnails, we now have a 5×2 one. That's less pages to browse in some cases!

The media page

It used to be a popup... Nasty. We all decided to avoid it and go for a regular page.

The big new thing here are the price buttons. We used to be quite shy about our commercial activity. We now fully admit it, which is a good thing!

You can notice the "age bar", allowing you to know who the simulation is intended for. Another new thing is the suggestor: simply click on it and you'll be suggested similar simulations.

Again, icons. In the tool box:

Every other page has changed, but I'll let you go and see that on your own! The biggest reworks have been the subscription or the "about us", if you're interested.

Our simulations

Not only did we change the UI of the site, we also redesigned our simulations!

Switching from a dual color theme (blue for light simulations, orange for dark ones) to a single an more universal gray one. Every component has been rethinked, here's what what they look like:

A technical point of view

Of course to end up with this UI and functionalities, you need some lines of code. Here's what lies behind the site you see when browsing:

  • PHP5: my favorite back end language, in its last stable version,
  • PostgreSQL: I've always preferred it to its more famous friend MySQL,
  • CSS, lots of them. With Eric Meyer's reset,
  • JavaScript, based on the nicest lib: MooTools (for Ajax and visual effects),
  • swfobject, to embed Flash files the right way,
  • TwinHelix's PNG fix. Because we love 24 bits transparency but some browsers don't.
  • A pimped out version of the PHP Layers Menu System, for the tree,
  • AMFPHP, for Flash remoting in PHP,
  • ActionScript 3 and Flash, to make things move!

And to write those lines of code, you'd better have good tools! Here's what we used:

Of course we also used Illustrator and Photoshop, for the graphics.

Clap, clap!

Heads up to the team, I think (and hope) we did a great job!

As always, if you've got feedback please drop it there or on the site's dedicated page. We love feedback.

FFFFOUND AS3 API

I recently released FFFFOUND Desktop, this AIR app uses a home-made API that I'm open sourcing today. The code is hosted on Google Code and is available via SVN, I also uploaded a zip archive if you prefer.

You'll find the (asdocs) docs in the repository and in the archive.

By the way, I love feedback. If you use it: please share!

Also, if you need examples on how to use it, ask. I think the sources are self-explanatory but I might be wrong.

A few important things (also posted on the project's page):

  • For now, this API will only work in AIR projects because ffffound.com's crossdomain.xml is too restrictive. I've contacted them but at this time they don't want to change it.
  • The API relies on FFFFOUND's RSS feeds but also on the site's pages' HTML, so some functionalities might break at any time without warning. Use with caution.

Watch the comments for any update or news!