Bastien Donjon

Développeur web à Bordeaux

Monthly Archive: April 2013

Sunday

21

April 2013

0

COMMENTS

Installer Ruby 2.0 sur Centos 6 avec Ruby Version Manager (RVM)

Written by , Posted in Ruby

1) Installation de Ruby Version Manager (RVM)

RVM est une application qui permet d’installer et d’utiliser plusieurs version de Ruby sur une même machine.

# Installation des packages nécessaires
yum groupinstall "Development Tools"
yum install ntp
yum install zlib zlib-devel sqlite-devel

# Téléchargement et installation de RVM
bash -s stable < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer)
2) Vérification que RVM est bien installé. Si tous s’est bien passé vous devriez avoir “RVM is a function” comme résultat.
type rvm | head -1
3) Installation de Ruby 2.0
rvm install 2.0
# Utilisation de la version 2 par défaut
rvm use 2.0 --default
# Vérification de la version courante de Ruby
ruby -v

Votre environnement Ruby devrait être parfaitement fonctionnel

Tuesday

16

April 2013

0

COMMENTS

Moment.js : Le couteau Suisse pour travailler avec les dates en javascript

Written by , Posted in Javascript

A en juger par le nombre d’étoiles que Moment.js a recueilli sur GitHub, vous le connaissez peut être déjà. Mais pour ceux qui ne l’ont pas, Moment.js est une librairie JavaScript bien documentée pour l’analyse, la validation, la manipulation et le formatage des dates.

La librairie peut s’utiliser dans le navigateur ou Node.js et prend en charge de nombreuses langues.

Voici quelques exemples d’utilisation :

moment().format('MMMM Do YYYY, h:mm:ss a');
// => April 16th 2013, 5:16:17 pm
moment().format('dddd');
// => Tuesday
moment().format("MMM Do YY");
// => Apr 16th 13
moment().format('YYYY [escaped] YYYY');
// => 2013 escaped 2013
moment().format();
// => 2013-04-16T17:18:04+02:00

La bibliothèque ne pèse que 5,5 kb et a récemment atteint la version 2.0, donc si vous n’avez pas regardé depuis un certain temps maintenant c’est le temps de vous mettre à jour.

Wednesday

10

April 2013

0

COMMENTS

Colonnes fixes dans un site web de type “Single page”

Written by , Posted in css

Le web se voit de plus en plus influencé par la conception ergonomique des applications mobiles. On parle notamment de la technique de conception “Mobile first” et de l’approche “single page”.

Qu’est-ce que l’approche “Single page” ?

Rien de bien compliqué. C’est un site qui n’a qu’une seul page … et où seulement une partie de celui-ci est mis à jour selon les actions de l’utilisation. Niveau ergonomie, il n’y a pas de scroll général mais éventuellement des scrolls sur des parties du site.

Le layout

Je vous propose de monter un layout composé d’un header fixe, d’un footer fixe et de 3 colonnes qui complètent la place centrale restante.

html :

<div id="header"></div>
<div id="colonnes">
    <div>1</div>
    <div>2</div>
    <div id="last">3</div>
    <div style="clear:both;"></div>
</div>
<div id="footer"></div>

css :

#header {
    background-color: yellow;
    height: 20px;
}

#colonnes {
    position: fixed;
    height: auto;
    top:20px;
    bottom: 20px;
}

#colonnes div{
    float: left;
    width: 100px;
    height: 100%;
    bottom: 0;
    margin: 0 10px 0 0;
    background-color: black;
}

#footer {
    background-color: red;
    height: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

body{
    height: 100%;
    padding: 0;
    margin: 0;
}

exemple