<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>David Berri's Blog</title>
        <link>https://dberri.com/feed</link>
        <description>Software development tips 👨🏻‍💻</description>
        <lastBuildDate>Sat, 24 Sep 2022 13:12:37 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/nuxt-community/feed-module</generator>
        <language>en</language>
        <item>
            <title><![CDATA[How to look for a branch in git]]></title>
            <link>https://dberri.com/how-to-look-for-a-branch-in-git</link>
            <guid>https://dberri.com/how-to-look-for-a-branch-in-git</guid>
            <pubDate>Fri, 31 Jan 2020 22:09:00 GMT</pubDate>
            <description><![CDATA[Your coworker created a new feature and asked you to review it. How to look for a branch that someone else created and pushed to the remote repository using Git? ]]></description>
            <content:encoded><![CDATA[<p>Your coworker created a new feature and asked you to review it. How to look for a branch that someone else created and pushed to the remote repository using Git? It's as simple as running the command:</p><pre><code class="language-bash">git fetch origin</code></pre><p>(Assuming that the remote repository is called "origin")<br>Then, you can <em>checkout</em> the branch the the other person was working on with:</p><pre><code class="language-bash">git checkout new-feature</code></pre><p>(Assuming the name of the new branch é “new-feature” - it's going to show up once you run the first command).</p><p>If you need to list all the branches that were pulled from the remote repository, you can use <code>git branch</code>.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to use git cherry-pick]]></title>
            <link>https://dberri.com/how-to-use</link>
            <guid>https://dberri.com/how-to-use</guid>
            <pubDate>Fri, 14 Feb 2020 22:26:00 GMT</pubDate>
            <description><![CDATA[How to apply only changes introduced by one or a few commits not having to merge the entire branch]]></description>
            <content:encoded><![CDATA[<p>This command is extremely useful when you need only one or few commits from one branch in another branch, but don't want or cannot <code>merge</code>.</p><p>Let'' say that in your application you use the branch <code>master</code> to deploy to production and develop new code in another branch, say <code>dev</code>. You implement a few features, but realize you need one of them needs to be merged to <code>master</code> soon and cannot wait for you to finish whatever you were developing in the <code>dev</code> branch.</p><p>You can use the following git commands:</p><pre><code class="language-Bash"># Find and copy the commit hash that you want to send to another branch
git log

# change to the branch where this commit is needed
git checkout master

# execute the cherry pick using the hash you copied earlier
git cherry-pick bbb70c579ce1382af60eebacde95c2aef6676abf</code></pre><p>If there are any conflicts, resolve them and commit the new code. Done.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Smarter Vue Watchers]]></title>
            <link>https://dberri.com/smarter-vue-watchers</link>
            <guid>https://dberri.com/smarter-vue-watchers</guid>
            <pubDate>Sat, 08 Feb 2020 22:41:00 GMT</pubDate>
            <description><![CDATA[Simplifying Vue components' code and making them more legible]]></description>
            <content:encoded><![CDATA[<p>In some Vue projects, you might need to load data from an API as soon as the component is instantiated and load new data once a value or property of the component is changed. For example, when you use a search input field. I've done that several times, and always used the following pattern:</p><pre><code class="language-JavaScript">// Inside a Vue component
created() {
  this.search()
},
watch: {
  searchInput() {
    this.search()
  }
}</code></pre><p>And that's ok, it works well. But then I found a simpler, more elegant way to do the same thing:</p><pre><code class="language-JavaScript">// Inside a Vue component
watch: {
  searchInput: {
    handler: 'search',
    immediate: true
  }
}</code></pre><p>This code can replace the previous one entirely. That works because a <em>watcher</em> can receive an object, instead of a function, and this object contains a <strong>handler</strong>, which is the method to be executed when the <em>watcher</em> is notified, and the property <strong>immediate</strong>, which ensures that this method is also executed as soon as the component is in the lifecycle hook <code>created</code>.</p><p>This tip was extracted from a video of a talk by Chris Fritz, one of the members of Vue.js' <em>core team</em>. Here's the video:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://www.youtube.com/watch?v=7lpemgMhi0k"><div class="kg-bookmark-content"><div class="kg-bookmark-title">7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz</div><div class="kg-bookmark-description">There’s an astounding amount of power packed away in Vue, despite its small size. The official guide provides a gentle learning path and the API is thorough,...</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://www.youtube.com/yts/img/favicon_144-vfliLAfaB.png"><span class="kg-bookmark-publisher">YouTube</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://i.ytimg.com/vi/7lpemgMhi0k/maxresdefault.jpg"></div></a></figure>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to sort an array by date in JavaScript]]></title>
            <link>https://dberri.com/how-to-order-an-array-by-date</link>
            <guid>https://dberri.com/how-to-order-an-array-by-date</guid>
            <pubDate>Sun, 09 Feb 2020 22:42:00 GMT</pubDate>
            <description><![CDATA[Sort arrays by date and do not bring external packages and more complexity to your project]]></description>
            <content:encoded><![CDATA[<p>We can find this problem in our daily lives working with JavaScript, and of course we can use libraries that abstract this away for us. Nevertheless, it can be interesting to understand how to implement this feature and not rely on third party packages that might bring more complexity to your project.</p><p>Let's say you have an array of dates in a string format (e.g. 'yyyy-mm-dd') and you would like to sort it. With JavaScript, a good approach is to transform these dates in <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"> objects</a>, and then use the <em>Array</em> method <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a></code>:</p><pre><code class="language-JavaScript">function fromStringToDate(date) {
 	// transforms string in array, splitting at the “-“
	const arrDate = date.split(“-“)
	const day = arrDate[2] ;
	// JavaScript represents the months starting at “0”
 	// but that's content for another post :)
 	const month = arrDate[1] - 1;
 	const year = arrDate[0];
    
    return new Date(year, month, day);
}

function compareDates(date1, date2) {
	if (date1 &gt; date2) {
        return -1;
    } else if (date1 &lt; date2) {
        return 1;
    } else {
        return 0;
    }
    // This code could be simplified to a one-liner:
    // return (date1 &gt; date2) ? -1 : ((date1 &lt; date2) ? 1 : 0)
}

const dates = [
	“2020-02-01”,
	“2020-01-05”,
	“2020-03-20”
];

dates
	.map(fromStringToDate)
	.sort(compareDates)

// [
//   Fri Mar 20 2020 00:00:00 GMT-0300 (-03),
//   Sat Feb 01 2020 00:00:00 GMT-0300 (-03),
//   Sun Jan 05 2020 00:00:00 GMT-0300 (-03)
// ]
</code></pre><p>If you want to invert the order, you just need to change the operator <code>&lt;</code> to <code>&gt;</code> and vice-versa.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to watch nested object properties in Vue]]></title>
            <link>https://dberri.com/como-observar-propriedades-de-objetos-no-vue</link>
            <guid>https://dberri.com/como-observar-propriedades-de-objetos-no-vue</guid>
            <pubDate>Fri, 21 Feb 2020 13:02:00 GMT</pubDate>
            <description><![CDATA[How to watch properties nested in JavaScript objects in a simple and elegant way]]></description>
            <content:encoded><![CDATA[<p>When it's necessary to react to a change of state in a more generic way, we can use <a href="https://vuejs.org/v2/guide/computed.html#Watchers">Vue's watchers</a>. They work quite well for most data structures, but it can cause some confusion when you're watching arrays or objects with nested properties. For example:</p><pre><code class="language-JavaScript">export default {
	data() {
    	return {
        	price: 100.0
        }
    },
    watch: {
    	price: function (newPreco, oldPrice) {
        	// whenever the car price changes, this function will be executed
        }
    }
}</code></pre><p>In this case, since <code>price</code> is a simple number, everytime it changes somewhere in the component, the function <code>price</code> inside the <code>watch</code> block will be executed. Now, let's say the price we want to keep watching is inside an object, like in the following example:</p><pre><code class="language-JavaScript">export default {
	data() {
    	return {
        	car: {
                color: 'black',
        		price: 100.0
            }
        }
    },
    watch: {
    	car: function (newCar, oldCar) {
	        // whenever the price changes, this function will be executed
            // or will it?
        }
    }
}</code></pre><p>Now, even change the name of the watcher to <code>car</code>, if the car price changes, the function <strong>won't</strong> be executed. Well, in this case Vue has a "trick up its sleeve". You can define the watcher as an object that receives a <code>handler</code> function and a property called <code>deep</code> which will watch for changes in the nested properties of the object, like this:</p><pre><code class="language-JavaScript">export default {
	data() {
    	return {
        	car: {
                color: 'black',
        		price: 100.0
            }
        }
    },
    watch: {
    	car: {
        	handler: function (newCar, oldCar) {
                // whenever the car price changes, this function will be executed
            },
            deep: true
        }
    }
}</code></pre><p>Now, every time the car price changes, the watcher function will run.</p><p>We solved a problem, but introduced another: if any other property in the car object changes, for instance the <code>color</code>, the watcher will execute that function.</p><p>For a long time I thought there wasn'' much to do regarding this. I would usually check if the <code>newCar</code> price was  different than <code>oldCar</code> price and execute whatever I needed. But thanks to a tweet, I found out there was a much much simpler way to do this:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://twitter.com/MichaelThiessen/status/1197611635143254031"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Michael Thiessen on Twitter</div><div class="kg-bookmark-description">“🔥 You can watch nested values directly in @vuejs by using dot notation as a string. This avoids watching an object deeply and ignoring everything but one specific value. It also communicates your intent better because you don’t *actually* care about the whole object.”</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://abs.twimg.com/icons/apple-touch-icon-192x192.png"><span class="kg-bookmark-author">MichaelThiessen</span><span class="kg-bookmark-publisher">Twitter</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://pbs.twimg.com/media/EJ7FbodWsAAZADE.png:large"></div></a></figure><p>Yes, we can simplify the previous code like this:</p><pre><code class="language-JavaScript">export default {
	data() {
    	return {
        	car: {
                color: 'black',
        		price: 100.0
            }
        }
    },
    watch: {
    	'car.price': function (newPrice, oldPrice) {
        	// now, only when the car price changes, it will execute the function
        }
    }
}</code></pre><p>And besides, it's clear which property you want to watch in the car object.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[For Loops in JavaScript]]></title>
            <link>https://dberri.com/for-loops-in-javascript</link>
            <guid>https://dberri.com/for-loops-in-javascript</guid>
            <pubDate>Fri, 20 Mar 2020 16:37:00 GMT</pubDate>
            <description><![CDATA[JavaScript has at least three distinct ways of defining "for" loops and they can be used to solve different problems and make your code more legible.]]></description>
            <content:encoded><![CDATA[<p>JavaScript has at least three distinct ways of defining "for" loops:</p><p><code>for</code>: Runs a block of code a number of times;<br><code>for/in</code>: Iterates over properties of a given object;<br><code>for/of</code>: Iterates over the values of <em>iterable</em> objects<em>;</em></p><h2 id="for">For</h2><p>This loop repeats the execution of your block of code until a specified condition becomes false.</p><p>Let's check the syntax of this simpler loop:</p><pre><code class="language-JavaScript">for (statement 1; statement 2; statement 3) {
  // block of code to be executed
}
</code></pre><p><em>Statement 1</em> is executed only once before your block of code runs. Usually we define the loop's initial condition, but this is an optional parameter and can be defined before the loop statement if needed.</p><p><em>Statement 2</em> defines the condition for the execution of the code block. Here you end up defining how many times the code block will run. This parameter is also optional, though if omitted, it's necessary to add a <strong>break</strong> inside your code block, otherwise the loop will never finish and the browser will crash.</p><p><em>Statement 3</em> is executed once for each execution <strong>after</strong> your code block runs. As you might have guessed by now, this parameter is also optional.</p><pre><code class="language-JavaScript">const languages = [‘javascript’, ‘python’, ‘php’];

for (let i = 0; i &lt; languages.length; i++) { 
  console.log(`${i}: ${languages[i]}`)
}

// expected output:
// “0: javascript”
// “1: python”
// “2: php”
</code></pre><h2 id="for-in">For/in</h2><p>This loop iterates over an object's properties (keys).</p><pre><code class="language-JavaScript">const js = { name: ”JavaScript”, author: ”Brendan Eich”, year: 1995 };

for (const prop in js) {
  console.log(`${prop}: ${js[prop]}`);
}

// expected output:
// “name: JavaScript”
// “author: BrendanEich”
// “year: 1995”
</code></pre><p>The same could be done using a simple "for" loop using <code>Object.keys</code>, which extracts the properties of an object to an array:</p><pre><code class="language-JavaScript">const js = { name: ”JavaScript”, author: ”Brendan Eich”, year: 1995 };
const properties = Object.keys(js);

for (i = 0; i &lt; properties.length; i++) { 
  const prop = properties[i]
  console.log(`${i} ${prop}: ${js[prop]}`);
}

// expected output:
// “0 name: JavaScript”
// “1 author: Brendan Eich”
// “2 year: 1995”
</code></pre><h2 id="for-of">For/of</h2><p>This runs the loop over the values of <em>iterable</em> objects. A few examples of <em>iterable</em> objects in JS are Arrays, Strings, Maps, Sets and NodeLists. The syntax is as follows:</p><pre><code class="language-JavaScript">for (*variable* of *iterable object*) {
  // code block to be executed
}
</code></pre><p>Here's an example like the previous:</p><pre><code class="language-JavaScript">const languages = [{ name: ”JavaScript” }, { name: ”Python” }, { name: ”PHP” }];

for (const lang of languages) {
  console.log(lang);
}

// expected output:
// { name: ”JavaScript” }
// { name: ”Python” }
// { name: ”PHP” }

</code></pre><p>Both <code>for/in</code> and <code>for/of</code> are very useful, each being used in their own way can make your code more legible, in my opinion. Hopefully this tip has been useful for you :)</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Const, Let and Var]]></title>
            <link>https://dberri.com/const-let-and-var</link>
            <guid>https://dberri.com/const-let-and-var</guid>
            <pubDate>Fri, 28 Feb 2020 16:48:00 GMT</pubDate>
            <description><![CDATA[There are three ways of declaring a variable in JavaScript: var, let or const. Each one has their own peculiarities. Learn how and where each one is used.]]></description>
            <content:encoded><![CDATA[<p>I like to imagine variables like they were drawers with labels. They are used to store data. There are three ways of declaring a variable in JavaScript: var, let or const.</p><h2 id="scope">Scope</h2><p>The scope is the portion of code where the variable is visible. In JavaScript, every function has a scope.</p><h2 id="var">var</h2><p>Until ES2015 spec, this was the only way of declaring a variable in JavaScript.</p><pre><code class="language-JavaScript">var cat = ‘meaw’
</code></pre><p><code>var</code> allows one to “redeclare” the same variable infinite time, always overwriting the previews declaration:</p><pre><code class="language-JavaScript">var cat = ‘meaw’
console.log(cat) // meaw

var cat = ‘oof oof’
console.log(gato) // oof oof
</code></pre><h2 id="let">let</h2><p><code>let</code> works almost the same way as <code>var</code>, but it uses the local scope, not global. That means that if the variable is declared using <code>let</code> inside a function, for example, it will not be available outside that function. The same goes for blocks like <code>if</code>, <code>for</code>, <code>while</code>, etc...</p><pre><code class="language-JavaScript">function bark() {
   let dog = ‘oof oof’
   console.log(dog)
}

latir() // oof oof

console.log(dog) // ReferenceError: Can't find variable: dog
</code></pre><h2 id="const">const</h2><p><code>const</code> uses the same scope rules as <code>let</code>, though it does not allow for redeclaration.</p><pre><code class="language-JavaScript">const x = 10
x = 11 // TypeError: Attempted to assign to readonly property.
</code></pre><p>It is possible to declare an array or object with <code>const</code> and later assign or reassign values that they store:</p><pre><code class="language-JavaScript">const obj = { a: 1 }
obj.a = 2
console.log(obj) // { a: 2 }

const arr = [1]
arr.push(2)
console.log(arr) // [1, 2]
</code></pre><p>Using <code>let</code> and <code>const</code> and avoiding <code>var</code> can help you code less bugs related to scope. If you use any linter like <em>eslint</em>, it's posible that it already points things like this to you.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Local Storage]]></title>
            <link>https://dberri.com/local-storage-2</link>
            <guid>https://dberri.com/local-storage-2</guid>
            <pubDate>Sat, 11 Apr 2020 23:32:51 GMT</pubDate>
            <description><![CDATA[A type of web storage that enables JavaScript applications to access data stored directly in the browser with no expiration date.]]></description>
            <content:encoded><![CDATA[<p>With more logic and data manipulation brought to the frontend, some data storage problems start to arise. Among them, storing data betwen page reloads or sessions. This is a very common problem in SPAs (Single Page Applications), where you may have several data manipulations happening in between page reloads or would have to keep downloading the same data over and over from the server. There are cases where it's possible to minimize the user's wait time displaying info that is stored right in the browser using LocalStorage.</p><p>LocalStorage is a type of web storage that allows JavaScript applications to access data stored in the browser with no expiration date.</p><p>This functionality is available in the <code>window</code> object and you can access it like this:</p><pre><code class="language-JavaScript">const myStorage = window.localStorage
// or
const myStorage = localStorage
</code></pre><p>This will return a <a href="https://developer.mozilla.org/docs/Web/API/Storage">Storage</a> object. This object has the property <code>length</code> that returns an integer representing the quantity of items stored in the object and it also has the following methods:</p><ul><li>setItem</li><li>getItem</li><li>key</li><li>removeItem</li><li>clear</li></ul><h2 id="setitem">setItem</h2><p>It accepts the parameters <em>key</em> and <em>value</em> that will be stored (or updated if that particular key already has some data associated):</p><pre><code class="language-JavaScript">myStorage.setItem(“name”, “David”)
</code></pre><p>In this case, "name" is the <em>key</em> and "David" is the <em>value</em>.</p><blockquote>Important: If you want to store arrays or objects - something that will probably be more common in an application - first you will have to transform them into strings, using, for instance, JSON's <code>stringify</code> method: </blockquote><pre><code class="language-JavaScript">const myBrowser = {
  name: “Chrome”,
  openTabs: 3,
  consumedMemory: 512e9
}

myStorage.setItem(“browser”, JSON.stringify(myBrowser))
</code></pre><h2 id="getitem">getItem</h2><p>You pass the <em>key</em> to this method and it returns what you stored with that key, or <em>null</em> if it does not find anything associated.</p><pre><code class="language-JavaScript">myStorage.getItem(“name”)

// expected output
// “David”
</code></pre><p>If you stored an object or array like in the previous example, you will notice that <code>getItem</code> returns a string representation of the object, so you should use JSON's <code>parse</code> method to turn it into a "real" object again:</p><pre><code class="language-JavaScript">const myBrowser = myStorage.setItem(“browser”)
console.log(myBrowser)

// expected ouput
//  “{\”name\":\"Chrome\",\"openTabs\":3,\"consumedMemory\":512000000000}"

console.log(JSON.parse(myBrowser))

// expected output
// {
//    name: "Chrome",
//    openTabs: 3,
//    consumedMemory: 512000000000
// }
</code></pre><h2 id="key">key</h2><p>This method accepts an integer as a parameter and with that, it returns a key if it is stored in that position or <em>null</em> if there's nothing there. It works more or less like accessing positions in an array. In our examples, we had stored two items in LocalStorage: <em>name</em> and <em>browser</em>:</p><pre><code class="language-JavaScript">const position0 = myStorage.key(0)
const position1 = myStorage.key(1)
const position2 = myStorage.key(2)

console.log(`${position0}, ${position1}, ${position2}`)

// expected output
// name, browser, null
</code></pre><p>This method is useful if you need to iterate over the keys inside a loop, for instance.</p><h2 id="removeitem">removeItem</h2><p>You pass a <em>key</em> to this method and it removes the associated value:</p><pre><code class="language-JavaScript">myStorage.removeItem(“name”)
</code></pre><p>Now,  <code>getItem(“name”)</code>, will return <em>null</em> and <code>key(0)</code> becomes: “browser”.</p><h2 id="clear">clear</h2><p>Last but not least, we have the method <code>clear</code> which completely clears the application's LocalStorage, removing all of its keys.</p><pre><code class="language-JavaScript">myStorage.clear()
console.log(myStorage.length)

// expected output
// 0
</code></pre><h2 id="limitations">Limitations</h2><p>It's important to note that:</p><ul><li>You should not store sensitive information or user data in LocalStorage</li><li>It is not a replacement for traditional databases, since data is only available in the browser</li><li>It has a 5mb limit in most browsers</li></ul><p>With this introduction to LocalStorage, you will surely be able to create more powerful applications. I hope this has inspired you to use it in your apps and if you want an example to start, take a look <a href="https://github.com/dberri/todo-vue/blob/master/src/store/index.js">here</a> in my GitHub. It's a very simple task manager written in Vue.js and uses LocalStorage to persist data.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Cleaning up merged git branches]]></title>
            <link>https://dberri.com/cleaning-up-git-branches</link>
            <guid>https://dberri.com/cleaning-up-git-branches</guid>
            <pubDate>Mon, 04 May 2020 19:10:47 GMT</pubDate>
            <description><![CDATA[If you use any git workflow similar to git flow, then you probably have many merged branches. Learn how to remove them quickly.]]></description>
            <content:encoded><![CDATA[<p>If you use any git workflow such as <a href="https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow">git flow</a>, you end up with several branches like <em>feature, release </em>and<em> hotfix </em>that become stale as they are merged with other branches<em>.</em></p><p>So, when you need to look for a specific branch using the <code>git branch</code> command, you could waste time skimming through a big list of branch names.</p><p>One way to handle that is to use <code>git branch --merged</code>, which lists only the branches that have already been merged, and then copy the name of each one and delete them with <code>git branch -d branch-name</code>. That works fine if you do that every time you merge a branch, but if you're like me, you'll quickly forget to do this, and once you realize it, you'll have several branches on the list again.</p><p>Now, to remove all merged branches at once, we can use the following command:</p><pre><code class="language-bash">git branch --merged | egrep -v "(^\*|master|develop)" | xargs git branch -d</code></pre><p>This will remove all branches that have been merged with exception of <em>master</em> and <em>develop</em>. You can even create an alias to in your shell environment to not have to type or copy that every time you need it.</p><blockquote>Careful with the <code>-d</code> flag. If you change it to  <code>-D</code> (capital case), you might end up removing unmerged branches and losing hours of work</blockquote>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to create a Rest API with Laravel]]></title>
            <link>https://dberri.com/how-to-create-a-rest-api-with-laravel</link>
            <guid>https://dberri.com/how-to-create-a-rest-api-with-laravel</guid>
            <pubDate>Sat, 16 May 2020 18:02:27 GMT</pubDate>
            <description><![CDATA[Laravel makes it quick to get up and running with Rest APIs that you can use to feed data to mobile apps, javascript applications or other applications. In this post, I'll show you how easy it is to do it.]]></description>
            <content:encoded><![CDATA[<p>Laravel makes it quick to get up and running with Rest APIs that you can use to feed data to mobile apps, javascript applications or other applications. In this post, I'll show you how easy it is to do it.</p><p>To make it simple, let's create an API that only delivers content about books and their authors. We're not going to add "create" and "update" functionality for now.</p><h2 id="setup">Setup</h2><p>We can start by creating a new Laravel application. In your terminal execute the command: <code>laravel new books-api</code>. If you don't have Laravel installed globally, you can use Composer:</p><pre><code class="language-php">composer create-project --prefer-dist laravel/laravel books-api</code></pre><blockquote>Keep in mind that by the time of this article, I'm using Laravel version 7.10.3</blockquote><p>That will create a new folder <code>books-api</code>, you can go inside and edit the <code>.env</code> file. We need to setup the database access for the application:</p><pre><code class="language-bash">DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=&lt;YOUR-DB-NAME&gt;
DB_USERNAME=&lt;YOUR-DB-USER&gt;
DB_PASSWORD=&lt;YOUR-DB-USER-PASSWORD&gt;</code></pre><p>To make sure it connects correctly, you can run <code>php artisan migrate</code>. The application already ships with database migrations for the User model. If no errors popped up, you're good to go.</p><h2 id="models-migrations-and-controllers">Models, Migrations and Controllers</h2><p>We will need at least a model for books and one for authors, so let's create them using Artisan's command: <code>php artisan make:model Author -mcr</code>.</p><p>This command should create three files:</p><ul><li><code>app/Author.php</code> : That's our model</li><li><code>app/Http/Controllers/AuthorController.php</code> : A resource controller (created with the help of the <code>cr</code> flag)</li><li>and <code>database/migrations/XXXX_create_authors_table.php</code>: That's the database migration created with the help of the <code>m</code> flag in the command.</li></ul><p>Let's start with the migration. Go to the newly created file and add the following code:</p><pre><code class="language-PHP">public function up()
{
    Schema::create('authors', function (Blueprint $table) {
        $table-&gt;id();
        $table-&gt;string('name'); // we add this line here
        $table-&gt;timestamps();
    });
}</code></pre><p>Whatever fields you add here will be added to the authors table in the database. To learn what are the available methods, check out <a href="https://laravel.com/docs/7.x/migrations#creating-columns">Laravel's documentaton</a>.</p><p>Now let's do the same for books: <code>php artisan make:model Book -mcr</code>.</p><p>Then go to <code>database/migrations/XXXXX_create_books_table.php</code> and add the following fields inside the <code>up</code> function:</p><pre><code class="language-PHP">public function up()
{
    Schema::create('books', function (Blueprint $table) {
        $table-&gt;id();
        $table-&gt;foreignId('author_id');
        $table-&gt;string('title');
        $table-&gt;decimal('price', 6, 2)-&gt;nullable();
        $table-&gt;timestamps();

        $table-&gt;foreign('author_id')
            -&gt;references('id')
            -&gt;on('authors')
            -&gt;onDelete('cascade');
    });
}</code></pre><p>Here we are also adding a reference to the author who wrote the book using a foreign key. After you add any other fields you want, you run the migrations with: <code>php artisan migrate</code>. If you got no errors in the console, good job! Now let's keep going.</p><p>We also need to create a relationship between authors and books in the models:</p><p>app/Author:</p><pre><code class="language-PHP">class Author extends Model
{
    public function books()
    {
        return $this-&gt;hasMany('App\Book');
    }
}</code></pre><p>app/Book:</p><pre><code class="language-PHP">class Book extends Model
{
    public function author()
    {
        return $this-&gt;belongsTo('App\Author');
    }
}</code></pre><p>With these, we can call the relationships as properties from each model:</p><pre><code class="language-PHP">$book = Book::first(); // Book instance
$book-&gt;author; // Author instance

$author = Author::first(); // Author instance
$author-&gt;books; // Collection of Books</code></pre><p>If you call them using the "method" form, it will return you a QueryBuilder instance, and you can use to chain other methods, like:</p><pre><code class="language-php">$author = Author::first(); // Author instance
$author-&gt;books()
	-&gt;where('published', true)
    -&gt;get(); // Collection of Books</code></pre><h2 id="factories-and-seeders">Factories and Seeders</h2><p>Now that we have the database setup, we need some data to test the API. In the real world, either you will already have the data, or maybe you can create it manually. I like to using factories and seeders, because it's less work and it's useful for automated testing. Let's create a factory for authors and for books:</p><pre><code class="language-bash">php artisan make:factory AuthorFactory -m Author
Factory created successfully.

php artisan make:factory BookFactory -m Book
Factory created successfully.</code></pre><p>Now if you go to the <code>database/factories</code> folder, you will see both files created.</p><p>In AuthorFactory, let's use the <a href="https://github.com/fzaninotto/Faker">faker library</a> to create random Author data:</p><pre><code class="language-php">$factory-&gt;define(Author::class, function (Faker $faker) {
    return [
        'name' =&gt; $faker-&gt;name,
    ];
});</code></pre><p>And we do the same for books, with the catch that it will receive the author_id as a parameter:</p><pre><code class="language-php">$factory-&gt;define(Book::class, function (Faker $faker, $author_id) {
    return [
        'author_id' =&gt; $author_id,
        'title' =&gt; $faker-&gt;sentence,
        'price' =&gt; $faker-&gt;randomFloat(2, 5, 100)
    ];
});</code></pre><p>Now, we create a seeder for Authors:</p><pre><code class="language-bash">php artisan make:seeder AuthorTableSeeder
Seeder created successfully.
</code></pre><p>In that seeder (which is in <code>database/seeders/AuthorTableSeeder</code>) we create 5 authors and 5 books for each author using the followinf code:</p><pre><code class="language-php">public function run()
    {
        factory(App\Author::class, 5)-&gt;create()
            -&gt;each(function ($author) {
                factory(App\Book::class, 5)-&gt;create([
                    'author_id' =&gt; $author-&gt;id
                ]);
            });
    }</code></pre><p>It calls the factory for the Author model and for each one created, it creates 5 books using basically the same syntax. Now, to finish it up, we call this seeder in the DatabaseSeeder class:</p><pre><code class="language-php">public function run()
    {
        $this-&gt;call(AuthorTableSeeder::class);
    }</code></pre><p>With all migrations, factories and seeders in place, we run <code>php artisan migrate --seed</code>. You should see a list of all the migrations and seeders run.</p><h2 id="routes">Routes</h2><p>We need routes to access the data, so we can go to <code>routes/api.php</code> and add them there. Routes added to that file will already have a <code>/api</code> prepended to the route, so keep that in mind. I want to see a list of authors, a list of books and some details of a specific book. So, I can start by adding those three routes at the end of the file:</p><pre><code class="language-PHP">Route::resource('authors', 'AuthorController')-&gt;only('index');
Route::resource('books', 'BookController')-&gt;only(['index', 'show']);</code></pre><p>Now, since we created a resource controller in the beginning of this tutorial, we can now use the Route's <code>resource</code> static method. You pass as arguments the name of the route and a controller to map each of these seven routes:</p><ul><li>Index</li><li>Create</li><li>Store</li><li>Show</li><li>Edit</li><li>Update</li><li>Delete </li></ul><p>If you go to the controllers, you will see that all of those methods are in the there. Since we're developing a Rest API, we would not even need a route for create and edit, because those are meant to return a view with the forms for creating and editing the resource, respectively. As stated before we only need a list of authors, a list of books, and details of a specific book, so we use the  <code>only()</code> method to limit the resource routes.</p><p>Of course, we didn't need all of that boiler plate code, so might as well create each of those routes and methods from scratch, but I wanted to show you these methotds, because they save you time in your day-to-day.</p><p>Now, let's implement <code>index()</code> in the AuthorController, so go to <code>app/Http/Controllers/AuthorController.php</code> and add this code:</p><pre><code class="language-PHP">public function index()
{
    $authors = Author::all();

    return response()-&gt;json($authors);
}</code></pre><p>Since we only have 5 authors (created by the seeder, remember?), we would not even need pagination, so let's query all the authors.</p><p>In BookController we need to implement <code>index()</code> for the list of books and <code>show()</code> for the details of the specific book:</p><pre><code class="language-php">public function index()
{
    $books = Book::with('author')-&gt;paginate(10);

    return response()-&gt;json($books);
}

public function show(Book $book)
{
    return response()-&gt;json($book);
}</code></pre><p>The <code>with()</code> queries the relationship and already returns a book with its author. </p><blockquote>The string you pass to this method must be equal to the name of the method you gave to the relationship in the Book model.</blockquote><p>Since we have at least 25 books, let's create a pagination query 10 books every time.</p><p>In the case of <code>show()</code>, Laravel already resolves the book id passed to the route and gives us the Book instance as an argument.</p><p>Now if you run Laravel's server using <code>php artisan serve</code>, you can access <code>http://localhost:8000/api/authors</code> or <code>http://localhost:8000/api/books</code> in your browser or in app like <a href="http://insomnia.rest">Postman</a> or <a href="http://insomnia.rest">Insomnia</a> and you will get a JSON response like this:</p><pre><code class="language-JSON">{
  "current_page": 1,
  "data": [
    {
      "id": 1,
      "author_id": 6,
      "title": "Inventore voluptatem iure veniam quis nesciunt aut.",
      "price": "42.19",
      "created_at": "2020-05-16T17:39:22.000000Z",
      "updated_at": "2020-05-16T17:39:22.000000Z",
      "author": {
        "id": 6,
        "name": "Brandyn Gorczany",
        "created_at": "2020-05-16T17:39:22.000000Z",
        "updated_at": "2020-05-16T17:39:22.000000Z"
      }
    },
    ...
  ],
  "first_page_url": "http:\/\/localhost:8000\/api\/books?page=1",
  "from": 1,
  "last_page": 3,
  "last_page_url": "http:\/\/localhost:8000\/api\/books?page=3",
  "next_page_url": "http:\/\/localhost:8000\/api\/books?page=2",
  "path": "http:\/\/localhost:8000\/api\/books",
  "per_page": 10,
  "prev_page_url": null,
  "to": 10,
  "total": 25
}</code></pre><p>If you want to access details of a book,  just go to <code>http://localhost:8000/api/books/1</code> where "1" is the id of the book you want to access. This will return this response:</p><pre><code class="language-JSON">{
  "id": 1,
  "author_id": 6,
  "title": "Inventore voluptatem iure veniam quis nesciunt aut.",
  "price": "42.19",
  "created_at": "2020-05-16T17:39:22.000000Z",
  "updated_at": "2020-05-16T17:39:22.000000Z"
}</code></pre><p>So, there you have it. It doesn't take too much time to create a Rest API with Laravel, as a bonus you already have factories and seeders setup to use in automated tests.</p><p>Stay tuned because in the next posts you'll learn how to authenticate in the API using Laravel Passport and how to use Eloquent's API Resources to fine tune what you want to display in each route.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Let’s build a tab navigation with Alpine.js]]></title>
            <link>https://dberri.com/lets-build-a-tab-navigation-with-alpine-js</link>
            <guid>https://dberri.com/lets-build-a-tab-navigation-with-alpine-js</guid>
            <pubDate>Sat, 06 Jun 2020 14:06:14 GMT</pubDate>
            <description><![CDATA[I like to think of it as a lighter and lower cost Vue.js mixed with TailwindCSS. The syntax is very similar to Vue.js and you sprinkle it in your HTML just like TailwindCSS.]]></description>
            <content:encoded><![CDATA[<p>From the <a href="https://github.com/alpinejs/alpine">docs</a>: it is</p><blockquote>a rugged, minimal framework for composing JavaScript behavior in your markup.</blockquote><p>I like to think of it as a lighter and lower cost Vue.js mixed with TailwindCSS. The syntax is very similar to Vue.js and you sprinkle it in your HTML just like TailwindCSS.</p><p>I found out about Alpine.js while following <a href="https://twitter.com/calebporzio">Caleb Porzio</a>, an active member of the Laravel community. At the time I saw the Github link and to be honest didn’t care too much or was skeptical about it: “Ok, it’s just another JS framework, next week a new one comes out”.</p><p>Then I heard him talk about it in his podcast <a href="https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=&amp;ved=2ahUKEwj44_Shq-3pAhUiLbkGHdsjA8IQFjALegQIAxAB&amp;url=https%3A%2F%2Ftwitter.com%2Fnoplanstomerge%3Flang%3Den&amp;usg=AOvVaw3qzV1bd474cK4uJJUiI4ny">No Plans To Merge</a> and it started to spark my interest. I took another look at the docs and was like: “well, I could just use Vue.js or plain JS, no need to do it with something else”. It was not until I heard him and <a href="https://twitter.com/adamwathan">Adam Wathan</a> discuss it in the <a href="https://www.fullstackradio.com/episodes/132">Full Stack Radio podcast</a> that I finally took Alpine.js for a ride.</p><p>In the episode, they discuss the use cases for the framework and it made sense to me. Here’s what made me want to use it: let’s say you are building a website that does not need too much JavaScript. There’s only one thing here and there, like a modal, a dropdown menu or tabs navigation. Of course, you could just write the JavaScript for that and don’t worry about it. It will be a bit of a pain to switch contexts and think about the imperative way of doing it with JS (get elements, toggling classes, etc…) or you could add Vue.js and create a component and all that. Seems a little overkill for just a simple interactive element. Or you could use Alpine.js and do it in a declarative way all in the HTML.</p><p>In the documentation, the author states that the framework’s syntax is entirely borrowed from Vue.js, so you will find things like <code>x-on:click</code>, <code>x-bind</code>, <code>x-show</code>, <code>x-for</code> which are basically the same as <code>v-on:click</code>, <code>v-bind</code> and so on. If you know Vue.js, it’s a breeze to learn Alpine.js, but even if you don’t, I think it is simple enough to pick up and understand the concepts.</p><h2 id="what-are-we-going-to-build">What are we going to build?</h2><figure class="kg-card kg-image-card"><img src="/content/images/2020/06/tabs-navigation.gif" class="kg-image" alt="Tab navigation representation"></figure><p>It's a simple tab navigation component. It's not the most exciting thing to do with JS, but it will be great to show you what Alpine.js can do. We are going to add TailwindCSS just so we don't have to worry too much about CSS and focus on Alpine's features. We get the framework form a CDN, so it's as easy as pasting the link in the HTML and be ready to go. You can go to <a href="https://github.com/dberri/alpinejs-demo">this Github repository</a> to get the code and follow along, or use the develop branch to get the final result.</p><p>The initial HTML body looks like this:</p><pre><code class="language-HTML">&lt;div class="bg-gray-100 text-gray-800"&gt;
    &lt;nav class="bg-gray-300"&gt;
      &lt;ul class="flex"&gt;
        &lt;li class="px-4 py-2 bg-gray-100"&gt;
          &lt;a href="#option-1"&gt;Option 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="px-4 py-2"&gt;
          &lt;a href="#option-2"&gt;Option 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="px-4 py-2"&gt;
          &lt;a href="#option-3"&gt;Option 3&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;

    &lt;div class="p-4"&gt;
      &lt;h2 class="text-xl mb-4"&gt;Here, you have the content of &lt;strong&gt;Option 1&lt;/strong&gt;&lt;/h2&gt;
      &lt;p class="mb-2"&gt;Qui ipsorum...&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="p-4"&gt;
      &lt;h2 class="text-xl mb-4"&gt;Here, &lt;strong&gt;Option 2&lt;/strong&gt; contents are shown&lt;/h2&gt;
      &lt;p class="mb-2"&gt;Qui ipsorum...&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="p-4"&gt;
      &lt;h2 class="text-xl mb-4"&gt;And here, only &lt;strong&gt;Option 3&lt;/strong&gt; contents should be displayed&lt;/h2&gt;
      &lt;p&gt;Qui ipsorum...&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre><p>If you open this with your browser, the styles will be there, but all the content (for all tabs) are shown at the same time. Now let's sprinkle some Alpine.js to only show a single tab's content:</p><pre><code class="language-HTML">&lt;div class="bg-gray-100 text-gray-800" x-data="{ selected: 'option-1' }"&gt;
    &lt;nav class="bg-gray-300"&gt;
      &lt;ul class="flex"&gt;
        &lt;li class="px-4 py-2 bg-gray-100"&gt;
          &lt;a href="#option-1" x-on:click="selected = 'option-1'"&gt;Option 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="px-4 py-2"&gt;
          &lt;a href="#option-2" x-on:click="selected = 'option-2'"&gt;Option 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="px-4 py-2"&gt;
          &lt;a href="#option-3" x-on:click="selected = 'option-3'"&gt;Option 3&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;

    &lt;div x-show="selected === 'option-1'" class="p-4"&gt;
      ...
    &lt;/div&gt;

    &lt;div x-show="selected === 'option-2'" class="p-4"&gt;
      ...
    &lt;/div&gt;

    &lt;div x-show="selected === 'option-3'" class="p-4"&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;</code></pre><p>Here we are greeted by three directives: <code>x-data</code>, <code>x-on:click</code> and <code>x-show</code>.</p><p><code>x-data</code> declares a new component scope. You can pass a JS object to it, and every element that is wrapped by the element which contains the <code>x-data</code> declaration, will have access to the JS object you passed to it. So, for example, if I had declared <code>x-data</code> in the nav element, only nav, ul, li and a would have access to that data. Since we want to use <code>selected</code> in the tab's content elements, we wrap everything with another element and use <code>x-data</code> there. You can have multiple <code>x-data</code> declarations in your page, just remember what each component has access to.</p><p><code>x-on:click</code> attaches a click event listener to that element. The directive part is actually only <code>x-on</code>, the second part (click) is what event you want to listen to. You could for instance use <code>x-on:keydown.escape</code> to listen for presses on the escape key. Take a look at the docs to learn all the other events you can listen to. So, <code>x-on:click</code> can receive a function or an expression. Since we only want to change the state of <code>selected</code>, we can add this short expression directly, like <code>x-on:click="selected = 'option-1'"</code>. This will change the <code>selected</code> value in the <code>x-data</code> directive.</p><p>Finally, we have <code>x-show</code>. You can pass an expression that resolves to <code>true</code> or <code>false</code> and it will toggle the <code>display: none;</code> style on the element.</p><p>Ok, so with that, we should already have a basic tabs functionality:</p><figure class="kg-card kg-image-card"><img src="/content/images/2020/06/ezgif.com-optimize.gif" class="kg-image"></figure><p>Wait, I mean, it's working but the tabs' styles are not changing to reflect their state. Well, let me present you <code>x-bind:class</code> (if you know Vue.js, this is not going to be a big surprise):</p><pre><code class="language-HTML">&lt;ul class="flex"&gt;
        &lt;li class="px-4 py-2" x-bind:class="{ 'bg-gray-100': selected === 'option-1' }"&gt;
          &lt;a href="#option-1" x-on:click="selected = 'option-1'"&gt;Option 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="px-4 py-2" x-bind:class="{ 'bg-gray-100': selected === 'option-2' }"&gt;
          &lt;a href="#option-2" x-on:click="selected = 'option-2'"&gt;Option 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="px-4 py-2" x-bind:class="{ 'bg-gray-100': selected === 'option-3' }"&gt;
          &lt;a href="#option-3" x-on:click="selected = 'option-3'"&gt;Option 3&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;</code></pre><p>Here, we pass an object to the <code>x-bind:class</code> directive where the key is the class that should be applied and the value should be an expression that resolves to <em>true</em> or <em>false. </em>If it is <em>true</em>, the class is applied, else it is not. With that, this component is done.</p><p>Now let's add some fluff. First, just like Vue.js, we can use a shorter syntax, where <code>x-on</code> can be replaced by <code>@</code>, and <code>x-bind</code> can be replaced by <code>:</code>:</p><pre><code class="language-HTML">&lt;li class="px-4 py-2" :class="{ 'bg-gray-100': selected === 'option-1' }"&gt;
          &lt;a href="#option-1" @click="selected = 'option-1'"&gt;Option 1&lt;/a&gt;
        &lt;/li&gt;</code></pre><p>Now, for the <em>grand finale</em> let’s add some transitions to the content boxes, so it’s easy on the eyes:</p><pre><code class="language-HTML">&lt;div x-show.transition.in.opacity.duration.750ms="selected === 'option-1'" class="p-4"&gt;
      ...
    &lt;/div&gt;

    &lt;div x-show.transition.in.opacity.duration.750ms="selected === 'option-2'" class="p-4"&gt;
      ...
    &lt;/div&gt;

    &lt;div x-show.transition.in.opacity.duration.750ms="selected === 'option-3'" class="p-4"&gt;
      ...
    &lt;/div&gt;</code></pre><p>Yep, that’s it. It’s that easy. You can basically chain several options to make your transition look better. By default, if you only add <code>x-show.transition</code> it will add an <em>in and out</em> <em>opacity</em> plus <em>scale</em> transition with <em>200ms of duration</em>. I changed that in this demo to only transition <em>in</em>, only change <em>opacity</em> and to last <em>750ms</em>. If you want to take a look at other options, <a href="https://github.com/alpinejs/alpine#x-show">check out the docs</a>.</p><p>That’s it. With that little amount of code we were able to add tabs navigation to the application. Alpine.js is great when you want to make simple stuff like this, but it can also be used to create more complex interactions such as forms. In a future post I’ll show you how 😎.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Let's build an ajax form with Alpine.js]]></title>
            <link>https://dberri.com/lets-build-an-ajax-form-with-alpine-js</link>
            <guid>https://dberri.com/lets-build-an-ajax-form-with-alpine-js</guid>
            <pubDate>Tue, 23 Jun 2020 00:07:38 GMT</pubDate>
            <description><![CDATA[In the previous post, I wrote about Alpine.js, how to use it and we built a tab navigation example with this framework. Now, let's take things one step further.]]></description>
            <content:encoded><![CDATA[<p>In the previous post, we built a tab navigation with Alpine.js and I said I wanted to bring you a more complex example. So, let’s build a regular contact form like this:</p><figure class="kg-card kg-image-card"><img src="/content/images/2020/06/ajax-form.png" class="kg-image"></figure><p>The catch is that we will send the data through ajax and handle all the form data with Alpine. I have done this countless times with vanilla JS or jQuery and it is always a monotonous task. You have to get all of the elements by reference, access their values and then send the data. Alpine (and other frontend frameworks) make this task a breeze.</p><p>As I said, this will be a simple form (name, email, message submit button) , but if you get the idea behind the implementation, you can apply it in more advanced situations. You can go to  <a href="https://github.com/dberri/alpinejs-demo">this Github repository</a>  to get the code and follow along from the master branch, or use the develop branch to get the final result. This is the important part:</p><pre><code class="language-HTML">&lt;form action="/contact" method="POST" class="w-64 mx-auto"&gt;
	&lt;div class="mb-4"&gt;
		&lt;label class="block mb-2"&gt;Name:&lt;/label&gt;
		&lt;input type="text" name="name" class="border w-full p-1"&gt;
	&lt;/div&gt;
    &lt;div class="mb-4"&gt;
		&lt;label class="block mb-2"&gt;E-mail:&lt;/label&gt;
        &lt;input type="email" name="email" class="border w-full p-1"&gt;
	&lt;/div&gt;
	&lt;div class="mb-4"&gt;
		&lt;label class="block mb-2"&gt;Message:&lt;/label&gt;
		&lt;textarea name="message" class="border w-full p-1"&gt;&lt;/textarea&gt;
	&lt;/div&gt;
	&lt;button class="bg-gray-700 hover:bg-gray-800 text-white w-full p-2"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre><p>That’s the basic HTML structure of the form. Up to now, there’s no javascript at all, it’s just a regular form that would work with a page reload. Now, let’s sprinkle some Alpine.js on it. Last time, I added the data object inline inside the <code>x-data</code>. This time, since that object will be more convoluted, I’ll show you that you can do most of the “heavy lifting” inside a script tag as such:</p><pre><code class="language-HTML">&lt;script&gt;
    function contactForm() {
      return {
        formData: {
          name: '',
          email: '',
          message: ''
        },
      }
    }
&lt;/script&gt;</code></pre><p>Then you just need to add that function call inside the <code>x-data</code>:</p><pre><code class="language-HTML">&lt;form action="/contact" method="POST" class="w-64 mx-auto" x-data="contactForm()"&gt;</code></pre><p>Now, let me present you the <code>x-model</code> directive. This keeps input elements in sync with the component data. We have the <code>formData</code> object inside the component scope, so we can use them in the inputs and textareas like this:</p><pre><code class="language-HTML">&lt;form action="/contact" method="POST" class="w-64 mx-auto" x-data="contactForm()"&gt;
    &lt;div class="mb-4"&gt;
      &lt;label class="block mb-2"&gt;Name:&lt;/label&gt;
      &lt;input type="text" name="name" class="border w-full p-1" x-model="formData.name"&gt;
    &lt;/div&gt;

    &lt;div class="mb-4"&gt;
      &lt;label class="block mb-2"&gt;E-mail:&lt;/label&gt;
      &lt;input type="email" name="email" class="border w-full p-1" x-model="formData.email"&gt;
    &lt;/div&gt;

    &lt;div class="mb-4"&gt;
      &lt;label class="block mb-2"&gt;Message:&lt;/label&gt;
      &lt;textarea name="message" class="border w-full p-1" x-model="formData.message"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;button class="bg-gray-700 hover:bg-gray-800 text-white w-full p-2"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre><p>In vanilla JavaScript, you would probably have to grab the element with something like <code>getElementById</code> and then access its value. With <code>x-model</code>, you don’t have to worry about it. As you type in the input element, your data object is automatically updated with whatever you typed.</p><p>Now, as for the ajax part, let’s just use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch API</a>, so we don’t have to pull an external dependency, but you can adapt this to your needs of course:</p><pre><code class="language-JavaScript">function contactForm() {
	return {
		formData: {
			name: '',
			email: '',
			message: ''
		},
		message: '',
        
		submitData() {
			this.message = ''

			fetch('/contact', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(this.formData)
            })
			.then(() =&gt; {
				this.message = 'Form sucessfully submitted!'
			})
			.catch(() =&gt; {
				this.message = 'Ooops! Something went wrong!'
			})
		}
	}
}</code></pre><p>and add this paragraph before the form closing tag:</p><pre><code class="language-HTML">&lt;p x-text="message"&gt;&lt;/p&gt;</code></pre><p>If you don’t understand what the <code>.then</code> and <code>.catch</code> statements are, dont' worry, you can check out this article about <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>. I’ll probably do a blog post about it in the future, stay tuned. Basically, this whole <code>submitData</code> method will do a POST request to the <code>/contact</code> route and pass the form data as a stringified JSON. If everything is successful the <code>.then</code> block is executed, if there's and error in the response, the <code>.catch</code> is executed.</p><p>Now, we have to call this method upon form submission. The form element emits a <code>submit</code> event, so we can listen to it using the <code>x-on</code> directive, and since we don’t want to reload the page we add the <code>.prevent</code> event modifier to sort of “hijack” the form submission and use our own method “submitData”:</p><pre><code class="language-HTML">&lt;form action="/contact" method="POST" class="w-64 mx-auto" x-data="contactForm()" @submit.prevent="submitData"&gt;</code></pre><p>That's it! You’ve got yourself a working ajax form built with Alpine.js. But let’s take a step forward and add some dynamic styling to the submit button to improve the user experience:</p><p>Add this style tag inside the head (I'll just add this style because as of now, TailwindCSS does not support disabled state out of the box):</p><pre><code class="language-CSS">&lt;style&gt;
    button:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
&lt;/style&gt;</code></pre><p>Now, replace the old submit button with this one:</p><pre><code class="language-HTML">&lt;button class="bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white w-full p-2 mb-4" x-text="buttonLabel" :disabled="loading"&gt;&lt;/button&gt;</code></pre><p>The two interesting bits are the <code>x-text</code> directive and the <code>:disabled</code>. We will use the <code>x-text</code> to change the button's label dynamically and <code>:disabled</code> to, well, disable the button while the form is being submitted.</p><p>Update the <code>contactForm</code> function with the following:</p><pre><code class="language-JavaScript">loading: false,
buttonLabel: 'Submit',

submitData() {
	this.buttonLabel = 'Submitting...'
	this.loading = true;
	this.message = ''
    
	fetch('/contact', {
		method: 'POST',
		headers: { 'Content-Type': 'application/json' },
		body: JSON.stringify(this.formData)
	})
	.then(() =&gt; {
    	this.message = 'Form sucessfully submitted!'
    })
	.catch(() =&gt; {
		this.message = 'Ooops! Something went wrong!'
	})
	.finally(() =&gt; {
		this.loading = false;
		this.buttonLabel = 'Submit'
	})
}</code></pre><p>That's it (again and finally)! We have a fully working ajax form built with Alpine.js and with some UX sugar. Do you want to see something specific using Alpine.js? <a href="https://twitter.com/dwberri">@ me!</a></p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Web scraping with Puppeteer]]></title>
            <link>https://dberri.com/web-scraping-with-puppeteer</link>
            <guid>https://dberri.com/web-scraping-with-puppeteer</guid>
            <pubDate>Mon, 06 Jul 2020 16:59:41 GMT</pubDate>
            <description><![CDATA[If you want to scrape some data directly from websites, especially if they rely heavily on JavaScript, then you should probably check out Puppeteer.]]></description>
            <content:encoded><![CDATA[<p>Today, I decided to bring sort of a different topic to the blog: web scraping.<br>Sometimes, I find myself wanting to analyse or visualize some data that is not available through an API or is not really structured, so I turn to web scraping. This is a data extraction method where the user or an automated software copies specific data from a website. I used to use Python to do that, but recently I came across <a href="https://github.com/puppeteer/puppeteer">puppeteer</a> and that is the Node library we’re going to use today.</p><p>According to the docs, puppeteer is “a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.” This means we can do things like: crawl simple web pages or even SPAs (single page applications), automate form submissions, UI testing, generate screenshots and PDFs, and more.</p><p>Assuming you have Node.js installed in your computer, you can run this snippet as a <code>.js</code> file and quickly see how it works.</p><pre><code class="language-JavaScript">const puppeteer = require('puppeteer');

(async () =&gt; {
	// Launch the headless browser
	const browser = await puppeteer.launch();

	// open a new page
	const page = await browser.newPage();

	// go to the specified url
	await page.goto('https://example.com');

	// take a screenshot
	await page.screenshot({path: 'screenshot.png'});

	// close the browser
	await browser.close();
})();
</code></pre><p>If you want to see what the browser is doing instead of just waiting for the results, you can change the <code>headless</code> mode:</p><pre><code class="language-JavaScript">const browser = await puppeteer.launch({
	headless: false
});
</code></pre><p>This will open up a browser window as soon as the script starts running and you will see each step as they happen.</p><p>Now, the cool thing about using puppeteer for web scraping is that you can use “vanilla” JavaScript syntax to find elements and data on the page. You will have access to the <code>document</code> interface inside the <code>evaluate</code> method. Let’s try it on the Google News page:</p><pre><code class="language-JavaScript">const puppeteer = require('puppeteer');

(async () =&gt; {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();

	await page.goto('https://news.google.com/news/');

	const data = await page.evaluate(() =&gt; {
		// Find all anchor tags whose parent is an H3
		const headlineNodes = document.querySelectorAll('h3 &gt; a')
		// Transform the NodeList in an array and map it to get the textContent of each anchor

		return {
			headlines: Array.from(headlineNodes).map(a =&gt; a.textContent)
		}
	});

	console.log(data);

	await browser.close();
})();
</code></pre><p>As I write this post, these are the headlines it returned:</p><pre><code class="language-JavaScript">{
  headlines: [
    "POLITICO's Election Forecast: Trump, Senate GOP in trouble",
    'Trump campaign “strongly” encourages face masks at outdoor rally in New Hampshire.',
    'Facebook, WhatsApp Suspending Review of Hong Kong Requests for User Data',
    'Trump celebrates Fourth of July by stoking division over pandemic and race',
    '7-Year-Old Among 13 Killed in Weekend Shootings in Chicago',
    'LA County New COVID-19 Cases Shatter Daily Record In First Report Since Data Processing Changes'
  ]
}
</code></pre><p>Google News has an infinite scroll behaviour. This means that when you first load the page, only a few articles are shown and the others are loaded as you scroll down the page. You can mimic this behaviour to get more data by using a combination of <code>window.scrollBy</code> and <code>setInterval</code> inside the evaluate method. Something like this (beware this can cause an infinite loop, make sure to create an exit strategy that meets your requirements):</p><pre><code class="language-JavaScript">const data = await page.evaluate(async () =&gt; {

    await new Promise((resolve) =&gt; {
      var totalHeight = 0;
      var distance = 100;
      var timer = setInterval(() =&gt; {
        var scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;

        if (totalHeight &gt;= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    })

    const headlineNodes = document.querySelectorAll(‘h3 &gt; a’)
    return {
      headlines: Array.from(headlineNodes).map(a =&gt; a.textContent)
    }
  });
</code></pre><p>And that’s it. Hopefully you can see how this technique can be useful to automate boring tasks and maybe create APIs where there isn't one. On a final note, be respectful of the website you’re scraping. You should follow the rules stated in the <code>/robots.txt</code> for each website, make sure to agree with the terms of service and check if scraping is actually legal wherever you are doing it. And try to not DDOS them when running this in loops :)</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to build a real time chat app with Node.js and Socket.io]]></title>
            <link>https://dberri.com/how-to-build-a-real-time-chat-app-with-node-js-and-socket-io</link>
            <guid>https://dberri.com/how-to-build-a-real-time-chat-app-with-node-js-and-socket-io</guid>
            <pubDate>Sun, 09 Aug 2020 14:33:47 GMT</pubDate>
            <description><![CDATA[Lots of applications rely on real time data delivery to provide value to the user. From instant messaging, to online multiplayer games, IoT, ad servers, and stock exchange brokers.]]></description>
            <content:encoded><![CDATA[<p>Lots of applications rely on real time data delivery to provide value to the user. From instant messaging, to online multiplayer games, IoT, ad servers, and stock exchange brokers, at one point or another in your career you might be challenged to build something like that. And with Node.js and Socket.io, it became so simple that you will might as well learn it now.</p><p>But before we start building the app, let's talk about some topics and approaches that you could use to build a real time application.</p><h3 id="regular-polling">Regular polling</h3><p>A good and simple way to summarise this is if you have an application that periodically (let’s say every 10s) sends a request to the server like asking: “Hey do you have any new information for me?”. Now, this can work in some situations, but you can imagine what would happen if hundreds of clients kept bombing the server with this amount of request every few seconds. Been there, done that, it was a very stressful day…</p><h3 id="long-polling">Long Polling</h3><p>Long polling is similar to regular polling, but after a request to the server, the connection hangs and the server will only close the connection with a response once there’s new information. The client, after receiving the response, immediately sends a new request waiting for new information. This is a good option for delivering messages without delay but the server architecture must be able to handle multiple pending connections. Depending on the type of technology used, each pending connection can take up a lot of memory, which was the case when I tried this option…  it was a very long day.</p><h3 id="websocket">WebSocket</h3><p>While regular polling and long polling make use of HTTP, WebSocket is another communication protocol that enables two-way communication between the server and the client. After the connection is opened, the client <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API"><em>can send messages to the server, and receive event-driven responses without having to poll the server for a reply</em></a>.</p><h3 id="socket-io">Socket.io</h3><p>In their website, it says: <em>”Socket.IO enables real-time, bidirectional and event-based communication.”</em>.  It tries to establish a WebSocket connection if possible, but will fall back to HTTP long polling if not. Which is an important distinction to consider when you’re thinking about building something on top of it.</p><p>Their website also lists examples of applications that make good use of Socket.io like real-time analytics that push data to clients (like counters, charts and logs) or instant messaging and chat (like what we will be doing) and document collaboration where users editing a document can see other users changes in real time (think Google Docs). One can also think of how games could make use of this technology to send and receive multiplayer data.</p><p>It’s incredibly easy to integrate it in a Node.js application (they say it works on every platform, but I haven’t tried).</p><h2 id="let-s-start-">Let’s start 🚀</h2><p>This is what the chat app will look like by the end of this tutorial:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="/content/images/2020/08/chat-app.png" class="kg-image"><figcaption>Screenshot of the chat application</figcaption></figure><p>It should go without saying that we need Node.js installed, so if you still don’t have, go to their <a href="https://nodejs.org/en/">website</a> and download at least the LTS version.</p><p>With that comes npm, the node package manager. I prefer Yarn (and that’s what I’ll be using throughout the tutorial), but feel free to use npm if you want. With that, go ahead and create a folder to store the application files. Now, open your terminal and navigate to the newly created folder (e.g. <code>cd realtime-chat</code>) and run <code>yarn init -y</code> which will quickly create a <em>package.json</em> file and you will be able to add the only dependency we need: <code>yarn add socket.io</code>.</p><p>Now, we need am HTML page where the users will be able to use the chat and a Node.js server. So, go ahead and create an <code>index.html</code> and a <code>server.js</code> files.</p><p>With that, let’s open <em>package.json</em> and edit a few lines. First, let’s change the <code>main</code> from <code>index.js</code> to <code>server.js</code>, and in <code>scripts</code> we can remove the test script and add <code>"start": "node server.js"</code> which will enable us to run <code>yarn start</code> from the root folder of the application and start up our server. That part of your <em>package.json</em> should look like this:</p><pre><code class="language-JSON">“main”: “server.js”,
“scripts”: {
  “start”: “node server.js”
}
</code></pre><h3 id="the-interface">The interface</h3><p>Since HTML is not the focus here, you can go ahead and copy this to your <code>index.html</code> file:</p><pre><code class="language-HTML">&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;RealTime&lt;/title&gt;
  &lt;link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class="bg-white overflow-hidden overflow-hidden shadow rounded-lg px-4 py-4 sm:px-6 w-4/5 mx-auto mt-8"&gt;
    &lt;h2 class="text-2xl leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9"&gt;
      Chat
    &lt;/h2&gt;

    &lt;div class="px-4 py-5 sm:p-6" id="message-box"&gt;
      &lt;!-- Content goes here --&gt;
    &lt;/div&gt;

    &lt;div class="border-t border-gray-200 px-4 py-4 sm:px-6"&gt;
      &lt;form id="form" action="#" method="POST" class="grid grid-cols-1 row-gap-6"&gt;
        &lt;div&gt;
          &lt;div class="mt-1 relative rounded-md shadow-sm"&gt;
            &lt;input id="input" placeholder="Start typing..."
              class="form-input py-3 px-4 block w-full transition ease-in-out duration-150"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="submit"
          class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"&gt;
          Send message
        &lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;

    &lt;div class="border-t border-gray-200 px-4 py-4 sm:px-6"&gt;
      &lt;h3 class="px-4 py-4"&gt;Who's online:&lt;/h3&gt;
      &lt;ul id="peer-list"
        class="px-6 py-3 max-w-0 w-full whitespace-no-wrap text-sm leading-5 font-medium text-gray-900"&gt;
        &lt;!-- Content goes here --&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><p>This is the basic structure of the chat app. There’s a box to display all messages, a form to type the message and a button to send it. All of the important parts have ids so that we can retrieve them in JavaScript later. Here, I’m using <a href="http://tailwindcss.com/">TailwindCSS</a> to make it look good fast.</p><h3 id="the-server">The server</h3><p>Now, open <code>server.js</code> and add the following:</p><pre><code class="language-JavaScript">const fs = require('fs');
const http = require('http');
const SocketIO = require('socket.io');

// Prepares HTML file to be served
const content = fs.readFileSync(__dirname + '/index.html', 'utf8');
const httpServer = http.createServer((req, res) =&gt; {
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Content-Length', Buffer.byteLength(content));
  res.end(content);
})

// Creates socket.io connection
const io = SocketIO(httpServer);

// Handles "connect" event
io.on('connect', socket =&gt; {
	// Handles "message" event sent by client
  socket.on('message', data =&gt; {
		// Emits new message to every connected client
		io.emit('newMessage', {
			message: data
		})
	})
});

// Starts up server
httpServer.listen(3000, () =&gt; {
  console.log("🔥 Listening on http://localhost:3000");
})</code></pre><p>This enough for the basic functionality of the app. We could further simplify things by using a framework like <code>express</code>, but for now, a classic Node.js server will suffice. It serves the <code>index.html</code> file and then creates a Socket.io connection on line 14. Then we can use the event listening functionality to listen for a “connect” event emitted from the client and handle that connection. You can create your own event keywords (like  “connect”), but you have to keep in mind that there are a few keywords that should not be used as they conflict with the ones implemented by Socket.io. A few examples include connect, disconnect, reconnect and error. A full list of these event names can be found <a href="https://socket.io/docs/emit-cheatsheet/">here</a>.</p><p>On line 16 we listen for an event named “message” and pass a callback to handle the data received by that event. Then on line 18 we emit an event named “newMessage” to all connected sockets. Note that we listened on <code>socket</code> which is an individual client connected and we emit with <code>io</code> which is sort of a pool of sockets. You can always refer to this <a href="https://socket.io/docs/emit-cheatsheet/">emit cheatsheet</a> to see all the options you have, like emitting events to all connected sockets but the emitter, or emitting to “rooms” or sending privately from socket to socket.</p><p>Now, I want to make things more interesting and assign random names to the clients send these names to all clients so they know who’s connected and able to chat. Let’s add this:</p><pre><code class="language-JavaScript">const animals = [
  'fish',
  'cat',
  'tiger',
  'bear',
  'bull',
  'fox'
]

const colors = [
  'red',
  'green',
  'blue',
  'yellow',
  'purple',
  'pink'
]

/**
 * Generates a random name based on an animal and a color
 * 
 * @return {String}
 */
function randomName() {
  const color = colors[Math.floor(Math.random() * colors.length)]
  const animal = animals[Math.floor(Math.random() * animals.length)]

  return `${color}-${animal}`;
}

// Stores the names and ids of connected clients
const sockets = {}

// Creates socket.io connection
const io = SocketIO(httpServer);</code></pre><p>Then, inside the “connect” event handling, let’s add a few new even handlers:</p><pre><code class="language-JavaScript">// Handles “connect” event
io.on('connect', socket =&gt; {
  sockets[socket.id] = randomName();
  socket.emit('name-generated', sockets[socket.id]);
  io.emit('update-peers', Object.values(sockets));

  // Handles “message” event sent by client
  socket.on('message', data =&gt; {
    // Emits new message to every connected client
    io.emit('newMessage', {
      sender: sockets[socket.id],
      message: data
    })
  });

  // Handles “disconnect” event
  socket.on('disconnect', () =&gt; {
    delete sockets[socket.id]
    io.emit('update-peers', Object.values(sockets))
  })
})</code></pre><p>Here we’re basically wait for a client to connect, then we assign a random name to their socket id and send their “random name” so they know who they are. Then we send the list of connected socket names. We also need to handle the disconnect event, so if anyone disconnects, we update the list of connected sockets and send that to everyone in the chat to update their user interface.</p><p>Cool, now let’s implement the client so it can connect to the server and do its magic.</p><h3 id="the-client">The client</h3><p>Go to the <code>index.html</code> file and before closing the body tag, add the following:</p><pre><code class="language-HTML">&lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
&lt;script&gt;

&lt;/script&gt;
</code></pre><p>This will “import” the Socket.io script (when you’re building a more complex application and are using a module bundler, this will probably look different, as the import will happen in another JavaScript file, but this is out of the scope of this article).</p><p>Let’s start the program by getting access to a few elements that we will use throughout the script:</p><pre><code class="language-JavaScript">&lt;script&gt;
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const msgBox = document.getElementById('message-box');
    const peerList = document.getElementById('peer-list');
&lt;/script&gt;</code></pre><p>Now, in order to make use of Socket.io, we need to call it and store it in a variable, then we will start listening and emitting events:</p><pre><code class="language-JavaScript">&lt;script&gt;
  const form = document.getElementById('form');
  const input = document.getElementById('input');
  const msgBox = document.getElementById('message-box');
  const peerList = document.getElementById('peer-list');

  const socket = io();

  // Handles the "name-generated" event by storing the client's name in a variable
  socket.on('name-generated', () =&gt; ());

  // Handles the "update-peers" event by updating the peers list
  socket.on('update-peers', () =&gt; ());

  // Handles "newMessage" event and add that message to the chat
  socket.on('newMessage', () =&gt; ());

&lt;/script&gt;</code></pre><p>All of the events listed above with <code>socket.on()</code> are emitted by the server at some point, they are still not implemented (i.e. we still don’t do anything after we listened for those events, but we will do it shortly. Before that, let’s handle the submission of a message:</p><pre><code class="language-JavaScript">/**
 * Retrieves message from input and emits to the server
 * 
 * @param {Object} evt Event fired by the form submission
 */
function submitHandler(evt) {
  evt.preventDefault();
  socket.emit('message', input.value);
  input.value = ''
  msgBox.focus();
}

form.addEventListener('submit', submitHandler)
</code></pre><p>Here, we attach an event listener to the form. It will listen for the “submit” event and the <code>submitHandler</code> will prevent the default (just so the form does not trigger a page reload or navigating to the <code>action</code> attribute) and then we emit a “message” event containing the input field value. Then we clear the field and focus on something that is not a field, so if the user is in a mobile device, the keyboard goes away.</p><p>Now let’s go back to the other socket’s event listeners, an we will implement them. First, the simplest one, we listen for the “name-generated” event, if you remember, this is the event the server emits after generating a random name for the client. We need to store this name to use in other functions, so let’s create a variable in the same scope as the socket listeners like this:</p><pre><code class="language-JavaScript">let myName = ''
const socket = io();

// Handles the “name-generated” event by storing the client’s name in a variable
socket.on('name-generated', name =&gt; {
  myName = name
});
</code></pre><p>And now, let’s handle the “newMessage” event. This event is emitted by the server whenever a socket emits the “message” event. In other words, someone sends a message to the server and the server broadcasts this message to everyone connected:</p><pre><code class="language-JavaScript">// Handles “newMessage” event and add that message to the chat
socket.on('newMessage', ({ sender, message }) =&gt; {
  let name = document.createElement('strong');
  name.textContent = `${sender} says: `

  let msgEl = document.createElement('span');
  msgEl.textContent = message

  let paragraph = document.createElement('p');
  paragraph.appendChild(name);
  paragraph.appendChild(msgEl);

  msgBox.appendChild(paragraph);
});</code></pre><p>Here, we expect the server to send an object containing the message and the sender’s name. We use this information to create a paragraph element that will be something like this: “blue-fish says: I am a new message”. And then appends this paragraph in the message box.</p><p>Let’s finish this by implementing the list of online clients:</p><pre><code class="language-JavaScript">// Handles the “update-peers” event by updating the peers list
socket.on('update-peers', peers =&gt; {
  peerList.innerHTML = ''

  const template = `&lt;li class=“flex items-center space-x-3 lg:pl-2”&gt;
    &lt;div class=“flex-shrink-0 w-2 h-2 rounded-full bg-%PEER_COLOR%-600”&gt;&lt;/div&gt;
      &lt;span&gt;%PEER_NAME%&lt;/span&gt;
  &lt;/li&gt;`

  for (const peer of peers) {
    let name = peer
    if (name === myName) {
      name += ' (you)'
    }
    peerList.innerHTML += template.replace('%PEER_NAME%', name).replace('%PEER_COLOR%', peer.split('-')[0])
  }
});</code></pre><p>This might seem a little complex, but we just clear the list of online peers whenever we listen to the “update-peers” event and then create an HTML template to attach to the DOM with the names and colors of the connected clients, including yourself (which will use <code>myName</code> variable to add an indication that it’s you).</p><p>And that’s it! Now if you go run <code>yarn start</code> in your terminal and go to <em><a href="http://localhost:3000">http://localhost:3000</a></em> you should see the chat page and if you connect with other browser windows, tabs or devices you will see the growing list of users connected. And if you close those windows, leaving the chat, the list will also update.</p><p>I hope you liked this article and will create awesome applications with this new tool under your belt 🍻</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How I added Dark Mode to my blog using TailwindCSS]]></title>
            <link>https://dberri.com/how-i-added-dark-mode-to-my-blog-using-tailwindcss</link>
            <guid>https://dberri.com/how-i-added-dark-mode-to-my-blog-using-tailwindcss</guid>
            <pubDate>Fri, 30 Oct 2020 20:50:25 GMT</pubDate>
            <description><![CDATA[Dark mode is a color scheme of interfaces that display light text and elements on a dark background. Let's use TailwindCSS to add it to a site.]]></description>
            <content:encoded><![CDATA[<p>If you’re here, you probably already know what dark mode is, so I’m not going to bore you with a long story about it. But if you want to read more about, <a href="https://www.phonearena.com/news/Dark-Mode-iPhone-Android-interface-feature-pros-cons-versus-light-mode_id116978#A1">here’s a very interesting article</a>.</p><p>TL;DR: Dark mode is a color scheme of interfaces that display light text and elements on a dark background. Some say it’s for aesthetics only. <a href="https://web.dev/prefers-color-scheme/">Others</a> say it mitigates digital eye strain, or even involved in the regulation of the circadian rhythm. Also, on AMOLED screens, it’s known to save more energy.</p><p>With that said, let’s dive right into the content:</p><h2 id="a-quick-trick-to-make-it-look-like-dark-mode-">A quick trick to make it “look like dark mode”</h2><p>If you want to add dark mode to your website really quick, <a href="https://dev.to/pqina/poor-man-s-dark-mode-using-css-filter-211n">here’s a tip</a> by Rik Schennink that I found on Dev.to:</p><pre><code class="language-CSS">html.dark-mode {
  filter: invert(100%);
}

html.dark-mode img {
  filter: invert(100%);
}
</code></pre><p>This will literally invert the colors of your website (although keeping the images the same color). That means white will become black and vice-versa, but also red will become green and blue will turn into orange (picture the color wheel now). In some cases, this will be fine, really, but if your UI has more colors and especially brand colors, inverting everything is not really what you want. I tried this on my blog just to see if I could get away with it and for the background and text it did work quite well, but for the tags (each has a distinct color) and for the header menu items, the inverted colors looked… weird...</p><h2 id="enters-prefer-colour-scheme-or-how-to-properly-add-dark-mode-">Enters prefer-colour-scheme (or how to properly add dark mode)</h2><p>Remember media queries? Yes, those <code>@media</code> that makes your block of CSS apply only at specific conditions (like min or max width of viewport). Well, what if I told you that not only can you use that to make a responsive layout, but you can also recognise when the user has dark mode activated on his OS or user-agent (browser, etc)? Yeah! That blew my mind when I figured that there are <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">many many more media features</a> you can use.</p><p>There’s one called <code>prefers-reduced-motion</code> which means the user prefers less motion on the page (the name of the property gives it away, I guess), <code>inverted-colors</code> which means the user agent has inverted colors, and yes, there’s one called <code>prefers-color-scheme</code>  which detects if the user, well, prefers a <strong>dark</strong> or <strong>light</strong> color scheme. If the user does not express any preference, it is assumed to be <strong>light</strong>.</p><p>Here’s how we can use this:</p><pre><code class="language-CSS">body {
  color: #464646;
  background-color: #FFF;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #FFF;
    background-color: #3E3E3E;
  }
}
</code></pre><p>Now, if we had this setting in our CSS, and the user visited our website without any active color scheme preference, the font color would be that dark gray and background would be white. If they visit with a dark mode setting active on their system, the website would automatically apply the white color to the font and the darker color to the background.</p><p>What I like the most about this setting is that the user does not need to care about this setting on each website they visit. They can set this on their browser or OS, and it will be automatically detected and applied. I, for example, don’t like to use dark mode all the time, so I configured my OS to apply it only at night, so all the websites that use this CSS media feature will apply the light color scheme during the day and the dark mode during the night. Pretty cool, huh?</p><p>You could stop right here and go to your CSS and start applying this all over your website, but if you are already using TailwindCSS I’ll show you a cool trick that will make dark mode development much more enjoyable.</p><h2 id="how-to-add-custom-media-queries-in-tailwindcss">How to add custom media queries in TailwindCSS</h2><p>So, let’s say I have a title of an article in my blog with the following TailwindCSS classes:</p><pre><code class="language-HTML">&lt;h1 class="text-black text-2xl sm:text-3xl md:text-4xl mb-2"&gt;
	How to build a real time chat app with Node.js and Socket.io
&lt;/h1&gt;
</code></pre><p>Nothing new here, just sets the title to be black and a different sizes at different viewports. Now, this is what I want to do:</p><pre><code class="language-HTML">&lt;h1 class="text-black dark:text-gray-400 text-2xl sm:text-3xl md:text-4xl mb-2"&gt;
	How to build a real time chat app with Node.js and Socket.io
&lt;/h1&gt;
</code></pre><p>This would be cool right? Just like we have the different sizes (<code>sm</code>, <code>md</code>, <code>lg</code> and so on) I would like to have the dark mode to be an option like that, so I can choose a color and immediately choose what that element will look like on dark mode. In order to do that, we need to add a plugin to TailwindCSS. So go to your <code>tailwind.config.js</code> and in the <a href="https://tailwindcss.com/docs/breakpoints#dark-mode">extends section</a>, add:</p><pre><code class="language-JavaScript">module.exports = {
  theme: {
    extend: {
      screens: {
        dark: { raw: '(prefers-color-scheme: dark)' }
      }
    }
  }
}
</code></pre><p>That piece of code will tell TailwindCSS to add a custom media query to its set and now you can use just like the other ones.  By the way, you can use the same trick to style for any of those media features.</p><p>Now you could do: <code>bg-white dark:bg-black</code> or <code>text-blue dark:text-purple</code> or you know, go crazy with it! (Ok, maybe not, think of your users first).</p><h2 id="adding-that-scheme-and-using-it-inline-and-in-css">Adding that scheme and using it inline and in CSS</h2><p>If you’ve been using TailwindCSS for some time, you know that not always you can get the desired result only using the created classes, so you would have to write some CSS or PostCSS with `@apply` for example. Since we added that custom media query to the config file, you can also do something like this:</p><pre><code class="language-CSS">@screen dark {
  .MyArticle {
    @apply text-white;
  }
}</code></pre><p>And that’s it! Hopefully you got inspired to add dark mode (or use an exotic media feature) in your web projects :) Are you going add dark mode to a project you’re working on? I’d love to see how you’ve done it, so <a href="https://twitter.com/dwberri">tweet  @ me</a></p><blockquote><strong>Pro tip</strong>: if you’re in a website that does not support dark mode and you want to read something in dark mode, try the browser’s <a href="https://support.apple.com/guide/safari/hide-ads-when-reading-articles-sfri32632/mac">“reading mode”</a>. For me at least, it seems to be easier on the eyes.</blockquote>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[2020 in Review]]></title>
            <link>https://dberri.com/2020-in-review</link>
            <guid>https://dberri.com/2020-in-review</guid>
            <pubDate>Wed, 13 Jan 2021 08:32:46 GMT</pubDate>
            <description><![CDATA[I decided to write this post to reflect on what I achieved last year to give me some perspective. I plan on doing this post every year from now on with this objective in mind.]]></description>
            <content:encoded><![CDATA[<p>What a crazy year 2020 was, huh? So much stuff happened, ups and downs and ups again…</p><p>I had finally left a job that required me to go to the office in the end of 2019, so I was already only working from home by the time we were requested to that in order to fight the pandemic. To be fair, even before I left that job I was already working from home as a freelancer and I felt very productive when doing so. The downsides were that I was not going to see that many people anymore and I wouldn’t have to commute. Yeah, I actually liked commuting only because I did so in 15 minutes riding my bike 😬.</p><p>Anyway, I decided to write this post to reflect on what I achieved last year to give me some perspective. Sometimes I get frustrated because it looks like I’m not achieving my goals but I tend to forget all the great things I did achieve along the way. I plan on doing this post every year from now on with this objective in mind.</p><p>So, to get started I’ll write about the projects I started or launched this year:</p><h2 id="this-blog-website">This Blog / Website</h2><p><a href="https://dberri.com">dberri.com</a></p><p>Yeah, so this was a long time coming. I was planning on launching a website or blog for quite sometime in 2019 but did not have the time or patience to set it up. In January, I decided I was going to do it and use the same stack I was using the my job at the time: Nuxt. I set up a local installation of Ghost CMS and used the JSON output to feed Nuxt which then creates a static site during a build in Netlify.</p><p>The first post went live on January 31st, 2020. Since then, I wrote 15 posts. That’s a little more than one post per month but it is 15 posts more than I had in 2019, so that’s a big win 😅. I still don’t think this stack is perfect for what I want, but it does the job well and while I don’t have too many posts, it will suffice. I played around with GraphCMS and seems cool but I’m still not sold on the idea of using it for this blog specifically (I might write a post about GraphCMS in the future because it is really cool, so stay tuned).</p><p>The purpose of writing and publishing these articles is to share things I’m learning, help other developers who are struggling to grasp concepts that I also had struggled to learn and improve my writing skills and the way I convey information. I also do some research while I write, so that makes me consolidate the knowledge on the topics. For this year, I plan to write at least 12 posts or one post per month. Let’s see in my 2021 review if accomplished this. 🤞</p><h2 id="project-name-is-not-defined">project-name is not defined</h2><p><a href="stocks.dberri.com">stocks.dberri.com</a></p><p>I don’t have a name for this one yet, even though I launched it on May 1st, 2020. I basically developed it to “scratch my own itch” since I didn’t find anything similar on the web at that time. It’s a small application that helps me balance the risk in my investment portfolio. The user can type a stock ticker in the text field and add it, then assign a grade and the amount of shares they have. They do that for all the companies in their portfolio and while at it, the application highlights which stocks to buy next to keep the portfolio balanced according to the grades they assigned. If my explanation was not clear enough, here is the “about” page I wrote where I also added some examples: <a href="http://stocks.dberri.com/en-US/about">http://stocks.dberri.com/en-US/about</a> .</p><p>I also developed this project using Nuxt, but since there is some API usage and it needs a Node.js server, I decided to host it on Heroku. It was also the first time I used the serverless and hosted a function in AWS Lambda to fetch prices and some other stock data.</p><p>A few months after I launched it, I discovered a similar application while watching a YouTube channel about personal finances, so I have some plans for this application going forward. For one, everything is stored in LocalStorage which works fine for me, but then I can't really use it in different browsers or devices, so I plan on improving the UX by using some authentication and database so the users can use the application on multiple devices. Maybe even a PWA would be cool 😎</p><h2 id="usdbrl">usdbrl</h2><p><a href="https://www.npmjs.com/package/usdbrl-cli">npmjs.com/package/usdbrl-cli</a></p><p>I was quite excited to work on this one and launch it. It was the first npm package that I published. USD-BRL CLI is a tool that allows developers to fetch the exchange rate of USD/BRL  directly on the terminal.</p><p>To file taxes in Brazil for foreign earnings, one needs to convert that income to USD using the closed exchange rate of the payment date and then convert to BRL using the exchange rate on the 15th workday of the previous month. After a few months doing this manually, it struck me that I could automatize the process by fetching the data from the official Brazilian Central Bank website.</p><p>My plan with this was to also learn how to create CLI tools using Node.js and that goal was achieved 😬. Now, I use it every month and it does it job well, so I don’t have any plans to build upon it. Let’s see 🤷‍♂️.</p><h2 id="2webp-optimizer">2WEBP Optimizer</h2><p><a href="https://image-optimizer.dberri.com">image-optimizer.dberri.com</a></p><p>The idea for this one came from the fact that I had to optimize a few images for a website I was building on my day job and I couldn’t find any online tool  that would convert images to the webp format and resize it to the sizes I wanted to. I also wanted to learn Vue 3 which was building up hype the whole year but I didn’t have the time to spend on it before. I also wanted to build something more elaborate with serverless and this was the perfect opportunity for it. I didn’t want this to be one of the many applications I have in my “dead side-projects folder”, so, to create some public accountability, I told my girlfriend about it so she would keep asking me about the progress of the development and I gave myself a deadline (December 31st, 2020).</p><p>Everyday, I built a small part of it, starting with the serverless functions. The backend is hosted on AWS, and I use Lambda, API Gateway, Cloudwatch, S3 and DynamoDB, which is all managed by the serverless framework. The frontend is hosted on Netlify as a simple Vue SPA. It was quite rewarding to finally hit the deploy button on the deadline and sip some wine to celebrate.</p><p>Now, this one is not completely done yet. It’s like an MVP, it does the job I want it to do, but I still want to iron out a few details, build a few features and advertise it so people can find it and use it. Hopefully the users will be very happy about it.</p><h2 id="what-i-learned">What I learned?</h2><p>I started the year learning React and React Native. Back when I started to fell comfortable writing JavaScript, I decided to pick a framework and at that time Vue 2 had been released and was picking up steam and I started to read about it and comparisons with React which was already popular. My idea was to first learn Vue because it seemed to have a good learning curve, and it was bundled with Laravel which for me served as validation since I was and still am a big fan of that PHP framework (*Vue does not come with the Laravel installation anymore). Even though I decided to start with Vue, I always wanted to learn React too, just to see how they both differ, and what problems they solve and in which ways. Since now I already had a very good grasp of Vue and know how JavaScript frameworks work more or less, I decided to learn React and use it in a few side projects. It was a very good experience in my opinion, and it’s good to have another tool under my belt. I still prefer working with Vue and that pays the bills, so 🤷‍♂️</p><p>Because of my job and the requirements for the projects, I learned and used Laravel Nova,  learned how to use Twig in Laravel instead of Blade and also learned and used Alpine.js. All of these things might become blog posts in the future. Alpine.js already features in a few of them from last year, and this year I plan on bringing more related content.</p><p>I’m also learning quite a bit about accessibility, animations and performance on the web, and I’m very thankful for my coworkers who are helping me with this through code reviews, tips and so on.</p><h2 id="what-i-want-to-learn-in-2021">What I want to learn in 2021?</h2><p>Well, this year I’ll double down on learning and applying accessibility aspects correctly on the applications and websites I build, learn more about animations and motion design and keep improving the performance of the stuff I work on (gotta catch those 100s in Lighthouse 😜).</p><p>I’m currently learning Laravel Livewire while I build a side project to help my girlfriend with her business and hopefully I’ll be able to bring you more content and tutorials featuring it here.</p><p>And that’s a wrap. I wish you all a great 2021 and go after your goals 🚀</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to use Twig in Laravel]]></title>
            <link>https://dberri.com/how-to-use-twig-in-laravel</link>
            <guid>https://dberri.com/how-to-use-twig-in-laravel</guid>
            <pubDate>Wed, 27 Jan 2021 21:05:44 GMT</pubDate>
            <description><![CDATA[Laravel comes bundled with its own templating engine called Blade which is very powerful, but you also have the option to use Twig instead.]]></description>
            <content:encoded><![CDATA[<p>Laravel comes bundled with its own templating engine called Blade which is very powerful and a breeze to use, but there are times when it's not the best tool for the job. In my case, I first had to replace Blade with Twig in Laravel in order to use <a href="https://www.miyagi.dev">Miyagi</a> for component development, and that made me spend a few hours out of my comfort zone learning how to integrate it in Laravel and because of that I'll share my lessons with you.</p><p>First you need to install Twig itself and a package called TwigBridge which  will allow you to seamlessly use it in Laravel. Open your terminal (who am I kidding, it's probably already open) and navigate to your application root folder, and run the following command:</p><pre><code class="language-bash">composer install rcrowe/twigbridge twig/twig</code></pre><p>After the installation is complete, you can run <code>php artisan vendor:publish --provider="TwigBridge\ServiceProvider"</code> which will publish the pacakge's configuration file at <code>config/twigbridge.php</code>. In this file you will be able to tweak a few things like which Laravel Facades are made available to Twig, as well as filters and global functions. With that, you are ready to start using Twig templates, so go ahead and create a new view inside <code>resources/views</code> called <code>welcome.twig</code> (if you don't already have one) to test that:</p><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="{{ app.getLocale }}"&gt;
    &lt;head&gt;
        &lt;!-- other regular head stuff --&gt;
    &lt;/head&gt;
    &lt;body class="antialiased"&gt;
        &lt;div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0"&gt;        
            {% if Route.has('login') %}
                &lt;div class="hidden fixed top-0 right-0 px-6 py-4 sm:block"&gt;
                    {% if auth_check() %}
                        &lt;a href="{{ url('/home') }}" class="text-sm text-gray-700 underline"&gt;Home&lt;/a&gt;
                    {% else %}
                        &lt;a href="{{ route('login') }}" class="text-sm text-gray-700 underline"&gt;Login&lt;/a&gt;

                        {% if Route.has('register') %}
                            &lt;a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline"&gt;Register&lt;/a&gt;
                        {% endif %}
                    {% endif %}
                &lt;/div&gt;
            {% endif %}

            &lt;div class="max-w-6xl mx-auto sm:px-6 lg:px-8"&gt;
                &lt;div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg"&gt;
                    &lt;!-- irrelevant content --&gt;

                    &lt;div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0"&gt;
                        Laravel v{{ app.version }}
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><p>I adapted the original <code>welcome.blade.php</code> view that comes with a fresh installation to show you how it would like like when using Twig. Notice the "Route" facade is readily available but instead of using the static method call like <code>Route::has()</code> you use Twig's dot notation: <code>Route.has()</code>. Other global functions like <code>route</code>, <code>url</code> and <code>app</code> are also available.</p><p>If it's a fresh install of Laravel, your base route will already point to the "welcome" view, otherwise just create a route in the <code>routes/web.php</code> file like this:</p><pre><code class="language-php">Route::get('/', function () {
	return view('welcome');
});</code></pre><p>Now, let's go a little bit further and use components in the application. Go ahead and create <code>resources/views/components/navbar/navbar.twig</code> and add this content:</p><pre><code class="language-html">&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="{{ url('/') }}"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    {% for item in items %}
      &lt;li&gt;
        &lt;a href="{{ item.url }}"&gt;{{ item.label }}&lt;/a&gt;
      &lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
&lt;/nav&gt;</code></pre><p>and in the <code>welcome.twig</code> view, you can include it just after opening the body tag:</p><pre><code class="language-html">{% include "./components/navbar/navbar.twig" with {
    items: [
      {
        url: url('/nachos'),
        label: 'Nachos'
      },
      {
        url: url('/tacos'),
        label: 'Tacos'
      }
    ]
} %}</code></pre><p>And just like that, now you're able to include, embed and extend Twig templates in Laravel. Though, the more your application grow and the more components you have, it might become unwieldy to write all those paths to components. To fight that, you can use Twig namespaces. Instead of writing <code>../../components/component-name.twig</code> you can write it like this: <code>@components/component-name.twig</code>. All you need to do is add this snippet to the boot method in <code>app/Providers/AppServiceProvider.php</code>:</p><pre><code class="language-php">
$loader = new \Twig\Loader\FilesystemLoader();
$loader-&gt;addPath(base_path() . '/resources/views/components', 'components');
\Twig::getLoader()-&gt;addLoader($loader);</code></pre><p>where <code>base_path() . '/resources/views/components'</code> is the path to the component directory and <code>components</code> is how you will call it (i.e. <code>@components</code>). You can add multiple paths like this that point to different (or the same) directories.</p><p>If you need to add some custom functionality that is not provided by a built in filter or function, you can create it in a plain php file, something like <code>app/Twig/Functions.php</code> and inside you could add:</p><pre><code class="language-php">&lt;?php
 
namespace App\Twig;
 
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
 
class Functions extends AbstractExtension
{
    public function getFunctions()
    {
        return [
            new TwigFunction('now', [$this, 'now']),
        ];
    }
 
    public static function now()
    {
      return date('d/m/Y H:i:s');
    }
}</code></pre><p>Then, go to <code>config/twigbridge.php</code> and add <code>'App\Twig\Functions',</code> to enabled extensions like:</p><pre><code class="language-php">'extensions' =&gt; [
    'enabled' =&gt; [
        // ... other enabled extensions ...
        'App\Twig\Functions'
    ]
]</code></pre><p>And then in your views you can use your function like:</p><pre><code class="language-html">&lt;p&gt;{{ now() }}&lt;/p&gt;</code></pre><p>You can do the same with filters in <code>app/Twig/Filters.php</code>:</p><pre><code class="language-php">&lt;?php
 
namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class Filters extends AbstractExtension
{
    public function getFilters()
    {
        return [
            new TwigFilter('count_words', [$this, 'countWords']),
        ];
    }
 
    public static function countWords($sentence)
    {
      return count(explode(' ', $sentence));
    }
}</code></pre><p>then in <code>config/twigbridge.php</code>:</p><pre><code>'extensions' =&gt; [
    'enabled' =&gt; [
        // ... other enabled extensions ...
        'App\Twig\Functions',
        'App\Twig\Filters'
    ]
]</code></pre><p>and you will be able to use it like this in your views:</p><pre><code class="language-html">&lt;p&gt;{{ 'Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.'|count_words }}&lt;/p&gt;</code></pre><p>And that pretty much covers lots of use cases you would need with Twig in Laravel. Hope this article helps you save some hours of searching for answers in StackOverflow and documentation. If you find any other use cases not covered in this post, <a href="https://twitter.com/dwberri">let me know</a> and I'll update it. Until the next post!</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Let’s build an accessible modal with Alpine.js]]></title>
            <link>https://dberri.com/lets-build-an-accessible-modal-with-alpine-js</link>
            <guid>https://dberri.com/lets-build-an-accessible-modal-with-alpine-js</guid>
            <pubDate>Sun, 28 Mar 2021 13:07:28 GMT</pubDate>
            <description><![CDATA[Modals are widely used as means for quick interactions, forms, or just to provide extra information. In this post we will build a modal with Alpine.js covering transitions and a11y.]]></description>
            <content:encoded><![CDATA[<p>The simplest example of a modal is the one you can find in Alpine.js’ <a href="https://github.com/alpinejs/alpine/#use">own documentation</a>, and it is for a dropdown modal which would be like this:</p><pre><code class="language-html">&lt;div x-data="{ open: false }"&gt;
    &lt;button @click="open = true"&gt;Open Dropdown&lt;/button&gt;

    &lt;ul
        x-show="open"
        @click.away="open = false"
    &gt;
        Dropdown Body
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre><p>Very straight forward, you will just control the "open" state of the modal and change with the button click event. There’s also something very cool which is the "away" event modifier. That ensures that when the modal is open, if a click happens outside of the modal tree, it will hide the it. We will use these basic concepts and build a "regular" modal. As in other Alpine.js' posts, I’ll use TailwindCSS for the styling, so all you need to do is add these two lines in the <code>&lt;head&gt;</code> section of your page (just remember that it is <a href="https://tailwindcss.com/docs/installation#using-tailwind-via-cdn">not a purged version</a> of TailwindCSS, so don’t really use it for production):</p><pre><code class="language-html">&lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"&gt;
&lt;script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer&gt;&lt;/script&gt;
</code></pre><p>Ok, now, we’re ready to start building stuff. Let’s begin by adding a container that will hold Alpine.js' state:</p><pre><code class="language-html">&lt;div x-data="{ open: false }"&gt;
&lt;/div&gt;
</code></pre><p>Everything that Alpine.js controls and is related to the modal will need to be inside this <code>&lt;div&gt;</code>. You can have multiple containers like this to control different aspects of the page, but they would be independent. So, inside this container, we will add a button to open the modal and the modal’s markup as well:</p><pre><code class="language-html">&lt;div x-data="{ open: false }"&gt;
    &lt;button x-ref="modal1_button"
            @click="open = true"
            class="w-full bg-indigo-600 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:inline-flex"&gt;
            Open Modal
    &lt;/button&gt;

    &lt;div role="dialog"
         aria-labelledby="modal1_label"
         aria-modal="true"
         tabindex="0"
         x-show="open"
         @click="open = false; $refs.modal1_button.focus()"
         @click.away="open = false; $refs.modal1_button.focus()"
         class="fixed top-0 left-0 w-full h-screen flex justify-center items-center"&gt;
        &lt;div class="absolute top-0 left-0 w-full h-screen bg-black opacity-60"
             aria-hidden="true"
             x-show="open"&gt;&lt;/div&gt;
        &lt;div @click.stop=""
             x-show="open"
             class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white w-3/5 h-3/5 z-10"&gt;
          &lt;div class="p-6 border-b"&gt;
            &lt;h2 id="modal1_label"&gt;Header&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="p-6"&gt;
            Content
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre><p>This will get you a very simple modal window when you click on the "Open modal" button. No transitions, no flair, just a plain modal. Let's break down the markup:</p><pre><code class="language-html">&lt;button data-modal-open="modal_1"
        @click="open = true"
        class="..."&gt;
  Open Modal
&lt;/button&gt;</code></pre><p>This is the button that will trigger the modal to open (classes ommited), other than the known <code>@click="open = true"</code> which you are probably familiar with, we have the <code>x-ref="modal1_button"</code> attribute. This is there so we can retrieve a reference to the button element and set focus to it once the modal is closed which is helpful for people who use the keyboard to navigate around the page. Onto the next part:</p><pre><code class="language-html">&lt;div role="dialog"
     aria-labelledby="modal1_label"
     aria-modal="true"
     tabindex="0"
     x-show="open"
     @click="open = false; $refs.modal1_button.focus()"
     @click.away="open = false; $refs.modal1_button.focus()"
     class="..."&gt;
     ...
&lt;/div&gt;</code></pre><p>This is the modal container. You'll notice the `role` attribute and it's set to "dialog" which <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html">according to W3</a> is a way to identify the element that serves as the dialog container. Then, we have the <code>aria-labelledby</code> attribute, which will set the accessible name of the container to the modal title (h2 tag). Next is <code>aria-modal</code> attribute which tells accessibility technologies that the content underneath this dialog won't be available for interaction while it's open. <code>x-show</code> is probably self-explanatory and then we have <code>$refs.modal1_button.focus()</code> which will use the <code>x-ref</code> we set in the button to set focus to it once the modal is closed.</p><p>Next we have this empty div which is used as a modal backdrop, nothing special about it so we add the <code>aria-hidden</code> attribute which just hides this div from accessbility technologies:</p><pre><code class="language-html">&lt;div class="absolute top-0 left-0 w-full h-screen bg-black opacity-60"
     aria-hidden="true"
     x-show="open"&gt;&lt;/div&gt;</code></pre><p>Then, we finally reach the modal contents:</p><pre><code class="language-html">        &lt;div @click.stop=""
             x-show="open"
             class="..."&gt;
          &lt;div class="p-6 border-b"&gt;
            &lt;h2 id="modal1_label"&gt;Header&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="p-6"&gt;
            Content
          &lt;/div&gt;
        &lt;/div&gt;</code></pre><p>The only important parts here are the id we set in the h2 tag, which must be equal to the one we set in <code>aria-labelledby</code> earlier and the <code>stop</code> event modifier set to the <code>@click</code> event. This will prevent the click event from bubbling up to the modal container, which would listen to it and close the modal.</p><p>That covers the markup, now let's tackle the animations:</p><pre><code class="language-html">&lt;div role="dialog"
     aria-labelledby="modal1_label"
     aria-modal="true"
     tabindex="0"
     x-show="open"
     @click="open = false; $refs.modal1_button.focus()"
     @click.away="open = false"
     class="fixed top-0 left-0 w-full h-screen flex justify-center items-center"&gt;
        &lt;div aria-hidden="true"
             class="absolute top-0 left-0 w-full h-screen bg-black transition duration-300"
             :class="{ 'opacity-60': open, 'opacity-0': !open }"
             x-show="open"
             x-transition:leave="delay-150"&gt;&lt;/div&gt;
        &lt;div data-modal-document
             @click.stop=""
             x-show="open"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="transform scale-50 opacity-0"
             x-transition:enter-end="transform scale-100 opacity-100"
             x-transition:leave="transition ease-out duration-300"
             x-transition:leave-start="transform scale-100 opacity-100"
             x-transition:leave-end="transform scale-50 opacity-0"
             class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white w-3/5 h-3/5 z-10"&gt;
          &lt;div class="p-6 border-b"&gt;
              &lt;h2 id="modal1_label" x-ref="modal1_label"&gt;Header&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="p-6"&gt;
              Content
          &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;</code></pre><p>Here we set an opacity animation to the modal backdrop: it starts with the <code>opacity-0</code> class and once the <code>open</code> property changes to true, it will replace <code>opacity-0</code> with <code>opacity-60</code>. This transition is handled by the TailwindCSS classes <code>transition duration-300</code> which should be self-explanatory, but if you want more details, <a href="https://tailwindcss.com/docs/transition-property">check it out here</a>. An interesting in this element is that we use Alpine's <code>x-transition:leave</code> to add a delay when closing the modal. This will make sure that the backdrop will start to fade out after the rest of the modal is already half way through its transition.</p><p>In the modal dialog itself, we use a more granular approach to transition it using various <code>x-transition</code> properties:</p><p><code>x-transition:enter</code> will set the classes that will be will be attached to element the entire "enter" transition. So we use it to add the transition property, duration and easing.</p><p><code>x-transition:enter-start</code> set the classes that define the initial state of the elements and <code>x-transition:enter-end</code> are the classes that defined the end state of the "enter" transition. Here we're saying that the modal should start with a 0% opacity and scaled down to 50% its size and should end with a 100% opacity and scaled up to its original size.</p><p><code>x-transition:leave-start`</code> and <code>x-transition:leave-end</code> will do the opposite of the <code>enter</code> transitions, so we also do the opposite with the dialog box: start from original size and 100% opacity to 50% its size and 0% opacity.</p><p>And that wraps it! If you're new to Alpine.js, <a href="https://dberri.com/lets-build-a-tab-navigation-with-alpine-js">check out this post</a> and I'll see you in the next one =)</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to create a toast notification with Alpine.js]]></title>
            <link>https://dberri.com/how-to-create-a-toast-notification-with-alpine-js</link>
            <guid>https://dberri.com/how-to-create-a-toast-notification-with-alpine-js</guid>
            <pubDate>Sat, 29 May 2021 15:02:30 GMT</pubDate>
            <description><![CDATA[Today I’ll show how to create a piece of UI that comes up very often when we want to communicate the result of an action to the user: toast notifications!]]></description>
            <content:encoded><![CDATA[<p>Today I’ll show how to create a piece of UI that comes up very often when we want to communicate the result of an action to the user: toast notifications! For those who don’t know, this is supposed to be a small message bubble/dialog that shows up for a few moments and go away and it’s commonly used to show the user the result of an action like an Ajax request. Like in other Alpine.js tutorials, we will use TailwindCSS to style it, so here’s the basic markup:</p><pre><code class="language-html">&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Alpine Toast Notification&lt;/title&gt;
    &lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=“stylesheet"&gt;
    &lt;script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div x-data="toastNotification()"&gt;&lt;/div&gt;
	&lt;script&gt;
		function toastNotification() {
            return {}
		}
  &lt;/script&gt;
&lt;body&gt;
</code></pre><p>You probably noticed that this time we will manage Alpine.js from the script  tag instead of doing it inline like we did previously. This is because we want to add a little more functionality to it and doing it inline would be a mess.</p><p>So, the idea is to have a small dialog that slides up from the bottom right corner of the screen and then slides down after a few seconds. The title, the message and the color will be customizable and we also need something to trigger it. I’ll just create a button for now, but you’ll see that you can improve it and use it in an Ajax request easily. Here’s the markup for the button:</p><pre><code class="language-html">&lt;button x-on:click=“openToast()” class=“bg-purple-200 hover:bg-purple-300 text-purple-500 rounded px-6 py-4 m-4”&gt;Open Toast&lt;/button&gt;
</code></pre><p>With this, we know that we will need an <code>openToast</code>  inside our <code>toastNotification</code> object which will be called when clicking the button (<code>x-on:click</code>). If you are using it with Ajax, you would call this function after the request was finished.</p><p>The toast notification itself will have this markup:</p><pre><code class="language-html">&lt;div
    x-show="open"
    class="w-96 p-4 rounded h-32 fixed bottom-4 right-4 transform-gpu transition-transform duration-400 ease"
    x-class="success ? 'bg-green-500' : 'bg-red-500'"
    x-transition:enter-start="translate-y-full"
    x-transition:enter-end="translate-y-0"
    x-transition:leave-start="translate-y-0"
    x-transition:leave-end="translate-y-full"
    &gt;
    &lt;p class="text-white"&gt;&lt;strong x-text="title"&gt;&lt;/strong&gt;&lt;/p&gt;
    &lt;p class="mt-2 text-sm text-white" x-text="message"&gt;&lt;/p&gt;
&lt;/div&gt;</code></pre><p>Remember that the notification and the button markup <em>must</em> go inside the <code>div</code> that declares <code>x-data="toastNotification()"</code> otherwise it won’t work.</p><p>Let’s go step by step:</p><p><code>x-show="open"</code>: This means that we will need a variable called <code>open</code> which will be a boolean and when it's `true`, the notification is open, and when it's <code>false</code> the notification will be closed.</p><p>There's nothing too interesting about the classes, but notice that we're using <code>fixed</code> which positions the div fixed in relation to the viewport. Then we use <code>bottom-4</code> and <code>right-4</code> to make it stick to the bottom right of the screen with a little margin. We also define a dynamic class using <code>x-class</code>: if a boolean variable called <code>success</code> is true, then it will be a green notification, otherwise it will be red.</p><p>Next, we use <code>x-transition</code> to declare that the toast will slide up when opening and slide down when closing.</p><p>Finally, we have two <code>p</code> tags that represent the notification title and the message. Both use variables to define those attributes and they are injected into the tags using <code>x-text</code>.</p><p>Now we can go back to our `toastNotification` function and defined all of these variables and functions.</p><pre><code class="language-JavaScript">function toastNotification() {
    return {
        open: false,
        title: "Toast Title",
        message: "Toast message",
        success: false,
        openToast() {
            this.open = true
            setTimeout(() =&gt; {
                this.open = false
            }, 5000)
        }
    }
}</code></pre><p>We start with the boolean property that controls when the notificaation is <code>open</code>. Then we define the <code>title</code> and <code>message</code> strings which hold the data that is displayed by the notification. We then define the boolean <code>success</code> property which toggles the notification between green (`true`) and red (`false`). Finally we have the <code>openToast</code> function which sets the <code>open</code> property to <code>true</code>, opening the notification, and 5 seconds later it sets it back to false, effectivelly closing the notification.</p><p>And this is it. One could improve this little snippet by adding the possibility of changing the title, message and success properties on demand, for example after a successful update or after a failed Ajax request. Until the next post 👋</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[The different ways to do routing in Laravel]]></title>
            <link>https://dberri.com/the-different-ways-to-do-routing-in-laravel</link>
            <guid>https://dberri.com/the-different-ways-to-do-routing-in-laravel</guid>
            <pubDate>Thu, 03 Jun 2021 13:42:01 GMT</pubDate>
            <description><![CDATA[Routing in Laravel is very flexible. You can define the routes to your app in so many ways, each with a different purpose. Today, I want to show you a few ways that helped me and that I use very frequently while working with Laravel.]]></description>
            <content:encoded><![CDATA[<p>Routing in Laravel is very flexible. You can define the routes to your app in so many ways, with so many modifiers, each with a different purpose or better suited to a specific use case. Today, I want to show you a few ways that helped me and that I use very frequently while working with Laravel.</p><p>The most basic one, is the first one shown in the documentation:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;

Route::get('/greeting', function () {
    return 'Hello World';
});</code></pre><p>This uses a closure and means that when a user hits navigates to <code>[your app host]/greeting</code> they will be greeted with a simple "Hello World" string. Technically, you can implement your entire application in this closure. Nothing will stop you if you try to add all your bussiness logic in there, but of course that's not very effective and if you have more routes it becomes very ugly.</p><p>When you just create a new Laravel application, it already comes with one basic route defined for <code>/</code> which looks like this:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});</code></pre><p>This is a more elaborate version of the first one, but in this case, it is going to return a view. This view is a Blade file located in `resources/views` which is named <code>welcome.blade.php</code>. So, now you can start composing views using blade and if there's not much going on in your view (e.g. it's a static page) you don't need to create a controller just to return a view.</p><p>Speaking of controllers, there are a few ways you can point your route to a controller or controller method. The default way that appears in the documentation looks like this:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/user', [UserController::class, 'index']);</code></pre><p>When a request hits <code>/user</code> the method "index" in the UserController class will be called. Previously, I used to define routes with a different syntax (which as far as I know is still valid and working in Laravel 8:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;

Route::get('/user', 'UserController@index');</code></pre><p>Notice that it's the same controller and method, but instead of an array, you pass a string declaring the controller and method separated by a @ symbol. Another thing you'll notice is that we don't need the <code>use</code> statement for this class because Laravel will automatically try to find that the UserController class in the <code>App\Http\Controllers</code> namespace.  Even though this works the same way as the previous example, I prefer the previous one because the it comes with some IDE niceties, like clicking on a class and navigating to its definition, or if you move the class file to another directory, it will warn you the <code>use</code> statement is not valid anymore.</p><p>Just a quick and related note, you can do the same with model relationships:</p><pre><code class="language-php">class User {
	public function books() {
    	return $this-&gt;hasMany('Book');
    }
}</code></pre><pre><code class="language-php">use App\Book;

class User {
	public function books() {
    	return $this-&gt;hasMany(Book::class);
    }
}</code></pre><h2 id="invocable-controllers">Invocable controllers</h2><p>Now, if your controller is a little complex and you use it for a single action with the <code>__invoke</code> method, you don't need to pass an array with controller and method to the route declaration, you can just pass the class as an argument, like this:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/user', UserController::class);</code></pre><h2 id="resource-routes">Resource routes</h2><p>You can also do a similar route declaration with resource controllers. This type of controller is that classic "CRUD" class, where you have <code>index</code>, <code>show</code>, <code>create</code>, <code>store</code>, <code>edit</code>, <code>update</code>, and <code>destroy</code> methods. Then you can define the route to this controller like this:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::resource('users', UserController::class);</code></pre><p>This will create a route for each of the controller methods and will name them, just like if you had created them manually following this pattern:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/users', [UserController::class, 'index'])-&gt;name('users.index');
Route::get('/users/{user}', [UserController::class, 'show'])-&gt;name('users.show');
Route::get('/users/create', [UserController::class, 'create'])-&gt;name('users.create');
Route::post('/users', [UserController::class, 'store')-&gt;name('users.store');
Route::get('/users/{user}/edit', [UserController::class, 'edit'])-&gt;name('users.edit');
Route::patch('/users/{user}', [UserController::class, 'update'])-&gt;name('users.update');
Route::delete('/users/{user}', [UserController::class, 'destroy'])-&gt;name('users.destroy');</code></pre><p>And if you don't want a few of those routes you can tell the resource method which ones you don't need:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::resource('users', UserController::class)-&gt;except(['edit', 'udpate']);</code></pre><p>Or the other way around, if you only need a few routes:</p><pre><code>use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::resource('users', UserController::class)-&gt;only(['index', 'show']);</code></pre><p>And finally, if you are developing an API, you probably don't need the <code>create</code> and <code>edit</code> routes which usually navigate the user to a form. If that's the case, you can define the routes like this:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::apiResource('users', UserController::class);</code></pre><p>There is also a plural form of each one of these two methods, if you want to define multiple resource controllers:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
use App\Http\Controllers\BookController;

Route::resources([
	'users' =&gt; UserController::class
	'books' =&gt; BookController::class
]);

// or

Route::apiResources([
	'users' =&gt; UserController::class
	'books' =&gt; BookController::class
]);</code></pre><p>One last case we can cover is nested resources. For example, if you want to update a specific book of a specific user, you could define the route as:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserBookController;

Route::update('/users/{user}/books/{book}', [UserBookController::class, 'update']);</code></pre><p>Or, using the resource syntax:</p><pre><code class="language-php">use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserBookController;

Route::resource('users.books', UserBookController::class);</code></pre><p>Much cleaner!</p><p>And that's it! I mean, there is a lot more to cover like middlewares, route grouping,  namespaces, Route Model Binding, rate limiting, and so on. But I'll write more about those in the future. If you're curious and want to dig deeper, I suggest you dive into <a href="https://laravel.com/docs/8.x/routing">Laravel's documentation</a>. See you next time 👋</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Destructuring Assignment in JavaScript]]></title>
            <link>https://dberri.com/destructuring-assignment-in-javascript</link>
            <guid>https://dberri.com/destructuring-assignment-in-javascript</guid>
            <pubDate>Fri, 04 Jun 2021 14:16:04 GMT</pubDate>
            <description><![CDATA[The destructuring assingment is an expression that allows you to extract values from arrays and properties from object into variables]]></description>
            <content:encoded><![CDATA[<p>Today, I wanted to bring you one of my favorite modern JavaScript features: Destructuring Assignment! I use it almost everyday because it is so helpful in so many situations. So, let's get started. The destructuring assingment is an expression that allows you to extract values from arrays and properties from object into variables. To give you a very simple example:</p><pre><code class="language-js">const obj = { a: 1, b: 2 }
const { a } = obj
console.log(a) // 1

const arr = [1, 2]
const [firstValue, secondValue] = arr
console.log(firstValue) // 1
console.log(secondValue) // 2</code></pre><p>In the first example, we define an object with properties "a" and "b" and in the second line we use destructuring assignment to extract property "a" into a variable with the same name. In the second example we do something similar with an array. We define a new variable called "firstValue" which holds the value in the first position in the array and "secondValue" for the value in the second position. It's the equivalent of doing:</p><pre><code class="language-js">const arr = [1, 2]
const firstValue = arr[0]
const secondValue = arr[1]
console.log(firstValue) // 1
console.log(secondValue) // 2</code></pre><p>By default, when destructuring an object you use the name of the property, but you can also rename it in the same expression if you need:</p><pre><code class="language-js">const obj = { language: 'JavaScript' }
const { language: lang } = obj
console.log(lang) // 'JavaScript'</code></pre><p>We extract the "language" property from the object but define a variable "lang" to hold its value.</p><p>You can also combine the destructuring assignment with the spread operator (another favorite of mine) to hold multiple values like this:</p><pre><code class="language-js">const arr = [1, 2, 3, 4]
const [firstValue, secondValue, ...rest] = arr
console.log(rest) // [3, 4]</code></pre><p>When destructuring arrays, you have to pay attention to the order of variables. In the code snippet above, <code>firstValue</code> holds the value in the first position of <code>arr</code>, <code>secondValue</code> holds the value in the second position and `rest` holds all the other values. Knowing this, how can we ignore one value if we need the value in position one and the value in position three? Simple:</p><pre><code class="language-js">const arr = [1, 2, 3, 4]
const [firstValue, , thirdValue] = arr
console.log(firstValue) // 1
console.log(thirdValue) // 3</code></pre><p>I tend to use object destructuring more often to get a nested value inside an API response object, for example:</p><pre><code class="language-js">const response = {
	data: {
        user: {
            name: "David",
        }
    }
}

// instead of
const name = response.data.user.name

// you can do
const { name } = response.data.user</code></pre><p>Let's say you have a promise called <code>fetchUser</code> that returns that same response object in the code snippet above but you only need "name" of the user which is nested deep inside the response, you can do something like this:</p><pre><code class="language-js">const { data: { user: { name } } } = await fetchUser()</code></pre><p>In this snippet, the only constant that will be declared is <code>name</code> which is useful when you only want part of the object returned by the function. If you want to use the same expression for function parameters, you can:</p><pre><code class="language-js">fetchUser().then(({ data: { user: { name } } }) =&gt; name)</code></pre><p>Or you can define a function that destructures it's arguments, so you can pass the full object to the function call:</p><pre><code class="language-js">const user = {
    name: "David"
}

function printName({ name }) {
    console.log(name)
}

printName(user) // 'David'</code></pre><p>Another cool use case for destructuring arrays is swapping variables in a one liner:</p><pre><code class="language-js">let a = 1
let b = 2

[a, b] = [b, a]</code></pre><p>One last thing I want to show you is that you can give these variables a default value if, for example, the extracted value is undefined:</p><pre><code class="language-js">const arr = [1]
const [first, second = 2] = arr;
console.log(first) // 1
console.log(second) // 2

const obj = { a: '1' }
const { a, b = '2' } = obj
console.log(a) // '1'
console.log(b) // '2'</code></pre><p>And that's a wrap for today. I hope you can see now how helpful this JavaScript expression is, and can incorporate in your day to day coding :) If you have any questions, <a href="https://twitter.com/dwberri">reach out to me</a> 👋</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to squash commits in Git]]></title>
            <link>https://dberri.com/how-to-squash-commits-in-git</link>
            <guid>https://dberri.com/how-to-squash-commits-in-git</guid>
            <pubDate>Mon, 07 Jun 2021 16:23:19 GMT</pubDate>
            <description><![CDATA[Today, I'd like to show you a quick tip that can help you during big git merges, future rebases or just to keep your branches and commit list cleaner.]]></description>
            <content:encoded><![CDATA[<p>Today, I'd like to show you a quick tip that can help you during big git merges, future rebases or just to keep your branches and commit list cleaner. I'm a big fan of commiting often and with small changes. But, when inevitably merging to the main branch, I like to have only meaningful commits.</p><p>Let's say you created a feature branch based on the main branch and have many commits already, most of them still work in progress (the feature is still not fully implemented). If you use <code>git log --pretty=oneline</code> you would have something similar to this:</p><pre><code class="language-sh">2ac7ce3 (HEAD -&gt; feature-branch) Finishes feature implementation
8e417e1 Fixes a bug
68e88a0 Adds another thing
eea6731 wip Adds something
bde8671 (main) #123 Feature XYZ</code></pre><p>The latest four commits are part of the feature branch and are together they represent the final feature. So, before merging it to the main branch, if you'd like to combine those commits with a meaningful message, you can run:</p><pre><code class="language-sh">git rebase -i HEAD~4</code></pre><p>Which means you will rebase interactively (the -i flag) and want to start from the current commit (HEAD) until the fourth commit from that reference, which in this example is <code>eea6731</code>.</p><p>That command will open up the list of commits with <code>pick</code> in front of the hash, like this:</p><pre><code class="language-sh">pick eea6731 wip Adds something
pick 68e88a0 Adds another thing
pick 8e417e1 Fixes a bug
pick 2ac7ce3 Finishes feature implementation

# Rebase bde8672..2ac7ce3 onto bde8672 (4 commands)</code></pre><p>Now, you will need to select the commits you want to squash into one, always from the newest to the oldest. To do that, type "i" to go into "insert mode" and replace "pick" with "s":</p><pre><code class="language-sh">pick eea6731 wip Adds something
s 68e88a0 Adds another thing
s 8e417e1 Fixes a bug
s 2ac7ce3 Finishes feature implementation

# Rebase bde8672..2ac7ce3 onto bde8672 (4 commands)</code></pre><p>You need to leave at least one commit without "s" because that's where the other commits will "fall onto". After selecting the ones you want, type <code>esc</code> and <code>:wq</code> to save the changes and leave the editor. This will open the editor again, and this time you can change the commit messages. Since this is the commit that will end up landing on master, you can be explicit about which feature you are implementing here, with a change set or whatever you think is necessary:</p><pre><code class="language-sh"># This is a combination of 4 commits.
# This is the 1st commit message:

wip Adds something

# This is the commit message #2:

Adds another thing

# This is the commit message #3:

Fixes a bug

# This is the commit message #4:

Finishes feature implementation
</code></pre><p>If you want to omit a few of the messages, you can just add a <code>#</code> in front of the message. This will turn that message into a comment and won't show up in the commit list:</p><pre><code class="language-sh"># This is a combination of 4 commits.
# This is the 1st commit message:

#wip Adds something

# This is the commit message #2:

#Adds another thing

# This is the commit message #3:

#Fixes a bug

# This is the commit message #4:

Implements Feature XYZ (issue #42)
* Adds A, B and C
* Removes X
* Fixes bug Y
</code></pre><p>When you finish, you can leave the editor the same you you did before (`esc` then <code>:wq</code>) and you'll have finished squashing the commits. Now, when you use <code>git log</code> you will notice that all the commits you squashed are gone, leaving only the ones you want with the message you want. And that's a wrap for today's post. See you on the next one 👋</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to format relative dates using native JavaScript]]></title>
            <link>https://dberri.com/relative-dates-in-native-javascript</link>
            <guid>https://dberri.com/relative-dates-in-native-javascript</guid>
            <pubDate>Tue, 02 Nov 2021 08:30:00 GMT</pubDate>
            <description><![CDATA[Relative dates are very common in applications where you want show the user the amount of time that has passed or will pass until something happens (e.g. "published 1 day ago") rather than  the specific date and time when something happened (e.g. "published on 01/11/2021").]]></description>
            <content:encoded><![CDATA[<p>In the previous post, I showed you how you can leverage the Internationalization API to format dates using the user's locale. In this post, I'll show you how you can use the same API to create relative dates.</p><p>Relative dates are very common in applications where you want show the user the amount of time that has passed or will pass until something happens rather than  the specific date and time when something happened. For example, instead of showing that a post was published on 01/11/2021, or Nov 1st, 2021, you can show: "published yesterday" or "published 1 day ago" or if it's in the future: "this post will be published in 2 days". All of this can be achieved with the Intl API, although you might need to <a href="https://caniuse.com/mdn-javascript_builtins_intl_relativetimeformat_supportedlocalesof">check browser support</a> because this feature is relatively new.</p><p>To create the relative date formatter, you need to pass two arguments: the locale and an object with options:</p><pre><code class="language-javascript">const formatter = new Intl.RelativeTimeFormat('en-US', {
    numeric: 'always',
    style: 'long'
})</code></pre><p>And to actually format a date you need to pass the number which represents the relative difference (this can be positive for the future and negative for the past) and the "unit" you want your output to be displayed ("day", "month", etc...):</p><pre><code class="language-javascript">formatter.format(1, "day") // "in 1 day"
formatter.format(-2, "month") // "2 months ago"
formatter.format(4, "year") // "in 4 years"
formatter.format(5, "hour") // "in 5 hours"</code></pre><p>You can also use the option: <code>numeric: auto</code> for a more "natural" language:</p><pre><code class="language-javascript">const formatter = new Intl.RelativeTimeFormat('en-US', {
    numeric: 'auto',
})

formatter.format(1, "day") // "tomorrow"
formatter.format(-1, "day") // "yesterday"
formatter.format(-1, "month") // "last month"
formatter.format(1, "year") // "next year"
</code></pre><p>An then there's the short and narrow options for style (which can be similar depending on the locale):</p><pre><code class="language-javascript">let formatter = new Intl.RelativeTimeFormat('en-US', {
    style: 'short',
})

formatter.format(-2, "month") // "2 mo. ago"
formatter.format(4, "year") // "in 4 yr."

formatter = new Intl.RelativeTimeFormat('en-US', {
    style: 'narrow',
})

formatter.format(-2, "month") // "2 mo. ago"
formatter.format(4, "year") // "in 4 yr."
formatter.format(-2, "minute") // "2 min. ago"</code></pre><p>And that's it for the relative date formatter. Of course, you still have to do some of the "heavy lifting" of coming up with the date difference, but that can be as simple as:</p><pre><code class="language-javascript">const diff = new Date(2021, 9, 10) - new Date();
const seconds = diff / 1000; // -1937124.765
const minutes = seconds / 60; // -5158.739066666666
const hours = minutes / 60; // -85.97898444444444

const formatter = new Intl.RelativeTimeFormat('en-US', {
    numeric: 'auto',
})

formatter.format(hours, 'hour'); // 85.979 hours ago</code></pre><p>Which you can then round or improve as per your application's requirements.</p><p>Ok, that's it for relative date formatting using the Intl API. See you on the next post!</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Useful JavaScript array methods]]></title>
            <link>https://dberri.com/useful-javascript-array-methods</link>
            <guid>https://dberri.com/useful-javascript-array-methods</guid>
            <pubDate>Mon, 02 Aug 2021 12:35:14 GMT</pubDate>
            <description><![CDATA[Each of these methods has their own use case, and even though you can achieve the same results using a combination of a for loop and a few auxiliary variables, understanding them and using them where appropriate will make your code a lot more readable and simpler.]]></description>
            <content:encoded><![CDATA[<p>Let's walk through the array methods I find more useful and that I use on a daily basis. Each of these methods has their own use case, and even though you can achieve the same results using a combination of a <code>for</code> loop and a few auxiliary variables, understanding them and using them where appropriate will make your code a lot more readable and simpler.</p><h2 id="foreach">forEach</h2><p>The first one we'll talk about is the <code>forEach</code>. This one resembles a for loop the most, but you can call it directly on a an array and have the each item of the array passed to the callback along with the current index. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">In other words</a>, it will execute the provided function once for each element. For example:</p><pre><code class="language-JavaScript">['cat', 'dog', 'fish'].forEach((animal, index) =&gt; {
    console.log([index, animal]);
})
// [0, 'cat']
// [1, 'dog']
// [2, 'fish']</code></pre><p>You can also create the function to be executed, beforehand and pass it to the method (the same applies to all the other array methods:</p><pre><code class="language-JavaScript">function printIndexAndAnimal(index, animal) {
	console.log([index, animal]);
}

['cat', 'dog', 'fish'].forEach((animal, index) =&gt; printIndexAndAnimal(index, animal))</code></pre><p>Also useful to note is that the <code>forEach</code> method (and all the other methods mentioned in this article) also passes the array itself as the third argument in the callback.</p><h2 id="filter-function filter() { [native code] }1">filter</h2><p>This is a very handy method and I think I use it almost everyday. Like the name suggests, you can use it to filter an array, and it outputs another array with the elements that pass the test you provide in the callback function. For example, if you have an array of numbers, you can create another array with only the numbers that are greater than a threshold. Or if you have an array of objects that contain an id, you can create another array that does not contain an element with a specific id using filter. E.g.</p><pre><code class="language-JavaScript">const filteredArray = [1, 2, 3].filter(element =&gt; element &gt; 1);

console.log(filteredArray)
// [2, 3]

const products = [
	{ id: 1, name: 'Computer' },
	{ id: 2, name: 'Pen' },
   	{ id: 3, name: 'Guitar' },
]

const filteredProducts = products.filter(product =&gt; product.id !== 2)

console.log(filteredProducts)
// [{ id: 1, name: 'Computer' }, { id: 3, name: 'Guitar' }]</code></pre><h2 id="find-function find() { [native code] }1">find</h2><p>You can use this method when you want to <em>find</em> one element in an array that satisfy a test function. This method will return either the first element that matches that test function otherwise it will return <code>undefined</code>.</p><pre><code class="language-JavaScript">const products = [
	{ id: 1, name: 'Computer' },
	{ id: 2, name: 'Pen' },
   	{ id: 3, name: 'Guitar' },
]

const pen = products.find(product =&gt; product.id === 2)

console.log(pen)
// { id: 2, name: 'Pen' }

const cat = products.find(product =&gt; product.id === 'cat')
console.log(cat)
// undefined
</code></pre><h2 id="some-function some() { [native code] }1">some</h2><p>This method returns either true or false if at least one element in the array matches a provided test function. It's useful when you want to make sure that at least one of the elements in the array satisfy a condition but you don't really want to manipulate that element or filter it out of the array:</p><pre><code class="language-JavaScript">function hasOneCat(element) {
	return element === 'cat';
}

cosnt hasCat = ['fish', 'cat', 'dog'].some(animal =&gt; hasOneCat(animal))
console.log(hasCat)
// true

cosnt hasCat = ['fish', 'tiger', 'dog'].some(animal =&gt; hasOneCat(animal))
console.log(hasCat)
// false</code></pre><h2 id="every-function every() { [native code] }1">every</h2><p>This one behaves similarly to <code>some</code> but in order to return <code>true</code>, all elements in the array must satisfy the condition in the test function:</p><pre><code class="language-JavaScript">function isAboveFreezingCelsius(temperature) {
	return temperature &gt; 0;
}

cosnt allElementsAreAboveFreezing = [10, 2, 1, 3, 5, 100].every(temp =&gt; isAboveFreezingCelsius(temp))
console.log(allElementsAreAboveFreezing)
// true

cosnt hasCat = [0, 1, 8, 10, -1].every(temp =&gt; isAboveFreezingCelsius(temp))
console.log(allElementsAreAboveFreezing)
// false</code></pre><h2 id="map-function map() { [native code] }1">map</h2><p>This is another method I use almost everyday and it's very useful when you want to manipulate items in the array and return another array in which the function has been applied. One use case could be convert every element in an array to a different format and output that to a different variable without changing the original array:</p><pre><code class="language-JavaScript">function fromFahrenheitToCelsius(temperature) {
	return (temperature - 32) / (9/5) 
}

const converted = [212, 98.6, 32, 0, -40].map(temp =&gt; fromFahrenheitToCelsius(temp))
console.log(converted)
// [100, 37, 0, -17.78, -40]</code></pre><h2 id="reduce-function reduce() { [native code] }1">reduce</h2><p>Reduce is a little more complicated than the others. You can manipulate the array in a deeper level. I like to think of it as a mix of filter and map on the same method, but this can be used for so much more. You can use reduce to create another array with filtered and converted elements or you can even use it to reduce an array of numbers into a single result. When using reduce, not only you provide a function (called reducer) but you can also provide an initial value. Reduce's callback provides the current value in the itereation and an accumulator. The result of your function is assigned to the accumulator which carries on to the next iteration.</p><p>Let's start with a simple example, summing an array:</p><pre><code class="language-JavaScript">cosnt initialValue = 0;
cosnt result = [1, 2, 3, 4, 5].reduce((accumulator, currentValue) =&gt; {
	accumulator += currentValue
    return accumulator;
}, initialValue);
console.log(result);
// 15</code></pre><p>Now, on to a more complex one. Let's split an array into two groups removing duplicates using reduce:</p><pre><code class="language-JavaScript">const originalArray = [2, 2, 43, 5, 11, 7, 9, 4, 20, 0, 4];
const initialValue = { lessThanTen: [], greaterThanTen };

function reducer(acc, value) {
	if (acc.lessThanTen.includes(value) || acc.greaterThanTen.includes(value)) {
    	return acc;
    }

	if (value &lt; 10) {
    	acc.lessThanTen.push(value);
    } else {
    	acc.greaterThanTen.push(value);
    }
    return acc;
}

const result = originalArray.reduce((acc, value) =&gt; reducer(acc, value))
console.log(result)
// { lessThanTen: [2, 5, 7, 9, 4, 0], greaterThanTen: [43, 11, 20] }</code></pre><p>I hope this article gave you a better idea of how all these methods work and after some practice you will have more tools on your belt and can help you improve your code's readability and performance. The best part about these methods is that besides the language syntax, the logic works the same in other languages, not only JavaScript :)</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Formatting dates in JavaScript using the user's locale]]></title>
            <link>https://dberri.com/formatting-dates-in-javascript-using-the-users-locale</link>
            <guid>https://dberri.com/formatting-dates-in-javascript-using-the-users-locale</guid>
            <pubDate>Mon, 01 Nov 2021 12:12:42 GMT</pubDate>
            <description><![CDATA[Currently, there are multiple libraries to format dates in JavaScript, but I bet you don't really need them for basic use cases. In this post I will show you how to format dates using the user's locale.]]></description>
            <content:encoded><![CDATA[<p>Currently, there are multiple libraries to format dates in JavaScript. I used <a href="https://momentjs.com">moment.js</a> for a long time, but the bundle size was always a turn down for me. Then I switched to <a href="https://date-fns.org">date-fns</a>, which has a simple API and supports tree-shaking, and I have one project where I'm using <a href="https://moment.github.io/luxon/#/">luxon</a>. They all work fine and have their use-cases, but in my opinion some times we end up bringing external libraries into our projects without really needing them, or without checking for a native approach first. I am guilty of that 😉 but lately I've tried to always search for a native approach first, before bringing in a dependency, making sure to assess whether the bigger bundle size is worth it or not.</p><p>So, let's get into it. What I want to show you is a simple use case where we need to format dates differently depending on user locale. In Brazil, the most common date format is DD/MM/YYYY or DD/MM/YY where D = Day, M = Month and Y= Year. In the US, day and month switch places and sometimes you don't add the leading zero and in Germany, it's common to use dots instead of slashes as dividers (DD.MM.YYYY). To make sure we account for all these formats, we can leverage ECMAScript Internationalization API in our application.</p><p>Let me show you an example:</p><pre><code class="language-javascript">const myDate = new Date(2021, 10, 1);
let formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(myDate)) // "11/1/2021"

formatter = new Intl.DateTimeFormat('pt-BR');
console.log(formatter.format(myDate)) // "01/11/2021"

formatter = new Intl.DateTimeFormat('de-DE');
console.log(formatter.format(myDate)) // "1.11.2021"</code></pre><p>You can also do it with a one-liner if you are not going to use the formatter later:</p><pre><code class="language-javascript">const myDate = new Date(2021, 10, 1);
console.log(new Intl.DateTimeFormat('pt-BR').format(myDate)) // "01/11/2021"</code></pre><p>Now, instead of hard coding the language code, you can either use the user's preferred language (from the browser) or your the language the user set for your website:</p><pre><code class="language-javascript">const myDate = new Date(2021, 10, 1);
const langCode = document.documentElement.lang || navigator.language;
const formatter = new Intl.DateTimeFormat(langCode);
console.log(formatter.format(myDate)) // "01/11/2021"</code></pre><p>You can also specify options for the date format:</p><pre><code class="language-javascript">const myDate = new Date(2021, 10, 1);
const formattedDate = new Intl.DateTimeFormat('en-US', {
    dateStyle: 'short',
    timeStyle: 'short'
}).format(myDate);
console.log(formattedDate) // "11/1/21, 12:00 AM"

const formattedDateMedium = new Intl.DateTimeFormat('en-US', {
    dateStyle: 'medium',
    timeStyle: 'medium'
}).format(myDate);
console.log(formattedDateMedium) // "Nov 1, 2021, 12:00:00 AM"

const formattedDateLong = new Intl.DateTimeFormat('en-US', {
    dateStyle: 'long',
    timeStyle: 'long'
}).format(myDate);
console.log(formattedDateLong) // "November 1, 2021 at 12:00:00 AM GMT-3"

const formattedDateFull = new Intl.DateTimeFormat('en-US', {
    dateStyle: 'full',
    timeStyle: 'full'
}).format(myDate);
console.log(formattedDateFull) // "Monday, November 1, 2021 at 12:00:00 AM Brasilia Standard Time"</code></pre><p>The options are very flexible: you can set different formats for calendar, week, year (2-digit or numeric), month (numeric, 2-digit, long, short and narrow), weekday, wheter to use the 12-hour time, timezone. You can checkout the full list <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#syntax">here</a>.</p><p>I hope that after reading this post you will be better equipped to make a decision on whether or not you need an external library for handling date formatting. See you on the next post!</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Formatting numbers in JavaScript]]></title>
            <link>https://dberri.com/formatting-numbers-in-javascript</link>
            <guid>https://dberri.com/formatting-numbers-in-javascript</guid>
            <pubDate>Wed, 03 Nov 2021 09:00:00 GMT</pubDate>
            <description><![CDATA[In the last couple of posts, I showed you how you can format dates and relative dates using the native Internationalization API. Today, I'll we're going to format regular numbers using the same API]]></description>
            <content:encoded><![CDATA[<p>In the last couple of posts, I showed you how you can format dates and relative dates using the native Internationalization API. Today, I'll we're going to format regular numbers using the same API. Yes, Intl is not only used for date formatting, there's a whole range of use cases including numbers, lists and plurals.</p><p>So, when I say we are going to format numbers, what I mean is: numbers are not represented the same way in different cultures. For example, in Brazil we the most common way to represent numbers is like so: 1.234.567,89. The comma is the decimal separator and the period is the thousands separators. In other cultures those are switched, or the thousands separator is not used. If your application is served in other locales, you can use the Intl API to resolve these for you and you don't even need to plug in another dependency.</p><p>Let's see how we can use it:</p><pre><code class="language-javascript">const myNumber = 1234657.89;

const formatter = new Intl.NumberFormat('pt-BR');

console.log(formatter.format(myNumber)); // 1.234.567,89

const formatterUS = new Intl.NumberFormat('en-US');

console.log(formatter.format(myNumber)); // 1,234,567.89</code></pre><p>If you've read the previous posts, you'll probably be familiar with the syntax. You first instantiate the formatter with the locale and then pass the parameters you want to format. Of course, you can also pass an options object to the formatter if you want to further customize the number format. Let check out a few options:</p><pre><code class="language-javascript">const myNumber = 1234567.89;

let formatter = new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL'
});
console.log(formatter.format(myNumber)); // R$ 1.234.567,89

formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
});
console.log(formatter.format(myNumber)); // $ 1,234,567.89

formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    currencyDisplay: 'code' // default: 'symbol'
});
console.log(formatter.format(myNumber)); // USD 1,234,567.89

formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    currencyDisplay: 'name'
});
console.log(formatter.format(myNumber)); // 1,234,567.89 US dollars</code></pre><p>There are also options to customize the way it displays negative values, for example instead of using $ -1.00 it can display ($1.00):</p><pre><code class="language-javascript">const myNumber = -1234567.89; // notice the negative sign
const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    currencySign: 'accounting'
});
console.log(formatter.format(myNumber)); // ($1,234,567.89)</code></pre><p>And, if you are working with currencies or percentages, the number of fraction digits is already set using  ISO 4217, but if you're working with regular numbers, you can set that option too:</p><pre><code class="language-javascript">const myNumber = 1234567.00;
formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(myNumber)); // 1,234,567

formatter = new Intl.NumberFormat('en-US', {
    minimumFractionDigits: 2
});
console.log(formatter.format(myNumber)); // 1,234,567.00

formatter = new Intl.NumberFormat('en-US', {
    maximumFractionDigits: 3
});
const myNumber2 = 1234567.891011
console.log(formatter.format(myNumber2)); // 1,234,567.891</code></pre><p>You can customize the notation as well:</p><pre><code class="language-javascript">formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    notation: 'standard' // default
});
console.log(formatter.format(myNumber)); // $1,234,567.89

formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    notation: 'scientific'
});
console.log(formatter.format(myNumber)); // $1,23E6

formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    notation: 'engineering'
});
console.log(formatter.format(myNumber)); // $1,23E6

formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    notation: 'compact'
});
console.log(formatter.format(myNumber)); // $1.2M</code></pre><p>There are still plenty of options we did not cover but I think the most popular ones are those in the examples, but if you can check out the full list <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters">here</a>. And this is it for this post. See you on the next one!</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How this pattern made me write reusable Vue components with little effort]]></title>
            <link>https://dberri.com/container-presentational-pattern-in-vue</link>
            <guid>https://dberri.com/container-presentational-pattern-in-vue</guid>
            <pubDate>Sat, 07 May 2022 18:54:37 GMT</pubDate>
            <description><![CDATA[In this article, I'll show you how to refactor a Vue component separating concerns and making them more reusable with the container/presentational pattern]]></description>
            <content:encoded><![CDATA[<p>A long time ago, when I started to learn Vue.js, I reached out to people who were experienced in the framework to ask for tips and get directions on what to learn and how to structure code. One tip that stuck with me was: "Always separate the logic from the presentational component”. I thought, well that seems reasonable, I'll try that. But to be honest, at that time, I did not actually understand what they meant specifically. So, with time, I wrote more and more Vue code, and got to write large SPAs until I finally understood why people told me to separate logic from the presentational layer, and most importantly, I found a great pattern that solves that problem.</p><p>Let's say you have a Vue SFC (single file component) which sends a request to the server, stores the items in state (like VueX or Pinia) and then renders a list of items. More experienced developers might already see the problem just by reading that sentence, but I took me some time. I started to have problems writing components like this because when you create unit tests for these components you have to mock so many things: the request to the server, the response, the state... the same thing happens if you want to add the component to a component library like Storybook. It's a pain. Now, if the component only take the list of items to render, render them and emit events, your life becomes a lot easier because you can test only the interface of the component i.e. if it renders <em>x</em> when you pass <em>x</em> as a prop and it emits event y when you interact in some way with the component.</p><p>The same thing happens with the logic you took away from the presentational component. When you want to test it, you can test just the bits that are important to the logic. You don't need to worry about how or who is going to render what. You just care about the functions and the flow of data.</p><p>Did I peak your interest? Ok, great! Let's see some code. I created a repo with a starter project so that you can follow along, you can <a href="https://github.com/dberri/container-presentational-pattern-demo/tree/starter">clone the repo here</a>.</p><p>To reach the point of that starter project you can run <code>npm init vue@latest</code> and when asked to “Add Pinia for state management” you select "Yes". After it finishes, go to the project directory and install the dependencies (<code>npm install</code>) and then you can run the project (<code>npm run dev</code>). Even though this is a Vue 3 example, I already applied this same pattern in Vue 2 and it works the same (and it will probably work the same in any other frontend framework).</p><p>If you cloned the repository, open it in your code editor and you should see a very simple example:</p><pre><code class="language-javascript">// src/components/PetList.vue
&lt;script setup&gt;
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue';
import { usePets } from '../stores/pets'

const store = usePets();
const { pets } = storeToRefs(store)

onMounted(() =&gt; {
    store.fetchCats();
})

const emit = defineEmits(['click']);

function handleClick(index) {
    emit('click', index);
}

defineExpose({
    pets,
    handleClick
})
&lt;/script&gt;

&lt;template&gt;
  &lt;ul&gt;
      &lt;li v-for="(pet, i) in pets"&gt;
          &lt;button @click="handleClick(i)"&gt;
              &lt;img :src="pet" /&gt;
          &lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
&lt;/template&gt;
</code></pre><p>First, don't worry about the template style or anything like that. Let's focus on the script tag first:</p><p>the <code>App.vue</code> file only renders a <code>PetList</code> component and this Vue component basically renders an image list, but in the script part, it sends a request to an API through Pinia when the component is mounted, which returns a list of cat images and uses the state to get this list and finally expose them to the template to render.</p><p>This is the store:</p><pre><code class="language-javascript">// src/stores/pets.js
import { defineStore } from 'pinia';

export const usePets = defineStore('pets', {
    state: () =&gt; {
        return {
            pets: [],
        };
    },

    actions: {
        async fetchCats() {
            try {
                const cats = await fetch(
                    '&lt;https://api.thecatapi.com/v1/images/search?limit=10&amp;order=DESC&gt;'
                ).then(res =&gt; res.json());
                this.pets = cats.map(cat =&gt; cat.url);
            } catch (e) {
                //
            }
        },
		}
})
</code></pre><p>What happens if later the business wants to render another list but this time with images of dogs?</p><p>Well, one option would be to copy the entire component, replace the logic to fetch and render dogs and call it a day. You still would have problems to test the component and now if something changes in the template, you have to change in both components. You won't forget it, right?</p><p>Another option would be to pass a prop to the component which works as a flag: <code>catOrDog</code> and based on this prop you could use if/else everywhere to render cat or dog images. You keep the template in one place but honestly the script might becomes very messy and full of “this vs that” paths.</p><h2 id="enter-container-presentational-pattern-">Enter "Container/Presentational pattern" 🎉</h2><p>As its name suggest, this pattern will allow us to separate the presentational component from the business logic, encouraging separation of concerns. The container can fetch, handle and modify the data that will be shown to the user. Their responsibility is to pass that data (which they <em>contain</em>) to a presentational component. The presentational component will actually display (present) that data to the user.</p><p>Let's refactor this code to use containers for the logic and keep the presentational component (the template) very clean and with a clear interface of props and events:</p><pre><code class="language-javascript">// src/components/PetList.vue
&lt;script setup&gt;
const props = defineProps({
  pets: {
    type: Array,
    default: () =&gt; [],
  }
});

const emit = defineEmits(['click']);

function handleClick(index) {
    emit('click', index);
}

defineExpose({
    pets: props.pets,
    handleClick
})
&lt;/script&gt;

&lt;template&gt;
  &lt;ul class="pet-list"&gt;
      &lt;li v-for="(pet, i) in pets"&gt;
          &lt;button @click="handleClick(i)" class="pet-list__button"&gt;
              &lt;img :src="pet" class="pet-list__img" /&gt;
          &lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
&lt;/template&gt;
</code></pre><p>Notice that the template part almost didn't change. The script part on the other hand is a lot simpler: you define props and events that the component might emit and that's it. If your pass cat images it will render cat images, if you pass dog images it will render dog images. If in the future the business decides to render a list for an entire zoo, you're covered. Component unit tests become a breeze and you can add the component to Storybook or other component libraries very easily.</p><p>Now, let's create a container for the CatList:</p><pre><code class="language-javascript">// src/components/CatList.container.js
import { storeToRefs } from 'pinia';
import { onMounted, h } from 'vue';
import { usePets } from '../stores/pets';
import PetList from './PetList.vue';

export default {
    setup() {
        const store = usePets();
        const { cats } = storeToRefs(store);

        onMounted(() =&gt; {
            store.fetchCats();
        });

        function handleOnClick(index) {
            console.log('Clicked on cat picture #' + index);
        }

        return () =&gt;
            h(PetList, {
                pets: cats.value,
                onClick: handleOnClick,
            });
    },
};
</code></pre><p>This container is responsible for fetching the cat images when it is mounted, get the images from state and render the PetList SFC component passing the list as a prop. It also listens for events that the PetList component might emit and handles them.</p><p>I like to use a convention for naming containers: <code>[Name of the component].container.js</code> so I know what to expect when I'm working on these files.</p><p>Now, in your <code>App.vue</code>, instead of importing <code>PetList.vue</code> you will have to import <code>CatList.container.js</code> and render that just like you render a regular Vue component. For any purposes, it is a regular Vue component, but instead of rendering a template, it returns an <code>h</code> function which actually renders the component.</p><p>Now, let's create the DogList container:</p><pre><code class="language-javascript">// src/components/DogList.container.js
import { storeToRefs } from 'pinia';
import { onMounted, h } from 'vue';
import { usePets } from '../stores/pets';
import PetList from './PetList.vue';

export default {
    setup() {
        const store = usePets();
        const { dogs } = storeToRefs(store);

        onMounted(() =&gt; {
            store.fetchDogs();
        });

        function handleOnClick(index) {
            console.log('Clicked on dog picture #' + index);
        }

        return () =&gt;
            h(PetList, {
                pets: dogs.value,
                onClick: handleOnClick,
            });
    },
};
</code></pre><p>Notice that this almost identical to <code>CatList.container</code> but instead of <code>fetchCats</code> it calls <code>fetchDogs</code> in the <code>onMounted</code>hook. This is just a simple example, in the wild the logic inside these containers can vary a lot but the important part is that your <code>PetList.vue</code> is still the same. It still accepts the same props and as long as other containers respect this interface, it should render a nice list of images.</p><p>That's it for today! I hope that with this article you now have a better understanding of this pattern and can take a "shortcut" with this knowledge so you don't go into the same pitfalls I went :)</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[The 11 books I read in 2021]]></title>
            <link>https://dberri.com/the-11-books-i-read-in-2021</link>
            <guid>https://dberri.com/the-11-books-i-read-in-2021</guid>
            <pubDate>Sat, 07 May 2022 18:54:30 GMT</pubDate>
            <description><![CDATA[I used to be a bookworm. Most of the reading was done in my commute to college or high school classes. Now, I'm trying to pick up the pace and take the time to do it, and this article is a look back on the books I read in the past year.]]></description>
            <content:encoded><![CDATA[<p>I decided to write this post to look back and reflect on the books I’ve read in the past year and also to recommend the ones I liked reading. Before I started my career in software development I used to read a lot. I was a bookworm. Most of the reading was done in my commute to college or high school classes (or during the boring classes🤷🏻). But after I started my career, since it’s not what I studied in college, I knew I had a lot to learn in web and software development, so I read less and less in favor of studying software development and I started to miss it. So for the past few years I added “reading” as my New Years resolutions, specifically to read at least one book a month which I realized this year that this is not a smart goal because I started to optimize short books just to get done with the goal and steered away from longer books which are not necessarily bad, sometimes it is quite the contrary.</p><p>Anyway, I managed to read eleven books cover to cover. I try to mix the genres I read during the year to not get bored, otherwise I’d probably only stay with the thrillers.</p><p>Here is the list, not in the order I’ve read them, categorized by “genre” (in quotes because this is how I categorize them in my head:</p><p><strong>Fiction</strong></p><h2 id="the-fireman-joe-hill">The Fireman - Joe Hill</h2><p>I love to read books by Joe Hill. I get so immersed in the story that I can just read hours without realizing it. Stephen King has the same effect on me. This book was no exception. I picked this up in January, and the premisse caught my attention: “a worldwide pandemic of spontaneous combustion that threatens to reduce civilization to ashes”. It was a great book in my opinion.</p><h2 id="red-mars-kim-stanley-robinson">Red Mars - Kim Stanley Robinson</h2><p>This one was in my list for a few years before I finally picked it up this year. It was… underwhelming. Here’s the premisse: “For eons, sandstorms have swept the desolate landscape. For centuries, Mars has beckoned humans to conquer its hostile climate. Now, in 2026, a group of 100 colonists is about to fulfill that destiny.” I think terraforming is a very interesting concept and that’s where I thought this book was going to focus more, but turns out it was very slow and the terraforming aspect of it was only the background for political intrigues. It is not a bad book, don’t get me wrong, I think I was just expecting something different. It’s the first book of a trilogy, but it didn’t entice me to pick up the next ones.</p><h2 id="rendezvous-with-rama-arthur-c-clark">Rendezvous with Rama - Arthur C. Clark</h2><p>This book is also set in space! Here’s the gist of it: astronomers found a humongous object (dubbed Rama) is hurtling through the solar system at inconceivable speed and a probe confirms it is not a natural object, but a spacecraft! So, space explorers prepare to land in Rama and discover what it really is. In my opinion it is a very fast paced book, and I think it could have explored some aspects a little bit more, but it was a good book overall.</p><p><strong>Nonfiction but science</strong></p><h2 id="astrophysics-for-people-in-a-hurry-neil-degrasse-tyson">Astrophysics for People in a Hurry - Neil DeGrasse Tyson</h2><p>This is a very good book to leave you wondering about our universe. Tyson explains many questions like “What is the nature of space and time? How do we fit within the universe? How does the universe fit within us?”</p><h2 id="the-drunkard-s-walk-leonard-mlodinow">The Drunkard’s Walk - Leonard Mlodinow</h2><p>This book is also about one of the topics I’m most interested in: randomness. And it also explains how it affects our daily lives. It is a very interesting read, brushing over the study of randomness, how it started and why. It also reminded me a little of Think Fast and Slow but this one feels a lot more technical and historical.</p><p><strong>Soft skill improvements</strong></p><h2 id="to-sell-is-human-daniel-h-pink">To Sell Is Human - Daniel H. Pink</h2><p>I reckon that selling is one of the most important topics for an entrepreneur. You can build the “best” product but don’t think it will sell itself. With that in mind, I decided to start learning more about this. This books was not that helpful in my opinion, there are many popular topics so I didn’t feel like I really learned anything new.</p><h2 id="steal-like-an-artist-austin-klein">Steal like an artist - Austin Klein</h2><p>This one I picked up almost randomly when visiting a bookstore. Yeah, even though I read most of my books in a Kindle device, I still love to wander around a nice bookstore. So, I found this book and thought it was very interesting and focused on improving one’s creativity. I’m very interested on this topic because as a programmer and entrepreneur, creativity is one of the pillars of the profession. Anyway, I’ve read this book in one sitting, it’s pretty short and there are many illustrations. I feel like the book is focused on making you increase your references and be open to different things that are not usually in your daily routine to spark creativity. Good stuff.</p><p><strong>Ideology</strong></p><h2 id="what-is-seen-and-what-is-not-seen-fr-d-ric-bastiat">What is Seen and What is Not Seen - Frédéric Bastiat</h2><p>This is a great book, I didn’t learn anything new from it, but helped me organize and clarify some ideas I had around what happens when the state (or other entities) redirects resources by enforcement of law. Usually something not obvious and sometimes more important is impacted and the results are not immediate but will be felt in the long term. This book has the famous story of the broken window, that goes more or less like this: the price paid to fix a broken window is good business for the glass store but is ultimately bad for society as the resources to fix the broken window could have been invested in something more useful.</p><h2 id="liberalism-adam-smith">Liberalism - Adam Smith</h2><p>This book is part of a larger collection from Adam Smith (The Wealth of Nations) and contains only the Theory of Price Definition in the Capitalist System and the concept of the Invisible Hand. In his own words: "By pursuing his own interest he frequently promotes that of the society more effectually than when he really intends to promote it". The author demonstrates that each individual, doing what is specific to them the best way to increase the productivity and the wealth of a nation. The concept of the invisible hand is very interesting and states that supply and demand uses prices and profits as signals to the producers what society requires. Producers want profits, so they produce what society requires, at the correct quantity to stay in a competitive price.</p><h2 id="anatomy-of-the-state-murray-n-rothbard">Anatomy of the State - Murray N. Rothbard</h2><p>This book is what makes Murray Rothbard be known as state's greatest enemy. It portrays different scenarios where the state ends freedom, destroys civilization and threatens all lives, property and social well being. As the title suggests, jsust like in an anatomy lesson, the author shows why the state is not the benevolent being that helps the poor and guides our civilization but a parasite.</p><h2 id="civil-disobedience-henry-david-thoreau">Civil Disobedience - Henry David Thoreau</h2><p>To finish off, this book calls for citizens to put their values above their government. We know that we must follow the law, but what do you do when law is unfair? Such as it was so many times in the history of governments. This book is a call to action for everyone to refuse to participate in, or encourage an unjust institution.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Build validation that you can be proud of in Laravel]]></title>
            <link>https://dberri.com/build-validation-that-you-can-be-proud-of-in-laravel</link>
            <guid>https://dberri.com/build-validation-that-you-can-be-proud-of-in-laravel</guid>
            <pubDate>Sun, 08 May 2022 13:22:00 GMT</pubDate>
            <description><![CDATA[For me, this is part of what makes Laravel so elegant and fluent. Although it allows you validate your input data using multiple approaches, it gives you guard rails to ensure that it will work well and will stay organized as your application grows.]]></description>
            <content:encoded><![CDATA[<p>Today I wanted to bring you the topic of validation in the backend using Laravel. For me, this is part of what makes this framework so elegant and fluent. Even though it allows you validate your input data using multiple approaches, it gives you guard rails to ensure that it will work well and will stay organized as your application grows.</p><p>Let's jump into the code. I created a starter project that you can use to follow along. Just clone the repo from <a href="https://github.com/dberri/laravel-validation-demo/tree/starter">here</a>. It's a simple CRUD project with a Rest API to show, store, update and remove bird sightings from the application. Currently it doesn't have any validation at all. Whatever it receives from the clients, it will try to store or update in the database, which is can be very bad even if you have validation on the client code. Let's start fixing that with <a href="https://laravel.com/docs/9.x/validation#form-request-validation">Form Requests</a>.</p><h2 id="form-requests">Form Requests</h2><p>To be honest, if you have only a couple of rules, you might not need a Form Request, you can just validate the request inside the controller method like:</p><pre><code class="language-php">// app/Http/Controllers/BurdSightingController.php

public function create(Request $request)
{
    $request-&gt;validate([
        'common_name' =&gt; 'required|string|max:255',
    ]);

    $sighting = BirdSighting::create($request-&gt;validated());
    return response()-&gt;json($sighting, 201);
}
</code></pre><p>But if you want a cleaner interface with the controller and a special place where all the validation happens, then you can create a FormRequest using an artisan command:</p><pre><code class="language-sh">php artisan make:request CreateBirdSightingRequest
</code></pre><p>This will create the following file:</p><pre><code class="language-php">// app/Http/Requests/CreateBirdSightingRequest.php

class CreateBirdSightingRequest extends FormRequest
{
    public function authorize()
    {
        return false;
    }

    public function rules()
    {
        return [
            //
        ];
    }
}
</code></pre><p>The <code>authorize</code> method can be used to determined if the current user is authorized to perform that operation, so you can, for example, make use of Gates and Policies or even simpler rules like if the user has a specific property. Make sure to return a boolean in that method: true means that the user is authorized and false means the user is not authorized and will respond with a 403 HTTP status response.</p><p>The <code>rules</code> method is where the actual validation rules go. Laravel has <a href="https://laravel.com/docs/9.x/validation#available-validation-rules">dozens of built-in</a> validation rules to add here. So, in our case, we want to validate fields in order to create a bird sighting:</p><pre><code class="language-php">    public function rules()
    {
        return [
            'common_name' =&gt; 'required|string|max:255',
            'species' =&gt; 'required|string|max:255',
            'sighted_at' =&gt; 'required|date',
            'quantity' =&gt; 'nullable|integer|min:1',
            'latitude' =&gt; 'required|numeric',
						'longitude' =&gt; ['required', 'numeric'],
        ];
    }
</code></pre><p>You will notice that for <code>longitude</code> I used a different syntax. Laravel supports both strings with rules a separated by <code>|</code>and arrays with rules are separated by commas. As far as I know, the string syntax can only be used with built-in rules. If you create a custom validation rule (and I'll show you how) then you have to use the array syntax.</p><h2 id="custom-validation-messages">Custom validation messages</h2><p>Form Requests also allow you to add custom validation messages for each field and rule. TO do that you need to override the <code>messages</code> method in the Form Request you created, for example:</p><pre><code class="language-php">    public function messages()
    {
        return [
            'common_name.required' =&gt; 'A common name for the bird you saw is required',
            'sighted_at.required' =&gt; 'An approximate date and time for the sighting is required',
        ];
    }
</code></pre><p>These messages will override the default validation message for the <code>required</code> rule which you can find in <code>resources/lang/validation.php</code>.</p><p>Finally, you have to use this Form Request in your method, so go back to the controller and replace <code>Request $request</code>with <code>CreateBirdSightingRequest $request</code></p><pre><code class="language-php">    public function create(CreateBirdSightingRequest $request)
    {
        $sighting = BirdSighting::create($request-&gt;validated());
        return response()-&gt;json($sighting, 201);
    }
</code></pre><p>You will also notice that we replaced <code>$request-&gt;all()</code> with <code>$request-&gt;validated()</code> to retrieve the validated fields from the request.</p><p>Now if you send data to that endpoint and it does not conform to the rules you added, you'll get a 422 HTTP status response with the error messages for each field.</p><h2 id="organizing-rules">Organizing rules</h2><p>Now you will need another form request for the <code>update</code> method which might have a different set of rules and speaking of set of rules, when the application starts to grow and rules start to get too "scattered" in the form request, we can create rule classes that make those sets reusable and more legible. I like to create a <code>Rules</code> directory inside <code>app/</code> and create a class that will provide the rules I need:</p><pre><code class="language-php">// app/BirdSightingRules.php

class BirdSightingRules
{
    public static function birdRules()
    {
        return [
            'common_name' =&gt; 'required|string|max:255',
            'species' =&gt; 'required|string|max:255',
            'quantity' =&gt; 'nullable|integer|min:1',
        ];
    }

    public static function locationRules()
    {
        return [
            'sighted_at' =&gt; 'required|date',
            'latitude' =&gt; 'required|numeric',
            'longitude' =&gt; ['required', 'numeric'],
        ];
    }

    public static function updateRules()
    {
        return [
            // 
        ];
    }
}
</code></pre><p>Then back in the form request:</p><pre><code class="language-php">    public function rules()
    {
        return array_merge(
            BirdSightingRules::birdRules(),
            BirdSightingRules::locationRules()
        );
    }
</code></pre><h2 id="custom-rules">Custom rules</h2><p>Laravel has so many built-in rules that it might take some time for you to need to build a custom rule, but sometimes your application might just have a specific trait that requires a custom validation rule. If that's the case, artisan has you covered:</p><pre><code class="language-sh">php artisan make:rule SightedInMarch
</code></pre><p>It will create a file under <code>app/Rules</code> which contains a custom rule with the following methods:</p><pre><code class="language-php">// app/Rules/SightedInMarch.php

class SightedInMarch implements Rule
{
    public function passes($attribute, $value)
    {
        //
    }

    public function message()
    {
        return 'The validation error message.';
    }
}
</code></pre><p>Inside the <code>passes</code> method you can create your custom rule which needs to return a boolean and inside <code>message</code> you just need to return a string with an explanation of why it failed the validation:</p><pre><code class="language-php">    public function passes($attribute, $value)
    {
        return preg_match('/^[0-9]{4}-03-[0-9]{2}/', $value);
    }

    public function message()
    {
        return 'Why are you watching birds in March?';
    }
</code></pre><p>Then you go back to you set of rules and use this custom rule with the <code>sighted_at</code> attribute:</p><pre><code class="language-php">// app/Rules/BirdSightingRules.php

    public static function locationRules()
    {
        return [
            'sighted_at' =&gt; ['required', 'date', new SightedInMarch],
            'latitude' =&gt; 'required|numeric',
            'longitude' =&gt; ['required', 'numeric'],
        ];
    }
</code></pre><p>Now all form requests that use <code>locationRules</code> will automatically validate the <code>sighted_at</code> attribute using that new custom rule. And with that, we wrap another article. See you on the next one!</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[So, let's retry that?]]></title>
            <link>https://dberri.com/so-lets-retry-that</link>
            <guid>https://dberri.com/so-lets-retry-that</guid>
            <pubDate>Sat, 24 Sep 2022 13:08:35 GMT</pubDate>
            <description><![CDATA[Sometimes we just really need to execute something until it works, right? Or just give up after a number of attempts. That's what we will talk about today: how to retry in Laravel.]]></description>
            <content:encoded><![CDATA[<p>A few weeks ago, I had to implement some code that would need to retry an operation with different parameters if it failed on the first run but only if it did with a specific exception. I thought about it for a few minutes and before I tried to implement it myself, I decided to search Laravel's documentation to see if there was a helper or something that I could use. Turns out there is a helper called: <code>retry</code>. Yes, it was exactly what I was looking for and more.</p><p>According to the <a href="https://laravel.com/docs/9.x/helpers#method-retry">docs</a>, <code>retry</code> accepts the number of attempts, the callback where your implementation goes and a third (optional) parameter that can either be a number of milliseconds or a closure to change the time it will wait before the next attempt. It also accepts a fourth (also optional) parameter: a closure that returns the condition in which the method should retry. For example, if you want to retry only if a specific exception was thrown.</p><p>If the callback you implement throws an exception, the <code>retry</code> method will catch that and if it still has more attempts, it will retry, otherwise it will throw that exception. On the other hand, if your callback is successful, the <code>retry</code> method will return the value your callback returned. Very straightforward, huh?</p><p>Ok, now that you have an overview of how it works, let's see some code. As an example, let's create a function that gives you three chances of guessing a random number:</p><pre><code class="language-php">function guessTheNumber($num) {
	$value = rand(0, 10);
	if ($value === $num) {
	    return true;
    }
    throw new \Exception('You guessed the wrong number!');
}

function tryYourLuck() {
	return retry(3, function() {
    	return guessTheNumber(5);
    }, 100);
}</code></pre><p>The first function (<code>guessTheNumber</code>) accepts a value and compares it to a random one. If they are equal, return true, otherwise throw an exception. It is just a silly example to show how retry works. The second function (<code>tryYourLuck</code>) is where we call <code>guessTheNumber</code> with our guessed value (<code>5</code>) and since we have three chances, we call <code>retry</code> with 3 as the first parameter. Just to show you how it works, I'm also passing a third parameter to <code>retry</code> which is the amount of milliseconds the function should wait before retrying. Now, if we call <code>tryYourLuck</code> and it <code>guessTheNumber</code> returns true in <em>any</em> of the three attempts, <code>tryYourLuck</code> will also return true. But, if it retries three times and all of them threw an exception, then <code>tryYourLuck</code> will throw the last exception.</p><p>The feature that really helped me was the option to pass a closure as the fourth argument and use that to decide if we the method should retry. The closure accepts the exception as its first parameter, so we can do something like:</p><pre><code class="language-php">class MyException extends Exception { }

function guessTheNumber($num) {
	$value = rand(0, 10);
	if ($value === $num) {
	    return true;
    }
    throw new MyException('You guessed the wrong number!');
}

function tryYourLuck() {
	return retry(3, function() {
    	return guessTheNumber(5);
    }, 100, function($exception) {
    	return $exception instanceof MyException;
    });
}</code></pre><p>Here we are telling the retry method that it should only retry if the exception if caught was <code>MyException</code>. If it catches any other exception, it should not retry at all.</p><p>And with that, I wrap up this blog post. Until next time!</p>]]></content:encoded>
        </item>
    </channel>
</rss>