<?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: Leonardo Oliveira</title>
    <description>The latest articles on DEV Community by Leonardo Oliveira (@lim4mik3).</description>
    <link>https://dev.to/lim4mik3</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%2F1079959%2F7f676513-a689-44c0-a816-048ea58c99d1.jpg</url>
      <title>DEV Community: Leonardo Oliveira</title>
      <link>https://dev.to/lim4mik3</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lim4mik3"/>
    <language>en</language>
    <item>
      <title>_01_ Descomplicando Docker - O que é Docker</title>
      <dc:creator>Leonardo Oliveira</dc:creator>
      <pubDate>Wed, 03 Sep 2025 23:44:53 +0000</pubDate>
      <link>https://dev.to/lim4mik3/01-descomplicando-docker-o-que-e-docker-4eoj</link>
      <guid>https://dev.to/lim4mik3/01-descomplicando-docker-o-que-e-docker-4eoj</guid>
      <description>&lt;p&gt;Salveee, Devs! Como cês tão, tudo certo?&lt;/p&gt;

&lt;p&gt;Bem-vindos a bordo! Quem fala aqui é o *&lt;em&gt;Lim4 Mik3&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Hoje a gente dá início a uma mini-série sobre Docker: vamos entender essa ferramenta, revisar alguns fundamentos, colocar a mão na massa e, no final, fazer o deploy de uma aplicação usando Docker e AWS!&lt;/p&gt;

&lt;p&gt;O objetivo para essa mini-série é além de compartilhar o conhecimento, ser um material de ensino e apoio aos devs iniciantes, os que já tem experiencia ou até mesmo aquele que já são experts e querem revisar alguns conceitos.&lt;/p&gt;

&lt;p&gt;Depois de ver toda a série tenho certeza que não terão medo ou calafrios ao ouvirem a palavra "Docker" kkk... vamos construir juntos uma base sólida e prática de conhecimento em Docker!&lt;/p&gt;

&lt;p&gt;Então primeiro de tudo, vamos entender oq é esse bendito Docker e a baleia.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que é o DOCKER - Fundamentos
&lt;/h2&gt;

&lt;p&gt;Certamente não tem ninguém melhor para definir o que é o Docker se não os próprios criadores dele, vejamos abaixo a definição do Docker em sua própria documentação:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F108nox7yk1dne0isgymy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F108nox7yk1dne0isgymy.png" alt=" " width="800" height="219"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Pronto, entendemos o que é o Docker, podemos passar para os próximos passos.&lt;/p&gt;

&lt;p&gt;... Não? Claro que não! Se voce assim como eu, não se contenta com meras explicações rasas, fique calma pois vamos mais fundo.&lt;/p&gt;

&lt;h2&gt;
  
  
  Verdadeiramente entendo o Docker
&lt;/h2&gt;

&lt;p&gt;O Docker é uma ferramenta para seu software, e como qualquer outra ferramenta, ela veio para resolver um problema, com isso, vamos primeiro entender o problema para então entender a aplicabilidade e o cenário onde o Docker brila.&lt;/p&gt;

&lt;p&gt;Em tempos não tão distantes era comum vermos os profissionais de tecnologia enfrentarem alguns problemas ou fazerem queixas como os listados abaixo:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Na minha máquina funciona&lt;/li&gt;
&lt;li&gt;Dificuldade em replicar ambientes&lt;/li&gt;
&lt;li&gt;Conflito de dependências&lt;/li&gt;
&lt;li&gt;Complexidade no deploy&lt;/li&gt;
&lt;li&gt;Escalabilidade difícil&lt;/li&gt;
&lt;li&gt;Custo com infraestrutura pesada (VMs)&lt;/li&gt;
&lt;li&gt;Integração complicada entre sistemas&lt;/li&gt;
&lt;li&gt;Portabilidade limitada&lt;/li&gt;
&lt;li&gt;Dificuldade em testes automatizados&lt;/li&gt;
&lt;li&gt;Entrega contínua demorada&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Acho que deu pra entender que haviam algumas lacunas e dores reais nos processos de desenvolvimento, integração e deploy de softwares.&lt;/p&gt;

&lt;p&gt;Para resolver todos esses problemas é para que o Docker veio ao mundo, ele consegue de uma maneira inteligente e performática isolar um único computador/hardware e criar ambiente exclusivos com suas configurações e com suas  &lt;/p&gt;

</description>
      <category>devops</category>
      <category>docker</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Meet, Multi SSH Profile/Host 🔑</title>
      <dc:creator>Leonardo Oliveira</dc:creator>
      <pubDate>Mon, 24 Feb 2025 15:42:01 +0000</pubDate>
      <link>https://dev.to/lim4mik3/meet-multi-ssh-profilehost-3g9j</link>
      <guid>https://dev.to/lim4mik3/meet-multi-ssh-profilehost-3g9j</guid>
      <description>&lt;p&gt;Handle multiple SSH client and connections more easily.&lt;/p&gt;

&lt;p&gt;Have you ever needed to work on multiple projects at the same time? Or do you often access a remote device and not remember its address by heart?&lt;/p&gt;

&lt;p&gt;Today, I’ll show you guys a wonderful feature that can help us solve this, and as a bonus, we’ll become more productive and happier at work.&lt;/p&gt;

&lt;p&gt;A good practice in the workday of IT professionals is using SSH as a communication protocol between systems. But sometimes, we need to handle two, three, or more clients in our work routine.&lt;/p&gt;

&lt;p&gt;I mostly see people handling this "obstacle" simply by writing the access information manually into the terminal. This works, but it is not the ideal solution.&lt;/p&gt;

&lt;p&gt;Now, I'm going to show you a nice solution for this.&lt;/p&gt;

&lt;p&gt;I'll create a problem case. Let's suppose that you have a software house that works on two different projects. These projects are stored in two different GitHub repositories, and you can only access them via SSH.&lt;/p&gt;

&lt;p&gt;You could simply enter the access command and information in the terminal, and it would work. Okay, that’s fine, but... you can also create a config file for the SSH agent and use the Multi-Hosts (aka multi-profiles) feature to achieve the same results.&lt;/p&gt;

&lt;p&gt;Woooooooowwww, how does that work??&lt;/p&gt;

&lt;p&gt;You must create a config file in the SSH agent directory, declare some hosts, give them a specific name, and every time you need to access any of them, you just need to type their names.&lt;/p&gt;

&lt;p&gt;That's all. Seems like magic!&lt;/p&gt;

&lt;p&gt;Let's stop shooting the breeze and get to work.&lt;/p&gt;

&lt;p&gt;If you don't know some principles of SSH connections and clients, I suggest you learn them first and then come back here.&lt;/p&gt;

&lt;p&gt;So, we’re going to start from the point where you already have the public and private access keys linked to your repository.&lt;/p&gt;

&lt;p&gt;If you also don't know how to get this, check out this link.&lt;/p&gt;

&lt;p&gt;STEP 1&lt;br&gt;
Open your terminal and navigate to the SSH directory (in Linux, ~/.ssh). Then, create a file called config without an extension.&lt;br&gt;
As shown in the example below, I access my SSH directory and create:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F9d6vf014x3dv55fv8bot.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F9d6vf014x3dv55fv8bot.png" alt="Image description" width="424" height="87"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  STEP 2
&lt;/h2&gt;

&lt;p&gt;After this point, let's understand the structure of the config file:&lt;/p&gt;

&lt;p&gt;Every profile/host that you need to declare in the SSH-AGENT follows the pattern below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fyucy63rf0h94nqepeems.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fyucy63rf0h94nqepeems.png" alt="Image description" width="800" height="116"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  STEP 3
&lt;/h2&gt;

&lt;p&gt;As final result, now you can put all of your profiles/hosts clients that you want to have a quickly access.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fdmh9o1gjhbz4ytfhuw5t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fdmh9o1gjhbz4ytfhuw5t.png" alt="Image description" width="800" height="755"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And now, you can access any profile/host by using &lt;code&gt;ssh &amp;lt;profile&amp;gt;&lt;/code&gt;, and that's its.&lt;/p&gt;

&lt;p&gt;Example accesing the project 01 with the user &lt;code&gt;wm-lim4mik3&lt;/code&gt;:&lt;br&gt;
&lt;a href="https://media2.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%2Fh1nmpyoyc4r1kgympjw7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fh1nmpyoyc4r1kgympjw7.png" alt="Image description" width="800" height="78"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Example accesing the project 02 with the user &lt;code&gt;Lim4Mik3&lt;/code&gt;:&lt;br&gt;
&lt;a href="https://media2.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%2Fgwhhfh443wvywu6vraw6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fgwhhfh443wvywu6vraw6.png" alt="Image description" width="800" height="40"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And that's it for today, guyss!&lt;/p&gt;

&lt;p&gt;Let me know your thoughts about this article in the comments section below.&lt;/p&gt;

</description>
      <category>ssh</category>
      <category>frontend</category>
      <category>cloud</category>
      <category>linux</category>
    </item>
    <item>
      <title>Javascript fundamentals - The beginning</title>
      <dc:creator>Leonardo Oliveira</dc:creator>
      <pubDate>Thu, 25 Jul 2024 05:06:55 +0000</pubDate>
      <link>https://dev.to/lim4mik3/javascript-fundamentals-the-beginning-759</link>
      <guid>https://dev.to/lim4mik3/javascript-fundamentals-the-beginning-759</guid>
      <description>&lt;p&gt;Some new developers or even those experience, can face it issues or difficulties case don't have a solid knowledge of the fundamentals.&lt;/p&gt;

&lt;p&gt;To solve this, in this series, i wanna recap the javascript fundamentals to keep it fresh and to help any dev that come here to remember any specific topic.&lt;/p&gt;

&lt;p&gt;First of all, What we gonna talk about?&lt;/p&gt;

&lt;p&gt;All javascript fundamentals, from scratch to hero!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The fundamentals&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  What is Javascript?
&lt;/h3&gt;

&lt;p&gt;Javascript is a programming language rich and complex, it be able to apply in very scenarios and a wide applications range.&lt;/p&gt;

&lt;p&gt;Here we can see some exclusive characteristics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Is a interpreted and JIT compiled programming language;&lt;/li&gt;
&lt;li&gt;Has dynamic types;&lt;/li&gt;
&lt;li&gt;Based on Prototypes;&lt;/li&gt;
&lt;li&gt;Create with First-class functions;&lt;/li&gt;
&lt;li&gt;Has clousores;&lt;/li&gt;
&lt;li&gt;Event loop and non-blocking I/O;&lt;/li&gt;
&lt;li&gt;Error handling with try/catch;&lt;/li&gt;
&lt;li&gt;Flexible objects and arrays;&lt;/li&gt;
&lt;li&gt;Template strings;&lt;/li&gt;
&lt;li&gt;Modularity and support for module imports;&lt;/li&gt;
&lt;li&gt;Support to asyncronhuos programming;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And much more...&lt;/p&gt;

&lt;p&gt;For our porpose, these characteristics that's enough. We gonna explore each one of those points, we going get a solid knowledge of them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Intepreted and JIT compiled
&lt;/h2&gt;

&lt;p&gt;Javascript was traditionallity an interpreted language, meaning code is executed line by line. Nowdays, with advanced Javascript engines most code is compiled on the fly using Just in Time techniques to improve performance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Dynamic types
&lt;/h2&gt;

&lt;p&gt;JavaScript is a dynamically typed language, allowing the same variable to store different types of data at different times. This offers flexibility, but can also lead to errors that are more difficult to track down.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prototypes
&lt;/h2&gt;

&lt;p&gt;Instead of using traditional classes found in languages like C++ or Java, JavaScript uses prototypes for inheritance. This allows inheritance of properties and methods from one object to another.&lt;/p&gt;

&lt;h2&gt;
  
  
  First-class functions
&lt;/h2&gt;

&lt;p&gt;JavaScript treats functions as first-class objects, allowing them to be assigned to variables, passed as arguments to other functions, returned from functions, and have their own properties and methods.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closure
&lt;/h2&gt;

&lt;p&gt;JavaScript supports closures, a powerful feature that allows functions to remember and access variables in the scope where they were created, even after the outer scope has ended.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>003 - TSExpert | Transform Tuple's into Object</title>
      <dc:creator>Leonardo Oliveira</dc:creator>
      <pubDate>Thu, 25 Jul 2024 05:04:01 +0000</pubDate>
      <link>https://dev.to/lim4mik3/003-tsexpert-transform-tuples-into-object-1mp1</link>
      <guid>https://dev.to/lim4mik3/003-tsexpert-transform-tuples-into-object-1mp1</guid>
      <description>&lt;p&gt;Greetings, Devs!&lt;br&gt;
Here's Leonardo once again, embarking on our journey to master TypeScript.&lt;/p&gt;

&lt;p&gt;Today, we won't be copying any built-in utilities; instead, we'll create a new and exclusive utility.&lt;/p&gt;

&lt;p&gt;We are going to craft a type that transforms tuple types into object types.&lt;/p&gt;

&lt;p&gt;First and foremost, let's take a quick overview of what a tuple is.&lt;/p&gt;

&lt;p&gt;A tuple is a data structure that allows you to store more than one data type in an array. It looks something like this:&lt;/p&gt;

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

&lt;p&gt;As we've seen, we can map various data types into a single array, which proves to be very helpful in numerous real-world scenarios.&lt;/p&gt;

&lt;p&gt;However, another common and useful case is transforming this tuple declaration into another object declaration with the same properties and values. But here's where we run into a problem – the DRY principle, "DON'T REPEAT YOURSELF"; we end up with repeated code.&lt;/p&gt;

&lt;p&gt;Fear not, TypeScript is our ally and always comes to our aid.&lt;/p&gt;

&lt;p&gt;We can reuse this declaration by converting it into another, thus avoiding redundant type declarations.&lt;/p&gt;

&lt;p&gt;Now it's our time to shine as we delve into how to accomplish this with excellence:&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating Our Utility
&lt;/h2&gt;

&lt;p&gt;Let's name it the TransformToObject type.&lt;/p&gt;

&lt;p&gt;Before we get our hands dirty with code, let's explore the theory under the hood.&lt;/p&gt;

&lt;p&gt;We need to create the type and receive a generic with the typeof the tuple. Afterward, we can iterate over this tuple. But hold on, it is an array... Bah, we got stuck!! 🤯&lt;/p&gt;

&lt;p&gt;No worries, it's simple. We need to iterate over the tuple and, in turn, iterate over the array. How? Let's see:&lt;/p&gt;

&lt;p&gt;DISCLAIMER: The most common way to use tuples is by declaring them as readonly, so we'll need to handle this.&lt;/p&gt;

&lt;p&gt;Let's create this together, step by step.&lt;/p&gt;

&lt;p&gt;First, let's create the type declaration:&lt;/p&gt;

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

&lt;p&gt;Great, now we're able to receive the tuple as a generic prop.&lt;/p&gt;

&lt;p&gt;We are going to iterate over each tuple prop and redeclare it as a key/value pair of that object. It's something like this:&lt;/p&gt;

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

&lt;p&gt;But, alas, we encountered an error:&lt;/p&gt;

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

&lt;p&gt;The compiler's type system has already given us a solution. This error occurred because we're trying to iterate over an unknown Type T, which can lead to an error.&lt;/p&gt;

&lt;p&gt;To solve this, let's be specific about what the type of the T generic is, like this:&lt;/p&gt;

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

&lt;p&gt;I changed the code, but I still receive an error! What the heck is going on?!!!&lt;/p&gt;

&lt;p&gt;Hold on, dude...&lt;/p&gt;

&lt;p&gt;TypeScript is correct; this error is caused by typing the generic as an array of strings or numbers, but we're trying to iterate over the methods of that array, not over their values.&lt;/p&gt;

&lt;p&gt;Now that we are also going to iterate over the array, it's very simple:&lt;/p&gt;

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

&lt;p&gt;By putting the number inside brackets next to T, we're iterating over that array's properties.&lt;/p&gt;

&lt;p&gt;And with that, we're done!! Puff... this task drained all my energy lol hahaha&lt;/p&gt;

&lt;p&gt;Let's give it a try:&lt;/p&gt;

&lt;p&gt;Pass a tuple to this utility, and we get the following result:&lt;/p&gt;

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

&lt;p&gt;Hover the mouse over the new type, and we get this:&lt;/p&gt;

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

&lt;p&gt;Exactly what we wanted!&lt;/p&gt;

&lt;p&gt;With this very simple example, we can expand our TypeScript knowledge.&lt;/p&gt;

&lt;p&gt;🤩 That's it for today, folks! 🤩&lt;/p&gt;

&lt;p&gt;Follow me for more content about TypeScript, JavaScript, React, and stuff related to these stacks.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>002 - TSExpert | Readonly Typescript</title>
      <dc:creator>Leonardo Oliveira</dc:creator>
      <pubDate>Sat, 02 Dec 2023 19:43:33 +0000</pubDate>
      <link>https://dev.to/lim4mik3/002-tsexpert-readonly-typescript-4fde</link>
      <guid>https://dev.to/lim4mik3/002-tsexpert-readonly-typescript-4fde</guid>
      <description>&lt;h2&gt;
  
  
  Wasup, guys...
&lt;/h2&gt;



&lt;p&gt;I hope you guys are doing well&lt;/p&gt;

&lt;p&gt;Today, one more time we're crafiting other typescript utility for studies purposes. The guy of the moment is the &lt;code&gt;Readonly&lt;/code&gt; utility.&lt;/p&gt;

&lt;p&gt;That built-in utility get a type N and transform all of their properties in readonly properties, creating a safe type without overrides.&lt;/p&gt;

&lt;p&gt;Out of the box, typescript already have this utility for production uses. But we'll creating a clone of it today.&lt;/p&gt;

&lt;p&gt;Let's see how it works in your default implementation:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8ZmPoNls--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58zpbpkenz66ku0i75oj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8ZmPoNls--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58zpbpkenz66ku0i75oj.png" alt="Image description" width="800" height="485"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Alright, let's assume that on this case for some reason, assigning this prop was not allowed, because the admin role is a security level, and cannot be changed manually.&lt;/p&gt;

&lt;p&gt;In this case, typescript not helping us, now is the time of &lt;code&gt;Readonly&lt;/code&gt; utility shine bright.&lt;/p&gt;

&lt;p&gt;We can use it, for set all of these properties as readonly property, that is, we're safing lock all properties to never alter.&lt;/p&gt;

&lt;p&gt;It looks something like this:&lt;/p&gt;

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

&lt;p&gt;In our &lt;code&gt;Props&lt;/code&gt; type declaration, we wrapped it in &lt;code&gt;Readonly&lt;/code&gt; default built-in utility and from now on, all props are locked, their are readonly properties.&lt;/p&gt;

&lt;p&gt;Instantly we got an error:&lt;/p&gt;

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

&lt;p&gt;And typescript now, dont allow us to override an readonly prop, this is very useful in this and others cases.&lt;/p&gt;



&lt;h3&gt;
  
  
  🔨 As usual, now we'll create our own implementation of this utility 🔧
&lt;/h3&gt;



&lt;p&gt;Why?... &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"What a cannot create, i don't understand" - Feynman R.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Our own implementation
&lt;/h2&gt;

&lt;p&gt;This utility is very easy to create, the only thing we need to do is create a new object with a &lt;em&gt;readonly&lt;/em&gt; prefix in each property.&lt;/p&gt;

&lt;p&gt;Let's call it, &lt;em&gt;MyReadonly&lt;/em&gt;, our utility will receive a generic , and override each prop type with readonly, in this way:&lt;/p&gt;

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

&lt;p&gt;Now, works as the built-in utility.&lt;/p&gt;

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

&lt;p&gt;🤩 That's it for today, folks! 🤩&lt;/p&gt;

&lt;p&gt;Follow me for more content about Typescript, Javascript, React and stuffs of these stack content.&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>diy</category>
      <category>programming</category>
      <category>frontend</category>
    </item>
    <item>
      <title>001 - TSExpert | Pick Typescript 🔥</title>
      <dc:creator>Leonardo Oliveira</dc:creator>
      <pubDate>Thu, 23 Nov 2023 06:01:00 +0000</pubDate>
      <link>https://dev.to/lim4mik3/pick-typescript-001-tsexpert-hcf</link>
      <guid>https://dev.to/lim4mik3/pick-typescript-001-tsexpert-hcf</guid>
      <description>&lt;p&gt;Hello folks! 👋🏼&lt;/p&gt;

&lt;p&gt;Once again, we're here, and today we're diving into the world of a TypeScript built-in utility—specifically, the Pick utility.&lt;/p&gt;

&lt;p&gt;It comes pre-installed with TypeScript and is a handy tool for our daily tasks. But... what exactly is it designed for, and how does it help us?&lt;/p&gt;

&lt;p&gt;This utility type has a semantic name because it literally picks certain types for us, provided by a primary type. I'll demonstrate it for you.&lt;/p&gt;

&lt;p&gt;Let's suppose we have a blog application, and we create a type definition called &lt;code&gt;User&lt;/code&gt;, as follows:&lt;/p&gt;

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

&lt;p&gt;It works very well, but... now we need to implement a header with a small section that must have the name of the user and their email.&lt;/p&gt;

&lt;p&gt;We've created the component, and let's declare the component's props. The most common approach is to create a new type for this component, but now the Pick utility shines bright!&lt;/p&gt;

&lt;p&gt;Instead of creating a new type, we can just 'pick' some information from that &lt;code&gt;User&lt;/code&gt; type. Let's see how:&lt;/p&gt;

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

&lt;p&gt;That's it. Our new type called &lt;code&gt;HeaderProps&lt;/code&gt; inherits the name and email props from the &lt;code&gt;User&lt;/code&gt; type.&lt;/p&gt;

&lt;p&gt;Don't believe me? Okay, I'll prove to you that using Pick is the same thing as if we created this new type by declaring it from scratch.&lt;/p&gt;

&lt;p&gt;If we hover the mouse over the &lt;code&gt;HeaderProps&lt;/code&gt; declaration, TypeScript shows us the format of this type, and voila, it looks exactly how we wanted!&lt;/p&gt;

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

&lt;p&gt;It's really easy to use, and it's helpful.&lt;/p&gt;

&lt;p&gt;⚠️ BUT NOW, I NEED TO ASK YOU A QUESTION! ⚠️&lt;/p&gt;

&lt;p&gt;Do we really understand how the Pick utility works and how it performs this 'magic'?&lt;/p&gt;

&lt;p&gt;As our friend Richard Feynman says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"What I cannot create, I do not understand."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For this question, the best answer is to apply all of these principles by working on a new type, our utility-type called &lt;code&gt;Just&lt;/code&gt; it'll be the same thing that Pick built-in utility.&lt;/p&gt;

&lt;p&gt;The act of creating a new type with the same behaviors as the built-in utility just puts our concepts and knowledge about this utility to the test.&lt;/p&gt;

&lt;p&gt;In summary, we need to receive a first type and the respective props that we want to keep. Let's get started.&lt;/p&gt;

&lt;p&gt;After spending much time working on it...&lt;/p&gt;

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

&lt;p&gt;Here's our own implementation of the Pick utility.&lt;/p&gt;

&lt;p&gt;You can see that I've given some semantic names to my props. Let's check out each of them.&lt;/p&gt;

&lt;p&gt;First, I created a type called &lt;code&gt;Just&lt;/code&gt;, which receives two generics. The first will be the Primary type, the type from which we will filter out the specified props. The second generic represents the keys of the props that we want to keep.&lt;/p&gt;

&lt;p&gt;After this, I simply iterate over the expected keys we want to keep, and for each key, I include it in a new object.&lt;/p&gt;

&lt;p&gt;Working as the original pick utility:&lt;/p&gt;

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

&lt;p&gt;I hope that this it will very helpful for you. &lt;/p&gt;

&lt;p&gt;Follow me for more contents about TS stack.&lt;/p&gt;

</description>
      <category>diy</category>
      <category>typescript</category>
      <category>react</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
