TOKI WOKI. 

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!

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!

Hey, 2011 is here folks! Go grab you favorite QR Code reader and decrypt this tag, fool. QR Reader links on the greet­ing card page.

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?

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!

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!

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.

I talked about the logo here and there and now, here are the EPs! Grab them dig­i­tally or phys­i­cally.

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!