Unipasta, a Unicode browser

When writ­ing in French I’m always look­ing for char­ac­ters that can’t be eas­ily typed with a key­board (like œ, for exam­ple). I used to go to copypastecharacter.com for its sim­plic­ity: just go to that page, click on a char­ac­ter and boom, it’s in your clip­board, ready to be pasted!

But I wanted some­thing more powerful/thorough that would remem­ber my fre­quently used char­ac­ters. So I wrote Uni­pasta!

Unipasta

Here’s what you should know about it:

  1. Every input under the selected char­ac­ter (char, code and hex) can be edited and will update each other. Eas­ily jump to any character!
  2. The font met­rics (base­line, x-height and cap-height) are auto-calculated and will help you know where the char lives;
  3. Click on the “More Info” link to jump to fileformat.info and access a lot of details about the selected character;
  4. Every char­ac­ter your click will be auto­mat­i­cally copied to your clip­board, handy!
  5. Use the “Recent char­ac­ters” list to quickly access your favorite ones (lat­est used will always be listed first).

If you think some miss­ing Uni­code blocks are impor­tant to you or if you’d like to add a new char­ac­ter list­ing, just ask for it!

Shrink O’Mobile

Remem­ber Shrink O’Matic, the “oh, so easy to use” image shrinker for Win­dows, Mac and Linux? Intro­duc­ing Shrink O’Mobile, the “oh, so easy to use” image shrinker for Android!

Because cam­eras on phones take big pic­tures and because you might want to send smaller/lighter ver­sions, Shrink O’Mobile is here to help out. Just launch the app, choose the way you want your image to be shrunk, pick your image and BOOM! Your fresh, smaller, new ver­sion is instantly stored in your cam­era roll. Easy as pie.

And did I men­tion the app is free? It is.

le bureau baroque

As a free­lancer I mostly work on AIR apps, but when friends asked me to develop their new web­site I hap­pily jumped aboard!

Le bureau baroque is an archi­tec­ture agency in Bor­deaux; play­ing with art, design and — of course — archi­tec­ture. They’re the ones that set up the Pecha Kucha event in Bor­deaux and who invited me to show off a bit! Of course they work on lots of other great projects so they needed a site to let the world know what’s up.

They wanted a highly visual site that would be easy to update, we con­sid­ered a few options but quickly came to the con­clu­sion that Index­hibit was exactly what we were look­ing for. But one thing that was really bug­ging us is how most (if not all) Index­hibit sites look the same. Indeed they’re a great way to show big images and the nav­i­ga­tion is damn sim­ple, but hey, why not keep these great qual­i­ties but in a more orig­i­nal layout?

Since we’re really keen on hor­i­zon­tal lay­outs we went for this. But some­thing both­ers me with this: you get a hor­i­zon­tal scroll­bar at the bot­tom of the page; which is hard to see, because it sits at the bot­tom of your screen and we — dumb humans — are not really used to it. So I thought: why not have a hor­i­zon­tal lay­out scrolled by a ver­ti­cal scroll­bar? That seemed a bit tricky at first, for two reasons:

  1. Is that tech­ni­cally feasible?
  2. Isn’t that too weird, for the end-user?

Both ques­tions could not be answered with­out try­ing, so I tried. And it looked cool!

When the pro­to­type was ready I started tak­ing a look at Indexhibit’s guts; and although it looked a bit ugly to me, I real­ized pimp­ing it was no big deal… A few e-mails and burger-meetings after we were happy with the newly cre­ated theme. Chris­telle Bon­net helped out with her great typographic/balance eye and we were ready to go!

Go see the site live, enjoy those nice projects, play with that side-scroll con­cept and tell me what you think!

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!

A Golden Ratio Tool

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

I wrote a quick and sim­ple golden ratio tool (ded­i­cated page). Basi­cally it helps you find “golden ratio neigh­bors” for a given num­ber: every num­ber in the list divided/multiplied by its neigh­bor = φ.

Pretty straight­for­ward but could come in handy. I’m aware it could be improved; if you have suggestions…

Hey! – A Lego Table

When I moved in I bought an IKEA Ramvik table and while trav­el­ling this sum­mer I had an idea (don’t ask why): dec­o­rate its top with Lego bricks used as pix­els. Here are the steps I went through. If you don’t care about those steps and want to see a nice time-lapse video, scroll to the end of the article!

Lego bricks

First things first. What are the Lego brick sizes and col­ors avail­able? Oddly enough this ques­tion is not that eas­ily answered. Prob­a­bly because Lego’s site is crappy, or because nobody really cares… I even­tu­ally found Brick­ipedia which hap­pens to be a much richer resource than the offi­cial ones. Every­thing I was look­ing for was there: the Lego “unit” is 8 mil­lime­ters and the color palette is pretty sim­ple.

Table specs

Know­ing my table size I had var­i­ous options, depend­ing on the “pixel size” I’d choose. Of course the num­ber of bricks (and the price) would also vary. So I cre­ated a dynamic spread­sheet on Google Docs that’d do the cal­cu­la­tions for me… Here it is, with all the options pos­si­ble (French, sorry).

iframe: <a href="https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc&amp;hl=en&amp;output=html&amp;widget=true">https://spreadsheets.google.com/pub?key=0AmyvU-n2aOBpdG5oNUN6UW0xcUJ4a2E3eXFrTTJIVnc<span class="amp">&amp;</span>hl=en<span class="amp">&amp;</span>output=html<span class="amp">&amp;</span>widget=true</a>

I chose the 4x4 option, quite cheap and still offer­ing a cool num­ber of pixels.

Design

36x16 pix­els of free­dom, that’s it. I tried lots of dif­fer­ent designs, from lo-fi pho­tos to pixel-art draw­ings. I decided to go for a Heavy Oblique Futura.

Actual size:

Look­ing good.

The Lego palette

I set my type to white, on a black back­ground. The anti-aliasing process cre­ates gray-scale pix­els to smooth the curves, which is great, but Lego bricks aren’t avail­able in all col­ors! To have a real­is­tic pre­view of what it would look like I had to cre­ate a Pho­to­shop Color Table match­ing Lego’s gray-scales (if you’re inter­ested, just ping me [UPDATE: here they are]). Here’s a com­par­i­son between Photoshop’s default gray-scales (left) and Lego’s palette (right):


You may notice that Lego’s black is a lit­tle bit light and the grays are yellowish.

Time to order bricks!

Already? Nope, not that fast. Before order­ing I had to know exactly what to order, that means count­ing the pix­els. Well, I’m not this kind of guy. I’m a devel­oper; I hate repet­i­tive chores, you know.

So I fired up Flash Builder and came up with Palet­te­Counter a sim­ple, Open­Source, app to count pix­els of each color. I also added some kind of “assem­bly instruc­tions gen­er­a­tor” to help us build it. Handy.

Time to order!

Really? Yup. I placed an order on lego.com’s Pick A Brick and received it a cou­ple of weeks later. Yay!

Let’s do this

I’m not going to describe the process (that hap­pened this sat­ur­day), just have a look at this time-lapse vid. 1020 pics shot in about an hour, yummy. Thanks to Céline and Julie for help­ing out!

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!

eduMedia’s eBox

Guess what? AIR app! This one’s for edu­Me­dia.

An intro

We cre­ate and dis­trib­ute ped­a­gog­i­cal sim­u­la­tions and videos, and our school users can down­load them to pre­pare and illus­trate their lessons. Until now we offered server-side gen­er­ated ZIP files with an HTML, some CSS and the SWF, but users (who often are not com­puter geeks) wanted some­thing sim­pler and more pow­er­ful… So we designed the eBox!

The eBox

Basi­cally the eBox is an empty media library wait­ing to be filled. The first time you launch it, it installs itself (and the AIR run­time, if not already there) and then fills itself with the medias you chose. This hap­pens thanks to AIR’s Browser­In­voke logic and removes the “Save As” and “Uncom­press” steps.

You can also fill it with “local medias” (of any type) but drag­ging and drop­ping files on it, or by brows­ing and select­ing them. If these medias are SWFs they’ll be opened within the app, if not the OS will open them with their default app. Handy.

You also have the abil­ity to cre­ate direc­to­ries to orga­nize your library, and to reorder medias (via drag and drop). Pretty com­mon, but cool.

Let’s talk tech

Flex 4.1, local­ized with Lupo (now free and Open­Source!) and designed with Illus­tra­tor. Server-side com­mu­ni­ca­tion is made through AMFPHP. I used some tiny tech­niques that helped deploy two dif­fer­ent ver­sions with only one project (we have a school and an indi­vid­ual ver­sion), I might detail that in a next post.

This is my first real-life project with Robot­legs, it helped me learn how to use it and how to write really clean code; with view, medi­a­tors and all. I loved it and think I will con­tinue build­ing big projects with RLs, makes you feel pretty.

So?

I’m pretty happy with the final result (not that final, expect updates!), both on visual and tech­ni­cal points of view. Go grab a free media and tell me what you think! We also set up a spe­cial page with a nice pre­sen­ta­tion of how it works, in case you’re lost.