TOKI WOKI. 

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!

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!

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:

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!

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 neighbor = φ.

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

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!

I’m still hav­ing a hard time believ­ing what I’m about to write, but hope­fully you will.

That was my intro, buddy.

A lit­tle bit of context

I lis­ten to music, I try as hard as I can to be eclec­tic but let me con­fess that: I’ve always loved Hip-Hop. Of course my Hip-Hop heroes have changed through the years, but there’s one that never left my inner podium… He’s Cana­dian, he’s weird (proof: he’s worn a platy­pus shirt, once), he’s prob­a­bly the most sub­tle writer I know (OK, with Yoni Wolf) and he’s evolving.

He’s Buck 65.

An ounce of Twitter

As in every web tale, it all starts with a Twit­ter sta­tus. Mine started with this one:

I kinda need a logo-thing made of the num­bers 65 and 20. Any­one wanna take a crack? Who knows what might happen?!

I read this and thought “Well yes, but I’m kind of busy you know. And what the hell could I do with those damn num­bers? Plus, lots of fans will answer that”.

Some friendly advice

A few days later as I was chat­ting with a good friend of mine (and dis­creetly sent him the link to that tweet) he reacted some­thing like: “You bitch-ass cunt, you could try some­thing and see! Stupid-ass jerk”. “Hum, well yeah, you know. Just sayin’…” I kind of replied.

So I fired Illus­tra­tor and tried a few things out. A “65”, a “20”, and 15 min­utes later I had something.

Not quite ready for prime-time, but the con­cept was there. A few iter­a­tions later I was kind of happy with this:

So I tweeted back.

Who knows what might happen

And got an answer, a pri­vate one. Say­ing he was lik­ing it… Oh boy.

A few days later I received another pri­vate mes­sage ask­ing me if I could add a “th” to the logo, let­ting me know the mys­te­ri­ous logo was in fact for his “20 years as a rap weirdo”. Which I (of course) did.

We then e-mailed back and forth and “sorted out the details”, he “blew [the logo] up with dyna­mite and shot it with a gun a few times” and that was it.

Oh boy

I made Buck 65’s 20th “year in the game” logo, which is up on his new web­site.

Call me a happy fan. Yup.

Happy new year, folks!

I’ve been look­ing for ideas for my 2010 greet­ing card and finally found what I was look­ing for. Dur­ing the process I devel­oped sev­eral iter­a­tions that didn’t made the final cut, I selected two of them that are not that bad but not good enough for prime time!

The “ad” version

The “flash­back trip­tych” version

Since it’s a trip­tych it needs more space, so I set up a ded­i­cated page… Go see it!

What now?

The actual greet­ing card will be posted in January!

Lost Char­ac­ters : des car­ac­tères qui n’ont pas demandé à naître (ini­tié par Raphaël Bastide).

Le principe : Don­ner nais­sance à un car­ac­tère typographique qui n’a rien demandé, com­plète­ment hors con­texte et hors du temps. Fond trans­par­ent ou blanc de préférence. Postez-le sur votre blog avec comme titre “Lost Characters”.

Cre­ate a sin­gle char­ac­ter, out of con­text and out of time. Post it on your blog with “Lost Char­ac­ters” as a title. The freak must be on a trans­par­ent or white background.

Update: play with the home-brewed Type Tester!

Intro­duc­ing Boks, my lat­est and most ambi­tious AIR app to this day!

Do you design web pages? Do you write HTML and CSS? Ever heard about the Grid Sys­tem and Blue­print CSS? Thought it was a pain to imple­ment? Think again, fool!

Boks is some kind of WYSIWYG to help you setup a grid and base­line rhythm, build and fill your lay­out and export all this to HTML and CSS in no time.

Got your own CSS style already? No prob­lemo, Boks can use them and even­tu­ally merge and com­press them within a sin­gle “screen.css”. Your styles use images? Sim­ply point to your asset direc­tory and it will be included too! Afraid of break­ing the base­line rhythm with you ran­domly sized images? Just select the “Add JS to fix base­lines” option and you’re good to go!

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

Apr 01, 2009: Update! I’ve done some wacky video screen­casts that can help you under­stand every­thing about Boks, go and have a look! Yes, the sound is not perfect.