Développement Web Ruby
par Sylvain CLAUDEL

Derniers posts

Comment passer un hash de paramêtres à la méthode can de CanCan

Date d'édition 2011-09-15 à 10:52

Vous connaissez certainement CanCan le système de gestion des droits pour les applications rubyonrails. Can admet 2 paramêtres fixe :

- Le premier est une action ou un alias de plusieurs actions (:index, :show, :manage)

- Le deuxième est la ressource, une classe, ou un symbole correspondant à un controller.

can [:index, :show], Product

On peut également passer à CanCan des paramêtres optionnels pour filtrer les droits en fonction de l'utilisateur (ici si le créateur du produit et l'utilisateur est si le produit est disponible) :

can [:index, :show], Product, :user_id => user.id, :available => true

Dans certains cas, par exemple quand les conditions peuvent être factorisées, il peut être intéressant de passer un hash en utilisant varargs, voici comment faire :

conditions = [{ :user_id => user.id, :available => true }]

can [:index, :show], Product, *conditions

Voir l'article avec l'application des varargs pour ActiveRecord : Varargs en ruby pour ActiveRecord

Les Antipattern : Alors lesquels utilisez-vous ?

Date d'édition 2011-09-07 à 16:53

Voici un article de wikipedia très intéressant, il concerne les anti-patternshttps://fr.wikipedia.org/wiki/Antipattern

Bien que tout à fait sérieux l'article m'a bien fait rire ! Je suis un spécialiste de l'ancre de bateau, mais rassurez-vous je me soigne...

10 astuces d'intégration html css

Date d'édition 2011-09-04 à 01:13

Voici quelques petites astuces  pour les intégrateurs web

1) Z-index ne fonctionne pas :

z-index ne fonctionne que sur les éléments positionnés (Ah ok je fais quoi alors : => position:relative; )

2) Z-index 20 au dessus de z-index 100 pourquoi ? :

Il y a certainement des contextes d'empilement différents (un parent différent avec un z-index).

3) Clear ça sert à quoi ?

clear : left / right / both : Il sert à faire un espèce de retour chariot à gauche / droite / les deux.

4) Mon bloc prend toute la place pourquoi ?

Justement parce que c'est un bloc (display:block;)... mettre display:inline si vous voulez qu'il prenne la place qu'il a besoin.

5) Je veux fixer les dimensions de mon élément, mais c'est un display:inline.

C'est pour cela qu'il existe la valeur de la proprété display : "inline-block".

6) Vertical-align ne fonctionne pas :

Vertical align ne fonctionne que sur les cellules de tableau, donc display:table-cell; ou display:table-row;

7) Je souhaite que mes deux blocs cote à cote aient la même hauteur, et si possible non fixé : 

Il faut les mettre en display:table-cell; et si possible mettre le conteneur parent en table-row.

8) Quand je change les paddings mon bloc change de taille :

Oui les padding ne comprenne pas la taille du bloc (content-box), il faut donc spécifier : box-sizing:border-box; maintenant les bordures et le padding sont inclus, les margins quand à eux sont toujours exclus.

9) Un élément de type bloc prend width:100%; par défaut !

10) N'oubliez pas le reset css (https://meyerweb.com/eric/tools/css/reset/).

En espérant que ça puisse servir à quelques uns.

Le métier de l'intégrateur html

Date d'édition 2011-09-03 à 22:36

Voici une description illustrée du métier d'intégrateur web, ou développeur front office. J'ai fait la vidéo sans me préparer, c'est pour ça que des fois je me casse la tête sur certains trucs. Elle dure 1h (en réalité il a fallu 3 heures.) Chargez la vidéo en HD et plein écran pour bien voir.  


Intégration html5 css3 par rivsc

J'ai fait un tout petit peu de JS pour dire que j'aurais vu tous les aspects de l'intégration. Mais bon il y a d'autres choses à faire (Tester sur les autres navigateurs/versions, S'intéresser aux interfaces riches FLASH / AIR / SILVERLIGHT, faire du JS un peu plus évolué avec des plugins jquery par exemple, utiliser les CSS transitions, utiliser les font-face, ...).

Le découpage est fait à la truelle, normalement on fait des png avec la transparence, comme ça on peut changer le background comme on veut sans tout retoucher.

Après la fin de la vidéo, J'ai finalisé l'intégration un peu plus proprement (l'élément actif du menu qui passe au dessus, la couleur de fond, les transitions css pour le menu, le design fluide complet).

Ressources utilisées pour ou pendant la vidéo :

Netbeans IDE gratuit et open-source pour php/html/css/js/ruby : https://fr.netbeans.org/

Logiciel pour les screencasts : gtk-recordMyDesktophttps://recordmydesktop.sourceforge.net/about.php

Ubuntu (10.04) toujours pas upgradé le portable... : https://www.ubuntu.com/download/ubuntu/download

Gimp pour les découpages des éléments de la charte graphique (version de dev) : https://www.gimp.org/

Un navigateur internet : Chromiumhttps://www.chromium.org/

Le plugin pendule pour la capture de couleur (colorpicker) et mesure des éléments (ruler) : https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi?hl=fr

Le site internet pour faire ses gradients css3 sans se casser la tête colorzillahttps://www.colorzilla.com/gradient-editor/

Liste des selecteurs CSS w3schoolshttps://www.w3schools.com/cssref/css_selectors.asp

S'il manque des trucs, laissez des commentaires.

La charte était une démo sur un site de template payant. Donc je ne laisse pas les sources. Si vous êtes graphiste ou que vous avez les droits complets sur une charte graphique, je veux bien l'intégrer et laisser les sources , contactez-moi !

Dual screen virtuel sur un seul écran physique

Date d'édition 2011-08-27 à 23:05

Ca me trottait dans la tête depuis un bon bout de temps. J'ai comme la plupart des personnes un écran wide. Et ça me désole de perdre de la place à gauche et à droite lorsque je code ou que je surfe sur le web...

Alors j'ai cherché pendant longtemps comment faire pour simuler un dual screen sur un seul écran et je suis tombé sur quelques posts traitant de ce sujet. La bidouille consiste à faire croire à Xinerama (la lib qui s'occupe du dual screen) que l'on a deux écrans physiques.

Voici le code que j'ai tapé dans le terminal (sur ubuntu 10.10 dans une VM) :

sudo apt-get install aptitude
sudo aptitude install build-essential
wget https://web.archive.org/web/20090218233954/https://ktown.kde.org/~seli/fakexinerama/Xinerama.c
sudo aptitude install libx11-dev libxinerama-dev
sudo gcc -O2 -Wall Xinerama.c -fPIC -o /usr/local/lib/libXinerama.so.1.0 -shared
cd /usr/local/lib
sudo ln -s libXinerama.so.1.0 libXinerama.so.1
sudo ln -s libXinerama.so.1 libXinerama.so
sudo ldconfig

Ensuite il faut créer un fichier .fakexinerama dans votre home, avec la syntaxe comme suit : première ligne le nombre de moniteurs virtuels

2

ensuite chaque ligne représente un moniteur virtuel (départ de l'écran virtuel x et y (0,0) étant en haut à gauche de l'écran physique, puis la taille de l'écran virtuel largeur hauteur)

0 0 400 600

400 0 400 600

Ecran 800x600 coupé en deux dans la largeur donc 2 écrans virtuels 400x600, le deuxième étant décalé de 400 pixels à droite du premier) /!\ Attention la syntaxe est très stricte. Le fichier dans son ensemble :

2

0 0 400 600

400 0 400 600

Hop déconnexion et reconnexion et c'est parti ! Bon dans la vidéo ci-dessous j'ai testé dans une virtualbox donc je sais pas ce que ça fait avec un vrai dual screen (avec une TV par exemple).

Voici ce que ça donne sur l'écran :

Ressources et liens traitant du sujet : 

https://www.tiramiseb.fr/2011/02/21/ecran-ultra-large-ubuntu-et-division-par-deux/

https://movingparts.net/2008/10/03/multi-monitor-setup-on-a-single-physical-head-now-better/

https://forum.ubuntu-fr.org/viewtopic.php?pid=5893341

Merci à movingparts.net et kamui57 de m'avoir trouvé le fichier Xinerama.c et merci à seli (Qui est-ce ?) pour avoir écrit fakeXinerama

Développement ruby et geekeries - rivsc