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!

Shirt

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

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

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!

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!

W-Architectures

W-Architectures is an archi­tec­ture and urban-planning agency. The firm brings together a highly-qualified team of archi­tects with inter­na­tional expe­ri­ence.” This is how they intro­duce them­selves and I couldn’t have said it bet­ter myself.

I recently pub­lished their brand new web­site, designed by Chris­telle Bon­net and devel­oped by me. It’s been a pretty long process (they are very busy guys) but it’s here and I like it!

I used mostly Word­Press and MooTools to develop it. Every­thing was designed to be light and sub­tle, I think I can safely say that it is.

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.

Type Tip

I just launched a Tum­blr about the font cre­ation process I recently started. Should be inter­est­ing to any­one lov­ing fonts as I will study some of their aspects and be as visual as I can. Should be.

Here it is, folks: Type Tip. Learn more on the About page.