Prenez le contrôle de votre CSS

Votre projet est en plein sprint, les releases de corrections s’enchainent et vous devez soumettre le résultat à chaque fois à votre client. Et pourtant il y a un mécanisme des navigateurs qu’on adore en tant qu’utilisateur mais qui gène parfois en tant que développeur, la mise en cache des CSS.

Quoi de plus frustrant d’avoir en premier retour de votre client Euh, pourquoi l’image est au milieu de l’écran? alors que vous venez de passer les dernières heures à la mettre au bon endroit en retouchant votre CSS. Bien sûr vous lancez rapidement le cri de guerre adéquat F5! et la magie opère enfin.

Mais ne serait-il pas plus plaisant que d’obtenir dès le premier clic, le bon résultat?
Il y a pour cela une astuce, que bon nombre connaisse, mais qui dans un contexte de développement professionnel, est souvent lourde à mettre en place: changer le nom de votre CSS pour forcer le navigateur à la recharger et ainsi laisser apparaitre vos modifications du premier coup.

Lire la suite

IE6 sur Mac OS X, quand Linux inspire Mac

Tous les Linuxiens, en particulier les développeurs web ont du passer le pas un jour, installer une solution le permettant de tester leur page web dans ces magnifique navigateurs qui ralentissent l’avancée technologique du web, j’ai nommée IE6 et IE7.

Là où la virtualisation se banalise grâce à des logiciels comme VirtualBox, certains utilisent encore des émulateurs dont le célèbre ie4linux.

Et bien, l’alternative pour Mac OS X existe, preuve que la pomme a quand même bien fait les choses. Et pour l’installer rien de plus simple.

Lire la suite

Expod: extraire ses mp3 de son ipod

S’il y a bien une option qui manque à iTunes, c’est bien de pouvoir récupérer les mp3 une fois dropé dans son ipod.

Une fois de plus, ce manque est corrigé par un tiers par l’intermédiaire de Expod, seulement en version mac pour l’instant ce petit soft a le mérite de faire son travail et de le faire bien.

Une fois lancé, rien à faire de plus, il reconnait votre ipod connecté comme un grand:

Ensuite, on sélectionne les mp3 qu’on veut récupérer et on arrive sur une boîte de dialogue qui nous propose le format de nom de fichier qu’auront nos futurs fichiers mp3 via les tags de ces morceaux:

On choisit le répertoire de destination et l’affaire est dans le sac. Reste à voir, si ce logiciel évolue, en permettant surtout un support Windows voir Linux

Uploadez en Symfony

Quand on utilise un framework PHP aussi propre et bien pensé que symfony, on a souvent envie de continuer ce beau travail en ajoutant notre code de la meilleur des façons pour conserver la logique de l’application, MVC, héritage, composition…

Mais ce n’est pas toujours simple. Voici un petit exemple qui concerne un passage obscur de la documentation officielle des formulaires dans symfony, l’upload de fichier.

Pour commencer, il faut souvent définir dans la définition de notre formulaire le widget et le validator correspondant. Dans notre exemple, on prendra un champ nommé avatar, imaginons un classe Profil:

public function configure()
{
    $this->widgetSchema['avatar'] = new sfWidgetFormInputFile();
    // Un upload étant rarement obligatoire, 
   // le cas de l'avatar est un bon exemple, on le rend facultatif ici
    $this->validatorSchema['avatar'] = new sfValidatorFile(array('required' => false)) ; 
}

Maintenant on a bien notre formulaire qui s’affiche correctement. Le problème, si on n’upload pas de nouvel avatar, à la prochaine sauvegarde, le champ avatar sera remis à sa valeur par défaut, fonctionnement tout à fait normal en l’état.
Pour éviter ceci, voici la fonction à rajouter, toujours dans notre classe de notre formulaire Profil, c’est en fait une surcharge de la méthode save:

public function save($con = null)
{
    // On test si le champ avatar a été renseigné dans le formulaire
    if ($file = $this->getValue('avatar'))
    {
      // Si oui, on sauvegarde le fichier
      $filename = 'nomDuFichier';
      $extension = $file->getExtension($file->getOriginalExtension());
      $file->save(sfConfig::get('sf_upload_dir').$filename.$extension);
    }
    else
    {
      // Si non, on récupère la version actuelle dans l'objet Père (ici profil), 
      // que l'on insère dans le tableau de valeur du formulaire
      $this->values['avatar'] = $this->getObject()->getAvatar();
    }
 
    // Puis on lance la sauvegarde normal de la classe mère
    return parent::save($con);
}

Et voilà, nous sommes restés dans la logique métier de symfony, en surchargeant l’existant et surtout en permettant de garder notre action identique, les modifications ayant été apportées dans le modèle.

Un terminal mac os x plus sexy

Quand on vient de l’univers Linux vers le monde merveilleux de la pomme, on est vite en manque de notre cher terminal, celui qui permet de faire tout ce qu’on veut rapidement et sans se heurter à une interface peu bavarde parfois.

Mais quel choc quand on a le malheur de lancer le terminal mac dans sa configuration de base:

Assez tristounet, aucune couleur et le panel de configuration est peu enclin à nous aider efficacement. Et pourtant, quand on sait que mac os x est construit sur une base unix, il serait dommage de se priver d’un terminal qui pourrait se révéler très utile, surtout pour un développeur comme moi.

On va donc se lancer dans un petit tuning de terminal.

Lire la suite

Montastic, surveiller vos serveurs du coin de l’oeil

Quand on a pas la chance d’avoir un serveur dédié pour son site web, le monitoring de ce dernier est rarement de bonne facture, et c’est bien souvent un contact sur skype ou pire encore, vous même avec quelques heures de retard forcément, qui vous informe que votre site est tombé.

Et bien Montastic permet justement de monitorer vos sites web gratuitement. Bien sûr le monitoring est très basique, il ne teste que le ping, mais c’est bien le test le plus important et le plus simple à mettre en oeuvre. Pour ce faire, il vous suffit de vous inscrire (gratuitement!), et d’indiquer la liste des sites à monitorer.

Attention à l’adresse mail utilisé pour l’inscription, c’est cette dernière qui sera utilisée pour vous prévenir si votre site rencontre des problèmes. Pensez également à retirer les sites web d’exemple, google et l’hôte inconnu sinon vous allez être vite spammé de mail.

Un très bon service, auxquels sont venus se greffer des widgets pour ceux qui ne passent pas leur journée la tête dans leur mailbox.

Pour la version mac, il faudra simplement renseigner la clé que l’on trouve dans son profil sur le site et on obtient un joli:

Un PHP5 toutes options pour votre Léopard

La dernière version de Mac Os X, Léopard est maintenant livrée avec un couple PHP5/Apache 2 de série.

Il vous suffit d’activer le partage web pour lancer l’apache et une ligne à décommenter dans le php.ini pour bénéficier du support de PHP5 et ce sans rien faire de plus.

Cette combinaison suffit la plupart du temps, mais dès qu’il faut rajouter un module, librairie, PHP, ca devient vite compliqué. Que se soit GD ou ZIP, il est rarement simple, sans aucune recompilation d’installer ces librairies, pourtant assez classiques sur votre mac.

Et bien, un monsieur l’a compris, Marc Liyanage, qui maintient des versions de PHP5 recompilées pour mac avec toutes les options.

Pour l’installer, rien de compliqué, lancer un terminal puis si vous souhaitez faire un backup de votre version actuelle de PHP.

sudo mv /usr/local/php5 ~/Desktop/php5.old

Puis placez vous dans votre dossier de téléchargement habituel et télécharger la dernière version et dézippez là là où se trouvait l’ancienne.

wget http://www2.entropy.ch/download/php5-5.2.5-6-beta.tar.gz
tar -xzf php5-*-beta.tar.gz
sudo mv php5 /usr/local/

Il faut ensuite changer rajouter la conf de cette nouvelle version à notre apache

sudo ln -sf /usr/local/php5/entropy-php.conf /etc/apache2/other/+entropy-php.conf

Et on redémarre apache

sudo apachectl restart

Voilà, vous pouvez jeter un oeil à un phpinfo(), vous disposez maintenant de toutes les options pour votre PHP5.

Faites patienter à votre sauce

Avec l’arrivée de gros frameworks javascript orienté AJAX que sont jQuery, Prototype ou Mootols, et leur intégration dans les applications PHP, que se soit les CMS ou les frameworks, il devient de plus en plus facile et abordable de dynamiser à coup d’ajax une interface web.

Mais du coup, on en demande de plus en plus, et les traitements sont bien souvent de plus en plus lourd. Et pour un utilisateur rien n’est plus frustrant que de cliquer sur un lien/bouton et ne de pas voir l’application réagir, ne serait-ce que pour l’informer qu’elle a bien compris sa demande.

On a donc trouvé la solution, de petits gif animés qui symbolisent l’attente comme par exemple:
ou bien

Et certains ont donc eu la bonne idée de faire un générateur de load ajax avec la possibilité de changer les couleurs pour coller au mieux à votre charte graphique. Il suffisait d’y penser!

Pour un web à son image, Smush it!

Un autre domaine assez controversé dans le web, ce sont les formats d’images. Bien longtemps, grand chouchou des webmaster, le GIF a régné en maître, de part sa technologie, une compression sans perte qui gèrait le canal alpha et même l’animation!

Son principal problème était son brevet, qui a trainé jusqu’en 2004, le rendant ennemi numéro 1 des libristes du web. Pendant ce temps, tapis dans l’ombre, le PNG a commencé à monter en puissance, d’abord appuyé par le W3C puis certifié ISO en 2004.

Son principal intérêt, un gif amélioré et un format ouvert. Amélioré car il ne s’arrête pas aux 8bits de couleurs du GIF, mais va jusqu’à 32, permettant même de gérer totalement la transparence d’une image et à image égale il surpasse le GIF en poids d’image.

Malheureusement, trop mis en avant dès sa sortie, le PNG a été proclamé messie et tueur également du format JPEG alors qu’il n’en avait pas la possibilité. En effet, le jpeg tire son succès dans la compression de photo, là où son algorithme de compression avec perte (grosse différence comparé au PNG) pouvait pleinement s’exprimer. A photo égale, le PNG se retrouve donc logiquement loin derrière.

On l’a alors rangé dans le catalogue format non optimisé, trop lourd, sans compter avec ces problèmes relationnels avec Photoshop et Internet Explorer.

Mais comme tous les formats ouverts, le PNG a ses fans et certains réalisent des choses assez folles comme ce cher Smush it qui permet en 1 clic après installation du plugin firefox correspondant d’optimiser toutes les images d’un site, vous les mettant alors à disposition, et en PNG bien sûr.

Voila le résultat pour amicalement web:

Que fait la police sous Linux

Un des principaux manques actuels du CSS 2, c’est bien la gestion de la police.

Il n’est pas encore possible d’imposer une police à l’internaute^[1] mais seulement de lui en suggérer un certain nombre que le navigateur parsera dans l’ordre donné jusqu’à en trouver une que le système d’exploitation possède. Mais avec la montée en puissance, lente mais régulière des systèmes autre que Windows, il peut devenir un vrai casse-tête de trouver une police un peu évoluée que chacun pourra afficher.

En fait le problème se pose surtout pour les linuxiens, et même le paquet msttcorefonts ne résous pas ce problème entièrement, en plus d’obliger les partisans du pingouin à installer un paquet supplémentaire.

Mais le web regorge de bonnes volontés, et je suis tombé sur un billet en anglais qui tente de trouver des équivalents à ce cher Arial, Helvetica, Lucida sous linux en natif.

Au final, j’ai opté personnellement pour le couple Lucida Sans/Mukti Narrow pour le texte et Helvetica/FreeSans pour les titres. Après quelques tests, le résultat est tout à fait acceptable sur mon Ubuntu et permet de garder un peu plus le contrôle sur la charte graphique désirée.

1. C’est tout de même en projet sérieusement dans CSS3 [↩]