Une introduction à kubernetes et docker pour apprendre facilement à déployer sur le cloud

Kubernetes, comment bien commencer ?

Introduction a Kubernetes, suivez ce tuto pour partir sur des bases solides.

Introduction a Kubernetes

<h1 id="d438" class="pw-post-title yr fk ys bv he yt yu yv yw yx yy yz za zb zc zd ze zf zg zh zi zj zk zl zm zn by" data-selectable-paragraph="">Composants Compos&eacute;s, La nouvelle M&eacute;thode d&rsquo;&eacute;crire des Composants React :</h1>
<p><span>Il y a peu, j'ai d&eacute;couvert les composants compos&eacute;s en typescript et je ne peux plus m&rsquo;en passer. Souvent peu r&eacute;f&eacute;renc&eacute;, peu connu du vaste monde des d&eacute;veloppeurs, je vous propose une petite introduction au monde des &ldquo;compos&eacute;s&rdquo;.</span></p>
<h2 id="b567" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by">Qu&rsquo;est-ce que c&rsquo;est ?</h2>
<p><span>Un composant compos&eacute; se trouve sous cette forme :</span></p>
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent&gt;
  &lt;MyComponent.Header&gt; Un Header &lt;/MyComponent.Header&gt;
  &lt;MyComponent.Body&gt; Un Body &lt;/MyComponent.Body&gt;
  &lt;MyComponent.Footer&gt; Un Footer &lt;/MyComponent.Footer&gt;
 &lt;/MyComponent&gt;
)</code></pre>
<ul>
<li id="4ac3" class="ack acl ys ts b zq zr zt zu zw acm aba acn abe aco abi acp acq acr ea by" data-selectable-paragraph=""><strong class="ts he"><em class="acs">MyComponent:</em></strong><span>&nbsp;</span>est le composant React parent de tous les compos&eacute;s</li>
<li id="96e6" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph=""><strong class="ts he"><em class="acs">Header, Body, Footer :</em></strong><span>&nbsp;</span>sont les composants compos&eacute;s du parent, ils ne peuvent pas &ecirc;tre utilis&eacute;s dans l&rsquo;application en dehors du parent.</li>
</ul>
<h2 id="8f6b" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by">Le parent : MyComponent :</h2>
<p><span>Le parent des compos&eacute;s s&rsquo;&eacute;crit de la mani&egrave;re suivante :</span></p>
<pre class="language-javascript"><code>import React from 'react'
import { MyComponentContextProvider } from './card-context'
import Body from './body'
 ...
interface MyComponentCompounds {
 Body: Body
 ...
}
interface MyComponentType {
 props: ...
 children: React.ReactNode
}
const MyComponent React.FC&lt;MyComponentType&gt; &amp; MyComponentCompounds = ({props,children}) =&gt; {
 const context = useMemo(() =&gt; ({ ... }), [...])
 return (
   &lt;MyComponentContextProvider value={context}&gt;
    {children}
   &lt;/MyComponentContextProvider&gt;
 )
}
MyComponent.Body = Body
 ...
export default MyComponent</code></pre>
<p id="5930" class="pw-post-body-paragraph zo zp ys ts b zq zr vc zs zt zu vf zv zw zx zy zz aba abb abc abd abe abf abg abh abi qo by" data-selectable-paragraph="">Il est l&rsquo;&eacute;quivalent d&rsquo;un contenaire. On peut en profiter pour lui donner le style des contours ainsi que le style de placement associ&eacute; au composant global. Le parent peut avoir un Context-Provider qui permettra aux enfants de r&eacute;utiliser certaines valeurs du parent &agrave; l&rsquo;aide des hooks de react.</p>
<p id="92af" class="pw-post-body-paragraph zo zp ys ts b zq zr vc zs zt zu vf zv zw zx zy zz aba abb abc abd abe abf abg abh abi qo by" data-selectable-paragraph="">Exemple de code pour la cr&eacute;ation du provider et du contexte hooks:</p>
<pre class="language-javascript"><code>import { createContext, useContext } from 'react'
type myComponentContextType = {
 value?: ...
}
const MyComponentContext = createContext&lt;myComponentContextType&gt;({})
export const MyComponentContextProvider = MyComponentContext.Provider
export function useMyComponentContext() {
 const context = useContext(MyComponentContext)
 if (!context) {
  throw new Error('Blablabla erreur blablabla')
 }
 return context
}</code></pre>
<h1 id="b62c" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by" data-selectable-paragraph="">Les compos&eacute;s : Body</h1>
<p><span>Le composant compos&eacute; aura une structure semblable &agrave; un composant React normale, mais il doit imp&eacute;rativement rester petit, comme le d&eacute;crit l&rsquo;exemple suivant :</span></p>
<pre class="language-javascript"><code>import React from 'react'
interface BodyPropsType {
 props: ...
}
const Body = ({ props }: BodyPropsType) =&gt; {
 const {value} = useMyComponentContext()
 return (
  &lt;div&gt;
   {...}
  &lt;/div&gt;
 )
}
export default Body</code></pre>
<p id="5675" class="pw-post-body-paragraph zo zp ys ts b zq zr vc zs zt zu vf zv zw zx zy zz aba abb abc abd abe abf abg abh abi qo by" data-selectable-paragraph="">Il sera capable de r&eacute;utiliser des valeurs stock&eacute;es dans le contexte. Il g&egrave;re son propre style et ses propres fonctionnalit&eacute;s.</p>
<p id="4411" class="pw-post-body-paragraph zo zp ys ts b zq zr vc zs zt zu vf zv zw zx zy zz aba abb abc abd abe abf abg abh abi qo by" data-selectable-paragraph="">Si besoin, on peut chainer les composants compos&eacute;s comme dans cet exemple :</p>
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent&gt;
  &lt;MyComponent.Header&gt; Un Header &lt;/MyComponent.Header&gt;
  &lt;MyComponent.Body&gt; 
   &lt;MyComponent.Body.Title&gt;Un Titre &lt;/MyComponent.Body.Title&gt;
   &lt;MyComponent.Body.SubTitle&gt;Un ...&lt;/MyComponent.Body.SubTitle&gt;
  &lt;/MyComponent.Body&gt;
  &lt;MyComponent.Footer&gt; Un Footer &lt;/MyComponent.Footer&gt;
 &lt;/MyComponent&gt;
)</code></pre>
<p><strong class="ts he">Title</strong><span>&nbsp;et&nbsp;</span><strong class="ts he">Subtitle</strong><span>&nbsp;sont des compos&eacute;s du composant&nbsp;</span><strong class="ts he">Body</strong><span>&nbsp;qui lui-m&ecirc;me est un compos&eacute; du composant&nbsp;</span><strong class="ts he">MyComponent.</strong></p>
<h1 id="827a" class="abj abk ys bv kx abl abm abn sx abo abp abq tc td abr te th ti abs tj tm tn abt to tr abu by" data-selectable-paragraph="">Les Avantages Des Compos&eacute;s en Type-Script :</h1>
<p><span>Les avantages des composants compos&eacute;s sont les suivants :</span></p>
<ul>
<li id="5260" class="ack acl ys ts b zq zr zt zu zw acm aba acn abe aco abi acp acq acr ea by" data-selectable-paragraph="">Avec TypeScript l&rsquo;auto-compl&eacute;tion ! Cela peut paraitre tout b&ecirc;te, mais lors de l&rsquo;int&eacute;gration de composants &ccedil;a donne beaucoup de clart&eacute; de savoir ce qui peut &ecirc;tre fait par notre composant.</li>
<li id="fbcf" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">La clart&eacute; dans la gestion des props: chaque Compos&eacute; g&egrave;re ses propres props, cela &eacute;vite au parent de porter toutes les props et &eacute;vite le chainage de props</li>
</ul>
<pre class="language-javascript"><code>const Container = () =&gt; (
 &lt;MyComponent {...propsComponent}&gt;
  &lt;MyComponent.Body {...propsBody}&gt; Un Body &lt;/MyComponent.Body&gt;
 &lt;/MyComponent&gt;
)
VS
const Container = () =&gt; (
 &lt;MyComponent propsComponent={propsComponent} propsBody={propsBody} messageBody='Un Body' /&gt;
)</code></pre>
<ul>
<li><span>Les performances : gros sujets des d&eacute;veloppeurs front, la performance de leur code et notamment la chasse au re-render inutiles. Isoler certaines props &agrave; leur compos&eacute; au lieu de passer par leur parent, &eacute;vite les re-render intempestifs.</span><br /><span>En d&rsquo;autres termes, Si Body a besoin de se re-render pour un changement d&rsquo;&eacute;tat ou de props quelconque, Header n&rsquo;en a peut-&ecirc;tre pas besoin.<br /><em class="acs">Je vous conseille d&rsquo;utiliser :</em>&nbsp;<a class="ay nr" href="https://github.com/welldone-software/why-did-you-render" rel="noopener ugc nofollow" target="_blank"><em class="acs">why-did-you-render</em></a>&nbsp;<em class="acs">pour comprendre le re-render de certains composants.</em><br /></span></li>
<li id="8495" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">La scalabilit&eacute;: deuxi&egrave;me gros sujet connu par tous:<br />comment faire du code standard r&eacute;utilisable ?<br />Le secret<span>&nbsp;</span><strong class="ts he">les compos&eacute;s</strong>.<br />En effet plus notre code est d&eacute;coup&eacute; en petite partie,<br />plus notre code sera standard et &ldquo;propre&rdquo;,<br />plus il sera facile de le r&eacute;int&eacute;grer dans des composants et ainsi &eacute;viter de coder deux fois la m&ecirc;me choses.</li>
<li id="0f8e" class="ack acl ys ts b zq act zt acu zw acv aba acw abe acx abi acp acq acr ea by" data-selectable-paragraph="">Le petit Bonus: la maintenabilit&eacute; ! A qui &ccedil;a n&rsquo;est pas arriv&eacute; de devoir retoucher &agrave; un composant React de 300 lignes incompr&eacute;hensible ? Lorsque l&rsquo;on code, il faut bien garder en t&ecirc;te que notre code &agrave; une date de p&eacute;remption. Tout ce qui &eacute;crit aujourd&rsquo;hui et qui est consid&eacute;r&eacute; comme acceptable ne le sera peut &ecirc;tre plus dans 1 an. Construire des composants &ldquo;l&eacute;ger&rdquo;, &ldquo;petits&rdquo;, c&rsquo;est construire des composants claires et maintenables pour l&rsquo;avenir!<span></span></li>
</ul>
<p><span>[</span><em class="acs">keep it simple, keep it smart]</em></p>

Un tutoriel qui apprend à écrire des composants React, réutilisable, flexible et facile à prendre en main.

Comment écrire des Composants Flexible et Réutilisables en React

<h1>Comment bien d&eacute;buter avec Git&nbsp;</h1>
<p>Voici un petit Tuto pour comprendre rapidement les commandes essentielles de Git.&nbsp;<br />Git est un syst&egrave;me de contr&ocirc;le partag&eacute; open source con&ccedil;u pour g&eacute;rer des petits aux tr&egrave;s grands projets, avec rapidit&eacute; et efficacit&eacute;s.<br />Autrement dit, si vous voulez partager votre projet avec d'autres d&eacute;veloppeurs, c'est l'outil le plus adapt&eacute;.</p>
<h2>Les commandes de bases :</h2>
<h3>Initialisation</h3>
<p>Pour initialiser git sur votre projet, vous devez taper :</p>
<pre class="language-undefined"><code>git init</code></pre>
<p>Permet d'initialiser git et cr&eacute;er un dossier vide.</p>
<h3>En cours de D&eacute;veloppement</h3>
<p>Une fois que vous avez ajout&eacute; des modifications &agrave; votre dossier ou projet. Vous pouvez lister toutes les modifications en cours &agrave; l'aide de :</p>
<pre class="language-undefined"><code>git status</code></pre>
<p>Pour sauvegarder <strong>TOUT&nbsp;</strong>les changements en cours (la commande la plus courante) :</p>
<pre class="language-undefined"><code>git add .</code></pre>
<p>Pour commit les changements, sauvegarder et lui ajouter un commit message :</p>
<pre class="language-undefined"><code>git commit -m "mon message de commit"</code></pre>
<p>et enfin pour ajouter ce commit au remote repository:</p>
<pre class="language-undefined"><code>git push</code></pre>
<p>&agrave; noter que si vous travaillez sur une locale branch et qu'elle n'est pas reli&eacute; &agrave; une branch sur le remote repository, il vous sera surement demand&eacute; de :</p>
<pre class="language-undefined"><code> git push --set-upstream origin local-branch</code></pre>
<p>En effet, afin que la branch sur laquelle vous travaillez soit partag&eacute; avec le reste de votre &eacute;quipe de d&eacute;veloppeurs, vous devez la mettre &agrave; disposition du remote repository.</p>
<h3>Branching :</h3>
<p>Avant de vous fournir les commandes git qui permettent de travailler avec des branches en parall&egrave;les, parlons un peu de ce qu'est le "branching".&nbsp;La cr&eacute;ation de branches consiste &agrave; cr&eacute;er des copies du projet en cours pour travailler sur des versions en parall&egrave;les, en conservant l'original. En d'autres termes, travailler sur plusieurs choses en parall&egrave;le sans pour autant perdre le travail original.<br /><br />Pour cr&eacute;er une nouvelle branche :</p>
<pre class="language-undefined"><code>git checkout -b ma-nouvelle-branch</code></pre>
<p>voil&agrave; une nouvelle branch locale.<br />Pour changer de branch (il faut que la branch existe) :</p>
<pre class="language-undefined"><code>git checkout existing-branch</code></pre>
<p>Pour revenir rapidement sur la dernier branch en cours :</p>
<pre class="language-undefined"><code>git checkout -</code></pre>
<p>Pour lister toutes les branch existantes:</p>
<pre class="language-undefined"><code>git branch -l</code></pre>
<p></p>
<p>Et enfin pour supprimer une branch locale :</p>
<pre class="language-undefined"><code>git branch -D branch-a-supprimer</code></pre>
<p></p>
<p>En conclusion, j'esp&egrave;re que cette liste de commande git vous permettra d'appr&eacute;hender plus facilement vos d&eacute;buts dans le d&eacute;veloppement. &Agrave; venir, une explication compl&egrave;te sur Git et les diff&eacute;rentes pratiques du d&eacute;veloppement &agrave; plusieurs.</p>

Comment bien débuter avec git ? Les 10 meilleurs commandes à suivre.

Un article pour bien débuter avec git

Débuter avec Git

<p><span>J'ai toujours eu un peu de mal avec cette convention en Js,&nbsp; alors voil&agrave; une exhaustivit&eacute; d'example afin de mieux comprendre comment &ccedil;a marche:</span></p>
<pre class="language-javascript"><code>const myThings = {
  teddyBear: { color: 'brown', name: 'tedd' },
  backpack: { capacity: '20L', make: 'Thule' },
  julien: { number: 2 },
};</code></pre>
<p><span></span></p>
<p><span>si je veux avoir acc&egrave;s au nom du teddy bear et renommer la variable en m&ecirc;me temps je dois:</span></p>
<pre class="language-javascript"><code>const {
  teddyBear: { name: zob },
} = myThings;

console.log(zob); // r&eacute;sultat tedd</code></pre>
<p></p>
<p>Pour r&eacute;sumer ici on r&eacute;cup&egrave;re le nom du teddybear lui m&ecirc;me &agrave; l'int&eacute;rieur de myThings et la variable sera renomm&eacute; zob.</p>
<p>Mais on peut aussi lui assigner une valeur par d&eacute;fauts:</p>
<pre class="language-javascript"><code>const myThings = {
  teddyBear: { color: 'brown', name: undefined | null },
  backpack: { capacity: '20L', make: 'Thule' },
  julien: { number: 2 },
};

const {
  teddyBear: { name = 'petit chou' },
} = myThings;

console.log(name); // r&eacute;sultat petit chou</code></pre>
<p></p>
<p>Pour r&eacute;sumer ici on r&eacute;cup&egrave;re le nom du teddybear lui m&ecirc;me &agrave; l'int&eacute;rieur de myThings et si le nom est null on lui attribut la valeur par d&eacute;faut petit chou.</p>
<p>Pour aller plus loin les deux en m&ecirc;me temps:</p>
<pre class="language-javascript"><code>const myThings = {
  teddyBear: { color: 'brown', name: 'tedd' },
  backpack: { capacity: '20L', make: null },
  julien: { number: 2 },
};

const {
  teddyBear: { name: zob = 'petit chou' },
  backpack: { make: zobi = 'petit sac' },
} = myThings;

console.log(zob, zobi); // r&eacute;sultat tedd &amp; petit sac</code></pre>

destructurer en Javacript, Typescript, simplement avec des exemples complet.

Comment destructurer en Javacript, Typescript

Des exemples simples pour déstructurer proprement en java-script.

Comment Destructurer en Javacript Typescript

<p>Welcome to ButterCMS! This an example blog post written using Butter.</p>
<h3>Blog Engine Demo</h3>
<p>Here's a helpful walkthrough of our Blog Engine solution.</p>
<p>


<div style="max-width:800px; height: auto; margin: auto;">

<div style="position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; margin:auto;">
<iframe style="position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 9999;" src="https://www.youtube.com/embed/0dJbHy2XqoY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
<br /><a href="https://buttercms.com/demo/blog-engine-why-our-blog-engine/">https://buttercms.com/demo/blog-engine-why-our-blog-engine/</a></p>
<p></p>
<h3>What's happening here?</h3>
<p>If you're viewing this post from your website or command line, you've successfully made a request to&nbsp;the <a href="https://buttercms.com/docs/api">Butter API</a>. If you haven't already, make sure you have our <a href="https://buttercms.com/docs/">development guides</a> pulled up for step-by-step instructions on setting up Butter.</p>
<h3>How does&nbsp;editing work?</h3>
<p>Butter's WYSIWYG editor supports standard text formatting including headings, links, quotes, code, text alignment, and more. You can upload, crop, and resize images which are automatically hosted and delivered through a CDN (see below). You can also edit HTML directly when needed.</p>
<figure class="image"><img src="https://d2wzhk7xhrnk1x.cloudfront.net/rgPM9aHoSSKnjk44TQlD_butter-blog-post.jpg" alt="Delivered to you via CDN" />
<figcaption>Delivered to you via CDN</figcaption>
</figure>
<h3>Can I use Butter as a full CMS for&nbsp;things other than a&nbsp;blog?</h3>
<p>Yes. Butter can be used as a full CMS for managing dynamic content and creating pages across your entire website or app. Check out our <a href="https://buttercms.com/docs/">development guides</a> for step-by-step tutorials on setting this up.</p>

This is our example blog posts SEO optimized meta description.

Example Post SEO Optimized Title

This is an example blog post. Pretty neat huh?

All Blog Posts

Introduction a Kubernetes

Comment écrire des Composants Flexible et Réutilisables en React

Débuter avec Git

Comment Destructurer en Javacript Typescript

Example Post