Archive pour la catégorie ‘Boulot’

She isn’t new, I’ve already posted it on Facebook but I really like it. Some days I think nobody understands me, not even the one I work with…

That’s maybe why I’m the lead of my small team…

Few weeks ago I wrote this article but I reserved the exclusivity for my job on our Intranet. Now I’ve decided to share it with you…

Lot of Integrators (or Frontend Engineers, as it’s the international name) think it’s just a normal page which is sended by mail. Please just STOP thinking that, that’s not a web page, it’s a mail! It’s very different since mails are parsed & « purified » by more layers than web pages (for « security reasons »):

Like you see it’s very different… And since Outlook 2007′s render engine is the one from Word (not IE anymore) wich doesn’t support other CSS than inline, just make tables…

Because lots of people talk better than me about that you could watch:

• Guide To CSS Support in email Clients
• Comment vous assurer que vos emails HTML s’affichent correctement et arrivent à bon port ?
• Email Design Guidelines

PS: I’m sorry for my bad english, I need to train myself so I’ll write more and more articles in english. Feel free to correct me

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…

Voila quelques mois que je fait la plupart de mes scripts de gestion en Python, cependant, hier après-midi soir (18h passée quand même) j’ai reçu a peu près 390 slides à redimensionner et renommer pour aujourd’hui 10h, heure du début de l’Assemblée Générale de Belgacom (je m’occupe de la rediffusion en direct et ondemand sur le web). J’me dit, pas besoin de script, photoshop le fera très bien pour moi… Mon cul waip, c’te daube m’estimait ce temps à 1h30, juste avant de planter ^^ et les rares qu’il a fait pesaient près de 1mo.

Donc j’ai lancé eclipse, installé PIL et yop la un p’tit script vite fait (bon ok, m’a quand même pris près de 2h à le faire) mais maintenant, je peux le faire tourner en 5 minutes (et lui il crashe pas au moins) et les slides au complet pèsent 3Mo avec une bonne qualité…

Me reste plus qu’a faire l’export de la db et la convertion en XML pour prévoir la version ondemand et c’est dans la poche…

Enfin, encore une raison de plus d’adorer python…

EDIT: Bon, fait chier, le lien juste au dessus plante pour l’instant mais si vous lisez bien c’est pas de la faute de python (oui je te vois venir avec tes gros sabots Fab), c’est un serveur qui réponds pas…

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

L’utilisation de fontes exotiques (qui ne sont pas websafe) est le combat de tout intégrateur, combien de designers n’intègrent pas une police « parce qu’elle est jolie » ou bien parce que « c’est dans les guidelines ». Enfin soit, je ne relancerai pas ce débat ici. Pour les intégrer, en attendant les CSS 3 et leur directive @font-face, il existe différentes techniques, avec leurs avantages et inconvénients, je n’en ai pas encore trouvée de parfaite, quoique…

La première technique et la plus simple (pas pour les fainéant comme moi par contre) est l’utilisation d’images => chaque texte est une image. Ici pas de problème de taille par contre relativement casse pied pour les navigateurs qui ne gèrent pas les images ou quand il faut modifier le texte.

La seconde technique est une variante de la première. On met le texte dans une police websafe puis le texte en image, par certaines techniques CSS on se débrouille pour virer le texte mais garder l’image visible. Top pour les navigateurs qui ne gèrent pas les images mais foireux pour ceux qui ne gèrent pas les CSS, le texte est doublé…

La troisième technique consiste à taper le texte dans une police websafe puis,via un script de type facelift, on remplace le texte par une image. L’avantage est que le texte est lu correctement par tous les navigateurs avec ou sans gestion d’images, juste que le design est foireux dans certains cas. Nécessite du Javascript (en même temps, à l’heure d’aujourd’hui, quel site n’utilise pas de Javascript pour des détails comme celui là). Dans le temps j’avais bossé sur un projet comme ça mais en Python (bein waip, il tournait sur mon serveur linux). Désavantage: l’utilisation du processeur pour chaque image (mais le caching est possible).

La quatrième solution est d’utiliser un flash qui contiendra la bonne police. La solution la plus connue est sIFR. Perso sIFR me file la gerbe, combien de problème je n’ai pas eu avec cette merde. En plus, je ne sais pas comment c’est maintenant, mais je devais créer un template par type de texte + le dupliquer en CSS pour si l’utilisateur n’avait pas Flash ou le Javascript activé. C’est pour ça que je dévelloppé mon propre machin avec jQuery et swfobject. jQuery récupère les infos couleurs et autres de la CSS alors que swfobject se charge de loader le flash et de lui passer les paramètres… Easy. Enfin bon, je suis quand même pas fan du flash… En plus c’est lourd.

La cinquième technique est assez récente et relativement efficace, même si toutes les fontes ne s’y prètent pas… Cela consiste à transformer le fichier TTF en fichier javascript utilisable par une bibliothèque bien particulière qui se chargera d’afficher le texte via le tag canvas des bons navigateurs ou VML sous la saloperie qu’est IE. La première bibliothèque est Typeface.js (qui marche bien, sauf pour certaines polices ou certains cas bien particuliers comme des tabs super complexes et auto-adaptatifs – merci Paul) et Cúfon qui vient juste de sortir (et que je n’ai pas encore eu le temps de tester) qui me semble bien prometteur…

Enfin soit, dès que j’ai le temps, je vous ponds un comparatif plus poussé sur ces différentes techniques et certaines de leur variantes…

Remarque importante: Je parlais ici de technique, il va de soi que pour les polices non redistribuables vous devez bannir certaines techniques. A discuter avec quelqu’un d’autre que moi, la légalité et moi, on est pas potes…

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…

Boah, hier soir j’ai bossé jusque 23h30. 00h10 à la maison. Aujourd’hui je suis claqué et en mode zombie…

Donc pour pas me sentir seul:

Un autre bookmarklet, que j’utilise depuis longtemps, lui, est WTFramework. D’un click sur son bouton, vous pouvez connaitre le framework utilisé sur le site que vous visitez. L’intérêt? Vous arrivez sur un site et là il y’a une animation qui vous plait ou que vous cherchez à réaliser, plus besoin de fouiller le code, on clicke, c’est tout…

Simple et rapide

Aujourd’hui JC m’a filé un p’tit bookmarklet bien sympa: ReCSS. Vous le droppez dans votre toolbar et chaque fois que vous cliquez dessus il recharge la CSS sans recharger la page.

Bon il me l’aurait filé 2 semaines plus tôt ça m’aurait bien aidé parce que styler une page en pur AJAX avec 4 ou 5 états et repasser les états précédents à chaque refresh, un poil prise de tête…

Enfin, merci JC…

EDIT: ça a pas l’air de marcher quand on importe les CSS avec le @import. Pff, va faloir que je change ma manière d’importer les CSS moi ^^