Jonathan SAEZ2020-04-18T14:30:31+00:00https://kandran.frJonathan SAEZIntroduction au partionnement sous MySql2018-12-31T00:00:00+00:00https://kandran.fr/mysql-partionnement-introduction<p>Avec le temps de nombreuses tables grossissent de manière assez forte. Cela entraine malgré des index correctement
choisis des temps de recherche de plus en plus longs. Une solution à ce problème peut être d’utiliser le partitionnement.</p>
<h1 id="partitionnement-introduction">Partitionnement introduction</h1>
<p>Imaginez que la bibliothèque possède toutes les infos dans un seul et même livre, malgré un index dans celui-ci,
chercher une information dedans est assez complexe. Maintenant si ce livre est découpé en plusieurs tomes et qu’il
faut rechercher que dans un seul tome alors avec l’index cela sera beaucoup plus rapide. Le partitionnement c’est
la même chose, mais pour une table.
On parlera uniquement du partitionnement horizontal dans cet article, c’est-à-dire un partitionnement par ligne.</p>
<h1 id="est-ce-utilisable-">Est-ce utilisable ?</h1>
<p>A priori oui, toutefois pour ne vérifier rien de plus simple</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">SHOW</span> <span class="n">PLUGINS</span><span class="p">;</span></code></pre></figure>
<p>On doit avoir dans les résultats une ligne avec pour nom partition et status ACTIVE.</p>
<p>Certaines tables ne peuvent par contre pas être partitionnées :</p>
<ul>
<li>celle avec un index <em>full text</em></li>
<li>celle avec des clef etrangeres</li>
<li>celle avec qui sont des references de clef etrangere d’autres tables</li>
</ul>
<h1 id="contraintes-sur-la-clef-de-partitionnement">Contraintes sur la clef de partitionnement</h1>
<p>La clef de partitionnement choisi devra obligatoirement :</p>
<ul>
<li>être numérique</li>
<li>être comprise dans la clef primaire</li>
</ul>
<h1 id="détails-sur-les-types-de-partionnements">Détails sur les types de partionnements</h1>
<h2 id="range">Range</h2>
<p>Chaque ligne est insérée dans la bonne partition en fonction de sa valeur par rapport aux diverses zones prédéfinies.
Ici on ne peut pas utiliser de date, toutefois rien n’empêche d’utiliser une fonction MYSQL comme YEAR.</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">CREATE</span> <span class="k">TABLE</span> <span class="n">example</span> <span class="p">(</span>
<span class="n">id</span> <span class="nb">INT</span> <span class="k">NOT</span> <span class="k">NULL</span>
<span class="p">)</span>
<span class="n">PARTITION</span> <span class="k">BY</span> <span class="n">RANGE</span> <span class="p">(</span><span class="n">id</span><span class="p">)</span> <span class="p">(</span>
<span class="n">PARTITION</span> <span class="n">p0</span> <span class="k">VALUES</span> <span class="k">LESS</span> <span class="k">THAN</span> <span class="p">(</span><span class="mi">6</span><span class="p">),</span>
<span class="n">PARTITION</span> <span class="n">p1</span> <span class="k">VALUES</span> <span class="k">LESS</span> <span class="k">THAN</span> <span class="p">(</span><span class="mi">11</span><span class="p">),</span>
<span class="n">PARTITION</span> <span class="n">p2</span> <span class="k">VALUES</span> <span class="k">LESS</span> <span class="k">THAN</span> <span class="p">(</span><span class="mi">16</span><span class="p">),</span>
<span class="n">PARTITION</span> <span class="n">p3</span> <span class="k">VALUES</span> <span class="k">LESS</span> <span class="k">THAN</span> <span class="k">MAXVALUE</span>
<span class="p">);</span></code></pre></figure>
<h2 id="list">List</h2>
<p>Si la valeur de la clef de partitionnement n’est présente dans aucune liste alors l’insertion est perdue.
Il n’y a pas de valeur de catch.</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">CREATE</span> <span class="k">TABLE</span> <span class="n">example</span> <span class="p">(</span>
<span class="n">id</span> <span class="nb">INT</span> <span class="k">NOT</span> <span class="k">NULL</span><span class="p">,</span>
<span class="n">store_id</span> <span class="nb">INT</span>
<span class="p">)</span>
<span class="n">PARTITION</span> <span class="k">BY</span> <span class="n">LIST</span><span class="p">(</span><span class="n">store_id</span><span class="p">)</span> <span class="p">(</span>
<span class="n">PARTITION</span> <span class="n">pNorth</span> <span class="k">VALUES</span> <span class="k">IN</span> <span class="p">(</span><span class="mi">3</span><span class="p">,</span><span class="mi">5</span><span class="p">,</span><span class="mi">6</span><span class="p">,</span><span class="mi">9</span><span class="p">,</span><span class="mi">17</span><span class="p">),</span>
<span class="n">PARTITION</span> <span class="n">pEast</span> <span class="k">VALUES</span> <span class="k">IN</span> <span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">10</span><span class="p">,</span><span class="mi">11</span><span class="p">,</span><span class="mi">19</span><span class="p">,</span><span class="mi">20</span><span class="p">),</span>
<span class="n">PARTITION</span> <span class="n">pWest</span> <span class="k">VALUES</span> <span class="k">IN</span> <span class="p">(</span><span class="mi">4</span><span class="p">,</span><span class="mi">12</span><span class="p">,</span><span class="mi">13</span><span class="p">,</span><span class="mi">14</span><span class="p">,</span><span class="mi">18</span><span class="p">),</span>
<span class="n">PARTITION</span> <span class="n">pCentral</span> <span class="k">VALUES</span> <span class="k">IN</span> <span class="p">(</span><span class="mi">7</span><span class="p">,</span><span class="mi">8</span><span class="p">,</span><span class="mi">15</span><span class="p">,</span><span class="mi">16</span><span class="p">)</span>
<span class="p">);</span></code></pre></figure>
<h2 id="hash">Hash</h2>
<p>La valeur dans le HASH doit etre entière. On peut utiliser une fonction mysql mais pour une valeur précise la valeur de sortie doit etre identique.</p>
<p>La partition sélectionnée est égale a
<strong>valeurDuHash % nombresDePartiontion</strong>.</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">CREATE</span> <span class="k">TABLE</span> <span class="n">example</span> <span class="p">(</span>
<span class="n">id</span> <span class="nb">INT</span> <span class="k">NOT</span> <span class="k">NULL</span><span class="p">,</span>
<span class="n">example_date</span> <span class="nb">DATE</span> <span class="k">NOT</span> <span class="k">NULL</span> <span class="k">DEFAULT</span> <span class="s1">'1970-01-01'</span><span class="p">,</span>
<span class="n">store_id</span> <span class="nb">INT</span>
<span class="p">)</span>
<span class="n">PARTITION</span> <span class="k">BY</span> <span class="n">HASH</span><span class="p">(</span><span class="nb">YEAR</span><span class="p">(</span><span class="n">example_date</span><span class="p">))</span>
<span class="n">PARTITIONS</span> <span class="mi">4</span><span class="p">;</span>
<span class="p">);</span></code></pre></figure>
<h2 id="key">Key</h2>
<p>La clef n’est pas obligatoirement numérique, key utilise une fonction de hash propre a mysql (basé sur password).</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">CREATE</span> <span class="k">TABLE</span> <span class="n">example</span> <span class="p">(</span>
<span class="n">id</span> <span class="nb">INT</span> <span class="k">NOT</span> <span class="k">NULL</span> <span class="k">PRIMARY</span> <span class="k">KEY</span><span class="p">,</span>
<span class="n">store_id</span> <span class="nb">INT</span>
<span class="p">)</span>
<span class="n">PARTITION</span> <span class="k">BY</span> <span class="k">KEY</span><span class="p">()</span>
<span class="n">PARTITIONS</span> <span class="mi">4</span><span class="p">;</span>
<span class="p">);</span></code></pre></figure>
<h2 id="linear">Linear</h2>
<p>Le calcul de la partition sélectionné change pour devenir :</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"> <span class="n">V</span> <span class="o">=</span> <span class="n">POWER</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="n">CEILING</span><span class="p">(</span><span class="n">LOG</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="n">num</span><span class="p">)))</span>
<span class="n">N</span> <span class="o">=</span> <span class="n">F</span><span class="p">(</span><span class="n">column_list</span><span class="p">)</span> <span class="o">&</span> <span class="p">(</span><span class="n">V</span> <span class="o">-</span> <span class="mi">1</span><span class="p">).</span>
<span class="n">While</span> <span class="n">N</span> <span class="o">>=</span> <span class="n">num</span><span class="p">:</span>
<span class="k">Set</span> <span class="n">V</span> <span class="o">=</span> <span class="n">CEIL</span><span class="p">(</span><span class="n">V</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span>
<span class="k">Set</span> <span class="n">N</span> <span class="o">=</span> <span class="n">N</span> <span class="o">&</span> <span class="p">(</span><span class="n">V</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span>
</code></pre></figure>
<p>Ou :</p>
<ul>
<li>num : nombre de partitions</li>
<li>F(column_list) : Valeur de la fonction de hashage</li>
<li>N : partition selectionné</li>
</ul>
<p>Contrairement a ce que dit le nom la répartition n’est pas linéaire</p>
<h1 id="pruning">Pruning</h1>
<p>Selon les critères de la requête, la lecture ne se fait que sur un sous-ensemble de partitions.
Le temps d’exécution s’en trouve réduit de même que l’utilisation mémoire.</p>
<h1 id="actions-sur-les-partitions">Actions sur les partitions</h1>
<h2 id="optimisation">Optimisation</h2>
<p>Lors suppression de ligne ou changement de taille des colonnes, il peut y avoir une fragmentation des données on peu alors
lancer une optimisation par partition.</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">ALTER</span> <span class="k">TABLE</span> <span class="n">partionned_table</span>
<span class="n">OPTIMIZE</span> <span class="n">PARTITION</span> <span class="n">partition_name_to_optimize</span><span class="p">;</span></code></pre></figure>
<h2 id="réparation">Réparation</h2>
<p>En cas d’erreur sur les données ou les index on peut reparer par partion</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">ALTER</span> <span class="k">TABLE</span> <span class="n">partionned_table</span>
<span class="k">CHECK</span> <span class="n">PARTITION</span> <span class="n">p0</span><span class="p">,</span><span class="n">p1</span></code></pre></figure>
<h2 id="suppression-de-partition">Suppression de partition</h2>
<p>Grâce au partitionnement on peut supprimer des partitions directement. Ainsi la suppression d’un enregistrement par
rapport a la date peut se faire rapidement même sur des gros volumes de données.</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">ALTER</span> <span class="k">TABLE</span> <span class="n">partionned_table</span>
<span class="k">DROP</span> <span class="n">PARTITION</span> <span class="n">partition_name_to_drop</span><span class="p">;</span></code></pre></figure>
<h2 id="ajout-de-partition">Ajout de partition</h2>
<p>On peut aussi ajouter des partitions</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">ALTER</span> <span class="k">TABLE</span> <span class="n">partionned_table</span>
<span class="k">ADD</span> <span class="n">PARTITION</span> <span class="n">partition_name</span> <span class="p">(</span><span class="n">PARTITION_DESCRIPTION</span><span class="p">);</span></code></pre></figure>
<p><strong>Note</strong> : Sur du partitionnement par range on ne peut pas ajouter de participation apres notre partition fourre-tout
(celle en MAXVALUE ). Il faudra dont la supprimer au préalable, puis ajouter la nouvelle et la recréer. Bien sûr, il faut faire cela
avec quelle ne commence a se remplir.</p>
<h1 id="contraintes-mémoires">Contraintes mémoires</h1>
<p>Dans le cas des tables MyISAM, chaque partition utilise deux file descriptor qui doivent être ouvertes pour accéder aux données,
et ceci est bien sûr par partition.</p>
<p>Voici un petit aperçu du partitionnement, de son utilisation pour augmenter les performances sur des tables assez volumineuse.</p>
Migration du blog : passage sous Jekkyl2017-04-12T00:00:00+00:00https://kandran.fr/blog-migration<p>Comme je l’ai évoqué dans l’article bilan du début d’année j’ai migré ce blog de wordpress vers Jekkyl.
Je vais dès à présent vous donner plus d’information sur ce choix ainsi que sa mise en oeuvre.</p>
<h1 id="pourquoi-migrer-">Pourquoi migrer ?</h1>
<p>Le blog était sous wordpress, l’un des projets de blogging open source parmi les plus utilisés. Wordpress c’est bien, il y a pas mal de plugins, thèmes et j’en passe. L’éditeur est pas mal, la programmation d’article existe, des mises à jour régulières…</p>
<p>Jusque là on peut se demander pourquoi quitter cette solution.</p>
<p>Mais wordpress c’est aussi, plus ou moins lent, selon les plugins. Une surveillance constante des mises à jour (par rapport aux potentiels problèmes de sécurité). Pour résumer il y avait pas mal d’entretien à faire.</p>
<p>J’ai alors décidé de partir sur un blog statique, via l’utilisation de jekyll. Alors, certes je perds l’interface d’admin et son éditeur, mais étant le seul rédacteur passer sur l’écriture d’article au format markdown n’est pas un soucis. De plus, ça me permet d’avoir un site assez léger et rapide (notamment via le fait que j’utilise cloudflare) et peu couteux (hébergement en github page - je paye donc uniquement le nom de domaine).</p>
<h1 id="étapes-de-migration">Étapes de migration</h1>
<p>Ce blog n’ayant que peu de commentaire j’ai pris la décision de ne pas les exporter lors de la migration, de ce fait je ne traiterai pas de cette partie dans cet article. N’hésitez pas à demander en commentaire (<em>je sais que c’est assez ironique</em> ) si vous voulez plus d’information à propos de ce sujet.</p>
<h2 id="export-des-articles">Export des articles</h2>
<p>Pour exporter mes articles j’ai utilisé le plugin <a href="https://wordpress.org/plugins/jekyll-exporter/" target="_blank">Jekyll Exporter</a>.
C’est assez simple, dans le menu “Outils” il y a un lien <strong>Export to Jekyll</strong>.
Ça vous fait télécharger une archive zip avec vos articles et médias</p>
<h2 id="nettoyage-de-lexport">Nettoyage de l’export</h2>
<p>Bien que l’export via le plugin fasses quasiment 90 % du travail il faut effectuer une relecture pour corriger divers problèmes.</p>
<p>Pour ma part j’ai eu des problèmes sur les articles possédant des shortcodes, en effet lors de l’export il y avait le shortcode au format texte uniquement. De même certains articles ayant des scripts inline (dans mon cas gist) ont eu un export sans le script.</p>
<p>Enfin je suis aussi repassé sur les urls, afin de leur donner une structure correcte vis a vis de jekyll - à savoir via le fichier de configuration etc.</p>
<p>C’est l’étape la plus longue de la migration, surtout si vous avez beaucoup d’articles à vérifier.</p>
Compte rendu de lecture : Sécurité et confidentialité des données en javascript2017-01-22T00:00:00+00:00https://kandran.fr/securite-et-confidentialite-en-javascript<p>Lors de cet article je vais faire un compte rendu (que je compléterai en partie) d’un article du MISC 88 concernant la sécurité et
confidentialité des données en JavaScript. Vous pouvez bien entendu trouver l’article complet sur le <a href="https://boutique.ed-diamond.com/anciens-numeros/1087-misc-88.html">site de l’éditeur</a>.</p>
<h1 id="contexe-général">Contexe général</h1>
<p>Avec le développement des nouvelles API JavaScript les sites web possèdent de plus en plus de données personnelles et
critiques sur les utilisateurs.</p>
<p>Certes parmi ces API nombreuses requièrent l’utilisation d’un certificat SSL pour pouvoir être utilisé - et encore cela
dépend des navigateurs - il convient de constater que les informations ne sont pas toujours gérées de manière sécurisées
côté serveur.</p>
<p>En effet, même si cela semble impensable de nombreux sites web stockes les mots de passe en clair. Et même dans les
rares cas où il y a du chiffrement côté serveur la confidentialité n’est pas pour autant totalement assuré. Maintenant
imaginons que le serveur ne fait que stocker une partie des informations sans pouvoir les manipuler ou interpréter
directement, car le chiffrement serait effectué côté client. On pourrait avoir dans ce cas-ci un niveau de
confidentialité plus élevé.</p>
<h1 id="asmjs">ASM.js</h1>
<p>ASM.js est un sous ensemble de JavaScript ayant pour but de manipuler des structures de données avec des performances
correctes s’approchant de celles obtenues par du code natif dans l’idéal. Toutefois, il faut prendre en compte que cet
ensemble dépends du navigateur et du moteur JavaScript utilisé.</p>
<p>Concrètement ASM.js nous permet d’allouer un buffer pour ensuite le manipuler via des vues typées ce qui sera essentiel
pour l’utilisation d’api de chiffrement JavaScript</p>
<h1 id="webcryptoapi">WebCryptoApi</h1>
<p>Il est possible depuis peu d’utiliser l’api <a href="https://www.w3.org/TR/2016/PR-WebCryptoAPI-20161215/">Web Cryptography API</a>
dans les cas suivants :</p>
<ul>
<li>Authentification multiples facteurs</li>
<li>Échange de documents</li>
<li>Stockage de données dans le cloud</li>
<li>Signature de document électronique</li>
<li>Protection de l’intégrité des données</li>
<li>Messagerie sécurisée</li>
<li>JavaScript Object Signing and Encryption (JOSE)</li>
</ul>
<p>Cette API est basé sur le concept de <em>future</em> c’est-à-dire une interface qui définie un contrat asynchrone
(ECMAScript 6). Les communications sont faites via deux paramètres de callback - un en cas du succès et l’autre pour l’échec.</p>
<p>On peut accéder à cette interface via le bout de code suivant</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nb">window</span><span class="p">.</span><span class="nx">crypto</span><span class="p">.</span><span class="nx">subtle</span></code></pre></figure>
<p>Cette interface permet d’accéder à quatre familles d’opérations :</p>
<ul>
<li>hashage</li>
<li>gestion des clés cryptographiques</li>
<li>chiffrement</li>
<li>authentification</li>
</ul>
<p>De plus, l’api <em>window.crypto</em> permet de générer un vecteur de valeur aléatoire. Par exemple si nous voulons 10 valeurs
aléatoire nous pouvons utiliser le code suivant</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="c1">// get a vector of 10 unsigned int value (32bits)
</span>
<span class="kd">var</span> <span class="nx">randomValues</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Uint32Array</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span>
<span class="c1">// randomize values
</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">crypto</span><span class="p">.</span><span class="nx">getRandomValues</span><span class="p">(</span><span class="nx">randomValues</span><span class="p">)</span></code></pre></figure>
<p>Nous allons à présent voir les différentes familles d’opération plus en détail.</p>
<h2 id="hashage">Hashage</h2>
<p>Pour utiliser les fonctions de hash nous devons utiliser la méthode <em>digest</em> qui permet le hashage via les méthodes suivantes :</p>
<ul>
<li><del>SHA-1</del> <strong>à ne pas utiliser !</strong></li>
<li>SHA-256</li>
<li>SHA-384</li>
<li>SHA-512</li>
</ul>
<p>Je vais donner un exemple que j’avais réalisé en SHA-256</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">sha256</span><span class="p">(</span><span class="nx">str</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">buffer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TextEncoder</span><span class="p">(</span><span class="dl">"</span><span class="s2">utf-8</span><span class="dl">"</span><span class="p">).</span><span class="nx">encode</span><span class="p">(</span><span class="nx">str</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">crypto</span><span class="p">.</span><span class="nx">subtle</span><span class="p">.</span><span class="nx">digest</span><span class="p">(</span><span class="dl">"</span><span class="s2">SHA-256</span><span class="dl">"</span><span class="p">,</span> <span class="nx">buffer</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">hex</span><span class="p">(</span><span class="nx">hash</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">hex</span><span class="p">(</span><span class="nx">buffer</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hexCodes</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">DataView</span><span class="p">(</span><span class="nx">buffer</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">view</span><span class="p">.</span><span class="nx">byteLength</span><span class="p">;</span> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">view</span><span class="p">.</span><span class="nx">getUint32</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">stringValue</span> <span class="o">=</span> <span class="nx">value</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">padding</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">00000000</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">paddedValue</span> <span class="o">=</span> <span class="p">(</span><span class="nx">padding</span> <span class="o">+</span> <span class="nx">stringValue</span><span class="p">).</span><span class="nx">slice</span><span class="p">(</span><span class="o">-</span><span class="nx">padding</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="nx">hexCodes</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">paddedValue</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">hexCodes</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">""</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">sha256</span><span class="p">(</span><span class="dl">"</span><span class="s2">test</span><span class="dl">"</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">digest</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">digest</span><span class="p">);</span>
<span class="p">});</span> </code></pre></figure>
<p>On remarque que le simple fait de faire un sha-256 neccessite plusieurs fonctions et se relève complexe avec notamment
un traitement des données.</p>
<h2 id="gestion-des-clés">Gestion des clés</h2>
<p>Nous entrons maintenant dans la partie qui concerne les clés cryptographique. Ces clés seront utilisées dans pour les
opérations suivantes il convient de voir leur gestion plus en détail.</p>
<p><strong>Attention il y a une politique de même origine sur les clés, c’est-à-dire que deux sites ne peuvent se partager les
clés directement</strong></p>
<p>Nous avons donc les méthodes suivantes :</p>
<ul>
<li><em>generateKey</em> : génère une paire de clés pour l’algorithme ciblé</li>
<li><em>deriveKey</em> : applique un algorithme de dérivation de clés (ECDH, DH, PBKDF2 et HKDF-CTR)</li>
<li><em>importKey</em> importe une clé dans un format spécifique
<ul>
<li><strong>Algo Symétrique</strong> : En plus du format JWK on peut importer en <em>raw</em> via un arrayBuffer</li>
<li><strong>Algo Asymétrique</strong> : On a JWK et PKCS8</li>
</ul>
</li>
<li><em>exportKey</em> : exporte les clés dans l’un des formats ci-dessus</li>
</ul>
<p>Nous pouvons faire transiter les clés dans du JSON au format JWK (voir JOSE).</p>
<h2 id="chiffrement">Chiffrement</h2>
<p>L’utilisation de l’api de web cryptographie nous permet de chiffrer des données, bien entendu il faut au préalable importer les
clés avant.</p>
<p>Nous pouvons effectuer du chiffrement symétrique et asymétrique.</p>
<p>Le chiffrement symétrique est de l’AES-256 avec les modes CTR, CBC, GCM, CFB tandis qu’en asymétrique nous avons à
disposition du RSA (attention les données en entrée doivent être dans un ArrayBuffer).</p>
<h2 id="authentification">Authentification</h2>
<p>Nous avons bien entendu la possibilité avec cette API d’effectuer de l’authentification de données. Pour cela nous
pouvons signer et vérifier les données via les méthodes respectivement <em>sign</em> et <em>verify</em> .</p>
<p>Là encore il convient de différencier le mode symétrique (HMAC et AES-CMAC) du mode asymétrique.
En asymétrique nous avons à disposition trois algorithmes (2 basé sur RSA et le dernier sur des courbes elliptiques) :</p>
<ul>
<li>RSA SSA-PK CS1-v1.5</li>
<li>RSA - PSS</li>
<li>ECDSA</li>
</ul>
<h1 id="conclusion">Conclusion</h1>
<p>Nous pouvons voir que le web évolue de plus en plus vers une augmentation de la sécurité et confidentialité des clients
toutefois ces API bien qu’utiles semblent à mon avis hélas trop complexe pour y voir une intégration massive dans les
diverses applications que nous pouvons utiliser.</p>
Retrospective 20162017-01-15T00:00:00+00:00https://kandran.fr/2016-in-review<p>Je profite que l’année 2016 soit terminé afin de pouvoir commencer une retrospective sur celle ci et fixer mes objectifs
pour 2017.</p>
<h1 id="retrospective-2016">Retrospective 2016</h1>
<p>En 2016 j’ai continué à travailler bénévolement sur le projets Blizzheart, en particulier lors de la migration de serveur
en aout où j’ai pu utiliser de manière plus approfondi l’outil ansible.</p>
<p>En parallèle à ce projet j’ai commencé une réflexion sur un projet de site dans le dommaine du cosplay, le but étant de
proposer une alternative solide à facebook pour souder la communauté. Recherche de groupe, partages, aide par rapport aux
présences lors des divers salons…</p>
<p>En tant que développeur il convient aussi de regarder mon année par rapport aux divers commits effectués :</p>
<p><img src="http://kandran.fr/assets/2017/01/2016-in-review/github.PNG" alt="commit github kandran" /></p>
<p>On remarque que j’ai ete plus actif en début et fin d’année, ce qui corresponds essentiellement à mes phases de travails
sur les projets ci-dessus.</p>
<p>Autre point qui est important de souligné est la migration de ce blog de wordpress vers Jekyll, ce qui me permet d’avoir
une gestion de celui ci plus simple et moins couteuse le tout étant hébergé en temps que page github. La migration fût
relativement simple, en effet à l’aide du plugin Jekyll Exporter j’ai pu obtenir l’ensemble de mes articles et assets.
Il m’a resté à checker que la mise en page était bonne, modifier les url des assets et point plus génant remettre en place
les partie utilisant gist ou slideshare (en effet les script semble avoir disparu et logiquement les customs posts n’ont
pas pu etre utilisés).</p>
<h1 id="programme-pour-2017">Programme pour 2017</h1>
<p>Je profite de cet article afin de pouvoir écrire mes principaux objectifs pour cette année - ce qui me servira de base
pour un futur bilan en 2018.</p>
<p>Tout d’abord, j’ai prévu d’être plus actif sur ce blog, écrire plus d’article (au moins un par mois) principalement
orienté vers de la technique.</p>
<p>De même je compte continuer à contribuer à participer au sein de l’équipe Blizzheart (fan de jeux blizzard je vous
conseille de jeter un oeil), il y’a pas mal de nouveauté à venir (nouvelle version du site, nouvelles fonctionnalités etc.).</p>
<p>Bien entendue j’ai aussi prévu d’avancer sur mon projet de site relié au cosplay avec l’intention de pouvoir sortir une
beta dans la première partie de l’année.</p>
Slides présentation postman au dev/var 152016-11-01T15:54:03+00:00https://kandran.fr/slides-postman-devvar15<iframe src="//www.slideshare.net/slideshow/embed_code/key/E5BymDZQf042Gl" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>
<p>De nos jours les API prolifèrent de plus en plus. Que l’on soit du côté utilisateur ou créateur de l’api avoir des outils simples pour pouvoir les tester, utiliser de manière manuelle, documenter etc. semble indispensables. Postman est l’un des outils pouvant vous apporter cela, venez découvrir l’outil ainsi que ses diverses utilisations.</p>
<p>Slides de la présentation effectué le 13/10/2016 au dev/var</p>
<p><a href="http://bit.ly/2eO6ge3" target="_blank">Collection postman</a></p>
Git : Workflow2016-02-28T16:33:58+00:00https://kandran.fr/posts/git-workflow<p>De nos jours se lancer dans un projet sans outil de versionning est proche d’une folie. Toutefois ces outils ne sont pas toujours utilisé de manière optimale. Je vais donc présenter dans cet article une sorte de workflow que nous pouvons mettre en place avec un projet versionné par exemple sur github.</p>
<p> </p>
<h1 id="présentation-générale-">Présentation générale :</h1>
<p>Pour ce ne connaissant pas git, il s’agit d’une solution permettant de versionner du code. Ainsi l’on a accès a toute les modifications ayant été faite sur le code. On peut donc aisément revenir en arrière etc.</p>
<h1 id="les-forks">Les forks</h1>
<p>Chaque projet sur github est hébergé en dans un dépôt, lorsque vous voulez avoir votre version vous pouvez soit :</p>
<ul>
<li>Copier le contenu (zip) dans un nouveau dépôt – on perds alors la dépendance avec le projet initial</li>
<li>Faire une copie qui est toujours relié au dépôt d’origine : on parle de fork.</li>
</ul>
<p>C’est grâce a ce lien que l’on peut proposer ses modifications. Ceci est possible en utilisant le mécanisme de pull request que nous allons expliquer un peu plus bas.</p>
<p> </p>
<p>Il est important de noter que si vous faites un fork d’un dépôt privé et que l’on vous retire les droits de lecture sur le dépôt d’origine, votre fork disparaîtra obligatoirement.</p>
<p> </p>
<p>Nos aurons donc trois principaux dépôt qu’il faudra prendre en compte :</p>
<ul>
<li>le dépôt local (physique sur la machine)</li>
<li>le dépôt distant (on le nommera origin)</li>
<li>le dépôt distant d’origine (on le nommera upstream)</li>
</ul>
<p> </p>
<p>L’un des principaux avantage à l’utilisation des fork est que chaque développeur possède a la fois un dépôt local et distant qui lui sont dédié – ses modifications n’impacte que lui. Le troisième sert juste de base commune.</p>
<p> </p>
<h1 id="les-branches">Les branches</h1>
<p>Une vision simpliste est de s’imaginer un projet comme ayant une unique avancé. En réalité des fonctionnalités sont ajouté sur des version parallèle (sorte de copie n’affectant pas la version principale) avant d’être fusionné avec la base principale. On parle de branche – chaque branche est une évolution différente du projet qui peuvent s’éloigner mais aussi se rejoindre (on parle de merge).</p>
<p>Le nombre de branche varie totalement en fonction des projets, on retrouve généralement :</p>
<ul>
<li>La branche principale (codé utilisé en production) appelle master</li>
<li>Une branche de développement</li>
</ul>
<p>Il s’ajoute a ces branches quelquefois des branches dédié a l’étape de pre-prod et de test. Sur certain projet plus actif on a aussi une branche par fonctionnalité en cours de développement plutôt qu’une seule. Enfin des vieilles versions possède leurs propre branche – par exemple pour avoir toujours des mise a jour de sécurité.</p>
<p>Afin de fusionner deux branches on utilise souvent le processus de merge. On fait un nouveau commit qui aura pour parent le dernier commit de chaque branche. A l’inverse on peu aussi utiliser le système de rebase qui lui prend les commit d’une branche et les “joue” a la suite de l’autre branche. <img src="http://kandran.fr/assets/2016/02/merge-rebase.png" alt="Utilisation de merge et rabase sur des branche git" /></p>
<p>Personnellement je préfère utilisé les rebase pour deux raisons :</p>
<ul>
<li>on garde un historique linéaire</li>
<li>la gestion de conflit étant commit par commit est relativement plus aisé</li>
</ul>
<p> </p>
<h1 id="pull-request-">Pull Request :</h1>
<p>Lorsque vous voulez que les modifications faites sur votre copie soient disponible pour tout le monde vous allez surement utiliser le principe de pull request. Vous choisissez une branche de votre distant, une du distant d’origine et proposez un merge entre les deux. Les personnes ayant les droits d’écriture sur le dépôt d’origine peuvent accepter votre pull request ou vous demandez de faire quelques modifications avant. Dans certains cas votre demande sera refusé et votre pull request sera fermé.</p>
<p>Quelques conseil pour avoir plus de chance de voir votre demande accepté :</p>
<ul>
<li>Respecter les normes du projet ( souvent dans le wiki ou un fichier CONTRIBUTING)</li>
<li>Vérifier que les tests passent bien</li>
<li>Pull le dépôt upstream sur votre branche avant – ca évitera d’avoir des conflits et voir votre pull request impossible a accepter</li>
</ul>
<p> </p>
<p>Votre code sera potentiellement critiqué, analysé etc, n’hésitez pas a vous justifier quand besoin et voyez y une chance de vous améliorer. En effet il y’a beaucoup a apprendre des diverses codes review que l’on peut avoir.</p>
<p> </p>
<h1 id="les-tags">Les tags</h1>
<p>La notion de branche ne suffit pas à définir un point particulier de l’évolution du code, on pourrait certes utiliser le numéro de commit mais il y’a un système bien plus pratique : les tags. Il s’agit de marqueur sur un état du code – a un commit bien précis. On peut se servir ce système comme systeme permettant de numéroter les versions. Cela à plusieurs avantages :</p>
<ul>
<li>On peut voir facilement la date de création de chaque version</li>
<li>Idem pour les ajouts d’une version si la description est complète</li>
<li>On peut aussi gérer facilement le choix de version avec des outils d’import de librairies (composer …)</li>
<li>Si on utilise des numéro de version sémantique voir l’implication d’une mise a jour de version</li>
</ul>
<p>Pour ceux n’étant pas au courant de ce qu’est un numéro de version sémantique il s’agit d’un numéro sous la forme de trois partie Major.Minor.Patch</p>
<p>Le patch est un fix sans problème d’incompatibilité</p>
<p>Le Minor est un ajout de fonctionnalité toujours sans incompatibilité</p>
<p>Le Major implique de grande modification avec de potentiel problème d’incompatibilité.</p>
<p> </p>
<p>Vous pouvez avoir plus d’information sur ce site <a href="http://semver.org/lang/fr/" target="_blank">Gestion sémantique de version</a></p>
<p> </p>
<h1 id="webhook-et-deploy-key">WebHook et deploy key</h1>
<p>Il s’agit la plus de fonctionnalités supplémentaires que l’on retrouve sur de nombreux service (github, bitbucket, gitlab etc).</p>
<p>Le webhook sont des appels fait lors d’interaction spécifique, par exemple a chaque commit, pull request etc un appel est fait a un service externe qui pourra par exemple exécuter les tests. Ceci permet de faire des actions de manière automatique. La deploy key est comme son nom l’indique une clef qui sera utilisé pour le déploiement uniquement. Je m’explique cette clef ssh permet d’avoir un accès en lecture au dépôt ainsi le serveur possédant la clef privé associé pourra récupérer le code avec celle ci – les serveurs n’ont donc pas besoin de compte et peuvent quand même être identifié a l’aide de leurs clef. Ce système est utile quand le déploiement est automatisé et qu’aucun compte utilisateur ne pourra être utilisé.</p>
<h1 id="conclusion">Conclusion</h1>
<p>Pour conclure nous allons voir un exemple ou l’ensemble des méthodes décrite ci-dessus sont assemblé pour former une procédure complete dans un projet.</p>
<p>Nous avons donc le projet dans son dépôt officiel, seul quelques personnes peuvent écrire sur ce dépôt – typiquement les core développeur (souvent le lead dev en entreprise). Le reste des développeur ont un accès en lecture. Il font donc un fork qui leurs permet d’avoir leurs copies. Ils peuvent donc travailler sur les mêmes branches – disons dev sans avoir d’interaction. Lorsque un développeur a fini sa tâche il récupère le code de la branche principale (dépôt officiel), ainsi son code aura déjà eu la résolution de conflit avant le pull request. Lors du pull request une analyse du code statique est lancé, de même pour les tests. Si tout ce passe bien les core développeur peuvent vérifier le code puis après modification potentielle accepter la pull request. Alors on pourra déployer de manière automatique le code – en effet les serveurs ayant le droit de lecture sur le dépôt peut récupérer le code source.</p>
<p> </p>
<p>Bien que cet article peut sembler un peu long, je ne traite pas de la totalité des éléments que l’on pourrait incorporer dans un workflow centré sur git, n’hésitez pas a compléter ou poser vos questions en commentaire.</p>
Git : fusionner plusieurs commit ensemble2016-01-03T19:32:37+00:00https://kandran.fr/git-fusionner-plusieurs-commit-ensemble<p>Aujourd’hui nous allons voir comment fusionner plusieurs commit ensemble pour n’en former qu’un seul.</p>
<p>Bien que cette manipulation soit relativement simple elle n’est pas souvent utilisé ce qui mène souvent a voir dans les branches master des commit sans ‘utilité’ fonctionnelle (commit de fix d’une erreur de syntaxe, plusieurs commit pour la même feature etc).</p>
<p> </p>
<p>Voyons tout d’abords les raisons qui peuvent nous amener a fusionner des commit :</p>
<ul>
<li>Vous avez fait un commit, mais il y’a une modification manquante. (ex. fichier manquant, erreur de syntaxe)</li>
<li>Vous êtes sur un projet open source, vous faites des commits a chaque petites modifications. Il peut être utile de fusionner les commits en un seul pour éviter l’explosion du nombre de commit.</li>
</ul>
<p> </p>
<p>Maintenant que nous avons vu les principales raisons pouvant nous amener a fusionner des commit ensemble nous allons voir la méthode pour les fusionner ensemble.</p>
<p> </p>
<p>J’ai initialisé un dépôt git avec deux commit : l’un pour le création d’un fichier squash.txt et le second après avoir renommé le fichier en git-squash.txt comme nous pouvons le voir dans l’image ci dessous. J’ai fais un troisieme commit afin d’avoir un rebase plus visible pour la seconde partie (il n’est absolument pas nécessaire)</p>
<p><img src="http://kandran.fr/assets/2016/01/git-squash-init.png" alt="git-squash-init" /></p>
<p> </p>
<p>Etant donné que je travaille en local je souhaiterai fusionner ces deux commit. J’utilise donc la commande <strong>git rebase</strong>.</p>
<p> </p>
<p>Pour cela je fais un <strong>git rebase -i HEAD~2</strong> (git rebase, en mode interactif a partir des deux commit précédent le HEAD (inclus)).</p>
<p><img src="http://kandran.fr/assets/2016/01/git-squash-rebase.png" alt="git-squash-rebase" /></p>
<p> </p>
<p>On voit donc nos commit (id et message) du plus vieux au plus récent dans un éditeur vim. Pour effectuer le rebase il faut modifier le fichier. Ici on veux fusionner le update (<strong>7cd2fe3</strong>) avec le précédent on remplace donc son pick par squash (l’option qui nous est utile).</p>
<p><img src="http://kandran.fr/assets/2016/01/git-squash-squash-1.png" alt="git-squash-squash" /></p>
<p>Puis l’on enregistre les modification (option wq de vim). On obtient a nouveau l’éditeur vim avec les messages de nos commit a fusionner. On enregistre le nouveau commit avec son message en enregistrant comme lors de l’étape principale. Pour modifier le message il suffit de l’éditer directement (les lignes avec les # sont des commentaires).</p>
<p>
A la fin nous obtenons donc les commit suivant :</p>
<p><img src="http://kandran.fr/assets/2016/01/git-squash-end.png" alt="git-squash-end" /></p>
<p>
Voila en espérant que cette astuce vous soit utile.</p>
Web Component : Introduction à polymer2015-11-22T19:24:02+00:00https://kandran.fr/web-component-introduction-a-polymer<p>Lors d’un précédent article je vous ai fait une <a href="http://kandran.fr/web-component-presentation/">présentation des web component</a> lors de laquelle on a pu voir l’utilité de ceux ci mais leurs principal inconvénient : la compatibilité. Nous allons a présent voir que cette difficulté peut être facilement effacé et que l’écriture de web component avec polymer se trouve assez simplifié.
</p>
<h2 id="vaincre-les-incompatibilités-">Vaincre les incompatibilités :</h2>
<p><img src="http://kandran.fr/assets/2015/11/polyfills.png" alt="représentation polyfills" />Comme vu précédemment chacun des piliers nécessaire au fonctionnement des web composant ne sont pas implémenté au même niveau au sein de chaque navigateur. Pour résoudre ce problème de différence et avoir ainsi des composant disponible sur chaque navigateur une surcouche javascript sera a mettre en amont : <strong>polyfills</strong>.</p>
<p>Pour obtenir polyfills vous pouvez simplement utiliser bower :</p>
<script src="https://gist.github.com/kandran/3aec8a9f90956da3c43e.js"></script>
<p>Enfin vous avez juste a inclure le fichier javascript dans vos pages utilisant les web composants :
<script src="https://gist.github.com/kandran/c9465dac1f68adf672ba.js"></script>
</p>
<h2 id="utiliser-polymer-pour-vos-composants-">Utiliser polymer pour vos composants :</h2>
<p>Polymer est un projet de l’entreprise Google datant de 2013. Il a pour but de permettre l’utilisation de web composant de maniéré simple grâce à une librairie javascript. Il est impératif de noter qu’il existe de nombreuse différence entre la version 0.7 et 1.0. Nous parlerons uniquement de la version 1.0 car il s’agit de la seule que j’ai eu a manipuler et surtout parce quelle est considéré comme production ready par google.</p>
<p>Pour les plus curieux voici le dépôt github du projet : <a href="https://github.com/polymer/polymer" target="_blank">polymer/polymer</a></p>
<p> </p>
<h3 id="installer-polymer-">Installer polymer :</h3>
<p>Rien de plus simple avec bower :</p>
<script src="https://gist.github.com/kandran/ec2cc736720b474015fc.js"></script>
<p>L’un des principaux avantages de polymer hormis le fait de pouvoir facilement créer ces propres composant est bien entendu la grande variété de composant que l’on peut trouver sur le net et donc directement utilisable.</p>
<h3 id="composants-polymer-disponible-et-utilisable-">Composants polymer disponible et utilisable :</h3>
<p>Comme je l’ai dit dans l’article précédent l’une des forces de web composant est le fait de pouvoir ré-utiliser nos composant même dans d’autres projets du fait de leurs isolations. Les composant écrit avec polymer n’échappe pas a la règle. On peut donc trouver :</p>
<ul>
<li>des composants Google ( youtube, google map etc) pour pouvoir utiliser les services facilement</li>
<li>des composants dédié au material design (paper componant)</li>
<li>des composants utilitaires (iron composant)</li>
<li>des composants pour firebase permettant de faire du web temps réel</li>
<li>et bien d’autres ….</li>
</ul>
<p> Vous pouvez trouver vos composant sur les sites suivants :</p>
<ul>
<li><a href="http://bit.ly/1J11JYE">Polymer Element</a> (composant plutôt officiel)</li>
<li><a href="http://bit.ly/1J11s82">Custom Element</a> (banque de composant comme packagist)</li>
</ul>
<h3 id="créons-un-composant-">Créons un composant :</h3>
<p>Nous allons donc créer un composant avec polymer. Le composant que l’on va faire affichera les informations relative a un stream sur twitch. Pour cela nous utiliserons l’api publique du service qui renvoie les informations nécessaire lorsque le stream est actif. Commençons par établir la structure de notre composant et de la page l’utilisant : </p>
<script src="https://gist.github.com/kandran/3a50ae4df6c1ee079512.js"></script>
<p>On a donc un composant vide et la page pouvant inclure notre composant. La première étape est de récupérer les données depuis l’api. Pour cela nous avons a exécuter une requête ajax.
<script src="https://gist.github.com/kandran/b68c4c48f5ed2c7b5e73.js"></script></p>
<p>Dans le fichier index on a rajouté un attribut stream-name qui corresponds a la propriété streamName dans notre composant. Dans le composant on forge l’url associé au stream a l’instanciation via la méthode ready. Notre appel ajax est fait par l’élément iron-ajax qui lors d’une réponse appelle la méthode hresponse. Il nous reste plus qu’a mettre en forme notre élément a partie des données reçues. Nous avons donc le code suivant :</p>
<script src="https://gist.github.com/kandran/38bae5ef508507fa6ec8.js"></script>
<p>A noter :</p>
<p>L’on utilisera des pour afficher les variables, des la modification de la propriété la variable affiché change. Il faut que ces éléments soit isolé dans une balise ou attribut – les concaténation de fonctionne pas.</p>
<p>L’aspect visuel est sinon géré en html classique ce qui permet d’avoir des composant de tout type.</p>
<p> </p>
<p>J’espère que cet article vous as donné envie d’utiliser des web composants, lors du prochain nous verrons un exemple un peu plus poussé avec les notions de boucles etc. N’hésitez pas a laisser un commentaire pour avoir plus d’information sur cette technologie.</p>
Pourquoi vous devez utiliser des tests autant que possible2015-11-15T19:52:50+00:00https://kandran.fr/pourquoi-utiliser-des-tests<p>Bien que souvent considéré comme fastidieux et peu utiles l’écriture de test automatisable pourra vous être d’un grand secourt.</p>
<p>Ils sont en outre les garants de la qualité du code de l’application.</p>
<p>Nous allons donc voir plus en détails quelles sont les diverses utilités des tests et pourquoi vous devez les utiliser.</p>
<p>C’est hélas une partie négligé car pour beaucoup :</p>
<ul>
<li>ça fait perdre du temps</li>
<li>je code super bien donc pas besoin de tests</li>
<li>…</li>
</ul>
<p> </p>
<p>Bon que l’on soit clair je trouve toutes les raisons ci dessus nulles et a oublier au plus vite. Je vais donc vous dire a présent pourquoi je pense ainsi.</p>
<p> </p>
<p>Alors le célèbre ça fait perdre du temps, certes écrire des tests prends du temps mais quand il vas y avoir un bug – et il y’en a toujours – vous allez être content de le trouver rapidement avec ce test et la vous allez gagner du temps. Idem quand vous allez modifier le code plus tard ces tests automatisés vous aiderons bien a vérifier qu’il n’y a pas eu d’introduction de bug.</p>
<p> </p>
<p><img src="http://kandran.fr/assets/2015/11/costBug.jpg" alt="cout d'un bug" /></p>
<p>Je tiens aussi a signaler que le coût d’un bug augmente au fur et a mesure du temps. En effet corriger un bug en phase de développement n’a pas le même cout qu’une fois en production.</p>
<p> </p>
<p>Pour la partie du je code super bien … pas la peine de s’étaler sur le fait que personne ne peux être dur de ne jamais introduire de bug, de ne jamais zapper un cas d’utilisation – surtout qu’on a la fâcheuse tendance a toujours vouloir avoir le cas idéal et ne pas prendre en compte des cas totalement illogique.</p>
<p> </p>
<p> </p>
<p>Comme j’ai pu le dire les tests nous aide à vérifier que notre application fonctionne comme voulu, que l’on ne re-introduit pas de bug mais il faut quand même rester vigilent car il est possible que nos tests de soit pas complet (cas oublié, bug non testés etc) et doivent donc comme votre code vivre et <strong>rester à jour</strong> sous risque de devenir plus néfaste que leurs absences.</p>
<p> </p>
<blockquote>
<p><strong>Program testing can be used to show the presence of bugs, but never to show their absence!</strong></p>
<p><cite>Edsger W. Dijkstra</cite></p>
</blockquote>
<p>Personnellement les tests sont aussi la comme documentation, en effet en regardant les tests on comprend souvent comment fonctionne l’application ce qui est plus rapide que devoir lire des pages et des pages de doc. Je vous invite à lire les tests autant que possible (en plus leurs absence n’est pas très bon signe sur la qualité du code selon moi).</p>
<p> </p>
<p>En résumé les tests :</p>
<ul>
<li>permette de vérifier que le fonctionnement est celui attendu</li>
<li>Eviter l’introduction de bug lors de modification ultérieure – et donc pouvoir toucher au code de manière sereine</li>
<li>Faire une sorte de documentation</li>
<li>Doivent vivre avec le code pour ne pas être inutiles et dangereux</li>
</ul>
<p> </p>
<p>Je vais bien entendu écrire des articles sur ce sujet (traitant le sujet d’un point de vu pratique) en parallèle de celui sur les web component.</p>
Lectures : Big Data et Machine Learning2015-11-11T00:08:29+00:00https://kandran.fr/lectures-big-data-et-machine-learning<p><img src="http://kandran.fr/assets/2015/11/bigDataEtMachineLearning.jpg" alt="bigDataEtMachineLearning" /></p>
<p>J’inaugure avec ce livre une catégorie sur les livres que j’ai lu ainsi que mon avis sur ceux ci. Il s’agit du dernier livre que j’ai fini.</p>
<p> </p>
<p>Lorsque j’ai décidé d’acheter ce livre je n’avais pas de connaissance particulière dans le domaine du Big Data ni du Machine Learning mais j’ai été attiré par celui ci pour connaitre un peu plus ces domaines que l’on peut régulièrement retrouver.</p>
<p>Je trouve ce livre assez bien découpé et donc facilement accessible.</p>
<p> </p>
<p>Les principales parties sont :</p>
<ul>
<li>Big Data ( origine, intérêt, noSql, algorithme et framework)</li>
<li>Machine Learning ( présentation du métier de data scientist, traitement des données, algorithme de machine learning, visualisation)</li>
<li>Outils du Big Data (Hadoop, Pig, Hive, architecture lambda, apache storm)</li>
</ul>
<p>Bien que majoritairement théorique ce livre est a mon gout intéressant pour tout ceux voulant avoir un aperçut de ces domaines – la dernière partie permet de ce pencher plus sur la pratique. Je le conseille donc a tout ceux voulant un livre d’introduction au Big Data et au Machine Learning.</p>
<p>Auteurs : Pirmin Lemberger, Marc Batty, Médéric Morel, Jean-Luc Raffaëlli</p>
<p>Vous pouvez trouver ce livre sur <a href="http://www.amazon.fr/Big-Data-Machine-Learning-scientist/dp/2100720740" target="_blank">Amazon</a></p>
Web Component : Présentation2015-11-05T08:00:40+00:00https://kandran.fr/web-component-presentation<p>Pour mon dernier jours au sein de mon ancienne société j’ai eu a présenter ma dernière Reutek. J’ai choisi comme sujet les web component et plus particulièrement l’implémentation a l’aide de Polymer. Etant donnée l’attrait de ceux-ci de la part de ceux présent a cette réunion – moi compris pourtant je ne suis pas très attiré par le développement front – je me suis dit qu’il faudrait que j’y consacre une série d’article.</p>
<p>Dans ces articles je vais expliquer qu’est ce qu’un composant (et plus particulièrement un web composant) pour que vous puissiez simplifier vos pages html.</p>
<h1 id="quest-ce-quun-composant-">Qu’est ce qu’un composant ?</h1>
<p> </p>
<p>Pour résumer un composant est une portion identifiable d’un programme plus large qui a pour but d’apporter un ensemble particulier de fonctionnalités. Bon je l’accorde dit comme ça ce n’est pas très clair et pourtant en tant que développeur ce concept vous est familier j’en suis sur.</p>
<p> </p>
<p><img src="http://kandran.fr/assets/2015/10/lego-1-300x185.jpg" style="float: right;" /></p>
<p>Prenons les lego ci-contre, certains sont différents en eux pourtant on peut les assembler ensemble pour effectuer une construction de notre choix. Chaque <em>type</em> de blocs a une fonction définie dans notre constructions et permettent ensemble d’avoir notre construction finale.</p>
<p>Maintenant que vous avez compris la notion de composant je vais passer à la partie qui nous intéresse vraiment les web composant que j’appellerai souvent web component.</p>
<p> </p>
<h1 id="les-composants-adaptés-au-monde-du-web">Les composants adaptés au monde du web.</h1>
<p> </p>
<p>Vous vous doutez bien que lorsque l’on peut isoler des blocs, les factoriser pour pouvoir s’en servir dans le futur sur divers projets on ne ce gène pas. Autant ne pas re-inventer la roue a chaque fois. En cela les web component peuvent être utiles.</p>
<p><span style="color: #ff0000;">Toutefois je dois vous prévenir de ne pas les utiliser encore en production. </span></p>
<p>Les raisons sont simples :</p>
<ul>
<li>Même si il s’agit d’un projet porté par un working group du W3C, il n’y a pas encore de norme arrêté – et ça risque de prendre un peu de temps avant de l’être</li>
<li>Seuls certains navigateurs sont compatibles.</li>
</ul>
<p> </p>
<h2 id="les-templates">Les templates</h2>
<p> </p>
<p>Il s’agit des modèles de base, pour être plus exact il s’agit de la structure à dupliqué. Ce bloc html ne sera pas évalué.</p>
<script src="https://gist.github.com/kandran/e184709262c868ad0f11.js"></script>
<p>Pour “l’instancier” nous avons besoin d’un peu de javascript. L’idée est de récuperer le contenu de celui ci pour l’injecter dans le DOM en tant qu’élément visible comme ceci par exemple : </p>
<script src="https://gist.github.com/kandran/77a14d5ebe065566ba35.js"></script>
<h2 id="le-shadow-dom">Le shadow DOM</h2>
<p> </p>
<p>Comme en programmation classique lorsque l’on encapsule une portion de code l’on souhaite que celle ci ne soit pas directement injecté dans les sources les polluants. Ceci reste vrai avec les web composant a l’aide du shadow DOM. Pour explique simplement il s’agit d’un nouvel arbre DOM totalement indépendant situé dans un élément. De base il ne sont pas visible (on peut dans les réglages de l’inspecteur de code de chrome les voir en cochant <strong>show user agent shadow DOM</strong>).</p>
<p>L’une des balises utilisant le shadow DOM la plus connue est la balise HTML5 video – derrière cette simple balise se trouve un ensemble d’élément html définissant les divers boutons etc.)</p>
<p>On entendra parler de Shady DOM par moment la différence est qu’au lieu d’être une fonctionnalité native comme le shadow DOM il s’agit d’élément dans le DOM classique avec une classe style-scope permettant d’émuler le shadow DOM.</p>
<p> </p>
<h2 id="les-custom-element-">Les custom element :</h2>
<p> </p>
<p>Il s’agit de bloc englobant les Template ayant pour but de gérer le cycle de vie du composant. Ainsi l’on pourra avoir nos balises personnelle avec par exemple notions d”héritage.</p>
<p> </p>
<h2 id="les-html-imports">Les HTML Imports</h2>
<p> </p>
<p>On arrive sur une fonctionnalité bien pratique pour pouvoir réutiliser nos composant dans plusieurs projet. La notion d’import en effet il sera donc possible d’écrire notre composant dans un fichier html séparé et de juste l’importer avant l’utilisation. Ainsi on peut importer dans notre page des fichier externe – toutefois les import n’importerons pas le code HTML a proprement parlé juste les éléments et template.</p>
<p>Pour cela rien de plus simple
<script src="https://gist.github.com/kandran/77a14d5ebe065566ba35.js"></script></p>
<p> </p>
<p>Les technologies de web composant on l’air vraiment intéressante mais entre la complexité de l’ensemble et les problèmes de compatibilité on peut vite se démoraliser et ne pas les utiliser. Mais n’ayez craintes il existe des librairies permettant d’utiliser les web composant de manière plus uniforme et simple. Notamment POLYMER qui fera l’objet de futur articles.</p>
Mise en place d’un serveur teamspeak facilement.2015-06-29T11:49:00+00:00https://kandran.fr/mise-en-place-dun-serveur-teamspeak-facilement<p>Pour de nombreux jeux en ligne la communication entre les joueurs est essentielle. Souvent skype ne suffit plus par rapport au nombre de personne connecté. Les chefs de guilde doivent donc se tourner vers des solutions telles que teamspeak ou mumble. Souvent sans connaissance particulière ils se tourne donc vers des fournisseurs qui pratique des prix assez élevé selon moi. Plus de 5€ par mois pour un simple serveur teamspeak de 32 slots en moyenne d’après mes recherches. Nous pouvons largement réduire ce prix a l’aide de VPS.</p>
<p> </p>
<h1 id="location-du-vps">Location du VPS</h1>
<p>Un VPS est un serveur virtualisé sur lequel vous avez la main, ainsi vous pouvez installer votre teamspeak, mais aussi un bot pour celui ci et même le site de votre guilde. Et ce pour bien moins cher que la location d’un serveur teamspeak.</p>
<p>Loin de moi l’idée de faire de la pub mais avec 2,39€/mois vous pouvez avoir un vps chez ovh ( <a href="https://www.ovh.com/fr/vps/vps-classic.xml">VPS classic 1</a> ), sur ce serveur libre a vous d’installer tout ce qui est utile – personnellement j’héberge le serveur teamspeak de ma guilde ainsi qu’un petit site web sans problème et j’ai encore de la marge.</p>
<p> </p>
<p> </p>
<h1 id="installation-de-teamspeak">Installation de teamspeak</h1>
<p>Maintenant que vous avez votre serveur vps, voici un dépot github qui va vous permettre d’installer votre serveur tres facilement <a href="https://github.com/stokes84/TeamSpeak-Installer" target="_blank">TeamSpeak-Installer</a>.</p>
<p> </p>
<p>Suivez les consignes présent sur le dépôt (champs intall) et l’installation sera faite en même pas 5 minutes. Par contre pensez a noter les informations d’administration – le login pour être server admin query ainsi que le token pour vous donner les droit de serveur admin sur le teamspeak.</p>
<p> </p>
<p>Si vous utilisez iptable pour filtrer les connexions a votre serveur (très fortement recommandé – obligatoire selon moi) voici les règles iptables a jouer pour autoriser le fonctionnement de votre serveur ( j’ai utilisé les ports par défaut uniquement)</p>
<script src="https://gist.github.com/kandran/e9658b4ade8d532feaa1.js"></script>
<p>Voila votre serveur teamspeak est enfin totalement opérationnel et vous pouvez a coter utiliser le serveur pour d’autre services. Si la limite des 32 slots est gênante vous pouvez <a href="http://npl.teamspeakusa.com/ts3npl.php" target="_blank">demander une NPL</a> qui est gratuite pour étendre a 512 slots votre serveur toujours gratuitement – hormis les frais de vps.</p>
<p>En cas de problème sur l’installation du serveur teamspeak sur votre vps ou même pour l’utilisation de votre vps n’hésitez pas a me contacter sur twitter.</p>
<p> </p>
<p> </p>
Game-Scan : Présentation2015-06-27T00:01:36+00:00https://kandran.fr/game-scan-presentation<p><img src="http://kandran.fr/assets/2015/06/logo.png" alt="logo" /></p>
<p>De nombreux jeux proposent des API pour accéder aux informations sur le jeu lui même mais aussi sur les joueurs. C’est API ne sont pas souvent utilisé car peu connues ou alors parce que de nombreux projet n’ont pas l’envie et le temps de développer tout les éléments afin de pouvoir les utiliser. C’est la qu’intervient le projet game-scan.</p>
<p>Game-Scan est un ensemble de module PHP qui permet d’appeler de manière simple les API des différents jeux. En effet chaque jeux possédera son propre module installable via composer – ainsi nous pouvons donc avoir un module principal gérant toutes les actions communes aux divers modules. Puis pour accéder aux différentes ressources de l’API il suffira après avoir renseigné les clefs api d’instancier la classe associée puis naviguer dans l’objet afin de récupérer les informations voulues.</p>
<p>Au fur et a mesure des modules – correspondant a un nouveau jeu avec ses api d’ouverte- seront implémenté et ceux présent se verront compléter de sorte a couvrir la totalité de l’API. Bien entendu les pré-requis pour ces modules sont minimaux, on évite au maximum les dépendances afin que ces modules puissent être utilisé dans des applications diverses et variées.</p>
<p>L’ensemble du code source de ce projet sera bien entendu testé avec PHPUnit (on utilisera Travis pour lancer les tests) et la qualité du code sera effectué avec Scrutinizer, Insight…</p>
<p>Apres une première analyse nous avons pour but d’implémenter les modules correspondants aux jeux suivant :</p>
<ul>
<li>WoW</li>
<li>Diablo 3</li>
<li>Starcraft 2</li>
<li>LoL</li>
</ul>
<p> </p>
<p>Vous pouvez retrouver l’ensemble des modules ainsi que les codes sources sur <a href="https://github.com/Game-Scan" target="_blank">github</a>. De même si certaines personnes souhaite participer au projet cela est totalement possible via le process de pull request etc.</p>
Utiliser PHP-CS-fixer avec PHPStorm2015-05-21T18:00:24+00:00https://kandran.fr/utiliser-php-cs-fixer-avec-phpstorm<p>Les normes sont utiles afin que tous le monde puisse facilement lire du code source avec une certaines uniformité. Ainsi l’on repère facilement les différents blocs etc. Bien qu’elles devraient être obligatoire de nombreux développeur ne les utilises pas. Souvent parce que les contraintes de saut de lignes, d’indentations etc. sont trop nombreuses. Heureusement il existe des outils pour le faire de manière automatique. En PHP la norme est le PSR, nous allons donc voir comment utiliser php-cs-fixer pour pouvoir rendre votre code conforme.</p>
<h1 id="etape-1--pre-requis">Etape 1 : Pre-requis</h1>
<p> </p>
<p>Pour pouvoir utiliser cet outil vous devez avoir php d’installé sur votre PC, ainsi que php-cs-fixer.</p>
<p>Vous pouvez récupérer php-cs-fixer <a href="http://cs.sensiolabs.org/">Ici</a>. Personnellement j’ai récupéré l’archive phar.</p>
<h1 id="etape-2--configuration">Etape 2 : Configuration</h1>
<p> </p>
<p>Nous allons donc définir un external tools dans PHPStorm, pour cela on se rend dans les options ( ctrl + alt + S) puis dans l’onglet external tools. On en ajoute un nouveau et on rempli comme ci-dessous</p>
<p><img src="http://kandran.fr/assets/2015/05/php-external-tool.png" alt="configuration phpcsfixer" /></p>
<p>Dans program on met le lien vers l’exécutable php, j’ai utilisé la macro php de PHPStorm pour être plus générique, cela utilisé l’exécutable défini dans PHPStorm.</p>
<p>Dans parameters on met le chemin vers le fichier php-cs-fixer (le .phar chez moi) le niveau a utiliser (psr2) l’option verbose le mot clef fix et surtout le chemin vers le fichier courant avec les macros afin de pouvoir s’en servir sur n’importe quel projet php ouvert avec l’ide.</p>
<p>Voici mes paramètres, a adapter selon vos besoin bien entendu (surtout le chemin vers le fichier php-cs-fixer)</p>
<p>Program</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$PhpExecutable$
</code></pre></div></div>
<p>Parameters</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>D:\Projets\php-cs-fixer.phar --level=psr2 --verbose fix $FileDir$/$FileName$
</code></pre></div></div>
<p>Working directory</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ProjectFileDir$
</code></pre></div></div>
<h1 id="etape-3--utilisation">Etape 3 : Utilisation</h1>
<p> </p>
<p>Maintenant vous pouvez vous en servir en allant dans Tools > External Tool > PHP cs fixer (ou autre si vous avez changé le nom). Mais aussi lors du click droit sur un fichier/dossier en allant dans le sous menu external tools.</p>
<p> </p>
<p>Je vous conseille par contre de mettre un raccourci (keymap -> external tools -> php cs fixer) pour pouvoir l’appliquer directement avec le clavier.</p>
<p> </p>
<p>Pour automatiser cette options vous pouvez faire un hook avec git sur le pre-commit ou définir un file watcher dans PHPStrom. L’action sera faite au moment de la sauvegarde. <a href="https://gist.github.com/kandran/2154e0ef49bd25d28e90">Plus d’information ici</a></p>
Design pattern stratégie2015-05-14T18:00:51+00:00https://kandran.fr/design-pattern-strategie<p><img src="http://kandran.fr/assets/2015/05/strategie1.png" alt="uml design pattern strategie" /></p>
<p>Le design pattern stratégie permet d’appliquer un algorithme dynamiquement au sein de votre application. On a donc une famille d’algorithmes au sein d’objets interchangeables a l’aide d’une interface. Il est assez simple, et même probable que vous l’utilisait déjà sans le savoir. Nous allons donc voir un peu plus en détail le design pattern stratégie comme cela à été demandé il y a peu.</p>
<p>Nous avons donc une interface qui contient toutes les méthodes communes a nos algorithmes. Ensuite dans un objet qui implémentera cette interface nous allons mettre le code correspondant a notre algorithme. Ainsi par exemple nous avons une collection d’objet implementant cette interface on peut leurs appliquer les méthodes communes sans avoir la moindre idée de la classe réelle.</p>
<p>Le design pattern peut etre utilisé par exemple pour effectuer des tris. Ensuite dans les classes les implémentant nous pouvons donc utiliser des algorithmes totalement différent puis permettre leurs utilisations au sein d’un objet principal en utilisant l’interface.</p>
<p>Pour expliquer ce design pattern nous allons utiliser des applications différentes pouvant être lancé par une classe principale qui ne sait pas quelle application elle va lancer. On utilise juste l’interface.
<script src="https://gist.github.com/kandran/4b1f80698da9bad8602b.js"></script></p>
<p>Nous avons donc deux applications (A et B) ayant pour interface ApplicationInterface. Une classe principale qui appelle la méthode run d’un objet implémentant l’interface ApplicationInterface. Ainsi notre classe principale peut faire les différents appel sans avoir la connaissance de la classe réelle.</p>
<p>Ceci permet d’avoir bien entendu un code plus souple et maintenable, bien entendu il est fortement conseillé de privilégier l’utilisation des interfaces a celle des classes. En effet cela vous permettra d’avoir dans un premier temps un code plus souple mais surtout cela vous permettra d’écrire plus facilement vos tests.</p>
Retour d’utilisation d’inbox2015-05-11T23:21:38+00:00https://kandran.fr/retour-dutilisation-dinbox<p>J’ai pu avoir accès a la beta d’inbox by gmail il y a un peu plus d’une semaine. Je vais donc vous faire parvenir un petit retour sur ce service.</p>
<p>Personnellement malgré quelques petits défaut j’accroche assez bien et je trouve que je gagne un peu de temps comparé a l’application web gmail.</p>
<p> </p>
<p>Il s’agit d’un nouveau service proposé par Google pour lire ses messages etc. Par défaut il est obligatoirement synchronisé avec votre compte gmail. Les actions effectués au sein de chaque service ce répercute sur l’autre.</p>
<p>L’interface a été totalement remanié pour être plus claire et mettre plus en avant vos mails. De même pour l’interface de vos contacts. Tout semble avoir rajeunie.</p>
<p>Pour vous en servir vous pouvez soit envoyer un mail a inbox@google.com soit avoir une invitation de la part de quelqu’un utilisant déjà le service (il me reste quelques invitations si besoin).</p>
<p>Un point important à préciser est que cette messagerie est faite pour avoir peu de message dans la boite de réception en effet il est possible de marquer les messages comme terminés (équivalent de archivé sur gmail) pour qu’il ne soit plus dans votre boite de réception bien que toujours présent et accessible via une recherche etc. De même les messages importants peuvent être épinglé pour pouvoir les retrouver facilement.</p>
<h1 id="les-points-positifs">Les points positifs</h1>
<p>Je vais maintenant vous dire pourquoi ce service m’a séduit.</p>
<h2 id="les-contenus-mis-en-avant-">Les contenus mis en avant :</h2>
<p>Certaines informations principales de vos mails sont souvent des pièces jointes, il faut alors accéder au mail pour les trouver. Avec inbox c’est fini avant même d’ouvrir un mail vous avez des informations sur les pièces jointes (nom, type et selon les types elles sont même visible directement).</p>
<p>De même si votre mails contient des informations sur un vol, un restaurant etc les informations sont aussi mise en avant.</p>
<h2 id="le-tri-automatique">Le tri automatique</h2>
<p>Oui en fonction du contenu les messages sont trié dans des catégories par défaut ainsi que vos propres catégories a l’aide de filtre. Il sont ainsi regroupé et vous ne pouvez commencer votre tour que par l’essentiels. C’est assez pratique pour pouvoir ne se concentrer que sur l’utile au moment de la lecture. Un autre point assez intéressant qui viens avec le tri automatique est la possibilité de ne recevoir les mails d’une certaine catégorie que une fois par jours ou une fois par semaine si l’on le désire. Par défaut les mails sont disponible dès la réceptions.</p>
<h2 id="les-rappels">Les rappels</h2>
<p>Il s’agit la de la fonctionnalité qui m’a le plus séduit, en effet il est possible de placer de nombreux rappel au sein d’inbox. Le premier type de rappel est très simple il s’agit d’une simple todo list. Le message apparaîtra tant que vous ne l’avez pas mis comme terminé. Bien entendu vous pouvez faire en sorte qu’un rappel apparaisse dans la boite au lettre que a partir d’une certaine date ou lorsque l’on se trouve a une certaine position géographique (il faudra alors l’application mobile).</p>
<p>Ainsi je peux le matin me créer un rappel a 8h00 mais ne l’avoir affiché que le soir a partir de 19h00. Le rappel est donc mis en attente pendant ce temps. Il est important de noter que en dessous de la tâche nous avons la durée depuis laquelle elle est mise en attente.</p>
<p> </p>
<p>La ou cela deviens merveilleux c’est que l’on peut mettre un mail en attente, il disparaît ainsi de la boite de réception pour ne réapparaître plus tard quand il sera utile ou lorsque il sera possible de le traiter. Ainsi plus de risque d’oublier un mail remis a plus tard mais aussi plus de culpabilité a voir ce mail sans réponse dans votre boite de réception.</p>
<h1 id="les-points-négatifs">Les points négatifs</h1>
<p>Comme de partout il y a quelques points négatifs. Premièrement pour faire les tris automatiques etc il est évidents que vos mails sont analysé par des algorithmes appartenant a google – après il faut relativisé si le mail est sur votre adresse gmail avec ou sans inbox google a la possibilité d’y avoir accès.</p>
<p>Mais plus important pour moi c’est une erreur d’ergonomie, en effet actuellement il est impossible de supprimer un mail en un clic. Il faut passer par un menu pour pouvoir enfin le supprimer. Cette action bien que courante va vous faire perdre du temps a chaque suppression.
</p>
<p>En conclusion je suis devenu assez fan de ce service qui me fait gagner du temps dans le tri de mes mails mais aussi me sert de todo-list. De plus c’est toujours agréable d’avoir 0 messages ou tâche en boite de réception car tout est terminé ou en attente et pouvoir profiter du beau soleil en fond d’inbox.</p>
<p>Il me reste quelques invitations si jamais certains veulent tester le service eux aussi.</p>
Utilisez diff et patch pour trouver et appliquer vos modifications2015-04-30T18:00:56+00:00https://kandran.fr/utilisez-diff-et-patch-pour-trouver-et-appliquer-vos-modifications<p>Vous avez déjà eu a chercher les différences entre deux fichiers ?</p>
<p>Modifier un fichier, puis voulu transmettre uniquement vos modifications ?</p>
<p>Eu a appliquer des modifications sur un fichiers ?</p>
<p>Si vous avez répondu oui a un moment cet article est fait pour vous.</p>
<h1 id="la-commande-diff">La commande diff</h1>
<h2 id="introduction"><strong>Introduction</strong></h2>
<p>Pour résumer la commande <strong>diff</strong> permet de voir les différences entre plusieurs fichiers. Cette comparaison se fait ligne par ligne de manière séquentielle et comprends donc tout le fichier.</p>
<p>Les cibles peuvent être</p>
<ul>
<li>des fichiers</li>
<li>des dossiers</li>
<li>et même l’entrée standard (via le symbole -).</li>
</ul>
<p>En fonction du type de cible le comportement varie un petit peu, surtout lors qu’il ne s’agit pas de deux fichier.</p>
<p>Lorsque l’une des cibles est un dossier et l’autre un fichier la comparaison est faites sur les fichiers de même nom.</p>
<p>Pour le cas de deux dossiers les fichiers de même nom sont comparé un a un de manière séquentielle. Par défaut il n’y a pas de récursivité, on ne compare que le premier niveau.</p>
<p>La syntaxe est :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>diff [options] cible1 cible 2
</code></pre></div></div>
<p>Comme vous avez pu le voir dans la commande ci-dessous diff peut avoir des options.</p>
<p>Voici les plus pratiques et utilisé :</p>
<ul>
<li><strong>-b</strong> ignore les différences du à des espaces blancs</li>
<li><strong>-B</strong> ignore les différences du à des lignes blanches</li>
<li><strong>-i</strong> ignore la casse (c’est a dire les différences entre les minuscules et les majuscule)</li>
<li><strong>-q</strong> indiquer seulement si les fichiers sont différents et ne pas afficher les différences elles-mêmes</li>
<li><strong>-s</strong> indiquer lorsque deux fichiers sont identiques</li>
<li><strong>-r</strong> comparaison récursive des fichiers d’un répertoire, sous répertoires…</li>
</ul>
<h1 id="la-commande-patch">La commande patch</h1>
<p>Les patch permettent d’appliquer rapidement les modifications effectué entre deux fichiers.</p>
<p>Son utilisation est assez simple entre deux fichiers</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>patch fichierSource &lt; fichier.patch
</code></pre></div></div>
<p>Dans le cas des répertoires il y a une option <strong>p</strong> pour préciser le niveau de profondeur, en effet la hiérarchie des fichiers a pu changer entre le pc ou le patch a été effectué et le pc où l’on applique le patch.</p>
<p>On ajoute le nombre de dossier a sauter dans l’arborescence pour appliquer le patch. Souvent l’option -p1 fonctionne – plus de 90% des cas.</p>
<p>Par exemple on pourrai avoir</p>
<pre>patch -p3 < fichier.patch</pre>
<h1 id="annuler-un-patch">Annuler un patch</h1>
<p>Vous avez appliqué le mauvais patch a votre fichier, pas de panique une option est prévu pour revenir au fichier original avec le fichier modifié et notre fichier de patch grâce a l’option <strong>-R</strong></p>
<p>Attention pour les patchs avec les répertoire il faut ici encore spécifier la profondeur avec l’option -p comme lors de l’application du patch.</p>
<p>Par exemple</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>patch -p3 -R &lt; fichier.patch
</code></pre></div></div>
<h1 id="créer-un-patch-avec-diff">Créer un patch avec diff</h1>
<p>Pour créer un patch avec diff entre deux fichiers on utilise l’option <strong>-u</strong> et on redirige la sortie vers notre fichier de patch a l’aide du symbole >.</p>
<p>Par exemple</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>diff -u fichierInitial.c fichierModifie.c &gt; fichier.patch
</code></pre></div></div>
<p>Pour une arborescence complète l’option change un peu : on utilise <strong>-rupN</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>diff -rupN dossierInitial/ dossierModifie/ &gt; dossier.patch
</code></pre></div></div>
<h1 id="conclusion">Conclusion</h1>
<p>Pour résumer avec ces commandes vous pouvez</p>
<ul>
<li>Voir les différences entre fichiers : <em>commande diff</em></li>
<li>Créer un patch : <em>commande diff avec l’option -u</em></li>
<li>Appliquer un patch : <em>commande patch</em></li>
<li>Revenir a l’état d’avant le patch : <em>commande patch avec l’option -R</em></li>
</ul>
<p>Bien entendu des qu’il y a des dossiers d’autre options sont a rajouté pour gérer la récursion, les fichiers manquant, les différences de hiérarchies etc.</p>
<p>NB : la commande diff est disponible aussi sur git.</p>
<p>En espérant que ces deux petites commandes vous fasse gagner un peu de temps.</p>
Activer Inbox by Gmail sans application mobile2015-04-29T00:20:34+00:00https://kandran.fr/activer-inbox-by-gmail-sans-application-mobile<p> Si vous aussi vous avez obtenue une invitation pour le service Inbox by gmail mais que comme moi vous n’avez ni smartphone sous android ni iphone vous avez du etre un peu frustré quand lors de votre connexion sur l’application web vous avez un message demandant un passage par l’application mobile. Et bien entendu aucune application de disponible pour votre support (windows phone pour moi)</p>
<p>Toutefois il est assez simple de s’en passer.</p>
<p>Avec le mail d’invitation se trouve en bas un token (code d’invitation), grâce a celui ci vous pouvez vous passer de l’application mobile.</p>
<p>Collez le a la fin de cette URL</p>
<pre>https://mail.google.com/mail/btinvites/mobile?token=</pre>
<p>Accéder a la ressource, un fichier est normalement téléchargé en parallèle un mail vous confirmera que l’application sera utilisable en mode web.</p>
<p> </p>
Build d’application node-webkit avec grunt2015-04-23T18:00:23+00:00https://kandran.fr/build-node-webkit-app<p>Avec node-webkit-builder vous allez pouvoir build votre application node-webkit en ligne de commande assez simplement. Le module se charge de télécharger les exécutables, de créer votre dossier de release et build votre application. Mieux encore, ce processus peut être simplifié avec un plugin grunt. Nous allons donc voir comment utiliser au mieux ce plugin pour avoir votre application disponible sur les diverses plateformes.</p>
<h1 id="import-de-node-webkit-builder">Import de node-webkit-builder</h1>
<p>Commençons par creer notre fichier <strong>package.json</strong>, ce fichier servira de base pour nos dépendance nodeJs nécessaire au build, c’est a dire notre plugin grunt.</p>
<p> </p>
<figure class="highlight"><pre><code class="language-json" data-lang="json"><span class="p">{</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"node-webkit-starter-pack"</span><span class="p">,</span><span class="w">
</span><span class="nl">"description"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Beggins with node-webkit using grunt for packaging"</span><span class="p">,</span><span class="w">
</span><span class="nl">"devDependencies"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"grunt"</span><span class="p">:</span><span class="w"> </span><span class="s2">"latest"</span><span class="p">,</span><span class="w">
</span><span class="nl">"grunt-node-webkit-builder"</span><span class="p">:</span><span class="w"> </span><span class="s2">"latest"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span></code></pre></figure>
<p>Globalement il s’agit d’un fichier de dépendance classique pour nodeJs, on spécifie que l’on a besoin de grunt et grunt-node-webkit-builder pour pouvoir utiliser nos build automatiques.</p>
<p>Pour installer nos dépendance il suffit d’un simple</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install
</code></pre></div></div>
<p>Maintenant nous allons voir comment configurer notre plugin grunt pour répondre a nos attentes.</p>
<p> </p>
<h1 id="configurationde-node-webkit-builder">Configuration de node-webkit-builder</h1>
<p>Pour configurer grunt nous allons remplir un fichier <strong>Gruntfile.js</strong>. Voici ci dessous une configuration possible notre plugins :</p>
<p> </p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">grunt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
<span class="na">nodewebkit</span><span class="p">:</span> <span class="p">{</span>
<span class="na">options</span><span class="p">:</span> <span class="p">{</span>
<span class="na">buildDir</span><span class="p">:</span> <span class="dl">'</span><span class="s1">./build</span><span class="dl">'</span><span class="p">,</span> <span class="c1">// where the build is save</span>
<span class="na">platforms</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">win</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">osx</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">linux</span><span class="dl">'</span><span class="p">],</span> <span class="c1">// platform to build</span>
<span class="na">buildType</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">versioned</span><span class="dl">"</span><span class="p">,</span>
<span class="na">macZip</span><span class="p">:</span> <span class="kc">false</span> <span class="c1">// app isn't zip on mac but it improve speed app</span>
<span class="p">},</span>
<span class="na">src</span><span class="p">:</span> <span class="dl">'</span><span class="s1">./app/**/*</span><span class="dl">'</span> <span class="c1">// Your node-webkit app</span>
<span class="p">},</span>
<span class="p">});</span>
<span class="nx">grunt</span><span class="p">.</span><span class="nx">loadNpmTasks</span><span class="p">(</span><span class="dl">'</span><span class="s1">grunt-node-webkit-builder</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">grunt</span><span class="p">.</span><span class="nx">registerTask</span><span class="p">(</span><span class="dl">'</span><span class="s1">default</span><span class="dl">'</span><span class="p">,</span> <span class="p">[</span><span class="dl">'</span><span class="s1">nodewebkit</span><span class="dl">'</span><span class="p">]);</span>
<span class="p">};</span></code></pre></figure>
<p>Nous avons donc défini pour node-webkit que notre application se situe dans le sous dossier app. De même nous avons mis en place certaines configuration.</p>
<p>De ce fait a chaque build nous retrouverons nos résultats dans les sous dossier <em>./build/appName – Version/platform</em> . Le fait d’avoir mis macZip a false entraînera un fichier plus lourd sur macOs mais le temps de démarrage sera largement amélioré.</p>
<p>Maintenant pour générer nos build il suffit d’entre la commande suivante :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>grunt
</code></pre></div></div>
<p>Je vais éviter de faire une liste des options disponible avec le plugins : pour voir l’ensemble de celle ci vous pouvez vous rendre <a href="https://github.com/mllrsohn/node-webkit-builder#options" title="Dépôt git node webkit builder">ici</a>.</p>
<p>Il faut également savoir que l’on peut surcharger le fichier de configuration de node webkit par plateforme grâce a l’option <strong>platformOverrides</strong>.</p>
<p>J’ai également mis en place un dépôt github avec la structure de base de faire vous permettant de n’avoir qu’a changer les config de base et coder votre application node-webkit. Il est disponible <a href="https://github.com/kandran/node-webkit-starter" title="dépôt starter node webkit">ici</a>.</p>
<p>Je vous invite a jouer avec toutes les options de node webkit, que ce soit dans le package.json contenu au niveau de l’application (dans le dossier app du coup) ou au niveau du fichier Gruntfile.js. Avec cet outil le packaging de vos applications devrait être plus rapide et simple. Pour ma part je vais m’en servir sur mon projet avec node-webkit.</p>
<p> </p>
Présentation node webkit2015-04-22T00:17:13+00:00https://kandran.fr/presentation-node-webkit<p><em>Réaliser des applications portables sur les différents systèmes d’exploitation peut sembler difficile. En effet, il peut y avoir des différences entre les divers codes. Une solution web permet une homogénéité du résultat, mais nous prive du mode complètement hors-ligne et des fonctionnalités apportées par un code natif. Node-webkit nous permet de combiner au maximum les avantages de chaque type.</em></p>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/DZN7GTSpBwNrL9" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>
<p> </p>
<p>Il s’agit d’une présentation que j’ai pu effectuer pour le /dev/var/5 du 12 juin 2014.</p>
<p>Je vous la remet ici afin de servir de base a une série d’article sur node webkit que j’utilise actuellement pour le gestionnaire de fichier host. Prochain article le module grunt node webkit builder pour packager vos applications node webkit facilement.</p>
Emportez et partagez votre éditeur avec C92015-04-16T18:00:39+00:00https://kandran.fr/emportez-et-partagez-votre-editeur-avec-c9<p><img src="http://kandran.fr/assets/2015/04/Cloud9IDE.png" alt="logo cloud 9 - un éditeur en ligne" /></p>
<p>Vous avez déjà eu a éditer votre code mais sans avoir votre éditeur favori ?</p>
<p>Ou simplement du travailler ensemble sur un même code (par exemple lors de prise de note en cours) ?</p>
<p>Si cela vous ai déjà arrivé vous devez savoir a quel points il est difficile d’être à deux en même temps sur le même bout de code en mode collaboratif (comme par exemple etherpad ou google docs pour la prise de texte).</p>
<p>J’ai découvert il y a peu – hélas – un outil qui va changer tout ça : <strong>C9</strong>.</p>
<h1 id="présentation-générale">Présentation générale</h1>
<p>Cloud9 abrégé c9 est un ide en ligne, <strong>accessible ainsi avec un simple navigateur</strong>.</p>
<p>De plus votre code est exécuté dans l’application : une machine virtuelle est disponible configurable selon les besoins. Ainsi avec un simple navigateur vous pouvez facilement coder, compiler si besoin et tester votre application.</p>
<p>Ce qui vous permettra d’éditer facilement vos scripts et tests varié. Il un système de plugin permettant de rendre cet ide aussi performant qu’un ide standard (auto-complétion, coloration, options de refactoring etc.) est disponible.</p>
<p>Mais vous pouvez aussi <strong>partager votre IDE</strong> avec d’autre ainsi que le workspace et même l’application qui tourne sur le workspace tout simplement avec un système de droit.</p>
<p>Lors que vous avez partagé votre ide vous pouvez voir tout ce que les autres utilisateur tape en direct.</p>
<p>Cerise sur le gâteau il est en outre possible de revoir les modifications d’un fichier depuis sa création, avec même une sorte de mode vidéo.</p>
<h1 id="comment-se-servir-de-c9-comme-éditeur">Comment se servir de c9 comme éditeur</h1>
<p>Pour pouvoir utiliser C9 vous pouvez soit :</p>
<ul>
<li>L’héberger vous même les sources sont disponible sur <a href="https://github.com/c9" target="_blank">github </a>– attention il faudra utiliser les plugins etc pour avoir toutes les fonctionnalités</li>
<li>Utiliser le <a href="https://c9.io/" target="_blank">service en ligne</a></li>
</ul>
<p>Pour la suite de l’article je parlerai uniquement du service en ligne, en effet je n’ai pas encore testé d’installer c9 sur ma machine ni sur un serveur.</p>
<p>Vous pouvez vous inscrire gratuitement et profiter de fonctionnalités limitées.</p>
<p> </p>
<p>Avec l’offre gratuite vous pouvez avoir :</p>
<ul>
<li>Une Vm privée</li>
<li>Autant de vm publique que voulu</li>
</ul>
<p>Les vm sont limitées à:</p>
<ul>
<li>1GB d’espace disque</li>
<li>512 mo de ram</li>
<li>les vm non utilisé sont mise en hibernation (il faudra un petit délais pour pouvoir y accéder a nouveau).</li>
</ul>
<p> </p>
<p>Voici un petit screen de l’interface de notre ide</p>
<p> </p>
<p><a href="http://kandran.fr/assets/2015/04/screenshotC9.png"><img class="aligncenter wp-image-70 size-large" src="http://kandran.fr/assets/2015/04/screenshotC9-1024x557.png" alt="screenshotC9" width="648" height="352" srcset="http://kandran.fr/assets/2015/04/screenshotC9-1024x557.png 1024w, http://kandran.fr/assets/2015/04/screenshotC9-300x163.png 300w" sizes="(max-width: 648px) 100vw, 648px" /></a></p>
<h1 id="quelques-cas-dutilisation-possible-">Quelques cas d’utilisation possible :</h1>
<p>Vous pouvez dans un amphi recopier les exemples de TP tous ensemble.</p>
<p>Mais aussi programmer a plusieurs sur le même fichier en même temps. Voire même écrire votre code et obtenir une vidéo de toutes les modifications – ce qui peut être pratique pour un tutorial.</p>
<p>Bien entendu cette solution étant relié a des services de versionning vous pouvez récupérer vos propre dépôt facilement.</p>
<p> </p>
<p>Dans un contexte totalement différent vous pouvez ainsi développer votre application sur un environnement externe et de ce fait économiser les ressources de votre ordinateur.</p>
<p>En effet avec c9 vous avez plus besoin d’ouvrir votre ide favori qui se fait une joie de consommer une quantité de ram importante.</p>
<p>Personnellement même si le concept a l’air assez bien je préfère avoir mon ide en local pour des projets plus important, en effet ils ont quand même souvent plus de fonctionnalités.</p>
<p>Le fait que les sources soient disponible peut nous permettre d’utiliser c9 sur des projets un peu plus privé avec un peu plus de confiance malgré la présence de workspace privée sur le site.</p>
<p>Que pensez vous de cet outil ? Seriez vous prêt a passer totalement dessus ? Pour quels genre de projet ?</p>
Design pattern : Visiteur2015-04-09T18:00:11+00:00https://kandran.fr/design-pattern-visiteur<p><img src="http://kandran.fr/assets/2015/04/VisitorDiagram.svg_.png" alt="VisitorDiagram.svg" /></p>
<p>Cette semaine je vais vous présenter un nouveau design pattern que je trouve assez intéressant : le design pattern visiteur.</p>
<p>Le pattern Visiteur (Visitor) permet de séparer de manière claire un algorithme d’une structure de donnée. L’algorithme n’est donc pas implémenté dans la classe mais dans des classes externes.</p>
<p>On limite ainsi tout couplage entre les données et leurs traitement ce qui permet d’ajouter des traitements a nos structures de données sans avoir a les modifier. De plus la classe externe est informé du type exact de l’objet qu’il visite a l’aide du principe du double dispatch ( bon sauf en php ou la signature des méthodes ne prends pas en compte le type des entrées).</p>
<p> </p>
<h2 id="implémentation-du-design-pattern-visiteur"> Implémentation du design pattern visiteur</h2>
<p> </p>
<p>Bien que souvent évoqué comme complexe ce design pattern est relativement simple. Notre classe visitable (c’est a dire notre structure de donnée) possède une méthode <strong>accept </strong>qui nous permet d’injecter notre visiteur (on précise une interface correspondant aux visiteurs voulu en type d’entrée).</p>
<p>En même temps les visiteurs concret implémente une interface qui contient une méthode <strong>visit</strong> par type d’objet visitable (ainsi on se sert du typages dynamique pour lors de l’utilisation appellera la bonne méthode – double dispatch).</p>
<p>Dans notre objet visitable on appellera donc la methode visit de notre visiteur en lui passant l’objet lui même.</p>
<p> </p>
<h2 id="cas-dutilisation-en-php">Cas d’utilisation en PHP</h2>
<p>Pour cet article j’ai en premier lieu fait une solution en PHP avant de me rendre compte que le typage faible et de ce fait la façon dont est calculer la signature des méthodes nous empêche de redéfinir une méthode avec des types différents. De ce fait dans cet exemple nous n’avons pas les avantages du double dispatch toutefois cela permet d’avoir un exemple plus simple pour commencer a voir ce pattern.</p>
<p> </p>
<p>Grace au design pattern visiteur nous allons mettre en place un système de rendu d’un document. Notre document sera un simple objet contenant un tableau clef-valeur. Le but est d’afficher le contenu de l’objet de plusieurs façon différente : plain text, html et xml. Pour faire cela une solution triviale serait de faire une classe renderer et dedans créer une méthode par type de rendu. Lors d’un ajout/suppression de méthode de rendu on éditerai ce fichier. Les deux principaux inconvénient de cette méthode a mon gout sont que :</p>
<ul>
<li>on va avoir une classe assez volumineuse : difficulté de maintenance</li>
<li>pour l’ajout d’une méthode on modifie la classe du coup il faut la recompiler : temps de compilation croissant avec la taille de la classe.</li>
</ul>
<p>Nous allons donc utiliser le design pattern visiteur. Chaque type de renderer sera une classe concrété ayant le rôle de visiteur et notre document (ici ConfigDocument) aura le rôle de classe visitable.</p>
<script src="https://gist.github.com/kandran/32e0e8d7a738616002be.js"></script>
<p>Ainsi pour gérer les différents types de rendu on aura juste a injecter le bon renderer via <strong>accept</strong> puis récupérer la sortie au niveau de notre renderer. Le fait d’avoir du html, xml ou autre ne dépends que du renderer que nous avons injecter. Si cela vous semble déjà merveilleux, je vous conseille de lire attentivement la suite. </p>
<h2 id="cas-dutilisation-en-java">Cas d’utilisation en JAVA</h2>
<p>En java la principale modification est que chaque visiteur contient plusieurs méthodes <strong>accept</strong> : une part type d’objet quelle peut visiter. De cette façon on peut exécuter du code différent selon le type d’objet qui est visité et ceci au runtime. Voici un exemple simple pour illustrer ceci : </p>
<p> <script src="https://gist.github.com/kandran/62ee8ba0dc47033d609d.js"></script></p>
<h2 id="conclusion">Conclusion</h2>
<ul>
<li>Le design pattern visiteur permet de séparer les algorithmes des structures de données sur lesquels ils sont appliqué</li>
<li>A l’aide du système de double dispatch les objets visiteurs peuvent avoir des comportements différents en fonction de l’objets qu’ils visitent</li>
</ul>
<p> </p>
<p>C’est tout pour ce design pattern, en espérant le voir plus souvent utilisé même si on y pense pas tout le temps. J’espère que vous comprenez un peu mieux l’intérêt du visiteur et surtout comment le mettre en oeuvre. Si ce n’est pas le cas, je répondrai aux questions dans les commentaires.</p>
Design Pattern : Décorateur2015-04-02T18:36:46+00:00https://kandran.fr/design-pattern-decorateur<p><img src="http://kandran.fr/assets/2015/04/star-wars-decorateur-pattern.jpg" alt="star-wars-decorateur-pattern" /> </p>
<p>Dans cet article je vais vous présenter un design pattern qui est le décorateur.</p>
<p>Le pattern Décorateur (Decorator) attache dynamiquement de nouvelles fonctionnalité a un objet. Il fournit une alternative souple à l’héritage, pour étendre des fonctionnalités.</p>
<p>Souvent en programmation orienté objet pour ajouter de nouvelles fonctionnalité on utilise l’héritage, pourtant dans certain cas l’héritage purement et simplement n’entraîne qu’une augmentation de la complexité sans avoir de réel intérêt (explosion de classes, diagramme rigide et méthodes de la classe de base inappropriées dans certaines classes dérivées…). Il serait bien plus simple d’ajouter les nouvelles fonctionnalité a l’exécution.</p>
<h2 id="mise-en-place-du-design-pattern-">Mise en place du design pattern :</h2>
<h3 id="introduction">Introduction</h3>
<p>Le pattern décorateur est relativement simple : le décorateur est une classe héritant de la classe a décorer et contient une instance de l’objet qu’il décore. Ainsi l’on peut décorer de manière récursive. Prenons par exemple l’image ci-dessus, l’on a deux vaisseaux. L’un est l’objet décoré (le chasseur jedi) tandis que l’autre est le décorateur ( désolé je ne connais pas le nom de cette partie), les deux sont des vaisseaux mais le second rajoute au premier la possibilité d’aller plus vite encore. De manière plus schématique l’on se retrouve dans le cas suivant :</p>
<p><img src="http://kandran.fr/assets/2015/04/decorator-pattern-schemas.png" alt="decorator-pattern-schemas" /></p>
<p>Maintenant voici un petit diagramme uml qui présente un peu plus ce design pattern avant de passer a du code.</p>
<p><img src="http://kandran.fr/assets/2015/04/decorateur-uml.png" alt="decorateur-uml" /></p>
<p>On voit bien que notre décorateur hérite du composant a décorer, contient une instance sur un composant.</p>
<h3 id="implémentation"> Implémentation</h3>
<p>Maintenant un peu de code simple pour comprendre comment utiliser ce design pattern.</p>
<script src="https://gist.github.com/kandran/149a41a369dc65221104.js"></script>
<p>On a donc une classe Ship abstraite, une classe pour les vaisseaux jedi (JediShip) et une classe pour notre accélérateur (Accelerator). Les deux dernières hérite de Ship et peuvent donc etre considéré comme telle (ceci permet d’ajouter des décorateurs de manière récursive). Enfin dans le fichier Warehouse nous avons une utilisation simple de ce design pattern.</p>
<p>Le pattern Décorateur basé sur l’héritage et la composition est facile à mettre place. Il permet de concevoir une application évolutive ou l’ajout et la modification de fonctionnalités ne posera pas de problème. Toutefois l’on instancie beaucoup d’objet (un a chaque new), de ce fait l’utilisation d’une Factory peut être un bon point avec ce design pattern.</p>
<h2 id="conclusion">Conclusion</h2>
<ul>
<li>Le décorateur ajoute son comportement a l’objet qu’il décore</li>
<li>On peut chaîner les décorateurs autant que nécessaire.</li>
<li>Le décorateur et l’objet qui l’enveloppe ont une classe en commun dans leur arbre d’héritage (ou une interface).</li>
</ul>
<p>C’est tout pour ce design pattern, en espérant avoir été assez précis. Quel design pattern voudriez vous voir dans un prochain article ?</p>
Windows Host File Manager2015-03-28T22:43:30+00:00https://kandran.fr/windows-host-file-manager<p>En tant que développeur web, vous avez souvent à éditer le fichier host pour ajouter des associations de nom hôtes avec des ip au sein de votre machine. Ce fichier a hélas la fâcheuse tendance de grossir de manière assez rapide ce qui rends la gestion assez capricieuse. Pire encore quelques fois vous aimeriez bien pouvoir a un nom de domaine associé une ip puis peut de temps apres une autre avant de revenir sur celle du début….</p>
<h1 id="le-projet-windows-host-file-manager">Le projet Windows Host File Manager</h1>
<p> </p>
<h2 id="introduction">Introduction</h2>
<p>C’est en partant de ce constat que j’ai eu l’idée de me lancer dans ce projet. Mettre en place une interface simple pour gérer ce fichier. Niveau technologie, bien que en premier lieux j’étais tenté de le faire en JAVA j’ai décidé de me lancer dans l’utilisation de NodeJS avec nodeWebkit pour permettre l’aspect logiciel natif. Cela dans le but d’apprendre a utiliser plus en détails ces deux technologies.</p>
<p><img src="http://kandran.fr/assets//2015/03/Windows-Host-File-Manager-gui.png" alt="Windows-Host-File-Manager-gui" /></p>
<p>Actuellement j’ai mis en place une version fonctionnant sur windows qui permet de lister les hôtes dans le fichier host, les modifier supprimer et commenter. L’ajout de ligne est bien entendu possible également.</p>
<h2 id="fonctionnement-">Fonctionnement :</h2>
<p>Le fonctionnement de ce projet est assez simple, nous ouvrons donc le fichier host pour pouvoir l’analyser et afficher les diverses informations. Les actions au sein de l’ihm entraîne la modification du fichier par une nouvelle écriture.</p>
<p> </p>
<h2 id="restant-àfaire-"> Restant à faire :</h2>
<ul>
<li>Amélioration de l’existant</li>
<li>Import / export</li>
<li>Système de profil</li>
<li>Portabilité</li>
<li>Système de recherche</li>
</ul>
<p> </p>
<p>Vous pouvez suivre plus en détail ce projet sur <a href="https://github.com/kandran/Windows-Host-File-Manager">github</a></p>