DEV Community: Jordan Jaramillo

Why Should You Prefer TypeScript over JavaScript in React.JS?

Jordan Jaramillo — Fri, 24 Mar 2023 16:20:35 +0000

This post was generated by artificial intelligence.

As a frontend developer, I have worked on multiple projects using both TypeScript and JavaScript. While both are great programming languages, TypeScript has become my go-to language when it comes to developing React applications. In this blog post, I'll explain why you should prefer TypeScript over JavaScript when working with React.

1. Type Safety

TypeScript is a statically typed language, which means that it catches type-related errors at compile time rather than runtime. This feature makes it easier to catch bugs early in the development cycle, reducing the risk of introducing bugs into production.

In contrast, JavaScript is dynamically typed, which means that errors related to types may not be caught until runtime. This can lead to unexpected behavior and more time spent debugging.

With TypeScript, you can use interfaces to define the shape of your data, making it easier to understand how data flows through your application. This feature can also help with code documentation and make it easier for other developers to understand your code.

2. Better IDE Support

TypeScript has better IDE support than JavaScript. IDEs like Visual Studio Code have built-in support for TypeScript, which means that you get better code completion and error highlighting. This feature can save you a lot of time when developing and debugging your code.

3. Improved Maintainability

TypeScript can help improve the maintainability of your codebase. With TypeScript, you can define interfaces and types for your data, making it easier to understand how data flows through your application. This feature can help you avoid code duplication and reduce the risk of introducing bugs when modifying your codebase.

4. Easier Refactoring

TypeScript makes refactoring easier. Since TypeScript catches type-related errors at compile time, you can refactor your codebase with more confidence, knowing that your code will still work after refactoring.

5. Community Support

TypeScript has a large and active community that is continuously improving the language. This means that you can easily find support and resources when working with TypeScript, including libraries and frameworks built specifically for TypeScript.

Conclusion

While JavaScript is a great language, TypeScript has many features that make it a better choice when working with React. With TypeScript, you get type safety, better IDE support, improved maintainability, easier refactoring, and a large and active community.

I highly recommend using TypeScript when developing React applications. By choosing TypeScript, you can create more robust and maintainable code, reducing the risk of introducing bugs into production and making it easier to scale your application as it grows.

What is react-testing-library and what is it used for?

Jordan Jaramillo — Fri, 03 Feb 2023 15:36:25 +0000

What is react-testing-library and what is it used for?

react-testing-library is a testing library for React applications that focuses on testing the end-user experience rather than testing the internal logic of components. This library is easy to use and integrates seamlessly with React, making it ideal for testing React applications.

Why use react-testing-library instead of other testing libraries?

React-testing-library focuses on testing the application from the end user's perspective. This means that instead of focusing on testing individual components in isolation, it tests how the application behaves in its final form, including the interaction with the components.

In addition, react-testing-library uses a "real-user-like" approach to its testing, which means that tests are performed with the same movements and actions that a real user would perform in the application. This makes the tests more accurate and ensures that the application behaves as expected in real situations.

How to use react-testing-library?

To use react-testing-library in your tests, you must first install the library via npm or yarn:

npm install --save-dev react-testing-library

Once installed, you can write your tests using the API provided by react-testing-library. For example, to test a React component, you must first import the component and the library:

import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import Button from './Button';

Then, you can use the render function to render the component in a test environment and perform your tests:

test('Button component', () => {
  const onClick = jest.fn();
  const { getByText } = render(<Button onClick={onClick}>Click me</Button>);
  const button = getByText('Click me');

  fireEvent.click(button);

  expect(onClick).toHaveBeenCalled();
});

In this example, the render function is used to render the Button component in a test environment. Then, the getByText function is used to get the button and the fireEvent.click function is used to simulate a click on the button. Finally, the onClick function is verified to have been called with expect(onClick).toHaveBeenCalled().

Conclusion

react-testing-library is a testing library for React applications that allows you to test the end-user experience effectively. It is easy to use and integrates seamlessly with React, making it ideal for testing React applications.

Typescript vs Javascript

Jordan Jaramillo — Sat, 23 Apr 2022 01:25:46 +0000

It is common to misunderstand Typescript and Javascript as if they were similar, which is why this tutorial will see the significant differences so that you can have a clear idea about these two languages.

What is Javascript?

JavaScript is a programming or scripting language that allows you to implement complex functions on web pages, every time a web page does more than just sit there and display static information for you to see, it displays timely content updates, interactive maps , 2D/3D Graphics animation, scrolling video player machines, etc, you can bet Javascript is probably involved. It is the third layer of the cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

What is Typescript

TypeScript es un lenguaje de programación fuertemente tipado que se basa en JavaScript, lo que le brinda mejores herramientas a cualquier escala.

Some key features include:

Typescript is compatible with all JavaScript libraries and frameworks. Angular, a JavaScript framework used to build single-page applications, is entirely written in Typescript.
With an increase in code complexity, JavaScript had to meet OOP requirements; thus, that led to the introduction of Typescript.
Typescript helps with faster code development, thus improving performance.

All code in Javascript is fully valid Typescript code.

Advantages of Typescript over Javascript

There are some improvements with Typescript that give it an edge over Javascript. Here is the list of advantages of Typescript over Javascript.

At the time of development, Typescript introduces the compilation problems. This reduces the chances of runtime errors.

Typescript is strongly typed or allows static typing. This means that Typescript allows you to check the correctness of the type at compile time. This in JavaScript, is not possible.

TypeScript is nothing more than JavaScript with additional functions, that is ES6 functions. Some of these features are as follows:

Interfaces
Generic
Namespaces
null check
Access Modifiers

The team that develops some of the most popular open sources use Typescript for the development of these libraries. One of the most popular examples is Angular.

This means that most of the documentation and examples of these frameworks, mainly Angular, are written with Typescript. Eventually this means that the applications that are developed using these libraries are made with Typescript.

Angular is perhaps the most prominent example, practically all applications in Angular are written using Typescript, if you want to understand the framework thoroughly, you need to know Typescript.

Conclusion and my personal opinion

Learning Typescript introduces you to an amazing programming language, with even better development tools. Particularly Visual Studio Code will offer an interesting number of improvements to your development flow. Personally, this has helped me a lot to reduce my work times and the detection of errors increases drastically.

The amazing thing about using Typescript is that you can quickly configure it in your project, most frameworks allow you to install a Typescript boilerplate where you will get everything configured automatically.

This magnificent language is also supported by gigantic companies that are implementing it and also Microsoft who keeps it updated, so much so that it appears on the list of the most demanded languages in recent years.

So, what are you waiting for to learn it?

Image taken from https://tsh.io/

NodeJS with ExpressJS and TypeScript part 2.

Jordan Jaramillo — Thu, 21 Apr 2022 04:36:02 +0000

In this second part we are going to see how to increase the development time with nodemon, so as not to have to compile every time we make a change in our server, since now as we have it if we make a change in the code we must interrupt the execution of our server and recompile it to start it, then to speed this up we will use nodemon which is a tool that will automatically restart the server every time it detects a change in our code without compiling.

To install nodemos we have to execute the following command:

npm i -D nodemon

Remember that nodemon is to speed up development so we install only as a development dependency.

Now that we have nodemon we are going to execute:

npx nodemon ./src/index.ts

This will start our server without generating production code and when we make a change the server will automatically restart.

I will change the console message when my server starts

app.listen(8000, () => {
  console.log('Server on port 8000!');
});

Then we will see the following console output:

❯ npx nodemon ./src/index.ts
[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] viewing path(s): *.*
[nodemon] seeing extensions: ts,json
[nodemon] starting `ts-node ./src/index.ts`
The application is listening on port 8000!
[nodemon] rebooting due to changes...
[nodemon] starting `ts-node ./src/index.ts`
Server on port 8000!

Done now if we can move much faster in our development.

Finally I'm going to create a script in my package.json:

"hyphens": {
    "build": "npx tsc --project ./",
    "start": "node ./build/index.js",
    "dev": "nodemon ./src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

As you can see I have created dev command which only has nodemon, we don't use npx.

npx : This command allows you to run an arbitrary command from an npm package (either one installed locally or obtained remotely), in a context similar to running it via npm run, so when you create a script in the package. json no longer need to prepend npx.

QueryParameters

Query parameters are optional key-value pairs that appear to the right of the ? in a URL. For example, the following URL has two query parameters, rating and page, with respective values of ASC and 2:

http://example.com/articles?sort=ASC&page=2

In this url we see that we have 2 query params which take the name of "sort" and "page" you can send many query params but they must be separated by the "&" and to assign a value with the "="

Query parameters allow additional application state to be serialized to the URL that would not otherwise fit in the URL path (ie everything to the left of the ?). Common use cases for query parameters include rendering the current page number in a paginated collection, filter criteria, or sort criteria.

In web development, query parameters are used within a URL as described above, but they can also be used in API requests that retrieve data. Ember treats them as two different concepts.

Dynamic response via query params

Now we are going to see how we can return a string sent by the params of our request in the endpoint of type get that we created.

Previously we only returned hello world but now we are going to return a name that the user will provide us through the example query params:

http://localhost:8000?name=jordan

Our answer should be:

hello jordan

Let's see how we can do it.

In our endpoint we have a callback that takes a req (Request) and res (Response) in the request we have a very large object which brings information about the request made by the user.

Let's print req (Request) to the console:

app.get('/', (req: Request, res: Response) => {
  console.log(req);
  res.send('Hello World');
});

Now let's reload our server page with the following query param :

http://localhost:8000?name=jordan

Let's see the console :

baseUrl: '',
  originalUrl: '/?name=jordan',
  _parsedUrl: Url {
    protocol: null,
    slashes: null,
    auth: null,
    host: null,
    port: null,
    hostname: null,
    hash: null,
    search: '?name=jordan',
    query: 'name=jordan',
    pathname: '/',
    path: '/?name=jordan',
    href: '/?name=jordan',
    _raw: '/?name=jordan'
  },
  params: {},
  query: { name: 'jordan' },
  res: <ref *3> ServerResponse {
    _events: [Object: null prototype] { finish: [Function: bound resOnFinish] },
    _eventsCount: 1,
    _maxListeners: undefined,
    outputData: [],
    outputSize: 0,

This is a small part of that immense object but let's see a part that matters a lot to us since we have valuable information.

As you can see we have the base url that as it is / does not show us anything, we have the href, original url and we also have the query params:

query: { name: 'jordan' },

So it means that we can access this by:

res.query.name

Then we already have the answer to our exercise, we only have to validate since the query params are optional, so we will do an if in our endpoint and it will be as follows:

app.get('/', (req: Request, res: Response) => {
  if (req.query.name) {
    res.send(`Hello ${req.query.name}`);
  } else {
    res.send('Hello guest');
  }
});

Now we can answer the same thing in json with res.json({message : "message"})

To implement it in our exercise it would be:

app.get('/', (req: Request, res: Response) => {
  if (req.query.name) {
    // res.send(`Hello ${req.query.name}`); send response type text
    res.json({ message: `Hello ${req.query.name}` }); //send response type json
  } else {
    // res.send('Hello guest'); send response type text
    res.json({ message: 'Hello guest' }); //send response type json
  }
});

What this will do is that if you do not send a name, it will reply "hello guest"

Let's see how it turned out:
With query param:

Without query param:

In case you are wondering why my browser looks like this when I answer json, it is because of this extension: json viewer

Challenge

As a challenge I would like you to send more properties and send them all in the response as json. Leave me your solution in the comments is much easier than it seems.

Remember that you don't know what property the user can submit, I'm excited to see your answer.

In the next blog we will see how to respond to arrays of the amount specified by the user and we will also see the posts verb.

So if you have any questions or recommendations comment. Remember to meet the challenge and show yourself that you can.

You can access the code from the repository.

Node 18 is now available!!! 😎

Jordan Jaramillo — Wed, 20 Apr 2022 02:37:06 +0000

In this little post we will be testing a new feature of nodeJS 18.
Node.js 18 will be promoted to Long Term Support (LTS) in October 2022.

For the Node.js 18 release, I'll highlight some of the new features.

Exciting new features include:

Experimental Fetch
Test Runner
ECMAScript modules improvements
Improved support for AbortController and AbortSignal
Updated Platform Support

Among other features.

Today we are going to be doing some examples with testing where we will also be testing fetch, Array.findLast and Array.findLastIndex in a superficial way.

You can get all the code from this repository

Getting started

So let's create our package.json with the command:

npm init -y

Remember that you must install version 18 of node from the official page

Now we are going to create a file which will be the index.js where we are going to start writing our tests.

To start let's see what we have to import:

import test from "node:test";
import assert from "node:assert";

We see that we have 2 apis that come have to be prefixed to node: or it won't work for you.

Once importing this we can now write our first test.

Test a string:

test("Testing a string", () => {
   assert.match("Welcome Node 18", /Node 18/);
});

This test will give us the following output :

ok 1 - Testing a string
  ---
  duration_ms: 0.000385918
  ...

First what we will do is use the tests method which receives the description as the first parameter and a callback as the second parameter which will have the logic of our test or we can even execute subtest as indicated in the official documentation

To assert a string we have to pass the string we want to test as the first parameter and as the second parameter we send the regular expression as we saw in the previous code.

We can also send a third parameter which is optional but will serve as a custom error message. Let's see the example:

test("Testing a string fails", () => {
   assert.match("Hello", /world/, 'This string does not contain "world"');
});

This test will give us the following output :

❯node index.test.js 
not ok 1 - Testing a string fails
  duration_ms: 0.000888784
  failureType: 'testCodeFailure'
  error: 'This string not contains "world"'
  code: ERR_ASSERTION
  stack: |-
    TestContext.<anonymous> (file:///Users/jordandev/Desktop/node18/index.test.js:5:10)
    Test.runInAsyncScope (node:async_hooks:202:9)
    Test.run (node:internal/test_runner/test:333:20)
    Test.start (node:internal/test_runner/test:287:17)
    Test.test (node:internal/test_runner/harness:126:18)
    file:///Users/jordandev/Desktop/node18/index.test.js:4:1
    ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    async Promise.all (index 0)
    async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    async loadESM (node:internal/process/esm_loader:85:5)
  ...
  tests 1
  pass 0
  fail 1
  skipped 0
  todo 0
  duration_ms 0.062970366

As you can see in the error our custom error appears.

equal and notEqual

Now we will see the equal and notEqual methods which will allow us to test 2 values to know if they are equal and not equal:

test("Testing that a number is equal", () => {
   let current = 99;
   let expected = 99;
   assert.equal(actual, expected);
});

test("Testing that a number is not equal", () => {
   let current = 22;
   let expected = 393;
   assert.notEqual(actual, expected, `${actual} is not equal to ${expected}`);
});

As you can see, the 2 receive the current value as the first parameter and the expected value as the second parameter.

Remember to run the test with

node index.js

deepStrictEqual

We are going to test an object, for this we are going to use the deepStrictEqual method that will help us to deeply test the properties of our object:

test("Testing objects", () => {
   assert.deepStrictEqual(
     { name: "jordan" },
     { name: "jordan" },
     "Objects are not equal"
   );
});

Testing asynchronous functionality

To test an asynchronous function we only have to use the asynchronous callback and in this way we can use await to be able to resolve promises:

test("Testing asynchronous functionality", async() => {
   const number = await Promise.resolve(90);
   assert.equal(number, 90, "The number is not equal to 90");
});

Array.findLast and Array.findLastIndex

Now we are going to try the Array.findLast method, what we will do is create an array of numbers from 1 to 10 and we will look for the last multiple of 3 and as a result we should obtain 9

test("Array.findLast", () => {
     constant numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     const lastmultipleofthree = numbers.findlast((n) => n % 3 === 0);
     assert.equal(lastMultipleOfThree, 9);
});

The findLast method is similar in syntax to a filter but it will return the last element found.

Now we will see the operation of the Array.findLastIndex method, we will have an array with repeated numbers and we will look for the last index of the element that is equal to 3, in this case it should be 9 according to the array that we will pass to it.

test("Array.findLastIndex", () => {
   const numbers = [1, 3, 2, 4, 4, 3, 4, 1, 9, 3];
   const lastIndexOfThree = numbers.findLastIndex((n) => n === 3);
   assert.equal(lastIndexOfThree, 9);
});

This works similar to findIndex but returns the last found index of an element based on the condition.

Fetch

Now we are going to try one of my favorite features which is fetch.

Let's make a call to the jsonplaceholder api endpoint https://jsonplaceholder.typicode.com/users/1

test("Fetch", async() => {
   const reponse = await fetch("https://jsonplaceholder.typicode.com/users/1");
   const json = await response.json();
   assert.equal(json.name, "Leanne Graham");
});

As we can see we have the fetch functionality just as we would from the browser.

I have personally loved this and can't wait for it to be stable.

Subtests

Finally we are going to do a subtest so that you have an example of how to do it:

test("top level test", async (t) => {
   await t.test("subtest 1", (t) => {
     assert.strictEqual(1, 1);
   });

   await t.test("subtest 2", (t) => {
     assert.strictEqual(2, 2);
   });
});

This example is offered by the official nodejs documentation. As you can see, it is very easy to chain tests through the parameter that the callback gives you.

So having this clear, you can try out the new node. Personally, I really liked that they incorporate the test and node api.

We cannot fail to mention the new methods for Arrays that will surely be super useful.

If you want to know more about this update you can see it from the official blog here

NodeJS with ExpressJS and TypeScript part 1.

Jordan Jaramillo — Tue, 19 Apr 2022 02:42:07 +0000

NodeJS with ExpressJS and TypeScript part 1.

In this post we will see how to create a server with expressJS and typescript from scratch, this post will be divided into several parts to make it understandable and explain each thing thoroughly.

You can access the code from the repository

Getting started

The first step to start a project in nodeJS we go with this command:

npm init -y

This command will start our project by creating the file package.json.

Now we have to install the dependencies, for this case I am going to use express with typescript, let's see which are the dependencies that we are going to install:

Dependencies:

express

Dev Dependencies:

typescript
ts-node
@types/node
@types/express

Why do we install everything related to Typescript as devDependencies? Okay, let's remember that even though we'll be writing the code using Typescript, the code is recompiled into standard JavaScript. So Typescript is not needed per se to run the app, we only need it while we are developing this is why it is saved as a development dependency.

So let's run the following command:

npm install express

and :

npm install -D typescript ts-node @types/node @types/express

Once we have successfully installed all the dependencies our package.json should look something like this:

{
   "name": "nodejs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.3"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.25",
     "ts-node": "^10.7.0",
     "typescript": "^4.6.3"
   }
}

Remember that the versions can change depending on when you read this post.

Configure TypeScript

npx tsc --init

The tsconfig.json file that we created with the previous command contains a lot of code, and much of this same code is commented out so that you can experiment and configure it to your liking. However, there are a few settings I want to explain:

module: with this option, you can specify which module manager to use in the generated JavaScript code. such as : 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020' or 'ESNext'. The most common and default module manager is commonjs.
target: using this option, we can specify which version of ECMAScript to use in your project. Available versions are 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020' or 'ESNEXT'.
outDir: with this option, we can specify in which route the Javascript code will be generated.
rootDir: this option is where we specify where the TypeScript files are located.
strict: The option is enabled by default and enables strict type checking options.

You can read more about this configuration in the tsconfig.json file itself or also from the official typescript documentation.

In my case I will use the following configuration in tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "rootDir": "src/",
    "outDir": "./build",
    "strict": true
  }
}

Our first server with expressJS

With typescript set up, it's time to create our first web server with expressJS. Let's create a file called index.ts.

In this file we will have the following code:

import express, { Request, Response } from 'express';
const app = express();

app.get('/', (req: Request, res: Response) => {
  res.send('Hello World');
});

app.listen(8000, () => {
  console.log('The application is listening on port 8000!');
});

First what we do is import express from express along with the Request and Response types.

Once this is done we have to initialize our app with the line

const app = express();

Now we are going to add a get type endpoint in which a message will be returned, so we have to do the following:

app.get("/");

To start in a simple way we will have our app and then we will put the method of our endpoint in this case get this is a function which receives 2 parameters to start, then we can add middleware to it but at the moment there are 2 which the first it is a string with the route as we want it to be our initial route we just have to put a / and express understands that this will be our main route.

Now we have to add the second parameter which is a callback, this callback receives 2 parameters which is request and response :

app.get('/', (req: Request, res: Response) => {
});

As you can see, I have already added the types. Remember that you give the name to the 2 parameters, but by convention and the most common that you will find are req and res.

Inside this callback our code will go, which will be executed when we access the route for now we will respond only text:

app.get('/', (req: Request, res: Response) => {
  res.send('Hello World');
});

With res.send('Hello World'); what we do is tell it to respond with text to our call.

Now let's see this in the browser. But before doing so we need one thing, which is to tell our express server (app) to keep listening on a certain port.

So we will write:

app.listen(8000, () => {
  console.log('The application is listening on port 8000!');
});

This receives 2 parameters, the first the port where our server will be listening and a callback which will be executed when the server is ready, for now we will only put a console.log.

Taking this into account we are going to execute our server.

Remember that since we are working with typescript we must compile to js so that node can read it, we execute the command:

npx tsc --project ./

A build folder will be generated. which will have our code. which we may not understand but is already compiled.

To speed up the compilation of our code we can create a script in our package.json in the scripts section:

"scripts": {
     "build": "npx tsc --project ./",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

I have called it build now to compile we just have to execute:

npm run build

Whenever we create a script we have to execute it with:

 npm + run + script name

At this point we can write the command:

node ./build/index.js

We will see the following output:

❯ node ./build/index.js
The application is listening on port 8000!

Let's look at our web browser:

As we can see we have the response from our endpoint.

As you could see in this article we have created our first server with expressJS and typescript.

In the next part we will see how to speed up development using nodemon and we will also see how to respond to different types of formats. Requests with other http verbs and more.

If you have any questions about this post, you can leave it in the comments. Or also if you have any recommendation you could leave it anyway.

The next part of this post will be available on April 19.

How to use async/await with .map in js

Jordan Jaramillo — Sat, 16 Apr 2022 01:13:59 +0000

How to use async/await with .map in js

At some point you may have wondered how to use asynchronous functions in methods like .map or .forEach, because in this little blog you will see what the most common errors are and how to solve them.

For this we will have the following base code in the index.ts file:

const usernames: string[] = ["jordanrjdev", "anonymous123", "channelyy"];

const simulateFetchData = (username: string): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${username} is a valid username`);
    }, 1000);
  });
}

As you can see we have an array of usernames and a function that takes a parameter and returns a string.

Now we will iterate the array of usernames to obtain the simulated data of each user with the map method:

const dataUsers = usernames.map(async (username) => {
   return await simulateFetchData(username);
});
console.log(dataUsers);

But when executing this we will see in the console the following result:

[ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]

So to solve it we have 2 options, which are to use Promise.all or use a for of

For of

We are going to use a for of to be able to solve this error that is very common and can make us lose a lot of time when trying to find the most appropriate solution.

const getWithForOf = async() => {
   console.time("for of");
   const data = []
   for (const username of usernames) {
     let dataUser = await simulateFetchData(username);
     data.push(dataUser);
   }
   console.timeEnd("for of");
}
getWithForOf();

With this option the code will be executed sequentially, so you can wait for each call. This will help us get each iteration resolved before moving on to the next.

Keep in mind that if we do an N number of iterations and each of these takes 1 second to resolve, as in our example, it means that it will take a total of 3 seconds to finish executing this portion of code. We can see this in the console output thanks to console.time :

for of: 3,012s

Promise.all

Now we will use the promise.all method to solve our problem, so we will have the following code:

const getWithPromiseAll = async() => {
   console.time("promise all");
   let data = await Promise.all(usernames.map(async (username) => {
     return await simulateFetchData(username);
   }))
   console.timeEnd("promise all");
}

getWithPromiseAll();

As you can see we have a Promise.all method which receives an array of promises, remember that the

usernames.map(async (username) => {return await simulateFetchData(username);})

returns an array of promises, just what we need so we pass it to Promise.all to resolve them.

This method will cause all asynchronous code to be resolved in parallel.

So unlike the for of, let's see how long it takes to execute this function in the console:

promise all: 980.3000000119209ms

So if we have a number N of asynchronous functions, they will be executed and resolved without waiting between them, which can come in handy in some specific case.

Sometimes for performance reasons we will need to execute our promises in parallel with Promise.all and other times we will need to do it in sequence with the for of loop. The important thing is that you understand the difference between each one and how to adapt it to your needs.

If you have any questions or suggestions do not forget to comment, see you soon :)

You can see the complete code in this codesandbox repository

Making a Post API in Laravel

Jordan Jaramillo — Fri, 18 Mar 2022 20:30:28 +0000

Making a Post API in Laravel

Making an api using laravel is very simple and makes it much easier for us to develop, it also helps you understand and apply good programming practices.

So in this example we are going to make an api on posts, which we are going to have with authentication and in the end you are going to have a challenge which I will explain to you later as we advance with the project!

Starting with the project

To create a project with Laravel from scratch we will start by going to the console and write the following command:



composer create-project --prefer-dist laravel/laravel apiposts

Now we have a project created we are going to connect it to our database we do this in our .env file:



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=apipost
DB_USERNAME=root
DB_PASSWORD=root

Ready we have our database connected now we are going to create the models we need, in Laravel we have the migrations that are the versions of our database. This has many benefits when we develop as a team since we will be able to know what changes were made in the base and in case of errors we can roll back to a previous version.

Laravel already brings default migrations that we can alter to our liking, in our case we will create a new one as follows:



php artisan make:migration create_posts_table

Now we have our migration but some more things are missing like controller, model, seeders, factory, request that will help us with our project.
We can create them one by one with the artisan commands but Laravel allows us to automate this and create everything with a single command, we are going to delete the migration of posts that we have created.

And let's run the command:



php artisan make:model Post --all

This command will create Model, factory, seeder, requests, controller and policy.

We'll use them in a moment, but first we'll go to the database/migrations folder and open the last migration that was done and we'll see something like this:



<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Inside the up function we are going to define our table fields, the fields that we will use for now will be id, title, content, deleted_at and the timestamps that are created_at and updated_at by default.

So our function would look like this:



public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->dateTime('deleted_at')->nullable();
            $table->timestamps();
        });
    }

Ready now we have our migration ready, now for this to be reflected in our database we have to run a command, remember that the database you configured must already be created, but without any table.

run migrations:



php artisan migrate

As you can see all our tables have names in the plural and our model in the singular due to the convention used by Laravel, I recommend that all the models and tables have names in English to follow the convention.

The next thing we are going to do is fill our post table with fake data to be able to develop the list method and not do inserts in our database since it is tedious, for this we can use the Laravel factories so, we have already created our factory thanks to the command we used above but don't worry you can create others with the command ```php

aritsan make:factory NameFactory


In our databases/factories/PostFactory file we have a method called definition inside the return we can do the following:

public function definition()
{
return [
'title' => $this->faker->sentence,
'content' => $this->faker->paragraph,
'deleted_at' => null,
];
}


What this will do is use faker to be able to fill our table with fake data but now we have to call it and use this we use it in the database/seeders/DatabaseSeeders file:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
\App\Models\Post::factory(120)->create();
}
}


As you can see we use the Post model and we say that it creates 120 records with the factory method if you use another version of Laravel the syntax may change but you can see it in the official documentation.

You may wonder what the seeders are for, the seeders are where you can insert data into your database using eloquent methods, which is the orm that Laravel has configured by default. The factories are the ones that help us generate some records with fake data in a massive way, passing only a certain number of records, as you already realized, a query builder is not used, it is only enough to indicate the fields and the value they will have.

That is why the factories are called within the database seeder, the other seeders also have to be called within the database seeder since this is the only one that is executed when we call them using the command:

php artisan db:seed // Seeders are executed and records will be inserted into our table


![data of the posts table](https://res.cloudinary.com/dwhdaxdf6/image/upload/v1647626339/Screen_Shot_2022-03-18_at_12.58.29_bfhyls.png)

Now we know what migrations, seeders and factories are for, now we will start creating our api routes and methods.


In the routes folder we have several files, as you can see we have web.php, api.php, channels and console.

We will concentrate on just the web and api, where web is for web routes and api is the one we are going to use in this tutorial.

in the api.php file we have a defined route which is the following:

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});


We are going to delete this and we are going to create a route as follows:

Route::get('/hello', function () {
return 'Hello World';
});


As we can see, we prepend the Route class with its method, which is the verb that we will have in this route as the second parameter, we can use a callback and return a text.

Now we will test this in postman: 

To start the development server we can execute the command:

php artisan serve


![call api from postman](https://res.cloudinary.com/dwhdaxdf6/image/upload/v1647626831/Screen_Shot_2022-03-18_at_13.06.46_wdq1cg.png)

Done but now we must start creating our routes for our api, we will use versioning for our api since this way we will use a good practice and our api can grow without affecting other projects that use it.

We will create the routes, Laravel allows us to create routes together with a single line which we will do as follows:

Route::resource('v1/posts', PostController::class)->only(['index']);


We use resource to create several routes, but since we will only use the index method for now, we will tell it through the only function that we only want that route and so we can add the ones we need.

You will also notice that we add v1 to the endpoint of our resources, this is to be able to mutate our api quickly and safely without other apps that use it breaking in the future, for example, if we want to change the way the data is displayed or we want to remove fields from our api we would create a resource with v2 and thus we can better control how our api has changed over time

Now something very important we are going to create the controller of our posts, we already have a controller but we are not going to use it, we are going to create another controller with the command:

php artisan make:controller Api/V1/PostController --api


Ready now we have our api Controllers and versioned these are located in the app/Http/Controllers/Api folder and here we can create the v2, v3 folder as needed. 

When we created our controller we told it to be of type api with the --api flag so we will only have 5 methods unlike normal api controllers which have 7 methods.

Now we need to change the controller that we reference our route to in the api.php file:

<?php

use App\Http\Controllers\Api\V1\PostController;
use Illuminate\Support\Facades\Route;

Route::resource('v1/posts', PostController::class)->only(['index']);


With doing this we have it ready now we will start creating our main endpoint

Let's see what routes we have in our laravel and what controller method is executed when we call them.

We see this with the command:

php artisan route:list


![Routes](https://res.cloudinary.com/dwhdaxdf6/image/upload/v1647627648/Screen_Shot_2022-03-18_at_13.20.35_j2p63k.png)

As we can see we have a few default routes but the one that interests us is the one in position 5 as you can see it is called /api/v1/posts and as you can see it has this "Api\V1\PostController@index" this means that when we call this route will execute the index method so that is where we are going to write the logic to respond to the client.

We are going to make a call to our database and we are going to make the records come ordered and paginated, then we will return it as a response of type json.

The method would be something like this:

public function index()
{
$posts = Post::latest()->paginate();
return response()->json($posts);
}


In this way we return the posts as json to the client so, now we will see how the data arrives from the postman:

![call api from postman](https://res.cloudinary.com/dwhdaxdf6/image/upload/v1647628003/Screen_Shot_2022-03-18_at_13.26.07_bvixmo.png) 

Ready we already have the response in a paginated way now we are going to work on our second endpoint which is the show method to show a single post according to the id of the parameters, for this we must in our api.php add another method apart from the index that this would be the show and we will change our resource method to apiResource this so that it does not create more unnecessary routes since the resource has 7 routes, this one only has 5

Route::apiResource('v1/posts', PostController::class)->only(['index', 'show']);


Now if we list our routes we will see a new one that is:

GET|HEAD api/v1/posts/{post} ........................................... ............................................ posts.show › Api\ V1\PostController@show


As we can see, this retains a {post}, this refers to the fact that we must pass the id of our post to be able to show the info.

So let's go to the controller to modify the show method:

public function show($id)
{
//
}


First we have to look for the post in our database and then return it as a response.

We have a parameter which is the id that the user puts in the url, and thanks to eloquent and the simplicity of laravel we can do the following:

public function show(Post $post)
{
return response()->json($post);
}


Adding the Model as the type of the variable, Laravel understands this and gives you the record to which the model belongs.


Now let's see in postman:

![call method show from postman](https://res.cloudinary.com/dwhdaxdf6/image/upload/v1647629836/Screen_Shot_2022-03-18_at_13.56.50_j4maj5.png)

That easy we already have the show method of our api.

Now we will see the delete method. The same process we add the method to our resource in api.php and go to the destroy method in our controller.

Route::apiResource('v1/posts', PostController::class)->only(['index', 'show', 'destroy']);


PostController :

public function destroy($id)
{


Here we can do the same as in the show make Laravel bring us the record automatically: 

``` 


 public function destroy(Post $post)
    {
        $post->deleted_at = now();
        $post->save();
        return response()->json(['message' => 'Post deleted'], Response::HTTP_NO_CONTENT);
    }

As you can see we only reassign the value of the deleted_at field with the now() function and the logical deletion is done, we do not delete it from the database. We return null and as a second parameter we pass a no content code which is 204 we can send it as a number but I prefer to use Response you can see the rest of the code in the official Laravel doc.

Let's see this in the postman:

Now we will add that in our index method only the posts that are not deleted are seen, so we will add a condition:



  public function index()
     {
         $posts = Post::where('deleted_at', null)->latest()->paginate();
         return response()->json($posts);
     }

In this way this method is solved and the deleted posts will no longer be shown.

Now we will add that in our show method we do not want the ifno of a deleted post to be seen, so we will add an if:



public function show(Post $post)
     {
         if ($post->deleted_at) {
             return response()->json(['message' => 'Post have been deleted'], Response::HTTP_NOT_FOUND);
         } else {
             return response()->json($post);
         }
     }

We already have solved this other method that easy.

But what happens if we do the following:

As you can see we have an html error which is not right, so how do we fix this?

Whenever we consume an api in Laravel we must pass the property in the headers



Accept : application/json

With this, Laravel already knows that it should send us the error in json, so now we will obtain the following response:

We have a problem which is that I don't want to show this error in this way to the users so we will change the show function in this way:



public function show($id)
     {
         try {
             $post = Post::where('deleted_at', null)->findOrFail($id);
             return response()->json($post);
         } catch (ModelNotFoundException $e) {
             return response()->json(['message' => $e->getMessage()], Response::HTTP_NOT_FOUND);
         }
     }

As you can see, we are now using the findOrFail method, this will throw us a ModelNotFoundException type exception and we will return the message with a not found code.

In this way we obtain a shorter message and we do not detail the user so much for security reasons.



{
    "message": "No query results for model [App\\Models\\Post] 1" // Post deleted
}

Now we can do the same in the destroy method.



public function destroy($id)
    {
        try {
            $post = Post::where('deleted_at', null)->findOrFail($id);
            $post->deleted_at = now();
            $post->save();
            return response()->json(null, Response::HTTP_NO_CONTENT);
        } catch (ModelNotFoundException $e) {
            return response()->json(['message' => $e->getMessage()], Response::HTTP_NOT_FOUND);
        }

    }

We are almost done, now we are going to format our responses, since we are now returning the model and this is not done in Laravel in this way. We'll do it using resources and collections.
The resources help us to format our model and thus return the collections, they are exactly the same but it is to return collections, we see it in practice. Now we will create a resource as follows.



php artisan make:resource V1/PostResource

Here we will also apply versioning since we can mutate these resources as our api grows.

Now we go to the file app/Http/Resources/V1/PostResource:



<?php

namespace App\Http\Resources\V1;

use Illuminate\Http\Resources\Json\JsonResource;

class PostResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
     */
    public function toArray($request)
    {
        return [
            'title' => $this->title,
            'content' => $this->body,
            'created_at' => $this->created_at,
        ];
    }
}

We make a return and assign keys and what field we want to be assigned I will leave it this way and now we are going to use it in our PostController:



public function show($id)
     {
         try {
             $post = Post::where('deleted_at', null)->findOrFail($id);
             return new PostResource($post);
         } catch (ModelNotFoundException $e) {
             return response()->json(['message' => $e->getMessage()], Response::HTTP_NOT_FOUND);
         }
     }

Here we return a new instance of the post resource remember that we can only pass one record to our resource, for several records we are going to create a collection but for this I will use a version 2 of my api and we will understand the advantages of this practice.

First we will create the routes resource in api.php :



<?php

use App\Http\Controllers\Api\V1\PostController as PostControllerV1;
use App\Http\Controllers\Api\V2\PostController as PostControllerV2;
use Illuminate\Support\Facades\Route;

Route::apiResource('v1/posts', PostControllerV1::class)->only(['index', 'show', 'destroy']);
Route::apiResource('v2/posts', PostControllerV2::class)->only(['index']);

As you can see, I create the route only with the index method and I create another controller in the V2 folder of controllers and I assign an alias to it to avoid conflict in the imports, now we create the controller:



php artisan make:controller Api/V2/PostController --api

Now we are going to do the index method just like in the PostController version 1.



// V2/PostController
public function index()
    {
        $posts = Post::where('deleted_at', null)->latest()->paginate();
        return response()->json($posts);
    }

Ready we have it let's see the postman:

As you can see it is exactly the same but now in version 2 I only want to send the id and the title so for this we are going to create the collection that will help us give this a structure:



php artisan make:resource V2/PostCollection

Now we go to the File app/Http/Resources/V2/PostCollection

and we would have to do something like this:



public function toArray($request)
    {
        return [
            'data' => $this->collection,
            'target' => [
                'organization' => 'com.jordan',
                'author' => [
                    'name' => 'Jordan',
                    'email' => 'jordan@mail.com',
                ],
            ],
            'type' => 'post',
        ];

    }

As you can see, we add more information and within the data property I want it to return all the data of the collection. We use this in V2/PostController:



// V2/PostController
public function index()
    {
        $posts = Post::where('deleted_at', null)->latest()->paginate();
        return new PostCollection($posts);
    }

But we have a problem, although our structure has changed, all the post fields are still displayed. To solve this, we create a v2 resource and we will use it in our collection:



php artisan make:resource V2/PostResource

And we modify it:



<?php

namespace App\Http\Resources\V2;

use Illuminate\Http\Resources\Json\JsonResource;

class PostResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param \Illuminate\Http\Request $request
     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'title' => $this->title,
        ];
    }
}

Now we have to tell our collection to use this resource:



<?php

namespace App\Http\Resources\V2;

use Illuminate\Http\Resources\Json\ResourceCollection;

class PostCollection extends ResourceCollection
{

    public $collects = PostResource::class;
    /**
     * Transform the resource collection into an array.
     *
     * @param \Illuminate\Http\Request $request
     * @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
     */
    public function toArray($request)
    {
        return [
            'data' => $this->collection,
            'target' => [
                'organization' => 'com.jordan',
                'author' => [
                    'name' => 'Jordan',
                    'email' => 'jordan@mail.com',
                ],
            ],
            'type' => 'post',
        ];

    }
}

In this way we solve our problem.

So the applications that consume our old api will not have problems or will fall.

In this way we have made an api with a few methods applying good programming practices as recommended by the laravel documentation. The challenge is that you finish the update and store methods of the api as well as the other methods of version 2.

If something is not clear to you, you can comment and I will help you with pleasure.

You can find the complete code in the following github repository

Making a google chrome extension

Jordan Jaramillo — Tue, 22 Feb 2022 15:10:01 +0000

Today we are going to see how to make a google chrome extension and that it interacts with the dom of the current page.
The extension is simple, it will have an input in which you can write a label and when you click the button, these elements that are on the page will be added in a red border.

The complete code can be found in this repository

Files

Create the following files in your project folder:

manifest.json
popup.html
popup.js
background.js

Manifest.json

Let's start by creating a manifest.json file which is the one that will have the details of our extension such as (name, description) including its permissions.



{
  "name": "Gettin started example",
  "description": "i build a example for getting started",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

first we are indicating the name description and versions, continuing with the reading we will see the property background > service_worker which is very important since we must register the file that will be executed in the background in this case we have a file that will be called background.js

Here you can see more detailed what you can specify in your manifest.

Background.js

We will create a file called background.js to see how it works.



// background.js
chrome.runtime.onInstalled.addListener(function () {
  console.log("Hello from background");
});

Start by including a listener event for runtime.onInstalled in your background script. Inside the onInstalled listener, the extension will show a console message here we can also set persistent variables etc.

Load the extension in our browser

We are going to go to the extension manager of our browser and we are going to activate the development mode.

We are going to click on the button that says load unpacked and we choose the folder that has our files.

We should see our extension loaded as in the image

Now we will click on the inspects view where it says service worker, a tab will open and in the console we will be able to see our message Hello from background

Well you already have a background file where you can execute scripts in the background now we will proceed to show a form in our extension.

Popup.html

As you may have already noticed, we have in our manifest a property called action: default_popup in which we indicate a file called popup.html in which we are going to put an html code with our form:



<!DOCTYPE html>
<html>
  <body>
    <p>Tag for change the border</p>
    <input type="text" id="tagcolor" />
    <button id="changeColor">Change</button>
    <script src="popup.js"></script>
  </body>
</html>

We have a script which we are going to create called popup.js and that is where we are going to write the logic but let's review the content of our html which has an input and a button with their respective ids to retrieve them with js and be able to do the logic.

Popup.js

In this file we are going to do several things, the first is to select our button by id



let changeColor = document.getElementById("changeColor");

Now we are going to add a click event to this button and in the asynchronous function we are going to select our input and thus have the value that we write.



changeColor.addEventListener("click", async() => {
   let inputtag = document.querySelector("#tagcolor");
   chrome.storage.sync.set({ inputtag: inputtag.value });

   let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

   chrome.scripting.executeScript({
     target: { tabId: tab.id },
     function: setBorderColor,
   });
});

function setBorderColor() {
   chrome.storage.sync.get("inputtag", ({ inputtag }) => {
     document.querySelectorAll(inputtag).forEach((element) => {
       element.style.border = "1px solid red";
     });
   });
}

We will send the value of what we write in our input to our storage.sync to later access it from the setBorderColor function



chrome.storage.sync.set({ inputtag: inputtag.value });

After this we have to select the window in which we are and store it in a variable for this we use destructuring of arrays



let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

We will send to execute a script on the screen in which we are with the following code



chrome.scripting.executeScript({
     target: { tabId: tab.id },
     function: setBorderColor,
   });

Within this setBorderColor function, the document to which we will make a selection is already the one from the tab that we indicated, it is no longer our popup.html dom, this must be clear, outside the function, the document was the equivalent to the document of the popup.html of our extension.

Finally, in the setBorderColor function, what we do is obtain the persistent value that we created, which should be the name of a label, id or a class, and as a callback we will execute a querySelectorAll, we will go through the elements and change the style property. border:



function setBorderColor() {
   chrome.storage.sync.get("inputtag", ({ inputtag }) => {
     document.querySelectorAll(inputtag).forEach((element) => {
       element.style.border = "1px solid red";
     });
   });
}

Now we are going to go to any page and we will put the name of a label in this case I will use div

Results :

Here, as you can see, we use various chrome tools such as storage, scripting, and tabs, which is why we define them from the beginning in our manifest.json.

I hope this has really helped you now it's your turn to practice and investigate.

Portals in React.js with a practical example

Jordan Jaramillo — Mon, 21 Feb 2022 18:00:59 +0000

Portals provide a first-class option to render children into a DOM node that exists outside of the parent component's DOM hierarchy, as stated in the official React.js documentation.

Portals are useful when we want to render components but our parent has a hidden overflow or a defined width and height, modals are an ideal example so we are going to build a modal from scratch and apply good user accessibility practices.

You can see the complete code of the example here in this github repository

First we are going to create a component which is going to be called src/Components/Modal/index.js:

export const Modal = (props) => {
  let { children, close, ...rest } = props;
  if (!children) {
    children = <p>This is a example modal</p>;
  }

  return (
      <div id="modal-dialog" {...rest}>
        <div className="flex flex-col justify-center items-center">
          {children}
          <button onClick={close}>
            Close this modal
          </button>
        </div>
      </div>
  );
};

In the src/styles.css file we will have the following code:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap");
* {
  font-size: 62.5%;
  font-family: "Roboto";
  margin: 0;
  padding: 0;
}

#App {
  overflow: hidden;
  height: 20vh;
  background-color: #ccc;
}

#App > h1 {
  font-size: 2rem;
}

div#modal-dialog {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 999;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#modal-dialog > div {
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 1.2rem;
}

p {
  margin: 1.4rem 0;
  font-size: 1.5rem;
}

button {
  padding: 1rem;
  border-radius: 1rem;
  border: none;
  background-color: #9b59b6;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

button:hover {
  background-color: #8e44ad;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

Here we are going to have several styles for our modal and we have also defined some standard classes for our application.

Now in the modal we will receive several props such as children, close (function to close the modal) and the rest of the props that we may have, we also have a fixed element that is the button to close the modal and there we will pass the function of close on click event.

We will go on to create a div in our index.html file which will be the sibling element of the parent div of our application and the file would be as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <div id="modals"></div>
  </body>
</html>

To this div we will put the id of "modals" which is in which the modal component will be injected thanks to the portals.

This benefits us so that our component is not affected by the styles of our parent that has overflow hidden and height and width defined since it would not be displayed correctly.

Now we will go on to create the src/App.js:

import { useState } from "react";
import ReactDOM from "react-dom";
import { Modal } from "./Components/Modal";
import "./styles.css";

const domElement = document.getElementById("modals");

export default function App() {
  const [stateModal, setStateModal] = useState(false);
  const openModal = () => setStateModal(true);
  const closeModal = () => setStateModal(false);

  return (
    <div id="App" className="flex flex-col justify-center items-center">
      <h1>Portals Example</h1>
      <div className="flex flex-col items-center justify-center">
        <p>This is a div with a defined height and overflow hidden</p>
        <button onClick={openModal}>
          Open modal
        </button>
      </div>
      {stateModal &&
        ReactDOM.createPortal(
          <Modal close={closeModal}>
            <p>Modal from App.js</p>
          </Modal>,
          domElement
        )}
    </div>
  );
}

First we have the imports and on line 6 we have a reference to the div#modal getting it with

const domElement = document.getElementById("modals"); //Reference to div#modals for create portal

We need to have this stored in a variable since we will need it to create the portal.

Then we have the state of openModal to be able to know if the modal is open or closed, we also have the respective functions to open and close the modal.

We have the button to open the modal, below this we have the most important thing which is a conditional that when the modal's state is true we will use the ReactDOM createPortal function and as the first parameter we will pass the element that we want to render and how second parameter we will pass the reference of the div where we are going to inject said component so we have something like this:

{stateModal &&
  ReactDOM.createPortal(
  <Modal close={closeModal}>
      <p>Modal from App.js</p>
  </Mode>,
  domElement
)}

Having this we will be able to see how the modal will be rendering inside the div#modals that is outside the parent container of our app, all this thanks to the portals and thus we had no problems with our styles or even having the modal elements separated from the dom.

Improving our accessibility with good practices

Note:
When working with portals, remember that managing keyboard focus is very important. For dialogs, make sure everyone can interact with them by following the WAI-ARIA Modal Creation Practices .

Programmatically managing the focus.

Our React apps continually modify the HTML DOM at runtime, sometimes causing keyboard focus to be lost or set to an unexpected element. To fix this, we need to programmatically push the keyboard focus in the correct direction. For example, resetting keyboard focus to a button that opened a modal window after that modal window is closed.

Then we are going to improve our components so that there are no errors.

What would happen if for some reason you have a modal to delete something and when the modal is opened the focus is sent to the confirm button, this is bad accessibility management because it can be activated inadvertently by keyboard input so it is It is always better to leave the focus on the action of closing the modal and return it to the button that activated the modal so that it does not get lost in some non-existent element of it.

For this we must block the scroll and also prevent the focus from leaving our component, we will use 2 dependencies which we are going to install through:

npm i no-scroll focus-trap-react

We are going to improve our modal component by redirecting the focus to the cancel button and we will do this thanks to React's useRef hook.

src/Components/Modal/index.js:

import noScroll from "no-scroll";
import { useEffect, useRef } from "react";
import FocusTrap from "focus-trap-react";
export const Modal = (props) => {
  let { children, openButtonRef, close, ...rest } = props;
  if (!children) {
    children = <p>This is a example modal</p>;
  }

  let buttonRef = useRef();

  useEffect(() => {
    buttonRef ? buttonRef.current.focus() : null;
    noScroll.on();
    return () => {
      openButtonRef ? openButtonRef.current.focus() : null;
      noScroll.off();
    };
  }, []);

  return (
    <FocusTrap>
      <div id="modal-dialog" {...rest}>
        <div className="flex flex-col justify-center items-center">
          {children}
          <button ref={buttonRef} onClick={close}>
            Close this modal
          </button>
        </div>
      </div>
    </FocusTrap>
  );
};

First we do the imports of our new dependencies:

import FocusTrap from "focus-trap-react";
import noScroll from "no-scroll";

Then we create a reference that we will use in our button let buttonRef = useRef();
and we make the reference as follows with our close button modal <button ref={buttonRef} onClick={close}>Close this modal</button>

We will also add a new property that is the reference of our button to open our modal in order to return the focus when this modal is closed: let { children, openButtonRef, close, ...rest } = props;

With useRef we will know when this modal is rendered, which will indicate that it is open, we will verify that there are references to the close button, if there is a reference, we will focus it with openButtonRef ? openButtonRef.current.focus() : null; and we will also block the scroll to our application with noScroll.off()
and most importantly when this component is unmounted we are going to give focus back to the button that opened the modal and we will unlock the scroll again with the following code

openButtonRef ? openButtonRef.current.focus() : null; 
noScroll.off();

For which the useEffect would be as follows:

   useEffect(() => {
     buttonRef ? buttonRef.current.focus() : null;
     noScroll.on();
     return() => {
       openButtonRef ? openButtonRef.current.focus() : null;
       noScroll.off();
     };
   }, []);

Finally we will wrap our modal with the component:

<FocusTrap>
{......}
</FocusTrap>

In our src/App.js component we are going to create a reference to our open button and pass it to our modal so our file would look like this:

import { useRef, useState } from "react";
import ReactDOM from "react-dom";
import { Modal } from "./Components/Modal";
import "./styles.css";

const domElement = document.getElementById("modals");

export default function App() {
  const [stateModal, setStateModal] = useState(false);

  let openButtonRef = useRef();

  const openModal = () => setStateModal(true);
  const closeModal = () => setStateModal(false);

  return (
    <div id="App" className="flex flex-col justify-center items-center">
      <h1>Portals Example</h1>
      <div className="flex flex-col items-center justify-center">
        <p>This is a div with a defined height and overflow hidden</p>
        <button ref={openButtonRef} onClick={openModal}>
          open modal
        </button>
      </div>
      {stateModal &&
        ReactDOM.createPortal(
          <Modal close={closeModal} openButtonRef={openButtonRef}>
            <p>Modal from App.js</p>
          </Mode>,
          domElement
        )}
    </div>
  );
}

In this way we have applied good accessibility practices, the scroll will be blocked and also the focus will only be limited to our modal we can test using the "Tab" button, in this example we have learned about react portals and to create a modal with good practices.

Now all that remains is to practice and continue investigating what we can improve on this modal component.

Tell me, in what other example would you use react portals?

Render props and render functions in React.

Jordan Jaramillo — Fri, 18 Feb 2022 15:59:38 +0000

What is Render Props in React

Render props is a pattern in react which helps us to pass the functions as a prop to the components so that we can decide the component rendering logic instead of let component render it’s own logic.

What is Render Functions

Render functions (or children as functions) can provide even more flexibility and power. If you use popular React components, you've probably stumbled upon the render function technique — React-motion, Apollo-client, and React-router make excellent use of render functions to build flexible and reusable components.

Render functions allow us to encapsulate logic that derives a particular state within a component and exposes that state to our parent component.

Let's look at the following example.

We will create a component that will obtain data from the jsonplaceholder api, this component will have different states such as: "loading, error, empty, and the render of the list of users" then we will use render props and render functions to be able to abstract the rendering logic of our component. Once explained this we can give the code.

First we will create a component called list which will be reusable to render any list thanks to the render props and the render functions

List/index.js:

export const List = (props) => {
  const {
    loading,
    onLoading,
    error,
    onError,
    onEmpty,
    items,
    children
  } = props;
  return (
    <div>
      {loading && onLoading()}
      {error && !loading && onError()}
      {items.length < 1 && !loading && onEmpty()}
      {items.length > 0 && !loading && items.map(children)}
    </div>
  );
};

As we can see through the props we will obtain the status of loading, error, the items and the respective functions that help us render components depending on the state as we can see we have the onError function to render a component when there is an error, onLoading when our state is loading and also onEmpty and most importantly we get the children that here is where we will take advantage of the render functions.

Now we will see the App.js which is where we are going to use our List component.

App.js

import { useEffect, useState } from "react";
import { Button } from "./Components/Button";
import { ButtonGroup } from "./Components/ButtonGroup";
import { List } from "./Components/List";
import "./styles.css";

export default function App() {
  const initialState = {
    loading: false,
    list: [],
    error: false
  };

  const [state, setState] = useState(initialState);

  const handleStatus = (nameState, valueState) => {
    setState({ ...initialState, [nameState]: valueState });
  };

  const getUsers = async () => {
    try {
      handleStatus("loading", true);
      const data = await fetch("https://jsonplaceholder.typicode.com/users");
      const users = await data.json();
      handleStatus("list", users);
    } catch (error) {
      handleStatus("error", true);
    }
  };

  const clearUsers = () => handleStatus("list", []);
  const onLoading = () => <p>Loading...</p>;
  const onError = () => <p>There was a error...</p>;
  const renderItem = (item) => <p key={item.id}>{item.name}</p>;
  const onEmpty = () => <p>Not items</p>;

  return (
    <div className="App">
      <ButtonGroup>
        <Button onClick={getUsers}>Fetch users</Button>
        <Button onClick={clearUsers}>Clear users</Button>
      </ButtonGroup>
      <List
        loading={state.loading}
        error={state.error}
        onLoading={onLoading}
        onEmpty={onEmpty}
        onError={onError}
        items={state.list}
      >
        {renderItem}
      </List>
    </div>
  );
}

As we can see in our app.js we have our functions which we will use as render props.

First we obtain the users with a try catch depending on the result we mutate our status through the handleStatus function.

Then we declare the onLoading function that what it does is render a text that says loading, the same as the onError and onEmpty functions.

In the List component we pass the state and the respective functions. Thus, if we have to change the loading component, we will only have to change the onLoading function, this makes our component descriptive and we can quickly observe what the different states we have are.

Now we will see the render function that helps us to render the items which is the function const renderItem = (item) => <p key={item.id}>{item.name}</p>;
This function has an item as a parameter and we render the name of this item through a paragraph and use the id as key.

We pass this same function through the children of the component and then in our list we inject it into the map of our items. This is how we use our render functions, in the same way if we want to change the component of each item we can do it in the renderItem function. This is how we abstract all this render logic and can make List a component to render any list. and the components it renders depending on their states are fully customizable.

Now it's a matter of practice and start making our own examples, start making our components descriptive without having to enter the component to see the code since the abstraction is applied.

I leave you the complete example here:

Cancelar peticiones con axios (ejemplo práctico con React.js)

Jordan Jaramillo — Mon, 24 Jan 2022 15:25:07 +0000

En el día a día como desarrolladores trabajaremos mucho con peticiones http en nuestro frontend, por eso es importante saber optimizar estas peticiones ya que si no lo hacemos podremos ocasionar perdida de memoria y esto afectará de manera negativa la experiencia del usuario.

Vamos a ver un ejemplo practico para cancelar estas peticiones, para esto vamos a poner un ejemplo de uso.

const getPhotos = async () => {
    try {
      onSetLoading(true);
      let rs = await getDataApi(
        "https://jsonplaceholder.typicode.com/photos"
      );
      setList(rs.data);
      onSetLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

useEffect(() => {
    getPhotos();
  }, []);

Imagina que un usuario quiere obtener cierta data de nuestra aplicación y accede a la pantalla que llama a esta data, pero por alguna razón el usuario vuelve al menú o simplemente le da atrás en el navegador antes de que la petición se resuelva pues si vemos este caso mas detallado veremos que la petición que hicimos no se cancela automáticamente como podemos ver en el ejemplo no estamos limpiando nuestro componente por lo que veremos como hacerlo.

Función para obtener data

Crearemos una función global para hacer nuestras peticiones tipo get

import axios from "axios";

export const getDataApi = async (url, cancelToken = null) => {
  if (!url || !url.trim()) throw new Error("The endpoint is required");
  return axios.get(url, cancelToken && { cancelToken: cancelToken.token });
};

Como ya pudiste observar tenemos la función getDataApi esta recibe la url y un cancel token que puede ser enviado como no y realica su respectiva validacion antes de enviarlo a la configuración de la petición. Podemos hacer que sea obligatorio para asi no olvidar de que debe estar allí (sería una buena practica hacerlo).

export const Photos = (props) => {
  const [list, setList] = useState([]);
  const { loading, onSetLoading, onLoading, onBack } = props;

  const getPhotos = async (source = null) => {
    try {
      onSetLoading(true);
      let rs = await getDataApi(
        "https://jsonplaceholder.typicode.com/photos",
        source
      );
      setList(rs.data);
      onSetLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

Función que se encargará de realizar la petición a la api

Ahora vamos a crear una función que se encargue de llamar a nuestra api

export const Photos = (props) => {
  const [list, setList] = useState([]);
  const { loading, onSetLoading, onLoading, onBack } = props;

  const getPhotos = async (source = null) => {
    try {
      onSetLoading(true);
      let rs = await getDataApi(
        "https://jsonplaceholder.typicode.com/photos",
        source
      );
      setList(rs.data);
      onSetLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

Como puedes ver esta recibe como parametro un source el cual puede ser obviado y este se lo enviamos como segundo parametro a la función getDataApi

Ahora que tenemos esto claro veremos como llamariamos esta función en nuestra primera carga del componente.

 useEffect(() => {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    getPhotos(source);
    return () => {
      source.cancel("Canceled");
    };
  }, []);

En este useEffect tenemos la creación de nuestro cancel token y se lo enviamos a la funcion getPhotos para tener la referencia de cual es la peticion que se va a cancelar.

Al limpiar nuestro componente podemos hacer un source.cancel y enviar un mensaje personalizado para manejo de errores etc.

No necesitas crear un cancel token para varias peticiones veamos un ejemplo:

useEffect(() => {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    getPhotos(source);
    getDateUser(source);
    getMusics(source);
    return () => {
      source.cancel("Canceled");
    };
  }, []);

En este caso podemos ver que al limpiar nuestro componente se cancelarán todas las peticiones que esten pendientes.
Tambien podemos hacer una limpieza de nuestro estado.

De esta manera ya sabemos como cancelar nuestras peticiones y reducir la posibilidad de tener memory leak en nuestra aplicación.

Ahora para probar nuestro ejemplo te dejo el código completo, te recomiendo que el ejemplo lo pruebes en una pestaña en blanco y en la opción de network del navegador selecciones el preset de slow 3G para que así puedas ver como la petición se cancela.

Ejemplo completo :