Alors là ça se voyait clairement que c’était Inkscape, c’était écrit en commentaire. Donc j’ai pris le temps de supprimer les méta-données inutiles, les id inutiles, les styles inutiles, le nombre de décimales inutiles, les groupes inutiles, etc. avec python-scour (je le recommande, le fichier doit être environ 3× plus petit maintenant), j’ai supprimé l’indentation, tout ce que le validateur du W3C me laisse retirer sans gueuler, et voilou ! Bon après on comprend toujours rien, mais bon allez comprendre des courbes de bezier instantanément… que ce soit réduit ou non, c’est du pareil au même.
Voilà la version en fichier unique du logo des autoblogs twitter !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur (mais de vraiment peu), mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs twitter !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur, mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs shaarli !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur (mais de vraiment peu), mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs statusnet/GNU Social !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Pour utiliser la notation chromatique courte, j’ai un peu arrondi la couleur, mais aucune différence n’est visible à l’œil nu (de toute façon la couleur a été piochée dans Inkscape avec la précision d’une souris ou je me trompe ?).
Voilà la version en fichier unique du logo des autoblogs génériques !
J’ai maté le code source et… ’fin ça se voit que ça a été fait vite fait sur Inkscape quoi… déjà que c’était pas un cercle parfait mais une presque-ellipse, mais en plus il utilisait `path` (l’élément à tout faire, qui fonctionne avec des commandes en lignes brisées et courbes de bezier), alors qu’il existe en svg un élément `circle` et même un élément `ellipse` !
Bon du coup j’ai refait ça à la main, retiré tout ce que le validateur voulait bien que je retire sans gueuler (je ne compte pas les warnings : la spécification de l’encodage osef, ya que de l’ASCII), et voilà un joli résultat on-ne-peut-plus-court (et la désindentation ne le rend même pas moins lisible tellement il est petit) en one-liner !
Sensiblement les même type de changement que le pull 41 (sauf que là le CSS est changé aussi du même coup), que je résumerais avec presque le même résumé :
Alors j’ai fait énoooooormément de modifications… La principale est : un code source (HTML5) beau et sémantique. C’est à dire que j’utilise les balises sémantique HTML5, que le code est plus simple, qu’il est correctement indenté (2 espaces à chaque fois, c’est ce que je trouve de plus beau) et valide. Ça m’a pris une nuit et un aprèm’ (la nuit pour index.php, l’aprèm’ pour autoblog.php) de nettoyer ça, assez simple et très satisfaisant :).
Bon après j’ai fait plusieurs autres modifications de genre divers aussi : j’ai supprimé des balises inutiles, des traits d’union par des tirets, fusion des lignes séparées par des
(horrible) en un paragraphe (bien plus joli, organisé, sémantique, etc.), et d’autres choses encore.
Par conséquent j’imagine que peut-être qu’il sera nécessaire de regarder la diff des changements. Mais pour voir le résultat final il y a mon instance : <https://autoblog.galex-713.eu>.
Dans ce deuxième pull request quasiment identique au premier, les deux espaces insécables qui rendait le code inopérant ont été retirés.
Alors mon gros changement du pull 41 (pull request à peine faite), il faut évidemment adapter le CSS, pour les nouveaux éléments HTML5, comme le nettoyage du code. J’utilise ainsi les sélecteurs avancés (>, :target) de CSS2.1, mais c’est pas plus avancé que :hover, et la spécification date du XXe siècle, et les sélecteurs avancés fonctionnent partout, même sur IE, à l’exception de Netscape et Mozaic.
J’ai aussi supprimé plusieurs id du coup, pour ne spécifier les id que sémantiquement et clairement, sans superflu. J’ai aussi ajouté un max-height à img par défaut, parce que chez moi mon image de 713px dépasse largement le bloc (et évidemment « max-height:100% » ne donne pas le résultat voulu, et ne fait rien), mais il faudrait mettre ça en px dans un conditionnel en fonction de la taille de l’écran, ou trouver un moyen de lui faire faire la hauteur du block de la section.
J’ai aussi supprimé une propriété CSS de gradiant MS, déjà parce que IE est en train de tomber (et tout le monde il est content, et tout le monde il va faire du standard, et le fait-pou-IE est mort, etc.), et puis parce que c’est non seulement pas standard, mais que ça rend le CSS invalide pour le validateur du W3C (et ça pourrait donc créer des problèmes avec certains navigateurs, et diminuer l’expérience de certains à cause d’IE, je sais pas pour les autres, mais moi JAMAIS).
Alors j’ai fait énoooooormément de modifications… La principale est : un code source (HTML5) *beau* et sémantique. C’est à dire que j’utilise les balises sémantique HTML5, que le code est plus simple, qu’il est correctement indenté (2 espaces à chaque fois, c’est ce que je trouve de plus beau) et *valide*. Ça m’a pris une nuit et un aprèm’ de nettoyer ça, assez simple et très satisfaisant :).
Bon après j’ai fait plusieurs autres modifications de genre divers aussi : j’ai supprimé des balises inutiles, j’ai remplacé la recherche Google par une recherche Startpage, des traits d’union par des tirets, fusion des lignes séparées par des <br> (horrible) en un paragraphe (bien plus joli, organisé, sémantique, etc.), et d’autres choses encore.
Par conséquent j’imagine que peut-être qu’il sera nécessaire de regarder la diff des changements. Mais pour voir le résultat final il y a mon instance : <autoblog.galex-713.eu>.
