The git repo behind my blog.

index.html 32KB

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Phyks' blog - 2013</title>
  6. <link rel="stylesheet" href="//"/>
  7. <link type="text/plain" rel="author" href="//"/>
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <link rel="alternate" type="application/rss+xml" title="RSS" href="//" />
  10. </head>
  11. <body>
  12. <div id="wrapper">
  13. <!-- Sidebar -->
  14. <aside id="sidebar-wrapper">
  15. <header><h1><a href="//">~Phyks</a></h1></header>
  16. <h2>Catégories</h2>
  17. <nav id="sidebar-tags">
  18. <div class="tag"><a href="//">/Arch (2)</a> </div><div class="tag"><a href="//ébergement.html">/Autohébergement (3)</a> </div><div class="tag"><a href="//">/Dev (7)</a> </div><div class="tag"><a href="//">/DIY (2)</a> </div><div class="tag"><a href="//Électronique.html">/Électronique (2)</a> </div><div class="tag"><a href="//">/Libre (7)</a> </div><div class="tag"><a href="//">/Linux (5)</a> </div><div class="tag"><a href="//">/Phyks (7)</a> </div><div class="tag"><a href="//">/Smartphone (2)</a> </div><div class="tag"><a href="//">/Vim (1)</a> </div><div class="tag"><a href="//">/Web (6)</a> </div><div class="tag"><a href="//">/Weechat (2)</a> </div>
  19. </nav>
  20. <h2>Derniers articles</h2>
  21. <ul id="sidebar-articles">
  22. <li><a href="//">Utiliser son PC sous Arch pour connecter un Raspberry Pi à Internet</a></li><li><a href="//">Sortez vos emails, c'est pas sale&nbsp;!</a></li><li><a href="//">Synchroniser ses ordinateurs 1/2</a></li><li><a href="//">Les énigmes du réseau Free Mobile</a></li><li><a href="//">Recevoir ses emails par SMS avec Free Mobile</a></li><li><a href="//">Archives</a></li>
  23. </ul>
  24. <h2>Liens</h2>
  25. <ul id="sidebar-links">
  26. <li><a href="//" title="Contact">Me contacter</a></li>
  27. <li class="monospace"><a href="//" title="Mon Shaarli">find ~phyks -type l</a></li>
  28. <li><a href="" title="Github">Mon Github</a></li>
  29. <li><a href="//" title="Divers">Divers</a></li>
  30. </ul>
  31. </aside>
  32. <!-- Page content -->
  33. <header id="header">
  34. <h1><a href="//">~Phyks</a></h1>
  35. </header>
  36. <div id="note_responsive">
  37. <p><em>Note</em> : Cliquez sur la bande bleue à gauche pour faire apparaître le menu.</p>
  38. </div>
  39. <div id="articles">
  40. <article>
  41. <aside>
  42. <p class="day">25</p>
  43. <p class="month">Décembre</p>
  44. </aside>
  45. <div class="article">
  46. <header><h1 class="article_title"><a href="//">Page sur l'autohébergement mise à jour</a></h1></header>
  47. <!--
  48. @author=Phyks
  49. @date=25122013-2327
  50. @title=Page sur l'autohébergement mise à jour
  51. @tags=Autohébergement
  52. -->
  53. <p>Juste un (très) court article pour signaler que je me suis (enfin) décidé à vider ma todo-list. En particulier, je viens de reprendre <a href="">ma page sur l'autohébergement</a> que je n'avais pas terminée et qui trainait sur mon serveur. J'ai déjà commencé par rajouter un peu de CSS, et rien que ça, ça change tout ! :)</p>
  54. <p>Cette page doit me servir de mémo si j'ai besoin de réinstaller mon serveur et fournit tout un tas de lien et d'astuces diverses pour quiconque voudrait se lancer dans l'autohébergement. Je la mettrai à jour au fur et à mesure des évolutions sur mon serveur et des nouveaux scripts que je découvrirai.</p>
  55. <p>Cette page va de pair avec les tags <a href="">AutoHébergement</a> et <a href="">Serveur</a> sur <a href="">mon shaarli</a>.</p>
  56. <p>En espérant que ça serve à quelqu'un (et puis sinon, tant pis..., ça me servira toujours à moi :)... (n'ayant <em>volontairement</em> pas de stats sur mon serveur, je ne sais pas si ça servira à quelqu'un ou pas :)</p>
  57. <footer><p class="date">Le 25/12/2013 à 23:27</p>
  58. <p class="tags">Tags : <a href="//ébergement.html">Autohébergement</a></p></footer>
  59. </div>
  60. </article>
  61. <article>
  62. <aside>
  63. <p class="day">25</p>
  64. <p class="month">Décembre</p>
  65. </aside>
  66. <div class="article">
  67. <header><h1 class="article_title"><a href="//">Hilight window in weechat</a></h1></header>
  68. <!--
  69. @author=Phyks
  70. @date=25122013-0133
  71. @title=Hilight window in weechat
  72. @tags=Weechat
  73. -->
  74. <p>I recently moved from Irssi+Screen to Weechat+Screen (and I'm planning to look at weechat interfaces in the future, to have a local irc client connecting to my server and avoid any latency while typing on low speed internet connection). My first step was to get almost the same setup as irssi. I'm very pleased with what I achieved, and weechat is definitely an excellent irc client, although it lacks a bit of usable documentation sometimes…</p>
  75. <p>To get something like my old irssi, I had to install some extensions, including :</p>
  76. <ul>
  77. <li>text_effects.lua to have some inline text decoration such as *bold* to display bold in bold</li>
  78. <li> to have a list of opened buffers</li>
  79. <li> to set configuration options easily</li>
  80. <li> (which is very efficient !) to auto away when I detach my screen session</li>
  81. </ul>
  82. <p>I extensively used <a href="">this link</a> and the other articles on weechat on this website, which is a reference in my opinion, to get a working base weechat configuration.</p>
  83. <p>But, one point that wasn't documented very well, is the use of a hilight window without dedicating a buffer to it. Dedicating a buffer to the hilight window means having an opened buffer in the main window, which is useless. You always select it accidentally by typing the wrong number for another buffer, and it's hidous in your buffer list (even though you can hide it from there). I don't know if this could be done in irssi, but in weechat, you can set highmon to use a bar instead of a buffer to display the "hilight window" and this is what we'll see in the following. I will assume you start with highmon plugin installed and configured, with a hilight window such as the one from Pascal Poitras.</p>
  84. <p>So, first step is to tell highmon to use a bar for output instead of the standard buffer :</p>
  85. <pre>/set plugins.var.perl.highmon.output bar</pre>
  86. <p>Highmon should have created a bar automatically, to put the messages in. Check* options to make sure it did. Next, type :</p>
  87. <pre>/set plugins.var.perl.highmon.bar_lines 250</pre>
  88. <p>to set the number of lines to be stored in your freshly created bar.</p>
  89. <p>Then, you can edit all the preferences for the bar (size, size_max, position, priority, hide etc.) as for a standard bar, using* options. Note that priority is important if you have to bars having the same position. For instance, if two bars are positioned at the top, the priority property will determine which one is above the other one.</p>
  90. <p>One last point is that we'd like to have a title for the new hilight bar (which by default doesn't have any title). The hack is to use another plugin, to display a bar with some text. To make a title "[Hilight Monitor]", just run (after having installed</p>
  91. <pre>/set plugins.var.python.text_item.hilight_monitor_title_text all "[Hilight Monitor]"
  92. /bar add highmon_title top 1 0 hilight_monitor_title_text
  93. </pre>
  94. <p>And play with the position, priority and colors for the newly created bar to have a nice setup :)</p>
  95. <p>One last important thing is that, contrary to the buffer solution, you won't be able to clean easily the hilight window and to scroll in it. But, I found two aliases on #weechat (ty @silverd for the aliases) that you can bind to any key if you want:</p>
  96. <pre>/alias clear_highmon /mute /set plugins.var.perl.highmon.bar_lines -1;/mute /set "";/mute /set "highmon";/mute /set plugins.var.perl.highmon.bar_lines 250
  97. /alias scroll_highmon_down /bar scroll highmon * y+100%
  98. /alias scroll_highmon_up /bar scroll highmon * y-100%
  99. </pre>
  100. <p>You can now clear the hilight window with /clear_highmon and scroll in it with the other aliases. So, I think you are good to go for a (quite) perfect weechat setup :)</p>
  101. <p><strong>Update:</strong></p>
  102. <ul>
  103. <li>You can define your own keyboard shortcut in the following way:
  104. <pre>/key bind KEY /scroll_highmon</pre>
  105. where KEY is some key or combination of key (for instance meta-meta2-A or whatever you want). You can do the same for <span class="monospace">/clear_highmon</span> and <span class="monospace">/scroll_highmon_up</span>.
  106. </li>
  107. <li>By default, the highmon bar won't autoscroll. To enable autoscroll, you should set <span class="monospace">plugins.var.perl.highmon.bar_scrolldown</span> to <span class="monospace">on</span>.</li>
  108. </ul>
  109. <footer><p class="date">Le 25/12/2013 à 01:33</p>
  110. <p class="tags">Tags : <a href="//">Weechat</a></p></footer>
  111. </div>
  112. </article>
  113. <article>
  114. <aside>
  115. <p class="day">24</p>
  116. <p class="month">Décembre</p>
  117. </aside>
  118. <div class="article">
  119. <header><h1 class="article_title"><a href="//">Papa Nawel surprise des shaarlieurs</a></h1></header>
  120. <!--
  121. @author=Phyks
  122. @date=24122013-1800
  123. @title=Papa Nawel surprise des shaarlieurs
  124. @tags=Phyks
  125. -->
  126. <p>J'ai participé à l'iniative de Yome <a href="">Papa Nawel des shaarlieurs</a> et j'ai reçu mon cadeau aujourd'hui de <a href="">Knah Tsaeb</a>, après quelques déboires avec la Poste.</p>
  127. <p>Il m'a offert six humble bundle. Je connaissais de nom, mais je n'ai encore jamais expérimenté les humble bundle, ça sera l'occasion ! Merci beaucoup à toi, Knah Tsaeb !</p>
  128. <p>Du coup, j'en profite pour faire un petit article avec le déballage :)</p>
  129. <p class="center">Avant :<br/>
  130. <a href="//"><img style="max-width: 45%; max-height: 500px;" src="//" alt="Déballage, avant"/></a>
  131. </p>
  132. <p class="center">Après :<br/>
  133. <a href="//"><img style="max-width: 45%; max-height: 500px;" src="//" alt="Déballage, avant"/></a>
  134. </p>
  135. <footer><p class="date">Le 24/12/2013 à 18:00</p>
  136. <p class="tags">Tags : <a href="//">Phyks</a></p></footer>
  137. </div>
  138. </article>
  139. <article>
  140. <aside>
  141. <p class="day">10</p>
  142. <p class="month">Décembre</p>
  143. </aside>
  144. <div class="article">
  145. <header><h1 class="article_title"><a href="//">Libre et difficultés</a></h1></header>
  146. <!--
  147. @author=Phyks
  148. @date=10122013-1800
  149. @title=Libre et difficultés
  150. @tags=Libre
  151. -->
  152. <p>J'ai récemment vu passer <a href="">cet article de</a> (Notre Mai-68 numérique est devenu un grille-pain fasciste) sur quelques shaarlis et <a href="">cet autre article</a> (Éloge funèbre d'un Internet libre et ouvert, par son assassin) sur le blog d'alias.</p>
  153. <p>Une phrase dans ce dernier article reprend une idée classique selon laquelle le libre n'est qu'un "truc de barbus", qu'il faut déjà faire partie des barbus pour utiliser un logiciel libre, étant donné l'attention portée à l'interface, etc.</p>
  154. <blockquote>Mais je reste persuadé que, pour cela, il va falloir faire changer beaucoup de mentalités: d’une part, celle des utilisateurs, qu’ils prennent conscience du danger des systèmes fermés et centralisés, mais aussi des communautés hacker/open-source, qui doivent faire de gros efforts de simplification et de pédagogie pour faire des produits que même les plus technophobes voudront utiliser.</blockquote>
  155. <p>Personnellement (et de toutes façons, ce billet ne sera qu'un avis personnel sur la question), je l'avoue, je n'aime pas développer d'interface. Je ne suis pas un fabuleux <em>UI designer</em> et une fois que j'ai un code fonctionnel, j'admet volontiers que j'ai tendance à m'en désintéresser, étant capable de l'utiliser et n'ayant pas le temps de développer plus le côté <em>user-friendly</em>. C'est certainement dommage, mais ce n'est pas ce qui m'intéresse... Mais ce n'est pas le cas de toute la communauté du libre, heureusement.</p>
  156. <p>Ainsi, on peut citer la fondation Mozilla qui a voulu (et a réussi à !) conquérir les Mme Michu avec son navigateur open-source : Firefox. De même, LibreOffice fonctionne très bien et est de plus en plus adopté par des gens qui ne sont pas technophiles du tout.</p>
  157. <p>En revanche, en s'engageant dans cette voie et en cherchant à séduire Mme Michu à tout prix, on court le risque de simplifier à l'extrême les développements, afin d'être à la portée de tous. On aboutit alors à une merveilleuse interface graphique à trois boutons, qui va certes séduire tout le monde, mais ne couvrira que 0.00(insérer autant de 0 que vous voulez ici)0001% du logiciel. On pensera notamment à toutes les surcouches à ffmpeg, qui ne vous apprennent en rien à utiliser ffmpeg, vous limitent les options disponibles plus qu'autre chose et surtout vous cache tout ce qui se passe en arrière-plan.Faut-il alors au contraire garder l'esthétique de la ligne de commande et former l'utilisateur à utiliser le logiciel, et à comprendre ce qu'il se passe en arrière-plan ? Pas sûr que ce ne soit une meilleure idée non plus...</p>
  158. <p>La question est également de savoir à quoi vise l'open-source. Le but est-il de fournir des logiciels adaptés aux <em>end-users</em> ? Vu le travail à fournir, cela voudrait dire diviser considérablement le nombre de scripts et de programmes. Ou alors faut-il garder cette multitude de logiciels et laisser les utilisateurs les plus doués techniquement trier et adapter ceux qu'ils jugent réellement nécessaires pour tout le monde ? De plus, un logiciel avec une interface graphique rudimentaire, voire en ligne de commande, laisse transparaître complètement ce qu'il se passe en arrière-plan. L'utilisateur a un contrôle total sur les actions du logiciel et peut appréhender l'ensemble des options.</p>
  159. <p>C'est à mon avis un des principaux intérêts de l'open-source : permettre aux utilisateurs de comprendre comment cela fonctionne et ce qu'il se passe derrière l'interface graphique. Alors certes, c'est rebutant et c'est dur au début, mais n'est-ce pas parfaitement réjouissant d'enfin comprendre comment fonctionne la machine ? J'ai personnellement plus appris en me débrouillant pour faire fonctionner des logiciels open-source (mais j'en ai également beaucoup abandonnés faute de documentation suffisante) qu'en cliquant sur un bouton pour avoir ce que je voulais (et la plupart des personnes qui découvrent la ligne de commande, qui commencent à programmer un peu, et qui comprennent alors réellement ce qu'est vraiment un "bug", dans mon entourage, me le confirme). Cliquer sur un bouton ne vous apprendra jamais à vous débrouiller seul, et ce n'est nullement rendre un service aux utilisateurs à mon avis. Cliquer sur un bouton pour que ça fonctionne, c'est pratique à 90% du temps, et ça permet d'aller plus vite sur certaines actions, mais ce n'est <strong>pas</strong> utiliser son ordinateur à mon avis, ce n'est qu'utiliser une infime partie des possibilités de l'ordinateur. (Et ne parlons même pas des cours d'"informatique" dans lesquels vous apprenez à utiliser Word... ce n'est <strong>pas</strong> de l'informatique...)</p>
  160. <p>Après, je ne suis pas d'accord sur le fait que la communauté open-source / hackers / geeks soit hermétique et fermée. Personnellement, je suis prêt à passer du temps à aider quiconque voudrait un coup de main, mais je ne veux pas le faire pour rien. Et le problème est sûrement plutôt de ce côté-là. Combien d'utilisateurs veulent "juste un système qui marche" ? Combien d'utilisateurs veulent mettre leur cerveau de côté et cliquer sur des bonbons rigolos et colorés dans un jeu bien connu sur un réseau social tout aussi connu plutôt que de comprendre ce qu'il se passe derrière ? Combien d'utilisateurs sont prêts à passer sous Linux en conchiant les idées et la philosophie associés ? J'avoue que dans ces situations, j'ai juste l'impression de me faire exploiter, et je n'ai aucune ambition d'ouvrir un service d'assistance informatique prochainement. Je pense que le problème est principalement à ce niveau, entre la différence de compréhension et d'appréhension de l'ordinateur par les différentes communautés, qui du coup, n'arrivent pas à échanger.</p>
  161. <p>Cf <a href="">ce comic parfaitement illustratif :)</a></p>
  162. <footer><p class="date">Le 10/12/2013 à 18:00</p>
  163. <p class="tags">Tags : <a href="//">Libre</a></p></footer>
  164. </div>
  165. </article>
  166. <article>
  167. <aside>
  168. <p class="day">02</p>
  169. <p class="month">Décembre</p>
  170. </aside>
  171. <div class="article">
  172. <header><h1 class="article_title"><a href="//">Graver un <em>bootloader</em> sur ATmega8</a></h1></header>
  173. <!--
  174. @author=Phyks
  175. @date=02122013-1502
  176. @title=Graver un <em>bootloader</em> sur ATmega8
  177. @tags=DIY, Électronique
  178. -->
  179. <p>Pour un projet avec mon <em>hacklab</em> <a href="">hackEns</a> (éclairage de façades avec des LEDs de puissance, dans la même veine que <a href="">AllColorsAreBeautiful</a> du CCC, voir <a href="">cette page</a> pour plus d'infos), on a eu besoin de graver 30 <em>bootloaders</em> sur des ATmega8. On n'a pas de programmateur et on le fait donc avec des Arduinos. Comme toujours, il nous a fallu 2h de debug avant de graver le premier :) (mais cette fois, ça a été rentable avec 30 <em>bootloaders</em> gravés d'un coup !).</p>
  180. <p>Du coup, je fais une petite compil' des liens qui marchent et des trucs importants à vérifier pour ne pas perdre deux heures (les messages d'erreur du soft Arduino étant *tellement* explicites... et il y a 10 méthodes différentes, chacune aboutissant à une erreur différente sur le net).</p>
  181. <p>Tout d'abord, un bon lien qui marche bien : <a href="">ArduinoToBreadboard</a> dans la doc Arduino. Les montages sont clairs et ont été testé par moi-même ces derniers jours :).</p>
  182. <h2>Gravure de <em>bootloader</em></h2>
  183. <p style="text-align: center;">
  184. <a href=""><img style="max-width: 45%; max-height: 500px;" src="" alt="Montage pour graver le bootloader"/></a> <a href="//"><img style="max-width: 45%; max-height: 500px;" src="//" alt="Montage pour graver le bootloader, in situ"/></a>
  185. </p>
  186. <h2>Envoi de programmes</h2>
  187. <p style="text-align: center;">
  188. <a href="//"><img src="//" alt="Montage pour l'upload" style="max-width: 45%; max-height: 500px;"/></a> <a href="//"><img style="max-width: 45%; max-height: 500px;" src="//" alt="Montage pour l'upload"/></a>
  189. </p>
  190. <h2>Notes diverses</h2>
  191. <ul>
  192. <li>Testé avec un Arduino Uno comme programmateur, sans capacités ni résistances sur les pins de <em>reset</em>. Et ça fonctionne ! Par contre, on a eu des problèmes avec un Arduino Mega, donc on est resté sur l'Uno (sans chercher plus, sûrement un problème de <em>reset</em> automatique).</li>
  193. <li>Si ça ne marche pas, vérifier que l'ATmega est bien enfoncé dans la <em>breadboard</em> ! C'est stupide, mais on oublie une fois sur deux... :)</li>
  194. <li>Hyper important ! Sur le montage pour graver le <em>bootloader</em>, la résistance au <em>reset</em> est en <em>pull-up</em> (connectée au 5V) et non en <em>pull-down</em> (connectée au GND). J'ai perdu 1h là-dessus...</li>
  195. <li>Testé et approuvé avec la dernière version du soft Arduino et du <em>sketch</em> ArduinoISP. Pas besoin d'une vieille version a priori.</li>
  196. <li>Si ça ne marche toujours pas, bien vérifier le montage, encore et encore :)</li>
  197. <li>Mieux vaut utiliser le soft Arduino que la ligne de commande avec <samp>avrdude</samp>. En effet, Arduino gère tout seul les <em>fuse bits</em> (utilisation d'un cristal externe, temps de démarrage, protection du <em>bootloader</em>) et c'est donc moins prise de tête. Sinon, pour les calculer, c'est <a href="">par ici</a> et <a href="">par ici</a> pour plus d'infos sur l'utilisation d'un quartz externe.</li>
  198. <li>Lorsque le <em>bootloader</em> est gravé, pour envoyer des programmes facilement, il faut qu'il puisse <em>reset</em> sur serial (sinon, il faut faire un <em>reset</em> manuel à chaque fois). Pour ça, il faut mettre une capacité et une résistance sur le pin de <em>reset</em> (cf schematics des Arduino).</li>
  199. </ul>
  200. <footer><p class="date">Le 02/12/2013 à 15:02</p>
  201. <p class="tags">Tags : <a href="//">DIY</a>, <a href="//Électronique.html">Électronique</a></p></footer>
  202. </div>
  203. </article>
  204. <article>
  205. <aside>
  206. <p class="day">17</p>
  207. <p class="month">Novembre</p>
  208. </aside>
  209. <div class="article">
  210. <header><h1 class="article_title"><a href="//">Decrypt multiple LUKS containers at boot on Arch</a></h1></header>
  211. <!--
  212. @author=Phyks
  213. @date=17112013-0800
  214. @title=Decrypt multiple LUKS containers at boot on Arch
  215. @tags=Arch, Linux
  216. -->
  217. <p>I installed Arch on my laptop with a LVM on LUKS setup. But I've two disks on my laptop (so this means at least two LUKS container) and my LVM install extended over the two disks. So, I needed to unlock two devices at boot to be able to mount my system (which is something the default encrypt hook doesn't support in Arch). Here's a way to proceed in order to achieve unlocking of multiple encrypted devices (presented with 2 devices, but can be used for more).</p>
  218. <p>First, you need to install the necessary stuff to use cryptsetup and set the encrypt hook to be load (in mkinitcpio.conf) as described in <a href="">Arch wiki</a>.</p>
  219. <p>Then, copy the file /usr/lib/initcpio/hooks/encrypt to /usr/lib/initcpio/hooks/encrypt2. Edit this last file and change any occurrence of cryptdevice and cryptkey by cryptdevice2 and cryptkey2. Also change the line</p>
  220. <pre>mkdir /ckey</pre>
  221. <p>by</p>
  222. <pre>if [ -d /ckey ]; then
  223. mkdir /ckey
  224. fi
  225. </pre>
  226. <p>in order to avoid the display of a warning on boot. Load this encrypt2 hook in your mkinitcpio.conf.</p>
  227. <p>Finally, edit your command line parameters (in Grub for example), adding the required cryptdevice, cryptkey (for first device) and cryptdevice2, cryptkey2 (for second device).</p>
  228. <p>This is the best solution I've found so far, but it requires to manually update the second hook when updates are available (cryptsetup package, not all updates concern encrypt hook). Another solution was provided by the package cryptsetup-multi but this one is now obsolete and this setup is the one that works best for me.</p>
  229. <footer><p class="date">Le 17/11/2013 à 08:00</p>
  230. <p class="tags">Tags : <a href="//">Arch</a>, <a href="//">Linux</a></p></footer>
  231. </div>
  232. </article>
  233. <article>
  234. <aside>
  235. <p class="day">17</p>
  236. <p class="month">Novembre</p>
  237. </aside>
  238. <div class="article">
  239. <header><h1 class="article_title"><a href="//">Détecter l'appui sur "é" en javascript</a></h1></header>
  240. <!--
  241. @author=Phyks
  242. @date=17112013-0040
  243. @title=Détecter l'appui sur "é" en javascript
  244. @tags=Web, Dev
  245. -->
  246. <p>Pour les besoins d'un plugin pour le thème <a href="">greeder</a> de <a href="">Leed</a> (gestion des raccourcis claviers), je devais détecter l'appui sur n'importe quelle touche du clavier en javascript. Pour ce faire, a priori, ce n'est pas très dur, il suffit de surveiller l'événement onkeydown et de récupérer le keycode correspondant. Cette méthode fonctionne sans problèmes sur des claviers azerty / qwerty (tout du moins pour ce que je voulais faire) mais pose de graves problèmes sur des dispositions exotiques type Bépo (ty <a href="">tmos</a> de me l'avoir signalé :). En effet, ces dispositions possèdent de nombreuses touches particulières, qui ne sont pas traitées par la méthode précédente. Ainsi, il était impossible d'assigner un raccourci à la touche "é" ou "É" par la méthode précédente (pas de problème sur un clavier azerty/qwerty car cette touche est alors détectée comme "2").</p>
  247. <p>Après quelques recherches, j'ai découvert qu'il existait déjà deux moyens de savoir quelle touche était pressée : which et keycode. Dans la majorité des cas, ils fournissent le même résultat, sauf dans le cas qu'on veut justement traiter. Je n'ai pas approfondi la question mais il semble que which est plus général, et d'après mes tests, il fonctionne sur toutes les touches utiles d'un clavier azerty/qwerty/bépo. Attention en revanche, les codes renvoyés par which peuvent différer des keycode pour les caractères exotiques.</p>
  248. <p>Mais cela ne suffisait pas. J'avais beau utiliser which qui devait me retourner un certain code de touche, je n'avais rien. Après quelques tests, je me suis alors aperçu qu'il n'y avait purement et simplement aucun événement lancé lors de l'appui sur la touche fautive...</p>
  249. <p>En effet, il existe encore une fois plusieurs événements disponibles sur l'appui d'une touche. Le plus simple, et le plus naturellement adapté pour détecter des raccourcis claviers est onkeydown, qui n'est émis qu'une seule fois, lors de l'appui d'une touche. Mais cet événement n'est pas déclenché lors de l'appui sur certains caractères spéciaux (dont é). La solution est alors de faire un code légèrement plus lourd en utilisant onkeypress en remplacement. onkeypress est déclenché tant que la touche est appuyée (ce qui veut dire de potentiels événements multiples, contrairement à onkeydown) mais a le mérite de fonctionner avec toutes les touches des dispositions azerty/qwerty/bépo.</p>
  250. <p>En résumé, pour détecter un appui sur n'importe quelle touche du clavier, il faut utiliser l'événement onkeypress et détecter le code de la touche avec which. Cela fonctionnera, en échange d'une légère baisse de performances du script. Dommage que ceci n'ait pas été harmonisé ou simplifié un minimum...</p>
  251. <footer><p class="date">Le 17/11/2013 à 00:40</p>
  252. <p class="tags">Tags : <a href="//">Web</a>, <a href="//">Dev</a></p></footer>
  253. </div>
  254. </article>
  255. <article>
  256. <aside>
  257. <p class="day">16</p>
  258. <p class="month">Novembre</p>
  259. </aside>
  260. <div class="article">
  261. <header><h1 class="article_title"><a href="//">Premier article (parce qu'il en faut bien un :)</a></h1></header>
  262. <!--
  263. @author=Phyks
  264. @date=16112013-2330
  265. @title=Premier article (parce qu'il en faut bien un :)
  266. @tags=Phyks
  267. -->
  268. <p>Ça y est, mon blog est enfin en ligne. Depuis le temps que j'ai cette idée en tête (et que la page <a href=""></a> affiche un magnifique "Blog coming soon"), j'ai enfin eu le temps de finaliser les deux / trois trucs impératifs avant de le lancer. :)</p>
  269. <p>J'ai donc enfin ma petite parcelle de web où partager diverses astuces sur les trucs que j'utilise quotidiennement (et quelques coups de gueules aussi). Entre autres, des petits trucs sur Arch Linux, sur de la prog, sur l'autohébergement et des trucs en vrac. J'en ai également profité pour mettre en place un <a href="">shaarli</a> (que j'utilise en fait déjà depuis quelques temps), <a href="">ici</a>. Il y aura des articles en français (principalement) et quelquefois en anglais quand c'est un truc que je n'ai trouvé nulle part ailleurs.</p>
  270. <p>Pour ceux qui se demanderaient comment fonctionne le blog en arrière-plan, c'est un blog statique sur moteur fait-maison. J'avais eu l'idée de faire un système de blog sur dépôt Git et avait commencé à le coder, avant de me rendre compte que de nombreux projets existaient déjà :/ Bref, ayant la flemme de reprendre un code existant en l'adaptant à mes besoins et ayant déjà commencé à réinventer la roue, j'ai continué mon bout de code, aboutissant à ce blog. Le code est d'ores et déjà disponible sur <a href="">Github</a>, mais il manque encore quelques fonctions et cette instance sera l'occasion d'un test en grandeur nature. Il sera mis à jour prochainement, quand j'aurai corrigé tous les petits trucs qui ne me plaisent pas et refactorisé un peu le code.</p>
  271. <p>Le blog est donc intégralement stocké sous forme de fichiers html dans un dépôt Git (sur mon petit dédié chez OVH) et un hook lancé au commit s'occupe de générer les fichiers html servis par le serveur web. Les articles sont rédigés de façon très basique en html pour l'instant (mais je prévois d'implémenter une syntaxe à la markdown dans un futur proche), et tout est un peu fait "old school" (pas de formulaire tout joli avec drag&amp;drop pour envoyer des images par exemple, je suis plus efficace sans). Ça peut paraître bancal parfois, mais ça me va bien :) Du coup, pas de commentaires sur ce blog, ne voulant pas ajouter un service externe à la Disqus. De toutes façons, je rejoins l'avis de <a href="">Bortzmeyer</a> sur la question. J'adore les commentaires constructifs, mais je préfère lire des articles complets sur un blog qu'une réponse en deux lignes en bas d'un article. Si vous voulez commenter, n'hésitez pas à m'envoyer un e-mail ou à me dire si vous réagissez quelque part. :)</p>
  272. <p><em>P.S.</em> : Merci à <a href="">sebsauvage</a>, <a href="">le hollandais volant</a>, <a href="">idleman</a>, <a href="">Ploum</a> et tous les autres de la blogosphère française que j'oublie, que je suis depuis quelques temps déjà, plus ou moins silencieusement et qui m'ont donné envie d'avoir mon petit espace à moi aussi !</p>
  273. <h2 class="center">Bref, ya plus qu'à ! :)</h2>
  274. <p class="center"><img src="//" alt="Keep calm and use the force"/><br/><span class="small">Image sous licence CC 3.0 BY NC SA (<a href="">source</a>)</span></p>
  275. <p>Note : Je suis en train de tout remettre en place sur mon serveur, suite à une réinstallaton. Mon Jabber, mon serveur Git etc. reviendront donc bientôt, quand j'aurai 5 minutes pour m'en occuper :(</p>
  276. <footer><p class="date">Le 16/11/2013 à 23:30</p>
  277. <p class="tags">Tags : <a href="//">Phyks</a></p></footer>
  278. </div>
  279. </article>
  280. </div>
  281. <footer id="rss">
  282. <p><a href="//"><img src="//" alt="RSS"/></a></p>
  283. </footer>
  284. </div>
  285. </body>
  286. </html>