If you follow me since long enough you probably know that Gisties is my “main side project”.

If not and in a few words, Gisties is an alternative interface to gist.github.com.

Why

As far as I’m concerned, I have more than 150 gists.

Yes, more than 150. And as you guessed this is very hard to find old gists on github. That’s why we want to offer an alternative interface based on the Github api. A large scale application faster and lighter.

We started this project one year ago. But as we both have full time jobs, it’s really not easy to finish our project quickly. So, while waiting we have decided to publish lite.gisti.es. I think we can call that a “side project” of Gisties.

The first alpha

This first alpha version lets you browse your gists on your favorite browser (or on your smartphone). For now, it’s a read only interface. But more features like create a new gist or comment are coming.

We expect that you’ll enjoy this pre-version and we would love to hear from you. We have more in the pipeline, so stay tuned.

If you are not a Gists addict and if you want to take a look to the app, here is two examples :

• Gists list: http://alpha.gisti.es/mathiasbynens
• Gist: http://alpha.gisti.es/anthonyshort/2028061

Over the last few months, it has become clear that I should work in a startup for many reasons. That’s why I took the decision to leave my current position and began to look for a position at a startup.

I had some incredible opportunities in San Francisco and somewhere else, but that will have to wait. So I decided to stay in Paris and tried my luck with one of the most attractive startup in Paris: Jolicloud. And it was successful!

So today, the inevitable happens. This’s my last day at Octave & Octave and I’ll join Jolicloud on the next monday.

The agency experience was awesome. It was a very rewarding experience both technically and in professional terms. Without forgetting that it was my first professional experience in this industry. I met awesome people, and I hope to keep in touch with most of them.

Thank you!

When I came across on responsive.is, I said to myself: “Victor, you must write your own bookmarklet which mix both features.”
I mean a bookmarklet which allows to display the size of the viewport and some buttons to change the viewport to smartphone/tablet size automatically.

After some time of use, I thought this bookmarklet could be useful for others. So, I decided to share my code on github and publish the bookmarklet for designers and developers.

I’m aware that my bookmarklet isn’t lightweight and compliant like “Window Size” but I made it firstly for my personal use. I don’t use Internet Explorer, and I prefer to have something more designed (but minimalistic)
Anyway, don’t be afraid, because it stays light and ready to use for a daily work.

You can grab the bookmarklet here.

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer… and with a whole bunch of CSS3. You’ll like the transitions between two pictures entirely assumed by CSS3. There are 7 different transition effects. You can use your keyboard to navigate between pictures, and there is a full touch support for iPhone and iPad. Unfortunately, I haven’t tested yet the plugin with an Android device.

Glisse.js

Be careful, because this plugin uses a lot of new CSS3 features like keyframes. It’s definitely not a good idea to uses it on a general public website for the time.
But my goal -if the plugin has good returns- is to make a fully compliant plugin, using javascript animation on old browsers. So stay tuned.

The examples feature photos taken by Pierre Nizet. Cheers to him for the content.

Feel free to fork the project on github or ping me on twitter for any comments.

http://glisse.victorcoulon.fr/

note: Glisse is the french word for slide ;)

Instead of classic screen clean and load page transitions, the plugin loads the new page with a vertical slide animation. Exactly like a curtain rises. External controls can be added for Next/Prev pages. And there are more features explained on the example page.

Take a look of the example, it far better than any kind of long complicated explanation.

http://curtain.victorcoulon.fr

So, I decided to add a custom ruby method to the Sass::Script::Functions module. It’s incredibly elementary but maybe it’ll help someone :)

So, here is the code. You can put it in your config.rb for example.

module Sass::Script::Functions
    def getRandomColor()
        Sass::Script::String.new("#%06x" % (rand * 0xffffff))
    end
end

Usage

@for $i from 1 through $len {
    .item-#{$i} {
        background:getRandomColor();
    }
}

git shortlog -s -n 

It displays an ordered list of contributors to a GIT repository by their number of commits.

Indeed, after finishing the book Response Web Design from A Book Apart where the author proposes to use this type of grid, I must say I was convinced by this flexibility. And I think that I am not alone.
Just look at the number of frameworks using this kind of grid (Foundation, Tiny Fluid Grid, Fluid960gs…)

After some hours of development to obtain optimal results based on the guidelines of my agency, I was surprised to notice a very annoying display bug on my Safari.

Well… Did I make a mistake in my calculations?
After checking, no. Moreover, the rendering in Firefox is perfect! So, I started to do some research on google. And I came across the article by Chris Coyier dating from August 2010 and explaining the origin of this bug. It would seem that this bug is a problem of rounding. In fact, an issue for this problem is open in the WebKit bug tracker since January 2006!

What? 2006?

Amazement, this problem is known and uncorrected for 6 years. I don’t blame WebKit teams, but I’m particularly surprised by the fact there are a lot of CSS frameworks based on this kind of grid whereas the result is visually completely distorted.

Example in Foundation, the brilliant CSS framework by Zurb.

I seriously think that teams should work again on this issue in these times of “responsive design”. There must be an impressive list of websites that uses this kind of grid. And many of them are visually distorted compared to the appearance that they really should have.
OK, I am a bit fussy, and we can certainly override this problem. But still!

Till then, a fix?

Anyway, I needed to find a solution for my generator!
After some research, I learned that OOCSS -a project from Nicole Sullivan- used this type of grid and a fix for WebKit. In fact, OOCSS uses a class “last” that it’s not floated. The trick forces the last column to expand out like a table cell and consumes the remaining space, eliminating the gap.

I took this snippet of code and I modified it slightly. It seems unnecessary to add a class on the last column because WebKit understands the pseudo-class :last-of-type.
I also writing a code readable only by WebKit browsers. (Safari 3 + and Chrome1 +)

@media screen and (-webkit-min-device-pixel-ratio:0){
    .row>.column:last-of-type{
        display: table-cell;
        float: none;
        width: auto;
     }

    .row>.column:last-of-type::after {
        content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
        visibility: hidden;
        clear: both;
        height: 0 !important;
        display: block;
        line-height: 0;
    }
}

I’ll let you judge by yourself in your favorite WebKit browser! Here the version without the trick, andhere a version which contains this fix.

Anyway, hopefully this bug will be fixed soon!

Edit: (January, 7th 2012)
I had these interesting feedbacks on Twitter. So I decide to them share with you.

@_victa je sais pas si t’as vu mais j’ai fait quelques test tout simple sur le % et les résultats parlent d’eux mêmes guillaume-demesy.fr/percentage

— Guillaume DEMESY (@magsout) January 6, 2012

And Ethan gave me the address of an old article explaining plainly the situation.

@_victa Lovely! You might also check out @jeresig’s article from *2008*: ejohn.org/blog/sub-pixel… Frustrating that it’s still a problem.

— Ethan Marcotte (@beep) January 4, 2012

View video example

View demo

Try a live example here or grab the code on github.