Archive pour la catégorie ‘Notes à moi même’

Après pas mal d’essais et de dépatouillage, j’ai enfin compris comment faire. Yeah!

Voila quelques mois que je voulais tester LESS, un système (en Ruby) qui permet d’utiliser des variables et l’héritage en CSS. On a notre belle css clean pleine de variables, on la compile et paf! Voila notre css générée utilisable par tous les browsers. Cool, non?

Sur papier, oui, par contre en pratique… Je me suis pris la tête sur l’install, pas moyen d’accéder au repository avec les gems pour prendre toutes les dépendances… Après quelques heures de recherche, j’ai laissé tomber.

Mais aujourd’hui, voila qu’on me cause de SASS, une technique similaire mais beaucoup plus complète, que je pourrais utiliser sur le nouveau projet Belgacom. Rebelotte, on file sur le site de Ruby, on installe avec le one-click installer, on teste, pas moyen d’installer une gem ^^Après quelques recherches, je tombe sur le repository principal rubygems.org où ils proposent un installeur différent – et plus récent – RubyInstaller, j’installe et ça marcheeeeeeuuuuuuuh! Prise de tête finie.

Alors, pour installer SASS:

1. Installer Ruby via le RubyInstaller (j’ai installé la version 1.9.1) rc1
2. Lancer une ligne de commande avec ruby (disponible depuis le menu démarrer)
3. updater l’utilitaire, pas obligatoire mais plus propre…
   [codesyntax lang="bash"]

   gem update --system

   [/codesyntax]

4. installer la gem haml (aussi un projet intéressant que je vais m’empresser de tester), qui contient SASS
   [codesyntax lang="bash"]

   gem install haml

   [/codesyntax]

5. C’tout c’est fini.

Dans un prochain article, comment utiliser SASS avec Eclipse/Aptana. Je m’empresse de convertir OOCSS en SASS pour voir comment ça marche.

Oui, j’utilise souvent le terme « empresser » mais on s’en fout…

Je bosse de plus en plus avec un framework CSS appelé OOCSS, cet article est, je pense, le premier d’une longue série sur ce framework.

J’ai rencontré un problème sous Opera 10 avec la classe lastUnit: le bloc se mettait en dessus plutôt qu’en fin de ligne, comme prévu. La solution est toute simple, il faut rajouter un « overflow: hidden » dans le sélecteur .lastUnit:after dans le fichier grids.css (à la ligne 3, dans la version que j’ai). Normalement ce bug est résolu à partir de la version 085dfa8

Quand tu assigne un event via un addEventListener en JS dans un objet, et que tu refais un call à l’objet (par exemple pour raffraichir le content des selectboxes), supprime l’event et redéfini le, sinon, pour une raison X ou Y, il prendra en compte l’état des variable lors du premier call, pas celui des variables réinitialisées…

Correctement en tout cas, si php.ini n’a pas été dupliqué dans le dossier du CGI…

Na na.. Tss…

Bon quand, comme moi, il vous arrive de devoir déployer des sites, checker des images, et tout et tout et que vous bossez avec eclipse (ou un fork genre Zend Studio ou Aptana) il vous arrive souvent de vouloir voir le fichier selectionné dans l’explorateur sans devoir remonter toute l’arborescence. C’est pour quoi je vous propose de créer un script qui le fera pour vous.

1. Ouvrir le menu des « external tools » (l’icone du menu: ) et en selectionner « External Tools Configuration ».
2. Vous arrivez à un menu du genre:
   
3. Cliquez sur le bouton en haut à gauche pour créer une nouvelle commande.
4. Donnez lui le nom que vous voulez
5. Dans location mettez « ${env_var:SystemRoot}\explorer.exe »
6. Dans arguments mettez « /select,${resource_loc} »
7. Cliquez sur Run pis c’est bon, ça marche (bon, vous l’aurez compris, vous devez avoir une sélection dans eclipse, sinon ça marche pas)

Pour le réutiliser, rien de plus simple: cliquez sur le bouton (ou faites comme moi, assignez lui un raccourci clavier via les préférences)…

Avant, pour accéder au réseau Belgacom, je devais créer une nouvelle interface réseau dans Windows, la linker à ma VM et ensuite faire un pont entre ma carte réseau et la nouvelle interface. Un poil tricky à capter la première fois.

Par contre depuis la version 2.1.0 c’est plus simple mais bon, ils préviennent pas des changements alors j’me dit ça y’est Vista fait encore chier. Ca fait deux mois qu j’essayais même plus de comprendre mais aujourd’hui, pas de machine avec IE6 non utilisée. Google étant mon meilleur ami, j’ai trouvé comment faire: il suffit de configurer l’adaptateur en « Interface Hôte » et de selectionner la carte auquel il aura accès. Easy…

Enfin bon, 2 mois sans VM c’est long quand même…

Retient cette ip de merde ^^

Je viens de trouver un bug que j’ai maintes fois résolu mais j’oublie à chaque fois la solution. Je la note donc ici.

Bug

j’ai le code suivant (juste pour la demo, il n’a rien de passionnant):

<style type= »text/css »>
p{margin: 10px; padding: 10px}
.fixedHeight{ height: 150px;}
.scrollable{overflow: auto}

.positionnedItem{position: relative; background: red}
</style>

<div class= »fixedHeight scrollable »>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum. Fusce tincidunt ornare lorem. Mauris euismod volutpat ligula. Pellentesque mattis porta libero. Praesent molestie dapibus nunc. Nulla nibh. Pellentesque sit amet turpis. Aenean neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quis tellus a ante tincidunt lobortis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum. Fusce tincidunt ornare lorem. Mauris euismod volutpat ligula. Pellentesque mattis porta libero. Praesent molestie dapibus nunc. Nulla nibh. Pellentesque sit amet turpis. Aenean neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quis tellus a ante tincidunt lobortis. </p>
<p class= »positionnedItem »>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum. Fusce tincidunt ornare lorem. Mauris euismod volutpat ligula. Pellentesque mattis porta libero. Praesent molestie dapibus nunc. Nulla nibh. Pellentesque sit amet turpis. Aenean neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quis tellus a ante tincidunt lobortis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum. Fusce tincidunt ornare lorem. Mauris euismod volutpat ligula. Pellentesque mattis porta libero. Praesent molestie dapibus nunc. Nulla nibh. Pellentesque sit amet turpis. Aenean neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quis tellus a ante tincidunt lobortis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum. Fusce tincidunt ornare lorem. Mauris euismod volutpat ligula. Pellentesque mattis porta libero. Praesent molestie dapibus nunc. Nulla nibh. Pellentesque sit amet turpis. Aenean neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quis tellus a ante tincidunt lobortis. </p>
<p class= »positionnedItem »>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum. Fusce tincidunt ornare lorem. Mauris euismod volutpat ligula. Pellentesque mattis porta libero. Praesent molestie dapibus nunc. Nulla nibh. Pellentesque sit amet turpis. Aenean neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quis tellus a ante tincidunt lobortis. </p>
</div>

Vous pouvez tester, ça ne scroll pas (et ils apparaisent hors du container aussi). La démo est ici

Solution

La solution est toute simple: remplacer la ligne:

.scrollable{overflow: auto}

par

.scrollable{overflow: auto; position: relative}

Beaucoup de gens parlent des programmes qu’ils utilisent couramment, je trouve que c’est une bonne idée, donc je cède au mouvement…

1. Aptana Studio
   Je l’utilise pour la découpe HTML/CSS ainsi que pour le développement Javascript, PHP et python. C’est un éditeur basé sur Eclipse donc son utilisation en est assez proche. Il gère Subversion, GIT  et CVS comme gestionnaires de sources, il gère également FTP et SFTP pour faire une modif vite faite en ligne. Que demander de plus???
2. Photoshop
   Les designs étant crées dans photoshop, je les découpes donc dedans. Que dire de plus, on ne le présente plus…
3. Firefox 3
   Le navigateur par excellence, je teste ma découpe dedans, une fois qu’elle fonctionne, je passe sous IE6. Il gère pas mal de plugins intéressant qui feront l’objet d’un article plus tard…
4. Internet Explorer 6
   Ze grosse daube casse couille et une perte de temps… Il ne sert à rien à part à me foutre en rogne dès le matin.
5. Virtual Box
   Lui par contre une vraie perle, me permet de lancer une machine virtuelle avec XP pour pouvoir tester IE7 au bureau (XP avec IE6 installé) et IE6 sur mon portable (Vista avec IE7). Par contre ça devient tricky quand on passe par des proxys comme chez Belgacom… Je traiterai de cette méthode dans un prochain article…
6. Internet Explorer 7
   Bon, pas grand chose à dire, mieux qu’IE6, moins bien que Firefox… Quand même emmerdant.
7. Winamp
   Siffler en travaillant… Ben waip, je travaille mieux en musique, en plus il gère mon iPod, la classe…
8. Fireworks
   Des designers inspirés préfèrent Fireworks, moi je préfère, la découpe est plus simple, il est plus orienté web. De plus je l’utilise pas mal pour faire de petites découpes ou des recadrages de photos pour le site de LBi.
9. Lightroom
   Je l’utilise pas mal pour le développement des RAW de mon 450d. Vu que je prends pas mal de photos des événements LBi ou bien des nouveaux arrivant, voire pour les IHateBaloo je l’utilise relativement souvent…
10. Outlook
    Bon, ben faut bien se tenir au courant des dernières rumeurs dans la boite hein

Et nan, Fab, je ne suis pas un Ninja…