Victor

Neat Theme for Tumblr

Sat, 28 Apr 2012 17:36:02 +0200

Check out my first theme written for photographies Tumblr.

Responsive Design Bookmarklet

Wed, 28 Mar 2012 11:48:00 +0200

For some time now, I’m a big fan of the Window Size Bookmarklet by Joss Crowcroft. This bookmarklet allows you to display the X/Y size of the viewport in the left corner of your browser. It can be very useful for debugging some CSS3 media queries.

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.

Introducing Glisse.js

Mon, 13 Feb 2012 19:04:00 +0100

One week after Curtain.js I’m glad to announce the release of my latest plugin called “Glisse.js”.

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 ;)

Introducing Curtain.js

Fri, 10 Feb 2012 16:31:00 +0100

I’m happy to announce my last personnal project. This is a jQuery plugin for creating an unique page transitioning system.

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

Generating random color in Sass

Tue, 07 Feb 2012 18:33:00 +0100

I needed to generate HTML elements which had random background colors with Sass. Unfortunately, it’s absolutely impossible.

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();
    }
}

The media object SCSS mixin

Mon, 23 Jan 2012 12:11:00 +0100

If you are a up-to-date developer, I guess that you know the concept of “media object” used by several website included Facebook. If not, you must read this article by Nicole Sullivan.

I’m a grateful user of this concept, and I have written a Sass mixin which allows you to use the media object quickly in your projects.

@mixin media-object($margin:10px, $position: left, $formating-context: 'overflow', $media: '.media', $block: '.block') {
    @include pie-clearfix; // or extend a .clearfix class
    #{unquote($block)} {
        @if $formating-context == 'overflow' {
            overflow:hidden;
        } @else {
            display:table-cell;
            width:10000px;
            *width:auto;
            *zoom:1;
        }
    }
    #{unquote($media)} {
        float:$position;
        img{display:block;}
        @if $margin > 0 {
            margin-#{opposite-position($position)}:$margin;
        }
    }
}

Think flexibility!

Get a list of git contributors and sort by number of commits

Mon, 16 Jan 2012 12:38:00 +0100

I just discovered this fabulous git command via Jon Rohan

git shortlog -s -n

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

Percentage Bugs in WebKit

Tue, 03 Jan 2012 22:04:00 +0100

No later than a few days ago, at Octave & Octave, I had to make a grid generator in Sass which is fully responsive.
Rather than using a fixed grid as I usually do, I decided to create a fluid grid using percentages (calculated with the famous target / context * 100 = result).

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, and here 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.

Guillaume suggested me to see here the difference of calculation between differents browsers.
And Ethan gave me the address of an old article explaining plainly the situation.

Terminal tips: show/hide hidden files

Fri, 30 Dec 2011 17:34:00 +0100

Add the following code in your .bash_profile

# show/hide hidden files
hidden() {
  if [ "$(defaults read com.apple.finder AppleShowAllFiles)" = 0 ]
      then defaults write com.apple.finder AppleShowAllFiles 1
      else defaults write com.apple.finder AppleShowAllFiles 0
  fi
  killall Finder
}

Relaunch your terminal.
Now, you can just type hidden to show or hide your hidden files.

Simple jQuery gallery plugin using CSS3

Sat, 24 Dec 2011 13:29:00 +0100

I’m working on jQuery gallery plugin using CSS3 transitions. It will be responsive, lightweight and fully customizable.

View video example

Smooth animated tooltip

Sat, 17 Dec 2011 12:52:00 +0100

It’s a tooltip menu for a webapp that I’m working on. I’m using a bit of javascript to manage the events, and a lovely css3 transfromations to animate opening and closing. It’s works on all major modern browsers.

View demo

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

Path menu in pure CSS3

Fri, 16 Dec 2011 16:05:00 +0100

I’m fall in love with the new UI of Path. I really love the user interaction design like the “add menu”. So, as I’m a front-end developer, I tried to recreate the same thing on my browser.

Firstly, I posted a video of the effect on dribbble and now, I share my code.

View demo

An experiment in CSS

I made the choice to do this with only html/css3 and no images whatsoever. There is 0 line of javascript. I’m aware that you can do the same with a bit of javascript to be compliant with others browsers. But, It was not my goal :)

How was this made?

To calculate the coordinates of items and generate the animation, I used Sass+Compass. I used a math formula in order to add the items’s position on the arc of circle. So, you can add or remove items without rewrite the code. Finally, I generate a keyframe animation for each item. To be honnest, I had a lot of problems to use keyframes and Sass. It’s for this reason, that it’s only compliant with Webkit.

You can fork the source on github !

Follow me on Twitter! And ask any questions you want or send comments.