<?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: Alex Escalante</title>
    <description>The latest articles on DEV Community by Alex Escalante (@alex_escalante).</description>
    <link>https://dev.to/alex_escalante</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%2F20182%2Fe2ec4eb1-7c90-4cf9-8c13-473fc7d5d9cf.jpeg</url>
      <title>DEV Community: Alex Escalante</title>
      <link>https://dev.to/alex_escalante</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/alex_escalante"/>
    <language>en</language>
    <item>
      <title>Proyecto base para construir una aplicación con NestJS + Astro + Prisma + PG

Por si a alguien le sirve, utilicé este repo para un taller de programación que di 
hace algunas semanas

https://github.com/Audelabs/nodejs-workshop</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Fri, 17 Oct 2025 20:18:49 +0000</pubDate>
      <link>https://dev.to/alex_escalante/proyecto-base-para-construir-una-aplicacion-con-nestjs-astro-prisma-pg-por-si-a-alguien-le-354e</link>
      <guid>https://dev.to/alex_escalante/proyecto-base-para-construir-una-aplicacion-con-nestjs-astro-prisma-pg-por-si-a-alguien-le-354e</guid>
      <description>&lt;p&gt;

&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://github.com/Audelabs/nodejs-workshop" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fopengraph.githubassets.com%2Ff3c5a12aa20cc17fbfc5125458117585f6496cf489c38d953fbe40389e9cc29e%2FAudelabs%2Fnodejs-workshop" height="auto" class="m-0"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://github.com/Audelabs/nodejs-workshop" rel="noopener noreferrer" class="c-link"&gt;
            GitHub - Audelabs/nodejs-workshop: Proyecto base para construir una aplicación con NestJS + Astro + Prisma + PG · GitHub
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Proyecto base para construir una aplicación con NestJS + Astro + Prisma + PG - Audelabs/nodejs-workshop
          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.githubassets.com%2Ffavicons%2Ffavicon.svg"&gt;
          github.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;




</description>
    </item>
    <item>
      <title>I am very happy for being here for 8 years. Not only have I read and learned many interesting things, I have also seldomly used this place to share some of my own experiences and thinking. Thanks to all for this journey!</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Fri, 30 May 2025 02:15:45 +0000</pubDate>
      <link>https://dev.to/alex_escalante/i-am-very-happy-for-being-here-for-8-years-not-only-have-i-read-and-learned-many-interesting-5dnl</link>
      <guid>https://dev.to/alex_escalante/i-am-very-happy-for-being-here-for-8-years-not-only-have-i-read-and-learned-many-interesting-5dnl</guid>
      <description></description>
      <category>career</category>
      <category>gratitude</category>
      <category>community</category>
    </item>
    <item>
      <title>My honest and minimal review of Leonardo.AI</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Sun, 09 Mar 2025 20:26:43 +0000</pubDate>
      <link>https://dev.to/alex_escalante/my-honest-and-minimal-review-of-leonardoai-3kh6</link>
      <guid>https://dev.to/alex_escalante/my-honest-and-minimal-review-of-leonardoai-3kh6</guid>
      <description>&lt;p&gt;I just canceled my subscription to LeonardoAI. It wasn’t much since I was on the cheaper plan. I subscribed with the intention of using it to generate assets for the websites I build.&lt;/p&gt;

&lt;p&gt;To be honest, I found very few of the images actually useful. No matter the model, most looked too artificial to me. Some were beautiful, artistic, and interesting—but none had real business value beyond maybe blog illustrations. Definitely not for landing pages, or at least not for most of my clients.&lt;/p&gt;

&lt;p&gt;For example, one day I tried using LeonardoAI to create images of people in everyday office interactions. Some were nice, even usable—except the meetings looked more like a UNESCO conference than a regular office day. The photos felt unnecessarily inclusive, to put it bluntly.&lt;/p&gt;

&lt;p&gt;On the other hand, when I tried to nudge LeonardoAI into generating more Latin-looking people, they all came out looking the same, with a sad mojado expression. Maybe the AI read the inner Mexican in me—I really don’t know. The best I got from this experiment was a batch of bearded guys in an office. I assure you, this time the AI wasn’t reading my mind.&lt;/p&gt;

&lt;p&gt;So I started using it for memes, beautiful faces, and creative images to share on social media. It’s an okay tool for that, if you see my point.&lt;/p&gt;

&lt;p&gt;But nowadays, there’s lots of competition.&lt;/p&gt;

&lt;p&gt;Today, I tried using LeonardoAI for something the competition is starting to make very easy: creating consistent characters.&lt;/p&gt;

&lt;p&gt;I took one of my images from LeonardoAI and asked it to generate a new one using it as a reference. It was a woman sitting at her desk—I just wanted her laughing and stretching her back.&lt;/p&gt;

&lt;p&gt;And what did I get? One of those ugly, multi-limbed monstrosities with extra hands. In 2025, seriously? That’s when I decided to close that little $10 monthly leak.&lt;/p&gt;

&lt;p&gt;Then, as a final insult, they told me I’d lose all my unused credits! I had no idea, and I found that pretty abusive. But if I wasn’t going to use it anyway, and on top of that, they’re pushy and greedy… well, I’d rather lose my credits and move on to greener pastures.&lt;/p&gt;

</description>
      <category>rant</category>
      <category>ai</category>
    </item>
    <item>
      <title>From Prisma to Drizzle: Shedding the Magic, Embracing SQL</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Wed, 05 Mar 2025 01:00:34 +0000</pubDate>
      <link>https://dev.to/alex_escalante/from-prisma-to-drizzle-shedding-the-magic-embracing-sql-4lcm</link>
      <guid>https://dev.to/alex_escalante/from-prisma-to-drizzle-shedding-the-magic-embracing-sql-4lcm</guid>
      <description>&lt;p&gt;When we first decided to use Prisma ORM for one of our Node.js services, I was genuinely happy with the choice. It offers a very ergonomic API—“friendly” at first glance, though you still have to figure it out—and it allowed my team to work without deep SQL knowledge.&lt;/p&gt;

&lt;p&gt;But then, things changed.&lt;/p&gt;

&lt;p&gt;As we got deeper into SQL, started using stored procedures, and explored more of PostgreSQL’s powerful features, Prisma began to feel more like an obstacle than a solution. Instead of facilitating our workflow, it made working with these advanced SQL features more cumbersome.&lt;/p&gt;

&lt;p&gt;One thing that really started to bother me was the way Prisma applies magic to return types. It makes them practically impossible to share seamlessly, for instance, with my React clients. I still had to manually define all my DTOs, which felt like a step backwards. Maybe I was naive to expect otherwise, but for a while, I even considered writing my own Prisma plugin to generate DTOs—an overly complex path, to say the least.&lt;/p&gt;

&lt;p&gt;So, when the time came to build a new service backed by PostgreSQL, we decided to take a different approach. Enter Drizzle ORM.&lt;/p&gt;

&lt;p&gt;Drizzle is simpler. It feels more like writing SQL. There’s no overwhelming magic, just solid TypeScript support that actually helps rather than gets in the way. Sure, I still have to write my DTOs by hand when needed, but at least I’m not stumbling through Prisma’s enchanted forest of abstractions.&lt;/p&gt;

&lt;p&gt;In the end, I’d rather have control than illusions.&lt;/p&gt;

&lt;p&gt;PD: Did I mention Drizzle is waaay more performant than Prisma?&lt;/p&gt;

</description>
    </item>
    <item>
      <title>A glimpse into the algebra of type systems</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Thu, 04 Apr 2024 18:40:00 +0000</pubDate>
      <link>https://dev.to/alex_escalante/a-glimpse-into-the-algebra-of-type-systems-2gee</link>
      <guid>https://dev.to/alex_escalante/a-glimpse-into-the-algebra-of-type-systems-2gee</guid>
      <description>&lt;p&gt;I just saw this very interesting video about writing programs which inherently &lt;a href="https://youtu.be/z-0-bbc80JM?si=GMAGB35X2OZqxnGH" rel="noopener noreferrer"&gt;make invalid state unrepresentable&lt;/a&gt;. This might be a very important concept to understand, specially if you are still learning or you have a background in languages which do not provide strong typing.&lt;/p&gt;

&lt;p&gt;An "algebraic type system" in computer programming refers to a system that allows the construction of complex types from simple types using algebraic operations. These operations typically include sum (union) and product (combination) of types. Algebraic type systems are a powerful tool for modeling data in a way that leverages the type system of a programming language to enforce constraints and invariants about the data, thus making programs more robust and easier to reason about. Rust and TypeScript are two languages that utilize algebraic type systems in different ways.&lt;/p&gt;

&lt;h3&gt;
  
  
  Sum Types (Union Types)
&lt;/h3&gt;

&lt;p&gt;Sum types, also known as union types or variants, allow a value to be one of several different types. This is analogous to an "or" operation in algebra. In programming, this is useful for modeling situations where a value can come from disparate types and the program needs to handle each type differently.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rust:&lt;/strong&gt; Rust uses &lt;code&gt;enum&lt;/code&gt; to define sum types. An enum in Rust can have variants, and each variant can optionally carry data of different types. This allows Rust to model complex data structures and patterns like state machines or optional values (e.g., the &lt;code&gt;Option&amp;lt;T&amp;gt;&lt;/code&gt; type) in a type-safe manner.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript:&lt;/strong&gt; TypeScript has union types that are denoted by the &lt;code&gt;|&lt;/code&gt; operator. This allows a variable to hold a value of one of several types, enabling the programmer to write flexible code while still maintaining type safety. For example, a variable could be defined to hold either a &lt;code&gt;string&lt;/code&gt; or a &lt;code&gt;number&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Product Types (Structural Types)
&lt;/h3&gt;

&lt;p&gt;Product types allow the combination of several values into one compound value, where the "product" part comes from the idea of multiplying the possibilities of each component type to get the total possibilities for the compound type. This is useful for bundling related data together.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rust:&lt;/strong&gt; Rust has &lt;code&gt;structs&lt;/code&gt; that are used to create complex data types by combining values of multiple types. Each field of a struct can have a different type, allowing for the construction of rich, typed data structures.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript:&lt;/strong&gt; TypeScript uses interfaces and classes as its primary means of creating compound types. Interfaces in TypeScript are used to define the shape that objects should conform to, including the types of their properties and methods. Classes can implement interfaces and provide concrete implementations.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Algebraic Data Types in Programming
&lt;/h3&gt;

&lt;p&gt;Algebraic Data Types (ADTs) in programming languages like Rust and TypeScript enhance type safety and expressiveness. They allow developers to model data in a way that makes invalid states unrepresentable, significantly reducing runtime errors. For example, in Rust, the compiler checks match expressions for exhaustiveness, ensuring that all possible variants of an enum are handled. In TypeScript, union types and type guards can be used to ensure that code correctly handles different types at runtime.&lt;/p&gt;

&lt;p&gt;Both Rust and TypeScript leverage their type systems to provide compile-time guarantees about the behavior of the code, making the software development process more reliable and efficient. While the specifics of how they implement these features differ, the underlying principle of using types to enforce constraints and model complex data is a shared strength of both languages.&lt;/p&gt;

&lt;p&gt;Let's go through an example that showcases the use of TypeScript's union types along with type guards to handle different types at runtime safely.&lt;/p&gt;

&lt;h3&gt;
  
  
  Example: Handling Different Shapes
&lt;/h3&gt;

&lt;p&gt;Imagine you are working on a graphics application that can render different kinds of shapes. Each shape type (like Circle, Square) has its own set of properties. We want to write a function that takes a shape and prints its area, using union types for the shapes and type guards to distinguish between them at runtime.&lt;/p&gt;

&lt;h4&gt;
  
  
  Step 1: Define Shape Types with Union
&lt;/h4&gt;

&lt;p&gt;First, we define the types for the shapes we are handling: &lt;code&gt;Circle&lt;/code&gt; and &lt;code&gt;Square&lt;/code&gt;. We then define a &lt;code&gt;Shape&lt;/code&gt; type that is a union of these types.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Circle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Square&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;sideLength&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// Union type for any shape&lt;/span&gt;
&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Circle&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="nx"&gt;Square&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Step 2: Implement Type Guards
&lt;/h4&gt;

&lt;p&gt;TypeScript allows us to use user-defined type guards to check the type of a union type at runtime. A type guard is a function that returns a boolean and has a type predicate as the return type (&lt;code&gt;arg is Type&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;For our shapes, we can use the &lt;code&gt;kind&lt;/code&gt; property to distinguish between them:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;isCircle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt; &lt;span class="k"&gt;is&lt;/span&gt; &lt;span class="nx"&gt;Circle&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;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;circle&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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;isSquare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt; &lt;span class="k"&gt;is&lt;/span&gt; &lt;span class="nx"&gt;Square&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;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;square&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Step 3: Write a Function to Handle Shapes
&lt;/h4&gt;

&lt;p&gt;Now, we write a function that takes a &lt;code&gt;Shape&lt;/code&gt; and prints its area. We'll use the type guards to safely access the properties specific to each shape type.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;printArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isCircle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// TypeScript knows `shape` is a Circle here&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;area&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;radius&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Area of the circle: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;area&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isSquare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// TypeScript knows `shape` is a Square here&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;area&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sideLength&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Area of the square: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;area&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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="c1"&gt;// Example usage&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;circle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Circle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;radius&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;square&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Square&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;sideLength&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nf"&gt;printArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;circle&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Area of the circle: 12.566370614359172&lt;/span&gt;
&lt;span class="nf"&gt;printArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;square&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Area of the square: 9&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This example shows how TypeScript's union types and type guards can be used to write safe, type-checked code that handles multiple types at runtime. By checking the &lt;code&gt;kind&lt;/code&gt; property, we can tell TypeScript which type we are dealing with inside the &lt;code&gt;if&lt;/code&gt; blocks, allowing us to access the properties unique to each type without risking a runtime error.&lt;/p&gt;

</description>
      <category>rust</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Un vistazo al álgebra de sistemas de tipos</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Thu, 04 Apr 2024 18:24:00 +0000</pubDate>
      <link>https://dev.to/alex_escalante/un-vistazo-al-algebra-de-sistemas-de-tipos-59dl</link>
      <guid>https://dev.to/alex_escalante/un-vistazo-al-algebra-de-sistemas-de-tipos-59dl</guid>
      <description>&lt;p&gt;&lt;em&gt;Esta nota es una traducción de &lt;a href="https://dev.to/alex_escalante/a-glimpse-into-the-algebra-of-type-systems-2gee"&gt;la nota original&lt;/a&gt; que publiqué más temprano. No estoy seguro si hoy en día tiene sentido seguir traduciendo, díganmelo en los comentarios, por favor…&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;Acabo de ver este video muy interesante sobre cómo escribir programas que inherentemente &lt;a href="https://youtu.be/z-0-bbc80JM?si=GMAGB35X2OZqxnGH" rel="noopener noreferrer"&gt;hacen que el estado no válido sea irrepresentable&lt;/a&gt;. Este podría ser un concepto muy importante de entender, especialmente si todavía estás aprendiendo o tu experiencia está basada en lenguajes que no cuentan con un sistema estricto de tipos.&lt;/p&gt;

&lt;p&gt;Un "sistema de tipos algebraicos" en programación de computadoras se refiere a un sistema que permite la construcción de tipos complejos a partir de tipos simples mediante operaciones algebraicas. Estas operaciones suelen incluir suma (unión) y producto (combinación) de tipos. Los lenguajes con tipos algebraicos presentan oportunidades únicas para modelar datos imponiendo restricciones e invariantes sobre sus tipos, haciendo así que los programas sean más robustos y más fáciles de entender. &lt;/p&gt;

&lt;p&gt;Rust y TypeScript son dos lenguajes que utilizan sistemas de tipos algebraicos de diferentes maneras.&lt;/p&gt;

&lt;h3&gt;
  
  
  Suma de tipos (&lt;em&gt;union types&lt;/em&gt;)
&lt;/h3&gt;

&lt;p&gt;Los  &lt;em&gt;union types&lt;/em&gt;  permiten que un valor sea uno de varios tipos diferentes. Esto es análogo a una operación "or" en álgebra booleana. En programación, esto es útil para modelar situaciones en las que un valor puede provenir de tipos dispares y el programa necesita manejar cada tipo de manera diferente.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rust:&lt;/strong&gt; Rust usa &lt;code&gt;enum&lt;/code&gt; para definir tipos de suma. Una enumeración en Rust puede tener variantes y cada variante puede, opcionalmente, contener datos de diferentes tipos. Esto permite a Rust modelar estructuras y patrones de datos complejos, como máquinas de estado o valores opcionales (por ejemplo, el tipo &lt;code&gt;Option&amp;lt;T&amp;gt;&lt;/code&gt;) de forma segura.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript:&lt;/strong&gt; TypeScript tiene tipos de unión que se indican mediante el operador &lt;code&gt;|&lt;/code&gt;. Esto permite que una variable contenga un valor de uno de varios tipos, lo que permite al programador escribir código flexible manteniendo la seguridad de tipos. Por ejemplo, se podría definir una variable para contener un &lt;code&gt;string&lt;/code&gt; o un &lt;code&gt;number&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Producto de tipos (&lt;em&gt;structs&lt;/em&gt;)
&lt;/h3&gt;

&lt;p&gt;Un “tipos producto” permite la combinación de varios valores en un valor compuesto, donde la parte "producto" surge de la idea de multiplicar las posibilidades de cada tipo de componente para obtener las posibilidades totales del tipo compuesto. Esto es útil para agrupar datos relacionados.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Rust:&lt;/strong&gt; Rust tiene &lt;code&gt;struct&lt;/code&gt; que se utiliza para crear tipos de datos complejos combinando valores de múltiples tipos. Cada campo de una estructura puede tener un tipo diferente, lo que permite la construcción de estructuras de datos ricas y tipificadas.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript:&lt;/strong&gt; TypeScript utiliza interfaces y clases como su medio principal para crear tipos compuestos. Las interfaces en TypeScript se utilizan para definir la forma que deben adoptar los objetos, incluidos los tipos de sus propiedades y métodos. Las clases pueden implementar interfaces y proporcionar implementaciones concretas.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Tipos de datos algebraicos en programación
&lt;/h3&gt;

&lt;p&gt;Los tipos de datos algebraicos (ADT) en lenguajes de programación como Rust y TypeScript mejoran la seguridad y la expresividad de los tipos. Permiten a los desarrolladores modelar datos de una manera que hace que los estados no válidos sean irrepresentables, lo que reduce significativamente los errores de tiempo de ejecución. Por ejemplo, en Rust, el compilador verifica que las expresiones coincidentes sean exhaustivas, asegurando que se manejen todas las variantes posibles de una enumeración. En TypeScript, se pueden utilizar tipos de unión y protecciones de tipos para garantizar que el código maneje correctamente diferentes tipos en tiempo de ejecución.&lt;/p&gt;

&lt;p&gt;Tanto Rust como TypeScript aprovechan sus sistemas de tipos para brindar garantías en tiempo de compilación sobre el comportamiento del código, lo que hace que el proceso de desarrollo de software sea más confiable y eficiente. Si bien los detalles de cómo implementan estas características difieren, el principio subyacente de usar tipos para imponer restricciones y modelar datos complejos es una fortaleza compartida de ambos lenguajes.&lt;/p&gt;

&lt;p&gt;Veamos un ejemplo que muestra el uso de los tipos de unión de TypeScript junto con las protecciones de tipos para manejar diferentes tipos en tiempo de ejecución de forma segura.&lt;/p&gt;

&lt;h3&gt;
  
  
  Ejemplo: Distinguiendo entre diferentes figuras
&lt;/h3&gt;

&lt;p&gt;Imagine que está trabajando en una aplicación de gráficos que puede representar diferentes tipos de figuras. Cada figura (como círculo, cuadrado) tiene su propio conjunto de propiedades. Queremos escribir una función que tome una figura e imprima su área, usando &lt;em&gt;union types&lt;/em&gt; para las figuras y &lt;em&gt;type guards&lt;/em&gt; para distinguirlas en tiempo de ejecución.&lt;/p&gt;

&lt;h4&gt;
  
  
  Paso 1: Definir tipos de formas con unión
&lt;/h4&gt;

&lt;p&gt;Primero, definimos las figuras que estamos manejando: &lt;code&gt;Círculo&lt;/code&gt; y &lt;code&gt;Cuadrado&lt;/code&gt;. Luego definimos un tipo &lt;code&gt;Shape&lt;/code&gt; que es una unión de estos tipos.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Circle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Square&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;sideLength&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// Union type for any shape&lt;/span&gt;
&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Circle&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="nx"&gt;Square&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Paso 2: Implementar &lt;em&gt;type guards&lt;/em&gt;
&lt;/h4&gt;

&lt;p&gt;TypeScript nos permite usar “protectores de tipo” definidos por el usuario para verificar el tipo de un &lt;em&gt;union type&lt;/em&gt; en tiempo de ejecución. Un &lt;em&gt;type guard&lt;/em&gt; es una función que devuelve un valor booleano y tiene un predicado de tipo como tipo de retorno (&lt;code&gt;arg is Type&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;Para nuestras formas, podemos usar la propiedad &lt;code&gt;kind&lt;/code&gt; para distinguirlas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;isCircle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt; &lt;span class="k"&gt;is&lt;/span&gt; &lt;span class="nx"&gt;Circle&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;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;circle&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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;isSquare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt; &lt;span class="k"&gt;is&lt;/span&gt; &lt;span class="nx"&gt;Square&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;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;kind&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;square&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;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Paso 3: Escribir una función para manejar figuras
&lt;/h4&gt;

&lt;p&gt;Ahora, escribimos una función que toma una  figura e imprime su área. Usaremos los &lt;em&gt;type guards&lt;/em&gt; para acceder de forma segura a las propiedades específicas de cada tipo.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;printArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Shape&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isCircle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// TypeScript knows `shape` is a Circle here&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;area&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;radius&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Area of the circle: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;area&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;isSquare&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// TypeScript knows `shape` is a Square here&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;area&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;shape&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sideLength&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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Area of the square: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;area&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&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="c1"&gt;// Example usage&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;circle&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Circle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;circle&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;radius&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;square&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Square&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;kind&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;sideLength&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nf"&gt;printArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;circle&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Area of the circle: 12.566370614359172&lt;/span&gt;
&lt;span class="nf"&gt;printArea&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;square&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Area of the square: 9&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Este ejemplo muestra cómo los &lt;em&gt;union types&lt;/em&gt; y las &lt;em&gt;type guards&lt;/em&gt; de TypeScript se pueden usar para escribir código seguro con verificación de tipos que maneje múltiples tipos en tiempo de ejecución. Al verificar la propiedad &lt;code&gt;kind&lt;/code&gt;, podemos decirle a TypeScript con qué tipo estamos tratando dentro de los bloques &lt;code&gt;if&lt;/code&gt;, lo que nos permite acceder a las propiedades únicas de cada tipo sin correr el riesgo de un error de tiempo de ejecución.&lt;/p&gt;

</description>
      <category>rust</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Why Linux 6.8 Networking Updates are a Big Deal</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Tue, 05 Mar 2024 18:44:28 +0000</pubDate>
      <link>https://dev.to/alex_escalante/why-linux-68-networking-updates-are-a-big-deal-177f</link>
      <guid>https://dev.to/alex_escalante/why-linux-68-networking-updates-are-a-big-deal-177f</guid>
      <description>&lt;p&gt;I came across this article and it surprised me. They say this could improve performance by 40%. Wow!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.phoronix.com/news/Linux-6.8-Networking" rel="noopener noreferrer"&gt;https://www.phoronix.com/news/Linux-6.8-Networking&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The recent Linux kernel 6.8 release brings some major networking improvements that could have a significant impact on performance, especially for servers handling high volumes of network traffic. Here's why these updates are generating a lot of excitement:&lt;/p&gt;

&lt;h2&gt;
  
  
  Game-Changing XDP Enhancements
&lt;/h2&gt;

&lt;p&gt;One of the headliners is the introduction of XDP (eXpress Data Path) routing and AF_XDP sockets. XDP allows packets to be processed and routed entirely at the driver level, bypassing the traditional kernel network stack. This can unlock substantial performance gains for use cases like load balancing, DDoS protection, and high-frequency trading systems.&lt;/p&gt;

&lt;p&gt;The new AF_XDP socket type takes this a step further, enabling userspace applications to directly access XDP for ultra-high packet processing rates. These XDP enhancements open up exciting possibilities for applications requiring extreme networking performance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Better Packet Processing
&lt;/h2&gt;

&lt;p&gt;But the benefits aren't limited to specialized scenarios. Improvements to Generic Receive Offload (GRO), which combines multiple incoming packets into larger chunks for more efficient processing, can boost performance for workloads involving many small packets – a common characteristic of REST APIs and microservices.&lt;/p&gt;

&lt;p&gt;Additionally, better integration of hardware offload capabilities for TCP receive processing can further reduce CPU overhead and improve throughput for TCP-based network traffic.&lt;/p&gt;

&lt;h2&gt;
  
  
  Monitoring and Optimization
&lt;/h2&gt;

&lt;p&gt;The Linux 6.8 kernel also enhances various network performance counters and monitoring capabilities. This can help identify bottlenecks and fine-tune network performance, benefiting a wide range of applications and services.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-World Benefits
&lt;/h2&gt;

&lt;p&gt;While the actual performance impact will depend on factors like hardware capabilities and workload characteristics, the networking updates in Linux 6.8 hold great promise for improving throughput, reducing latency, and optimizing CPU usage – especially for servers handling high volumes of network requests.&lt;/p&gt;

&lt;p&gt;From cloud computing to content delivery networks, from real-time trading systems to microservices architectures, the Linux 6.8 networking improvements have the potential to unlock new levels of performance and efficiency across diverse domains.&lt;/p&gt;

&lt;p&gt;As the world becomes increasingly interconnected and network-intensive, these advancements in the Linux kernel couldn't have come at a better time. It's an exciting step forward for the open-source community and a testament to the ongoing innovation in the Linux ecosystem.&lt;/p&gt;

</description>
      <category>linux</category>
      <category>kernel</category>
      <category>tcp</category>
      <category>performance</category>
    </item>
    <item>
      <title>Terraform is making my day impossible</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Tue, 12 Dec 2023 03:41:39 +0000</pubDate>
      <link>https://dev.to/alex_escalante/terraform-is-making-my-day-impossible-45l2</link>
      <guid>https://dev.to/alex_escalante/terraform-is-making-my-day-impossible-45l2</guid>
      <description>&lt;p&gt;The more I use HashiCorp's Terraform, the more I get convinced this is a half-baked product with more resources dedicated to developing the business model rather than the actual product.&lt;/p&gt;

&lt;p&gt;Connecting to an external resource, like my Godaddy DNS records, turned out to be impossible. If I try to update just one IP for my app, I would lose all my other unrelated DNS records. It's all or nothing for Terraform: either you manage all your records or you don't. Import doesn't work, even when advertised, and I tried two providers for this, the second one supposedly adding import capabilities. It didn't work.&lt;/p&gt;

&lt;p&gt;I had to use a &lt;code&gt;null_resource&lt;/code&gt; and an external shell script that issues HTTP requests against the GoDaddy API to update my IPs. And Terraform can't query the state of this resource of course, so this is just half a solution.&lt;/p&gt;

&lt;p&gt;Today, I am trying to get it to track my provisioning (done with Ansible) using a &lt;code&gt;null_resource&lt;/code&gt; and md5 checks of local files (using &lt;code&gt;data local_file&lt;/code&gt;). If the state is clean, &lt;code&gt;terraform apply&lt;/code&gt; might or might not work. After hanging for a while on some operation, it gets killed by the OS.&lt;/p&gt;

&lt;p&gt;If the first time works, the second time &lt;code&gt;terraform apply&lt;/code&gt; is run, it gets killed for sure. Everything comes to ashes and I sometime can't even &lt;code&gt;terraform destroy&lt;/code&gt; the damn thing again.   The whole thing feels strange and random. &lt;/p&gt;

&lt;p&gt;Anyway… this is just a rant, sorry. I might go back to my way of calling Ansible after Terraform is done with creating the droplets only but… what's the point? I could get Ansible to do the whole thing by itself.&lt;/p&gt;

&lt;p&gt;The idea was to tie everything together in a way that I could just call Terraform and have my infra recreated every time, only if needed, but today, Terraform is failing me at this.&lt;/p&gt;

</description>
      <category>terraform</category>
      <category>hashicorp</category>
      <category>devops</category>
      <category>rant</category>
    </item>
    <item>
      <title>I am formally a Typescript programmer!</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Thu, 11 Jun 2020 21:12:07 +0000</pubDate>
      <link>https://dev.to/alex_escalante/now-i-am-formally-a-typescript-programmer-3i5k</link>
      <guid>https://dev.to/alex_escalante/now-i-am-formally-a-typescript-programmer-3i5k</guid>
      <description>&lt;p&gt;I just migrated my current React project, which is not yet that big, just over a hundred files, and it was actually very easy because I used create-react-app and it offers great support for the language.&lt;/p&gt;

&lt;p&gt;It took me like 5 days to rewrite my components and data layer. There were some challenges, specially a couple of React contexts, but here I am!&lt;/p&gt;

&lt;p&gt;It feels like my browser got more intelligent. It's way easier to make a big refactoring, which usually happens a lot in the early stages of a project.&lt;/p&gt;

&lt;p&gt;If you struggle with complex projects in ES6, I commend you to try Typescript (or you could actually also try Flow). Static types can give you a lot of confidence and make your work more easy.&lt;/p&gt;

&lt;p&gt;But please, be sure to understand how the type system works in Typescript. It's very nice and flexible but different if you come from other languages with static typing. For instance, I work with C# on the backend and it's just not the same thing: Typescript mounts a static type system over a dynamic language. It's very nice, and more flexible, but different.&lt;/p&gt;

&lt;p&gt;What languages are you currently enjoying? I would like to know!&lt;/p&gt;

</description>
      <category>typescript</category>
    </item>
    <item>
      <title>A dive into testing Styled Components and React HOCs</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Thu, 24 Aug 2017 03:40:02 +0000</pubDate>
      <link>https://dev.to/alex_escalante/diving-into-testing-styled-components-and-react-hocs</link>
      <guid>https://dev.to/alex_escalante/diving-into-testing-styled-components-and-react-hocs</guid>
      <description>

&lt;p&gt;For my latest project, it made sense to use the very nice CSS in JS solution called &lt;a href="https://github.com/styled-components/jest-styled-components"&gt;styled-components&lt;/a&gt;, along with &lt;a href="https://facebook.github.io/jest/docs/snapshot-testing.html"&gt;snapshot testing&lt;/a&gt;, which is a way to save and compare snapshots of your component's rendering (HTML and CSS) in order to prevent unintended changes. One of this tests can replace several others checking for particular attributes of the rendering.&lt;/p&gt;

&lt;p&gt;Be noted that, in order to have nice snapshots using Jest and Styled Components, you have to install this &lt;a href="https://github.com/styled-components/jest-styled-components"&gt;additional package&lt;/a&gt;. Just read the docs and be sure to do the configuration required in case you use Enzyme, like me.&lt;/p&gt;

&lt;p&gt;Finally, when I went ahead using &lt;code&gt;shallow()&lt;/code&gt; by the book to test my button component, I wrote this:&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"renders correctly"&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="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;renderedComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;shallow&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;Button&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;props&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;Click&lt;/span&gt; &lt;span class="nx"&gt;me&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Button&amp;gt;&lt;/span&gt;&lt;span class="se"&gt;)&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;  &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;renderedComponent&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toMatchSnapshot&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;The output of the snapshot didn't look like the HTML or CSS I expected:&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Styled(styled.button)
  theme={
    Object {
      "bg": "white",
      "fg": "black",
    }
  }
&amp;gt;
  Click me!
&amp;lt;/Styled(styled.button)&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This initially puzzled me but then I realized that our &lt;code&gt;Button&lt;/code&gt; component is a stateless functional higher order component (HOC) that works like this:&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// assemble some props&lt;/span&gt;
  &lt;span class="c1"&gt;// decide which button to create&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;primary&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;PrimaryButton&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;ourProps&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="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;children&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/PrimaryButton&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&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;RegularButton&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;ourProps&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="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;children&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/RegularButton&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Since we are using &lt;code&gt;shallow()&lt;/code&gt; rendering, we won't get to the second level of components! So, this is where &lt;a href="https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/dive.md"&gt;&lt;code&gt;dive()&lt;/code&gt;&lt;/a&gt; comes in. This function:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Turns out that we have two layers under our Button component, one for primary, icon buttons and so, and a "base class" for all of them. This means that we ended up having to do a double dive, so we called it a &lt;code&gt;deepDive()&lt;/code&gt;:&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;deepDive&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;shallow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;dive&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;dive&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"renders correctly"&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="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;renderedComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;deepDive&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;Button&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;props&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;Click&lt;/span&gt; &lt;span class="nx"&gt;me&lt;/span&gt;&lt;span class="o"&gt;!&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Button&amp;gt;&lt;/span&gt;&lt;span class="se"&gt;)&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;  &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;renderedComponent&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toMatchSnapshot&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 fact, if you don't know how many layers your component will wrap, you can generalize the idea using recursion:&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;w&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="s2"&gt;"function"&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;dd&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dive&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;w&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// recursive diving&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;deepDive&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;dd&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;shallow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Look at how the &lt;code&gt;type()&lt;/code&gt;function on the &lt;code&gt;ShallowWrapper&lt;/code&gt;tells us if we have reached the DOM level or we can still &lt;code&gt;dive()&lt;/code&gt;again.&lt;/p&gt;

&lt;p&gt;After deep diving, snapshots came out containing only CSS and basic HTML. We now have the liberty to work at ease with the component or any of its subcomponents knowing that no visual alteration will pass unnoticed by our tests.&lt;/p&gt;

&lt;p&gt;Interaction tests work (we're only doing basic ones, clicks and disabled and so) and we got 100% coverage because every component layer goes exercised.&lt;/p&gt;


</description>
      <category>styledcomponents</category>
      <category>react</category>
    </item>
    <item>
      <title>react-select + allOption</title>
      <dc:creator>Alex Escalante</dc:creator>
      <pubDate>Sat, 19 Aug 2017 02:22:11 +0000</pubDate>
      <link>https://dev.to/alex_escalante/react-select--alloption</link>
      <guid>https://dev.to/alex_escalante/react-select--alloption</guid>
      <description>&lt;p&gt;If you are using the React library &lt;a href="https://github.com/JedWatson/react-select" rel="noopener noreferrer"&gt;react-select&lt;/a&gt;, you will find it doesn’t implement a “select all” option. It’s not difficult to implement this feature by yourself, just have a look at the following gist. You will even find how to make a localization wrapper on top of your control, in case you need it. &lt;/p&gt;

&lt;p&gt;Take a look at the relevant stuff:&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="c1"&gt;// specify props.allowSelectAll = true to enable!&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Select&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;allowSelectAll&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&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;ReactSelect&lt;/span&gt;
          &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
          &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{[&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;allOption&lt;/span&gt;&lt;span class="p"&gt;]}&lt;/span&gt;
          &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;selected&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;selected&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&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="sr"&gt;/&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;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;ReactSelect&lt;/span&gt;
        &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{[&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;allOption&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;options&lt;/span&gt;&lt;span class="p"&gt;]}&lt;/span&gt;
        &lt;span class="nx"&gt;onChange&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;selected&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="nx"&gt;selected&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&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="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
            &lt;span class="nx"&gt;selected&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;selected&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;allOption&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&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;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;options&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;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;selected&lt;/span&gt;&lt;span class="p"&gt;);&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="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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ReactSelect&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will find the full gist at:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://gist.github.com/AlexEscalante/251032be95767366742fce75bdfa269b" rel="noopener noreferrer"&gt;https://gist.github.com/AlexEscalante/251032be95767366742fce75bdfa269b&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Please drop a line if you find this useful or have any comment!&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
