<?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: carban</title>
    <description>The latest articles on DEV Community by carban (@carban).</description>
    <link>https://dev.to/carban</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%2F1236930%2F9c0f84c1-c08d-4098-a0ba-011ee830d9c8.jpg</url>
      <title>DEV Community: carban</title>
      <link>https://dev.to/carban</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/carban"/>
    <language>en</language>
    <item>
      <title>Check it out!</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Fri, 09 Jan 2026 20:46:34 +0000</pubDate>
      <link>https://dev.to/carban/chek-it-out-14j2</link>
      <guid>https://dev.to/carban/chek-it-out-14j2</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/carban" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&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%2Fuser%2Fprofile_image%2F1236930%2F9c0f84c1-c08d-4098-a0ba-011ee830d9c8.jpg" alt="carban"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/carban/tired-of-bloated-api-clients-just-try-postbear-3dl9" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Tired of bloated API clients? Just try Postbear&lt;/h2&gt;
      &lt;h3&gt;carban ・ Jan 8&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#go&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#cli&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#api&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#ubuntu&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>go</category>
      <category>cli</category>
      <category>api</category>
      <category>ubuntu</category>
    </item>
    <item>
      <title>Tired of bloated API clients? Just try Postbear</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Thu, 08 Jan 2026 16:56:10 +0000</pubDate>
      <link>https://dev.to/carban/tired-of-bloated-api-clients-just-try-postbear-3dl9</link>
      <guid>https://dev.to/carban/tired-of-bloated-api-clients-just-try-postbear-3dl9</guid>
      <description>&lt;p&gt;Check my first posts about &lt;strong&gt;Postbear&lt;/strong&gt; 👉 &lt;a href="https://dev.to/carban/postbear-the-postman-alternative-in-your-terminal-ia2"&gt;I Built the Postman alternative&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For years, Postman and Insomnia have been the kings of API testing. They are feature-rich, polished, and powerful. But for many developers, they’ve also become bloated. What was once a simple tool now feels like an entire operating system just to send a GET request.&lt;/p&gt;

&lt;p&gt;It’s time to get boring about your API client and in the world of development, "boring" is a compliment. It means a tool that stays out of your way, works where you already live, and doesn't require a login to function.&lt;/p&gt;

&lt;p&gt;Here is a solution &lt;a href="https://github.com/carban/postbear" rel="noopener noreferrer"&gt;Postbear&lt;/a&gt;: a terminal-native powerhouse that combines the speed of a CLI with the intuitive navigation of a TUI.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem with "The Modern GUI" 🥱
&lt;/h2&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%2F5yvljdl11cwuv7aopakd.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%2F5yvljdl11cwuv7aopakd.png" alt="Postman boring" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We’ve all been there: you open Postman, it needs an update. Then it asks you to sign in to sync your "Workspaces." By the time you’re ready to test your endpoint, you’ve context-switched away from your code and into a heavy, electron-based window that eats up your RAM.&lt;/p&gt;

&lt;h2&gt;
  
  
  Postbear: Speed Meets Interface
&lt;/h2&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%2Fr33279wj8cdatavbque6.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%2Fr33279wj8cdatavbque6.png" alt="Postbear CLI look" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Postbear is built for the developer who lives in the terminal. It offers a dual-threat approach to API testing:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. The TUI: Visual Power Without the Bloat
&lt;/h3&gt;

&lt;p&gt;Unlike basic curl commands, Postbear features a robust Terminal User Interface (TUI). This gives you the visual organization of a GUI—sidebars for collections, request/response panes, and easy navigation—but it runs entirely inside your terminal.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Keyboard-Driven&lt;/strong&gt;: Navigate your API collections with keyboard speed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Low Overhead&lt;/strong&gt;: No heavy windows; just a fast, responsive interface that feels like part of your editor. Written in Golang one of the fastest programming languages&lt;/li&gt;
&lt;/ul&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%2Fgithub.com%2Fcarban%2Fpadfadfasboy%2Fblob%2Fmain%2Fimages%2F2.gif%3Fraw%3Dtrue" 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%2Fgithub.com%2Fcarban%2Fpadfadfasboy%2Fblob%2Fmain%2Fimages%2F2.gif%3Fraw%3Dtrue" alt="Using postbear TUI" width="760" height="427"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. The CLI: Automation at Your Fingertips
&lt;/h3&gt;

&lt;p&gt;Because Postbear is also a CLI (Command Line Interface), you can bypass the interface entirely for quick tasks.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scriptability&lt;/strong&gt;: You can trigger requests directly from scripts or your terminal history.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CI/CD Friendly&lt;/strong&gt;: Since it’s terminal-native, it integrates perfectly into automated workflows.&lt;/li&gt;
&lt;/ul&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%2Fgithub.com%2Fcarban%2Fpadfadfasboy%2Fblob%2Fmain%2Fimages%2F3.gif%3Fraw%3Dtrue" 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%2Fgithub.com%2Fcarban%2Fpadfadfasboy%2Fblob%2Fmain%2Fimages%2F3.gif%3Fraw%3Dtrue" alt="Using postbear CLI" width="1280" height="720"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why "Boring" is Better
&lt;/h2&gt;

&lt;p&gt;Why choose a terminal tool over a shiny app? It comes down to three things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Zero Context Switching&lt;/strong&gt;: Your code is in the terminal. Your logs are in the terminal. Your API client should be, too. Moving between your IDE and Postbear feels seamless.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Plain Text Truth&lt;/strong&gt;: Postbear uses simple configuration files (.http). This means your API requests are version-controlled. You can commit your files directly to Git. No more "exporting collections" or proprietary cloud syncs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Privacy &amp;amp; Ownership&lt;/strong&gt;: Postbear is local-first. Your data isn't sitting on someone else's server; it’s in your file system.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion: Simplify Your Stack
&lt;/h2&gt;

&lt;p&gt;Postman is a Ferrari—it’s impressive, but sometimes you just need a reliable bike to get across the street. By choosing a terminal-native tool like Postbear, you reclaim your screen real estate and your mental focus.&lt;/p&gt;

&lt;p&gt;If you’re ready to ditch the loading screens and bloated screens, it’s time to give Postbear a spin.&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%2Ftal2h5ojj4eyjfsq64vn.gif" 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%2Ftal2h5ojj4eyjfsq64vn.gif" alt="The bear" width="220" height="164"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🌟 I need your help to grow!
&lt;/h2&gt;

&lt;p&gt;Postbear is open-source and just getting started. I have big dreams for this tool, and I’d love for the community to help shape its future. Check it out here: 👉 &lt;a href="https://github.com/carban/postbear" rel="noopener noreferrer"&gt;github.com/carban/postbear&lt;/a&gt;&lt;/p&gt;

</description>
      <category>go</category>
      <category>cli</category>
      <category>api</category>
      <category>ubuntu</category>
    </item>
    <item>
      <title>I Built the Postman alternative</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Fri, 02 Jan 2026 20:15:29 +0000</pubDate>
      <link>https://dev.to/carban/postbear-the-postman-alternative-in-your-terminal-ia2</link>
      <guid>https://dev.to/carban/postbear-the-postman-alternative-in-your-terminal-ia2</guid>
      <description>&lt;p&gt;Meet &lt;strong&gt;Postbear&lt;/strong&gt;: The Postman alternative your terminal has been waiting for!&lt;/p&gt;

&lt;p&gt;Hey everyone! I love Postman, but sometimes I just want to stay in my terminal, keep things lightweight, and move fast. I couldn't find a TUI/CLI tool that hit that "sweet spot" of power and simplicity—so I built &lt;a href="https://github.com/carban/postbear" rel="noopener noreferrer"&gt;Postbear&lt;/a&gt; as alternative.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/carban/postbear" rel="noopener noreferrer"&gt;Postbear&lt;/a&gt; is a high-speed, lightweight API client designed for developers who live in the command line. No heavy Electron apps, just simplicity.&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%2Frb2gamebhqe653dr1mnh.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%2Frb2gamebhqe653dr1mnh.png" alt="How Postbear looks" width="800" height="437"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Why you’ll love Postbear:
&lt;/h3&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;⚡ Fast: Starts instantly. No splash screens, no loading bars.
🪶 Minimalist: Small footprint, ready to go.
🛠️ Powerful: Handles headers, body data, parameters, and support to .http files.
💻 Terminal-First: Built for the modern dev workflow.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
  
  
  Use FooAPI
&lt;/h3&gt;

&lt;p&gt;All the examples here uses &lt;a href="https://fooapi.com/" rel="noopener noreferrer"&gt;fooapi.com&lt;/a&gt; an API created by me some months ago. The platform provides realistic dummy data across several categories, which you can use to mock your projects and ideas. Here is the first post I made, check it out, it is awseome! &lt;a href="https://dev.to/carban/the-all-in-one-fake-api-for-developers-3hpn"&gt;FooAPI First Post&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Simple Usage
&lt;/h3&gt;

&lt;p&gt;TUI mode&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;postbear
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Read .http file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;postbear &lt;span class="nb"&gt;read&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;.http filepath]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;CLI mode&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;postbear run &lt;span class="o"&gt;[&lt;/span&gt;method] &lt;span class="o"&gt;[&lt;/span&gt;endpoint]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;TUI Mode&lt;/strong&gt;&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%2F5dcdp3ugznqilf3arpde.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%2F5dcdp3ugznqilf3arpde.png" alt="TUI Mode" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CLI Mode&lt;/strong&gt;&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%2Fqxzjhslb3l5himyotqwf.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%2Fqxzjhslb3l5himyotqwf.png" alt="CLI Mode" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  🌟 I need your help to grow!
&lt;/h3&gt;

&lt;p&gt;Postbear is open-source and just getting started. I have big dreams for this tool, and I’d love for the community to help shape its future.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How you can support:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;    Star it on GitHub: It helps others find the project!&lt;/li&gt;
&lt;li&gt;    Try it out: Give it a spin and let me know what you think.&lt;/li&gt;
&lt;li&gt;    Contribute: This is a personal project any feedback is welcome. for major changes, please open an issue first to discuss what you would like to change.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Check it out here: 👉 &lt;a href="https://github.com/carban/postbear" rel="noopener noreferrer"&gt;github.com/carban/postbear&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  OpenSource #WebDev #API #CLI #Postbear #Programming Tools
&lt;/h1&gt;

</description>
      <category>api</category>
      <category>programming</category>
      <category>opensource</category>
      <category>cli</category>
    </item>
    <item>
      <title>Wolfram's Automatas Explorer</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Mon, 16 Jun 2025 14:41:50 +0000</pubDate>
      <link>https://dev.to/carban/wolframs-1d-cellular-automatas-bi1</link>
      <guid>https://dev.to/carban/wolframs-1d-cellular-automatas-bi1</guid>
      <description>&lt;p&gt;Hello everyone!&lt;/p&gt;

&lt;p&gt;I've been working with cellular automata, and I decided to build an explorer platform that shows Wolfram's Rules &lt;a href="https://wolfram-automatas.vercel.app/" rel="noopener noreferrer"&gt;Wolfram's Automatas Explorer&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Here, you can find all 256 rules and see each one in action. Exploring the rules, you will find different kinds of behaviors: simplest, repetitive, complex, and even chaotic.&lt;/p&gt;

&lt;p&gt;Feel free to share feedback in the comments!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>react</category>
      <category>learning</category>
    </item>
    <item>
      <title>3D Data World Explorer</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Fri, 21 Feb 2025 18:05:11 +0000</pubDate>
      <link>https://dev.to/carban/3d-data-world-explorer-po9</link>
      <guid>https://dev.to/carban/3d-data-world-explorer-po9</guid>
      <description>&lt;h2&gt;
  
  
  My New Project
&lt;/h2&gt;

&lt;p&gt;Hello there!&lt;/p&gt;

&lt;p&gt;I'm working on a new personal project &lt;a href="https://3d-ivory.vercel.app/" rel="noopener noreferrer"&gt;&lt;strong&gt;3D Data World&lt;/strong&gt;&lt;/a&gt; this project aims to be a fun place where you can explore data about the world. I decided to start this project to put my data analyst skills into practice, such as: data collection, data cleaning and data visualization.&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%2Ftxflgemi1q5jea0ns4mk.gif" 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%2Ftxflgemi1q5jea0ns4mk.gif" alt="World gif" width="600" height="555"&gt;&lt;/a&gt;&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%2Ffb5qjmbxv4h76nu96mvu.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%2Ffb5qjmbxv4h76nu96mvu.png" alt="USA example" width="800" height="764"&gt;&lt;/a&gt;&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%2F5f1ug32ebddw8fcn49o1.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%2F5f1ug32ebddw8fcn49o1.png" alt="China example" width="800" height="764"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For now, I just have one single category that is &lt;strong&gt;Population&lt;/strong&gt;. You will find a slider where you can select a year, and the map will update accordingly, displaying the population for that year by adjusting the country's height and color. &lt;/p&gt;

&lt;p&gt;In the near future, I plan to add more categories and explore different ways to visualize the data.&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%2F2jjjdjjrcxx7bimb6ion.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%2F2jjjdjjrcxx7bimb6ion.png" alt="slider" width="800" height="213"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The frontend is built with &lt;a href="https://react.dev/" rel="noopener noreferrer"&gt;React&lt;/a&gt; and &lt;a href="https://cesium.com/" rel="noopener noreferrer"&gt;Cesium&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Country geometries were collected by &lt;a href="https://fooapi.com" rel="noopener noreferrer"&gt;fooapi.com&lt;/a&gt; using GeoJSON endpoints. You can know more about it in &lt;a href="https://dev.to/carban/fooapi-updates-your-all-in-one-fake-api-3cd"&gt;FooApi updates&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Population data by country over time was scraped from &lt;a href="https://ourworldindata.org/" rel="noopener noreferrer"&gt;ourworldindata.org&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What do you think?
&lt;/h2&gt;

&lt;p&gt;What kind of data would you like to see? If you have any feedback or ideas, feel free to share them in the comments section!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>react</category>
    </item>
    <item>
      <title>FooAPI Updates: Your All-in-One Fake API</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Wed, 29 Jan 2025 01:42:12 +0000</pubDate>
      <link>https://dev.to/carban/fooapi-updates-your-all-in-one-fake-api-3cd</link>
      <guid>https://dev.to/carban/fooapi-updates-your-all-in-one-fake-api-3cd</guid>
      <description>&lt;h2&gt;
  
  
  Hello there! 👋
&lt;/h2&gt;

&lt;p&gt;This is my second post on dev.to regarding my API, I want to continue posting updates about &lt;a href="https://fooapi.com" rel="noopener noreferrer"&gt;&lt;strong&gt;FooApi&lt;/strong&gt;&lt;/a&gt; here. You can read my first post to know more about the project and their features &lt;a href="https://dev.to/carban/the-all-in-one-fake-api-for-developers-3hpn"&gt;Introducing FooApi&lt;/a&gt;. FooApi is a personal project that aims to provide test data and different ways to manipulate it, all in one place, quickly and easily. That is why here you can find generic data, geographic data, images and methods like REST and GraphQL.&lt;/p&gt;

&lt;p&gt;The platform provides realistic dummy data across several categories: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/users" rel="noopener noreferrer"&gt;Users&lt;/a&gt; 😃&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/products" rel="noopener noreferrer"&gt;Products&lt;/a&gt; 🎁&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/posts" rel="noopener noreferrer"&gt;Posts&lt;/a&gt; 📗&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/comments" rel="noopener noreferrer"&gt;Comments&lt;/a&gt; ✍️&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/todos" rel="noopener noreferrer"&gt;To-dos&lt;/a&gt; ✔️&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/img/1" rel="noopener noreferrer"&gt;Images&lt;/a&gt; 🖼️&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/movies" rel="noopener noreferrer"&gt;Movies&lt;/a&gt; 📽️&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/songs" rel="noopener noreferrer"&gt;Songs&lt;/a&gt; 🎵&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/cities" rel="noopener noreferrer"&gt;Cities&lt;/a&gt; 📍 (GeoJSON) &lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/docs/countries" rel="noopener noreferrer"&gt;Countries&lt;/a&gt; 🗺️ (GeoJSON geometries)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  New Collection
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Countries (GeoJSON geometries) 🗺️
&lt;/h2&gt;

&lt;p&gt;Now you can retrieve country geometries through the &lt;a href="https://fooapi.com/api/countries" rel="noopener noreferrer"&gt;/api/countries&lt;/a&gt; endpoints. All of them follow the GeoJSON format convention. In the documentation, you’ll find the list of available endpoints and examples at &lt;a href="https://fooapi.com/docs/countries" rel="noopener noreferrer"&gt;/docs/countries&lt;/a&gt;&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%2Fq9gjd7v6zo45n5pczju3.gif" 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%2Fq9gjd7v6zo45n5pczju3.gif" alt="Image description" width="1024" height="1024"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Also I've include POST, PUT, PATCH and DELETE endpoints for the Cities data collection. Remember You are free to explore and use these endpoints to mock your Geo Apps.&lt;/p&gt;

&lt;h2&gt;
  
  
  Custom Mock 👽
&lt;/h2&gt;

&lt;p&gt;You can now create a custom mock endpoint! &lt;a href="https://fooapi.com/docs/mock" rel="noopener noreferrer"&gt;fooapi.com/docs/mock&lt;/a&gt; Here’s how it works:&lt;/p&gt;

&lt;p&gt;You define the &lt;strong&gt;request method&lt;/strong&gt;, &lt;strong&gt;status code&lt;/strong&gt;, and &lt;strong&gt;response body&lt;/strong&gt;, and &lt;strong&gt;FooApi&lt;/strong&gt; will create an endpoint and a customID like &lt;em&gt;fooapi.com/custom/abcd1234&lt;/em&gt;, then you can make your request and test your custom response. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;This endpoint expires after 1 hour, so you’ll need to create a new one afterward.&lt;/li&gt;
&lt;li&gt;In the meantime, you can edit the last one by simply updating the values in the UI and clicking &lt;strong&gt;Update Endpoint&lt;/strong&gt;. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is an initial approach, so feel free to share suggestions in the comments to make it even better!&lt;/p&gt;

&lt;p&gt;Example:&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%2F1w7r7zs81itk9js2unp5.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%2F1w7r7zs81itk9js2unp5.png" alt="Image description" width="800" height="267"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Testing in browser:&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%2Fp7t9jjtbfraqt0ixje3c.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%2Fp7t9jjtbfraqt0ixje3c.png" alt="Image description" width="572" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Buy me a coffee!
&lt;/h2&gt;

&lt;p&gt;I've created an account in buymeacoffee.com, if you want to support this project you can do it here: &lt;a href="https://buymeacoffee.com/carban" rel="noopener noreferrer"&gt;buymeacoffee.com/carban&lt;/a&gt; donations will be used to maintain and improve the project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Recognition
&lt;/h2&gt;

&lt;p&gt;I just want to hightlight that &lt;strong&gt;FooApi&lt;/strong&gt; was featured in the &lt;a href="https://weeklyfoo.com" rel="noopener noreferrer"&gt;weeklyfoo.com&lt;/a&gt; newsletter &lt;a href="https://weeklyfoo.com/foos/foo-066/" rel="noopener noreferrer"&gt;#66&lt;/a&gt; by &lt;a class="mentioned-user" href="https://dev.to/urbanisierung"&gt;@urbanisierung&lt;/a&gt; . You can find there great tools like mine, along with articles, news, tutorials, and video recommendations.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>api</category>
      <category>programming</category>
    </item>
    <item>
      <title>The All-in-One Fake API for you</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Thu, 19 Dec 2024 22:33:48 +0000</pubDate>
      <link>https://dev.to/carban/the-all-in-one-fake-api-for-developers-3hpn</link>
      <guid>https://dev.to/carban/the-all-in-one-fake-api-for-developers-3hpn</guid>
      <description>&lt;h2&gt;
  
  
  Introducing FooApi
&lt;/h2&gt;

&lt;p&gt;I am excited to announce a personal project I’ve been working on: &lt;a href="https://fooapi.com" rel="noopener noreferrer"&gt;fooapi.com&lt;/a&gt;. The service isn’t 100% complete yet—some features are still in development—but I plan to share progress and updates with each new release. This project began with the idea of creating a single platform to access data on various topics through different methods. The platform provides realistic dummy data across several categories, which you can use to mock your projects and ideas.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/api/users" rel="noopener noreferrer"&gt;Users&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/api/products" rel="noopener noreferrer"&gt;Products&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/api/posts" rel="noopener noreferrer"&gt;Posts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/api/comments" rel="noopener noreferrer"&gt;Comments&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/api/todos" rel="noopener noreferrer"&gt;To-dos&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/img/1" rel="noopener noreferrer"&gt;Images&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/api/movies" rel="noopener noreferrer"&gt;Movies&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://fooapi.com/api/songs" rel="noopener noreferrer"&gt;Songs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/api/cities" rel="noopener noreferrer"&gt;Cities&lt;/a&gt; (GeoJSON)&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://fooapi.com/docs/countries" rel="noopener noreferrer"&gt;Countries&lt;/a&gt; (GeoJSON geometries)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can find all the details in &lt;a href="https://fooapi.com/docs" rel="noopener noreferrer"&gt;fooapi.com/docs&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it?
&lt;/h2&gt;

&lt;p&gt;Currently there are two ways to fetch the data:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;REST endpoints&lt;/li&gt;
&lt;li&gt;GraphQL queries&lt;/li&gt;
&lt;li&gt;(Would you like gRPC?)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you go to &lt;a href="https://fooapi.com/playground" rel="noopener noreferrer"&gt;fooapi.com/playground&lt;/a&gt; you can practice and test your queries&lt;/p&gt;

&lt;h2&gt;
  
  
  Some useful examples
&lt;/h2&gt;

&lt;p&gt;Here are some practical examples of how to use &lt;em&gt;FooApi&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;1) Do you want to create simple placeholder &lt;em&gt;images&lt;/em&gt;? easy:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://fooapi.com/imgmaker/700/500/ff0000/000000/foooo" rel="noopener noreferrer"&gt;fooapi.com/imgmaker/700/500/ff0000/000000/foooo&lt;/a&gt;&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%2F0zx7bvbb52esb8t40eu0.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%2F0zx7bvbb52esb8t40eu0.png" alt="Image Endpoint" width="700" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With this endpoint, you can customize dimensions (width and height), background color, font color (Hex format), and add a custom message.&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="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;imgmaker&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;bg&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;More details in &lt;a href="https://fooapi.com/docs/images" rel="noopener noreferrer"&gt;fooapi.com/docs/images&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;2) Do you want data to test your &lt;em&gt;maps&lt;/em&gt;? just use:&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="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://fooapi.com/api/cities?limit=3&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="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;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="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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%2Fbthkt8tb8byp3f4dg493.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%2Fbthkt8tb8byp3f4dg493.png" alt="Dummy data in maps" width="800" height="276"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The data for this category is real and not artificially generated because, in a real map, we should use actual coordinates, in case you’re wondering.&lt;/p&gt;

&lt;p&gt;3) Something simple and useful is fetch a random user:&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="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://fooapi.com/api/users/rand&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="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;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="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;id:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;name:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"John"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;lastname:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Doe"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;username:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"JohnxDoe11"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;birthdate:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1990-01-01"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;age:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;gender:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Male"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;phone:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"+63 791 675 8914"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;email:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"foo@example.com"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;country:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"USA"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;height:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;170&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="err"&gt;weight:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;70&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;4) Are you developing the &lt;strong&gt;next&lt;/strong&gt; social media hit? check:&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="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://fooapi.com/api/comments&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="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;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="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;id:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;comment:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Sunshine and sci-fi sounds like a perfect combo! Enjoy getting lost in your book "&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;reactions:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;postId:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;user:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="err"&gt;id:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"50"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="err"&gt;name:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"John"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="err"&gt;lastname:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Smith"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="err"&gt;username:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"SmiJohnxD100"&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;id:&lt;/span&gt;&lt;span class="s2"&gt;"2"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;comment:&lt;/span&gt;&lt;span class="s2"&gt;"Don't forget the sunscreen!  What sci-fi are you reading?"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;reactions:&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;postId:&lt;/span&gt;&lt;span class="s2"&gt;"1"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="err"&gt;user:&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
             &lt;/span&gt;&lt;span class="err"&gt;id:&lt;/span&gt;&lt;span class="s2"&gt;"2"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
             &lt;/span&gt;&lt;span class="err"&gt;name:&lt;/span&gt;&lt;span class="s2"&gt;"Akira"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
             &lt;/span&gt;&lt;span class="err"&gt;lastname:&lt;/span&gt;&lt;span class="s2"&gt;"Von Trier"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
             &lt;/span&gt;&lt;span class="err"&gt;username:&lt;/span&gt;&lt;span class="s2"&gt;"alphaVonAkirax853"&lt;/span&gt;&lt;span class="w"&gt;
          &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="s2"&gt;"28 more elements..."&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you are free to explore the data categories.&lt;/p&gt;

&lt;h2&gt;
  
  
  What do you think?
&lt;/h2&gt;

&lt;p&gt;I’d love to hear your feedback! Remember, you can use this service to mock your apps, designs, models, etc. If you have ideas for new data categories or features, please share them in the comments.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>api</category>
      <category>programming</category>
    </item>
    <item>
      <title>Javascript Sets</title>
      <dc:creator>carban</dc:creator>
      <pubDate>Mon, 02 Dec 2024 20:58:31 +0000</pubDate>
      <link>https://dev.to/carban/sets-in-javascript-3nib</link>
      <guid>https://dev.to/carban/sets-in-javascript-3nib</guid>
      <description>&lt;h2&gt;
  
  
  Hello!
&lt;/h2&gt;

&lt;p&gt;Hello there! This is my &lt;strong&gt;first&lt;/strong&gt; post on &lt;a href="//dev.to"&gt;dev.to&lt;/a&gt;. I Just want to share a quick guide on how to use sets in javascript. &lt;/p&gt;

&lt;h2&gt;
  
  
  Sets
&lt;/h2&gt;

&lt;p&gt;Similar to mathematics, a set is a collection of different kind of elements, numbers, symbols, vectors, variables or even other sets. &lt;a href="https://en.wikipedia.org/wiki/Set_(mathematics)" rel="noopener noreferrer"&gt;[1]&lt;/a&gt; To define a set in Javascript, all you need to do is call the Set constructor, for example: &lt;code&gt;new Set([false, 1, "2", 3, [4, 5], {"6": 7}])&lt;/code&gt; here, I defined a set with different values, you can also add other types of values, such as numbers, strings, arrays and objects.&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%2F8chdmthpucb7dbeuu3k5.gif" 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%2F8chdmthpucb7dbeuu3k5.gif" alt="Sets gif from https://www.wsj.com/articles/making-sense-of-sets-in-theory-and-life-1535643790" width="1242" height="810"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Basic Use
&lt;/h2&gt;

&lt;p&gt;These are the basic methods you can use with sets: &lt;code&gt;add&lt;/code&gt;, &lt;code&gt;has&lt;/code&gt;, &lt;code&gt;size&lt;/code&gt;, &lt;code&gt;delete&lt;/code&gt; and &lt;code&gt;clear&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mySet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// set(1) {0}&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// set(2) {0, 100}&lt;/span&gt;

&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&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="c1"&gt;// false&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;

&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt; &lt;span class="c1"&gt;// 2&lt;/span&gt;

&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt; &lt;span class="c1"&gt;// set(1) {0}&lt;/span&gt;

&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clear&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="c1"&gt;// undefinded&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt; &lt;span class="c1"&gt;// set []&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Applications
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1.&lt;/strong&gt; You can quickly check if an array has an element or not. First, transform it using the Set constructor and call the method &lt;code&gt;.has()&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mySet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&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="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&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="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&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="c1"&gt;// Result: true&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Result: false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2.&lt;/strong&gt; Sets work with unique elements, imagine you have an array and your goal is to remove all the repeated ones, to do that just transform your array into a set. Doing that you will get an object with unique elements:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&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="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&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="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Set(7) [2, 3, 1, 8, 5, 7, 4]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;NOTE&lt;/em&gt;: Objects like &lt;code&gt;{ foo: 123 }&lt;/code&gt; in a set are not compared by their values but by their references (pointers to the object). That's why i n this particle scenario it will not filter similar objects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3.&lt;/strong&gt; Lets say you want to join 2 sets:&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%2Fsd8vd1yxvbs3b9ckkttx.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%2Fsd8vd1yxvbs3b9ckkttx.png" alt="Union between sets" width="362" height="243"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;X&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&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="mi"&gt;2&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="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="nx"&gt;X&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;union&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Set(8) [1, 2, 3, 4, 5, 6, 7, 8]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;4.&lt;/strong&gt; Now if you want the intersection between 2 sets (common elements):&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%2Faboiwzyuk271gdguepfl.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%2Faboiwzyuk271gdguepfl.png" alt="Intersection between sets" width="361" height="242"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;X&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&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="mi"&gt;2&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="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="nx"&gt;X&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;intersection&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Set(2) [2, 3]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;5.&lt;/strong&gt; Which elements from X are not in Y? we can respond that question using sets difference, here is an example:&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%2F17u16nhv9dzgnyg43e1z.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%2F17u16nhv9dzgnyg43e1z.png" alt="Difference between sets" width="360" height="240"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;X&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&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="mi"&gt;2&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="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="nx"&gt;X&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;difference&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Set(2) [1, 4]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;6.&lt;/strong&gt; How to get elements that are not in common between 2 sets? the answer for that is symmetric difference:&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%2Fznjfcxznoed6nbzm1fzc.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%2Fznjfcxznoed6nbzm1fzc.png" alt="No common elements between sets" width="359" height="240"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;X&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&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="mi"&gt;2&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="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;Y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;span class="nx"&gt;X&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;symmetricDifference&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Set(4) [1, 4, 100, 400]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;7.&lt;/strong&gt; Can I iterate them? sure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mySet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&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="c1"&gt;// Set(1) { 1 }&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Set(2) { 1, 'text' }&lt;/span&gt;
&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Set(2) { 1, 'text', true }&lt;/span&gt;

&lt;span class="k"&gt;for &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;item&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;)&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="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="c1"&gt;// 1, 'text', true &lt;/span&gt;

&lt;span class="nx"&gt;mySet&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&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="o"&gt;=&amp;gt;&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="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="c1"&gt;// 1, 'text', true &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Sets are important because they give you a new mindset to solve problems more efficiently. With them, tasks like filtering or searching (depending on the problem, of course) can become easier to handle and can save lines of code. Sets are everywhere and they are very important in computer science, remember that SQL works using sets theory in relational databases 😎.&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%2Flj489k0pupw0odsp9zmm.gif" 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%2Flj489k0pupw0odsp9zmm.gif" alt="Mathematics from Pinterest" width="1024" height="1024"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
