Archive pour la catégorie ‘Boulot’

Il y a quelques mois, j’ai du cleaner une veille CSS, juste après un redesign. On laissait la vieille liée parce que elle contenait toujours des styles pour quelques pages, mais bon, elle était illisible, donc comment faire pour la nettoyer? C’est là qu’une extension Firefox super bien foutue vient à point: Dust-Me Selectors.

Oui mais bon, ceux qui existent te font page par page, un poil casse-c******

Mais pas celui ci, on peut faire page par page mais également pour un site complet, via une sitemap.xml. Bon, ok, ça prends une plombe mais ça marche…

Ok, ca a l’air bien. Mais quid des hacks utilisés pour IE et consorts?

Ah, ah, elle le gère et elle va même voir dans les css avec commentaires conditionnels…

Et pan, c’est de la bombe et je vous la recommande vivement…

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

Yippe, online!! Je ne compte même plus le nombre de jours passés dessus mais il est enfin en ligne. J’en suis fier mais bon, je vois quand même quelques points a améliorer…

L’URL est: http://www.givekidsachance.be et il tourne sous CakePHP…

Bon maintenant, j’apprends le Zend Framework

Ne pas…

…dormir!

Petite équation sur les deux dernières semaines:

Une moyenne de 18h de boulot par jour (j’ai compté, record battu:  36h sans dormir, mais j’ai failli, j’ai pieuté 20 minutes sur un banc, j’aurais dépassé les 50 sinon…) + nuits de +/- 5h (je compte pas les 2 nuits blanches (une pour bosser, une pour discuter) + une semaine de stage avec des excités du clavier = un manque à gagner en dodo de près d’un mois (6 avec mon rythme actuel).

Je capte pas pourquoi, mais je pète la forme ^^

Rho, faut quand même que je vous cause de ces excités: on a vu le RMI en Java, chose que j’ai apprise en même temps qu’eux… Je vous raconte pas la galère, voir des concepts relativement complexes avec les avancés et continuer à tenter de faire capter les bases de l’algorythmique aux débutants. Surtout que quelques avancés se sont dit que vu qu’ils avaient fini le chat en ligne de commande ils allaient lui faire une interface, y’en a ça allait, on leur avait appris ça l’année passée par contre certains, qui étaient en débutant l’année d’avant, il fallait leur apprendre ça en plus ^^ J’ai peur! A quoi on passera l’année prochaine?? Me manque ce jeu des allumettes des débutants, il était si facile…

Quelques perles entendues pendant le stage:

• Faut que je me dépèche je suis pressé de scripter
• A deux heure du mat’ j’en avais marre de vous attendre, j’ai arrêté de coder
• Moi j’ai commencé à jouer à counter-strike à 5 ans
• Ca ne fait que deux semaines que je sors de chez moi, avant je rentrais des cours et je me connectais…

et au retour de l’auteur des deux premières, son statut: « Après 120h de idle time me revoila ».

Hé, les jeunes, y’a une vie en dehors du Web, sortez de chez vous, goutez au soleil, aux oiseaux qui chantent et au vent qui bruisse dans les arbres, c’est bien meilleur que le sale éclairage de vos écrans et des néons de vos PCs…

Je suis de la génération Web, un fils du Web je pensais, mais là ça a atteint des sommets, comment peut on les qualifier? J’ai aussi passé des heures devant mon écran pour faire des sites et tenter de combler ma soif de connaissance mais là je suis battu à plates coutures… On m’appelle Geek Master (si, si, même dans des documents officiels, au lieu de ma fonction d’Intégrateur) mais je pense que ceux qui me surnomment comme ça n’ont jamais rencontré les énergumènes que je croise ^^

Enfin soit, Give Kids a Chance est bientôt en ligne (mardi pour être exact) et je viens d’avoir les chiffres exacts de la campagne média: 800.000 affichages par jour pendant un mois et demi contre 1.000.000 pour une campagne complète pour Touring… Je flippe, je foire, je butte LBi, perds ma place et me grille à vie… Coté positif, j’aurai enfin du temps pour moi…

Dernière chose, depuis 6 mois tout juste, le 10 était une sale journée mais maintenant j’ai de bons souvenirs pour remplacer les anciens et ça c’est une très bonne chose, j’éviterai peut être de me noyer dans le travail pour ne plus y penser…

Suite à une bonne engueulade au bureau, pas grand chose, une PM qui me soutient que les sites Flash que son flash developper miracle livre n’utilisent plus le script Macromédia de détection du flashplayer, mes fesses ouais!! Enfin bon, c’pas comme si Adobe le déconseillait (lisez la note, qu’on rigole)… Sur ce je modifie la page pour faire un truc que l’Art Director du projet demandais et j’en profite pour corriger le truc, je l’envoie…

…et me fait clouer sur la croix – figurativement parlant, s’entend – parce que je critique. Houlala, je critique!!! Quelle horreur! Mon Dieu quoi, je passe mes journées à me faire critiquer par tout ceux qui ne comprennent pas ce que je fais, je suis toujours vivant – et toujours aussi hargneux – et, selon moi, la critique est ce qui permet d’avancer… Enfin, je le fustige le pauvre (flasher), mais il n’a rien fait, j’ai la haine de m’être fait engueuler parce que je voulais aider ^^

Manque de proactivité? Mes fesses, si c’est pour ce faire tapper dessus, clair qu’on a envie d’être proactif…

Enfin, soit, j’arrête de râler et en viens au corps de cet article: Comment modifier les templates de Flash pour avoir un code clean?

Tout simple:

1. Créez la base de votre page, un beau template tout neuf, standard, qui intègre le flash via SWFObject en utilisant la méthode dynamique (parce que vous le valez bien). En voici un (il est fini)
2. Allez dans UserProfile\Local Settings\Application Data\Adobe\Flash CS4\langue\Configuration\HTML\ (Les macs addicts, je vous laisse chercher, z’avez qu’a utiliser un OS décent )
3. Copiez votre fichier (jusque là, rien de compliqué)
4. Commençons par dire à flash que c’est un template. Pour ce faire ajoutez ces quelques lignes au sommet (avant la doctype)
   

   $TTFlash Only using SWFObject
   $DS
   Display Adobe SWF file in HTML with SWFObject
   $DF

   Kécecé ce truc?Pour faire simple, flash utilise des variables de deux lettres commençant par $. (pour info vous pouvez échapper le $ en faisant \$), $TT signifie Template Title et sera repris dans la liste de templates dans l’onglet HTML de la box de publication; $DS dit que c’est le début de la description et $DF la fin… Easy…

5. Maintenant que vous avez compris les bases, m’en voulez pas mais j’ai pas toute la vie, je vous mets le tableau avec les variables (lâchement pompé chez Adobe):
   

   Variable	Affichera
   $TT	Titre du template
   $DS	Début de la description du template
   $DF	Fin de la description
   $T1	Titre du SWF
   $TL	Titre du SWF pour les moteurs de recherche (sérieusement, ça foire chez moi, peut être les données IPTC, mais bon, j’ai pas pris le temps de tout tester…)
   $DC	La description pour les moteurs de recherche (même chose que plus haut)
   $MD	Les métadonnées sous forme de XML (bis repetitat placent)
   $WI	Largeur
   $HE	Hauteur
   $MO	Me renvoie la même chose que $T1
   $HA	Alignement (une des options de l’onglet HTML)
   $LO	Boucle? (une des options aussi, vois pas trop l’intérêt avec SWFObject, comme beaucoup d’options)
   $PO	Paramètres sous forme <param />
   $PE	Paramètres pour <embed />
   $PL	Auto play? (option)
   $QU	Qualité (option)
   $SC	Echelle (option)
   $SA	Salign (de quoi??)
   $WM	Wmode (option)
   $DE	Devicefont (de quoi?? une option true/false)
   $BG	Couleur d’arrière plan
   $MT	Movie text (area to write movie text)
   $MU	Movie URL (location of SWF file URL)
   $IW	Largeur de l’image quand on ne spécifie pas le type
   $IH	Hauteur de l’image quand on ne spécifie pas le type
   $IS	Nom de l’image quand on ne spécifie pas le type
   $IU	Nom de l’image map
   $IM	Zones de l’image map
   $QW	Largeur du fichier mov
   $QH	Hauteur du fichier mov
   $QN	Nom du fichier mov
   $GW	Largeur du GIF
   $GH	Hauteur du GIF
   $GN	Nom du GIF
   $JW	Largeur du JPEG
   $JH	Hauteur du JPEG
   $JN	Nom du JPEG
   $PW	Largeur du PNG width
   $PH	Hauteur du PNG
   $PN	Nom du PNG

6. Et voila, y’a plus qu’a choisir le bon template, filer les options (ou pas) et exporter. Je signale tout de même que certaines options sont inutiles et génèrent un code invalide selon le W3C et comme le W3C est beau, grand et gentil, moi, je l’écoute…

A la revoyure…

PS: dans mon fichier, j’ai utilisé d’autres variables: $FV.$JR.$NR qui renvoient la version minimum du flash player…

PS2: Pour plus d’infos sur les variables: http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7bcca.html

Après un an de boulot, c’est online!

Y’a mon nom dans pratiquement tous les scripts et CSS, c’est la classe Bon, ok tout le monde s’en fout mais ça flatte l’ego…

On passera quand même sur quelques abérations mais on m’a interdit de taper (au sens propre) sur leurs ITs pour leur faire comprendre qu’ils sont le Mal, qu’ils bafouent l’utilisateur final par leur mauvaises pratiques et ignorent ouvertement la Nétiquette…

Enfin, soit, nul n’est parfait et c’est vrai que j’attends des autres presque autant que ce que j’attends de moi mais, là, je trouve que ce n’est pas exagéré…

Et tout ces détails qu’il a fallu peaufiner, ils sont où? Tellement de temps à se faire taper sur les doigts pour 1px de décalage, nos découpes n’ont même pas été intégrées. Touring ou l’art de faire du vieux avec du neuf. Enfin je ne jette pas là pierre à l’ensemble de Touring, c’était cool de bosser avec certain(e)s mais par contre, le service IT (enfin ceux qui étaient mes contacts) quels branques!! Oui, vous lisez peut être ces lignes, oui j’écris ça sous le coup de la colère, oui je regretterai peut être ces lignes un jour, mais par contre JAMAIS je ne vous considérerai comme des personnes compétentes, vous avez trop posé de questions sur des détails en passant systématiquement à coté des gros problèmes et en renvoyant toujours la faute chez nous alors que vous ne

• chargiez pas les fichiers
• utilisiez une ancienne version
• ou mieux: ne copiez même pas les fichiers sur le serveur…

Si je vous ai dit d’utiliser Winmerge pour tracer toutes les modifs, ce n’est pas pour rien, vous chicaniez sur les détails et on perdait tellement de temps pour le faire à votre manière et qu’on ne pouvais plus tout lister… Et en plus, se faire jeter à 17h parce vous devez partir!

« - Hé, il est 17h05, c’est le dernier bug, hein! J’ai fini à 17h normalement, je suis là depuis un peu avant 10h! »

Et quoi, mes fesses, c’est du poulet? Je me fais des 10h -> 20h pratiquement tous les jours pour tout boucler alors que tu te plains de surmenage parce que tu dois rester 5 minutes en plus ^^

Crétin, va mourir et laisse les pros travailler en paix sans que tu ne te ridiculise à chaque phrase, ça nous fera des vacances – et un beau site.

*Baloo frustré*

Yipee, suite à l’article d’hier, j’ai refait toute l’appli ce soir, vachement simplifié (surtout les anims) et c’est boooooooooooon…

Alors les stats (ben waip, faut bien se vanter de ses miracles):

• Javascript: 370 lignes (dont seulement 40 que j’ai pu reprendre sur les 364 d’hier)
• HTML: 140 lignes (par rapport à 330 lignes). Ben waip, design, anims et copy simplifiés, ça raccourci vachement le code…
• CSS: 7 lignes (hier: 96 ^^)

Baloo content

Me reste plus que l’intégration du copy des différentes solutions, comme un con, j’ai oublié de le reprendre ce soir…

Pour la première fois de ma vie, j’ai fait un script qui plante! Bon ok, ça c’pas la première fois, par contre le fait que le script en soit ne plante pas mais qu’il fasse planter IE6 (du genre écran bleu => dépassement mémoire) et IE7 (erreur fatale d’IE) ça faut déja le faire. Me doutais bien qu’un script aussi complexe que celui là allait faire chier mais bon… Pour dire, même le « proof of concept » que j’ai fait l’année passée pour ING était moins complexe, pourtant ceux qui l’ont vu (et compris) peuvent témoigner, c’était pas tout cuit…

Enfin soit, certaines « mauvaises langues  » diront que pour pas changer, je ne fais que des trucs qui tournent sous Fx mais bon, d’habitude, après une optimisation comme celle que je viens de faire, ça ronronne et tourne pile poil au lieu de seulement passer de l’écran bleu au freeze pour finir par une animation à +/- 2fps… C’est moche et je sais pas quoi faire. J’me pends?

Tout ça pour dire que je ne sais pas si je dois me sentir flatté d’avoir atteint des sommets de complexités dans mon code ou frustré de pas savoir l’optimiser plus que ça…

Morning: @ Belgacom Towers working on « Belgacom Employee Privilege Programme » & « Belgacom Partners Retail »

Afternoon: @ LBi working on Sanitec’s new Website

Night: @ LBi working on Touring’s Budget Wizard

What a busy day, and you know what? I like that, I really like my job!