So I made mine!

Most of my work simply consisted in copying/pasting the code in WordPress' shortcodes.php and binding it into a Drupal filter. Easy enough.

Now if you want to use it, you have to:

1. Get the module
2. Add it to your "modules" directory
3. Enable it
4. Add it to one of your setup's filter bundle
5. Write your own module where you'd implement one or more Shortcodes (via add_shortcode) and make sure you add "dependencies[] = shortcodes" in your .info file

You might experience a nasty "Call to undefined function add_shortcode". If so, you have to change you module implementation's weight, either directly in your database, or thanks to the cool Utility module. Set it to 10 and you're set!

Post color: #1f1f1f ■

Working on a big fat AIR app (more than 400 Mb) I noticed something quite strange: using EncryptedLocalStore get/setItem methods happened to be slow, I mean very slow, but like, slow as hell (like 5 to 10 seconds per call) but only after launching the app, and not after. Something that I never noticed before ; neither with other AIR apps, nor for this one before I added its heavy content... And the tricky part is that it only occurred with a compiled app, but not within ADL.

I googled a bit and found this thread which is mainly about the stronglyBound parameter for setItem, but its last post by Oliver Goldman rang my bell:

The first time ELS is accessed the application's signature needs to be verified, regardless of whether or not stronglyBound is set. If stronglyBound is set, then the signature is re-verified as the application is running. Either way, it's expensive if you have a big application.

Small app: fast, fat app: slow as hell. Lesson learned...

And this is true both for Flash and HTML/JS AIR apps. So if you don't need your data to be encrypted I highly recommend using SharedObject (or else) instead. As far as I'm concerned the first calls dropped from 5/10 seconds to a few milliseconds.

Bingo.

Post color: #100040 ■

Introducing the Weecast Player!

The app allows you to browse your videos, watch them (4 view modes), search for more, drop comments and stars... I think that's called an RIA, right? There's also an offline mode, so you can access all your stuff anytime.

All of this is made in Flex+AIR. The visual identity was made by Weecast ; thanks for the PNGs, folks!

By the way, some parts of it are actually OpenSource, including:

• Miscellaneous AIR utilities
• The infamous GradientLabel (for Flex)
• Dynam.ize and BaseObject, for working with synchronous SQLite databases

If you don't know Weecast yet I highly recommend you go visit their site, grab an account and the player, enjoy free videos, and then buy some! Now if you don't understand French... Well, learn it!

Post color: #1f212a ■

I just wrote and published my first Chrome Extension - Meebo Cleaner, to clean that up!

Pretty simple code, nothing revolutionary here. Go get it and let me know what you think, or if you have suggestions/ideas...

Post color: #ffffff ■

A little bit of JavaScript and some Photoshop/CSS trickery to present a growing collection of images designed for your favorite piece of technology!

The page also works on iPhone/iPod touch but looks a little different for better usability. Just tap+hold on the image to save it.

Expect the gallery to evolve, with new images and quotes!

Post color: #ffffff ■

I also set up a gallery, so if you've got nice scrollbars that aren't here yet, send' em right away!

Post color: #ffffff ■

This class will come in handy every time you work with synchronous SQLite databases in an AIR project. It's a real-world implementation of the Dynam.ize utility I presented earlier... I will show you an example of how to work with it, with simple sub-classes. Let's go!

First things first.

I need to open my database and provide that connection to BaseObect:

var sqlCon:SQLConnection=new SQLConnection();
sqlCon.open(File.applicationDirectory.resolvePath('data.sqlite'));
BaseObject.defaultConnection=sqlCon;

We need clients!

Now, let's consider a database with a "client" table (pretty creative, right?), those clients have a name, a URL and a gender (male/female), and of course, an ID. So we have a "client" table with 4 fields: id, name, url, male (which is a Boolean: true=male, false=female).

I have mapped a BaseObject sub-class to this table (I will show you how in a few moments), so I can now create a new client in a pretty simple fashion:

var myClient:Client=Client.create({name:'Joe', url:'http://www.yep.com', male:true});

Cool, I now have a Client instance I can work with and a line has been added in my "client" table. What if I wanted to change its name? Easy.

myClient.setName('Mark');

The "name" field has been updated. Let's check that.

trace(myClient.getName());

Traces "Mark"? Good. OK, what about updating the URL and name at the same time? Two queries? Nope!

myClient.update({name:'Jack', url:'http://www.yo.net'});

Now let's grab a client via his ID.

var c1:Client=Client.getFromID(1);

Simple. But what if I wanted to grab more than one client, fox example what if I wanted all male clients?

var males:Array=Client.getFromQuery('SELECT * FROM client WHERE male=@male', {'@male':true});

You can now loop through this array and interact with the Client instances it contains...

What's the trick?

Nothing too hard to understand. Client is a sub-class of BaseObject that simply exposes some of its static and instance methods (getFromID, getFromQuery, create, update and so on). It also casts BaseObject return values to the right type: Client. For example, this is how getFromID works:

public static function getFromID(id:uint):Client {
	return BaseObject._getFromID(getTableData(), id) as Client;
}

Now you might wonder what this getTableData method is. Well it returns data about the table to which Client is bound to, like that:

public static function getTableData():TableData {
	if (!_tableData) _tableData=new TableData('client', Client, ['name', 'url', 'male']);
	return _tableData;
}

See? We define the table name (client), the current class (Client) and the fields we need to handle (name, url and male)... That's it.

Our clients bought cars...

That's right, so we should have a "car" table, right? With id, name, brand, clientID and purchaseDate we should be good. Its TableData would look like that:

 new TableData('car', Car, ['name', 'brand', 'clientID', 'purchaseDate']);

Note: I didn't list id as BaseObject supposes there's always an id field.

OK, so our clients bought cars, and we'd like to know who bought what. Let's write a method in Client to do that:

public function getCars():Array {
	return Car.getFromQuery('SELECT * FROM car WHERE clientID=@id', {'@id':id}));
}

That works, cool. But we can do better, we could cache this Array so we don't query every time we need it ; there's a technique for that:

public function getCars(force:Boolean=false):Array {
	return (hasCache('cars') && !force) ?
		getCache('cars') :
		setCache('cars', Car.getFromQuery('SELECT * FROM car WHERE clientID=@id', {'@id':id}));
}

Done. Optimized.

We can now see which cars our first client bought:

var c1cars:Array=c1.getCars();

We could also implement the opposite: retrieving a Client form a Car instance:

public function getClient():Client {
	return Client.getFromID(this.getClientID());
}

Notice how I used getClientID? This refers to the table's clientID field and returns it.

That's a wrap.

Well that's pretty much it, I think I covered the basics!

If you want to play with it, get the class/demo project and tell me what you think. I've bundled Client, Car and some example uses...

Post color: #bcdeff ■

You can do that with AS3 if you extend flash.utils.Proxy, cool. But wait, no! Not cool! What if I wanted to extend something else? Nah, let's find something else...

I came up with the idea of dynamically creating getter and setter functions on a class instance for predefined properties. Now those aren't really getters and setters but let me show you what it looks like so you understand better... Here's an example:

package {
	import net.tw.util.Dynam;
	// This is my class, that has to be dynamic
	public dynamic class DynClass {
		// This Array will be used to store the properties' values...
		protected var _data:Array=[];
		public function DynClass() {
			// In the constructor I call the Dynam.ize method on this, so it builds the getters and setters for the supplied properties
			Dynam.ize(this, ['abc', 'def', 'ghi'], getter, setter);
		}
		// Here are the functions that will be called when I try to get or set one of the properties I listed in Dynam.ize
		protected function getter(key:String):* {
			return _data[key];
		}
		protected function setter(key:String, v:*):void {
			_data[key]=v;
		}
	}
}

Now let's instantiate this class and play with it:

var dc:DynClass=new DynClass();

We can call getAbc() or setAbc() on it:

dc.setAbc('my value');
trace('get abc', dc.getAbc());

Everything should be OK. It would work the same with get/setDef and get/setGhi... This example might not seem very useful but you could do anything within the getters and setters ; for example access SharedObjects, sending data to a server and so on...

Find the class and a demo project on as3-bits!

Coming up next: my implementation of this concept for AIR's SQLite databases!

Thoughts?

Post color: #ffdb90 ■

I started with a basic ActionScript project (no Flex involved) and came up with this. Quite functional, could probably be optimized but my goal was actually a Flex component and I knew that was technically feasible. I then simply extended Flex's Label class and basically copied/pasted the logic into it. Just had to figure out which event to listen to and I was good to go...

Here's a demo app for your playing pleasure.

You may notice that in this example I embed the font so it looks nicer, but this is not mandatory...

All this is opensource (class+project) and you can grab it at my brand new Google Code dump: as3-bits. Help yourself.

As always, feedback welcome.

Post color: #343545 ■

Expect me to build stuff with it!

Post color: #661010 ■

Et puisque finalement j'aime bien le concept, je vais essayer de reprendre l'habitude de poster des trucs. Ça va être super.

Chope le flux, poto !

Post color: #ffffff ■

The app will allow you to monitor files changes: select a text file and you'll be prompted when it's updated. Basic. By the way, did I say "rough draft" before?

Everything in it is OpenSource, from the Illustrator files to the MXML and CSS stuff, so play with it! For those who only want the .air, here it is.

Now, why is it cool?

• Build with the brand new Flex 4 (Gumbo) framework
• Uses a home-brewed IconButton class, because Gumbo doesn't provide any
• Uses the new Spark custom skins logic (on Button, ScrollBar and more...)
• Uses the new states' logic and transitions
• Based on as3corelib's FileMonitor class
• Shows you how to build a multi-instance AIR app
• Contains Illustrator/Photoshop UI files

And why is it not that cool?

• Probably still buggy, wait for updates!
• Flex 4 is not done yet, so the code might break at any time
• No icons yet
• No or very few comments
• Pretty useless app!

If you're trying to learn Flex/Flex 4 or wondering what's new in it and how to use it you should definitively give it a go...

Have questions? Drop'em!

Post color: #5c5c5c ■

Snips 2.0 is basically Snips rewritten from scratch, updated to fit WordPress' Shortcode API. Let's see how good it is...

Tired of having to copy paste nasty HTML code from sites such as YouTube, Vimeo and so on? Looking for a way to insert recurrent content in your posts without having to type it every time? Would like to be able to inject parameters in these snippets? Well, now you can.

Just install Snips and use the bundled shortcodes or create/edit your own!

Each Snip is a combination of a name, a model and optional parameters. The name defines the shortcode tag you will be able to use, the model is the content that will replace your shortcode calls and the parameters (that look like #the-parameter# in the model) are portions of the model that can change from a call to an other. Those parameters can have default values or can be left empty and then become mandatory.

All of this can be edited via a simple UI, found under Settings > Snips... Here's screenshot:

For those that used Snips' first version: (0.2) everything should be OK, the previous syntax will work ; but I recommend using the new one and the corresponding updated model files (ex: yt becomes yt2). Also, the #up# parameter (used in mp3 and swf snips) has to be set manually to your blog's upload path.

If you use it and find bugs, please let me know! This is the first time I use jQuery behavior (for the parameters' detection in the Settings page) so it could act a little weird.

Post color: #542D70 ■

Introducing TWPlaylist! Thanks to Twitter and a Winamp Plugin, all tracks that I listen to (at work) are stored on a dummy account (if you know a plugin that does the same for iTunes, please let me know). And to keep things nice and smooth, I set up a quick page that pulls this data and displays it thanks to some AJAX magic... Tracks link to a Discogs search page to find more about them.

As you can read the project page's bottom, everything I wrote is opensource. HTML, CSS and JS ; help yourself. Nothing too fancy, but it could prevent you from wasting time... By the way, the code should be self-explanatory, but if it's not I can help.

You will probably notice the some tracks' data look weird, in fact the Winamp plugin chokes on special characters such as "&" and accented letters... I hope this gets fixed one day.

I've never been a big fan of Twitter as I think most user don't use it the way it should be used, for example by having private discussions or retweeting too much. However it's a pretty interesting platform for experimentation and art projects. What do you think?

Post color: #666666 ■

Boks is running for Best RIA of 2009 on InsideRIA, please vote for it!

The top apps will be presented at Adobe MAX 2009... Needless to say I'd be delighted to be a part of it. Of course this is going to be hard, as the competitors are tough ones but hey, let's try!

Update: I've updated the app with a shameless call-to-action button. Damn, I'm weak.

Post color: #8a0000 ■

eduMonkey is an iPhone version of an old toy that we (at eduMedia) love and first converted to a Flash simulation...

The (free) app is both an addition and a multiplication table ; giving you (in the hands of the monkey) the result of the operation between 2 numbers (under the feet). Simply drag the feet and see the result. Nothing too crazy but hey, it's my first app!

Go get it, fool!

Show it to your teacher, talk about it to your pals, have fun with it and share thoughts... Because I love feedback.

By the way, I discovered this toy via Cuarto Derecha, thanks buddies!

Post color: #7e98b1 ■

I've been quiet for some time because my laptop died without warning... But happily I'm back with a brand new one (with Vista, ouch!) and just took time to enhance this blog a bit!

First of all I've updated the theme's code so the HTML output is cleaner. Nobody cares, but I do.

Then, I've developed a functionality that will allow me (and others?) to make this blog more active: Link dump. It's still empty for the moment, but don't worry it should fill quite quick!

Basically it allows me to only post links and mysterious titles... No extra words, no image, just a simple link. Click at your own risks.

These links will also pop in your feed reader and to make them look different their title will be prefixed with a funny ∗ character. This is also true for the blog, here's how it will look like:

You'll still be able to comment on the links like you do on regular posts...

Glad to be back!

Post color: #fe0002 ■

Introducing Boks, my latest and most ambitious AIR app to this day!

Do you design web pages? Do you write HTML and CSS? Ever heard about the Grid System and Blueprint CSS? Thought it was a pain to implement? Think again, fool!

Boks is some kind of WYSIWYG to help you setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS in no time.

Got your own CSS style already? No problemo, Boks can use them and eventually merge and compress them within a single "screen.css". Your styles use images? Simply point to your asset directory and it will be included too! Afraid of breaking the baseline rhythm with you randomly sized images? Just select the "Add JS to fix baselines" option and you're good to go!

Enough. Just go grab it (or just have a look at the lovely screenshots) and send feedback!

Apr 01, 2009: Update! I've done some wacky video screencasts that can help you understand everything about Boks, go and have a look! Yes, the sound is not perfect.

Post color: #ffffff ■

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!

Post color: #941c0c ■

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:

• Eclispe PDT. Because Dreamweaver is no good,
• We plugged FileSync and NetDrive in it, for quick upload to our test server. Nice.
• SVN via Subclipse and Tortoise SVN, for good team sync,
• Firebug, the best Firefox debugging plugin.
• WebDeveloper, Firebug's best friend,
• FlashDevelop, because nobody likes Flash's IDE editor, especially for long AS2/AS3 classes...

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.

Post color: #ffffff ■