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!

Least, a CSS to LESS tool

A few months back I discovered the concept 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 concept was really cool but lacked a real project to start getting my hands dirty with it.

Then I started working on a freelance project and Crunch came out; I was sold. This app made me choose LESS over Sass, which may not be the best of reasons, but it seems like I'm not the only one to pick this language. As you may know the second iteration of Twitter Bootstrap also relies on LESS, even encouraging you to use Crunch.

Saturday @ilovetypography tweeted this:

Dreaming of something that takes my CSS & LESSifies it — automagically.

To which I replied that:

This seems possible! Will try and see if I can write such a tool, interesting idea…

Sunday morning I started writing JavaScript, and a few hours later I had a good-looking script. Took some time to create a simple yet efficient UI, and that was it. Least.

The tool takes basic CSS as an input and tries its best to output the LESS or Sass source it would correspond to (including nesting, classes and pseudo-classes). I also added an option to output something for the not-so-popular-but-interesting Stylus 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 possible I used Twitter Bootstrap, which has its downsides but fits perfectly this kind of projects. A "five-hour project" also means it may still be a bit buggy. Don't hesitate to ping me on Twitter or to drop comments here.

ps: Least both references LESS and "To Say the Very Least", a track by Buck 65 on Vertex. Ah!

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!

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.

le bureau baroque

As a freelancer I mostly work on AIR apps, but when friends asked me to develop their new website I happily jumped aboard!

Le bureau baroque is an architecture agency in Bordeaux; playing with art, design and — of course — architecture. They're the ones that set up the Pecha Kucha event in Bordeaux 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 considered a few options but quickly came to the conclusion that Indexhibit was exactly what we were looking for. But one thing that was really bugging us is how most (if not all) Indexhibit sites look the same. Indeed they're a great way to show big images and the navigation is damn simple, but hey, why not keep these great qualities but in a more original layout?

Since we're really keen on horizontal layouts we went for this. But something bothers me with this: you get a horizontal scrollbar at the bottom of the page; which is hard to see, because it sits at the bottom of your screen and we — dumb humans — are not really used to it. So I thought: why not have a horizontal layout scrolled by a vertical scrollbar? That seemed a bit tricky at first, for two reasons:

  1. Is that technically feasible?
  2. Isn't that too weird, for the end-user?

Both questions could not be answered without trying, so I tried. And it looked cool!

When the prototype was ready I started taking a look at Indexhibit's guts; and although it looked a bit ugly to me, I realized pimping it was no big deal... A few e-mails and burger-meetings after we were happy with the newly created theme. Christelle Bonnet 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 concept and tell me what you think!

SVG to RaphaelJS

While redesigning this blog I wanted to keep the "one color per post" concept I had in the previous version by changing (tweening) the logo's color accordingly to the article being viewed (or scrolled to). I rapidly realized 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 loading a SWF file on every page).

I remembered hearing — a few months earlier — about Raphaël (a JS lib to render vector graphics). At that time I found the concept really interesting 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 syntax looks a bit cryptic at first. It says it handles SVG, and — guess what — Illustrator can export to SVG. We're getting closer...

SVG is XML, but Raphaël doesn't eat XML, it eats a specific syntax meant to be compatible with SVG and VML. Hum... This is when I fire Flash Builder and start writing code. The goal: accept an SVG XML file as input and spit some "Raphaël-compatible script" out.

Boom (plus a little demo of an output).

I then simply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the output, and wire all that to the scroll/color tweening logic. Pretty easy.

Everything worked and looked nice on all browsers and OS's but I realized the sole idea of having a logo changing colors didn't work that well. For purely visual reasons. So I dropped it from my theme and rolled back to the black PNG version you can see right now.

The good thing is, the tool works pretty well (at least with Illustrator SVGs) and is OpenSource. Either use it or modify it, and tell me what you think. I did this in a hasty fashion and I probably won't use it a lot, so don't expect updates or bug fixes... But if you feel like improving it, please do so!

Redesign

I've had this blog for 2 and a half years now, and it never really evolved visually. 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 probably reading this from your RSS reader you should definitively come by and see how it looks. And share some feedback, if you feel like it.

Can't remember what it looked like before? I've archived screens over at Flickr.

A consistent look

Updating the blog's look is good, but a complete rewrite is better; for consistency, fool! I used to have a different look for every single page: home, projects, blog and so on. No more.

Long story short:

"Before: all different. Now: all good."

I've been into grids since the day I learned about Bluepint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heavily relies on a grid structure. For grid freaks out there, click here to toggle 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 different, but we'll get into that later.

Got a keyboard? Like shortcuts? Press that key!

I implemented a few keyboard shortcuts, from useful to useless. For example, if you liked the grid toggle, just press G (for grid) or W (for InDesign users) and you'll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next article by pressing N (or the Down key)? And you guessed it already, P (or Up) will jump to the previous (inspired by AisleOne). You can also time-travel by pressing 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 discovered that technique on Hicksdesign and immediately thought I had to implement that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then overwrite some declarations if the screen size matches some rules... I implemented 3 different layouts so the site should look good on about any device. Just resize your browser window 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 awesome

  • I've always wanted to use Webfonts 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 "Subtle Prompt". It happens when you use a keyboard shortcut or when you click the Contact link...
  • If you're on a WebKit browser (Safari or Chrome) you should see custom scrollbars, styled with CSS. Yeah.
  • I kind of don't support Internet Explorer. Yes, this IS an awesome feature!
  • Trackbacks are now separated from regular comments.
  • A blog post's author (my) comments appear differently, so you know who's the boss out there.

OpenSource

I always try my best to share the useful and reusable bits. Here are some JavaScript (MooTools required) goodies:

  • LazyScroller: turns your keyboard keys into a navigation dashboard.
  • SubtlePrompt: nice and gentle prompt for your sensitive users.
  • Lblr: form input in-context labeler.
  • ta-bg: allows a textarea's background image to scroll with its content.

I'll try to post docs/demos soon, I know this is probably a little 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 during coffee break I recommend something funnier.

Working on a big fat AIR app (more than 400 Mb) I noticed something quite strange: using EncryptedLocalStore get/setItem methods happened to be slow, I mean very slow, but like, slow as hell (like 5 to 10 seconds per call) but only after launching the app, and not after. Something that I never noticed before ; neither with other AIR apps, nor for this one before I added its heavy content... And the tricky part is that it only occurred with a compiled app, but not within ADL.

I googled a bit and found this thread which is mainly about the stronglyBound parameter for setItem, but its last post by Oliver Goldman rang my bell:

The first time ELS is accessed the application's signature needs to be verified, regardless of whether or not stronglyBound is set. If stronglyBound is set, then the signature is re-verified as the application is running. Either way, it's expensive if you have a big application.

Small app: fast, fat app: slow as hell. Lesson 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 recommend using SharedObject (or else) instead. As far as I'm concerned the first calls dropped from 5/10 seconds to a few milliseconds.

Bingo.

Meebo Cleaner

Using Google Chrome? Using Meebo? Annoyed by the ad at the bottom and the blog window when you log in?

I just wrote and published my first Chrome Extension - Meebo Cleaner, to clean that up!

Pretty simple code, nothing revolutionary 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 something is to play with it, I played with it.

About 30 minutes after, I had something  running. Dirty and buggy but still, looking cool. It took me an extra 30 minutes to clean that up, make sure it was working on most browsers, add the Google Analytics tracker, push it online and add it to the projects page...

You probably guessed it already, I'm talking about the Scroll Clock. Well this hour might be the least wasted one of my life. Think I'm radical? Read on!

Results

After tweeting about it twice (once to someone who's interested in netart, and once to the MooTools team) things went big. I don't know exactly how this happened but it (the Scroll Clock page) got love from Gizmodo, swissmiss, QBN, Ajaxian, Neatorama and many more. Wow.

A few days after the tsunami, here's what my Analytics page looks like. My daily average of 600 page views has seriously been put to shame, with a climax on the 19th of November: 313,000+.

Pageviews

Side effects

This is probably the funniest 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 Facebook, Flickr, Vimeo and so on ; received a donation ; was contacted by a Google guy to add the project to chromeexperiments.com, which I did ; and of course had to bother my friends and colleagues about my new web-fame...

Conclusion

The short one: don't spit on Twitter, it might make you a star. Just joking, keep spitting on it.

The long one: the simplest and shortest project of mine is the one which received the most visitors and love, ironic right? What does that mean? Should I stop working on full-fledged AIR apps?

Prove me wrong!