Le blog de llaumgui - CSS

ezoescript et ezoecss : 2 bonnes surprises dans ezoe

llaumgui — Fri, 13 Jun 2008 21:08:00 +0200

Pour ceux qui ont suivi mon précédent billet sur l'optimisation des javascripts, vous l'aurez compris : je suis sensibilisé à l'optimisation des sites web et notamment (entre autre) à la préconisation Yahoo! Developer Network :"Minify JavaScript and CSS". Cette préconisation suggère de réduire les CSS et les javascript en nombre et en poids. Dans le meilleur des cas, il faudrait donc n'avoir qu'une feuille CSS et qu'un fichier Javascript de poids raisonable.

Pour la migration du planet Fedora-Fr sous eZ Publish, j'avais pour intention de développer une extension eZ Publish intégrant un minifier JS/CSS. J'étais parti pour utiliser JSMin qui, certes est moins puissant que YUI ou packer mais qui offre le double avantage d'être full php (YUI utilise JAVA) et surtout de ne pas trop altérer le source à grands coups d'eval (comme le fait packer).

Mais au final, j'ai fait le choix de ne pas utiliser le système de design d'eZ Publish et de continuer à stocker le design (CSS, images, JS) de chaque sous-domaine (www, planet, forums, doc, etc..) dans un sous domaine commun (common). Au final, que vous soyez sur le planet, l'accueil ou sur les forums de fedora-fr, vous ne téléchargerez qu'une fois les images et les feuilles de styles.

Bref, comme vous l'aurez compris, j'avais laissé tomber la chose... Puis en furetant dans le code source de la future version d'online editor : ezoe pour les intimes; je suis tombé sur la classe ezoepacker. À la lecture du templateautoload j'ai déduit qu'ezoe proposait 2 opérateurs de template forts sympatiques : ezoescript et ezoecss.

Pour faire court, ezoescript et ezoecss remplacent la syntaxe classique d'eZ, qui avait pour résultat de multiplier les CSS et les JS :

{section name=JavaScript loop=ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) }

<script language="JavaScript" type="text/javascript" src={concat( 'javascript/',$:item )|ezdesign}></script>

{/section}



<style type="text/css">

{section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}

    @import url({concat( 'stylesheets/',$css_file )|ezdesign});

{/section}

</style>

On notera au passage que contrairement à ce que préconise Yahoo, le JS est chargé avant le CSS...

Bref, tout ça est remplacé par :

{ezoescript(    ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ),

                        true, 'text/javascript', 'javascript', 3 )}

{ezoecss(       ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' ),

                        true, 'all', 'text/css', 'stylesheet', 3 )}

ezoecss

ezoecss va récupérer toutes les CSS pour n'en faire qu'une. Cette dernière sera stockée dans le cache et sera de la forme 1 ligne par feuille CSS.

ezoescript

Malheureusement ezoescript n'est pas un vrai minifier JS au sens strict du terme. En effet, point de code sur une seule ligne ni de renommage des variables et fonctions. ezoescript se contente de supprimer les sauts de ligne et les commentaires avant de stocker le fichier en cache. L'avantage c'est qu'il ne présente aucune contrainte de codage pour fonctionner (jusqu'au niveau 2 du moins). J'ai cependant émis sur les forums la suggestion de le coupler à un vrai minifier et André R. ne semble pas fermé à ce genre d'idée...

Déçu de ne pas pouvoir faire joujou avec ces 2 opérateurs sur fedora-fr, je les ai utilisé sur un projet professionnel sur lequel j'avais une problématique forte d'optimisation. Je doit avouer être satisfait du résultat.

Remarque : Si vous utilisez les réécriture d'url, attention à rajouter les lignes qui vont bien dans votre virtualhost.

Pourquoi devons nous tous payer pour l'incompétence et la politique fermée de Microsoft ?

llaumgui — Thu, 01 Mar 2007 13:34:00 +0100

Ce petit coup de gueule fait suite au temps passé à rendre ce blog compatible Internet Explorer.

Tout d'abord une petite présentation de moi même, pour ceux qui n'ont pas lu mon CV.
Je suis un jeune analyste programmeur spécialisé dans le développement d'applications orientées web et visant, la plupart du temps, à être utilisées via un navigateur Web.
Comme la plupart de mes confrères, j'utilise Firefox pour développer mes applications et cela car il propose une riche gamme d'extensions orientées développement. C'est ensuite que je commence l'étape visant à rendre l'application compatible avec IE. Et force est de constater que la plupart du temps c'est plutôt une régression.

En effet, IE se remarque surtout par :

Son moteur CSS approximatif voir inventif.
Son support du CSS 2.0 incomplet (IE<=6).
Son interpréteur Javascript qui fait de libres interprétations :-).
Son absence de support de la transparence des png 24 bits (IE<=6).
etc...

Bref cette compatibilité mets du temps et a donc un coût pour les entreprises mais aussi pour les particuliers. En effet, au lieu de rendre ce blog compatible IE, j'aurais pu mettre à parti mon temps autrement.
Ma question est donc qui doit payer ce coût ?

En effet, avec sa politique fermée et une équipe de développeur irresponsable, Microsoft a su tirer le web vers le bas. Pire que ça, les erreurs du moteur d'Internet Explorer seraient corrigées depuis belle-lurette si le code avait été ouvert. Microsoft provoque donc siament des surcoût pour les entreprises qui vivent du net.

Puisqu'on est dans le domaine de l'internet, Microsoft est aussi responsable de son ralentissement. Avec ça politique de sécurité passoire, un nombre grandissant de Windows deviennent des zombies balançant des trames inutiles sur la toile et entraînant donc des ralentissements (je vulgarise un peu le l'explication).

En résumé, Windows freine la croissance, Windows ralentie le web, Windows engendre des coûts, Microsoft facture des mises à jour qui devraient être comprises dans le cadre de la garantie (XP vers Vista). Bref pourquoi utiliser Windows ?

Mon souhait pour l'avenir serait que les candidats à l'élection présidentielle se prononcent pour une utilisation massive de logiciels libres dès les petites écoles. Pourquoi ? Car c'est les enfants notre future et c'est bien souvent eux qui apprennent des trucs à leur parent.
Un autre point, on met bien des mentions en gros sur les paquets de cigarettes, des messages défilent durant certaines publicités (L'abus d'alcool est dangereux..., Mangez 3 fruits par jour, etc...); pourquoi ne pas faire pareil avec Windows ?

Preview du thème LLaumgui-ng

llaumgui — Fri, 23 Feb 2007 00:08:00 +0100

A la demande générale de certain qui se reconnaîtrons, je suis en train de concocter un nouveau thème pour mon blog, simplement appelé llaumgui-ng.

Pour le moment, vous pouvez admirer une preview de ce que ça donnera : un thème qui se rapproche du bureau de Gnome avec un header bien plus sobre que l'actuel qui sera basé sur un fond d'écran de Diana.

Question technique, j'utilise des éléments de CSS 2.0 qui pourraient ne pas être compatible IE6 (:first-child par exemple), et je m'en fout ! Je ne vais pas me casser le XXX à la place des ingénieurs de chez Microsoft qui ne sont pas fichus de coder un navigateur munit d'un interpréteur correct ! A bon entendeur...
Je suis aussi en train de regarder du côté de jQuery, inclue dans DotClear 2.0 afin de voir ce que je peux en faire...

J'attends vos remarques et commentaires.

Pourquoi coder en xHTML valide ?

llaumgui — Thu, 06 Jan 2005 21:11:00 +0000

Oui, pourquoi ? Et quelle différence entre le xHTML Strict et le Transitional ?

Nouveau média, Internet était jusqu'à peu un lieu où chacun faisait un peu ce qu'il voulait au niveau de la création de pages Web. Aucune norme claire n'était établie, des fonctionnalités aussi diverses qu'inutiles étaient acceptées ou non par les différents navigateurs, ce qui entraînait une grande lourdeur dans la conception d'un site : il fallait alors créer plusieurs sites en parallèle selon le navigateur, sa version, la résolution de l'écran, etc. Le W3C a voulu clarifier tout ceci en éditant des normes à respecter. Nous allons ainsi suivre les normes de XHTML pour le code HTML et de CSS2 pour les feuilles de style. Ceci permettra d'obtenir entre autre :

Un code HTML optimisé, sans erreur, facilement et rapidement interprété par tout navigateur.
Une meilleure accessibilité rendant possible une lecture par les mal voyants (Un aveugle est membres d'XPerience-Fr qui n'est que transitional).
des pages identiques sur tout navigateur.

Pour finir, il existe une norme, pourquoi ne pas l'appliquer ?

Pour finir, quelques liens :