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!

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!

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.

le bureau baroque

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!

SVG to RaphaelJS

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!

Redesign

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!

AIR: ELS slow?

This post is a techy one, so if you don’t write AIR apps or if you think this wouldn’t be enough to show off dur­ing cof­fee break I rec­om­mend some­thing fun­nier.

Work­ing on a big fat AIR app (more than 400 Mb) I noticed some­thing quite strange: using Encrypt­ed­Lo­cal­Store get/setItem meth­ods hap­pened to be slow, I mean very slow, but like, slow as hell (like 5 to 10 sec­onds per call) but only after launch­ing the app, and not after. Some­thing that I never noticed before ; nei­ther with other AIR apps, nor for this one before I added its heavy con­tent… And the tricky part is that it only occurred with a com­piled app, but not within ADL.

I googled a bit and found this thread which is mainly about the strongly­Bound para­me­ter for setItem, but its last post by Oliver Gold­man rang my bell:

The first time ELS is accessed the application’s sig­na­ture needs to be ver­i­fied, regard­less of whether or not strongly­Bound is set. If strongly­Bound is set, then the sig­na­ture is re-verified as the appli­ca­tion is run­ning. Either way, it’s expen­sive if you have a big application.

Small app: fast, fat app: slow as hell. Les­son learned…

And this is true both for Flash and HTML/JS AIR apps. So if you don’t need your data to be encrypted I highly rec­om­mend using Share­dOb­ject (or else) instead. As far as I’m con­cerned the first calls dropped from 5/10 sec­onds to a few milliseconds.

Bingo.

Meebo Cleaner

Using Google Chrome? Using Meebo? Annoyed by the ad at the bot­tom and the blog win­dow when you log in?

I just wrote and pub­lished my first Chrome Exten­sion — Meebo Cleaner, to clean that up!

Pretty sim­ple code, noth­ing rev­o­lu­tion­ary here. Go get it and let me know what you think, or if you have suggestions/ideas…

The Scroll Effect

Facts

So the other day I had an hour to waste, I decided to learn how to use MooTools classes and, as the best way to learn some­thing is to play with it, I played with it.

About 30 min­utes after, I had some­thing  run­ning. Dirty and buggy but still, look­ing cool. It took me an extra 30 min­utes to clean that up, make sure it was work­ing on most browsers, add the Google Ana­lyt­ics tracker, push it online and add it to the projects page…

You prob­a­bly guessed it already, I’m talk­ing about the Scroll Clock. Well this hour might be the least wasted one of my life. Think I’m rad­i­cal? Read on!

Results

After tweet­ing about it twice (once to some­one who’s inter­ested in netart, and once to the MooTools team) things went big. I don’t know exactly how this hap­pened but it (the Scroll Clock page) got love from Giz­modo, swiss­miss, QBN, Ajax­ian, Neatorama and many more. Wow.

A few days after the tsunami, here’s what my Ana­lyt­ics page looks like. My daily aver­age of 600 page views has seri­ously been put to shame, with a cli­max on the 19th of Novem­ber: 313,000+.

Pageviews

Side effects

This is prob­a­bly the fun­ni­est part, not only did I worry for the server the site is hosted on, but a few things happened…

I got 3 job offers ; many friend requests on Face­book, Flickr, Vimeo and so on ; received a dona­tion ; was con­tacted by a Google guy to add the project to chromeexperiments.com, which I did ; and of course had to bother my friends and col­leagues about my new web-fame…

Con­clu­sion

The short one: don’t spit on Twit­ter, it might make you a star. Just jok­ing, keep spit­ting on it.

The long one: the sim­plest and short­est project of mine is the one which received the most vis­i­tors and love, ironic right? What does that mean? Should I stop work­ing on full-fledged AIR apps?

Prove me wrong!