Chimrod - Libre//blog.chimrod.com/2015-10-03T00:00:00+02:00Des glyphes <span class="amp">&</span> du codeSe faire un CV en rst2015-10-03T00:00:00+02:002015-10-03T00:00:00+02:00Chimrodtag:blog.chimrod.com,2015-10-03:/2015/10/se-faire-un-cv-en-rst/<p class="first last">Je n'en finis plus de proposer le format rst à toutes les sauces. Cette
fois-ci je vous propose d'écrire votre CV en rst, et donner le rendu à
latex via moderncv pour obtenir un rendu qui sort du lot.</p>
<div class="admonition warning">
<p class="first admonition-title">Article obsolète</p>
<p class="last">Je propose désormais une solution complète pour se faire son modèle de <span class="caps">CV</span> en
rst<span style="white-space:nowrap"> </span>: <a class="reference external" href="//blog.chimrod.com/2020/12/encore-des-cvs-en-rst/">encore des cvs</a> !</p>
</div>
<p>Je n’en finis plus de proposer le format rst à toutes les sauces. Cette
fois-ci je vous propose d’écrire votre <span class="caps">CV</span> en rst, et donner le rendu à
latex via moderncv pour obtenir un rendu qui sort du lot.</p>
<div class="section" id="moderncv">
<h2>Moderncv</h2>
<p>moderncv est une classe latex (entendre au sens <em>template</em>), qui permet de
présenter et mettre en forme le <span class="caps">CV</span> simplement. Une image valant mieux qu’un
long discours, ça donne un résultat comme celui-ci<span style="white-space:nowrap"> </span>:</p>
<img alt="Exemple de rendu" src="//blog.chimrod.com/images/cv/exemple.png" />
<p>Le but est de séparer la mise en forme du contenu, en déclarant à travers
quelques balises quelles sont éléments à afficher sur le cv.</p>
<p>Voici quelques exemples de rendu possible avec la classe<span style="white-space:nowrap"> </span>:</p>
<ul class="simple">
<li><a class="reference external" href="https://github.com/xdanaux/moderncv/blob/master/examples/template_banking_red.pdf">thème banking rouge</a></li>
<li><a class="reference external" href="https://github.com/xdanaux/moderncv/blob/master/examples/template_casual_orange.pdf">thème casual orange</a></li>
<li><a class="reference external" href="https://github.com/xdanaux/moderncv/blob/master/examples/template_classic_green.pdf">thème classic vert</a></li>
<li><a class="reference external" href="https://github.com/xdanaux/moderncv/blob/master/examples/template_fancy_purple.pdf">thème fancy mauve</a></li>
<li><a class="reference external" href="https://github.com/xdanaux/moderncv/blob/master/examples/template_oldstyle_grey.pdf">thème oldstyle gris</a></li>
</ul>
<p>Alors quand on latex on dit simplement, en vérité ça veut dire ça<span style="white-space:nowrap"> </span>:</p>
<div class="highlight"><pre><span></span><span class="k">\section</span><span class="nb">{</span>Education<span class="nb">}</span>
<span class="k">\cventry</span><span class="nb">{</span>year--year<span class="nb">}{</span>Degree<span class="nb">}{</span>Institution<span class="nb">}{</span>City<span class="nb">}{</span><span class="k">\textit</span><span class="nb">{</span>Grade<span class="nb">}}{</span>Description<span class="nb">}</span> <span class="c">% arguments 3 to 6 can be left empty</span>
<span class="k">\cventry</span><span class="nb">{</span>year--year<span class="nb">}{</span>Degree<span class="nb">}{</span>Institution<span class="nb">}{</span>City<span class="nb">}{</span><span class="k">\textit</span><span class="nb">{</span>Grade<span class="nb">}}{</span>Description<span class="nb">}</span>
<span class="k">\section</span><span class="nb">{</span>Master thesis<span class="nb">}</span>
<span class="k">\cvitem</span><span class="nb">{</span>title<span class="nb">}{</span><span class="k">\emph</span><span class="nb">{</span>Title<span class="nb">}}</span>
<span class="k">\cvitem</span><span class="nb">{</span>supervisors<span class="nb">}{</span>Supervisors<span class="nb">}</span>
<span class="k">\cvitem</span><span class="nb">{</span>description<span class="nb">}{</span>Short thesis abstract<span class="nb">}</span>
</pre></div>
</div>
<div class="section" id="la-version-rst">
<h2>La version <span class="caps">RST</span></h2>
<p>Ce que je propose, c’est de l’écrire comme ça<span style="white-space:nowrap"> </span>:</p>
<div class="highlight"><pre><span></span><span class="gh">Formation</span>
<span class="gh">---------</span>
<span class="nc">:2008:</span>
<span class="gs">**Mon dernier diplôme**</span> — <span class="ge">*Université de France*</span>
après j'ai arrêté.
<span class="nc">:2006:</span>
<span class="gs">**Un autre diplôme**</span> — <span class="ge">*Université de Navarre*</span>
il faut que j'aille le chercher depuis ce temps…
<span class="nc">:2005:</span>
<span class="gs">**Encore un**</span> — <span class="ge">*Université*</span>
mention « Assez bien »
</pre></div>
<p>Avouez que c’est quand même plus simple<span style="white-space:nowrap"> </span>!</p>
</div>
<div class="section" id="comment-faire">
<h2>Comment faire</h2>
<div class="section" id="compilation-latex">
<h3>Compilation latex</h3>
<p>Pour commencer, assurez-vous que vous pouvez produire le <span class="caps">CV</span> à partir du code latex.</p>
<div class="highlight"><pre><span></span><span class="gp">$ </span>wget<span class="w"> </span>https://raw.githubusercontent.com/xdanaux/moderncv/master/examples/template.tex
<span class="gp">$ </span>wget<span class="w"> </span>https://raw.githubusercontent.com/xdanaux/moderncv/master/examples/picture.jpg
<span class="gp">$ </span>pdflatex<span class="w"> </span>template.tex
</pre></div>
<p>Si tout va bien, vous devriez avoir votre pdf généré dans le répertoire.</p>
<p>Quelques problèmes<span style="white-space:nowrap"> </span>:</p>
<p><strong>command not found: pdflatex</strong> : pdflatex n’est pas installé. Il va vous
falloir installer toute l’architecture<span style="white-space:nowrap"> </span>: <a class="reference external" href="https://packages.debian.org/sid/texlive">texlive</a>, <a class="reference external" href="https://packages.debian.org/sid/texlive-latex-extra">texlive-latex-extra</a>,
<a class="reference external" href="https://packages.debian.org/sid/texlive-fonts-extra">texlive-fonts-extra</a> et je conseille aussi <a class="reference external" href="https://packages.debian.org/sid/texlive-xelatex">texlive-xelatex</a>.</p>
<p><strong>LaTeX Error File `fontawesome.sty` not found</strong> : il vous manque la police
awesome. Dans debian, elle est disponible dans le paquet
<a class="reference external" href="https://packages.debian.org/sid/texlive-fonts-extra">texlive-fonts-extra</a>.</p>
</div>
<div class="section" id="docutils">
<h3>docutils</h3>
<p>Ensuite assurez de disposer de <a class="reference external" href="https://packages.debian.org/sid/python3-docutils">docutils</a> pour pouvoir lancer <cite>rst2latex</cite> ou
<cite>rst2latex.py</cite> :</p>
<div class="highlight"><pre><span></span><span class="gp">$ </span>rst2latex<span class="w"> </span>-V
<span class="go">rst2latex (Docutils 0.12 [release], Python 2.7.10, on linux2)</span>
</pre></div>
</div>
<div class="section" id="c-est-parti">
<h3>C’est parti<span style="white-space:nowrap"> </span>!</h3>
<div class="floatleft figure">
<a class="reference external image-reference" href="//blog.chimrod.com/resources/cv.tar.gz"><img alt="get the file" src="//blog.chimrod.com/images/mimetypes/package-x-generic.png" /></a>
<p class="caption">Télécharger</p>
</div>
<p>Vous trouverez dans l’archive un Makefile et l’exemple qui m’a servi à écrire
illustrer l’article. Il suffit de lancer <cite>make</cite> pour produire le pdf du <span class="caps">CV</span>,
plus un exemple de lettre d’accompagnement.</p>
<p>Tous les fichiers <cite>.rst</cite> qui sont présent dans le répertoire où est lancé la
commande seront automatiquement convertis en pdf.</p>
<div class="admonition admonition-attention">
<p class="first admonition-title">Attention</p>
<p class="last">Le Makefile est configuré pour lancer xelatex au lieu de pdflatex
(meilleure gestion des polices). Il faut changer la première ligne du fichier
si vous souhaiter utiliser un autre moteur de rendu.</p>
</div>
</div>
</div>
<div class="section" id="comment-ca-marche">
<h2>Comment ça marche<span style="white-space:nowrap"> </span>?</h2>
<p>En fait, la classe <cite>moderncv</cite> utilise des directives qui ne sont pas standard par
mettre le cv en forme. Par conséquent, il n’est pas possible de l’utiliser
directement avec <cite>rst2latex</cite>. On est obligé de construire son propre writer pour
pouvoir produire une sortie qui soit compatible, c’est ce qui est contenu dans
le fichier <cite>bin/moderncv.py</cite> de l’archive. (Je détaillerai comment se
construire ses propres classes si on me le demande.)</p>
<p>Voilà, il ne reste plus qu’à faire le votre<span style="white-space:nowrap"> </span>!</p>
</div>
Ouvrir un rapport de bug sur firefox2015-08-18T00:00:00+02:002015-08-18T00:00:00+02:00Chimrodtag:blog.chimrod.com,2015-08-18:/2015/08/ouvrir-un-rapport-de-bug-sur-firefox/<p class="first last">Suite à la mise à jour de firefox, j'ai essayé de comprendre pourquoi un
site interne ne fonctionnait plus.
Il s'agit d'un site interne, principalement écrit en flash, qui ne
fonctionne plus chez tous les utilisateurs ayant mis à jour le navigateur.
Le besoin était de trouver de l'aide pour comprendre en quoi la mise à jour
du navigateur pouvait changer le comportement du site.</p>
<div class="floatright figure" style="width: 140px">
<img alt="Labyrinth !" src="//blog.chimrod.com/images/labyrinth.jpg" />
<p class="caption">Image<span style="white-space:nowrap"> </span>: <a class="reference external" href="https://www.flickr.com/photos/yourdoku/5451101198/">yourdoku.com</a> (<a class="reference external" href="https://creativecommons.org/licenses/by/2.0/">creativecommons</a>)</p>
</div>
<p>Suite à la mise à jour de firefox, j’ai essayé de comprendre pourquoi un
site interne ne fonctionnait plus.
Il s’agit d’un site interne, principalement écrit en flash, qui ne
fonctionne plus chez tous les utilisateurs ayant mis à jour le navigateur.
Le besoin était de trouver de l’aide pour comprendre en quoi la mise à jour
du navigateur pouvait changer le comportement du site.</p>
<div class="section" id="le-support">
<h2>Le support</h2>
<p>Première étape, aller sur le <a class="reference external" href="https://support.mozilla.org/fr/">support</a>. Le site est joli, on choisi le logiciel
concerné, et le composant impacté<span style="white-space:nowrap"> </span>:</p>
<ul class="simple">
<li>Navigation basique</li>
<li>Installation et mise à jour</li>
<li>Synchronisez vos navigateurs</li>
<li>Discussion et partage</li>
<li>En faire plus avec des applications</li>
<li>…</li>
<li>Correction de ralentissements, plantages, messages d’erreurs et autres problèmes</li>
</ul>
<p>On a l’impression d’être devant un audiotel à devoir taper 1, 2 ou 3 sur le
téléphone pour être aiguillé dans la catégorie qui nous concerne. Mais ça n’est
pas ce que je veux<span style="white-space:nowrap"> </span>! Il est où le canal <span class="caps">IRC</span> ? Elle est où la mailing-list<span style="white-space:nowrap"> </span>?
Tout ça semble avoir disparu du site pour laisser place à une vitrine, certe
jolie, mais qui ne m’aide pas beaucoup dans ma recherche.</p>
<p>Bon, ça n’est probablement pas la bonne manière de faire. Reprenons.</p>
</div>
<div class="section" id="mailing-list">
<h2>Mailing-list</h2>
<p>Recherchons les listes de diffusion. C’est un moyen d’échanger avec les
développeurs en passant par les courriels, avec un archivage de l’ensembles des
échanges déjà réalisés, je pense que je devrais trouver mon bonheur.</p>
<p>Mon moteur de recherche m’amène sur <a class="reference external" href="https://mail.mozilla.org/listinfo">la liste des listes de diffusion</a> de
mozilla. Ça parle de beaucoup de choses<span style="white-space:nowrap"> </span>: Berlin-Events, fhr-dev, inbox-triage,
Memes, party-planners mais je ne vois pas où trouver une information pour
comprendre en quoi le changement de firefox provoque un dysfonctionnement sur
mon site.</p>
<p>En cherchant davantage, je tombe sur <a class="reference external" href="https://lists.mozilla.org/listinfo/support-firefox">support-firefox</a>. Tiens, pourquoi
n’est-elle pas citée sur la page précédente<span style="white-space:nowrap"> </span>? Qu’à cela ne tienne, un petit
message qui explique mon problème, un exemple avec les traces tcpdump qui
montrent la différence de comportement entre les deux version, et un petit
courriel envoyé à la communauté pour demander de l’aide.</p>
<p>Comme souvent quand on n’est pas inscrit sur la liste de diffusion, je reçoie
un courriel me disant que ma demande est en validation, je serai informé de la
décision prochainement.</p>
<p>Puis le silence. Un jour, deux jours, trois jours… (bon je suis mauvaise langue
aussi c’était le week-end).</p>
<p>Je fini par recevoir un notification de rejet, avec comme motif<span style="white-space:nowrap"> </span>: la liste de
diffusion est bidirectionnelle, en miroir avec un newsgroup, Donc je risque de
ne pas être alerté des réponses postées par les utilisateurs. Merci de
s’inscrire à la liste de diffusion où de poser ma question au support.</p>
<p>Grrrrrrr<span style="white-space:nowrap"> </span>! Effectivement, les archives de la liste de diffusion pointent vers
les groupes google. Mais c’est fait exprès pour empêcher les gens de demander
de l’aide ou quoi<span style="white-space:nowrap"> </span>? Je suis capable d’aller consulter les archives par moi-même
pour me tenir informé des réponses<span style="white-space:nowrap"> </span>!!</p>
</div>
<div class="section" id="stackoverfow">
<h2>StackOverfow</h2>
<p>Le <a class="reference external" href="https://support.mozilla.org/en-US/kb/where-go-developer-support">support pour développeurs</a> nous oriente vers StackOverfow. Allons-y, de toute
façon au point où j’en suis, autant se créer un compte. À ce stade, il faut
avouer que je suis déjà bien énervé de la manière dont les choses se déroulent.
Une simple demande d’aide est en train de se transformer en parcours du
combattant labyrinthique.</p>
<p>Je commence à recevoir quelques réponses et pistes qui ne m’aident pas beaucoup
pour comprendre mon problème. Mais cela m’a déjà permis d’échanger avec
quelqu’un qui m’a apporté son aide bénévolement. (et puis c’est quoi ce
formulaire de saisi dans stackoverflow qui valide la saisie dès qu’on appuie
sur ENTRÉE<span style="white-space:nowrap"> </span>: on ne peut pas écrire de paragraphes directement sur ce site<span style="white-space:nowrap"> </span>?)</p>
</div>
<div class="section" id="le-rapport-de-bogue">
<h2>Le rapport de bogue</h2>
<p>Ne trouvant d’aide nulle part, je fini par ouvrir un rapport de bogue. J’ai
tous les éléments nécessaire pour le fournir, mes traces tcpdump feront office
de site à consulter (le site est interne à une entreprise).</p>
<p>Bien sûr mon rapport été déjà présent dans un autre ticket, mais encore eût-il
fallu que je le trouve<span style="white-space:nowrap"> </span>! Ce problème était même connu de firefox,
puisque présenté parmi <a class="reference external" href="https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility$revision/901845#sect17">la liste des changements</a> de la version 40<span style="white-space:nowrap"> </span>!</p>
<p>Attend<span style="white-space:nowrap"> </span>? Stop<span style="white-space:nowrap"> </span>! La denière version de firefox casse la compatibilité avec
certains sites de manière officielle<span style="white-space:nowrap"> </span>? J’aurais bien aimé disposer de cette
information avant de me lancer dans cette procédure…</p>
</div>
<div class="section" id="bilan-que-devient-firefox">
<h2>Bilan<span style="white-space:nowrap"> </span>: que devient firefox<span style="white-space:nowrap"> </span>?</h2>
<p>Un support quasi-impossible à joindre, qui passe par des services tels que
google ou stackoverflow<span style="white-space:nowrap"> </span>; des vitrines marketing pour aiguiller les utilisateurs
dans leur prise en main de l’application<span style="white-space:nowrap"> </span>; une communication qui se focalise sur
compatibilité avec Windows 10, mais oublie de parler de régressions dans les
sites existants<span style="white-space:nowrap"> </span>; une note sur une page obscure, que l’on ne trouve que si l’on
a déjà l’information… <strong>mais que devient firefox<span style="white-space:nowrap"> </span>?</strong></p>
<p>Est-ce qu’il est obligatoire pour un logiciel populaire de se couper de sa base
d’utilisateurs<span style="white-space:nowrap"> </span>? Est-ce le destin vers lequel se dirige nos distributions,
LibreOffice<span style="white-space:nowrap"> </span>? Je comprend que mozilla cherche à préserver sa marque, mais j’ai
l’impression que l’application est entrée dans un autre univers. Ça n’est pas
celui que j’ai l’habitude de côtoyer.</p>
<p>Je veux des échanges, des mailing-lists, de l’<span class="caps">IRC</span> ! Je ne veux pas d’un
ensemble de logiciels marketing, j’ai opté pour le bazar, pas la cathédrale.
Sauf que le bazar est en train de se transformer en centre commercial, avec des
vigiles à l’entrée, même si tout le monde est libre d’entrer…</p>
<p>Est-ce que je suis le seul à ressentir cette tendance, ou bien est-ce que je me
fait trop vieux<span style="white-space:nowrap"> </span>? Quelqu’un qui ne connaît pas le logiciel libre a-t-il aussi
le sentiment de mettre les pieds dans un labyrinthe<span style="white-space:nowrap"> </span>? Pourtant ici, ça n’est
pas la technique qui me manque<span style="white-space:nowrap"> </span>; je n’ose pas imaginer le parcours du
combattant de celui voulant ouvrir un rapport de bogue sur sa distribution…</p>
</div>
Pelican, disqus, et vie privée2015-08-09T00:00:00+02:002015-08-09T00:00:00+02:00Chimrodtag:blog.chimrod.com,2015-08-09:/2015/08/pelican-disqus-vie-privee/<p class="first last">Comment configurer pelican pour utiliser les commentaires disqus,
sans que le service ne vienne systématiquement pister les
visiteurs…</p>
<div class="floatright figure" style="width: 240px">
<img alt="Privacy !" src="//blog.chimrod.com/images/disqus/privacy_240.jpg" />
<p class="caption">Image<span style="white-space:nowrap"> </span>: <a class="reference external" href="https://www.flickr.com/photos/armydre2008/3865993401/">Frankielon</a> (<a class="reference external" href="https://creativecommons.org/licenses/by/2.0/">creativecommons</a>)</p>
</div>
<div class="admonition warning">
<p class="first admonition-title">Article obsolète</p>
<p class="last">J’ai fini par désactiver complètement les commentaires sur le blog. Même si
la solution est toujours pérenne, celle-ci n’est plus active ici.</p>
</div>
<p>Le moteur de blog statique propose nativement un plugin pour gérer les
commentaires avec disqus. Il permet de donner un peu de dynamisme au blog, qui
est entièrement statique… Sauf qu’il s’agit d’un service non libre, qui
enregistre les données des utilisateurs…</p>
<p>Le plugin <a class="reference external" href="https://github.com/getpelican/pelican-plugins/tree/master/disqus_static">disqus_static</a> permet d’intégrer à la page html les commentaires
trouvés sur le service disqus. Cela permet de les inclure nativement dans
l’article, et évite au lecteur du blog d’informer disqus de sa navigation sur
le site. Voici la manière dont je l’utilise sur le blog.</p>
<div class="admonition admonition-attention">
<p class="first admonition-title">Attention<span style="white-space:nowrap"> </span>!</p>
<p class="last">Cette configuration est <em>moins pire</em> que celle proposée par défaut par le
blog, mais elle continue d’enregistrer l’ensemble des commentaires auprès
d’une entreprise privée. Mieux vaut, si vous en avez la possibilité,
basculer sur une solution hébergée comme <a class="reference external" href="http://posativ.org/isso/">isso</a>.</p>
</div>
<div class="section" id="creation-du-compte">
<h2>Création du compte</h2>
<p>En suivant la documentation du plugin, on enregistre notre application sur le
site de l’<a class="reference external" href="https://disqus.com/api/applications/">api de disqus</a> :</p>
<img alt="Configuration du compte" src="//blog.chimrod.com/images/disqus/disqus_api.png" />
<p>Le compte n’a besoin d’accéder aux commentaires qu’en mode lecture, penser
aussi à renseigner le nom de domaine utilisé par le blog dans les paramètres du compte.</p>
</div>
<div class="section" id="configuration-du-plugin">
<h2>Configuration du plugin</h2>
<p>Le compte et la clef seront renseignés dans un fichier à part, que nous allons
nommer <cite>disqus.py</cite>. Normalement, il devrait juste contenir ces lignes<span style="white-space:nowrap"> </span>:</p>
<div class="highlight"><pre><span></span><span class="ch">#!/usr/bin/env python</span>
<span class="c1"># -*- coding: utf-8 -*-</span>
<span class="c1"># Configuration des commentaires</span>
<span class="n">DISQUS_SITENAME</span><span class="o">=</span><span class="s1">'Votre compte disqus'</span>
<span class="n">DISQUS_SECRET_KEY</span> <span class="o">=</span> <span class="sa">u</span><span class="s1">'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'</span>
<span class="n">DISQUS_PUBLIC_KEY</span> <span class="o">=</span> <span class="sa">u</span><span class="s1">'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'</span>
</pre></div>
<p>Pour éviter de diffuser ce fichier sur un serveur git public, ne pas oublier de
l’ajouter au fichier .gitignore<span style="white-space:nowrap"> </span>! Ainsi, nous serons sûr que notre clef privée
ne sera jamais transmise sur internet…</p>
<p>Dans le fichier <cite>publish.conf</cite>, nous allons ajouter le chargement du plugin<span style="white-space:nowrap"> </span>:</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">sys</span>
<span class="kn">import</span> <span class="nn">os.path</span>
<span class="k">try</span><span class="p">:</span>
<span class="n">sys</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">dirname</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">abspath</span><span class="p">(</span><span class="vm">__file__</span><span class="p">)))</span>
<span class="kn">from</span> <span class="nn">disqus</span> <span class="kn">import</span> <span class="o">*</span>
<span class="n">PLUGINS</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="s2">"disqus_static"</span><span class="p">)</span>
<span class="k">except</span><span class="p">:</span>
<span class="k">pass</span>
</pre></div>
<p>Cela permet de génerer le blog, même si la configuration pour les commentaires
n’est pas présente.</p>
<p>Utiliser le fichier <cite>publish.conf</cite> permet de générer le blog sans faire appel à
l’<span class="caps">API</span> pour éditer le blog, par contre, ceux-ci seront intégrés dès que l’on
lancera la commande <cite>make publish</cite> pour publier le blog.</p>
</div>
<div class="section" id="changement-du-template">
<h2>Changement du template</h2>
<p>Maintenant que tout est prêt, il ne reste plus qu’à modifier son template pour
éviter de charger disqus automatiquement. C’est dommage d’intégrer les
commentaires dans la page, si ceux chargés par disqus sont affichés automatiquement…</p>
<p>Sur mon blog, il faut cliquer sur le bouton pour recharger les commentaires (ou
pour en ajouter de nouveaux). C’est juste un peu de javascript, et vous pouvez
vous inspirer de ce bout de code<span style="white-space:nowrap"> </span>:</p>
<div class="highlight"><pre><span></span>{% if DISQUS_SITENAME %}
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"comments"</span><span class="p">></span>
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Commentaires<span class="ni">&nbsp;</span>:<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"disqus_thread"</span><span class="p">></span>
{% if article.disqus_comments %}
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"post-list"</span><span class="p">></span>
{% for comment in article.disqus_comments recursive %}
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"post"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"post-content"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"avatar hovercard"</span><span class="p">></span>
<span class="p"><</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Avatar"</span> <span class="na">src</span><span class="o">=</span><span class="s">"{{ comment.author.avatar.small.cache }}"</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"post-body"</span><span class="p">></span>
<span class="p"><</span><span class="nt">header</span><span class="p">></span>
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"publisher-anchor-color"</span><span class="p">></span>{{ comment.author.name }}<span class="p"></</span><span class="nt">span</span><span class="p">></span>
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"time-ago"</span> <span class="na">title</span><span class="o">=</span><span class="s">"{{ comment.createdAt }}"</span><span class="p">></span>{{ comment.createdAt }}<span class="p"></</span><span class="nt">span</span><span class="p">></span>
<span class="p"></</span><span class="nt">header</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"post-message-container"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"post-message publisher-anchor-color "</span><span class="p">></span>
{{ comment.message }}
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
{% if comment.children %}
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"children"</span><span class="p">></span>
{{ loop(comment.children) }}
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
{% endif %}
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
{% endfor %}
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
{% else %}
Aucun commentaire pour l'instant.
{% endif %}
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"disqus_comments"</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"load_disqus()"</span><span class="p">></span>recharger<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">></span>
<span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">disqus_identifier</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"{{ article.url }}"</span><span class="p">;</span>
<span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">load_disqus</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">dsq</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'script'</span><span class="p">);</span>
<span class="w"> </span><span class="nx">dsq</span><span class="p">.</span><span class="nx">type</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'text/javascript'</span><span class="p">;</span>
<span class="w"> </span><span class="nx">dsq</span><span class="p">.</span><span class="k">async</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<span class="w"> </span><span class="nx">dsq</span><span class="p">.</span><span class="nx">src</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'//{{ DISQUS_SITENAME }}.disqus.com/embed.js'</span><span class="p">;</span>
<span class="w"> </span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'head'</span><span class="p">)[</span><span class="mf">0</span><span class="p">]</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'body'</span><span class="p">)[</span><span class="mf">0</span><span class="p">]).</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">dsq</span><span class="p">);</span>
<span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">load_button</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'disqus_comments'</span><span class="p">);</span>
<span class="w"> </span><span class="nx">load_button</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">load_button</span><span class="p">);</span>
<span class="w"> </span><span class="p">};</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
{% endif %}
</pre></div>
</div>
Revue du système Sailfish OS (1/2)2015-03-25T00:00:00+01:002015-03-25T00:00:00+01:00Chimrodtag:blog.chimrod.com,2015-03-25:/2015/03/revue-du-systeme-sailfish-os-12/<p class="first last">Petite revue du développement et de la sécurité du système
d'exploitation Sailfish, suite à la diffusion de ma première
application.</p>
<div class="floatleft figure" style="width: 150px">
<img alt="Logo de sailfish OS" src="//blog.chimrod.com/images/sailfish/sailfish.jpg" />
<p class="caption">Logo de sailfish <span class="caps">OS</span></p>
</div>
<p>J’ai publié la semaine dernière ma première application pour Sailfish <span class="caps">OS</span>. Il
s’agit du système qui tourne sur les téléphones Jolla. Ce petit jeu permet de
charger des problèmes de go déjà préparés, pour ensuite les tester et
rechercher la solution. La première version a été publiée sur le site
<a class="reference external" href="https://openrepos.net/content/chimrod/tsumego">openrepos.net</a> la semaine dernière, pour la première version du jeu avec les
fonctionnalités que je souhaitais. C’est l’occasion de faire une petite revue
du développement pour Sailfish <span class="caps">OS</span>.</p>
<div class="section" id="presentation">
<h2>Présentation</h2>
<p>Sailfish <span class="caps">OS</span> est un système d’exploitation tournant sur le téléphone <a class="reference external" href="https://fr.wikipedia.org/wiki/Jolla">Jolla</a>. Le
système est construit en utilisant Qt et Wayland pour la partie graphique. Un
terminal est nativement disponible sur le téléphone, et la connexion ssh est
prévue sans qu’il ne soit nécessaire d’installer quoi que ce soit. On peut donc
dire qu’un bidouilleur sous linux retrouve facilement ses marques sur le
téléphone et le système.</p>
</div>
<div class="section" id="l-ide">
<h2>L’ide</h2>
<p>Les développeurs ont eut le bon gout d’utiliser des technologies existantes
pour faire l’environnement de développement. On dispose donc d’un package
comprenant<span style="white-space:nowrap"> </span>:</p>
<ul class="simple">
<li>Une <span class="caps">IDE</span> — Qt Creator</li>
<li>Une machine virtuelle pour faire la compilation vers <span class="caps">ARM</span></li>
<li>Une machine virtuelle pour émuler le téléphone.</li>
</ul>
<p>Le développement se fait donc en <span class="caps">QML</span>, et un binding python est également disponible.</p>
<div class="figure">
<img alt="Capture d'écran de l'environnement de travail" src="//blog.chimrod.com/images/sailfish/ide.jpg" />
<p class="caption">Capture d’écran de l’environnement de travail</p>
</div>
<p>Des exemples sont fournis, permettant de lancer quelques applications,
principalement en <span class="caps">QML</span> et javascript<span style="white-space:nowrap"> </span>; la partie C++ est limitée au lancement de l’application.</p>
<p>On peut remarquer des incohérences autorisées par l’éditeur et le compilateur
dans l’agencement des composants — par exemple il est possible de mettre un
composant «<span style="white-space:nowrap"> </span>page<span style="white-space:nowrap"> </span>» dans un autre composant «<span style="white-space:nowrap"> </span>page<span style="white-space:nowrap"> </span>» ce qui provoque des erreurs
à l’affichage ou dans le comportement. Quand on a pris l’habitude des langages
fortement typés où le compilateur bloque tout programme mal structuré, ça
agace… Il s’agit d’un problème dans l’éditeur Qt Creator et non sur le système
mais pour un développeur qui ne connaît pas, ce genre de problème met du temps
avant d’être compris et résolu.</p>
</div>
<div class="section" id="les-composants">
<h2>Les composants</h2>
<p>L’interface de Sailfish est construite en enrichissant la base Qt de nouveaux
composants, qui correspondent à l’interface du téléphone. Il est donc facile de
construire une application qui s’intègre dans l’ergonomie du téléphone, puisque
l’utilisation des composants standards va donner une base à la fois sur
l’aspect visuel, mais également concernant la partie interactivité.</p>
<p>Il est facile d’intégrer une application existante pour le téléphone. Par
exemple <a class="reference external" href="https://github.com/gpodder">gPodder</a> est présent à la fois sur <a class="reference external" href="https://github.com/gpodder/gpodder-android">android</a> et <a class="reference external" href="https://github.com/gpodder/gpodder-sailfish">sailfish</a>, seule
l’interface graphique diffère entre les deux projets.</p>
<p>Il est facile de coder en Python grâce à la librairie <a class="reference external" href="http://thp.io/2011/pyotherside/">PyOtherSide</a>, qui permet
de faire la liaison entre la partie <span class="caps">QML</span> et du code python. Sans toucher au C++,
on dispose donc des briques nécessaires pour pouvoir se faire une application
complète assez rapidement.</p>
</div>
<div class="section" id="la-documentation">
<h2>La documentation</h2>
<p>La documentation ne couvre que la partie composant graphique de <span class="caps">QML</span>. Les
composants propres au système Sailfish <span class="caps">OS</span> sont bien décrits et l’aide est
intégrée à Qt Creator sans qu’il soit nécessaire d’aller chercher sur le net
(la documentation autrefois disponible en ligne a été retirée lors de la
dernière diffusion de l’environnement de développement<span style="white-space:nowrap"> </span>; on trouve donc de
nombreux liens qui pointent désormais vers des pages inaccessibles…)</p>
<p>Par contre, le fonctionnement des binding python (par exemple) n’est pas
couvert, et il est nécessaire de parcourir le code des autres projets pour
comprendre comment utiliser telle fonctionnalité.</p>
</div>
<div class="section" id="la-compilation">
<h2>La compilation</h2>
<p>À travers quelques clics, il est facile de changer la cible de la compilation<span style="white-space:nowrap"> </span>:</p>
<ul class="simple">
<li>Un exécutable à lancer dans l’émulateur</li>
<li>Un <span class="caps">RPM</span> à destination d’une plate-forme <span class="caps">ARM</span></li>
<li>Un <span class="caps">RPM</span> pour une architecture locale</li>
</ul>
<p>Comme dit plus haut, je n’ai pas testé l’écriture d’application C++, cela
facilite la chaîne de compilation… Si l’on se contente d’une application
Python, on dispose alors d’une chaîne de compilation très facile à mettre en place.</p>
</div>
<div class="section" id="bilan">
<h2>Bilan</h2>
<p>Je n’ai eu aucun problème à installer et lancer l’environnement de
développement. Tout fonctionne correctement dès l’installation sans rien avoir
à configurer.</p>
<p>Les technologies utilisées sont plutôt bien choisies (au moins pour quelqu’un
qui a déjà son <span class="caps">PC</span> sous linux), et actuelles. Je pense que le pari d’avoir
choisi Qt est gagnant, autant pour l’équipe de développement du système, qui
dispose déjà d’un environnement bien construit que pour le développeur
d’application qui trouve facilement de la documentation pour son besoin. On
sent par contre la jeunesse de l’environnement à travers les petits problèmes
mentionnés ci-dessus.</p>
<p>L’émulateur tourne dans une image virtualbox. Il est possible de se connecter à
la machine via ssh, ce qui permet d’accéder au système, il n’y a pas de
limitation d’accès et il est possible d’être root comme sur le téléphone.</p>
<p>Sur mon poste, l’environnement est beaucoup plus lent que le téléphone, il est
parfois nécessaire d’attendre un moment avant de charger une page et qu’une
animation se termine.</p>
<p>J’aborderai dans un autre article la question de la sécurité des applications.</p>
</div>
Se créer un thème de couleur dans son terminal2014-05-18T00:00:00+02:002014-05-18T00:00:00+02:00Chimrodtag:blog.chimrod.com,2014-05-18:/2014/05/se-creer-un-theme-de-couleur-dans-son-terminal/<p class="first last">Quand on utilise un terminal tous les jours, on a envie de l'adapter en
fonction de ses goûts. Il existe beaucoup de thèmes disponibles sur le net
qui permettent de le configurer à sa guise, mais rien qui n'explique
comment en créer un nouveau.</p>
<div class="floatleft figure" style="width: 150px">
<img alt="Palette" src="//blog.chimrod.com/images/palette_150.jpg" />
<p class="caption">Image<span style="white-space:nowrap"> </span>: <a class="reference external" href="https://www.flickr.com/photos/hafsacreations/3241957057/">Hafsa Nabeel</a> (<a class="reference external" href="http://creativecommons.org/licenses/by-nc-nd/2.0/">creativecommons</a>)</p>
</div>
<p>Il est assez facile de se créer un thème de couleur pour son terminal. La
plupart du temps on trouve des thèmes à copier qui contiennent la liste des
couleurs à utiliser, mais il est rarement expliqué comment faire pour en créer
un nouveau. C’est pourtant assez simple une fois que l’on a compris les bases.</p>
<div class="section" id="les-bases">
<h2>Les bases</h2>
<p>La plupart des terminaux peuvent afficher 256 couleurs ou plus, mais le shell
n’a besoin que de six couleurs de base (auxquelles viennent s’ajouter le blanc
et le noir que je ne traite pas ici). Il s’agit des trois couleurs primaires,
et les trois couleurs secondaires, que l’on peut représenter la palette sous
forme de tableau (dans l’ordre d’index utilisé dans un terminal) :</p>
<table cellspacing="2" cellpadding="3" border="1">
<tbody>
<tr>
<th scope="row">Couleur</th>
<td width="15%">Rouge</td>
<td width="15%">Vert</td>
<td width="15%">Jaune</td>
<td width="15%">Bleu</td>
<td width="15%">Magenta</td>
<td width="15%">Cyan</td>
</tr>
<tr>
<th scope="row">Clair</th>
<td bgcolor="Red"></td>
<td bgcolor=#00FF00></td>
<td bgcolor="Yellow"></td>
<td bgcolor="Blue"></td>
<td bgcolor="Fuchsia"></td>
<td bgcolor="Aqua"></td>
</tr>
<tr>
<th scope="row">Sombre</th>
<td bgcolor=#800000></td>
<td bgcolor=#008000></td>
<td bgcolor=#808000></td>
<td bgcolor=#000080></td>
<td bgcolor=#800080></td>
<td bgcolor=#008080></td>
</tr>
</tbody></table><p>Cette représentation sous forme de tableau présente l’avantage de montrer deux
caractéristiques<span style="white-space:nowrap"> </span>: le nombre de couleurs de base est limité, et la variante
sombre ou claire consiste juste à changer la luminosité.</p>
</div>
<div class="section" id="construire-le-theme">
<h2>Construire le thème</h2>
<p>Nous allons créer deux thèmes<span style="white-space:nowrap"> </span>: un clair et un sombre.</p>
<p>Pour faire un thème homogène, il va falloir respecter deux règles<span style="white-space:nowrap"> </span>:</p>
<ul class="simple">
<li>Chaque couleur devra avoir la même luminosité que les autres couleurs
du thème<span style="white-space:nowrap"> </span>: il ne faut pas qu’une couleur éclate davantage que les autres.</li>
<li>Chaque couleur devra occuper le même espace<a class="footnote-reference" href="#footnote-1" id="footnote-reference-1"><sup>1</sup></a> dans le cercle
colorimétrique<span style="white-space:nowrap"> </span>: il ne faut pas que deux couleurs semblent proches au point
de les confondre.</li>
</ul>
<p>Pour respecter ces deux contraintes, nous allons être obligé de construire
notre thème via une application, qui sera plus à même que nous de respecter ces
deux contraintes.</p>
</div>
<div class="section" id="la-representation-des-couleurs">
<h2>La représentation des couleurs</h2>
<p>Il existe plusieurs manières de représenter les couleurs en informatique, la
plus connue est la <a class="reference external" href="https://fr.wikipedia.org/wiki/Rouge_vert_bleu">représentation <span class="caps">RGB</span></a>, mais celle-ci n’est pas très pratique
dans notre cas d’utilisation<span style="white-space:nowrap"> </span>: en effet il n’est pas possible en utilisant
cette représentation de passer facilement de la teinte claire à sombre. Nous
allons nous intéresser ici à la représentation <a class="reference external" href="https://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur">Teinte/Saturation/Valeur</a> qui
présente l’avantage de séparer la teinte d’une couleur de sa luminosité.</p>
<p>Selon la codification <span class="caps">TSL</span>, chaque teinte de couleur est séparée de 60°. Il
faudra donc conserver cet écart dans notre thème final. Par contre nous avons
la possibilité d’appliquer une rotation du cercle pour faire varier la teinte
des couleurs, c’est ce qui donnera les couleurs de notre thème. Il ne nous
reste plus qu’à définir les valeurs de saturation/valeur pour le thème clair et
le thème sombre.</p>
<p>Après tout le reste n’est que conversion d’un système de représentation à un
autre, ce qui peut se faire tout seul avec un petit script.</p>
</div>
<div class="section" id="le-resultat">
<h2>Le résultat</h2>
<p>Le script est écrit en python et peut être <a class="reference external" href="//blog.chimrod.com/resources/colors.py">téléchargé ici</a>, il reçoit 5
paramètres, et écrit sur la sortie la configuration pouvant être utilisée avec
<cite>rxvt</cite> et <cite>xterm</cite>, deux émulateurs de terminaux permettant un bon niveau de configuration.</p>
<table border="1" class="docutils">
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<thead valign="bottom">
<tr><th class="head">décalage</th>
<th class="head">saturation claire</th>
<th class="head">saturation sombre</th>
<th class="head">valeur claire</th>
<th class="head">valeur sombre</th>
</tr>
</thead>
<tbody valign="top">
<tr><td>30</td>
<td>60</td>
<td>50</td>
<td>90</td>
<td>70</td>
</tr>
</tbody>
</table>
<p>Ce qui donnera l’exécution suivante<span style="white-space:nowrap"> </span>:</p>
<div class="highlight"><pre><span></span>$<span class="w"> </span>python<span class="w"> </span>colors.py<span class="w"> </span><span class="m">30</span><span class="w"> </span><span class="m">60</span><span class="w"> </span><span class="m">50</span><span class="w"> </span><span class="m">90</span><span class="w"> </span><span class="m">70</span>
</pre></div>
<p>Il est possible de modifier les couleurs sans enregistrer le paramétrage
définitivement en passant la sortie du script à <cite>xrdb</cite> avant d’ouvrir un
nouveau terminal<span style="white-space:nowrap"> </span>:</p>
<div class="highlight"><pre><span></span>$<span class="w"> </span>python<span class="w"> </span>colors.py<span class="w"> </span><span class="m">30</span><span class="w"> </span><span class="m">60</span><span class="w"> </span><span class="m">50</span><span class="w"> </span><span class="m">90</span><span class="w"> </span><span class="m">70</span><span class="w"> </span><span class="p">|</span><span class="w"> </span>xrdb<span class="w"> </span>-override
</pre></div>
<p>Si vous voulez appliquer ce paramétrage définitement, il faut l’enregistrer
dans le fichier <cite>~/.Xdefaults</cite></p>
<p>Le résulat des couleurs générées avec les valeurs définies ci-dessus<span style="white-space:nowrap"> </span>:</p>
<table cellspacing="2" cellpadding="3" border="1">
<tbody>
<tr>
<th scope="row">Couleur</th>
<td width="15%">Rouge</td>
<td width="15%">Vert</td>
<td width="15%">Jaune</td>
<td width="15%">Bleu</td>
<td width="15%">Magenta</td>
<td width="15%">Cyan</td>
</tr>
<tr>
<th scope="row">Clair</th>
<td bgcolor=#e6175c></td>
<td bgcolor=#a1e65c></td>
<td bgcolor=#e6a15c></td>
<td bgcolor=#5ca1e6></td>
<td bgcolor=#a15ce6></td>
<td bgcolor=#5ce6a1></td>
</tr>
<tr>
<th scope="row">Sombre</th>
<td bgcolor=#b32c59></td>
<td bgcolor=#86b359></td>
<td bgcolor=#b38659></td>
<td bgcolor=#5986b3></td>
<td bgcolor=#8659b3></td>
<td bgcolor=#59b386></td>
</tr>
</tbody></table><p>Et voilà ce que ça donne en réeel<span style="white-space:nowrap"> </span>: des couleurs plutôt douces et claires qui
n’agressent pas les yeux ^^</p>
<img alt="caputre d'écran" class="center" src="//blog.chimrod.com/images/Capture-terminal.png" />
<p>Vous pouvez à votre tour essayer d’autres combinaisons pour vous créer votre
propre palette à utiliser dans votre terminal.</p>
<table class="docutils footnote" frame="void" id="footnote-1" rules="none">
<colgroup><col class="label" /><col /></colgroup>
<tbody valign="top">
<tr><td class="label"><a class="fn-backref" href="#footnote-reference-1">[1]</a></td><td><p class="first">On peut concevoir l’ensembre des couleurs comme un système, c’est-à-dire un
ensemble d’éléments interdépendants les uns des autres<span style="white-space:nowrap"> </span>: l’espace occupé
par un élément correspond à l’espace qui n’est pas pris par l’ensemble des
autres éléments.</p>
<p class="last">Comme les six couleurs de base sont uniformément réparties dans le cercle
colorimétrique, il faut que notre thème final conserve cette répartition.</p>
</td></tr>
</tbody>
</table>
</div>