<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Les trucs d'Inateno]]></title><description><![CDATA[Je fais des jeux et plein d'autres trucs]]></description><link>http://blog.inateno.com/</link><image><url>http://blog.inateno.com/favicon.png</url><title>Les trucs d&apos;Inateno</title><link>http://blog.inateno.com/</link></image><generator>Ghost 1.24</generator><lastBuildDate>Sun, 05 Apr 2026 14:00:50 GMT</lastBuildDate><atom:link href="http://blog.inateno.com/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[💻 Créer des dépendances "propre" en JS]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Cet article est destiné à un public JavaScript avertit.<br>
J'y explique comment créer depuis un seul repository, des packages indépendants avec leur propres traductions, style, js, tests et rendus isolés.<br>
Le process est valable pour n'importe quelle techno.</p>
<p>Si vous êtes un développeur web &quot;2.0&quot; alors vous</p></div>]]></description><link>http://blog.inateno.com/2018/10/01/creer-des-dependances-propre-en-js/</link><guid isPermaLink="false">5b50a66658de4747597702c6</guid><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Mon, 01 Oct 2018 14:34:43 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/10/2018-01-worklife-clean-desk-organized-123rf-41084086-MAIN_0-2.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/10/2018-01-worklife-clean-desk-organized-123rf-41084086-MAIN_0-2.jpg" alt="💻 Créer des dépendances "propre" en JS"><p>Cet article est destiné à un public JavaScript avertit.<br>
J'y explique comment créer depuis un seul repository, des packages indépendants avec leur propres traductions, style, js, tests et rendus isolés.<br>
Le process est valable pour n'importe quelle techno.</p>
<p>Si vous êtes un développeur web &quot;2.0&quot; alors vous connaissez forcément npm, cet outil pratique qui permet de &quot;tirer&quot; puis d'utiliser des dépendances.</p>
<p>A la base npm est un outil dédié à NodeJS (et donc au back) mais avec les nouveaux outils front, de plus en plus complet et complexe, npm devient indispensable pour assister nos &quot;build&quot; front.</p>
<p>Dans cette marrée de différentes technos (Vue, React, Angular pour ne citer qu'eux) un problème reste présent:</p>
<ul>
<li>comment puis-je faire des modules que je pourrais réutiliser sur tous mes projets sans tenir compte de la &quot;stack&quot; du projet final</li>
</ul>
<p>Et plus ça va, plus on a des modules et plus on fait du &quot;copié-collé&quot; d'un projet à l'autre. Pas top question maintenance.</p>
<p>Donc on se dit qu'on va faire un repos qui contiendra tout ça (pas bête), on va <em>peut-être</em> faire un submodule au lieu d'une npm (car on veut que ça reste privé), mais la procédure npm n'est pas si complexe.</p>
<p>Puis le temps passe, on a des composants de toutes sortes, des petits, des complets, des métiers, des techniques et la taille de notre build dépasse allègrement le méga-octet (je suis sympa, en vrai si vous faites de l'es6 côté front et que vous utilisez babel et React, votre build fait très vite 1Mo sans même avoir codé quoi que ce soit !).</p>
<p>Dans notre super salade nous allons mettre les ingrédients suivants: Lerna, Rollup, Yarn (et npm sisi), Babel, Storybook, du CSS via PostCSS et CSSNext et du code React (car c'est ce que j'utilise, mais le principe fonctionnera avec n'importe quelle techno).</p>
<h2 id="petittourdetable">Petit tour de table</h2>
<ul>
<li><strong>Lerna</strong>: pour faire simple c'est un outil qui permet de lancer des commandes en parallèle dans plusieurs sous-dossier, l'outil indispensable pour gérer une bibliothèque de composants indépendants</li>
<li><strong>Rollup</strong>: concurrent de Webpack plus simple et plus orienté dépendences</li>
<li><strong>Yarn</strong>: concurrent de npm, on va s'en servir pour initialiser et utiliser le &quot;workspace&quot;, les commandes npm fonctionneront toujours, mais derrière cela appelera yarn</li>
<li><strong>Babel</strong>: transpilateur ES6+ vers ES5 (en français ça donne, faire que du code JS de dernière génération s'exécute correctement sur tous les navigateurs)</li>
<li><strong>Storybook</strong>: un outil qui permet d'instancier des composants d'UI dans un environnement vierge (un peu comme des calques photoshop)</li>
<li><strong>React</strong> (y'a besoin de le présenter ?)</li>
<li><strong>i18next</strong> est un framework d'internationalisation, on l'utilisera dans les derniers chapitres de l'article &quot;aller plus loin&quot; afin d'intégrer des json à notre fichier</li>
<li><strong>PostCSS</strong> / <strong>CSS Next</strong>, une variante de SASS/LESS en gros :) que l'on utilisera aussi à la fin, histoire de mettre en place du style indépendant dans nos composants.</li>
</ul>
<p>Je vais faire au plus simple au début, notre &quot;composant&quot; démo ne sera pas extra-ordinaire en termes de fonctionnalités, mais ça fonctionnera et vous permettra de comprendre l'environnement. Si vous n'avez jamais fait de React, pas de soucis. Suivez l'article et une fois que vous aurez compris comment ça fonctionne, il devrait vous être aisé de migrer vers votre stack favorite.</p>
<h2 id="initialisationduprojet">Initialisation du projet</h2>
<p><img src="http://blog.inateno.com/content/images/2018/10/lerna-1.png" alt="💻 Créer des dépendances "propre" en JS"></p>
<p>Positionnez-vous dans le dossier où vous voulez créer votre projet lerna.</p>
<p>Installez lerna en global via npm: <code>npm i -g lerna</code><br>
Ensuite, initialisez un repo multi-packages &quot;lerna&quot;: <code>npx lerna init</code></p>
<p>À partir de là vous devriez voir un dossier &quot;packages&quot; vide, un fichier package.json et un fichier lerna.json.</p>
<p>Votre package.json ne devrait contenir que &quot;lerna&quot; comme devDependencies, on va donc ajouter toute la clique correspondant a notre stack:</p>
<pre><code>  &quot;devDependencies&quot;: {
    &quot;babel-cli&quot;: &quot;^6.26&quot;,
    &quot;babel-core&quot;: &quot;^6.26&quot;,
    &quot;babel-preset-env&quot;: &quot;^1.7.0&quot;,
    &quot;babel-preset-react&quot;: &quot;latest&quot;,
    &quot;babel-preset-stage-0&quot;: &quot;latest&quot;,
    &quot;lerna&quot;: &quot;^3.4.0&quot;,
    &quot;prop-types&quot;: &quot;latest&quot;,
    &quot;react&quot;: &quot;latest&quot;,
    &quot;rollup&quot;: &quot;^0.63.5&quot;,
    &quot;rollup-plugin-auto-external&quot;: &quot;^2.0.0&quot;,
    &quot;rollup-plugin-babel&quot;: &quot;^3&quot;,
    &quot;rollup-plugin-commonjs&quot;: &quot;^9.1.8&quot;,
    &quot;rollup-plugin-node-resolve&quot;: &quot;^3.4.0&quot;
  }
</code></pre>
<p><strong>Babel</strong> et ses presets pour la transpilation ES6+ vers ES5, <strong>react</strong> et <strong>rollup</strong> avec ses plugins nécessaires pour matcher le reste de notre stack.</p>
<p>Là on a le minimum requis.</p>
<p>Maintenant, on descend dans packages/ et on va créer notre premier package &quot;alpha&quot;.<br>
<code>cd packages/ &amp;&amp; mkdir alpha &amp;&amp; cd $_</code></p>
<p>Il faut maintenant créer un fichier package.json et y mettre le contenu suivant:</p>
<pre><code>{
  &quot;name&quot;: &quot;my-demo-package-alpha&quot;,
  &quot;version&quot;: &quot;0.0.0&quot;,
  &quot;description&quot;: &quot;Alpha is the first&quot;,
  &quot;author&quot;: &quot;Someone who was here before you&quot;,
  &quot;license&quot;: &quot;MIT&quot;,
  &quot;repository&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;dist/index.js&quot;,
  &quot;module&quot;: &quot;dist/index.es.js&quot;,
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;rollup -c&quot;,
    &quot;prepare&quot;: &quot;yarn run build&quot;
  },
  &quot;dependencies&quot;: {
    &quot;react&quot;: &quot;*&quot;,
    &quot;prop-types&quot;: &quot;*&quot;
  },
  &quot;files&quot;: [
    &quot;dist&quot;
  ]
}
</code></pre>
<p>Ajoutez aussi le fichier qui permettra de lancer la build, le fichier <strong>rollup.config.js</strong> avec le contenu suivant:</p>
<pre><code>import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import autoExternal from 'rollup-plugin-auto-external';

import pkg from './package.json';

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'es'
    }
  ],
  external: [
  ],
  plugins: [
    // say to rollup how to resolve node dependencies
    resolve(),
    // allow to include all kind of amd package in an ES6 way
    commonjs({
      include: 'node_modules/**',
      namedExports: {
        'node_modules/react/index.js': ['Component', 'PureComponent', 'Fragment', 'Children', 'createElement', 'cloneElement']
      }
    }),
    // babel
    babel({exclude: &quot;node_modules/**&quot;}),
    // automatically detect what should be excluded from the build
    autoExternal()
  ]
}
</code></pre>
<p>Enfin, ajoutez un dossier &quot;src&quot; et mettez ceci dedans un fichier index.js:</p>
<pre><code>/**
 * @class AlphaComponent
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class AlphaComponent extends Component {
  static propTypes = {
    text: PropTypes.string
  }

  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }

  render() {
    const {
      text
    } = this.props;

    return (
      &lt;div ref=&quot;test&quot;&gt;
        Alpha Component: {text}
      &lt;/div&gt;
    )
  }
}
</code></pre>
<p>Remontez au dossier racine du projet et ajoutez un fichier <strong>.babelrc</strong> pour les options babel (on pourrait mettre ce fichier dans chacun des packages, mais c'est plus simple d'avoir le même pour tous les packages):</p>
<pre><code>{
  &quot;presets&quot;: [
    [&quot;env&quot;, {
      &quot;modules&quot;: false
    }],
    &quot;react&quot;,
    &quot;stage-0&quot;
  ],
  &quot;plugins&quot;: []
}
</code></pre>
<p>Attention, Storybook utilisera aussi ce babelrc, donc si vous deviez ajouter des plugins ou autre et que le storybook (ou les tests) ne fonctionne plus,  le mieux sera d'injecter un babelrc dans la config rollup au vol (voir les derniers chapitres &quot;aller plus loin&quot;).</p>
<h2 id="yarnlog"><img src="http://blog.inateno.com/content/images/2018/10/yarn.png" alt="💻 Créer des dépendances "propre" en JS"></h2>
<p>Yarn est un concurrent de NPM. Selon moi il n'apporte pas grand chose, n'est pas plus rapide et pas plus fiable.<br>
Cependant, Yarn apporte un truc vraiment sympa, le workspace.<br>
Grâce à cela vous allez pouvoir centraliser toutes les dépendances communes à chacun de vos packages.<br>
En plus de sauvegarder de la place sur le disque dur (ce qui en soit n'est plus un problème aujourd'hui), vous allez grandement gagner du temps lorsqu'il faudra les récupérer, mettre à jour. Et autre cas relativement fréquent, lorsque vous aurez des conflits de versions.</p>
<p>Idéalement vous aimeriez que chaque package ait exactement les mêmes versions de dépendances (sinon bonjour la galère). Avoir un point d'entrée va permettre de simplifier ça.</p>
<p>Le workspace vous permettra aussi de réaliser plus facilement les cross-dependencies (il me semble que ça marche sans, mais bon autant faire le plus propre qu'on peut 😉 ).</p>
<p><a href="https://yarnpkg.com/lang/en/docs/install/">Si vous n'avez pas Yarn, installez-le</a><br>
<a href="https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/">Ensuite configurez le workspace</a> pour qu'il pointe sur le dossier packages.</p>
<p>En cas de doute, voilà ce qu'il faut ajouter dans le fichier lerna.json (au root):</p>
<pre><code>  &quot;npmClient&quot;: &quot;yarn&quot;,
  &quot;useWorkspaces&quot;: true,
</code></pre>
<p>puis dans package.json (toujours depuis le root):</p>
<pre><code>  &quot;workspaces&quot;: [
    &quot;packages/*&quot;
  ]
</code></pre>
<p>Maintenant ajoutez ces commandes dans votre package.json:</p>
<pre><code>&quot;scripts&quot;: {
    &quot;bootstrap&quot;: &quot;lerna bootstrap --use-workspaces&quot;,
    &quot;build&quot;: &quot;lerna exec --parallel -- yarn run build&quot;,
    &quot;linkLerna&quot;: &quot;lerna link --force-local&quot;
},
</code></pre>
<p>Nous allons utiliser ces commandes une par une, tout d'abord, lancez bootstrap avec npm run bootstrap (ou yarn bootstrap), cela va fetcher toutes les dépendances liées au workspace.<br>
Puis yarn linkLerna, cela permet de faire des symlink entre vos packages en cas de cross-dépendances (il n'y a pas besoin de cette commande si vous n'avez pas de cross-dépendances, mais elle ne coûte rien donc prenez le réflexe de la faire après un bootstrap !).</p>
<p>Ces 2 commandes doivent toujours être appelées lorsque vous ajoutez des packages ou modifiez une config (que ce soit un ajout/suppression dans un package.json, peut importe lequel).</p>
<p>Logiquement vous devriez pouvoir lancer yarn build sans erreur.<br>
<img src="http://blog.inateno.com/content/images/2018/09/capture-lerna.png" alt="💻 Créer des dépendances "propre" en JS"></p>
<p>Cool, a ce stade vous êtes fin prêt pour publier vos packages.</p>
<p>Si l'ajout de Storybook ne vous intéresse pas, sautez directement au chapitre suivant: &quot;npm publish&quot;.<br>
Sachez qu'on a fait le tour des basiques concernant Lerna!</p>
<h2 id="storybooklogo"><img src="http://blog.inateno.com/content/images/2018/10/storybook.svg" alt="💻 Créer des dépendances "propre" en JS"></h2>
<p>Storybook permet d'instancier des composants dans un espace vide, un peu comme si vous aviez un laboratoire et que vous pouviez afficher un composant dans le vide sans personne d'autres.<br>
C'est plutôt pratique pour générer des test live (en ajoutant des commandes diverses ou en faisant plusieurs scénario), de même qu'écrire de la doc !</p>
<p>On peut spécifier de la config custom à Storybook, ça demande de creuser un peu, mais je n'ai pas vu de limite à ce que Storybook propose (et au pire, c'est un projet open-source 😉 ).</p>
<p><a href="https://github.com/storybooks/storybook">Commencez par récupérer Storybook</a>, lorsque j'ai écrit cet article j'étais en LTS 3.4.11, la v4 étant en alpha, d'ici quelques mois ces informations ne seront peut-être plus exacte.</p>
<p>Referez donc vous aux liens que je vais vous passer ci-et-là.</p>
<p>Pour pouvoir lancer notre storybook, il faut d'abord ajouter dans notre package.json principal, les devDependencies dont on va avoir besoin:</p>
<pre><code>&quot;glob-loader&quot;: &quot;^0.3.0&quot;,
&quot;react-dom&quot;: &quot;^16.5.2&quot;,
&quot;@storybook/addon-actions&quot;: &quot;^3&quot;,
&quot;@storybook/addon-info&quot;: &quot;^3&quot;,
&quot;@storybook/addon-options&quot;: &quot;^3&quot;,
&quot;@storybook/addons&quot;: &quot;^3&quot;,
&quot;@storybook/react&quot;: &quot;^3&quot;,
&quot;storybook-addon-jsx&quot;: &quot;latest&quot;
</code></pre>
<p>Ajoutez aussi la commande &quot;start&quot; dans vos scripts:<br>
<code>&quot;start&quot;: &quot;start-storybook -h 0.0.0.0 -p 9001 -c .storybook&quot;</code></p>
<p><a href="https://storybook.js.org/basics/guide-react/">Voilà le guide de démarrage lié a react</a>.</p>
<p>Vous pouvez suivre le guide de storybook, ou ce que j'ai écrit selon votre préférence.</p>
<p>Sachez que la config que je vous présente est plus complète que le minimum requis, de cette manière vous verrez plus d'options et de possibilités (&quot;dans la vraie vie&quot; le truc de base exposé en démo n'est jamais suffisant).</p>
<p>Créez donc un dossier &quot;.storybook&quot; à la racine du projet.<br>
Ensuite, ajoutez les fichiers et contenus suivant dans ce dossier:</p>
<p><strong>stories.pattern</strong> (regex pour récupérer les fichiers &quot;story&quot;):<br>
<code>../stories/**/*.js</code></p>
<p><strong>config.js</strong> (configuration de base de l'appli &quot;wrapper&quot; React):</p>
<pre><code>import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import './storybook.css';

addDecorator((story) =&gt; 
    &lt;div style={{padding:&quot;10px&quot;}}&gt;
        {story()}
    &lt;/div&gt;
);

function loadStories () {
    require('glob-loader!./stories.pattern');
}
configure(loadStories, module);
</code></pre>
<p><strong>storybook.css</strong> (pour pouvoir modifier le style par défaut du Storybook, c'est toujours sympa):</p>
<pre><code>body {
  background-color: rgba(0, 0, 0, 0.05);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px);
  background-size: 8px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

html {
  box-sizing: border-box;
  font-family: Helvetica, &quot;sans-serif&quot;;
  font-size: 14px;
}
</code></pre>
<p><strong>webpack.config.js</strong> (pour surcharger la configuration webpack par défaut, si besoin):</p>
<pre><code>const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
const path = require('path');

module.exports = (baseConfig, env, defaultConfig) =&gt; {
  const config = defaultConfig;
  
  // For example, add typescript loader:
  // config.module.rules.push({
  // });

  return config;
};
</code></pre>
<p>Maintenant, il faut ajouter une &quot;story&quot;, voyez ça comme un test unitaire un peu.<br>
Ajoutez donc un dossier &quot;stories&quot; puis créez un fichier par composant (du nom de chaque composant si vous voulez), on va donc ajouter <strong>alpha.js</strong></p>
<p>Voilà le contenu à mettre dans votre fichier, cela devrait être sensiblement pareil d'un fichier à l'autre. Attention à bien mettre des noms unique, vous pouvez créer l'arborescence que vous voulez dans le dossier stories:</p>
<pre><code>// stories/alpha.js
import React from 'react'
import {storiesOf} from '@storybook/react'
import {withInfo} from '@storybook/addon-info';

import Alpha from &quot;../packages/alpha/dist&quot;;

storiesOf('Alpha', module)
  .add('default', withInfo(``)(() =&gt;
    &lt;Alpha text=&quot;Coucou je suis le composant alpha&quot; /&gt;
  ));
</code></pre>
<p><em>N'oubliez pas de faire un <code>yarn bootstrap</code> puis <code>yarn linkLerna</code> afin d'avoir toutes les dépendances. Un <code>npm i</code> fonctionne aussi mais il requiert quand même le bootstrap après.</em></p>
<p>Et maintenant showtime, on lance storybook avec npm start et on consulte le résultat sur <a href="http://0.0.0.0:9001">0.0.0.0:9001</a>.<br>
<img src="http://blog.inateno.com/content/images/2018/09/capture-storybook.png" alt="💻 Créer des dépendances "propre" en JS"></p>
<p>Je vous laisse le soin de consulter les commentaires pour comprendre chaque partie.<br>
Libre à vous de rajouter des boutons, un state, ou quoi que ce soit dans chaque fichier, qui vous permet de jouer avec votre composant.</p>
<p><a href="https://github.com/storybooks/storybook/tree/master/addons/info">Vous pouvez aussi faire une documentation, en complétant par exemple chaque &quot;withInfo&quot;</a>, rajouter des tests unitaires, ajouter des snapchots avec Jest.</p>
<p>En tout cas, vous avez vos composants qui fonctionnent, il ne reste plus qu'à... publier !</p>
<p>Histoire d'être raccord, <a href="https://github.com/Inateno/lerna-demo/tree/partie_1"><strong>voici la branche</strong></a> qui correspond à tout ce que l'on vient de faire.</p>
<h2 id="npmpublish">npm publish</h2>
<p>D'abord, on va ajouter la commande &quot;publish&quot; dans nos scripts du package.json principal:<br>
<code>&quot;publish&quot;: &quot;lerna publish&quot;</code></p>
<p>Libre à vous de <a href="https://docs.npmjs.com/getting-started/publishing-npm-packages">publier sur le repo public</a> npm ou sur <a href="https://docs.npmjs.com/private-modules/intro">un repo privé</a>.</p>
<p>Si vous publiez des packages privés qui ne dépendent pas du service npm, il vous faut utiliser cette commande à la place:<br>
<code>&quot;publish&quot;: &quot;lerna publish --no-verify-access&quot;</code></p>
<p><a href="https://github.com/lerna/lerna/tree/master/commands/publish#--no-verify-access">Vous pouvez aussi consulter la documentation de lerna publish</a></p>
<p>Aussi, avant d'aller plus loin retenez bien ceci:</p>
<p>Le but de Lerna est de centraliser la maintenance, tests et publications de vos dépendances.<br>
Par conséquent, vous ne <em>DEVEZ</em> <em><strong>JAMAIS</strong></em> publier un package seul, &quot;à la main&quot;. Sinon lerna ne sera plus capable de publier, il vous faudra sauter des versions ou supprimer les packages publiés, bref. <strong>Ne faites pas ça.</strong></p>
<p>On est bon ? On retourne au dossier racine du projet.<br>
Vérifiez que vous avez bien configuré chacun de vos packages, si c'est un repo privé il faut ajouter la configuration qui va bien, s'il est publique il faut y mettre les bonnes informations.</p>
<p>Instanciez votre repo git si ce n'est déjà fait, faite votre commit/push puis...</p>
<p>Lancez npm run publish (ou yarn publish) pour publier!</p>
<p>Cette commande lance un build avant de publier, libre à vous de modifier cette commande pour y intégrer les tests.</p>
<p>npm vous demande de quelle &quot;upgrade&quot; il s'agit, vous pouvez suivre la convention par défaut ou le faire &quot;custom&quot;. Moi je fais mon possible pour respecter le standard:</p>
<ul>
<li>+0.0.1 pour un fix</li>
<li>+0.1.0 pour une feature</li>
<li>+1.0.0 pour un changement majeur (potentiellement &quot;breaking changes&quot;)</li>
</ul>
<h2 id="allerplusloin1uneconfigpourlesgrertoutes">Aller plus loin 1 - une config pour les gérer toutes</h2>
<p>On peut encore améliorer tout ça.</p>
<p>Un problème reste présent dans notre projet actuel, lorsque l'on aura plusieurs packages et que l'on fera &quot;une évolution&quot; ou &quot;un petit changement&quot; dans la config &quot;rollup&quot; de nos packages:</p>
<p><strong>Il faudra faire le changement pour chaque package, 1 par 1.</strong> Rien de plus pénible.</p>
<p>Donc, on va faire un fichier type &quot;factory&quot; au répertoire racine, puis chacun de nos packages appellera ce fichier-là, y précisera &quot;ses spécificités&quot; et lance la fonction.</p>
<p>Comme ça, on a plus qu'un fichier à maintenir.</p>
<p>Voilà la théorie:</p>
<ol>
<li>On fait un fichier &quot;global.rollup.config.js&quot; à la racine du répertoire parent.<br>
Ce fichier est censé exporter une fonction qui prend en paramètre un objet dans lequel on pourra écraser n'importe quel paramètre.</li>
<li>Dans le fichier rollup.config.js de chacun de nos packages on enlève tout et on appelle ce fichier dans le parent.<br>
Il ne reste qu'à appeler la fonction retournée par le fichier en lui passant en paramètre nos options customisée pour ce composant-là.</li>
</ol>
<p>Je vous invite à consulter la branche <a href="https://github.com/Inateno/lerna-demo/tree/plus_loin_1_factory"><strong>plus_loin_1_factory</strong></a> pour pouvoir consulter cette amélioration.</p>
<h2 id="allerplusloin2embarquerdujsontupourrastraductions">Aller plus loin 2 - embarquer du json tu pourras (traductions)</h2>
<p>Dans ce chapitre additionnel on va ajouter le chargement de JSON à notre package &quot;alpha&quot; (le json ne sera pas chargé via un appel AJAX mais sera inliné dans la build).</p>
<p>Afin de faire une démo &quot;utile&quot;, on va faire comme si l'on voulait ajouter un fichier de langue qui sera chargée automatiquement par <a href="https://www.i18next.com/">i18next</a>.</p>
<p>Cela sous-entend que vous utilisez i18next dans votre projet principal, si ce n'est pas le cas vous trouverez un moyen d'adapter ce principe à votre stack :)</p>
<p>On ajoute dans notre package.json principal ces devDependencies:</p>
<pre><code>    &quot;i18next&quot;: &quot;^11.9.0&quot;,
    &quot;rollup-plugin-json&quot;: &quot;^3.1.0&quot;,
</code></pre>
<p>Ou en commande <code>npm i --save-dev i18next rollup-plugin-json</code></p>
<p>Une fois ces nouvelles dépendances installées, dans le fichier global.rollup.config.js il faut ajouter le json loader.</p>
<pre><code>import json from 'rollup-plugin-json';


// a ajouter juste après &quot;resolve()&quot; (ligne 31 normalement)
      // allow to load inlined json
      json( Object.assign( optional.json || {}, {
        include: 'src/**',
        indent: ' '
      } ) ),
</code></pre>
<p>Un petit <code>yarn bootstrap</code> suivi d'un <code>yarn linkLerna</code> et un <code>yarn build</code> nous confirment que notre build rollup fonctionne toujours.</p>
<p>Maintenant on va ajouter notre json dans notre package.<br>
Je vous invite à consulter <a href="https://github.com/Inateno/lerna-demo/tree/plus_loin_2_json">la branche github associée</a></p>
<p>Dans le fichier <strong>package.json</strong> du package alpha, ajoutez dans les dépendances: <code>&quot;i18next&quot;: &quot;*&quot;</code>.</p>
<p>Dans le dossier alpha on ajoute un sous dossier <code>src/locales</code> qui contiendra chacun de nos fichiers de langues, on va mettre <code>fr.json</code> et <code>en.json</code> pour cet exemple.<br>
<a href="https://github.com/Inateno/lerna-demo/tree/plus_loin_2_json/packages/alpha/src/locales">Vous pouvez directement reprendre les fichiers depuis le github</a>.</p>
<p>Les fichiers sont importés comme une dépendance normale, ensuite dans le constructeur du composant on vérifie si i18next connait déjà ce namespace. Sinon, on y injecte nos langues.</p>
<p><strong>Attention, cette technique ne fonctionne que si votre projet utilise i18next dans la même version, vu que le package demande n'importe quelle version de  i18next via &quot;*&quot;, vous n'aurez normalement pas de conflits de versions. Sinon, passez vos dependencies en peerDependencies règle toujours le problème, mais le projet parent devient alors responsable de la présence des dépendances.</strong></p>
<p>Dans le code du composant on fait ces modifs:</p>
<pre><code>// ajoutez ces imports
import FR_LOCALES from &quot;./locales/fr.json&quot;;
import EN_LOCALES from &quot;./locales/en.json&quot;;

// dans le constructeur
    // charge le bundle fr s'il n'existe pas dans i18n
    if ( !i18n.hasResourceBundle( &quot;fr&quot;, &quot;namespace&quot; ) ) {
      i18n.addResourceBundle( &quot;fr&quot;, &quot;namespace&quot;, FR_LOCALES );
    }
    // charge le bundle en s'il n'existe pas dans i18n
    if ( !i18n.hasResourceBundle( &quot;en&quot;, &quot;namespace&quot; ) ) {
      i18n.addResourceBundle( &quot;en&quot;, &quot;namespace&quot;, EN_LOCALES );
    }

// dans le render afin de vérifier que cela fonctionne
Localization: {i18n.t(&quot;namespace:key_of&quot;,&quot;i18n_error&quot;)}
</code></pre>
<p>Il va nous falloir faire une petite modification à l'initialisation de storybook pour initialiser i18next (sinon cela ne marchera pas).<br>
Dans le fichier <code>.storybook/config.js</code> ajoutez le code suivant juste après les imports:</p>
<pre><code>import i18n from &quot;i18next&quot;;

i18n.init({
    lng: 'en',
    fallbackLng: ['en'],
    fallbackOnNull: true,
    fallbackOnEmpty : true,
    returnNull: false,
    returnEmptyString: false,
    debug: true,
    resources: {
    }
  }, () =&gt; {
});
</code></pre>
<p>Une fois ce code ajouté, lancez yarn build et enfin yarn start.<br>
En navigant à l'adresse du storybook vous devriez voir votre composant avec la phrase traduite.<br>
Maintenant pour tester vous pouvez changer le <code>lng: 'en',</code> à <code>lng: 'fr',</code> dans la config, attendre que le code soit rechargé à la volée et actualiser la page (ou passer d'un module à l'autre pour forcer le re-rendering), vous devriez l'avoir en français !!</p>
<h2 id="allerplusloin3avecducsscestmieux">Aller plus loin 3 - avec du css c'est mieux</h2>
<p>Comment ? Vous n'êtes pas satisfait de vos composant en noir et blanc ?<br>
Alala. Pas de soucis, j'ai une solution (à défaut d'avoir <strong>là</strong> solution).</p>
<p>Si vous voulez gagner du temps, <a href="https://github.com/Inateno/lerna-demo/tree/plus_loin_3_css">voilà la branche qui contient tout ce qu'il faut</a>.</p>
<p>Les étapes sont assez rapide, on va utiliser <a href="https://postcss.org/"><strong>PostCSS</strong></a> (pourquoi? Parce que c'est ce qu'on utilise à Viareport et que j'avais pas envie de faire une version de chaque 😆) mais vous devriez pouvoir trouver chaussure à votre pied si cela ne vous convient pas.</p>
<p>Sachez que comme le CSS sera transpilé, ce choix n'impactera pas votre projet final de toute façon !<br>
Une bonne chose en somme.</p>
<p>Dans le fichier <strong>global.rollup.config.js</strong> faites les modifications suivantes:</p>
<pre><code>// on ajoute ces imports spécifique à postcss
import postcss from 'rollup-plugin-postcss';
import cssNext from 'postcss-cssnext';
import cssReporter from 'postcss-reporter';
import cssImport from &quot;postcss-import&quot;;

// dans plugins, juste avant &quot;resolve(),&quot; (ligne 34 normalement)
    postcss({
        // modules: true, // if true, create a css namespace =&gt; will add the name of the css file as prefix to all classname (ux-header became style_ux-header)
        plugins: [
          cssImport( { skipDuplicates: true } ),
          cssNext(),
          cssReporter()
        ]
      }),
</code></pre>
<p>Il faut ajouter les nouveaux outils dans le <strong>package.json</strong> principal:<br>
<code>npm i --save-dev rollup-plugin-postcss postcss postcss-cssnext postcss-reporter postcss-import</code></p>
<p>Comme à l'habitude il faut lancer <code>yarn bootstrap &amp;&amp; yarn linkLerna</code></p>
<p>Un petit test avec <code>yarn build</code> pour confirmer que tout fonctionne comme avant.</p>
<p>Et maintenant, il nous suffit d'ajouter un fichier css à notre composant alpha (<a href="http://cssnext.io/">je vous laisse le soin de découvrir ce que CSSNext offre</a>):</p>
<pre><code>// dans le fichier alpha/src/index.js
import './style.css'

// pensez à modifier le render pour avoir une classe
&lt;div className=&quot;alpha&quot; ref=&quot;test&quot;&gt;

// exemple dans le fichier style.css, mais n'importe quoi marcherait
.alpha {
  padding: 10px;
  background: white;
  border: 1px solid black;
}
</code></pre>
<p>Vous lancez à nouveau <code>yarn build &amp;&amp; yarn start</code> puis allez vérifier sur Storybook que tout est conforme.</p>
<p>Alors, c'était dur ?<br>
J'espère que non !</p>
<p>PS: a la vitesse a laquelle évolu le JS, il est probable que certaines config ne fonctionnent plus, auquel cas il faut vérifier chaque dépendance une par une pour voir et comprendre comment elle fonctionne et comment l'upgrader.<br>
Mais si vous utilisez mon repo tout devrait bien se passer 😂</p>
<p>Si vous avez aimé cet article n'hésitez pas à me le faire savoir, j'écrirai peut-être un autre article dans la lignée de celui-ci, concentré sur les tests.</p>
</div>]]></content:encoded></item><item><title><![CDATA[🚙 Rando & 4x4, Lac de la Glère (et super-glue)]]></title><description><![CDATA[<div class="kg-card-markdown"><p><a href="https://www.youtube.com/watch?v=xULTMMgwLuo">Suggestion musicale pour la lecture de cet article</a></p>
<p>Le 3 &amp; 4 Août dernier se produisait la &quot;nuit des étoiles&quot;, probablement le meilleur week-end de l'année pour combiner tout ce qu'on aime, ballade 4x4, rando, bivouac et admiration du ciel étoilé.</p>
<p>Le tout dans les Pyrénées pas loin</p></div>]]></description><link>http://blog.inateno.com/2018/08/17/rando-4x4-lac-de-la-glere/</link><guid isPermaLink="false">5b695ef258de4747597702ce</guid><category><![CDATA[jeep]]></category><category><![CDATA[vroum]]></category><category><![CDATA[xj]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Fri, 17 Aug 2018 16:00:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/08/DSC08193.JPG" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/08/DSC08193.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><p><a href="https://www.youtube.com/watch?v=xULTMMgwLuo">Suggestion musicale pour la lecture de cet article</a></p>
<p>Le 3 &amp; 4 Août dernier se produisait la &quot;nuit des étoiles&quot;, probablement le meilleur week-end de l'année pour combiner tout ce qu'on aime, ballade 4x4, rando, bivouac et admiration du ciel étoilé.</p>
<p>Le tout dans les Pyrénées pas loin des 2500m d'altitude, a la fraiche donc (dans les 3-4° la nuit l'air de rien !).</p>
<p>On est parti en début de matiné histoire d'avoir toute l'après midi pour profiter, mais voilà. Tout ne s'est pas passé comme prévu (ça fait partie de l'aventure, aussi courte soit-elle).</p>
<p><img src="http://blog.inateno.com/content/images/2018/08/DSC08167-1.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08163-1.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>5km avant Barège le Jeep câle et de la fumée sort de sous le capot. Panique.</p>
<p>Le moteur crache de l'eau au niveau d'un tuyau, obligé d'attendre que ça refroidisse. Vous remarquerez l'endroit idéal pour tomber en panne.<br>
<img src="http://blog.inateno.com/content/images/2018/08/20180804_134050.jpg" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Après une rapide recherche sur internet je découvre que le Jeep est équipé d'un relais anti-surchauffe. Je n'ai pas trop cherché où il était mais déjà je suis &quot;rassuré&quot;. Le moteur devrait aller bien.</p>
<p>Re-remplissage avec de l'eau, on roulera sans le bouchon du radiateur pour éviter de le mettre sous pression.<br>
<img src="http://blog.inateno.com/content/images/2018/08/20180804_164459.jpg" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Le bouzin démarre, on y va.</p>
<p>Après 1 arrêt intérmédiaire (1 bonne heure au total) on arrive enfin dans Barrèges, câlé dans une petite ruelle, on commence à voir ce qu'on peut faire.<br>
<img src="http://blog.inateno.com/content/images/2018/08/20180804_153333.jpg" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08172.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08174.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Le constat tombe, le radiateur est fendu sur le côté (pas la partie cuivre, sorte de plastique) trop de pression semble t'il.<br>
On attend l'ouverture d'une petite supérette pour y acheter de la super-glue, chanceux il y en a.</p>
<p>On applique la glu sur la fissure, on attend un peu, on re-rempli et on y va. Encore une fois on a décidé de ne pas remettre le bouchon du radiateur afin de le libérer de toute pression et éviter que la réparation super-glue ne tienne pas.</p>
<p>Moment stress, on a 1km à faire avant de rejoindre la piste.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08182.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>On arrive à la piste ça sent bon le liquide de refroidissement, juste à temps on s'arrête, y'a de l'eau qui sort de partout ^^<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1861.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Cette fois on se dit &quot;tiens en fait c'est peut-être le bouchon du radiateur qui marche pas comme il devrait&quot;. C'est une sorte de valve qui réagit à la pression et laisse partir la pression dans le &quot;vase d'expansion&quot;.<br>
Du coup on enlève la rondelle caoutchouc de ce bouchon pour permettre une &quot;évacuation directe&quot; de la pression.</p>
<p>On va voir comment ça marche.<br>
1km plus loin, on rejoint enfin les potos. Petit check.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08199.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Tout va bien, plus de perte d'eau donc a priori notre théorie est bonne.<br>
L'endroit est sympa, on est pas pressé, c'est cool.</p>
<p><img src="http://blog.inateno.com/content/images/2018/08/DSC_1864.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1867.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1868.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1877.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>On a laissé le petit Che se reposer un peu, on y retourne, que le petit Sunny à chaud ^-^ (et nous aussi).<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08201.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08206.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Grosse troupe ahah, le 4L ne galère pas au moins (pas encore).<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08210.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08212.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/IMG_20180804_172659.jpg" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>1 pause le long de la piste, on check que ça va on fait quelques photos et on continue.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1889.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1880.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1894.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1896.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1897.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Encore une pause 1km plus loin pour vérifier et mettre de l'eau, il fait très chaud et la piste est raide, avec 7 personnes dedans plus tout le matos...<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08226.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Toujours plus raide, avec la remorque ça n'aide pas, le Jeep commence à chauffer et cette fois c'est la crasse &quot;historique&quot; qui fume tout autour du moteur.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08233.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>On décide de s'arrêter là, il nous aura déjà amené bien loin, on commence donc la rando.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08238.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Sunny n'a qu'une envie, la ballade vite !<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1904.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Et c'est parti pour la rando<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08245.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<hr>
<p>Il s'éloigne doucement.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1917.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1925.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08252.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
On grimpe, nous ne sommes pas les seuls malgré l'heure tardive il y a beaucoup de monde.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08257.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Nous voilà arrivé au lac de la Glère (2000m), le refuge est juste au-dessus de nos têtes. On se repose un peu ici le temps que tout le monde arrive.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1938.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08264.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1949.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Petit détour par le refuge<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08270.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Qui s'éloigne rapidement dans la brume<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08273.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
De même que le lac de la Glère<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08272.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Tandis que l'on commence à apercevoir le lac suivant<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1956.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>On grimpe sans pause, car la nuit approche (donc moins de photos ^^) pour finalement s'arrêter avant le lac Det Mail<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08277.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Perdu<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08276.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
dans la brume<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08274.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Un peu moins de 2h de marche assez intensive pour environ 6km, au départ nous voulions aller beaucoup plus loin vers le lac du Pourtet, mais les problèmes mécaniques ont joué contre nous. Le Lac Det Mail beaucoup moins loin mais relativement haut était une bonne option de repli, n'oublions pas notre objectif de base: observer les étoiles et le ciel.</p>
<p>Mais pour l'heure, repos avec une baignade très fraiche (et très agréable).<br>
On va essayer de trouver un coin sympa, car le lac Det Mail est éparpillé.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08286.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Sunny a peur de l'eau donc je le porte pour traverser (alala pire qu'on petit enfant ^^).<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08287.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Et la baignade !<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC08288.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>La brume s'intensifie, on en profite pour faire un feu et s'amuser avec du light painting.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1969.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1971.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1965.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1963.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Le ciel fini par se découvrir, on peut observer Jupiter, rapidement Vénus qui se retrouve à nouveau derrière la brume.<br>
La voie Lactée est bien visible, ainsi que la station ISS qui passe au-dessus de nous, nombreuses sont les étoiles filantes.<br>
Malheureusement nous n'avons pas réussi à faire de photo correcte du ciel.</p>
<p>Histoire de ne pas vous laisser sur votre faim voilà une photo prise dans le même coin ;) (j'ai volontairement choisie une qui se rapproche de ce que l'on voit en vrai).<br>
<img src="https://pbs.twimg.com/media/Dj3LZcJXgAELwKh.jpg:large" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Via <a href="https://twitter.com/Meteo_Pyrenees/status/1026199937728618496">Meteo_Pyrenees</a></p>
<p>Et une autre très sympa, plus tôt dans l'année, de l'autre côté de la montagne par rapport à nous !<br>
<img src="https://pbs.twimg.com/media/DgyBN8dW4AAWyu_.jpg:large" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Via <a href="https://twitter.com/MaximeTessier34/status/1012326489306619905">Maxime Tessier</a></p>
<hr>
<h2 id="leretour">Le retour</h2>
<p>Le refuge de la Glère.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1990.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1991.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Notre bivouac vue de plus haut<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2045.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Un peu moins haut, moi je dors encore ^^<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_1992.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Au loin l'observatoire du Pic du Midi.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2008.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2005.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2014.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2036.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2044.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
On redescend maintenant, après avoir laissé une trace éphémère de notre passage.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2054.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2064.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Sunny apprécie aussi le paysage (ou bien est-ce le bruit du troupeau ?)<br>
<img src="http://blog.inateno.com/content/images/2018/08/IMG_20180805_100928.jpg" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2081.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<hr>
<p>Nous revoilà, presque au Jeep.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2084.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Mais si, regardez mieux<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2085.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Là !<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2086.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Bye bye la montagne<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2087.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Avant de réellement rentrer, on a aidé quelqu'un qui avait un soucis d'embrayage. On a réussi à lui réparer avec un maillon de ma chaîne de portefeuille (pratique).<br>
<img src="http://blog.inateno.com/content/images/2018/08/20180805_125947.jpg" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"></p>
<p>Un long retour stressant, en espérant que le radiateur ne cède pas à nouveau.<br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2088.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
<img src="http://blog.inateno.com/content/images/2018/08/DSC_2089.JPG" alt="🚙 Rando & 4x4, Lac de la Glère (et super-glue)"><br>
Nous aurons réussi à rentrer sans encombre ! Cette réparation &quot;super-glue&quot; aura tenue bien mieux que je ne le pensais.</p>
<p>Maintenant le Jeep va rester au garage le temps que je lui commande un radiateur digne de ce nom.<br>
J'ai un peu de mécanique à faire (rien de très compliqué pour le coup).</p>
<p>Les problèmes peuvent parfois sembler insurmontable et on a tendance à baisser les bras trop vite, heureusement j'avais mon ami Justin avec moi pour m'aider à trouver des idées et solutions. Et ça a payé, on a fait notre randonnée au lieu de rester coincer à attendre une dépanneuse.</p>
<p>J'espère que vous aurez apprécié cette petite aventure dans les Pyrénées et les photos prises par mes amis Justin et Sylvain.</p>
<p>Dites-moi si vous voulez d'autres articles de ce genre ^-^</p>
</div>]]></content:encoded></item><item><title><![CDATA[🏠 7. La douche et le WC !]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Douche et WC<br>
Les cloisons sont finis, dans ce nouvel article je vais vous parler de la salle de bain et du WC.</p>
<p>Un peu de plomberie et de carrelage en somme.</p>
<p>Tout d'abord, le WC.<br>
On a installé un WC &quot;suspendu&quot; (c'est-à-dire sans empattement au sol) ce</p></div>]]></description><link>http://blog.inateno.com/2018/07/21/house-7/</link><guid isPermaLink="false">5ad51d84bb317134adb3e5f8</guid><category><![CDATA[house]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Sat, 21 Jul 2018 10:00:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/07/35196945_10213918857680076_8645907580759048192_n-1.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/07/35196945_10213918857680076_8645907580759048192_n-1.jpg" alt="🏠 7. La douche et le WC !"><p>Douche et WC<br>
Les cloisons sont finis, dans ce nouvel article je vais vous parler de la salle de bain et du WC.</p>
<p>Un peu de plomberie et de carrelage en somme.</p>
<p>Tout d'abord, le WC.<br>
On a installé un WC &quot;suspendu&quot; (c'est-à-dire sans empattement au sol) ce n'est plus si cher que ça (on a pris dans les premiers prix).<br>
Le montage se fait via un cadre métallique que l'on fixe au mur et au sol.<br>
Dans notre cas, avec les murs en vieux parpaings on a dû utiliser du scellement chimique pour faire tenir les vis dans le mur. <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170616_204311.jpg" alt="🏠 7. La douche et le WC !"><br>
Ensuite l'évacuation <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170616_204316.jpg" alt="🏠 7. La douche et le WC !"> Comme on le voit sur la photo elle n'est pas cachée derrière, la raison à cela est que notre évacuation est en amiante donc on n'y a pas touché ! (tant qu'on y touche pas, ça ne craint pas. Surtout qu'elle passe dans les fondations de la maison et absolument pas dans l'enceinte de la maison, ouf).<br>
On s'est donc directement connecté dessus avec un tube PVC de diamètre un peu plus petit et beaucoup de colle.</p>
<p>Et la photo finie (avec le chauffe-eau, quelques semaines plus tard donc) <img src="http://blog.inateno.com/content/images/2018/07/37536082_2281799885170406_1894504091376156672_n.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>On passe côté Salle de bain (abrévié sdb à partir de maintenant) et douche.<br>
La douche est entièrement séparée par une cloison + porte coulissante, on va donc s'occuper de carreler la douche en entier avant de s'occuper du reste.<br>
Mais avant le carrelage il y a de la plomberie cachée sous le placo (c'est donc un petit retour dans le temps comparé à l'article précédent 😲 ).</p>
<p>Déjà voilà la nourrice, c'est un &quot;bifurcateur&quot; qui permet de générer plusieurs sorties depuis une arrivée d'eau, ici eau froide (uniquement froide pour l'instant puisque le chauffe eau n'est pas posée à ce stade). <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170803_200843.jpg" alt="🏠 7. La douche et le WC !"> Je vous conseille fortement d'en prendre une avec des robinets, cela vous permet d'en acheter une &quot;plus grande que prévue&quot; ou simplement de pouvoir travailler chaque système un à un (ce qu'on a fait ici).</p>
<p>Ensuite, il faut le tuyaux d'alimentation de la douche, de loin ça donne ça <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170616_204322.jpg" alt="🏠 7. La douche et le WC !"><br>
Et la fixation de robinetterie murale vue de près <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170616_204328-1.jpg" alt="🏠 7. La douche et le WC !"><br>
On l'a &quot;collé&quot; avec du mortier pour l'arrière (dans le trou) et de l'enduit colle (ou map) sur la partie proche de la surface.</p>
<p>Une fois le placo percé au bon endroit et collé au mur, la douche ressemble à ça <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170617_172834.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>On fait les joints de placo que l'on ponce <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170701_192402-1.jpg" alt="🏠 7. La douche et le WC !"><br>
Puis une première couche de peinture au plafond <img src="http://blog.inateno.com/content/images/2018/07/35302300_10213918864440245_1056736064200245248_n.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Place au carrelage.</p>
<p>Certaines personne sont &quot;ok&quot; pour poser le carrelage directement sur le placo vert en partant du principe que la colle à carrelage + le placo hydrofuge (couleur vert) seront suffisant (le placo vert est plus résistant à l'eau que le placo blanc, mais il n'est pas 100% &quot;étanche&quot; pour autant).<br>
Après pas mal de recherche sur internet sur les différentes façons de faire et produits, j'ai opté pour un enduit d'étanchéité de parois &quot;pré-carrelage&quot;, de cette manière je me sens plus rassuré pour la suite.<br>
<img src="http://blog.inateno.com/content/images/2018/07/IMG_20170708_201227.jpg" alt="🏠 7. La douche et le WC !"></p>
<p><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170708_201231.jpg" alt="🏠 7. La douche et le WC !"></p>
<p><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170708_201236.jpg" alt="🏠 7. La douche et le WC !"></p>
<p><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170708_201243.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Allé au boulot là 😝<br>
<img src="http://blog.inateno.com/content/images/2018/07/IMG_20170710_194449.jpg" alt="🏠 7. La douche et le WC !"></p>
<p><img src="http://blog.inateno.com/content/images/2018/07/35143756_10213918851679926_2383639349573976064_n.jpg" alt="🏠 7. La douche et le WC !"></p>
<p><img src="http://blog.inateno.com/content/images/2018/07/35102558_10213918846759803_8689095194907246592_n.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Tout ça avance tranquille <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170711_203719-1.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Au niveau du sol on a utilisé l'équivalent d'un receveur à carreler pour surélever le plancher (il en existe de différentes épaisseurs), ensuite on a fait en sorte de faire une petite pente pour que l'eau revienne dans la douche en cas de débordement (c'est pas parfait, on aurait dû insister un peu plus mais bon c'est déjà bien !) <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170712_210606.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Pose quasi finie <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170723_195644.jpg" alt="🏠 7. La douche et le WC !"><br>
<img src="http://blog.inateno.com/content/images/2018/07/35196945_10213918857680076_8645907580759048192_n.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Et une fois tout néttoyé <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170801_230508.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Résultat avec la colonne de douche posée <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170805_230243.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>On aura encore de la finition (bordure du carrelage en haut à poncer et repeindre) mais déjà, la douche est fonctionnelle et ça c'est quand même cool.</p>
<p>Côté sdb, pose du sol<br>
<img src="http://blog.inateno.com/content/images/2018/07/IMG_20170723_195624.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Puis montage du meuble &quot;test&quot; <img src="http://blog.inateno.com/content/images/2018/07/35201869_10213918873040460_1676954660574855168_n.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Et version &quot;finale&quot; (en attendant de faire le carrelage des murs dans la sdb, ce qui sera fait quelques mois plus tard). <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170801_230434.jpg" alt="🏠 7. La douche et le WC !"> <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170805_230221.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Pendant ce temps, le chauffe-eau est stocké dans la chambre à côté, on a que de l'eau froide (en août ça va) <img src="http://blog.inateno.com/content/images/2018/07/35199151_10213918862200189_9115096594222415872_n.jpg" alt="🏠 7. La douche et le WC !"></p>
<p>Au moins ça nous permet d'avoir une &quot;vraie&quot; sdb, car avant on utilisait ça 😌 <img src="http://blog.inateno.com/content/images/2018/07/35193528_10213918850559898_6934957622676160512_n.jpg" alt="🏠 7. La douche et le WC !"></p>
</div>]]></content:encoded></item><item><title><![CDATA[🏠 6. Cloisons placo 1]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Les cloisons et le placo, une grande histoire d'amour qui ne fait que débuter !</p>
<p>Comme il y a plusieurs pièces et même des parties de la maison qui n'existe pas encore à ce moment-là, il y aura des parties &quot;placo&quot; dans beaucoup d'autres articles.</p>
<p>Je vais un peu</p></div>]]></description><link>http://blog.inateno.com/2018/07/13/house-6/</link><guid isPermaLink="false">5ad51cd9bb317134adb3e5f2</guid><category><![CDATA[house]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Fri, 13 Jul 2018 17:00:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/07/IMG_20170616_005450.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170616_005450.jpg" alt="🏠 6. Cloisons placo 1"><p>Les cloisons et le placo, une grande histoire d'amour qui ne fait que débuter !</p>
<p>Comme il y a plusieurs pièces et même des parties de la maison qui n'existe pas encore à ce moment-là, il y aura des parties &quot;placo&quot; dans beaucoup d'autres articles.</p>
<p>Je vais un peu casser la chronologie dans les 2-3 articles qui suivent, car l'on a fait plusieurs choses en même temps / en alternance et je préfère essayer de focus au maximum un sujet à la fois.</p>
<p>Après un gros chargement placo (sans photo 😓 ) on arrive très rapidement à ce résultat: <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170615_150359-1.jpg" alt="🏠 6. Cloisons placo 1"><br>
Début de la future salle de bain donc !</p>
<p>Puis on y monte la porte: <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170615_202933.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Après une après midi on a posé toute la structure, les portes et quelques plaques: <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170616_172235.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Et on a perdu pas mal de temps sur la porte coulissante de la douche (on a fait une douche à l'italienne séparée par une porte coulissante. On préfère ça permet de prendre sa douche tranquille et quelqu'un d'autre se sert de la salle de bain en même temps). <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170617_172849.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Petite vue du reste de la salle de bain: <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170617_172859.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Oh un singe ! Ah non 😂 <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170618_110525.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Quelques précisions/explications:</p>
<p>La structure des cloisons c'est sûrement le truc le plus facile. On fixe le rail au sol (vis pour nous puisque plancher bois, cheville à frapper sinon sur une dalle béton) ensuite on sertit les rails (verticaux) sur le rail du sol, puis on finit en mettant un rail en haut (le même que celui au sol) qui est sertit à son tour avec ceux verticaux, l'ensemble devient plutôt rigide.</p>
<p>Pour le plafond tout dépend de votre maison comment elle est faite, la taille des pièces etc...</p>
<p>Par exemple pour la douche je voulais un plafond à 2.5 et pas 3m donc on a fait reposer la plaque du plafond directement sur les bords des plaques murales. Après quoi on a ajouté des rails de plafond que l'on a fixé sur les rails de la cloison (histoire de verrouiller, mais il faut savoir que juste en posant la plaque sur les autres ça tenait très bien, il faut dire que ce n'est pas très large).</p>
<p>Après, dans ma maison on avait des poutres qui étaient là (depuis perpète) pas trop pourries, au début on voulait les virer pour faire un demi-étage avec une vraie hauteur, puis on s'est dit que c'était trop de boulot pour pas grand-chose donc on a gardé les choses tel quel, et on a pu se servir de ces poutres pour y fixer toutes nos cloisons.</p>
<p>Vue de dessus du plafond de la salle de bains: <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170619_161026.jpg" alt="🏠 6. Cloisons placo 1"><br>
Et vue de dessous: <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170619_161144.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Fun fact, fixer les cloisons aux poutres aura rigidifié les poutres (ça devrait être l'inverse j'suis d'accord lol).</p>
<p>L'avantage de garder les poutres aussi c'est qu'on peut y fixer nos suspentes qui permettent de faire le faux plafond: <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170619_161044.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>3m l'air de rien ça fait haut sur des poutres 😅 <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170619_161110.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Et maintenant on lève les plaques sans lève-plaque 😲 <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170619_170439.jpg" alt="🏠 6. Cloisons placo 1"><br>
La technique: utiliser 4 élingues &quot;légère&quot;, une a 20cm de chaque coin environ, cette technique se fait à 2 facilement, mais à 3 c'est encore mieux (2 qui tiennent chacun 2 élingues et l'autre qui les fait monter à tour de rôle).</p>
<p>Une fois plaqué au plafond ça tient &quot;tout seul&quot; reste plus qu'à visser et faire la suivante. Fastoche.</p>
<p>Hop des petits dessins sur les murs 😹 <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170619_185503.jpg" alt="🏠 6. Cloisons placo 1"> (on aime bien mettre des ci git)</p>
<p>Isolation de tout ça en 30 minutes chronos ! <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170621_122259.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Et le résultat &quot;quasi fini&quot; (avec le stockage pour le carrelage de la salle de bain ^^) <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170701_192342.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>On fini avec du &quot;collage&quot; de placo, technique &quot;crado&quot; mais très pratique/rapide (et plus utilisée que ce qu'on pourrait penser, des fois les trucs crade c'est pas si grave) <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170723_195604.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>La colle en question c'est de &quot;l'enduit colle&quot; tout prêt. Juste a mettre de l'eau.<br>
Plusieurs personnes avec qui je parlais me disent &quot;le map&quot; ce doit être une marque ou quoi donc ne soyez pas surpris si vous entendez ce mot (pour ma part ça me fait juste penser au mot anglais &quot;carte&quot; lol).</p>
<p>Le principe est simple, on fait de la colle et ensuite on éparpille des petits patés partout sur la plaque, ensuite on la colle au mur.</p>
<p>Les élingues sont là pour garder les plaques bien collées (de niveau si possible sachant que les murs de la maison sont tout sauf droit 😁 ).</p>
<p>Par rapport au choix de mettre du placo sur les murs &quot;porteur&quot;, il y avait une sorte d'enduit, sous lequel on trouvait autre chose, sous lequel probablement de la peinture puis de la tapisserie. Tout ça posé sur des parpaings de très mauvaise qualité qui s'effritent.<br>
Vu le temps passé pour gratter quelques cm d'enduit puis le travail nécessaire pour reboucher (sachant qu'à la fin le mur ne serait pas droit) on a préféré mettre du placo et rattraper la droiture du mur (ça reste pas parfait, loin de là ^^).</p>
<p>Nous n'utiliserons pas cette méthode partout dans la maison, chaque endroit à sa petite histoire, des pour et des contres. Sachez juste que cette méthode marche bien !</p>
<p>Et pour terminer cet article voilà une petite photo du début des &quot;joints&quot; de placo, l'ami de tous (et pourtant pas si difficile, mais il faudra patienter pour ça 😉 ) <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170701_192402.jpg" alt="🏠 6. Cloisons placo 1"></p>
<p>Petit teasing pour la semaine prochaine, on parlera sanitaire ! Douche et WC. <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170711_203719.jpg" alt="🏠 6. Cloisons placo 1"></p>
</div>]]></content:encoded></item><item><title><![CDATA[🏠 5. Pose des tuiles et Plancher (v2)]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Chaînage fini, charpente ok, on pose maintenant les tuiles.<br>
Rien d'extraordinaire si ce n'est qu'il faut bien les disposer pour faciliter la pose et s'assurer de leur alignement.</p>
<p><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170608_193235.jpg" alt="IMG_20170608_193235"> <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170609_150755.jpg" alt="IMG_20170609_150755"></p>
<p>Ce sont des tuiles &quot;Romanes&quot; ça s'emboîte donc de gauche à droite et de bas en haut. Inutile de fixer</p></div>]]></description><link>http://blog.inateno.com/2018/07/06/house-5/</link><guid isPermaLink="false">5ad51cc5bb317134adb3e5f1</guid><category><![CDATA[house]]></category><category><![CDATA[cablage]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Fri, 06 Jul 2018 09:30:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/07/35268192_10213918816599049_3694279964619702272_n-2.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/07/35268192_10213918816599049_3694279964619702272_n-2.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"><p>Chaînage fini, charpente ok, on pose maintenant les tuiles.<br>
Rien d'extraordinaire si ce n'est qu'il faut bien les disposer pour faciliter la pose et s'assurer de leur alignement.</p>
<p><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170608_193235.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"> <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170609_150755.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Ce sont des tuiles &quot;Romanes&quot; ça s'emboîte donc de gauche à droite et de bas en haut. Inutile de fixer chaque tuile ou chaque rangée à la charpente, fixer les tuiles de rives est suffisant (et encore, je n'avais pas mis les tuiles de rives avant un bon moment et rien n'a bougé malgré les tempêtes !).</p>
<p>C'est l'heure d'aller chercher les Velux en bonne compagnie <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170609_100616.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"><br>
On a posé les Velux une fois les tuiles posées. Malheureusement j'ai oublié de documenter cette partie, je n'aurais donc pas grand-chose à vous montrer si ce n'est le résultat (et ouai, on ne pense pas toujours à prendre des photos de tout quand on fait sa maison 😣).</p>
<p><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170614_193741.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"> <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170614_193746.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Petite précision, à ce moment-là je devais attendre la fin du bardage de la maison pour pouvoir poser les tuiles de rives et de faîtage (celles tout en haut). Le toit va donc rester comme ça un long moment (vraiment longtemps en fait).<br>
Pas de soucis en soit, enfin tant qu'on a pas une très grosse tempête (heureusement Toulouse a plutôt été épargné comparé à d'autres, donc &quot;ouf&quot;. Si c'était à refaire j'aurai au moins fixé la première rangée par précaution).</p>
<p>Vue des Velux de dessous <img src="http://blog.inateno.com/content/images/2018/07/35147102_10213918853639975_3507323753371533312_n.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Ils donnent directement sur la cuisine (les &quot;poutres&quot; seront enlevées par la suite) <img src="http://blog.inateno.com/content/images/2018/07/35156880_10213918847799829_7680395586838724608_n.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>De retour sur le plancher, on va très vite sur le premier et dernier tiers puisqu'on sait exactement quoi faire <img src="http://blog.inateno.com/content/images/2018/07/35268192_10213918816599049_3694279964619702272_n.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"> Il faut toujours rire 😉</p>
<p>Nous voilà donc sur le cadre central, le dernier. Qui comporte tous les passages de câbles et tuyauterie (le plus long du coup) <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170612_162428.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"><br>
Enfin avant ça, il aura fallu faire les saignées, vive les disques diamants et le burineur 😍 <img src="http://blog.inateno.com/content/images/2018/07/35236528_10213918865280266_5512327053942194176_n.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>On a donc tout refait (les 3 cadres) avec un espacement de 50 par chevrons (mais comme je disais précédemment, à refaire je mettrais 30).</p>
<p>Ici l'arrivée d'eau pour la cuisine et des câblages qui arrivent au pied du compteur <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170612_162442.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Là l'arrivée d'eau globale et le &quot;départ&quot; pour celle de la cuisine <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170612_162452.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Pour tout ce qui concerne la plomberie, j'ai choisi de partir sur du PVC flexible, ça se tord à la main, pas de soudures et moins cher que le cuivre, sauf que niveau prix les embouts eux coûtent cher (on doit arriver au même prix, mais ça se pose plus rapidement quand même, surtout quand on est pas un pro).<br>
Pour les embouts, il en existe 2 types, les &quot;à sertir&quot; et les &quot;à visser&quot;. Ne partez pas sur ceux à sertir car il faut une pince spécifique qui coûte plutôt cher et vous ne pourrez pas redémonter en cas d'échec (ou de changement d'avis, ce qui arrive souvent).</p>
<p>Par contre attention, avec les embouts à visser il faut rajouter du joint sur les filetages. Prenez du &quot;ruban Téflon&quot; et pas la pâte (c'est galère et moins pratique je trouve), ensuite comptez 8-10 tours sur le filetage, ruban bien à plat, dans le sens du vissage.</p>
<p>L'autre côté du cadre, l'arrivée cuisine sort au coin et passera dans un coffrage bois &quot;esthétique&quot; (on aurait pu faire que l'arrivée continue sous le cadre, mais l'évacuation ayant besoin d'une pente nous n'avions de toute façon pas le choix ! Autant tout mettre au même endroit) <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170612_162458.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Répartition des câbles de l'autre côté, petite boîte de dérive pour démultiplier <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170612_162549.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"> en gros une boite de dérive c'est &quot;juste&quot; une boîte en plastique creuse dans laquelle on fait arriver X câbles que l'on connecte ensemble avec un &quot;sucre&quot; (ou domino, y'a plusieurs noms 😁 ).</p>
<p>Entre-temps on accueille le nouveau venu, faut dire que ça creuse tout ça <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170613_195251.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Et on termine le cadre, adieu petit graffiti (ça fera des souvenirs ou une surprise si un jour c'est démonté 😂) <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170612_171606.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p><img src="http://blog.inateno.com/content/images/2018/07/IMG_20170613_185850.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"> <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170613_191442.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
<p>Les planchers sont finis (enfin), câbles prêt ainsi que plomberie.<br>
Il manque la photo finale, mais je vous laisse imaginer 😝<br>
Prochain épisode on commencera donc les cloisons, ça va enfin ressembler à quelque chose !</p>
<p>Spoiler <img src="http://blog.inateno.com/content/images/2018/07/IMG_20170615_150359.jpg" alt="🏠 5. Pose des tuiles et Plancher (v2)"></p>
</div>]]></content:encoded></item><item><title><![CDATA[🏠 4. Les galères du toît 2/2]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Dans l'article précédent je vous parlais du toit, voilà donc la deuxième partie.</p>
<p>On s'est donc préparé pour faire le chaînage du toit.</p>
<p>Première étape, récupérer le matos pour ce faire, béton et parpaings: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170525_130940.jpg" alt="IMG_20170525_130940"></p>
<p>Accompagné d'une bétonnière et d'un premier godet de mélange: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170525_161156.jpg" alt="IMG_20170525_161156"></p>
<p>Afin de libérer l'espace du toit au</p></div>]]></description><link>http://blog.inateno.com/2018/06/29/house-4/</link><guid isPermaLink="false">5ad51caebb317134adb3e5f0</guid><category><![CDATA[house]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Fri, 29 Jun 2018 17:16:28 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/06/IMG_20170525_130940-1.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/06/IMG_20170525_130940-1.jpg" alt="🏠 4. Les galères du toît 2/2"><p>Dans l'article précédent je vous parlais du toit, voilà donc la deuxième partie.</p>
<p>On s'est donc préparé pour faire le chaînage du toit.</p>
<p>Première étape, récupérer le matos pour ce faire, béton et parpaings: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170525_130940.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Accompagné d'une bétonnière et d'un premier godet de mélange: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170525_161156.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Afin de libérer l'espace du toit au maximum on a viré le reste de tuile en bas, on a donc fabriqué un palant: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170526_163912.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Un petit aperçu du tas de gravats et de la remorque chargée avant qu'on commence: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170527_130438.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Pour le chaînage on a fait une partie avec des parpaings de chaînage et le reste avec des planches de coffrage (les parpaings nous permettaient de faire un guide comme ça): <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170527_130501.jpg" alt="🏠 4. Les galères du toît 2/2"> <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170527_130507.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>On avance pas mal <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170601_114426.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Puis la cata, l'orage pointe son nez et ruine ce que l'on avait commencé à faire dedans: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170531_100119-1.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Et encore, on a minimisé l'eau dedans avec un système D (pas au point) <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170531_094508.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Quand je vous disait précédemment que c'était &quot;pas de bol&quot; et mal calculé je ne mentais pas.<br>
Le plancher était foutu, bien que le bois avait plutôt bien résisté après séchage (c'est de l'osb &quot;pièce humide&quot; 2cm d'épaisseur) on a pu réutiliser 90% du plancher, par contre la laine de verre en dessous poubelle a 80% (heureusement que ça ne coûte pas super cher).</p>
<p>L'orage passe, on continue donc le chainage: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170601_114356.jpg" alt="🏠 4. Les galères du toît 2/2"> <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170601_114418.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Sur la rangée arrière on a rajouté une ligne de parpaing, car d'origine sur la maison, la dernière ligne était une sorte de &quot;chaînage en galets&quot;. Un truc tout pourri qui s'enlevait juste en poussant avec la main.</p>
<p>Si c'était à refaire, j'aurai ajouté 3 rangées à l'arrière et 2 sur le reste afin de surélever le toit par rapport à l'origine, ça faisait 4 fois plus de béton c'est certain mais j'aurai pu faire un étage ou une bonne mezzanine ! (j'en parlerais plus tard mais il faut savoir que les impôts, eux, ne raisonnent pas en &quot;loi carrez&quot; donc quitte à refaire, refaites bien ou ne faites pas. C'est dommage de payer un impôt pour 30cm de hauteur sous plafond 😂 ).</p>
<p>Aujourd'hui il est impensable de ré-hausser la maison, ce serait bien trop de boulot alors que tout est fait.</p>
<p>Vue de la rangée arrière: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170601_114433.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Petite pause &quot;wouffesque&quot; <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170602_191703.jpg" alt="🏠 4. Les galères du toît 2/2"><br>
Madame aussi veut le style ! <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170602_191708.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Le chainage est fini, on en profites pour enlever tout le faux plafond et autres trucs qui étaient là (anciennes cheminées notamment) car après ce sera galère ! <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170605_162407.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Encore un sacré boxon qui va agrandir un peu le tas de gravats derrière 😌 <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170605_162706.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Et voilà, après un peu moins de 2 semaines de boulot, les charpentiers reviennent et en une journée c'est plié <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170606_182948.jpg" alt="🏠 4. Les galères du toît 2/2"><br>
Un jour de plus pour les finitions et on peut faire les marioles sur le toit ! <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170608_193218.jpg" alt="🏠 4. Les galères du toît 2/2"></p>
<p>Temps total de l'opération toit:</p>
<ul>
<li>3 jours de démontages de toit/tuiles</li>
<li>12 jours de chaînage</li>
<li>2 jours de charpentes</li>
</ul>
<p>Pas trop mal au final !</p>
<p>Prochaine opération, on repose les tuiles et on refait le plancher.</p>
</div>]]></content:encoded></item><item><title><![CDATA[🏠 3. Les galères du toit 1/2]]></title><description><![CDATA[<div class="kg-card-markdown"><p>L'intérieur est détruit (et &quot;propre&quot;), de même pour les combles. On peut donc maintenant s'attaquer à:</p>
<ul>
<li>commencer le plancher bois dans la maison (et autres)</li>
<li>enlever les tuiles (afin de refaire la charpente)</li>
</ul>
<p>Au cas où cela ne serait pas évident pour certains, c'est une grosse bêtise que</p></div>]]></description><link>http://blog.inateno.com/2018/06/22/house-3/</link><guid isPermaLink="false">5ad51c0dbb317134adb3e5ec</guid><category><![CDATA[house]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Fri, 22 Jun 2018 10:00:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145056-1.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145056-1.jpg" alt="🏠 3. Les galères du toit 1/2"><p>L'intérieur est détruit (et &quot;propre&quot;), de même pour les combles. On peut donc maintenant s'attaquer à:</p>
<ul>
<li>commencer le plancher bois dans la maison (et autres)</li>
<li>enlever les tuiles (afin de refaire la charpente)</li>
</ul>
<p>Au cas où cela ne serait pas évident pour certains, c'est une grosse bêtise que de commencer les travaux dedans alors qu'on va démonter le toit. Mais... la météo était vraiment favorable et nous avions au moins 1 semaine de beau temps, le travail sur le toit ne &quot;devait&quot; prendre que quelques jours.</p>
<p>Tout était calculé (j'aime bien ça, mais c'est pas très compatible avec les chantiers surtout extérieurs).</p>
<p>Spoiler (version courte): connerie (et au final tant mieux, vous comprendrez pourquoi).</p>
<p>Bon, cela dit afin d'éviter les noeuds (y'en a déjà assez) je vais tenter de rester chronologique au maximum.</p>
<p>Et nous voilà donc en train de fabriquer la première section de plancher. <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170519_113823.jpg" alt="🏠 3. Les galères du toit 1/2"> La maison faisant env 4m de large sur env 12m de long, on a décidé de faire 3 quadrillages de 4x4 (environ).</p>
<p>Première bêtise qu'on a faite ici, l'espacement entre les chevrons (on y connaissait rien donc on a &quot;testé&quot;). Ici on a mis 70cm (par là). En vrai, n'allez jamais au delà de 50cm. Et aujourd'hui à refaire je mettrai même 30cm.</p>
<p>Isolation (c'est pour cette raison que l'on fait un plancher, on oublie l'idée d'isoler le vide sanitaire de 20cm de haut, bofbof). <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170519_121449.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>Et une fois la section de plancher finie: <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170519_183753.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>En parallèle un pote s'occupe de commencer la saignée pour passer l'eau jusqu'au futur emplacement de la cuisine. <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170520_123237.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>Et un autre pote s'occupe de réhausser le palier de porte à la hauteur du futur plancher &quot;fini&quot; <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145223.jpg" alt="🏠 3. Les galères du toit 1/2"> du taff question découpage du cadre en haut et réajustement des gonds mais ça passe. Un petit coffrage de béton et le tour est joué (ça tient encore donc c'est bon ! Je crois...)</p>
<p>A l'opposé de la maison, mise en place de la 3ème section <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145233.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>Au passage on &quot;contemple&quot; la manière dont cette partie du mur a été traité (sûrement une ancienne porte, il y a bien longtemps). <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145241.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>Et puis n'oublions pas le plus important, enlever les tuiles du toit !</p>
<p>Pour rappel on démonte tout le toit car la charpente est pourrie, morte archi morte et l'isolation des combles nase aussi, bref on perd pas grand chose.</p>
<p>On refait donc tout à neuf.</p>
<p>Le plan ici c'était &quot;on enlève les tuiles le week-end, les charpentiers feront la charpente lundi/mardi, on remet les tuiles direct après et en plus on a 2 jours de marge avant l'orage&quot;.</p>
<p>Pas de plan B non, jeune padawan les erreurs tu commettras. Bref, au boulot !</p>
<p><img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145019.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>Ah, ça bosse dur ! <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145056.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>On y était encore le dimanche soir (on a étalé ça sur 2 jours, dur l'air de rien !) <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_200522.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>Une des petites trouvailles jolie mais malheureusement &quot;mortelle&quot; (même si l'on bouge le nid 😢) <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_201000.jpg" alt="🏠 3. Les galères du toit 1/2"></p>
<p>Et on stocke &quot;le max&quot; de tuiles sur le toît du garage qui lui n'a rien <img src="http://blog.inateno.com/content/images/2018/06/IMG_20170527_130421.jpg" alt="🏠 3. Les galères du toit 1/2"> on a stocké un peu moins de la moitié ici 😨</p>
<p>Tout se passe bien jusque là.<br>
On est Lundi les charpentiers arrivent et moi je vais bosser, puis on m'appelle. Problème... ok j'arrive (plus simple).</p>
<p>Et là il m'explique que la maison n'a pas &quot;de chaînage&quot;. Chaînage késako, j'sais pas.<br>
Heureusement mon pote qui m'aide le plus, lui sait ce que c'est. Il en a même déjà fait un avec son père pour une clôture (c'est pas pareil mais bon, la théorie reste la même et la pratique... pas très loin).</p>
<p>C'est donc le plop twist, l'orage arrive et on sait que le chaînage ne sera pas faisable en si peu de temps. Vous comprenez d'avance donc pourquoi c'était une bêtise de faire l'intérieur avant d'avoir fini le toit.</p>
<p>Enfin si tout s'était bien passé ça aurait été le plan parfait.<br>
Si...</p>
<p><img src="http://blog.inateno.com/content/images/2018/06/IMG_20170531_100119.jpg" alt="🏠 3. Les galères du toit 1/2"> (poubelle, oui-oui).</p>
<p>Au vue du travail qu'il reste au sujet du toit, je ferai donc un deuxième article qui concluera la partie &quot;toiture&quot; ! 😊</p>
</div>]]></content:encoded></item><item><title><![CDATA[🏠 2. Destruction !]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Clés en mains, nous voilà armés de massues, disqueuses, burineurs bref tout l'arsenal pour tout péter.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/mVVhLFZlYB4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Vérifiez avant où arrive l'électricité (disjoncteur, tableau) ainsi que l'eau et potentiellement le gaz.</p>
<p>Concernant l'arsenal d'ailleurs qui vous sera vite indispensable, profitez des affaires d'occasions ! Entre les sites d'annonces et les brocantes vous</p></div>]]></description><link>http://blog.inateno.com/2018/06/15/house-2-destruction/</link><guid isPermaLink="false">5ad51bf7bb317134adb3e5eb</guid><category><![CDATA[house]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Fri, 15 Jun 2018 10:00:18 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/04/5---destruction-1.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/04/5---destruction-1.jpg" alt="🏠 2. Destruction !"><p>Clés en mains, nous voilà armés de massues, disqueuses, burineurs bref tout l'arsenal pour tout péter.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/mVVhLFZlYB4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p>Vérifiez avant où arrive l'électricité (disjoncteur, tableau) ainsi que l'eau et potentiellement le gaz.</p>
<p>Concernant l'arsenal d'ailleurs qui vous sera vite indispensable, profitez des affaires d'occasions ! Entre les sites d'annonces et les brocantes vous trouverez votre bonheur (mais il faut s'y prendre avant c'est mieux car au dernier moment on a rarement les meilleurs deal).</p>
<p>Si vous voulez du neuf adaptez vos achats en fonction de la fréquence d'usage, si vous vous en servirez autant après et si on vous le remplace en cas de panne (en général on le renvoi dans une usine et il faut attendre 1-2 mois sans l'outil).<br>
Des fois il vaut mieux mettre un peu plus, ou alors beaucoup moins mais en 2 exemplaires ^^ (j'écrirais peut-être un article pour parler outillage).</p>
<p>PS: durant cette étape je n'ai pas pris beaucoup de photos, mais bon la destruction c'est pas le plus compliqué.</p>
<p>Mettre des coups de massue c'est pas sorcier hein. Si comme moi vous avez décidé de tout péter et tout refaire, y'a pas besoin d'hésiter BOUM (quand c'est de la brique comme là, c'est plus dur 😂 c'est mieux).</p>
<p>Il faudra au préalable s'assurer de couper le disjoncteur et/ou de déconnecter tous les fils qui y arrivent, de même pour l'arrivée d'eau.<br>
<img src="http://blog.inateno.com/content/images/2018/04/7---aquecoucou.jpg" alt="🏠 2. Destruction !"></p>
<p>Il va sans dire que si vous craignez les petites bébêtes de la nature cela vous complexifiera la tâche très souvent !<br>
<img src="http://blog.inateno.com/content/images/2018/04/8---coucou-toi.jpg" alt="🏠 2. Destruction !"></p>
<p>On enlevait tranquillement le carrelage et en arrivant sur le dernier tiers de la maison, le revêtement nous semble étrange (colle a carrelage mais dessous on dirait que ça sonne creux, comme du bois).<br>
Après avoir gratter légèrement on voit que c'est bel et bien du bois ! Du coup on a ouvert pour vérifier l'état en dessous.<br>
<img src="http://blog.inateno.com/content/images/2018/04/10---surprise.jpg" alt="🏠 2. Destruction !"></p>
<p>Tout va bien, les poutres sont saines, pas besoin de tout refaire (ouf).<br>
<img src="http://blog.inateno.com/content/images/2018/04/11---ouf.jpg" alt="🏠 2. Destruction !"></p>
<p>Cela dit, ça nous pose quand même un sacré pépin technique.<br>
Dans l'idée on pétait tout pour ensuite couler une grosse dalle béton uniforme avec de l'isolant dessous.<br>
Là... bon on aurait pu faire du &quot;béton léger&quot; ou quoi mais j'étais pas très chaud.<br>
On laisse ça pour plus tard de toute façon, on a déjà une tonne de choses à faire avant !</p>
<p>On alterne un peu entre destruction en bas et nettoyage des combles (le matin de préférence car il fait une chaleur à mourir dans ces combis, plongé au milieu de la laine de verre et d'un milliard de merdes (oups, pardon 😂 ).<br>
<img src="http://blog.inateno.com/content/images/2018/04/12---laine-de-verre-youhou.jpg" alt="🏠 2. Destruction !"></p>
<p>Voyez par vous-même (ah le mot n'était pas exagéré hein ! On a retrouvé des trucs... dingue ! Bref).<br>
<img src="http://blog.inateno.com/content/images/2018/04/13---combles.jpg" alt="🏠 2. Destruction !"><br>
PS: la charpente était entièrement <em>&quot;à refaire&quot;</em> je le savais avant d'avoir acheté et c'était dans les devis (un des rares trucs que je n'aurai pas fait).</p>
<p>On entasse, on essaye de faire un <em>&quot;tri&quot;</em> l'air de rien, je me suis dit que c'était plus pratique pour plus tard quand faudra tout virer.<br>
<img src="http://blog.inateno.com/content/images/2018/04/14---le-petit-tas.jpg" alt="🏠 2. Destruction !"><br>
En même pas une semaine on avait tout pété et tout viré (quand il faut mettre des coups de massue y'a du monde, mais quand faut ramasser les gravats et les vider, y'a plus personne !)</p>
<p>Le système d'arrivé d'eau/évacuation est bien vieux et vraiment bizarre (pleins de tuyaux d'évacs, certains semblent condamnés, des gros, des petits).<br>
Afin de minimiser les travaux et pas s'embarquer dans des trucs &quot;trop gros&quot; j'ai préféré tout garder tel quel et &quot;on verra plus tard&quot;. Choix prudent vu que tout fonctionnait ! <img src="http://blog.inateno.com/content/images/2018/06/35305990_10213918822839205_6176085301459419136_n.jpg" alt="🏠 2. Destruction !"></p>
<p>Entre temps je me suis décidé de faire un plancher entièrement en bois.<br>
Au début je voulais faire un plancher chauffant, mais ça s'est avéré beaucoup plus cher que prévu, long à faire, puis le béton par-dessus le bois j'étais pas chaud et j'aime pas le gaz. Bref... Beaucoup de raisons du coup =&gt; bois avec isolation en dessous.<br>
<img src="http://blog.inateno.com/content/images/2018/04/15---convoi.jpg" alt="🏠 2. Destruction !"></p>
<p>Et voilà l'intérieur de la maison &quot;tout détruit&quot; qui se transforme en entrepôt du coup:<br>
<img src="http://blog.inateno.com/content/images/2018/04/16---entrepot.jpg" alt="🏠 2. Destruction !"></p>
<p>Une autre vue où l'on voit les anciens câbles électrique que l'on a &quot;enlevé&quot;. <img src="http://blog.inateno.com/content/images/2018/06/35236581_10213918815999034_5117211052215369728_n.jpg" alt="🏠 2. Destruction !"></p>
<p>Et pour l'occasion on s'était marré à faire un petit &quot;concours&quot; de destruction. <iframe width="560" height="315" src="https://www.youtube.com/embed/7hcp6CcWXUw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> Une bonne égalité avec deux techniques bien différentes 😂 l'occasion de se marrer un peu aussi.</p>
<p>Dans l'étape suivante, on continue le démontage/destruction et on commence le plancher et d'autres petites choses.</p>
<p>Petit teaser ! 😆<br>
<img src="http://blog.inateno.com/content/images/2018/06/IMG_20170521_145057.jpg" alt="🏠 2. Destruction !"></p>
</div>]]></content:encoded></item><item><title><![CDATA[🎮 Hexamaster - Architecture serveurs]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Vous vous demandez comment fonctionne mon serveur ?<br>
Vous cherchez des réponses pour faire le vôtre ?<br>
Vous êtes juste curieux ?</p>
<p>Dans cet article je vais vous dévoiler comment j'ai conçu &quot;l'architecture&quot; de mes serveurs pour <strong>Hexamaster</strong>. Un jeu que je voulais &quot;au départ&quot; concentré sur le multijoueur.</p></div>]]></description><link>http://blog.inateno.com/2018/06/10/dev-un-article-sur-hexamaster/</link><guid isPermaLink="false">5ae79770bb317134adb3e608</guid><category><![CDATA[Dev]]></category><category><![CDATA[gamedev]]></category><category><![CDATA[servers]]></category><category><![CDATA[nodejs]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Sun, 10 Jun 2018 09:30:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/06/1-1.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/06/1-1.jpg" alt="🎮 Hexamaster - Architecture serveurs"><p>Vous vous demandez comment fonctionne mon serveur ?<br>
Vous cherchez des réponses pour faire le vôtre ?<br>
Vous êtes juste curieux ?</p>
<p>Dans cet article je vais vous dévoiler comment j'ai conçu &quot;l'architecture&quot; de mes serveurs pour <strong>Hexamaster</strong>. Un jeu que je voulais &quot;au départ&quot; concentré sur le multijoueur.</p>
<p>Avant d'entrer dans &quot;ma techno&quot; je vais un peu parler de l'état de l'art sur le marché du jeu vidéo.</p>
<p>PS: Cet article contiendra beaucoup de termes techniques de différents milieux, je ferais mon possible pour essayer de traduire ça !</p>
<h1 id="danslemondedujeuvido">Dans le monde du jeu vidéo</h1>
<p>Qui dit multijoueur dis plusieurs personnes en même temps.<br>
De ce fait on a plusieurs façons de voir et prévoir les choses:</p>
<ul>
<li>on fait le truc le plus simple/léger/pas cher possible et puis quand ça va plus on essaye d'améliorer ça</li>
<li>on prévoit un ensemble robuste, voir on prévoit &quot;le buzz&quot;</li>
</ul>
<p>Pour avoir une comparaison simple, pour le jeu PUBG ils ont choisi la méthode 1, le succès du jeu les as dépassés et depuis le début leurs serveurs croulent sous la quantité de joueurs (aujourd'hui ça va mieux, mais ils perdent des joueurs aussi donc est-ce que les serveurs sont aujourd'hui suffisant pour le monde qu'il y avait l'an dernier ? On ne le saura sans doute jamais). <img src="http://blog.inateno.com/content/images/2018/06/pubg-down.jpg" alt="🎮 Hexamaster - Architecture serveurs"></p>
<p>Et prenons donc l'opposé: Fortnite (qui ont probablement profité de la hype de PUBG pour se &quot;douter&quot; du monde qu'ils auraient) qui lui a eu bien moins de problèmes. <img src="http://blog.inateno.com/content/images/2018/06/fortnite-down.jpg" alt="🎮 Hexamaster - Architecture serveurs"></p>
<p>Ok donc quand on &quot;m'entends&quot; parler il n'y a &quot;que des problèmes avec les serveurs&quot;. Oui c'est vrai.<br>
Quand un jeu rencontre un gros succès, les serveurs sont rarement capables d'amortir le choc, des fois un petit peu, mais souvent pas assez.</p>
<p>Et pour causes plusieurs raisons je pense :</p>
<ul>
<li>manque d'expérience des programmeurs serveurs</li>
<li>méthodes de réalisation des serveurs trop &quot;basique&quot; (1 serveur pour X joueurs)</li>
<li>pas de scaling dynamique (architecture beaucoup plus complexe à mettre en place pour un jeu temps-réel)</li>
<li>pas de monitoring suffisant donc zéro anticipation</li>
</ul>
<p>Pour faire plus simple, je dirais que l'industrie du jeu vidéo n'est pas assez &quot;à la page&quot; question technos serveurs.<br>
On a amélioré sans cesse nos méthodes de productions de rendering, mais question &quot;comment faire un serveur&quot; ça n'a pas bougé (presque pas) alors que les technos elles, sont là ! (queueing, dockerisation, micro services).</p>
<p>Je ne dis pas que tout est simple au contraire même, les serveurs c'est probablement le truc le plus &quot;hypothétique&quot; qui soit.<br>
<img src="http://blog.inateno.com/content/images/2018/06/server_meme.jpg" alt="🎮 Hexamaster - Architecture serveurs"></p>
<p>Et pour causes, beaucoup de problèmes peuvent apparaîtres:</p>
<ul>
<li>serveur qui crash</li>
<li>base de données qui crash</li>
<li>connexion de l'utilisateur instable</li>
<li>connexion de l'utilisateur qui plante</li>
<li>utilisateur qui tente une action plein de fois</li>
<li>10 utilisateurs qui tentent une action en groupe plein de fois</li>
<li>trop de personnes qui demandent à se connecter d'un coup</li>
<li>etc..</li>
</ul>
<p>Bref, faire un serveur indestructible semble (est, soyons honnêtes) impossible.<br>
Mais une chose est certaine à mes yeux, c'est que les efforts mis en place par les équipes pour faire des serveurs robustes sont bien trop faibles.</p>
<p>En tout cas, en ce qui concerne les jeux PC &quot;mainstream&quot;. (car aussi étonnant que cela puisse paraître, pleins de jeux indépendant ou de jeux mobiles se portent très bien et n'accusent pas autant de lacune sur les serveurs).</p>
<h1 id="lexique">Lexique</h1>
<p>Un lexique s'impose pour être certain de comprendre la suite.</p>
<ul>
<li>quand on dit &quot;serveur&quot; ou &quot;serveur de jeu&quot; on parle du serveur qui exécute le serveur du jeu, avec les algorithmes, la logique du jeu etc...</li>
<li>serveur de queuing (ou message broker): un serveur qui récupère des messages et les redistribues ou génère des files d'attentes en attendant que d'autres serveurs les récupères</li>
<li>serveur de base de donnée: permet de stocker des données plus ou moins complexes, de manière durable et sécurisée</li>
<li>serveur clé valeur: un serveur de base de données très simples qui ne peut stocker qu'une faible valeur, généralement destiné à faire transiter une information très rapidement</li>
<li>clustering: le fait de pouvoir instancier plusieurs fois le même serveur (on en fait des clones) qui travaillent tous de paires</li>
<li>scaling: le fait d'augmenter le nombre de serveur</li>
<li>micro-service: le fait de faire plusieurs serveurs de jeu qui traiteront chacun un aspect différent (l'opposé à cette méthode est le monolithe, on fait un serveur qui fait tout)</li>
</ul>
<h1 id="lesserveursdehexamaster">Les serveurs de Hexamaster</h1>
<p>Maintenant que vous avez un peu une vision d'ensemble je vais vous détailler comment j'ai fait mes serveurs.</p>
<p>Alors, déjà j'ai dit &quot;mes&quot;, je ne fais donc pas un serveur monolithe non-clusterisé non-scalable (comment ça j'ai abusé sur cette phrase ? 😂)</p>
<p>Sachant que ma communauté &quot;déjà existante&quot; est pas très grande, j'aurai tout à fait pu faire &quot;un serveur pourri&quot;, cela serait resté cohérent et &quot;fiable&quot;.</p>
<p>Mais après l'expérience &quot;Pokewebgo&quot; (et le serveur qui crash 4h après sont lancement), j'ai voulu taper le plus haut possible dans ce que je pouvais faire niveau architecture et technique.</p>
<p>Bien entendu, rien ne me garantit que mon travail aura été &quot;utile&quot; si on a aucun/peu de joueur (ce qui est le cas jusqu'à présent, mais le jeu n'est pas fini donc...pas d'pression).</p>
<p>Je me suis donc penché sur plusieurs idées, pour créer une puissante architecture serveur scalable à souhait et en temps réel (voir automatique en suivant l'affluence de joueur).<br>
Et j'en suis donc venu à une idée que j'avais eue auparavant, faire une architecture micro-service, scalable, avec un serveur central de base de données et un cluster de serveurs clés/valeurs + broker.</p>
<p>Ce qui donne au minimum:</p>
<ul>
<li>6 serveurs NodeJS (serveur de jeu en micro-service)</li>
<li>1 serveur MongoDB (base de données)</li>
<li>1 serveur Redis (serveur clé/valeur + message broker)</li>
</ul>
<p>J'ai précisé au minimum puisque tout est scalable.</p>
<p>Voilà un petit schéma des serveurs pour rendre tout ce tralala plus comestible: <img src="http://blog.inateno.com/content/images/2018/06/schema-archi.jpg" alt="🎮 Hexamaster - Architecture serveurs"></p>
<p>Ce qu'il faut comprendre, c'est que chaque serveur est libre de discuter avec Mongo (la base de données) ou Redis quand ça lui chante !<br>
Le truc c'est de réussir à &quot;contraindre&quot; chaque service à un type de donnée afin d'éviter les éventuels conflits (ce qui se solderait par une perte d'objets par exemple, pour le joueur).</p>
<p>Voilà maintenant un exemple de quel bouton fonctionne avec quel serveur dans le jeu (ce n'est pas tout à fait ça mais c'est pour &quot;illustrer&quot;). <img src="http://blog.inateno.com/content/images/2018/06/schema-game.jpg" alt="🎮 Hexamaster - Architecture serveurs"> De cette manière, chaque interaction concernant l'inventaire, appellera le service &quot;inventory&quot;. Le Matchmaking quand on veut jouer en ligne contre quelqu'un, le solo lorsqu'on joue seul, etc...</p>
<p>Vous remarquerez que sur mon dernier schéma on ne voit ni le serveur &quot;authentification&quot; ni &quot;Versus&quot; et c'est normal, l'authentification n'est appelé que lors de la connexion/déconnexion (en gros) et le versus est appelé par Matchmaking qui vous fait transiter une fois la partie prête !</p>
<p>De son côté, Redis s'occupe de sauvegarder les informations des parties en cours et des personnes connectés. Redis assure aussi l'échange de messages entres plusieurs instances de serveurs soit le schéma suivant:<br>
<img src="http://blog.inateno.com/content/images/2018/06/servers-redis.jpg" alt="🎮 Hexamaster - Architecture serveurs"> Traduction: le serveur A dit à Redis &quot;jouer la carte sur la case 1&quot;, Redis transmet le message à tout le monde, tout le monde exécute &quot;jouer la carte sur la case 1&quot;.</p>
<p>Cela se traduit par les avantages suivants:</p>
<ul>
<li>si le serveur d'authentification plante, tous les joueurs déjà connectés pourront continuer de jouer sans aucun problème</li>
<li>si le serveur &quot;matchmaking&quot; plante, uniquement les joueurs voulant lancer une partie en ligne seront impactés</li>
<li>si le serveur shop plante, les achats seront impossibles</li>
<li>etc...</li>
</ul>
<p>Sans oublier que:</p>
<ul>
<li><strong>chaque serveur peut se répliquer à l'infini, donc seul les joueurs d'une instance d'un serveur seront impactés en cas de crash</strong></li>
</ul>
<p>Et là ça change tout.<br>
On reprend notre précédent schéma et on y ajoute le joueur Toto qui joue sur le serveur A, contre Tata sur le serveur C. <img src="http://blog.inateno.com/content/images/2018/06/servers-toto-1-1.jpg" alt="🎮 Hexamaster - Architecture serveurs"></p>
<p>Le serveur B plante pour une raison inconnue, Toto et Tata ne sont pas impactés car ils n'ont pas à se soucier des autres serveurs. <img src="http://blog.inateno.com/content/images/2018/06/servers-toto-2-1.jpg" alt="🎮 Hexamaster - Architecture serveurs"></p>
<p>Le serveur A ou C plante, Toto et Tata sont impactés <img src="http://blog.inateno.com/content/images/2018/06/servers-toto-3-1.jpg" alt="🎮 Hexamaster - Architecture serveurs"><br>
Mais si Toto jouait sur le serveur B, il n'y aurait pas eu de problèmes.</p>
<p>Côté code, ce qu'il faut retenir c'est que j'ai 6 serveurs différents.<br>
D'un côté c'est bien car j'ai moins de choses par projet et c'est plus facile à déboguer (si l'inventaire plante je vais pas chercher dans le matchmaking !)<br>
D'un autre côté je suis obligé d'avoir des doublons de code (problème que j'ai résolu en faisant une dépendance commune à tous mes serveurs) et de lancer une myriade de serveurs pour tout tester !</p>
<p>Cf une photo avec tous les serveurs de lancés <img src="http://blog.inateno.com/content/images/2018/06/pic-servers.jpg" alt="🎮 Hexamaster - Architecture serveurs"></p>
<p>J'oubliais presque de parler de l'hébergement.<br>
Il va s'en dire que des serveurs &quot;micro-services&quot; c'est plus compliqué à héberger quand les besoins du jeu sont petits.<br>
On ne ressent la puissance de cette architecture que lorsque des centaines, des milliers même ! De joueurs se connectent en même temps pour &quot;la première fois&quot;.</p>
<p>Dans mon cas de figure j'utilise &quot;scalingo&quot;, l'avantage c'est que c'est &quot;tout fait&quot; facile à utiliser et puissant.<br>
Maintenant il est clair que pour lancer son prototype a 6 serveurs ce ne sera pas cadeau (le total des serveurs me coûte env 90€/m lorsque tout est lancé, heureusement on peut très facilement les éteindre et ainsi réduire sa facture).</p>
<p>Peut-être un &quot;kimsufi&quot; sera largement suffisant pour mener vos tests, mais le moment venu ne lésignez pas et choisissez bien !</p>
<p>Pour conclure cet article, comprenez que si vous arrivez à faire des serveurs &quot;micro-services&quot; cela pourra avoir un gros impact positif sur votre jeu.<br>
Vous n'impacterez pas tous vos joueurs pour le moindre petit problème et en plus il sera plus facile de traquer et patcher l'origine d'un problème.</p>
<p>J'aurai pu rentrer dans la technique pure, dans le code, mais je pense que je me serais éloigné du sujet et que cet article aurait été moins accessible et qu'il n'aurait pas vraiment traité le sujet critique &quot;l'architecture&quot;.</p>
<p>Si vous savez coder il vous sera assez facile de trouver de la documentation avec les termes que j'ai utilisés ici, de trouver des exemples et de mettre ça en pratique !</p>
<p>J'espère que cet article vous a plu et que vous avez appris des choses.<br>
Peut-être un article plus technique la prochaine fois ?</p>
</div>]]></content:encoded></item><item><title><![CDATA[🚙 1. Smokey, un Jeep qui Drift(era)]]></title><description><![CDATA[<div class="kg-card-markdown"><p>En Mars 2018 j'ai eu une mésaventure avec mon Jeep Cherokee (un &quot;vieux&quot; de 1999).</p>
<p>La boîte de transfert a éclaté sur l'autoroute (la boîte de transfert c'est le truc juste après la boîte de vitesse qui permet entre autre, d'envoyer la puissance à l'avant et à l'arrière</p></div>]]></description><link>http://blog.inateno.com/2018/06/10/xj-d-et-si-je-faisais-une-voiture-de-drift-avec-un-jeep-cherokee/</link><guid isPermaLink="false">5ae0503cbb317134adb3e5fd</guid><category><![CDATA[vroum]]></category><category><![CDATA[drift]]></category><category><![CDATA[xj-d]]></category><category><![CDATA[xj]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Sun, 10 Jun 2018 09:00:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/06/2018-05-27.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/06/2018-05-27.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"><p>En Mars 2018 j'ai eu une mésaventure avec mon Jeep Cherokee (un &quot;vieux&quot; de 1999).</p>
<p>La boîte de transfert a éclaté sur l'autoroute (la boîte de transfert c'est le truc juste après la boîte de vitesse qui permet entre autre, d'envoyer la puissance à l'avant et à l'arrière du véhicule quand c'est un 4x4).</p>
<p>Face au prix des boîtes de transfert j'ai acheté un Jeep &quot;pour pièce&quot; (bien moins cher au final surtout que j'avais besoin de plusieurs choses).</p>
<p>Mais voilà une fois que j'avais récupéré les quelques pièces pour remettre le mien en état, il me restait quand même une voiture quasi complète.</p>
<p>Donc je me suis dit que plutôt que de jeter la carcasse j'allais m'amuser avec 😄.</p>
<p>Quelle mouche m'a piqué vont se dire certain. Un Jeep c'est fait pour aller dans la forêt pas pour faire de la fumée (cela viendra aussi). Réponse courte: parce que.</p>
<p>Et je suis certain que le résultat final en surprendra plus d'un 😉.</p>
<p>Voilà la &quot;bête&quot; d'origine. <img src="http://blog.inateno.com/content/images/2018/06/2018-03-20.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p><strong>Les spécs technique du bouzin :</strong></p>
<ul>
<li>c'est un Jeep Cherokee XJ de 1991</li>
<li>moteur 4L 6 cylindres (atmosphérique donc pas de turbo)</li>
<li>il a environ 150.000 au compteur</li>
<li>le moteur fait 190cv d'origine avec un très gros couple</li>
<li>la zone rouge est à 5600 environ (mais une fois qu'on a passé les 4600 ce n'est plus très intéressant)</li>
<li>il fait 1500Kg d'origine</li>
</ul>
<p>Le but premier est de faire une version &quot;fonctionnelle et le moins cher possible&quot;, afin de valider le concept et le potentiel.</p>
<p>On commence donc par les trains roulants en descendant le Jeep au maximum et en trouvant les meilleurs réglages (empattement, cambre, angle max).</p>
<p>Quelques photos de repérage.<br>
Pont avant <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180428_123155.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> Pont arrière <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180325_132353.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> Pont avant démonté, yay <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180428_135406.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> Pont arrière aussi ^-^ <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180428_152218.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>On a ensuite pris une journée pour commencer la partie &quot;technique&quot;.<br>
Comprendre, découper, modifier, re-souder tout ça.</p>
<h1 id="dabordlepontarrire">D'abord, le pont arrière</h1>
<p>Quelques explications. Sur le Cherokee &quot;XJ&quot; à l'arrière c'est des suspensions à lames, l'axe (le pont) est accroché en dessous des lames.<br>
En mettant le pont au-dessus des lames on baise donc la garde au sol de l'épaisseur du pont.</p>
<p>Schéma explicatif:<br>
<img src="http://blog.inateno.com/content/images/2018/06/schema.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>On commence donc par cette première modification afin de voir jusqu'où ça descend.</p>
<p>Voilà 2 photos une fois que l'on avait fini de découper le support de suspension et le support de pont. C'était long, mais cette étape demande d'être précis !<br>
<img src="http://blog.inateno.com/content/images/2018/06/IMG_20180520_012420-1.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> le pont avec les éléments enlevé, tout propre (enfin presque).<br>
Et là le support de suspension découpé<br>
<img src="http://blog.inateno.com/content/images/2018/06/IMG_20180520_012434.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>Il manque la photo du support &quot;plat&quot; mais c'est dans la même idée.<br>
Donc ensuite, on a retourné le pont et on a re-soudé les supports (upside down quoi).<br>
Voilà ce que ça donne une fois remonté sur Smokey. <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180604_214303.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p><img src="http://blog.inateno.com/content/images/2018/06/IMG_20180604_214318.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>Cette &quot;simple&quot; modif nous à fait descendre le Jeep de 20cm env, mais on peut aller plus bas encore !<br>
<img src="http://blog.inateno.com/content/images/2018/06/rear-down.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>V1 de l'arrière c'est fait, on tentera de descendre encore plus en ajoutant des &quot;cales&quot; en acier.</p>
<h1 id="maintenantlepontavant">Maintenant, le pont avant</h1>
<p>On a commencé par couper les extrémités du pont, juste avant les supports de roues.<br>
De cette manière on élargit ce qui nous permet d'augmenter l'angle des roues et on peut aussi régler la cambre (ce n'est pas réglable par défaut sur un Cherokee). <img src="http://blog.inateno.com/content/images/2018/06/chop-chop.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_152751.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>Et on prend un autre tube d'acier de même épaisseur mais diamètre plus petit pour l'extension. <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_152801.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_155457.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> ça passe bien, du coup on nettoie impec l'extension et on la met dans le support de roue avec des points de soudures pour que ça tienne<br>
<img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_184330.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"><br>
<img src="http://blog.inateno.com/content/images/2018/06/weld-weld.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>Et maintenant on plug les deux, boum.<img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_192039.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>On vient de gagner 10cm de chaque côté à l'avant, yeah.</p>
<p>Une curieuse ! <img src="http://blog.inateno.com/content/images/2018/06/meow.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>Bon maintenant on coupe les amortisseurs pour faire descendre tout ça (ouaip comme des bourrins). <img src="http://blog.inateno.com/content/images/2018/06/IMG-20180604-WA0003.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>Et voilà ce que ça donne une fois &quot;descendu&quot; <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_214421.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"> <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_214040.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>On a aussi enlevé tout ce qui pouvait être enlevé afin de maximiser ce qu'on appel le &quot;angle lock&quot; (soit l'angle maximum de rotation des roues, c'est mieux pour drift).<br>
Voilà la photo du rendu (je mettrais des photos du taff fait quand on re-démontera car j'ai oublié d'en prendre -_- ). <img src="http://blog.inateno.com/content/images/2018/06/IMG_20180527_210749.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"><br>
Au début on avait 38°, maintenant on a 62° !! (mais sans les étrier de freins, on va trouver un truc 😅)</p>
<p>Là on voit bien le taff ! <img src="http://blog.inateno.com/content/images/2018/06/angle-lock.jpg" alt="🚙 1. Smokey, un Jeep qui Drift(era)"></p>
<p>C'est tout pour cette première &quot;grosse&quot; étape.<br>
Relativement intéressante pour nous, mais pas encore impressionnante.<br>
On a du taff encore !</p>
<p>Prochainement donc (pas forcément dans cet ordre là):</p>
<ul>
<li>re-démontage des ponts et finalisation des renforts et soudures (temporaires là)</li>
<li>supression du différentiel avant</li>
<li>descendre encore plus !</li>
<li>démontage de la boîte à vitesse et fix (car elle a une fuite)</li>
<li>conception d'un arbre de transmission pour bypasser la boite de transfert</li>
<li>barre stabilisatrice av/arr</li>
<li>création d'une &quot;trackbar&quot; à l'arrière pour renforcer la tenue du pont</li>
<li>frein à main hydraulique</li>
<li>test !</li>
<li>préparation moteur (une fois les tests validés)</li>
</ul>
</div>]]></content:encoded></item><item><title><![CDATA[🏠 1. Une maison faite maison]]></title><description><![CDATA[<div class="kg-card-markdown"><p>Tout commence en mai 2017, à défaut d'avoir un gros budget mais désirant une maison avec jardin je me suis lancé dans la rénovation d'une vieille baraque.</p>
<p>Je savais un peu bricoler 2-3 choses (bois et mécanique en fait) et je suis plutôt débrouillard, créatif, curieux, motivé et je n'ai</p></div>]]></description><link>http://blog.inateno.com/2018/06/10/house-le-commencement/</link><guid isPermaLink="false">5ad50f35bb317134adb3e5e7</guid><category><![CDATA[house]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Sun, 10 Jun 2018 08:00:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/04/1---maison-face.jpg" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/04/1---maison-face.jpg" alt="🏠 1. Une maison faite maison"><p>Tout commence en mai 2017, à défaut d'avoir un gros budget mais désirant une maison avec jardin je me suis lancé dans la rénovation d'une vieille baraque.</p>
<p>Je savais un peu bricoler 2-3 choses (bois et mécanique en fait) et je suis plutôt débrouillard, créatif, curieux, motivé et je n'ai pas peur de l'échec ! (les 2 derniers points étant indispensable 😉).</p>
<p>Après 1 an je me suis décidé à tout raconter (je n'ai pas encore fini), cela va être fastidieux mais je vais tenter de faire le plus de chapitre possible afin de rentrer dans le détail et si possible dans l'ordre (cependant je mettrais des warnings sur mes échecs afin que vous ne vous lanciez pas les yeux fermés en prenant comme source un échec ^^).</p>
<p>Aussi, ne vous lancez pas dans un projet comme cela si vous êtes vraiment seul. Avant de signer j'ai demandé a mon frère et a des amis de me &quot;jurer&quot; qu'ils m'aideraient (au moins un peu) sans quoi je n'aurai jamais eu le cran d'y aller tout seul (surtout que certaines choses sont infaisables seul).</p>
<p>Cela ne veut pas dire que vous aurez tout le temps quelqu'un avec vous bien sûr et donc plusieurs fois vous vous retrouverez seul sur des étapes plutôt balèzes mais c'est surmontable.</p>
<p>L'image d'en tête est la maison dans son état initial.</p>
<p>Là voilà de dos:</p>
<p><img src="http://blog.inateno.com/content/images/2018/04/2---maison-dos.jpg" alt="🏠 1. Une maison faite maison"></p>
<p>Lors de la visite, il faut faire en sorte de prendre en compte le max de choses, bien analyser la maison et ce qui est déjà présent.</p>
<p>Le prix est à négocier bien entendu, mais cela dépendra du secteur où vous habitez. Par chez nous sur Toulouse ce genre de bien est vendu en une semaine, voir deux max. Donc il faut aller très vite et ça rend la décision plus difficile.</p>
<p>Regardez sur internet combien coûte chaque chose avant de faire des visites, comme une salle de bain (aka sdb) ou une cuisine, du carrelage, une chaudière etc...</p>
<p>De cette manière au moment de la visite vous saurez vite capable de mettre des chiffres par-ci par là vous évitant de faire une propositions trop foireuse.</p>
<p><img src="http://blog.inateno.com/content/images/2018/04/6---cl-s-1.jpg" alt="🏠 1. Une maison faite maison"></p>
<p>(yaaaaay les clééés)</p>
<p>Après vous être décidé vous devez chiffrer combien vous allez dépenser en plus &quot;réel&quot; (en fonction de vos revenus et du temps que vous souhaitez y consacrer vous pourrez vous permettre d'être plus ou moins précis ou de diluer dans le temps. Moi je me suis concentré sur le chiffrage de &quot;l'essentiel pour vivre&quot; au début, le reste je le ferai quand je peux tranquille).</p>
<p>Pour chiffrer il faut aussi savoir ce que l'on va faire, il faut donc définir des plans !</p>
<p>De cette manière vous verrez vite ce que vous allez modifier ou ajouter.</p>
<p>Et j'en ai fait un paquet à ce moment-là !</p>
<p>Ce que l'on savait, c'est que l'on voulait agrandir.</p>
<p>Après divers devis on s'est rendu compte que l'on ne pourrait pas faire beaucoup de manière &quot;classique&quot; (~20m²).</p>
<p>Puis, j'ai eu <em>&quot;l'idée&quot;</em> (je l'ai pas inventée soit, mais ça m'est venu à l'esprit) de le faire avec des containers maritimes, ce qui nous a permis de passer a 90m² de plus en faisant des dépenses <em>&quot;sur la durée&quot;</em> (c'est plus cher au total, mais on peut faire petit à petit et le faire nous-mêmes, double bonus).</p>
<p>Si la partie &quot;budget&quot; (et crédits) vous intéresse ne vous en faites pas, j'ai prévu un article dédié, il y a tellement de choses à dire à ce sujet que ce serait bête de faire des raccourcis.</p>
<p>Revenons sur les plans. On savait que l'on allait utiliser des containers maritimes donc on connaissait les dimensions, cela facilite les choses, car il faut les emboîter de manière intelligente tout en respectant le PLU.</p>
<p>J'en ai tellement fait que j'ai même fait une &quot;maquette&quot; en Lego.</p>
<p>Faut dire, à force de faire des plans on ne se rend pas vraiment compte de si c'est bien ou pas, donc j'ai essayé de voir ce que cela donnait avec des petits bonhommes lol.</p>
<p><img src="http://blog.inateno.com/content/images/2018/04/3---plan-lego.jpg" alt="🏠 1. Une maison faite maison"></p>
<p>Ensuite, j'ai fait des plans 3D, j'ai galéré avec divers logiciels pour finalement trouver <strong>Sweet Home 3D</strong> qui est gratuit, open source et super bien ! (j'ai contaminé pas mal de gens qui étaient novices comme moi à ce niveau :D ).</p>
<p>Après donc beaaaaucoup de versions, j'arrive à ce résultat.</p>
<p><img src="http://blog.inateno.com/content/images/2018/04/plans-global-crop.jpg" alt="🏠 1. Une maison faite maison"></p>
<p>Vous noterez que je n'ai pas spécifié les fenêtres sur mon plan (cela ne m'étai pas vraiment utile).</p>
<p>Une grande cuisine (tout à gauche), une salle de bain correcte au centre (pour des raisons techniques, je ne me sentais pas de déplacer toutes les évacuations et j'avais raison !) un WC dédié, 3 chambres et un grand garage, le garage existant sera converti en habitation (on verra bien quoi ^^).</p>
<p>Comme on a fait un crédit à taux zéro il nous fallait un devis global, j'ai donc fait appel à un charpentier (une connaissance indirecte, c'est préférable je trouve, car on ne sait pas sur qui on va tomber sinon...) en lui expliquant ce que l'on voulait.</p>
<p>Entre temps on s'était décidé pour les containers (le devis de base nous a montré à quel point les choses sont &quot;cher&quot;) donc je lui ai expliqué mais j'ai gardé le devis pour simplifier le dossier auprès de la banque (croyez-moi c'est mieux, mais on en reparlera dans l'article dédié).</p>
<p>Afin de valider certains trucs technique au niveau des container je me renseigne quand même auprès de mon charpentier sur la réalisation d'une isolation toiture plate, je savais que j'allais utiliser de l'epdm (un truc pas trop connu est super par rapport au goudron) mais il me manquait les connaissances du genre <em>&quot;acrotère&quot;</em> et taille d'isolant idéal.</p>
<p><img src="http://blog.inateno.com/content/images/2018/04/4---plan-acrotere.jpg" alt="🏠 1. Une maison faite maison"></p>
<p>PS : notez la petite coquille, j'ai mis 20mm. En vrai c'est 20cm mais on parle en mm dans la construction donc j'aurais dû mettre 200mm !</p>
<p>Le plan est good, on valide avec une architecte qui s'occupe du permis de construire et nous on peut attaquer les travaux une fois les clés en main !</p>
<p>Concernant l'architecte. Déposer un permis de construire c'est vraiment quelque chose de lourd comparé à une déclaration préalable, j'ai préféré le faire faire surtout qu'elle a pris le temps de voir avec l'architecte de la ville afin de tout valider à l'oral avant de faire le dossier.</p>
<p>Ce serait dommage de perdre 3 mois car on s'est planté sur une bêtise et c'est toujours bien de recevoir l'avis d'un(e) pro sur notre projet.</p>
<p>La suite ? On y parlera de destruction, le truc que tout le monde préfère ! (bizarrement 😜)</p>
<p>Voilà un petit teaser!</p>
<p><img src="http://blog.inateno.com/content/images/2018/04/5---destruction.jpg" alt="🏠 1. Une maison faite maison"></p>
</div>]]></content:encoded></item><item><title><![CDATA[🎆 Inauguration !]]></title><description><![CDATA[<div class="kg-card-markdown"><p><canvas width="800" height="400" style="width:100%;background:black;" id="canvas"></canvas></p>
<script type="text/javascript" src="https://dreamirl.com/inateno_stuff/fireworks.js"></script>
<p>Mais, mais ?? Qu'est-ce donc que cet endroit ?</p>
<p>Après un bon moment à en parler (plus ou moins) à hésiter (beaucoup) ça y est, je me lance 😆</p>
<p>Sur ce &quot;blog&quot; (payes ton mot internet 2.0 lol) je parlerai d'un peu de tout (cf la page &quot;à propos&</p></div>]]></description><link>http://blog.inateno.com/2018/06/09/inauguration/</link><guid isPermaLink="false">5ab3c8c4bb317134adb3e5d9</guid><category><![CDATA[Dev]]></category><category><![CDATA[vroum]]></category><category><![CDATA[house]]></category><category><![CDATA[diy]]></category><dc:creator><![CDATA[Inateno]]></dc:creator><pubDate>Sat, 09 Jun 2018 18:00:00 GMT</pubDate><media:content url="http://blog.inateno.com/content/images/2018/04/yolo-1.png" medium="image"/><content:encoded><![CDATA[<div class="kg-card-markdown"><img src="http://blog.inateno.com/content/images/2018/04/yolo-1.png" alt="🎆 Inauguration !"><p><canvas width="800" height="400" style="width:100%;background:black;" id="canvas"></canvas></p>
<script type="text/javascript" src="https://dreamirl.com/inateno_stuff/fireworks.js"></script>
<p>Mais, mais ?? Qu'est-ce donc que cet endroit ?</p>
<p>Après un bon moment à en parler (plus ou moins) à hésiter (beaucoup) ça y est, je me lance 😆</p>
<p>Sur ce &quot;blog&quot; (payes ton mot internet 2.0 lol) je parlerai d'un peu de tout (cf la page &quot;à propos&quot;).</p>
<p>Je vais faire en sorte d'être régulier, l'idéal serait au minimum 1 article par semaine histoire de commencer avec un objectif réalisable.</p>
<p>On parle de quoi ici ? De pleins de choses.</p>
<ul>
<li>🏠 tout d'abord de la maison que je rénove depuis 1 an</li>
<li>🎮 du développement informatique (surtout de jeux)</li>
<li>🚙 de voitures (souvent mécanique 🔧)</li>
<li>d'autres trucs divers genre cosplay 🎭 ou diy 🔨</li>
</ul>
<p>Varié vous avez dit ? A peine.</p>
<p>Ce qui est sûr c'est que ce sera souvent <em>stupide</em> et donc, <strong>vital</strong> !<br>
Si tu ne veux rien rater alors abonnes toi !</p>
<p>D'ici là, t'as qu'à tester <a href="https://dreamirl.com/protos/snake/">ce jeu super débile</a>  ou quelques-uns de mes jeux sur mon site <a href="http://inateno.com">inateno.com</a> ;)</p>
</div>]]></content:encoded></item></channel></rss>