<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ítalo Santana</title>
    <description>The latest articles on DEV Community by Ítalo Santana (@italosantana).</description>
    <link>https://dev.to/italosantana</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F699000%2F3fc99222-987f-40d0-82f0-71f5fad26f35.PNG</url>
      <title>DEV Community: Ítalo Santana</title>
      <link>https://dev.to/italosantana</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/italosantana"/>
    <language>en</language>
    <item>
      <title>How to fix 'Code' command in PopOS terminal</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Tue, 04 Apr 2023 13:42:27 +0000</pubDate>
      <link>https://dev.to/italosantana/how-to-fix-code-command-in-popos-terminal-k9h</link>
      <guid>https://dev.to/italosantana/how-to-fix-code-command-in-popos-terminal-k9h</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Lp2rhPZt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uxa0twd4lni1k2sxh7k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Lp2rhPZt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uxa0twd4lni1k2sxh7k.png" alt="Image description" width="292" height="53"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you download Visual Studio Code on PopOS! the &lt;strong&gt;Code&lt;/strong&gt; command does not work in the terminal, which opens your IDE any project anywhere you are.&lt;/p&gt;

&lt;p&gt;To solve this, it's simple.&lt;/p&gt;

&lt;p&gt;First you will use cd to focus on the bin/ folder:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;$ cd /usr/local/bin/&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Then, using the sudo command will create the code command&lt;br&gt;
&lt;code&gt;$ sudo ln -s /usr/share/code/bin/code code&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Restart your terminal and the magic is done!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Generating avatar with initials letters using Satori</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Mon, 03 Apr 2023 11:16:20 +0000</pubDate>
      <link>https://dev.to/italosantana/generating-avatar-with-initials-letters-using-satori-31dd</link>
      <guid>https://dev.to/italosantana/generating-avatar-with-initials-letters-using-satori-31dd</guid>
      <description>&lt;p&gt;Hi there! &lt;/p&gt;

&lt;p&gt;It's common in some situations, we would like to convert a text inside a card to SVG, like example: creating avatars, or optimizing information and pass the SVG as og:image, etc. There are a multitude of situations that we can solve by converting HTML to SVG.&lt;/p&gt;

&lt;h2&gt;
  
  
  Satori
&lt;/h2&gt;

&lt;p&gt;tl;dr: a library used to generate SVG from HTML and CSS. Using React, you can pass it as JSX to Satori and an SVG string results. It's simple and amazing!&lt;/p&gt;

&lt;p&gt;See the magic!&lt;/p&gt;

&lt;p&gt;To resolve this, you can use this function below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;satori&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;satori&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;GenerateSVG&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;roboto&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/Roboto-Regular.ttf&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;arrayBuffer&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;satori&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt;
        &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;100%&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;100%&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;flex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;textAlign&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;center&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;alignItems&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;center&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;justifyContent&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;center&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;flexDirection&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;column&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;flexWrap&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;nowrap&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;fontSize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;22px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;backgroundColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;white&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;backgroundSize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;100px 100px&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
         &lt;span class="p"&gt;}}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;
          &lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt;
            &lt;span class="na"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;flex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;justifyContent&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;center&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2px solid #fff&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;backgroundColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;green&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#FFF&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;fontWeight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;700&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;fontSize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;50px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;borderRadius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;50%&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;50px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="p"&gt;}}&lt;/span&gt;
          &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nx"&gt;IS&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;         &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;,
&lt;/span&gt;      &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;600&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;fonts&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
          &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Roboto&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;roboto&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;normal&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;],&lt;/span&gt;
      &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the example above, I used static text with the initial letters of my name, but if you want to make it dynamic, just pass it as props.&lt;/p&gt;

&lt;p&gt;You can style it however you want!&lt;/p&gt;

&lt;p&gt;In this case, to show how it works, I'll do a demonstration below, forcing the use of SVG in a very simple div.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;SvgImage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setSvgImage&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

  &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Svg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nc"&gt;GenerateSVG&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

      &lt;span class="nf"&gt;setSvgImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Svg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;})();&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;App&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;dangerouslySetInnerHTML&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt; &lt;span class="na"&gt;__html&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;SvgImage&lt;/span&gt; &lt;span class="p"&gt;}}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And that's it! An avatar just like &lt;strong&gt;Microsoft Teams.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3vfynfty7e8ik54dolbd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3vfynfty7e8ik54dolbd.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;twitter: &lt;a href="https://twitter.com/@x8ing_" rel="noopener noreferrer"&gt;https://twitter.com/@X8ING_&lt;/a&gt;&lt;br&gt;
github: &lt;a href="https://github.com/italosantana" rel="noopener noreferrer"&gt;github.com/italosantana&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Career — Building a rocket</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Wed, 23 Nov 2022 11:07:27 +0000</pubDate>
      <link>https://dev.to/italosantana/career-building-a-rocket-4d3i</link>
      <guid>https://dev.to/italosantana/career-building-a-rocket-4d3i</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--euBzwjSn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j184efbqsb3r4dymaude.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--euBzwjSn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j184efbqsb3r4dymaude.png" alt="NASA SLS ROCKET" width="879" height="485"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Your professional career can be a rocket ship and take off wherever you want.&lt;/p&gt;

&lt;p&gt;You have to pay the price.&lt;/p&gt;

&lt;p&gt;Learn English and/or Spanish.&lt;/p&gt;

&lt;p&gt;Learn the tools you need to make your work better.&lt;/p&gt;

&lt;p&gt;Learn different tools that other professionals are not interested in.&lt;/p&gt;

&lt;p&gt;Have differentials.&lt;/p&gt;

&lt;p&gt;Improve your curriculum.&lt;/p&gt;

&lt;p&gt;Learn to read more.&lt;/p&gt;

&lt;p&gt;Learn to write more.&lt;/p&gt;

&lt;p&gt;Always invest in your professional growth.&lt;/p&gt;

&lt;p&gt;Have proof of work.&lt;/p&gt;

&lt;p&gt;Learn how to communicate better.&lt;/p&gt;

&lt;p&gt;Learn to sell your profile with better communication.&lt;/p&gt;

&lt;p&gt;Get therapy.&lt;/p&gt;

&lt;p&gt;Do a physical exercise that you enjoy.&lt;/p&gt;

&lt;p&gt;Always focus all results on the long term.&lt;/p&gt;

</description>
      <category>performance</category>
    </item>
    <item>
      <title>Total Addressable Market – TAM</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Tue, 22 Nov 2022 11:41:24 +0000</pubDate>
      <link>https://dev.to/italosantana/total-addressable-markettam-4laf</link>
      <guid>https://dev.to/italosantana/total-addressable-markettam-4laf</guid>
      <description>&lt;p&gt;Total Addressable Market(TAM) – refers to the revenue your company can earn from selling a product or providing a service.&lt;/p&gt;

&lt;p&gt;Calculating the TAM allows the company to have a clearer and more realistic view of the size of the market available for its operations, as well as the level of competition for what it intends to offer its target audience.&lt;/p&gt;

&lt;p&gt;As the Total Addressable Market (TAM) helps predict revenue growth and also the profit potential of a specific sector, its result helps managers make more assertive decisions.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Parkinson's law</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Fri, 04 Nov 2022 02:32:13 +0000</pubDate>
      <link>https://dev.to/italosantana/parkinsons-law-of5</link>
      <guid>https://dev.to/italosantana/parkinsons-law-of5</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZMovbr7V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs5qgb66exu8rrr4ohkg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZMovbr7V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs5qgb66exu8rrr4ohkg.png" alt="Image description" width="570" height="421"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Parkinson's Law is the old adage that work expands to fill the allotted time for completion.&lt;/p&gt;

&lt;p&gt;This law may be adopted in some areas.&lt;/p&gt;

&lt;p&gt;It can be paired with &lt;strong&gt;Student syndrome&lt;/strong&gt; refers to planned procrastination, when, for example, a student only starts performing a task at the last possible moment before his deadline. &lt;/p&gt;

&lt;p&gt;This eliminates any possible margin of safety and puts the individual under stress and pressure.&lt;/p&gt;

</description>
      <category>performance</category>
    </item>
    <item>
      <title>Gartner hype cycle</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Wed, 02 Nov 2022 10:16:37 +0000</pubDate>
      <link>https://dev.to/italosantana/gartner-hype-cycle-1ahc</link>
      <guid>https://dev.to/italosantana/gartner-hype-cycle-1ahc</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EsIxXtzt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c89zrmhuamh2hsswfkf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EsIxXtzt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c89zrmhuamh2hsswfkf.png" alt="Gartner hype cycle in graph" width="633" height="469"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Gartner hype cycle is a graphical of apresentation developed.&lt;/p&gt;

&lt;p&gt;Represent the maturity, adoption, and social application of specific technologies.&lt;/p&gt;

&lt;p&gt;The hype cycle claims to provide a graphical and conceptual presentation of the maturity of emerging technologies through five phases. &lt;/p&gt;

&lt;p&gt;The model is not perfect and research so far shows possible improvements for the model.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Aprenda map() e filter() de uma vez — Javascript</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Tue, 01 Nov 2022 21:34:09 +0000</pubDate>
      <link>https://dev.to/italosantana/aprenda-map-e-filter-de-uma-vez-javascript-32o7</link>
      <guid>https://dev.to/italosantana/aprenda-map-e-filter-de-uma-vez-javascript-32o7</guid>
      <description>&lt;p&gt;Map e filter são dois entre alguns métodos na linguagem JavaScript que nos auxilia na manipulação do array. Acredite! Você aprendendo esses dois, conseguirá acelerar boa parte de iterações com array em seu projeto que estão por vir.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0tw1z2Xi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iyd6kaa092zu4gstz5g.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0tw1z2Xi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iyd6kaa092zu4gstz5g.jpg" alt="Photo by freepik" width="880" height="394"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Map
&lt;/h2&gt;

&lt;p&gt;A utilização do map vai permitir que você faça a operação com o array, passando a função Callback como argumento e será executada em cada um dos elementos desse array, e como resultado, devolve um novo array com os novos elementos.&lt;/p&gt;

&lt;p&gt;Vamos de exemplo pra facilitar o seu entendimento!&lt;/p&gt;

&lt;p&gt;Imagine que você está querendo fazer operações bem simples em cada elemento do array manualmente. Imagina com 10 objetos, 100 objetos, 1000 objetos, etc. Fazer manualmente acho que não seja uma boa ideia, ein? Você pode utilizar o método Map() justamente para isso.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numerosQualquer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pegarValorComMap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numerosQualquer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;valor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;valor&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;

&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="c1"&gt;// saída: [ 20, 10, 2 ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Por que a saída é [20, 10, 2]?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;O valor da função vai passar multiplicando por 2 cada elemento do array ao qual chamamos de numeroQualquer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Filter
&lt;/h2&gt;

&lt;p&gt;O filter é um método bem utilizado para retornar ou filtrar informações que você deseja em um array, e assim feito, retornará um novo array com os novos elementos.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;pegarNumerosAleatorios&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;443&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;37&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;apenasNumerosPositivos&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;pegarNumerosAleatorios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;valor&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;valor&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// saída: [ 20,12,2,4,25,30,10 ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Por que a saída é [ 20, 12, 2, 4, 25, 30, 10]?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Porque o valor da função vai passar por todos os elementos do array chamado pegarNumerosAleatorios, pegando/filtrando todos os valores acima ou igual 0.&lt;/p&gt;




&lt;p&gt;Gostou? Comenta abaixo 👇 o que achou! &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Ask for new tasks</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Tue, 11 Oct 2022 18:59:25 +0000</pubDate>
      <link>https://dev.to/italosantana/grab-more-issues-4ggb</link>
      <guid>https://dev.to/italosantana/grab-more-issues-4ggb</guid>
      <description>&lt;p&gt;Having a Junior developer in your company is not an easy task, as it requires attention, understanding your doubts and also being able to assist in your progress. It's like a child where he's learning to take his first steps, and you're there helping the novice developer to make the first pull requests.&lt;/p&gt;

&lt;h2&gt;
  
  
  Errors
&lt;/h2&gt;

&lt;p&gt;Receiving errors, understanding and working around them is an activity that will make you stand out from other professionals in the market. So, the more problems you solve, the more you will learn. &lt;/p&gt;

&lt;p&gt;It's logical! You go up one level of education at a time, and you always learn something new as you level up, and in the area of ​​technology it doesn't change. So grab more issues! In addition to knowing how to solve problems, the time it takes you to solve them will also add to your evolution.&lt;/p&gt;

&lt;p&gt;Learning something new takes time!&lt;/p&gt;

&lt;p&gt;Climbing good professionals is not overnight.&lt;/p&gt;

&lt;h2&gt;
  
  
  Helping
&lt;/h2&gt;

&lt;p&gt;One of the problems with climbing Juniors evolution is picking up a task and not knowing how to ask for it. Be it for some reason. Juniors must learn to ask more. If you've been on the same issue for more than an hour, search, ask, or post in a community.&lt;/p&gt;

&lt;h2&gt;
  
  
  Evolving with communication.
&lt;/h2&gt;

&lt;p&gt;Another problem is not accepting or receiving feedback.&lt;/p&gt;

&lt;p&gt;Feedback is a formal response to your professional status, whether positive or negative. Whether you accept it or not, it's a way for you to understand whether or not you're evolving.&lt;/p&gt;

&lt;p&gt;Having a follow-up of your evolution with your manager is very interesting for your professional ascension.&lt;/p&gt;

&lt;p&gt;So, have more problems, learning to ask more questions, read and write more and align your expectations with your manager about your evolution is a good path to your professional growth.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>programming</category>
      <category>productivity</category>
    </item>
    <item>
      <title>O que é Blockchain?</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Thu, 26 May 2022 21:01:00 +0000</pubDate>
      <link>https://dev.to/italosantana/o-que-e-blockchain-iml</link>
      <guid>https://dev.to/italosantana/o-que-e-blockchain-iml</guid>
      <description>&lt;p&gt;&lt;em&gt;De uma forma simples para você aprender.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3eeht5568j0rjs0xmeaa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3eeht5568j0rjs0xmeaa.png" alt="datadriveninvestor"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Imagine um cubo de vidro pequeno que cabe na sua mão e dentro dele há um papel escrito nos dois lados o seu nome completo. Independente do lado que você vire o cubo, você vai conseguir enxergar o seu nome completo. &lt;/p&gt;

&lt;p&gt;Essa transparência é uma das propriedades da &lt;strong&gt;Blockchain&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Com algum espaço de tempo, o seu vizinho resolve fazer o mesmo. Anotou o nome dele nos dois lados dentro do cubo de vidro, e consegue enxergar. O terceiro vizinho também resolve fazer o mesmo. Assim, sucessivamente e infinitamente. É assim que a Blockchain funciona! É uma cadeia de blocos ligadas umas as outras, onde você consegue ter total transparência das ações e assegurando de não haver imutabilidade. &lt;/p&gt;

&lt;p&gt;Isso mesmo! Blockchain não pode ser mutável. Depois que você escreveu no seu cubo, a informação que foi escrita, jamais poderá ser modificada.&lt;/p&gt;

&lt;p&gt;Por fim, cada bloco é ligado um ao outro, conforme dito anteriormente, e o tempo de emissão de um novo bloco com as informações varia de acordo com a Blockchain. &lt;/p&gt;

&lt;p&gt;Exemplo disso, a Ethereum tem uma média de 10 à 20 segundos. Enquanto o Bitcoin têm 10 minutos para minerar o próximo bloco.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;That's it!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Espero que tenha facilitado a compreensão dessa tecnologia que está vindo com força total.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>web3</category>
      <category>programming</category>
      <category>blockchain</category>
    </item>
    <item>
      <title>Who am I?</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Thu, 03 Feb 2022 04:15:12 +0000</pubDate>
      <link>https://dev.to/italosantana/who-am-i-398f</link>
      <guid>https://dev.to/italosantana/who-am-i-398f</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qGpFbqhS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v35crn1z9q7ivm48eakn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qGpFbqhS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v35crn1z9q7ivm48eakn.png" alt="Image description" width="880" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Meu nome é Ítalo, tenho 26 anos, nasci em Natal/RN e moro em Pernambuco há 3 meses. Comecei à trabalhar desde os 13 anos na construção civil, como auxiliar de pedreiro, almoxarife e o que aparecia no canteiro de obra. Após término do ensino médio, seguindo a carreira no ambiente da construção, consegui uma bolsa pra estudar Engenharia Civil, mas no decorrer do curso, no 7° período, tive que trancar minha matrícula por causa do desemprego.&lt;/p&gt;

&lt;p&gt;Quando fiquei empregado novamente em 2016, fui notificado que havia perdido a bolsa, infelizmente.&lt;/p&gt;

&lt;p&gt;Em 2016, passei em uma vaga pra trabalhar na área administrativa em uma empresa multinacional, onde consegui crescer profissionalmente ano após ano e me dedicava em cada oportunidade que surgia dentro da empresa. Enquanto isso, nas pausas eu aproveitava pra estudar e tomar café.&lt;/p&gt;

&lt;p&gt;Em 2021, consegui uma bolsa pra estudar no curso de extensão do IMD (Instituto Metrópole Digital/UFRN), e consegui finalizar o curso obtendo conhecimento em banco de dados, front e backend. Essa foi minha primeira oportunidade que apareceu no ambiente de tecnologia. &lt;/p&gt;

&lt;p&gt;Após se inscrever no Sisu, fui chamado na lista de espera pra UFRN, no curso de Ciência e Tecnologias, com foco em Engenharia da Computação e essa foi minha segunda oportunidade de estudos na área.&lt;/p&gt;

&lt;p&gt;Isso já havia &lt;a href="https://dev.to/x8ing_/meu-primeiro-mes-como-desenvolvedor-back-end-jr-43k4"&gt;estagiado como backend por um mês&lt;/a&gt; em uma startup e resolvi mudar de vida indo pra Pernambuco morar com minha esposa.&lt;/p&gt;

&lt;p&gt;Foi então que em 2022 recebi a noticia sobre o meu desligamento da multinacional como administrativo. &lt;/p&gt;

&lt;p&gt;Atualmente, eu faço parte de uma empresa de consultoria web3, com clientes nacionais e internacionais, estou trabalhando como fullstack e estudando mais web3. Onde, acredito seriamente que será um mercado próspero e enriquecedor.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Anything is possible&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Kevin Garnnet.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

</description>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Como usar o .env?</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Mon, 24 Jan 2022 08:22:38 +0000</pubDate>
      <link>https://dev.to/italosantana/why-you-need-to-use-env-1o41</link>
      <guid>https://dev.to/italosantana/why-you-need-to-use-env-1o41</guid>
      <description>&lt;h2&gt;
  
  
  Why
&lt;/h2&gt;

&lt;p&gt;Quando você precisa guardar informações como hash de senha de banco de dados, host ou portas de alguma aplicação e você precisa pública isso em um site de hospedagem de código-fonte e arquivos com controle de versão, por exemplo, o GitHub. Nesse caso, ficará exposto e todos terão acesso as suas informações confidenciais. Pra isso, o gerenciador de variáveis de ambiente &lt;strong&gt;dotenv&lt;/strong&gt;, juntamente com o &lt;code&gt;.gitignore&lt;/code&gt;, chegam dando um abraço e acolhendo suas informações, deixando informações confidenciais protegidas.&lt;/p&gt;

&lt;h2&gt;
  
  
  How
&lt;/h2&gt;

&lt;p&gt;Ao criar um arquivo package.json, digitando um &lt;code&gt;npm init -y&lt;/code&gt; no terminal, você terá um arquivo simples. Aproveita e já cria um script simples também pra auxiliar iniciar a página inicial do projeto, ao qual criei com o nome de index.js &lt;code&gt;"start: node index"&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Em seguida, vamos instalar o dotenv!&lt;/p&gt;

&lt;p&gt;No mesmo terminal, digita &lt;code&gt;npm i dotenv&lt;/code&gt; pra instalar, você verá que é bem rápido e aparecerá na dependência do seu package.json com a versão que foi instalada.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--opYyZILk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovgp29dqmdt1hc4zfcr3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--opYyZILk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovgp29dqmdt1hc4zfcr3.png" alt="O script pra iniciar e a dependência instalada" width="321" height="272"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tudo pronto e instalado!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Agora, dentro mesma pasta principal, cria um arquivo chamado &lt;code&gt;.env&lt;/code&gt; e pra testarmos uma variável de ambiente qualquer, colocamos &lt;code&gt;TESTE=deixaOLikeECompartilhaEssePost&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yxmHeV3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gucbvomca0x1xzx52ouf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yxmHeV3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gucbvomca0x1xzx52ouf.png" alt="Image description" width="335" height="77"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Em seguida, vai no arquivo principal(o nosso que criei foi &lt;code&gt;index.js&lt;/code&gt;) e escreve &lt;code&gt;require('dotenv').config()&lt;/code&gt; no cabeçalho do arquivo, assim que iniciar o projeto, ele já executará.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CJQGu5Tj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydmfgfuvvwel5eisnl3p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CJQGu5Tj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydmfgfuvvwel5eisnl3p.png" alt="Image description" width="394" height="156"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Rodando um &lt;code&gt;node index&lt;/code&gt; pelo terminal, aparecerá a variável de ambiente que está guardada em um arquivo .env, conforme configuramos.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Qf1v-ype--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os1bzmdum5jef6shj5pi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Qf1v-ype--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os1bzmdum5jef6shj5pi.png" alt="Image description" width="492" height="80"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Assim, caso queira publicar algum projeto que tenha informações confidenciais em alguma variável de ambiente em um repositório no GitHub, podemos criar um &lt;code&gt;.gitignore&lt;/code&gt; e colocar as variáveis de ambiente dentro de um arquivo dotenv e postar, pois o git ignore esconderá.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---laCg77V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q42mysrwfbkkyvu1j3y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---laCg77V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q42mysrwfbkkyvu1j3y.png" alt="Exemplo de variáveis de ambiente dentro de um arquivo .gitignore" width="286" height="115"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>npm</category>
      <category>tutorial</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Why is 100 days coding necessary?</title>
      <dc:creator>Ítalo Santana</dc:creator>
      <pubDate>Mon, 03 Jan 2022 19:55:55 +0000</pubDate>
      <link>https://dev.to/italosantana/why-is-100-days-coding-necessary-57k7</link>
      <guid>https://dev.to/italosantana/why-is-100-days-coding-necessary-57k7</guid>
      <description>&lt;p&gt;It's not just 100 days, it's very difficult days that not everyone is able to complete the challenge.&lt;/p&gt;

&lt;p&gt;More hours, more days developing something, it will make you get into the development habit and learn at once every function, variable, object and everything that encompasses your programming language. This is the real reason for you to take the 100-day challenge and nobody talks about it, but I do: it's hard.&lt;/p&gt;

&lt;p&gt;Habit will make you have constancy.&lt;/p&gt;

&lt;p&gt;Habit will make you always learn something new.&lt;/p&gt;

&lt;p&gt;The habit will make you look to become a good professional.&lt;/p&gt;

&lt;p&gt;Everyone who is migrating to the TECH field should take the 100-day challenge with the language they are interested in learning.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
