Jekyll2023-05-24T19:52:58+02:00/blog/feed.xmlHarmonyWelcome on Harmony, Juliette's blog! Learn a lot about coding cooking thinking travelling and more!2023-05-24T19:52:58+02:002023-05-24T19:52:58+02:00/blog/2023/05/24/2023-02-23-book-review-how-to-win-friends-ad-influence-people<p>Recently I read “How to win friends and influence people” by Dale Carnegie. This book answers the need of many people: What do adults really want to study? Is it mathematics, is it psychology? None of these. After health topics, it is to learn to develop skills in human relationships, in an easy way with examples and concrete action. And that is exactly what and how this book is teaching you.</p>
<p>This book gives you 6 ways to make people like you, 12 ways to win people to your way of thinking, and 9 ways to change people without arousing resentment. All these ways are provided with examples of stories from his students, people he knew or his own experience. With the examples, the content sticks very well in your head.</p>
<p>What I found great is that, although it is really applicable to sales in general, I found and Mr Carnegie said it by himself, these tricks that he is giving are, first, not magical, as they won’t work 100% of the time, but if you make them work maybe 10% of the time, you will be 10% managing better your relationships. Also it requires a genuine mindset and a true interest, it requires an effort and it will not work magically.</p>
<p>I want to highlight each of these ways with a punchline or a good example. So here we go.</p>
<h1 id="fundamental-techniques-in-handling-people">Fundamental techniques in handling people</h1>
<h2 id="1-dont-criticize-condemn-or-complain">1 Don’t criticize, condemn or complain.</h2>
<p>“When dealing with people, let us remember we are not deaing with creatures of logic. We are dealing with creatures of emotionbristling by prejudices and motivated by pride and vanity.” “Human nature in action, wrongdoers, blaming everybody but themselves.” “A great man shows his greatness by the way he treats little men” - Carlyle</p>
<h2 id="2-give-honest-and-sincere-appreciation">2 Give honest and sincere appreciation.</h2>
<p>“There is only one way to get anybody to do anything. It is by making the other person want to do it.” “The deepest urge in human nature is the feeling of being important.” A way to be appreciated and deal with people is to then show your appreciation of the person, not by flattery, but by a sincere and honest appreciation. Flattery is cheap praise, and will be perceived as such.</p>
<h2 id="3-arouse-in-the-other-person-an-eager-want">3 Arouse in the other person an eager want.</h2>
<p>When you go fishing, you don’t put what you like (like chocolate) on the hook. You put worm, even if you don’t like it, because that’s what the fish enjoy to eat. So, let’s go fishing friends and professional relationships! “The only way on Earth to influence other people is to talk to people about what they want, and show them how to get it.” “Self-expression is the dominant necessity of human nature.”</p>
<h1 id="6-ways-to-make-people-like-you">6 ways to make people like you</h1>
<h2 id="1-become-genuinely-interested-in-other-people">1 Become genuinely interested in other people</h2>
<p>“You can make more friends in two months by becoming genuinely interested in other people than you can in two years by trying to get people interested by you.”
“We are interested in others when they are interested in us.”</p>
<h2 id="2-smile">2 Smile</h2>
<p>If you see a dog happy to see you, or a smiling baby, it fills you with happinness, you cannot resist, smiling is contagious.</p>
<h2 id="3-remember-that-a-persons-name-is-to-that-person-the-sweetest-and-most-important-sound-in-any-language">3 Remember that a person’s name is to that person the sweetest and most important sound in any language.</h2>
<p>Good things to do for this one is to learn how to pronounce well the name of a foreign person, and in general to remember people’s names from the first time you meet. We should not make fun of the pronunciation, or the unknown sounds. It is impolite and shows disrespect to the person. Just not trying to pronounce the name correctly is disrespectful.</p>
<h2 id="4-be-a-good-listener-encourage-others-to-talk-about-themselves">4 Be a good listener, encourage others to talk about themselves.</h2>
<p>We all know this one person, once you ask him/her a question, he/she is just unstoppable talking, and he/she never asks you in return about something that interests you. All that the person want is an interested listener, so that he or she can expand on what he/she did, and satisfies his or her ego. But quite often the person in front of you enjoy that you are interested. To be a good conversationalist, be a good listener.</p>
<h2 id="5-talk-in-terms-of-the-other-persons-interests">5 Talk in terms of the other person’s interests.</h2>
<p>A good way to interest people is to talk about themselves. A royal road to a person’s heart is to talk about things he or she treasures most.</p>
<h2 id="6-make-the-other-person-feel-important---and-do-it-sincerely">6 Make the other person feel important - and do it sincerely.</h2>
<p>Talk to people about themselves and they will listen for hours.</p>
<h1 id="12-ways-to-win-people-to-your-way-of-thinking">12 ways to win people to your way of thinking</h1>
<h2 id="1-the-only-way-to-get-the-best-of-an-argument-is-to-avoid-it">1 The only way to get the best of an argument is to avoid it.</h2>
<h2 id="2-show-respect-for-the-other-persons-opinions-never-say--youre-wrong">2 Show respect for the other person’s opinions. Never say “ you’re wrong”.</h2>
<p>Benjamin Franklin as a child was an already very smart and opiniated person. After someone complains about his behavior, he made it a rule to forbear all direct contradiction to the sentiment of others, and all positive assertion of his own. He forbade himself the use of words that import a fixed opinion like “certainly”, “undoubtedly”, and adopted, instead of them, “I conceive”, “I apprehend”, “It so appears to me at present”. Then his relationships with others greatly improved. Nothing good is accomplished and a lot of damage can be done if you tell a personstraight out tgat he or she is wrong.</p>
<h2 id="3-if-youre-wrong-admit-it-quickly-and-emphatically">3 If you’re wrong, admit it quickly and emphatically.</h2>
<h2 id="4-begin-in-a-friendly-way">4 Begin in a friendly way.</h2>
<p>Fable about the sun and the wind. The wind and the sun discuss together, and bet which one of them can manage to make a guy walking down there on Earth to remove his/her jacket. The wind starts by blowing on the person, then harder and harder, but the person just grap and wrap him/her-self even more in the jacket. Then the wind stops trying, the sun gently appears from the back of a cloud, the person feels warmer and removes the jacket.
The moral of this story is that you don’t win by forcing someone to do something (or it could work, but not in an optimized way), you win by gently convincing the person that it is a good thing to do ( as the person is warmer, it is in his/her interest to remove the jacket to feel less warm).</p>
<h2 id="5-get-the-person-person-saying-yes-yes-immediately">5 Get the person person saying “yes, yes” immediately</h2>
<p>“In talking with people, don’t begin by discussing the things on which you differ. Begin and continue by emphasizing the things on which you agree”.
The secret of Socrates: he was asking people with which his opponents could only agree with, saying “yes, yes” voluntarily.</p>
<h2 id="6-let-the-other-person-do-a-great-deal-of-the-talking">6 Let the other person do a great deal of the talking</h2>
<p>By encouraging the other person to do most of the talking, you show an interest in the other person, and thus make a good impression.</p>
<h2 id="7-let-the-person-feels-that-the-idea-is-his-or-hers">7 Let the person feels that the idea is his or hers.</h2>
<h2 id="8-try-honestly-to-see-things-from-the-other-persons-point-of-view">8 Try honestly to see things from the other person’s point of view.</h2>
<h2 id="9-be-sympathetic-with-the-other-persons-ideas-and-desires">9 Be sympathetic with the other person’s ideas and desires.</h2>
<p>A child wants to have piano lessons, but has very long fingernails, preventing her from playing correctly. The teacher didn’t threaten or refuse to teach to the child. The teacher explains to the child that her fingernails were a thing of beauty and it would be a sacrifice to cut them. The teacher sympathizes with the child, showing a great understanding and interest to what was important to the child. Then the child agree to ut her fingernails to play better the piano.</p>
<h2 id="10-appeal-to-the-nobler-motives">10 Appeal to the nobler motives</h2>
<h2 id="11-dramatize-your-ideas">11 Dramatize your ideas</h2>
<h2 id="12-when-nothing-before-works-throw-down-a-challenge">12 When nothing before works, throw down a challenge.</h2>
<p>“That is what every successful person loves: the game. The chance to prove his or her worth, to excel or to win. The chance for self-expression. That is what makes footraces or pie-eating contests. The desire to excel, the desire for a feeling of importance.</p>
<h1 id="be-a-leader---9-ways-to-change-people-without-arousing-resentment">BE A LEADER - 9 ways to change people without arousing resentment</h1>
<h2 id="1-begin-with-praise-and-honest-appreciation">1 Begin with praise and honest appreciation</h2>
<h2 id="2-call-attention-to-peoples-mistakes-indirectly">2 Call attention to people’s mistakes indirectly</h2>
<h2 id="3-talk-about-your-own-mistakes-before-criticizing-the-other-person">3 Talk about your own mistakes before criticizing the other person</h2>
<h2 id="4-ask-questions-instead-of-giving-direct-orders">4 Ask questions instead of giving direct orders</h2>
<h2 id="5-let-the-other-person-save-face">5 Let the other person save face</h2>
<h2 id="6-praise-the-slightest-and-every-improvement">6 Praise the slightest and every improvement.</h2>
<p>“Everybody likes to be praised, but when praise is specific, it comes across as sincere - not something that the other person may be saying just to make one feel good.” “Remember, we all crave appreciation and recognition, and will do almost anything to get it. But nobody wants insincerity.”</p>
<h2 id="7-give-the-other-person-a-fine-reputation-to-live-up-to">7 Give the other person a fine reputation to live up to.</h2>
<h2 id="8-use-encouragement-make-the-fault-seem-easy-to-correct">8 Use encouragement. Make the fault seem easy to correct.</h2>
<h2 id="9-make-the-other-person-happy-about-the-thing-you-suggest">9 Make the other person happy about the thing you suggest.</h2>How to save one hour of time in your day2023-04-14T16:10:00+02:002023-04-14T16:10:00+02:00/blog/2023/04/14/How-to-save-one-hour-of-time-in-your-day<p>I deleted the Instagram app from my phone!</p>
<p>Hope you enjoyed the tip.</p>
<p>For real, if you don’t think that you’re wasting so much time on social media, set up a timer on all your social media apps and you’ll see!
On average, I was spending 30 minutes on Instagram. I had a timer set up at around 25 or 30 minutes, but it was very easy to remove it in a few clicks in the settings. At least it was giving me a break in the scroll, which I found useful, otherwise you never stop scrolling thanks to the algorithm. But I also know people who are spending way too much time on Youtube, Twitter, TikTok (but younger folks), Instagram.</p>
<p>Your time is being eaten by the screen and monetized social media. For example, not such a long time ago, Instagram feed was showing only people that I follow. So it was limited to the people I follow, and easily escapable. But now, like tiktok, it shows me Reels targeted to my interest, and you just end up in a stupid loop swipping for the next video. I hate that. That’s why Instagram is no longer on my phone.</p>
<p>Hope you have the courage to do the same with your social media app. Always think before checking your phone: is there something I am really interested to check or see. If not, it is some passive behavior, where these apps bring so much content to you, that you eat for hours passively, and they even manage to sell you things in the process, along stealing your time….</p>I deleted the Instagram app from my phone!How to create a React application from scratch2023-03-15T15:10:00+01:002023-03-15T15:10:00+01:00/blog/2023/03/15/How-to-create-a-react-typescript-graphql-app-from-scratch<ol>
<li><strong>Create a repo in Github</strong>
Clone your repo to work from your computer and go inside this repo:</li>
</ol>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone git@github.com:my-project.gi
<span class="nb">cd </span>my-project
</code></pre></div></div>
<ol>
<li><strong>Create a react app with typescript (OLD)</strong> (files will be named in tsx and ts)</li>
</ol>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx create-react-app my-project-frontend <span class="nt">--template</span> typescript
<span class="nb">cd </span>my-project-frontend
</code></pre></div></div>
<p><strong>OOOR</strong><br /></p>
<p><strong>Create a react application with Vite (RECOMMENDED)</strong>
Why should you use Vite instead of Create-React-App? Two links to understand the current stand:
https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/</p>
<p>https://luketheweb.dev/blog/what-is-vite-and-why-should-you-use-it-instead-of-create-react-app</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm init vite@latest vite-project <span class="nt">--typescript</span> react
</code></pre></div></div>
<ol>
<li><strong>Install a react router</strong></li>
</ol>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">--save</span> react-router-dom
</code></pre></div></div>
<p>Now add your router in your app.tsx:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="dl">"</span><span class="s2">./App.css</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Route</span><span class="p">,</span> <span class="nx">Routes</span><span class="p">,</span> <span class="nx">BrowserRouter</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react-router-dom</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">Plans</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./components/Plans</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">Teams</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./components/Teams</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">NavBar</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./components/NavBar</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">h-screen w-full</span><span class="dl">"</span><span class="o">></span>
<span class="o"><</span><span class="nx">NavBar</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">BrowserRouter</span><span class="o">></span>
<span class="o"><</span><span class="nx">Routes</span><span class="o">></span>
<span class="o"><</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span> <span class="nx">element</span><span class="o">=</span><span class="p">{</span><span class="o"><</span><span class="nx">Plans</span> <span class="o">/></span><span class="p">}</span> <span class="sr">/</span><span class="err">>
</span> <span class="o"><</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="dl">"</span><span class="s2">teams</span><span class="dl">"</span> <span class="nx">element</span><span class="o">=</span><span class="p">{</span><span class="o"><</span><span class="nx">Teams</span> <span class="o">/></span><span class="p">}</span> <span class="sr">/</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/Routes</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/BrowserRouter</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
</code></pre></div></div>
<p>Then you can run and see your app on the localhost in the browser:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm start
</code></pre></div></div>
<ol>
<li><strong>Add Tailwind with postcss:</strong></li>
</ol>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">-D</span> tailwindcss postcss autoprefixer
npx tailwindcss init
</code></pre></div></div>
<p>Configure the postcss.config.cjs file:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kr">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">plugins</span><span class="p">:</span> <span class="p">{</span>
<span class="na">tailwindcss</span><span class="p">:</span> <span class="p">{},</span>
<span class="na">autoprefixer</span><span class="p">:</span> <span class="p">{},</span>
<span class="p">},</span>
<span class="p">};</span>
</code></pre></div></div>
<p>Configure it in the tailwind.config.js which was just created:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cm">/** @type {import('tailwindcss').Config} */</span>
<span class="kr">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">content</span><span class="p">:</span> <span class="p">[</span><span class="dl">"</span><span class="s2">./src/**/*.{html,js}</span><span class="dl">"</span><span class="p">],</span>
<span class="na">theme</span><span class="p">:</span> <span class="p">{</span>
<span class="na">extend</span><span class="p">:</span> <span class="p">{},</span>
<span class="p">},</span>
<span class="na">plugins</span><span class="p">:</span> <span class="p">[],</span>
<span class="p">};</span>
</code></pre></div></div>
<p>My config is:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">colors</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">"</span><span class="s2">tailwindcss/colors</span><span class="dl">"</span><span class="p">);</span>
<span class="kr">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">content</span><span class="p">:</span> <span class="p">[</span><span class="dl">"</span><span class="s2">./src/**/*.{jsx,tsx,ts,js}</span><span class="dl">"</span><span class="p">],</span>
<span class="na">theme</span><span class="p">:</span> <span class="p">{</span>
<span class="na">screens</span><span class="p">:</span> <span class="p">{</span>
<span class="na">sm</span><span class="p">:</span> <span class="dl">"</span><span class="s2">640px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">md</span><span class="p">:</span> <span class="dl">"</span><span class="s2">768px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">lg</span><span class="p">:</span> <span class="dl">"</span><span class="s2">1024px</span><span class="dl">"</span><span class="p">,</span>
<span class="na">xl</span><span class="p">:</span> <span class="dl">"</span><span class="s2">1280px</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">2xl</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">1536px</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="c1">// You can custom the colors</span>
<span class="na">colors</span><span class="p">:</span> <span class="p">{</span>
<span class="na">transparent</span><span class="p">:</span> <span class="dl">"</span><span class="s2">transparent</span><span class="dl">"</span><span class="p">,</span>
<span class="na">current</span><span class="p">:</span> <span class="dl">"</span><span class="s2">currentColor</span><span class="dl">"</span><span class="p">,</span>
<span class="na">black</span><span class="p">:</span> <span class="nx">colors</span><span class="p">.</span><span class="nx">black</span><span class="p">,</span>
<span class="na">white</span><span class="p">:</span> <span class="nx">colors</span><span class="p">.</span><span class="nx">white</span><span class="p">,</span>
<span class="na">gray</span><span class="p">:</span> <span class="nx">colors</span><span class="p">.</span><span class="nx">gray</span><span class="p">,</span>
<span class="c1">// etc</span>
<span class="na">yellow</span><span class="p">:</span> <span class="p">{</span>
<span class="mi">50</span><span class="p">:</span> <span class="dl">"</span><span class="s2">rgb(254 252 232)</span><span class="dl">"</span><span class="p">,</span>
<span class="mi">100</span><span class="p">:</span> <span class="dl">"</span><span class="s2">rgb(254 249 195)</span><span class="dl">"</span><span class="p">,</span>
<span class="c1">// etc</span>
<span class="p">},</span>
<span class="na">dark</span><span class="p">:</span> <span class="p">{</span>
<span class="mi">300</span><span class="p">:</span> <span class="dl">"</span><span class="s2">#XXXXXX</span><span class="dl">"</span><span class="p">,</span>
<span class="mi">600</span><span class="p">:</span> <span class="dl">"</span><span class="s2">#XXXXXX</span><span class="dl">"</span><span class="p">,</span>
<span class="mi">800</span><span class="p">:</span> <span class="dl">"</span><span class="s2">#XXXXXX</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="na">extend</span><span class="p">:</span> <span class="p">{</span>
<span class="c1">// you can extend the tailwind classes, or just add new ones like this:</span>
<span class="na">boxShadow</span><span class="p">:</span> <span class="p">{</span> <span class="na">yourname</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Xpx Xpx Xpx Xpx rgba(X, X, X, X)</span><span class="dl">"</span> <span class="p">},</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="c1">//need this plugin to customize checkboxes for example</span>
<span class="na">plugins</span><span class="p">:</span> <span class="p">[</span><span class="nx">require</span><span class="p">(</span><span class="dl">"</span><span class="s2">@tailwindcss/forms</span><span class="dl">"</span><span class="p">)],</span>
<span class="p">};</span>
</code></pre></div></div>
<p><strong>5. Add authentication system</strong>
If your organization/product is using azure/Microsoft to connect, check this page:
https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react
Another useful page: https://blog.logrocket.com/using-msal-react-authentication/
Start by installing the msal-react library and its peer dependencies:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> @azure/msal-browser @azure/msal-react @azure/msal-common
</code></pre></div></div>
<p>The msal library makes use of the context API, so make sure to wrap the app in the MsalProvider.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nx">MsalProvider</span> <span class="nx">instance</span><span class="o">=</span><span class="p">{</span><span class="nx">msalInstance</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">App</span> <span class="o">/></span>
<span class="o"><</span><span class="sr">/MsalProvider</span><span class="err">>
</span></code></pre></div></div>
<p><strong>6. Configure a .env page to run in local</strong></p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nv">VITE_STAGE</span><span class="o">=</span><span class="nb">local
</span><span class="nv">VITE_API_GATEWAY_URL</span><span class="o">=</span><span class="s2">"http://localhost:8001/gql"</span>
<span class="nv">VITE_REDIRECT_URI</span><span class="o">=</span><span class="s2">"http://localhost:3000"</span>
<span class="nv">VITE_API_GATEWAY_REST</span><span class="o">=</span><span class="s2">"http://localhost:8001/rest"</span>
<span class="nv">VITE_USE_MSAL</span><span class="o">=</span><span class="nb">true
</span><span class="nv">VITE_API_GATEWAY_MOCK_DATA</span><span class="o">=</span><span class="nb">false</span>
</code></pre></div></div>
<p><strong>7. Add tests</strong></p>
<p>The Vite template doesn’t include any test runner, we have to choose one. We decide to use Vitest as it is well develop to work easily with a Vite application. We will not use Jest, though Jest is currently the best up-to-date, with a large community, test runner for a React app (+ it is a native Vite test runner).</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">-D</span> vitest
</code></pre></div></div>
<p>Write the script for the tests in the package.json. The command vitest run “vitest watch” in dev, and “vitest run” in the CI. Specify the environment or it will not run correctly:</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="err">//</span><span class="w"> </span><span class="err">...</span><span class="w">
</span><span class="nl">"test"</span><span class="p">:</span><span class="w"> </span><span class="s2">"vitest watch --environment jsdom"</span><span class="w">
</span><span class="p">}</span><span class="err">,</span><span class="w">
</span></code></pre></div></div>
<p>Add the config to use jsdom in the Vite configuration file:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">vite</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">react</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@vitejs/plugin-react</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">// https://vitejs.dev/config/</span>
<span class="k">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
<span class="na">plugins</span><span class="p">:</span> <span class="p">[</span><span class="nx">react</span><span class="p">()],</span>
<span class="na">test</span><span class="p">:</span> <span class="p">{</span>
<span class="na">environment</span><span class="p">:</span> <span class="dl">"</span><span class="s2">jsdom</span><span class="dl">"</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Also, you need to have @testing-library/react installed to run your tests. Example:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">expect</span><span class="p">,</span> <span class="nx">test</span><span class="p">,</span> <span class="nx">describe</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">vitest</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@testing-library/react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">Avatar</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">../components/Avatar</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">AuthenticationContext</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">../contexts</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">cleanup</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@testing-library/react</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">describe</span><span class="p">(</span><span class="dl">"</span><span class="s2">when the avatar is displayed</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">basic test works</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">sqrt</span><span class="p">(</span><span class="mi">4</span><span class="p">)).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">should display the default unsplash picture if auth default provided</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">auth</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">accessToken</span><span class="p">:</span> <span class="dl">"</span><span class="s2">MockAPI</span><span class="dl">"</span><span class="p">,</span>
<span class="na">userId</span><span class="p">:</span> <span class="dl">"</span><span class="s2">123</span><span class="dl">"</span><span class="p">,</span>
<span class="na">email</span><span class="p">:</span> <span class="dl">"</span><span class="s2">evita.muzic@tourdefrance.com</span><span class="dl">"</span><span class="p">,</span>
<span class="na">jobTitle</span><span class="p">:</span> <span class="dl">"</span><span class="s2">admin</span><span class="dl">"</span><span class="p">,</span>
<span class="na">avatar</span><span class="p">:</span>
<span class="dl">"</span><span class="s2">https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80</span><span class="dl">"</span><span class="p">,</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="nx">setAuth</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="nx">render</span><span class="p">(</span>
<span class="o"><</span><span class="nx">AuthenticationContext</span><span class="p">.</span><span class="nx">Provider</span> <span class="nx">value</span><span class="o">=></span>
<span class="o"><</span><span class="nx">Avatar</span> <span class="o">/></span>
<span class="o"><</span><span class="sr">/AuthenticationContext.Provider</span><span class="err">>
</span> <span class="p">);</span>
<span class="kd">const</span> <span class="nx">img</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">img</span><span class="dl">"</span><span class="p">)</span> <span class="k">as</span> <span class="nx">HTMLImageElement</span><span class="p">;</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">img</span><span class="p">).</span><span class="nx">toBeTruthy</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">svg</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">"</span><span class="s2">svg</span><span class="dl">"</span><span class="p">)</span> <span class="k">as</span> <span class="nx">SVGSVGElement</span><span class="p">;</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">svg</span><span class="p">).</span><span class="nx">toBeFalsy</span><span class="p">();</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">img</span><span class="p">.</span><span class="nx">src</span><span class="p">).</span><span class="nx">toContain</span><span class="p">(</span><span class="dl">"</span><span class="s2">unsplash</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">cleanup</span><span class="p">();</span>
<span class="p">});</span>
</code></pre></div></div>
<p><strong>8. Add Apollo Client and GraphQL</strong></p>
<p>First install dependencies:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> @apollo/client graphql
</code></pre></div></div>
<p>Then initialize your client:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ApolloClient</span><span class="p">({</span>
<span class="na">uri</span><span class="p">:</span> <span class="dl">"</span><span class="s2">https://flyby-router-demo.herokuapp.com/</span><span class="dl">"</span><span class="p">,</span>
<span class="na">cache</span><span class="p">:</span> <span class="k">new</span> <span class="nx">InMemoryCache</span><span class="p">(),</span>
<span class="p">});</span>
</code></pre></div></div>
<p>uri specifies the URL of our GraphQL server.
cache is an instance of InMemoryCache, which Apollo Client uses to cache query results after fetching them.</p>
<p>Then wrap your App in the context provider ApolloProvider:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">root</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
<span class="o"><</span><span class="nx">ApolloProvider</span> <span class="nx">client</span><span class="o">=</span><span class="p">{</span><span class="nx">client</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="nx">App</span> <span class="o">/></span>
<span class="o"><</span><span class="sr">/ApolloProvider</span><span class="err">>
</span><span class="p">);</span>
</code></pre></div></div>
<p>I advise you to use <a href="https://the-guild.dev/graphql/codegen">GraphQL Code Generator</a>:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">-D</span> @graphql-codegen/cli
</code></pre></div></div>
<p>This tool generates code from your schema, especially typed queries and typed types that you can perfectly use in a Typescript application.
In your package.json, add a script to start the code generation:</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nl">"graphql:generate"</span><span class="p">:</span><span class="w"> </span><span class="s2">"graphql-codegen"</span><span class="w">
</span></code></pre></div></div>
<p>Then you config the codegen.yml file:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">overwrite</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">schema</span><span class="pi">:</span> <span class="s2">"</span><span class="s">./schemaTest.graphql"</span>
<span class="na">documents</span><span class="pi">:</span> <span class="s2">"</span><span class="s">src/**/!(*.d).{js,jsx,ts,tsx}"</span>
<span class="na">generates</span><span class="pi">:</span>
<span class="s">src/generated/graphql.tsx</span><span class="pi">:</span>
<span class="na">plugins</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">typescript</span>
<span class="pi">-</span> <span class="s">typescript-operations</span>
<span class="pi">-</span> <span class="s">typescript-react-apollo</span>
<span class="na">config</span><span class="pi">:</span>
<span class="na">withHooks</span><span class="pi">:</span> <span class="no">true</span>
<span class="na">withComponent</span><span class="pi">:</span> <span class="no">false</span>
<span class="na">withMutationFn</span><span class="pi">:</span> <span class="no">false</span>
</code></pre></div></div>
<p>Add useful predefined scalars to your schema:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install </span>graphql-scalars
</code></pre></div></div>
<p><strong>9. Handle a local state with Recoil</strong></p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm i recoil
</code></pre></div></div>
<p>Wrap your app inside RecoilRoot:</p>
<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span>
<span class="nx">RecoilRoot</span><span class="p">,</span>
<span class="nx">atom</span><span class="p">,</span>
<span class="nx">selector</span><span class="p">,</span>
<span class="nx">useRecoilState</span><span class="p">,</span>
<span class="nx">useRecoilValue</span><span class="p">,</span>
<span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">recoil</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">RecoilRoot</span><span class="o">></span>
<span class="o"><</span><span class="nx">CharacterCounter</span> <span class="o">/></span>
<span class="o"><</span><span class="sr">/RecoilRoot</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p><strong>X. 404 page</strong></p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
</code></pre></div></div>Create a repo in Github Clone your repo to work from your computer and go inside this repo:AI: How far can this go?2023-03-13T15:10:00+01:002023-03-13T15:10:00+01:00/blog/2023/03/13/AI-how-far-can-this-go<p>The scope of AI:</p>
<ul>
<li>Industry 4.0, which is the combination of IoT technologies and AI, the manufacturing processes are becoming smarter and more efficient, which in the end should boost productivity and revenue.</li>
<li>Digital art: Photos, images, videos, music, writing, can be generated from a sentence description and a few parameters in many cases. What is funny (not so much in the end), is that if you asked people ten years ago about how AI is gonna have an impact, first it’s gonna come for production site manual jobs (for example robots which are feeding components for PCB(printed circuit board) assembly), then it will come to low skilled jobs like catering jobs, then it will come to take high-qualified jobs like developers, engineering, research, and last it will reach the creative jobs. But exactly the opposite is happening, with creative jobs being the first jobs taken down by AI!</li>
</ul>The scope of AI:‘How to win friends and influence people’ from Dale Carnegie2023-02-23T15:10:00+01:002023-02-23T15:10:00+01:00/blog/2023/02/23/how-to-win-friends-and-influence-people<p>Recently I read “How to win friends and influence people” by Dale Carnegie. This book answers the need of many people: What do adults really want to study? Is it mathematics, is it psychology? None of these. After health topics, it is to learn to develop skills in human relationships, in an easy way with examples and concrete action. And that is exactly what and how this book is teaching you.</p>
<p>This book gives you 6 ways to make people like you, 12 ways to win people to your way of thinking, and 9 ways to change people without arousing resentment. All these ways are provided with examples of stories from his students, people he knew or his own experience. With the examples, the content sticks very well in your head.</p>
<p>What I found great is that, although it is really applicable to sales in general, I found and Mr Carnegie said it by himself, these tricks that he is giving are, first, not magical, as they won’t work 100% of the time, but if you make them work maybe 10% of the time, you will be 10% managing better your relationships. Also it requires a genuine mindset and a true interest, it requires an effort and it will not work magically.</p>
<p>I want to highlight each of these ways with a punchline or a good example. So here we go.</p>
<h1 id="fundamental-techniques-in-handling-people">Fundamental techniques in handling people</h1>
<h2 id="1-dont-criticize-condemn-or-complain">1 Don’t criticize, condemn or complain.</h2>
<p>“When dealing with people, let us remember we are not deaing with creatures of logic. We are dealing with creatures of emotionbristling by prejudices and motivated by pride and vanity.” “Human nature in action, wrongdoers, blaming everybody but themselves.” “A great man shows his greatness by the way he treats little men” - Carlyle</p>
<h2 id="2-give-honest-and-sincere-appreciation">2 Give honest and sincere appreciation.</h2>
<p>“There is only one way to get anybody to do anything. It is by making the other person want to do it.” “The deepest urge in human nature is the feeling of being important.” A way to be appreciated and deal with people is to then show your appreciation of the person, not by flattery, but by a sincere and honest appreciation. Flattery is cheap praise, and will be perceived as such.</p>
<h2 id="3-arouse-in-the-other-person-an-eager-want">3 Arouse in the other person an eager want.</h2>
<p>When you go fishing, you don’t put what you like (like chocolate) on the hook. You put worm, even if you don’t like it, because that’s what the fish enjoy to eat. So, let’s go fishing friends and professional relationships! “The only way on Earth to influence other people is to talk to people about what they want, and show them how to get it.” “Self-expression is the dominant necessity of human nature.”</p>
<h1 id="6-ways-to-make-people-like-you">6 ways to make people like you</h1>
<h2 id="1-become-genuinely-interested-in-other-people">1 Become genuinely interested in other people</h2>
<p>“You can make more friends in two months by becoming genuinely interested in other people than you can in two years by trying to get people interested by you.”
“We are interested in others when they are interested in us.”</p>
<h2 id="2-smile">2 Smile</h2>
<p>If you see a dog happy to see you, or a smiling baby, it fills you with happinness, you cannot resist, smiling is contagious.</p>
<h2 id="3-remember-that-a-persons-name-is-to-that-person-the-sweetest-and-most-important-sound-in-any-language">3 Remember that a person’s name is to that person the sweetest and most important sound in any language.</h2>
<p>Good things to do for this one is to learn how to pronounce well the name of a foreign person, and in general to remember people’s names from the first time you meet. We should not make fun of the pronunciation, or the unknown sounds. It is impolite and shows disrespect to the person. Just not trying to pronounce the name correctly is disrespectful.</p>
<h2 id="4-be-a-good-listener-encourage-others-to-talk-about-themselves">4 Be a good listener, encourage others to talk about themselves.</h2>
<p>We all know this one person, once you ask him/her a question, he/she is just unstoppable talking, and he/she never asks you in return about something that interests you. All that the person want is an interested listener, so that he or she can expand on what he/she did, and satisfies his or her ego. But quite often the person in front of you enjoy that you are interested. To be a good conversationalist, be a good listener.</p>
<h2 id="5-talk-in-terms-of-the-other-persons-interests">5 Talk in terms of the other person’s interests.</h2>
<p>A good way to interest people is to talk about themselves. A royal road to a person’s heart is to talk about things he or she treasures most.</p>
<h2 id="6-make-the-other-person-feel-important---and-do-it-sincerely">6 Make the other person feel important - and do it sincerely.</h2>
<p>Talk to people about themselves and they will listen for hours.</p>
<h1 id="12-ways-to-win-people-to-your-way-of-thinking">12 ways to win people to your way of thinking</h1>
<h2 id="1-the-only-way-to-get-the-best-of-an-argument-is-to-avoid-it">1 The only way to get the best of an argument is to avoid it.</h2>
<h2 id="2-show-respect-for-the-other-persons-opinions-never-say--youre-wrong">2 Show respect for the other person’s opinions. Never say “ you’re wrong”.</h2>
<p>Benjamin Franklin as a child was an already very smart and opiniated person. After someone complains about his behavior, he made it a rule to forbear all direct contradiction to the sentiment of others, and all positive assertion of his own. He forbade himself the use of words that import a fixed opinion like “certainly”, “undoubtedly”, and adopted, instead of them, “I conceive”, “I apprehend”, “It so appears to me at present”. Then his relationships with others greatly improved. Nothing good is accomplished and a lot of damage can be done if you tell a personstraight out tgat he or she is wrong.</p>
<h2 id="3-if-youre-wrong-admit-it-quickly-and-emphatically">3 If you’re wrong, admit it quickly and emphatically.</h2>
<h2 id="4-begin-in-a-friendly-way">4 Begin in a friendly way.</h2>
<p>Fable about the sun and the wind. The wind and the sun discuss together, and bet which one of them can manage to make a guy walking down there on Earth to remove his/her jacket. The wind starts by blowing on the person, then harder and harder, but the person just grap and wrap him/her-self even more in the jacket. Then the wind stops trying, the sun gently appears from the back of a cloud, the person feels warmer and removes the jacket.
The moral of this story is that you don’t win by forcing someone to do something (or it could work, but not in an optimized way), you win by gently convincing the person that it is a good thing to do ( as the person is warmer, it is in his/her interest to remove the jacket to feel less warm).</p>
<h2 id="5-get-the-person-person-saying-yes-yes-immediately">5 Get the person person saying “yes, yes” immediately</h2>
<p>“In talking with people, don’t begin by discussing the things on which you differ. Begin and continue by emphasizing the things on which you agree”.
The secret of Socrates: he was asking people with which his opponents could only agree with, saying “yes, yes” voluntarily.</p>
<h2 id="6-let-the-other-person-do-a-great-deal-of-the-talking">6 Let the other person do a great deal of the talking</h2>
<p>By encouraging the other person to do most of the talking, you show an interest in the other person, and thus make a good impression.</p>
<h2 id="7-let-the-person-feels-that-the-idea-is-his-or-hers">7 Let the person feels that the idea is his or hers.</h2>
<h2 id="8-try-honestly-to-see-things-from-the-other-persons-point-of-view">8 Try honestly to see things from the other person’s point of view.</h2>
<h2 id="9-be-sympathetic-with-the-other-persons-ideas-and-desires">9 Be sympathetic with the other person’s ideas and desires.</h2>
<p>A child wants to have piano lessons, but has very long fingernails, preventing her from playing correctly. The teacher didn’t threaten or refuse to teach to the child. The teacher explains to the child that her fingernails were a thing of beauty and it would be a sacrifice to cut them. The teacher sympathizes with the child, showing a great understanding and interest to what was important to the child. Then the child agree to ut her fingernails to play better the piano.</p>
<h2 id="10-appeal-to-the-nobler-motives">10 Appeal to the nobler motives</h2>
<h2 id="11-dramatize-your-ideas">11 Dramatize your ideas</h2>
<h2 id="12-when-nothing-before-works-throw-down-a-challenge">12 When nothing before works, throw down a challenge.</h2>
<p>“That is what every successful person loves: the game. The chance to prove his or her worth, to excel or to win. The chance for self-expression. That is what makes footraces or pie-eating contests. The desire to excel, the desire for a feeling of importance.</p>
<h1 id="be-a-leader---9-ways-to-change-people-without-arousing-resentment">BE A LEADER - 9 ways to change people without arousing resentment</h1>
<h2 id="1-begin-with-praise-and-honest-appreciation">1 Begin with praise and honest appreciation</h2>
<h2 id="2-call-attention-to-peoples-mistakes-indirectly">2 Call attention to people’s mistakes indirectly</h2>
<h2 id="3-talk-about-your-own-mistakes-before-criticizing-the-other-person">3 Talk about your own mistakes before criticizing the other person</h2>
<h2 id="4-ask-questions-instead-of-giving-direct-orders">4 Ask questions instead of giving direct orders</h2>
<h2 id="5-let-the-other-person-save-face">5 Let the other person save face</h2>
<h2 id="6-praise-the-slightest-and-every-improvement">6 Praise the slightest and every improvement.</h2>
<p>“Everybody likes to be praised, but when praise is specific, it comes across as sincere - not something that the other person may be saying just to make one feel good.” “Remember, we all crave appreciation and recognition, and will do almost anything to get it. But nobody wants insincerity.”</p>
<h2 id="7-give-the-other-person-a-fine-reputation-to-live-up-to">7 Give the other person a fine reputation to live up to.</h2>
<h2 id="8-use-encouragement-make-the-fault-seem-easy-to-correct">8 Use encouragement. Make the fault seem easy to correct.</h2>
<h2 id="9-make-the-other-person-happy-about-the-thing-you-suggest">9 Make the other person happy about the thing you suggest.</h2>Recently I read “How to win friends and influence people” by Dale Carnegie. This book answers the need of many people: What do adults really want to study? Is it mathematics, is it psychology? None of these. After health topics, it is to learn to develop skills in human relationships, in an easy way with examples and concrete action. And that is exactly what and how this book is teaching you.Road cycling2021-10-26T11:36:56+02:002021-10-26T11:36:56+02:00/blog/2021/10/26/road-cycling<p>I am cycling for a year and half so far.</p>
<p>Choose a bike:</p>
<p>As a beginner in 2020, I first chose an entry level bike at 850€ from Van Rysel (Decathlon road bike brand). It was white, equipped with Shimano Tiagra and weighting around 9,5kg without the pedals. It was a woman sized bike, adapted to women morphology especially for the saddle and the frame size. It has an aluminium frame and carbon front. It came not equipped with auto-pedals. To start road cycling, I can only recommend!
In 2021, as I cycled a lot more and get a new job, I decided myself for a Canyon bike, the CANYON Ultimate CF SL 8 (2400€). I am a big fan of skating brakes, and the woman version was much more expensive and with disc brakes. So I finally chose the male version. It is equipped with Shimano Ultegra, it has a full carbon frame and an aerodynamic cockpit, with a weight of 7kg. I definitely feel the difference between the 2 bikes!</p>
<p>Cycling events:</p>
<p>NWC challenge: the mantra is “depart together, ride together, arrive together”. Not a race, but a very inclusive event, which was created to fight cancer and to donate money collected through cycling events to medical research, in Germany and in France. I attended the NWC challenge in Berlin in 2020 for a 100km ride, an in Paris in 2021 for a 208km, my biggest ride so far.</p>
<p>L’étape du Tour de France: I registered for this event which will happen in July 2022. It is one of the mountainous stage of Le Tour de France. It looks super tough as it is 170km and 4500m uphill in total. The event finish line is at the top of l’Alpe d’Huez. Can’t wait to train and participate in this race! I have no time or power target, I just want to finish on time and enjoy the view.</p>I am cycling for a year and half so far.Many small people2021-03-21T15:26:00+01:002021-03-21T15:26:00+01:00/blog/2021/03/21/many-small-actions<p>“Many small people who in many small places do many small things that can alter the face of the world.”</p>
<p>Anyone who has walked along the East Side Gallery recently will have noticed this quote, and how it applies well to our action against climate change. I am not telling you anything new when I say that the changes will not come from upper spheres. Or from someone else than you. It is the citizen who is the driving force behind climate action. And I think we need to use this superpower. It is great to take action for a valuable cause and it makes sense in our lives. Nowadays in European countries, we will not make a revolution by taking over the government, but by choosing what we put on our plates! When I choose to read labels, to inform myself about the products I am offered, to understand the composition of a product, how it is produced, I stop responding passively to good taste and good industrial sugar and I take in hand what is good for my health and beyond. Indeed, by making conscientious choices about what I eat, I act not only to fight against global warming, but also against animal mistreatment and pollution.</p>
<p>Food is not the only habits that makes a difference in the fight against global warming, but here I want to illustrate that it is through small individual actions, and by getting those close to us to adopt the same behaviour that we can make the necessary change.</p>
<p>In more practical terms, what can you do to change your eating habits so that they are more environmentally friendly?</p>
<p>Speaking only of the regime:</p>
<ul>
<li>Reduce your meat consumption, especially red meat.</li>
<li>Become flexitarian.</li>
<li>Reduce all animal products like dairies (milk, yoghurt, cheese) or eggs.</li>
<li>Become vegetarian.</li>
<li>Become vegetalian.</li>
</ul>
<p>Other actions with impact whichever regime you follow:</p>
<ul>
<li>Eat local and seasonal.</li>
<li>Eat organic.</li>
<li>Less drinks.</li>
<li>Avoid packaging on food.</li>
</ul>
<p>To know more about what is the impact on each action on your carbon footprint, you can refer to a <a href="https://www.2tonnes.org/">carbon footprint calculator</a> with detailed values for each of your actions or even have a deeper overview of what can be your impact as a citizen if you play to the serious game <a href="https://www.2tonnes.org/">2tonnes</a> (only sessions in French so far).</p>“Many small people who in many small places do many small things that can alter the face of the world.”Handle sibling state with React useState hook2021-02-16T15:26:00+01:002021-02-16T15:26:00+01:00/blog/2021/02/16/sibling-state-react-hooks<ol>
<li>
<p>Parent:</p>
<pre><code class="language-node">import React from "react";
import "./styles.css";
import Child1 from ...
import Child2 from ...
export default App = () => {
const [footprint, setFootprint] = useState(false);
return (
<div className="App">
<Child1 setFootprint={setFootprint} />
<Child2 footprint={footprint} />
</div>
)}
</code></pre>
</li>
</ol>
<p>);</p>
<ol>
<li>
<p>Child1:</p>
<pre><code class="language-node">import React from "react";
import "./styles.css";
export default const Child1({setFootprint}) {
onMouseEnter={() => {
setFootprint(true)
}}
onMouseLeave={() => {
setFootprint(false)
}}
}
</code></pre>
</li>
<li>
<p>Child2:</p>
<pre><code class="language-node">import React from "react";
import "./styles.css";
export default const Child2({footprint}) {
if (footprint) const message = <div>FOOTPRINT AVAILABLE</div>
return message
}
</code></pre>
</li>
</ol>Parent:How to add SurveyJS React to Gatsby2021-02-10T15:26:56+01:002021-02-10T15:26:56+01:00/blog/2021/02/10/add-surveyjs-react-with-gatsby<ol>
<li>
<p>I assume you already created a Gatsby app by following the <a href="https://www.gatsbyjs.com/docs/quick-start/">Quick Start documentation</a></p>
</li>
<li>
<p>Create your survey <a href="https://surveyjs.io/Survey/Builder/">here</a>.</p>
</li>
<li>
<p>Click on ‘Embed Survey’ and copy only the surveyJSON. Example:</p>
<pre><code class="language-node">const surveyJSON = {
pages: [
{
name: "page1",
elements: [
{
type: "text",
name: "question1",
title: "Firstname",
isRequired: true,
},
],
title: "Survey",
description: "Please give me your data.",
},
],
};
</code></pre>
</li>
<li>
<p>Install survey-react in your Gatsby project.</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install </span>survey-react
</code></pre></div> </div>
</li>
<li>
<p>Create a component Form.js in pages > components with the following content:</p>
<div class="language-react highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">Survey</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">survey-react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="dl">"</span><span class="s2">survey-react/survey.css</span><span class="dl">"</span><span class="p">;</span>
<span class="k">export</span> <span class="kd">const</span> <span class="nx">Form</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// Paste your surveyJSON here</span>
<span class="kd">const</span> <span class="nx">surveyJSON</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
<span class="c1">//Define a callback methods on survey complete</span>
<span class="kd">const</span> <span class="nx">onComplete</span> <span class="o">=</span> <span class="p">(</span><span class="nx">survey</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">//Write survey results into database</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Survey results: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">survey</span><span class="p">.</span><span class="nx">data</span><span class="p">));</span>
<span class="p">};</span>
<span class="k">return</span> <span class="p"><</span><span class="nc">Survey</span><span class="p">.</span><span class="nc">Survey</span> <span class="na">json</span><span class="p">=</span><span class="si">{</span><span class="nx">json</span><span class="si">}</span> <span class="na">onComplete</span><span class="p">=</span><span class="si">{</span><span class="nx">onComplete</span><span class="si">}</span> <span class="p">/>;</span>
<span class="p">};</span>
</code></pre></div> </div>
</li>
<li>
<p>Call the component in your index.js
Start the local development server with</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run develop
</code></pre></div> </div>
</li>
</ol>I assume you already created a Gatsby app by following the Quick Start documentationHow to build a Ruby-On-Rails and React app from scratch2021-02-09T15:26:56+01:002021-02-09T15:26:56+01:00/blog/2021/02/09/ruby-react-from-scratch<ol>
<li>Create a repo in Github</li>
<li>
<p>Install last version of ruby:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rbenv <span class="nb">install </span>3.0.0
rbenv global 3.0.0
</code></pre></div> </div>
</li>
<li>
<p>Install last version of node.js:
nvm is equivalent to rbenv: allow to manage several versions of node.js on the same computer. Versions are set on a per-project basis.</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nvm <span class="nb">install </span>node
nvm <span class="nb">alias </span>default node
nvm use
node <span class="nt">--version</span>
</code></pre></div> </div>
</li>
<li>
<p>Install <a href="https://guides.rubyonrails.org/getting_started.html">rails</a></p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem <span class="nb">install </span>rails
</code></pre></div> </div>
</li>
<li>
<p>Bootstrap a new app.</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rails new my-app <span class="se">\</span>
<span class="nt">--database</span><span class="o">=</span>postgresql <span class="se">\</span>
<span class="nt">--api</span> <span class="se">\</span>
</code></pre></div> </div>
</li>
<li>
<p>Set the NodeJS version in our new app.</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd </span>my-app
<span class="nb">echo</span> <span class="s2">"15.8.0"</span> <span class="o">></span> .nvmrc
</code></pre></div> </div>
</li>
<li>
<p>Let’s check the used ruby version.</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cat</span> .ruby-version
</code></pre></div> </div>
</li>
<li>
<p>Push to Github</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git remote add origin git@github.com:<USER>/<REPO>.git
git commit <span class="nt">-m</span> <span class="s2">"first commit"</span>
</code></pre></div> </div>
</li>
<li>
<p>Test run the app</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>rails s
</code></pre></div> </div>
</li>
<li>
<p>I want to use PostgreSQL and avoid manually installing the database by using Docker-Compose.
Create and configure Docker:</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">version</span><span class="pi">:</span> <span class="s2">"</span><span class="s">3.7"</span>
<span class="na">services</span><span class="pi">:</span>
<span class="na">database</span><span class="pi">:</span>
<span class="na">image</span><span class="pi">:</span> <span class="s2">"</span><span class="s">postgres"</span> <span class="c1"># use latest official postgres version</span>
<span class="na">ports</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">127.0.0.1:5432:5432"</span>
<span class="na">environment</span><span class="pi">:</span>
<span class="na">POSTGRES_USER</span><span class="pi">:</span> <span class="s">${USER}</span>
<span class="na">POSTGRES_HOST_AUTH_METHOD</span><span class="pi">:</span> <span class="s2">"</span><span class="s">trust"</span>
<span class="na">volumes</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">${PWD}/db:${PWD}/db</span> <span class="c1"># persist data even if container shuts downvolumes:</span>
<span class="na">healthcheck</span><span class="pi">:</span>
<span class="na">test</span><span class="pi">:</span> <span class="pi">[</span><span class="s2">"</span><span class="s">CMD"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">pg_isready"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">-U"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">${USER}"</span><span class="pi">]</span>
<span class="na">container_name</span><span class="pi">:</span> <span class="s">quiz_postgres</span>
</code></pre></div> </div>
</li>
<li>
<p>Install postgresql and disable it.</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt <span class="nb">install </span>postgresql
<span class="nb">sudo </span>systemctl disable postgresql
<span class="nb">sudo </span>systemctl stop postgresql
</code></pre></div> </div>
</li>
<li>
<p>Launch docker and connect to the DB:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>docker-compose up <span class="nt">-d</span>
psql <span class="nt">-h</span> 127.0.0.1 <span class="nt">-U</span> <USER> <span class="c"># Connect to the DB directly</span>
docker-compose run database bash <span class="c"># Or connect inside the docker container...</span>
psql <span class="nt">-h</span> database <span class="nt">-U</span> <USER> <span class="c"># ...and then to the DB</span>
</code></pre></div> </div>
</li>
<li>
<p>Next time you want to start or stop docker, don’t do <code class="language-plaintext highlighter-rouge">up</code> but instead do:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>docker-compose stop
docker-compose start
</code></pre></div> </div>
</li>
<li>Edit database.yml:</li>
</ol>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">default</span><span class="pi">:</span> <span class="nl">&default</span>
<span class="na">adapter</span><span class="pi">:</span> <span class="s">postgresql</span>
<span class="na">encoding</span><span class="pi">:</span> <span class="s">unicode</span>
<span class="na">pool</span><span class="pi">:</span> <span class="s"><%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %></span>
<span class="na">development</span><span class="pi">:</span>
<span class="s"><<</span><span class="pi">:</span> <span class="nv">*default</span>
<span class="na">url</span><span class="pi">:</span> <span class="s"><%= "postgres://#{ENV['USER']}:@localhost:5432/quiz-development" %></span>
<span class="na">test</span><span class="pi">:</span>
<span class="s"><<</span><span class="pi">:</span> <span class="nv">*default</span>
<span class="na">url</span><span class="pi">:</span> <span class="s"><%= "postgres://#{ENV['USER']}:@localhost:5432/quiz-test" %></span>
</code></pre></div></div>
<ol>
<li>
<p>Start rails and create a db:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>rails db:create
bundle <span class="nb">exec </span>rails db:migrate
bundle <span class="nb">exec </span>rails s
</code></pre></div> </div>
</li>
</ol>Create a repo in Github Install last version of ruby: