<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
    <title>Devlog</title>
    <link rel="self" type="application/atom+xml" href="https://vonheikemen.github.io/devlog/atom.xml"/>
    <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/"/>
    <generator uri="https://www.getzola.org/">Zola</generator>
    <updated>2026-04-03T00:00:00+00:00</updated>
    <id>https://vonheikemen.github.io/devlog/atom.xml</id>
    <entry xml:lang="en">
        <title>Simple Neovim config</title>
        <published>2024-09-12T00:00:00+00:00</published>
        <updated>2026-04-03T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/simple-neovim-config/"/>
        <id>https://vonheikemen.github.io/devlog/tools/simple-neovim-config/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/simple-neovim-config/">&lt;p&gt;Can I offer you a nice Neovim configuration in this trying time?&lt;&#x2F;p&gt;
&lt;p&gt;40 lines of code. That&#x27;s all you need to have a solid starting point. Believe it or not, even those IDE-like features people talk about online can be enabled using just &lt;strong&gt;1 plugin&lt;&#x2F;strong&gt; and a few keymaps.&lt;&#x2F;p&gt;
&lt;p&gt;You can try &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;simple-neovim-config&#x2F;#init-lua&quot;&gt;this simple config&lt;&#x2F;a&gt; and then add new things to it based on the problems you encounter along the way. Or just take this as an opportunity to learn about the basics of Neovim configuration.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;installing-neovim&quot;&gt;Installing Neovim&lt;&#x2F;h2&gt;
&lt;p&gt;We are going to need Neovim v0.9 or greater. But be aware a lot of plugins written in lua only guarantee support for the latest stable version. Right now that&#x27;s v0.12 which was released on &lt;code&gt;March 29, 2026&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;If you are on linux, pay attention to the version your package manager has available.&lt;&#x2F;p&gt;
&lt;p&gt;If you know how to install precompiled executables you can download the latest version from the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;neovim&#x2F;releases&quot;&gt;github releases&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;There is also a Neovim version manager called &lt;code&gt;bob&lt;&#x2F;code&gt;. You can try it: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;MordechaiHadad&#x2F;bob&quot;&gt;MordechaiHadad&#x2F;bob&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-config-file&quot;&gt;The config file&lt;&#x2F;h2&gt;
&lt;p&gt;The entry point for our Neovim configuration will be a file called &lt;code&gt;init.lua&lt;&#x2F;code&gt;. The location of this file can change depending on the operating system, so to save ourselves some trouble we will create it using Neovim in headless mode.&lt;&#x2F;p&gt;
&lt;p&gt;Execute this command on the terminal.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nvim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --headless -c &amp;#39;exe &amp;quot;write ++p&amp;quot; stdpath(&amp;quot;config&amp;quot;) . &amp;quot;&#x2F;init.lua&amp;quot;&amp;#39; -c &amp;#39;quit&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Once the configuration file exists we can check where it is using this command in the terminal:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nvim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --headless -c &amp;#39;echo $MYVIMRC&amp;#39; -c &amp;#39;quit&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can start adding some code. But first, if you are not familiar with lua I suggest taking some time to understand the syntax of the language.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=NneB6GX1Els&quot;&gt;Lua crash course (12 min video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;learnxinyminutes.com&#x2F;docs&#x2F;lua&#x2F;&quot;&gt;Learn X in Y minutes: Where X = lua&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;There is no need to memorize everything or become a lua expert, just review the syntax and have a reference at hand.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;editor-settings&quot;&gt;Editor settings&lt;&#x2F;h2&gt;
&lt;p&gt;Neovim&#x27;s defaults are actually good but there are still a few options that need to be enabled&#x2F;changed. To do this in lua &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua-guide.html#_vim.o&quot;&gt;vim.o&lt;&#x2F;a&gt; is the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;neovim&#x2F;issues&#x2F;30383#issuecomment-2351519326&quot;&gt;recommended method&lt;&#x2F;a&gt;. We access a property through &lt;code&gt;vim.o&lt;&#x2F;code&gt; and assign a value to it. Like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.option_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Where &lt;code&gt;option_name&lt;&#x2F;code&gt; can be anything on this list: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;quickref.html#option-list&quot;&gt;Quickref - option list&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Here&#x27;s some basic settings that you may find useful:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Enable line numbers.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Disable line wrapping&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.wrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Adjust the width of the tab character.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.tabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.shiftwidth&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Ignore case when the search pattern is all lowercase&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.smartcase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.ignorecase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Clear search highlights after submit&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.hlsearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Reserve a space in the gutter for signs. Some plugins use this to show icons.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.signcolumn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;yes&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;changing-neovim-s-theme&quot;&gt;Changing Neovim&#x27;s theme&lt;&#x2F;h2&gt;
&lt;p&gt;The way we do this in lua is using &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua-guide.html#_vim-commands&quot;&gt;vim.cmd&lt;&#x2F;a&gt;. Use &lt;code&gt;vim.cmd&lt;&#x2F;code&gt; to execute the command &lt;code&gt;colorscheme&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Ideally, we would do something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.cmd.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;colorscheme&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;retrobox&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There is nothing wrong with the example above. That is the correct way to change the theme. However, &lt;code&gt;retrobox&lt;&#x2F;code&gt; is a recent a addition to Neovim. If you have Neovim v0.9.5 or lower the command will fail. For the sake of backwards compatibility I will recommend using a &quot;protective call,&quot; this way you can setup a backup theme just in case.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local ok_theme&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pcall&lt;&#x2F;span&gt;&lt;span&gt;(vim.cmd.colorscheme, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;retrobox&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; ok_theme&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.cmd.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;colorscheme&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;habamax&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;clipboard-interaction&quot;&gt;Clipboard interaction&lt;&#x2F;h2&gt;
&lt;p&gt;This is where we learn about &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua-guide.html#_mappings&quot;&gt;vim.keymap.set()&lt;&#x2F;a&gt;, the function we use to create new keymaps.&lt;&#x2F;p&gt;
&lt;p&gt;By default when you copy some text using the &lt;code&gt;y&lt;&#x2F;code&gt; keymap Neovim will store that in a register. The &lt;code&gt;p&lt;&#x2F;code&gt; keymap, which we use to paste, also uses the same register as &lt;code&gt;y&lt;&#x2F;code&gt;. Basically, Neovim will ignore the system clipboard. We can still use it but we have to be explicit.&lt;&#x2F;p&gt;
&lt;p&gt;Now, I like to keep the default behavior and what I do is create new keymaps to use the system clipboard.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gy&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+y&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Copy to clipboard&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+p&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Paste clipboard text&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this &lt;code&gt;gy&lt;&#x2F;code&gt; will be the keymap to copy content to the clipboard, and &lt;code&gt;gp&lt;&#x2F;code&gt; will paste content from the clipboard to Neovim.&lt;&#x2F;p&gt;
&lt;p&gt;Side note: &lt;code&gt;{&#x27;n&#x27;, &#x27;x&#x27;}&lt;&#x2F;code&gt; is the list of vim modes where we want our keymap to be created. &lt;code&gt;n&lt;&#x2F;code&gt; is normal mode and &lt;code&gt;x&lt;&#x2F;code&gt; is visual mode.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-leader-key&quot;&gt;The leader key&lt;&#x2F;h2&gt;
&lt;p&gt;Usually we don&#x27;t go around making keymaps that override the defaults like we did in the previous section. Most of the time we prefix our custom keymaps with the special string &lt;code&gt;&amp;lt;leader&amp;gt;&lt;&#x2F;code&gt;. This way we don&#x27;t override an important feature or cause some sort of conflict.&lt;&#x2F;p&gt;
&lt;p&gt;But what&#x27;s &lt;code&gt;&amp;lt;leader&amp;gt;&lt;&#x2F;code&gt;?&lt;&#x2F;p&gt;
&lt;p&gt;By default is the &lt;code&gt;\&lt;&#x2F;code&gt; key. So, if we create a keymap like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;h&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;echo &amp;quot;hello there&amp;quot;&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Then &lt;code&gt;\ + h&lt;&#x2F;code&gt; will print the message &lt;code&gt;hello there&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;But we can change that using the &lt;strong&gt;vim global variable&lt;&#x2F;strong&gt; &lt;code&gt;mapleader&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this your leader key will change from &lt;code&gt;\&lt;&#x2F;code&gt; to &lt;code&gt;,&lt;&#x2F;code&gt;. But note that if you want to use a special sequence like &lt;code&gt;Control + k&lt;&#x2F;code&gt; you&#x27;ll have to use its keycode.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;keycode&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-k&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Most people use the &lt;code&gt;Space key&lt;&#x2F;code&gt; as their leader key.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39; &amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, that&#x27;s a string with a blank space. &lt;code&gt;vim.keycode&lt;&#x2F;code&gt; was added in Neovim v0.10, so before that people just did that thing with the blank space. So if you have it, then you can make it more explicit.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;keycode&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Is important to note order matters, you &lt;strong&gt;must&lt;&#x2F;strong&gt; to define &lt;code&gt;mapleader&lt;&#x2F;code&gt; before you use &lt;code&gt;&amp;lt;leader&amp;gt;&lt;&#x2F;code&gt; in your keymaps.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;command-shorcuts&quot;&gt;Command shorcuts&lt;&#x2F;h2&gt;
&lt;p&gt;Now let&#x27;s make keymaps that can execute &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;vimindex.html#_6.-ex-commands&quot;&gt;Ex-commands&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;There are two ways of doing it, and this is my favorite:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&amp;lt;cmd&amp;gt;...&amp;lt;cr&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;cmd&amp;gt;&lt;&#x2F;code&gt; is a special sequence that tells Neovim that you want to execute a vim expression. &lt;code&gt;&amp;lt;cr&amp;gt;&lt;&#x2F;code&gt; represents the enter key, it marks the end of the expression you want to execute.&lt;&#x2F;p&gt;
&lt;p&gt;Here are a couple of examples:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Save current file.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;w&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;write&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Save file&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Close all files and exit Neovim.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;q&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;quitall&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Exit vim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;installing-plugins&quot;&gt;Installing plugins&lt;&#x2F;h2&gt;
&lt;p&gt;There is a new feature called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;pack.html#_plugin-manager&quot;&gt;vim.pack&lt;&#x2F;a&gt;. This is a fully functional plugin manager built into Neovim. But only those who have access to &lt;strong&gt;Neovim v0.12&lt;&#x2F;strong&gt; can use it. If you are one of the lucky ones you can learn more about it here: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;echasnovski.com&#x2F;blog&#x2F;2026-03-13-a-guide-to-vim-pack.html&quot;&gt;A guide to vim.pack&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Because I aim for backwards compatibility with Neovim &lt;code&gt;v0.9.5&lt;&#x2F;code&gt; I will show you how to use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-deps.html&quot;&gt;mini.deps&lt;&#x2F;a&gt;. Is worth noting &lt;code&gt;vim.pack&lt;&#x2F;code&gt;&#x27;s design was based on &lt;code&gt;mini.deps&lt;&#x2F;code&gt;, so it should be fairly easy to migrate from one to the other.&lt;&#x2F;p&gt;
&lt;p&gt;Now the question is, &lt;em&gt;how does one install a plugin without a plugin manager?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;For this we are going to use &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;installing-neovim-plugins-without-a-plugin-manager&#x2F;&quot;&gt;Vim packages&lt;&#x2F;a&gt;. Long story short, we can put plugins in a specific location in they should work.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s use Neovim in headless mode again, this time to create the directory were &lt;code&gt;mini.deps&lt;&#x2F;code&gt; should be.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nvim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --headless -c &amp;#39;call mkdir(stdpath(&amp;quot;data&amp;quot;) . &amp;quot;&#x2F;site&#x2F;pack&#x2F;deps&#x2F;start&#x2F;&amp;quot;, &amp;quot;p&amp;quot;)&amp;#39; -c &amp;#39;quit&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This other command will show the full path of the directory we just created.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nvim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --headless -c &amp;#39;echo stdpath(&amp;quot;data&amp;quot;) . &amp;quot;&#x2F;site&#x2F;pack&#x2F;deps&#x2F;start&#x2F;&amp;quot;&amp;#39; -c &amp;#39;quit&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now navigate to that location using your terminal. You will want to execute the command &lt;code&gt;git clone&lt;&#x2F;code&gt; inside that directory.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Install &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&quot;&gt;mini.nvim&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;mini.deps&lt;&#x2F;code&gt; is part of a project called &lt;code&gt;mini.nvim&lt;&#x2F;code&gt;, which is a collection of lua modules aimed to solve common problems and enhance some of Neovim builtin features. So we want to download &lt;code&gt;mini.nvim&lt;&#x2F;code&gt; using this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;git clone --filter=blob:none https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you are using &lt;strong&gt;Neovim v0.9&lt;&#x2F;strong&gt; make sure to pin to the commit &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;tree&#x2F;3923662bf3d6ca49a9503f8d7196ea0450983e6a&quot;&gt;3923662&lt;&#x2F;a&gt; since that&#x27;s the last version that supports v0.9.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;git switch --detach 3923662bf3d6ca49a9503f8d7196ea0450983e6a&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After the install is complete we should generate the help tags.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nvim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --headless -c &amp;#39;helptags ALL&amp;#39; -c &amp;#39;quit&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To use the plugin we must load the module &lt;code&gt;mini.deps&lt;&#x2F;code&gt;. But here we want to use in a way that is &quot;safe.&quot; Because what if we copy our configuration to a new machine but we forget to download &lt;code&gt;mini.nvim&lt;&#x2F;code&gt;? If we do it the normal way we get hit by a scary wall of red text. We can make the experience less jarring by adding a few lines code.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local ok, MiniDeps&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pcall&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.deps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;notify&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;[WARN] mini.deps module not found&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, vim.log.levels.WARN)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here if something goes wrong Neovim will output a single line message then it will stop the execution of the script.&lt;&#x2F;p&gt;
&lt;p&gt;If everything goes according to plan every function of the &lt;code&gt;mini.deps&lt;&#x2F;code&gt; module will be inside the variable &lt;code&gt;MiniDeps&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Is important to note all features of &lt;code&gt;mini.nvim&lt;&#x2F;code&gt; are opt-in, meaning we have to do something in our configuration to enable a module. For &lt;code&gt;mini.deps&lt;&#x2F;code&gt; we have to use a function called &lt;code&gt;.setup()&lt;&#x2F;code&gt;. So we add this after we load the module.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Install &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&quot;&gt;nvim-lspconfig&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We will use this plugin to help us enable IDE-like features.&lt;&#x2F;p&gt;
&lt;p&gt;At this point we have &lt;code&gt;mini.deps&lt;&#x2F;code&gt; available so is easier to install a new plugin. This is the minimum amount of code we need.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;neovim&#x2F;nvim-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;.add()&lt;&#x2F;code&gt; function will make sure the plugin is installed and loaded. And is also the reason I recommend using &lt;code&gt;mini.deps&lt;&#x2F;code&gt;. In Neovim v0.12 we can add new plugins like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.pack.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There are some sutle differences between &lt;code&gt;mini.deps&lt;&#x2F;code&gt; and &lt;code&gt;vim.pack&lt;&#x2F;code&gt; but for the most part those two functions do the same thing.&lt;&#x2F;p&gt;
&lt;p&gt;The moment we need to add more information about the plugin we want to download we should replace the string with a lua table. For example, let&#x27;s say we want to download a previous version of &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt;. This is what we do.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;neovim&#x2F;nvim-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  checkout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;v1.8.0&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With &lt;code&gt;vim.pack&lt;&#x2F;code&gt; we do this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.pack.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    src&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    version&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;v1.8.0&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Note that &lt;code&gt;vim.pack.add()&lt;&#x2F;code&gt; can install multiple plugins with a single function call. On the other hand &lt;code&gt;MiniDeps.add()&lt;&#x2F;code&gt; can only install one plugin at a time. So to install multiple plugins with &lt;code&gt;mini.deps&lt;&#x2F;code&gt; you execute &lt;code&gt;MiniDeps.add()&lt;&#x2F;code&gt; as many times as needed.&lt;&#x2F;p&gt;
&lt;p&gt;Now the first argument to &lt;code&gt;MiniDeps.add()&lt;&#x2F;code&gt; is a lua table with some properties. &lt;code&gt;source&lt;&#x2F;code&gt; would be the link to the plugin. In &lt;code&gt;mini.deps&lt;&#x2F;code&gt; github links get a special treatment because is very popular, so here we can just specify the github user and the name of the repository. &lt;code&gt;checkout&lt;&#x2F;code&gt; can be a commit hash, tag or branch name. In this case &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;releases&#x2F;tag&#x2F;v1.8.0&quot;&gt;v1.8.0&lt;&#x2F;a&gt; is a tag on the &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt; repository, it is the last version that supports &lt;strong&gt;Neovim v0.9&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;To know more details about &lt;code&gt;mini.deps&lt;&#x2F;code&gt; read the official documentation: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-deps.html&quot;&gt;mini.nvim&#x2F;doc&#x2F;mini-deps.html&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;file-explorer&quot;&gt;File explorer&lt;&#x2F;h2&gt;
&lt;p&gt;You should know that Neovim already has a file explorer, &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;using-netrw-vim-builtin-file-explorer&#x2F;&quot;&gt;it&#x27;s called netrw&lt;&#x2F;a&gt;. We are not going to use it here because it has a few quirks I dislike. Still, I think you should know it exists.&lt;&#x2F;p&gt;
&lt;p&gt;Since we have &lt;code&gt;mini.nvim&lt;&#x2F;code&gt; available let&#x27;s use the file explorer it provides: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;blob&#x2F;main&#x2F;readmes&#x2F;mini-files.md&quot;&gt;mini.files&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;First, we call &lt;code&gt;mini.files&lt;&#x2F;code&gt; setup function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is a common convention of lua plugins. Sometimes &lt;strong&gt;you have to&lt;&#x2F;strong&gt; execute a function called &lt;code&gt;.setup()&lt;&#x2F;code&gt; to enable the plugin. Notice I said is a convention, it is not a rule. Some plugins execute their setup automatically.&lt;&#x2F;p&gt;
&lt;p&gt;How do we use &lt;code&gt;mini.files&lt;&#x2F;code&gt;?&lt;&#x2F;p&gt;
&lt;p&gt;We make a keymap to open the file explorer.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;e&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua MiniFiles.open()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;File explorer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After we open the file explorer press &lt;code&gt;g&lt;&#x2F;code&gt; then &lt;code&gt;?&lt;&#x2F;code&gt;, this will show the keymaps available.&lt;&#x2F;p&gt;
&lt;p&gt;What if we want to change the settings in &lt;code&gt;mini.files&lt;&#x2F;code&gt;?&lt;&#x2F;p&gt;
&lt;p&gt;Any custom setting should be inside the &lt;code&gt;{}&lt;&#x2F;code&gt; of the setup function. Here&#x27;s an example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  mappings&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    show_help&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;gh&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This will change the keymap that shows the help window. Instead of &lt;code&gt;g?&lt;&#x2F;code&gt; now is &lt;code&gt;gh&lt;&#x2F;code&gt; (get help).&lt;&#x2F;p&gt;
&lt;p&gt;These custom settings are in a &quot;lua table.&quot; If there is piece of syntax that you should learn is that one. Knowing the correct syntax of a lua table will prevent so many headaches.&lt;&#x2F;p&gt;
&lt;p&gt;And how did I know those settings exists?&lt;&#x2F;p&gt;
&lt;p&gt;In Neovim&#x27;s command-line I executed this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help mini.files&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That took me to &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;blob&#x2F;main&#x2F;doc&#x2F;mini-files.txt&quot;&gt;the help page of mini.files&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Remember when we installed &lt;code&gt;mini.nvim&lt;&#x2F;code&gt;? We generated some called help tags. These tags allow you to navigate to the &quot;offline&quot; documentation of the plugin: the help page.&lt;&#x2F;p&gt;
&lt;p&gt;The tab complete feature of the &lt;code&gt;:help&lt;&#x2F;code&gt; command is really good too. You can type &lt;code&gt;:help mini&lt;&#x2F;code&gt; and then press the &lt;code&gt;Tab&lt;&#x2F;code&gt; key, Neovim will show you all the help tags that start with &lt;code&gt;mini&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;One more thing, if the font on your terminal doesn&#x27;t support &quot;icons&quot; then you can add the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;blob&#x2F;main&#x2F;readmes&#x2F;mini-icons.md&quot;&gt;mini.icons&lt;&#x2F;a&gt; module. Set the &lt;code&gt;style&lt;&#x2F;code&gt; property to &lt;code&gt;ascii&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.icons&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({style&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;ascii&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;navigating-between-files&quot;&gt;Navigating between files&lt;&#x2F;h2&gt;
&lt;p&gt;For educational purposes only, I will tell you what I do when I don&#x27;t have plugins installed: I use the &lt;code&gt;files&lt;&#x2F;code&gt; command to list the open files, then use the &lt;code&gt;buffer&lt;&#x2F;code&gt; command to navigate the file I want. And to make it convenient I make a keymap.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&amp;lt;space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;files&amp;lt;cr&amp;gt;:buffer &amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search open files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In the &lt;code&gt;:buffer&lt;&#x2F;code&gt; command you can tab complete the name of the file or use the &quot;id&quot; of the buffer.&lt;&#x2F;p&gt;
&lt;p&gt;But why do that when we have &lt;code&gt;mini.nvim&lt;&#x2F;code&gt; installed? We can use the module &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;blob&#x2F;main&#x2F;readmes&#x2F;mini-pick.md&quot;&gt;mini.pick&lt;&#x2F;a&gt;. This one provides a fancy interactive filter. And it also gives us commands we can use to search files.&lt;&#x2F;p&gt;
&lt;p&gt;If you use the module &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;blob&#x2F;main&#x2F;readmes&#x2F;mini-extra.md&quot;&gt;mini.extra&lt;&#x2F;a&gt; you will have access to more search commands in &lt;code&gt;mini.pick&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, enable &lt;code&gt;mini.pick&lt;&#x2F;code&gt; module.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.pick&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Then create keymaps to start the search between files.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&amp;lt;space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick buffers&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search open files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;ff&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick files&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search all files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fh&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick help&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search help tags&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;code-completion&quot;&gt;Code completion&lt;&#x2F;h2&gt;
&lt;p&gt;For this we will use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;blob&#x2F;main&#x2F;readmes&#x2F;mini-completion.md&quot;&gt;mini.completion&lt;&#x2F;a&gt; and &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&#x2F;blob&#x2F;main&#x2F;readmes&#x2F;mini-snippets.md&quot;&gt;mini.snippets&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.snippets&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.completion&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;mini.completion&lt;&#x2F;code&gt; is kind of a wrapper around Neovim&#x27;s builtin completion mechanism. Neovim makes you press specific keybindings depending on the type of completion you want to get. And what &lt;code&gt;mini.completion&lt;&#x2F;code&gt; can do is take that burden away from you, by triggering the completion automatically as you type. In other words, it adds true autocompletion to Neovim.&lt;&#x2F;p&gt;
&lt;p&gt;By default you just get suggestions based on words of the current file. But whenever possible it&#x27;ll try to use the LSP client to provide smart code completion.&lt;&#x2F;p&gt;
&lt;p&gt;To control the completion menu we use Neovim&#x27;s default keybindings:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;Down&amp;gt;&lt;&#x2F;code&gt;: Select the next item on the list.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;Up&amp;gt;&lt;&#x2F;code&gt;:  Select previous item on the list.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;Ctrl-n&amp;gt;&lt;&#x2F;code&gt;: Select and insert text of the next item on the list.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;Ctrl-p&amp;gt;&lt;&#x2F;code&gt;: Select and insert text of the previous item on the list.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;Ctrl-y&amp;gt;&lt;&#x2F;code&gt;: Confirm selected item.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;Ctrl-e&amp;gt;&lt;&#x2F;code&gt;: Cancel the completion.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;Enter&amp;gt;&lt;&#x2F;code&gt;: If item was selected using &lt;code&gt;&amp;lt;Up&amp;gt;&lt;&#x2F;code&gt; or &lt;code&gt;&amp;lt;Down&amp;gt;&lt;&#x2F;code&gt; it confirms selection. If no item is selected, hides completion menu. Else, inserts a newline character.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Unfortunately, Neovim&#x27;s builtin completion mechanism does not offer any support for snippets by default. That&#x27;s why we have &lt;code&gt;mini.snippets&lt;&#x2F;code&gt;. But to be fair, newer versions of Neovim do have some support for snippets... but even with that, it still doesn&#x27;t offer as many features as &lt;code&gt;mini.snippets&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-lsp-client&quot;&gt;The LSP client&lt;&#x2F;h2&gt;
&lt;p&gt;Neovim&#x27;s LSP client is the thing that enables the nice IDE-like features. Things like go to definition, rename variable, inspect function signature. You get the idea. But this &quot;client&quot; doesn&#x27;t work on its own, it needs a server. In this case a &quot;server&quot; is an external program that implements the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;microsoft.github.io&#x2F;language-server-protocol&#x2F;overviews&#x2F;lsp&#x2F;overview&#x2F;&quot;&gt;LSP specification&lt;&#x2F;a&gt;. If you want to know more details about LSP and language servers, watch this video by TJ DeVries: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=LaS32vctfOY&quot;&gt;LSP explained (5 min)&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;What do we need to do here? We follow these 3 steps.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Install a language server&lt;&#x2F;li&gt;
&lt;li&gt;Configure that language server&lt;&#x2F;li&gt;
&lt;li&gt;Create some keymaps (optional)&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;step-1-install-a-language-server&quot;&gt;Step 1: Install a language server&lt;&#x2F;h3&gt;
&lt;p&gt;The Neovim community has created a resource where we can find a list of language servers. This list is in &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt; documentation: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;blob&#x2F;master&#x2F;doc&#x2F;configs.md&quot;&gt;configs.md&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Since I need some examples for the next step I&#x27;m going to show the install commands for the &lt;code&gt;go&lt;&#x2F;code&gt; language server and the &lt;code&gt;rust&lt;&#x2F;code&gt; language server.&lt;&#x2F;p&gt;
&lt;p&gt;If you have the toolchain for the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;go.dev&#x2F;&quot;&gt;go programming language&lt;&#x2F;a&gt; you can download its language server (&lt;code&gt;gopls&lt;&#x2F;code&gt;) using this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;go install golang.org&#x2F;x&#x2F;tools&#x2F;gopls@latest&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you have &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;rust-lang.github.io&#x2F;rustup&#x2F;&quot;&gt;rustup&lt;&#x2F;a&gt; installed you can download &lt;code&gt;rust_analyzer&lt;&#x2F;code&gt; using this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;rustup component add rust-analyzer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;step-2-configure-a-language-server&quot;&gt;Step 2: Configure a language server&lt;&#x2F;h3&gt;
&lt;p&gt;Now you have to &quot;enable&quot; each language server you have installed in your system.&lt;&#x2F;p&gt;
&lt;p&gt;On &lt;strong&gt;Neovim v0.11&lt;&#x2F;strong&gt; you can use the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.enable()&quot;&gt;vim.lsp.enable()&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;example_server&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;On &lt;strong&gt;Neovim v0.10&lt;&#x2F;strong&gt; or lower you must use the &quot;legacy setup&quot; function of &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).example_server.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you have the language server for &lt;code&gt;go&lt;&#x2F;code&gt; and &lt;code&gt;rust&lt;&#x2F;code&gt; you would do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gopls&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;rust_analyzer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).gopls.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).rust_analyzer.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you want your config to be backwards compatible you can write a function that uses the correct method.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- This function will use the &amp;quot;legacy setup&amp;quot; on older Neovim version.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- The new api is only available on Neovim v0.11 or greater.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lsp_setup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;server&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.11&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)[server].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;(opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_isempty&lt;&#x2F;span&gt;&lt;span&gt;(opts) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;(server, opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;(server)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Then you can write the setup like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lsp_setup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gopls&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lsp_setup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;rust_analyzer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Do note there are a handful of language servers that can&#x27;t be configured with &lt;code&gt;vim.lsp.enable()&lt;&#x2F;code&gt;. The list of missing servers is in this github issue: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;issues&#x2F;3705&quot;&gt;nvim-lspconfig&#x2F;issues&#x2F;3705&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;step-3-create-keymaps&quot;&gt;Step 3: Create keymaps&lt;&#x2F;h3&gt;
&lt;p&gt;After a language server is active in the current buffer we can use the functions under the module &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#lsp-buf&quot;&gt;vim.lsp.buf&lt;&#x2F;a&gt;. On &lt;strong&gt;Neovim v0.11&lt;&#x2F;strong&gt; we have a handful of keymaps that trigger functions on this module. But on older versions we have to create the keymaps ourselves.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- NOTE: These keymaps are already part of Neovim v0.11.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You do not have to add them to your personal configuration&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- if you are using Neovim v0.11 or greater.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Displays a function&amp;#39;s signature information&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-s&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.signature_help()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Lists all symbols in the current buffer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gO&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.document_symbol()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Lists all the implementations for the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gri&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.implementation()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Jumps to the definition of the type symbol&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grt&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.type_definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Lists all the references&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.references()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Renames all references to the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grn&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.rename()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Selects a code action available at the current cursor position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gra&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.code_action()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Show diagnostics in a floating window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-w&amp;gt;d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-w&amp;gt;&amp;lt;C-d&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Jump next&#x2F;previous diagnostic in the current buffer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;[d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_prev()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;]d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_next()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- NOTE: By default `K` uses the program specified in &amp;#39;keywordprg&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Here we force it to use the LSP client&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Display documentation of the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;K&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.hover()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;keep-in-mind&quot;&gt;Keep in mind&lt;&#x2F;h3&gt;
&lt;p&gt;Every language server is an independent project. A language server can have its own unique configuration method outside of Neovim. They can have bugs, limitations and quirks.&lt;&#x2F;p&gt;
&lt;p&gt;Some language servers were created for VS Code, the fact that Neovim and other editors can use them is just a happy accident. I believe the language servers for &lt;code&gt;html&lt;&#x2F;code&gt; and &lt;code&gt;css&lt;&#x2F;code&gt; fit in this category. They can have features that only work on VS Code. For example, Neovim can&#x27;t enable the language server for &lt;code&gt;css&lt;&#x2F;code&gt; inside an &lt;code&gt;html&lt;&#x2F;code&gt; style tag (see &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;neovim&#x2F;issues&#x2F;26783&quot;&gt;issue 26783&lt;&#x2F;a&gt;). That probably works fine in VS Code.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;honorable-mention&quot;&gt;Honorable mention&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-treesitter&#x2F;nvim-treesitter&quot;&gt;nvim-treesitter&lt;&#x2F;a&gt; is a plugin that has been around since 2020. A lot of people will say it&#x27;s essential to your Neovim experience, and I do agree to some extend. It is incredibly useful... as a dependency for other plugins. It allows Neovim to gather more information about source code of the current file, and plugin authors can do really cool things with that. Treesitter became known in the community because it could be used to enhance the syntax highlight of many programming languages.&lt;&#x2F;p&gt;
&lt;p&gt;There are things you need to be aware of:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;It needs a &lt;code&gt;C&lt;&#x2F;code&gt; compiler.
&lt;ul&gt;
&lt;li&gt;Not a problem on linux or mac but it is a problem on windows.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;It only supports the latest stable version of Neovim.
&lt;ul&gt;
&lt;li&gt;It can drop the support for previous versions of Neovim really fast.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;Is considered experimental.
&lt;ul&gt;
&lt;li&gt;It can introduce breaking changes at any point in time.&lt;&#x2F;li&gt;
&lt;li&gt;They do use &lt;code&gt;git tags&lt;&#x2F;code&gt; to &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-treesitter&#x2F;nvim-treesitter&#x2F;tags&quot;&gt;track versions&lt;&#x2F;a&gt;, in case you need a specific version.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;To know more about &lt;code&gt;tree-sitter&lt;&#x2F;code&gt; watch this video: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=09-9LltqWLY&quot;&gt;tree-sitter explained (15 min)&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;If you decide to try it, you can use the command &lt;code&gt;:TSInstall&lt;&#x2F;code&gt; to download a treesitter parser for the language you want, and then you can enable the enhanced syntax highlight using an autocommand.&lt;&#x2F;p&gt;
&lt;p&gt;For example, you can download the treesitter parser for javascript using this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:TSInstall javascript&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And then create an autocommand that will call the function &lt;code&gt;vim.treesitter.start()&lt;&#x2F;code&gt; in any filetype that uses javascript syntax. Like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;FileType&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;javascript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;javascriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;js&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;jsx&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.treesitter.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;start&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;init-lua&quot;&gt;init.lua&lt;&#x2F;h2&gt;
&lt;p&gt;And this is it. This is all you need to get started if you are using Neovim v0.12. If you need backwards compatibility with Neovim v0.9, &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;simple-neovim-config&#x2F;#backwards-compatible-config&quot;&gt;use this other configuration instead&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- NOTE: This configuration is meant for Neovim v0.12 or greater&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Learn about Neovim&amp;#39;s lua api&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua-guide.html&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.tabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.shiftwidth&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.smartcase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.ignorecase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.wrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.hlsearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.signcolumn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;yes&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Space as the leader key&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;keycode&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Basic clipboard interaction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gy&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+y&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Copy to clipboard&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+p&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Paste clipboard text&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Command shortcuts&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;w&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;write&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Save file&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;q&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;quitall&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Exit vim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.cmd.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;colorscheme&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;retrobox&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.pack.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.snippets&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.completion&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;e&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua MiniFiles.open()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;File explorer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.pick&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&amp;lt;space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick buffers&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search open files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;ff&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick files&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search all files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fh&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick help&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search help tags&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- List of compatible language servers is here:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;blob&#x2F;master&#x2F;doc&#x2F;configs.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gopls&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;rust_analyzer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;backwards-compatible-config&quot;&gt;Backwards compatible config&lt;&#x2F;h2&gt;
&lt;p&gt;For those of you that are using Ubuntu or Debian based operating systems, you have to be aware of the version available in the official repo of your system. In Ubuntu 24.04 you&#x27;ll have &lt;code&gt;v0.9.5&lt;&#x2F;code&gt;. And any system based on Debian 13 will have &lt;code&gt;v0.10.4&lt;&#x2F;code&gt; available.&lt;&#x2F;p&gt;
&lt;p&gt;You can still have a good experience using older versions of Neovim but the configuration will be a little bit more complex.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- NOTE: This is meant to be backwards compatible with Neovim v0.9.5&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Learn about Neovim&amp;#39;s lua api&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua-guide.html&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.tabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.shiftwidth&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.smartcase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.ignorecase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.wrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.hlsearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.signcolumn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;yes&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Space as the leader key&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39; &amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Basic clipboard interaction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gy&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+y&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Copy to clipboard&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+p&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Paste clipboard text&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Command shortcuts&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;w&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;write&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Save file&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;q&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;quitall&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Exit vim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local ok_theme&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pcall&lt;&#x2F;span&gt;&lt;span&gt;(vim.cmd.colorscheme, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;retrobox&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; ok_theme&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.cmd.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;colorscheme&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;habamax&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local ok, MiniDeps&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pcall&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.deps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;notify&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;[WARN] mini.deps module not found&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, vim.log.levels.WARN)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;nvim-mini&#x2F;mini.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  checkout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;3923662bf3d6ca49a9503f8d7196ea0450983e6a&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;neovim&#x2F;nvim-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  checkout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.10&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;v2.5.0&amp;#39; &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;v1.8.0&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.snippets&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.completion&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;e&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua MiniFiles.open()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;File explorer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.pick&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&amp;lt;space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick buffers&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search open files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;ff&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick files&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search all files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fh&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Pick help&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search help tags&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Displays a function&amp;#39;s signature information&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-s&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.signature_help()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Lists all symbols in the current buffer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gO&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.document_symbol()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Lists all the implementations for the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gri&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.implementation()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Jumps to the definition of the type symbol&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grt&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.type_definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Lists all the references&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.references()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Renames all references to the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grn&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.rename()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Selects a code action available at the current cursor position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gra&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.code_action()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Show diagnostics in a floating window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-w&amp;gt;d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-w&amp;gt;&amp;lt;C-d&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.11&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  -- Jump next&#x2F;previous diagnostic in the current buffer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;[d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_prev()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;]d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_next()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- NOTE: By default `K` uses the program specified in the &amp;#39;keywordprg&amp;#39; option.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Here we override the default behavior, we force it to use the LSP client&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Display documentation of the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;K&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.hover()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- This function will use the &amp;quot;legacy setup&amp;quot; on older Neovim version.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- The new api is only available on Neovim v0.11 or greater.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lsp_setup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;server&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.11&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)[server].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;(opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_isempty&lt;&#x2F;span&gt;&lt;span&gt;(opts) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;(server, opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;(server)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- List of compatible language servers is here:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;blob&#x2F;master&#x2F;doc&#x2F;configs.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lsp_setup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gopls&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lsp_setup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;rust_analyzer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Neovim: Install plugins without a plugin manager</title>
        <published>2024-07-27T00:00:00+00:00</published>
        <updated>2024-07-27T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/installing-neovim-plugins-without-a-plugin-manager/"/>
        <id>https://vonheikemen.github.io/devlog/tools/installing-neovim-plugins-without-a-plugin-manager/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/installing-neovim-plugins-without-a-plugin-manager/">&lt;p&gt;Yes, and all we have to do is download them in the right path.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-does-it-work&quot;&gt;How does it work?&lt;&#x2F;h2&gt;
&lt;p&gt;Neovim and vim have this feature called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;repeat.html#_using-vim-packages&quot;&gt;packages&lt;&#x2F;a&gt;. A package is a directory that can contain multiple plugins.&lt;&#x2F;p&gt;
&lt;p&gt;The file structure of package can look like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;some-package&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── colors&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   ├── a-colorscheme.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   └── some-colorscheme.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── doc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   └── my-help-page.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   └── some-module&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│       └── some-file.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;└── plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ├── a-file.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    └── some-file.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;According to Neovim&#x27;s documentation, a &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;usr_05.html#_global-plugins&quot;&gt;plugin&lt;&#x2F;a&gt; is literally a script located in the plugin directory. They call it a &quot;global plugin&quot;. So in our example, &lt;code&gt;plugin&#x2F;a-file.vim&lt;&#x2F;code&gt; is one plugin and &lt;code&gt;plugin&#x2F;some-file.lua&lt;&#x2F;code&gt; is another plugin.&lt;&#x2F;p&gt;
&lt;p&gt;Notice something interesting? This is the same file structure all Neovim plugins can have. So what we consider to be one plugin, Neovim&#x27;s documentation calls it a &lt;code&gt;package&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;But where should we add these things?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-pack-directory&quot;&gt;The pack directory&lt;&#x2F;h2&gt;
&lt;p&gt;Every directory in the &lt;code&gt;packpath&lt;&#x2F;code&gt; option can contain a directory called &lt;code&gt;pack&lt;&#x2F;code&gt;. Inside &lt;code&gt;pack&lt;&#x2F;code&gt; we can group our packages.&lt;&#x2F;p&gt;
&lt;p&gt;For example:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;pack&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;└── vendor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ├── opt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    │   └── package-one&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    └── start&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        ├── package-two&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        └── package-three&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;vendor&lt;&#x2F;code&gt; is just a random name I chose for this group. You can pick any name you want.&lt;&#x2F;p&gt;
&lt;p&gt;Within our group we can have &lt;code&gt;opt&lt;&#x2F;code&gt; packages and &lt;code&gt;start&lt;&#x2F;code&gt; packages.&lt;&#x2F;p&gt;
&lt;p&gt;Packages in the &lt;code&gt;start&lt;&#x2F;code&gt; directory will be available in the &lt;code&gt;runtimepath&lt;&#x2F;code&gt; during Neovim startup process.&lt;&#x2F;p&gt;
&lt;p&gt;A package in the &lt;code&gt;opt&lt;&#x2F;code&gt; directory will only be added to the &lt;code&gt;runtimepath&lt;&#x2F;code&gt; after we call the command &lt;code&gt;:packadd&lt;&#x2F;code&gt;. This is the way we can lazy load plugins.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-download-path&quot;&gt;The download path&lt;&#x2F;h2&gt;
&lt;p&gt;First, inspect the value of the option &lt;code&gt;packpath&lt;&#x2F;code&gt;. Execute this command in Neovim.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; packpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;?&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you find that unreadable, you can try to print each path using lua. Execute this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:lua vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span&gt;, vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;packpath&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get&lt;&#x2F;span&gt;&lt;span&gt;())&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s the list of directories where you can have a &lt;code&gt;pack&lt;&#x2F;code&gt; directory.&lt;&#x2F;p&gt;
&lt;p&gt;Example time:&lt;&#x2F;p&gt;
&lt;p&gt;By default Neovim&#x27;s configuration directory is a part of the packpath, so that&#x27;s a perfectly valid place to create a &lt;code&gt;pack&lt;&#x2F;code&gt; directory.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s pretend we are using linux and want to download &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&quot;&gt;mini.nvim&lt;&#x2F;a&gt;. We could execute this command the terminal.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;git clone https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim \&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  ~&#x2F;.config&#x2F;nvim&#x2F;pack&#x2F;vendor&#x2F;start&#x2F;mini.nvim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Note that after we download a plugin we need to generate the help tags using this command inside Neovim.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:helptags ALL&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After we create the help tags we can use the &lt;code&gt;:help&lt;&#x2F;code&gt; command to navigate to the documentation of the plugin.&lt;&#x2F;p&gt;
&lt;p&gt;Now that &lt;code&gt;mini.nvim&lt;&#x2F;code&gt; is available in Neovim&#x27;s runtimepath we can test it. We can try for example the module &lt;code&gt;mini.files&lt;&#x2F;code&gt; in our Neovim configuration.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s create a keyboard shortcut to toggle &lt;code&gt;mini.files&lt;&#x2F;code&gt; explorer.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local mini_files&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;mini_files.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F2&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; mini_files.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;close&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  mini_files.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;open&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;a-little-command&quot;&gt;A little command&lt;&#x2F;h2&gt;
&lt;p&gt;If you want, you can have a Neovim command that uses &lt;code&gt;git clone&lt;&#x2F;code&gt; to download plugins from github.&lt;&#x2F;p&gt;
&lt;p&gt;This should work just fine:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;GitPlugin&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local repo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; input.fargs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;https:&#x2F;&#x2F;github.com&#x2F;%s&#x2F;%s.git&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local plugin_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;stdpath&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;config&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;      ..&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&#x2F;pack&#x2F;vendor&#x2F;start&#x2F;%s&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span&gt; repo[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or&lt;&#x2F;span&gt;&lt;span&gt; repo[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local msg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Must provide user name and repository&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;notify&lt;&#x2F;span&gt;&lt;span&gt;(msg, vim.log.levels.WARN)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local full_url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; url&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;format&lt;&#x2F;span&gt;&lt;span&gt;(repo[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;], repo[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;])&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;git&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;clone&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, full_url, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;plugin_dir&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;format&lt;&#x2F;span&gt;&lt;span&gt;(repo[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;])}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; on_done&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;packloadall! | helptags ALL&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;notify&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Done.&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;notify&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Cloning repository...&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jobstart&lt;&#x2F;span&gt;&lt;span&gt;(command, {on_exit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; on_done})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {nargs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;+&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Going back to our previous example, now we could download &lt;code&gt;mini.nvim&lt;&#x2F;code&gt; using this command inside Neovim:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;GitPlugin echasnovski mini.nvim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;You are ready to enjoy Neovim plugins available on github without a plugin manager.&lt;&#x2F;p&gt;
&lt;p&gt;I want to clarify, I&#x27;m not saying plugin managers are useless. You probably still need one. Neovim doesn&#x27;t have a mechanism to update plugins, or remove them. The package feature only loads plugins into Neovim&#x27;s runtime. You still need to manage your plugins somehow.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A guide on Neovim&#x27;s LSP client</title>
        <published>2023-12-25T00:00:00+00:00</published>
        <updated>2025-05-23T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/neovim-lsp-client-guide/"/>
        <id>https://vonheikemen.github.io/devlog/tools/neovim-lsp-client-guide/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/neovim-lsp-client-guide/">&lt;p&gt;Maybe I should have called this &quot;How to enable IDE-like features without third party plugins.&quot; Sounds interesting, right? That&#x27;s basically what I want to show you here.&lt;&#x2F;p&gt;
&lt;p&gt;I&#x27;m going to explain how to use the new configuration method that was introduced in Neovim v0.11. And I want to show how it works because it&#x27;s basically a layer on top of existing features. This way you can make your own setup even on older Neovim versions.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;requirements&quot;&gt;Requirements&lt;&#x2F;h2&gt;
&lt;ol&gt;
&lt;li&gt;Neovim v0.8 or greater.&lt;&#x2F;li&gt;
&lt;li&gt;A language server.&lt;&#x2F;li&gt;
&lt;li&gt;Patience&#x2F;Energy to write some lua code for each language server.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;If you don&#x27;t know anything about lua here are a couple of links that can help you learn the basics:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=NneB6GX1Els&quot;&gt;Lua crash course (11 min video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;learnxinyminutes.com&#x2F;docs&#x2F;lua&#x2F;&quot;&gt;Learn X in Y minutes: Where X = lua&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua-guide.html&quot;&gt;Neovim&#x27;s official lua guide&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;let-s-start-with-the-language-server&quot;&gt;Let&#x27;s start with the language server&lt;&#x2F;h2&gt;
&lt;p&gt;A language server is an external program that follows the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;microsoft.github.io&#x2F;language-server-protocol&#x2F;&quot;&gt;Language Server Protocol&lt;&#x2F;a&gt;. The LSP specification defines what type of messages a language server can receive and also how it should respond. The idea here is that &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;microsoft.github.io&#x2F;language-server-protocol&#x2F;implementors&#x2F;tools&#x2F;&quot;&gt;any tool that follows the LSP specification&lt;&#x2F;a&gt; can communicate with a language server.&lt;&#x2F;p&gt;
&lt;p&gt;And so the language server is the thing that analyzes our source code and it can tell the editor what to do.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;Where can we find these language servers?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The website for the LSP specification &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;microsoft.github.io&#x2F;language-server-protocol&#x2F;implementors&#x2F;servers&#x2F;&quot;&gt;has a list&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;in-this-particular-case&quot;&gt;In this particular case...&lt;&#x2F;h3&gt;
&lt;p&gt;I want to use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gleam.run&#x2F;&quot;&gt;Gleam&lt;&#x2F;a&gt; and &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;LuaLS&#x2F;lua-language-server&quot;&gt;LuaLS&lt;&#x2F;a&gt; as examples.&lt;&#x2F;p&gt;
&lt;p&gt;Gleam is a toolchain. It has a compiler, a formatter and a language server. Install instructions are in the official documentation: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gleam.run&#x2F;getting-started&#x2F;installing&#x2F;&quot;&gt;Getting started&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;LuaLS is a language server for lua. You can download it from &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;LuaLS&#x2F;lua-language-server&#x2F;releases&#x2F;latest&quot;&gt;github releases&lt;&#x2F;a&gt; or &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;luals.github.io&#x2F;wiki&#x2F;build&#x2F;&quot;&gt;build it from source&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Once you have a language server installed it&#x27;s a good idea to check if Neovim &quot;knows&quot; where it is. You can check that using the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;builtin.html#exepath()&quot;&gt;exepath()&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;For Gleam you want to search for the &lt;code&gt;gleam&lt;&#x2F;code&gt; executable.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;echo exepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;LuaLS&#x27; executable is called &lt;code&gt;lua-language-server&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;echo exepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lua-language-server&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This should show you the path to the executable. If it doesn&#x27;t, it means something went wrong during the installation.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;basic-usage&quot;&gt;Basic Usage&lt;&#x2F;h2&gt;
&lt;p&gt;Before we write any code we should learn how to use the language server. This should be in the official documentation of said server.&lt;&#x2F;p&gt;
&lt;p&gt;If we can&#x27;t find the basic usage in the documentation we can go to &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&quot;&gt;nvim-lspconfig&lt;&#x2F;a&gt;&#x27;s github repository. In there we look for a folder called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;tree&#x2F;master&#x2F;lsp&quot;&gt;lsp&lt;&#x2F;a&gt;, this contains configuration files for a bunch of language servers.&lt;&#x2F;p&gt;
&lt;p&gt;Say we are interested in Gleam, we should go and inspect the contents of &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;blob&#x2F;ac1dfbe3b60e5e23a2cff90e3bd6a3bc88031a57&#x2F;lsp&#x2F;gleam.lua#L8&quot;&gt;gleam.lua&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;return&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; { &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lsp&amp;#39; &lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; { &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39; &lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  root_markers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; { &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam.toml&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.git&amp;#39; &lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This shows the minimum amount of information we need to make a language server work.&lt;&#x2F;p&gt;
&lt;p&gt;The &lt;code&gt;cmd&lt;&#x2F;code&gt; property has the command we need to start the language server. Remember, language servers are external programs so &lt;code&gt;gleam lsp&lt;&#x2F;code&gt; is a valid command you can type on the terminal. And funny enough, if you do that it&#x27;ll give you this message.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;This command is intended to be run by language server clients such&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;as a text editor rather than being run directly in the console.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;filetypes&lt;&#x2F;code&gt; is the list of languages the server can handle. These must be valid filetype names that Neovim supports.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;root_markers&lt;&#x2F;code&gt; should be a list of files or folders. We will use this to determine the root of the project.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-lsp-folder&quot;&gt;The lsp folder&lt;&#x2F;h2&gt;
&lt;p&gt;This &lt;code&gt;lsp&lt;&#x2F;code&gt; folder is not something unique only &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt; can have. Since &lt;strong&gt;Neovim v0.11&lt;&#x2F;strong&gt; it is now part of the &lt;code&gt;runtimepath&lt;&#x2F;code&gt;. This means we can have an &lt;code&gt;lsp&lt;&#x2F;code&gt; folder inside our own personal configuration.&lt;&#x2F;p&gt;
&lt;p&gt;Imagine a Neovim config folder with this structure:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;nvim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── init.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── .nvim.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;└── lsp&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ├── gleam.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    └── luals-nvim.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The configuration inside &lt;code&gt;nvim&#x2F;lsp&#x2F;gleam.lua&lt;&#x2F;code&gt; can be the exact same thing &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt; has.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- nvim&#x2F;lsp&#x2F;gleam.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;return&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  root_markers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam.toml&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.git&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We do have some amount of freedom here. So in &lt;code&gt;luals-nvim&lt;&#x2F;code&gt; I want to have a configuration made specifically for a Neovim config with an &lt;code&gt;.nvim.lua&lt;&#x2F;code&gt; script at the root.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- nvim&#x2F;lsp&#x2F;luals-nvim.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;return&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lua-language-server&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lua&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  root_markers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.nvim.lua&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  settings&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    Lua&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      runtime&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        version&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;LuaJIT&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lua&#x2F;?.lua&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lua&#x2F;?&#x2F;init.lua&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      diagnostics&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        globals&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;vim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      telemetry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        enable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      workspace&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        checkThirdParty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        library&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          vim.env.VIMRUNTIME,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Inside the &lt;code&gt;lsp&lt;&#x2F;code&gt; folder the files can have any name. So I made this &lt;code&gt;luals-nvim&lt;&#x2F;code&gt; instead of something generic like &lt;code&gt;lua&lt;&#x2F;code&gt; or &lt;code&gt;luals&lt;&#x2F;code&gt;. And the return value can be anything that the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.config()&quot;&gt;vim.lsp.config()&lt;&#x2F;a&gt; function expects.&lt;&#x2F;p&gt;
&lt;p&gt;Notice in this one we have a &lt;code&gt;settings&lt;&#x2F;code&gt; property. That&#x27;s reserved for server specific options. You&#x27;ll have to search the documentation of the language server to know what options you can add there.&lt;&#x2F;p&gt;
&lt;p&gt;Now, having a configuration in the &lt;code&gt;lsp&lt;&#x2F;code&gt; folder doesn&#x27;t mean Neovim will use it. We have to be explicit. To use a language server we must call the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.enable()&quot;&gt;vim.lsp.enable()&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;So in this example the &lt;code&gt;init.vim&lt;&#x2F;code&gt; looks like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; nvim&#x2F;init.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; exrc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.enable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;em&gt;But why init.vim?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;I just wanted an excuse to show is possible to execute lua code inside vimscript. Some Vim users think they have to delete their vimscript config to use lua. That&#x27;s just not true. Notice the &lt;code&gt;lua&lt;&#x2F;code&gt; command there, that allows you to execute a line of lua code.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, next time we open Neovim it will look for a file that matches the pattern &lt;code&gt;lsp&#x2F;gleam.lua&lt;&#x2F;code&gt; inside the &lt;code&gt;runtimepath&lt;&#x2F;code&gt;. Then it will create an autocommand using the list we provided in the &lt;code&gt;filetypes&lt;&#x2F;code&gt; property. So whenever we open a file with the type &lt;code&gt;gleam&lt;&#x2F;code&gt; Neovim will try to enable the language server.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;What about LuaLS?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The config we have for LuaLS only makes sense for Neovim. So I think this is a good oportunity to use an &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;options.html#&amp;#x27;exrc&amp;#x27;&quot;&gt;exrc&lt;&#x2F;a&gt; file. Vim&#x27;s version of a project local config. When the &lt;code&gt;exrc&lt;&#x2F;code&gt; option is enabled Vim&#x2F;Neovim will execute a script located in the current working directory. This is both convenient and dangerous. So Neovim&#x27;s &lt;code&gt;exrc&lt;&#x2F;code&gt; is slightly different from Vim. Neovim will ask you if you &quot;trust&quot; the file, and if you say yes it&#x27;ll be executed. If the content of the file remains the same Neovim won&#x27;t ask again, it&#x27;ll just execute it automatically.&lt;&#x2F;p&gt;
&lt;p&gt;Personally, I would create an alias to enable &lt;code&gt;exrc&lt;&#x2F;code&gt; instead of having it in the &lt;code&gt;init&lt;&#x2F;code&gt; file. Something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;alias&lt;&#x2F;span&gt;&lt;span&gt; code&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim --cmd &amp;quot;set exrc&amp;quot;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s go back to LuaLS. After Neovim is done executing the &lt;code&gt;init&lt;&#x2F;code&gt; file it will search for an &lt;code&gt;.nvim.lua&lt;&#x2F;code&gt; in the current working directory. The one in our Neovim folder will have this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- nvim&#x2F;.nvim.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;luals-nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So Neovim will not even try to use &lt;code&gt;lsp&#x2F;luals-nvim.lua&lt;&#x2F;code&gt; if we are not inside the config folder. The downside of this approach (right now) is that we have to open Neovim in the exact location where &lt;code&gt;.nvim.lua&lt;&#x2F;code&gt; is stored.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;single-file-setup&quot;&gt;Single file setup?&lt;&#x2F;h2&gt;
&lt;p&gt;If you are the kind of person that has a very simple config that fits in one file, I have good news for you. You are not forced to use the &lt;code&gt;lsp&lt;&#x2F;code&gt; folder to configure a language server.&lt;&#x2F;p&gt;
&lt;p&gt;The configurations inside the &lt;code&gt;lsp&lt;&#x2F;code&gt; folder can be extended using the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.config()&quot;&gt;vim.lsp.config()&lt;&#x2F;a&gt;. But this can also be used to create an entire new config, without needing to create a new file.&lt;&#x2F;p&gt;
&lt;p&gt;Here&#x27;s an example:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- nvim&#x2F;init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  root_markers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam.toml&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.git&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;where-to-look-if-something-goes-wrong&quot;&gt;Where to look if something goes wrong?&lt;&#x2F;h2&gt;
&lt;p&gt;If Neovim wasn&#x27;t able to start the language server, you can take a look at the log file, execute this command inside Neovim:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:lua vim.cmd.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;edit&lt;&#x2F;span&gt;&lt;span&gt;(vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_log_path&lt;&#x2F;span&gt;&lt;span&gt;())&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Look for the lines that start with &lt;code&gt;[ERROR]&lt;&#x2F;code&gt;. Maybe there is an error message with some useful information.&lt;&#x2F;p&gt;
&lt;p&gt;If you want the logs to have more details, increase the log level using this function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set_log_level&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;debug&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And since &lt;strong&gt;Neovim v0.10&lt;&#x2F;strong&gt; you can do a &quot;health check&quot; with this command:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:checkhealth &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;lsp&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;execute-on-filetype&quot;&gt;Execute on filetype&lt;&#x2F;h2&gt;
&lt;p&gt;Turns out &lt;code&gt;vim.lsp.enable()&lt;&#x2F;code&gt; is actually a layer on top of things we already had. We can still use a language server without plugins on older Neovim versions, we just need to know how to put the pieces together.&lt;&#x2F;p&gt;
&lt;p&gt;If the server we want to use only supports one language it makes sense to use a &quot;filetype plugin.&quot;&lt;&#x2F;p&gt;
&lt;p&gt;We create a filetype plugin in our Neovim configuration simply by adding a script in the folder &lt;code&gt;ftplugin&lt;&#x2F;code&gt;. Note that the name of the script needs to be the same as a valid filetype.&lt;&#x2F;p&gt;
&lt;p&gt;We can navigate to Neovim&#x27;s configuration folder, open Neovim and then create the &lt;code&gt;ftplugin&lt;&#x2F;code&gt; folder.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; mkdir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.&#x2F;ftplugin&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;p&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we want a filetype plugin for Gleam we create a new file called &lt;code&gt;gleam.lua&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:edit ftplugin&#x2F;gleam.lua | &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;write&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;On the other hand, if we have a language server that can work on multiple filetypes we can use an autocommand on the event &lt;code&gt;FileType&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;FileType&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;css&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;less&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;sass&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    ---&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- In here you can do whatever you want&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    ---&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;pattern&lt;&#x2F;code&gt; of the &lt;code&gt;FileType&lt;&#x2F;code&gt; event is a list of filetypes. The same thing you would provide in the &lt;code&gt;filetypes&lt;&#x2F;code&gt; property of an lsp config file.&lt;&#x2F;p&gt;
&lt;p&gt;Inside the filetype plugin or the autocommand we are going to execute the function that enables the language server. But first, we need to know how recreate the logic behind &lt;code&gt;root_markers&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;root-directory&quot;&gt;Root directory&lt;&#x2F;h2&gt;
&lt;p&gt;Language servers need to know what is the path of our project folder and this is a problem Neovim needs to solve.&lt;&#x2F;p&gt;
&lt;p&gt;On &lt;strong&gt;Neovim v0.10&lt;&#x2F;strong&gt; we can use a function called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua.html#vim.fs.root()&quot;&gt;vim.fs.root()&lt;&#x2F;a&gt;. We will give it a list of files and it will return the parent directory of the first match.&lt;&#x2F;p&gt;
&lt;p&gt;What do we look for? We search for common configuration files that projects have in the root folder. So, in a Gleam project there is always a &lt;code&gt;gleam.toml&lt;&#x2F;code&gt; file. Javascript projects usually have a &lt;code&gt;package.json&lt;&#x2F;code&gt;. Rust projects have a &lt;code&gt;cargo.toml&lt;&#x2F;code&gt;. We feed this information to &lt;code&gt;vim.fs.root()&lt;&#x2F;code&gt; and it should give us a path we can use.&lt;&#x2F;p&gt;
&lt;p&gt;We can make a test already by adding this piece of code in a &lt;code&gt;gleam&lt;&#x2F;code&gt; filetype plugin.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- nvim&#x2F;ftplugin&#x2F;gleam.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- NOTE: vim.fs.root() is only available on Neovim v0.10 or greater&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local root_markers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam.toml&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fs.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;root&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, root_markers)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span&gt;(root_dir)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;On &lt;strong&gt;Neovim v0.9&lt;&#x2F;strong&gt; or lower we would have to recreate the behavior of &lt;code&gt;vim.fs.root()&lt;&#x2F;code&gt;. For this we can use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua.html#vim.fs.find()&quot;&gt;vim.fs.find()&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- nvim&#x2F;ftplugin&#x2F;gleam.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- NOTE: this code is for Neovim v0.9.5 or lower&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local root_markers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam.toml&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_buf_get_name&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local paths&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fs.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span&gt;(root_markers, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  upward&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fnamemodify&lt;&#x2F;span&gt;&lt;span&gt;(buffer, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;:p:h&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fs.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dirname&lt;&#x2F;span&gt;&lt;span&gt;(paths[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;])&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span&gt;(root_dir)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;start-the-client&quot;&gt;Start the client&lt;&#x2F;h2&gt;
&lt;p&gt;We are ready to enable the language server. Now we call the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.start()&quot;&gt;vim.lsp.start()&lt;&#x2F;a&gt;, which is the same thing &lt;code&gt;vim.lsp.enable()&lt;&#x2F;code&gt; uses under the hood.&lt;&#x2F;p&gt;
&lt;p&gt;The first time this is executed it will launch the language server as an external process. When called again with the same root directory it will only send information to the existing process.&lt;&#x2F;p&gt;
&lt;p&gt;Our gleam filetype plugin can look like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- nvim&#x2F;ftplugin&#x2F;gleam.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- NOTE: vim.fs.root() is only available on Neovim v0.10 or greater&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local root_markers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam.toml&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fs.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;root&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, root_markers)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span&gt; root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;start&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gleam&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; root_dir,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this setup we should get &quot;diagnostics&quot; out the box. If there is an error in a gleam file Neovim will show what line has the error.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;about-the-diagnostics&quot;&gt;About the diagnostics&lt;&#x2F;h2&gt;
&lt;p&gt;So the diagnostics signs, the thing Neovim uses to tell us there is an error in our source code... by default the space needed to render that sign is hidden and when there is a sign the whole screen shifts to the right. That behavior can be configured.&lt;&#x2F;p&gt;
&lt;p&gt;If you set the option &lt;code&gt;signcolumn&lt;&#x2F;code&gt; to the string &lt;code&gt;yes&lt;&#x2F;code&gt; Neovim will reserve the space for the sign. You will have a whitespace reserved for any type of signs in the gutter.&lt;&#x2F;p&gt;
&lt;p&gt;In your &lt;code&gt;init.vim&lt;&#x2F;code&gt; you can have this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; signcolumn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;yes&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or, if you have an &lt;code&gt;init.lua&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.signcolumn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;yes&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you set &lt;code&gt;signcolumn&lt;&#x2F;code&gt; to the string &lt;code&gt;no&lt;&#x2F;code&gt;, Neovim will hide the column altogether. Don&#x27;t do that unless you are fully aware of the consequences. There is a better way to hide the diagnostic signs.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;vim-diagnostic&quot;&gt;vim.diagnostic&lt;&#x2F;h3&gt;
&lt;p&gt;There is a lua module dedicated specifically to diagnostics: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;diagnostic.html&quot;&gt;vim.diagnostic&lt;&#x2F;a&gt;. This has a &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;diagnostic.html#vim.diagnostic.config()&quot;&gt;.config()&lt;&#x2F;a&gt; function we can use to configure the interface of the diagnostics.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Hide diagnostic signs&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;This is the safe way to disable the diagnostics sign.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.diagnostic.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  signs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Virtual text&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;There is an option to show the error message inline. This is called &quot;virtual text.&quot; This used to be enabled by default, but now on &lt;strong&gt;Neovim v0.11&lt;&#x2F;strong&gt; is disabled.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.diagnostic.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  virtual_text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you have &lt;strong&gt;Neovim v0.10 or greater&lt;&#x2F;strong&gt; you can read the diagnostic message under the cursor with the keybinding &lt;code&gt;&amp;lt;C-w&amp;gt;d&lt;&#x2F;code&gt; (control + w then d). This will trigger the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;diagnostic.html#vim.diagnostic.open_float()&quot;&gt;vim.diagnostic.open_float()&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;When using &lt;strong&gt;Neovim v0.9.5 or lower&lt;&#x2F;strong&gt; you&#x27;ll have to create that keybinding yourself.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-w&amp;gt;d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now, I would love to explain all the options &lt;code&gt;vim.diagnostic.config()&lt;&#x2F;code&gt; supports but we don&#x27;t have time for that. If you want to know more you can &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;diagnostic.html#vim.diagnostic.config()&quot;&gt;read the documentation&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-else-do-we-get-for-free&quot;&gt;What else do we get for free?&lt;&#x2F;h2&gt;
&lt;p&gt;These are things Neovim does when a language server active in the buffer.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Since Neovim v0.8&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;There is an LSP powered &lt;code&gt;tagfunc&lt;&#x2F;code&gt;. That means we can jump to the definition of a function or class using the keybinding &lt;code&gt;&amp;lt;C-]&amp;gt;&lt;&#x2F;code&gt; (control + ]). And can jump back to where we were using &lt;code&gt;&amp;lt;C-t&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;The &lt;code&gt;formatexpr&lt;&#x2F;code&gt; option is set to a function that uses the language server. This means the &lt;code&gt;gq&lt;&#x2F;code&gt; operator can format a piece of code. We can enter visual mode, select a piece of text, press &lt;code&gt;gq&lt;&#x2F;code&gt; and Neovim will request the language server to format the code.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;The &lt;code&gt;omnifunc&lt;&#x2F;code&gt; option is also set. This one enables smart code completions. In insert mode the keybinding &lt;code&gt;&amp;lt;C-x&amp;gt;&amp;lt;C-o&amp;gt;&lt;&#x2F;code&gt; (control + x then control + o) will trigger the completion menu with suggestions that the language server think are relevant.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;strong&gt;Since Neovim v0.9&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Semantic highlight is supported. Some language servers can provide information about the tokens in the source code, this allows for a more accurate syntax highlight.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;strong&gt;Since Neovim v0.10&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, if we don&#x27;t have a custom keybinding for &lt;code&gt;K&lt;&#x2F;code&gt; then it will display the available documentation for the symbol under the cursor.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, &lt;code&gt;&amp;lt;C-w&amp;gt;d&lt;&#x2F;code&gt; opens a floating window showing the diagnostics in the line under the cursor.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, &lt;code&gt;[d&lt;&#x2F;code&gt; and &lt;code&gt;]d&lt;&#x2F;code&gt; can be used to move the cursor to the previous and next diagnostic of the current file.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;strong&gt;Since Neovim v0.11&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, &lt;code&gt;grn&lt;&#x2F;code&gt; renames all references of the symbol under the cursor.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, &lt;code&gt;gra&lt;&#x2F;code&gt; shows a list of code actions available in the line under the cursor.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, &lt;code&gt;grr&lt;&#x2F;code&gt; lists all the references of the symbol under the cursor.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, &lt;code&gt;gri&lt;&#x2F;code&gt; lists all the implementations for the symbol under the cursor.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;In normal mode, &lt;code&gt;gO&lt;&#x2F;code&gt; lists all symbols in the current buffer.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;In insert mode, &lt;code&gt;&amp;lt;Ctrl-s&amp;gt;&lt;&#x2F;code&gt; displays the function signature of the symbol under the cursor.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;lsp-keymaps&quot;&gt;LSP keymaps&lt;&#x2F;h2&gt;
&lt;p&gt;Neovim v0.11 has defaults keymaps for almost everything now. The good news is that older versions of Neovim have the same features as v0.11, so the only thing we have to do is create keymaps for them.&lt;&#x2F;p&gt;
&lt;p&gt;So here&#x27;s the code you can add in your personal configuration.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- you can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- These keymaps are the defaults in Neovim v0.10&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;[d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_prev()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;]d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_next()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-w&amp;gt;d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-w&amp;gt;&amp;lt;C-d&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; bufmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; rhs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; lhs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(mode, rhs, lhs, {buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- These keymaps are the defaults in Neovim v0.11&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;K&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.hover()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.references()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gri&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.implementation()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grn&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.rename()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gra&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.code_action()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gO&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.document_symbol()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-s&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.signature_help()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- These are custom keymaps&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gd&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grt&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.type_definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grd&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.declaration()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gq&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.format({async = true})&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And here is the vimscript equivalent:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; you can add this in your init.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; These keymaps are the defaults in Neovim v0.10&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span&gt; [d &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.diagnostic.goto_prev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span&gt; ]d &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.diagnostic.goto_next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;d &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.diagnostic.open_float&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-d&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.diagnostic.open_float&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; LspAttached&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; abort&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; These keymaps are the defaults in Neovim v0.11&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; K &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.hover&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; grr &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.references&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gri &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.implementation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; grn &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.rename&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gra &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.code_action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gO &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.document_symbol&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.signature_help&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  snoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.signature_help&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; These are custom keymaps&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; gd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.definition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gq &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;{async &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  xnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gq &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;{async &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; grd &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.declaration&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; grt &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.type_definition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;autocmd LspAttach * call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; LspAttached&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;fair-warning&quot;&gt;Fair warning&lt;&#x2F;h2&gt;
&lt;p&gt;Not every language server implements the entire LSP specification. The features may not be consistent between servers.&lt;&#x2F;p&gt;
&lt;p&gt;For example, Gleam can show diagnostics in real time, there is no need to save the file to get new diagnostics. But &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;rust-lang&#x2F;rust-analyzer&quot;&gt;rust-analyzer&lt;&#x2F;a&gt;, the language server for rust, can only update diagnostics after saving the file.&lt;&#x2F;p&gt;
&lt;p&gt;Here&#x27;s another example: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;astral-sh&#x2F;ruff-lsp&quot;&gt;ruff-lsp&lt;&#x2F;a&gt;, a language server for python. It describes itself as a linter and code formatter. As far as I can tell &lt;code&gt;ruff-lsp&lt;&#x2F;code&gt; does not provide code completions or semantic highlights.&lt;&#x2F;p&gt;
&lt;p&gt;What I want say is this: read the documentation of the language server so you know what it can do.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;bonus-content&quot;&gt;Bonus content&lt;&#x2F;h2&gt;
&lt;p&gt;At this point I&#x27;d say you have all the essential knowledge needed to be productive. What follows are tips, configurations, and features you can implement by adding some boilerplate code in your Neovim configuration.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;format-on-save&quot;&gt;Format on save&lt;&#x2F;h3&gt;
&lt;p&gt;What we do here is trigger the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.buf.format()&quot;&gt;vim.lsp.buf.format()&lt;&#x2F;a&gt; before Neovim saves a file. And of course, we only do it when there is an active language server.&lt;&#x2F;p&gt;
&lt;p&gt;Important note: most language servers with formatting capabilities have their own style settings. For example, we can have 2 space indent in our Neovim config but maybe the language server formats the code with 4 space indent. So it&#x27;s a good idea to check the documentation of the language server to see how to configure that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local fmt_group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_augroup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;autoformat_cmds&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {clear&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; setup_autoformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_get&lt;&#x2F;span&gt;&lt;span&gt;(event, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;data&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;client_id&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_client_by_id&lt;&#x2F;span&gt;&lt;span&gt;(id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_clear_autocmds&lt;&#x2F;span&gt;&lt;span&gt;({group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fmt_group, buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; buf_format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.lsp.buf.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;format&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      bufnr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; e.buf,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      async&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      timeout_ms&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 10000&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;BufWritePre&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fmt_group,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Format current buffer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; buf_format,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Setup format on save&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; setup_autoformat,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;change-diagnostics-sign-text&quot;&gt;Change diagnostics sign text&lt;&#x2F;h3&gt;
&lt;p&gt;When using &lt;strong&gt;Neovim v0.9.5 or lower&lt;&#x2F;strong&gt; we need to call the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;builtin.html#sign_define()&quot;&gt;vim.fn.sign_define()&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; sign_define&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign_define&lt;&#x2F;span&gt;&lt;span&gt;(args.name, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    texthl&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; args.name,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; args.text,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    numhl&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign_define&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignError&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;✘&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign_define&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignWarn&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▲&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign_define&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignHint&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;⚑&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign_define&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignInfo&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;»&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When using &lt;strong&gt;Neovim v0.10 or greater&lt;&#x2F;strong&gt; we should do this with &lt;code&gt;vim.diagnostic.config()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.diagnostic.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  signs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      [vim.diagnostic.severity.ERROR] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;✘&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      [vim.diagnostic.severity.WARN] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▲&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      [vim.diagnostic.severity.HINT] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;⚑&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      [vim.diagnostic.severity.INFO] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;»&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;disable-semantic-highlights&quot;&gt;Disable semantic highlights&lt;&#x2F;h3&gt;
&lt;p&gt;To opt-out of this feature Neovim&#x27;s documentation suggest that we &quot;delete&quot; a property from the LSP client instance.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Disable LSP semantic highlights&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_get&lt;&#x2F;span&gt;&lt;span&gt;(event, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;data&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;client_id&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_client_by_id&lt;&#x2F;span&gt;&lt;span&gt;(id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span&gt; client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    client.server_capabilities.semanticTokensProvider&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;highlight-symbol-under-cursor&quot;&gt;Highlight symbol under cursor&lt;&#x2F;h3&gt;
&lt;p&gt;What we want to do here is call the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.buf.document_highlight()&quot;&gt;vim.lsp.buf.document_highlight()&lt;&#x2F;a&gt; when the cursor spends some amount of time on top of a symbol. And then clear the highlight when the cursor moves.&lt;&#x2F;p&gt;
&lt;p&gt;Note, for this to work properly the colorscheme needs to support the following highlight groups:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;LspReferenceRead&lt;&#x2F;li&gt;
&lt;li&gt;LspReferenceText&lt;&#x2F;li&gt;
&lt;li&gt;LspReferenceWrite&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;If the colorscheme does not support these highlight groups, we can &quot;link&quot; them to an existing group. Here&#x27;s an example using the &lt;code&gt;Search&lt;&#x2F;code&gt; highlight group.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_set_hl&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspReferenceRead&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {link&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_set_hl&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspReferenceText&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {link&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_set_hl&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspReferenceWrite&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {link&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- time it takes to trigger the `CursorHold` event&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.updatetime&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 400&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; highlight_symbol&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_get&lt;&#x2F;span&gt;&lt;span&gt;(event, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;data&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;client_id&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_client_by_id&lt;&#x2F;span&gt;&lt;span&gt;(id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or not&lt;&#x2F;span&gt;&lt;span&gt; client.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;supports_method&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;textDocument&#x2F;documentHighlight&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_augroup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;highlight_symbol&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {clear&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_clear_autocmds&lt;&#x2F;span&gt;&lt;span&gt;({buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf, group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; group})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;CursorHold&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;CursorHoldI&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; group,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.buf.document_highlight,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;CursorMoved&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;CursorMovedI&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; group,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.buf.clear_references,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Setup highlight symbol&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; highlight_symbol,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;simple-tab-complete&quot;&gt;Simple tab complete&lt;&#x2F;h3&gt;
&lt;p&gt;In this one we will use the &lt;code&gt;Tab&lt;&#x2F;code&gt; (and shift tab) key to navigate between the items in the completion menu. When the completion menu is not visible and the cursor is in a whitespace character, it will insert a tab character. Else, it will trigger the completion menu.&lt;&#x2F;p&gt;
&lt;p&gt;When the language server can provide code completion it&#x27;ll use that. Otherwise, it will try to suggest words found in the current buffer.&lt;&#x2F;p&gt;
&lt;p&gt;Note that you can use the Enter key or &lt;code&gt;&amp;lt;C-y&amp;gt;&lt;&#x2F;code&gt; to confirm the current item in the completion menu&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.completeopt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menu&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menuone&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;noselect&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;noinsert&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;shortmess&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;append&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;c&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; tab_complete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pumvisible&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- navigate to next item in completion menu&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;Down&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;col&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local is_whitespace&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getline&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;):&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sub&lt;&#x2F;span&gt;&lt;span&gt;(c, c):&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;match&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;%s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; is_whitespace&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- insert tab&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local lsp_completion&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.bo.omnifunc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;v:lua.vim.lsp.omnifunc&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; lsp_completion&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- trigger lsp code completion&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;C-x&amp;gt;&amp;lt;C-o&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  -- suggest words in current buffer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;C-x&amp;gt;&amp;lt;C-n&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; tab_prev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pumvisible&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- navigate to previous item in completion menu&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;Up&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  -- insert tab&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, tab_complete, {expr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;S-Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, tab_prev, {expr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;expand-snippets&quot;&gt;Expand snippets&lt;&#x2F;h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Neovim v0.11 or greater is required.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;For this we use a new module called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#lsp-completion&quot;&gt;vim.lsp.completion&lt;&#x2F;a&gt;, this will extend the behavior of the builtin completion so it can support &quot;additional text edits&quot; a language server can provide. Additional edits can be things like adding missing import statements or expanding code snippets.&lt;&#x2F;p&gt;
&lt;p&gt;Right now you have to opt-in to the features &lt;code&gt;vim.lsp.completion&lt;&#x2F;code&gt; provides. So, when a language server is active you have to call the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.completion.enable()&quot;&gt;vim.lsp.completion.enable()&lt;&#x2F;a&gt; function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.completeopt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menu&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menuone&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;noinsert&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;noselect&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Enable vim.lsp.completion&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local client_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_get&lt;&#x2F;span&gt;&lt;span&gt;(event, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;data&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;client_id&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span&gt; client_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.lsp.completion.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;, client_id, event.buf, {autotrigger&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Trigger lsp completion manually using Ctrl + Space&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-Space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.completion.trigger()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice in the last argument to &lt;code&gt;.enable()&lt;&#x2F;code&gt; there is a property called &lt;code&gt;autotrigger&lt;&#x2F;code&gt;. &lt;code&gt;false&lt;&#x2F;code&gt; is the default value so I just leave it like that. If you set it to &lt;code&gt;true&lt;&#x2F;code&gt; Neovim will trigger the completion menu when it finds a trigger character. Trigger characters change depending on the language server. In lua for example, the completion will be triggered automatically after a &lt;code&gt;.&lt;&#x2F;code&gt; or &lt;code&gt;:&lt;&#x2F;code&gt; character.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;enable-inlay-hints&quot;&gt;Enable inlay hints&lt;&#x2F;h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Neovim v0.10 or greater is required.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;For this we can use the function &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.inlay_hint.enable()&quot;&gt;vim.lsp.inlay_hint.enable()&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Note that some language servers may have inlay hints disabled by default. The settings needed to enable hints should be in the documentation of the language server.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- You can add this in your init.lua&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or a global plugin&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Enable inlay hints&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_get&lt;&#x2F;span&gt;&lt;span&gt;(event, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;data&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;client_id&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_client_by_id&lt;&#x2F;span&gt;&lt;span&gt;(id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span&gt; client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or not&lt;&#x2F;span&gt;&lt;span&gt; client.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;supports_method&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;textDocument&#x2F;inlayHint&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.lsp.inlay_hint.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;enable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;, {bufnr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; event.buf})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Hopefully I showed is not difficult to &quot;connect&quot; a language server with Neovim. The hard part is gathering all the context inside your head. What does LSP even mean? What&#x27;s a language server? Filetype plugin? I hardly know her. But once you know about the moving pieces and where to find the information you need, it gets easier.&lt;&#x2F;p&gt;
&lt;p&gt;One last thing, don&#x27;t ignore the basics. Take your time and learn lua, read &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua-guide.html&quot;&gt;Neovim&#x27;s lua guide&lt;&#x2F;a&gt; and learn how to navigate Neovim&#x27;s documentation with the &lt;code&gt;:help&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>How to survive without multiple cursors in vim</title>
        <published>2023-01-15T00:00:00+00:00</published>
        <updated>2023-01-15T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/how-to-survive-without-multiple-cursors-in-vim/"/>
        <id>https://vonheikemen.github.io/devlog/tools/how-to-survive-without-multiple-cursors-in-vim/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/how-to-survive-without-multiple-cursors-in-vim/">&lt;p&gt;Yes, multiple cursors are magical. They are convenient, easy to use and every modern editor has them. Now vim on the other hand doesn&#x27;t have this feature. It&#x27;s fine. We can be happy without them. Well... I can and I&#x27;m going to tell you how.&lt;&#x2F;p&gt;
&lt;p&gt;We&#x27;ll go throught a few scenarios where multiple cursors can be useful and I&#x27;ll tell you what alternatives we have in vim.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;replace-word-under-the-cursor&quot;&gt;Replace word under the cursor&lt;&#x2F;h2&gt;
&lt;p&gt;In vim we begin this process by searching the word under the cursor, for this we press the &lt;code&gt;*&lt;&#x2F;code&gt; key. Then we press the sequence &lt;code&gt;cgn&lt;&#x2F;code&gt; to replace the next match. If we want to repeat this action we press the &lt;code&gt;.&lt;&#x2F;code&gt; key. If we want to ignore a match we move to the next with &lt;code&gt;n&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;We can make this process a lot more convenient by making a keybinding.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;j *``cgn&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this we can use the leader key + j to replace the word under the cursor. We can navigate to other matches with &lt;code&gt;n&lt;&#x2F;code&gt; or &lt;code&gt;N&lt;&#x2F;code&gt;, then use the &lt;code&gt;.&lt;&#x2F;code&gt; key when we want to replace the text.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;qxb6feyI4ieLUlFUwO2kXzV4I.js&quot;
    id=&quot;asciicast-qxb6feyI4ieLUlFUwO2kXzV4I&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;540516&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;h2 id=&quot;rename-a-variable&quot;&gt;Rename a variable&lt;&#x2F;h2&gt;
&lt;p&gt;Maybe the thing we want to change is a variable in our code, in this case we only need to change the valid references. Things get complicated here. Since vim isn&#x27;t an IDE this kind of features are not available out of the box. But it doesn&#x27;t mean is impossible, we can still do it, there are plugins that allow us to use LSP servers. It just so happens that rename variables is one the things an LSP server can do.&lt;&#x2F;p&gt;
&lt;p&gt;I use neovim btw, not vim. I just need something like this in my config.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;.tsserver.setup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;{}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;F2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.lsp.buf.rename&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here I&#x27;m using &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&quot;&gt;nvim-lspconfig&lt;&#x2F;a&gt; to configure &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;theia-ide&#x2F;typescript-language-server&quot;&gt;tsserver&lt;&#x2F;a&gt;. Then I create the keybinding &lt;code&gt;&amp;lt;F2&amp;gt;&lt;&#x2F;code&gt; to rename the variable under the cursor.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;217Yk9e9HtmuPi0t8HsNPHOAN.js&quot;
    id=&quot;asciicast-217Yk9e9HtmuPi0t8HsNPHOAN&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;540539&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;If you use vim you can try out one these plugins:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;prabirshrestha&#x2F;vim-lsp&quot;&gt;vim-lsp&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neoclide&#x2F;coc.nvim&quot;&gt;coc.nvim&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;replace-a-selection&quot;&gt;Replace a selection&lt;&#x2F;h2&gt;
&lt;p&gt;So maybe the thing we want to change is not a word, maybe is a sentence or an html attribute. For this we don&#x27;t have a built-in tool, we need to implement something ourselves. So let&#x27;s do that.&lt;&#x2F;p&gt;
&lt;p&gt;First thing we should do is add the current selection to the &quot;search register&quot;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let @&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;=escape(@&amp;quot;, &amp;#39;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here we take the text inside the &lt;code&gt;&quot;&lt;&#x2F;code&gt; register, where our selection is stored, and put it in the &lt;code&gt;&#x2F;&lt;&#x2F;code&gt; register.&lt;&#x2F;p&gt;
&lt;p&gt;The next step would be to delete the selection and enter insert mode. We use this sequence.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&amp;quot;_cgn&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With &lt;code&gt;&quot;_&lt;&#x2F;code&gt; we tell vim that our next operation should store text in the &lt;code&gt;_&lt;&#x2F;code&gt; register. With &lt;code&gt;cgn&lt;&#x2F;code&gt; we replace the closest match to our search.&lt;&#x2F;p&gt;
&lt;p&gt;If we put the pieces together in a keybinding, we get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;xnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;j y&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;let @&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;=escape(@&amp;quot;, &amp;#39;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;)&amp;lt;cr&amp;gt;&amp;quot;_cgn&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But this command doesn&#x27;t handle newlines. It won&#x27;t work with selection with multiple lines. But we can handle that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;xnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;j y&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;substitute&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;escape&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;@&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;, &amp;#39;&#x2F;&amp;#39;), &amp;#39;\n&amp;#39;, &amp;#39;\\n&amp;#39;, &amp;#39;g&amp;#39;)&amp;lt;cr&amp;gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;_cgn&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now here we use the &lt;code&gt;substitute&lt;&#x2F;code&gt; function to replace the newline character with &lt;code&gt;\n&lt;&#x2F;code&gt;, this way our search term will always be one line.&lt;&#x2F;p&gt;
&lt;p&gt;How do we use this? Same way we did with the previous keybinding &lt;code&gt;&amp;lt;leader&amp;gt;j&lt;&#x2F;code&gt; in the section &quot;Replace word under the cursor&quot;. But here we must first enter visual mode and select something. Everything else works the same, if we want to replace we use the &lt;code&gt;.&lt;&#x2F;code&gt; key, then we move to the next match with &lt;code&gt;n&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;add-text-to-the-beginning-of-a-list&quot;&gt;Add text to the beginning of a list&lt;&#x2F;h2&gt;
&lt;p&gt;Let&#x27;s say we have a list of words and we want to convert them to an ordered list in markdown.&lt;&#x2F;p&gt;
&lt;p&gt;Want to turn this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;volar&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;html&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;cssls&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Into this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;1. volar&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;1. html&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;1. cssls&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In vim we have a mode called Visual Block, when in this mode we can add text to each line selected if we go to insert mode using &lt;code&gt;I&lt;&#x2F;code&gt; or &lt;code&gt;A&lt;&#x2F;code&gt;. After you added the text and exit insert mode vim will repeat the action on every line.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s go step by step how to use this feature.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;tjCikrHM5d1QsoSk00u9iUQMa.js&quot;
    id=&quot;asciicast-tjCikrHM5d1QsoSk00u9iUQMa&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;539909&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;ol&gt;
&lt;li&gt;We go to the first character in the line.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;Ctrl + v&lt;&#x2F;code&gt; to enter visual block mode.&lt;&#x2F;li&gt;
&lt;li&gt;Select the lines we want to change.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;I&lt;&#x2F;code&gt; to place the cursor at the beginning of the selection.&lt;&#x2F;li&gt;
&lt;li&gt;Add the text.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;Esc&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;h2 id=&quot;append-to-the-end-of-a-list&quot;&gt;Append to the end of a list&lt;&#x2F;h2&gt;
&lt;p&gt;We can do that too. The steps are almost identical to the previous section, the only difference is we need to extend the selection until the end of the line.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s add something to the previous example.&lt;&#x2F;p&gt;
&lt;p&gt;Okay, we have our ordered list but now we want to append &lt;code&gt;(is supported)&lt;&#x2F;code&gt; to the end of each item.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;eF1Pdf34IY4Sj5PixzjCqPIxz.js&quot;
    id=&quot;asciicast-eF1Pdf34IY4Sj5PixzjCqPIxz&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;539912&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;ol&gt;
&lt;li&gt;We go to the first character in the line.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;Ctrl + v&lt;&#x2F;code&gt; to enter visual block mode.&lt;&#x2F;li&gt;
&lt;li&gt;Select the lines we want to change.&lt;&#x2F;li&gt;
&lt;li&gt;Expand the selection to the end of the line using &lt;code&gt;$&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;A&lt;&#x2F;code&gt; to place the cursor at the end of the selection.&lt;&#x2F;li&gt;
&lt;li&gt;Add the text.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;Esc&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;h2 id=&quot;repeat-movements&quot;&gt;Repeat movements&lt;&#x2F;h2&gt;
&lt;p&gt;Visual block mode can be useful but is very limited. We can only add text in one place. What do we do in more complex scenarios? We use macros. A macro is a piece of text that describes a sequence of keypresses. We can &quot;record&quot; a macro and repeat the sequence as many times as we want.&lt;&#x2F;p&gt;
&lt;p&gt;How do we use macros? We need to pick a register so the first step is to press &lt;code&gt;q&lt;&#x2F;code&gt; followed by a letter. Then we go and do whatever actions we want. We stop recording the macro by pressing &lt;code&gt;q&lt;&#x2F;code&gt; again. To repeat these actions we press &lt;code&gt;@&lt;&#x2F;code&gt; followed by the register we chose in the first step.&lt;&#x2F;p&gt;
&lt;p&gt;Example time.&lt;&#x2F;p&gt;
&lt;p&gt;We have this list.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;volar&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;html&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;cssls&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;eslint&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And we want to turn it into an ordered list of links.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;1. [volar](http:&#x2F;&#x2F;localhost&#x2F;how-to-configure-volar-lsp)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;1. [html](http:&#x2F;&#x2F;localhost&#x2F;how-to-configure-html-lsp)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;1. [cssls](http:&#x2F;&#x2F;localhost&#x2F;how-to-configure-cssls-lsp)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;1. [eslint](http:&#x2F;&#x2F;localhost&#x2F;how-to-configure-eslint-lsp)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice here we need to add text to the beginning and the end of the list. Additionally, we need to copy the item in the middle of the link.&lt;&#x2F;p&gt;
&lt;p&gt;What do we do? We record a macro, modify the first item then repeat the macro to convert the rest of the list. These are the steps.&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;Record the macro in the register &lt;code&gt;i&lt;&#x2F;code&gt;. Press &lt;code&gt;qi&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;Modify the first item.&lt;&#x2F;li&gt;
&lt;li&gt;We stop recording the macro by pressing &lt;code&gt;q&lt;&#x2F;code&gt; again.&lt;&#x2F;li&gt;
&lt;li&gt;We repeat the macro three times using &lt;code&gt;3@i&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;85qQ7TtkOclesgMJNBDcKk5BK.js&quot;
    id=&quot;asciicast-85qQ7TtkOclesgMJNBDcKk5BK&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;540581&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;When we apply a macro using a count we need to consider the position of the cursor. In this particular case I begin the macro by pressing &lt;code&gt;0&lt;&#x2F;code&gt;, to make sure the cursor is at the beginning of the line. Then at the very end of the macro I press &lt;code&gt;j&lt;&#x2F;code&gt;, so the last movement can place the cursor in the next line.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;apply-macro-in-specific-lines&quot;&gt;Apply macro in specific lines&lt;&#x2F;h3&gt;
&lt;p&gt;Another interesting way to apply a macro is by using the &lt;code&gt;g&lt;&#x2F;code&gt; command. With it we can begin a search and then execute a command in each line there is a match. In our case we want to apply a macro, we can do that with the command &lt;code&gt;normal @i&lt;&#x2F;code&gt; (where &lt;code&gt;i&lt;&#x2F;code&gt; can be any register).&lt;&#x2F;p&gt;
&lt;p&gt;Say we want to look for every line with the word &lt;code&gt;vim&lt;&#x2F;code&gt; then apply a macro. We do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:g&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;vim&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;normal&lt;&#x2F;span&gt;&lt;span&gt; @i&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now, you might want to inspect the result of the search before doing anything you&#x27;ll regret. If you omit the last section with the command then &lt;code&gt;:g&lt;&#x2F;code&gt; will just print the lines.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:g&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;vim&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If everything looks okay then add the &lt;code&gt;normal @i&lt;&#x2F;code&gt; bit.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;apply-a-macro-in-a-selection&quot;&gt;Apply a macro in a selection&lt;&#x2F;h3&gt;
&lt;p&gt;We don&#x27;t have to use the &lt;code&gt;g&lt;&#x2F;code&gt; command. The &lt;code&gt;normal&lt;&#x2F;code&gt; commands supports ranges, this means we can select any amount of lines then execute this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;,&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;normal&lt;&#x2F;span&gt;&lt;span&gt; @i&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: Don&#x27;t worry about writing &lt;code&gt;&#x27;&amp;lt;,&#x27;&amp;gt;&lt;&#x2F;code&gt;, vim will add that for you when you go from visual mode to command mode.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;That command will execute the macro in each line of the selection. Keep in mind the cursor will be placed at the beginning of the line automatically.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;search-selection-and-apply-macro&quot;&gt;Search selection and apply macro&lt;&#x2F;h3&gt;
&lt;p&gt;Yet another alternative to the &lt;code&gt;g&lt;&#x2F;code&gt; command. Because maybe we don&#x27;t want to make a regular expresion to search. Most of the time I just want to select something, search it, then apply a macro. We already know how to do all those things, let&#x27;s just put the pieces together.&lt;&#x2F;p&gt;
&lt;p&gt;Remember this guy?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;y&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;let @&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;=substitute(escape(@&amp;quot;, &amp;#39;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;), &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span&gt;n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;g&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;)&amp;lt;cr&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Is the thing we use to search the current selection. After this sequence we need to begin the macro. So we will add this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;gvqi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Since we lose the selection when pressing &lt;code&gt;y&lt;&#x2F;code&gt; we need to reselect everything, so we use &lt;code&gt;gv&lt;&#x2F;code&gt;. Then &lt;code&gt;qi&lt;&#x2F;code&gt; just begins to record the macro in the register &lt;code&gt;i&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Now everything together.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;xnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;i y&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;let @&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;=substitute(escape(@&amp;quot;, &amp;#39;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;), &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span&gt;n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;, &amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;g&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;)&amp;lt;cr&amp;gt;gvqi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The story is not over yet. We need to apply the macro in each match. We will use &lt;code&gt;gn&lt;&#x2F;code&gt; to navigate to the match and select it. Once the cursor is in the match we apply the macro with &lt;code&gt;@i&lt;&#x2F;code&gt;. We are not doing that manually, no, we are going to create a keybinding.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;F8&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gn@i&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Story time.&lt;&#x2F;p&gt;
&lt;p&gt;A few months ago I was trying this plugin manager, &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;wbthomason&#x2F;packer.nvim&quot;&gt;packer.nvim&lt;&#x2F;a&gt;. I had something like this in my configuration.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;packer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;startup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;use&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  use&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;nvim-lualine&#x2F;lualine.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plugins.lualine&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  use&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;akinsho&#x2F;bufferline.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plugins.bufferline&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  use&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;lukas-reineke&#x2F;indent-blankline.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plugins.indent-blankline&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It bothered me that I had to repeat &lt;code&gt;function() require...&lt;&#x2F;code&gt; for each plugin. And yes, it&#x27;s packer thing. They do weird stuff with functions. Anyway, I looked around in a few places and found a way to reduce the boilerplate. I wrote this function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; load&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; string.format&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;[[pcall(require, &amp;#39;plugins.%s&amp;#39;)]]&lt;&#x2F;span&gt;&lt;span&gt;, name)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And with it I could write the &lt;code&gt;config&lt;&#x2F;code&gt; option like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; load&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lualine&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now it&#x27;s refactor time. I had to change each &lt;code&gt;config&lt;&#x2F;code&gt; option and this is how I did it.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;OUlPjhimpPKIDxEqPJgoxHcYt.js&quot;
    id=&quot;asciicast-OUlPjhimpPKIDxEqPJgoxHcYt&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;Ver en &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;OUlPjhimpPKIDxEqPJgoxHcYt&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;ol&gt;
&lt;li&gt;I select the pattern I want to search. Go to visual mode and select &lt;code&gt;config = &lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;I start recording the macro using &lt;code&gt;&amp;lt;leader&amp;gt;i&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;I replace the old function with &lt;code&gt;load&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;End the macro by pressing &lt;code&gt;q&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;n&lt;&#x2F;code&gt; to go to the next match.&lt;&#x2F;li&gt;
&lt;li&gt;Press &lt;code&gt;&amp;lt;F8&amp;gt;&lt;&#x2F;code&gt; to apply the macro.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;h2 id=&quot;the-good-old-search-and-replace&quot;&gt;The Good Old Search and Replace&lt;&#x2F;h2&gt;
&lt;p&gt;Sometimes a simple tool can do the job.&lt;&#x2F;p&gt;
&lt;p&gt;So vim has the &lt;code&gt;substitute&lt;&#x2F;code&gt; command. This is the syntax.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;%s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;&amp;lt;pattern&amp;gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;replacement&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;g&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here &lt;code&gt;%&lt;&#x2F;code&gt; is a range, it means the current buffer. Basically, search the entire buffer. The &lt;code&gt;s&lt;&#x2F;code&gt; is the actual command, &#x27;cause we don&#x27;t need to type &lt;code&gt;substitute&lt;&#x2F;code&gt;. &lt;code&gt;&amp;lt;pattern&amp;gt;&lt;&#x2F;code&gt; is the regular expression we want to search. &lt;code&gt;&amp;lt;replacement&amp;gt;&lt;&#x2F;code&gt; is the new text. And &lt;code&gt;g&lt;&#x2F;code&gt; is a flag, it tells vim to search the entire line. And notice that each item is separated by &lt;code&gt;&#x2F;&lt;&#x2F;code&gt;, we could use other characters (like &lt;code&gt;#&lt;&#x2F;code&gt;) if we wanted to.&lt;&#x2F;p&gt;
&lt;p&gt;Say want to change the word &lt;code&gt;config&lt;&#x2F;code&gt; with &lt;code&gt;setup&lt;&#x2F;code&gt;. We just do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;%s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;config&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;setup&#x2F;g&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It wasn&#x27;t that difficult. We don&#x27;t need to know regular expressions to use &lt;code&gt;substitute&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;fighting-kirby&quot;&gt;Fighting Kirby&lt;&#x2F;h3&gt;
&lt;p&gt;Okay. But there is something you should learn about regular expressions. Is just one simple trick, I swear.&lt;&#x2F;p&gt;
&lt;p&gt;What&#x27;s this fighting Kirby deal? Is a way to remember this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;\(.*\)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;I learned this from &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ThePrimeagen&quot;&gt;ThePrimeagen&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;With this pattern we can create a &quot;group&quot;. Groups can capture the text in the search pattern, and we can reuse that text in the replacement pattern.&lt;&#x2F;p&gt;
&lt;p&gt;Consider this pattern.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;%s&#x2F;`\(.*\)`&#x2F;[\1](#how-to-configure-\1-lsp)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here we capture the text that&#x27;s surrounded by backticks. Then we reference that text using &lt;code&gt;\1&lt;&#x2F;code&gt; and the replacement pattern. Here&#x27;s a demo.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;odouPFLqH5SSHkJuSVhp28yjR.js&quot;
    id=&quot;asciicast-odouPFLqH5SSHkJuSVhp28yjR&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;Ver en &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;542501&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;This demo shows how neovim makes a live preview, showing me the effects of the command in realtime. And yes, because of this feature I think search and replace is a decent alternative to multiple cursors.&lt;&#x2F;p&gt;
&lt;p&gt;If you liked the fighting Kirby consider making a keybinding for it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;cnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;F2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;.*&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This way you can press &lt;code&gt;&amp;lt;F2&amp;gt;&lt;&#x2F;code&gt; in command mode and it&#x27;ll type it for you.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;You are ready. You can go out to the world and be productive in vim. I can&#x27;t guarantee your happiness but you will survive. And its okay if you think multiple cursors are superior to all of this. Doesn&#x27;t matter, now you can live without them when using vim.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Neovim: Plugins to get started</title>
        <published>2022-09-03T00:00:00+00:00</published>
        <updated>2026-01-05T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/neovim-plugins-to-get-started/"/>
        <id>https://vonheikemen.github.io/devlog/tools/neovim-plugins-to-get-started/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/neovim-plugins-to-get-started/">&lt;p&gt;It happens very often that people start using Neovim but they miss some features that other text editors have. Listing open files in tabs, a file tree explorer, show the current git branch, and so on. So here I want to show you a set of plugins that will help you add those common features to Neovim.&lt;&#x2F;p&gt;
&lt;p&gt;The only thing I will not cover here is &lt;strong&gt;autocompletion&lt;&#x2F;strong&gt;. Smart code completion usually involves integrating with external tools. It means there is a fair amount of details that need to be explained, so there is dedicated post for that: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.to&#x2F;vonheikemen&#x2F;getting-started-with-neovims-native-lsp-client-in-the-year-of-2022-the-easy-way-bp3&quot;&gt;Getting started with Neovim&#x27;s LSP client&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;All the configuration shown in this post will be in this repository: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;nvim-starter&#x2F;tree&#x2F;02-opinionated&quot;&gt;nvim-starter - branch: 02-opinionated&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;requirements&quot;&gt;Requirements&lt;&#x2F;h2&gt;
&lt;p&gt;If you&#x27;re completely new to Neovim I recommend learning lua&#x27;s syntax. If you don&#x27;t want to learn everything at least have a &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;learnxinyminutes.com&#x2F;docs&#x2F;lua&#x2F;&quot;&gt;reference&lt;&#x2F;a&gt; to know what is valid. All the plugins I&#x27;ll share here are configured using lua.&lt;&#x2F;p&gt;
&lt;p&gt;If you haven&#x27;t created a configuration for Neovim, do it now. Here is a guide with everything you need to know: &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;build-your-first-lua-config-for-neovim&#x2F;&quot;&gt;Build your first Neovim configuration in lua&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;You&#x27;ll need Neovim&#x27;s latest stable version. You can download it from the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;neovim&#x2F;releases&quot;&gt;release section&lt;&#x2F;a&gt; in github. From now on I&#x27;ll assume you are using Neovim v0.9.5 or greater.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-do-we-install-plugins&quot;&gt;How do we install plugins?&lt;&#x2F;h2&gt;
&lt;p&gt;First thing we should know is how to install a plugin manually. Turns out we only need to download them in a specific location and Neovim will be able to use it. We can list all the available directories using this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; packpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;?&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That will show a comma separated list of paths.&lt;&#x2F;p&gt;
&lt;p&gt;We can get something better using a little bit of lua.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;vim.tbl_map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;print&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;packpath&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;())&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This one will show the same list but now every path will be in its own line.&lt;&#x2F;p&gt;
&lt;p&gt;In one of those directories we have to create another directory called &lt;code&gt;pack&lt;&#x2F;code&gt;. Inside &lt;code&gt;pack&lt;&#x2F;code&gt; we create the directory that will hold our plugins. The structure has to be something like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;pack&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;└── plugins-from-github&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ├── opt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    │   ├── [plugin 1]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    │   └── [plugin 2]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    └── start&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        └── [plugin 3]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Plugins in &lt;code&gt;opt&lt;&#x2F;code&gt; will only be loaded if we execute the command &lt;code&gt;:packadd&lt;&#x2F;code&gt;. The plugins in &lt;code&gt;start&lt;&#x2F;code&gt; will be loaded automatically during Neovim&#x27;s startup process.&lt;&#x2F;p&gt;
&lt;p&gt;So let&#x27;s assume we have this path in our &lt;code&gt;packpath&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&#x2F;home&#x2F;dev&#x2F;.local&#x2F;share&#x2F;nvim&#x2F;site&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We want to install plugins there, what do we do? Create a &lt;code&gt;pack&lt;&#x2F;code&gt; directory. Then create another directory with any name. Let&#x27;s use the name &lt;code&gt;github&lt;&#x2F;code&gt; because why not? So the full path for our plugins will be this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&#x2F;home&#x2F;dev&#x2F;.local&#x2F;share&#x2F;nvim&#x2F;site&#x2F;pack&#x2F;github&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So to install a plugin like &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&quot;&gt;mini.nvim&lt;&#x2F;a&gt; and have it load automatically, we should place it here.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&#x2F;home&#x2F;dev&#x2F;.local&#x2F;share&#x2F;nvim&#x2F;site&#x2F;pack&#x2F;github&#x2F;start&#x2F;mini.nvim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And that&#x27;s it.&lt;&#x2F;p&gt;
&lt;p&gt;To know more about packages in Neovim read the help page.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help packages&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;plugin-manager&quot;&gt;Plugin manager&lt;&#x2F;h3&gt;
&lt;p&gt;But of course we don&#x27;t have to download plugins manually, we can use a plugin manager that handles everything for us.&lt;&#x2F;p&gt;
&lt;p&gt;At the moment these are the most popular plugin managers in the Neovim ecosystem.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;lazy.nvim&quot;&gt;lazy.nvim&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;readmes&#x2F;mini-deps.html&quot;&gt;mini.deps&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;savq&#x2F;paq-nvim&quot;&gt;paq.nvim&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Remember to read carefully the instructions of the plugin manager you choose.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;plugins&quot;&gt;Plugins&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;tokyonight&quot;&gt;Tokyonight&lt;&#x2F;h3&gt;
&lt;p&gt;Github: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;tokyonight.nvim&quot;&gt;folke&#x2F;tokyonight.nvim&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Because of course the first thing you have to do is change the default theme. We can achieve this by using the command &lt;code&gt;colorscheme&lt;&#x2F;code&gt; followed by the name of the theme.&lt;&#x2F;p&gt;
&lt;p&gt;In lua we can call vim commands using &lt;code&gt;vim.cmd&lt;&#x2F;code&gt;. So to apply the theme we have to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;colorscheme name-of-theme&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is the command we need to use tokyonight.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;colorscheme tokyonight&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;bufferline&quot;&gt;Bufferline&lt;&#x2F;h3&gt;
&lt;p&gt;Github: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;akinsho&#x2F;bufferline.nvim&quot;&gt;akinsho&#x2F;bufferline.nvim&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;You know how other editors show a tab for each open file? Okay, that&#x27;s not how it works in Neovim. For starters we call them tabpages, they are like workspaces, inside a tabpage you can open multiple windows. You can even have different working directories per tabpage. But some people prefer the &quot;traditional&quot; behavior and this is what &lt;code&gt;bufferline&lt;&#x2F;code&gt; does, it modifies the tabline so it can show the currently opened files.&lt;&#x2F;p&gt;
&lt;p&gt;Here we find ourselves in a situation where we need to enable the plugin explicitly. The way we do it is by executing a function called &lt;code&gt;.setup()&lt;&#x2F;code&gt; located in the &quot;main&quot; module of the plugin. For bufferline to work we have to add this line of code to our personal configuration.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;bufferline&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This &lt;code&gt;require&lt;&#x2F;code&gt; function is the mechanism we use to load a lua module. The string &lt;code&gt;bufferline&lt;&#x2F;code&gt; is the name of the module itself. And &lt;code&gt;.setup()&lt;&#x2F;code&gt; is a function call, we are telling the lua interpreter we want to execute a function with the name &lt;code&gt;setup&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;To customize the plugin&#x27;s settings you provide a &quot;lua table&quot; to the &lt;code&gt;.setup()&lt;&#x2F;code&gt; function. How do we figure out what settings are available? By reading the documentation.&lt;&#x2F;p&gt;
&lt;p&gt;You can find a reference to the available options in the help page.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help bufferline-configuration&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here&#x27;s an example configuration.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;bufferline&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  options&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;buffers&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    offsets&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      {filetype&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;snacks_layout_box&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  highlights&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    buffer_selected&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      italic&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    indicator_selected&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      fg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {attribute&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;fg&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, highlight&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Function&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      italic&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;options.mode&lt;&#x2F;code&gt;: With the value &lt;code&gt;&#x27;buffers&#x27;&lt;&#x2F;code&gt; will tell bufferline that we want to show one tab per file.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;options.offsets&lt;&#x2F;code&gt;: Must be a list of filetypes. When one of these filetypes appears bufferline will avoid rendering a tab above the window. Here we are adding the &lt;code&gt;snacks_layout_box&lt;&#x2F;code&gt; because it&#x27;ll be our file explorer. When the explorer window shows up it&#x27;ll look like a side bar.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;highlights&lt;&#x2F;code&gt;: With this we can modify the colors of the components in the tab. Each section (like &lt;code&gt;buffer_selected&lt;&#x2F;code&gt;) must be the name of a component. In this example I&#x27;m using &lt;code&gt;italic = false&lt;&#x2F;code&gt; to tell bufferline I want to disable italic characters. The property &lt;code&gt;fg&lt;&#x2F;code&gt; is the one that changes the color of the characters. In here I&#x27;m telling it to use the same highlight color my colorscheme uses for functions. If you want to see more details about highlights checkout &lt;code&gt;:help bufferline-highlights&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Is worth noting bufferline also offers handful of user commands to navigate between files and some other stuff. But the one I&#x27;ve used the most is &lt;code&gt;BufferLinePick&lt;&#x2F;code&gt;. This will allow us to select a visible tab without using the mouse. And we can use it in a keymap for extra convenience.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gt&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;BufferLinePick&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;mini-nvim&quot;&gt;mini.nvim&lt;&#x2F;h3&gt;
&lt;p&gt;Github: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&quot;&gt;nvim-mini&#x2F;mini.nvim&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Website: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&quot;&gt;nvim-mini.org&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;mini.nvim&lt;&#x2F;code&gt; is a collection of lua modules. This is meant to improve our experience by enhancing Neovim&#x27;s builtin features or implementing new ones.&lt;&#x2F;p&gt;
&lt;p&gt;There are over 40 modules inside mini.nvim but here I&#x27;ll show 7 that I find very useful.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-statusline.html&quot;&gt;mini.statusline&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;The statusline is a component of Neovim&#x27;s UI. Is a line located at the bottom of each window. It usually separates the window from the message area. This is where Neovim shows information like the file name and the location of the cursor. And much like the tabline, the statusline can also be modified.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;mini.statusline&lt;&#x2F;code&gt; is an implementation of the statusline that looks a little bit better than the default. And it can also show information provided by other modules in mini.nvim.&lt;&#x2F;p&gt;
&lt;p&gt;Just like bufferline has a &lt;code&gt;.setup()&lt;&#x2F;code&gt; every module in mini.nvim follows the same convention. This is enough to make the plugin work.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.statusline&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you want to know more details about a module in mini.nvim use the &lt;code&gt;:help&lt;&#x2F;code&gt; command and the name of the module.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help mini.statusline&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-git.html&quot;&gt;mini.git&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;mini.git&lt;&#x2F;code&gt; can track information about the current directory if it&#x27;s git repository. And also provides a user command (&lt;code&gt;:Git&lt;&#x2F;code&gt;) that allows us to use git&#x27;s cli inside Neovim.&lt;&#x2F;p&gt;
&lt;p&gt;By default &lt;code&gt;mini.statusline&lt;&#x2F;code&gt; will show the current git branch if we enable &lt;code&gt;mini.git&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.git&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;:Git&lt;&#x2F;code&gt; command provided by this plugin will try integrate Neovim whenever possible. For example, &lt;code&gt;:Git diff&lt;&#x2F;code&gt; will show the output of the diff in a Neovim buffer. &lt;code&gt;:Git commit&lt;&#x2F;code&gt; will use the current Neovim instance as the editor for the commit message. To know more details read the documentation.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help mini.git&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-diff.html&quot;&gt;mini.diff&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;mini.diff&lt;&#x2F;code&gt; is another &quot;git based&quot; module. This one can show if something was deleted, added or changed in real time.&lt;&#x2F;p&gt;
&lt;p&gt;Let me share with you my personal configuration.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.signcolumn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;yes&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.diff&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    style&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;sign&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    signs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      add&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▎&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      change&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▎&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      delete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;➤&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here I set the &lt;code&gt;signcolumn&lt;&#x2F;code&gt; option to &lt;code&gt;yes&lt;&#x2F;code&gt; because I want to reserve a space in the gutter, next to the line numbers. And inside the &lt;code&gt;mini.diff&lt;&#x2F;code&gt; settings I change the &quot;style&quot; to &lt;code&gt;sign&lt;&#x2F;code&gt; so it can use the signcolumn to show the indicator when there is a change in the code.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-comment.html&quot;&gt;mini.comment&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;mini.comment&lt;&#x2F;code&gt; provides keymaps to toggle comments in a line of code. By default it provides a &lt;code&gt;gc&lt;&#x2F;code&gt; operator which we can use in normal mode. For example &lt;code&gt;gci{&lt;&#x2F;code&gt; will toggle comments in all the lines the inside curly braces. And so anything combination that you can do with a regular operator like &lt;code&gt;d&lt;&#x2F;code&gt; or &lt;code&gt;c&lt;&#x2F;code&gt; you can do with &lt;code&gt;gc&lt;&#x2F;code&gt;. The keymap &lt;code&gt;gcc&lt;&#x2F;code&gt; will toggle only the current line.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.comment&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It is worth noting this feature &lt;code&gt;mini.comment&lt;&#x2F;code&gt; provides is now part of Neovim as of version v0.10. But Neovim&#x27;s implementation is not very configurable, you can&#x27;t change how it works or extend it in any way. &lt;code&gt;mini.comment&lt;&#x2F;code&gt; will work even on Neovim v0.9 and offers a few settings you can change, that includes the function used to provide the comment for the current line.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-notify.html&quot;&gt;mini.notify&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;mini.notify&lt;&#x2F;code&gt; is a custom implementation for &lt;code&gt;vim.notify&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;vim.notify&lt;&#x2F;code&gt; is a lua function that plugin authors use to display a message to end users. The default implementation Neovim provides uses the message area. &lt;code&gt;mini.notify&lt;&#x2F;code&gt; implements a custom function so plugin notifications show up in a floating window on the corner.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.notify&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-clue.html&quot;&gt;mini.clue&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;mini.clue&lt;&#x2F;code&gt; will help you remember (and maybe discover) Neovim key combinations by showing them in a floating window.&lt;&#x2F;p&gt;
&lt;p&gt;Most of mini.nvim&#x27;s module work just fine with their default settings but here we have to be explicit. We have to specify which key combination will trigger the floating with the clues. Here&#x27;s a simple example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local mini_clue&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.clue&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;mini_clue.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  triggers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;g&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;leader&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  clues&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    mini_clue.gen_clues.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;g&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In &lt;code&gt;triggers&lt;&#x2F;code&gt; we add the prefix of the key combination. And &lt;code&gt;clues&lt;&#x2F;code&gt; is where we place the descriptions of the keymaps if we need them.&lt;&#x2F;p&gt;
&lt;p&gt;The cool thing about &lt;code&gt;mini.clue&lt;&#x2F;code&gt; is we don&#x27;t have to do anything special with our custom keymaps. If we create our keymaps with &lt;code&gt;vim.keymap.set()&lt;&#x2F;code&gt; and provide a description that will be enough for it to appear on &lt;code&gt;mini.clue&lt;&#x2F;code&gt;&#x27;s floating window. For example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Space as a leader key&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39; &amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;w&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;write&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Save file&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;q&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;quit&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Close window&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;mini.clue&lt;&#x2F;code&gt; will be able to show these keymaps in its little floating window, because we specified &lt;code&gt;&amp;lt;leader&amp;gt;&lt;&#x2F;code&gt; as a trigger in the &lt;code&gt;.setup()&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;p&gt;For builtin keymaps where there is no description &lt;code&gt;mini.clue&lt;&#x2F;code&gt; provides a few functions under &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-clue.html#miniclue.gen_clues&quot;&gt;gen_clues&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;A more complete setup would look like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local mini_clue&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.clue&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;mini_clue.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 600&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      width&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 50&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  triggers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;[&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;]&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;g&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;g&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;z&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;z&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;C-w&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;C-x&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;leader&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;lt;leader&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  clues&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    mini_clue.gen_clues.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;g&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    mini_clue.gen_clues.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;z&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    mini_clue.gen_clues.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;windows&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    mini_clue.gen_clues.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;builtin_completion&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice here we even have a &lt;code&gt;window&lt;&#x2F;code&gt; settings to control the width of the floating window, as well as the time it would take for it to appear on screen.&lt;&#x2F;p&gt;
&lt;p&gt;On to the limitations. One thing you should know is that &lt;code&gt;mini.clue&lt;&#x2F;code&gt; does not provide clues for operators. Combinations like &lt;code&gt;ciw&lt;&#x2F;code&gt; or &lt;code&gt;yap&lt;&#x2F;code&gt; can&#x27;t be annotated. This is because keymaps like &lt;code&gt;c&lt;&#x2F;code&gt;, &lt;code&gt;y&lt;&#x2F;code&gt;, &lt;code&gt;d&lt;&#x2F;code&gt; are operators. A plugin simply can&#x27;t hijack these operators without having weird side effects or write a non-trivial amount hacks to make it work.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-icons.html&quot;&gt;mini.icons&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;mini.icons&lt;&#x2F;code&gt; can be considered a multi-purpose module.&lt;&#x2F;p&gt;
&lt;p&gt;For plugin authors it provides an abstraction they can use to show icons with highlights.&lt;&#x2F;p&gt;
&lt;p&gt;For end users (like us) it provides a way to enable or disable fancy icons whenever possible. Some times a plugin will use icons but they don&#x27;t offer a way to disable them. &lt;code&gt;mini.icons&lt;&#x2F;code&gt; can be used as a mechanism to enable or disable fancy icons.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.icons&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({style&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;glyph&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here the &lt;code&gt;style&lt;&#x2F;code&gt; settings is the one that controls what kind of icons should be used. &lt;code&gt;glyph&lt;&#x2F;code&gt; is the default value. So having &lt;code&gt;mini.icons&lt;&#x2F;code&gt; enabled with the default settings means we want the fancy icons. Changing the &lt;code&gt;style&lt;&#x2F;code&gt; to &lt;code&gt;ascii&lt;&#x2F;code&gt; means &lt;code&gt;mini.icons&lt;&#x2F;code&gt; will use standard characters instead of symbols that may not be supported by the font you are using at the moment.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;vim-repeat&quot;&gt;vim-repeat&lt;&#x2F;h3&gt;
&lt;p&gt;Github: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;tpope&#x2F;vim-repeat&quot;&gt;tpope&#x2F;vim-repeat&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Adds &quot;dot repeat&quot; support for other plugins. If you don&#x27;t know, when we press the dot key (&lt;code&gt;.&lt;&#x2F;code&gt;) Neovim tries to repeat the last action we did. For example, if we delete a word using &lt;code&gt;diw&lt;&#x2F;code&gt; we can repeat that just by pressing &lt;code&gt;.&lt;&#x2F;code&gt;. With &lt;code&gt;vim-repeat&lt;&#x2F;code&gt; we can repeat actions made by plugins.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;treesitter&quot;&gt;Treesitter&lt;&#x2F;h3&gt;
&lt;p&gt;Github: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-treesitter&#x2F;nvim-treesitter&quot;&gt;nvim-treesitter&#x2F;nvim-treesitter&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;So treesitter is a library that was added to Neovim, with it Neovim can read your code in the same way a compiler does, it scans the code and creates an abstract syntax tree. In other words, it turns your code into a data structure Neovim can query.&lt;&#x2F;p&gt;
&lt;p&gt;By itself treesitter doesn&#x27;t do anything useful, is more like a tool for Neovim mantainers and plugin authors, they will use treesitter to implement the features everyone else will interact with. For example, inside Neovim there is an alternative mechanism to do syntax highlight, it uses treesitter to assign the highlight groups to the text of a buffer.&lt;&#x2F;p&gt;
&lt;p&gt;Now, for treesitter to actually work we need a treesitter parser. The parser is the thing that reads the code. To install a parser we use the command &lt;code&gt;:TSInstall&lt;&#x2F;code&gt; followed by the name of the language.&lt;&#x2F;p&gt;
&lt;p&gt;So to install a javascript parser we use this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:TSInstall javascript&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When it comes to features there isn&#x27;t a unified interface we can use to &quot;enable treesitter.&quot; We have to look up the documentation of the feature we want to use and follow the instructions.&lt;&#x2F;p&gt;
&lt;p&gt;To enable the syntax highlight based on treesitter the documentation recommends using a filetype plugin or an autocommand on the &lt;code&gt;FileType&lt;&#x2F;code&gt; event. And then we call the function &lt;code&gt;vim.treesitter.start()&lt;&#x2F;code&gt;. Here&#x27;s an example using an autocommand to enable the syntax highlight in javascript related filetypes.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;FileType&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;javascript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;javascriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;js&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;jsx&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.treesitter.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;start&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;ts-enable-nvim&quot;&gt;ts-enable.nvim&lt;&#x2F;h3&gt;
&lt;p&gt;Github: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;ts-enable.nvim&quot;&gt;VonHeikemen&#x2F;ts-enable.nvim&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Using &lt;code&gt;nvim-treesitter&lt;&#x2F;code&gt; now requires some knowledge about how Neovim works. You have to do some amount of work to enable features. Is not that bad if you are willing to install treesitter parsers manually. But it does get complicated when you want nice quality of life features, like installing parsers on demand. &lt;code&gt;ts-enable.nvim&lt;&#x2F;code&gt; is just an abstraction layer, it implements the boilerplate code needed to enable syntax highlight, code folding and indentation based on treesitter.&lt;&#x2F;p&gt;
&lt;p&gt;A basic configuration can look like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- See :help ts-enable-config&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.ts_enable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  parsers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lua&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;vim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;vimdoc&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;c&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;query&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  auto_install&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  highlights&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  indents&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  folds&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The idea here is that you just specify the names of the treesitter parsers you want to use and the features you want to enable. So you don&#x27;t have to write any autocommands, &lt;code&gt;ts-enable.nvim&lt;&#x2F;code&gt; will take care of the details of each feature and can also install missing parsers using &lt;code&gt;nvim-treesitter&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;snacks-nvim&quot;&gt;Snacks.nvim&lt;&#x2F;h3&gt;
&lt;p&gt;Github: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&quot;&gt;folke&#x2F;snacks.nvim&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Snacks.nvim is also a collection of lua modules. But this is different from mini.nvim. Snacks doesn&#x27;t follow the same design as mini. A module in snacks.nvim doesn&#x27;t have any self-inflicted limitation. So we could say Snacks is more ambitious than mini.&lt;&#x2F;p&gt;
&lt;p&gt;Most modules in Snacks.nvim can be enabled using a single setup function from the lua module &lt;code&gt;snacks&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local Snacks&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;snacks&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  ---&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  -- This is where we write our settings&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  ---&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;snacks&lt;&#x2F;code&gt; module is the main interface of Snacks.nvim. Everything that we interact with is inside this one lua module.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;input.md&quot;&gt;Snacks.input&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;Snacks.input&lt;&#x2F;code&gt; is a custom implementation for &lt;code&gt;vim.ui.input()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;vim.ui.input()&lt;&#x2F;code&gt; is a lua function that plugin authors call to get some information from the user. For example, in a file explorer when trying to rename a file it makes sense to ask the user what is the new name for the file.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;Snacks.input&lt;&#x2F;code&gt; implementation shows a floating input in the center of the screen. Instead of using the message area like the default implementation does.&lt;&#x2F;p&gt;
&lt;p&gt;This is what we do to enable it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    icon&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;❯&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;picker.md&quot;&gt;Snacks.picker&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;Snacks.picker&lt;&#x2F;code&gt; does three things: 1) provide an interface to fuzzy find items on a list. 2) implements 50+ &quot;pickers&quot; out of the box. 3) provides a custom implementation for &lt;code&gt;vim.ui.select()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Fuzzy finders became popular in the Neovim community because it provided a way to navigate between files in a very fast way. And the cool thing is that &quot;fuzzy finding&quot; is a very general idea, at its core we are just filtering a list of items. Turns out this is useful for many other use cases. That&#x27;s why Snacks has 50 something pickers already built-in. We have pickers for open files, project files, undo history, keymaps, commands, color schemes... and many others.&lt;&#x2F;p&gt;
&lt;p&gt;Now, &lt;code&gt;vim.ui.select()&lt;&#x2F;code&gt; is a lua function that plugin authors use to ask the user to pick one of several options. &lt;code&gt;Snacks.picker&lt;&#x2F;code&gt; has a custom implementation that uses its fuzzy find interface.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  picker&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ui_select&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    prompt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;❯ &amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Configuring the &lt;code&gt;picker&lt;&#x2F;code&gt; settings in the &lt;code&gt;.setup()&lt;&#x2F;code&gt; is optional if you don&#x27;t want to use the custom implementation for &lt;code&gt;vim.ui.select()&lt;&#x2F;code&gt;. All the pickers in Snacks can be used even if we don&#x27;t use the main &lt;code&gt;.setup()&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;p&gt;How do we use these picker? The most convenient way would be to make them show up by pressing a keymap. You can start with these keymaps:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- docs: https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;picker.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&amp;lt;space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;buffers&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search open files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;ff&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search all files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fh&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;recent&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search file history&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fg&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grep&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search in project&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fd&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;diagnostics&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search diagnostics&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fs&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lines&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Buffer local search&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;u&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;undo&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Undo history&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&#x2F;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;pickers&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search picker&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;?&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;keymaps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search keymaps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;indent.md&quot;&gt;Snacks.indent&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;Snacks.indent&lt;&#x2F;code&gt; adds indent guides to the buffer. So we can visualize the indentation level of a block code.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  indent&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    char&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▏&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;By default the current scope where the cursor is located will be highlighted, and this highlight will have an animation. If we want to disable the animation we use a global variable.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.snacks_animate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To be clear, this will only disable the animation. The current scope will still be highlighted.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;bigfile.md&quot;&gt;Snacks.bigfile&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;This module is mostly for older Neovim versions.&lt;&#x2F;p&gt;
&lt;p&gt;We can use &lt;code&gt;Snacks.bigfile&lt;&#x2F;code&gt; to disable Neovim features when we open a &quot;big file.&quot; Again, this is useful in older Neovim versions because the syntax highlight makes the editor slow to respond. However, in Neovim v0.11 there is an experimental asynchronous highlight enabled, which may eliminate the need for this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  bigfile&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Only use `bigfile` module on older Neovim versions&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.11&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    notify&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    size&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1024&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; *&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1024&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- 1MB&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    setup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;ctx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;syntax clear&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.opt_local.syntax&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;OFF&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.b[ctx.buf]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      if&lt;&#x2F;span&gt;&lt;span&gt; buffer.ts_highlight&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        vim.treesitter.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;stop&lt;&#x2F;span&gt;&lt;span&gt;(ctx.buf)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The idea here is that on files that are bigger than &lt;code&gt;1MB&lt;&#x2F;code&gt; we disable all syntax highlight. Notice the &lt;code&gt;enabled&lt;&#x2F;code&gt; setting will be true if we are using an older version of Neovim below v0.11. So you could omit this module altogether if your Neovim version is recent enough.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;bufdelete.md&quot;&gt;Snacks.bufdelete&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;Snacks.bufdelete&lt;&#x2F;code&gt; offers a few functions we can use to delete a buffer without changing the window layout.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- docs: https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;bufdelete.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;bc&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bufdelete&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Close buffer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;terminal.md&quot;&gt;Snacks.terminal&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Neovim has its own &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;terminal.html&quot;&gt;terminal emulator&lt;&#x2F;a&gt;. But this is basically a &quot;special buffer,&quot; is not a widget or a component. We can&#x27;t just &quot;toggle&quot; a terminal window with a keymap like in other modern editors.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;Snacks.terminal&lt;&#x2F;code&gt; provides functions to manage terminal windows with ease. For the most common use case we can just create a keymap to toggle a terminal.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- docs: https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;terminal.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;t&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-g&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Snacks.terminal.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toggle&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Toggle terminal window&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;explorer.md&quot;&gt;Snacks.explorer&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;&lt;code&gt;Snacks.explorer&lt;&#x2F;code&gt; is a file explorer with a tree style view. Under the hood this is actually a &quot;picker&quot; for &lt;code&gt;Snacks.picker&lt;&#x2F;code&gt;, so you will find that in the documentation some of the settings should be placed in the &lt;code&gt;picker&lt;&#x2F;code&gt; section of the setup.&lt;&#x2F;p&gt;
&lt;p&gt;To start using it we just enable it in the &lt;code&gt;.setup()&lt;&#x2F;code&gt; function and make a keymap.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  explorer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    replace_netrw&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;e&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;explorer&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Toggle file explorer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now if we put everything together we should have something like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local Snacks&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;snacks&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  indent&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    char&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▏&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  explorer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    replace_netrw&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    icon&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;❯&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  picker&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ui_select&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    prompt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;❯ &amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  bigfile&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Only use `bigfile` module on older Neovim versions&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    enabled&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.11&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    notify&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    size&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1024&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; *&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1024&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- 1MB&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    setup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;ctx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;syntax clear&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.opt_local.syntax&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;OFF&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.b[ctx.buf]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      if&lt;&#x2F;span&gt;&lt;span&gt; buffer.ts_highlight&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        vim.treesitter.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;stop&lt;&#x2F;span&gt;&lt;span&gt;(ctx.buf)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Disable indent guide animation&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.snacks_animate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- docs: https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;explorer.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;e&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;explorer&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Toggle file explorer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- docs: https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;terminal.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;t&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-g&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Snacks.terminal.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toggle&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Toggle terminal window&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Close while preserving window layout&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- docs: https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;bufdelete.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;bc&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bufdelete&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Close buffer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Fuzzy finders&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- docs: https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;snacks.nvim&#x2F;blob&#x2F;main&#x2F;docs&#x2F;picker.md&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&amp;lt;space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;buffers&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search open files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;ff&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search all files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fh&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;recent&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search file history&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fg&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;grep&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search in project&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fd&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;diagnostics&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search diagnostics&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;fs&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lines&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Buffer local search&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;u&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;undo&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Undo history&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;&#x2F;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;pickers&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search picker&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;?&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span&gt; Snacks.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;picker&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;keymaps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search keymaps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;what-s-next&quot;&gt;What&#x27;s next?&lt;&#x2F;h2&gt;
&lt;p&gt;Next step is to make Neovim really understand our code: have it autocomplete variables, setup jump to definition, rename variables, all that good stuff. To achieve this I recommend using the builtin LSP client, configure it using &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&quot;&gt;nvim-lspconfig&lt;&#x2F;a&gt;. I made another guide specifically for this:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.to&#x2F;vonheikemen&#x2F;getting-started-with-neovims-native-lsp-client-in-the-year-of-2022-the-easy-way-bp3&quot;&gt;Getting started with neovim&#x27;s native LSP client&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Build your first Neovim configuration in lua</title>
        <published>2022-07-07T00:00:00+00:00</published>
        <updated>2026-04-03T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/build-your-first-lua-config-for-neovim/"/>
        <id>https://vonheikemen.github.io/devlog/tools/build-your-first-lua-config-for-neovim/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/build-your-first-lua-config-for-neovim/">&lt;p&gt;Neovim is a tool both powerful and extensible. With some effort it can do more than just modify text in a file. Today I hope I can teach you enough about Neovim&#x27;s &lt;code&gt;lua&lt;&#x2F;code&gt; api to be able to build your own configuration.&lt;&#x2F;p&gt;
&lt;p&gt;We will create a configuration file called &lt;code&gt;init.lua&lt;&#x2F;code&gt;, add a couple of plugins and I&#x27;ll tell you how to make your own commands.&lt;&#x2F;p&gt;
&lt;p&gt;This tutorial is meant for people totally new to Neovim. If you already have a configuration written in vimscript and want to migrate to lua, you might find this other article more useful: &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;configuring-neovim-using-lua&#x2F;&quot;&gt;Everything you need to know to configure neovim using lua&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;some-advice&quot;&gt;Some advice&lt;&#x2F;h2&gt;
&lt;p&gt;Before we start, I suggest you install the latest stable version of Neovim. You can go to the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;neovim&#x2F;releases&quot;&gt;release page&lt;&#x2F;a&gt; in the github repository and download it from there. From now on I will assume you are using version 0.9.5 or greater.&lt;&#x2F;p&gt;
&lt;p&gt;If you don&#x27;t feel comfortable using Neovim as an editor, follow the tutorial that comes bundled with it. You can start it using this command in the terminal.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nvim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; +Tutor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I will assume you know all the features &lt;code&gt;Tutor&lt;&#x2F;code&gt; teaches.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-entry-point&quot;&gt;The entry point&lt;&#x2F;h2&gt;
&lt;p&gt;First things first, we need to create a configuration file, the famous &lt;code&gt;init.lua&lt;&#x2F;code&gt;. And where that might be? Well, it depends on your operating system and also your environment variables. I can tell you a way of creating it using Neovim, that way we don&#x27;t have to worry about those details.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Fun fact: Some articles online call the configuration file &lt;code&gt;vimrc&lt;&#x2F;code&gt;. That is the name it has in Vim.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;For this task we won&#x27;t be using lua, we&#x27;ll use the language created specifically for Vim: vimscript.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s open Neovim and execute this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; mkdir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;stdpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;config&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;p&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It&#x27;ll create the folder where the configuration file needs to be. If you want to know what folder it created use this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;echo stdpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;config&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we are going to edit the configuration file.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;edit&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; stdpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;config&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; . &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&#x2F;init.lua&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After doing that we&#x27;ll be in a &quot;blank page&quot;. At this point the file doesn&#x27;t exists on the system just yet. We need to save it with this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;write&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Once the file actually exists we can edit it anytime we want using this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:edit $MYVIMRC&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you are the kind of person that likes to automate things in scripts you&#x27;ll be happy to know you can do all of it with one command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;nvim --headless -c &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;call mkdir(stdpath(&amp;quot;config&amp;quot;), &amp;quot;p&amp;quot;) | exe &amp;quot;edit&amp;quot; stdpath(&amp;quot;config&amp;quot;) . &amp;quot;&#x2F;init.lua&amp;quot; | write | quit&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;editor-settings&quot;&gt;Editor settings&lt;&#x2F;h2&gt;
&lt;p&gt;To access the editor&#x27;s setting we need to use the global variable &lt;code&gt;vim&lt;&#x2F;code&gt;. Okay, more than a variable this thing is a module, you&#x27;ll find all sorts of utilities in there. Right now we are going to focus on the &lt;code&gt;o&lt;&#x2F;code&gt; property, with it we can modify all 350+ options Neovim has.&lt;&#x2F;p&gt;
&lt;p&gt;This is the syntax you should follow.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.option_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Where &lt;code&gt;option_name&lt;&#x2F;code&gt; can be anything in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;quickref.html#option-list&quot;&gt;this list&lt;&#x2F;a&gt;. And &lt;code&gt;value&lt;&#x2F;code&gt; must be whatever that option expects.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;You can see the list in Neovim using &lt;code&gt;:help option-list&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;One thing you should know is that every option has a scope. Some options are global, some only apply in the current window or file. The scope of every option is mentioned in their help page. To navigate to the help page of an option follow this pattern.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;option_name&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;useful-options&quot;&gt;Useful options&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;number&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;This option expects a boolean value. This means it can only have two possible values: &lt;code&gt;true&lt;&#x2F;code&gt; or &lt;code&gt;false&lt;&#x2F;code&gt;. If we assign &lt;code&gt;true&lt;&#x2F;code&gt; we enable it, &lt;code&gt;false&lt;&#x2F;code&gt; does the opposite.&lt;&#x2F;p&gt;
&lt;p&gt;When we enable &lt;code&gt;number&lt;&#x2F;code&gt; Neovim starts showing the line number in the gutter.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ignorecase&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;With this we can tell Neovim to ignore uppercase letters when executing a search. For example, if we search the word &lt;code&gt;two&lt;&#x2F;code&gt; the results can contain any variations like &lt;code&gt;Two&lt;&#x2F;code&gt;, &lt;code&gt;tWo&lt;&#x2F;code&gt; or &lt;code&gt;two&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.ignorecase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;smartcase&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Makes our search ignore uppercase letters unless the search term has an uppercase letter. Most of the time this is used in combination with &lt;code&gt;ignorecase&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.smartcase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;hlsearch&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Highlights the results of the previous search. It can get annoying really fast, this is how we disable it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.hlsearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;wrap&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Makes the text of long lines always visible. Long lines are those that exceed the width of the screen. The default value is &lt;code&gt;true&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.wrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;breakindent&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Preserve the indentation of a virtual line. These &quot;virtual lines&quot; are the ones only visible when &lt;code&gt;wrap&lt;&#x2F;code&gt; is enabled.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.breakindent&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;tabstop&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;The amount of space on screen a &lt;code&gt;Tab&lt;&#x2F;code&gt; character can occupy. The default value is 8. I think 2 is fine.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.tabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;shiftwidth&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Amount of characters Neovim will use to indent a line. This option influences the keybindings &lt;code&gt;&amp;lt;&amp;lt;&lt;&#x2F;code&gt; and &lt;code&gt;&amp;gt;&amp;gt;&lt;&#x2F;code&gt;. The default value is 8. Most of the time we want to set this with same value as &lt;code&gt;tabstop&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.shiftwidth&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;expandtab&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Controls whether or not Neovim should transform a &lt;code&gt;Tab&lt;&#x2F;code&gt; character to spaces. The default value is &lt;code&gt;false&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.expandtab&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There are a few other things in the &lt;code&gt;vim&lt;&#x2F;code&gt; module we can use to modify variables, but we have other things to do right now. I talk about this topic in more detail here: &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;configuring-neovim-using-lua&#x2F;#editor-settings&quot;&gt;Configuring Neovim - Editor Settings&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;keybindings&quot;&gt;Keybindings&lt;&#x2F;h2&gt;
&lt;p&gt;Because Neovim clearly doesn&#x27;t have enough, we need to create more. To do it we need to learn about &lt;code&gt;vim.keymap.set&lt;&#x2F;code&gt;. Here is a basic usage example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;space&amp;gt;w&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;write&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Save&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After executing this the sequence &lt;code&gt;Space&lt;&#x2F;code&gt; + &lt;code&gt;w&lt;&#x2F;code&gt; will call the &lt;code&gt;write&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;p&gt;Now let me explain &lt;code&gt;vim.keymap.set&lt;&#x2F;code&gt; parameters.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({mode}, {lhs}, {rhs}, {opts})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{mode}&lt;&#x2F;code&gt; the mode where the keybinding can be executed. It can be a list of modes. We need to specify the mode&#x27;s short name. Here are some of the most common.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;n&lt;&#x2F;code&gt;: Normal mode.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;i&lt;&#x2F;code&gt;: Insert mode.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;x&lt;&#x2F;code&gt;: Visual mode.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;s&lt;&#x2F;code&gt;: Selection mode.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;v&lt;&#x2F;code&gt;: Visual + Selection.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;t&lt;&#x2F;code&gt;: Terminal mode.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;o&lt;&#x2F;code&gt;: Operator-pending.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;&#x27;&#x27;&lt;&#x2F;code&gt;: Yes, an empty string. Is the equivalent of &lt;code&gt;n&lt;&#x2F;code&gt; + &lt;code&gt;v&lt;&#x2F;code&gt; + &lt;code&gt;o&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{lhs}&lt;&#x2F;code&gt; is the key we want to bind.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{rhs}&lt;&#x2F;code&gt; is the action we want to execute. It can be a string with a command or an expression. You can also provide a lua function.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{opts}&lt;&#x2F;code&gt; this must be a lua table. If you don&#x27;t know what is, just think of it as a way to store several values in one place. It can have these properties.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;desc&lt;&#x2F;code&gt;: A string that describes what the keybinding does. You can write anything you want.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;remap&lt;&#x2F;code&gt;: A boolean that determines if our keybinding can be recursive. The default value is &lt;code&gt;false&lt;&#x2F;code&gt;. Recursive keybindings can cause some conflicts if used incorrectly. Don&#x27;t enable it unless you know what you&#x27;re doing. I will explain this recursive thing later.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;buffer&lt;&#x2F;code&gt;: It can be a boolean or a number. If we assign the boolean &lt;code&gt;true&lt;&#x2F;code&gt; it means the keybinding will only be effective in the current file. If we assign a number, it needs to be the &quot;id&quot; of an open buffer.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;silent&lt;&#x2F;code&gt;: A boolean. Determines whether or not the keybindings can show a message. The default value is &lt;code&gt;false&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;expr&lt;&#x2F;code&gt;: A boolean. When enabled we can use vimscript or lua to calculate the value of &lt;code&gt;{rhs}&lt;&#x2F;code&gt;. The default value is &lt;code&gt;false&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;the-leader-key&quot;&gt;The leader key&lt;&#x2F;h3&gt;
&lt;p&gt;When creating keybindings we can use the special sequence &lt;code&gt;&amp;lt;leader&amp;gt;&lt;&#x2F;code&gt; in the &lt;code&gt;{lhs}&lt;&#x2F;code&gt; parameter, it&#x27;ll take the value of the global variable &lt;code&gt;mapleader&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;So &lt;code&gt;mapleader&lt;&#x2F;code&gt; is a global variable in vimscript that can be string. For example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After defining it we can use it as a prefix in our keybindings.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;w&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;write&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This will make &lt;code&gt;,&lt;&#x2F;code&gt; + &lt;code&gt;w&lt;&#x2F;code&gt; save the current file.&lt;&#x2F;p&gt;
&lt;p&gt;What happens if we don&#x27;t define it? The default value is &lt;code&gt;\&lt;&#x2F;code&gt;. I can recommend using the space key as leader. Like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39; &amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;mappings&quot;&gt;Mappings&lt;&#x2F;h3&gt;
&lt;p&gt;I&#x27;ll show you just a few keybindings that you might find useful.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Copy&#x2F;paste from clipboard&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;The default behavior in Neovim (and Vim) doesn&#x27;t take into account the system clipboard. It has its own mechanism to store text. When we copy something using the &lt;code&gt;y&lt;&#x2F;code&gt; keybinding that text goes to an internal register. I prefer to keep it that way, and what I do is create dedicated bindings to interact with the clipboard.&lt;&#x2F;p&gt;
&lt;p&gt;Copy to clipboard.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gy&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+y&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Paste from clipboard.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;+p&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Delete without changing the registers&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;When we delete text in normal mode or visual mode using &lt;code&gt;c&lt;&#x2F;code&gt;, &lt;code&gt;d&lt;&#x2F;code&gt; or &lt;code&gt;x&lt;&#x2F;code&gt; that text goes to a register. This affects the text we paste with the keybinding &lt;code&gt;p&lt;&#x2F;code&gt;. What I do is modify &lt;code&gt;x&lt;&#x2F;code&gt; and &lt;code&gt;X&lt;&#x2F;code&gt; to delete text without changing the internal registers.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;_x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;X&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;quot;_d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The lower case &lt;code&gt;x&lt;&#x2F;code&gt; will delete one character in normal mode. In visual mode it will delete the current selection. Upper case &lt;code&gt;X&lt;&#x2F;code&gt; will just act like &lt;code&gt;d&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Select all text in current buffer&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;a&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;:keepjumps normal! ggVG&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;plugin-manager&quot;&gt;Plugin manager&lt;&#x2F;h2&gt;
&lt;p&gt;We are going to use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;&quot;&gt;mini.nvim&lt;&#x2F;a&gt; for this.&lt;&#x2F;p&gt;
&lt;p&gt;Is worth noting Neovim &lt;code&gt;v0.12&lt;&#x2F;code&gt; has added a feature called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;pack.html#_plugin-manager&quot;&gt;vim.pack&lt;&#x2F;a&gt;, this is a fully functional plugin manager built into the editor. Unfortunately it&#x27;ll take a few years before this version of Neovim is available in every operating system. If you are one of the lucky ones and have access to &lt;code&gt;vim.pack&lt;&#x2F;code&gt;, you can learn more about it here: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;echasnovski.com&#x2F;blog&#x2F;2026-03-13-a-guide-to-vim-pack&quot;&gt;A guide to vim.pack&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;For the sake of backwards compatibility I will recommend &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-deps.html&quot;&gt;mini.deps&lt;&#x2F;a&gt;. At the surface level &lt;code&gt;mini.deps&lt;&#x2F;code&gt; is very similar to &lt;code&gt;vim.pack&lt;&#x2F;code&gt; so it should be fairly easy to migrate from one to the other in the future.&lt;&#x2F;p&gt;
&lt;p&gt;Now, &lt;em&gt;how does one install a plugin without a plugin manager?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;That&#x27;s been possible for quite a while now. Neovim (and Vim) can load a plugin if it&#x27;s located in the correct directory. The trick is to know a &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;installing-neovim-plugins-without-a-plugin-manager&#x2F;&quot;&gt;valid path for a plugin&lt;&#x2F;a&gt; and download it there. And that&#x27;s exactly what we are going to do with some lua code.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local mini&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local nvim_10&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.10&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;mini.branch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;main&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;mini.packpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;stdpath&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;data&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;..&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&#x2F;site&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Last version that supports Neovim v0.9&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;mini.revision&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;3923662bf3d6ca49a9503f8d7196ea0450983e6a&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; mini&lt;&#x2F;span&gt;&lt;span&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require_deps&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local uv&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.uv&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or&lt;&#x2F;span&gt;&lt;span&gt; vim.loop&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local mini_path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; mini.packpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ..&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&#x2F;pack&#x2F;deps&#x2F;start&#x2F;mini.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; uv.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fs_stat&lt;&#x2F;span&gt;&lt;span&gt;(mini_path) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    print&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Installing mini.nvim....&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;system&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;git&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;clone&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;--filter=blob:none&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      string.format&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;--branch=%s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, mini.branch),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      mini_path&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; nvim_10&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local switch_cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;git&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;switch&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;--detach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, mini.revision}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local job_opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {cwd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; mini_path}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jobwait&lt;&#x2F;span&gt;&lt;span&gt;({vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jobstart&lt;&#x2F;span&gt;&lt;span&gt;(switch_cmd, job_opts)})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;packadd mini.nvim | helptags ALL&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local ok, deps&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pcall&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mini.deps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; {}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; deps&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here we have a lua table called &lt;code&gt;mini&lt;&#x2F;code&gt;, in it we have a couple of options and a function.&lt;&#x2F;p&gt;
&lt;p&gt;Our function &lt;code&gt;.require_deps()&lt;&#x2F;code&gt; will download mini.nvim automatically if it&#x27;s missing. Then it&#x27;ll try to load the &lt;code&gt;mini.deps&lt;&#x2F;code&gt; module in safe way and return it back to us. If it fails it&#x27;ll give us an empty lua table. Of course, this is just a function definition. In order for it to do anything we have to execute it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local MiniDeps&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; mini.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require_deps&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; not&lt;&#x2F;span&gt;&lt;span&gt; MiniDeps.setup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If everything goes according to plan the variable &lt;code&gt;MiniDeps&lt;&#x2F;code&gt; will have all the functions of the &lt;code&gt;mini.deps&lt;&#x2F;code&gt; lua module. If it turns out that &lt;code&gt;MiniDeps&lt;&#x2F;code&gt; doesn&#x27;t have a &lt;code&gt;.setup&lt;&#x2F;code&gt; property we know something went wrong and stop the execution. So no matter what happens Neovim will always be in a working state.&lt;&#x2F;p&gt;
&lt;p&gt;All the features in mini.nvim are opt-in, meaning we have to enable the modules we want to use. So after we load the module with &lt;code&gt;require&lt;&#x2F;code&gt; we need to execute a function called &lt;code&gt;.setup()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    package&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; mini.packpath,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;.setup()&lt;&#x2F;code&gt; function is where we place our custom configuration, if we need one. In this case is not strictly necessary. The variable &lt;code&gt;mini.packpath&lt;&#x2F;code&gt; already uses the default value &lt;code&gt;mini.deps&lt;&#x2F;code&gt; is expecting. But if we were to change the value of &lt;code&gt;mini.packpath&lt;&#x2F;code&gt; then &lt;code&gt;mini.deps&lt;&#x2F;code&gt; should be aware of that.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s download another plugin, a color scheme to make Neovim look better. Now we get to use the &lt;code&gt;.add()&lt;&#x2F;code&gt; function of &lt;code&gt;mini.deps&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;folke&#x2F;tokyonight.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is the minimum amount of data &lt;code&gt;mini.deps&lt;&#x2F;code&gt; needs to download a plugin from github. Which is just the name of the user in github and the name of the repository. And funny enough this works like our custom function &lt;code&gt;.require_deps()&lt;&#x2F;code&gt;. It&#x27;ll install the plugin automatically if it&#x27;s missing and then it will add it to Neovim&#x27;s &lt;code&gt;runtimepath&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;mini.deps&lt;&#x2F;code&gt; also has this idea of a &quot;plugin specification&quot; which is a way for us to add more information about the plugin we want to download. For example, we can change the default branch we want to use. It looks a little bit like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MiniDeps.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;nvim-mini&#x2F;mini.nvim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  checkout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; nvim_10&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;span&gt; mini.branch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or&lt;&#x2F;span&gt;&lt;span&gt; mini.revision,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here instead of just providing a piece of text we use a lua table. The &lt;code&gt;source&lt;&#x2F;code&gt; property is mandatory, this should be the URL of the plugin. But since github is so popular &lt;code&gt;mini.deps&lt;&#x2F;code&gt; allows us to just specify the shorthand. In the &lt;code&gt;checkout&lt;&#x2F;code&gt; property we can provide a branch, a commit or tag. You can find more &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;nvim-mini.org&#x2F;mini.nvim&#x2F;doc&#x2F;mini-deps.html#minideps-plugin-specification&quot;&gt;details about the plugin specification&lt;&#x2F;a&gt; in the documentation.&lt;&#x2F;p&gt;
&lt;p&gt;If we are Neovim v0.9 then &lt;code&gt;checkout&lt;&#x2F;code&gt; will be pinned to a specific commit and the plugin will not receive updates. Otherwise &lt;code&gt;checkout&lt;&#x2F;code&gt; will point to the &lt;code&gt;main&lt;&#x2F;code&gt; branch and it&#x27;ll receive update like any other plugin.&lt;&#x2F;p&gt;
&lt;p&gt;Now let&#x27;s add the code to apply the new color scheme. After the call to &lt;code&gt;MiniDeps.add()&lt;&#x2F;code&gt; we write this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.termguicolors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.cmd.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;colorscheme&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;tokyonight&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here we enable &lt;code&gt;termguicolors&lt;&#x2F;code&gt; so Neovim can show the &quot;best&quot; version of the color scheme. Each color scheme can have two versions: one that works for terminals which only support 256 colors and another that specifies colors in hexadecimal notation (has way more colors).&lt;&#x2F;p&gt;
&lt;p&gt;We tell Neovim which theme we want using the &lt;code&gt;colorscheme&lt;&#x2F;code&gt; command. And yes, it looks like a lua function (it is). But under the hood is executing this vim command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;colorscheme tokyonight&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We save these changes and restart Neovim, to trigger the download of mini.nvim. When Neovim starts it should show a message telling us is installing mini.nvim. After it&#x27;s done &lt;code&gt;mini.deps&lt;&#x2F;code&gt; will make sure the rest of our plugins are installed and loaded.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;plugin-configuration&quot;&gt;Plugin configuration&lt;&#x2F;h2&gt;
&lt;p&gt;Each plugin author has the freedom to create the configuration method they want. But then how do we know what to do? We have to rely on the documentation the plugin provides, we have no other choice.&lt;&#x2F;p&gt;
&lt;p&gt;Most plugins have a file called &lt;code&gt;README.md&lt;&#x2F;code&gt; in their repository, github is kind enough to render that file in the main page. It&#x27;s the first place you should look for configuration instructions.&lt;&#x2F;p&gt;
&lt;p&gt;If for some reason the README doesn&#x27;t have the information we are after, look for a folder called &lt;code&gt;doc&lt;&#x2F;code&gt;. Inside there should be a &lt;code&gt;txt&lt;&#x2F;code&gt; file, this is the help page. We can read it using Neovim executing the command &lt;code&gt;:help name-of-file&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;conventions-of-lua-plugins&quot;&gt;Conventions of lua plugins&lt;&#x2F;h3&gt;
&lt;p&gt;Lucky for us a huge amount of plugins written in lua follow a certain pattern. They use a function called &lt;code&gt;.setup()&lt;&#x2F;code&gt;, and that function expects a lua table with some options. If there is something you should learn about the syntax of lua is how to create tables.&lt;&#x2F;p&gt;
&lt;p&gt;Our very own &lt;code&gt;tokyonight.nvim&lt;&#x2F;code&gt; follows this setup convention. So let&#x27;s use it as an example.&lt;&#x2F;p&gt;
&lt;p&gt;In tokyonight&#x27;s repository we can find a &lt;code&gt;doc&lt;&#x2F;code&gt; folder and inside there is a file called &lt;code&gt;tokyonight.nvim.txt&lt;&#x2F;code&gt;. We can read it in Neovim using this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help tokyonight.nvim.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This documentation shows we can customize the color scheme using a &lt;code&gt;.setup()&lt;&#x2F;code&gt; function. So let&#x27;s say we want to disable the italics it has enabled by default. We would do something like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- See :help tokyonight.nvim-tokyo-night-configuration&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;tokyonight&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  styles&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    comments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {italic&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    keywords&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {italic&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;For this to be effective we need to add it before calling the &lt;code&gt;colorscheme&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;p&gt;How did I know that was going to work? First, knowing how lua tables work is a huge part of it. Second, the documentation shows all the default settings in the section &lt;code&gt;tokyonight.nvim-tokyo-night-configuration&lt;&#x2F;code&gt;. And the last thing to know is that most lua plugins will do their best to merge the default settings with our custom settings. This means we only have to specify the things we want to change.&lt;&#x2F;p&gt;
&lt;p&gt;We can save the changes and reload the config using the command &lt;code&gt;:source $MYVIMRC&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Is worth mention that calling the &lt;code&gt;.setup()&lt;&#x2F;code&gt; function in tokyonight is optional. Is not like &lt;code&gt;mini.deps&lt;&#x2F;code&gt; where &lt;code&gt;.setup()&lt;&#x2F;code&gt; actually enables the plugin. This highlights the fact that lua plugins can do whatever they want. There isn&#x27;t a fixed behavior or rules attached to this convention.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;vimscript-plugins&quot;&gt;Vimscript plugins&lt;&#x2F;h3&gt;
&lt;p&gt;There are a lot of useful plugins written in vimscript. Most of them we can configure modifying global variables. In lua we change global variables of vimscript using &lt;code&gt;vim.g&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Did you know Neovim has a file explorer? Yeah, it&#x27;s a plugin that comes bundled in Neovim. We can use it with the command &lt;code&gt;:Lexplore&lt;&#x2F;code&gt;. It is written in vimscript, so there is no &lt;code&gt;.setup()&lt;&#x2F;code&gt; function. To know how to configure it we need to check the documentation.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help netrw&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you check the table of content in the help page, you&#x27;ll notice a section called &lt;code&gt;netrw-browser-settings&lt;&#x2F;code&gt;. Once there we get a list of variables and their descriptions. Let&#x27;s focus on the ones that start with &lt;code&gt;g:&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;For example, if we want to hide the help text in the banner we use &lt;code&gt;netrw_banner&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.netrw_banner&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Another thing we can do is change the size of the window. For that we need &lt;code&gt;netrw_winsize&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.netrw_winsize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 30&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s it... well no, there are more variables, but like this is the basic stuff you need to know. You check the docs, see the thing you want to change and use &lt;code&gt;vim.g&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;bonus-content&quot;&gt;Bonus content&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;recursive-mappings&quot;&gt;Recursive mappings&lt;&#x2F;h3&gt;
&lt;p&gt;If you are familiar with the word &quot;recursive&quot; you might be able to guess what kind of consequences they can have. If not, let me try to explain with an example.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s say we have a keybinding that opens the file explorer.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F2&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;Lexplore&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now let&#x27;s add a recursive keybinding that uses &lt;code&gt;F2&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;space&amp;gt;&amp;lt;space&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F2&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {remap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we press &lt;code&gt;Space&lt;&#x2F;code&gt; twice the file explorer will show up. But if we change &lt;code&gt;remap&lt;&#x2F;code&gt; to &lt;code&gt;false&lt;&#x2F;code&gt; then nothing happens.&lt;&#x2F;p&gt;
&lt;p&gt;With recursive mappings we can use previous keybindings in the &lt;code&gt;{rhs}&lt;&#x2F;code&gt; argument. Those keybindings could be created by us or by other plugins. Non recursive mappings only give us access to keybindings defined by Neovim.&lt;&#x2F;p&gt;
&lt;p&gt;Probably the only time when you want a recursive mapping is when you want to use a feature defined by a plugin.&lt;&#x2F;p&gt;
&lt;p&gt;Why is it that recursive mappings can cause conflicts? Consider this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;*&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;*zz&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice here we are using &lt;code&gt;*&lt;&#x2F;code&gt; in &lt;code&gt;{lhs}&lt;&#x2F;code&gt; and also &lt;code&gt;{rhs}&lt;&#x2F;code&gt;. If we make this recursive we create an endless cycle. Neovim will try to call &lt;code&gt;*&lt;&#x2F;code&gt; and never executes &lt;code&gt;zz&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;user-commands&quot;&gt;User commands&lt;&#x2F;h3&gt;
&lt;p&gt;Yes, we can create our own commands. In lua we use this function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;({name}, {command}, {opts})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{name}&lt;&#x2F;code&gt; must be a string. It has to start with an uppercase letter.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{command}&lt;&#x2F;code&gt; if it&#x27;s a string it must be valid vimscript. Or it can be a lua function.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{opts}&lt;&#x2F;code&gt; must be a lua table. Is not optional. If you don&#x27;t use any options you provide an empty table.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;So we could create a function that &quot;reloads&quot; our configuration.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;ReloadConfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;source $MYVIMRC&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;User commands are a fairly advance topic so if you want to know more details you can check the documentation.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help user-commands&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;autocommands&quot;&gt;Autocommands&lt;&#x2F;h3&gt;
&lt;p&gt;With autocommands we can execute actions when Neovim triggers an event. You can check the complete list of events with this command &lt;code&gt;:help events&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;We can create autocommands with this function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;({event}, {opts})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{event}&lt;&#x2F;code&gt; must be a string with the name of an event.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;{opts}&lt;&#x2F;code&gt; must be a lua table, its properties will determine the behavior of the autocommand. These are some of the most useful options.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;desc&lt;&#x2F;code&gt; a string that describes what the autocommand does.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;group&lt;&#x2F;code&gt; it can be a number or a string. If you provide a string it must be the name of an existing group. If you provide a number it must be the &quot;id&quot; of a group.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;pattern&lt;&#x2F;code&gt; can be a lua table or a string. This allows us to control when we want to trigger the autocommand. Its value depends on the event. Check the documentation of the event to know the possible values.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;once&lt;&#x2F;code&gt; it can be a boolean. If enabled the autocommand will only execute once. The default value is &lt;code&gt;false&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;command&lt;&#x2F;code&gt; a string. Must be valid vimscript. Is the action we want to execute.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;callback&lt;&#x2F;code&gt; it can be a string or a lua function. If you provide a string it must be the name of a function written in vimscript. This is the action we want to execute. It can&#x27;t be used with &lt;code&gt;command&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Here is an example. I&#x27;ll create a group called &lt;code&gt;user_cmds&lt;&#x2F;code&gt; and add two autocommands to it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local augroup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_augroup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;user_cmds&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {clear&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;FileType&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;help&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;man&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; augroup,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Use q to close the window&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;nnoremap &amp;lt;buffer&amp;gt; q &amp;lt;cmd&amp;gt;quit&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;TextYankPost&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; augroup,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Highlight on yank&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.highlight.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;on_yank&lt;&#x2F;span&gt;&lt;span&gt;({higroup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Visual&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, timeout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 200&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Creating the group is optional by the way.&lt;&#x2F;p&gt;
&lt;p&gt;The first autocommand will make a keymap &lt;code&gt;q&lt;&#x2F;code&gt; to close the current window, but only if the filetype is &lt;code&gt;help&lt;&#x2F;code&gt; or &lt;code&gt;man&lt;&#x2F;code&gt;. In this example I&#x27;m using vimscript but I could have done it with a lua function.&lt;&#x2F;p&gt;
&lt;p&gt;The second autocommand will highlight the text we copy using &lt;code&gt;y&lt;&#x2F;code&gt;. If you want to test the effect try copying a line using &lt;code&gt;yy&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;To know more about autocommands in general check the documentation.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help autocmd-intro&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;user-modules&quot;&gt;User modules&lt;&#x2F;h3&gt;
&lt;p&gt;We can use lua modules to split our configuration into smaller pieces.&lt;&#x2F;p&gt;
&lt;p&gt;A common convention is to put every module we create into a single folder. We do this to avoid any potential conflict with a plugin. Lots of people call this module &lt;code&gt;user&lt;&#x2F;code&gt; (you can use another name). To make this module we need to create a couple of folders inside our config folder. First create a &lt;code&gt;lua&lt;&#x2F;code&gt; folder, and inside that create a &lt;code&gt;user&lt;&#x2F;code&gt; folder. You can do it with this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; mkdir&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;stdpath&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;config&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;) . &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&#x2F;lua&#x2F;user&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;p&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Inside &lt;code&gt;&#x2F;lua&#x2F;user&lt;&#x2F;code&gt; we create our lua scripts.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s pretend we have one called &lt;code&gt;settings.lua&lt;&#x2F;code&gt;. Neovim doesn&#x27;t know it exists, it won&#x27;t be executed automatically. We need to call it from &lt;code&gt;init.lua&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;user.settings&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you want to know more details about &lt;code&gt;require&lt;&#x2F;code&gt;&#x27;s behavior inside Neovim checkout.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:help lua-require&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;the-require-function&quot;&gt;The require function&lt;&#x2F;h3&gt;
&lt;p&gt;There is something you should know about &lt;code&gt;require&lt;&#x2F;code&gt;, it only executes code once. What does mean?&lt;&#x2F;p&gt;
&lt;p&gt;Consider this code.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;user.settings&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;user.settings&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here the script &lt;code&gt;settings.lua&lt;&#x2F;code&gt; will only be executed once. If you want to create plugins or create a feature that depends on a plugin, this behavior is good. The bad news is if want to use &lt;code&gt;:source $MYVIMRC&lt;&#x2F;code&gt; to reload our config the results might not be what we expect.&lt;&#x2F;p&gt;
&lt;p&gt;There is a very simple hack we can do to make it &lt;code&gt;source&lt;&#x2F;code&gt; friendly. We can empty &lt;code&gt;require&lt;&#x2F;code&gt;&#x27;s cache before using it. Like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; load&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;mod&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;  package.loaded&lt;&#x2F;span&gt;&lt;span&gt;[mod] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; nil&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  require&lt;&#x2F;span&gt;&lt;span&gt;(mod)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;load&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;user.settings&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;load&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;user.keymaps&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we do this in &lt;code&gt;init.lua&lt;&#x2F;code&gt; the &lt;code&gt;source&lt;&#x2F;code&gt; command will be able to execute all the files in our config.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;WARNING&lt;&#x2F;strong&gt;. Be careful with this. Some plugins might act weird if you configure them twice. What do I mean? If we use &lt;code&gt;source&lt;&#x2F;code&gt; and call the &lt;code&gt;.setup()&lt;&#x2F;code&gt; function of a plugin a second time it might have unexpected effects.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;init-lua&quot;&gt;init.lua&lt;&#x2F;h2&gt;
&lt;p&gt;If we apply (almost) everything we learned here in a single configuration file this would be the result.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;nvim-starter&#x2F;blob&#x2F;01-base&#x2F;init.lua&quot;&gt;init.lua&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;what-s-next&quot;&gt;What&#x27;s next?&lt;&#x2F;h2&gt;
&lt;p&gt;Create a development environment that feels comfortable. Find out what plugins the Neovim community likes to use.&lt;&#x2F;p&gt;
&lt;p&gt;I know is difficult to start from scratch so here is a &quot;starter template&quot; you can check, or even use as your own base configuration.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;nvim-light: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;nvim-light&quot;&gt;github link&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Now we know how to configure some basic options in Neovim. We learned how to create our very own keybindings. We know how to get plugins from github. We manage to configure a couple of plugins, a lua plugin and one written in vimscript. We took a brief look at some advance topics like recursive mappings, user commands, autocommands and lua modules.&lt;&#x2F;p&gt;
&lt;p&gt;I&#x27;d say you have everything you need to start exploring plugins, read other people&#x27;s config and learn from them.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Can we manage neovim&#x27;s LSP client without plugins?</title>
        <published>2022-06-09T00:00:00+00:00</published>
        <updated>2022-10-16T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/manage-neovim-lsp-client-without-plugins/"/>
        <id>https://vonheikemen.github.io/devlog/tools/manage-neovim-lsp-client-without-plugins/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/manage-neovim-lsp-client-without-plugins/">&lt;p&gt;Yes, we can. The complexity of the setup will depend on what you want to achieve in your workflow. But if you know your way around lua you should be able to understand the &quot;boilerplate&quot; needed to get a decent setup.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s figure out how to make it work.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-building-blocks&quot;&gt;The building blocks&lt;&#x2F;h2&gt;
&lt;p&gt;It turns out we only need two functions. One to initialize the language server. One that notifies text changes to the server:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;vim.lsp.start_client()&lt;&#x2F;code&gt;: This function creates a &quot;client object&quot; that handles all communications with a language server.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;vim.lsp.buf_attach_client()&lt;&#x2F;code&gt;: It notifies all text changes to the language server.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;A minimal and inefficient example using typescript&#x27;s language server would look like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; launch_tsserver&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;typescript-language-server&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;--stdio&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;tsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getcwd&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.protocol.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_client_capabilities&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local client_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;start_client&lt;&#x2F;span&gt;&lt;span&gt;(config)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; client_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;buf_attach_client&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, client_id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;LaunchTsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  launch_tsserver,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Start tsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now with the command &lt;code&gt;LaunchTsserver&lt;&#x2F;code&gt; we would be able to start a &lt;code&gt;typescript-language-server&lt;&#x2F;code&gt; process and get diagnostics in the current file.&lt;&#x2F;p&gt;
&lt;p&gt;Why is this inefficient? Because it would only work on a single file. It&#x27;ll spawn a new process each time we use it. What you really want is to &quot;share&quot; a single process of &lt;code&gt;typescript-language-server&lt;&#x2F;code&gt; for your project.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;project-setup&quot;&gt;Project setup&lt;&#x2F;h2&gt;
&lt;p&gt;So what&#x27;s the missing piece that would make this usable in a project? An autocommand. We need to tell neovim we want to attach the server to a buffer everytime we open a new file of a specific filetype.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;javascript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;javascriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;javascript.jsx&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;typescript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;typescriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;typescript.tsx&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; buf_attach&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;buf_attach_client&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, client_id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;autocmd_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;FileType&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; string.format&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Attach LSP: %s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, client_name),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; filetypes,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; buf_attach&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we create an autocommand with &lt;code&gt;nvim_create_autocmd&lt;&#x2F;code&gt; we get an id, which can be used to delete it later on. To delete the autocommand we would call &lt;code&gt;nvim_del_autocmd&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_del_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(autocmd_id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But what would be the best time to create this autocommand? After the server is ready, of course. We can use the &lt;code&gt;on_init&lt;&#x2F;code&gt; hook to setup the autocommand and &lt;code&gt;on_exit&lt;&#x2F;code&gt; to clean it up.&lt;&#x2F;p&gt;
&lt;p&gt;If we apply all this knowledge to our &lt;code&gt;launch_tsserver&lt;&#x2F;code&gt; function we would have this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; launch_tsserver&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local autocmd&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;javascript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;javascriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;javascript.jsx&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;typescript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;typescriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;typescript.tsx&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;typescript-language-server&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;--stdio&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;tsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getcwd&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.protocol.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_client_capabilities&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  config.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;on_init&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; results&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; buf_attach&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;buf_attach_client&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, client.id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;FileType&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; string.format&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Attach LSP: %s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, client.name),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; filetypes,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; buf_attach&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span&gt; vim.v.vim_did_enter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_contains&lt;&#x2F;span&gt;&lt;span&gt;(filetypes, vim.bo.filetype)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      buf_attach&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  config.on_exit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;schedule_wrap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;code&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; signal&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; client_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_del_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(autocmd)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;start_client&lt;&#x2F;span&gt;&lt;span&gt;(config)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;what-about-some-keybindings&quot;&gt;What about some keybindings?&lt;&#x2F;h2&gt;
&lt;p&gt;Right? I mean, you probably want to use some of those LSP features with just a few keystrokes. How do we proceed? The documentation says we can use an autocommand with the event &lt;code&gt;LspAttach&lt;&#x2F;code&gt;. So you can define your keybindings anywhere you want.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;LSP actions&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; bufmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; lhs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; rhs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(mode, lhs, rhs, opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Displays hover information about the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;K&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.hover()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Jump to the definition&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gd&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Jump to declaration&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gD&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.declaration()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Lists all the implementations for the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gi&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.implementation()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Jumps to the definition of the type symbol&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;go&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.type_definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Lists all the references &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.references()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Displays a function&amp;#39;s signature information&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-k&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.signature_help()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Renames all references to the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F2&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.rename()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Selects a code action available at the current cursor position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F4&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.code_action()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F4&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.range_code_action()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Show diagnostics in a floating window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gl&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Move to the previous diagnostic&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;[d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_prev()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Move to the next diagnostic&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;]d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_next()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;complete-code&quot;&gt;Complete code&lt;&#x2F;h2&gt;
&lt;p&gt;And now if we apply the new changes to our example this would be it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; launch_tsserver&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local autocmd&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;javascript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;javascriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;javascript.jsx&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;typescript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;typescriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;typescript.tsx&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;typescript-language-server&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;--stdio&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;tsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    root_dir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getcwd&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.protocol.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_client_capabilities&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  config.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;on_init&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;client&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; results&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; buf_attach&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;buf_attach_client&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, client.id)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;FileType&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; string.format&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Attach LSP: %s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, client.name),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; filetypes,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; buf_attach&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span&gt; vim.v.vim_did_enter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; and&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;tbl_contains&lt;&#x2F;span&gt;&lt;span&gt;(filetypes, vim.bo.filetype)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      buf_attach&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  config.on_exit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;schedule_wrap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;code&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; signal&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; client_id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_del_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(autocmd)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;start_client&lt;&#x2F;span&gt;&lt;span&gt;(config)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;LaunchTsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  launch_tsserver,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Start tsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;can-we-do-better&quot;&gt;Can we do better?&lt;&#x2F;h2&gt;
&lt;p&gt;Sure. I mean, you can hide almost all the boilerplate inside another function and reduce the noise.&lt;&#x2F;p&gt;
&lt;p&gt;Just imagine this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; launch_tsserver&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; make_config&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;typescript-language-server&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;--stdio&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;tsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    filetypes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;javascript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;javascriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;javascript.jsx&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;typescript&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;typescriptreact&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;typescript.tsx&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;start_client&lt;&#x2F;span&gt;&lt;span&gt;(config)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;LaunchTsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  launch_tsserver,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Start tsserver&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;How does &lt;code&gt;make_config&lt;&#x2F;code&gt; look like? Well... that&#x27;s homework, my friend. You can implement it anyway you want. I&#x27;ve already showed you all the code you need to make it possible.&lt;&#x2F;p&gt;
&lt;p&gt;You really want to know how I would do it? The answer is in this github repository: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;nvim-lsp-sans-plugins&quot;&gt;VonHeikemen&#x2F;nvim-lsp-sans-plugins&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We learned enough about neovim&#x27;s builtin LSP client to create our own little setup. We know how to initialize the language server. We can &quot;share&quot; the same server across multiple files. In the process we worked with autocommands, now we know how to create and delete them. We could totally manage some LSP servers without plugins.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.start_client()&quot;&gt;:help vim.lsp.start_client()&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html#vim.lsp.buf_attach_client()&quot;&gt;:help vim.lsp.buf_attach_client()&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;wiki&quot;&gt;What is nvim-lspconfig?&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Setup nvim-lspconfig + nvim-cmp</title>
        <published>2022-05-23T00:00:00+00:00</published>
        <updated>2024-10-05T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/setup-nvim-lspconfig-plus-nvim-cmp/"/>
        <id>https://vonheikemen.github.io/devlog/tools/setup-nvim-lspconfig-plus-nvim-cmp/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/setup-nvim-lspconfig-plus-nvim-cmp/">&lt;p&gt;Neovim includes a lua framework that allows the editor to communicate with a language server. What does that mean for us? Means we can have some IDE-like features such as rename variables, smart jump to definition, list references, etc. But of course we need to configure all of this first.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;wait-why-do-we-need-all-these-plugins&quot;&gt;Wait, why do we need all these plugins?&lt;&#x2F;h2&gt;
&lt;p&gt;Out of the box Neovim offers the tools to start and query a language server but it doesn&#x27;t have any opinion on how we should use them. Enter &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&quot;&gt;nvim-lspconfig&lt;&#x2F;a&gt;, with it Neovim can scan the &quot;root directory&quot; of a project and choose which language server you configured should be initialiazed.&lt;&#x2F;p&gt;
&lt;p&gt;And then we have &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;hrsh7th&#x2F;nvim-cmp&quot;&gt;nvim-cmp&lt;&#x2F;a&gt;, the autocompletion plugin. I think the completions provided by Neovim are good enough but the thing is it requires a fair amount of manual intervention. Modern code editors have all this automated in a way that feels more intuitive, this is what nvim-cmp offers. We can have that smart autocompletion in Neovim.&lt;&#x2F;p&gt;
&lt;p&gt;Now you know the why, let&#x27;s move on to the how.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;requirements&quot;&gt;Requirements&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;Neovim v0.8 or greater is recommended. v0.7 can work too, with a few tweaks.&lt;&#x2F;li&gt;
&lt;li&gt;An LSP server.&lt;&#x2F;li&gt;
&lt;li&gt;Install &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&quot;&gt;nvim-lspconfig&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;Install plugins for autocompletion:
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;hrsh7th&#x2F;nvim-cmp&quot;&gt;nvim-cmp&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;hrsh7th&#x2F;cmp-buffer&quot;&gt;cmp-buffer&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;hrsh7th&#x2F;cmp-path&quot;&gt;cmp-path&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;saadparwaiz1&#x2F;cmp_luasnip&quot;&gt;cmp_luasnip&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;hrsh7th&#x2F;cmp-nvim-lsp&quot;&gt;cmp-nvim-lsp&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;L3MON4D3&#x2F;LuaSnip&quot;&gt;LuaSnip&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;rafamadriz&#x2F;friendly-snippets&quot;&gt;friendly-snippets&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;In &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt; documentation you&#x27;ll find instructions to install the language servers it supports: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;blob&#x2F;master&#x2F;doc&#x2F;configs.md&quot;&gt;configs.md&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;lsp-config&quot;&gt;LSP Config&lt;&#x2F;h2&gt;
&lt;p&gt;What we need to do here is use the module &lt;code&gt;lspconfig&lt;&#x2F;code&gt; and call the &lt;code&gt;.setup()&lt;&#x2F;code&gt; of the language server we want to configure.&lt;&#x2F;p&gt;
&lt;p&gt;How do we know which language servers are supported? lspconfig&#x27;s documentation has the answer. You can find the list of valid names using &lt;code&gt;:help lspconfig-all&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;For the language &lt;code&gt;lua&lt;&#x2F;code&gt; we can use a server called &lt;code&gt;lua_ls&lt;&#x2F;code&gt;. Install it and then call it in your config like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lspconfig&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lspconfig.lua_ls.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There is one thing you need to keep in mind. We are going to use nvim-cmp to handle the autocompletion. So, we have to modify an option called &lt;code&gt;capabilities&lt;&#x2F;code&gt; in every language server we use. This option tells the language server the features Neovim supports.&lt;&#x2F;p&gt;
&lt;p&gt;We are going to tell the language server what features nvim-cmp adds to Neovim. For this we call the module &lt;code&gt;cmp_nvim_lsp&lt;&#x2F;code&gt; and get the default capabilities.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lsp_capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;cmp_nvim_lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;default_capabilities&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Once we have this new variable &lt;code&gt;lsp_capabilities&lt;&#x2F;code&gt; we can add it to our setup.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lspconfig&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lsp_capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;cmp_nvim_lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;default_capabilities&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lspconfig.lua_ls.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; lsp_capabilities,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If want to know the available options in &lt;code&gt;.setup()&lt;&#x2F;code&gt; checkout the help page using &lt;code&gt;:help lspconfig-setup&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;At this point to take advantage of some &quot;LSP features&quot; we need to create some keybindings. Neovim will emit the event &lt;code&gt;LspAttach&lt;&#x2F;code&gt; each time a language server is attached to a buffer, this will give us the opportunity to create our keybindings. Here is an example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;LspAttach&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;LSP actions&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; bufmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;mode&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; lhs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; rhs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(mode, lhs, rhs, opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Displays hover information about the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;K&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.hover()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Jump to the definition&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gd&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Jump to declaration&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gD&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.declaration()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Lists all the implementations for the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gi&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.implementation()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Jumps to the definition of the type symbol&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;go&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.type_definition()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Lists all the references &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.references()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Displays a function&amp;#39;s signature information&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gs&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.signature_help()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Renames all references to the symbol under the cursor&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F2&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.rename()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Selects a code action available at the current cursor position&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;F4&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.lsp.buf.code_action()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Show diagnostics in a floating window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gl&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.open_float()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Move to the previous diagnostic&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;[d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_prev()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    -- Move to the next diagnostic&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    bufmap&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;]d&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;cmd&amp;gt;lua vim.diagnostic.goto_next()&amp;lt;cr&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This autocommand can live anywhere in our configuration. And if we wanted to, we could write it in vimscript (I&#x27;m not doing that here).&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: if you are using Neovim v0.7.2 or lower you&#x27;ll need to create a function and add it to the &lt;code&gt;on_attach&lt;&#x2F;code&gt; option of each language server. See &lt;code&gt;:help lspconfig-keybindings&lt;&#x2F;code&gt; for an example.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;So, here is the complete code to configure one language server using &lt;code&gt;lspconfig&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lspconfig&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lsp_capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;cmp_nvim_lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;default_capabilities&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lspconfig.lua_ls.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; lsp_capabilities,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;snippets&quot;&gt;Snippets&lt;&#x2F;h2&gt;
&lt;p&gt;This is a good time to configure our snippet engine. The next bit is not related to language servers, LSP or whatever. We are just going to load the snippets we have installed.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;luasnip.loaders.from_vscode&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lazy_load&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;.lazy_load()&lt;&#x2F;code&gt; function will load any snippet we have in our &lt;code&gt;runtimepath&lt;&#x2F;code&gt;. And by that I mean the ones available in &lt;code&gt;friendly-snippets&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;autocompletion&quot;&gt;Autocompletion&lt;&#x2F;h2&gt;
&lt;p&gt;Before we start, &lt;code&gt;nvim-cmp&lt;&#x2F;code&gt;&#x27;s documentation says we should set &lt;code&gt;completeopt&lt;&#x2F;code&gt; with the following values:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.completeopt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menu&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menuone&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;noselect&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To configure nvim-cmp we will use two modules &lt;code&gt;cmp&lt;&#x2F;code&gt; and &lt;code&gt;luasnip&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local cmp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;cmp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local luasnip&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;luasnip&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;cmp&lt;&#x2F;code&gt; is the one we will use to configure &lt;code&gt;nvim-cmp&lt;&#x2F;code&gt;. And this &lt;code&gt;luansnip&lt;&#x2F;code&gt;? Well, nvim-cmp doesn&#x27;t &quot;know&quot; how to expand a snippet, that&#x27;s why we need it.&lt;&#x2F;p&gt;
&lt;p&gt;We are going to spend some time exploring nvim-cmp&#x27;s options. I want to explain all the things I do in my personal configuration. For now let&#x27;s just add the setup function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local select_opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {behavior&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; cmp.SelectBehavior.Select}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;snippet-expand&quot;&gt;snippet.expand&lt;&#x2F;h3&gt;
&lt;p&gt;Callback function, it receives data from a snippet. This is where &lt;code&gt;nvim-cmp&lt;&#x2F;code&gt; expect us to provide a thing that can expand snippets, and we do that with &lt;code&gt;luasnip.lsp_expand&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;snippet&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  expand&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lsp_expand&lt;&#x2F;span&gt;&lt;span&gt;(args.body)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;sources&quot;&gt;sources&lt;&#x2F;h3&gt;
&lt;p&gt;Here we can list all the data sources nvim-cmp will use to populate the completion list.&lt;&#x2F;p&gt;
&lt;p&gt;Each &quot;source&quot; is a lua table that must have a &lt;code&gt;name&lt;&#x2F;code&gt; property. That &lt;code&gt;name&lt;&#x2F;code&gt; is not the name of the plugin, it&#x27;s the &quot;id&quot; the plugin used when creating the source. Each source should tell what name they have in their documentation.&lt;&#x2F;p&gt;
&lt;p&gt;Other properties you should be aware of are &lt;code&gt;priority&lt;&#x2F;code&gt; and &lt;code&gt;keyword_length&lt;&#x2F;code&gt;. &lt;code&gt;priority&lt;&#x2F;code&gt; allows nvim-cmp to sort the completion list. If you do not set a &lt;code&gt;priority&lt;&#x2F;code&gt; then the order of the sources will determine the priority. Now with &lt;code&gt;keyword_length&lt;&#x2F;code&gt; you can control how many characters are necesary to begin querying the source.&lt;&#x2F;p&gt;
&lt;p&gt;In my personal configuration I have the sources setup this way.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;sources&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;path&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;nvim_lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keyword_length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;buffer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keyword_length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;luasnip&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keyword_length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;path&lt;&#x2F;code&gt;: Autocomplete file paths.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;nvim_lsp&lt;&#x2F;code&gt;: Shows suggestions based on the response of a language server.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;buffer&lt;&#x2F;code&gt;: Suggests words found in the current buffer.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;luasnip&lt;&#x2F;code&gt;: Shows available snippets and expands them if they are chosen.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;window-documentation&quot;&gt;window.documentation&lt;&#x2F;h3&gt;
&lt;p&gt;Controls the appearance and settings for the documentation window. To configure this quickly nvim-cmp offers a preset we can use to add some borders.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  documentation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; cmp.config.window.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bordered&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;formatting-fields&quot;&gt;formatting.fields&lt;&#x2F;h3&gt;
&lt;p&gt;List of strings that determines the order of the elements in an item.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;formatting&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menu&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;abbr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;kind&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;abbr&lt;&#x2F;code&gt; is the content of the suggestion. &lt;code&gt;kind&lt;&#x2F;code&gt; is the type of data, this can be text, class, function, etc. Finally, &lt;code&gt;menu&lt;&#x2F;code&gt; which apparently is empty by default.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;formatting-format&quot;&gt;formatting.format&lt;&#x2F;h3&gt;
&lt;p&gt;Callback function that allows us to customize the appearance of the completion menu. A simple example I can show: assign an icon to a field based on the source name.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;formatting&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menu&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;abbr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;kind&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;entry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; item&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local menu_icon&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      nvim_lsp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;λ&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      luasnip&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;⋗&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Ω&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;🖫&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    item.menu&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; menu_icon[entry.source.name]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; item&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;mapping&quot;&gt;mapping&lt;&#x2F;h3&gt;
&lt;p&gt;List of keybindings. For this we need to declare a list of key&#x2F;value pairs. Where the value is a function of the &lt;code&gt;cmp&lt;&#x2F;code&gt; module. Like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;mapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;CR&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;confirm&lt;&#x2F;span&gt;&lt;span&gt;({select&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In this example &lt;code&gt;[&#x27;&amp;lt;CR&amp;gt;&#x27;]&lt;&#x2F;code&gt; is the key&#x2F;shortcut we want to bind. The function on the other side of the assignment is the action we want to execute.&lt;&#x2F;p&gt;
&lt;p&gt;Here is a list of common keybindings:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Move between completion items.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Up&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_prev_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Down&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_next_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-p&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_prev_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-n&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_next_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Scroll text in the documentation window.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-u&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;scroll_docs&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-d&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;scroll_docs&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Cancel completion.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-e&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;abort&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Confirm selection.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-y&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;confirm&lt;&#x2F;span&gt;&lt;span&gt;({select&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;CR&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;confirm&lt;&#x2F;span&gt;&lt;span&gt;({select&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Jump to the next placeholder in the snippet.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-f&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jumpable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jump&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Jump to the previous placeholder in the snippet.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-b&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jumpable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jump&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Autocomplete with tab.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;If the completion menu is visible, move to the next item. If the line is &quot;empty&quot;, insert a &lt;code&gt;Tab&lt;&#x2F;code&gt; character. If the cursor is inside a word, trigger the completion menu.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  local col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;col&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;visible&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_next_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  elseif&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getline&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;):&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sub&lt;&#x2F;span&gt;&lt;span&gt;(col, col):&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;match&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;%s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;complete&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;If the completion menu is visible, move to the previous item.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;S-Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;visible&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_prev_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;complete-cmp-config&quot;&gt;Complete cmp config&lt;&#x2F;h3&gt;
&lt;p&gt;Here is the entire configuration for &lt;code&gt;nvim-cmp&lt;&#x2F;code&gt; and &lt;code&gt;luansnip&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.completeopt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menu&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menuone&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;noselect&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;luasnip.loaders.from_vscode&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lazy_load&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local cmp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;cmp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local luasnip&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;luasnip&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local select_opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {behavior&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; cmp.SelectBehavior.Select}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  snippet&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    expand&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;lsp_expand&lt;&#x2F;span&gt;&lt;span&gt;(args.body)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  sources&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;path&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;nvim_lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keyword_length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;buffer&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keyword_length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    {name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;luasnip&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, keyword_length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    documentation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; cmp.config.window.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bordered&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  formatting&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;menu&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;abbr&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;kind&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;entry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; item&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local menu_icon&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        nvim_lsp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;λ&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        luasnip&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;⋗&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Ω&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;🖫&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      item.menu&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; menu_icon[entry.source.name]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; item&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  mapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Up&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_prev_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Down&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_next_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-p&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_prev_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-n&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_next_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-u&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;scroll_docs&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-d&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;scroll_docs&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-e&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;abort&lt;&#x2F;span&gt;&lt;span&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-y&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;confirm&lt;&#x2F;span&gt;&lt;span&gt;({select&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;CR&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.mapping.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;confirm&lt;&#x2F;span&gt;&lt;span&gt;({select&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-f&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      if&lt;&#x2F;span&gt;&lt;span&gt; luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jumpable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jump&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;        fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;C-b&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      if&lt;&#x2F;span&gt;&lt;span&gt; luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jumpable&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        luasnip.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;jump&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;        fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      local col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;col&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      if&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;visible&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_next_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      elseif&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; or&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getline&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;):&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sub&lt;&#x2F;span&gt;&lt;span&gt;(col, col):&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;match&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;%s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;        fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;complete&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;S-Tab&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;mapping&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      if&lt;&#x2F;span&gt;&lt;span&gt; cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;visible&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        cmp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;select_prev_item&lt;&#x2F;span&gt;&lt;span&gt;(select_opts)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      else&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;        fallback&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    end&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;i&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;bonus-content&quot;&gt;Bonus content&lt;&#x2F;h2&gt;
&lt;p&gt;Technically we are ready. All the code shown so far should get us a functional setup. We can now use our language servers and autocompletion. But there are still a couple of customizations we can make.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;change-diagnostic-icons&quot;&gt;Change diagnostic icons&lt;&#x2F;h3&gt;
&lt;p&gt;We do this using a function called &lt;code&gt;sign_define&lt;&#x2F;code&gt;. Keep in mind this is not a lua function, it&#x27;s vimscript. We access it using the prefix &lt;code&gt;vim.fn&lt;&#x2F;code&gt;. To know the details of this function check the documentation: &lt;code&gt;:help sign_define&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, this is the code you&#x27;ll need to change the sign icons.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; sign&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;opts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign_define&lt;&#x2F;span&gt;&lt;span&gt;(opts.name, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    texthl&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; opts.name,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; opts.text,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    numhl&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignError&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;✘&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignWarn&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▲&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignHint&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;⚑&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;sign&lt;&#x2F;span&gt;&lt;span&gt;({name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;DiagnosticSignInfo&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;»&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;diagnostics-config&quot;&gt;Diagnostics config&lt;&#x2F;h3&gt;
&lt;p&gt;This time we must use the &lt;code&gt;vim.diagnostic&lt;&#x2F;code&gt; module, specifically the &lt;code&gt;.config()&lt;&#x2F;code&gt; function. It takes a lua table as an argument, and these are the defaults.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  virtual_text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  signs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  update_in_insert&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  underline&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  severity_sort&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  float&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;virtual_text&lt;&#x2F;code&gt;: Show diagnostic message using virtual text.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;signs&lt;&#x2F;code&gt;: Show a sign next to the line with a diagnostic.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;update_in_insert&lt;&#x2F;code&gt;: Update diagnostics while editing in insert mode.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;underline&lt;&#x2F;code&gt;: Use an underline to show a diagnostic location.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;severity_sort&lt;&#x2F;code&gt;: Order diagnostics by severity.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;float&lt;&#x2F;code&gt;: Show diagnostic messages in floating windows.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Each one of these option can be either a boolean or a lua table. You can find more details about them in the documentation: &lt;code&gt;:help vim.diagnostic.config()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;I prefer less distracting diagnostics. This is the setup I use.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.diagnostic.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;config&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  virtual_text&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  severity_sort&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  float&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    border&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;rounded&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;always&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;help-windows-with-borders&quot;&gt;Help windows with borders&lt;&#x2F;h3&gt;
&lt;p&gt;There are two LSP methods that use floating windows: &lt;code&gt;vim.lsp.buf.hover()&lt;&#x2F;code&gt; and &lt;code&gt;vim.lsp.buf.signature_help()&lt;&#x2F;code&gt;. By default these windows don&#x27;t have any style, but we can change that by modifying the associated &quot;handler&quot; of each method. To achieve this we need to use &lt;code&gt;vim.lsp.with()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;I don&#x27;t want to bore you with the details so let me just show you the code.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.handlers[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;textDocument&#x2F;hover&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;with&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.handlers.hover,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {border&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;rounded&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.lsp.handlers[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;textDocument&#x2F;signatureHelp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; vim.lsp.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;with&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.lsp.handlers.signature_help,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {border&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;rounded&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;install-language-servers-locally&quot;&gt;Install language servers &quot;locally&quot;&lt;&#x2F;h3&gt;
&lt;p&gt;Sooner or later you are going to find out about this plugin: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;williamboman&#x2F;mason.nvim&quot;&gt;mason.nvim&lt;&#x2F;a&gt;. With it you can manage your language servers using Neovim. You&#x27;ll be able to install, update and remove language server.&lt;&#x2F;p&gt;
&lt;p&gt;But the servers you install using this method will not be available globally. They are installed in the &quot;data folder&quot; of Neovim. Now, some servers work fine in this setup others require extra configurations so it&#x27;s recommended that you add &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;williamboman&#x2F;mason-lspconfig.nvim&quot;&gt;mason-lspconfig&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Once you have both plugins you should setup mason.nvim using these functions.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mason&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mason-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After doing that you should use &lt;code&gt;lspconfig&lt;&#x2F;code&gt; like you usually do. Pretend mason.nvim doesn&#x27;t even exists.&lt;&#x2F;p&gt;
&lt;p&gt;Here is an example usage.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mason&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;mason-lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lspconfig&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;lspconfig&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local lsp_capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;cmp_nvim_lsp&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;default_capabilities&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lspconfig.lua_ls.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setup&lt;&#x2F;span&gt;&lt;span&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  capabilities&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; lsp_capabilities,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Right now this is all I have to say about &lt;code&gt;mason.nvim&lt;&#x2F;code&gt;. If you want to know more about it you&#x27;ll have read their documentation.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We&#x27;ve learned the things &lt;code&gt;nvim-lspconfig&lt;&#x2F;code&gt; can do for us. We figure out how to make a global config for our servers. We setup a handful of LSP functions in our keybindings. Basically, we know everything we need to take advantage of the cool features a language server can provide.&lt;&#x2F;p&gt;
&lt;p&gt;We had the chance to assemble a configuration for &lt;code&gt;nvim-cmp&lt;&#x2F;code&gt; from scratch. We explored some common options step by step.&lt;&#x2F;p&gt;
&lt;p&gt;Finally, we made some additional customizations to diagnostics. Learned a little something about configuring LSP handlers, specifically the ones using floating windows. And we took a brief look at a method to install language servers locally.&lt;&#x2F;p&gt;
&lt;p&gt;You can find all the configuration code here: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;VonHeikemen&#x2F;8fc2aa6da030757a5612393d0ae060bd&quot;&gt;nvim-lspconfig + nvim-cmp&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;And here you can find a fully functional Neovim setup: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;nvim-starter&#x2F;tree&#x2F;03-lsp&quot;&gt;nvim-starter - branch: 03-lsp&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources-1&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lsp.html&quot;&gt;:help lsp.txt&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;blob&#x2F;9e6bcf5a8915e8423d5cc7f82c5069c11272184d&#x2F;doc&#x2F;lspconfig.txt#L240&quot;&gt;:help lspconfig-global-defaults&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;neovim&#x2F;nvim-lspconfig&#x2F;blob&#x2F;9e6bcf5a8915e8423d5cc7f82c5069c11272184d&#x2F;doc&#x2F;lspconfig.txt#L481&quot;&gt;:help lspconfig-keybindings&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;hrsh7th&#x2F;nvim-cmp&#x2F;blob&#x2F;6e1e3865158f340d6cd3936937eb56947b5a90f9&#x2F;doc&#x2F;cmp.txt#L360&quot;&gt;:help cmp-config&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;hrsh7th&#x2F;nvim-cmp&#x2F;blob&#x2F;6e1e3865158f340d6cd3936937eb56947b5a90f9&#x2F;doc&#x2F;cmp.txt#L227&quot;&gt;:help cmp-mapping&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;diagnostic.html#vim.diagnostic.config()&quot;&gt;:help vim.diagnostic.config()&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Navigate your command history with ease</title>
        <published>2021-10-26T00:00:00+00:00</published>
        <updated>2021-10-26T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/navigate-command-history/"/>
        <id>https://vonheikemen.github.io/devlog/tools/navigate-command-history/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/navigate-command-history/">&lt;p&gt;When you spend too much time writting commands in the terminal it comes a time when you can&#x27;t remember every program you have used during the day, not to mention previous days. Lucky for us we don&#x27;t have to, the &quot;shell&quot; can do it for you. And today we are going to learn how can take advantage of this feature to improve the user experience in the terminal.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;commands-and-the-arrow-keys&quot;&gt;Commands and the arrow keys&lt;&#x2F;h2&gt;
&lt;p&gt;I&#x27;m sure everyone here knows about the arrow keys, right? We can navigate the history up and down with them. Some of you might know about &lt;code&gt;ctrl+r&lt;&#x2F;code&gt;, which enables an interactive &quot;reverse search&quot; of old commands. But what if I told you we can get the best of two worlds?&lt;&#x2F;p&gt;
&lt;p&gt;We can write the first few letters of a command and press the up arrow key to start navigating throught the commands that begin with those letters.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s pretend we have these commands saved in our history.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;node .&#x2F;test.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vi &#x2F;tmp&#x2F;text.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;nvim &#x2F;tmp&#x2F;text.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vi &#x2F;tmp&#x2F;test.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;echo &amp;quot;a string with vi in it&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vi &#x2F;tmp&#x2F;other-text.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We want to look for the files we modified using &lt;code&gt;vi&lt;&#x2F;code&gt;. So we start by typing &lt;code&gt;vi&lt;&#x2F;code&gt; and right after we press the up key you&#x27;ll notice your shell shows only these commands.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vi &#x2F;tmp&#x2F;text.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vi &#x2F;tmp&#x2F;test.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vi &#x2F;tmp&#x2F;other-text.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We can stop pressing the up key 20 times just because we don&#x27;t want to write &lt;code&gt;npm start&lt;&#x2F;code&gt;. Type &lt;code&gt;np&lt;&#x2F;code&gt; + up arrow and we&#x27;re there.&lt;&#x2F;p&gt;
&lt;p&gt;Sounds good, how can we enable this feature? Depends on your shell.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;In bash:&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;# Up arrow&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;quot;\e[A&amp;quot;: history-search-backward&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;# Down arrow&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;quot;\e[B&amp;quot;: history-search-forward&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;In zsh:&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;autoload&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -U up-line-or-beginning-search&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;autoload&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -U down-line-or-beginning-search&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;# Up arrow&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bindkey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;terminfo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;kcuu1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot; up-line-or-beginning-search&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;# Down arrow&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bindkey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;terminfo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;kcud1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot; down-line-or-beginning-search&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: if you use &lt;code&gt;oh-my-zsh&lt;&#x2F;code&gt; it is already enabled for you.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;If for some reason &lt;code&gt;terminfo&lt;&#x2F;code&gt; is not defined try this in your terminal: press &lt;code&gt;ctrl+v&lt;&#x2F;code&gt; then one of the arrows, weird stuff will appear on the screen. In my case I get:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Up: &lt;code&gt;^[OA&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;li&gt;Down: &lt;code&gt;^[OB&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;So use that instead of &lt;code&gt;terminfo&lt;&#x2F;code&gt;. This works on my machine.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bindkey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;^[OA&amp;#39; up-line-or-beginning-search&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bindkey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;^[OB&amp;#39; down-line-or-beginning-search&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;interactive-search&quot;&gt;Interactive search&lt;&#x2F;h2&gt;
&lt;p&gt;If you didn&#x27;t like the previous &quot;trick&quot; that&#x27;s fine. Maybe you prefer the good old &lt;code&gt;ctrl+r&lt;&#x2F;code&gt;. Me? If I&#x27;m going to do an interactive search, I rather use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;junegunn&#x2F;fzf&quot;&gt;fzf&lt;&#x2F;a&gt;. With &lt;code&gt;fzf&lt;&#x2F;code&gt; we get &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;junegunn&#x2F;fzf&#x2F;tree&#x2F;master&#x2F;shell&quot;&gt;these scripts&lt;&#x2F;a&gt;, &lt;code&gt;key-bindings.*sh&lt;&#x2F;code&gt; in particular enables a history search with a better user experience than the old &lt;code&gt;ctrl+r&lt;&#x2F;code&gt;. Sadly there are too many ways to enable this (some depend on your OS) so if you want it, better go look for the method that&#x27;s appropiate for your case.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;magic-space&quot;&gt;Magic space&lt;&#x2F;h2&gt;
&lt;p&gt;Both &lt;code&gt;bash&lt;&#x2F;code&gt; and &lt;code&gt;zsh&lt;&#x2F;code&gt; have this thing called &quot;history-expansion&quot;, it allow us to use pieces of data from the command history in our current command. For example:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;!!&lt;&#x2F;code&gt; is the last command in our history. So something like &lt;code&gt;sudo !!&lt;&#x2F;code&gt; is totally valid, in here we are saying &quot;run the last command as sudo&quot;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;!$&lt;&#x2F;code&gt; is the last argument of the last command. If our last command was &lt;code&gt;nano &#x2F;tmp&#x2F;test.txt&lt;&#x2F;code&gt;, we could use &lt;code&gt;cat !$&lt;&#x2F;code&gt; to check the content of &lt;code&gt;&#x2F;tmp&#x2F;test.txt&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;!*&lt;&#x2F;code&gt; expands to all the arguments of the last command.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;There are more variants and combination but those are the ones I use frequently.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, if I&#x27;m using any of these symbols I&#x27;m going to &quot;expand&quot; them before running the command. I wouldn&#x27;t run &lt;code&gt;sudo !!&lt;&#x2F;code&gt; without knowing for sure what is &lt;code&gt;!!&lt;&#x2F;code&gt;. To do this there is a command called &lt;code&gt;magic-space&lt;&#x2F;code&gt;. Just like our first &quot;trick&quot; we need to bind it to a key, which is usually space.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;bash&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;# Space, but magical&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; Space:magic-space&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;zsh&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;# Space, but magical&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bindkey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39; &amp;#39; magic-space&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we could write &lt;code&gt;sudo !!&lt;&#x2F;code&gt; then press space and watch how &lt;code&gt;!!&lt;&#x2F;code&gt; transforms into the command we want to run.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We learned a few tricks that can improve the user experience in our shell. We learned how to speed up our search with the arrow keys. Found out we can use &lt;code&gt;fzf&lt;&#x2F;code&gt; to search in the command history, basically like a better version of &lt;code&gt;ctrl+r&lt;&#x2F;code&gt;. And finally, we got a tiny glimpse of this thing called history-expansion, we can use to query the history and use some pieces in our commands.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Want to use env variables in that config file? Well, you can... kind of</title>
        <published>2021-10-20T00:00:00+00:00</published>
        <updated>2021-10-20T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/embed-env-variables-in-any-config-file/"/>
        <id>https://vonheikemen.github.io/devlog/tools/embed-env-variables-in-any-config-file/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/embed-env-variables-in-any-config-file/">&lt;p&gt;Imagine there is a tool you want to install in every OS you manage and that tool needs a configuration file. There is a good chance a piece of information in that file needs to change according to the type of OS you&#x27;re using, or maybe it changes according to the context (whether is a personal computer or a workstation... stuff like that). So you always need to make some tweaks to this config. Wouldn&#x27;t be great if you could use some variables? It turns out you can... kind of.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;meet-the-envsubst-command&quot;&gt;Meet the envsubst command&lt;&#x2F;h2&gt;
&lt;p&gt;With &lt;code&gt;envsubst&lt;&#x2F;code&gt; we can embed the value of environment variables inside a string that comes from the &lt;strong&gt;standard input&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;We can try it out. In the terminal we can do something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;there is no place like $HOME&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; envsubst&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you are using linux you should get this message.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;there is no place like &#x2F;home&#x2F;user&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So what I&#x27;m trying to say is we can cheat. We can use &lt;code&gt;envsubst&lt;&#x2F;code&gt; like a preprocessor to create our config files based on some template.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;real-world-example&quot;&gt;Real world example&lt;&#x2F;h2&gt;
&lt;p&gt;In my case &lt;code&gt;envsubst&lt;&#x2F;code&gt; solved a bit of a problem I had with &lt;code&gt;npm&lt;&#x2F;code&gt;. In my home folder I have an &lt;code&gt;.npmrc&lt;&#x2F;code&gt; file with the following structure.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;prefix=&amp;lt;some-path&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;ignore-scripts=true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;init-author=&amp;lt;some-name&amp;gt; (&amp;lt;some-link&amp;gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;init-license=MIT&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;As you might have guessed some of these fields can change according to the OS or context. But now that I know about &lt;code&gt;envsubst&lt;&#x2F;code&gt; I can have a template in &lt;code&gt;~&#x2F;templates&#x2F;npmrc&lt;&#x2F;code&gt; and use that as a base for every other machine.&lt;&#x2F;p&gt;
&lt;p&gt;So how do I do? First thing is the template.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;prefix=$XDG_CONFIG_HOME&#x2F;npm&#x2F;packages&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;ignore-scripts=true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;init-author=$USER_NAME ($CONTACT_LINK)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;init-license=MIT&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is good enough.&lt;&#x2F;p&gt;
&lt;p&gt;I always like to test things, so next thing is try showing the result on the terminal.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;envsubst&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; ~&#x2F;templates&#x2F;npmrc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we use &lt;code&gt;&amp;lt;&lt;&#x2F;code&gt; we are telling our shell we want to take the content of that file and send it to &lt;code&gt;envsubst&lt;&#x2F;code&gt; using the standard input. This is known as a file redirection. So, if all our environment variables are set &lt;code&gt;envsubst&lt;&#x2F;code&gt; should show this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;prefix=&#x2F;home&#x2F;user&#x2F;.config&#x2F;npm&#x2F;packages&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;ignore-scripts=true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;init-author=Heiker (https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;init-license=MIT&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now to really make this work we need to redirect this thing to &lt;code&gt;~&#x2F;.npmrc&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;envsubst&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; ~&#x2F;templates&#x2F;npmrc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; ~&#x2F;.npmrc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Technically we are done but since we are here let&#x27;s explore another posibility.&lt;&#x2F;p&gt;
&lt;p&gt;I already showed you that our template can come from any command, the only requirement to keep in mind is we need to get the content from the standard input.&lt;&#x2F;p&gt;
&lt;p&gt;So, if we get creative we could put our template in any server (like say github), download it using &lt;code&gt;curl&lt;&#x2F;code&gt; and pass that content to &lt;code&gt;envsubst&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;curl&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -s &amp;quot;https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;&amp;lt;user&amp;gt;&#x2F;&amp;lt;repo&amp;gt;&#x2F;main&#x2F;npmrc&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7FB4CA;&quot;&gt; \&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; envsubst&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; ~&#x2F;.npmrc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This works like charm. It means we don&#x27;t even need the template to live in our local environment.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;a-cross-platform-alternative&quot;&gt;A cross-platform alternative&lt;&#x2F;h2&gt;
&lt;p&gt;One last thing. If you&#x27;re using linux you probably have this tool in your system. In case you don&#x27;t, you could try and get this version which was written using &lt;code&gt;go&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;a8m&#x2F;envsubst&quot;&gt;github.com&#x2F;a8m&#x2F;envsubst&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;In their &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;a8m&#x2F;envsubst&#x2F;releases&quot;&gt;release page&lt;&#x2F;a&gt; they have prebuilt binaries for windows, mac and linux.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We learned about &lt;code&gt;envsubst&lt;&#x2F;code&gt; and how we can use it to create a config file based on a template. We learned &lt;code&gt;envsubst&lt;&#x2F;code&gt; needs to take the content of the template from the standard input, this opens the posibility for us to get what we need from other files or commands. Lastly, we saw how we can use file redirections to take final result into the config file we want.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;source&quot;&gt;Source&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.mankier.com&#x2F;1&#x2F;envsubst&quot;&gt;man envsubst&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>How an applicative functor can help us validate forms</title>
        <published>2021-10-03T00:00:00+00:00</published>
        <updated>2021-10-03T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/applicative-functors-and-form-validation/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/applicative-functors-and-form-validation/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/applicative-functors-and-form-validation/">&lt;p&gt;We will &#x27;play&#x27; with applicative functors. To be more specific we will use it to validate some user input that comes from a form.&lt;&#x2F;p&gt;
&lt;p&gt;If you don&#x27;t know what&#x27;s an applicative maybe you want like summary or something... it ain&#x27;t going happen. Still haven&#x27;t found a way to explain them without telling you a bunch of stuff you won&#x27;t need.&lt;&#x2F;p&gt;
&lt;p&gt;If you really, really want to know more about applicatives I recommend reading at least one of these.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;the-power-of-map&#x2F;&quot;&gt;Speaking of functors.&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;applicative-functors&#x2F;&quot;&gt;Have you met applicative functors?&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;tagged-unions-and-fantasy-land&#x2F;&quot;&gt;Exploring Fantasy Land.&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;For now I&#x27;ll tell you with an example one of the problems we can solve using applicatives.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;imagine&quot;&gt;Imagine&lt;&#x2F;h2&gt;
&lt;p&gt;Imagine a situation like this: you have some value and a regular function, you want to apply the function to the value.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The solution is quite simple.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All good. No need for fancy stuff. But now let&#x27;s say &lt;code&gt;value&lt;&#x2F;code&gt; and &lt;code&gt;fn&lt;&#x2F;code&gt; are both &quot;trapped&quot; inside a data structure (could be anything).&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [(&lt;&#x2F;span&gt;&lt;span&gt;x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So we have things inside arrays. Okay. But what happens if we want to apply the function? How do we proceed? Like this?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;](&lt;&#x2F;span&gt;&lt;span&gt;Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;])];&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [2]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Oh, that can&#x27;t be right. In an ideal world we could do something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [2]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What we want to treat this apply operation like another method in our structure.&lt;&#x2F;p&gt;
&lt;p&gt;The bad news is that we don&#x27;t live in a world where arrays can do that. The good news is we can implement &lt;code&gt;.ap&lt;&#x2F;code&gt; ourselves.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; List&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this little helper we can solve our problem.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [(&lt;&#x2F;span&gt;&lt;span&gt;x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;List&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [2]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;the-next-step&quot;&gt;The next step&lt;&#x2F;h2&gt;
&lt;p&gt;Let&#x27;s put our attention in another structure: objects.&lt;&#x2F;p&gt;
&lt;p&gt;Imagine the same situation but this time the things we want to use are inside an object with the same &quot;shape&quot;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt;email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;this@example.com&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: (&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;includes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;@&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What do we do? We&#x27;ll take the value from one key and applied to the function with that same key.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; in&lt;&#x2F;span&gt;&lt;span&gt; Data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;](&lt;&#x2F;span&gt;&lt;span&gt;Data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And now we test.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt;email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;this@example.com&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: (&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;includes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;@&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; {email: true}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;let-s-compose&quot;&gt;Let&#x27;s compose&lt;&#x2F;h2&gt;
&lt;p&gt;We are making some good progress. We can apply one validation, but do you think that&#x27;s enough? Probably not. There is a good chance we need to tell the user what they did wrong. Also, it would be a nice if we could apply more than one validation.&lt;&#x2F;p&gt;
&lt;p&gt;I want a list of pairs. Each pair will have a function and a message. Something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Come on, try again.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span&gt;is_email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Totally not an email.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If the function returns &lt;code&gt;false&lt;&#x2F;code&gt; then message will be added to an array. Simple, right? Let&#x27;s just turn that idea into a function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;validations&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span&gt;validation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; msg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; validations&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; validation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span&gt;is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;msg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice the &lt;code&gt;input&lt;&#x2F;code&gt; is the last parameter, that&#x27;s because I want partially apply the function. Basically, I want to &quot;bind&quot; the &lt;code&gt;validations&lt;&#x2F;code&gt; parameter to a value without executing the function. For this I&#x27;ll just use &lt;code&gt;Function.bind&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Come on, try again.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span&gt;is_email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Totally not an email.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There are other ways to achieve this effect but I like &lt;code&gt;.bind&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, now let&#x27;s create the validation that we want to use.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;includes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;@&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; no_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; !&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;\d&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;test&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can put everything together to make a test.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;1&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;a&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; validations&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Come on, try again.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;no_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Don&amp;#39;t get smart. No numbers.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  ]),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Am I a joke to you?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;is_email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Totally not an email.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  ])&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;validations&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;Obj.ap&lt;&#x2F;code&gt; should return this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;Come on, try again.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;Don&amp;#39;t get smart. No numbers.&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  ],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;Am I a joke to you?&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;Totally not an email.&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we want to check if the form is actually valid we would have to check if any of the keys has an error message.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;form_errors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_empty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; msg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; !&lt;&#x2F;span&gt;&lt;span&gt;msg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;values&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;form_errors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;every&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_empty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;validations&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After this all we need to do is show the error messages (if there are any) to the user. This part of the process will be very different depending on the thing you&#x27;re building. I can&#x27;t really show you an example that is generic and good enough for everyone. What I can do is make this imaginary scenerio a little bit more specific.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;a-register-form&quot;&gt;A register form&lt;&#x2F;h2&gt;
&lt;p&gt;Let&#x27;s assume each field in our form looks like this in our html.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;field&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;label&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;Name of field:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;control&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;field-name&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;input&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;text&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; data-errors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;field-name&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;ul&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When the input fails the validation we want to show the list of messages in the &lt;code&gt;ul&lt;&#x2F;code&gt; element.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s start with something basic, add a listener to the &lt;code&gt;submit&lt;&#x2F;code&gt; event in the form.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;document&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;forms&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;namedItem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;myform&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;submit&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we gather the data from the user. This time around we need more than just the input, we&#x27;ll also need the name of the field. So our objects are going to be a bit more complex.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; collect_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; FormData&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; entry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;entry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      field&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; entry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; entry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We add it to the &lt;code&gt;submit&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; collect_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;At this point we need to apply the validations but the current version of &lt;code&gt;validate&lt;&#x2F;code&gt; will not be enough. Now we need to handle an object instead of a plain string.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; function validate(validations, input) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   const error = [];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; function validate(validations, field) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   const result = {...field};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   result.errors = [];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(let [validation, msg] of validations) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;     const is_valid = validation(input);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     result.is_valid = validation(field.value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;     if(!is_valid) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;       error.push(msg);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     if(!result.is_valid) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       result.errors.push(msg);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   return error;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   return result;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So now we pass &lt;code&gt;field.value&lt;&#x2F;code&gt; to the validation. And also instead of returning an array, we return an object with this shape.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  field&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; String&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; String&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  errors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; Array&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We do this because we&#x27;ll need all this extra data after the validation process.&lt;&#x2F;p&gt;
&lt;p&gt;Just like before, let&#x27;s pretend we&#x27;re just validating a name and an email. We&#x27;ll use the same functions as before with our new &lt;code&gt;validate&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; collect_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; validations&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Come on, try again.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      [&lt;&#x2F;span&gt;&lt;span&gt;no_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Don&amp;#39;t get smart. No numbers.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ]),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Am I a joke to you?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      [&lt;&#x2F;span&gt;&lt;span&gt;is_email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Totally not an email.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ])&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;validations&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But you know what? I want to do something funny. I want to take &lt;code&gt;validations&lt;&#x2F;code&gt; out of there. I&#x27;ll be turning that into a function using &lt;code&gt;Obj.ap.bind&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; validate_form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Come on, try again.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;no_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Don&amp;#39;t get smart. No numbers.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  ]),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; validate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;long_enough&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Am I a joke to you?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    [&lt;&#x2F;span&gt;&lt;span&gt;is_email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Totally not an email.&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  ])&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this our function &lt;code&gt;submit&lt;&#x2F;code&gt; can be a little bit more declarative.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; collect_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; validate_form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With validations out of the way, we need to check if the form is actually valid. To do this we will check if &lt;code&gt;.is_valid&lt;&#x2F;code&gt; is &lt;code&gt;true&lt;&#x2F;code&gt; in every field. If the form is valid we want to send the data somewhere, else we would show the error messages.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;values&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;every&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;field&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; field&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; collect_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; validate_form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    send_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; show errors&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In this last step we&#x27;ll show each error message in an &lt;code&gt;li&lt;&#x2F;code&gt; element inside the &lt;code&gt;ul&lt;&#x2F;code&gt; of each field.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; show_errors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; el&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; document&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;querySelector&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`[data-errors=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;field&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;]`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  el&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;replaceChildren&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; msg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;errors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; li&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; document&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;createElement&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;li&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    li&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;textContent =&lt;&#x2F;span&gt;&lt;span&gt; msg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    el&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;appendChild&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;li&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But wait... one last thing. We can&#x27;t have an applicative without a &lt;code&gt;map&lt;&#x2F;code&gt; function. Let&#x27;s fix that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  const Obj = {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   map(fn, data) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     const result = {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     for (let key in data) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       result[key] = fn(data[key]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     return result;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ap(Fn, Data) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      const result = {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      for (let key in Data) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        result[key] = Fn[key](Data[key]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return result;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now I feel better. We&#x27;ll use this new function to show the messages.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  event&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; collect_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; validate_form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;is_valid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    send_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;show_errors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; formdata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, I know, I should be using a regular &lt;code&gt;for&lt;&#x2F;code&gt; loop because &quot;side effects&quot;. We are done, let&#x27;s not fight over details here.&lt;&#x2F;p&gt;
&lt;p&gt;To prove this stuff works I have this wonderful codepen example with a semi-functional form.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;PojjGpM&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;Applicative functors and form validation&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;PojjGpM&quot;&gt;Applicative functors and form validation&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;


&lt;script async src=&quot;https:&#x2F;&#x2F;static.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;


&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We took a brief look at the &lt;code&gt;.ap&lt;&#x2F;code&gt; method we find in applicative functors. We learned that in javascript there is no such thing so we have to implement it ourselves. Finally we used our new found knowledge to validate a simple input.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>The illusion of fast startup times in vim</title>
        <published>2021-08-22T00:00:00+00:00</published>
        <updated>2021-08-22T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/the-illusion-of-fast-startup-times-in-vim/"/>
        <id>https://vonheikemen.github.io/devlog/tools/the-illusion-of-fast-startup-times-in-vim/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/the-illusion-of-fast-startup-times-in-vim/">&lt;p&gt;With an emphasis on the word &quot;Illusion&quot;. What I&#x27;m going to show you is not a &quot;magic trick&quot; that will make vim go faster. Don&#x27;t get your hopes up. The only thing we&#x27;ll do here is delay the inevitable.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-do-we-want-to-achieve&quot;&gt;What do we want to achieve?&lt;&#x2F;h2&gt;
&lt;p&gt;I want to load my optional plugins after vim interface is fully loaded and ready to go.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;why&quot;&gt;Why?&lt;&#x2F;h2&gt;
&lt;p&gt;Because when I open vim there is a little timeframe of maybe 2 or 3 seconds where my mind goes from &quot;what was I going to do?&quot; to &quot;Yeah, that thing&quot;. That&#x27;s when I want to load the plugins. This way we only the deal with necessary stuff at startup, and then rest of the &quot;nice to have&quot; can happen in this timeframe where &lt;strong&gt;I&lt;&#x2F;strong&gt; am not doing anything in the editor.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;let-s-get-to-it&quot;&gt;Let&#x27;s get to it&lt;&#x2F;h2&gt;
&lt;p&gt;In vim we have an &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;autocmd.txt.html#autocmd-events&quot;&gt;event&lt;&#x2F;a&gt; called &lt;code&gt;VimEnter&lt;&#x2F;code&gt;, it gets emitted when is done executing all the initial scripts and plugins. In theory this should be enough, but not for me, I really want to be sure. So what I&#x27;d like to do is wait 20 miliseconds after this event is dispatched, it should be enough time for vim to load the interface, and then load the plugins.&lt;&#x2F;p&gt;
&lt;p&gt;For this we will need an autocommand and the &lt;code&gt;timer_start&lt;&#x2F;code&gt; function. So let&#x27;s make a test.We&#x27;ll print a message 5 seconds after vim has started. We&#x27;ll put this in our &lt;code&gt;.vimrc&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; s:load_plugins&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;t&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt; abort&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  echom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;vim is ready&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; user_cmds&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; VimEnter&lt;&#x2F;span&gt;&lt;span&gt; * call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; timer_start&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;5000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s:load_plugins&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Next time we open vim we should see the message &lt;code&gt;vim is ready&lt;&#x2F;code&gt;, after a few seconds. If you missed it you can check with command &lt;code&gt;:messages&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Now we know it works. Change the delay time from &lt;code&gt;5000&lt;&#x2F;code&gt; to &lt;code&gt;20&lt;&#x2F;code&gt;. And in &lt;code&gt;s:load_plugins&lt;&#x2F;code&gt; put all the necessary commands to load your plugins.&lt;&#x2F;p&gt;
&lt;p&gt;This next part will depend a lot on how you manage your plugins. I&#x27;m going to use a built-in feature known as &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;repeat.txt.html#packages&quot;&gt;packages&lt;&#x2F;a&gt;. Some plugins managers don&#x27;t use it, so make sure it does by reading the docs.&lt;&#x2F;p&gt;
&lt;p&gt;The last piece of the puzzle is the &lt;code&gt;packadd&lt;&#x2F;code&gt; command, is what we&#x27;ll use to load all our &quot;optional plugins&quot;. So our function should be something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; s:load_plugins&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;t&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt; abort&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; list of plugins&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  packadd vim-surround&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  packadd vim-obsession&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot;(optional) run all the scripts in the `after` folder&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  runtime&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span&gt; OPT after&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;plugin&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;*.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot;(optional) emit a user &amp;#39;event&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; so we can call other autocommands in this moment&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  doautocmd &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;User&lt;&#x2F;span&gt;&lt;span&gt; PluginsLoaded&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; user_cmds&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; VimEnter&lt;&#x2F;span&gt;&lt;span&gt; * call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; timer_start&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;20&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;s:load_plugins&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s it. But I&#x27;m not done.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-about-lua&quot;&gt;What about lua?&lt;&#x2F;h2&gt;
&lt;p&gt;Neovim (version 0.5) makes it possible to write our config file entirely in lua, and a lot of people are doing just that. It&#x27;s possible to write this in your lua config, but the current limitations of the API will force you to write a lot of vimscript.&lt;&#x2F;p&gt;
&lt;p&gt;Here is what you&#x27;ll need to do in lua.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; load_plugins&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; [[&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    packadd vim-surround&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    packadd vim-obsession&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    runtime! OPT after&#x2F;plugin&#x2F;*.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    doautocmd User PluginsLoaded&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  ]]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; [[&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  augroup user_cmds&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    autocmd!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    autocmd VimEnter * lua vim.defer_fn(load_plugins, 20)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  augroup END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;]]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I&#x27;m using a global function just because is the easiest way to write it. In general I advice against it. If you know how to create and use a lua module, use that instead.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;fair-warning&quot;&gt;Fair warning&lt;&#x2F;h2&gt;
&lt;p&gt;You should consider what plugins you&#x27;re going to load using this method.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s take &lt;code&gt;NERDTree&lt;&#x2F;code&gt; (a file manager) as an example. If you open up a folder in the terminal, something like &lt;code&gt;vim .&lt;&#x2F;code&gt;, &lt;code&gt;NERDTree&lt;&#x2F;code&gt; can show you the files in the folder automatically. But that specific feature will not work if you load it after &lt;code&gt;VimEnter&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Syntax plugins can also be affected by this. If you load them late in the process you might actually see when the default colors change to the ones declared by the plugin. Is not a nice experience.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We learned about &lt;code&gt;VimEnter&lt;&#x2F;code&gt;, an event that vim emits when the startup process is done. We learned about &lt;code&gt;timer_start&lt;&#x2F;code&gt; and &lt;code&gt;vim.defer_fn&lt;&#x2F;code&gt;, how we can use them to execute a function at a later time. Finally, we pieced together all of this to load all optional plugins in a specific moment when we as users are not interacting with the editor.&lt;&#x2F;p&gt;
&lt;p&gt;But we should also be careful with this. Loading a plugin outside the startup process can have unexpected side effects. So we should first decide what plugins can be optional.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;eval.txt.html#timers&quot;&gt;:help timers&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;autocmd.txt.html#%3Adoautocmd&quot;&gt;:help :doautocmd&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;autocmd.txt.html#User&quot;&gt;:help User&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;repeat.txt.html#%3Apackadd&quot;&gt;:help :packadd&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;repeat.txt.html#%3Aruntime&quot;&gt;:help :runtime&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua.html#vim.defer_fn()&quot;&gt;:help vim.defer_fn&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Everything you need to know to configure neovim using lua</title>
        <published>2021-08-01T00:00:00+00:00</published>
        <updated>2024-07-27T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/configuring-neovim-using-lua/"/>
        <id>https://vonheikemen.github.io/devlog/tools/configuring-neovim-using-lua/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/configuring-neovim-using-lua/">&lt;p&gt;After a long time in development neovim 0.5 was finally released as a stable version. Among the new exciting features we have better lua support and the promise of a stable api to create our configuration using this language. So today I&#x27;m going to share with you everything I learned while I was migrating my own configuration from vimscript to lua.&lt;&#x2F;p&gt;
&lt;p&gt;If you are new to neovim and want to start your configuration from scratch, I recommend you read this: &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;tools&#x2F;build-your-first-lua-config-for-neovim&#x2F;&quot;&gt;Build your first Neovim configuration in lua&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Here I&#x27;m going to talk about the things we can do with lua and its interaction with vimscript. I will be showing a lot of examples but I will not tell you what options you should set with what value. Also, this won&#x27;t be a tutorial on &quot;how to turn neovim into an IDE&quot;, I&#x27;ll avoid anything that is language specific. What I want to do is teach you enough about lua and the neovim api so you can migrate your own configuration.&lt;&#x2F;p&gt;
&lt;p&gt;I will assume your operating system is linux (or something close to it) and that your configuration is located at &lt;code&gt;~&#x2F;.config&#x2F;nvim&#x2F;init.vim&lt;&#x2F;code&gt;. Everything that I will show should work on every system in which neovim can be installed, just keep in mind that the path to the &lt;code&gt;init.vim&lt;&#x2F;code&gt; file might be different in your case.&lt;&#x2F;p&gt;
&lt;p&gt;Let us begin.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;first-steps&quot;&gt;First steps&lt;&#x2F;h2&gt;
&lt;p&gt;The first thing you need to know is that we can embed lua code directly in &lt;code&gt;init.vim&lt;&#x2F;code&gt;. So we can migrate our config piece by piece and only change from &lt;code&gt;init.vim&lt;&#x2F;code&gt; to &lt;code&gt;init.lua&lt;&#x2F;code&gt; when we are ready.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s do the &quot;hello world&quot; to test that everything works as expected. Try this in your &lt;code&gt;init.vim&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;EOF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello from lua&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;EOF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After &quot;sourcing&quot; the file or restarting neovim the message &lt;code&gt;hello from lua&lt;&#x2F;code&gt; should appear right below your statusline. In here we are using something called &lt;code&gt;lua-heredoc&lt;&#x2F;code&gt;, so everything that&#x27;s between &lt;code&gt;&amp;lt;&amp;lt;EOF ... EOF&lt;&#x2F;code&gt; will be considered a lua script and will be executed by the &lt;code&gt;lua&lt;&#x2F;code&gt; command. This is useful when we want to execute multiple lines of code but it&#x27;s not necessary when we only need one. This is valid.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;this also works&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But if we are going to call lua code from vimscript I say we use a real script. In lua we can do this by using the &lt;code&gt;require&lt;&#x2F;code&gt; function. For this to work we need to create a &lt;code&gt;lua&lt;&#x2F;code&gt; folder somewhere in the &lt;code&gt;runtimepath&lt;&#x2F;code&gt; of neovim.&lt;&#x2F;p&gt;
&lt;p&gt;You&#x27;ll probably want to use the same folder where &lt;code&gt;init.vim&lt;&#x2F;code&gt; is located, so we will create &lt;code&gt;~&#x2F;.config&#x2F;nvim&#x2F;lua&lt;&#x2F;code&gt;, and inside that we&#x27;ll create a script called &lt;code&gt;basic.lua&lt;&#x2F;code&gt;. For now we will only print a message.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello from ~&#x2F;config&#x2F;nvim&#x2F;lua&#x2F;basic.lua&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now from our &lt;code&gt;init.vim&lt;&#x2F;code&gt; we can call it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;basic&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we do this neovim will search in every directory in the &lt;code&gt;runtimepath&lt;&#x2F;code&gt; for a folder called &lt;code&gt;lua&lt;&#x2F;code&gt; and inside that it&#x27;ll look for &lt;code&gt;basic.lua&lt;&#x2F;code&gt;. Neovim will run the last script that meets those conditions.&lt;&#x2F;p&gt;
&lt;p&gt;If you go around and check other people&#x27;s code you&#x27;ll notice that they use a &lt;code&gt;.&lt;&#x2F;code&gt; as a path separator. For example, let&#x27;s say they have the file &lt;code&gt;~&#x2F;.config&#x2F;nvim&#x2F;lua&#x2F;usermod&#x2F;settings.lua&lt;&#x2F;code&gt;. If they want to call &lt;code&gt;settings.lua&lt;&#x2F;code&gt; they do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;usermod.settings&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Is a very common convention. Just remember that the dot is a path separator.&lt;&#x2F;p&gt;
&lt;p&gt;With all this knowledge we are ready to begin our configuration using lua.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;editor-settings&quot;&gt;Editor settings&lt;&#x2F;h2&gt;
&lt;p&gt;Each option in neovim is available to us in the global variable called &lt;code&gt;vim&lt;&#x2F;code&gt;... well more than just a variable try think of this as a global module. With &lt;code&gt;vim&lt;&#x2F;code&gt; we have access to the editor&#x27;s settings, we also have the neovim api and even a set of helper functions (a standard library if you will). For now, we only need to care about something they call &quot;meta-accessors&quot;, is what we&#x27;ll use to access all the options we need.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;scopes&quot;&gt;Scopes&lt;&#x2F;h3&gt;
&lt;p&gt;Just like in vimscript, in lua we have different scopes for each option. We have global settings, window settings, buffer settings and a few others. Each one has its own namespace inside the &lt;code&gt;vim&lt;&#x2F;code&gt; module.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;vim.o&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Gets or sets general settings.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.o.background&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;light&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;vim.wo&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Gets or sets window-scoped options.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.wo.colorcolumn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;80&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;vim.bo&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Gets or sets buffer-scoped options.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.bo.filetype&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lua&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;vim.g&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Gets or sets global variables. This is usually the namespace where you&#x27;ll find variables set by plugins. The only one I know isn&#x27;t tied to a plugin is the leader key.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- use space as a the leader key&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g.mapleader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39; &amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You should know that some variable names in vimscript are not valid in lua. We still have access to them but we can&#x27;t use the dot notation. For example, &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;dhruvasagar&#x2F;vim-zoom&quot;&gt;vim-zoom&lt;&#x2F;a&gt; has a variable called &lt;code&gt;zoom#statustext&lt;&#x2F;code&gt; and in vimscript we use it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let g:zoom#statustext&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Z&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In lua we would have to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.g[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;zoom#statustext&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Z&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;As you might have guessed this also gives us an oportunity to access properties which have the name of keywords. You may find yourselves in a situation where you need to access a property called &lt;code&gt;for&lt;&#x2F;code&gt;, &lt;code&gt;do&lt;&#x2F;code&gt; or &lt;code&gt;end&lt;&#x2F;code&gt; which are reserved keywords, in those cases remember this bracket syntax.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;vim.env&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Gets or sets environment variables.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.env.FZF_DEFAULT_OPTS&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;--layout=reverse&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;As far as I know if you make a change in an environment variables the change will only apply in the active neovim session.&lt;&#x2F;p&gt;
&lt;p&gt;But now how do we know which &quot;scope&quot; we need to use when we&#x27;re writting our config? Don&#x27;t worry about that, think of &lt;code&gt;vim.o&lt;&#x2F;code&gt; and company just as a way to read values. When it&#x27;s time set values we can use another method.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;vim-opt&quot;&gt;vim.opt&lt;&#x2F;h3&gt;
&lt;p&gt;With &lt;code&gt;vim.opt&lt;&#x2F;code&gt; we can set global, window and buffer settings.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- buffer-scoped&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.autoindent&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- window-scoped&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.cursorline&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- global scope&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.autowrite&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we use it like this &lt;code&gt;vim.opt&lt;&#x2F;code&gt; acts like the &lt;code&gt;:set&lt;&#x2F;code&gt; command in vimscript, it give us a consistent way to modify neovim&#x27;s options.&lt;&#x2F;p&gt;
&lt;p&gt;A funny thing you can do is assign &lt;code&gt;vim.opt&lt;&#x2F;code&gt; to a variable called &lt;code&gt;set&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Say we have this piece of vimscript.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Set the behavior of tab&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; tabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; shiftwidth&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; softtabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; expandtab&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We could translate this easily in lua like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.opt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- Set the behavior of tab&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set.tabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set.shiftwidth&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set.softtabstop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set.expandtab&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;When you declare a variable do not forget the &lt;code&gt;local&lt;&#x2F;code&gt; keyword. In lua variables are global by default (that includes functions).&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Anyway, what about global variables or the environment variables? For those you should keep using &lt;code&gt;vim.g&lt;&#x2F;code&gt; and &lt;code&gt;vim.env&lt;&#x2F;code&gt; respectively&lt;&#x2F;p&gt;
&lt;p&gt;What&#x27;s interesting about &lt;code&gt;vim.opt&lt;&#x2F;code&gt; is that each property is a kind of special object, they are &quot;meta-tables&quot;. It means that these objects implement their own behavior for certain common operations.&lt;&#x2F;p&gt;
&lt;p&gt;In the first example we had something like this: &lt;code&gt;vim.opt.autoindent = true&lt;&#x2F;code&gt;, and now you might think you can inspect the current value by doing this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span&gt;(vim.opt.autoindent)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You won&#x27;t get the value you expect, &lt;code&gt;print&lt;&#x2F;code&gt; will tell you &lt;code&gt;vim.opt.autoindent&lt;&#x2F;code&gt; is a table. If you want to know the value of an option you&#x27;ll need to use the &lt;code&gt;:get()&lt;&#x2F;code&gt; method.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span&gt;(vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;autoindent&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get&lt;&#x2F;span&gt;&lt;span&gt;())&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you really, really want to know what&#x27;s inside &lt;code&gt;vim.out.autoindent&lt;&#x2F;code&gt; you need to use &lt;code&gt;vim.inspect&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;print&lt;&#x2F;span&gt;&lt;span&gt;(vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;inspect&lt;&#x2F;span&gt;&lt;span&gt;(vim.opt.autoindent))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or even better, if you have version v0.7 you can inspect the value using the command &lt;code&gt;lua =&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:lua &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt; vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;autoindent&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now that will show you the internal state of this property.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;types-of-data&quot;&gt;Types of data&lt;&#x2F;h3&gt;
&lt;p&gt;Even when we assign a value inside &lt;code&gt;vim.opt&lt;&#x2F;code&gt; there is a little bit of magic going on in the background. I think is important to know how &lt;code&gt;vim.opt&lt;&#x2F;code&gt; can handle different types of data and compare it with vimscript.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Booleans&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;These might not seem like a big deal but there is still a difference that is worth mention.&lt;&#x2F;p&gt;
&lt;p&gt;In vimscript we can enable or disable an option like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; cursorline&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; nocursorline&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is the equivalent in lua.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.cursorline&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.cursorline&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Lists&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;For some options neovim expects a comma separated list. In this case we could provide it as a string ourselves.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.wildignore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;*&#x2F;cache&#x2F;*,*&#x2F;tmp&#x2F;*&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or we could use a table.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.wildignore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;*&#x2F;cache&#x2F;*&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;*&#x2F;tmp&#x2F;*&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you check the content of &lt;code&gt;vim.o.wildignore&lt;&#x2F;code&gt; you&#x27;ll notice is the thing we want &lt;code&gt;*&#x2F;cache&#x2F;*,*&#x2F;tmp&#x2F;*&lt;&#x2F;code&gt;. If you really want to be sure you can check with this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; wildignore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;?&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You&#x27;ll get the same result.&lt;&#x2F;p&gt;
&lt;p&gt;But the magic does not end there. Sometimes we don&#x27;t need to override the list, sometimes we need to add an item or maybe delete it. To makes things easier &lt;code&gt;vim.opt&lt;&#x2F;code&gt; offers support for the following operations:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Add an item to the end of the list&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s take &lt;code&gt;errorformat&lt;&#x2F;code&gt; as an example. If we want to add to this list using vimscript we do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;+=&lt;&#x2F;span&gt;&lt;span&gt;%f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%l&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In lua we have a couple of ways to achieve the same goal:&lt;&#x2F;p&gt;
&lt;p&gt;Using the &lt;code&gt;+&lt;&#x2F;code&gt; operator.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.opt.errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%f|%l col %c|%m&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or the &lt;code&gt;:append&lt;&#x2F;code&gt; method.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;errorformat&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;append&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;%f|%l col %c|%m&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;strong&gt;Add to the beginning&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;In vimscript:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span&gt;^&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;%f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%l&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Lua:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.opt.errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ^&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%f|%l col %c|%m&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or try the equivalent&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;errorformat&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;prepend&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;%f|%l col %c|%m&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;strong&gt;Delete an item&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Vimscript:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;%f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%l&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Lua:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.opt.errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%f|%l col %c|%m&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- or the equivalent&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;errorformat&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;remove&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;%f|%l col %c|%m&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Pairs&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Some options expect a list of key-value pairs. To ilustrate this we&#x27;ll use &lt;code&gt;listchars&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; listchars&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;tab:▸&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;eol&lt;&#x2F;span&gt;&lt;span&gt;:↲&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt;trail:·&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In lua we can use tables for this too.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.opt.listchars&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; {eol&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;↲&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, tab&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;▸ &amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, trail&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;·&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: to actually see this on your screen you need to enable the &lt;code&gt;list&lt;&#x2F;code&gt; option. See &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;options.html#&amp;#x27;listchars&amp;#x27;&quot;&gt;:help listchars&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Since we are still using tables this option also supports the same operations mentioned in the previous section.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;calling-vim-functions&quot;&gt;Calling vim functions&lt;&#x2F;h2&gt;
&lt;p&gt;Vimscript like any other programming language it has its own built-in functions (&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;usr_41.html#function-list&quot;&gt;many functions&lt;&#x2F;a&gt;) and thanks to the &lt;code&gt;vim&lt;&#x2F;code&gt; module we can call them throught &lt;code&gt;vim.fn&lt;&#x2F;code&gt;. Just like &lt;code&gt;vim.opt&lt;&#x2F;code&gt;, &lt;code&gt;vim.fn&lt;&#x2F;code&gt; is a meta-table,  but this one is meant to provide a convenient syntax for us to call vim functions. We use it to call built-in functions, user defined functions and even functions of plugins that are not written in lua.&lt;&#x2F;p&gt;
&lt;p&gt;We could for example check the neovim version like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span&gt; vim.fn.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;nvim-0.7&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  print&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;we got neovim 0.7&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Wait, hold up, why are we comparing the result of &lt;code&gt;has&lt;&#x2F;code&gt; with a &lt;code&gt;1&lt;&#x2F;code&gt;? Ah, well, it turns out vimscript only included booleans in the &lt;code&gt;7.4.1154&lt;&#x2F;code&gt; version. So functions like &lt;code&gt;has&lt;&#x2F;code&gt; return &lt;code&gt;0&lt;&#x2F;code&gt; or &lt;code&gt;1&lt;&#x2F;code&gt;, and in lua both are truthy.&lt;&#x2F;p&gt;
&lt;p&gt;I&#x27;ve already mentioned that vimscript can have variable names that are not valid in lua, in that case you know you can use square brackets like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.fn[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fzf#vim#files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;](&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;~&#x2F;projects&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Another way we can solve this is by using &lt;code&gt;vim.call&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fzf#vim#files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;~&#x2F;projects&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Those two do the exact same thing. In practice &lt;code&gt;vim.fn.somefunction()&lt;&#x2F;code&gt; and &lt;code&gt;vim.call(&#x27;somefunction&#x27;)&lt;&#x2F;code&gt; have the same effect.&lt;&#x2F;p&gt;
&lt;p&gt;Now let me show you something cool. In this particular case the lua-vimscript integration is so good we can use a plugin manager without any special adapters.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;vim-plug-in-lua&quot;&gt;vim-plug in lua&lt;&#x2F;h3&gt;
&lt;p&gt;I know there is a lot of people out there who use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;junegunn&#x2F;vim-plug&#x2F;&quot;&gt;vim-plug&lt;&#x2F;a&gt;, you might think you need to migrate to a plugin manager that is written in lua, but that&#x27;s not the case. We can use &lt;code&gt;vim.fn&lt;&#x2F;code&gt; and &lt;code&gt;vim.call&lt;&#x2F;code&gt; to bring vim-plug to lua.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plug#&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plug#begin&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- List of plugins goes here&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;-- ....&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plug#end&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Those 3 lines of code are the only thing you need. You can try it, this works.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.fn[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plug#&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plug#begin&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;wellle&#x2F;targets.vim&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;tpope&#x2F;vim-surround&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;tpope&#x2F;vim-repeat&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;plug#end&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Before you say anything, yes, all of that is valid lua. If a function only receives a single argument, and that argument is a string or a table, you can omit the parenthesis.&lt;&#x2F;p&gt;
&lt;p&gt;If you use the second argument of &lt;code&gt;Plug&lt;&#x2F;code&gt; you&#x27;ll need the parenthesis and the second argument must be a table. Let me show you. If you have this in vimscript.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;scrooloose&#x2F;nerdtree&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;on&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;NERDTreeToggle&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In lua you&#x27;ll need to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;scrooloose&#x2F;nerdtree&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {on&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;NERDTreeToggle&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Unfortunately &lt;code&gt;vim-plug&lt;&#x2F;code&gt; has a couple of options that will cause an error if we use this syntax, those are &lt;code&gt;for&lt;&#x2F;code&gt; and &lt;code&gt;do&lt;&#x2F;code&gt;. In this case we need to wrap the key in quotes and square brackets.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;junegunn&#x2F;goyo.vim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;for&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;markdown&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You might know that the &lt;code&gt;do&lt;&#x2F;code&gt; option takes a string or a function which will be executed when the plugin is updated or installed. But what you might not know is that we are not forced to use a &quot;vim function&quot;, we can use lua function and it&#x27;ll work just fine.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;VonHeikemen&#x2F;rubber-themes.vim&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;do&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;] &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.opt.termguicolors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;colorscheme rubber&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There you have it. You don&#x27;t need to use a plugin manager written in lua if you don&#x27;t want to.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;vimscript-is-still-our-friend&quot;&gt;Vimscript is still our friend&lt;&#x2F;h2&gt;
&lt;p&gt;You might have notice in that last example I used &lt;code&gt;vim.cmd&lt;&#x2F;code&gt; to set the color scheme, this is because there are still things we can&#x27;t do with lua. And so what we do is use &lt;code&gt;vim.cmd&lt;&#x2F;code&gt; to call vimscript commands (or expressions) that don&#x27;t have a lua equivalent.&lt;&#x2F;p&gt;
&lt;p&gt;One interestings thing you should know is &lt;code&gt;vim.cmd&lt;&#x2F;code&gt; can execute multiple lines of vimscript. It means that we can do lots of things in a single call.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; [[&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  syntax enable&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  colorscheme rubber&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;]]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So anything that you can&#x27;t &quot;translate&quot; to lua you can put it in a string and pass that to &lt;code&gt;vim.cmd&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;I told you we can execute any vim command, right? I feel compelled to tell you this includes the &lt;code&gt;source&lt;&#x2F;code&gt; command. For those who don&#x27;t know, &lt;code&gt;source&lt;&#x2F;code&gt; allows us to call other files written in vimscript. For example, if you have lots of keybindings writing in vimscript but don&#x27;t wish to convert them to lua right now, you can create a script called &lt;code&gt;keymaps.vim&lt;&#x2F;code&gt; and call it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;source ~&#x2F;.config&#x2F;nvim&#x2F;keymaps.vim&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;keybindings&quot;&gt;Keybindings&lt;&#x2F;h2&gt;
&lt;p&gt;No, we don&#x27;t need vimscript for this. We can do it in lua.&lt;&#x2F;p&gt;
&lt;p&gt;We can create our keybindings using &lt;code&gt;vim.keymap.set&lt;&#x2F;code&gt;. This functions takes 4 arguments.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Mode. But not the name of the mode, we need the abbreviation. You can find a list of valid options &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nanotee&#x2F;nvim-lua-guide#defining-mappings&quot;&gt;here&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;Key we want to bind.&lt;&#x2F;li&gt;
&lt;li&gt;Action we want to execute.&lt;&#x2F;li&gt;
&lt;li&gt;Extra arguments. These are the same options we would use in vimscript, you can find the list &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;map.html#:map-arguments&quot;&gt;here&lt;&#x2F;a&gt;. Also, check the documentation &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua.html#vim.keymap.set()&quot;&gt;:help vim.keymap.set()&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;So if we wanted to translate this to lua.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;write&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We would have to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;Leader&amp;gt;w&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;:write&amp;lt;CR&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;By default our keybindings will be &quot;non recursive&quot;, it means that we don&#x27;t have to worry about infinite loops. This opens the possibility to create alternatives of built-in keybindings. For example, we could center the screen after making a search with &lt;code&gt;*&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;*&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;*zz&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search and center screen&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here we are using &lt;code&gt;*&lt;&#x2F;code&gt; in the key and the action, and we won&#x27;t have any conflict.&lt;&#x2F;p&gt;
&lt;p&gt;But sometimes we do need recursive bindings, most of the time when the action we want to execute was created by a plugin. In this case we can use &lt;code&gt;remap = true&lt;&#x2F;code&gt; in the last parameter.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;leader&amp;gt;e&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;%&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {remap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;, desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Go to matching pair&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now the best part, &lt;code&gt;vim.keymap.set&lt;&#x2F;code&gt; can use a lua function as the action.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.keymap.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;n&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Q&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  print&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Hello&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;, {desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Say hello&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s talk about the &lt;code&gt;desc&lt;&#x2F;code&gt; option. This allows us to add a description to our keybindings. We can read these description if we use the command &lt;code&gt;:map &amp;lt;keybinding&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;So executing &lt;code&gt;:map *&lt;&#x2F;code&gt; will show us.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;n  *           * *zz&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                 Search and center screen&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It becomes specially useful when using binding lua functions. If we inspect our &lt;code&gt;Q&lt;&#x2F;code&gt; mapping with &lt;code&gt;:map Q&lt;&#x2F;code&gt; we will get.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;n  Q           * &amp;lt;Lua function 50&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                 Say hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice we can&#x27;t see the source for our function but at least we see the description and know what it can do. It is worth mention that plugins can read this property and show it with a nice presentation.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;user-commands&quot;&gt;User commands&lt;&#x2F;h2&gt;
&lt;p&gt;Since version v0.7 we can create our own &quot;ex-commands&quot; using lua, with the function &lt;code&gt;vim.api.nvim_create_user_command&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;nvim_create_user_command&lt;&#x2F;code&gt; expects three arguments:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Name of the command. It &lt;strong&gt;must&lt;&#x2F;strong&gt; begin with an uppercase letter.&lt;&#x2F;li&gt;
&lt;li&gt;Command. Can be a string or a lua function.&lt;&#x2F;li&gt;
&lt;li&gt;Attributes. A lua table with the options for our command. You can find details in the documentation &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;api.html#nvim_create_user_command()&quot;&gt;:help nvim_create_user_command()&lt;&#x2F;a&gt; and also &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;map.html#command-attributes&quot;&gt;:help command-attributes&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Say we have this command in vimscript.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span&gt; -bang ProjectFiles call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fzf#vim#files&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;~&#x2F;projects&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;bang&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Using lua we have the possibility of using the vimscript command in a string.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;ProjectFiles&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;quot;call fzf#vim#files(&amp;#39;~&#x2F;projects&amp;#39;, &amp;lt;bang&amp;gt;0)&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {bang&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or, we could use a lua function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_user_command&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;ProjectFiles&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fzf#vim#files&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;~&#x2F;projects&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, input.bang)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {bang&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;, desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Search projects folder&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, we can also add a description to user commands. We read these descriptions using the command &lt;code&gt;:command &amp;lt;name&amp;gt;&lt;&#x2F;code&gt;. But they will only appear if our command is bound to a lua function. So the command &lt;code&gt;:command ProjectFiles&lt;&#x2F;code&gt; will show this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    Name              Args Address Complete    Definition&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;!   ProjectFiles      0                        Search projects folder&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If the command had been vimscript expression the that expression will appear in the &lt;code&gt;Definition&lt;&#x2F;code&gt; column.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;autocommands&quot;&gt;Autocommands&lt;&#x2F;h2&gt;
&lt;p&gt;With autocommands we execute functions and expressions on certain events. See &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;autocmd.html#events&quot;&gt;:help events&lt;&#x2F;a&gt; for a list of built-in events.&lt;&#x2F;p&gt;
&lt;p&gt;If we wanted to modify the &lt;code&gt;rubber&lt;&#x2F;code&gt; colorscheme a little bit we would do something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; highlight_cmds&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; ColorScheme&lt;&#x2F;span&gt;&lt;span&gt; rubber &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;highlight String&lt;&#x2F;span&gt;&lt;span&gt; guifg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=#&lt;&#x2F;span&gt;&lt;span&gt;FFEB95&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;This block should be executed before calling the &lt;code&gt;colorscheme&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;This would be the equivalent in lua.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local augroup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_augroup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;highlight_cmds&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {clear&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;ColorScheme&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;rubber&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; augroup,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;highlight String guifg=#FFEB95&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice here we are using an option called &lt;code&gt;command&lt;&#x2F;code&gt;, this can only execute vimscript. If we wanted to use a lua function we need to replace &lt;code&gt;command&lt;&#x2F;code&gt; with an option called &lt;code&gt;callback&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;lua&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;local augroup&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_augroup&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;highlight_cmds&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {clear&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_create_autocmd&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;ColorScheme&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;rubber&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  group&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; augroup,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  desc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Change string highlight&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    vim.api.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;nvim_set_hl&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;String&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, {fg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;#FFEB95&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;})&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Just like the previous apis we can add a description for autocommands. To inspect an autocommand use the command &lt;code&gt;:autocmd &amp;lt;event&amp;gt; &amp;lt;pattern&amp;gt;&lt;&#x2F;code&gt;. But just like user commands they will only be available for inspection when using a lua function. If we check with &lt;code&gt;:autocmd ColorScheme rubber&lt;&#x2F;code&gt; will get.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;ColorScheme&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    rubber    Change string highlight&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To know more details about autocommands checkout the documentation, see &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;api.html#nvim_create_autocmd()&quot;&gt;:help nvim_create_autocmd()&lt;&#x2F;a&gt; and &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;autocmd.html#autocommand&quot;&gt;:help autocmd&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;plugin-manager&quot;&gt;Plugin manager&lt;&#x2F;h2&gt;
&lt;p&gt;You might want a plugin manager that is written in lua, just because. It appears that right now these are your options:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;savq&#x2F;paq-nvim&#x2F;&quot;&gt;paq-nvim&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;A plugin manager that is simple and fast. I&#x27;m serious, this thing is around 500 lines of code. It was created to download, update and remove plugins. That&#x27;s it. If you don&#x27;t need anything else, look no further, this is the plugin manager you want.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;lazy.nvim&quot;&gt;lazy.nvim&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;It advertises automatic lazy-loading that allows fast startup times. It lets you manage your plugins with a very nice interface. You can also split your plugins into modules where you can specify dependencies, configurations, version and other things.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nvim-mini&#x2F;mini.deps&quot;&gt;mini.deps&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;This is a middle ground between &lt;code&gt;paq-nvim&lt;&#x2F;code&gt; and &lt;code&gt;lazy.nvim&lt;&#x2F;code&gt;. It has some useful features like the ability to rollback a plugin to a previous version, but it doesn&#x27;t offer advanced lazy loading options like &lt;code&gt;lazy.nvim&lt;&#x2F;code&gt; does.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Recap time. We learned how to use lua from vimscript. We now know how to use vimscript from lua. We have the tools to activate, deactivate and modify all sorts of options and variables in neovim. We got to know the methods we have available to create our keymaps. We learned about commands and autocommands. We figure out how to use plugin managers that aren&#x27;t written in lua, and saw a few alternatives that are written in lua. I say we are ready to use lua in neovim.&lt;&#x2F;p&gt;
&lt;p&gt;For those who want to see a real world usage or whatever, I&#x27;ll share some links&lt;&#x2F;p&gt;
&lt;p&gt;This is a &quot;starter template&quot; you can copy and use as your own config:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;nvim-light: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;nvim-light&quot;&gt;github link&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;learnxinyminutes.com&#x2F;docs&#x2F;lua&#x2F;&quot;&gt;learn x in y minutes: where X=lua&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;nanotee&#x2F;nvim-lua-guide&quot;&gt;nvim-lua-guide&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua.html#:lua-heredoc&quot;&gt;:help lua-heredoc&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua.html#lua-vim-variables&quot;&gt;:help lua-vim-variables&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;lua.html#lua-stdlib&quot;&gt;:help lua-stdlib&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;doc&#x2F;user&#x2F;usr_41.html#function-list&quot;&gt;:help function-list&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;curist&#x2F;dotvim&#x2F;blob&#x2F;98b161f0759d3316fcf6a776d03665d6ab4827ee&#x2F;bundles.lua&quot;&gt;curist&#x27;s bundle.lua&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>vim and the quickfix list: jump to a location, search and replace in multiple files, and other shenanigans</title>
        <published>2021-06-13T00:00:00+00:00</published>
        <updated>2021-06-13T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/vim-and-the-quickfix-list/"/>
        <id>https://vonheikemen.github.io/devlog/tools/vim-and-the-quickfix-list/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/vim-and-the-quickfix-list/">&lt;p&gt;We are going to learn about an avanced feature of vim, the quickfix list. We&#x27;re going to figure out how to use it to search (and replace) a pattern in multiple files, and also how can we jump to the location of an error thrown by an external command.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;quickfix-list&quot;&gt;Quickfix list&lt;&#x2F;h2&gt;
&lt;p&gt;Is a special mode where vim show us a list of positions, meaning line and column numbers in a file. This list was made to save the position of the errors we see in the error message of a compiler. This way we could jump quickly to this location, fix the bug and then go to the next or try to compile the code again.&lt;&#x2F;p&gt;
&lt;p&gt;My description can make it sound like a feature with a very minimal scope, but fear not, there is more to it than that. For starters the quickfix list can be created in different ways. We can create it with commands like &lt;code&gt;:make&lt;&#x2F;code&gt;, &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; and &lt;code&gt;:grep&lt;&#x2F;code&gt;. And can also be created programatically with the help of the &lt;code&gt;setqflist&lt;&#x2F;code&gt; function, so we do have a great deal of flexibility.&lt;&#x2F;p&gt;
&lt;p&gt;I feel the need to tell you that when I say quickfix list I literally mean the list of positions. There are two ways we can see this list, we have the &lt;code&gt;quickfix window&lt;&#x2F;code&gt; and the &lt;code&gt;location list&lt;&#x2F;code&gt;. Both of these are &quot;windows&quot; in which the quickfix list is shown. The quickfix window is global, we can only have one in the current active vim session. Meanwhile, we can have many location lists in the current active vim session&lt;&#x2F;p&gt;
&lt;h2 id=&quot;jump-to-a-location&quot;&gt;Jump to a location&lt;&#x2F;h2&gt;
&lt;p&gt;So, our journey throught the wonderful quickfix list begins with the &lt;code&gt;:make&lt;&#x2F;code&gt; command, this is one of vim&#x27;s native way of calling a compiler. But does the name &lt;code&gt;make&lt;&#x2F;code&gt; sound familiar to you? If so, I can assure you it is not a coincidence. vim does assume we have &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.gnu.org&#x2F;software&#x2F;make&#x2F;&quot;&gt;make&lt;&#x2F;a&gt; installed on our system. How can you be sure? Well, let&#x27;s make a test. Create a file called &lt;code&gt;Makefile&lt;&#x2F;code&gt; with the following content:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;make&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;.PHONY&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; test another&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;test&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  @echo &amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  @echo &amp;#39;another&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;In this post I will not tell you how to use &lt;code&gt;make&lt;&#x2F;code&gt; but if you want to know how you can use it like a regular task runner you can &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vinta.ws&#x2F;code&#x2F;use-makefile-as-the-task-runner-for-arbitrary-projects.html&quot;&gt;read this one&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;When you call the &lt;code&gt;:make&lt;&#x2F;code&gt; command you should get something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(1 de 1): hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;make&lt;&#x2F;code&gt;&#x27;s default behaviour is to execute the first &quot;task&quot; it sees in our &lt;code&gt;Makefile&lt;&#x2F;code&gt;. Cool, but then how do we get it to execute &lt;code&gt;another&lt;&#x2F;code&gt;? We just provide more arguments to our command, like this: &lt;code&gt;:make [argument]&lt;&#x2F;code&gt;. If you try to execute &lt;code&gt;:make another&lt;&#x2F;code&gt; you should get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;another&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(1 de 1): another&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s fine, but those commands don&#x27;t output any error. After showing the messages nothing happens.&lt;&#x2F;p&gt;
&lt;p&gt;This is the perfect time for our first contrived example. Since vim knows how to &quot;read&quot; the errors &lt;code&gt;gcc&lt;&#x2F;code&gt; gives let me show you an example using C.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;an-example-in-c&quot;&gt;An example in C&lt;&#x2F;h3&gt;
&lt;p&gt;So let&#x27;s create a file &lt;code&gt;hello.c&lt;&#x2F;code&gt; with this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;c&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;#&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;include&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;lt;stdio.h&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;int&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; main&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;   printf&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;Hello, World!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7FB4CA;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;   return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice that there is nothing wrong here. We can compile this thing easily using &lt;code&gt;make&lt;&#x2F;code&gt;. So our next step will be to create a &lt;code&gt;Makefile&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;make&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;.PHONY&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; run-hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;run-hello&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  gcc -Wall -o hello hello.c&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  .&#x2F;hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  rm .&#x2F;hello &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With everything in place, we can run &lt;code&gt;:make --silent run-hello&lt;&#x2F;code&gt;. If we did everything right we should have our &lt;code&gt;hello world&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Hello, World!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(1 de 1): Hello, World!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we introduce an error, like say delete a semicolon, this is what we should get.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hello.c: In function ‘main’:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hello.c:4:28: error: expected ‘;’ before ‘return’&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    printf(&amp;quot;Hello, World!\n&amp;quot;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                            ^&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;                            ;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return 0;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    ~~~~~~&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;make: *** [Makefile:7: run-hello] Error 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(2 de 8): error: expected ‘;’ before ‘return’&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After showing this message you&#x27;ll notice that vim took you to the location of the error (how cool is that?). If you want to check the content of the quickfix list you&#x27;ll need to open the quickfix window using the &lt;code&gt;:copen&lt;&#x2F;code&gt; command. You should have something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;|| hello.c: In function ‘main’:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hello.c|4 col 28| error: expected ‘;’ before ‘return’                  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     printf(&amp;quot;Hello, World!\n&amp;quot;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||                             ^&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||                             ;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     return 0;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     ~~~~~~&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;make: *** [Makefile|7| run-hello] Error 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;To close the quickfix window we use the &lt;code&gt;:cclose&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now pay attention to this line.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hello.c|4 col 28| error: expected ‘;’ before ‘return’&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here vim is telling us where is the error, it&#x27;s showing the file name, the line and the column. Right now what we should do is fix the bug and try to compile again. For the most part this is the workflow that we want. But if you do have more than one item in the quickfix list you could navigate between them using the commands &lt;code&gt;:cnext&lt;&#x2F;code&gt; and &lt;code&gt;:cprev&lt;&#x2F;code&gt;, to go forward and backwards in the quickfix list.&lt;&#x2F;p&gt;
&lt;p&gt;This is nice and all but what happens if we don&#x27;t use &lt;code&gt;gcc&lt;&#x2F;code&gt;? What if we use &lt;code&gt;nodejs&lt;&#x2F;code&gt;? Could vim handle it? Yes, with some help.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;errorformat&quot;&gt;errorformat&lt;&#x2F;h3&gt;
&lt;p&gt;If you start using other compilers or interpreters you&#x27;ll notice that vim can&#x27;t read properly all the error messages they give you. To overcome this vim offers an option called &lt;code&gt;errorformat&lt;&#x2F;code&gt;, a variable that can store the &quot;shape&quot; of an error message, this way vim can recognize it when they appear in the quickfix list.&lt;&#x2F;p&gt;
&lt;p&gt;To test this thing let&#x27;s try make vim read the errors &lt;code&gt;node&lt;&#x2F;code&gt; shows us. Start by creating a file called &lt;code&gt;greeting.js&lt;&#x2F;code&gt; and make a simple &quot;hello world&quot; that has an error.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;greeting&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; greeting&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Hello, World!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now in our &lt;code&gt;Makefile&lt;&#x2F;code&gt; let&#x27;s add another task.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;make&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;run-greeting&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  node .&#x2F;greeting.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we try to run &lt;code&gt;:make --silent run-greeting&lt;&#x2F;code&gt; we&#x27;ll get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;console.log(greeting);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;            ^&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;ReferenceError: Cannot access &amp;#39;greeting&amp;#39; before initialization&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    at Object.&amp;lt;anonymous&amp;gt; (&#x2F;tmp&#x2F;test&#x2F;greeting.js:1:13)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    at Module._compile (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:1063:30)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    at Object.Module._extensions..js (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:1092:10)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    at Module.load (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:928:32)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    at Function.Module._load (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:769:14)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    at Function.executeUserEntryPoint [as runMain] (internal&#x2F;modules&#x2F;run_main.js:72:12)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    at internal&#x2F;main&#x2F;run_main_module.js:17:47&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;make: *** [Makefile:4: run-greeting] Error 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;vim will try to take us to the location of the error but it is not likely to succeed. In my case, it tried to take me to a file it doesn&#x27;t exists.&lt;&#x2F;p&gt;
&lt;p&gt;To fix this we need to tell vim how to read these messages. I&#x27;m going to show one way of doing it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;%E%.%&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;#&lt;&#x2F;span&gt;&lt;span&gt;ReferenceError:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %m&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt;%Z%.%&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;#&lt;&#x2F;span&gt;&lt;span&gt;%at&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; Object.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;anonymous&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;%f:%l:%c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here we specify the &quot;shape&quot; of each line in the error message or at least the ones we care about. Each line has its own format and must be separated by a coma. That means...&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;%E%.%#ReferenceError:\ %m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;%Z%.%#%at\ Object.&amp;lt;anonymous&amp;gt;\ (%f:%l:%c)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Are two expressions that tell vim how to read the error message. We are telling vim where it can find the type of the error (&lt;code&gt;ReferenceError&lt;&#x2F;code&gt;) and where is the location data of the error. In our example those two things are in separate lines so we must have these expressions separated by a coma.&lt;&#x2F;p&gt;
&lt;p&gt;If we want to improve readability we could also try to write it this way.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;%E%.%&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;#&lt;&#x2F;span&gt;&lt;span&gt;ReferenceError:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;+=&lt;&#x2F;span&gt;&lt;span&gt;%Z%.%&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;#&lt;&#x2F;span&gt;&lt;span&gt;%at&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; Object.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;anonymous&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;%f:%l:%c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we do it this way we don&#x27;t need to put the coma at the end. But we still need a &lt;code&gt;\&lt;&#x2F;code&gt; before each special character (like a blank space) so there is no conflict between vim&#x27;s syntax and the error format. If you find that annoying you could try another way.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; &amp;amp;errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%E%.%#ReferenceError: %m,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; .&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%Z%.%#at Object.&amp;lt;anonymous&amp;gt; (%f:%l:%c)&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we use &lt;code&gt;let&lt;&#x2F;code&gt; we have the oportunity to use strings to write our formats,
avoiding any sort of conflict between vim&#x27;s syntax and the &lt;code&gt;errorformat&lt;&#x2F;code&gt;. To further improve readability I have every expression in its own line, taking advantage of the &lt;code&gt;.&lt;&#x2F;code&gt; operator to concat these strings.&lt;&#x2F;p&gt;
&lt;p&gt;Now if we try to run &lt;code&gt;:make --silent run-greeting&lt;&#x2F;code&gt; vim will take us to the right place, which is where &lt;code&gt;node&lt;&#x2F;code&gt; says the error is. The quickfix should show us this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;|| &#x2F;tmp&#x2F;test&#x2F;greeting.js:1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;|| console.log(greeting);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||             ^&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;|| &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;greeting.js|1 col 13 error| Cannot access &amp;#39;greeting&amp;#39; before initialization&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     at Module._compile (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:1063:30)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     at Object.Module._extensions..js (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:1092:10)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     at Module.load (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:928:32)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     at Function.Module._load (internal&#x2F;modules&#x2F;cjs&#x2F;loader.js:769:14)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     at Function.executeUserEntryPoint [as runMain] (internal&#x2F;modules&#x2F;run_main.js:72:12)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;||     at internal&#x2F;main&#x2F;run_main_module.js:17:47&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;|| make: *** [Makefile:4: run-greeting] Error 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now the &lt;code&gt;ReferenceError&lt;&#x2F;code&gt; is no longer on the quickfix list, neither the line that was below. Those has been replaced with this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;greeting.js|1 col 13 error| Cannot access &amp;#39;greeting&amp;#39; before initialization&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If vim shows that, it means the &lt;code&gt;errorformat&lt;&#x2F;code&gt; worked.&lt;&#x2F;p&gt;
&lt;p&gt;We have a bit of an issue, those two expressions will only work with a &lt;code&gt;ReferenceError&lt;&#x2F;code&gt; type. You probably need more than that in your day to day workflow. We should really have something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; &amp;amp;errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%E%.%#AssertionError %m,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; .&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%E%.%#TypeError: %m,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; .&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%E%.%#ReferenceError: %m,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; .&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%E%.%#SyntaxError: %m,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; .&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%E%.%#RangeError: %m,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; .&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%Z%.%#at Object.&amp;lt;anonymous&amp;gt; (%f:%l:%c),&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; .&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  \&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;%-G%.%#&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h4 id=&quot;special-tokens&quot;&gt;Special tokens&lt;&#x2F;h4&gt;
&lt;p&gt;That&#x27;s a lot weird stuff, stuff you might want to know about. Let&#x27;s dive a little bit into the syntax I use in that last example.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%f&lt;&#x2F;code&gt;: Is the filepath where the error was found.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%l&lt;&#x2F;code&gt;: Is the line number where the error was found.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%c&lt;&#x2F;code&gt;: Is the column number where the error was found.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%m&lt;&#x2F;code&gt;: Is the error message. In our example we use it to capture the text that&#x27;s right after the type of the error.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%E&lt;&#x2F;code&gt;: Tells vim this is the beginning of a multi-line error message. The letter &lt;code&gt;E&lt;&#x2F;code&gt; means this is an error. There other types of messages like warnings (&lt;code&gt;%W&lt;&#x2F;code&gt;), informative (&lt;code&gt;%I&lt;&#x2F;code&gt;) or general purpose (&lt;code&gt;%G&lt;&#x2F;code&gt;).&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%Z&lt;&#x2F;code&gt;: Means is the end of the message. Specifically, that is the last line of the message.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%.%#&lt;&#x2F;code&gt;: This one is a wildcard, one that matches everything. So, you could read &lt;code&gt;%Z%.%#at Object.&amp;lt;anonymous&amp;gt; (%f:%l:%c)&lt;&#x2F;code&gt; like this: The last line of this message (&lt;code&gt;%Z&lt;&#x2F;code&gt;) can start with anything (&lt;code&gt;%.%#&lt;&#x2F;code&gt;) followed by &lt;code&gt;at Object.&amp;lt;anonymous&amp;gt;&lt;&#x2F;code&gt; and in parenthesis you&#x27;ll find the filepath (&lt;code&gt;%f&lt;&#x2F;code&gt;), the line number (&lt;code&gt;%l&lt;&#x2F;code&gt;) and the column (&lt;code&gt;%c&lt;&#x2F;code&gt;) where the error was found.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%-&lt;&#x2F;code&gt;: Tells vim it should exclude this piece from the quickfix window. &lt;code&gt;%-G&lt;&#x2F;code&gt; could be read like &quot;don&#x27;t include this message.&quot; In our example we use &lt;code&gt;%-G%.%#&lt;&#x2F;code&gt; which means &quot;ignore everything else.&quot; Now, since &lt;code&gt;%.%#&lt;&#x2F;code&gt; matches everything, we put this expression last.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;If you want to know more about the special tokens the &lt;code&gt;errorformat&lt;&#x2F;code&gt; can have run the command &lt;code&gt;:help errorformat&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;makeprg&quot;&gt;makeprg&lt;&#x2F;h3&gt;
&lt;p&gt;By now you know you can make vim read any type of error but the current configuration is still tied to &lt;code&gt;make&lt;&#x2F;code&gt;. It doesn&#x27;t have to be like that. We can change the command vim calls when we run &lt;code&gt;:make&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s say we want to use &lt;code&gt;node&lt;&#x2F;code&gt;, just &lt;code&gt;node&lt;&#x2F;code&gt;, to achieve this we need to change the option &lt;code&gt;makeprg&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; makeprg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;node&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or we can do.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; &amp;amp;makeprg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;node&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now instead of using &lt;code&gt;:make --silet run-greeting&lt;&#x2F;code&gt; we can run &lt;code&gt;:make .&#x2F;greeting.js&lt;&#x2F;code&gt; or &lt;code&gt;:make %&lt;&#x2F;code&gt; if we are already editing &lt;code&gt;greeting.js&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;search&quot;&gt;Search&lt;&#x2F;h2&gt;
&lt;p&gt;Jumping to an error is not the only feature of the quickfix list, we can also use it to explore the code we are working on. For this vim has commands like &lt;code&gt;:grep&lt;&#x2F;code&gt; and &lt;code&gt;:vimgrep&lt;&#x2F;code&gt;, they create a quickfix list with the results of a search.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;vimgrep&quot;&gt;vimgrep&lt;&#x2F;h3&gt;
&lt;p&gt;With this command we can take advantage of the built-in search engine that
comes with vim. It is very much like the good old &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;linux.die.net&#x2F;man&#x2F;1&#x2F;grep&quot;&gt;grep&lt;&#x2F;a&gt;, but the &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; command uses vim&#x27;s regex engine. Basically &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; is what we&#x27;ll use when we want to search a pattern (a regular expression) in multiple files. This is how you use it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:vimgrep &lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;&amp;lt;pattern&amp;gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt;files&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;&#x2F;&lt;&#x2F;code&gt; in the pattern are not mandatory, but they are useful when your pattern has characters that cause a conflict with vim&#x27;s syntax. Like in this example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:vimgrep &lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;create table&#x2F;&lt;&#x2F;span&gt;&lt;span&gt; db&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;**&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;*.sql&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here we are searching the pattern &lt;code&gt;create table&lt;&#x2F;code&gt; in a folder called &lt;code&gt;db&lt;&#x2F;code&gt;. And we are searching only in the files that end with &lt;code&gt;.sql&lt;&#x2F;code&gt; extension&lt;&#x2F;p&gt;
&lt;p&gt;These delimeters we use in the search pattern don&#x27;t have to be &lt;code&gt;&#x2F;&lt;&#x2F;code&gt;. They could be anything that vim doesn&#x27;t consider to be an &quot;identifier&quot;. Find out more about identifiers in the documentation, using the command &lt;code&gt;:help isident&lt;&#x2F;code&gt;. This is specially useful when our search pattern already has a &lt;code&gt;&#x2F;&lt;&#x2F;code&gt;. Imagine we are searching for a path in our code, we could write our search like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:vimgrep #&#x2F;home&#x2F;user&#x2F;code# scripts&#x2F;*.sh&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But what happens when we want to ignore a whole directory in our search? There are several solutions. For starters we could set the option &lt;code&gt;wildignore&lt;&#x2F;code&gt;. Say we want to ignore a &lt;code&gt;cache&lt;&#x2F;code&gt; and &lt;code&gt;tmp&lt;&#x2F;code&gt; directories, we could set &lt;code&gt;wildignore&lt;&#x2F;code&gt; to something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; wildignore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;*&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;cache&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;*&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt;*&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;tmp&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;*&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;As far as I can tell &lt;code&gt;wildignore&lt;&#x2F;code&gt; tells vim the paths that should be excluded when doing a path expansion. For example, if we use this pattern &lt;code&gt;**&#x2F;*.js&lt;&#x2F;code&gt; vim will exclude any directory that has &lt;code&gt;&#x2F;cache&#x2F;&lt;&#x2F;code&gt; or &lt;code&gt;&#x2F;tmp&#x2F;&lt;&#x2F;code&gt; anywhere in its path. So &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; will not search these directories because it will never receive them as arguments. This means &lt;code&gt;wildignore&lt;&#x2F;code&gt; can affect other commands, and not just &lt;code&gt;:vimgrep&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Some &lt;em&gt;stackoverflow&lt;&#x2F;em&gt; questions suggest this method may not work all the time. In that case we can try to create the argument list with a backtick expression, these will let you call an external command with your shell. We could for example search only on files tracked by git, like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:vimgrep &lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;function&#x2F;&lt;&#x2F;span&gt;&lt;span&gt; `git &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;ls&lt;&#x2F;span&gt;&lt;span&gt;-files`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In this case &lt;code&gt;git ls-files&lt;&#x2F;code&gt; will give us a list file path which will then be processed by &lt;code&gt;:vimgrep&lt;&#x2F;code&gt;. Isn&#x27;t that cool? The best part is that as long as &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; gets a valid a file list everything will work as expected.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;grep&quot;&gt;grep&lt;&#x2F;h3&gt;
&lt;p&gt;And then there is the &lt;code&gt;:grep&lt;&#x2F;code&gt; command. This is vim&#x27;s way of integrating with the search utility &lt;code&gt;grep&lt;&#x2F;code&gt;. This command works almost like &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; but this time we need to use a &quot;syntax&quot; that is compatible with &lt;code&gt;grep&lt;&#x2F;code&gt;. Take this example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:grep -r &lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;create table&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt; db&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;**&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;*.sql&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice I&#x27;m not using &lt;code&gt;&#x2F;&lt;&#x2F;code&gt; as delimeters, also I&#x27;m adding the &lt;code&gt;-r&lt;&#x2F;code&gt; flag (to enable a recursive search), this is because vim calls &lt;code&gt;grep&lt;&#x2F;code&gt; in a non-interactive shell and gives all the arguments to &lt;code&gt;grep&lt;&#x2F;code&gt; as is.&lt;&#x2F;p&gt;
&lt;p&gt;But now the question is &quot;when should we use &lt;code&gt;:grep&lt;&#x2F;code&gt; instead of &lt;code&gt;:vimgrep&lt;&#x2F;code&gt;?&quot; Turns out &lt;code&gt;:grep&lt;&#x2F;code&gt; is much faster and efficient than &lt;code&gt;:vimgrep&lt;&#x2F;code&gt;. So, &lt;code&gt;:grep&lt;&#x2F;code&gt; would be the better choice if your search involves lots of files.&lt;&#x2F;p&gt;
&lt;p&gt;Okay, that&#x27;s fine. What about the opposite? What advantage &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; has over &lt;code&gt;:grep&lt;&#x2F;code&gt;? Not much I&#x27;d say. If you&#x27;re more familiar with vim&#x27;s regular expressions maybe that would be a reason to choose &lt;code&gt;:vimgrep&lt;&#x2F;code&gt;. &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; also works fine on all platforms, since it&#x27;s all done inside vim.&lt;&#x2F;p&gt;
&lt;p&gt;Cross-platform support. That&#x27;s a problem with &lt;code&gt;:grep&lt;&#x2F;code&gt;, how does vim solve it? Well, in the same way &lt;code&gt;:make&lt;&#x2F;code&gt; does. We can configure the external command vim calls with the variable &lt;code&gt;grepprg&lt;&#x2F;code&gt;. Say that instead of using &lt;code&gt;grep&lt;&#x2F;code&gt; we want to use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;BurntSushi&#x2F;ripgrep&quot;&gt;ripgrep&lt;&#x2F;a&gt;, in order to do that we add this to our config.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; grepprg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;rg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; --vimgrep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; --smart-case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; --follow&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With that in place vim will use &lt;code&gt;rg&lt;&#x2F;code&gt; with all those arguments included when we invoke &lt;code&gt;:grep&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;special-guess-fzf&quot;&gt;Special guess: FZF&lt;&#x2F;h3&gt;
&lt;p&gt;The last external search tool I&#x27;ll mention is &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;junegunn&#x2F;fzf.vim&quot;&gt;fzf.vim&lt;&#x2F;a&gt;. This is a plugin that provides an interface where we can execute an interactive search. I won&#x27;t get into any details here. Just going to tell you something I found out long after I started using it.&lt;&#x2F;p&gt;
&lt;p&gt;Turns out we can populate the quickfix list using FZF, specifically with the results of commands like &lt;code&gt;:Rg&lt;&#x2F;code&gt; or &lt;code&gt;:Ag&lt;&#x2F;code&gt;. After doing a search you&#x27;ll have all the matches inside a list ready to be filtered, it&#x27;s here when you can select an item using &lt;code&gt;tab&lt;&#x2F;code&gt; or select all using &lt;code&gt;Alt + a&lt;&#x2F;code&gt;, then press &lt;code&gt;enter&lt;&#x2F;code&gt;. After this the quickfix list will have every item you selected. This little feature is very useful when you want to execute a certain command only on specific parts of your code using &lt;code&gt;:cdo&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;replace&quot;&gt;Replace&lt;&#x2F;h2&gt;
&lt;p&gt;Speaking of &lt;code&gt;:cdo&lt;&#x2F;code&gt;, let me show you one cool thing we can do with it: search and replace in multiple files. If you ever wondered how to do this in vim, the answer is the quickfix list and the &lt;code&gt;:cdo&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;p&gt;In a simple case where all we want to do is replace a known pattern this is what we do:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Step 1:&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Use our favorite search command &lt;code&gt;:grep&lt;&#x2F;code&gt;, &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; or anything that can populate the quickfix list.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Step 2 (optional):&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Open the quickfix window using &lt;code&gt;:copen&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Step 3:&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Use &lt;code&gt;:cdo&lt;&#x2F;code&gt; to execute a command on every item in the quickfix list. In our case what we want to do is replace the pattern, which we can do using this syntax &lt;code&gt;s&#x2F;{pattern}&#x2F;{replacement}&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Say that our quickfix list is filled with the results of this search.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:vimgrep node **&#x2F;*.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Once that is done we can replace the word &lt;code&gt;node&lt;&#x2F;code&gt; with &lt;code&gt;deno&lt;&#x2F;code&gt; using this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:cdo s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;node&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;deno&#x2F; | update&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With it vim will run the command &lt;code&gt;s&#x2F;node&#x2F;deno | update&lt;&#x2F;code&gt; on every item in the quickfix list. We take advantage of the fact &lt;code&gt;:cdo&lt;&#x2F;code&gt; can execute any valid vim command and actually do two things, we replace the pattern &lt;code&gt;node&lt;&#x2F;code&gt; and save the changes to the file.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;a-more-advanced-use-case&quot;&gt;A more advanced use case&lt;&#x2F;h3&gt;
&lt;p&gt;Now let&#x27;s take it one step further, suppose we want to replace some pattern but before doing anything we want filter the results so we only change some parts of our code. Basically we don&#x27;t want to replace all the matches of a search. How do we do it? One way would be changing the quickfix list so it only has the items we want to replace.&lt;&#x2F;p&gt;
&lt;p&gt;This process will take a bit of effort. First, we need to tell vim how to read its own quickfix list, so we can create modified versions of other quickfix lists. To achieve our goal we need to add a pattern to the &lt;code&gt;errorformat&lt;&#x2F;code&gt; option. So in your &lt;code&gt;.vimrc&lt;&#x2F;code&gt; you should have something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;+=&lt;&#x2F;span&gt;&lt;span&gt;%f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%l&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We are one step closer but it&#x27;s still not enough, vim will not let us change the quickfix list. For this we need to be able to write to the buffer where the quickfix list is. We need to run this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; modifiable&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Once we do that we can delete the items we want, but we can&#x27;t run &lt;code&gt;:cdo&lt;&#x2F;code&gt; just yet. We need to save the changes we&#x27;ve made with this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:cgetbuffer&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Next, just to be on the safe side, make sure you&#x27;re going to perform the actions on the correct version of the quickfix list. Run, &lt;code&gt;:cclose&lt;&#x2F;code&gt; and &lt;code&gt;:copen&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Finally you can execute the substitute command.&lt;&#x2F;p&gt;
&lt;p&gt;Here is a demo of the whole process.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;385145.js&quot;
    id=&quot;asciicast-385145&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;385145&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;h2 id=&quot;improving-the-experience&quot;&gt;Improving the experience&lt;&#x2F;h2&gt;
&lt;p&gt;As you might have noticed the quickfix list is not the most intuitive thing in the world. But we can make it better. I can give you a few suggestions you can add to your &lt;code&gt;.vimrc&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;A better grep.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;First thing you might want to do is make vim open the quickfix window after doing a search. Lucky for us the official documentation offers something we can use:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span&gt; -nargs=+ Grep &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;execute&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;silent grep! &amp;lt;args&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt; | copen&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I think in this case you could change &lt;code&gt;grep&lt;&#x2F;code&gt; with &lt;code&gt;vimgrep&lt;&#x2F;code&gt; if you wanted to. The important thing is, with this now you could use &lt;code&gt;:Grep&lt;&#x2F;code&gt; (with capital &lt;code&gt;G&lt;&#x2F;code&gt;) to make your search.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Navigating throught the results.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We could &quot;navigate&quot; throught every item in the quickfix list without even opening the quickfix window with this shortcuts.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Go to the previous location&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span&gt; [q :cprev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Go to the next location&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span&gt; ]q :cnext&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Manage your window.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;If your going to use the quickfix window you better have some keybindings to show and hide it easily.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Show the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;co&lt;&#x2F;span&gt;&lt;span&gt; :copen&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Hide the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;cc&lt;&#x2F;span&gt;&lt;span&gt; :cclose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;The errorformat.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Let&#x27;s make sure vim can always read the format on the quickfix list when we want to update it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; quickfix_group&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; filetype&lt;&#x2F;span&gt;&lt;span&gt; qf setlocal&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;+=&lt;&#x2F;span&gt;&lt;span&gt;%f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%l&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Keybindings&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We&#x27;ll also need some keybindings that only work on the quickfix window. You know, so the &quot;advance use case&quot; won&#x27;t be so tedious.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; QuickfixMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Go to the previous location and stay in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; K :cprev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Go to the next location and stay in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; J :cnext&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Make the quickfix list modifiable&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;u :set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; modifiable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Save the changes in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w :cgetbuffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:cclose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:copen&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Begin the search and replace&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;r :cdo s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&#x2F; &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;| update&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-L&lt;&#x2F;span&gt;&lt;span&gt;eft&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-L&lt;&#x2F;span&gt;&lt;span&gt;eft&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; quickfix_group&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; filetype&lt;&#x2F;span&gt;&lt;span&gt; qf call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; QuickfixMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Now everything put together.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; :Grep - search and then open the window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span&gt; -nargs=+ Grep &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;execute&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;silent grep! &amp;lt;args&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt; | copen&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Go to the previous location&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span&gt; [q :cprev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Go to the next location&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span&gt; ]q :cnext&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Show the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;co&lt;&#x2F;span&gt;&lt;span&gt; :copen&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Hide the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;cc&lt;&#x2F;span&gt;&lt;span&gt; :cclose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; QuickfixMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Go to the previous location and stay in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; K :cprev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Go to the next location and stay in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; J :cnext&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Make the quickfix list modifiable&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;u :set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; modifiable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Save the changes in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w :cgetbuffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:cclose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:copen&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Begin the search and replace&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;r :cdo s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&#x2F; &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;| update&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-L&lt;&#x2F;span&gt;&lt;span&gt;eft&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-L&lt;&#x2F;span&gt;&lt;span&gt;eft&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; quickfix_group&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Use custom keybindings&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; filetype&lt;&#x2F;span&gt;&lt;span&gt; qf call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; QuickfixMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Add the errorformat to be able to update the quickfix list&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; filetype&lt;&#x2F;span&gt;&lt;span&gt; qf setlocal&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; errorformat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;+=&lt;&#x2F;span&gt;&lt;span&gt;%f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%l&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; col&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt; %c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;\&lt;&#x2F;span&gt;&lt;span&gt;|%m&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;plugins&quot;&gt;Plugins&lt;&#x2F;h3&gt;
&lt;p&gt;If you know how and you&#x27;re willing to install some plugins I&#x27;d recommend these:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;romainl&#x2F;vim-qf&quot;&gt;vim-qf&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;This one sets some sane defaults to the behaviour of the quickfix window. For example, it can open the quickfix window after calling &lt;code&gt;:grep&lt;&#x2F;code&gt;, &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; and even &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; without having to create new commands. Things don&#x27;t end there, it also offers some functions we can bind.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Toggle the quickfix window.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;cc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;(&lt;&#x2F;span&gt;&lt;span&gt;qf_qf_toggle&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Navigating throught results&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Go to previous location&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span&gt; [q &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;(&lt;&#x2F;span&gt;&lt;span&gt;qf_qf_previous&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Go to next location&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span&gt; ]q &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;(&lt;&#x2F;span&gt;&lt;span&gt;qf_qf_next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; QuickfixMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Go to the previous location and stay in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; K &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;(&lt;&#x2F;span&gt;&lt;span&gt;qf_qf_previous&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &amp;quot; Go to the next location and stay in the quickfix window&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; J &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Plug&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;(&lt;&#x2F;span&gt;&lt;span&gt;qf_qf_next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt;zz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;w&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; quickfix_group&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; filetype&lt;&#x2F;span&gt;&lt;span&gt; qf call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; QuickfixMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The difference between these command and the built-in vim commands is, the plugin commands will not throw an error when we reach the end of the list. Meaning that if we are on last location of the list pressing &lt;code&gt;]q&lt;&#x2F;code&gt; will take us to the first item in the quickfix list.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;stefandtw&#x2F;quickfix-reflector.vim&quot;&gt;quickfix-reflector&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;This plugin makes everything I told you in the &quot;advanced use case&quot; section be useless. Once is installed the buffer in the quickfix window acts like a normal buffer. On top of that, every change we make is &quot;reflected&quot; on the actual file.&lt;&#x2F;p&gt;
&lt;p&gt;Remember the example I showed in the demo. Say we have this on the quickfix list.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir&#x2F;a-file.txt|1 col 11| nnoremap &amp;lt;leader&amp;gt;f :FZF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir&#x2F;a-file.txt|2 col 11| nnoremap &amp;lt;leader&amp;gt;ff :FZF&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir&#x2F;a-file.txt|3 col 11| nnoremap &amp;lt;leader&amp;gt;fh :History&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir 2&#x2F;another-file.txt|1 col 11| nnoremap &amp;lt;leader&amp;gt;? :Maps&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir 2&#x2F;another-file.txt|2 col 11| nnoremap &amp;lt;leader&amp;gt;bb :Buffers&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now say I modify the list, delete the first and fourth item using &lt;code&gt;dd&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; .&#x2F;test dir&#x2F;a-file.txt|1 col 11| nnoremap &amp;lt;leader&amp;gt;f :FZF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; .&#x2F;test dir&#x2F;a-file.txt|1 col 11| nnoremap &amp;lt;AAA&amp;gt;f :FZF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  .&#x2F;test dir&#x2F;a-file.txt|2 col 11| nnoremap &amp;lt;leader&amp;gt;ff :FZF&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  .&#x2F;test dir&#x2F;a-file.txt|3 col 11| nnoremap &amp;lt;leader&amp;gt;fh :History&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; .&#x2F;test dir 2&#x2F;another-file.txt|1 col 11| nnoremap &amp;lt;leader&amp;gt;? :Maps&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; .&#x2F;test dir 2&#x2F;another-file.txt|1 col 11| nnoremap &amp;lt;BBB&amp;gt;? :Maps&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  .&#x2F;test dir 2&#x2F;another-file.txt|2 col 11| nnoremap &amp;lt;leader&amp;gt;bb :Buffers&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If I save these changes with the &lt;code&gt;:write&lt;&#x2F;code&gt; command (or the short version &lt;code&gt;:w&lt;&#x2F;code&gt;) they will take effect on their respective files. This gives us great power and flexibility because now the changes we can make are only limited by our knowledge of vim.&lt;&#x2F;p&gt;
&lt;p&gt;Any trick you can think that can modify chunks of code should work flawlessly with this plugin. For example if we want to make the same thing I did in the demo we would do it like this:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Delete the lines we don&#x27;t want to change&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir&#x2F;a-file.txt|1 col 11| nnoremap &amp;lt;leader&amp;gt;f :FZF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir&#x2F;a-file.txt|3 col 11| nnoremap &amp;lt;leader&amp;gt;fh :History&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir 2&#x2F;another-file.txt|1 col 11| nnoremap &amp;lt;leader&amp;gt;? :Maps&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Use the &quot;regular&quot; substitution command.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:%s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;leader&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;localleader&#x2F;g&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After that quickfix list should be on this state.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir&#x2F;a-file.txt|1 col 11| nnoremap &amp;lt;localleader&amp;gt;f :FZF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir&#x2F;a-file.txt|3 col 11| nnoremap &amp;lt;localleader&amp;gt;fh :History&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;.&#x2F;test dir 2&#x2F;another-file.txt|1 col 11| nnoremap &amp;lt;localleader&amp;gt;? :Maps&amp;lt;CR&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Save the changes.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;write&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And that&#x27;s it.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We got to know what is the quickfix list and its most common use cases.&lt;&#x2F;p&gt;
&lt;p&gt;Now we know we can use &lt;code&gt;:make&lt;&#x2F;code&gt; to call any compiler or external command that can run our code and give us error messages. We also have the tools to &quot;teach&quot; vim how to read an error message and put all the information we need in the quickfix list.&lt;&#x2F;p&gt;
&lt;p&gt;We learned that we can use &lt;code&gt;:vimgrep&lt;&#x2F;code&gt; and &lt;code&gt;:grep&lt;&#x2F;code&gt; to search patterns in multiple files in our project. We had the chance to explore a few methods to search and replace text, with some simple cases and another one slightly more complex. With these examples we learned how to replace text with and without plugins.&lt;&#x2F;p&gt;
&lt;p&gt;Lastly we learned about some options and commands we can use in our &lt;code&gt;.vimrc&lt;&#x2F;code&gt; to improve the user experience when we use the quickfix list.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;quickfix.txt.html&quot;&gt;:help quickfix&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;vim&#x2F;comments&#x2F;7dv9as&#x2F;how_to_edit_the_vim_quickfix_list&#x2F;&quot;&gt;How to edit the vim quickfix list&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Extending the deno cli using a shell function</title>
        <published>2021-04-18T00:00:00+00:00</published>
        <updated>2021-04-18T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/extending-the-deno-cli-using-a-shell-function/"/>
        <id>https://vonheikemen.github.io/devlog/tools/extending-the-deno-cli-using-a-shell-function/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/extending-the-deno-cli-using-a-shell-function/">&lt;p&gt;I&#x27;ve been using &lt;code&gt;deno&lt;&#x2F;code&gt; more and more these days and I must tell you they are still things that bug me. But I did manage to solve some of those problems by &quot;adding&quot; some sub-commands to the cli. No, it&#x27;s not dark magic, it&#x27;s just a trick that I learned a while ago and that I&#x27;m going to share with you today.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-do-we-need-for-this&quot;&gt;What do we need for this?&lt;&#x2F;h2&gt;
&lt;p&gt;In theory any shell that allows you to declare functions should be enough. In this post I&#x27;ll be showing you the examples using a POSIX compliant syntax, so they should work on shells like &lt;code&gt;bash&lt;&#x2F;code&gt;, &lt;code&gt;zsh&lt;&#x2F;code&gt; or &lt;code&gt;ash&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-do-we-want-to-achieve&quot;&gt;What do we want to achieve?&lt;&#x2F;h2&gt;
&lt;p&gt;I would love for &lt;code&gt;deno&lt;&#x2F;code&gt; to have some built-in equivalent of &lt;code&gt;npm scripts&lt;&#x2F;code&gt;, but it doesn&#x27;t seem like is going to happen any time soon. I wish I could do something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; start hello world&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It would also be nice if I could initialize those scripts, because they have to live somewhere.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; init&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But as you know those sub-commands don&#x27;t exists and that&#x27;s what we are going to fix today (kinda).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;let-us-begin&quot;&gt;Let us begin&lt;&#x2F;h2&gt;
&lt;p&gt;The first step is to locate that one file you know your shell always execute. In &lt;code&gt;zsh&lt;&#x2F;code&gt; there&#x27;s &lt;code&gt;~&#x2F;.zshrc&lt;&#x2F;code&gt;. &lt;code&gt;bash&lt;&#x2F;code&gt; has &lt;code&gt;~&#x2F;.bashrc&lt;&#x2F;code&gt;. Those two are the only ones I know, if you use any other shell try to find in its documentation the equivalent of that.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-definition&quot;&gt;The definition&lt;&#x2F;h3&gt;
&lt;p&gt;You ready now? Okay, now in that file you&#x27;re going to write this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Hello&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now if you restart your shell (or &quot;reload&quot; your configuration) and try to call &lt;code&gt;deno&lt;&#x2F;code&gt; you should get &lt;code&gt;Hello&lt;&#x2F;code&gt;. Isn&#x27;t that nice? Awesome, but now we have created a problem, we can&#x27;t use &lt;code&gt;deno&lt;&#x2F;code&gt;. But fear not, we are on a good path.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;come-back-to-me-deno&quot;&gt;Come back to me deno&lt;&#x2F;h3&gt;
&lt;p&gt;If we want to call the &lt;code&gt;deno&lt;&#x2F;code&gt; &lt;strong&gt;command&lt;&#x2F;strong&gt; we need to use the command known as &lt;code&gt;command&lt;&#x2F;code&gt;. Something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno --version&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And that will get us all the info &lt;code&gt;deno&lt;&#x2F;code&gt; has about itself.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deno x.x.x (release, x86_64-unknown-linux-gnu)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;v8 x&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;typescript x.x&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this new knowledge we can solve our problem. Let&#x27;s use that in our function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;You&amp;#39;re using&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno --version&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And when we call it we should get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;$ deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;You&amp;#39;re using&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deno x.x.x (release, x86_64-unknown-linux-gnu)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;v8 x&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;typescript x.x&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;going-back-to-normal&quot;&gt;Going back to normal&lt;&#x2F;h3&gt;
&lt;p&gt;We know how to call the &lt;code&gt;deno&lt;&#x2F;code&gt; command but we still need to make our function behave like the &quot;real &lt;code&gt;deno&lt;&#x2F;code&gt;.&quot; We are going to do this in a way that can give us the oportunity to extend its behavior later on. For this we are going to use a &lt;code&gt;case&lt;&#x2F;code&gt; statement.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  local&lt;&#x2F;span&gt;&lt;span&gt; cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;$1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; shift&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;    *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno&lt;&#x2F;span&gt;&lt;span&gt; $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The first thing this function does is assign the first parameter (&lt;code&gt;$1&lt;&#x2F;code&gt;) to the variable  &lt;code&gt;cmd&lt;&#x2F;code&gt; and then remove it from the arguments list (&lt;code&gt;$@&lt;&#x2F;code&gt;). After that we compare &lt;code&gt;cmd&lt;&#x2F;code&gt; with a pattern. For now the only pattern we have is &lt;code&gt;*&lt;&#x2F;code&gt; which is a wildcard that matches everything, is basically our default case. Let&#x27;s make a test.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --version&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It&#x27;s getting better. But notice that if we try to use &lt;code&gt;deno&lt;&#x2F;code&gt; without any arguments it&#x27;ll give us an error. To fix that we are going to check if the first parameter is empty, and if it is we just call &lt;code&gt;deno&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -z&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ];&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  local&lt;&#x2F;span&gt;&lt;span&gt; cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;$1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; shift&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;    *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno&lt;&#x2F;span&gt;&lt;span&gt; $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;calling-all-sub-commands&quot;&gt;Calling all sub-commands&lt;&#x2F;h3&gt;
&lt;p&gt;We are right were we want to be, we can finally start adding our own sub-commands. Let&#x27;s figure out how this would work.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  deno()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if [ -z &amp;quot;$1&amp;quot; ];then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      command deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local cmd=$1; shift;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    case &amp;quot;$cmd&amp;quot; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     hello)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       command deno eval &amp;quot;console.log(&amp;#39;deno says hello&amp;#39;)&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now call this new &lt;code&gt;hello&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;$ deno hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;deno says hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So we know for sure this thing works.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;deno-scripts&quot;&gt;deno scripts&lt;&#x2F;h3&gt;
&lt;p&gt;We can work on our ad-hoc replacement for npm scripts. There is a common convention in &lt;code&gt;node&lt;&#x2F;code&gt; where we use a &lt;code&gt;start&lt;&#x2F;code&gt; command to &quot;boot up&quot; our application or project. Let&#x27;s start with that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  deno()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if [ -z &amp;quot;$1&amp;quot; ];then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      command deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local cmd=$1; shift;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    case &amp;quot;$cmd&amp;quot; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     start)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       command deno run --allow-run .&#x2F;Taskfile.js start $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This command will execute a file called &lt;code&gt;Taskfile.js&lt;&#x2F;code&gt; using &lt;code&gt;deno&lt;&#x2F;code&gt;. The &lt;code&gt;--allow-run&lt;&#x2F;code&gt; will let us use &lt;code&gt;Deno.run&lt;&#x2F;code&gt; in our code to call external commands. It&#x27;s test time.&lt;&#x2F;p&gt;
&lt;p&gt;Make that &lt;code&gt;Taskfile.js&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;echo&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Taskfile: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;Deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;run&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now use &lt;code&gt;start&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;$ deno start hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Taskfile: start hello&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Just lovely. The next step will be to create a &quot;smarter&quot; &lt;code&gt;Taskfile.js&lt;&#x2F;code&gt;, one that can call different tasks. I&#x27;ve done something like this in the past (check out the details of it in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.to&#x2F;vonheikemen&#x2F;a-simple-way-to-replace-npm-scripts-in-deno-4j0g&quot;&gt;here&lt;&#x2F;a&gt;), so I&#x27;m going to show you the code I would use.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; entrypoint&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;.&#x2F;src&#x2F;main.js&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;run&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  start&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    exec&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;deno&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;run&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; entrypoint&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Available tasks: &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;forEach&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;k&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`* &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;k&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; run&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;span&gt; tasks&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;tasks&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    tasks&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;](&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`Task &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot; not found&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7FB4CA;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    tasks&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;async function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exec&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; proc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; await&lt;&#x2F;span&gt;&lt;span&gt; Deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;run&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;status&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;proc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;success ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    Deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;proc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;code&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; proc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this we can execute the file &lt;code&gt;.&#x2F;src&#x2F;main.js&lt;&#x2F;code&gt; using &lt;code&gt;deno start&lt;&#x2F;code&gt;. But now we have a problem, we don&#x27;t want to write all of that every time we create a new project. What we will do is create another command called &lt;code&gt;init&lt;&#x2F;code&gt; to copy this template into our project folder.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  deno()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if [ -z &amp;quot;$1&amp;quot; ];then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      command deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local cmd=$1; shift;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    case &amp;quot;$cmd&amp;quot; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      start)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno run --allow-run .&#x2F;Taskfile.js start $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     init)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       cp &#x2F;path&#x2F;to&#x2F;template&#x2F;Taskfile.js .&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       echo &amp;quot;Taskfile.js created&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Everything is looking good. The last thing we will deal with is calling other tasks besides &lt;code&gt;start&lt;&#x2F;code&gt;. With &lt;code&gt;npm&lt;&#x2F;code&gt; we can call any script we want using &lt;code&gt;npm run&lt;&#x2F;code&gt;, the equivalent for us will be called &lt;code&gt;x&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  deno()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if [ -z &amp;quot;$1&amp;quot; ];then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      command deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local cmd=$1; shift;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    case &amp;quot;$cmd&amp;quot; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     x)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       command deno run --allow-run .&#x2F;Taskfile.js $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      start)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno run --allow-run .&#x2F;Taskfile.js start $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      init)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        cp &#x2F;path&#x2F;to&#x2F;template&#x2F;Taskfile.js .&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        echo &amp;quot;Taskfile.js created&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We are all set. If we had a &quot;task&quot; called &lt;code&gt;test:api&lt;&#x2F;code&gt; we can invoke it using this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; x test:api&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;a-little-extra-convenience&quot;&gt;A little extra convenience&lt;&#x2F;h3&gt;
&lt;p&gt;One more thing, I would like to have a way of calling a specific script and be able to call all my most used libraries without using URLs. We can do this with the help of &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;deno.land&#x2F;manual@v1.9.0&#x2F;linking_to_external_code&#x2F;import_maps&quot;&gt;import-map&lt;&#x2F;a&gt;s, &lt;code&gt;.json&lt;&#x2F;code&gt; files that can bind an &quot;alias&quot; to a URL.&lt;&#x2F;p&gt;
&lt;p&gt;I use one like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;json&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;imports&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;: {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;@std&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;https:&#x2F;&#x2F;deno.land&#x2F;std@0.93.0&#x2F;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;@npm&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;https:&#x2F;&#x2F;jspm.dev&#x2F;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;ansi-colors&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;https:&#x2F;&#x2F;jspm.dev&#x2F;ansi-colors@4.1.1&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;https:&#x2F;&#x2F;jspm.dev&#x2F;arg@5.0.0&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;cheerio&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;https:&#x2F;&#x2F;jspm.dev&#x2F;cheerio@1.0.0-rc.5&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;exec&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;https:&#x2F;&#x2F;deno.land&#x2F;x&#x2F;exec@0.0.5&#x2F;mod.ts&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;ramda&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;https:&#x2F;&#x2F;jspm.dev&#x2F;ramda@0.27.1&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    &amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;@utils&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;quot;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&#x2F;path&#x2F;to&#x2F;deno&#x2F;utils&#x2F;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;deno&lt;&#x2F;code&gt; can read this if we provide its path using the &lt;code&gt;--import-map&lt;&#x2F;code&gt; flag. Let&#x27;s add a command that uses that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  deno()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if [ -z &amp;quot;$1&amp;quot; ];then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      command deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    local cmd=$1; shift;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    case &amp;quot;$cmd&amp;quot; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      x)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno run --allow-run .&#x2F;Taskfile.js $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      start)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno run --allow-run .&#x2F;Taskfile.js start $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      init)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        cp &#x2F;path&#x2F;to&#x2F;template&#x2F;Taskfile.js .&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        echo &amp;quot;Taskfile.js created&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     s|script)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       command deno run --import-map=&amp;quot;&#x2F;path&#x2F;to&#x2F;deno&#x2F;import-map.json&amp;quot; $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        command deno $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;As with everything else, we need to test this thing. Create a script with this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;import&lt;&#x2F;span&gt;&lt;span&gt; dayjs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;@npm&#x2F;dayjs&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;import&lt;&#x2F;span&gt;&lt;span&gt; c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;ansi-colors&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;enabled = !&lt;&#x2F;span&gt;&lt;span&gt;Deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;noColor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; date&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; dayjs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;().&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;{YYYY} MM-DDTHH:mm:ss SSS [Z] A&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;green&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;date&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Might want to specify the library version. Instead of using &lt;code&gt;@npm&#x2F;dayjs&lt;&#x2F;code&gt;, use &lt;code&gt;@npm&#x2F;dayjs@1.10.4&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;And now call it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;$ deno script .&#x2F;test.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Download https:&#x2F;&#x2F;jspm.dev&#x2F;dayjs@1.10.4&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Download https:&#x2F;&#x2F;jspm.dev&#x2F;npm:dayjs@1.10.4!cjs&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{2021} 04-18T11:28:05 929 Z AM&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Ha! Now I have all I want.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-final-result&quot;&gt;The final result&lt;&#x2F;h3&gt;
&lt;p&gt;After all this process your &lt;code&gt;deno&lt;&#x2F;code&gt; function should look like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;deno&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -z&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ];&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  fi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  local&lt;&#x2F;span&gt;&lt;span&gt; cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;$1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; shift&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;$cmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; in&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;    x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno run --allow-run .&#x2F;Taskfile.js&lt;&#x2F;span&gt;&lt;span&gt; $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;    start&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno run --allow-run .&#x2F;Taskfile.js start&lt;&#x2F;span&gt;&lt;span&gt; $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;    init&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;      cp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &#x2F;path&#x2F;to&#x2F;template&#x2F;Taskfile.js .&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Taskfile.js created&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;    s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;|&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;script&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno run --import-map=&amp;quot;&#x2F;path&#x2F;to&#x2F;deno&#x2F;import-map.json&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt; $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;    *)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      command&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; deno&lt;&#x2F;span&gt;&lt;span&gt; $cmd $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  esac&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;So, what did we do today? We &quot;hid&quot; the &lt;code&gt;deno&lt;&#x2F;code&gt; command inside a function in order to be able to add sub-commands that we created. We managed to build an equivalent to &lt;code&gt;npm run&lt;&#x2F;code&gt; for &lt;code&gt;deno&lt;&#x2F;code&gt; and finally we used import maps to simplify the declaration of our dependencies in a script. Not bad for a day&#x27;s work.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>vim&#x27;s easy mode: making vim behave like a &#x27;conventional&#x27; text editor</title>
        <published>2021-04-10T00:00:00+00:00</published>
        <updated>2021-04-10T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/vim-easy-mode/"/>
        <id>https://vonheikemen.github.io/devlog/tools/vim-easy-mode/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/vim-easy-mode/">&lt;p&gt;So it turns out vim has an &quot;easy mode.&quot; Who knew? That will be the topic today, we will learn what&#x27;s the deal with this mode, we&#x27;ll figure out how to enable it, see why almost nobody pays attention to it, and lastly I&#x27;ll show you some stuff you can do to make it a bit nicer.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;easy-what-does-that-mean&quot;&gt;Easy, what does that mean?&lt;&#x2F;h2&gt;
&lt;p&gt;According to the documentation it was made to help people that don&#x27;t use vim often enough to learn its commands. In this mode vim is suppose to behave like a conventional text editor, you know the type, one of those that let us edit things immediately.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;what-does-it-do&quot;&gt;What does it do?&lt;&#x2F;h3&gt;
&lt;p&gt;It gives us the gift of convenience. On a more serious note, the first thing you&#x27;ll notice is that we can insert and edit text in a more conventional way. For the people who have entered &lt;code&gt;vim&lt;&#x2F;code&gt; by accident and have no knowledge of how it works this feature alone could be a huge improvement. It also provides some keyboard shortcuts that we all know and love, such as:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;Ctrl + s&lt;&#x2F;code&gt;: to save a file.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Ctrl + z&lt;&#x2F;code&gt;: to undo changes.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Ctrl + y&lt;&#x2F;code&gt;: to redo some changes.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Ctrl + c&lt;&#x2F;code&gt;: copy text to the clipboard.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Ctrl + x&lt;&#x2F;code&gt;: cut text to the clipboard.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Ctrl + v&lt;&#x2F;code&gt;: paste text from the clipboard.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Ctrl + a&lt;&#x2F;code&gt;: selects all text in the file.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;It even enables some options that will make the experience a bit more intuitive, like mouse support, so we can select text with the mouse.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;how-does-it-work&quot;&gt;How does it work?&lt;&#x2F;h3&gt;
&lt;p&gt;Good question. This &quot;easy mode&quot; is actually just a set of options written in a file called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;vim&#x2F;vim&#x2F;blob&#x2F;314dd79cac2adc10304212d1980d23ecf6782cfc&#x2F;runtime&#x2F;evim.vim&quot;&gt;evim.vim&lt;&#x2F;a&gt;. You can check it out with vim if you want, use this command &lt;code&gt;vim -R -c &#x27;edit $VIMRUNTIME&#x2F;evim.vim&#x27;&lt;&#x2F;code&gt; (to get out use &lt;code&gt;ZZ&lt;&#x2F;code&gt; or just close the terminal). So, when we active this mode vim just reads and executes this file.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;how-do-we-use-it&quot;&gt;How do we use it?&lt;&#x2F;h3&gt;
&lt;p&gt;On the command line we provide the &lt;code&gt;-y&lt;&#x2F;code&gt; flag to &lt;code&gt;vim&lt;&#x2F;code&gt;, like this &lt;code&gt;vim -y&lt;&#x2F;code&gt;. Another way would be using the &lt;code&gt;evim&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-big-flaw-on-the-plan&quot;&gt;The big flaw on the plan&lt;&#x2F;h2&gt;
&lt;p&gt;Cool, now why is it that no one talks about this mode? Well maybe is because it makes it even harder to get out of vim (oh, the irony). They were so close. Anyway, if you want to exit vim while in this mode this is what you do: use &lt;code&gt;ctrl + o&lt;&#x2F;code&gt; to go in normal mode, press &lt;code&gt;:&lt;&#x2F;code&gt;, type &lt;code&gt;q&lt;&#x2F;code&gt; and then press &lt;code&gt;Enter&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;Why are you like that, vim?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;It does look like this easy mode was designed to be used in a GUI. That&#x27;s right, with vim in a graphical interface. So I guess they thought it wasn&#x27;t necessary, because you would just close the &quot;application&quot; where vim is in.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;some-workarounds&quot;&gt;Some workarounds&lt;&#x2F;h2&gt;
&lt;p&gt;Some command-line experts out there must be thinking &quot;well, just use &lt;code&gt;nano&lt;&#x2F;code&gt;.&quot; I mean, yeah, that&#x27;s a good solution. But if you want to give this mode a chance, keep reading.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-gui&quot;&gt;The GUI&lt;&#x2F;h3&gt;
&lt;p&gt;If what we need is a graphical interface then lets just use one. We could create an alias that uses our favorite terminal to open vim.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;alias&lt;&#x2F;span&gt;&lt;span&gt; evim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;xterm -e vim -y&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or maybe you prefer a script.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;#! &#x2F;usr&#x2F;bin&#x2F;env sh&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;xterm&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -e vim -y&lt;&#x2F;span&gt;&lt;span&gt; $@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Might want to replace &lt;code&gt;xterm&lt;&#x2F;code&gt; with something else.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;This way when you call the &lt;code&gt;evim&lt;&#x2F;code&gt; command or call the script &lt;code&gt;vim&lt;&#x2F;code&gt; will open in another window. And when you finish editing stuff you just close that window.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-missing-piece&quot;&gt;The missing piece&lt;&#x2F;h3&gt;
&lt;p&gt;On the other hand, if all we want is a shortcut to get out I say we create one. We could do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;vim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -y -c &amp;quot;inoremap &amp;lt;c-q&amp;gt; &amp;lt;c-o&amp;gt;:q&amp;lt;cr&amp;gt;&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This command will open vim in easy mode and create a &lt;code&gt;Ctrl + q&lt;&#x2F;code&gt; shortcut that will close vim. Again, you can put this in an alias or script.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;easy-by-default&quot;&gt;Easy by default&lt;&#x2F;h3&gt;
&lt;p&gt;There is another way to enable this mode without using command line arguments. In our home folder, we can create a file called &lt;code&gt;.vimrc&lt;&#x2F;code&gt; and in it we can put this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; enable &amp;#39;easy mode&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;source&lt;&#x2F;span&gt;&lt;span&gt; $VIMRUNTIME&#x2F;evim.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Ctrl + q to get out of vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-q&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-o&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:q&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now when you open &lt;code&gt;vim&lt;&#x2F;code&gt; just like that, it will already be in easy mode. And what&#x27;s even better, is that we can get out of it easily using &lt;code&gt;Ctrl + q&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;This method is what I would recommend for the people who have no intention of using &lt;code&gt;vim&lt;&#x2F;code&gt; frequently (or even use it at all). By doing this, even if you enter vim by accident, you can use it like a normal text editor or at the very least you can get out of it fast.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;since-we-are-here&quot;&gt;Since we are here&lt;&#x2F;h4&gt;
&lt;p&gt;By &quot;here&quot; I mean editing the &lt;code&gt;.vimrc&lt;&#x2F;code&gt; file, may I suggest a couple options for you to add?&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Avoid creating temporary files.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; noswapfile&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; nobackup&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Highlight the line where your cursor is at.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; cursorline&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Enable syntax highlight and better colors.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;has&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;termguicolors&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; termguicolors&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;endif&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;syntax enable&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Shortcuts for search and replace.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Ctrl + f to begin searching&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-o&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Ctl + f (x2) to stop highlighting the search results&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;f &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-o&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nohlsearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-o&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;nohlsearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; F3 go to the previous match&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;F3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-o&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;normal&lt;&#x2F;span&gt;&lt;span&gt; Nzz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; F4 go to the next match&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;F4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-o&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;normal&lt;&#x2F;span&gt;&lt;span&gt; nzz&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;cr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&amp;quot; Ctrl + h begin a search and replace&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;inoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-h&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;c-o&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:%s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;gc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That last one needs some explanation. After pressing &lt;code&gt;Ctrl + h&lt;&#x2F;code&gt; you&#x27;ll have this in the prompt &lt;code&gt;%s&#x2F;|&#x2F;&#x2F;gc&lt;&#x2F;code&gt; (&lt;code&gt;|&lt;&#x2F;code&gt; is the cursor). This is a substitute command, it works something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;{search query}&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;{the replacement}&#x2F;gc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;For example, let&#x27;s say I want to replace &lt;code&gt;Left&lt;&#x2F;code&gt; with &lt;code&gt;Right&lt;&#x2F;code&gt;, I would need to write this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;s&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C0A36E;&quot;&gt;&#x2F;Left&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;Right&#x2F;gc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This will make &lt;code&gt;vim&lt;&#x2F;code&gt; search for every &lt;code&gt;Left&lt;&#x2F;code&gt; instance, when it finds one it will ask us if we want to replace it, and it will put &lt;code&gt;Right&lt;&#x2F;code&gt; if we say yes.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Now finally you have all the tools you need to make vim behave like a conventional text editor. From now on your experience with vim doesn&#x27;t have to be so terrible.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;starting.txt.html#easy&quot;&gt;:help easy&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;starting.txt.html#evim-keys&quot;&gt;:help evim-keys&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Using Netrw, vim&#x27;s builtin file explorer</title>
        <published>2021-01-10T00:00:00+00:00</published>
        <updated>2021-01-10T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/using-netrw-vim-builtin-file-explorer/"/>
        <id>https://vonheikemen.github.io/devlog/tools/using-netrw-vim-builtin-file-explorer/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/using-netrw-vim-builtin-file-explorer/">&lt;p&gt;Did you know that vim has a file explorer? It&#x27;s a plugin that comes bundled with vim. It&#x27;s called Netrw... and it&#x27;s not very popular, at least not if you compare it with something like NERDtree. The reasons for this could include 1) is not very intuitive. 2) has a few annoying limitations. 3) doesn&#x27;t look cool. Today we are going to learn how to use it, how to get around those limitations and in the process we&#x27;re going to turn it into something more intuitive and easier to use.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;meeting-netrw&quot;&gt;Meeting Netrw&lt;&#x2F;h2&gt;
&lt;p&gt;Let&#x27;s begin our exploration by taking a quick look at it. We can do this if we try to open a directory using vim (something like this: &lt;code&gt;vim .&lt;&#x2F;code&gt;). Assuming you don&#x27;t have a heavily customized &lt;code&gt;vimrc&lt;&#x2F;code&gt;, Netrw should look like this.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1609938838&#x2F;devlog&#x2F;using-vim-netrw&#x2F;netrw-full-screen_2021-01-06_09-13-11.png&quot; alt=&quot;netrw in full screen&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The first thing we see is a banner with information about the current directory. This is what is shows us.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Information about Netrw, the name and version (v156).&lt;&#x2F;li&gt;
&lt;li&gt;The path of the current directory.&lt;&#x2F;li&gt;
&lt;li&gt;The criteria it&#x27;s using to sort the files, in this case is doing it by name.&lt;&#x2F;li&gt;
&lt;li&gt;Another sort criteria. This time is a sequence that describes the priority it gives to a file according to its suffix.&lt;&#x2F;li&gt;
&lt;li&gt;&quot;Quick help&quot;. In here you can see a few hints about actions that Netrw can perform.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Fun fact, you can actually interact with some of the &quot;options&quot; in the banner. So, if you put the cursor on the line that says &quot;sorted&quot; and press &lt;code&gt;Enter&lt;&#x2F;code&gt; you&#x27;ll change the order of the files. You can order them by name, last update, size or the extension of the file. And the quick help can show you keymaps for some common tasks.&lt;&#x2F;p&gt;
&lt;p&gt;After the banner we have our directories and files. &lt;code&gt;..&#x2F;&lt;&#x2F;code&gt; is the parent directory and &lt;code&gt;.&#x2F;&lt;&#x2F;code&gt; is the current directory. Lastly, we have our files sorted perfectly.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;usage&quot;&gt;Usage&lt;&#x2F;h2&gt;
&lt;p&gt;Now that we now how Netrw looks like let&#x27;s cover some of its basic features.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;how-to-call-it&quot;&gt;How to call it&lt;&#x2F;h3&gt;
&lt;p&gt;Our first stop is the &lt;code&gt;:Explore&lt;&#x2F;code&gt; command. Using it with no arguments will show the directory of the file we are editing. If we don&#x27;t want that we could give it the path to the directory we want. Depending on your vim config, specifically the &lt;code&gt;hidden&lt;&#x2F;code&gt; option, it will do things differently. If &lt;code&gt;hidden&lt;&#x2F;code&gt; is disabled (this is the default) and there are no unsaved changes in the current file, &lt;code&gt;:Explore&lt;&#x2F;code&gt; will make Netrw occupy the entire window. If we do have unsaved changes in a file it will create a horizontal split and have Netrw in the upper window.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1609951259&#x2F;devlog&#x2F;using-vim-netrw&#x2F;netrw-half-screen_2021-01-06_12-39-50.png&quot; alt=&quot;netrw taking half the screen&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;If we wanted a vertical split we would use the &lt;code&gt;:Explore!&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;If &lt;code&gt;hidden&lt;&#x2F;code&gt; is enabled Netrw will always occupy the whole window.&lt;&#x2F;p&gt;
&lt;p&gt;Now let&#x27;s talk about some &lt;code&gt;:Explore&lt;&#x2F;code&gt; variants we have available.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Hexplore: Will create a horizontal split and show the directory in the lower window. The variant with an &lt;code&gt;!&lt;&#x2F;code&gt; will show the directory in the opposite side.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Vexplore: Will create a vertical split and show the directory on the left side. The variant with an &lt;code&gt;!&lt;&#x2F;code&gt; will show the directory in the opposite side.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Sexplore: Will create a horizontal split and show the directory in the upper window. The variant with an &lt;code&gt;!&lt;&#x2F;code&gt; will create a vertical split and show the directory on the left side.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Texplore: Will create a new tabpage to show the directory.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Lexplore: It works almost like &lt;code&gt;Vexplore&lt;&#x2F;code&gt;, but &lt;code&gt;Lexplore&lt;&#x2F;code&gt; will open a file on the window where we called the command. It will also work as way to toggle a Netrw window. You can watch it in action in this demo.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;Fa9y0AieDUImMHZjUbjKzjlwn.js&quot;
    id=&quot;asciicast-Fa9y0AieDUImMHZjUbjKzjlwn&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;Fa9y0AieDUImMHZjUbjKzjlwn&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;h3 id=&quot;navigation&quot;&gt;Navigation&lt;&#x2F;h3&gt;
&lt;p&gt;If we want to move between directories and files these are the keymaps we need to know:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;Enter&lt;&#x2F;code&gt;: Opens a directory or a file.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;-&lt;&#x2F;code&gt;: Go up to the parent directory.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;u&lt;&#x2F;code&gt;: Go back to the previous directory in the history.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;gb&lt;&#x2F;code&gt;: Jump to the most recent directory saved on the &quot;Bookmarks&quot;. To create a bookmark we use &lt;code&gt;mb&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Let&#x27;s recap. If we want to &quot;go down a directory&quot; we use &lt;code&gt;Enter&lt;&#x2F;code&gt;. To &quot;go up&quot; we use &lt;code&gt;-&lt;&#x2F;code&gt;. To go back, &lt;code&gt;u&lt;&#x2F;code&gt;. And if we want to &quot;jump&quot; quickly to a directory of our choosing we should first add it to the bookmarks (using &lt;code&gt;mb&lt;&#x2F;code&gt;) and then we can use &lt;code&gt;gb&lt;&#x2F;code&gt; to go there.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;file-operations&quot;&gt;File operations&lt;&#x2F;h3&gt;
&lt;p&gt;We know how to move, now let&#x27;s see how can we perform some of the most common task on our files.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;p&lt;&#x2F;code&gt;: Opens a preview window.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;C-w&amp;gt;z&lt;&#x2F;code&gt;: &lt;code&gt;Ctrl + w&lt;&#x2F;code&gt; and then &lt;code&gt;z&lt;&#x2F;code&gt;. Closes the preview window.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;gh&lt;&#x2F;code&gt;: Toggles the hidden files.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;%&lt;&#x2F;code&gt;: Creates a file. Well... it actually doesn&#x27;t, it just gives you the opportunity to create one. When you press &lt;code&gt;%&lt;&#x2F;code&gt; vim will ask the name you want to give the file and then it lets you edit it. After entering the name you have to save the file (using &lt;code&gt;:write&lt;&#x2F;code&gt;) to create it.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;R&lt;&#x2F;code&gt;: Renames a file&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;mt&lt;&#x2F;code&gt;: Assign the &quot;target directory&quot; used by the move and copy commands.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;mf&lt;&#x2F;code&gt;: Marks a file or directory. Any action that can be performed on multiple files depend on these marks. So if you want to copy, move or delete files, you need to mark them.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;mc&lt;&#x2F;code&gt;: Copy the marked files in the target directory.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;mm&lt;&#x2F;code&gt;: Move the marked files to the target directory.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;mx&lt;&#x2F;code&gt;: Runs an external command on the marked files.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;D&lt;&#x2F;code&gt;: Deletes a file or an empty directory. vim will not let us delete a non-empty directory. I&#x27;ll show how to bypass this later on.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;d&lt;&#x2F;code&gt;: Creates a directory.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;perform-an-action-on-multiple-files&quot;&gt;Perform an action on multiple files&lt;&#x2F;h3&gt;
&lt;p&gt;After reading about those keymaps I bet you&#x27;re wondering how does one copy or move a file. I&#x27;ll do an example moving some files around.&lt;&#x2F;p&gt;
&lt;p&gt;This will be a three step process:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Assign the target directory.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Mark the files we want to move.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Run the appropriate command, in our case &lt;code&gt;mm&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;YkvegGilPQpSbABrOcFZYhN7W.js&quot;
    id=&quot;asciicast-YkvegGilPQpSbABrOcFZYhN7W&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;YkvegGilPQpSbABrOcFZYhN7W&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;This is what happens in the demo:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;00:00-00:17&lt;&#x2F;em&gt; I use &lt;code&gt;:Explore&lt;&#x2F;code&gt; to open Netrw. Then check the content of &lt;code&gt;test dir&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;00:18&lt;&#x2F;em&gt; I assign &lt;code&gt;test dir&lt;&#x2F;code&gt; as the target directory. Notice how the banner updates to show us the target directory. This line gets added.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&amp;quot;   Copy&#x2F;Move Tgt: &#x2F;tmp&#x2F;vim&#x2F;test dir&#x2F; (local)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;00:20-00:25&lt;&#x2F;em&gt; I mark the files &lt;code&gt;a-file.txt&lt;&#x2F;code&gt; and &lt;code&gt;another-file.txt&lt;&#x2F;code&gt;. To indicate they are marked vim shows us the name of the files in bold.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;00:25-00:27&lt;&#x2F;em&gt;  I press &lt;code&gt;mm&lt;&#x2F;code&gt; to move the files, and these disappear from the current window.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;00:29&lt;&#x2F;em&gt; Now I check if the files are inside &lt;code&gt;test dir&lt;&#x2F;code&gt; (they are).&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;And this is it, to copy and delete this is the process. To run external commands and delete files is the same thing, except we don&#x27;t need a target directory.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;netrw-s-limitations&quot;&gt;Netrw&#x27;s limitations&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;When moving files.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;This happens on linux and maybe macOS is the same. In our previous example we moved &lt;code&gt;a-file.txt&lt;&#x2F;code&gt; to &lt;code&gt;test dir&lt;&#x2F;code&gt;, and that worked great, but if you try to move back &lt;code&gt;a-file.txt&lt;&#x2F;code&gt; to the parent directory you&#x27;ll get this error.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;**error** (netrw) tried using g:netrw_localmovecmd&amp;lt;mv&amp;gt;; it doesn&amp;#39;t work!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;This doesn&#x27;t happen when you try to copy.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;As far as I know this happens when the current directory (in the buffer) and the directory we are browsing don&#x27;t match. To fix this you can set the global variable &lt;code&gt;g:netrw_keepdir&lt;&#x2F;code&gt; to zero.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let g:netrw_keepdir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;When performing an action on marked files.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;When you try to do something on marked files, the action only applies to the files that are listed in the current buffer.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s say we have this file structure.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── mini-plugins&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   ├── better-netrw.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   ├── guess-indentation.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   └── project-buffers.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── test dir&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   ├── a-file.txt *&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   ├── another-file.txt *&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;│   └── text.txt&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;├── custom-commands.vim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;└── init.vim *&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The files with an &lt;code&gt;*&lt;&#x2F;code&gt; are the ones we have marked. If we are in the &lt;code&gt;vim&lt;&#x2F;code&gt; directory and we try to move the files to &lt;code&gt;mini plugins&lt;&#x2F;code&gt; only &lt;code&gt;init.vim&lt;&#x2F;code&gt; will be in the target directory. In theory this is a good thing, because we will always have in sight the files we are operating on.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Netrw can&#x27;t delete non-empty directories using &lt;code&gt;D&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;And of course the answer to this is: use an external command. If you paid attention on previous sections you&#x27;ll know that the &lt;code&gt;mx&lt;&#x2F;code&gt; keymap can help us do just that. Here it is in action.&lt;&#x2F;p&gt;
&lt;p&gt;
  &lt;script 
    src=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;YbscBomZSa752kXnEASUnaxlx.js&quot;
    id=&quot;asciicast-YbscBomZSa752kXnEASUnaxlx&quot;
    data-preload=&quot;false&quot;
    data-size=&quot;small&quot;
    async
  &gt;&lt;&#x2F;script&gt;
&lt;&#x2F;p&gt;

&lt;blockquote&gt;
&lt;p&gt;See in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;asciinema.org&#x2F;a&#x2F;YbscBomZSa752kXnEASUnaxlx&quot;&gt;asciinema&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;So just in case. The solution: mark the directories with &lt;code&gt;mf&lt;&#x2F;code&gt;, use &lt;code&gt;mx&lt;&#x2F;code&gt; and type the command you need (&lt;code&gt;rm -r&lt;&#x2F;code&gt; in the demo). That&#x27;s it. But can we make this more convenient? Yes we can, and we are going to that in the next section.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;customization&quot;&gt;Customization&lt;&#x2F;h2&gt;
&lt;p&gt;If you decided to give Netrw a chance you might want to make some tweaks to make it nicer.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;recommended-config&quot;&gt;Recommended config&lt;&#x2F;h3&gt;
&lt;p&gt;Keep the current directory and the browsing directory synced. This helps you avoid the move files error.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let g:netrw_keepdir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Change the size of the Netrw window when it creates a split. I think 30% is fine.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let g:netrw_winsize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 30&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Hide the banner (if you want). To show it temporarily you can use &lt;code&gt;I&lt;&#x2F;code&gt; inside Netrw.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let g:netrw_banner&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Hide dotfiles on load.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let g:netrw_list_hide&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;\(^\|\s\s\)\zs\.\S\+&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Change the copy command. Mostly to enable recursive copy of directories.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;let g:netrw_localcopydircmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;cp -r&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Highlight marked files in the same way search matches are.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;hi&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span&gt; link netrwMarkFile Search&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;This is the easiest way I could think of to highlight marks. This may cause some confusion if you begin a search in Netrw and have marked files. If you wish to apply other colors search information about the &lt;code&gt;highlight&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;h3 id=&quot;keymaps&quot;&gt;Keymaps&lt;&#x2F;h3&gt;
&lt;p&gt;Now that Netrw looks better-ish, let&#x27;s make it easier to use.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;better-call-netrw&quot;&gt;Better call Netrw&lt;&#x2F;h4&gt;
&lt;p&gt;We begin by changing the way we call Netrw. We bind &lt;code&gt;:Lexplore&lt;&#x2F;code&gt; to a shortcut so we can toggle it whenever we want.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;dd :Lexplore %:p:h&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;da :Lexplore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;Leader dd&lt;&#x2F;code&gt;: Will open Netrw in the directory of the current file.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Leader da&lt;&#x2F;code&gt;: Will open Netrw in the current working directory.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h4 id=&quot;navigation-1&quot;&gt;Navigation&lt;&#x2F;h4&gt;
&lt;p&gt;Unfortunately we don&#x27;t have a direct way to assign a keymap in Netrw. We can still have them but it does requires a few steps.&lt;&#x2F;p&gt;
&lt;p&gt;Netrw is a plugin that defines its own filetype, so we are going to use that to our advantage. What we are going to do is place our keymaps inside a function and create an &lt;code&gt;autocommand&lt;&#x2F;code&gt; that calls it everytime vim opens a filetype &lt;code&gt;netrw&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; NetrwMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; netrw_mapping&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  autocmd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; filetype&lt;&#x2F;span&gt;&lt;span&gt; netrw call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; NetrwMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;augroup&lt;&#x2F;span&gt;&lt;span&gt; END&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this in our config all we have to do now is place the keymaps inside &lt;code&gt;NetrwMapping&lt;&#x2F;code&gt;. Like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; NetrwMapping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; H u&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; h -^&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; l &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; . &lt;&#x2F;span&gt;&lt;span&gt;gh&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; P &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;C-w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;z&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; L &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:Lexplore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;dd :Lexplore&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Since we don&#x27;t have access to the functions Netrw uses internally (at least not all of them), we use &lt;code&gt;nmap&lt;&#x2F;code&gt; to make our keymaps. For example, &lt;code&gt;H&lt;&#x2F;code&gt; will be the same thing as pressing &lt;code&gt;u&lt;&#x2F;code&gt;, and &lt;code&gt;u&lt;&#x2F;code&gt; will trigger the command we want to execute. So this is what we have:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;H&lt;&#x2F;code&gt;: Will &quot;go back&quot; in history.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;h&lt;&#x2F;code&gt;: Will &quot;go up&quot; a directory.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;l&lt;&#x2F;code&gt;: Will open a directory or a file.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;.&lt;&#x2F;code&gt;: Will toggle the dotfiles.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;P&lt;&#x2F;code&gt;: Will close the preview window.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;L&lt;&#x2F;code&gt;: Will open a file and close Netrw.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Leader dd&lt;&#x2F;code&gt;: Will just close Netrw.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;With these (plus the recommended config) Netrw can become a decent file explorer. But wait, we can still do more.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;marks&quot;&gt;Marks&lt;&#x2F;h4&gt;
&lt;p&gt;Let&#x27;s find a better way to manage the marks on files. I suggest using &lt;code&gt;&amp;lt;Tab&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;TAB&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; mf&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;S-T&lt;&#x2F;span&gt;&lt;span&gt;AB&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; mF&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;Leader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;TAB&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; mu&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;Tab&lt;&#x2F;code&gt;: Toggles the mark on a file or directory.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Shift Tab&lt;&#x2F;code&gt;: Will unmark all the files in the current buffer.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;Leader Tab&lt;&#x2F;code&gt;: Will remove all the marks on all files.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h4 id=&quot;file-managing&quot;&gt;File managing&lt;&#x2F;h4&gt;
&lt;p&gt;Since there are quite a few commands related to files we are going to use the &lt;code&gt;f&lt;&#x2F;code&gt; key as a prefix to group these together.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; ff&lt;&#x2F;span&gt;&lt;span&gt; %:w&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;:buffer &lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;#&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fe R&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fc mc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fC mtmc&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fx &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;mm&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fX mtmm&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; f; mx&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ff&lt;&#x2F;code&gt;: Will create a file. But like create it for real. This time, after doing &lt;code&gt;%&lt;&#x2F;code&gt; we use &lt;code&gt;:w&amp;lt;CR&amp;gt;&lt;&#x2F;code&gt; to save the empty file and &lt;code&gt;:buffer #&amp;lt;CR&amp;gt;&lt;&#x2F;code&gt; to go back to Netrw.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;fe&lt;&#x2F;code&gt;: Will rename a file.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;fc&lt;&#x2F;code&gt;: Will copy the marked files.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;fC&lt;&#x2F;code&gt;: We will use this to &quot;skip&quot; a step. After you mark your files you can put the cursor in a directory and this will assign the target directory and copy in one step.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;fx&lt;&#x2F;code&gt;: Will move marked files.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;fX&lt;&#x2F;code&gt;: Same thing as &lt;code&gt;fC&lt;&#x2F;code&gt; but for moving files.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;f;&lt;&#x2F;code&gt;: Will be for running external commands on the marked files.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We can still do a couple of things, if you don&#x27;t mind using some of Netrw&#x27;s internal variables.&lt;&#x2F;p&gt;
&lt;p&gt;Show a list of marked files.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fl :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;echo join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;netrw#Expose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;netrwmarkfilelist&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;\n&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Show the target directory, just in case we want to avoid the banner.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fq :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Target:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; . &lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;netrw#Expose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;netrwmftgt&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can use that along side &lt;code&gt;mt&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fd mtfq&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Again, this is only useful if you really, really want to avoid showing the banner.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;bookmarks&quot;&gt;Bookmarks&lt;&#x2F;h4&gt;
&lt;p&gt;In the same way we grouped the file related actions, we do it for bookmarks.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; bb mb&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; bd mB&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; bl&lt;&#x2F;span&gt;&lt;span&gt; gb&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;bb&lt;&#x2F;code&gt;: To create a bookmark.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;bd&lt;&#x2F;code&gt;: To remove the most recent bookmark.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;bl&lt;&#x2F;code&gt;: To jump to the most recent bookmark.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h4 id=&quot;remove-files-recursively&quot;&gt;Remove files recursively&lt;&#x2F;h4&gt;
&lt;p&gt;Last thing we will do is &quot;automate&quot; that process we did to remove non empty directories. For this we will need a function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;!&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; NetrwRemoveRecursive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; &amp;amp;filetype&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==#&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;netrw&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    cnoremap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; rm -r&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    normal&lt;&#x2F;span&gt;&lt;span&gt; mu&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    normal&lt;&#x2F;span&gt;&lt;span&gt; mf&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    try&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      normal&lt;&#x2F;span&gt;&lt;span&gt; mx&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    catch&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      echo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Canceled&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    endtry&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cunmap &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  endif&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;endfunction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;First thing we do in this function is check if we are in a buffer controlled by Netrw. Then we prepare the remove command. We take advantage of the fact that vim makes us drop to command mode and create a keymap (&lt;code&gt;&amp;lt;CR&amp;gt;&lt;&#x2F;code&gt;) that will write the command for us. Next, we use &lt;code&gt;normal mu&lt;&#x2F;code&gt; to clear all the marks, &#x27;cause we don&#x27;t want to remove anything by accident. We then mark the directory under the cursor with &lt;code&gt;normal mf&lt;&#x2F;code&gt;. Here comes the funny part, &lt;code&gt;normal mx&lt;&#x2F;code&gt; will ask us what command we want to execute, and is at this point when we can abort the process using &lt;code&gt;ctrl + c&lt;&#x2F;code&gt; or press &lt;code&gt;Enter&lt;&#x2F;code&gt; which will trigger the command &lt;code&gt;rm -r&lt;&#x2F;code&gt;. Lastly, we undo the keymap we created in the beginning of the function, because it will be terrible to have it permanently.&lt;&#x2F;p&gt;
&lt;p&gt;And how do we use it?&lt;&#x2F;p&gt;
&lt;p&gt;Creating a keymap inside &lt;code&gt;NetrwMapping&lt;&#x2F;code&gt;, of course.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;viml&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;nmap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;buffer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; FF :call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; NetrwRemoveRecursive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;CR&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You can find every option and function in this article &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;VonHeikemen&#x2F;fa6f7c7f114bc36326cda2c964cb52c7&quot;&gt;here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Netrw might not be the best file manager in the vim ecosystem but with a little effort we can turn it into an intuitive file explorer. Even if you don&#x27;t adopt in Netrw in your workflow, knowing how to use it can be handy in some situations. You never know when you&#x27;re going to be stuck in a remote server without your favorite vim plugins at hand.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;source&quot;&gt;Source&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;pi_netrw.txt.html&quot;&gt;:help netrw&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Transducers in javascript</title>
        <published>2020-12-27T00:00:00+00:00</published>
        <updated>2020-12-27T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/transducers-in-javascript/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/transducers-in-javascript/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/transducers-in-javascript/">&lt;p&gt;What if I told you we can extract the essence of list operations like &lt;code&gt;map&lt;&#x2F;code&gt; and &lt;code&gt;filter&lt;&#x2F;code&gt; and apply them in other kinds of collections beyond arrays? What if I told you that I can implement &lt;code&gt;filter&lt;&#x2F;code&gt; only once and apply that exact same function in multiple types of collections? That is the idea behind transducers. Today we are going to learn what are they, how they work and how can we use them.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;requirements&quot;&gt;Requirements&lt;&#x2F;h2&gt;
&lt;p&gt;Before we begin there are a couple of things you need to know:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;reduce-how-and-when&#x2F;&quot;&gt;How Array.reduce works&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;the-case-for-reducers&#x2F;&quot;&gt;What is a reducer&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;It would also help a lot if you are familiar with these concepts:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;First class functions&lt;&#x2F;li&gt;
&lt;li&gt;Higher order functions&lt;&#x2F;li&gt;
&lt;li&gt;Closures&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;If you don&#x27;t know what any of that means, don&#x27;t worry too much. Just know that in javascript we can treat functions like any other type of data.&lt;&#x2F;p&gt;
&lt;p&gt;Let us begin.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-are-transducers&quot;&gt;What are transducers?&lt;&#x2F;h2&gt;
&lt;p&gt;The word transducer has a long history. If you look for the definition you&#x27;re going to find something like this:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;A transducer is a device that converts energy from one form to another. Usually a transducer converts a signal in one form of energy to a signal in another. -- &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Transducer&quot;&gt;Wikipedia&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;We&#x27;re definitively not talking about devices in this post. But it does come close to what we actually want. You see, transducer (in our context) will help us process data from a collection and can also potentially transform the entire collection from one data type to another.&lt;&#x2F;p&gt;
&lt;p&gt;This next definition gets closer to what we want to achieve:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Composable algorithmic transformations&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;I know, it doesn&#x27;t seem like it helps. So, the idea here is that we can compose operations in a declarative and efficient way, that can also be used in multiple types of data. That&#x27;s it. Of course it&#x27;s easier said than done.&lt;&#x2F;p&gt;
&lt;p&gt;How do we do all that?&lt;&#x2F;p&gt;
&lt;p&gt;Good question. This is going to be a trip, better start with baby steps. First, let&#x27;s ask ourselves...&lt;&#x2F;p&gt;
&lt;h2 id=&quot;why&quot;&gt;Why?&lt;&#x2F;h2&gt;
&lt;p&gt;I&#x27;ll answer that with an example. Imagine a common scenario. Say that we have an array and we want to filter it. What do we do? Use &lt;code&gt;.filter&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ 2 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All looks good. Now we get a new requirement, we need to transform the values that pass the test. No problem, we can use &lt;code&gt;.map&lt;&#x2F;code&gt; for that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `The number is: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ &amp;quot;The number is: 2&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Great. Everything is fine... until one day, because of reasons, we are forced to change &lt;code&gt;data&lt;&#x2F;code&gt; and make it a &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Set&quot;&gt;Set&lt;&#x2F;a&gt;. After we make the change we see this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Uncaught TypeError: data.filter is not a function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;How can we solve this? One way would be using a &lt;code&gt;for..of&lt;&#x2F;code&gt; loop.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `The number is: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; filtered&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    filtered&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;filtered&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Set [ &amp;quot;The number is: 2&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The good news is this would work on any data type that implements the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Iteration_protocols&quot;&gt;iterable protocol&lt;&#x2F;a&gt;. The bad news is that in order to add another &quot;operation&quot; we need to change the code inside the &lt;code&gt;for&lt;&#x2F;code&gt; loop.&lt;&#x2F;p&gt;
&lt;p&gt;Wait... what&#x27;s wrong with that?&lt;&#x2F;p&gt;
&lt;p&gt;Bear with me for a moment. Let&#x27;s compare. Say that we have our loop.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What do we do when we want to filter? Add code inside the block.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  for(let number of data) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   if(is_even(number)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     filtered.add(number);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What do we do when we want to transform a value? Add code inside the block.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  for(let number of data) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if(is_even(number)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;     filtered.add(number);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     filtered.add(add_message(number));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is going to happen every time we want to add a feature to our loop. Ever heard of the phrase &quot;open for extension, but closed for modification.&quot;? That&#x27;s exactly what I want. Right now to extend the &lt;code&gt;for&lt;&#x2F;code&gt; loop I need to modify it, it&#x27;s not like is a terrible idea, is just that we can find a more &quot;elegant&quot; way to achieve our goal.&lt;&#x2F;p&gt;
&lt;p&gt;Now let&#x27;s take a look at our first version, the one that had &lt;code&gt;data&lt;&#x2F;code&gt; as an array. We want to filter, what do we do? Add a function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We want to transform things, what do we do? Add a function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; data.filter(is_even);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; data.filter(is_even).map(add_message);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;See what I mean? I&#x27;m not going to claim this is better, let&#x27;s just say it&#x27;s more &quot;expressive&quot;. In this case when we want to extend our process we compose functions.&lt;&#x2F;p&gt;
&lt;p&gt;But as we all know this is not a perfect solution. We already came across a problem: not every collection implements these methods. Another problem that may arise has to do with performance. Each method is the equivalent of a &lt;code&gt;for&lt;&#x2F;code&gt; loop, so it may not be the best idea to have a long chain of &lt;code&gt;filter&lt;&#x2F;code&gt;s and &lt;code&gt;map&lt;&#x2F;code&gt;s.&lt;&#x2F;p&gt;
&lt;p&gt;This is where transducers shine, with them we can build a chain of operations in a way that&#x27;s efficient and declarative. They are not going to be as fast as a &lt;code&gt;for&lt;&#x2F;code&gt; loop, but it may be good way to improve performance when you have a long chain of functions and a collection with many, many items.&lt;&#x2F;p&gt;
&lt;p&gt;Unlike array methods transducers are not attached to a prototype, this gives us the opportunity to reuse the exact same function in multiple types of collections. We could for example implement &lt;code&gt;filter&lt;&#x2F;code&gt; as a transducer once and use that with arrays, &lt;code&gt;Set&lt;&#x2F;code&gt;s, &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Statements&#x2F;function*&quot;&gt;generators&lt;&#x2F;a&gt; and other types. Sound great, right?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-do-they-work&quot;&gt;How do they work?&lt;&#x2F;h2&gt;
&lt;p&gt;The magic behind transducers lies in a term I mentioned in the requirements section: &lt;code&gt;reducer&lt;&#x2F;code&gt;. Specifically higher order &lt;code&gt;reducer&lt;&#x2F;code&gt;s.&lt;&#x2F;p&gt;
&lt;p&gt;&quot;Higher order reducer&quot;. Now that&#x27;s a lot. Breathe, take a moment, move on when you&#x27;re ready.&lt;&#x2F;p&gt;
&lt;p&gt;For the time being you can think of transducers as functions that take a &lt;code&gt;reducer&lt;&#x2F;code&gt; as an argument and return another &lt;code&gt;reducer&lt;&#x2F;code&gt;. It turns out that (with a little bit of magic) we can combine &lt;code&gt;reducer&lt;&#x2F;code&gt;s using function composition. This handy little feature is the one that will allow us to make a chain of operations like the one in our example where we had &lt;code&gt;filter&lt;&#x2F;code&gt; and then &lt;code&gt;map&lt;&#x2F;code&gt;. Now, it won&#x27;t look exactly the same, our transducers would compose like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Before you ask, there is nothing magical in &lt;code&gt;compose&lt;&#x2F;code&gt;. That is a fairly generic function. The only thing it does is passing values from one function to the next. We can implement that ourselves.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduceRight&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we combine transducers using &lt;code&gt;compose&lt;&#x2F;code&gt; what we get in return is another transducer. But that&#x27;s not the end of the story, because a transducer returns a &lt;code&gt;reducer&lt;&#x2F;code&gt; we need to do something with that, and what other function do you know that needs a &lt;code&gt;reducer&lt;&#x2F;code&gt;? Our friend &lt;code&gt;reduce&lt;&#x2F;code&gt;, of course. We&#x27;ll be treating &lt;code&gt;reduce&lt;&#x2F;code&gt; like a protocol, it will give us the opportunity to process each item in the collection and also transform the collection itself.&lt;&#x2F;p&gt;
&lt;p&gt;Enough theory for now, let&#x27;s do something. Let&#x27;s make a &lt;code&gt;filter&lt;&#x2F;code&gt; transducer.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;making-a-transducer&quot;&gt;Making a transducer&lt;&#x2F;h3&gt;
&lt;h4 id=&quot;step-1-gather-all-the-arguments&quot;&gt;Step 1: Gather all the arguments&lt;&#x2F;h4&gt;
&lt;p&gt;First things first, we have to create the function and gather everything we need. What do we need? A function that should return &lt;code&gt;true&lt;&#x2F;code&gt; or &lt;code&gt;false&lt;&#x2F;code&gt;, a predicate.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s a good start but is not enough. We know that at some point we need to compose this with another transducer. So we also need to receive a &lt;code&gt;reducer&lt;&#x2F;code&gt;, this will be the next &quot;step&quot; in the composition.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If it&#x27;s still not clear, remember in our previous example we wanted this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here is what&#x27;s going to happen, &lt;code&gt;map(add_message)&lt;&#x2F;code&gt; is going to give us a &lt;code&gt;reducer&lt;&#x2F;code&gt; and that is going to be the &lt;code&gt;next&lt;&#x2F;code&gt; parameter in &lt;code&gt;filter&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Some of you might be thinking that&#x27;s not going to work, I only pass &lt;code&gt;is_even&lt;&#x2F;code&gt; to &lt;code&gt;filter&lt;&#x2F;code&gt;, how are we going to get &lt;code&gt;next&lt;&#x2F;code&gt;? Let&#x27;s deal with that later.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;step-2-return-a-reducer&quot;&gt;Step 2: Return a reducer&lt;&#x2F;h4&gt;
&lt;p&gt;In practice a &lt;code&gt;reducer&lt;&#x2F;code&gt; is nothing more than a binary function. Let&#x27;s return that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; ???&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h4 id=&quot;step-3-implement-the-rest&quot;&gt;Step 3: Implement the rest&lt;&#x2F;h4&gt;
&lt;p&gt;Okay, so we are (almost) done with the structure of the transducer. What comes next is the logic for our operation. And what we want to do is copy the behavior of &lt;code&gt;Array.filter&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here we take the predicate, we evaluate it and decide if we want to move on to the next step.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;step-4-partial-application&quot;&gt;Step 4: Partial application&lt;&#x2F;h4&gt;
&lt;p&gt;Here is where the magic comes. We know how we want to use &lt;code&gt;filter&lt;&#x2F;code&gt; but right now it&#x27;s not going to work. &lt;code&gt;filter&lt;&#x2F;code&gt; needs to be smart enough to know when is going to execute our logic. When is that? When we have gathered all the arguments.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;_next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; _next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is just one way to achieve partial application. It doesn&#x27;t have to be this way.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;using-a-transducer&quot;&gt;Using a transducer&lt;&#x2F;h3&gt;
&lt;p&gt;In theory we already have something useful. Now we need a &lt;code&gt;reduce&lt;&#x2F;code&gt; function. Fortunately the &lt;code&gt;Array&lt;&#x2F;code&gt; prototype has one that we can use. Let&#x27;s start our test with just one transducer.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;), []);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ 2 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It actually works! Now let&#x27;s expand our data set. Say that now we have negative numbers in &lt;code&gt;data&lt;&#x2F;code&gt;, but we don&#x27;t want those. Let&#x27;s create another filter. Here is where composition comes into play.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;), []);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ 2 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Nice, we got the same result. Let&#x27;s do something else, how about adding another operation?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transform&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;_next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transform&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; _next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transform&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The behavior is the same from &lt;code&gt;Array.map&lt;&#x2F;code&gt;. In this case we transform the value before going to the next step. Let&#x27;s put that in our example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;), []);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ &amp;quot;The number is: 2&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is good, very good. There is one more detail we need to address, compatibility. I did mention that transducers work on different types but in here we are using &lt;code&gt;Array.reduce&lt;&#x2F;code&gt;. We actually need to control the &lt;code&gt;reduce&lt;&#x2F;code&gt; function, so let&#x27;s make our own.&lt;&#x2F;p&gt;
&lt;p&gt;Since javascript has the iterable protocol, we can use that to save ourselves some troubles. With this our transducers will be compatible with multiple types of collections.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To test this let&#x27;s change our example, now &lt;code&gt;data&lt;&#x2F;code&gt; is going to be a &lt;code&gt;Set&lt;&#x2F;code&gt;. For this to work we need to change the &lt;code&gt;combine&lt;&#x2F;code&gt; function, so that it knows how to assemble a &lt;code&gt;Set&lt;&#x2F;code&gt;. We also need to change the initial value for &lt;code&gt;reduce&lt;&#x2F;code&gt;. Everything else stays the same.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Set [ &amp;quot;The number is: 2&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Do note that the result doesn&#x27;t have to be a &lt;code&gt;Set&lt;&#x2F;code&gt;, we can convert &lt;code&gt;data&lt;&#x2F;code&gt; from a &lt;code&gt;Set&lt;&#x2F;code&gt; to an &lt;code&gt;Array&lt;&#x2F;code&gt; if we wanted to. Again, we just need a different combine function and a new initial value in &lt;code&gt;reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Everything is awesome but there is one more thing we can do to improve the &quot;experience&quot;. We can create a helper function called &lt;code&gt;transduce&lt;&#x2F;code&gt;, which will basically take care of some details for us.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It doesn&#x27;t look like a big deal, I know. The benefit we get from this is greater control over the &lt;code&gt;reduce&lt;&#x2F;code&gt; function, now we could have multiple implementations and choose which one to use according to the type of &lt;code&gt;collection&lt;&#x2F;code&gt;. For now we are just going to stick with our home made &lt;code&gt;reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Taking this one step further, we could even match a data type with a &quot;combine&quot; function so it&#x27;s easier to use.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;=&lt;&#x2F;span&gt;&lt;span&gt; rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Into&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [],&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  string&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can have that smart partial application but this time that effect is handled by the &lt;code&gt;curry&lt;&#x2F;code&gt; function. So we can use it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Into&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ &amp;quot;The number is: 2&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; some_process&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Into&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;some_process&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ &amp;quot;The number is: 2&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;You can check the full example &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;VonHeikemen&#x2F;a6b2b2e27ea999e87ebc30cf9c039295&quot;&gt;here&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now we possess truly reusable &quot;operations&quot;. We didn&#x27;t have to implement a &lt;code&gt;filter&lt;&#x2F;code&gt; for &lt;code&gt;Set&lt;&#x2F;code&gt; and another for arrays. In this contrived example it might not look like much, but imagine having an arsenal of operations like &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;rxjs.dev&#x2F;api&quot;&gt;RxJS&lt;&#x2F;a&gt; and being able to apply it to different kinds of collections. And the only thing you need to do to make it compatible is to provide a &lt;code&gt;reduce&lt;&#x2F;code&gt; function. The composition model also encourage us to solve our problems one function at a time.&lt;&#x2F;p&gt;
&lt;p&gt;There is one more thing you need to know.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;this-isn-t-their-final-form&quot;&gt;This isn&#x27;t their final form&lt;&#x2F;h2&gt;
&lt;p&gt;So far I&#x27;ve been showing transducers as functions that return a &lt;code&gt;reducer&lt;&#x2F;code&gt;, but that was just to show you the idea behind them. These things work but the problem is they are limited. There are a few things that our implementation doesn&#x27;t support.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;An initialization hook: If the initial value is not provided, the transducer should have the opportunity to produce one.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Early termination: A transducer should be able to send a &quot;signal&quot; to terminate the process and return the current value processed. Almost like the &lt;code&gt;break&lt;&#x2F;code&gt; keyword in a &lt;code&gt;for&lt;&#x2F;code&gt; loop.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;A completion hook: A function that runs at the end of the process, basically when there are no more values to process.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Because of this many articles that talk about transducer tell you to use a library.&lt;&#x2F;p&gt;
&lt;p&gt;The only libraries I know that have support for transducers are these:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;cognitect-labs&#x2F;transducers-js&quot;&gt;transducers-js&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;ramdajs.com&#x2F;docs&#x2F;&quot;&gt;ramda&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;follow-the-protocol&quot;&gt;Follow the protocol&lt;&#x2F;h2&gt;
&lt;p&gt;We know what make transducers tick, now let&#x27;s find out how one might implement a transducer the right way. For this we will follow the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;cognitect-labs&#x2F;transducers-js#the-transducer-protocol&quot;&gt;protocol&lt;&#x2F;a&gt; established in the &lt;em&gt;transducer-js&lt;&#x2F;em&gt; library.&lt;&#x2F;p&gt;
&lt;p&gt;The rules say that a transducer must be an object with this shape.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;@@transducer&#x2F;init&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;* ???? *&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;@@transducer&#x2F;result&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;@@transducer&#x2F;step&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; ???&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;@@transducer&#x2F;init&lt;&#x2F;strong&gt;: This is where we can return an initial value, if for some reason we need one. The default behavior for this is to delegate the task to the next transducer in the composition, with a little luck someone might return something useful.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;@@transducer&#x2F;result&lt;&#x2F;strong&gt;: This one runs when the process in completed. As with &lt;code&gt;@@transducer&#x2F;init&lt;&#x2F;code&gt;, the default behavior that is expected is to delegate the task to the next step.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;@@transducer&#x2F;step&lt;&#x2F;strong&gt;: This is where the core logic for the transducers lies. This is basically the &lt;code&gt;reducer&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We are not done yet, we also need a way to signal the end of the process and return the current value we have so far. For this, the protocol gives us a special object they call &lt;code&gt;reduced&lt;&#x2F;code&gt;. The idea is that when the &lt;code&gt;reduce&lt;&#x2F;code&gt; function &quot;sees&quot; this object it terminates the whole process. &lt;code&gt;reduced&lt;&#x2F;code&gt; should have this shape.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; reduced&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;@@transducer&#x2F;reduced&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;  &amp;#39;@@transducer&#x2F;value&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; something&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; the current state of the process&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;a-true-transducer&quot;&gt;A true transducer&lt;&#x2F;h3&gt;
&lt;p&gt;Now it is time to apply everything we have learned so far. Let&#x27;s re-implement &lt;code&gt;filter&lt;&#x2F;code&gt;, the right way. We can do it, it will mostly stay the same.&lt;&#x2F;p&gt;
&lt;p&gt;We begin with a function that returns an object.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;For the &lt;code&gt;init&lt;&#x2F;code&gt; hook, what do we need to do? Nothing, really. Then we delegate.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function filter(predicate, next) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     &amp;#39;@@transducer&#x2F;init&amp;#39;: function() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       return next[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When the process is completed, what do we need to do? Nothing. You know the drill.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function filter(predicate, next) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      &amp;#39;@@transducer&#x2F;init&amp;#39;: function() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return next[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     &amp;#39;@@transducer&#x2F;result&amp;#39;: function(state) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       return next[&amp;#39;@@transducer&#x2F;result&amp;#39;](state);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;For the grand finale, the &lt;code&gt;reducer&lt;&#x2F;code&gt; itself.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function filter(predicate, next) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      &amp;#39;@@transducer&#x2F;init&amp;#39;: function() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return next[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      &amp;#39;@@transducer&#x2F;result&amp;#39;: function(state) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return next[&amp;#39;@@transducer&#x2F;result&amp;#39;](state);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     &amp;#39;@@transducer&#x2F;step&amp;#39;: function(state, value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       if(predicate(value)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;         return next[&amp;#39;@@transducer&#x2F;step&amp;#39;](state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Oops, let&#x27;s not forget the secret sauce.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function filter(predicate, next) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   if(arguments.length === 1) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     return (_next) =&amp;gt; filter(predicate, _next);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      &amp;#39;@@transducer&#x2F;init&amp;#39;: function() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return next[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      &amp;#39;@@transducer&#x2F;result&amp;#39;: function(state) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return next[&amp;#39;@@transducer&#x2F;result&amp;#39;](state);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      &amp;#39;@@transducer&#x2F;step&amp;#39;: function(state, value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        if(predicate(value)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          return next[&amp;#39;@@transducer&#x2F;step&amp;#39;](state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We have our transducer, now we have a problem: we don&#x27;t have a &lt;code&gt;reduce&lt;&#x2F;code&gt; function capable of using it.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;reduce-enhanced&quot;&gt;reduce enhanced&lt;&#x2F;h3&gt;
&lt;p&gt;We need to do a few tweaks to our &lt;code&gt;reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Remember this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;First, we need to use the &lt;code&gt;init&lt;&#x2F;code&gt; hook.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; function reduce(reducer, initial, collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; function reduce(transducer, initial, collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   if(arguments.length === 2) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     collection = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     initial = transducer[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    let state = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(let value of collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      state = reducer(state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When the function gets two arguments the collection will be stored in &lt;code&gt;initial&lt;&#x2F;code&gt; and &lt;code&gt;collection&lt;&#x2F;code&gt; will be &lt;code&gt;undefined&lt;&#x2F;code&gt;, so what we do is put &lt;code&gt;initial&lt;&#x2F;code&gt; in &lt;code&gt;collection&lt;&#x2F;code&gt; and give our transducer the chance to give us an initial state.&lt;&#x2F;p&gt;
&lt;p&gt;Next, we call the &lt;code&gt;reducer&lt;&#x2F;code&gt; function, which is now in &lt;code&gt;@@transducer&#x2F;step&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function reduce(transducer, initial, collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if(arguments.length === 2) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      collection = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      initial = transducer[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    let state = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(let value of collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;     state = reducer(state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     state = transducer[&amp;#39;@@transducer&#x2F;step&amp;#39;](state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we need to evaluate the return value of the &lt;code&gt;reducer&lt;&#x2F;code&gt; and see if we should stop the process.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function reduce(transducer, initial, collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if(arguments.length === 2) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      collection = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      initial = transducer[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    let state = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(let value of collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      state = transducer[&amp;#39;@@transducer&#x2F;step&amp;#39;](state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     if(state != null &amp;amp;&amp;amp; state[&amp;#39;@@transducer&#x2F;reduced&amp;#39;]) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       state = state[&amp;#39;@@transducer&#x2F;value&amp;#39;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       break;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Lastly we need to make sure our transducer knows the process is done.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function reduce(transducer, initial, collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if(arguments.length === 2) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      collection = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      initial = transducer[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    let state = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(let value of collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      state = transducer[&amp;#39;@@transducer&#x2F;step&amp;#39;](state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      if(state != null &amp;amp;&amp;amp; state[&amp;#39;@@transducer&#x2F;reduced&amp;#39;]) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        state = state[&amp;#39;@@transducer&#x2F;value&amp;#39;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        break;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   return transducer[&amp;#39;@@transducer&#x2F;result&amp;#39;](state);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But I&#x27;m not done yet. There is an extra step I will like to do. You might notice that I renamed &lt;code&gt;reducer&lt;&#x2F;code&gt; to &lt;code&gt;transducer&lt;&#x2F;code&gt;, I would like for this to keep working with &quot;normal&quot; &lt;code&gt;reducer&lt;&#x2F;code&gt;s like the ones we use with &lt;code&gt;Array.reduce&lt;&#x2F;code&gt;. So, we will create a transducer that just wraps an existent &lt;code&gt;reducer&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; to_transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;typeof&lt;&#x2F;span&gt;&lt;span&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;@@transducer&#x2F;step&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;function&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;@@transducer&#x2F;init&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt;      throw&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Method not implemented&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;@@transducer&#x2F;result&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;@@transducer&#x2F;step&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now let&#x27;s use it in &lt;code&gt;reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function reduce(transducer, initial, collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   transducer = to_transducer(transducer);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    if(arguments.length === 2) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      collection = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      initial = transducer[&amp;#39;@@transducer&#x2F;init&amp;#39;]();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    let state = initial;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(let value of collection) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      state = transducer[&amp;#39;@@transducer&#x2F;step&amp;#39;](state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      if(state != null &amp;amp;&amp;amp; state[&amp;#39;@@transducer&#x2F;reduced&amp;#39;]) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        state = state[&amp;#39;@@transducer&#x2F;value&amp;#39;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        break;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return transducer[&amp;#39;@@transducer&#x2F;result&amp;#39;](state);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now is time to test the result of all our hard work.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; to_transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)), [],&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array(3) [ 1, 2, 3 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Awesome, everything works just fine. But this is too much work. This is why we have that &lt;code&gt;transduce&lt;&#x2F;code&gt; helper function, but right now it&#x27;s missing something, we need to add &lt;code&gt;to_transducer&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; collection&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    initial&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    collection&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s go again.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [],&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array(3) [ 1, 2, 3 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now let&#x27;s test the composition.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_positive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;combine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [],&lt;&#x2F;span&gt;&lt;span&gt; transducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Array [ 2 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;You can check the full example &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;VonHeikemen&#x2F;a70479feeb59a26cd5f217ea752cf115&quot;&gt;here&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now we are officially done. There is nothing else to do. I think you already have enough information to make your own transducers.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;You made it! You reached the end of the post. I must congratulate you, specially if you understood everything in a single read, this is not an easy one. Celebrate, you deserve it.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, today we learned that transducers (in javascript) are transformations that work across multiple types of collections, as long as they provide a compatible &lt;code&gt;reduce&lt;&#x2F;code&gt; function. They also have some handy features like early termination (just like a &lt;code&gt;for&lt;&#x2F;code&gt; loop), they provide hooks that run at the beginning and end of a process, and they can compose directly just like regular functions. Lastly, in theory they also should be efficient, though they are not faster than a &lt;code&gt;for&lt;&#x2F;code&gt; loop. Regardless, they may not be the fastest things around but their compatibility with different types of collections and the declarative nature of the composition makes them a powerful tool.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;getify&#x2F;Functional-Light-JS&#x2F;blob&#x2F;master&#x2F;manuscript&#x2F;apA.md&#x2F;#appendix-a-transducing&quot;&gt;Functional-Light JavaScript | Appendix A: Transducing&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.jeremydaly.com&#x2F;transducers-supercharge-functional-javascript&#x2F;&quot;&gt;Transducers: Supercharge your functional JavaScript&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jrsinclair.com&#x2F;articles&#x2F;2019&#x2F;magical-mystical-js-transducers&#x2F;&quot;&gt;Magical, Mystical JavaScript Transducers&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;medium.com&#x2F;javascript-scene&#x2F;transducers-efficient-data-processing-pipelines-in-javascript-7985330fe73d&quot;&gt;Transducers: Efficient Data Processing Pipelines in JavaScript&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=6mTbuzafcII&quot;&gt;&quot;Transducers&quot; by Rich Hickey (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;cognitect-labs&#x2F;transducers-js&quot;&gt;transducers-js&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>The case for reducers</title>
        <published>2020-11-22T00:00:00+00:00</published>
        <updated>2020-11-22T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/the-case-for-reducers/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/the-case-for-reducers/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/the-case-for-reducers/">&lt;p&gt;In a &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;reduce-how-and-when&#x2F;&quot;&gt;previous post&lt;&#x2F;a&gt; I talked about &lt;code&gt;.reduce&lt;&#x2F;code&gt;, how it worked and (what I think) it&#x27;s ideal use case, this time around I&#x27;ll cover some other use cases where &lt;code&gt;.reduce&lt;&#x2F;code&gt; could be a good fit. Now, you don&#x27;t have to read that post but I will assume that you at least know how &lt;code&gt;Array.reduce&lt;&#x2F;code&gt; works. By the end of this post I hope that you learn how to recognize the places where &lt;code&gt;.reduce&lt;&#x2F;code&gt; would work perfectly.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-are-we-looking-for&quot;&gt;What are we looking for?&lt;&#x2F;h2&gt;
&lt;p&gt;Patterns, we are looking for patterns. Well... just one. And to know what is it that we are looking for we need to take a look at the requirements of a &lt;code&gt;reducer&lt;&#x2F;code&gt;. Think about &lt;code&gt;reducers&lt;&#x2F;code&gt;, when you create one for &lt;code&gt;Array.reduce&lt;&#x2F;code&gt; sometimes it looks like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;accumulator&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;*&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    some logic&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  *&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; accumulator&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We usually return a modified copy of &lt;code&gt;accumulator&lt;&#x2F;code&gt; but that&#x27;s not important right now, the point is that we return the same &quot;type&quot; we got in the first parameter. Then the &lt;strong&gt;shape of the function&lt;&#x2F;strong&gt; would be something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(Accumulator, Value) -&amp;gt; Accumulator&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is a concrete example but I want you to see it in a more abstract way. What we are really after are functions that have this shape.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(A, B) -&amp;gt; A&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is basically it. For a &lt;code&gt;reducer&lt;&#x2F;code&gt; to do it&#x27;s job the only thing it needs is a binary function capable of returning the same type of its first parameter.&lt;&#x2F;p&gt;
&lt;p&gt;Still confused? Don&#x27;t worry I&#x27;ll spend the rest of this post showing examples where this pattern might show up.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;use-cases&quot;&gt;Use cases&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;accumulators&quot;&gt;Accumulators&lt;&#x2F;h3&gt;
&lt;p&gt;I guess this is the part where I show you a scenario where we sum an array of numbers of something like that. Let&#x27;s not do that. Let&#x27;s try a more complex scenario where an accumulator might be used.&lt;&#x2F;p&gt;
&lt;p&gt;Imagine we are in a codebase for some kind of blog system and we are making the profile page for the user. We want to show all the tags where the user has at least one article. You might want to retrieve that data from your database using a crazy query but that would take too much time, let&#x27;s do a prototype first.&lt;&#x2F;p&gt;
&lt;p&gt;So before we do things the appropriate way we transform the array of posts into a &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Set&quot;&gt;Set&lt;&#x2F;a&gt; of tags using &lt;code&gt;Array.reduce&lt;&#x2F;code&gt;, just to have something to work with.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Pretend these are complex objects&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; posts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;discuss&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;] },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;react&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;vue-is-better&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;] },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;discuss&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;] },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;] },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; dangerously_add_tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;acc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; post&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; post&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    acc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; acc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;posts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dangerously_add_tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is the result.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Set(4) [ &amp;quot;javascript&amp;quot;, &amp;quot;discuss&amp;quot;, &amp;quot;react&amp;quot;, &amp;quot;vue-is-better&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Think about the shape of our reducer. We have a &lt;code&gt;Set&lt;&#x2F;code&gt; with tags as our accumulator and our &lt;code&gt;value&lt;&#x2F;code&gt; is a &quot;post object&quot;. We could say we have this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(Set, Object) -&amp;gt; Set&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Technically &lt;code&gt;Object&lt;&#x2F;code&gt; can&#x27;t be any object, it has to have a &lt;code&gt;tags&lt;&#x2F;code&gt; property. So is more like.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(Set, Post) -&amp;gt; Set&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Anyway, this has the pattern I was talking about &lt;code&gt;(A, B) -&amp;gt; A&lt;&#x2F;code&gt;. The implementation of &lt;code&gt;dangerously_add_tags&lt;&#x2F;code&gt; demands that &lt;code&gt;B&lt;&#x2F;code&gt; must be of type &lt;code&gt;Post&lt;&#x2F;code&gt;. But in order for that function to be an effective &lt;code&gt;reducer&lt;&#x2F;code&gt; it needs to be able to return the same type of the first parameter, and we do that by returning &lt;code&gt;accumulator&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;transformations&quot;&gt;Transformations&lt;&#x2F;h3&gt;
&lt;p&gt;You&#x27;ve probably heard that you can implement other array methods using &lt;code&gt;.reduce&lt;&#x2F;code&gt;, while this is an interesting piece of trivia it&#x27;s not very useful to do so. Why would you? Doesn&#x27;t make any sense to me. What is useful about it is that you can combine the features of this methods into one. Have you ever wanted to filter and map at the same time? With &lt;code&gt;.reduce&lt;&#x2F;code&gt; you can.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s reuse our &lt;code&gt;posts&lt;&#x2F;code&gt; data here too.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; posts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;discuss&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;frameworks&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;react&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;vue-is-better&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;watercooler&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;discuss&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;functional programming&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What want to do this time is filter the ones that have the tag &lt;code&gt;discuss&lt;&#x2F;code&gt;, for those who pass the filter we want to get the category and capitalize it. How would that look like?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter_map_posts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;acc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; post&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; We&amp;#39;re filtering, y&amp;#39;all&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;post&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;includes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;discuss&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; acc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; this is the mapping part&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;post&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;	&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; acc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;posts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filter_map_posts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, []);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here is our result.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Array [ &amp;quot;Javascript&amp;quot;, &amp;quot;Watercooler&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Why does that work? Because if you check what the &lt;code&gt;reducer&lt;&#x2F;code&gt; does you would get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(Array, Post) -&amp;gt; Array&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;coordinating&quot;&gt;Coordinating&lt;&#x2F;h3&gt;
&lt;p&gt;If you&#x27;ve seen any library that has a focus on functional programming chances are you&#x27;ve come across a function called &lt;code&gt;pipe&lt;&#x2F;code&gt;. This function is used to compose any arbitrary quantity of functions. The interface is something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  some_function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  serious_stuff&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  side_effects_ahead&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The idea here is that we &quot;pipe&quot; the result of one function to the next one in the list. Is effectively coordinating function calls. In this case the example above could be written like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; side_effects_ahead&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;serious_stuff&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;some_function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you&#x27;re wondering why do I bring this up, is because we can implement &lt;code&gt;pipe&lt;&#x2F;code&gt; using &lt;code&gt;.reduce&lt;&#x2F;code&gt;. If you squint your eyes a little bit you&#x27;ll notice that what is happening in here is that we are applying functions to arguments. That&#x27;s it. We are not doing anything else.&lt;&#x2F;p&gt;
&lt;p&gt;So what?&lt;&#x2F;p&gt;
&lt;p&gt;It&#x27;s a binary operation! We turn that into a function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You know what works well with binary operations? Our friend &lt;code&gt;.reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;some_arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; some_arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The first step of &lt;code&gt;pipe&lt;&#x2F;code&gt; is gathering the list of functions and turn that into a proper array. Step two is returning the function that will trigger the function calls and get the initial state for our &lt;code&gt;.reduce&lt;&#x2F;code&gt;. At the end when you have everything in place, &lt;code&gt;.reduce&lt;&#x2F;code&gt; will take care of the rest. You can watch it in action.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; post&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  tags&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;javascript&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;discuss&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;!!&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; exciting_category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  get_prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;category&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  exclaim&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exciting_category&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;post&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Javascript!!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Cool, cool. Now, how on earth does &lt;code&gt;apply&lt;&#x2F;code&gt; follow the pattern?&lt;&#x2F;p&gt;
&lt;p&gt;Ah, good question. It&#x27;s weird but we can still make it make sense (I guess). Look at it this way.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(Anything, Function) -&amp;gt; Anything&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you have a unit of literally anything and a function, &lt;code&gt;apply&lt;&#x2F;code&gt; will work. Keep in mind that in here there is no guarantee that your pipeline of function will not explode, that&#x27;s your responsibility.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;state-changes-over-time&quot;&gt;State changes over time&lt;&#x2F;h3&gt;
&lt;p&gt;Bonus track!! This is for the frontend developers out there.&lt;&#x2F;p&gt;
&lt;p&gt;If you have spend any amount of time reading about javascript libraries for state management maybe you&#x27;ve have heard of this thing called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;redux.js.org&#x2F;&quot;&gt;redux&lt;&#x2F;a&gt;. This library takes an interesting approach because it expects the user (the developer) to provide a &lt;code&gt;reducer&lt;&#x2F;code&gt; to handle state changes. Some people like that, others don&#x27;t like it. But whether you&#x27;re team redux or not, they&#x27;re approach does make a ton of sense when you think about it. I&#x27;ll show you.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s start with the &lt;code&gt;reducer&lt;&#x2F;code&gt;. In this case we need one with this shape.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(State, Action) -&amp;gt; State&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;State&lt;&#x2F;code&gt; and &lt;code&gt;Action&lt;&#x2F;code&gt; are just objects. There is nothing fancy happening. The &lt;code&gt;State&lt;&#x2F;code&gt; will look different depending on the application, the developers can do anything they want with it. The &lt;code&gt;Action&lt;&#x2F;code&gt; on the other hand must have a &lt;code&gt;type&lt;&#x2F;code&gt; property, and &lt;code&gt;redux&lt;&#x2F;code&gt; enforces this.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s pretend this is our app&#x27;s state.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  flag&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, a miracle of engineering.&lt;&#x2F;p&gt;
&lt;p&gt;Now that we now how &lt;code&gt;State&lt;&#x2F;code&gt; looks like, and we also know what an &lt;code&gt;Action&lt;&#x2F;code&gt; needs, we can write our &lt;code&gt;reducer&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  switch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        ...&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;count +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;subtract&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        ...&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;count -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;toggle_flag&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        ...&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        flag&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; !&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;flag&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    default&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is the funny part: we don&#x27;t need &lt;code&gt;redux&lt;&#x2F;code&gt; to test this. I mean, this is just a generic &lt;code&gt;reducer&lt;&#x2F;code&gt;, we could just try it with &lt;code&gt;Array.reduce&lt;&#x2F;code&gt; first. If you do this you can see what it does right away.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; actions&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;subtract&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;subtract&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;toggle_flag&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;actions&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;actions.reduce&lt;&#x2F;code&gt; should give you another &quot;instance&quot; of your state. In our case after applying all those actions we should get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  flag&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And there you have it, the core feature of &lt;code&gt;redux&lt;&#x2F;code&gt; without &lt;code&gt;redux&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s take it one step further and introduce the concept of time. For this we will introduce a fake &lt;code&gt;redux&lt;&#x2F;code&gt; store. The store will be &quot;real&quot; but it&#x27;ll be a cheap imitation. Let&#x27;s do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; _listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    _listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    _listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;amp;&amp;amp;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; _listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt; get_state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All good? You know what&#x27;s happening in there? The part we care about the most is &lt;code&gt;dispatch&lt;&#x2F;code&gt;. This right here.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  _listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;amp;&amp;amp;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; _listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This takes care of the process of updating the current &lt;code&gt;State&lt;&#x2F;code&gt;. Like I mentioned before, the &lt;code&gt;reducer&lt;&#x2F;code&gt; is the one that deals with the logic that dictates &lt;strong&gt;how&lt;&#x2F;strong&gt; the state will change. The &lt;code&gt;Store&lt;&#x2F;code&gt; takes care of logic that dictates &lt;strong&gt;when&lt;&#x2F;strong&gt; the state is updated. Enough about that, let&#x27;s try it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;ms&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; setTimeout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; ms&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;reducer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;async function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  await&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;500&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  await&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;500&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;subtract&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  await&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;700&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  await&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;400&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;subtract&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  await&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;800&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;add&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  await&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;100&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  store&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;dispatch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;toggle_flag&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;})();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You should have this messages on your screen (or browser console) with a little delay between each of them.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;- { count: 41, flag: false }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;- { count: 42, flag: false }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;- { count: 41, flag: false }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;- { count: 42, flag: false }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;- { count: 41, flag: false }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;- { count: 42, flag: false }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;- { count: 42, flag: true }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Did you notice that the end result is the same as with &lt;code&gt;Array.reduce&lt;&#x2F;code&gt;? Now that&#x27;s cool.&lt;&#x2F;p&gt;
&lt;p&gt;If you want to play around with this using the real &lt;code&gt;redux&lt;&#x2F;code&gt;, you can mess around with this pen.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;zYBgObJ&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;Using redux&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;zYBgObJ&quot;&gt;Using redux&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;


&lt;script async src=&quot;https:&#x2F;&#x2F;static.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;


&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;I do hope by now &lt;code&gt;reducers&lt;&#x2F;code&gt; appear less scary for you. Remember, it&#x27;s just.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(A, B) -&amp;gt; A&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s it. There is no magic. If you can make any function behave like that, it&#x27;ll work wonderfully inside anything that acts like &lt;code&gt;.reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Array&#x2F;Reduce&quot;&gt;Array.prototype.reduce()&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;reduce-how-and-when&#x2F;&quot;&gt;Reduce: how and when&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;redux.js.org&#x2F;api&#x2F;store&quot;&gt;Redux: Store&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Using Vim&#x27;s abbreviations</title>
        <published>2020-11-03T00:00:00+00:00</published>
        <updated>2020-11-03T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/using-vim-abbreviations/"/>
        <id>https://vonheikemen.github.io/devlog/tools/using-vim-abbreviations/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/using-vim-abbreviations/">&lt;p&gt;One of the things vim does extremely well is automation. This time we&#x27;ll explore a feature called &quot;abbreviation&quot; and how can we use it to automate things in insert mode (you can use it in other modes but I&#x27;ll focus on insert mode). We will go from the most basic use case to some that are more elaborated. But don&#x27;t worry, we&#x27;ll take one step at a time. Let&#x27;s start.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;step-0&quot;&gt;Step 0&lt;&#x2F;h2&gt;
&lt;p&gt;Abbreviations can be assigned with the command &lt;code&gt;:ab[breviate]&lt;&#x2F;code&gt;. Since I only want to focus on insert mode I&#x27;ll be using &lt;code&gt;:iabbrev&lt;&#x2F;code&gt;. This is how you would use it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev [&amp;lt;expr&amp;gt;] [&amp;lt;buffer&amp;gt;] {abbreviation} {expansion}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here anything that&#x27;s inside a &lt;code&gt;[]&lt;&#x2F;code&gt; is optional. &lt;code&gt;&amp;lt;expr&amp;gt;&lt;&#x2F;code&gt; means that you could use a vimscript expression to create the expansion. &lt;code&gt;&amp;lt;buffer&amp;gt;&lt;&#x2F;code&gt; means that it only applies to the current buffer. &lt;code&gt;abbreviation&lt;&#x2F;code&gt; is the thing you type and that will be replaced by the &lt;code&gt;expansion&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;You can use this command in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;learnvimscriptthehardway.stevelosh.com&#x2F;chapters&#x2F;12.html&quot;&gt;autocommands&lt;&#x2F;a&gt; to make file specific abbreviations automatically. If you put something like this in your &lt;code&gt;.vimrc&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:autocmd FileType html,javascript,typescript,vue&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  \ :iabbrev &amp;lt;buffer&amp;gt; some-abbreviation some-expansion&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It would make &lt;code&gt;some-abbreviation&lt;&#x2F;code&gt; available to you in &lt;code&gt;html&lt;&#x2F;code&gt;, &lt;code&gt;javascript&lt;&#x2F;code&gt;, &lt;code&gt;typescript&lt;&#x2F;code&gt; and &lt;code&gt;vue&lt;&#x2F;code&gt; files. With this knowledge you can now start creating some.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;hello-wordl&quot;&gt;Hello wordl&lt;&#x2F;h2&gt;
&lt;p&gt;Typos. Don&#x27;t you hate them? Writing &lt;code&gt;heigth&lt;&#x2F;code&gt; and then find out something is not working in your code can be very annoying. Well, no more. Now you have the tools (I mean the command) to fix that automatically.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev heigth height&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now when you write &lt;code&gt;heigth&lt;&#x2F;code&gt; and press the &lt;code&gt;space&lt;&#x2F;code&gt; key it will become &lt;code&gt;height&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1604437302&#x2F;devlog&#x2F;using-vim-abbreviations&#x2F;1-typos_03-11-2020_16-51.gif&quot; alt=&quot;fixing a typo&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;But the fun doesn&#x27;t stop there.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;it-s-not-just-for-letters&quot;&gt;It&#x27;s not just for letters&lt;&#x2F;h2&gt;
&lt;p&gt;Just like in regular mappings (think &lt;code&gt;:map&lt;&#x2F;code&gt; command) we can use special sequences like &lt;code&gt;&amp;lt;CR&amp;gt;&lt;&#x2F;code&gt; (the &lt;code&gt;enter&lt;&#x2F;code&gt; key), &lt;code&gt;&amp;lt;Up&amp;gt;&lt;&#x2F;code&gt;, &lt;code&gt;&amp;lt;Tab&amp;gt;&lt;&#x2F;code&gt; and many more. This gives us the power to move around the cursor and create more elaborate snippets.&lt;&#x2F;p&gt;
&lt;p&gt;One of the most common things I do in a javascript file is putting a &lt;code&gt;console.log()&lt;&#x2F;code&gt;, and it&#x27;s not just me, it is so common that some text editors made for developers have a built in shortcut for that. Vim is not such editor, but we can make one.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev &amp;lt;buffer&amp;gt; con@ console.log();&amp;lt;Left&amp;gt;&amp;lt;Left&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1604438822&#x2F;devlog&#x2F;using-vim-abbreviations&#x2F;2-simple-snippet_03-11-2020_17-26.gif&quot; alt=&quot;a simple snippet&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The &lt;code&gt;@&lt;&#x2F;code&gt; sign in this case is not important, it&#x27;s just a silly convention I follow on my vim config, it&#x27;s just there to make it clear this will be expanded into something else. I use &lt;code&gt;&amp;lt;buffer&amp;gt;&lt;&#x2F;code&gt; because I don&#x27;t want this to be available in every buffer, just the ones where I can use valid javascript syntax. I would use this in an autocommand like the one I showed you before.&lt;&#x2F;p&gt;
&lt;p&gt;You&#x27;ll notice that there is a space between the parenthesis in the &lt;code&gt;log&lt;&#x2F;code&gt; function, that&#x27;s because we chose to &quot;expand it&quot; with the &lt;code&gt;space&lt;&#x2F;code&gt; key. Vim will replace the abbreviation after we press a &quot;non-keyword character&quot; and that character will be inserted after the expansion is done. Basically all the letters and a few special characters are considered &quot;keyword characters&quot; and anything that isn&#x27;t in that set will begin the expansion. Might want to check &lt;code&gt;:help &#x27;iskeyword&#x27;&lt;&#x2F;code&gt; for more details.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, if you don&#x27;t want that extra space you can begin the expansion with the sequence &lt;code&gt;&amp;lt;C-]&amp;gt;&lt;&#x2F;code&gt; that is &lt;code&gt;control + closing bracket&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;wait-did-someone-said-snippets&quot;&gt;Wait... did someone said snippets?&lt;&#x2F;h2&gt;
&lt;p&gt;Yes, yes I did. With this feature we can create some complex snippets like the ones you find in a fancy IDE. Are you in a javascript file and want to create an immediately invoked function expression (iife)? No problem.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev &amp;lt;buffer&amp;gt; iife@ (async function() {})();&amp;lt;Left&amp;gt;&amp;lt;Left&amp;gt;&amp;lt;Left&amp;gt;&amp;lt;Left&amp;gt;&amp;lt;Left&amp;gt;&amp;lt;CR&amp;gt;&amp;lt;CR&amp;gt;&amp;lt;Up&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1604442411&#x2F;devlog&#x2F;using-vim-abbreviations&#x2F;3-another-snippet_03-11-2020_18-25.gif&quot; alt=&quot;iife snippet&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;You know what? Scratch that. There is a problem. All those &lt;code&gt;&amp;lt;Left&amp;gt;&lt;&#x2F;code&gt;s are hurting me. Can you just imaging making a snippet for a &lt;code&gt;switch&#x2F;case&lt;&#x2F;code&gt;? Writing it in that style would be awful, it would work but it&#x27;ll be awful. Don&#x27;t worry there is an easy solution for this.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;escaping-insert-mode&quot;&gt;Escaping insert mode&lt;&#x2F;h3&gt;
&lt;p&gt;Since we&#x27;re basically automating keystrokes we can do a very funny thing, we can &quot;press&quot; &lt;code&gt;&amp;lt;Esc&amp;gt;&lt;&#x2F;code&gt; to go to normal mode and take advantage of all the vim goodness we can do in that mode. So, we could rewrite it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev &amp;lt;buffer&amp;gt; iife@ (async function() {})();&amp;lt;Esc&amp;gt;4hi&amp;lt;CR&amp;gt;&amp;lt;CR&amp;gt;&amp;lt;Up&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We got the same snippet but now is less awful. We replaced the five &lt;code&gt;&amp;lt;Left&amp;gt;&lt;&#x2F;code&gt;s with &lt;code&gt;&amp;lt;Esc&amp;gt;4hi&lt;&#x2F;code&gt;, a bit more cryptical but shorter. Although, if you&#x27;ve been using vim for a while you should know by now what &lt;code&gt;4hi&lt;&#x2F;code&gt; would do if you press that yourself. In fact, since we are just entering in insert mode to make one command (&lt;code&gt;4h&lt;&#x2F;code&gt;) and then going back we could simplify it a little bit.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev &amp;lt;buffer&amp;gt; iife@ (async function() {})();&amp;lt;C-o&amp;gt;4h&amp;lt;CR&amp;gt;&amp;lt;CR&amp;gt;&amp;lt;Up&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we use &lt;code&gt;&amp;lt;C-o&amp;gt;&lt;&#x2F;code&gt; (&lt;code&gt;control + o&lt;&#x2F;code&gt;) to go to normal mode, make one command and immediately go back to insert mode.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;let-s-get-real-fancy&quot;&gt;Let&#x27;s get real fancy&lt;&#x2F;h2&gt;
&lt;p&gt;How about we go one step further. Let&#x27;s make a snippet that can put the cursor in a convenient location but without messing around to much with &lt;code&gt;&amp;lt;Left&amp;gt;&lt;&#x2F;code&gt;s and &lt;code&gt;&amp;lt;Right&amp;gt;&lt;&#x2F;code&gt;s.&lt;&#x2F;p&gt;
&lt;p&gt;We could make yet another version of the &lt;code&gt;iife@&lt;&#x2F;code&gt; but I want to give you more ideas. Let&#x27;s do a &quot;traditional&quot; &lt;code&gt;for&lt;&#x2F;code&gt; loop. You know, like this one.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt;PLACEHOLDER&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;++&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;At the end of the expansion we want the cursor to be where the &lt;code&gt;{PLACEHOLDER}&lt;&#x2F;code&gt; is, this time we don&#x27;t want any &lt;code&gt;&amp;lt;Left&amp;gt;&lt;&#x2F;code&gt;s or &lt;code&gt;&amp;lt;Right&amp;gt;&lt;&#x2F;code&gt;s, we just want to get there. How do we do it? With a search. Yes, we can also make a search with &lt;code&gt;&#x2F;&lt;&#x2F;code&gt; or &lt;code&gt;?&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev &amp;lt;buffer&amp;gt; forii@ for(let i = 0; i &amp;lt;z; i++) {&amp;lt;CR&amp;gt;&amp;lt;CR&amp;gt;}&amp;lt;Esc&amp;gt;?z&amp;lt;CR&amp;gt;xi&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice the &lt;code&gt;z&lt;&#x2F;code&gt;? That&#x27;s my placeholder. After I type everything, I hit the &lt;code&gt;&amp;lt;Esc&amp;gt;&lt;&#x2F;code&gt;, press &lt;code&gt;?&lt;&#x2F;code&gt; (backward search), look for a &lt;code&gt;z&lt;&#x2F;code&gt;, hit enter to submit the search (the &lt;code&gt;&amp;lt;CR&amp;gt;&lt;&#x2F;code&gt; part) and that will take me where I want, finally the &lt;code&gt;xi&lt;&#x2F;code&gt; part deletes the &lt;code&gt;z&lt;&#x2F;code&gt; and lets me go back to insert mode.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1604449379&#x2F;devlog&#x2F;using-vim-abbreviations&#x2F;4-with-placeholder_03-11-2020_20-17.gif&quot; alt=&quot;a nice for loop&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;more-powerrrr&quot;&gt;More Powerrrr&lt;&#x2F;h2&gt;
&lt;p&gt;What else can we do? An argument. Using a word like a function argument. Oooh, that would be cool. Got the perfect use case for this. Let&#x27;s do it.&lt;&#x2F;p&gt;
&lt;p&gt;Do you know about &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;sdras&#x2F;vue-vscode-snippets&quot;&gt;vue-vscode-snippets&lt;&#x2F;a&gt;? No. That&#x27;s okay, I&#x27;ll tell you. They are vue snippets for vscode. One of those snippets is called &lt;code&gt;vimport-export&lt;&#x2F;code&gt;, it creates this boilerplate.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;import&lt;&#x2F;span&gt;&lt;span&gt; Name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;@&#x2F;components&#x2F;Name.vue&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;export default&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  component&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    Name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The cool thing about it is that it uses the multiple cursor feature of vscode to let you replace &lt;code&gt;Name&lt;&#x2F;code&gt; with the name of your component. I&#x27;ll be honest, I&#x27;m jealous, I want multiple cursor in vim. I know there is a plugin, but I want it to be a native feature. Anyway, we don&#x27;t need no stinking multiple cursors, we literally just need to put the same word in multiple places.&lt;&#x2F;p&gt;
&lt;p&gt;This is how is going to be: I put a word (the name of my component) and then the abbreviation. Like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;MyComponent vcomp@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What&#x27;s going to happen is, I&#x27;m going to put &lt;code&gt;MyComponent&lt;&#x2F;code&gt; in a register and just paste it anywhere I need to. You ready? Let&#x27;s start with the import part.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev &amp;lt;buffer&amp;gt; vcomp@ &amp;lt;Esc&amp;gt;bvediimport &amp;lt;C-o&amp;gt;P from &amp;#39;@&#x2F;components&#x2F;&amp;lt;C-o&amp;gt;P.vue&amp;#39;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The key component of this is &lt;code&gt;&amp;lt;Esc&amp;gt;bved&lt;&#x2F;code&gt;. &lt;code&gt;&amp;lt;Esc&amp;gt;&lt;&#x2F;code&gt; will take us right in normal mode, &lt;code&gt;b&lt;&#x2F;code&gt; will take the cursor back to the beginning of the previous word (the component name). &lt;code&gt;ved&lt;&#x2F;code&gt; will select the entire word and delete it. Thanks to the way &lt;code&gt;d&lt;&#x2F;code&gt; works we will have the component available in a register just waiting.&lt;&#x2F;p&gt;
&lt;p&gt;Now that&#x27;s one part of the problem, and to be fair we could easily make the other part. Let&#x27;s take it one step further. The common use case for this abbreviation would be to register a component inside another component, in this case we already have an &lt;code&gt;export default&lt;&#x2F;code&gt; object, and what we want to do is add it to the &lt;code&gt;components&lt;&#x2F;code&gt; property. Basically we want to automate this process:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1604454412&#x2F;devlog&#x2F;using-vim-abbreviations&#x2F;5-vexport_03-11-2020_21-40.gif&quot; alt=&quot;register component&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The second part starts with &lt;code&gt;&amp;lt;Esc&amp;gt;&lt;&#x2F;code&gt; key to get to normal mode, then we use &lt;code&gt;&#x2F;&lt;&#x2F;code&gt; to search for &lt;code&gt;components: {&lt;&#x2F;code&gt;, we submit the search and then we enter insert mode in the line below using &lt;code&gt;o&lt;&#x2F;code&gt;, we use &lt;code&gt;&amp;lt;Tab&amp;gt;&lt;&#x2F;code&gt; to get to the right spot then go paste the component name (which we have in the register) and put a comma. We could stop there but I want to preserve the order of my imports. Next, we take the whole line where the component is, so we hit &lt;code&gt;&amp;lt;Esc&amp;gt;dd&lt;&#x2F;code&gt;. Then go up and to the end of the line, that will be &lt;code&gt;k$&lt;&#x2F;code&gt;. To go the bottom of the nested object we press &lt;code&gt;%&lt;&#x2F;code&gt;, once we&#x27;re there we need to create a newline so we hit &lt;code&gt;o&lt;&#x2F;code&gt; again. This is the tricky part, we hit &lt;code&gt;&amp;lt;Esc&amp;gt;&lt;&#x2F;code&gt; to go to normal mode, paste the component in this place using &lt;code&gt;P&lt;&#x2F;code&gt; (capital &lt;code&gt;p&lt;&#x2F;code&gt;). That&#x27;s good but now we have a new empty line, we delete that with &lt;code&gt;jdd&lt;&#x2F;code&gt;. Finally we go back to the line of our import with &lt;code&gt;2&amp;lt;C-o&amp;gt;&lt;&#x2F;code&gt; (we need to jump twice so we need that 2). So... we need this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&amp;lt;Esc&amp;gt;&#x2F;components: {&amp;lt;CR&amp;gt;o&amp;lt;Tab&amp;gt;&amp;lt;Esc&amp;gt;pa,&amp;lt;Esc&amp;gt;ddk$%ko&amp;lt;Esc&amp;gt;Pjdd2&amp;lt;C-o&amp;gt;a&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Everything together looks like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;:iabbrev &amp;lt;buffer&amp;gt; vcomp@ &amp;lt;Esc&amp;gt;bvediimport &amp;lt;C-o&amp;gt;P from &amp;#39;@&#x2F;components&#x2F;&amp;lt;C-o&amp;gt;P.vue&amp;#39;;&amp;lt;Esc&amp;gt;&#x2F;components: {&amp;lt;CR&amp;gt;o&amp;lt;Tab&amp;gt;&amp;lt;Esc&amp;gt;pa,&amp;lt;Esc&amp;gt;ddk$%ko&amp;lt;Esc&amp;gt;Pjdd2&amp;lt;C-o&amp;gt;a&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1604456390&#x2F;devlog&#x2F;using-vim-abbreviations&#x2F;6-vcomp_03-11-2020_22-15.gif&quot; alt=&quot;register component complete&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;p&gt;If you want to have some fun try to make an abbreviation that takes this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Example vvcomp@&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;export default&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And turn it into this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;import&lt;&#x2F;span&gt;&lt;span&gt; Example&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;@&#x2F;components&#x2F;Example.vue&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;export default&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  components&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    Example&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;the-cherry-on-top&quot;&gt;The cherry on top&lt;&#x2F;h3&gt;
&lt;p&gt;I shit you not. Abbreviations work inside macros. Try recording this macro and play it multiple times.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;0ea vcomp@^]^]j&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;^]&lt;&#x2F;code&gt; is the &lt;code&gt;&amp;lt;Esc&amp;gt;&lt;&#x2F;code&gt; key.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;res.cloudinary.com&#x2F;vonheikemen&#x2F;image&#x2F;upload&#x2F;v1604457566&#x2F;devlog&#x2F;using-vim-abbreviations&#x2F;7-macro_03-11-2020_22-34.gif&quot; alt=&quot;macros&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;That&#x27;s it. That&#x27;s all I got for you today. I you hope found something useful or at the very least learned something funny you&#x27;ll probably never use.&lt;&#x2F;p&gt;
&lt;p&gt;If you need any more ideas check out &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;dotfiles&#x2F;blob&#x2F;master&#x2F;my-configs&#x2F;vim&#x2F;snippets.vim&quot;&gt;my snippets&lt;&#x2F;a&gt;. If you have any interesting ideas, let me know.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;vimhelp.org&#x2F;map.txt.html#Abbreviations&quot;&gt;:help abbreviations&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;learnvimscriptthehardway.stevelosh.com&#x2F;chapters&#x2F;08.html&quot;&gt;Learn Vimscript the Hard Way: Abbreviations&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>An introduction to Monads (in js)</title>
        <published>2020-09-02T00:00:00+00:00</published>
        <updated>2020-09-02T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/an-introduction-to-monads-in-js/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/an-introduction-to-monads-in-js/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/an-introduction-to-monads-in-js/">&lt;p&gt;Oh the infamous M word. The one we don&#x27;t speak about in javascript. Well, today we are going talk about it, specifically we are going to &quot;review&quot; one definition I really like, the only one that doesn&#x27;t make my head explode. In order to keep our sanity we are just going to explore the aspects we can model using javascript. Everyone ready? Let us begin.&lt;&#x2F;p&gt;
&lt;p&gt;Here it is. This is the easy one, I swear. Monads are...&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;pointed functors that can flatten.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;You said you were ready. Anyway, we can do this. Once you understand the behaviour of a functor the rest will fall into place.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;enter-functors&quot;&gt;Enter Functors&lt;&#x2F;h2&gt;
&lt;p&gt;From a &lt;em&gt;javascripty&lt;&#x2F;em&gt; point of view you can think of them as containers with a very special feature: they allow you to transform their inner value in any way you see fit without leaving said container.&lt;&#x2F;p&gt;
&lt;p&gt;Isn&#x27;t that intriguing? How would that look like in code. Let&#x27;s try to make the simplest functor we can think of.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-box&quot;&gt;The Box&lt;&#x2F;h3&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Box&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Box&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What happens in here? Well, we created a &lt;code&gt;Box&lt;&#x2F;code&gt; specifically designed to hold a &lt;code&gt;data&lt;&#x2F;code&gt; value and the only way to gain access to the value is through the &lt;code&gt;map&lt;&#x2F;code&gt; method. This &lt;code&gt;map&lt;&#x2F;code&gt; thing takes a function &lt;code&gt;fn&lt;&#x2F;code&gt; as an argument, applies that function to &lt;code&gt;data&lt;&#x2F;code&gt; and puts the result back in another &lt;code&gt;Box&lt;&#x2F;code&gt;. I must tell you that not all functors look like this, but in general this is the pattern they all follow. Let&#x27;s use it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; xbox&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Box&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;xbox&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; X&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Object { map: map() }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So, that &lt;code&gt;Box&lt;&#x2F;code&gt; seems um... useless. Yeah, that&#x27;s by design but not mine, this is actually the &lt;code&gt;Identity&lt;&#x2F;code&gt; functor. It may not be useful in our day to day coding but for educational purposes it works like a charm.&lt;&#x2F;p&gt;
&lt;p&gt;What is the benefit of these functor things? By adding this tiny layer of abstraction we can separate an &quot;effect&quot; from a pure computation. To illustrate this let&#x27;s take a look at one functor with an actual purpose.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;a-familiar-face&quot;&gt;A familiar face&lt;&#x2F;h3&gt;
&lt;p&gt;You may or may not know this already but arrays follow the pattern I have described for the &lt;code&gt;Box&lt;&#x2F;code&gt;. Check this out.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; xbox&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;x&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;xbox&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Array [ &amp;quot;X&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The array is a container, it has a &lt;code&gt;map&lt;&#x2F;code&gt; method which allows us to transform the value it holds inside, and the transformed value gets wrapped again in a new array.&lt;&#x2F;p&gt;
&lt;p&gt;Okay, that&#x27;s fine, but what is the &quot;effect&quot; of an array? They give you the ability to hold multiple values inside one structure, that&#x27;s what they do. &lt;code&gt;Array.map&lt;&#x2F;code&gt; in particular makes sure your callback function is applied to every value inside the array. It doesn&#x27;t matter if you have a 100 items in your array or none at all, &lt;code&gt;.map&lt;&#x2F;code&gt; takes care of the logic that deals with &lt;strong&gt;when&lt;&#x2F;strong&gt; it should apply the callback function so you can focus on &lt;strong&gt;what&lt;&#x2F;strong&gt; to do with the value.&lt;&#x2F;p&gt;
&lt;p&gt;And of course you can use functors for so much more, like error handling or null checks, even async tasks can be modelled with functors. Now, I would love to keep talking about this but we have to go back to the monad definition.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-pointed-part&quot;&gt;The Pointed part&lt;&#x2F;h2&gt;
&lt;p&gt;So, we need our functors to be &quot;pointed&quot;. This is a fancy way of telling us that we need a helper function that can put any value into the simplest unit of our functor. This function is known as &quot;pure&quot;, other names include &quot;unit&quot; and &quot;of&quot;.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s look at arrays one more time. If we put a value into the simplest unit of an array, what do we get? Yes, an array with just one item. Interestingly enough there is a built-in function for that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;No way&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Array [ &amp;quot;No way&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Array [ 42 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Array [ null ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This helper function is specially useful if the normal way of creating your functor is somewhat convoluted. With this function you could just wrap any value you want and start &lt;code&gt;.map&lt;&#x2F;code&gt;ping right away. Well... there is more to it, but that&#x27;s the main idea. Let&#x27;s keep going.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;into-the-flatland&quot;&gt;Into the Flatland&lt;&#x2F;h2&gt;
&lt;p&gt;Now we are getting into the heart of the problem. Wait... what is exactly the problem?&lt;&#x2F;p&gt;
&lt;p&gt;Imagine this situation, we have a number in a &lt;code&gt;Box&lt;&#x2F;code&gt; and we want to use &lt;code&gt;map&lt;&#x2F;code&gt; to apply a function called &lt;code&gt;action&lt;&#x2F;code&gt;. Something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Box&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Box&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Everything seems fine until you realise &lt;code&gt;action&lt;&#x2F;code&gt; returns another &lt;code&gt;Box&lt;&#x2F;code&gt;. So &lt;code&gt;result&lt;&#x2F;code&gt; is in fact a &lt;code&gt;Box&lt;&#x2F;code&gt; inside another &lt;code&gt;Box&lt;&#x2F;code&gt;: &lt;code&gt;Box(Box(42))&lt;&#x2F;code&gt;. And now in order to get to the new value you have to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;box&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; box&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;* Do stuff *&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s bad. No one wants to work with data like that. This is where monads can help us. They are functors that have the &quot;ability&quot; to merge these unnecessary nested layers. In our case it can transform &lt;code&gt;Box(Box(42))&lt;&#x2F;code&gt; into &lt;code&gt;Box(42)&lt;&#x2F;code&gt;. How? With the help of a method called &lt;code&gt;join&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;This is how it looks like for our &lt;code&gt;Box&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function Box(data) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map(fn) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return Box(fn(data));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     join() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       return data;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I know what you&#x27;re thinking, it doesn&#x27;t look like I&#x27;m joining anything. You may even suggest that I change the name to &quot;extract&quot;. Just hold it right there. Let&#x27;s go back to our &lt;code&gt;action&lt;&#x2F;code&gt; example, we are going to fix it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Ta-da! Now we get a &lt;code&gt;Box(42)&lt;&#x2F;code&gt;, we can get to the value we want with just one &lt;code&gt;map&lt;&#x2F;code&gt;. Oh come on, you&#x27;re still giving me the look? Okay, let&#x27;s say I change the name to &lt;code&gt;extract&lt;&#x2F;code&gt;, now it&#x27;s like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;extract&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here is the problem, if I read that line alone I would expect &lt;code&gt;result&lt;&#x2F;code&gt; to be a &quot;normal&quot; value, something I can use freely. I&#x27;m going to be a little bit upset when I find I have to deal with a &lt;code&gt;Box&lt;&#x2F;code&gt; instead. On the other hand, if I read &lt;code&gt;join&lt;&#x2F;code&gt;, I know that &lt;code&gt;result&lt;&#x2F;code&gt; it&#x27;s still a monad and I can prepare for that.&lt;&#x2F;p&gt;
&lt;p&gt;You may think &quot;Okay I got it, but you know what? I write javascript I&#x27;m just going to ignore these functor things and I won&#x27;t need monads&quot;. Totally valid, you could do that. The bad news is &lt;strong&gt;arrays are functors&lt;&#x2F;strong&gt;, so you can&#x27;t escape them. The good news is &lt;strong&gt;arrays are monads&lt;&#x2F;strong&gt;, so when you get into this situation of nested structures (and you will) you can fix that easily.&lt;&#x2F;p&gt;
&lt;p&gt;So, arrays don&#x27;t have a &lt;code&gt;join&lt;&#x2F;code&gt; method... I mean they do, but it&#x27;s called &lt;code&gt;flat&lt;&#x2F;code&gt;. Behold.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Array [ 41, 42 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There you go, after calling &lt;code&gt;flat&lt;&#x2F;code&gt; you can move on without worrying about any extra layer getting in your way. That&#x27;s it, in practice that&#x27;s the essence of monads and the problem they solve.&lt;&#x2F;p&gt;
&lt;p&gt;Before I go I need to cover one more thing.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;monads-in-chains&quot;&gt;Monads In Chains&lt;&#x2F;h2&gt;
&lt;p&gt;It turns out this combination of &lt;code&gt;map&#x2F;join&lt;&#x2F;code&gt; is so common that there is actually a method that combines the features of those two. This one also has multiple names in the wild: &quot;chain&quot;, &quot;flatMap&quot;, &quot;bind&quot;, &quot;&amp;gt;&amp;gt;=&quot; (in haskell). Arrays in particular call it &lt;code&gt;flatMap&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; split&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&#x2F;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;some&#x2F;stuff&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;another&#x2F;thing&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;split&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; Array(4) [ &amp;quot;some&amp;quot;, &amp;quot;stuff&amp;quot;, &amp;quot;another&amp;quot;, &amp;quot;thing&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;How cool is that? Instead having an array with two nested arrays, we have just one big array. This is so much easier to handle than a nested structure.&lt;&#x2F;p&gt;
&lt;p&gt;But not only does it save you a few keystroke but it also encourage function composition in the same way &lt;code&gt;map&lt;&#x2F;code&gt; does. You could do something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;monad&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;action&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;cool&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;getItNow&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I&#x27;m not saying you should do this with arrays. I&#x27;m saying that if you do make your own monad, you can compose functions in this style. Just remember, if the function returns a monad you need &lt;code&gt;flatMap&lt;&#x2F;code&gt;, if not use &lt;code&gt;map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We learned that monads are just functors with extra features. In other words they magical containers that... don&#x27;t like to hold other containers inside? Let&#x27;s try again: they are magical onions with... nevermind, they are magical, let&#x27;s leave it at that.&lt;&#x2F;p&gt;
&lt;p&gt;They can be used to add an &quot;effect&quot; to any regular value. So we can use them for things like error handling, asynchronous operations, dealing with side effects, and a whole bunch of other things.&lt;&#x2F;p&gt;
&lt;p&gt;We also learned that you either love them or hate them and there is nothing in between.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;mostly-adequate.gitbooks.io&#x2F;mostly-adequate-guide&#x2F;content&#x2F;ch09.html&quot;&gt;Professor Frisby&#x27;s Mostly Adequate Guide to Functional Programming. Chapter 9: Monadic Onions&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;thefrontside&#x2F;funcadelic.js&quot;&gt;Funcadelic.js&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land&quot;&gt;Fantasy Land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>What are these applicative functors you speak of?</title>
        <published>2020-08-11T00:00:00+00:00</published>
        <updated>2020-08-11T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/applicative-functors/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/applicative-functors/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/applicative-functors/">&lt;p&gt;What are they indeed. Our goal for today will be to learn about applicative functors using javascript. Yes, javascript. Don&#x27;t judge me, it&#x27;s what I know. We&#x27;ll cover things like how to create them, how you can spot them in the wild and a somewhat useful use case.&lt;&#x2F;p&gt;
&lt;p&gt;Okay, let&#x27;s start from the beginning.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-is-a-functor&quot;&gt;What is a functor?&lt;&#x2F;h2&gt;
&lt;p&gt;From a &quot;technical&quot; point of view you can think of them as containers of some sort. You see, the simplest way to implement a functor is by wrapping a value inside a data structure, then provide a method to interact with that value. This method is usually called &lt;code&gt;map&lt;&#x2F;code&gt;, its only purpose is to give us access to the value so we can transform it and then put the result back into the wrapper structure.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s see &lt;code&gt;map&lt;&#x2F;code&gt; in action. To make this less scary we&#x27;ll look at a data type that we use all the time in javascript, arrays.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; plus_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;plus_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; [ 2 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What happens here?&lt;&#x2F;p&gt;
&lt;p&gt;We have a number wrapped in an array, we use &lt;code&gt;map&lt;&#x2F;code&gt; to gain access to it and transform it using a callback function, and then the new value of the number gets wrapped in another array. That&#x27;s it. That&#x27;s basically the behaviour you want in a functor.&lt;&#x2F;p&gt;
&lt;p&gt;Now, arrays are not the only ones that have this behaviour, there is another data type that acts like this, &lt;code&gt;Promise&lt;&#x2F;code&gt;. In a &lt;code&gt;Promise&lt;&#x2F;code&gt; we don&#x27;t have a &lt;code&gt;map&lt;&#x2F;code&gt; but we have a &lt;code&gt;then&lt;&#x2F;code&gt; which is close enough.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; plus_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;plus_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Promise { &amp;lt;state&amp;gt;: &amp;quot;pending&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Same thing happens here, we have a value in a structure (here a &lt;code&gt;Promise&lt;&#x2F;code&gt;), a method gives us access through a callback (that&#x27;s &lt;code&gt;then&lt;&#x2F;code&gt;) and the new value gets wrapped in another instance of the same structure.&lt;&#x2F;p&gt;
&lt;p&gt;And that&#x27;s the pattern. We covered what we needed to know about functors for now. If you want to know more about them check out this article: &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;the-power-of-map&#x2F;&quot;&gt;The Power of Map&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Ready to move on?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;applicatives&quot;&gt;Applicatives&lt;&#x2F;h2&gt;
&lt;p&gt;Applicatives are just functors with extra features. They give you the ability to merge two functors together. Specifically, they allow you to apply a function inside a functor to a value that&#x27;s also inside a functor.&lt;&#x2F;p&gt;
&lt;p&gt;Wait... What? A functor that has function inside?&lt;&#x2F;p&gt;
&lt;p&gt;Yes. Putting a function inside a functor, like doing this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; plus_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; And then you put it in a box&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;plus_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Or&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;plus_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Why would someone do that?&lt;&#x2F;p&gt;
&lt;p&gt;Good question. The answer is, you wouldn&#x27;t. I mean in the context of javascript is not a common thing to do. Doesn&#x27;t mean applicatives are useless to us.&lt;&#x2F;p&gt;
&lt;p&gt;Back to our definition. Normally if you have a function and a value you would be able to apply the function using this syntax: &lt;code&gt;some_function(some_value)&lt;&#x2F;code&gt;. That doesn&#x27;t work if both are inside another structure. To &quot;fix&quot; this, applicatives have a method called &lt;code&gt;ap&lt;&#x2F;code&gt; (short for apply) which takes care of unwrapping each functor and applying the function to the value.&lt;&#x2F;p&gt;
&lt;p&gt;At this point I would love to show an example of a built-in data type that follows the rules of applicatives but I don&#x27;t know of any. But do not fear, let&#x27;s take this as an opportunity to do something else.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;building-an-applicative-from-scratch&quot;&gt;Building an Applicative from scratch&lt;&#x2F;h2&gt;
&lt;p&gt;In order to keep this simple we are just going to make a thin wrapper around the &lt;code&gt;Promise&lt;&#x2F;code&gt; class. We are going to make &lt;code&gt;Promise&lt;&#x2F;code&gt; feel more functor-y and applicative-ish. Where do we start?&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;The goal&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We want to make a &quot;lazy promise&quot;. Usually a &lt;code&gt;Promise&lt;&#x2F;code&gt; executes the &quot;task&quot; we give it immediately but we don&#x27;t want that now, this time we want to control when the task gets called. To achieve our goal we are going to create a method called &lt;code&gt;fork&lt;&#x2F;code&gt;, this will be the one that actually builds the &lt;code&gt;Promise&lt;&#x2F;code&gt; and sets the callbacks for success and failure.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;proc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    fork&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; success&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      const&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;proc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;success&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Awesome. Now let&#x27;s compare this we a normal &lt;code&gt;Promise&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; procedure&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; reject&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; look_ma&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`IT WORKED &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;++&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; times`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  setTimeout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;look_ma&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;procedure&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; This one is already running&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;procedure&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; This one doesn&amp;#39;t do anything&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;procedure&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; This does&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fork&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;AAHHH!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;AWW&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you run that you should get these messages after 1 second.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;IT WORKED 1 times&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;IT WORKED 2 times&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;AWW&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now that we have what we want, let&#x27;s go to the next step.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Make it functor&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;As you know applicatives are functors, it means that now we need a &lt;code&gt;map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s go over one more time. What is the expected behaviour of &lt;code&gt;map&lt;&#x2F;code&gt;?&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;It should give us access to the inner value through a callback function.&lt;&#x2F;li&gt;
&lt;li&gt;It should return a new container of the same type. In our case it should return another &lt;code&gt;Task&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function Task(proc) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     map(fn) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       return Task(function(resolve, reject) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;         const promise = new Promise(proc);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;         promise.then(fn).then(resolve).catch(reject);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      fork(err, success) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        const promise = new Promise(proc);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return promise.then(success).catch(err);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What happens there? Well, first we receive an &lt;code&gt;fn&lt;&#x2F;code&gt; argument that&#x27;s our callback. Then, we return a new &lt;code&gt;Task&lt;&#x2F;code&gt;. Inside that new &lt;code&gt;Task&lt;&#x2F;code&gt; we build the promise, just like in fork but this time it&#x27;s &quot;safer&quot; because it doesn&#x27;t run immediately. After that we just chain functions to the &lt;code&gt;promise&lt;&#x2F;code&gt; in their respective order, first the &lt;code&gt;fn&lt;&#x2F;code&gt; callback to transform the value, then the &lt;code&gt;resolve&lt;&#x2F;code&gt; function that will &quot;end&quot; the current task and finally the &lt;code&gt;catch&lt;&#x2F;code&gt; gets the &lt;code&gt;reject&lt;&#x2F;code&gt; function from the current task.&lt;&#x2F;p&gt;
&lt;p&gt;We can test this now.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;!!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; ohh&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;OOHH&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;ohh&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fork&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you run it as is you should get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;OOHH&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hello!!&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But if you remove the &lt;code&gt;fork&lt;&#x2F;code&gt; you should get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, a whole lot of nothing. Now we are done with the functory stuff.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Let&#x27;s Apply&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We are half way there now. We have our functor pattern going on, now we need to make &lt;code&gt;ap&lt;&#x2F;code&gt; happen.&lt;&#x2F;p&gt;
&lt;p&gt;The way I see it &lt;code&gt;ap&lt;&#x2F;code&gt; is just like &lt;code&gt;map&lt;&#x2F;code&gt; but with a plot twist: the function we want to apply it&#x27;s trapped inside another &lt;code&gt;Task&lt;&#x2F;code&gt; [&lt;em&gt;dramatic music plays in the background&lt;&#x2F;em&gt;].&lt;&#x2F;p&gt;
&lt;p&gt;With that idea in our minds we can write &lt;code&gt;ap&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function Task(proc) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map(fn) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return Task(function(resolve, reject) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          const promise = new Promise(proc);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          promise.then(fn).then(resolve).catch(reject);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     ap(Fn) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       return Task(function(resolve, reject) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;         const promise = new Promise(proc);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;         const success = fn =&amp;gt; promise.then(fn);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;         Fn.fork(reject, success).then(resolve);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      fork(err, success) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        const promise = new Promise(proc);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        return promise.then(success).catch(err);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Spot the difference? Don&#x27;t worry I&#x27;ll tell you anyway, the difference is that in order to get the callback function we use the &lt;code&gt;fork&lt;&#x2F;code&gt; of &lt;code&gt;Fn&lt;&#x2F;code&gt; instead of a raw &lt;code&gt;Promise&lt;&#x2F;code&gt;. That&#x27;s it. Now see if it works.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;!!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Hello&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Hello&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fork&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We made it! Now we can merge values and functions inside applicatives! But we can&#x27;t enter the applicative functors club just yet, we still need something more.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;The forgotten ingredient&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Applicatives must be able to put any value into the most simple unit of your structure.&lt;&#x2F;p&gt;
&lt;p&gt;The &lt;code&gt;Promise&lt;&#x2F;code&gt; class actually has something like that. Instead of doing this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We usually do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And after we use &lt;code&gt;Promise.resolve&lt;&#x2F;code&gt; we can immediately start calling methods like &lt;code&gt;then&lt;&#x2F;code&gt; and &lt;code&gt;catch&lt;&#x2F;code&gt;. That&#x27;s what our &lt;code&gt;Task&lt;&#x2F;code&gt; is missing.&lt;&#x2F;p&gt;
&lt;p&gt;For this new &quot;feature&quot;, we will need a static method. This one has different names in the wild, some call it &quot;pure&quot; others call it &quot;unit&quot; and the lazy ones call it &quot;of&quot;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We can finally say we have an applicative functor.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;something-you-can-use-in-your-day-to-day-coding&quot;&gt;Something you can use in your day to day coding&lt;&#x2F;h2&gt;
&lt;p&gt;Been able to create your own data type is nice, but wouldn&#x27;t it be better if could just apply these patterns to existing types?&lt;&#x2F;p&gt;
&lt;p&gt;I have a good news and bad news. The good news is that we totally can. The bad news is that it will be a bit awkward.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s keep going with the &lt;code&gt;Task&lt;&#x2F;code&gt; theme we got going on. Let&#x27;s say that we want to use &lt;code&gt;map&lt;&#x2F;code&gt; and &lt;code&gt;ap&lt;&#x2F;code&gt; with a &lt;code&gt;Promise&lt;&#x2F;code&gt; but we don&#x27;t want create a new data type. What do we do? Some good old functions will do.&lt;&#x2F;p&gt;
&lt;p&gt;If you know the patterns and behaviours you should be looking for, writing some static functions in an object will be enough. This what our &lt;code&gt;Task&lt;&#x2F;code&gt; would look like as static functions (minus the &quot;lazy&quot; part).&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you want to &lt;code&gt;map&lt;&#x2F;code&gt; you&#x27;ll do something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;ap&lt;&#x2F;code&gt; also works in the same way.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;!!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I can feel your scepticism from here. Be patient, this will be good. Now, &lt;code&gt;map&lt;&#x2F;code&gt; looks kinda useful but &lt;code&gt;ap&lt;&#x2F;code&gt; not so much, right? Don&#x27;t worry, we can still use &lt;code&gt;ap&lt;&#x2F;code&gt; for a greater good. What if I told you we can have like an &quot;enhanced&quot; version of &lt;code&gt;map&lt;&#x2F;code&gt;? Our &lt;code&gt;map&lt;&#x2F;code&gt; just works with functions that receive one argument and that&#x27;s good but sometimes we need more.&lt;&#x2F;p&gt;
&lt;p&gt;Say that we have a function that needs two arguments but every time we use it those arguments come from two different promises. In our imaginary situation we have these functions.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_username&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fetch_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;john doe&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    setTimeout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fetch_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_location&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fetch_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;some place&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    setTimeout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fetch_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 500&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; format_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; place&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `name: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; | place: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;place&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;When we use &lt;code&gt;format_message&lt;&#x2F;code&gt; its arguments almost every time come from those other functions &lt;code&gt;get_username&lt;&#x2F;code&gt; and &lt;code&gt;get_location&lt;&#x2F;code&gt;. They are asynchronous, so you might be tempted to use &lt;code&gt;Async&#x2F;await&lt;&#x2F;code&gt; but that wouldn&#x27;t be the best idea. Those two don&#x27;t depend on each other, we will be wasting time if we make them run sequentially when they could be running concurrently. One solution can be found in the form of &lt;code&gt;Promise.all&lt;&#x2F;code&gt;, and it looks like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;all&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_username&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_location&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()])&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(([&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; place&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;])&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; format_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; place&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There you go. That works. But we can do better because we have applicatives on our side. Besides, we already wrote that &lt;code&gt;Task&lt;&#x2F;code&gt; object with all those functions. Let&#x27;s add one more static function to &lt;code&gt;Task&lt;&#x2F;code&gt; that does the same thing &lt;code&gt;Promise.all&lt;&#x2F;code&gt; is doing for us here.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftA2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; A1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; A2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; b&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; b&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; A1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; A2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I&#x27;ll explain the name later. Now let&#x27;s see it action.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Task&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftA2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;format_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_username&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_location&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;())&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Isn&#x27;t this just slightly better?&lt;&#x2F;p&gt;
&lt;p&gt;And yes, several arguments could be made against this particular implementation of &lt;code&gt;liftA2&lt;&#x2F;code&gt; and the &lt;code&gt;Task&lt;&#x2F;code&gt; itself, but all the patterns I&#x27;ve shown would work just fine with most of the applicative you can find in the wild.&lt;&#x2F;p&gt;
&lt;p&gt;As a fun exercise you can try to implement &lt;code&gt;map&lt;&#x2F;code&gt; and &lt;code&gt;ap&lt;&#x2F;code&gt; for &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Set&quot;&gt;Set&lt;&#x2F;a&gt;s. See what kind of funny things you discover in the process.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, about that name &lt;code&gt;liftA2&lt;&#x2F;code&gt;. In functional programming when you take a function and make it work with container types like functors it is said that you&#x27;re &quot;lifting&quot; the function to the &quot;context&quot; of that container. What do I mean by context? Okay, in the world of arrays when you use &lt;code&gt;Array.map&lt;&#x2F;code&gt; your function gets applied multiple times, in the context of a &lt;code&gt;Promise&lt;&#x2F;code&gt; your function runs only when the &lt;code&gt;Promise&lt;&#x2F;code&gt; is resolved. See what I mean? Good. The &lt;code&gt;A2&lt;&#x2F;code&gt; part? Well, you know, it only works with binary functions so... that&#x27;s why.&lt;&#x2F;p&gt;
&lt;p&gt;There is still one more trick you can do with applicatives but I still don&#x27;t fully understand how it works, so maybe next time I&#x27;ll show you that.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;What did we learn today, class?&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;We learned about functors:
&lt;ul&gt;
&lt;li&gt;What they do.&lt;&#x2F;li&gt;
&lt;li&gt;What pattern they should follow.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;We learned about applicatives:
&lt;ul&gt;
&lt;li&gt;What they are.&lt;&#x2F;li&gt;
&lt;li&gt;What they do.&lt;&#x2F;li&gt;
&lt;li&gt;How to make one from scratch.&lt;&#x2F;li&gt;
&lt;li&gt;How to make an &lt;code&gt;ap&lt;&#x2F;code&gt; even if the data type doesn&#x27;t have a built-in method to support the applicative pattern.&lt;&#x2F;li&gt;
&lt;li&gt;And that &lt;code&gt;liftA2&lt;&#x2F;code&gt; thingy that looks kinda of cool.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Y&#x27;all learned all that? My goodness. You&#x27;re the best.&lt;&#x2F;p&gt;
&lt;p&gt;Okay, I guess my job here is done.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land&quot;&gt;Fantasy Land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;static-land&quot;&gt;Static Land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;http:&#x2F;&#x2F;www.tomharding.me&#x2F;2017&#x2F;04&#x2F;10&#x2F;fantas-eel-and-specification-8&#x2F;&quot;&gt;Fantas, Eel, and Specification 8: Apply&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;http:&#x2F;&#x2F;www.tomharding.me&#x2F;2017&#x2F;04&#x2F;17&#x2F;fantas-eel-and-specification-9&#x2F;&quot;&gt;Fantas, Eel, and Specification 9: Applicative&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;mostly-adequate.gitbooks.io&#x2F;mostly-adequate-guide&#x2F;ch10.html&quot;&gt;Professor Frisby&#x27;s Mostly Adecuate Guide to Functional Programming. Chapter 10: Applicative Functors&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;http:&#x2F;&#x2F;learnyouahaskell.com&#x2F;functors-applicative-functors-and-monoids#applicative-functors&quot;&gt;Learn you a Haskell: Functors, Applicative Functors and Monoids&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>ZSH global aliases</title>
        <published>2020-07-12T00:00:00+00:00</published>
        <updated>2020-07-12T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/tools/zsh-global-aliases/"/>
        <id>https://vonheikemen.github.io/devlog/tools/zsh-global-aliases/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/tools/zsh-global-aliases/">&lt;p&gt;If you have spend a significant amount of time writing commands in a shell chances are you have come across these handy little things called &lt;strong&gt;aliases&lt;&#x2F;strong&gt;. They usually come with the promise of boosting your productivity. Sometimes we use them to protect us from long commands with cryptic arguments and sometimes we use them just to save ourselves a few keystrokes. Regardless of your motives I&#x27;m going to show you another type of alias you might not know of, global aliases.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;a-quick-recap&quot;&gt;A quick recap&lt;&#x2F;h2&gt;
&lt;p&gt;The typical situation where find you yourself in need of an alias is when you have a command you use often, like very often, so much that you are kinda tired of typing that thing over and over again. Let&#x27;s take this command as an example:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;tmux&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; new-session -A -D -s work&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Don&#x27;t know what it does? &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;explainshell.com&#x2F;explain?cmd=tmux+new-session+-A+-D+-s+work&quot;&gt;Check this&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now, wouldn&#x27;t it be nice if I could just type this?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;ts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; work&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I already feel productive. Who do you get from the first example to this short beauty? With the &lt;code&gt;alias&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;alias ts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;tmux new-session -A -D -s&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You can write that right in your shell and you will have for as long as your zsh session is alive. If you put it somewhere in your &lt;code&gt;.zshrc&lt;&#x2F;code&gt; it&#x27;ll always be available to you.&lt;&#x2F;p&gt;
&lt;p&gt;Notice that I didn&#x27;t put &lt;code&gt;work&lt;&#x2F;code&gt; in it. That is because that last argument is a name of my choosing. By leaving it out of the alias I can do put anything I want after it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;ts&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; pomodoro&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All that sounds good. What&#x27;s the catch? Well, the alias works well when it&#x27;s the first thing in our command but it fails if you try to use it in another place. Let&#x27;s expand our example with another alias.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;alias&lt;&#x2F;span&gt;&lt;span&gt; pomd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;gone -e &amp;quot;notify-send -u critical Pomodoro Timeout&amp;quot;&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;That &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;guillaumebreton&#x2F;gone&quot;&gt;gone&lt;&#x2F;a&gt; command is a pomodoro clock.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;If you try to do this &lt;code&gt;ts pomodoro pomd&lt;&#x2F;code&gt;, you&#x27;ll only get this message &lt;code&gt;[exited]&lt;&#x2F;code&gt;. That&#x27;s because &lt;code&gt;pomd&lt;&#x2F;code&gt; in that case is just like a normal string, it doesn&#x27;t have any special meaning in that context. Can we overcome that? Yes. Should we? I don&#x27;t know but I&#x27;ll show anyway.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;make-it-global&quot;&gt;Make it global&lt;&#x2F;h2&gt;
&lt;p&gt;If a &quot;simple&quot; alias is not enough for you then all you have to do is add the flag &lt;code&gt;-g&lt;&#x2F;code&gt; to the &lt;code&gt;alias&lt;&#x2F;code&gt; command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;alias&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -g&lt;&#x2F;span&gt;&lt;span&gt; name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;some-command&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s look at a good use case (our pomodoro example is a terrible one). When you have a command with a long output sometimes you might want to use &lt;code&gt;less&lt;&#x2F;code&gt; to get navigate better. So let&#x27;s do a global alias that pipes the output of a command to &lt;code&gt;less&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;alias&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -g&lt;&#x2F;span&gt;&lt;span&gt; L&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;| less&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now you can test it with a command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;du&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --max-depth=1 L&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;explainshell.com&#x2F;explain?cmd=du+--max-depth%3D1+%7C+less&quot;&gt;This is what it does&lt;&#x2F;a&gt;. It may take a while if you have bunch of stuff in your current working directory.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;See? This is convenient, useful and dangerous at the same time. Now every time a lonely &lt;code&gt;L&lt;&#x2F;code&gt; appears without quotes in any part of your command it will get replaced by &lt;code&gt;| less&lt;&#x2F;code&gt;. Sometimes that&#x27;s not what you want. If you try to remove the alias using the &lt;code&gt;unalias&lt;&#x2F;code&gt; command like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unalias&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; L&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;To remove the alias you should quotes, like this: &lt;code&gt;unalias &quot;L&quot;&lt;&#x2F;code&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;You are actually running this command.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unalias&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; less&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To minimize the risk of confusion it is advised that your global alias is in all caps, that is to make it standout from the rest of the command.&lt;&#x2F;p&gt;
&lt;p&gt;By now you probably think this is stupid and a very bad idea but there is hope.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;another-use-case&quot;&gt;Another use case&lt;&#x2F;h2&gt;
&lt;p&gt;There is a builtin function called &lt;code&gt;_expand_alias&lt;&#x2F;code&gt;, it can help us use these type alias for a greater good.&lt;&#x2F;p&gt;
&lt;p&gt;If you use the &lt;code&gt;bindkey&lt;&#x2F;code&gt; with no arguments it gives you a list of every keybinding you have right now in your shell. You should already have the &lt;code&gt;_expand_alias&lt;&#x2F;code&gt; bound to a shortcut.
You can check with this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bindkey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; expand_alias&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You should get: &lt;code&gt;&quot;^Xa&quot; _expand_alias&lt;&#x2F;code&gt;. That means it&#x27;s bound to &lt;code&gt;ctrl+x a&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;With this new found knowledge we can create an alias for something that is very difficult to remember (or just too damn long to type) and then expand it before running the command.&lt;&#x2F;p&gt;
&lt;p&gt;Do you remember exactly how is it that you can suppress the stderr messages in a command? No? Well, there you go, there is your alias.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;alias&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -g @noerr=&amp;quot;2&amp;gt; &#x2F;dev&#x2F;null&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So now you can write something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;mkdir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &#x2F;tmp&#x2F;this-doesnt-exists&#x2F;name @noerr&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But before hitting enter press &lt;code&gt;ctrl+x&lt;&#x2F;code&gt; then &lt;code&gt;a&lt;&#x2F;code&gt; and you&#x27;ll get this cryptic beauty.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;mkdir&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &#x2F;tmp&#x2F;this-doesnt-exists&#x2F;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; 2&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &#x2F;dev&#x2F;null&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Remember kids, don&#x27;t try random commands you see on the internet. Always &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;explainshell.com&#x2F;explain?cmd=mkdir+%2Ftmp%2Fthis-doesnt-exists%2Fname+2%3E+%2Fdev%2Fnull&quot;&gt;check&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;We have reached the end. Now you know what you can do with an alias, what limitations they have, how you can overcome those, and what you probably shouldn&#x27;t do with them.&lt;&#x2F;p&gt;
&lt;p&gt;If you want some inspiration to create your own alias, &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ohmyzsh&#x2F;ohmyzsh&#x2F;tree&#x2F;master&#x2F;plugins&#x2F;common-aliases&quot;&gt;check this&lt;&#x2F;a&gt;. That&#x27;s a plugin for &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ohmyzsh&#x2F;ohmyzsh&quot;&gt;ohmyzsh&lt;&#x2F;a&gt;. I would recommend taking a look in the source file and just copy the alias you actually find useful.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;source&quot;&gt;Source&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;thorsten-hans.com&#x2F;5-types-of-zsh-aliases&quot;&gt;5 Types Of ZSH Aliases You Should Know&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Tagged unions and Fantasy Land</title>
        <published>2020-06-12T00:00:00+00:00</published>
        <updated>2020-06-12T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/tagged-unions-and-fantasy-land/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/tagged-unions-and-fantasy-land/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/tagged-unions-and-fantasy-land/">&lt;p&gt;Let&#x27;s do something fun, let&#x27;s explore one branch of the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land&quot;&gt;Fantasy Land&lt;&#x2F;a&gt; specification using tagged unions. In order to keep this as short as possible I&#x27;ll mostly focus on how things work and leave out a lot of details. So, what we&#x27;ll do is create a data structure and see if we can follow the rules on the specification.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;tagged-unions&quot;&gt;Tagged Unions&lt;&#x2F;h2&gt;
&lt;p&gt;Also known as &lt;em&gt;variants&lt;&#x2F;em&gt;, is a data structure that can represent different states of a single type. At any given time it can only be in one of those states. Other important features include the ability to carry information about themselves as well as an extra &quot;payload&quot; that can hold anything.&lt;&#x2F;p&gt;
&lt;p&gt;It sounds cool until we realize we don&#x27;t have those things in javascript. If we want to use them we&#x27;ll have to recreate them. Fortunately for us we don&#x27;t need a bulletproof implementation. We just need to deal with a couple of things, the type of the variant and the payload they should carry. We can handle that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;types&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; types&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What do we have here? You can think of &lt;code&gt;Union&lt;&#x2F;code&gt; as a factory of constructor functions. It takes a list of variants and for each it will create a constructor. It looks better in an example. Let&#x27;s say we want to model the states of a task, using &lt;code&gt;Union&lt;&#x2F;code&gt; we could create this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Status&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Success&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Failed&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Pending&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can create our &lt;code&gt;Status&lt;&#x2F;code&gt; variants.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Status&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Success&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;stuff&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Success&amp;quot;, &amp;quot;data&amp;quot;: { &amp;quot;some&amp;quot;: &amp;quot;stuff&amp;quot; } }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;As you can see here we have a function that returns a plain object. In this object we have a &lt;code&gt;type&lt;&#x2F;code&gt; key where we store the name of our variant. The &lt;code&gt;data&lt;&#x2F;code&gt; key will hold anything we can think of. You might think that storing just the name of the variant isn&#x27;t enough, because it may cause collisions with other variants of different types and you would be right. Since we are only going to create one data type this is not an issue for us.&lt;&#x2F;p&gt;
&lt;p&gt;If you find this pattern useful and want to use it, you&#x27;ll need something reliable, consider using a library like &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;tagmeme&quot;&gt;tagmeme&lt;&#x2F;a&gt; or &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;daggy&quot;&gt;daggy&lt;&#x2F;a&gt; or something else.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;fantasy-land&quot;&gt;Fantasy Land&lt;&#x2F;h2&gt;
&lt;p&gt;The github description says the following.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Specification for interoperability of common algebraic structures in JavaScript&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Algebraic structures? What? I know. The wikipedia definition for that doesn&#x27;t help much either. Best I can offer is a vague sentence that leaves you with the least amount of questions, here I go: A set of values that have some operations associated with them that follow certain rules.&lt;&#x2F;p&gt;
&lt;p&gt;In our case, you can think the variants as our &quot;set of values&quot; and the functions that we create will be the &quot;operations,&quot; as far as the rules goes we follow the Fantasy Land specification.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-link&quot;&gt;The Link&lt;&#x2F;h2&gt;
&lt;p&gt;So, we know about tagged unions and we have a vague idea about this Fantasy Land thing but know the question remains, how do we connect those two? The answer is &lt;em&gt;pattern matching&lt;&#x2F;em&gt;. Those familiar with the term also know that we don&#x27;t have that in javascript. Sadly, in this case we can only mimic certain features.&lt;&#x2F;p&gt;
&lt;p&gt;How do we start? Let&#x27;s just describe what we need. We need to evaluate a variant, be able to determine which type we have and execute a block of code. We already have the &lt;code&gt;type&lt;&#x2F;code&gt; key which is a &lt;code&gt;String&lt;&#x2F;code&gt;, with that we could just use a &lt;code&gt;switch&#x2F;case&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;switch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;status&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Success&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Everything went well&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    break&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Failed&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Something went wrong&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    break&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  case&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Pending&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Waiting...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    break&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  default&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Should never happen&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    break&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This actually gets pretty close to what we want but there is a problem, it doesn&#x27;t return anything. We want to do the same this &lt;code&gt;switch&#x2F;case&lt;&#x2F;code&gt; does but inside an expression, something that yields a result. To recreate this behavior in the way we want we&#x27;ll use objects and functions.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; patterns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ||&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; _match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; patterns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;typeof&lt;&#x2F;span&gt;&lt;span&gt; _match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;function&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; _match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; else if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;typeof&lt;&#x2F;span&gt;&lt;span&gt; patterns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;_ ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;function&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; patterns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;_&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Once again we take advantage of the fact that &lt;code&gt;type&lt;&#x2F;code&gt; is a &lt;code&gt;String&lt;&#x2F;code&gt; and use it to &quot;choose&quot; the pattern that we want. This time around our patterns are inside an object. Now, each &quot;pattern&quot; will be associated with a method on the &lt;code&gt;patterns&lt;&#x2F;code&gt; object and our function &lt;code&gt;match&lt;&#x2F;code&gt; will return what the chosen pattern returns. If it can&#x27;t find the pattern it will try to call a method with the name &lt;code&gt;_&lt;&#x2F;code&gt;, this will mimic the &lt;code&gt;default&lt;&#x2F;code&gt; keyword on the &lt;code&gt;switch&#x2F;case&lt;&#x2F;code&gt; and if that fails it just returns &lt;code&gt;null&lt;&#x2F;code&gt;. With this we can have the behavior we want.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;status&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  Success&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ({&lt;&#x2F;span&gt;&lt;span&gt; some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; })&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `Some: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  Failed&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:  ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Oops something went wrong&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  Pending&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Wait for it&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  _&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:       ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;AAAAHHHH&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; &amp;quot;Some: stuff&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this function at our disposal we can now move on.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-data-structure&quot;&gt;The Data Structure&lt;&#x2F;h2&gt;
&lt;p&gt;This is the part where we create the thing we&#x27;re going to work with. We are going to model a fairly popular concept, an action that might fail. To do this we&#x27;ll create a union with two variants &lt;code&gt;Ok&lt;&#x2F;code&gt; and &lt;code&gt;Err&lt;&#x2F;code&gt;, we will call it &lt;code&gt;Result&lt;&#x2F;code&gt;. The idea is simple, &lt;code&gt;Ok&lt;&#x2F;code&gt; will represent a success and we&#x27;ll use it to carry the &quot;expected&quot; value, all our operations will be based on this variant. On the other hand if we get a variant of type &lt;code&gt;Err&lt;&#x2F;code&gt; all we want to do is propagate the error, this means that we&#x27;ll ignore any kind of transformation on this variant.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Ok&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Err&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;the-operations&quot;&gt;The Operations&lt;&#x2F;h2&gt;
&lt;p&gt;Before we move on let&#x27;s just do one more thing, let&#x27;s create a &lt;code&gt;match&lt;&#x2F;code&gt; function specific to our data type.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;span&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Okay, now everything is in place. So like I said before, we will focus on just one branch of the Fantasy Land specification and that will be the one that goes from &lt;code&gt;Functor&lt;&#x2F;code&gt; to &lt;code&gt;Monad&lt;&#x2F;code&gt;. For each operation we will implement a static method in our &lt;code&gt;Result&lt;&#x2F;code&gt; object and I&#x27;ll try to explain how does it work and why is useful.&lt;&#x2F;p&gt;
&lt;p&gt;Logic dictates that we start with Functor but we are going to take another road.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;chain&quot;&gt;Chain&lt;&#x2F;h3&gt;
&lt;p&gt;The &lt;code&gt;chain&lt;&#x2F;code&gt; operation lets us interact with the value that&#x27;s inside our structure and apply a transformation. Sounds easy, right? We do that all the time, but this time we have rules. I present to you the first law of the day.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Associativity&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Notice that the comment says &quot;equivalent to&quot; although in most cases it should have identical results, this doesn&#x27;t necessarily means that it should be read like equality, it is more like &quot;it has the same effect as.&quot;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;This law is about the order of the operations. In the first statement notice that it reads like a sequence, it goes one after the other. In the second statement it&#x27;s like one operation wraps around the other. And this part is interesting, &lt;code&gt;Fx(value).chain(Gx)&lt;&#x2F;code&gt;. That second &lt;code&gt;chain&lt;&#x2F;code&gt; comes directly from &lt;code&gt;Fx&lt;&#x2F;code&gt;. We can tell that &lt;code&gt;Fx&lt;&#x2F;code&gt; and &lt;code&gt;Gx&lt;&#x2F;code&gt; are functions that return a data type that also follows this law.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s see this in practice with another data type everyone is familiar with, arrays. It turns out that arrays follow this law (sorta). I know there is no &lt;code&gt;chain&lt;&#x2F;code&gt; in the &lt;code&gt;Array&lt;&#x2F;code&gt; prototype but there is a &lt;code&gt;flatMap&lt;&#x2F;code&gt; which behaves just like it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;      =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;!!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So &lt;code&gt;flatMap&lt;&#x2F;code&gt; let us interact with the &lt;code&gt;String&lt;&#x2F;code&gt; inside the array and transform it using a function and it didn&#x27;t mattered that the second &lt;code&gt;flatMap&lt;&#x2F;code&gt; was inside or outside of the first, we got the same result.&lt;&#x2F;p&gt;
&lt;p&gt;Now let&#x27;s do the same with our data type. Our implementation will be a static method (just for fun), so our examples will look a tiny bit different. This is how we do it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;chain =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;match&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Thanks to the power of convenience &lt;code&gt;Result.match&lt;&#x2F;code&gt; has all the logic we need, the only thing we need to do is provide a value for the &lt;code&gt;err&lt;&#x2F;code&gt; parameter and just like that we achieve the effect we want. So &lt;code&gt;Result.chain&lt;&#x2F;code&gt; is a function that expects the &lt;code&gt;ok&lt;&#x2F;code&gt; and the &lt;code&gt;data&lt;&#x2F;code&gt; parameters. If the variant is of type &lt;code&gt;err&lt;&#x2F;code&gt; the error will just be wrapped again in a variant of the same type, like nothing happened. If the variant is of type &lt;code&gt;Ok&lt;&#x2F;code&gt; it will call the function we pass in the first argument.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;type ===&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;data ===&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Since our function follows law we now have a way to compose functions that return other values of the same type. This is specially useful when creating a function composition where arguments of a function are the result of a previous function call.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;Result.chain&lt;&#x2F;code&gt; can also be use to create other utility functions. Let&#x27;s start by creating one that allows us to &quot;extract&quot; a value from the wrapper structure.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;join =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So with this we get &lt;code&gt;Result.join&lt;&#x2F;code&gt; a function that only waits for the &lt;code&gt;data&lt;&#x2F;code&gt; parameter (this is the power of &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;partial-application&#x2F;&quot;&gt;partial application&lt;&#x2F;a&gt;). Let&#x27;s see it in action.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; good_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;good_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; &amp;quot;Hello&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; bad_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Ooh noes&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;bad_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Err&amp;quot;, &amp;quot;data&amp;quot;: { &amp;quot;message&amp;quot;: &amp;quot;Ooh noes&amp;quot; } }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We called &lt;code&gt;join&lt;&#x2F;code&gt; because we should only use it to &quot;flatten&quot; a nested structure. Like in this case.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; nested_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;nested_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: &amp;quot;Hello&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I&#x27;m going to abuse the nature of this function in future tests, to compare the content inside our structures. To make my intentions clear I&#x27;m going to create an &quot;alias.&quot;&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;unwrap =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;functor&quot;&gt;Functor&lt;&#x2F;h3&gt;
&lt;p&gt;If you&#x27;ve been reading other articles about functional programming in javascript that name may sound familiar. Even if you don&#x27;t recognize it you&#x27;ve probably use it before. This part of the specification is the one that introduces our old friend &lt;code&gt;.map&lt;&#x2F;code&gt;. Let&#x27;s see what makes it so special.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Identity&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It might not look interesting but it is. Pay attention to that function on the first statement, &lt;code&gt;v =&amp;gt; v&lt;&#x2F;code&gt;, you know this one, right? We&#x27;ve used it before, it is known as the &lt;code&gt;identity&lt;&#x2F;code&gt; function. So, in math an identity element is a neutral value that has no effect on the result of the operation and this is exactly what this function does (nothing). But the interesting part is not on the surface, is what we can&#x27;t see. If the first statement has the same effect as the second, then it means that &lt;code&gt;.map(v =&amp;gt; v)&lt;&#x2F;code&gt; returns another value of the same type, it does that even if we give it the most useless function we could possibly imagine. Let&#x27;s show this again using arrays as an example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  =&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;isArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;isArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s nice but how does that help us? The important part to understand here is that &lt;code&gt;.map&lt;&#x2F;code&gt; should &quot;preserve the shape&quot; of our structure. In this case with arrays, if we call it with an array with one item we get back another array with one item, if we call it with an array with one hundred items we get back another array with one hundred items. Knowing that the result will always have the same type allows us to do stuff like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;hx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I know what you&#x27;re thinking, using &lt;code&gt;.map&lt;&#x2F;code&gt; like that way with arrays can have a big impact on performance. Shall not be worried, the second law has that covered.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Composition&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This law tells us that we can replace several calls to &lt;code&gt;.map&lt;&#x2F;code&gt; if we compose directly the functions we use as arguments. Let&#x27;s try it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So &lt;code&gt;.map&lt;&#x2F;code&gt; gave us the ability to combine those functions in different ways, this gives us the opportunity to optimize for speed or readability. Function composition is a very complex subject and I would like to say more but we don&#x27;t have time for that right now. If you&#x27;re curious about it you can read this: &lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;es&#x2F;web-development&#x2F;learn-fp&#x2F;composition-techniques&#x2F;&quot;&gt;composition techniques&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Now is the time to implement the famous &lt;code&gt;.map&lt;&#x2F;code&gt; in our structure. You might have notice that this method is very similar to &lt;code&gt;.chain&lt;&#x2F;code&gt;, it has almost the same behavior except for one thing, with &lt;code&gt;.map&lt;&#x2F;code&gt; we should the guarantee that the result should be a value of the same type.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you remember the behavior of &lt;code&gt;.chain&lt;&#x2F;code&gt; it only executes the callback function if &lt;code&gt;data&lt;&#x2F;code&gt; is a variant of type &lt;code&gt;Ok&lt;&#x2F;code&gt;, so the only thing we need to do to keep our structure is wrap the result from  &lt;code&gt;fn&lt;&#x2F;code&gt; with &lt;code&gt;Result.Ok&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Identity&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Composition&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;apply&quot;&gt;Apply&lt;&#x2F;h3&gt;
&lt;p&gt;This is a tough one, I better try to explain after I show you the law.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Composition&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)))));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&quot;Whaaat?&quot;&lt;&#x2F;p&gt;
&lt;p&gt;Yes, my thoughts exactly. That first statement is the most confusing thing we&#x27;ve seen so far. This time it looks like &lt;code&gt;Fx&lt;&#x2F;code&gt; and &lt;code&gt;Gx&lt;&#x2F;code&gt; are not functions, they are data structures. &lt;code&gt;Gx&lt;&#x2F;code&gt; has an &lt;code&gt;.ap&lt;&#x2F;code&gt; method so it must be the same type as &lt;code&gt;Val&lt;&#x2F;code&gt;. And if go further we can tell that &lt;code&gt;Fx&lt;&#x2F;code&gt; has a &lt;code&gt;map&lt;&#x2F;code&gt; method, that means is a Functor. So for this to work &lt;code&gt;Val&lt;&#x2F;code&gt;, &lt;code&gt;Fx&lt;&#x2F;code&gt; and &lt;code&gt;Gx&lt;&#x2F;code&gt; must implement the Functor and Apply specification. The last piece of the puzzle is this &lt;code&gt;Fx.map(fx =&amp;gt; ... fx(...))&lt;&#x2F;code&gt;, there are functions involve but they are inside a data structure.&lt;&#x2F;p&gt;
&lt;p&gt;The name of this law and that second statement suggest this is about function composition. I&#x27;m thinking that this should behave just like &lt;code&gt;.map&lt;&#x2F;code&gt; but with a plot twist, the callback we get it&#x27;s trapped inside a Functor. With this we have enough information to make our method.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What&#x27;s going on in here? Well, let me explain. First we get the value inside &lt;code&gt;data&lt;&#x2F;code&gt; if everything goes well.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;At this point we have problem, &lt;code&gt;.chain&lt;&#x2F;code&gt; doesn&#x27;t give us any guarantee about the result, it can return anything. But we know that &lt;code&gt;res&lt;&#x2F;code&gt; is a Functor, so we can use &lt;code&gt;.map&lt;&#x2F;code&gt; to save the day.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here &lt;code&gt;.map&lt;&#x2F;code&gt; has two jobs, it give us access to the function inside &lt;code&gt;res&lt;&#x2F;code&gt; and helps us preserve the shape of our structure. So, &lt;code&gt;.chain&lt;&#x2F;code&gt; will return anything that &lt;code&gt;.map&lt;&#x2F;code&gt; gives it, with this in place we can now have the confidence to call &lt;code&gt;.ap&lt;&#x2F;code&gt; multiple times.&lt;&#x2F;p&gt;
&lt;p&gt;The last stop in our trip is this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That is what we actually want from &lt;code&gt;.ap&lt;&#x2F;code&gt;. Thanks to &lt;code&gt;.map&lt;&#x2F;code&gt; the result of that expression gets wrapped inside another variant which in turn goes back to the outside world thanks to &lt;code&gt;.chain&lt;&#x2F;code&gt;. We can test it now.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; composition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;     =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;composition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Fine, but what is it good for? Putting a function inside a &lt;code&gt;Result.Ok&lt;&#x2F;code&gt; doesn&#x27;t seem like common thing, why would somebody do that? All fair questions. I believe this is all confusing because &lt;code&gt;.ap&lt;&#x2F;code&gt; is only half of the story.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;.ap&lt;&#x2F;code&gt; can be used to create a helper function called &lt;code&gt;liftA2&lt;&#x2F;code&gt;, the goal of this function is to make another function work with values that are wrapped in a structure. Something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Title&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Dr. &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Acula&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftA2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Title&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: &amp;quot;Dr. Acula&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You can think of it as the extended version of &lt;code&gt;.map&lt;&#x2F;code&gt;. While &lt;code&gt;.map&lt;&#x2F;code&gt; is meant to work with callbacks that take one argument, &lt;code&gt;liftA2&lt;&#x2F;code&gt; is designed to work with a function that takes two arguments. Now the question is how does it work? The answer is in this piece of code.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; composition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;composition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s see what happens here. It all begins with &lt;code&gt;.map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;composition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In this expression we extract the function inside &lt;code&gt;Exclaim&lt;&#x2F;code&gt; and we apply it to &lt;code&gt;composition&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; becomes&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That second statement gets wrapped inside an &lt;code&gt;Ok&lt;&#x2F;code&gt; variant which is exactly what &lt;code&gt;.ap&lt;&#x2F;code&gt; expects as the first argument. So, after &lt;code&gt;.map&lt;&#x2F;code&gt; gets evaluated we get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;gx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))),&lt;&#x2F;span&gt;&lt;span&gt; Uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And now that we have a function inside a variant &lt;code&gt;.ap&lt;&#x2F;code&gt; has all it needs to continue. In here we basically have more of the same, the function inside the second argument is applied to the function in the first. So we get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice the pattern now? We have yet another function inside a variant, and this is exactly what our last &lt;code&gt;.ap&lt;&#x2F;code&gt; gets.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))),&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The cycle repeats again and finally we get.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;HELLO!!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is basically the pattern that &lt;code&gt;liftA2&lt;&#x2F;code&gt; follows, the only difference is that instead of taking functions to a value, we take values to a function. You&#x27;ll see.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftA2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; b&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; b&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; R2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We test again.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftA2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Dr. &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Acula&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: &amp;quot;Dr. Acula&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And what if you want to make a &lt;code&gt;liftA3&lt;&#x2F;code&gt;? You know what to do.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftA3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; b&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; b&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; c&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; R2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; R3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And now that is the law of composition acting in our favor. As long a s &lt;code&gt;Result.ap&lt;&#x2F;code&gt; follows the law we can keep adding arguments with little effort. Now just for fun let&#x27;s create a &lt;code&gt;liftN&lt;&#x2F;code&gt; function that can take any number of arguments. This time we will need a little help.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;=&lt;&#x2F;span&gt;&lt;span&gt; args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftN&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;RN&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span&gt; RN&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; flipped&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; R&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;R&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;      =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;RN&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;flipped&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;curried&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; R1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That is the &quot;automated&quot; version of &lt;code&gt;liftA3&lt;&#x2F;code&gt;. Now we can use all kinds of functions.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;liftN&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Hello, &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Dr&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;. &amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Acula&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;!!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: &amp;quot;Hello, Dr. Acula!!&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;applicative&quot;&gt;Applicative&lt;&#x2F;h3&gt;
&lt;p&gt;You might have notice that everything we have built is some sort of extension of the previous methods, this will not be the exception. In order for our data structure to be an applicative it must first implement the Apply specification and then it must add one tiny detail.&lt;&#x2F;p&gt;
&lt;p&gt;The new contribution will be a method that can help us take a value and convert it into the simplest unit of our data structure. It&#x27;s kinda like a constructor method in a class, the idea is to take any regular value and take to the &quot;context&quot; of our structure so we can start making any kind of operation.&lt;&#x2F;p&gt;
&lt;p&gt;You&#x27;ve probably used something like this before. With the &lt;code&gt;Promise&lt;&#x2F;code&gt; class we can do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Promise { &amp;lt;state&amp;gt;: &amp;quot;pending&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; HELLO&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;After we call &lt;code&gt;Promise.resolve&lt;&#x2F;code&gt; our &lt;code&gt;&#x27;hello&#x27;&lt;&#x2F;code&gt; is &quot;inside&quot; a promise and we can immediately call methods like &lt;code&gt;then&lt;&#x2F;code&gt; or &lt;code&gt;catch&lt;&#x2F;code&gt;. If we wanted to do the same using the constructor we would have to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; reject&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;); });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Promise { &amp;lt;state&amp;gt;: &amp;quot;pending&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; HELLO&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All that extra effort doesn&#x27;t look very clean, right? This is why a &quot;shortcut&quot; is useful, we can make a &quot;simple&quot; unit of our data structure without extra steps. It&#x27;s time to make this for &lt;code&gt;Result&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;of =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I can assure you that is a coincidence, it&#x27;s not always this easy. But really this is everything we need and we can prove that if we check the laws.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Identity&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Our old friend &quot;identity&quot; comes back to remind us that &lt;code&gt;.ap&lt;&#x2F;code&gt; really does behave like &lt;code&gt;.map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Homomorphism&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Okay, so here we have a new concept we should learn. As far as I can tell an Homomorphism is some kind of transformation where we keep some of the &quot;abilities&quot; of the original value. I think this law tells us that &lt;code&gt;.of&lt;&#x2F;code&gt; doesn&#x27;t have any effect when you &quot;apply&quot; a function to a value.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To recap, in the first statement we apply &lt;code&gt;exclaim&lt;&#x2F;code&gt; to &lt;code&gt;value&lt;&#x2F;code&gt; while both of them are wrapped inside a variant. In the second statement we apply &lt;code&gt;exclaim&lt;&#x2F;code&gt; to &lt;code&gt;value&lt;&#x2F;code&gt; directly. In both cases we get the same result. With this we prove that there is nothing special about &lt;code&gt;.of&lt;&#x2F;code&gt;, it&#x27;s just there to create a unit of our data structure.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Interchange&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;y&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;U&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;U&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;y&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is a tough one. Honestly, I&#x27;m not sure I understand what&#x27;s trying to prove here. If I had to guess I would say that it doesn&#x27;t matter which side of &lt;code&gt;.ap&lt;&#x2F;code&gt; we have the &lt;code&gt;.of&lt;&#x2F;code&gt; method, if can treat its content as a constant the result will be the same.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;span&gt; Exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;monad&quot;&gt;Monad&lt;&#x2F;h3&gt;
&lt;p&gt;To create a Monad we must implement the Applicative and Chain specifications. So, what we have to do now is... nothing. Really, there is nothing left to do. You have created a Monad, congrats! Want to read some laws?&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Identity - left side&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;f&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We check.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; exclaim&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;At this point you may be wondering, couldn&#x27;t we have done this after implementing &lt;code&gt;.chain&lt;&#x2F;code&gt; (since&lt;code&gt; .of&lt;&#x2F;code&gt; is an alias for &lt;code&gt;Ok&lt;&#x2F;code&gt;)? The answer is yes, but that wouldn&#x27;t be fun.&lt;&#x2F;p&gt;
&lt;p&gt;So, what problems does this solve? What do we gain? This solves a very specific problem, one that could happen very often if we use Functors and that is nested structures.&lt;&#x2F;p&gt;
&lt;p&gt;Say we want to retrieve a &lt;code&gt;config&lt;&#x2F;code&gt; object that we have in &lt;code&gt;localStorage&lt;&#x2F;code&gt;. We know this action can fail that&#x27;s why we created a function that uses our &lt;code&gt;Result&lt;&#x2F;code&gt; variant.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; localStorage&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getItem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;config&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Config not found&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This works wonders. Now the problem is &lt;code&gt;localStorage.getItem&lt;&#x2F;code&gt; doesn&#x27;t return an object, the data we want is in a &lt;code&gt;String&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;{&amp;quot;dark-mode&amp;quot;:true}&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We anticipated this so we created a function that can transform this into an object.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; safe_parse&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt;  try&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;JSON&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;parse&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt; catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We know that &lt;code&gt;JSON.parse&lt;&#x2F;code&gt; can also fail, that&#x27;s why we figure we could wrap it in a &quot;safe function&quot; that also uses our variant. Now try to use those two together using &lt;code&gt;.map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;safe_parse&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: { &amp;quot;dark-mode&amp;quot;: true } } }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Is that what you expected? If we close our eyes and pretend that &lt;code&gt;get_config&lt;&#x2F;code&gt; is always successful we could replace it with this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;{&amp;quot;dark-mode&amp;quot;:true}&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: &amp;quot;{\&amp;quot;dark-mode\&amp;quot;:true}&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This law tells me that if I use &lt;code&gt;.chain&lt;&#x2F;code&gt; to apply the function to a structure it&#x27;s the same as applying that function to the data inside the structure. Let&#x27;s use that, we have the perfect function for this situation.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;{&amp;quot;dark-mode&amp;quot;:true}&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;{&amp;quot;dark-mode&amp;quot;:true}&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I hope by now you know what I&#x27;m going to do. You&#x27;ve seen it before.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;join =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, it&#x27;s &lt;code&gt;.join&lt;&#x2F;code&gt;. This is starting to look like a prequel. Let&#x27;s open our eyes now and go back to our problem with &lt;code&gt;.map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;safe_parse&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: { &amp;quot;dark-mode&amp;quot;: true } }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We solved our problem. Now here comes the funny thing, in theory we could implement &lt;code&gt;.chain&lt;&#x2F;code&gt; using &lt;code&gt;.join&lt;&#x2F;code&gt; and &lt;code&gt;.map&lt;&#x2F;code&gt;. Using &lt;code&gt;.join&lt;&#x2F;code&gt; and &lt;code&gt;.map&lt;&#x2F;code&gt; together is so common that &lt;code&gt;.chain&lt;&#x2F;code&gt; was created (also, that&#x27;s why some people call it &lt;code&gt;.flatMap&lt;&#x2F;code&gt;). Let&#x27;s use it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;safe_parse&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;type&amp;quot;: &amp;quot;Ok&amp;quot;, &amp;quot;data&amp;quot;: { &amp;quot;dark-mode&amp;quot;: true } }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Isn&#x27;t it great when everything is wrap in a nice cycle? But don&#x27;t get up your seats just yet, we still have a post-credit scene.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Identity - right side&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;So predictable. Alright, what does it say?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;M&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; is equivalent to&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We know we can do this but let&#x27;s check anyway.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Nice, what can we do with this? Well, the only thing I can think of right now is making a more generic version of &lt;code&gt;.map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;v&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It may not look like much because &lt;code&gt;.of&lt;&#x2F;code&gt; and &lt;code&gt;Ok&lt;&#x2F;code&gt; are the same thing, but if our constructor was a bit more complex (like &lt;code&gt;Promise&lt;&#x2F;code&gt;) this could be a nice way to simplify the implementation of &lt;code&gt;.map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;And with this we close the cycle and end our journey through Fantasy Land.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;If you read all of this but couldn&#x27;t understand all of it, don&#x27;t worry you can blame me, maybe I didn&#x27;t explain as well as I thought. It took me like two year to gather the knowledge to write this. Even if it takes you like a month to get it, you are already doing better than me.&lt;&#x2F;p&gt;
&lt;p&gt;A nice way to try understand how this methods work is to follow the specification using regular class instances, that should be easier.&lt;&#x2F;p&gt;
&lt;p&gt;I hope you enjoyed the reading and I hope I didn&#x27;t cause you a headache. Until next time.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land&quot;&gt;Fantasy Land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;http:&#x2F;&#x2F;www.tomharding.me&#x2F;fantasy-land&#x2F;&quot;&gt;Fantas, Eel, and Specification&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.to&#x2F;macsikora&#x2F;algebraic-structures-explained-part-1-base-definitions-2576&quot;&gt;Algebraic Structures Explained - Part 1 - Base Definitions&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Reduce: how and when</title>
        <published>2020-04-21T00:00:00+00:00</published>
        <updated>2020-04-21T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/reduce-how-and-when/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/reduce-how-and-when/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/reduce-how-and-when/">&lt;p&gt;Let&#x27;s talk about the elephant in the &lt;code&gt;Array&lt;&#x2F;code&gt; prototype, the not so loved &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Array&#x2F;Reduce&quot;&gt;reduce&lt;&#x2F;a&gt; method but we&#x27;re not going to discuss whether if it&#x27;s good or not, let&#x27;s not do that. We&#x27;ll talk about how it works internally, then we&#x27;ll try to figure out under what situation it can be an effective solution.&lt;&#x2F;p&gt;
&lt;p&gt;To make sure everyone here knows how it works we&#x27;re going to make our own implementation.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-it-works&quot;&gt;How it works&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;code&gt;reduce&lt;&#x2F;code&gt; is a function that takes a list of values and transform it into something else. The key here is the word &lt;strong&gt;transformation&lt;&#x2F;strong&gt;. The &quot;user&quot; of our function is the one that determines what&#x27;s going to happen. What does that mean? It means that apart from the array that we&#x27;re going to process we need to take a callback function as a parameter. So the function signature will be this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; code...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We got ourselves some values, now what? What do we do with them? Usually the &lt;code&gt;Array&lt;&#x2F;code&gt; methods apply the function to every element in it. Let&#x27;s do that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It&#x27;s still not what we want but we&#x27;re getting there. Now for the secret ingredient, the accumulator. We will create a variable that remembers the &lt;strong&gt;current state&lt;&#x2F;strong&gt; of our transformation. Every time we apply the &lt;code&gt;callback&lt;&#x2F;code&gt; function to a value we save the result in the accumulator. As a bonus before we save the new state we will pass the current state to the &lt;code&gt;callback&lt;&#x2F;code&gt; function so our &quot;user&quot; doesn&#x27;t have to make any effort.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function reduce(arr, callback) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   let state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(const value of arr) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;     callback(value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     state = callback(state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Keep those green lines in your mind at all times. No matter how complex &lt;code&gt;reduce&lt;&#x2F;code&gt; looks on the outside, no matter how many weird tricks you see in the wild, those three lines are the only thing that matters.&lt;&#x2F;p&gt;
&lt;p&gt;That may not be an exact replica of &lt;code&gt;Array.reduce&lt;&#x2F;code&gt; but it&#x27;ll do for now. Let&#x27;s test it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; array1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; 1 + 2 + 3 + 4&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: 10&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;See that &lt;code&gt;if&lt;&#x2F;code&gt;? It&#x27;s there because &lt;code&gt;state&lt;&#x2F;code&gt; doesn&#x27;t have a value in the first iteration of the loop, it&#x27;s something unnecessary. As authors of &lt;code&gt;reduce&lt;&#x2F;code&gt; we can help reduce the amount of code that &lt;code&gt;callback&lt;&#x2F;code&gt; needs. If we take some of the responsibility out of the &lt;code&gt;callback&lt;&#x2F;code&gt; we can make &lt;code&gt;reduce&lt;&#x2F;code&gt; a lot more flexible. What we&#x27;ll do is take the first element in the array and make that our initial state.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function reduce(arr, callback) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   let state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   for(const value of arr) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   let state = arr[0];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   let rest = arr.slice(1);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   for(const value of rest) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      state = callback(state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s do it again.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; array1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; 1 + 2 + 3 + 4&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: 10&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you&#x27;re still having a hard time trying to figure out what&#x27;s happening then let me see if I can help. If we take &lt;code&gt;callback&lt;&#x2F;code&gt; out of the picture this is what happens.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Remember the green lines?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function reduce(arr) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   let state = arr[0];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    let rest = arr.slice(1);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(const value of rest) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    state = state + value;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;See that? That&#x27;s the only thing you need to remember. As we can see &lt;code&gt;reduce&lt;&#x2F;code&gt; give us the ability increase the &quot;capacity&quot; of a binary &lt;strong&gt;operation&lt;&#x2F;strong&gt;, to make it process a lot more values.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;when-can-i-use-this&quot;&gt;When can I use this?&lt;&#x2F;h2&gt;
&lt;p&gt;So &lt;code&gt;reduce&lt;&#x2F;code&gt; is one of those functions that can be used in many different situations but it&#x27;s not always the best solution, still there is a time and place for it and now that we know how it works we can figure out what is the best use case.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;an-ideal-use-case&quot;&gt;An ideal use case&lt;&#x2F;h3&gt;
&lt;p&gt;The previous example should have give you a clue. Our function is more effective when we follow a certain pattern. Let&#x27;s think about the &lt;code&gt;callback&lt;&#x2F;code&gt; in that example. We know it needs two numbers, runs a math operation and returns a number. Basically this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Number + Number -&amp;gt; Number&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s nice, but if we take a step back and think in more general terms this is what we got.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;TypeA + TypeA -&amp;gt; TypeA&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There are two values of the same type (TypeA) and an operation (the + sign) that returns another instance of the same type (TypeA). When we look at it in that way we can see a pattern that we can apply beyond math. Let&#x27;s do another example with some numbers, this time we&#x27;ll do a comparison.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; max&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; another_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; another_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; another_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;max&lt;&#x2F;code&gt; is a function that takes two numbers, compares them and returns the largest. It&#x27;s a very general function and a bit limited. Now, if we think again in abstract terms we see that pattern again.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;TypeA + TypeA -&amp;gt; TypeA&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we want to be more specific.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Number + Number -&amp;gt; Number&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You know what it means, we can use &lt;code&gt;reduce&lt;&#x2F;code&gt; to make it process a lot more than two values.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; array2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 39&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 38&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; 40 &amp;gt; 41 &amp;gt; 42 &amp;gt; 39 &amp;gt; 38&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; max&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: 42&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Turns out the pattern we&#x27;ve been following to create the &lt;code&gt;callback&lt;&#x2F;code&gt; for &lt;code&gt;reduce&lt;&#x2F;code&gt; has a name in functional programming, this one is called a &lt;strong&gt;Semigroup&lt;&#x2F;strong&gt;. When you have two values of the same type and a way to combine them, you are in the presence of a semigroup. So, &lt;em&gt;two values&lt;&#x2F;em&gt; + &lt;em&gt;way of combine them&lt;&#x2F;em&gt; = &lt;em&gt;Semigroup&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;You can prove you have a function that follows the rules of a semigroup, all you need to do is make sure it is associative. For example with our &lt;code&gt;max&lt;&#x2F;code&gt; function we can do.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; max_1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; max&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;max&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; max_2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; max&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; max&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;max_1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; max_2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;See? Doesn&#x27;t matter which order you group your operation, it yields the same result. Now we know that it&#x27;ll work if we combine it with &lt;code&gt;reduce&lt;&#x2F;code&gt; and an array of numbers.&lt;&#x2F;p&gt;
&lt;p&gt;Can these rules apply to a more complex data type? Of course. In javascript we already have a few types that fit the description. Think about arrays for a moment, in the array prototype we have the &lt;code&gt;concat&lt;&#x2F;code&gt; method that can merge two arrays into a new one.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this we have.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Array + Array -&amp;gt; Array&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Okay, the second parameter of &lt;code&gt;concat&lt;&#x2F;code&gt; doesn&#x27;t have to be an array but let&#x27;s ignore that for a second. If we use &lt;code&gt;concat&lt;&#x2F;code&gt; with &lt;code&gt;reduce&lt;&#x2F;code&gt; we get.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; array3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;39&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 38&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; [40, 41] + [42] + [39, 38]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: [40, 41, 42, 39, 38]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now if you wanted you could create a function that flattens one level of a multidimensional array, isn&#x27;t that great? And just like with numbers we don&#x27;t have to stick with just the built-in functions. If we have a helper function that works with two arrays and it&#x27;s associative we can combine it with &lt;code&gt;reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Say we have a function that joins the unique items of two arrays.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Good, it works with two values of the same type but let&#x27;s see if it&#x27;s an associative operation.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; union_1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]), [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;39&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; union_2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;39&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;union_1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span&gt; union_2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, it follows the rules, that means that we can process multiple arrays if we use it with &lt;code&gt;reduce&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; array4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;awesome&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;world&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;!!&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;world&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: [ &amp;quot;hello&amp;quot;, &amp;quot;awesome&amp;quot;, &amp;quot;world&amp;quot;, &amp;quot;!&amp;quot;, &amp;quot;!!&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;some-resistance&quot;&gt;Some resistance&lt;&#x2F;h3&gt;
&lt;p&gt;You may have notice that in all our examples the data always has the right type, this isn&#x27;t always the case in the &quot;real world&quot;. Sometimes we get in situations where the first element of the array is not a valid input for our &lt;code&gt;callback&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Imagine we want to use &lt;code&gt;concat&lt;&#x2F;code&gt; yet again but this time the array we have is this one.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; array5&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;40&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;39&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 38&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we try to &lt;code&gt;reduce&lt;&#x2F;code&gt; it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array5&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;TypeError: one.concat is not a function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It happens because in the first iteration &lt;code&gt;one&lt;&#x2F;code&gt;&#x27;s value is the number &lt;code&gt;40&lt;&#x2F;code&gt; which doesn&#x27;t have &lt;code&gt;concat&lt;&#x2F;code&gt; method. What do we do? It is considered a good practice to pass a fixed initial value to avoid these kind of bugs. But we have a problem, we can&#x27;t pass an initial value to our &lt;code&gt;reduce&lt;&#x2F;code&gt;. We&#x27;re going to fix that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; function reduce(arr, callback) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   let state = arr[0];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   let rest = arr.slice(1);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; function reduce(arr, ...args) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   if(args.length === 1) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     var [callback] = args;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     var state = arr[0];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     var rest = arr.slice(1);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   } else if(args.length &amp;gt;= 2) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     var [state, callback] = args;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     var rest = arr;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    for(const value of rest) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     state = callback(state, value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To fix the previous mistake what we&#x27;ll do is pass &lt;code&gt;reduce&lt;&#x2F;code&gt; an empty array as an initial value.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array5&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [],&lt;&#x2F;span&gt;&lt;span&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: [ 40, 41, 42, 39, 38 ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The error is gone and we have the array we wanted. But notice that the empty array not only fixed the error, it didn&#x27;t influence the end result of the operation. Like numbers with the arrays we have the notion of an empty element that we can use in our functions without causing a fatal error in our program.&lt;&#x2F;p&gt;
&lt;p&gt;The empty array can be seen as an &lt;strong&gt;identity element&lt;&#x2F;strong&gt;, a neutral value that when applied to a function doesn&#x27;t have an effect on the end result. Guess what, this behavior also has name in functional programming, it is known as a &lt;strong&gt;Monoid&lt;&#x2F;strong&gt;. When we have a semigroup with an identity element we get a monoid. So, &lt;em&gt;semigroup&lt;&#x2F;em&gt; + &lt;em&gt;identity element&lt;&#x2F;em&gt; = &lt;em&gt;Monoid&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;We can prove that arrays behave like a monoid in our functions.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Concat&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; concat_1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [&amp;quot;hello&amp;quot;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; concat_2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], []);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [&amp;quot;hello&amp;quot;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;concat_1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span&gt; concat_2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Union&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; union_3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([], [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [&amp;quot;hello&amp;quot;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; union_4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;], []);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [&amp;quot;hello&amp;quot;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;union_3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span&gt; union_4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;,&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected output: true&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Why does it matter? Think about this: how many times you had to write an &lt;code&gt;if&lt;&#x2F;code&gt; statement to guard against a &lt;code&gt;null&lt;&#x2F;code&gt; value or &lt;code&gt;undefined&lt;&#x2F;code&gt;? If we can represent an &quot;empty value&quot; in a safe way we prevent a whole category of errors in our programs.&lt;&#x2F;p&gt;
&lt;p&gt;Another situation where monoids come in handy is when we want to perform an &quot;unsafe&quot; action on a value. We can use a reference to an empty value to make this unsafe operation while keeping the other values on the array intact.&lt;&#x2F;p&gt;
&lt;p&gt;Imagine that we have pieces of information scattered over several objects and we want to merge all those pieces.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; array6&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt;name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Harold&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt;lastname&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Cooper&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;wrong&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Normally you would use the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Operators&#x2F;Spread_syntax&quot;&gt;spread syntax&lt;&#x2F;a&gt; to merge all these things, but let&#x27;s say we live in a world where that is not possible. Fear not, we have a nice utility function that can do it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;assign&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you think about it &lt;code&gt;Object.assign&lt;&#x2F;code&gt; also follows the pattern.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;TypeA + TypeA -&amp;gt; TypeA&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We give it two objects and it gives us back yet another object. But the catch is that it mutates the one we pass in the first parameter. So if we do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array6&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;assign&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected value: { &amp;quot;name&amp;quot;: &amp;quot;Harold&amp;quot;, &amp;quot;lastname&amp;quot;: &amp;quot;Cooper&amp;quot;, &amp;quot;state&amp;quot;: &amp;quot;wrong&amp;quot; } &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Looks like everything is good, but it&#x27;s not. If check you &lt;code&gt;array6[0]&lt;&#x2F;code&gt; you&#x27;ll see that it was changed, you definitely don&#x27;t want that. Fortunately objects in javascript also behave like a monoid so they have a valid &quot;empty value&quot; we can use. So the right way of using it would be this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;array6&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {},&lt;&#x2F;span&gt;&lt;span&gt; Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;assign&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected value: &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { &amp;quot;name&amp;quot;: &amp;quot;Harold&amp;quot;, &amp;quot;lastname&amp;quot;: &amp;quot;Cooper&amp;quot;, &amp;quot;state&amp;quot;: &amp;quot;wrong&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;array6&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Expected value: &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; [ { &amp;quot;name&amp;quot;: &amp;quot;Harold&amp;quot; }, { &amp;quot;lastname&amp;quot;: &amp;quot;Cooper&amp;quot; }, { &amp;quot;state&amp;quot;: &amp;quot;wrong&amp;quot; } ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We can say that when we work with an array of values that follow the rules of the monoids we can be certain that &lt;code&gt;reduce&lt;&#x2F;code&gt; will be a good choice to process that.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;beyond-arrays&quot;&gt;Beyond arrays&lt;&#x2F;h2&gt;
&lt;p&gt;If we can implement a version of &lt;code&gt;reduce&lt;&#x2F;code&gt; for arrays then it wouldn&#x27;t be weird to think that other people have implemented something similar in other data types. Knowing how &lt;code&gt;reduce&lt;&#x2F;code&gt; works could be useful if you use a library that has a method like that.&lt;&#x2F;p&gt;
&lt;p&gt;For example, in &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;mithril.js.org&#x2F;stream.html&quot;&gt;mithril-stream&lt;&#x2F;a&gt; there is a method called &lt;code&gt;scan&lt;&#x2F;code&gt; that has the following signature.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Stream.scan(fn, accumulator, stream)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That &lt;code&gt;fn&lt;&#x2F;code&gt; variable must be a function that follows this pattern.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;(accumulator, value) -&amp;gt; result | SKIP&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Recognize that? I hope so. Those are the same requirements &lt;code&gt;reduce&lt;&#x2F;code&gt; has. Okay, but what does &lt;code&gt;scan&lt;&#x2F;code&gt; do? It executes the function &lt;code&gt;fn&lt;&#x2F;code&gt; when the source (&lt;code&gt;stream&lt;&#x2F;code&gt;) produces a new value. &lt;code&gt;fn&lt;&#x2F;code&gt; gets called with the current state of the accumulator and the new value on the stream, the returned value then becomes the new state of the accumulator. Does that sound familiar?&lt;&#x2F;p&gt;
&lt;p&gt;You can test &lt;code&gt;scan&lt;&#x2F;code&gt; with our function &lt;code&gt;union&lt;&#x2F;code&gt; and see how it behaves.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;import&lt;&#x2F;span&gt;&lt;span&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;https:&#x2F;&#x2F;cdn.pika.dev&#x2F;mithril-stream@^2.0.0&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;another&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;node&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;js&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;scan&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;union&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [],&lt;&#x2F;span&gt;&lt;span&gt; list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;node&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;js&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;deno&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;node&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;javascript&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You should be able to see how the list only adds unique values.&lt;&#x2F;p&gt;
&lt;p&gt;You can see a modified version of that in this pen.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;NWGrozo&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;A different reduce&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;NWGrozo&quot;&gt;A different reduce&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;


&lt;script async src=&quot;https:&#x2F;&#x2F;static.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;


&lt;p&gt;Our knowledge of the method &lt;code&gt;reduce&lt;&#x2F;code&gt; (and maybe a little bit of semigroups and monoids) can help us create helper function that can be reuse in different data types. How cool is that?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Even though I didn&#x27;t mention the many things you can do with &lt;code&gt;reduce&lt;&#x2F;code&gt; now you have the tools to be able to identify the situations where this method can be applied effectively, even if you&#x27;re not sure you can make the necessary tests to know if the operation you want to do has the right properties.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=Qnkn4612ZIQ&quot;&gt;Practical Category Theory: Monoids (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;thefrontside&#x2F;funcadelic.js&quot;&gt;Funcadelic.js&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jrsinclair.com&#x2F;articles&#x2F;2019&#x2F;functional-js-do-more-with-reduce&#x2F;&quot;&gt;Functional JavaScript: How to use array reduce for more than just numbers&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Array&#x2F;Reduce&quot;&gt;Array.prototype.reduce (MDN)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land#fantasy-land-specification&quot;&gt;Fantasy Land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Learning functional programming: A roadmap</title>
        <published>2020-04-03T00:00:00+00:00</published>
        <updated>2020-04-03T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/roadmap/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/roadmap/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/roadmap/">&lt;p&gt;Learning about functional programming is not an easy task, specially if you search for articles that have concrete examples of the concepts they try to teach. I have been learning about this paradigm for a while and I want it to share the notes I have taken, the ones I&#x27;ve turn into articles, and also the source material where I got the information.&lt;&#x2F;p&gt;
&lt;p&gt;Even though all these articles are related I didn&#x27;t plan on writing them. So, I&#x27;ll be presenting some sort of guide (a suggestion) on the order they should be read.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-basics&quot;&gt;The basics&lt;&#x2F;h2&gt;
&lt;p&gt;To begin I would like you to see the video of the talk that convinced me to try learning this paradigm. The talk is about what is and what isn&#x27;t functional programming, it also shows some examples of the core principles using javascript.&lt;&#x2F;p&gt;
&lt;div&gt;
  &lt;iframe src=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;embed&#x2F;qtsbZarFzm8&quot; allowfullscreen&gt;&lt;&#x2F;iframe&gt;
&lt;&#x2F;div&gt;
&lt;p&gt;To complement that video I wrote my own notes.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;pure-functions&#x2F;&quot;&gt;Pure functions and why they are a good idea&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;dealing-with-side-effects-and-pure-functions&#x2F;&quot;&gt;Dealing with side effects and pure functions in javascript&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;further-reading&quot;&gt;Further reading&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;codewords.recurse.com&#x2F;issues&#x2F;one&#x2F;an-introduction-to-functional-programming&quot;&gt;An introduction to functional programming&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;a-very-special-tool&quot;&gt;A very special tool&lt;&#x2F;h2&gt;
&lt;p&gt;If you read everything so far you already have enough knowledge to add some functional style to your everyday coding. You don&#x27;t have to know every trick in the book to start seeing the benefits of this paradigm.&lt;&#x2F;p&gt;
&lt;p&gt;So, I want you to pay close attention to something called &lt;strong&gt;partial application&lt;&#x2F;strong&gt;, just like the concept of a &lt;strong&gt;pure function&lt;&#x2F;strong&gt;, partial application can help you a lot even if you decide you don&#x27;t want to write code in a functional style.&lt;&#x2F;p&gt;
&lt;p&gt;This are my notes on the topic (with practical examples):&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;partial-application&#x2F;&quot;&gt;Partial application&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;If you are convinced that this is useful then watch this video, in here you can see the kind of thing you can accomplish.&lt;&#x2F;p&gt;
&lt;div&gt;
  &lt;iframe src=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;embed&#x2F;m3svKOdZijA&quot; allowfullscreen&gt;&lt;&#x2F;iframe&gt;
&lt;&#x2F;div&gt;
&lt;h2 id=&quot;how-to-put-the-pieces-together&quot;&gt;How to put the pieces together&lt;&#x2F;h2&gt;
&lt;p&gt;Now, knowing the basics is one thing, it&#x27;s a whole other deal knowing how to use them in the most effective way. You already have the tools but you might be wondering how all of this fits together, that is our next step.&lt;&#x2F;p&gt;
&lt;p&gt;In this article we are going to learn how to use everything we have learned.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;composition-techniques&#x2F;&quot;&gt;Composition techniques&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Just in case you missed it. In this talk (the source of the previous article) you can see in more detail what composition is about.&lt;&#x2F;p&gt;
&lt;div&gt;
  &lt;iframe src=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;embed&#x2F;vDe-4o8Uwl8&quot; allowfullscreen&gt;&lt;&#x2F;iframe&gt;
&lt;&#x2F;div&gt;
&lt;h2 id=&quot;one-step-further&quot;&gt;One step further&lt;&#x2F;h2&gt;
&lt;p&gt;By now you must know how to manipulate functions and make them do your bidding. But I bet there are still things you want to know in more detail, two in particular: Functors and Monads. So, I&#x27;ll try my best to tell you how you can use them to your advantage.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;the-power-of-map&#x2F;&quot;&gt;Have you met Functors?&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;applicative-functors&#x2F;&quot;&gt;Something about Applicative Functors&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;an-introduction-to-monads-in-js&#x2F;&quot;&gt;An Introduction to Monads&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;using-a-maybe&#x2F;&quot;&gt;Using a Maybe&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;extra-content&quot;&gt;Extra content&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;reduce-how-and-when&#x2F;&quot;&gt;Reduce: how and when&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;the-case-for-reducers&#x2F;&quot;&gt;The case for reducers&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;transducers-in-javascript&#x2F;&quot;&gt;Transducers in javascript&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;lenses-a-k-a-composable-getters-and-setters&#x2F;&quot;&gt;Lenses: an alternative to getters and setters&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;tagged-unions-and-fantasy-land&#x2F;&quot;&gt;Exploring Fantasy Land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;more-interesting-talks&quot;&gt;More interesting talks&lt;&#x2F;h3&gt;
&lt;p&gt;If you&#x27;re still wondering what you can do just by composing functions just watch this.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=7BsfMMYvGaU&quot;&gt;Mary had a little lambda&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=SfWR3dKnFIo&quot;&gt;Oh Composable World!&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;til-next-time&quot;&gt;&#x27;Til next time&lt;&#x2F;h2&gt;
&lt;p&gt;If you got here and read everything then you know as much as I do. Got nothing else to show you. Whether you decided to adopt a fully functional style or not I hope you learned something that you can apply in your everyday coding.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Pure functions and why they are a good idea</title>
        <published>2020-04-02T00:00:00+00:00</published>
        <updated>2020-04-02T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/pure-functions/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/pure-functions/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/pure-functions/">&lt;p&gt;When we talk about functional programming very few things can be as important as pure functions. People who write code in this style make a considerable effort to contain as much logic as they can in pure functions, I&#x27;ll try to explain some of the reasons behind this. But, first things first...&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-s-a-pure-function&quot;&gt;What&#x27;s a pure function?&lt;&#x2F;h2&gt;
&lt;p&gt;A function whose output is only determined by its input and has no observable effect on the outside world (has no side effects).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;benefits&quot;&gt;Benefits&lt;&#x2F;h3&gt;
&lt;p&gt;I want to focus on the benefits they provide to us humans who read and interpret code in our minds.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;They are predictable&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Given the same inputs, it always produces the same output. This is one of the most relevant properties they have, and to me is the most important. It gives us the ability to test with relative ease how effective is our solution.&lt;&#x2F;p&gt;
&lt;p&gt;Say that we have a function that transforms every letter in a string to uppercase. What do we need to prove that it works? The function, some input data and the expected output.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hello&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;HELLO&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There is no need to emulate an entire environment or to use special tools, we just compare the result with the expected output. This gives us confidence in what we create, because we can prove with certainty that it works appropriately.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Comprehension&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;When it comes to code we spend more time reading and analyzing than writing it. Communication is one aspect that we always need to consider. In theory, a pure function would need the least amount of context in order to understand its behavior because everything you need to know about it is (or at least it should) in the body and its arguments.&lt;&#x2F;p&gt;
&lt;p&gt;Another property that pure function have is &lt;strong&gt;referential transparency&lt;&#x2F;strong&gt;, this means that we can replace a function call with its return value.&lt;&#x2F;p&gt;
&lt;p&gt;For example, this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;to_uppercase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hi&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;, user&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Can be replaced by this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;HI, user&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It means that when you understand what a pure function does you can mentally replace the function call with the return value.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Composition&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;If you have created a pure function there is a very strong chance that what you have is an independent component that can be reused in different contexts. Being independent and reusable makes them the perfect candidates to be combined with other components. Think about it, if you combine a pure function with another into a new function, it results in yet another pure function. This is one powerful feature allows you to create complex procedures by composing &quot;simple&quot; pieces.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;further-reading&quot;&gt;Further reading&lt;&#x2F;h2&gt;
&lt;p&gt;As good as pure functions are at some point you need to abandon the idea of purity and cause some effect on the outside world (show something on the screen, make an HTTP request, etc..) Because of that I have prepared more material with more details about this topic.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;composition-techniques&#x2F;&quot;&gt;Composition techniques&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;dealing-with-side-effects-and-pure-functions&#x2F;&quot;&gt;Dealing with side effects and pure functions in javascript &lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=qtsbZarFzm8&amp;amp;feature=youtu.be&quot;&gt;Functional Programming in JS: What? Why? How? (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;codewords.recurse.com&#x2F;issues&#x2F;one&#x2F;an-introduction-to-functional-programming&quot;&gt;An introduction to functional programming&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;getify&#x2F;Functional-Light-JS&#x2F;blob&#x2F;master&#x2F;manuscript&#x2F;ch5.md&#x2F;#chapter-5-reducing-side-effects&quot;&gt;Functional-Light JavaScript - Chapter 5: Reducing Side Effects&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Functional programming for your everyday javascript: Composition techniques</title>
        <published>2020-03-30T00:00:00+00:00</published>
        <updated>2020-03-30T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/composition-techniques/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/composition-techniques/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/composition-techniques/">&lt;p&gt;Today we are going to talk about function composition. The art of creating big things with &quot;simple&quot; pieces. It will be even better if you don&#x27;t know anything about functional programming, this will be an introduction to common concepts and patterns used in that paradigm that can be implemented in javascript. What I&#x27;m about to show you is not a magical formula to make your code more readable or bug free, that&#x27;s not how any of this works. I do believe that it can help solve some problems, but in order to do that in the best way you need to keep a few things in mind. So, before I show you any implementation we are going to talk about some concepts and a little bit about philosophy.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-you-need-to-know&quot;&gt;What you need to know&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;what-is-function-composition&quot;&gt;What is function composition?&lt;&#x2F;h3&gt;
&lt;p&gt;It&#x27;s a mechanism that allows us to combine two or more function into a new function.&lt;&#x2F;p&gt;
&lt;p&gt;It looks like a simple idea, haven&#x27;t we all at some point in our lives combined a couple of functions? But do we really think about composition when we create them? What will help us make functions already designed to be combined?&lt;&#x2F;p&gt;
&lt;h3 id=&quot;philosophy&quot;&gt;Philosophy&lt;&#x2F;h3&gt;
&lt;p&gt;Function composition is more effective if you follow certain principles.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;The function should only have one purpose, one responsibility.&lt;&#x2F;li&gt;
&lt;li&gt;Always think the returned value will be consumed by another function.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;You&#x27;ve probably heard this before, it&#x27;s a fragment of the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Unix_philosophy#Origin&quot;&gt;unix philosophy&lt;&#x2F;a&gt;. Ever wondered how come &lt;code&gt;bash&lt;&#x2F;code&gt;, despite having a weird syntax and many limitations, is so popular? Those two principle are a big part. A lot of the software designed for that environment is specially made to be a reusable component, and when you &quot;connect&quot; two or more the result is another program that can be connected with other unknown programs.&lt;&#x2F;p&gt;
&lt;p&gt;For some it might seem silly or even excessive to have many little functions that do just one thing, specially if what they do looks useless, but I can prove to you that every function can be valuable in the right context.&lt;&#x2F;p&gt;
&lt;p&gt;I&#x27;ll try to setup a situation where we can put in practice these principles.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: I apologize in advance for the bad use of &lt;code&gt;cat&lt;&#x2F;code&gt; and &lt;code&gt;grep&lt;&#x2F;code&gt;, I&#x27;ll do it just to prove a point about composition.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Say that we want to extract the value of variable named &lt;code&gt;HOST&lt;&#x2F;code&gt; that&#x27;s inside a &lt;code&gt;.env&lt;&#x2F;code&gt; file. Let&#x27;s try to do this in &lt;code&gt;bash&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;This is the file.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;ENV=development&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;HOST=http:&#x2F;&#x2F;locahost:5000&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To show the content of the file in the screen we use &lt;code&gt;cat&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; .env&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To filter that content and search the line we want we use &lt;code&gt;grep&lt;&#x2F;code&gt;, provide the pattern of the thing we want and the content of the file.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; .env&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;HOST=.*&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To get the value we use &lt;code&gt;cut&lt;&#x2F;code&gt;, this is going to take the result provided by &lt;code&gt;grep&lt;&#x2F;code&gt; and it&#x27;s going to divide it using a delimiter, then it will give us the section of the string we tell it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;shellscript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; .env&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;HOST=.*&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; |&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; --delimiter=&amp;quot;=&amp;quot; --fields=2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That should give us.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;http:&#x2F;&#x2F;locahost:5000&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we put that chain of commands in a script or a function inside our &lt;code&gt;.bashrc&lt;&#x2F;code&gt; we will effectively have a command that can be used in the same way by yet other commands that we don&#x27;t even know about. That is the kind of flexibility and power that we want to have.&lt;&#x2F;p&gt;
&lt;p&gt;I hope by now you know what kind of things you need to consider when you create a function but there is just one more thing I would like to tell you.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;functions-are-things&quot;&gt;Functions are things&lt;&#x2F;h3&gt;
&lt;p&gt;Let&#x27;s turn around and put our attention on javascript. Have you ever heard the phrase &quot;first-class function&quot;? It means that functions can be treated just like any other value. Let&#x27;s compare with arrays.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;You can assign them to variables&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;99&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;104&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; repeat_twice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;repeat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Pass them around as arguments to a function&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;repeat_twice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Return them from other functions&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; unary&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; safer_parseint&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; unary&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;parseInt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;safer_parseint&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Why am I showing you this? You have to be aware of this particular thing about javascript because we are going to create many helper functions, like &lt;code&gt;unary&lt;&#x2F;code&gt;, that manipulate other functions. It may take a while to get use to the idea of treating functions like data but it&#x27;s something you should definitely put in practice, is just one those patterns that you see a lot in functional programming.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;composition-in-practice&quot;&gt;Composition in practice&lt;&#x2F;h2&gt;
&lt;p&gt;Let&#x27;s get back to our example with the &lt;code&gt;.env&lt;&#x2F;code&gt;. We&#x27;ll recreate what we did with &lt;code&gt;bash&lt;&#x2F;code&gt;. First we&#x27;ll take a very direct approach, then we&#x27;ll explore the flaws of our implementation and try to fix them.&lt;&#x2F;p&gt;
&lt;p&gt;So, we&#x27;ve done this before, we know what to do. Let&#x27;s start by creating a function for each step.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Get the content of the file.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; fs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fs&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_env&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; fs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;readFileSync&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;utf-8&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Filter the content based on a pattern.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; exp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; RegExp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; lines&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7FB4CA;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; lines&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;line&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; exp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;test&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;line&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Get the value.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We&#x27;re ready. Let&#x27;s see what we can do to make these functions work together.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;natural-composition&quot;&gt;Natural composition&lt;&#x2F;h3&gt;
&lt;p&gt;I&#x27;ve already mentioned that our first try would be direct, the functions are ready and now the only thing we need to do is execute them in sequence.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;search_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_env&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is the perfect setup for function composition, the output of a function becomes the input of the next one, which is the same thing the &lt;code&gt;|&lt;&#x2F;code&gt; symbol does in &lt;code&gt;bash&lt;&#x2F;code&gt;. But unlike &lt;code&gt;bash&lt;&#x2F;code&gt;, in here the data flow goes from right to left.&lt;&#x2F;p&gt;
&lt;p&gt;Now let&#x27;s imagine that we have two more functions that do something with the value of &lt;code&gt;HOST&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;test&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;ping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;search_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_env&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()))));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Okay, now things are starting to get a little awkward, it&#x27;s still on a manageable level but the amount of parenthesis in it bothers me. This would be the perfect time to put all those things in a function and group them in a more readable way but let&#x27;s not do that yet, first we get help.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;automatic-composition&quot;&gt;Automatic composition&lt;&#x2F;h3&gt;
&lt;p&gt;This is where our new found knowledge about functions starts being useful. To solve our parenthesis problem we are going to &quot;automate&quot; the function calls, we&#x27;ll make a function that takes a list of functions, calls them one by one and makes sure the output of one becomes the input of the next.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; _composed&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Index of the last function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; last&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Call the last function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; with arguments of `_composed`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;last&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;--&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;](&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; loop through the rest in the opposite direction&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; last&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;--&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;](&lt;&#x2F;span&gt;&lt;span&gt;current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; search_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; get_env&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; get_host is `_composed`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Our parenthesis problem is gone, we can add more functions without hurting the readability.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  test&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  ping&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  search_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  get_env&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Just like in our first try, in here the data flows from right to left. If you want to flip the order you&#x27;d do it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; _piped&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; call the first function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; with the arguments of `_piped`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;](&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; loop through the rest in the original order&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span&gt; i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;++&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;i&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;](&lt;&#x2F;span&gt;&lt;span&gt;current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; current_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Behold.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;get_env&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; search_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All of this is great, but like I said before what we got here is the perfect setup. Our composition can only handle functions that take one parameter, and doesn&#x27;t support flow control. That&#x27;s not a bad thing, we should design our code so we can make this kind of composition more common but as we all know...&lt;&#x2F;p&gt;
&lt;h3 id=&quot;it-s-not-always-easy&quot;&gt;It&#x27;s not always easy&lt;&#x2F;h3&gt;
&lt;p&gt;Even in our example the only reason we were able to compose those functions was because we included everything we needed inside in the code, and we completely ignored the error handling. But not all is lost, there are ways to get over the limitations.&lt;&#x2F;p&gt;
&lt;p&gt;Before we move on I would like to change the example code, I&#x27;ll make it look more like the &lt;code&gt;bash&lt;&#x2F;code&gt; implementation.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; fs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; require&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fs&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; fs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;readFileSync&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;utf-8&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; exp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; RegExp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;pattern&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; lines&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7FB4CA;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; lines&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;line&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; exp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;test&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;line&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;split&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)[&lt;&#x2F;span&gt;&lt;span&gt;fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; -&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;They are not exactly like their &lt;code&gt;bash&lt;&#x2F;code&gt; counterparts but they do the job. But now if we wanted to put them together it would have to be like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt;delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;},&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It works but I&#x27;d say that is barely acceptable, I can still understand what is going on but I wouldn&#x27;t want to add a single thing to that chain. If we want to use &lt;code&gt;pipe&lt;&#x2F;code&gt; we&#x27;ll have to overcome our first obstacle.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;functions-with-multiple-inputs&quot;&gt;Functions with multiple inputs&lt;&#x2F;h4&gt;
&lt;p&gt;The solution to this is &lt;strong&gt;partial application&lt;&#x2F;strong&gt; and lucky for us javascript has a great support for the things we want to do. Our goal is simple, we are going to pass some of the parameters a function needs but without calling it. We want to be able to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To make this possible we are going to rely on a technique called &lt;strong&gt;currying&lt;&#x2F;strong&gt;, this consists on turning a multiple parameter function into several one parameter functions. The way we do this is by taking one parameter at a time, just keep returning functions until we get everything we need. We will do this to &lt;code&gt;grep&lt;&#x2F;code&gt; and &lt;code&gt;cut&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; function grep(pattern, content) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; function grep(pattern) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   return function(content) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      const exp = new RegExp(pattern);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      const lines = content.split(&amp;#39;\n&amp;#39;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return lines.find(line =&amp;gt; exp.test(line));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; function cut({ delimiter, fields }, str) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; function cut({ delimiter, fields }) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   return function(str) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return str.split(delimiter)[fields - 1];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In situations where is not possible to make a normal function support currying we can use the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Function&#x2F;bind&quot;&gt;bind&lt;&#x2F;a&gt; method in the &lt;code&gt;Function&lt;&#x2F;code&gt; prototype.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Lastly, if everything else looks too complex you always have the possibility to create an arrow function inline.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; },&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That should be enough to solve any kind of problem you face when you deal with multiple parameters. Let&#x27;s move on.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;functions-with-multiple-outputs&quot;&gt;Functions with multiple outputs&lt;&#x2F;h4&gt;
&lt;p&gt;Multiple outputs? I mean functions whose return value can have more than one type. This happens when we have functions that respond differently depending on how we use them or in what context. We have that kind of functions in our example. Let&#x27;s take a look at &lt;code&gt;cat&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; fs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;readFileSync&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;utf-8&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Inside &lt;code&gt;cat&lt;&#x2F;code&gt; we have &lt;code&gt;readFileSync&lt;&#x2F;code&gt;, that&#x27;s the one that reads the file in our system, an action that can fail for many reasons. It means that &lt;code&gt;cat&lt;&#x2F;code&gt; can return a &lt;code&gt;String&lt;&#x2F;code&gt; if everything goes well but can also throw an error if anything goes wrong. We need to handle both cases.&lt;&#x2F;p&gt;
&lt;p&gt;Unfortunately for us exceptions are not the only thing we need to worry about, we also need to deal with the absence of values. In &lt;code&gt;grep&lt;&#x2F;code&gt; we have this line.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;lines&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;line&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; exp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;test&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;line&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;find&lt;&#x2F;code&gt; method is the one that evaluates each line of the file. As you can imagine that can fail, maybe it just doesn&#x27;t find what we are looking for. Unlike &lt;code&gt;readFileSync&lt;&#x2F;code&gt;, &lt;code&gt;find&lt;&#x2F;code&gt; doesn&#x27;t throw an error, it just returns &lt;code&gt;undefined&lt;&#x2F;code&gt;. It&#x27;s not like &lt;code&gt;undefined&lt;&#x2F;code&gt; is bad, it&#x27;s that we don&#x27;t have any use for it. Assuming that the result will always be a &lt;code&gt;String&lt;&#x2F;code&gt; is what can cause an error.&lt;&#x2F;p&gt;
&lt;p&gt;How do we handle all this?&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Functors&lt;&#x2F;strong&gt; &amp;amp;&amp;amp; &lt;strong&gt;Monads&lt;&#x2F;strong&gt; (sorry for the big words). Giving an appropiate explanation of those two would take too much time so we are just going to focus on the practical aspects. For the time being you can think of them as data types that need to obey some laws (you can find some of them here: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land#fantasy-land-specification&quot;&gt;Fantasy land&lt;&#x2F;a&gt;).&lt;&#x2F;p&gt;
&lt;p&gt;Where do we start? With functors.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Functors&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Let&#x27;s create a data type that is capable of calling a function in the right context at the right time. You have seen one before: arrays. Try this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;41&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; empty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [42]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;empty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; =&amp;gt; []&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;See? &lt;code&gt;map&lt;&#x2F;code&gt; called &lt;code&gt;add_one&lt;&#x2F;code&gt; just once, on the &lt;code&gt;number&lt;&#x2F;code&gt; array. It didn&#x27;t do anything on the &lt;code&gt;empty&lt;&#x2F;code&gt; array, didn&#x27;t halt the execution of the script by throwing an error, it just returned an array. That&#x27;s the behavior that we want.&lt;&#x2F;p&gt;
&lt;p&gt;We will make that on our own. Let&#x27;s create a data type called &lt;code&gt;Result&lt;&#x2F;code&gt;, it will represent an action that may or may not be successful. It will have a &lt;code&gt;map&lt;&#x2F;code&gt; method that will only execute the provided callback when the action had the expected outcome.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We have our functor but now you might be wondering is that it? How does that help? We are taking it one step at a time. Let&#x27;s use it with &lt;code&gt;cat&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt;  try&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fs&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;readFileSync&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filepath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;utf-8&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt; catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What do we gain with this? Give it a chance.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You still have the same question on your mind, I can see it. Now try to add the other functions.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: I&#x27;m going to assume that you can use currying to achieve partial application.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;See that? That chain of &lt;code&gt;map&lt;&#x2F;code&gt;s looks a lot like &lt;code&gt;compose&lt;&#x2F;code&gt; or &lt;code&gt;pipe&lt;&#x2F;code&gt;. We did it, we got our composition back, and now with error handling (kinda).&lt;&#x2F;p&gt;
&lt;p&gt;I want to do something. That pattern, the one with the &lt;code&gt;try&#x2F;catch&lt;&#x2F;code&gt;, I want to put that in a function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_safe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt;    try&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Ok&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt; catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can transform &lt;code&gt;cat&lt;&#x2F;code&gt; without even touching its code.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_safe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You may want to do something in case something goes wrong, right? Let&#x27;s make that possible.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  const Result = {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result.Ok = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: fn =&amp;gt; Result.Ok(fn(value)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     catchMap: () =&amp;gt; Result.Ok(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result.Err = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: () =&amp;gt; Result.Err(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     catchMap: fn =&amp;gt; Result.Err(fn(value)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can make mistakes and be confident we are doing something about it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_safe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; show_error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`Whoops:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7FB4CA;&quot;&gt;\n&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;what?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catchMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;show_error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Yes, I know, all of this is cute and useful but at some point you&#x27;ll want to take the value out of the &lt;code&gt;Result&lt;&#x2F;code&gt;. I get it, javascript is not a language where this pattern is a common thing, you may want to go &quot;back to normal&quot;. Let&#x27;s add a function that can let us extract the value out in either case.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  const Result = {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result.Ok = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: fn =&amp;gt; Result.Ok(fn(value)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      catchMap: () =&amp;gt; Result.Ok(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     cata: (error, success) =&amp;gt; success(value)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result.Err = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: () =&amp;gt; Result.Err(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      catchMap: fn =&amp;gt; Result.Err(fn(value)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     cata: (error, success) =&amp;gt; error(value)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With this we can choose what to do at the end of every action.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;what?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;This ain&amp;#39;t right&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; ....&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: If you&#x27;re asking why &lt;code&gt;cata&lt;&#x2F;code&gt;, it comes from &lt;strong&gt;catamorphism&lt;&#x2F;strong&gt;, another one of those terms people use in functional programming.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now let&#x27;s create a data type that can handle the problem we have with &lt;code&gt;grep&lt;&#x2F;code&gt;. In this case what we want to do is handle the absence of a value.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    catchMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    cata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: (&lt;&#x2F;span&gt;&lt;span&gt;nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    catchMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    cata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: (&lt;&#x2F;span&gt;&lt;span&gt;nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;wrap_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We&#x27;re going to use it to wrap &lt;code&gt;grep&lt;&#x2F;code&gt; with a &lt;code&gt;Maybe&lt;&#x2F;code&gt;, to test this we&#x27;ll use the original &lt;code&gt;cat&lt;&#x2F;code&gt; to take the content from the file.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;wrap_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catchMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Nothing()&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That should show &lt;code&gt;http:&#x2F;&#x2F;localhost:5000&lt;&#x2F;code&gt;. And if we change the pattern &lt;code&gt;^HOST=&lt;&#x2F;code&gt; it should show &lt;code&gt;Nothing()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;So, we created safer versions of &lt;code&gt;cat&lt;&#x2F;code&gt; and &lt;code&gt;grep&lt;&#x2F;code&gt; but you should see what happens when they get together.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catchMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;what?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You get this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  res: {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    map: [Function: map],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    catchMap: [Function: catchMap],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    cata: [Function: cata]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Wait, what&#x27;s happening? Well, we have a &lt;code&gt;Maybe&lt;&#x2F;code&gt; trapped inside a &lt;code&gt;Result&lt;&#x2F;code&gt;. Maybe you didn&#x27;t see that one coming but other people did, and they have the solution.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Monads&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;It turns out that monads are functors with extra powers. The thing we care about right now is that they solve the nesting issue. Let&#x27;s make some adjustments.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result.Ok = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: fn =&amp;gt; Result.Ok(fn(value)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      catchMap: () =&amp;gt; Result.Ok(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     flatMap: fn =&amp;gt; fn(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      cata: (error, success) =&amp;gt; success(value)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Result.Err = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: () =&amp;gt; Result.Err(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      catchMap: fn =&amp;gt; Result.Err(fn(value)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     flatMap: () =&amp;gt; Result.Err(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      cata: (error, success) =&amp;gt; error(value)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Maybe.Just = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: fn =&amp;gt; Maybe.Just(fn(value)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      catchMap: () =&amp;gt; Maybe.Just(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     flatMap: fn =&amp;gt; fn(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      cata: (nothing, just) =&amp;gt; just(value),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Maybe.Nothing = function() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      map: () =&amp;gt; Maybe.Nothing(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      catchMap: fn =&amp;gt; fn(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;     flatMap: () =&amp;gt; Maybe.Nothing(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      cata: (nothing, just) =&amp;gt; nothing(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The &lt;code&gt;flatMap&lt;&#x2F;code&gt; method behaves just like &lt;code&gt;map&lt;&#x2F;code&gt; but with the added benefit that it lets us get rid of those extra &quot;layers&quot; that mess around with our composition. Make sure to use &lt;code&gt;flatMap&lt;&#x2F;code&gt; with functions that return other monads because this is not the safest implementation.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: Yes, arrays are also monads. They have a &lt;code&gt;map&lt;&#x2F;code&gt; method and &lt;code&gt;flatMap&lt;&#x2F;code&gt; method and they obey all the laws.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Let&#x27;s test &lt;code&gt;maybe_host&lt;&#x2F;code&gt; again.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catchMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;what?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That should give us.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{ res: &amp;#39;HOST=http:&#x2F;&#x2F;localhost:5000&amp;#39; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We&#x27;re ready to compose everything back together.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_safe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;wrap_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;wrap_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt;delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;http:&#x2F;&#x2F;127.0.0.1:3000&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; host&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; ....&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And if we want to use &lt;code&gt;pipe&lt;&#x2F;code&gt; or &lt;code&gt;compose&lt;&#x2F;code&gt;?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; m&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; m&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;flatMap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fm&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  fm&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cata&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; fallback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;make_safe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;wrap_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;^HOST=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;wrap_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;cut&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt;delimiter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fields&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  safer_cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;maybe_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  chain&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;get_value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;http:&#x2F;&#x2F;127.0.0.1:3000&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_host&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;.env&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You can check out the whole code here: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;VonHeikemen&#x2F;0e6d4950bfe91229ee06eee2e3c74515&quot;&gt;link&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;still-want-to-learn-more&quot;&gt;Still want to learn more?&lt;&#x2F;h2&gt;
&lt;p&gt;There are many things that I didn&#x27;t mention because it would take too much time but if you want to learn more about it, I have prepare some material.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;partial-application&#x2F;&quot;&gt;Partial application&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;the-power-of-map&#x2F;&quot;&gt;About Functors&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;using-a-maybe&#x2F;&quot;&gt;Using a Maybe&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;dealing-with-side-effects-and-pure-functions&#x2F;&quot;&gt;Pure functions and side effects&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;A lot of people talk about the nice things about composition, how it makes code more declarative and clean, but they never show you the tough parts. I hope I&#x27;ve done that, show the tough parts and how to overcome them. Composing functions it&#x27;s truly an art, it takes practice and time to get use to some ideas (like the idea of functions being things).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=vDe-4o8Uwl8&quot;&gt;The Power of Composition (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=SfWR3dKnFIo&quot;&gt;Oh Composable World! (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=7BsfMMYvGaU&quot;&gt;Mary had a little lambda (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.to&#x2F;joelnet&#x2F;functional-javascript---functors-monads-and-promises-1pol&quot;&gt;Functional JavaScript - Functors, Monads, and Promises&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Functional programming for your everyday javascript: Partial application</title>
        <published>2020-03-10T00:00:00+00:00</published>
        <updated>2020-03-10T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/partial-application/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/partial-application/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/partial-application/">&lt;p&gt;Today we are here to solve a mystery, the mystery of why some people choose to create functions that take a callback as the first argument. You might be thinking that the answer is partial application and you would be half right, but partial application is just the means to an end, the real reason to do such a thing is to enable a &quot;better&quot; function composition. But before we get into details of partial application let&#x27;s explore how we do things now.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-we-do-things&quot;&gt;How we do things&lt;&#x2F;h2&gt;
&lt;p&gt;When we create a function we usually sort the arguments by some kind of importance&#x2F;priority level, where the most important goes first. As a result, when we create a function that works on a piece of data it becomes the first thing on the list, it&#x27;s followed by less important configuration arguments and the last thing are optional arguments that we can omit.&lt;&#x2F;p&gt;
&lt;p&gt;Say that we want to create a function that picks specific properties from a plain object. Let&#x27;s think of what we need. The object, that was your first thought? It&#x27;s natural, you don&#x27;t want to omit it by accident when you call the function. That leaves the keys that we are going to choose as the last argument.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: We are not the only ones that think like this, check out &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;lodash.com&#x2F;docs&#x2F;#pick&quot;&gt;lodash pick&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now, say that we have a &lt;code&gt;user&lt;&#x2F;code&gt; object and we want to hide any &quot;sensitive&quot; data. We would use it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 7&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Tom&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  lastname&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Keen&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;noreply@example.com&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  password&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;hudson&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; { name: &amp;quot;Tom&amp;quot;, lastname: &amp;quot;Keen&amp;quot; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That works great, but what happens when we need to work with an array of users?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 7&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Tom&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    lastname&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Keen&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;noreply@example.com&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    password&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;hudson&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 30&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Smokey&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    lastname&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Putnum&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;noreply@example.com&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    password&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;carnival&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 69&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Lady&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    lastname&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Luck&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    email&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;noreply@example.com&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    password&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;norestforthewicked&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We are force to iterate over the array and apply the function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;*&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;[&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  {&amp;quot;name&amp;quot;: &amp;quot;Tom&amp;quot;, &amp;quot;lastname&amp;quot;: &amp;quot;Keen&amp;quot;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  {&amp;quot;name&amp;quot;: &amp;quot;Smokey&amp;quot;, &amp;quot;lastname&amp;quot;: &amp;quot;Putnum&amp;quot;},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  {&amp;quot;name&amp;quot;: &amp;quot;Lady&amp;quot;, &amp;quot;lastname&amp;quot;: &amp;quot;Luck&amp;quot;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;*&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Is not that bad. And you know what? That callback actually looks useful. We could put it in another place and give it a name.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What is actually happening? What we do here is bind the second argument to the function with the value &lt;code&gt;[&#x27;name&#x27;, &#x27;lastname&#x27;]&lt;&#x2F;code&gt; and force &lt;code&gt;pick&lt;&#x2F;code&gt; to wait for the user data to be executed.&lt;&#x2F;p&gt;
&lt;p&gt;Now let&#x27;s take this example one step further, pretend that &lt;code&gt;Async&#x2F;Await&lt;&#x2F;code&gt; doesn&#x27;t exists and that the &lt;code&gt;users&lt;&#x2F;code&gt; array comes from a &lt;code&gt;Promise&lt;&#x2F;code&gt;, maybe an http requests using &lt;code&gt;fetch&lt;&#x2F;code&gt;. What do we do?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  })&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now that is bad. Maybe some arrow functions can make it better?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;])));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Is it better? A question for another day. We prepared for this, we have the &lt;code&gt;public_info&lt;&#x2F;code&gt; function let&#x27;s use it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is acceptable, I like it. If we wanted we could make another function that binds &lt;code&gt;public_info&lt;&#x2F;code&gt; to &lt;code&gt;.map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; user_list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So now we get.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user_list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s see everything we needed for that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; code...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; user_list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; users&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user_list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What if I told you that we can create &lt;code&gt;public_info&lt;&#x2F;code&gt; and &lt;code&gt;user_list&lt;&#x2F;code&gt; in another way? What if we could have this?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; user_list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;public_info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;user_list&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or put everything inline if that is your jam.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;url&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pick&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;lastname&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;])));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We can have it but first we&#x27;ll need to change the way we think about functions a little bit.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;thinking-differently&quot;&gt;Thinking differently&lt;&#x2F;h2&gt;
&lt;p&gt;Instead of thinking of priority we should start thinking in dependencies and data. When you&#x27;re creating a function just ask yourself, out of all this arguments what is the most likely to change? Put that as your last argument.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s make a function that takes the first elements of something. What do we need? We need that &quot;something&quot; and also the number of elements we are going to take. Of those two, which is most likely to change? It&#x27;s the data, that &quot;something&quot;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; take&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In a normal situation you would use it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;take&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;first&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;second&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;rest&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; [&amp;quot;first&amp;quot;, &amp;quot;second&amp;quot;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But with a little bit of magic (which will be revealed soon) you can reuse it like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; first_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; take&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;first_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;first&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;second&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;rest&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This way ordering your arguments gets even more convenient when callbacks are involved. Let&#x27;s &quot;reverse&quot; &lt;code&gt;Array.filter&lt;&#x2F;code&gt; arguments and see what we can do.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We start simple, exclude falsey values from an array.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; =&amp;gt; [ true, &amp;quot;that&amp;quot; ]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s good and it could be better if we add more context.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I&#x27;m hoping you can see the possibilities that this kind of pattern can provide. There are libraries (like &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;ramdajs.com&#x2F;docs&#x2F;&quot;&gt;Ramda&lt;&#x2F;a&gt;) that use this approach to build complex functions by assembling smaller single purpose utilities.&lt;&#x2F;p&gt;
&lt;p&gt;Enough talking, let&#x27;s see now how we can do this ourselves.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;this-is-the-way&quot;&gt;This is the way&lt;&#x2F;h2&gt;
&lt;p&gt;Like with everything in javascript you can do this in a million ways, some are more convenient than others, some require a little bit of magic. Let us begin.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-built-in-magic-of-bind&quot;&gt;The built-in magic of bind&lt;&#x2F;h3&gt;
&lt;p&gt;Turns out that we don&#x27;t need to do anything extraordinary to bind values to the arguments of a function because every function has a method called &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Function&#x2F;bind&quot;&gt;bind&lt;&#x2F;a&gt;. The syntax is not as convenient as the one I showed but it gets close. Another thing that you have to be aware of is that the first argument to &lt;code&gt;Function.bind&lt;&#x2F;code&gt; is the &quot;context&quot;, that is the value of the keyword &lt;code&gt;this&lt;&#x2F;code&gt; inside the function. This is the basic usage.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;the-magic-within&quot;&gt;The magic within&lt;&#x2F;h3&gt;
&lt;p&gt;This one requires some work and it involves another enigmatic keyword, the &lt;code&gt;arguments&lt;&#x2F;code&gt;. What we will do is leverage the fact that &lt;code&gt;arguments&lt;&#x2F;code&gt; is an array-like structure that has a length, we will count the argument the function gets and if its less than what we want we return another function. Sounds confusing?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; This is it. We are counting.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; if .length is 1 that means we got `func`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; it also means we don&amp;#39;t have `data`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; so we return another function that&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; remembers `func` and wait for `data`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now it is possible to do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And also.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Isn&#x27;t that nice?&lt;&#x2F;p&gt;
&lt;h3 id=&quot;a-simple-approach&quot;&gt;A simple approach?&lt;&#x2F;h3&gt;
&lt;p&gt;And of course we can also create our bind utility. With the help of the spread operator we can collect arguments and simply apply them to a callback.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;first_args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;first_args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The first step gets the function and collects a list of arguments into an array, then we return a function that collects another list of arguments and finally call &lt;code&gt;func&lt;&#x2F;code&gt; with everything.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The cool thing about this one is that if you flip &lt;code&gt;first_args&lt;&#x2F;code&gt; with &lt;code&gt;rest&lt;&#x2F;code&gt; you have a &lt;code&gt;bind_last&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;no-more-magic&quot;&gt;No more magic&lt;&#x2F;h3&gt;
&lt;p&gt;I do have mixed feelings about this one but it really is the most simple.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Which is equivalent to this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The idea is to take one argument at a time in separate functions. Basically, keep returning functions until you have all the arguments you need. This is what people call &quot;currying&quot;. How do you use it?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That is one case. This is the other.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) ([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice the extra pair of parenthesis? That&#x27;s the second function. You&#x27;ll need one pair for each argument you provide.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;curry-it-for-me&quot;&gt;Curry it for me&lt;&#x2F;h3&gt;
&lt;p&gt;Going back to the subject of magic, you can &quot;automate&quot; the process of currying using a helper function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Guess how many arguments&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; the function needs.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; This doesn&amp;#39;t always work.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; Do we have what we need?&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;=&lt;&#x2F;span&gt;&lt;span&gt; rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; Execute `curry.bind` with `fn`, `arity` and `rest` as arguments&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; it will return a function waiting for more arguments&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; arity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;rest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With it you can transform your existing functions or create new ones that support currying from the start.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; curried_filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curried_filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;Boolean&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;exclude_falsey&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;that&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; curry&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;func&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s it folks. Hope you had a good time reading.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=m3svKOdZijA&quot;&gt;Hey Underscore, You&#x27;re Doing It Wrong! (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;http:&#x2F;&#x2F;benalman.com&#x2F;news&#x2F;2012&#x2F;09&#x2F;partial-application-in-javascript&#x2F;&quot;&gt;Partial Application in JavaScript&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Functional programming for your everyday javascript: The power of map</title>
        <published>2020-02-16T00:00:00+00:00</published>
        <updated>2020-02-16T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/the-power-of-map/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/the-power-of-map/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/the-power-of-map/">&lt;p&gt;This time we are going to take a look inside the world of &lt;code&gt;functors&lt;&#x2F;code&gt; and what makes them so special. Functors is one of those terms that you hear every now and then when people talk about functional programming but when the time comes to explain it they either bombard you with more abstract terms or tell you just the details you need to know. Since I have no knowledge of category theory I&#x27;m not going to pretend that I know exactly what a functor is, I&#x27;m just going show enough for you to know how you can spot them in the wild and how you can use them to your advantage.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;seriously-what-is-a-functor&quot;&gt;Seriously, what is a functor?&lt;&#x2F;h2&gt;
&lt;p&gt;I&#x27;m convinced that the term is difficult to understand because one, you need to some other terms in order to get the whole picture and two, the theory behind it doesn&#x27;t really translate very well in code. But it wouldn&#x27;t hurt to have at least a clue of what they are.&lt;&#x2F;p&gt;
&lt;p&gt;You can think of them as a relation that exist between two sets of values. I know it&#x27;s vague, this will make sense in a second. Say we have two arrays.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; favorite_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 69&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 73&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; increased_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;43&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 70&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 74&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Nice, we have a set &lt;code&gt;favorite_numbers&lt;&#x2F;code&gt; and a set &lt;code&gt;increased_numbers&lt;&#x2F;code&gt;, they are two separate arrays in different variables but we all know that there is a connection between those two, but more importantly we can express that connection with code. Imagine that the array &lt;code&gt;increased_numbers&lt;&#x2F;code&gt; doesn&#x27;t exist but we still need those numbers, to make them appear again all we need is our good old friend &lt;code&gt;map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; increased_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; favorite_numbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;map&lt;&#x2F;code&gt; will go through every number, increase it and put it in a new array which brings &lt;code&gt;increased_numbers&lt;&#x2F;code&gt; back into existence. Even though &lt;code&gt;increased_numbers&lt;&#x2F;code&gt; is something we made, we didn&#x27;t create it out nowhere, we didn&#x27;t magically invent &lt;code&gt;43&lt;&#x2F;code&gt;, &lt;code&gt;70&lt;&#x2F;code&gt; and &lt;code&gt;74&lt;&#x2F;code&gt;. All we did was describe a relation between those numbers and our &lt;code&gt;favorite_numbers&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;So, is that the whole history? Are functors just arrays? The answer to that is a big no. Arrays are just a freakishly convenient way to illustrate a common use of functors. This leaves a question in the air.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-do-you-recognize-them&quot;&gt;How do you recognize them?&lt;&#x2F;h2&gt;
&lt;p&gt;I often hear other people describing functors as boxes. I for one don&#x27;t think they&#x27;re wrong because using a container data structure is one of easiest ways to implement a functor. The box analogy is specially funny &#x27;cause in javascript we use brackets to create arrays, so you can actually create a functor by putting a value in a box. See.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; A value&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; A box&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Look, a value in a box.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; I regret nothing.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Going back to the original question, how do we recognize them? Okay, so it turns out that there are rules.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;da-rules&quot;&gt;Da rules&lt;&#x2F;h3&gt;
&lt;p&gt;Again I&#x27;ll be using array of numbers just because is convenient but this rules must apply to any structure that wants to be in the functor club.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;identity&quot;&gt;Identity&lt;&#x2F;h4&gt;
&lt;p&gt;Given the &lt;code&gt;identity&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; x&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;value&lt;&#x2F;code&gt; and &lt;code&gt;value.map(identity)&lt;&#x2F;code&gt; must be equivalent.&lt;&#x2F;p&gt;
&lt;p&gt;For example.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;               &#x2F;&#x2F; =&amp;gt; [1,2,3]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [1,2,3]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Why is this important? What does this tell us?&lt;&#x2F;p&gt;
&lt;p&gt;Valid questions. This tells us that the &lt;code&gt;map&lt;&#x2F;code&gt; function must preserve the shape of the data structure. In our example, if we map an array of three elements we must receive a new array of three elements. If we had an array of a hundred elements, using &lt;code&gt;.map(identity)&lt;&#x2F;code&gt; should return an array of a hundred elements. You get the point.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;composition&quot;&gt;Composition&lt;&#x2F;h4&gt;
&lt;p&gt;Given two functions &lt;code&gt;fx&lt;&#x2F;code&gt; and &lt;code&gt;gx&lt;&#x2F;code&gt; the following must be true.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;value.map(fx).map(gx)&lt;&#x2F;code&gt; and &lt;code&gt;value.map(arg =&amp;gt; gx(fx(arg)))&lt;&#x2F;code&gt; must be equivalent.&lt;&#x2F;p&gt;
&lt;p&gt;Example time.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; *&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;         &#x2F;&#x2F; =&amp;gt; [4]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [4]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you know how &lt;code&gt;Array.map&lt;&#x2F;code&gt; works this feels like &#x27;well duh!&#x27;. This actually gives you a chance to optimize your code for readability or performance. In the case of arrays, multiple calls to &lt;code&gt;map&lt;&#x2F;code&gt; can have a big impact on performance when the number of elements in the list grows.&lt;&#x2F;p&gt;
&lt;p&gt;And that&#x27;s it. Those two rules are all you need to know to spot a functor.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;does-it-always-has-to-be-map&quot;&gt;Does it always has to be .map?&lt;&#x2F;h2&gt;
&lt;p&gt;I guess by now you wish to know what other things out there follow those rules that I just mentioned, if not I&#x27;ll tell you anyway. There is another popular structure that also follows the rules and that is &lt;code&gt;Promise&lt;&#x2F;code&gt;. Let&#x27;s see.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; A value&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; A box&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Look, a value in a box&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Identity rule&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 1 (in the future)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Composition&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;        &#x2F;&#x2F; =&amp;gt; 4&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 4&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To be fair, &lt;code&gt;Promise.then&lt;&#x2F;code&gt; behaves more like &lt;code&gt;Array.flatMap&lt;&#x2F;code&gt; than &lt;code&gt;Array.map&lt;&#x2F;code&gt; but we will ignore that.&lt;&#x2F;p&gt;
&lt;p&gt;Fine, we have &lt;code&gt;Array&lt;&#x2F;code&gt; and we have &lt;code&gt;Promise&lt;&#x2F;code&gt; both are containers of some sort and both have methods that follow the rules. But what if they didn&#x27;t have those methods, what if &lt;code&gt;Array.map&lt;&#x2F;code&gt; didn&#x27;t exist? Would that mean that &lt;code&gt;Array&lt;&#x2F;code&gt; is no longer a functor? Do we lose all the benefits?&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s take a step back. If &lt;code&gt;Array.map&lt;&#x2F;code&gt; doesn&#x27;t exists then &lt;code&gt;Array&lt;&#x2F;code&gt; is no longer a functor? I don&#x27;t know, I&#x27;m not an FP lawyer. Do we lose all the benefits? No, we could still treat arrays as functors, we just lose the super convenient &lt;code&gt;.map&lt;&#x2F;code&gt; syntax. We can create our own &lt;code&gt;map&lt;&#x2F;code&gt; outside of the structure.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; List&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;See? Is not that bad. And it works.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Identity rule&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;List&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [1]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Composition&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;List&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; List&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]));&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;   &#x2F;&#x2F; =&amp;gt; [4]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;List&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)), [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; [4]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Are you thinking what I&#x27;m thinking? Probably not. This is what I&#x27;m thinking, if we can map arrays without a &lt;code&gt;.map&lt;&#x2F;code&gt; then nothing can stop us from doing the same thing with plain objects, because after all, objects can also hold sets of values.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; ob&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; of&lt;&#x2F;span&gt;&lt;span&gt; Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;ob&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Why stop at `map`? &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Based on this you can also create a `filter` and `reduce`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s see it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Identity rule&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; {some: 1, prop: 2}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Composition&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}));&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; {some: 4, prop: 6}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)), {&lt;&#x2F;span&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; {some: 4, prop: 6}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;do-it-yourself&quot;&gt;Do It Yourself&lt;&#x2F;h2&gt;
&lt;p&gt;All this talk about arrays and plain objects is useful but now I feel like we know enough to make our own functor, the rules seem to be very simple. Let&#x27;s do something vaguely useful. Have you ever heard of Observables? Good, because we are going to something like that. We&#x27;ll make a simpler version of &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;mithril.js.org&#x2F;stream.html&quot;&gt;mithril-stream&lt;&#x2F;a&gt;, it&#x27;ll be fun.&lt;&#x2F;p&gt;
&lt;p&gt;The goal here to handle a stream of values over time. The API of our utility will be this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Set initial state&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Create a dependent stream&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; increased&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Get the value from a stream&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 0&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Push a value to the stream&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 42&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; The source stream updates&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 42&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; The dependent stream also updates&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;increased&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 43&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s start with the getter and setter function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; If we get an argument we update the state&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; return current state&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This should work.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Initial state&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Get state&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 42&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Update&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;73&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Check&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 73&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We know we want a &lt;code&gt;map&lt;&#x2F;code&gt; method but what is the effect we want? We want the callback to listen to the changes of the source stream. Let&#x27;s start with the listener part, we want to store an array of listeners and execute each one right after the state changes.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  function Stream(state) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   let listeners = [];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    let stream = function(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      if(arguments.length &amp;gt; 0) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        state = value;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;       listeners.forEach(fn =&amp;gt; fn(value));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      return state;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return stream;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we go for the &lt;code&gt;map&lt;&#x2F;code&gt; method, but is not going to be just any method, we need to follow the rules:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Identity: When &lt;code&gt;map&lt;&#x2F;code&gt; is called it needs to preserve the shape of the structure. This means that we need to return a new stream.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Composition: Calling &lt;code&gt;map&lt;&#x2F;code&gt; multiple times must be equivalent of composing the callbacks supplied to those &lt;code&gt;map&lt;&#x2F;code&gt;s.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; listeners&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      listeners&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;forEach&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Create new instance with transformed state.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; This will execute the callback when calling `map`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; this might not be what you want if you use a &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; function that has side effects. Just beware.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Transform the value and update stream&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Update the source listeners&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    listeners&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;push&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;listener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s test the rules. We begin with identity.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Streams are like a cascade&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; the first is the most important&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; this is the one that triggers all the listeners&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Create dependent stream&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; identity_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; update the source&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;42&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Check&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; =&amp;gt; 42&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;identity_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 42&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now let&#x27;s check the composition rule.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Create source stream&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Create dependents&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; map_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; composed_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; times_two&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add_one&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Update source&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;num_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Check&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; =&amp;gt; 4&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;composed_stream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; 4&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Our job is done. But is this any useful? Can you do something with it? Well yes, you could use it in event handlers to manipulate user input. Like this.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;dyoMJRw&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;an fmap example&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;dyoMJRw&quot;&gt;an fmap example&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;


&lt;script async src=&quot;https:&#x2F;&#x2F;static.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;


&lt;h3 id=&quot;more-examples&quot;&gt;More examples&lt;&#x2F;h3&gt;
&lt;p&gt;I think by now you understand really well what functors do, but if you still want to see more examples you can check out this articles.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;vonheikemen.github.io&#x2F;devlog&#x2F;web-development&#x2F;learn-fp&#x2F;using-a-maybe&#x2F;&quot;&gt;Handling the absence of a value&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jrsinclair.com&#x2F;articles&#x2F;2018&#x2F;how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript&#x2F;&quot;&gt;Handling side effects&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;The only question that remains is &quot;what is the benefit of using functors?&quot;&lt;&#x2F;p&gt;
&lt;p&gt;I&#x27;ll do my best here:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;This pattern allows you to focus on one problem at time. The &lt;code&gt;map&lt;&#x2F;code&gt; function handles how you get the data and in the callback you can focus only on processing the data.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Reusability. This style of programming really encourage the creation of single purpose function that a lot of the times can become useful even across projects.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Extensibility through composition. People have mixed feelings about this one, specially if we are talking about arrays. This is another thing that functors encourage, that is using chains of functions to implement a procedure.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.to&#x2F;techgirl1908&#x2F;why-is-map-called-map-2l03&quot;&gt;Why is map called map?&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land&quot;&gt;Fantasy land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;static-land&quot;&gt;Static land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;thefrontside&#x2F;funcadelic.js&quot;&gt;funcadelic.js&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jrsinclair.com&#x2F;articles&#x2F;2018&#x2F;how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript&#x2F;&quot;&gt;How to deal with dirty side effects in your pure functional JavaScript&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jrsinclair.com&#x2F;articles&#x2F;2020&#x2F;whats-more-fantastic-than-fantasy-land-static-land&#x2F;&quot;&gt;What’s more fantastic than fantasy land? An Introduction to Static land&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;medium.com&#x2F;@lettier&#x2F;your-easy-guide-to-monads-applicatives-functors-862048d61610&quot;&gt;Your easy guide to Monads, Applicatives, &amp;amp; Functors&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Dealing with side effects and pure functions in javascript</title>
        <published>2020-01-05T00:00:00+00:00</published>
        <updated>2020-01-05T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/dealing-with-side-effects-and-pure-functions/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/dealing-with-side-effects-and-pure-functions/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/dealing-with-side-effects-and-pure-functions/">&lt;p&gt;Have you ever heard the term &quot;pure function&quot;? What about &quot;side effects&quot;? If you have then probably you&#x27;ve heard that side effects are evil and should be avoided at all cost (just like &lt;code&gt;var&lt;&#x2F;code&gt;.) Here is the problem, if you write javascript you probably want to cause those side effects (specially if you get paid to write javascript) So the solution here is not to avoid all the side effects but to control them. I going to show you a few things that you can do to make your pure functions and your side effects get along just fine.&lt;&#x2F;p&gt;
&lt;p&gt;Before we start let us just do a little recap on some terms, so we can all be in the same page.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;concepts&quot;&gt;Concepts&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;pure-function&quot;&gt;Pure function&lt;&#x2F;h3&gt;
&lt;p&gt;For the sake of simplicity let us say that a pure function is a function whose output is only determined by its input and has no observable effect on the outside world. The main benefit they provide (in my opinion) is predictability, if you give them the same input values they will always return you the same output. Lets look at some examples.&lt;&#x2F;p&gt;
&lt;p&gt;This one is pure.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; increment&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This one isn&#x27;t&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Math&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;random&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And these are tricky.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; A_CONSTANT&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; increment&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; A_CONSTANT&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;module&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;exports&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  increment&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; a_constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; increment&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; a_constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;side-effects&quot;&gt;Side effects&lt;&#x2F;h3&gt;
&lt;p&gt;I will call a side effect to anything that compromises the purity of a function. The list includes but is not limited to:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Changing (mutate) an external variable in any way.&lt;&#x2F;li&gt;
&lt;li&gt;Showing things in the screen.&lt;&#x2F;li&gt;
&lt;li&gt;Writing to a file.&lt;&#x2F;li&gt;
&lt;li&gt;Making an http request.&lt;&#x2F;li&gt;
&lt;li&gt;Spawn a process.&lt;&#x2F;li&gt;
&lt;li&gt;Saving data in a database.&lt;&#x2F;li&gt;
&lt;li&gt;Calling other functions with side-effects.&lt;&#x2F;li&gt;
&lt;li&gt;DOM manipulation.&lt;&#x2F;li&gt;
&lt;li&gt;Randomness.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;So, any action that can change the &quot;state of the world&quot; is a side effect.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-do-we-use-those-things-together&quot;&gt;How do we use those things together?&lt;&#x2F;h2&gt;
&lt;p&gt;You&#x27;re probably still thinking about that side effect list, is basically everything javascript is good for and yet some people still tell you to avoid them. Don&#x27;t fear I come bearing suggestions.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;good-old-function-composition&quot;&gt;Good old function composition&lt;&#x2F;h3&gt;
&lt;p&gt;Another way of saying it will be: good old separation of concerns. This is the non complicated way. If there is a way to break apart a computation from a side effect then put the computation on a function and give the output to the function&#x2F;block that has the side effect.&lt;&#x2F;p&gt;
&lt;p&gt;It could be as simple as doing something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; some_process&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_data_somehow&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; clean_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; computation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; save&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;clean_data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now, &lt;code&gt;some_process&lt;&#x2F;code&gt; still isn&#x27;t pure but that&#x27;s okay, we are writing javascript we don&#x27;t need everything to be pure, what we need is to keep our sanity. By splitting the side effects from the pure computation we have created three independent functions that solve only one problem at a time.  You could even take it one step further and use a helper function like &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;ramdajs.com&#x2F;docs&#x2F;#pipe&quot;&gt;pipe&lt;&#x2F;a&gt; to get rid of those intermediate variables and compose those functions directly.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; some_process&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;get_data_somehow&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; computation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; save&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But now we have created another problem, what happens when we want to make a side effect in the middle of one those? What do we do? Well if a helper function created the problem then I say use another helper function to get out of it. Something like this would work.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; tap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This will allow you to place a function with a side effect in the middle of chain of functions while keeping data flow.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; some_process&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  get_data_somehow&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  tap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  computation&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  tap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;a_side_effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  save&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There is argument to be made against these type of things, some people would argue that now all your logic is scattered all over the place and that you have to move around to actually know what the function does. I really don&#x27;t mind, it&#x27;s a matter of preference.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s get back to business, did you see &lt;code&gt;tap&lt;&#x2F;code&gt;&#x27;s signature? Look at it: &lt;code&gt;tap(fn)&lt;&#x2F;code&gt;. It takes a callback as a parameter lets see how we can use that to our advantage.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;make-someone-else-handle-the-problem&quot;&gt;Make someone else handle the problem&lt;&#x2F;h3&gt;
&lt;p&gt;As we all know life isn&#x27;t always so simple, sometimes we just can&#x27;t make that sweet pipeline of functions. In some situations we need to do some side-effect in the middle of a process and when that happens we can always cheat. In javascript we can treat functions as values which lets us do funny things like passing functions as parameters to other functions. This way the function can have the flexibility to execute a side effect when we need to while maintaining some of the predictability that we know and love.&lt;&#x2F;p&gt;
&lt;p&gt;Say for example that you have a function that is already pure and does something to a collection of data but now for some reason you need log the original and the transformed values right after the transformation happens. What you can do is add a function as a parameter and call it in the right moment.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transform&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;onchange&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;isArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ?&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; []&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; in&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    onchange&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This technically fulfills some of the requirements of a pure function, the output (and behavior) of the function is still determined by its input, it just so happens that one of those inputs is a function that can trigger any side effect.  Again, the goal in here is not to fight against the nature of javascript and have everything be 100% pure, we want to control when the side effect happens. So in this case the one who controls whether or not to have side effects is the caller of the function. One extra benefit of this is that if you want to use that function in a unit test to prove that it still works as expected the only thing you&#x27;ll need to do is supply its arguments, you don&#x27;t have grab any mocking library to test it.&lt;&#x2F;p&gt;
&lt;p&gt;You may be wondering why put the callback as the first parameter, this is really about personal preference. If you put the &lt;code&gt;thing&lt;&#x2F;code&gt; that changes the most frequently in the last position you make it easier to do partial application, that is binding the values of the parameters without executing the function. For example you could use &lt;code&gt;transform.bind&lt;&#x2F;code&gt; to create a specialized function which already has the &lt;code&gt;onchange&lt;&#x2F;code&gt; callback.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;lazy-effects&quot;&gt;Lazy effects&lt;&#x2F;h3&gt;
&lt;p&gt;The idea here is to delay the inevitable. Instead of performing the side effect right away what you do is provide a way for the caller of your function to execute the side-effect when they see fit. You can do this in a couple of ways.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;using-function-wrappers&quot;&gt;Using function wrappers&lt;&#x2F;h4&gt;
&lt;p&gt;As I mentioned before in javascript you can treat functions as values and one thing you can do with values is returning them from functions. I&#x27;m talking about functions that return functions. We already saw how useful that can be and if you think about is not that crazy, how many times have you seen something like this?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Stuff&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; setup&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    some_method&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; code...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    other&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; code...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is an old school &quot;constructor.&quot; Before, in the good ol&#x27; days of ES5, this was one way of emulating classes. Is a regular function that returns an object, and is we all know objects can have methods. What we want to do is little bit like that, we want convert the block that contains the side effect into a function and return it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; some_process&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;config&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;*&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;   * do some pure computation with config&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;   *&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; _effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;   &#x2F;*&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    * do whatever you want in here&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    *&#x2F;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This way we give the caller of our function the opportunity to use the side effect when they want, and they can even pass it around and compose it with other functions. Interestingly enough this is not a very common pattern, maybe because there are other ways to achieve the same goal.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;using-data-structures&quot;&gt;Using data structures&lt;&#x2F;h4&gt;
&lt;p&gt;Another way to create lazy effects is to wrap a side effect inside a data structure. What we want to do is to treat our effects as regular data, have the ability to manipulate them and even chain other effects in safe way (I mean without executing them). You&#x27;ve probably seen this before, one example that I can think of is Observables. Take a look at this code that uses rxjs.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; taken from:&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; https:&#x2F;&#x2F;www.learnrxjs.io&#x2F;operators&#x2F;creation&#x2F;create.html&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;*&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  Increment value every 1s, emit even numbers.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;*&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; evenNumbers&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;create&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; setInterval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;++&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; clearInterval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The result of &lt;code&gt;Observable.create&lt;&#x2F;code&gt; not only delays the execution of &lt;code&gt;setInterval&lt;&#x2F;code&gt; but also gives you the ability to call &lt;code&gt;evenNumbers.pipe&lt;&#x2F;code&gt; to chain other observables that can also have other side effects. Now of course Observables and rxjs aren&#x27;t the only way, we can create our own effect type. If we want to create one all we need is a function to execute the effect and another one that lets us compose effects.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    run&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It may not look like much but this is actually enough to be useful. You can start composing your effects without triggering any changes to the environment. You can now do stuff like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; persist&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`saving &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; to a database...`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ?&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; show_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; result &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  ?&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;we good&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  :&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;we not good&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; save&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Effect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;persist&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;show_message&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;save&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;run&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;some stuff&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; saving some stuff to a database...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; we good&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;save&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;run&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; saving  to a database...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; we not good &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you have used &lt;code&gt;Array.map&lt;&#x2F;code&gt; to compose data transformations you&#x27;ll be feeling right at home when using &lt;code&gt;Effect&lt;&#x2F;code&gt;, all you have to do is provide the functions with the side effect and at the of the chain the resulting &lt;code&gt;Effect&lt;&#x2F;code&gt; will know what to do when you are ready to call it.&lt;&#x2F;p&gt;
&lt;p&gt;I&#x27;ve only scratched the surface of what you can do with &lt;code&gt;Effect&lt;&#x2F;code&gt;, if you want to learn more try to search the term &lt;code&gt;functor&lt;&#x2F;code&gt; and &lt;code&gt;IO Monad&lt;&#x2F;code&gt;, I promise you is going to be fun.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-now&quot;&gt;What now?&lt;&#x2F;h2&gt;
&lt;p&gt;Now you click on the link in the end of the post, it&#x27;s a really good article (basically a better version of this one).&lt;&#x2F;p&gt;
&lt;p&gt;I hope now you are confident enough to start writing pure functions in your code and combine them with the convenient side effects that javascript lets you do.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jrsinclair.com&#x2F;articles&#x2F;2018&#x2F;how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript&#x2F;&quot;&gt;How to deal with dirty side effects in your pure functional JavaScript&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Lenses A.K.A. composable getters and setters</title>
        <published>2019-11-27T00:00:00+00:00</published>
        <updated>2019-11-27T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/lenses-a-k-a-composable-getters-and-setters/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/lenses-a-k-a-composable-getters-and-setters/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/lenses-a-k-a-composable-getters-and-setters/">&lt;p&gt;This time around we will figure out what are lenses, how do they look like in javascript and hopefully will build a mostly adequate implementation.&lt;&#x2F;p&gt;
&lt;p&gt;Let us first take a step back and ask.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-are-getters-and-setters&quot;&gt;What are getters and setters?&lt;&#x2F;h2&gt;
&lt;p&gt;This are functions that have one goal, they get or set value. But of course that is not the only thing they are good for. Most use cases I&#x27;ve seen involve triggering a side-effect when a value changes or put some validations to prevent undesired behavior.&lt;&#x2F;p&gt;
&lt;p&gt;In javascript you could make them explicit by doing something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;stuff&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    get_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; you can do anything in here&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    set_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; same in here.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;stuff&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;other stuff&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;other stuff&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or you could make then implicit.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;defineProperty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;thing&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  get&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;thing&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;can&amp;#39;t touch this&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;thing&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;thing =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;what?&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; can&amp;#39;t touch this&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;some&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;thing&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But what is so wrong in there that some people feel the need to use something like lenses?&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s start with that second example. I can tell you that some people don&#x27;t like magical things, just the thought of a function being executed without their knowledge is bad enough.&lt;&#x2F;p&gt;
&lt;p&gt;The first example is bit more interesting. Let&#x27;s see it again.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;stuff&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;set_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;other stuff&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;other stuff&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You use &lt;code&gt;get_thing&lt;&#x2F;code&gt; you get &lt;code&gt;stuff&lt;&#x2F;code&gt;, so far so good. But here is the problem you use it again in exactly the same way and yet you get &lt;code&gt;other stuff&lt;&#x2F;code&gt;. You kinda have to keep track of the last call to &lt;code&gt;set_thing&lt;&#x2F;code&gt; in order to know what you would get. We don&#x27;t have the ability to predict the result from &lt;code&gt;get_thing&lt;&#x2F;code&gt;, you can&#x27;t be 100% sure what it will do without looking around (or knowing) others parts of the code.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;is-there-a-better-way&quot;&gt;Is there a better way?&lt;&#x2F;h2&gt;
&lt;p&gt;I wouldn&#x27;t say better. Let us just try lenses, you can decide later if you like them or not.&lt;&#x2F;p&gt;
&lt;p&gt;What do we need? Lenses are a functional programing thing so the first thing we will do is create helper functions. This will be the first version of getters and setters.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Getter&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Setter&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;assign&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({},&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;, {[&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]:&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now for the &quot;constructor.&quot;&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt; getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; That is it.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You&#x27;ll notice that &lt;code&gt;Lens&lt;&#x2F;code&gt; does absolutely nothing, I&#x27;m doing that on purpose. You can already tell that most of the work is in the getter and setter. Your lens are going to be as robust as your getter and setter implementations.&lt;&#x2F;p&gt;
&lt;p&gt;Now we need to make them do something, we will make three little functions.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;code&gt;view&lt;&#x2F;code&gt;: gets a value&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;   return&lt;&#x2F;span&gt;&lt;span&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;over&lt;&#x2F;code&gt;: transforms a value using a callback&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    obj&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;set&lt;&#x2F;code&gt;: replaces a value&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; always&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; don&amp;#39;t you love reusability?&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; always&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It&#x27;s time for a test drive.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s say we have an object named &lt;code&gt;alice&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Alice Jones&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  address&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;22 Walnut St&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;San Francisco&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;CA&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pets&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {&lt;&#x2F;span&gt;&lt;span&gt; dog&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;joker&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;batman&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We&#x27;ll start with something simple, inspect the values. This is how you would do it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  alice&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;Alice Jones&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I see you&#x27;re not impressed and that&#x27;s fine. I just wrote a lot characters just to get a name. But here is the thing, these are standalone functions. We can always compose and create new ones. Let&#x27;s start with that &lt;code&gt;Lens(prop, assoc)&lt;&#x2F;code&gt; bit, we will put that in a function because we will use it a lot.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And now...&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;Alice Jones&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You could even take it one step further and make a function that just expects the object that holds the data.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; or with partial application&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; or using a curry utility.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; view = curry(view);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; get_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; and you can also do this with `set` and `over`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Enough of that. Going back to our test, let&#x27;s try &lt;code&gt;over&lt;&#x2F;code&gt;. Let&#x27;s transform the name to uppercase.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; upper&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; uppercase_alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; upper&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; see?&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;uppercase_alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;ALICE JONES&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;           &#x2F;&#x2F; =&amp;gt; &amp;quot;Alice Jones&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It&#x27;s &lt;code&gt;set&lt;&#x2F;code&gt;&#x27;s turn.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; alice_smith&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;name&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Alice smith&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;alice_smith&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;Alice smith&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;get_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;       &#x2F;&#x2F; =&amp;gt; &amp;quot;Alice Jones&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s all nice but the name is just one property, what about nested object keys or arrays? Ah, you see now that is where it gets awkward with our current implementation. Right now you could do the following.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; dog&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;dog&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;pets&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;dog&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;pets&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dog&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;joker&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; or bring a `compose` utility&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;dog&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;dog&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;pets&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;dog&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;pets&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dog&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;joker&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I hear you. Don&#x27;t worry, I wouldn&#x27;t let you write stuff like that. It is because of situations like this one that people say stuff like &quot;just use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;ramdajs.com&#x2F;&quot;&gt;Ramda&lt;&#x2F;a&gt;&quot; (and those people are right) But what makes ramda so special?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;making-it-special&quot;&gt;Making it special&lt;&#x2F;h2&gt;
&lt;p&gt;If you go to ramda&#x27;s documentation and search &quot;lens&quot; you&#x27;ll see that they have a &lt;code&gt;lensProp&lt;&#x2F;code&gt; function which is basically our &lt;code&gt;Lprop&lt;&#x2F;code&gt;. And if you go to the source you&#x27;ll see something like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lensProp&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;k&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;prop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;k&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assoc&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;k&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Look at that. But now the comments on their source and documentation suggest that it also works with just one property. Let&#x27;s go back to our &quot;lens&quot; search on their site. Now we will check that curious &lt;code&gt;lensPath&lt;&#x2F;code&gt; function. It is exactly what we want. Once again we check out the source.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lensPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;p&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;p&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;p&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Welcome to functional programming, y&amp;#39;all.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The secret sauce it&#x27;s made of other functions that don&#x27;t have any specific ties to lenses. Isn&#x27;t that just nice?&lt;&#x2F;p&gt;
&lt;p&gt;What is in that &lt;code&gt;path&lt;&#x2F;code&gt; function? Let&#x27;s check it out. I&#x27;ll show you a slightly different version, but it works just the same.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; this is for currying&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; they do this by wrapping `path`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; with a helper function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; but this is what happens&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; they return a function that remembers `keys`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; and expects `obj`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; idx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  while&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;idx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;lt;&lt;&#x2F;span&gt;&lt;span&gt; keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; we don&amp;#39;t like null&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; this is how we get the nested keys&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;idx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    idx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I&#x27;ll do the same with &lt;code&gt;assocPath&lt;&#x2F;code&gt;. For this one they make use of some internal helpers but again this is what happens.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; again with the currying stuff&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; this is why they have a helper function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; else if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;arguments&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; check for an empty list&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; index&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; Beware: recursion ahead.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; is_empty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;      typeof&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; !==&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;object&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ||&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; || !&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;hasOwnProperty&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;index&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; if the current object is &amp;quot;empty&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; we need to create a new one&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; otherwise we pick the object at `index`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; is_empty&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;      ? typeof&lt;&#x2F;span&gt;&lt;span&gt; path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;number&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        ?&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; []&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;      :&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;index&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; we start again the process&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; but now with a reduced `path`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; and `next` as the new `obj`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;prototype&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;slice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;call&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; the base cases&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; we either have to copy an array&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; or an object&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;typeof&lt;&#x2F;span&gt;&lt;span&gt; index&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;number&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;amp;&amp;amp;&lt;&#x2F;span&gt;&lt;span&gt; Array&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;isArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; make a &amp;#39;copy&amp;#39; of the array&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;concat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;index&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt; else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; old school &amp;#39;copy&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; p&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; in&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;p&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;p&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;index&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;With our new found knowledge we can create an &lt;code&gt;Lpath&lt;&#x2F;code&gt; function and improve &lt;code&gt;Lprop&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can do more stuff, like playing with &lt;code&gt;alice&lt;&#x2F;code&gt; pets.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; dog_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;pets&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;dog&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dog_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;     &#x2F;&#x2F; =&amp;gt; &amp;#39;joker&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; new_alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dog_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; upper&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dog_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; new_alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;JOKER&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;new_alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dog_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Joker&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dog_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; new_alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;#39;Joker&amp;#39;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All of this works great but there is just one tiny detail, the lenses that the current constructor creates aren&#x27;t composable. Imagine that we have three lenses from differents files or something and we want to combine them like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;pet_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; imaginary_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This wouldn&#x27;t work because &lt;code&gt;compose&lt;&#x2F;code&gt; expects a list of functions and our lenses are objects. But we can fix this (in a very funny way) with some functional programming trickery.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s start with our lenses constructor. Instead of returning an object we are going to return a &quot;curried&quot; function that takes a callback, an object and returns a &lt;strong&gt;Functor&lt;&#x2F;strong&gt; (a thing that has &lt;code&gt;map&lt;&#x2F;code&gt; method and follows &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;fantasyland&#x2F;fantasy-land#functor&quot;&gt;this rules&lt;&#x2F;a&gt;)&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; focus&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;focus&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; functor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; functor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What&#x27;s with the a &lt;code&gt;fn =&amp;gt; obj =&amp;gt;&lt;&#x2F;code&gt; stuff? That is going to help us with our &lt;code&gt;compose&lt;&#x2F;code&gt; situation. Now after you provide the &lt;code&gt;getter&lt;&#x2F;code&gt; and &lt;code&gt;setter&lt;&#x2F;code&gt; you get a function, and that is what makes &lt;code&gt;compose&lt;&#x2F;code&gt; happy.&lt;&#x2F;p&gt;
&lt;p&gt;And &lt;code&gt;functor.map&lt;&#x2F;code&gt;? That is going to make sure that we can still use a lens as unit (like &lt;code&gt;Lprop(&#x27;pets&#x27;)&lt;&#x2F;code&gt;) but also a part of a chain using &lt;code&gt;compose&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;In case you are wondering what the good folks at ramda do different, they use their own bulletproof implementation of &lt;code&gt;map&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Now we modify &lt;code&gt;view&lt;&#x2F;code&gt; and &lt;code&gt;over&lt;&#x2F;code&gt;. Starting with &lt;code&gt;view&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That &lt;code&gt;constant&lt;&#x2F;code&gt; thing might look like is too much, but it does the job. Things can get crazy in those &lt;code&gt;compose&lt;&#x2F;code&gt; chains, that just makes sure the value you want stays safe.&lt;&#x2F;p&gt;
&lt;p&gt;What about &lt;code&gt;over&lt;&#x2F;code&gt;? It will do almost the same thing, except that in this case we do need to use the &lt;code&gt;setter&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And now we should have a mostly adequate &lt;code&gt;Lens&lt;&#x2F;code&gt; implementation. The whole thing without dependencies (&lt;code&gt;path&lt;&#x2F;code&gt; and &lt;code&gt;assocPath&lt;&#x2F;code&gt;) should look like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; focus&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;focus&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; functor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;getter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; functor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;constant&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; identity&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;apply&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)(&lt;&#x2F;span&gt;&lt;span&gt;obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; always&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; obj&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; assocPath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; always&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But can you believe me if I said it works? You shouldn&#x27;t. Let&#x27;s make some tests. We&#x27;ll bring back &lt;code&gt;alice&lt;&#x2F;code&gt; and add her sister &lt;code&gt;calie&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Alice Jones&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  address&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;22 Walnut St&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;San Francisco&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;CA&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pets&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {&lt;&#x2F;span&gt;&lt;span&gt; dog&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;joker&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;batman&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; imaginary&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {&lt;&#x2F;span&gt;&lt;span&gt; dragon&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;harley&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; } }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;calie Jones&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  address&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;22 Walnut St&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;San Francisco&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;CA&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  pets&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {&lt;&#x2F;span&gt;&lt;span&gt; dog&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;riddler&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; cat&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;ivy&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; imaginary&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {&lt;&#x2F;span&gt;&lt;span&gt; dragon&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;hush&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; } },&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  friend&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: [&lt;&#x2F;span&gt;&lt;span&gt;alice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And because we planned ahead we have some lenses already available.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; some generic lens&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; head_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; specific lens&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; bff_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;friend&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; head_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; imaginary_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lpath&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;pets&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;imaginary&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Say that we want to do something with their &lt;code&gt;dragons&lt;&#x2F;code&gt;, all we have to do is &lt;code&gt;compose&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;imaginary_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Lprop&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;dragon&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; just for fun&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; bff_dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; compose&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;bff_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; demo&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; upper&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; view&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;         &#x2F;&#x2F; =&amp;gt; &amp;quot;hush&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;bff_dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;     &#x2F;&#x2F; =&amp;gt; &amp;quot;harley&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; over&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;let&lt;&#x2F;span&gt;&lt;span&gt; new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; upper&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;     &#x2F;&#x2F; =&amp;gt; &amp;quot;HUSH&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; over&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;bff_dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; upper&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;bff_dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;HARLEY&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; set&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;fluffykins&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt;     &#x2F;&#x2F; =&amp;gt; &amp;quot;fluffykins&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; set&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;bff_dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;pumpkin&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;view&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;bff_dragon_lens&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; new_calie&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; =&amp;gt; &amp;quot;pumpkin&amp;quot;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So we just manipulated a deeply nested object property by composing lenses. If you&#x27;re not excited then I don&#x27;t know what to tell you. We just solve a problem by composing functions!&lt;&#x2F;p&gt;
&lt;p&gt;These things can be hard to sell because they require for you to write in a certain style in order to make the most out of it. And for people who write javascript there are libraries out there that solve the same problem in a more convenient way, or at least in a way that is more suitable for their style.&lt;&#x2F;p&gt;
&lt;p&gt;Anyway, if you&#x27;re still interested in seeing lenses in a non trivial context checkout &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;kwasniew&#x2F;hyperapp-realworld-example-app&quot;&gt;this repository&lt;&#x2F;a&gt;, it is a &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;gothinkster&#x2F;realworld&quot;&gt;real world example app&lt;&#x2F;a&gt; (kinda like medium.com clone) that uses hyperapp to handle the frontend. In it the author chose to use lenses to handle state of the app.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;ramdajs.com&#x2F;docs&#x2F;&quot;&gt;ramda - docs&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;branneman&#x2F;f06bd451f74e5bc1725db23be682d4fe&quot;&gt;fp-lenses.js&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=IoVaArsh6tM&quot;&gt;Lambda World 2018 - Functional Lenses in JavaScript (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Taking a look at finite state machines</title>
        <published>2019-11-07T00:00:00+00:00</published>
        <updated>2019-11-07T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/taking-a-look-at-finite-state-machine/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/taking-a-look-at-finite-state-machine/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/taking-a-look-at-finite-state-machine/">&lt;h2 id=&quot;the-finite-who-what&quot;&gt;The finite who-- what?&lt;&#x2F;h2&gt;
&lt;p&gt;It is a way of modeling the behavior of a system. The idea is that your &quot;system&quot; can only be in one state at any given time, and an input (or event) can trigger the transition to another state.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-kind-of-problems-does-it-solve&quot;&gt;What kind of problems does it solve?&lt;&#x2F;h2&gt;
&lt;p&gt;Invalid state. How many times have you used a flag or attribute like &quot;disabled&quot; to prevent a user from doing something they shouldn&#x27;t do? By setting the rules of our system we can avoid these kind of problems.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-does-that-look-like-in-javascript&quot;&gt;How does that look like in javascript?&lt;&#x2F;h2&gt;
&lt;p&gt;I&#x27;m very glad you asked. The real reason I&#x27;m writing this is to show you a library that I saw the other day. We are going to use &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;thisrobot.life&#x2F;&quot;&gt;robot3&lt;&#x2F;a&gt; to built a random quote machine.&lt;&#x2F;p&gt;
&lt;p&gt;We will make a card that displays a quote and below that we&#x27;ll have a button that will fetch another quote.&lt;&#x2F;p&gt;
&lt;p&gt;We&#x27;ll do it one step at a time. Let&#x27;s first prepare the states.&lt;&#x2F;p&gt;
&lt;p&gt;Our card will be either &lt;code&gt;idle&lt;&#x2F;code&gt; or &lt;code&gt;loading&lt;&#x2F;code&gt;. Create a machine with that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;import&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  createMachine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  interpret&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;https:&#x2F;&#x2F;unpkg.com&#x2F;robot3@0.2.9&#x2F;machine.js&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; mr_robot&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; createMachine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  idle&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  loading&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here each &lt;code&gt;state&lt;&#x2F;code&gt; is a key in the &quot;setup object&quot; that we pass to &lt;code&gt;createMachine&lt;&#x2F;code&gt;, but also notice that it needs to be a &lt;code&gt;state&lt;&#x2F;code&gt; object, which we create with the &lt;code&gt;state&lt;&#x2F;code&gt; function.&lt;&#x2F;p&gt;
&lt;p&gt;Now we need transitions. Our &lt;code&gt;idle&lt;&#x2F;code&gt; state will switch to &lt;code&gt;loading&lt;&#x2F;code&gt; if a &lt;code&gt;fetch&lt;&#x2F;code&gt; event happens, &lt;code&gt;loading&lt;&#x2F;code&gt; will go back to &lt;code&gt;idle&lt;&#x2F;code&gt; if a &lt;code&gt;done&lt;&#x2F;code&gt; is dispatched.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; import {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  createMachine,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  state,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; transition,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  interpret&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; } from &amp;#39;https:&#x2F;&#x2F;unpkg.com&#x2F;robot3@0.2.9&#x2F;machine.js&amp;#39;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  idle: state(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  loading: state()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  loading: state(transition(&amp;#39;done&amp;#39;, &amp;#39;idle&amp;#39;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;code&gt;transition&lt;&#x2F;code&gt; is the thing that connects our states. It&#x27;s first parameter is the name of the event that will trigger the transition, the second parameter is the &quot;destination&quot; state it will switch to. The rest of &lt;code&gt;transition&lt;&#x2F;code&gt;&#x27;s parameters can be a list of function that will be executed when this transition is triggered.&lt;&#x2F;p&gt;
&lt;p&gt;Looks lovely, but uhm... how do we test it? The machine by itself doesn&#x27;t do anything. We need to give our new machine to the &lt;code&gt;interpret&lt;&#x2F;code&gt; function which will give us a &quot;service&quot; that can dispatch events. To prove that we are actually doing something we&#x27;ll also give a handler to &lt;code&gt;interpret&lt;&#x2F;code&gt;, it will be like a &#x27;onchange&#x27;, it will listen to state changes.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; handler&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; machine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; })&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;machine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;current&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt; send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; interpret&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;mr_robot&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; handler&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now you can see if it&#x27;s alive.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fetch&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fetch&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fetch&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;done&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; You should see in the console&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; loading (3)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; idle&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Dispatching &lt;code&gt;fetch&lt;&#x2F;code&gt; will turn the current state to &lt;code&gt;loading&lt;&#x2F;code&gt; and &lt;code&gt;done&lt;&#x2F;code&gt; will get it back to &lt;code&gt;idle&lt;&#x2F;code&gt;. I see you&#x27;re not impressed. That&#x27;s fine. Let&#x27;s try something, let&#x27;s add another state &lt;code&gt;end&lt;&#x2F;code&gt; and make &lt;code&gt;loading&lt;&#x2F;code&gt; switch to that, then dispatch &lt;code&gt;done&lt;&#x2F;code&gt; and see what happens.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;   loading: state(transition(&amp;#39;done&amp;#39;, &amp;#39;idle&amp;#39;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   loading: state(transition(&amp;#39;done&amp;#39;, &amp;#39;end&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   end: state()&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;done&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; You should see in the console&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; idle&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Sending &lt;code&gt;done&lt;&#x2F;code&gt; while &lt;code&gt;idle&lt;&#x2F;code&gt; doesn&#x27;t trigger a &lt;code&gt;loading&lt;&#x2F;code&gt; state, it stays in &lt;code&gt;idle&lt;&#x2F;code&gt; because that state doesn&#x27;t have a &lt;code&gt;done&lt;&#x2F;code&gt; event. And now...&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; We do the usual flow.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fetch&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;done&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; You should have&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; loading&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Now try again `fetch`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fetch&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; You should have&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; end&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you send &lt;code&gt;fetch&lt;&#x2F;code&gt; (or any other event) while in &lt;code&gt;end&lt;&#x2F;code&gt; state will give you &lt;code&gt;end&lt;&#x2F;code&gt; every single time. Why? Because you can&#x27;t go anywhere, &lt;code&gt;end&lt;&#x2F;code&gt; doesn&#x27;t have transitions.&lt;&#x2F;p&gt;
&lt;p&gt;I hope you see why this is useful. If not, I apologize for all the &lt;code&gt;console.log&lt;&#x2F;code&gt;ing.&lt;&#x2F;p&gt;
&lt;p&gt;Going back to our current machine. This what we got so far.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; import&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  createMachine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  transition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  interpret&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;https:&#x2F;&#x2F;unpkg.com&#x2F;robot3@0.2.9&#x2F;machine.js&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; mr_robot&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; createMachine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  idle&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;fetch&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;loading&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  loading&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;transition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;done&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;idle&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; handler&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; machine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; })&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;machine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;current&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;span&gt; send&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; interpret&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;mr_robot&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; handler&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But this is still not enough, now we need to get some data when we enter the &lt;code&gt;loading&lt;&#x2F;code&gt; state. Let&#x27;s first fake our quote fetching function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; get_quote&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; make a random delay, 3 to 5 seconds.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; random_number&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 5&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; *&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    setTimeout&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;quote&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; sanity check&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; res&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;To make it work with our state machine we will use a function called &lt;code&gt;invoke&lt;&#x2F;code&gt;, this utility calls an &quot;async function&quot; (a function that returns a promise) when you enter a &lt;code&gt;state&lt;&#x2F;code&gt; then when the promise resolves it sends a &lt;code&gt;done&lt;&#x2F;code&gt; event (if it fails it sends a &lt;code&gt;error&lt;&#x2F;code&gt; event).&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  import {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   createMachine,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   state,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  invoke,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   transition,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   interpret&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; } from &amp;#39;https:&#x2F;&#x2F;unpkg.com&#x2F;robot3@0.2.9&#x2F;machine.js&amp;#39;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  loading: state(transition(&amp;#39;done&amp;#39;, &amp;#39;idle&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  loading: invoke(get_quote, transition(&amp;#39;done&amp;#39;, &amp;#39;idle&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If you test &lt;code&gt;send(&#x27;fetch&#x27;)&lt;&#x2F;code&gt; you should see in the console.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;loading&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&#x2F;&#x2F; wait a few seconds...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&amp;lt;quote&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;idle&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;By now I hope you&#x27;re all wondering where do we actually keep the data? There is a handy feature in &lt;code&gt;createMachine&lt;&#x2F;code&gt; that let us define a &quot;context&quot; object that will be available to us in the function that we attach to our &lt;code&gt;transitions&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; context&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: {},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    loading: invoke(get_quote, transition(&amp;#39;done&amp;#39;, &amp;#39;idle&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; }, context);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Next we&#x27;ll use another utility. We will pass a third parameter to &lt;code&gt;loading&lt;&#x2F;code&gt;&#x27;s transition, a hook of some sort that will modify the context object. This utility is called &lt;code&gt;reduce&lt;&#x2F;code&gt; and it looks like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;ctx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;ctx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It takes the current context, a payload (here named &lt;code&gt;ev&lt;&#x2F;code&gt;) and whatever you return from it becomes your new context. We add that to the &lt;code&gt;loading&lt;&#x2F;code&gt; state.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  import {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   createMachine,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   state,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   invoke,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   transition,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  reduce,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   interpret&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; } from &amp;#39;https:&#x2F;&#x2F;unpkg.com&#x2F;robot3@0.2.9&#x2F;machine.js&amp;#39;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  loading: invoke(get_quote, transition(&amp;#39;done&amp;#39;, &amp;#39;idle&amp;#39;)), &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  loading: invoke(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    get_quote, &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    transition(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;      &amp;#39;done&amp;#39;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;      &amp;#39;idle&amp;#39;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;      reduce((ctx, ev) =&amp;gt; ({ ...ctx, data: ev.data }))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    )&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  ),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; }, context);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Sanity check time. How do we know that works? We modify &lt;code&gt;interpret&lt;&#x2F;code&gt;&#x27;s handler.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; handler&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span&gt; machine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; context&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; })&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;JSON&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;stringify&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    state&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; machine&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;current&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    context&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You should see this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{&amp;#39;state&amp;#39;:&amp;#39;loading&amp;#39;,&amp;#39;context&amp;#39;:{&amp;#39;data&amp;#39;:{}}}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;&#x2F;&#x2F; wait a few seconds...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;{&amp;#39;state&amp;#39;:&amp;#39;idle&amp;#39;,&amp;#39;context&amp;#39;:{&amp;#39;data&amp;#39;:&amp;#39;&amp;lt;quote&amp;gt;&amp;#39;}}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We are ready. Let&#x27;s show something in the browser.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;main&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;app&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;card&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;section&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;card&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;card__content&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;     &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;card__body&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;card__quote&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          quote&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;card__author&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          -- author&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;card__footer&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;load_btn&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;btn btn--new&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          More&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; href&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;#&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;_blank&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; class&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;btn btn--tweet&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          Tweet&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;section&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;main&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;css&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;body&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  display&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; flex&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  justify-content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; center&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  align-items&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; center&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  min-height&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 95&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;vh&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  background&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;ddd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  font-size&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;em&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  color&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;212121&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;card&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  width&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 600&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  background&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; white&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  box-shadow&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 5&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; rgba&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0.16&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 10&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; rgba&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0.12&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;card__content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  color&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;212121&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  padding&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 20&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;card__content--loader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  height&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 95&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  display&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; flex&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  align-items&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; center&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  justify-content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; center&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;card__body&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; padding-bottom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 15&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;card__author&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  padding-top&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 10&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  font-style&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; italic&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;card__footer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  width&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 100&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  display&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; flex&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  justify-content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; space-between&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;btn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  color&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;fff&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  cursor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; pointer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  margin-top&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 10&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  margin-left&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 10&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  border-radius&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0.4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;rem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  text-decoration&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; none&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  display&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; inline-block&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  padding&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; .3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;rem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; .9&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;rem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;btn--new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  background-color&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;2093be&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  border&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0.1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;rem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; solid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;2093be&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;btn--tweet&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  background-color&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;0074d9&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  border&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0.1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;rem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; solid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;0074d9&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;btn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;hover&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  background&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;3cb0fd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  border&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0.1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;rem&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; solid&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; #&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;3cb0fd&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  text-decoration&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; none&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;hide&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  display&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; none&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now the last piece of the puzzle, the side effects. We need to attach another function to our transitions so we can update the DOM. We could use &lt;code&gt;reduce&lt;&#x2F;code&gt; again but is just rude to have side effects on something called &lt;code&gt;reduce&lt;&#x2F;code&gt; (just don&#x27;t) We will bring another utility made for that, &lt;code&gt;action&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;But first we must prepare. Update the context object with the necessary dependencies. (This step is not necessary, this is just me being allergic to global variables)&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const context = ev =&amp;gt; ({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   data: {},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  dom: {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    quote: document.querySelector(&amp;#39;.card__quote&amp;#39;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    author: document.querySelector(&amp;#39;.card__author&amp;#39;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    load_btn: window.load_btn,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    tweet_btn: document.querySelector(&amp;#39;.btn--tweet&amp;#39;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    card: window.card&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Create the side effects. At this point you should make sure that &lt;code&gt;get_quote&lt;&#x2F;code&gt; actually returns an object with a &lt;code&gt;quote&lt;&#x2F;code&gt; and &lt;code&gt;author&lt;&#x2F;code&gt; property.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; update_card&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;load_btn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;textContent =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;More&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;quote&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;textContent =&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;quote&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;author&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;textContent =&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;author&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; web_intent&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;https:&#x2F;&#x2F;twitter.com&#x2F;intent&#x2F;tweet?text=&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; tweet&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;quote&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; -- &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;author&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;tweet_btn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setAttribute&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;#39;href&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; web_intent&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; encodeURIComponent&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;tweet&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; show_loading&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;load_btn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;textContent =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;Loading...&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Put everything together.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  import {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   createMachine,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   state,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   invoke,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   transition,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   reduce,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  action,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   interpret&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; } from &amp;#39;https:&#x2F;&#x2F;unpkg.com&#x2F;robot3@0.2.9&#x2F;machine.js&amp;#39;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;, action(show_loading))),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   loading: invoke(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     get_quote, &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     transition(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;#39;done&amp;#39;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;#39;idle&amp;#39;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       reduce((ctx, ev) =&amp;gt; ({ ...ctx, data: ev.data })),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;      action(update_card)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     )&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   ),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; }, context);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;By now everything kinda works but it looks bad when it loads for the first time. Let&#x27;s make another loader, one that hides the card while we fetch the first quote.&lt;&#x2F;p&gt;
&lt;p&gt;Let&#x27;s start with the HTML.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &amp;lt;main id=&amp;quot;app&amp;quot; class=&amp;quot;card&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  &amp;lt;section id=&amp;quot;card&amp;quot; class=&amp;quot;card__content&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  &amp;lt;section class=&amp;quot;card__content card__content--loader&amp;quot;&amp;gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    &amp;lt;p&amp;gt;Loading&amp;lt;&#x2F;p&amp;gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  &amp;lt;&#x2F;section&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  &amp;lt;section id=&amp;quot;card&amp;quot; class=&amp;quot;hide card__content&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     &amp;lt;div class=&amp;quot;card__body&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;div class=&amp;quot;card__quote&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;         quote&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;div class=&amp;quot;card__author&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;          -- author&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     &amp;lt;&#x2F;div&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     &amp;lt;div class=&amp;quot;card__footer&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;button id=&amp;quot;load_btn&amp;quot; class=&amp;quot;btn btn--new&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;         More&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;&#x2F;button&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;a href=&amp;quot;#&amp;quot; target=&amp;quot;_blank&amp;quot; class=&amp;quot;btn btn--tweet&amp;quot;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;         Tweet&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;       &amp;lt;&#x2F;a&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     &amp;lt;&#x2F;div&amp;gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   &amp;lt;&#x2F;section&amp;gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &amp;lt;&#x2F;main&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We&#x27;ll make another state, &lt;code&gt;empty&lt;&#x2F;code&gt;. We can reuse our original &lt;code&gt;loading&lt;&#x2F;code&gt; state for this. Make a factory function that returns the loading transition.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; load_quote&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  invoke&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    get_quote&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    transition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;done&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;      &amp;#39;idle&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;ctx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ({&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ...&lt;&#x2F;span&gt;&lt;span&gt;ctx&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; })),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;      ...&lt;&#x2F;span&gt;&lt;span&gt;args&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    transition&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;error&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;idle&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;, action(show_loading))),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  loading: invoke(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;    get_quote, &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;    transition(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;      &amp;#39;done&amp;#39;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;      &amp;#39;idle&amp;#39;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;      reduce((ctx, ev) =&amp;gt; ({ ...ctx, data: ev.data })),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;      action(update_card)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;    )&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  ),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  loading: load_quote(action(update_card))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; }, context);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we use this to hide the first loader and show the quote when it&#x27;s ready.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const context = ev =&amp;gt; ({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   data: {},&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   dom: {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     quote: document.querySelector(&amp;#39;.card__quote&amp;#39;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     author: document.querySelector(&amp;#39;.card__author&amp;#39;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;    loader: document.querySelector(&amp;#39;.card__content--loader&amp;#39;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     load_btn: window.load_btn,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     tweet_btn: document.querySelector(&amp;#39;.btn--tweet&amp;#39;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     card: window.card&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; hide_loader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt; dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; }) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;loader&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;classList&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;add&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hide&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  dom&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;card&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;classList&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;remove&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;hide&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const mr_robot = createMachine({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  empty: load_quote(action(update_card), action(hide_loader)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   idle: state(transition(&amp;#39;fetch&amp;#39;, &amp;#39;loading&amp;#39;, action(show_loading))),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   loading: load_quote(action(update_card))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; }, context);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; const handler = ({ machine, context }) =&amp;gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  console.log(JSON.stringify({ &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;    state: machine.current,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;    context&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  }));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; const handler = () =&amp;gt; {};&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const { send } = interpret(mr_robot, handler);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; const fetch_quote = () =&amp;gt; send(&amp;#39;fetch&amp;#39;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; window.load_btn.addEventListener(&amp;#39;click&amp;#39;, fetch_quote);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Let&#x27;s see it work.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;OJJvQzR&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;Finite Random Quote Machine&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;OJJvQzR&quot;&gt;Finite Random Quote Machine&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;


&lt;script async src=&quot;https:&#x2F;&#x2F;static.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;


&lt;h2 id=&quot;so-is-this-state-machine-thing-helpful&quot;&gt;So is this state machine thing helpful?&lt;&#x2F;h2&gt;
&lt;p&gt;I hope so. Did you notice we made a bunch of test and created the blueprint of the quote machine even before writing any HTML? I think that&#x27;s cool.&lt;&#x2F;p&gt;
&lt;p&gt;Did you try to click the &#x27;loading&#x27; button while loading? Did it triggered a bunch of call to &lt;code&gt;get_quote&lt;&#x2F;code&gt;? That is because we made (sort of) impossible that a &lt;code&gt;fetch&lt;&#x2F;code&gt; event can happen during &lt;code&gt;loading&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Not only that, the behavior of the machine and the effects on the outside world are separated. Depending on how you like to write code that may be a good or a bad thing.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;want-to-know-more&quot;&gt;Want to know more?&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;xstate.js.org&#x2F;docs&#x2F;about&#x2F;concepts.html&quot;&gt;XState (concepts)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;thisrobot.life&#x2F;&quot;&gt;robot3 - docs&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.freecodecamp.org&#x2F;news&#x2F;state-machines-basics-of-computer-science-d42855debc66&#x2F;&quot;&gt;Understanding State Machines&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Functional programming for your everyday javascript: Using a Maybe</title>
        <published>2019-10-28T00:00:00+00:00</published>
        <updated>2019-10-28T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/learn-fp/using-a-maybe/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/learn-fp/using-a-maybe/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/learn-fp/using-a-maybe/">&lt;p&gt;Have you ever heard about monads and how great they are? Maybe you have but you still don&#x27;t get it. Well... I&#x27;m not here to tell you what they are, I won&#x27;t try to sell them to you either, what I will do is show you an example of how would it be if you use them in your javascripts.&lt;&#x2F;p&gt;
&lt;p&gt;We&#x27;ll do something fun, lets solve a fairly trivial problem in an unnecessary complicated way.&lt;&#x2F;p&gt;
&lt;p&gt;Suppose that we have a dictionary stored in a json file or a plain js object.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;accident&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;An unexpected, unfortunate mishap, failure or loss with the potential for harming human life, property or the environment.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;An event that happens suddenly or by chance without an apparent cause.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;accumulator&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;A rechargeable device for storing electrical energy in the form of chemical energy, consisting of one or more separate secondary cells.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7FB4CA;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;n(Source: CED)&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;acid&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;A compound capable of transferring a hydrogen ion in solution.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Being harsh or corrosive in tone.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Having an acid, sharp or tangy taste.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;A powerful hallucinogenic drug manufactured from lysergic acid.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;quot;Having a pH less than 7, or being sour, or having the strength to neutralize  alkalis, or turning a litmus paper red.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;     &#x2F;&#x2F; ... moar words and meanings&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;    &amp;quot;Paris&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;The capital and largest city of France.&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We want a form that lets a user search one of this words and then shows the meaning(s). This is simple, right? What could possibly go wrong?&lt;&#x2F;p&gt;
&lt;p&gt;Because everyone loves HTML we&#x27;ll start with that.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;html&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;search_form&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; for&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;search_input&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;Search a word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;search_input&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;text&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; type&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;submit&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;Submit&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; id&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;result&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In the first version we will just try get one those values based on the user input.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; magically retrieve the data from a file or whatever&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;results&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; results&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;br&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; I regret nothing&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;search_form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;submit&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;innerHTML =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Naturally the first thing we try to search is &quot;acid.&quot; And behold here are the results.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;A compound capable of transferring a hydrogen ion in solution.
Being harsh or corrosive in tone.
Having an acid, sharp or tangy taste.
A powerful hallucinogenic drug manufactured from lysergic acid.
Having a pH less than 7, or being sour, or having the strength to neutralize alkalis, or turning a litmus paper red.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now we search for &quot;paris&quot;, I&#x27;m sure it&#x27;s there. What did we get? Nothing. Not exactly nothing, we got.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;TypeError: results is undefined&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;We also got an unpredictable submit button that sometime works and sometimes doesn&#x27;t. So what do we want? What do we really, really want? Safety, objects that don&#x27;t crash our application, we want reliable objects.&lt;&#x2F;p&gt;
&lt;p&gt;What we will do is implement containers that let us describe the flow of execution without worrying about the value they hold. Sounds good, right? Let me show you what I mean with a little javascript. Try this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; odd_arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;5&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; empty_arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;is_even&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;());&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;span&gt;odd_arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; empty_arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Did it throw an exception on the empty array? (if it did let me know). Isn&#x27;t that nice? Doesn&#x27;t it feel all warm and fuzzy knowing that the array methods would do the right thing even if there isn&#x27;t anything to work with? That is what we want.&lt;&#x2F;p&gt;
&lt;p&gt;You might be wondering couldn&#x27;t we just write a few &lt;code&gt;if&lt;&#x2F;code&gt; statements and be done with it? Well... yeah, but where is the fun in that? We all know that chaining functions is cool, and we are fans of functional programming, we do what every functional programming savvy does: &lt;strong&gt;hide things under a function&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;So we are going to hide an &lt;code&gt;if&lt;&#x2F;code&gt; statement (or maybe a couple), if the value we evaluate is undefined-ish we return a wrapper that will know how to behave no matter what happens.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; maybe.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; (I would like to apologize for the many `thing`s you&amp;#39;ll see)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;the_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;the_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; null&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;     ||&lt;&#x2F;span&gt;&lt;span&gt; the_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; undefined&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;     ||&lt;&#x2F;span&gt;&lt;span&gt; the_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;is_nothing&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  ) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; I don&amp;#39;t want nested Maybes&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;the_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;is_just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; the_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;the_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This wrappers are not going to be your standard by the book &lt;code&gt;Maybe&lt;&#x2F;code&gt; you see in a proper functional programming language. We will cheat a little in the name of convenience and side effects. Also their methods will be named after the methods in the Option type you find in Rust (I like those names better). Here is where the magic happens.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; maybe.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; I lied, there will be a lot of cheating and `fun`s.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    and_then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    or_else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    tap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; predicate_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      predicate_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        ?&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    is_just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    is_nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    inspect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `Just(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;)`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    and_then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    or_else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    tap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; Nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    is_just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    is_nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    inspect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `Nothing`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;What is the purpose of these methods?&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;map&lt;&#x2F;code&gt;: Applies the function &lt;code&gt;fun&lt;&#x2F;code&gt; to &lt;code&gt;the_thing&lt;&#x2F;code&gt; and wraps it again on a Maybe to keep the party going... I mean to keep the shape of the object, so you can keep chaining functions.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;and_then&lt;&#x2F;code&gt;: This is mostly an escape hatch. Apply the function &lt;code&gt;fun&lt;&#x2F;code&gt; and let fate decide.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;or_else&lt;&#x2F;code&gt;: It is the &lt;code&gt;else&lt;&#x2F;code&gt; to your &lt;code&gt;map&lt;&#x2F;code&gt; and &lt;code&gt;and_then&lt;&#x2F;code&gt;. The other path. The &quot;what if is not there?&quot;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;tap&lt;&#x2F;code&gt;: These one is there just for the side effects. If you see it then it&#x27;s probably affecting something outside of it&#x27;s scope (or maybe is just the perfect place to put a &lt;code&gt;console.log&lt;&#x2F;code&gt;).&lt;&#x2F;li&gt;
&lt;li&gt;filter: It &quot;lets you go through&quot; if the predicate function returns something truthy.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;unwrap_or&lt;&#x2F;code&gt;: This is how you get &lt;code&gt;the_thing&lt;&#x2F;code&gt; out. You&#x27;ll want this when you&#x27;re done chaining methods and you&#x27;re ready to get back to the imperative world.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Lets go back to our form and see it in action. We&#x27;ll make a function &lt;code&gt;search&lt;&#x2F;code&gt; that may o may not retrieve a match to the user&#x27;s query. If it does we&#x27;ll chain other functions that will be executed in a &quot;safe context.&quot;&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search_word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;word not found&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And now we replace our unholy old way with the new safe(r) function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; window.search_form.addEventListener(&amp;#39;submit&amp;#39;, function(ev) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   ev.preventDefault();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   let input = ev.target[0];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  window.result.innerHTML = format(entries[input.value]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  window.result.innerHTML = search_word(input.value);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we test. Search for &quot;accident.&quot;&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;An unexpected, unfortunate mishap, failure or loss with the potential for harming human life, property or the environment.
An event that happens suddenly or by chance without an apparent cause.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now Paris. Search for &quot;paris.&quot;&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;word not found&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;It didn&#x27;t freeze the button, that&#x27;s good. But I know Paris is there. If you check you&#x27;ll see that is &quot;Paris.&quot; We&#x27;ll just capitalize the user input so they don&#x27;t have to. First we&#x27;ll try to search the exact input, if that fails we&#x27;ll try the capitalize way.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; create_search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; exact&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; exact&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ?&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;charAt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Change the search function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; const search = (data, input) =&amp;gt; Maybe(data[input]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; const search = create_search(entries, true);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; const search_name = create_search(entries, false);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt; const search_word = word =&amp;gt; search(entries, word)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt; const search_word = word =&amp;gt; search(word)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;   .or_else(() =&amp;gt; search_name(word))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    .map(format)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    .unwrap_or(&amp;#39;word not found&amp;#39;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Very nice. This what we got so far in main.js if you wanna see the whole picture.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; create_search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; exact&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; exact&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ?&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; capitalize&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;charAt&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toUpperCase&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; str&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;slice&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;results&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; results&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;join&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;&amp;lt;br&amp;gt;&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; create_search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; search_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; create_search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search_word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;or_else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search_name&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;format&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;word not found&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;search_form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;addEventListener&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;submit&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;preventDefault&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  let&lt;&#x2F;span&gt;&lt;span&gt; input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; ev&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;target&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;innerHTML =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; search_word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But is that all we want in life? No, of course not, we want love but since javascript can&#x27;t give us that we&#x27;ll settle for a little &quot;suggest word&quot; feature. I want to search &quot;accu&quot; and have a confirm dialog telling me &quot;Did you mean accumulator?&quot;&lt;&#x2F;p&gt;
&lt;p&gt;We&#x27;ll need help with this one, we&#x27;ll bring a dependency, one that can perform a fuzzy search on the entries: &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;wouter2203&#x2F;fuzzy-search#readme&quot;&gt;fuzzy-search&lt;&#x2F;a&gt;. So we add the following.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt;import&lt;&#x2F;span&gt;&lt;span&gt; FuzzySearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; from&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;https:&#x2F;&#x2F;unpkg.com&#x2F;fuzzy-search@3.0.1&#x2F;src&#x2F;FuzzySearch.js&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span&gt; fzf&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; = new&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; FuzzySearch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  Object&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;keys&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;entries&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  [],&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  {&lt;&#x2F;span&gt;&lt;span&gt;caseSensitive&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; sort&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But again we can&#x27;t perform a safe operation &#x27;cause the moment we try to get a match from an empty array the whole thing will fall apart. So what do we do? We hide things under a function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; suggest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  const&lt;&#x2F;span&gt;&lt;span&gt; matches&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; fzf&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;matches&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Fuzzy search is ready, now lets throw in a super awesome confirm dialog. You&#x27;ll love it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; confirm_word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &amp;amp;&amp;amp;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; confirm&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`Did you mean &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We combine the new functions with our &lt;code&gt;search&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; main.js&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; suggest_word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; suggest&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;confirm_word&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  .&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;search&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Add the feature to &lt;code&gt;search_word&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const search_word = word =&amp;gt; search(word)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   .or_else(() =&amp;gt; search_name(word))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  .or_else(suggest_word(word))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   .map(format)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   .unwrap_or(&amp;#39;word not found&amp;#39;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That works! But lets say we are allergic to &lt;code&gt;if&lt;&#x2F;code&gt; statements and not to mention that it&#x27;s just rude to return &lt;code&gt;undefined&lt;&#x2F;code&gt; from a function. We can do better.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; function confirm_word(value) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  if(value &amp;amp;&amp;amp; confirm(`Did you mean ${value}`)) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;    return value;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  return confirm(`Did you mean ${value}`);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const suggest_word = value =&amp;gt; () =&amp;gt; suggest(value)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  .map(confirm_word)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  .filter(confirm_word)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   .map(search);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Something bugs me. I search &quot;accu&quot;, the dialog pops in, I confirm the suggestion and the results appears. But &quot;accu&quot; it&#x27;s still there in the input, it&#x27;s awkward. Lets update the input with the right word.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; update_input&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; window&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;search_form&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;].&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;value =&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; const suggest_word = value =&amp;gt; () =&amp;gt; suggest(value)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   .filter(confirm_word)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  .tap(update_input)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   .map(search);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Want to see it in action? There you go.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;JjjNvLE&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;Maybe I got your word&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;JjjNvLE&quot;&gt;Maybe I got your word&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;


&lt;script async src=&quot;https:&#x2F;&#x2F;static.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;


&lt;h2 id=&quot;bonus-track&quot;&gt;Bonus track&lt;&#x2F;h2&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Warning&lt;&#x2F;em&gt;: The main point of the post (which is me showing that codepen example) was already accomplished. What follows is a strange experiment to see if I could make that &lt;code&gt;Maybe&lt;&#x2F;code&gt; function support asynchronous operations. If you are tired just skip everything and check out the last example code.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Now you might be saying: this is cute and all but in the &quot;real world&quot; we make http requests, query a database, make all sorts of asynchronous stuff, can this still be useful in that context?&lt;&#x2F;p&gt;
&lt;p&gt;I hear you. Our current implementation just supports normal blocking tasks. You would have to break the chain of &lt;code&gt;Maybes&lt;&#x2F;code&gt; the moment a &lt;code&gt;Promise&lt;&#x2F;code&gt; shows up.&lt;&#x2F;p&gt;
&lt;p&gt;But what if... listen... we make a promise aware &lt;code&gt;Just&lt;&#x2F;code&gt;. We can do that, an &lt;code&gt;AsyncJust&lt;&#x2F;code&gt;? &lt;code&gt;JustAsync&lt;&#x2F;code&gt;? Oh, that&#x27;s awful.&lt;&#x2F;p&gt;
&lt;p&gt;If you don&#x27;t know, a &lt;code&gt;Promise&lt;&#x2F;code&gt; is a data type that javascript uses to coordinate future events. To do so it uses a method called &lt;code&gt;then&lt;&#x2F;code&gt; that takes a callback (it also has &lt;code&gt;catch&lt;&#x2F;code&gt; for when things go wrong) So if we hijack what goes into that &lt;code&gt;then&lt;&#x2F;code&gt; then we can keep our nice &lt;code&gt;Maybe&lt;&#x2F;code&gt; interface.&lt;&#x2F;p&gt;
&lt;p&gt;How good are you following a bunch of callbacks?&lt;&#x2F;p&gt;
&lt;p&gt;Here I go. Let me show you the &lt;code&gt;Future&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Don&amp;#39;t judge me. &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map_future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    and_then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;map_future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    or_else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    tap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; promise_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_thing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;filter_future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))),&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    is_just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    is_nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; false&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    is_future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; true&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    inspect&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `&amp;lt;Promise&amp;gt;`&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;If we remove the noise maybe we could understand better.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; In it&amp;#39;s very core is callbacks all the way.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;{&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  and_then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  or_else&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  tap&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;))&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; arg&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;  filter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;map&lt;&#x2F;code&gt;&#x2F;&lt;code&gt;and_then&lt;&#x2F;code&gt;: these do the same thing because you can&#x27;t get out of a &lt;code&gt;Promise&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;or_else&lt;&#x2F;code&gt;: puts your callback in the &lt;code&gt;catch&lt;&#x2F;code&gt; method to mimic an &lt;code&gt;else&lt;&#x2F;code&gt; behavior.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;tap&lt;&#x2F;code&gt;: uses &lt;code&gt;then&lt;&#x2F;code&gt; to peek at the value. Since this is for side effects we return the value again.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;unwrap_or&lt;&#x2F;code&gt;: It will return the promise so you can use &lt;code&gt;await&lt;&#x2F;code&gt;. If everything goes well the original value of the &lt;code&gt;Promise&lt;&#x2F;code&gt; will be returned when you &lt;code&gt;await&lt;&#x2F;code&gt;, else the provided argument will be returned. Either way the promise doesn&#x27;t throw an error because the &lt;code&gt;Future&lt;&#x2F;code&gt; attached the &lt;code&gt;catch&lt;&#x2F;code&gt; method to it.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;code&gt;filter&lt;&#x2F;code&gt;: these one is a special kind of &lt;code&gt;map&lt;&#x2F;code&gt; that&#x27;s why &lt;code&gt;filter_future&lt;&#x2F;code&gt; exists.&lt;&#x2F;li&gt;
&lt;li&gt;Almost all these methods return a new &lt;code&gt;Future&lt;&#x2F;code&gt; &#x27;cause &lt;code&gt;promise.then&lt;&#x2F;code&gt; returns a new &lt;code&gt;Promise&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;What makes the &lt;code&gt;Future&lt;&#x2F;code&gt; weird is what happens inside &lt;code&gt;map&lt;&#x2F;code&gt;. Remember &lt;code&gt;map_future&lt;&#x2F;code&gt;?&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map_future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; `fun` is the user&amp;#39;s callback&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;* Evaluate the original value *&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    let&lt;&#x2F;span&gt;&lt;span&gt; promise_content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; It needs to decide if the value of the Promise&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; can be trusted&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;is_nothing&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;      Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reject&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; If it is a Just then unwrap it.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;is_just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      promise_content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;* Evaluate the return value of the user&amp;#39;s callback *&#x2F;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Use Maybe because I have trust issues.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; For the javascript world is undefined and full of errors.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Maybe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;promise_content&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;is_just&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; If it gets here it&amp;#39;s all good.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;unwrap_or&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; at this point i should check if result is a Future&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; if that happens you are using them in a wrong way&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; so for now I don&amp;#39;t do it &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; There is something seriously wrong.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reject&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now &lt;code&gt;filter_future&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; filter_future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;predicate_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;span style=&quot;color: #727169;&quot;&gt; &#x2F;&#x2F; the user&amp;#39;s function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    const&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; predicate_fun&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; Did you just returned a `Promise`?&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; You did! That&amp;#39;s why you can&amp;#39;t have nice things.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; peek inside the user&amp;#39;s promise.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      const&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; return_result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; the_real_result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; the_real_result &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        ?&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;        :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reject&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; keep the promise chain alive.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;return_result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ?&lt;&#x2F;span&gt;&lt;span&gt; val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; :&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt; Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reject&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There is one last thing I would like to do and that is create a helper function to convert a regular value into a &lt;code&gt;Future&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;from_val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Future&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7AA89F;&quot;&gt;Promise&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;resolve&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;val&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;All we have to do now to support a &lt;code&gt;Future&lt;&#x2F;code&gt; in a &lt;code&gt;Maybe&lt;&#x2F;code&gt; is this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;diff&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; function Maybe(the_thing) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   if(the_thing === null &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     || the_thing === undefined &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     || the_thing.is_nothing&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   ) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     return Nothing();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;   }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;-&lt;&#x2F;span&gt;&lt;span style=&quot;color: #C34043;&quot;&gt;  if(the_thing.is_just) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;+&lt;&#x2F;span&gt;&lt;span style=&quot;color: #76946A;&quot;&gt;  if(the_thing.is_future || the_thing.is_just) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;     return the_thing;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    return Just(the_thing);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;But the million dollar question remains. Does it actually work?&lt;&#x2F;p&gt;
&lt;p&gt;I have &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;VonHeikemen&#x2F;maybe-type-in-js&quot;&gt;CLI version&lt;&#x2F;a&gt; of this. And here is the same codepen example with some tweaks: I added the &lt;code&gt;Future&lt;&#x2F;code&gt; related functions, the confirm dialog is actually a dialog (&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.hubspot.com&#x2F;vex&#x2F;&quot;&gt;this one&lt;&#x2F;a&gt;) and the event listener is now an async function that can &lt;code&gt;await&lt;&#x2F;code&gt; the result.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;oNNwagG&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;Maybe I will promise you a word&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;oNNwagG&quot;&gt;Maybe I will promise you a word&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;



&lt;h3 id=&quot;bonus-bonus-edit&quot;&gt;Bonus bonus edit&lt;&#x2F;h3&gt;
&lt;p&gt;That is how it looks like when we cheat. If we didn&#x27;t cheat it would be like &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;QWWYJwZ&quot;&gt;this&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;other-resources&quot;&gt;Other resources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.toptal.com&#x2F;javascript&#x2F;option-maybe-either-future-monads-js&quot;&gt;Option&#x2F;Maybe, Either, and Future Monads in JavaScript, Python, Ruby, Swift, and Scala&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;jrsinclair.com&#x2F;articles&#x2F;2016&#x2F;marvellously-mysterious-javascript-maybe-monad&#x2F;&quot;&gt;The Marvellously Mysterious JavaScript Maybe Monad&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=pgq-Pfg6ul4&quot;&gt;Monad Mini-Series: Functors (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=SfWR3dKnFIo&quot;&gt;Oh Composable World! (video)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Homemade observables</title>
        <published>2018-08-12T00:00:00+00:00</published>
        <updated>2018-08-12T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Heiker Curiel
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://vonheikemen.github.io/devlog/web-development/homemade-observables/"/>
        <id>https://vonheikemen.github.io/devlog/web-development/homemade-observables/</id>
        
        <content type="html" xml:base="https://vonheikemen.github.io/devlog/web-development/homemade-observables/">&lt;p&gt;On this episode we will build our own implementation of an observable. I hope that by the end of this post we gain a better understanding of this pattern that is used in libraries like RxJS.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;about-observables&quot;&gt;About Observables&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;what-is-it&quot;&gt;What is it?&lt;&#x2F;h3&gt;
&lt;p&gt;Lets start with &lt;strong&gt;my&lt;&#x2F;strong&gt; definition of observable.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;An Observable is a function that follows a convention and is used to connect a data source with a consumer.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;In our case a data source is something that produces values. And, a consumer is something that receives values from a data source.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;fun-facts&quot;&gt;Fun facts&lt;&#x2F;h3&gt;
&lt;h4 id=&quot;observables-are-lazy&quot;&gt;Observables are lazy&lt;&#x2F;h4&gt;
&lt;p&gt;That means that they would not do any kind of work until it&#x27;s absolutely necessary. Nothing will happen until you subscribe to them.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;they-can-emit-multiple-values&quot;&gt;They can emit multiple values&lt;&#x2F;h4&gt;
&lt;p&gt;Depending on the data source you can receive a finite number of values or an infinite stream of values.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;they-can-be-synchronous-or-asynchronous&quot;&gt;They can be synchronous or asynchronous&lt;&#x2F;h4&gt;
&lt;p&gt;It all depends on their internal implementation. You can setup an observable that process some stream of data in a synchronous way or create one from an event that can happen over time.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;some-rules&quot;&gt;Some rules&lt;&#x2F;h3&gt;
&lt;p&gt;Remember when I said that observables follow a convention? Well, we are going to make our own arbitrary rules that our implementation will follow. These will be important because we are going to build a little ecosystem around our observables.&lt;&#x2F;p&gt;
&lt;p&gt;Here we go:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;An observable instance will have a &lt;code&gt;subscribe&lt;&#x2F;code&gt; method.&lt;&#x2F;li&gt;
&lt;li&gt;The observable &quot;factory&quot; will take a &lt;code&gt;subscriber&lt;&#x2F;code&gt; function as a parameter.&lt;&#x2F;li&gt;
&lt;li&gt;The &lt;code&gt;subscriber&lt;&#x2F;code&gt; function will take an &lt;code&gt;observer&lt;&#x2F;code&gt; object as a parameter.&lt;&#x2F;li&gt;
&lt;li&gt;The &lt;code&gt;observer&lt;&#x2F;code&gt; object can implement these methods &lt;code&gt;next&lt;&#x2F;code&gt;, &lt;code&gt;error&lt;&#x2F;code&gt; and &lt;code&gt;complete&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;Now, lets do stuff.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-code&quot;&gt;The code&lt;&#x2F;h3&gt;
&lt;h4 id=&quot;factory-function&quot;&gt;Factory function&lt;&#x2F;h4&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;subscriber&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; subscriber&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; I swear to you, this works.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That is less magical than I thought. What we see here is that the &lt;strong&gt;Observable&lt;&#x2F;strong&gt; factory is just a way to postpone the work that has to be done until you call subscribe. The &lt;code&gt;subscriber&lt;&#x2F;code&gt; function is doing the heavy lifting, that&#x27;s good because we can do whatever we want in there, is what will make our observables useful.&lt;&#x2F;p&gt;
&lt;p&gt;So far I haven&#x27;t done a really good job explaining the &lt;code&gt;observer&lt;&#x2F;code&gt; and the &lt;code&gt;subscriber&lt;&#x2F;code&gt; roles. I hope it&#x27;ll become clear when you see them in action.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;a-use-case&quot;&gt;A use case&lt;&#x2F;h2&gt;
&lt;p&gt;Say that we want to convert an array into an Observable. How can we do this?&lt;&#x2F;p&gt;
&lt;p&gt;Lets think about what we know:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;We can do all of our logic inside the &lt;code&gt;subscriber&lt;&#x2F;code&gt; function.&lt;&#x2F;li&gt;
&lt;li&gt;We can expect an observer object with three methods, &lt;code&gt;next&lt;&#x2F;code&gt;, &lt;code&gt;error&lt;&#x2F;code&gt; and &lt;code&gt;complete&lt;&#x2F;code&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;We can use the methods of the observer object as communication channels. The &lt;code&gt;next&lt;&#x2F;code&gt; function will receive the values that our data source gives us. The &lt;code&gt;error&lt;&#x2F;code&gt; will handle any errors we throw at it, it will be like the &lt;code&gt;catch&lt;&#x2F;code&gt; function in the &lt;code&gt;Promise&lt;&#x2F;code&gt; class. And, we will use the &lt;code&gt;complete&lt;&#x2F;code&gt; method when the data source is done producing values.&lt;&#x2F;p&gt;
&lt;p&gt;Our array to observable function could look like this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fromArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt;    try&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;forEach&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;complete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FF5D62;font-weight: bold;&quot;&gt; catch&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;e&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; This is how we use it&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; arrayStream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fromArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;]);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;arrayStream&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;err&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  complete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;#39;Nothing more to give&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; And now watch all the action on the console&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h3 id=&quot;be-safe&quot;&gt;Be safe&lt;&#x2F;h3&gt;
&lt;p&gt;Right now the observer object is basically a lawless town, we could do all sorts of weird stuff like sending yet another value to &lt;code&gt;next&lt;&#x2F;code&gt; even after we call the &lt;code&gt;complete&lt;&#x2F;code&gt; method. Ideally our observables should give us some guarantees, like:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;The methods on the observer object should be optional.&lt;&#x2F;li&gt;
&lt;li&gt;The &lt;code&gt;complete&lt;&#x2F;code&gt; and &lt;code&gt;error&lt;&#x2F;code&gt; methods need to call the unsubscribe function (if there is one).&lt;&#x2F;li&gt;
&lt;li&gt;If you unsubscribe, you can&#x27;t call &lt;code&gt;next&lt;&#x2F;code&gt;, &lt;code&gt;complete&lt;&#x2F;code&gt; or &lt;code&gt;error&lt;&#x2F;code&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;If the &lt;code&gt;complete&lt;&#x2F;code&gt; or &lt;code&gt;error&lt;&#x2F;code&gt; method were called, no more values are emitted.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;interactive-example&quot;&gt;Interactive example&lt;&#x2F;h3&gt;
&lt;p&gt;We can actually start doing some interesting things with what we learned so far. In this example I made a helper function that let me create an observable from a DOM event.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;wxNYPV&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;Observables - basics&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;wxNYPV&quot;&gt;Observables - basics&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;


&lt;script async src=&quot;https:&#x2F;&#x2F;static.codepen.io&#x2F;assets&#x2F;embed&#x2F;ei.js&quot;&gt;&lt;&#x2F;script&gt;


&lt;p&gt;Now we will learn how we can manipulate existing Observables to extend their behavior.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;it-all-starts-with-operators&quot;&gt;It all starts with operators&lt;&#x2F;h2&gt;
&lt;p&gt;This time we&#x27;ll create some utility functions, and tweak a little bit our current Observable implementation, in order to create more flexible features with them.&lt;&#x2F;p&gt;
&lt;p&gt;Operators are functions that allow us to extend the behavior of an observable with a chain of functions. Each of this functions can take an observable as a data source and returns a new observable.&lt;&#x2F;p&gt;
&lt;p&gt;Lets keep the array theme in here and create a &lt;strong&gt;map&lt;&#x2F;strong&gt; operator that emulates the native map function of the Array prototype, but for observables. Our operator will do this: take a value, apply a function that will perform some transformation and return a new value.&lt;&#x2F;p&gt;
&lt;p&gt;Lets give it a try:&lt;&#x2F;p&gt;
&lt;p&gt;First step, get the transform function and the data source, then return a new observable that we can use.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; to be continued...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Here comes the cool part, the source that we get is an observable and that means we can subscribe to it to get some values.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; remember to keep returning values from your functions.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; This will return the unsubcribe function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; to be continued...&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we need to pass the result of the transformation to the observer so we can &quot;see&quot; it when we subscribe to this new observable.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; ****** WE ARE HERE ******&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;      var&lt;&#x2F;span&gt;&lt;span&gt; newValue&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;newValue&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; *************************&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There is a lot of indentation and returns going on in here. We can &quot;fix&quot; that if we use arrow functions all the way.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; that didn&amp;#39;t do much for the indentation. &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Well, you can&amp;#39;t win them all.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We still need to use the operator and right now this will be it.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fromArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    arr&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;forEach&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;complete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; thisArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; plusOne&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; array$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;    =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;plusOne&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fromArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thisArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;array$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This doesn&#x27;t feel very chainy. In order to use more of this map functions we would have to nest them, and that ain&#x27;t right. Don&#x27;t worry, we&#x27;ll get to that in a moment.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;pipe-all-the-things&quot;&gt;Pipe all the things&lt;&#x2F;h2&gt;
&lt;p&gt;We will create a helper function that will allow us to use one or more operators that can modify an observable source.&lt;&#x2F;p&gt;
&lt;p&gt;This function will take a collection of functions, and each function in the collection will use the return value of the previous function as an input.&lt;&#x2F;p&gt;
&lt;p&gt;First, I&#x27;m going to show how this could be done as a standalone helper function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;aFunctionArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; initialSource&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; reducerFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; result&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  };&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; finalResult&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; aFunctionArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;reducerFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; initialSource&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; finalResult&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In here the &lt;strong&gt;reduce&lt;&#x2F;strong&gt; function loops over the array and for each element in it executes &lt;strong&gt;reducerFn&lt;&#x2F;strong&gt;. Inside reducerFn in the first loop, &lt;strong&gt;source&lt;&#x2F;strong&gt; will be &lt;strong&gt;initialSource&lt;&#x2F;strong&gt; and in the rest of the loops &lt;strong&gt;source&lt;&#x2F;strong&gt; will be whatever you return from reducerFn. The &lt;strong&gt;finalResult&lt;&#x2F;strong&gt; is just the last result returned from reducerFn.&lt;&#x2F;p&gt;
&lt;p&gt;With some modifications (ES6+ goodness included) we can use this helper function within our Observable factory to make it more flexible. Our new factory would now look like this:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;subscriber&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; subscriber&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;SafeObserver&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;...&lt;&#x2F;span&gt;&lt;span&gt;fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      return&lt;&#x2F;span&gt;&lt;span&gt; fns&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;reduce&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;source&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;span&gt; observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;We need to do one more thing to make sure our operators are compatible with this new pipe function. For example, our current &lt;strong&gt;map&lt;&#x2F;strong&gt; operator expects both &lt;strong&gt;transformFn&lt;&#x2F;strong&gt; and &lt;strong&gt;source&lt;&#x2F;strong&gt; at the same time. That just won&#x27;t happen inside pipe. Will have to split it into two functions, one that will take the initial necessary parameters to make it work and another one that takes the source observable.&lt;&#x2F;p&gt;
&lt;p&gt;There are a couple of ways we can do this.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Option 1&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; Instead of returning an observable &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; we return a function that expects a source&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Option 2&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #FFA066;&quot;&gt; undefined&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; we&amp;#39;ll return a function &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; that will &amp;quot;remember&amp;quot; the transform function&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; and expect the source and put in its place.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; placeholder&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; placeholder&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      transformFn&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    ))&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  );&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And finally we can extend our observable in this way:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; thisArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; [&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 3&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 4&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;];&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; plusOne&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; timesTwo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  =&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; *&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; array$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; fromArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;thisArray&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;plusOne&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;timesTwo&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; `number: &lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;${&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;  &#x2F;&#x2F; ... many more operators&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;array$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we are ready to create more operators.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;exercise-time&quot;&gt;Exercise time&lt;&#x2F;h2&gt;
&lt;p&gt;Lets say that we have a piece of code that prints a &quot;time string&quot; to the console every second, and stops after five seconds (because why not). This guy right here:&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; startTimer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; setInterval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;() {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; minutes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Math&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;floor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 60&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 60&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;().&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;padStart&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;0&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; seconds&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Math&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;floor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 60&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;().&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;padStart&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;0&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; minutes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span&gt; seconds&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;00:05&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;      clearInterval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  },&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 1000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;There is nothing wrong with this piece of code. I mean, it does the job, it&#x27;s predictable, and everything you need to know about it is there in plain sight. But you know, we are in a refactoring mood and we just learned something new. We&#x27;ll turn this into an observable thingy.&lt;&#x2F;p&gt;
&lt;p&gt;First things first, lets make a couple of helper function that handle the formatting and time calculations.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; paddedNumber&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; num&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;toString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;().&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;padStart&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;0&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; readableTime&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; minutes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Math&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;floor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;((&lt;&#x2F;span&gt;&lt;span&gt;time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; &#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 60&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 60&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;  var&lt;&#x2F;span&gt;&lt;span&gt; seconds&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; Math&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;floor&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;time&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; %&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 60&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt; &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; paddedNumber&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;minutes&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;:&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; +&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; paddedNumber&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;seconds&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now lets handle the time. &lt;em&gt;setInterval&lt;&#x2F;em&gt; is a great candidate for a data source, it takes a callback in which we could produce values, it also has a &quot;cleanup&quot; mechanism. It just makes the perfect observable.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; counter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;   =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;  =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;counter&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;++&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; _interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; setInterval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;callback&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;,&lt;&#x2F;span&gt;&lt;span&gt; delay&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;setUnsubscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; clearInterval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;_interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;));&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;    return&lt;&#x2F;span&gt;&lt;span&gt; observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;unsubscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is amazing, we now have really reusable way to set and destroy an interval.&lt;&#x2F;p&gt;
&lt;p&gt;You may have notice that we are passing a number to the observer, we are not calling it &lt;em&gt;seconds&lt;&#x2F;em&gt; because the &lt;strong&gt;delay&lt;&#x2F;strong&gt; can be any arbitrary number. In here we&#x27;re not keeping track of the time, we are merely counting how many times the callback has been executed. Why? Because we want to make every observable factory as generic as possible. We can always modify the value that it emits by using operators.&lt;&#x2F;p&gt;
&lt;p&gt;This how we could use our new interval function.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; pretend we have our helper functions in scope.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; time$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;plusOne&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;readableTime&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; unsubscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; time$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt; &amp;#39;00:05&amp;#39;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;    unsubscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That&#x27;s better. But that &lt;em&gt;if&lt;&#x2F;em&gt; bothers me. I feel like that behavior doesn&#x27;t belong in there. You know what? I&#x27;ll make an operator that can unsubscribe to the interval after it emits five values.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; I&amp;#39;ll named &amp;quot;take&amp;quot; because naming is hard.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; Also, that is how is called in other libraries.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; take&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;total&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;  return&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; Observable&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; we&amp;#39;ll have our own counter because I don&amp;#39;t trust in the values&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;    &#x2F;&#x2F; that other observables emits&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt; 0&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;    var&lt;&#x2F;span&gt;&lt;span&gt; unsubscribeSource&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span&gt; source$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;function&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt;++&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; we pass every single value to the observer.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;      &#x2F;&#x2F; the subscribe function will still get every value in the stream &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;value&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;font-weight: bold;&quot;&gt;      if&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt; (&lt;&#x2F;span&gt;&lt;span&gt;count&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; ===&lt;&#x2F;span&gt;&lt;span&gt; total&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;) {&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;        &#x2F;&#x2F; we signal the completion of the stream and &amp;quot;destroy&amp;quot; the thing&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;        observer&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;complete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;        unsubscribeSource&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;();&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;      }&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;    });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;  });&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;}&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now we can have a self destructing timer. Finally.&lt;&#x2F;p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color: #DCD7BA; background-color: #1F1F28;&quot;&gt;&lt;code data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #727169;&quot;&gt;&#x2F;&#x2F; pretend we have our helper functions in scope.&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt; time$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #E6C384;&quot;&gt; =&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt; interval&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;1000&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;).&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;pipe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;plusOne&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  map&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;readableTime&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  take&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #D27E99;&quot;&gt;5&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;);&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;time$&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;subscribe&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;({&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  next&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span&gt; timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span&gt;timeString&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;),&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;  complete&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;: ()&lt;&#x2F;span&gt;&lt;span style=&quot;color: #957FB8;&quot;&gt; =&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; console&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color: #7E9CD8;&quot;&gt;info&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color: #98BB6C;&quot;&gt;&amp;quot;Time&amp;#39;s up&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;)&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span style=&quot;color: #9CABCA;&quot;&gt;});&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;&lt;h2 id=&quot;playgrounds&quot;&gt;Playgrounds&lt;&#x2F;h2&gt;
&lt;p&gt;I made a couple of pens so you can play around with this stuff. &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;OwQYxG&quot;&gt;This pen&lt;&#x2F;a&gt; contains all the Observable related code that I wrote for this posts and them some more.&lt;&#x2F;p&gt;
&lt;p&gt;And this is the pen for the exercise.&lt;&#x2F;p&gt;
&lt;p 
  class=&quot;codepen&quot; 
  data-height=&quot;600&quot; 
  data-theme-id=&quot;dark&quot; 
  data-default-tab=&quot;js,result&quot; 
  data-user=&quot;VonHeikemen&quot; 
  data-slug-hash=&quot;VGZXZa&quot; 
  data-preview=&quot;true&quot; 
  style=&quot;height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; 
  data-pen-title=&quot;Observables - boring timer&quot;&gt;
  &lt;span&gt;
    See the Pen &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&#x2F;pen&#x2F;VGZXZa&quot;&gt;Observables - boring timer&lt;&#x2F;a&gt; by Heiker (&lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&#x2F;VonHeikemen&quot;&gt;@VonHeikemen&lt;&#x2F;a&gt;) on &lt;a href=&quot;https:&#x2F;&#x2F;codepen.io&quot;&gt;CodePen&lt;&#x2F;a&gt;.
  &lt;&#x2F;span&gt;
&lt;&#x2F;p&gt;



&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Observables are a powerful thing, with a little bit of creativity you can turn anything you want into an observable. Really. A promise, an AJAX request, a DOM event, an array, a time interval and anything you can imagine can be a source of data that can be wrapped in an observable.&lt;&#x2F;p&gt;
&lt;p&gt;They are a powerful abstraction. They can let you process streams of data one chunk at a time. Not only that, but also let you piece together solutions that can be compose by generic functions and custom functions specific to the problem at hand.&lt;&#x2F;p&gt;
&lt;p&gt;Fair warning though. They are not the ultimate solution to every problem. You&#x27;ll have to decide if the complexity is worth it. Like in the exercise, we lose the simplicity of the &lt;em&gt;startTimer&lt;&#x2F;em&gt; in order to gain some flexibility (that we could&#x27;ve achieve some other way).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;sources&quot;&gt;Sources&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;medium.com&#x2F;@benlesh&#x2F;learning-observable-by-building-observable-d5da57405d87&quot;&gt;Learning Observable By Building Observable&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;medium.com&#x2F;@kevinkreuzer&#x2F;observables-just-powerful-functions-a033c355b22c&quot;&gt;Observables, just powerful functions?&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;netbasal.com&#x2F;whos-afraid-of-observables-bde0dc4f48cc&quot;&gt;Who’s Afraid of Observables?&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;netbasal.com&#x2F;understanding-mergemap-and-switchmap-in-rxjs-13cf9c57c885&quot;&gt;Understanding mergeMap and switchMap in RxJS&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;netbasal.com&#x2F;javascript-observables-under-the-hood-2423f760584&quot;&gt;JavaScript — Observables Under The Hood&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;github.com&#x2F;zenparsing&#x2F;zen-observable&quot;&gt;Github repository - zen-observable&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https:&#x2F;&#x2F;dev.to&#x2F;supermanitu&#x2F;understanding-observables&quot;&gt;Understanding Observables&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
</feed>
