<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Javier Gongora</title>
    <description>The latest articles on Forem by Javier Gongora (@javigong).</description>
    <link>https://forem.com/javigong</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F866946%2Ff77db278-a1a7-4032-9585-4fd79b2c18a1.jpg</url>
      <title>Forem: Javier Gongora</title>
      <link>https://forem.com/javigong</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/javigong"/>
    <language>en</language>
    <item>
      <title>Binary Tree: Understanding How In-Order Traversal Works</title>
      <dc:creator>Javier Gongora</dc:creator>
      <pubDate>Tue, 27 Dec 2022 20:18:25 +0000</pubDate>
      <link>https://forem.com/javigong/binary-tree-understanding-how-in-order-traversal-works-ee0</link>
      <guid>https://forem.com/javigong/binary-tree-understanding-how-in-order-traversal-works-ee0</guid>
      <description>&lt;p&gt;Tree traversals are a fundamental concept in computer science and are used to visit all the nodes of a tree in a specific order. In this post, we'll discuss how to implement an inorder traversal using a recursive function in TypeScript, and we'll walk through an example to see how the function calls are added to the call stack and how the root node values are returned. &lt;/p&gt;

&lt;h2&gt;
  
  
  A way of visiting binary tree nodes
&lt;/h2&gt;

&lt;p&gt;An in-order traversal is a way of visiting the nodes of a binary tree in a specific order. The order is defined as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Visit the left subtree&lt;/li&gt;
&lt;li&gt;Visit the root node&lt;/li&gt;
&lt;li&gt;Visit the right subtree&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This order ensures that the nodes are visited in a left-to-right fashion, which can be useful in certain scenarios, such as printing out the values of a binary search tree in ascending order.&lt;/p&gt;

&lt;h2&gt;
  
  
  In-order traversal in TypeScript
&lt;/h2&gt;

&lt;p&gt;In order to implement an in-order traversal, we can use a recursive function that follows the steps described above. Here is an example of how we could implement an in-order traversal in TypeScript:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;inorderTraversal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;root&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Node&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;root&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// base case&lt;/span&gt;

  &lt;span class="nf"&gt;inorderTraversal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;root&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;left&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// visit left subtree&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;root&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// visit root node&lt;/span&gt;
  &lt;span class="nf"&gt;inorderTraversal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;root&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;right&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// visit right subtree&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This function takes a binary tree as an input (the "root" node), and it performs an inorder traversal on that tree. It follows the steps described above: it visits the left subtree, then the root node, and then the right subtree.&lt;/p&gt;

&lt;h2&gt;
  
  
  Recursive function calls added to the call stack
&lt;/h2&gt;

&lt;p&gt;As the function calls itself recursively, it adds new function calls to the top of the &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/Call_Stack" rel="noopener noreferrer"&gt;call stack&lt;/a&gt;. This creates a stack-like structure, with the most recent function call at the top. Let's see how this looks in practice by considering the following example tree:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    F
   / \
  B   G
 / \   \
A   D   I
   /
  C
 /
E
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;The inorderTraversal function is called on the root node (F).&lt;/li&gt;
&lt;li&gt;The function makes a recursive call on the left subtree of the root node (B).&lt;/li&gt;
&lt;li&gt;The function makes a recursive call on the left subtree of the left child (A).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the left child (A).&lt;/li&gt;
&lt;li&gt;The function makes a recursive call on the right subtree of the left child (D).&lt;/li&gt;
&lt;li&gt;The function makes a recursive call on the left subtree of the right child (C).&lt;/li&gt;
&lt;li&gt;The function makes a recursive call on the left subtree of the left grandchild (E).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the left grandchild (E).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the right grandchild (C).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the right child (D).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the left child (B).&lt;/li&gt;
&lt;li&gt;The function makes a recursive call on the right subtree of the root node (G).&lt;/li&gt;
&lt;li&gt;The function makes a recursive call on the right subtree of the right child (I).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the right grandchild (I).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the right child (G).&lt;/li&gt;
&lt;li&gt;The function returns and prints the value of the root node (F).&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Returning the root node values
&lt;/h2&gt;

&lt;p&gt;As you can see, the function calls are being added to the top of the call stack, and the root node values are being printed as the function returns from each recursive call. The node values are visited in the order A, E, C, D, B, I, G, F, which is the in-order traversal of the tree.&lt;/p&gt;

&lt;p&gt;I hope this helps you understand how an in-order traversal works and how the function calls are added to the call stack. An in-order traversal can be a useful way to visit the nodes of a binary tree in a specific order, and it can be implemented using a simple recursive function.&lt;/p&gt;

&lt;p&gt;It's worth noting that there are other ways to traverse a binary tree, such as pre-order traversal and post-order traversal. Pre-order traversal visits the root node first, then the left subtree, and then the right subtree. Post-order traversal visits the left subtree first, then the right subtree, and then the root node.&lt;/p&gt;

&lt;p&gt;If you have any questions, please let me know in the comments section!&lt;/p&gt;

</description>
      <category>jokes</category>
      <category>watercooler</category>
    </item>
    <item>
      <title>How to Contribute to an Open Source Project on GitHub</title>
      <dc:creator>Javier Gongora</dc:creator>
      <pubDate>Fri, 23 Dec 2022 19:47:49 +0000</pubDate>
      <link>https://forem.com/javigong/how-to-contribute-to-an-open-source-project-on-github-1hbo</link>
      <guid>https://forem.com/javigong/how-to-contribute-to-an-open-source-project-on-github-1hbo</guid>
      <description>&lt;p&gt;Contributing to an open source project on GitHub is a great way to learn new skills, collaborate with others, and give back to the developer community. In this tutorial, we'll go over the steps you need to take to fork and clone an open source repository, set up the project locally, and create a pull request.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Before you get started, you'll need to have a GitHub account and have Git installed on your local machine. If you don't have a GitHub account, you can sign up for one for free at &lt;a href="https://github.com/" rel="noopener noreferrer"&gt;https://github.com/&lt;/a&gt;. To install Git, you can follow the instructions at &lt;a href="https://git-scm.com/downloads" rel="noopener noreferrer"&gt;https://git-scm.com/downloads&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Fork the Repository
&lt;/h2&gt;

&lt;p&gt;The first step in contributing to an open source project on GitHub is to fork the repository. This creates a copy of the repository under your own GitHub account, which you can then use to make changes and submit a pull request.&lt;/p&gt;

&lt;p&gt;To fork a repository, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the repository you want to fork on GitHub.&lt;/li&gt;
&lt;li&gt;Click the "Fork" button in the top-right corner of the page.&lt;/li&gt;
&lt;li&gt;Choose the account you want to fork the repository to.&lt;/li&gt;
&lt;li&gt;Click the "Fork repository" button.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This will create a copy of the repository under your own account, which you can then clone to your local machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Clone the Repository
&lt;/h2&gt;

&lt;p&gt;Once you've forked the repository, the next step is to clone it to your local machine. This will allow you to make changes to the code and test them locally before submitting a pull request.&lt;/p&gt;

&lt;p&gt;To clone the repository, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the repository you forked on GitHub.&lt;/li&gt;
&lt;li&gt;Click the "Clone or download" button.&lt;/li&gt;
&lt;li&gt;Copy the URL of the repository.&lt;/li&gt;
&lt;li&gt;Open a terminal window on your local machine.&lt;/li&gt;
&lt;li&gt;Navigate to the directory where you want to clone the repository.&lt;/li&gt;
&lt;li&gt;Run the following command to clone the repository:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone &amp;lt;repository URL&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Press Enter.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This will create a local copy of the repository on your machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Set Up the Project Locally
&lt;/h2&gt;

&lt;p&gt;Once you've cloned the repository to your local machine, the next step is to set up the project locally. This typically involves installing any dependencies and running any setup scripts.&lt;/p&gt;

&lt;p&gt;To set up the project locally, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Navigate to the directory where you cloned the repository.&lt;/li&gt;
&lt;li&gt;Follow the project's setup instructions, which can usually be found in the repository's README file. This may involve installing dependencies, running setup scripts, or both.&lt;/li&gt;
&lt;li&gt;Once the project is set up, you can start making changes to the code.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Step 4: Create a Pull Request
&lt;/h2&gt;

&lt;p&gt;Once you've made the changes you want to contribute to the project, the next step is to create a pull request. A pull request is a request to the maintainers of the repository to review and potentially merge your changes into the main branch of the repository.&lt;/p&gt;

&lt;p&gt;To create a pull request, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Commit your changes to your local repository.&lt;/li&gt;
&lt;li&gt;Push your changes to your fork on GitHub.&lt;/li&gt;
&lt;li&gt;Navigate to the repository you forked on GitHub.&lt;/li&gt;
&lt;li&gt;Click the "Compare &amp;amp; pull request" button.&lt;/li&gt;
&lt;li&gt;Enter a title and description for your pull request.&lt;/li&gt;
&lt;li&gt;Click the "Create pull request" button.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This will create a pull request for the maintainers of the repository to review. They may ask for changes to be made or may merge the pull request as-is.&lt;/p&gt;

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

&lt;p&gt;Contributing to an open source project on GitHub is a great way to learn new skills, collaborate with others, and give back to the developer community. By following the steps outlined in this tutorial, you can fork and clone an open source repository, set up the project locally, and create a pull request.&lt;/p&gt;

&lt;p&gt;I hope this tutorial was helpful, if you have any questions or would like further information, don't hesitate to ask in the comments section.&lt;/p&gt;

&lt;p&gt;Credits:&lt;br&gt;
&lt;a href="https://www.freepik.com/free-vector/open-source-concept-illustration_9712743.htm#query=sources&amp;amp;position=0&amp;amp;from_view=keyword" rel="noopener noreferrer"&gt;Image by storyset&lt;/a&gt; on Freepik&lt;/p&gt;

</description>
      <category>gratitude</category>
    </item>
    <item>
      <title>Asymmetric Encryption and the Diffie-Hellman Secret Key Exchange: Understanding How They Work Together</title>
      <dc:creator>Javier Gongora</dc:creator>
      <pubDate>Fri, 23 Dec 2022 00:24:34 +0000</pubDate>
      <link>https://forem.com/javigong/asymmetric-encryption-and-the-diffie-hellman-secret-key-exchange-understanding-how-they-work-together-417</link>
      <guid>https://forem.com/javigong/asymmetric-encryption-and-the-diffie-hellman-secret-key-exchange-understanding-how-they-work-together-417</guid>
      <description>&lt;p&gt;Symmetric encryption, asymmetric encryption, and the Diffie-Hellman key exchange are three important technologies that are commonly used to secure communication over the internet. In this tutorial, we'll go over what these technologies are and how they differ from each other.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Symmetric Encryption?
&lt;/h2&gt;

&lt;p&gt;Symmetric encryption is a type of encryption that uses the same key to encrypt and decrypt data. This means that the same key is used to secure the data while it is being transmitted and to decrypt it once it reaches its destination.&lt;/p&gt;

&lt;p&gt;One advantage of symmetric encryption is that it is generally faster and more efficient than asymmetric encryption, which we'll discuss later. However, it also has a major drawback: the key must be shared between the sender and the receiver of the data in order for the encryption and decryption to work. This means that the key must be securely transmitted from the sender to the receiver, which can be difficult to do over an insecure communication channel.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Asymmetric Encryption?
&lt;/h2&gt;

&lt;p&gt;Asymmetric encryption, also known as public-key encryption, is a type of encryption that uses a pair of keys - a public key and a private key - to encrypt and decrypt data.&lt;br&gt;
The public key is used to encrypt the data, while the private key is used to decrypt it. This means that anyone can use the public key to send an encrypted message to the owner of the private key, but only the owner of the private key can decrypt and read the message.&lt;/p&gt;

&lt;p&gt;One advantage of asymmetric encryption is that the key does not need to be shared between the sender and the receiver of the data. This makes it easier to establish a secure connection over an insecure communication channel. However, asymmetric encryption is generally slower and less efficient than symmetric encryption.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the Diffie-Hellman Key Exchange?
&lt;/h2&gt;

&lt;p&gt;The Diffie-Hellman key exchange is a method for securely exchanging a secret key over an insecure communication channel. It allows two parties to generate a shared secret key without revealing the key to any third party.&lt;/p&gt;

&lt;p&gt;The Diffie-Hellman key exchange is an asymmetric encryption method, which means that it relies on the use of public and private keys to establish a secure connection. However, it also utilizes the benefits of symmetric encryption, which is a type of encryption that uses the same key to encrypt and decrypt data.&lt;/p&gt;

&lt;p&gt;To understand how the Diffie-Hellman key exchange works, let's go back to our example of Alice and Bob. Suppose that Alice and Bob want to exchange a secret key to use for symmetric encryption.&lt;/p&gt;

&lt;p&gt;To do this, Alice and Bob can use the Diffie-Hellman key exchange as follows:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Alice and Bob agree on two large prime numbers, p and g.&lt;/li&gt;
&lt;li&gt;Alice and Bob each generate a secret random number, a and b, respectively.&lt;/li&gt;
&lt;li&gt;Alice and Bob each calculate A and B using the following formulas:&lt;/li&gt;
&lt;li&gt;A = g^a mod p B = g^b mod p&lt;/li&gt;
&lt;li&gt;Alice and Bob each send their calculated values to each other.&lt;/li&gt;
&lt;li&gt;Alice and Bob each calculate the shared secret key using the following formulas:&lt;/li&gt;
&lt;li&gt;s_Alice = B^a mod p s_Bob = A^b mod p&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The shared secret key, s, will be the same for both Alice and Bob. They can now use this key for symmetric encryption to communicate securely.&lt;/p&gt;

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

&lt;p&gt;Symmetric encryption, asymmetric encryption, and the Diffie-Hellman key exchange are all important technologies that play a role in securing communication over the internet. Symmetric encryption is generally faster and more efficient, but requires the key to be shared between the sender and receiver. Asymmetric encryption does not require the key to be shared, but is generally slower and less efficient. The Diffie-Hellman key exchange is an asymmetric encryption method that is used to securely exchange a secret key for use in symmetric encryption.&lt;/p&gt;

&lt;p&gt;I hope this tutorial was helpful in introducing you to the differences between symmetric encryption, asymmetric encryption, and the Diffie-Hellman key exchange. If you have any questions or would like further information, don't hesitate to ask in the comments section.&lt;/p&gt;

&lt;p&gt;Credits:&lt;br&gt;
&lt;a href="https://www.freepik.com/free-vector/security-concept-illustration-people-holding-chain_3226083.htm#query=encryption&amp;amp;from_query=asymmetric%20encryption&amp;amp;position=0&amp;amp;from_view=search&amp;amp;track=sph" rel="noopener noreferrer"&gt;Image by rawpixel.com&lt;/a&gt; on Freepik&lt;/p&gt;

</description>
      <category>chatgpt</category>
      <category>ai</category>
      <category>programming</category>
    </item>
    <item>
      <title>Writing More Effective Front-End Tests with Jest</title>
      <dc:creator>Javier Gongora</dc:creator>
      <pubDate>Thu, 22 Dec 2022 21:36:36 +0000</pubDate>
      <link>https://forem.com/javigong/writing-more-effective-front-end-tests-with-jest-52e</link>
      <guid>https://forem.com/javigong/writing-more-effective-front-end-tests-with-jest-52e</guid>
      <description>&lt;p&gt;Front-end testing can be challenging as it often involves testing complex user interfaces and interactions. In this tutorial, we'll go over some tips for writing more effective front-end tests with Jest.&lt;/p&gt;

&lt;h2&gt;
  
  
  Test the component, not the implementation
&lt;/h2&gt;

&lt;p&gt;One of the key principles of front-end testing is to test the component, not the implementation. This means that you should focus on testing the output and behaviour of the component, rather that the specific implementation details.&lt;/p&gt;

&lt;p&gt;For example, consider the following component:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;MyButton&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;oncClick&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;children&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To test this component effectively, you should focus on testing the output (e.g. the rendered HTML) and the behaviour (e.g. the onClick event) rather than the specific implementation details (e.g. the fact that it uses a button element).&lt;/p&gt;

&lt;h2&gt;
  
  
  Use the right test utilities
&lt;/h2&gt;

&lt;p&gt;Jest provides a variety of test utilities that can make it easier to write effective front-end tests.&lt;/p&gt;

&lt;p&gt;For example, the &lt;code&gt;@testing-library/react&lt;/code&gt; library provides utility functions for rendering and interacting with React components in a test environment.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;@testing-library/jest-dom&lt;/code&gt; library provides additional utility functions for making assertions about the DOM, such as &lt;code&gt;expect(element).toHaveTextContent(text)&lt;/code&gt; and &lt;code&gt;expect(element).toBeDisabled()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Using the right test utilities can make it much easier to write tests that are both effective and easy to maintain.&lt;/p&gt;

&lt;h2&gt;
  
  
  Test asynchronous behaviour
&lt;/h2&gt;

&lt;p&gt;Many front-end components have asynchronous behaviour, such as making network requests or updating the DOM after a delay. Testing this behaviour can be challenging, but Jest provides a variety of tools for handling asynchronous code in tests.&lt;/p&gt;

&lt;p&gt;For example, you can use the &lt;code&gt;async&lt;/code&gt; and &lt;code&gt;await&lt;/code&gt; keywords to write asynchronous tests:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;async test&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;asyncFunc&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toEqual&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can also use the &lt;code&gt;done&lt;/code&gt; callback to write asynchronous tests that don't use &lt;code&gt;async&lt;/code&gt; and &lt;code&gt;await&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;async test&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;done&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;asyncFunc&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toEqual&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;done&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Testing asynchronous behaviour is essential for ensuring that your front-end components behave correctly in a real-world environment.&lt;/p&gt;

&lt;h2&gt;
  
  
  Write testable components
&lt;/h2&gt;

&lt;p&gt;Finally, it's important to design your front-end components in a way that makes them easy to test. This might involve extracting logic into separate functions, using props for input and state for output, and avoiding side effects where possible.&lt;/p&gt;

&lt;p&gt;By writing testable components, you'll be able to write more effective tests that are easier to maintain and less prone to breaking when the implementation changes.&lt;/p&gt;

&lt;p&gt;Credits:&lt;br&gt;
&lt;a href="https://www.freepik.com/free-vector/search-engine-marketing-business-copywriting-service-content-management_12085329.htm#query=testing&amp;amp;position=4&amp;amp;from_view=search&amp;amp;track=sph"&gt;Image by vectorjuice&lt;/a&gt; on Freepik&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>testing</category>
      <category>jest</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Using the Rsync Command for Copying and Synchronizing Files and Directories</title>
      <dc:creator>Javier Gongora</dc:creator>
      <pubDate>Thu, 22 Dec 2022 21:27:01 +0000</pubDate>
      <link>https://forem.com/javigong/using-the-rsync-command-for-copying-and-synchronizing-files-and-directories-1p83</link>
      <guid>https://forem.com/javigong/using-the-rsync-command-for-copying-and-synchronizing-files-and-directories-1p83</guid>
      <description>&lt;p&gt;Rsync is a powerful Linux/Unix command that allows you to copy and synchronize files and directories between local and remote systems. It is particularly useful for synchronizing large numbers of files, as it is efficient and only transfers the differences between the source and destination files.&lt;/p&gt;

&lt;p&gt;Here's a brief overview of how to use the Rsync command:&lt;/p&gt;

&lt;h2&gt;
  
  
  Copying files and directories locally
&lt;/h2&gt;

&lt;p&gt;To copy a file or directory from one location to another on the same system, you can use the following syntax:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync &amp;lt;source&amp;gt; &amp;lt;destination&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For example, to copy a file named file.txt from the current directory to the /tmp directory, you could use the following command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync file.txt /tmp&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;To copy a directory and its contents, you can add the -r flag to the command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync -r &amp;lt;source&amp;gt; &amp;lt;destination&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For example, to copy the /var/www/html directory and its contents to the /tmp directory, you could use the following command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync -r /var/www/html /tmp&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Copying files and directories remotely
&lt;/h2&gt;

&lt;p&gt;To copy a file or directory from a remote system to a local system, you can use the following syntax:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync &amp;lt;user&amp;gt;@&amp;lt;remote_host&amp;gt;:&amp;lt;source&amp;gt; &amp;lt;destination&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For example, to copy a file named file.txt from the /tmp directory on a remote system with hostname example.com to the current directory on your local system, you could use the following command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync user@example.com:/tmp/file.txt .&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;To copy a directory and its contents, you can add the -r flag to the command as before:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync -r &amp;lt;user&amp;gt;@&amp;lt;remote_host&amp;gt;:&amp;lt;source&amp;gt; &amp;lt;destination&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For example, to copy the /var/www/html directory and its contents from a remote system with hostname example.com to the /tmp directory on your local system, you could use the following command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync -r user@example.com:/var/www/html /tmp&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Synchronizing files and directories
&lt;/h2&gt;

&lt;p&gt;To synchronize files and directories between two systems, you can use the -a flag, which stands for "archive" and preserves the file attributes and permissions. You can also use the -u flag, which stands for "update" and only transfers files that are newer on the source system:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync -au &amp;lt;user&amp;gt;@&amp;lt;remote_host&amp;gt;:&amp;lt;source&amp;gt; &amp;lt;destination&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For example, to synchronize the /var/www/html directory and its contents from a remote system with hostname example.com to the /tmp directory on your local system, making sure to only transfer newer files and preserve file attributes and permissions, you could use the following command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rsync -au user@example.com:/var/www/html /tmp&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Whether you're looking to simply copy files from one location to another, or synchronize entire directories between systems, Rsync can be a valuable tool to have in your toolkit. So give it a try and see how it can streamline your file management processes.&lt;/p&gt;

&lt;p&gt;Credits:&lt;br&gt;
&lt;a href="https://www.freepik.com/free-vector/real-time-sync-concept-illustration_5842193.htm#query=synchronize&amp;amp;position=12&amp;amp;from_view=search&amp;amp;track=sph"&gt;Image by storyset&lt;/a&gt; on Freepik&lt;/p&gt;

</description>
      <category>linux</category>
      <category>rsync</category>
      <category>commandline</category>
      <category>filetransfer</category>
    </item>
    <item>
      <title>Setting up Apache Virtual Hosts on an Ubuntu Server</title>
      <dc:creator>Javier Gongora</dc:creator>
      <pubDate>Thu, 22 Dec 2022 04:35:54 +0000</pubDate>
      <link>https://forem.com/javigong/setting-up-apache-virtual-hosts-on-an-ubuntu-server-407l</link>
      <guid>https://forem.com/javigong/setting-up-apache-virtual-hosts-on-an-ubuntu-server-407l</guid>
      <description>&lt;p&gt;Virtual hosts allow you to host multiple websites on a single server. This can be useful if you want to host multiple websites on a single instance, or if you want to run multiple versions of a website (e.g. staging and production).&lt;/p&gt;

&lt;p&gt;In this tutorial, we'll go through the steps of setting up Apache virtual hosts on an Ubuntu server.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Install Apache:
&lt;/h2&gt;

&lt;p&gt;First, make sure that Apache is installed on your server. If it's not already installed, you can install it with the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt-get install apache2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2. Enable Apache's virtual host module:
&lt;/h2&gt;

&lt;p&gt;Next, we need to enable Apache's virtual host module. This can be done with the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo a2enmod vhost_alias
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3. Create a new virtual host file:
&lt;/h2&gt;

&lt;p&gt;Next, we'll create a new virtual host file for each website that we want to host. These files can be placed in the /etc/apache2/sites-available directory.&lt;/p&gt;

&lt;p&gt;To create a new virtual host file, copy the default virtual host file and modify it to suit your needs. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/example.com.conf
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then, open the new virtual host file in a text editor and modify it to specify the document root (i.e. the directory containing the website's files) and the server name:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;VirtualHost *:80&amp;gt;
  ServerName example.com
  ServerAlias www.example.com
  DocumentRoot /var/www/example.com/public_html
  &amp;lt;Directory /var/www/example.com/public_html&amp;gt;
    AllowOverride All
  &amp;lt;/Directory&amp;gt;
&amp;lt;/VirtualHost&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Be sure to replace example.com with the actual domain name of your website.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Enable the new virtual host:
&lt;/h2&gt;

&lt;p&gt;To enable the new virtual host, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo a2ensite example.com.conf
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  5. Restart Apache:
&lt;/h2&gt;

&lt;p&gt;Finally, restart Apache to apply the changes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo systemctl restart apache2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it! You should now be able to access your website at the specified domain name.&lt;/p&gt;

</description>
      <category>apache</category>
      <category>webdev</category>
      <category>virtualhost</category>
      <category>ubuntu</category>
    </item>
    <item>
      <title>How to use SSH keys with GitHub repositories</title>
      <dc:creator>Javier Gongora</dc:creator>
      <pubDate>Wed, 21 Dec 2022 16:48:18 +0000</pubDate>
      <link>https://forem.com/javigong/how-to-use-ssh-with-a-github-repository-16ha</link>
      <guid>https://forem.com/javigong/how-to-use-ssh-with-a-github-repository-16ha</guid>
      <description>&lt;p&gt;SSH (Secure Shell) is a network protocol that allows you to securely connect to a remote computer. It is commonly used for remote command-line access and remote command execution.&lt;/p&gt;

&lt;p&gt;In this tutorial, we'll go over how to use SSH to work with GitHub repositories on a MacOS or Linux system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Generating an SSH key
&lt;/h2&gt;

&lt;p&gt;Before you can use SSH to connect to a remote system, you'll need to generate an SSH key. An SSH key consists of a public key and a private key. The public key is used to encrypt data, while the private key is used to decrypt it.&lt;/p&gt;

&lt;p&gt;To generate an SSH key on a MacOS or Linux system, open a terminal and enter the following command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;ssh-keygen -t rsa -b 4096 -C "your_email@example.com"&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Replace "&lt;a href="mailto:your_email@example.com"&gt;your_email@example.com&lt;/a&gt;" with your email address.&lt;/p&gt;

&lt;p&gt;This will generate a new SSH key pair and prompt you to enter a file in which to save the key. You can accept the default location by pressing Enter.&lt;/p&gt;

&lt;p&gt;You will then be prompted to enter a passphrase for the key. This is an optional security measure that allows you to protect your private key with a password.&lt;/p&gt;
&lt;h2&gt;
  
  
  Adding the SSH key to your GitHub account
&lt;/h2&gt;

&lt;p&gt;Once you have generated an SSH key, you'll need to add it to your GitHub account. To do this, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open a terminal and enter the following command to print your public key:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;code&gt;cat ~/.ssh/id_rsa.pub&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Copy the output of the command to your clipboard.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Go to your GitHub account settings and select the "SSH and GPG keys" tab.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Click the "New SSH key" button.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the "Title" field, enter a descriptive name for the key (e.g. "Work laptop").&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the "Key" field, paste the public key that you copied to your clipboard.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Click the "Add SSH key" button to add the key to your account.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;
  
  
  Cloning a repository using SSH
&lt;/h2&gt;

&lt;p&gt;Now that you've added your SSH key to your GitHub account, you can use SSH to clone a repository. To do this, follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Go to the repository page on GitHub.&lt;/li&gt;
&lt;li&gt;In the "Clone or download" dropdown, click the "Use SSH" button.&lt;/li&gt;
&lt;li&gt;Copy the SSH URL of the repository to your clipboard.&lt;/li&gt;
&lt;li&gt;Open a terminal and navigate to the directory where you want to clone the repository.&lt;/li&gt;
&lt;li&gt;Enter the following command to clone the repository:
&lt;code&gt;git clone &amp;lt;repository_url&amp;gt;
&lt;/code&gt;
Replace &lt;code&gt;&amp;lt;repository_url&amp;gt;&lt;/code&gt; with the SSH URL of the repository that you copied to your clipboard.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The repository will be cloned to the current directory.&lt;/p&gt;
&lt;h2&gt;
  
  
  Working with a repository using SSH
&lt;/h2&gt;

&lt;p&gt;Once you have cloned a repository using SSH, you can work with it as you would with any other local repository. To push changes to the repository, use the git push command.&lt;/p&gt;

&lt;p&gt;For example, to commit and push changes to a repository, you can use the following commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Commit message"&lt;/span&gt;
git push
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that you may be prompted to enter your SSH passphrase when pushing changes to the repository.&lt;/p&gt;

&lt;h2&gt;
  
  
  Troubleshooting
&lt;/h2&gt;

&lt;p&gt;If you encounter any issues while using SSH, there are a few things you can try:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Make sure that your SSH key is correctly added to your GitHub account.&lt;/li&gt;
&lt;li&gt;Make sure that you are using the correct SSH URL for the repository. You can find the SSH URL in the "Clone or download" dropdown on the repository page on GitHub.&lt;/li&gt;
&lt;li&gt;If you are prompted for a password when connecting to the remote system, make sure that you have entered the correct SSH passphrase for your private key.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>ssh</category>
      <category>github</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
