TOKI WOKI. 

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!

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!

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!

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.

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!

“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.

I’ve been work­ing on an app for a French sport hos­pi­tal, designed to browse its msk image library. It’s called “MSK view” and it is avail­able for free in iTunes (iPhone and iPad ver­sion) and in the Android Mar­ket.

Pretty tech­ni­cal stuff in it, not sure every­one will want to install it but hey, there may be some doc­tors out there!

The hos­pi­tal is French but the app is both in French and Eng­lish. Built in Flash Builder with Flex Mobile, Robot­legs and AMFPHP, UI design by Jumo.

Now go show off brows­ing images of “Scapho­trapezial Syn­os­to­sis” or “Rec­tus Femoris intra­mus­cu­lar Haematoma”, what­ever it may be!

Boks is one of my most suc­cess­ful apps and this is prob­a­bly not only because of its use­ful­ness, but also because it is free, too. I released it more than 2 years ago and it is still heav­ily downloaded.

The CSS com­mu­nity is really active and fast-moving. When I wrote Boks, Blue­print CSS was one of the most watched and forked project on GitHub which is mostly why I chose to base my UI and logic on it (it still is at the top, by the way). But with today’s CSS3 hype and because of the ever-growing list of CSS frame­works (not going to list them here) I started receiv­ing lots of fea­ture requests.

At first I thought I could wait and han­dle them later, but I quickly real­ized it would need a lot of time, and I defin­i­tively didn’t have it in my hands (or at least not for this project). The idea to Open­Source it seemed obvi­ous and I’ve been slow doing so, but here it is. If anyone’s will­ing to take a look at what I wrote and fix or improve it, do it! Don’t for­get that this has been writ­ten a while back and I wouldn’t re-write it this way (think Robot­legs); I know the code will look crappy to some but hey, we all learn and evolve, right?

I’ve licensed Boks’ source under GNU GPL v3 in order for it to remain Open­Source, but if you have other sug­ges­tions, just tell me.

Remem­ber Evnt, the quick and sim­ple UI to gen­er­ate AS3 Event subclasses?

Well, it’s still here but I don’t use it much any­more, since I’m a big fan of Robert Pen­ner’s Sig­nals! So I wrote Signl. It’s basi­cally the same thing, but for Signals.

I know writ­ing Sig­nal classes is an easy task; but, why not make it eas­ier? I hope this helps! Oh, and by the way, it’s Open­Source, just like Evnt was.

Hey, fel­low english-reading vis­i­tor, this post is going to be in French! Hope you don’t mind.

Si comme moi vous ne pou­vez pas vous empêcher de dire “flim”, “ouiche” ou encore “un pour l’argent, deux pour le spec­ta­cle et trois pour le cail­lou”, cette appli­ca­tion est pour vous.

Après une semaine de vacances avec une per­sonne touchée par cette mal­adie et sans avoir accès à Inter­net j’ai vite réal­isé qu’il me fal­lait une appli­ca­tion con­tenant tout le script de ce mag­nifique flim : La Classe Améri­caine. Je savais qu’un fou avait déjà fait tout le sale boulot et qu’il ne me restait plus qu’à extraire ces don­nées et créer l’interface pour les parcourir…

Grâce à Google Chrome et ses Out­ils de développe­ment j’ai pu injecter MooTools dans la page. Petite astuce très sim­ple et très pra­tique (script à copier/coller dans la console) :

var scriptNode = document.createElement('SCRIPT');
scriptNode.type = 'text/javascript';
scriptNode.src = 'https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js';
var headNode = document.getElementsByTagName('HEAD');
if (headNode[0] != null) headNode[0].appendChild(scriptNode);

Après ça, quelques lignes pour extraire les don­nées, les net­toyer et les stocker directe­ment dans le presse-papier au for­mat JSON :

var data=[];
var images=$$('table.script img');
for (var i=0; i<images.length; i++) {
    var tr=images[i].getParent().getParent();
    var o={};
    var scriptTag=tr.getElements('td')[2];
    scriptTag.getElements('a').dispose();
    data.push({
        ts:tr.getElement('small').get('text'),
        script:scriptTag.get('html')
			.split('’').join("'")
			.replace(/\n/, '')
			.replace(/<br>\n$/, '')
    });
}
console.log(data.length);
copy(JSON.encode(data));

Un petit coup de Flash Builder, saupoudré de Robot­legs et hop, une appli Android ! Pas de ver­sion iPhone pour l’instant, mais si quelqu’on m’offre de quoi me payer un cer­ti­fi­cat de développeur, je ne dis pas non !

Au revoir, Messieurs-Dames. C’est ça, la puis­sance intel­lectuelle. Bac + 2, les enfants.