Médiation Culurelle Suisse, vote for us!

Parade and I have cre­ated a visual iden­tity for Médi­a­tion Cul­turelle Suisse. They’re cur­rently hav­ing a poll to help them choose. We’re num­ber 3, help us by vot­ing!

Médiation Culturelle Suisse


Fluid Corners, a window UI idea

A few days back a very sim­ple idea struck me right before going to bed. The more I thought about it, the less I could sleep. The day after this short night I fired up Pho­to­shop and started writ­ing a lit­tle bit of JavaScript. All this led to Fluid Cor­ners.

The idea is pretty sim­ple but could come in handy: when your OS’s win­dows are moved off-screen, their essen­tials UI ele­ments (think: but­tons) stay at reach, stick­ing to the screen’s limit. Go ahead and play with the demo, you’ll get it!

Thoughts wel­come, of course.

ps 1: A hot thread about it on Hacker News.
ps 2: @raphael­bastide’s take on the idea: greasy!

Bertjan Pot — Rope Masks


A per­sonal homage to African Apparel’s first.

I also printed it on a shirt but the result is too shitty to share.

Least, a CSS to LESS tool

A few months back I dis­cov­ered the con­cept of CSS pre-processors. At that time I knew about LESS and Sass and had to decide which one was the best option for me. I thought the con­cept was really cool but lacked a real project to start get­ting my hands dirty with it.

Then I started work­ing on a free­lance project and Crunch came out; I was sold. This app made me choose LESS over Sass, which may not be the best of rea­sons, but it seems like I’m not the only one to pick this lan­guage. As you may know the sec­ond iter­a­tion of Twit­ter Boot­strap also relies on LESS, even encour­ag­ing you to use Crunch.

Sat­ur­day @ilovetypography tweeted this:

Dream­ing of some­thing that takes my CSS & LESSi­fies it — automagically.

To which I replied that:

This seems pos­si­ble! Will try and see if I can write such a tool, inter­est­ing idea…

Sun­day morn­ing I started writ­ing JavaScript, and a few hours later I had a good-looking script. Took some time to cre­ate a sim­ple yet effi­cient UI, and that was it. Least.

The tool takes basic CSS as an input and tries its best to out­put the LESS or Sass source it would cor­re­spond to (includ­ing nest­ing, classes and pseudo-classes). I also added an option to out­put some­thing for the not-so-popular-but-interesting Sty­lus language.

As you’ll notice in the footer of the tool’s page it’s a “five-hour project”. In order to have a decent UI as fast as pos­si­ble I used Twit­ter Boot­strap, which has its down­sides but fits per­fectly this kind of projects. A “five-hour project” also means it may still be a bit buggy. Don’t hes­i­tate to ping me on Twit­ter or to drop com­ments here.

ps: Least both ref­er­ences LESS and “To Say the Very Least”, a track by Buck 65 on Ver­tex. Ah!

Kwot JS

Remem­ber Kwot, my Flash quote viewer? I pub­lished it back in Decem­ber 2008.

It is a mix of Flash (most part of it), JS (for the add form and its com­mu­ni­ca­tion with the main UI) and PHP (CRUD logic). Read the blog post for more details on it.

I recently started look­ing at JavaScript frame­works and tools, prob­a­bly like most Flash devel­op­ers. Not because Flash is dead, but because the more tools you mas­ter, the bet­ter you are. And because yes, every­one is ask­ing for JS and CSS3 these days. After some inves­ti­ga­tion I decided to give Backbone.js a try. And re-writing Kwot from scratch with it seemed like a great exer­cis­ing opportunity.

So here its: Kwot JS!

It should work really well on Safari, OK on Chrome, not-that-perfect on Fire­fox and poorly on Inter­net Explorer. You were look­ing for a rea­son to con­tinue using Flash for build­ing “expe­ri­ence sites”? There you have it: com­pat­i­bil­ity. Kwot JS relies on CSS3 trans­forms to allow this per­spec­tive view on quotes, and on prop­erty tran­si­tions to ani­mate the quotes’ col­ors. Of course this doesn’t work in all browsers!

Now, about Backbone.js. The framework’s require­ments and logic are good, but com­ing from an AS3 world mostly every­thing looks odd, for bet­ter or worse. Note this is my first project with it and I might have missed some good prac­tices or handy tips.

The good thing is its per­sis­tence layer. In Kwot, quotes are stored in a data­base, I sim­ply wrote a sim­ple REST­ful API with Slim (try this PHP frame­work: win) and con­nected it to my Model classes. That’s it, it just works. Underscore.js’ tem­plat­ing sys­tem is hand­some, too. Never used that before, cool stuff.

The bad things are, as far as I’m concerned:

  • No strong typ­ing. Of course this isn’t Backbone’s prob­lem, but rather JS’ one. On this par­tic­u­lar point your IDE can help, but you won’t get run­time errors.
  • The “this” key­word. You always end up with plenty of lines all start­ing with a “this.something”. It frus­trates me.
  • Scope issues: when lis­ten­ing to events you pretty much always have to use Underscore.js’ bind method in order not to lose your infa­mous “this” scope. I don’t like that.
  • The MVC pat­tern. If you ask me: it sucks. I’m no inte­grist but I wouldn’t have called what Back­bone pro­vides MVC. I was always won­der­ing “who should do that?” and never really came up with a sat­is­fy­ing answer.

Over­all the learn­ing curve is pretty steep, I think it took me less time to write this ver­sion than the Flash one, but I’m a 3 year more mature devel­oper. Also, when I wrote the Flash ver­sion I didn’t really know where I was going and I kept expe­ri­enc­ing with con­cepts and ideas to see what would look best.

On a side note the Flash ver­sion uses Neu­tra, whereas this one uses Ques­trial (hosted and served by Google Webfonts).

Tell me what you think, both about the app and the framework!

Generating a Windows installer for your AIR captive runtime application

I recently wrote a pretty big tuto­r­ial about Adobe AIR, its cap­tive run­time mode, and how to gen­er­ate a Win­dows installer on top of that. It was writ­ten in French and pub­lished on flex-tutorial.fr.

I then con­tacted the fine folks at Adobe Devel­oper Con­nec­tion and offered to trans­late it to Eng­lish. They accepted, reviewed it, and boom: pub­lished it.

Wether you’re a French or Eng­lish reader, I got you cov­ered. Tell me what you think.

Shrink O’Matic 2

Back in 2008 I would spend some of my Sat­ur­day after­noons sit­ting in a Laun­dro­mat, wait­ing for my clothes to smell good. I quickly real­ized these moments were per­fect to bring my lap­top with me and code. One of the first AIR apps I wrote was Shrink O’Matic, now you know where the name comes from.

It quickly became suc­cess­ful. It now has been down­loaded 168,000+ times, a best-seller of sorts. Except it’s free.

But with suc­cess comes feed­back, and with feed­back comes fea­ture sug­ges­tions. Most of them were included through updates, some of them didn’t make the cut. Prob­a­bly because of me being lazy or because of AIR’s limitations.

Then AIR 2 came out, then I learnt Robot­legs… So I re-wrote it from scratch! Intro­duc­ing Shrink O’Matic 2, the same quick and sim­ple app but with more fea­tures and a nicer theme.

Here’s what’s fresh off the oven:

  • Drop fold­ers onto the app: every image in it (or in its sub-folders) will be shrinked.
  • New “Rota­tion” set­tings pane: either use a spe­cific angle or let the app read your images’ EXIF data and decide what to do.
  • Cus­tom name option: choose exactly what the out­put name will be using your own pat­tern and inject­ing the orig­i­nal file’s name (using $name) and/or its posi­tion in the queue (using $num).
  • PNG files now keep their trans­parency when shrinked.
  • Water­mark: water­mark your images, even choose where to place the overlay.
  • Drop files onto the app while it’s pro­cess­ing, no problemo!
  • No more dimen­sion limits.
  • Shiny new theme!

But! I decided some fea­tures had to go. I removed the “name pre­view” that used to be in the sta­tus bar. I also removed the abil­ity to drop images from web pages. If you need these fea­tures and want them back, make sure to drop a com­ment and let me know!

That’s it, go get it!

Meanwhile, in the kitchen…

Hey every­one, what’s up? Made it to 2012? Me too!

My girl­friend and me wanted to exper­i­ment a lit­tle for our new year wishes, so we looked at what was handy and came up with this lit­tle video… We know it’s not per­fect but we’re pretty happy with it. Tell us what you think!

Thanks to Craig Bald­win for his great stop-motion tuto­r­ial on Adobe Pre­miere, pretty use­ful for a new­bie like me. The sound­track is home made, thanks to this cool MIDI file.

Wanna lis­ten to the full-length ver­sion? Here it is.

<a href="http://toki-woki.net/blog/wp-content/uploads/mp3/tetris-2012.mp3">tetris-2012</a>

Happy new year every­one; 2012 is going to be a piece of cake!