TOKI WOKI. 

Boks is one of my most successful apps and this is probably not only because of its usefulness, but also because it is free, too. I released it more than 2 years ago and it is still heavily downloaded.

The CSS community is really active and fast-moving. When I wrote Boks, Blueprint CSS was one of the most watched and forked project on GitHub which is mostly why I chose to base my UI and logic on it (it still is at the top, by the way). But with today’s CSS3 hype and because of the ever-growing list of CSS frameworks (not going to list them here) I started receiving lots of feature requests.

At first I thought I could wait and handle them later, but I quickly realized it would need a lot of time, and I definitively didn’t have it in my hands (or at least not for this project). The idea to OpenSource it seemed obvious and I’ve been slow doing so, but here it is. If anyone’s willing to take a look at what I wrote and fix or improve it, do it! Don’t forget that this has been written a while back and I wouldn’t re-write it this way (think Robotlegs); I know the code will look crappy to some but hey, we all learn and evolve, right?

I’ve licensed Boks’ source under GNU GPL v3 in order for it to remain OpenSource, but if you have other suggestions, just tell me.

Remember Evnt, the quick and simple UI to generate AS3 Event subclasses?

Well, it’s still here but I don’t use it much anymore, since I’m a big fan of Robert Penner‘s Signals! So I wrote Signl. It’s basically the same thing, but for Signals.

I know writing Signal classes is an easy task; but, why not make it easier? I hope this helps! Oh, and by the way, it’s OpenSource, just like Evnt was.

My “anniversary” intro

It’s been five years (this monday) since Google added the ability to simply chat inside Gmail and to store your chat history, just like your regular e-mail discussions. This poster is a celebration of that, plus a big high-five to my “chat pal” (who hopefully received my package on time), plus a technical and aesthetical look at what we wrote during these years.

Let’s make history

Back to the chat history thing… I remember being pretty happy when Google announced it, mainly because I knew I’d use it for later reference, archiving links and thoughts had become much easier.

Here’s a copy of the announcement they made:

Chat with your friends from right inside Gmail. There’s no need to load a separate program or look up new addresses. It’s just one click to chat with the people you already email, as well as anyone on the Google Talk network. And now you can even save and search for chats in your Gmail account.

So it’s been five years. And I’ve chatted quite a lot; mainly with one guy, my buddy Renaud. We chatted around 2,800 different discussions so I thought there might be some interesting data to dig in these archives… So I dug.

But digging thousands of discussions is not an easy task, so I had to take a look on the tech side of things.

Join the tech side of the force

Before digging, I had to retrieve all the discussions we had, in an easy-to-analyse format. I used Gmail’s offline feature: applying a new label to our conversations and locally syncing this label. For some unknown reason it would crash on Google Chrome so I had to use Mozilla Firefox. When syncing was done I got a pretty big file in my “Google Gears for Firefox” directory.

Cool thing is, Google Gears stores data as SQLite databases, so I fired up Lita in order to understand what the structure was like… Things looked a bit messy but I eventually found everything that would interest me; and it was in the “MessagesFT_content” table. Here’s the query I ran:

SELECT c1Body FROM MessagesFT_content WHERE c0Subject LIKE '%Chat%'

Almost cool. The query still returned a bunch of HTML code, our names, and other useless crap. So I fired up Flash Builder, imported the SQLite file and wrote a few AS3 lines, in order to grab the results and filter them with regular expressions. Bang: plain text! Oh, this useless AIR app is OpenSource, by the way.

Now that the data was clean and ready to be analyzed I had to find a cheap or free way to do it. I chose Primitive Word Counter, not because it’s perfect but rather because it’s very simple and could handle the large amount of data I was going to feed it (some other apps simply crashed)…

Running it gave me the most used words and phrases, I only picked the most interesting (at least to me) and launched InDesign.

A celebration poster

I decided to go for an A1 poster, mostly focused on those words and phrases but with a tech twist to it. I kept it all secret, got it printed, and sent it to my pal… Happy fifth Google-talk-history-enabled anniversary to him; and to all of you out there that use it on a daily basis!

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 src=”http://toki-woki.net/p/Okr/” width=”752″ height=”506″]

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?

While redesigning this blog I wanted to keep the “one color per post” concept I had in the previous version by changing (tweening) the logo’s color accordingly to the article being viewed (or scrolled to). I rapidly realized I couldn’t achieve this with just HTML+CS+JS and I didn’t want to use Flash (mainly because of iOS devices but also to avoid loading a SWF file on every page).

I remembered hearing — a few months earlier — about Raphaël (a JS lib to render vector graphics). At that time I found the concept really interesting but couldn’t see where to use it.

OK, so I know what I want to do, I know the tools I’ll use, but how do we do that? Raphaël is cool, but its syntax looks a bit cryptic at first. It says it handles SVG, and — guess what — Illustrator can export to SVG. We’re getting closer…

SVG is XML, but Raphaël doesn’t eat XML, it eats a specific syntax meant to be compatible with SVG and VML. Hum… This is when I fire Flash Builder and start writing code. The goal: accept an SVG XML file as input and spit some “Raphaël-compatible script” out.

Boom (plus a little demo of an output).

I then simply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the output, and wire all that to the scroll/color tweening logic. Pretty easy.

Everything worked and looked nice on all browsers and OS’s but I realized the sole idea of having a logo changing colors didn’t work that well. For purely visual reasons. So I dropped it from my theme and rolled back to the black PNG version you can see right now.

The good thing is, the tool works pretty well (at least with Illustrator SVGs) and is OpenSource. Either use it or modify it, and tell me what you think. I did this in a hasty fashion and I probably won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improving it, please do so!

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!

Hey! Another free AIR app! This time that ain’t no side project I made on my free time for some obscure users, but rather a big thingy for a big company. Namely Fotolia.

I did all of the coding part (ActionScript 3, Flex 4) and Steaw is responsible for the UI and all graphics. The app is basically a solution for power-users, providing most of the functionnalities of the website and adding some more (such as direct download and local library). Allowing you to search, browse preview and buy all types of medias, including video and vectors. You can also log into your account and store your favorites in a lightbox or create and fill galleries.

This is my first multi-lingual app: to this day it provides 13 translations including Japanese, Chinese and other funny looking languages!

Flex 4

This is also my first big real-life project with Flex 4 and I have to say it’s way better/easier than Flex 3. Really. What changed my life is the way it handles states and component customization via skins… Oh boy, this is easy!

AIR 2.0

Yep, using the brand new AIR 2.0.2, buddy. What for? Mainly for global error handling and the almighty openWithDefaultApplication (for both folder and medias). I’ve also heard this version of the runtime is faster and lighter, and we all like that.

OpenSource

As for every project I work on, I try to have some OpenSource bits so that anyone can benefit from the work and time I spent on it. I asked Fotolia if the AS3 API I was going to write could be OpenSource’d and guess what, they accepted. So here it is, based on the as3-rpclib and on the as3 Signals logic: fotolia-as3-api. I implemented most of (if not all) features of their official API so building an AS3 app off of that should be pretty easy, do so!

Go get it!

Yeah, go get it.

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.

WordPress’ Shortcode API is a really cool thing, and since I’m working on a Drupal site these days I’ve been looking for something similar. Unfortunately I couldn’t find anything… There are some implementations out there but the ones I found and tested always come pre-bundled with specific tags and don’t always provide an extensible and stable logic.

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!

Facts

So the other day I had an hour to waste, I decided to learn how to use MooTools classes and, as the best way to learn something is to play with it, I played with it.

About 30 minutes after, I had something  running. Dirty and buggy but still, looking cool. It took me an extra 30 minutes to clean that up, make sure it was working on most browsers, add the Google Analytics tracker, push it online and add it to the projects page…

You probably guessed it already, I’m talking about the Scroll Clock. Well this hour might be the least wasted one of my life. Think I’m radical? Read on!

Results

After tweeting about it twice (once to someone who’s interested in netart, and once to the MooTools team) things went big. I don’t know exactly how this happened but it (the Scroll Clock page) got love from Gizmodo, swissmiss, QBN, Ajaxian, Neatorama and many more. Wow.

A few days after the tsunami, here’s what my Analytics page looks like. My daily average of 600 page views has seriously been put to shame, with a climax on the 19th of November: 313,000+.

Side effects

This is probably the funniest part, not only did I worry for the server the site is hosted on, but a few things happened…

I got 3 job offers ; many friend requests on Facebook, Flickr, Vimeo and so on ; received a donation ; was contacted by a Google guy to add the project to chromeexperiments.com, which I did ; and of course had to bother my friends and colleagues about my new web-fame…

Conclusion

The short one: don’t spit on Twitter, it might make you a star. Just joking, keep spitting on it.

The long one: the simplest and shortest project of mine is the one which received the most visitors and love, ironic right? What does that mean? Should I stop working on full-fledged AIR apps?

Prove me wrong!