Boks is now OpenSource

Boks is one of my most suc­cess­ful apps and this is prob­a­bly not only because of its use­ful­ness, but also because it is free, too. I released it more than 2 years ago and it is still heav­ily downloaded.

The CSS com­mu­nity is really active and fast-moving. When I wrote Boks, Blue­print 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 frame­works (not going to list them here) I started receiv­ing lots of fea­ture requests.

At first I thought I could wait and han­dle them later, but I quickly real­ized it would need a lot of time, and I defin­i­tively didn’t have it in my hands (or at least not for this project). The idea to Open­Source it seemed obvi­ous and I’ve been slow doing so, but here it is. If anyone’s will­ing to take a look at what I wrote and fix or improve it, do it! Don’t for­get that this has been writ­ten a while back and I wouldn’t re-write it this way (think Robot­legs); 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 Open­Source, but if you have other sug­ges­tions, just tell me.

Signl – A Custom AS3 Signal File Generator

Remem­ber Evnt, the quick and sim­ple UI to gen­er­ate AS3 Event subclasses?

Well, it’s still here but I don’t use it much any­more, since I’m a big fan of Robert Pen­ner’s Sig­nals! So I wrote Signl. It’s basi­cally the same thing, but for Signals.

I know writ­ing Sig­nal classes is an easy task; but, why not make it eas­ier? I hope this helps! Oh, and by the way, it’s Open­Source, just like Evnt was.

Five years of Google Talk history

My “anniver­sary” intro

It’s been five years (this mon­day) since Google added the abil­ity to sim­ply chat inside Gmail and to store your chat his­tory, just like your reg­u­lar e-mail dis­cus­sions. This poster is a cel­e­bra­tion of that, plus a big high-five to my “chat pal” (who hope­fully received my pack­age on time), plus a tech­ni­cal and aes­thet­i­cal look at what we wrote dur­ing these years.

Let’s make history

Back to the chat his­tory thing… I remem­ber being pretty happy when Google announced it, mainly because I knew I’d use it for later ref­er­ence, archiv­ing links and thoughts had become much easier.

Here’s a copy of the announce­ment they made:

Chat with your friends from right inside Gmail. There’s no need to load a sep­a­rate pro­gram or look up new addresses. It’s just one click to chat with the peo­ple you already email, as well as any­one on the Google Talk net­work. And now you can even save and search for chats in your Gmail account.

So it’s been five years. And I’ve chat­ted quite a lot; mainly with one guy, my buddy Renaud. We chat­ted around 2,800 dif­fer­ent dis­cus­sions so I thought there might be some inter­est­ing data to dig in these archives… So I dug.

But dig­ging thou­sands of dis­cus­sions 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 dig­ging, I had to retrieve all the dis­cus­sions we had, in an easy-to-analyse for­mat. I used Gmail’s offline fea­ture: apply­ing a new label to our con­ver­sa­tions and locally sync­ing this label. For some unknown rea­son it would crash on Google Chrome so I had to use Mozilla Fire­fox. When sync­ing was done I got a pretty big file in my “Google Gears for Fire­fox” direc­tory.

Cool thing is, Google Gears stores data as SQLite data­bases, so I fired up Lita in order to under­stand what the struc­ture was like… Things looked a bit messy but I even­tu­ally found every­thing that would inter­est me; and it was in the “MessagesFT_content” table. Here’s the query I ran:

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

Almost cool. The query still returned a bunch of HTML code, our names, and other use­less crap. So I fired up Flash Builder, imported the SQLite file and wrote a few AS3 lines, in order to grab the results and fil­ter them with reg­u­lar expres­sions. Bang: plain text! Oh, this use­less AIR app is Open­Source, by the way.

Now that the data was clean and ready to be ana­lyzed I had to find a cheap or free way to do it. I chose Prim­i­tive Word Counter, not because it’s per­fect but rather because it’s very sim­ple and could han­dle the large amount of data I was going to feed it (some other apps sim­ply crashed)…

Run­ning it gave me the most used words and phrases, I only picked the most inter­est­ing (at least to me) and launched InDesign.

A cel­e­bra­tion 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 anniver­sary to him; and to all of you out there that use it on a daily basis!

Okr – Story of a failure

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

Six month ago I’ve been con­tacted by an archi­tec­tural firm to pro­vide some con­sult­ing on a project of theirs (I’m not going to name names, you’ll under­stand why). The goal was to find ideas to make a building’s front more inter­est­ing. The build­ing being a place to help and pro­mote Hip-Hop culture.

So I started work­ing on it and came up with ideas and con­cepts. The archi­tect I was in con­tact with seemed pretty happy with it and every­thing was look­ing good.

Until I no longer received any answer to my e-mails… Our last inter­ac­tion is now 5 month old and I think time has come to mourn. What I came up with can be inter­est­ing and since it involves an Open­Source project, here are a few bits about it.

At that time I was dis­cov­er­ing  GML (Graf­fiti Markup Lan­guage) and Evan Roth’s work. Bor­deaux hosted Les Grandes Tra­ver­sé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 build­ing itself and Twit­ter. Here’s the doc­u­ment I pre­sented to explain what I had in mind.

The steps are:

  1. Cre­at­ing and send­ing a graffiti;
  2. Receiv­ing data;
  3. Con­vert­ing it to an image;
  4. Pro­ject­ing it on the building’s front;
  5. Photo-shooting of the front;
  6. Send­ing to Twitter;
  7. Online con­sul­ta­tion.

After a few e-mails with Jamie Wilkin­son (heads up!) I started work­ing on the core classes writ­ing GMLPlayer and GML­Cre­ator. The goal was to pro­vide both a way to dis­play tags and to create/upload them. I then built a UI around all that (a Flex one, after notic­ing Min­i­mal 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 ded­i­cated page. Try search­ing for “dasp” or “hello world” for exam­ple and play with the set­tings (the 3 top sliders).

Unfor­tu­nately it is only after cre­at­ing all this that I real­ized the project would never become real… So I sim­ply stopped work­ing on it. I am well aware that some parts of the code is a bit raw and could be opti­mized and I haven’t built the creation/upload fea­ture into the UI yet. Don’t know if I will, but the project is Open­Source so feel free to give it a spin! I also share my ini­tial attempt and a pixel ver­sion in case you’re interested.

Pretty happy that — even if not fea­ture com­plete — 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 under­stand­ing how to update an AIR app from the 2.0 name­space (or ear­lier) to the brand new 2.5 one. As you may know, two new tags have been intro­duced (“ver­sion­Num­ber” and “ver­sion­La­bel”) to replace the old “ver­sion” one.

To avoid break­ing things you have to cre­ate an inter­me­di­ary app ver­sion 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 ver­sion 1 to ver­sion 2, an inter­me­di­ary update step must be added as fol­lows: appli­ca­tion ver­sion 1, pack­aged with AIR 2 and using the 2.0 name­space gets updated to: appli­ca­tion ver­sion 1.5, pack­aged with AIR 2.5 and using the 2.0 name­space. This ver­sion of the appli­ca­tion must include the ver­sion of the Appli­ca­tion Updater SWC/SWF included with the AIR 2.5 SDK. This gets updated to: appli­ca­tion ver­sion 2.0, pack­aged with AIR 2.5 and using the 2.5 namespace.

Where “appli­ca­tion 1.5″ is the inter­me­di­ary step.

All of this looks quite sim­ple but really it isn’t; or at least it wasn’t for me. To be really explicit here are my 3 appli­ca­tion descrip­tors and the update descrip­tor (ver­sion num­bers changed to match Adobe’s example).

Appli­ca­tion descrip­tor – Ver­sion 1 (pack­aged 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>

Appli­ca­tion descrip­tor – Ver­sion 1.5 (pack­aged 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>

Appli­ca­tion descrip­tor – Ver­sion 2 (pack­aged 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 descrip­tor (PHP script receiv­ing the caller’s cur­rent ver­sion as “cur­rentVer­sion” 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 sim­ple, right? And this is not only annoy­ing to the devel­oper, but also to the end user. He will be noti­fied of an update from ver­sion 1 to 1.5 and when he’s done he’ll get prompted about the new-new ver­sion (2): bang, another update process.

If you’re curi­ous of how I send the app’s ver­sion to the update descrip­tor, here it is:

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

The App class is avail­able in my as3bits repository.

Some help­ful links on the subject:

I hope this helps!

SVG to RaphaelJS

While redesign­ing this blog I wanted to keep the “one color per post” con­cept I had in the pre­vi­ous ver­sion by chang­ing (tween­ing) the logo’s color accord­ingly to the arti­cle being viewed (or scrolled to). I rapidly real­ized 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 load­ing a SWF file on every page).

I remem­bered hear­ing — a few months ear­lier — about Raphaël (a JS lib to ren­der vec­tor graph­ics). At that time I found the con­cept really inter­est­ing 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 syn­tax looks a bit cryp­tic at first. It says it han­dles SVG, and — guess what — Illus­tra­tor can export to SVG. We’re get­ting closer…

SVG is XML, but Raphaël doesn’t eat XML, it eats a spe­cific syn­tax meant to be com­pat­i­ble with SVG and VML. Hum… This is when I fire Flash Builder and start writ­ing code. The goal: accept an SVG XML file as input and spit some “Raphaël-compatible script” out.

Boom (plus a lit­tle demo of an output).

I then sim­ply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the out­put, and wire all that to the scroll/color tween­ing logic. Pretty easy.

Every­thing worked and looked nice on all browsers and OS’s but I real­ized the sole idea of hav­ing a logo chang­ing col­ors didn’t work that well. For purely visual rea­sons. So I dropped it from my theme and rolled back to the black PNG ver­sion you can see right now.

The good thing is, the tool works pretty well (at least with Illus­tra­tor SVGs) and is Open­Source. Either use it or mod­ify it, and tell me what you think. I did this in a hasty fash­ion and I prob­a­bly won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improv­ing it, please do so!

Redesign

I’ve had this blog for 2 and a half years now, and it never really evolved visu­ally. So I decided to update it a bit, from scratch.

So that means a new theme?

Yay! Since the blog has been redesigned and you’re prob­a­bly read­ing this from your RSS reader you should defin­i­tively come by and see how it looks. And share some feed­back, if you feel like it.

Can’t remem­ber what it looked like before? I’ve archived screens over at Flickr.

A con­sis­tent look

Updat­ing the blog’s look is good, but a com­plete rewrite is bet­ter; for con­sis­tency, fool! I used to have a dif­fer­ent look for every sin­gle page: home, projects, blog and so on. No more.

Long story short:

Before: all dif­fer­ent. Now: all good.”

I’ve been into grids since the day I learned about Blue­pint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heav­ily relies on a grid struc­ture. For grid freaks out there, click here to tog­gle the columns and see what I mean. Of course if you’re on a small device (such as a phone) the UI is a bit dif­fer­ent, but we’ll get into that later.

Got a key­board? Like short­cuts? Press that key!

I imple­mented a few key­board short­cuts, from use­ful to use­less. For exam­ple, if you liked the grid tog­gle, just press G (for grid) or W (for InDe­sign users) and you’ll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next arti­cle by press­ing N (or the Down key)? And you guessed it already, P (or Up) will jump to the pre­vi­ous (inspired by AisleOne). You can also time-travel by press­ing Shift+P (for Past) or Shift+F (Future). Handy? Yep.

Feel like you’re stuck in the blog? Just press 1 to go to the Home page, or 2 for Projects. 3 is for the Blog and 4 is the About page.

My screen is smaller than yours

I dis­cov­ered that tech­nique on Hicks­de­sign and imme­di­ately thought I had to imple­ment that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then over­write some dec­la­ra­tions if the screen size matches some rules… I imple­mented 3 dif­fer­ent lay­outs so the site should look good on about any device. Just resize your browser win­dow and see things move. How cool is that?

My brother (and his iPhone 4) helped me test the retina-display-ready logo, too. Optional but cool.

More awe­some

  • I’ve always wanted to use Web­fonts but never really knew where. Here it is, you’ll find a nice OFL Sorts Mill Goudy TT on the home page. Thanks Google.
  • Another tiny thing is the “Sub­tle Prompt”. It hap­pens when you use a key­board short­cut or when you click the Con­tact link…
  • If you’re on a WebKit browser (Safari or Chrome) you should see cus­tom scroll­bars, styled with CSS. Yeah.
  • I kind of don’t sup­port Inter­net Explorer. Yes, this IS an awe­some feature!
  • Track­backs are now sep­a­rated from reg­u­lar comments.
  • A blog post’s author (my) com­ments appear dif­fer­ently, so you know who’s the boss out there.

Open­Source

I always try my best to share the use­ful and reusable bits. Here are some JavaScript (MooTools required) goodies:

  • LazyScroller: turns your key­board keys into a nav­i­ga­tion dashboard.
  • Sub­tlePrompt: nice and gen­tle prompt for your sen­si­tive users.
  • Lblr: form input in-context labeler.
  • ta-bg: allows a textarea’s back­ground image to scroll with its content.

I’ll try to post docs/demos soon, I know this is prob­a­bly a lit­tle bit rough right now…

What now?

Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!

Evnt — Custom AS3 Event File Generator

I recently started work­ing with Robot­legs on a daily basis and I’ve never had to write that much cus­tom event classes, so I felt like it was start­ing to be a lit­tle bit bor­ing… That’s why I wrote a pretty basic/simple app that does hard part for you!

Sim­ply enter you cus­tom event’s class name and pack­age, drop in some con­stants and prop­er­ties: you’re all set!

Pro-tips:

  1. Reorder the con­stants and prop­er­ties by drag­ging and drop­ping them
  2. Use cus­tom types for the prop­er­ties, imports will be taken care of for you
  3. Hit “Copy to Clip­board” or “Save As…” for a quick export!

Project is brand new so it might require some fixes or improve­ments… If you have ideas, please share!

And before you ask: no, it wasn’t writ­ten with Robot­legs… But it’s Open­Source so if you want to take a spin and write the RL ver­sion of it, you’ll be able to do so!

Hope this helps!

Fotolia Desktop

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 com­pany. Namely Foto­lia.

I did all of the cod­ing part (Action­Script 3, Flex 4) and Steaw is respon­si­ble for the UI and all graph­ics. The app is basi­cally a solu­tion for power-users, pro­vid­ing most of the func­tion­nal­i­ties of the web­site and adding some more (such as direct down­load and local library). Allow­ing you to search, browse pre­view and buy all types of medias, includ­ing video and vec­tors. You can also log into your account and store your favorites in a light­box or cre­ate and fill gal­leries.

This is my first multi-lingual app: to this day it pro­vides 13 trans­la­tions includ­ing Japan­ese, Chi­nese and other funny look­ing 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 han­dles states and com­po­nent cus­tomiza­tion 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 han­dling and the almighty open­With­De­fault­Ap­pli­ca­tion (for both folder and medias). I’ve also heard this ver­sion of the run­time is faster and lighter, and we all like that.

Open­Source

As for every project I work on, I try to have some Open­Source bits so that any­one can ben­e­fit from the work and time I spent on it. I asked Foto­lia 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 Sig­nals logic: fotolia-as3-api. I imple­mented most of (if not all) fea­tures of their offi­cial API so build­ing an AS3 app off of that should be pretty easy, do so!

Go get it!

Yeah, go get it.

Dok — AS3 Doc. UI

Meet Dok, my lat­est and nicest AIR app to this day!

Always look­ing for help when writ­ing AS3 for Flash, Flex and AIR? Think Adobe’s ref­er­ence is rich but brows­ing it sucks? Well, I did too. So I wrote this lit­tle 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 there­fore may not be very inter­est­ing to oth­ers, I decided it should look good. So I tried my best and worked hard on those pix­els and styles (col­ors and tex­tures inspired by that sweet clock)… Jump to the project page for life-size screenshot!

This project is absolutely Open­Source, from top to bot­tom. AS3 classes, MXML, Illus­tra­tor and Pho­to­shop files, PNGs and so on… Help your­self.