Médiation Culurelle Suisse, vote for us!

Parade and I have created a visual identity for Médiation Culturelle Suisse. They're currently having a poll to help them choose. We're number 3, help us by voting!

Médiation Culturelle Suisse

Fluid Corners, a window UI idea

A few days back a very simple 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 Photoshop and started writing a little bit of JavaScript. All this led to Fluid Corners.

The idea is pretty simple but could come in handy: when your OS's windows are moved off-screen, their essentials UI elements (think: buttons) stay at reach, sticking to the screen's limit. Go ahead and play with the demo, you'll get it!

Thoughts welcome, of course.

ps 1: A hot thread about it on Hacker News.
ps 2: @raphaelbastide's take on the idea: greasy!

Shirt

A personal homage to African Apparel's first.

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

Kwot JS

Remember Kwot, my Flash quote viewer? I published it back in December 2008.

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

I recently started looking at JavaScript frameworks and tools, probably like most Flash developers. Not because Flash is dead, but because the more tools you master, the better you are. And because yes, everyone is asking for JS and CSS3 these days. After some investigation I decided to give Backbone.js a try. And re-writing Kwot from scratch with it seemed like a great exercising opportunity.

So here its: Kwot JS!

It should work really well on Safari, OK on Chrome, not-that-perfect on Firefox and poorly on Internet Explorer. You were looking for a reason to continue using Flash for building "experience sites"? There you have it: compatibility. Kwot JS relies on CSS3 transforms to allow this perspective view on quotes, and on property transitions to animate the quotes' colors. Of course this doesn't work in all browsers!

Now, about Backbone.js. The framework's requirements and logic are good, but coming from an AS3 world mostly everything looks odd, for better or worse. Note this is my first project with it and I might have missed some good practices or handy tips.

The good thing is its persistence layer. In Kwot, quotes are stored in a database, I simply wrote a simple RESTful API with Slim (try this PHP framework: win) and connected it to my Model classes. That's it, it just works. Underscore.js' templating system is handsome, too. Never used that before, cool stuff.

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

  • No strong typing. Of course this isn't Backbone's problem, but rather JS' one. On this particular point your IDE can help, but you won't get runtime errors.
  • The "this" keyword. You always end up with plenty of lines all starting with a "this.something". It frustrates me.
  • Scope issues: when listening to events you pretty much always have to use Underscore.js' bind method in order not to lose your infamous "this" scope. I don't like that.
  • The MVC pattern. If you ask me: it sucks. I'm no integrist but I wouldn't have called what Backbone provides MVC. I was always wondering "who should do that?" and never really came up with a satisfying answer.

Overall the learning curve is pretty steep, I think it took me less time to write this version than the Flash one, but I'm a 3 year more mature developer. Also, when I wrote the Flash version I didn't really know where I was going and I kept experiencing with concepts and ideas to see what would look best.

On a side note the Flash version uses Neutra, whereas this one uses Questrial (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 Saturday afternoons sitting in a Laundromat, waiting for my clothes to smell good. I quickly realized these moments were perfect to bring my laptop 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 successful. It now has been downloaded 168,000+ times, a best-seller of sorts. Except it's free.

But with success comes feedback, and with feedback comes feature suggestions. Most of them were included through updates, some of them didn't make the cut. Probably because of me being lazy or because of AIR's limitations.

Then AIR 2 came out, then I learnt Robotlegs... So I re-wrote it from scratch! Introducing Shrink O’Matic 2, the same quick and simple app but with more features and a nicer theme.

Here's what's fresh off the oven:

  • Drop folders onto the app: every image in it (or in its sub-folders) will be shrinked.
  • New "Rotation" settings pane: either use a specific angle or let the app read your images' EXIF data and decide what to do.
  • Custom name option: choose exactly what the output name will be using your own pattern and injecting the original file's name (using $name) and/or its position in the queue (using $num).
  • PNG files now keep their transparency when shrinked.
  • Watermark: watermark your images, even choose where to place the overlay.
  • Drop files onto the app while it's processing, no problemo!
  • No more dimension limits.
  • Shiny new theme!

But! I decided some features had to go. I removed the "name preview" that used to be in the status bar. I also removed the ability to drop images from web pages. If you need these features and want them back, make sure to drop a comment and let me know!

That's it, go get it!

Meanwhile, in the kitchen…

Hey everyone, what's up? Made it to 2012? Me too!

My girlfriend and me wanted to experiment a little for our new year wishes, so we looked at what was handy and came up with this little video... We know it's not perfect but we're pretty happy with it. Tell us what you think!

Thanks to Craig Baldwin for his great stop-motion tutorial on Adobe Premiere, pretty useful for a newbie like me. The soundtrack is home made, thanks to this cool MIDI file.

Wanna listen to the full-length version? Here it is.

[mp3:tetris-2012]

Happy new year everyone; 2012 is going to be a piece of cake!

W-Architectures

"W-Architectures is an architecture and urban-planning agency. The firm brings together a highly-qualified team of architects with international experience." This is how they introduce themselves and I couldn't have said it better myself.

I recently published their brand new website, designed by Christelle Bonnet and developed 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 WordPress and MooTools to develop it. Everything was designed to be light and subtle, I think I can safely say that it is.

Unipasta, a Unicode browser

When writing in French I'm always looking for characters that can't be easily typed with a keyboard (like œ, for example). I used to go to copypastecharacter.com for its simplicity: just go to that page, click on a character and boom, it's in your clipboard, ready to be pasted!

But I wanted something more powerful/thorough that would remember my frequently used characters. So I wrote Unipasta!

Unipasta

Here's what you should know about it:

  1. Every input under the selected character (char, code and hex) can be edited and will update each other. Easily jump to any character!
  2. The font metrics (baseline, 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 character your click will be automatically copied to your clipboard, handy!
  5. Use the "Recent characters" list to quickly access your favorite ones (latest used will always be listed first).

If you think some missing Unicode blocks are important to you or if you'd like to add a new character listing, just ask for it!

Shrink O’Mobile

Remember Shrink O’Matic, the "oh, so easy to use" image shrinker for Windows, Mac and Linux? Introducing Shrink O’Mobile, the "oh, so easy to use" image shrinker for Android!

Because cameras on phones take big pictures and because you might want to send smaller/lighter versions, 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 version is instantly stored in your camera roll. Easy as pie.

And did I mention the app is free? It is.

Type Tip

I just launched a Tumblr about the font creation process I recently started. Should be interesting to anyone loving 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.