DEV Community: Patrick Zocli

Send email with nodejs

Patrick Zocli — Sat, 06 Jul 2024 01:22:26 +0000

Prerequisites

an e-mail address (to be used for sending e-mails)

the package nodemail

npm install nodemail

# For typescript projects
npm install nodemail @types/nodemail

The email address used must have « 2-factor authentication enabled ». To find out how to activate it, click here: 2-factor authentication

Also, you'll need to provide nodemail with your account authentication information. This includes your email address and a password, but not just any password.

Google has a platform that allows you to generate separate passwords. These passwords are only used for third-party services such as email clients, email applications (like Nodemailer), and other tools that require secure access to your Google Account.

To do this, you need to :

Go to link : https://myaccount.google.com/apppasswords
Make sure you are logged in to your sender account
Create a new application
Copy the supplied password

💡 If the interface is empty, this means you haven't activated 2-factor authentication

Development

First, here's a complete example for those of you who understand quickly. Let's say you want to send a nice email to several friends. Here's how to do it:

const nodemailer = require('nodemailer');

// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'votre.email@gmail.com',
        pass: 'votre_mot_de_passe'
    }
});

// setup email data with unicode symbols
let mailOptions = {
    from: '"Fred Foo 👻" <foo@example.com>', // sender address
    to: 'bar@example.com, baz@example.com', // list of receivers
    subject: 'Hello ✔', // Subject line
    text: 'Hello world?', // plain text body
    html: '<b>Hello world?</b>' // html body
};

// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
        return console.log(error);
    }
    console.log('Message sent: %s', info.messageId);
    console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
});

Don't forget to replace your.email@gmail.com and your_password with your own authentication information.

Explanation

Import module :
```
const nodemailer = require('nodemailer');
```
We start by importing nodemailer. Of course, you can also use the ES6 syntax import nodemail from 'nodemail';

Create a "transporter" :

const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'your.email@gmail.com',
        pass: 'your_password'
    }
});

Here, we configure our mailman with our Gmail account information. We give him our email address and password so he can access our mailbox and send messages for us.

Prepare the email :

let mailOptions = {
    from: '"Fred Foo 👻" <foo@example.com>', // Who sends the email
    to: 'ami1@example.com, ami2@example.com', // Who to send the email to
    subject: 'Hello ✔', // Email subject
    text: 'Hello world?', // Plain text or
    html: '<b>Hello world?</b>' // HTML content
};

We write our email. We define who's sending it (here, Fred Foo), who it's for (several friends), the subject (e.g. "Hello ✔"), and the content (a nice message in text or HTML).

Send the email :
```
transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
        return console.log(error);
    }
    console.log('Message sent: %s', info.messageId);
    console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
});
```
Finally, we ask our digital letter carrier to send the e-mail. If there's a problem (for example, if the password is incorrect), we display the error. Otherwise, we indicate that the e-mail has been sent and even provide a link to view the e-mail sent (handy for checking).

💡 Never put your password in plain text in your code! Use environment variables or password management services to keep your information safe.

Basically, it's like asking a trusted mailman to send an e-mail using your Gmail account.

Now you need to be able to send emails anywhere in the world. If you have any questions, don't hesitate to ask. Happy coding ✨

4 time saving tailwind tips… ⏱️

Patrick Zocli — Fri, 03 May 2024 22:57:08 +0000

When we learn a tech, around 40% of the knowledge we acquire comes from study and the rest from practice.

Tailwind is no exception.

So here are 4 tips I've had the pleasure of discovering during my long hours of coding with tailwind

1 - Utility classes

Tailwind offers several utility classes, which are combinations of different CSS properties. Here are some, unfortunately, less well-known ones

Container (`container`)

This component can be used to set the maximum size of an element as a function of screen width.
In effect, it maps the minimum size of the current breakpoint to the maximum size of the component. Useful if you prefer to code for a fixed screen size.

Size (`size-*`)

Sets the height and width of an element at the same time: w-10 h-10 <=> size-10.

Line Clamp (`line-clamp-*`)

Reduces the number of lines in a text block by replacing the rest with "...".
line-clamp-3 sur un paragraphe

Others

truncate

divide-x-*, divide-y-*

2 - Best approach

Tailwind is designed to be used with a mobile-first approach.
In other words, the class names (e.g. mb-4 text-lg) you add initially without the prefixes sm, md, lg ... are specifically intended for the mobile version.

Then, if you prefer a completely different approach, you can always customize breakpoints.

3 - Common properties of children in the parent

I was surprised to discover that we could avoid duplicating the same style from one child to another by grouping common styles in the parent.
Let's say you have a simple list:

<ul class="flex gap-4">
  <li className="bg-black p-8"/>
  <li className="bg-black p-8"/>
  <li className="bg-black p-8"/>
</div>

You can apply the same classname to all li children, adding them to those of parent ol but preceded by [&>*].

<ul class="flex gap-4 [&>*]:bg-black [&>*]:p-8">
  <li />
  <li />
  <li />
</div>

[&>*] is a temporary selector which, as you may have guessed, transmits the class that follows it to all children.

4 - Prettier for better navigation

For all lovers of clean code, Tailwind recommends an organized way of ordering class names (details).
What's more, an extension is available to help with this. This plugin scans your templates for class attributes containing Tailwind CSS classes, and then sorts those classes automatically following their recommendation.

This is all I have to share with you for the time being. I hope I've introduced you to something new, and if you have any questions, I'd be happy to answer them !

Laravel or Symfony: Which to choose for your project? 🤔

Patrick Zocli — Mon, 09 Oct 2023 12:21:53 +0000

Although different, Laravel and Symfony are gaining in popularity 📈 and are proving to be great choices for projects.

In this article, we'll recap the main differences between the two technologies so you'll have a clear idea of when to use them. If you can't wait to see the end, simply check out the summary 📦 at the end of the page.

Laravel

If Laravel were a woman, it would be both elegant and accessible. Laravel is known for its clear and expressive syntax, which makes web application development fast and enjoyable.

No matter what your level of programming experience, Laravel will be intuitive for you and you'll certainly learn a lot, and faster, about this framework.

One of the most admirable aspects ✨ of Laravel is its ease of use for creating web applications. A concrete example is the creation of a simple route that displays "Hello, Laravel!".

// Laravel route file (web.php)
Route::get('/hello', function () {
    return 'Hello, Laravel!
});

Here, a route is defined using the Route::get() function, and when you access /hello in your browser, you get the message "Hello, Laravel!". This simplicity is one of the reasons why Laravel is so popular, especially among novice developers 🔰.

This aspect makes it an interesting choice for inexperienced development teams under time pressure (a bit like startups).

Another key aspect of Laravel is its ecosystem of packages 📦 , mainly managed by Composer. You can easily integrate third-party packages to add functionality to your application. For example, to integrate authentication, you can use the laravel/ui package, which saves you a lot of time and effort.

This makes it particularly suitable for projects where you want to get results fast.

Symfony

For Symfony, on the other hand, his personality could be compared to a more formal and sophisticated lady.

Symfony's focus on structure and detailed configuration makes it ideal for complex projects requiring careful planning and organization. However, its approach can seem more reserved and demanding, requiring a little more time ⌛️ and effort to fully understand.

This means you can configure every aspect of your application in detail.

An example in Symfony would involve creating a separate route, controller and view to display "Hello, Symfony!".

// Symfony controller
class HelloController extends AbstractController
{
    public function index(): Response
    {
        return $this->render('hello/index.html.twig', [
            message' => 'Hello, Symfony!
        ]);
    }
}

// Symfony route file (routes.yaml)
hello:
    path: /hello
    controller: App\\Controller\\HelloController::index

In this example, a route is configured in a routes.yaml configuration file, a controller is created to manage the logic, and a Twig view is used to display the message. This requires more detailed configuration than Laravel, which may seem complex at first, but offers great flexibility for complex projects.

Another distinctive aspect of Symfony is its use of components. Symfony is built around a large number of independent components (such as the HTTP component, the Routing component, etc.), which you can use in a modular way in your projects. This encourages code reuse and the separation of concerns, which is particularly beneficial for large-scale projects.

Personally, I think Symfony's modularity makes it a good choice for small projects, as it allows you to develop a small, structured project 🪨.

Community comparison

When it comes to communities, Laravel and Symfony each have their own unique advantages. Laravel has a very active community and comprehensive documentation. In addition, it offers a tool called "Laravel Forge" that simplifies the deployment of Laravel applications. On the other hand, Symfony has a robust community, world-renowned components, and is often used for large-scale enterprise projects.

Performance

In terms of performance, Symfony tends to outperform Laravel for large-scale projects, thanks to its more modular architecture and detailed configuration options. Laravel, however, is often considered faster for initial development due to its simplicity.

Summary

Laravel is best suited to :

Rapid development
Small and medium-sized applications
Novice developers

Symfony is better suited to :

Complex projects
Enterprise applications
Experienced developers

If you would like to go into more depth, I would recommend the following resources:

Laravel VS Symfony : Choosing the right PHP framework by Jigar Shah
Laravel vs Symfony

In conclusion, Laravel and Symfony are two excellent PHP frameworks, but they differ in their approach to development. Laravel stands out for its simplicity, development speed and package ecosystem. Symfony offers maximum flexibility for complex projects, thanks to its components and detailed configuration.

If you have any questions, please don't hesitate to ask, and don't forget to leave me a little feedback - it's always a pleasure!

The Key 🔑 Concept of Responsive Interfaces in ReactJS

Patrick Zocli — Mon, 02 Oct 2023 15:58:06 +0000

What is the Virtual DOM?

Well, it’s a representation of the actual DOM, stored and synchronized with it by React through its ReactDOM library.

In case you briefly know what the DOM is, or not, imagine that when a web page (web document 📄 ) loads in a browser, it generates a kind of tree-like data structure of the page.
This structure is in the form of nodes and objects used to store information about the various elements (more precisely, the tags) on the page.
These objects can represent windows, documents, sentences, or even styles. The generated structure is thus called the DOM (Document Object Model).
The information in this DOM can then be read and modified smoothly by scripting languages like JavaScript with the help of libraries such as React.

Why Create a Virtual DOM ?

The virtual DOM was created primarily for optimization reasons, let me explain.

When a modification is made to a web page, the browser updates loops the part of the page affected by that modification and redraws it.

The problem is that for all modifications, no matter how small they are, the browser performs a new analysis and a new rendering. When many modifications are made frequently, it becomes a whole different story 🔥.

To optimize these sometimes excessive updates, several approaches are used, including the VDOM (Virtual DOM), lazy loading, throttling and debouncing, as well as libraries like Redux.

How Does React Use the VDOM?

During the initial rendering of the application, React creates a tree of the virtual DOM for the web page and stores it in memory.

When the application is updated (with each setState() call or prop change), React creates a new VDOM tree with all the modifications.
It detects the elements that have changed and those that need to be updated by comparing the new VDOM tree with the previous one, using a diffing algorithm called "Reconciliation."
From this, it generates an action plan that details the updates to apply to the actual DOM.
Finally, React applies the necessary updates to the real DOM, following the action plan generated with ReactDOM.

💡 But how does React manage DOM changes differently from direct manipulation in pure JavaScript?

When you make multiple rapid changes to the DOM in pure JavaScript, each change can trigger an immediate update, while React has the ability to group these changes to apply them all at once, thereby avoiding excessive operations.

Going Further 🔎: What Does This Comparison Algorithm Do?

As you might expect, React compares elements of the virtual DOM from the root node to the last node and acts differently depending on the types of elements.

Change of Type

When an element changes its type (for example, from <a> to <button>), React destroys the current tree and creates a new one by inserting the new elements.

For example, by comparing these two elements:

<!-- Initial State -->
<div>
    <a href="javascript:void(0)">Like</a>
</div>

<!-- State After Modification -->
<div>
    <button>Like</button>
</div>

React rebuilds the entire VDOM by replacing the <a> node with the <button> node.

Property Change

However, when it's just a property change, React only updates the property in the VDOM.

<!-- Initial State -->
<div className="card"></div>

<!-- State After Modification -->
<div className="card card__white"></div>

No comment.

Handling Children

Let's imagine two <ul> lists:

<!-- Old List -->
<ul>
  <li>Cat</li>
  <li>Dog</li>
</ul>

<!-- New List with Addition -->
<ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Bird</li>
</ul>

By comparing each element in these lists, React notes that the element <li>Bird</li> has been added by correspondence and simply updates it.

But, but, but if you add an element to the beginning:

<!-- Old List -->
<ul>
  <li>Cat</li>
  <li>Dog</li>
</ul>

<!-- New List with Addition at the Beginning -->
<ul>
    <li>Bird</li>
  <li>Cat</li>
  <li>Dog</li>
</ul>

When comparing the first children <li>Cat</li> and <li>Bird</li>, React considers this a change of type. It will update each element individually (which is not ideal for performance).

This is where React's key attribute comes into play. It uses it to match the children of the initial tree with those of the subsequent tree.

<!-- Old List -->
<ul>
  <li key="1">Dog</li>
  <li key="2">Cat</li>
</ul>

<!-- New List with KEY -->
<ul>
  <li key="3">Bird</li>
  <li key="1">Dog</li>
  <li key="2">Cat</li>
</ul>

Now, React knows that the element with key '3' is new, and the elements with keys '1' and '2' have been moved. Thus, React can efficiently rearrange the elements without having to rebuild the entire list.

In summary, ReactJS stands out as a tool of choice for creating user interfaces. With the virtual DOM explained here, React optimizes performance by minimizing costly updates to the real DOM, contributing to smooth interfaces and efficient development. It is worth noting that while React is recognized for this approach, it is not the only one to adopt it.

If you have any questions or would like to learn more about, feel free to reach out.

5 flutter projects you should build…seriously ⚙️

Patrick Zocli — Wed, 22 Mar 2023 09:53:52 +0000

Introduction 🎬

We know that flutter is an open-source mobile application development framework that is quickly gaining popularity amongst developers. It allows for the development of high-performance applications for both Android and iOS platforms using a single codebase. With Flutter, developers can build beautiful and functional applications with ease.

In this article, we will explore 5 Flutter projects that you should build to improve your skills as a developer. These projects are designed to challenge your skills and provide you with valuable experience in building real-world applications. Let's get started!

1. Ecommerce App 🛍🏬

The Ecommerce App is an excellent project for anyone who wants to learn more about building an end-to-end e-commerce application. This project will require you to build both the customer and admin sides of the app, including adding real products, their metadata, and all the necessary features for a functioning e-commerce application. You will also learn how to integrate payment systems, such as Stripe, into your application.

Stack: Flutter, Postgres, NodelS, Heroku, Stripe, AWS

📚 Some resources:

2. Social Media App 📱👥

Social media is a ubiquitous part of our daily lives, and building your own social media app is an exciting project. In this project, you will learn how to build a social media application using Flutter, MongoDB, ... . You will also learn how to implement features such as user authentication, messaging, and notifications.

Stack: Flutter, MongoDB, NodeJS, SocketlO, AuthO, Heroku, AWS

📚 Some resources:

3. Youtube Clone 🎥▶️

Video platforms are the future, and building a YouTube clone is an excellent way to learn more about video streaming applications. In this project, you will build a replica of YouTube with your own custom features.

Stack: flutter, mongodb, nodes, heroku

Some resources 📚:

4. Messenger App 📨📲

Building a messaging application is an excellent way to learn more about real-time communication. In this project, you will build a messaging app with two core features: public and private messaging. You will also learn how to integrate databases such as MongoDB, RedisDB, and SocketlO into your application.

Stack: Flutter, MongoDB, NodeJS, Heroku, AWS, RedisDB, SocketlO

Some resources 📚:

5. Notion Clone 📃📊

Notion is an all-in-one tool used for creating notes, timetables, todo lists, and more. Building a Notion clone is an excellent project for anyone who wants to learn more about creating productivity applications.

Stack: Flutter, Firebase/Supabase

📚 Some resources:

404 not found ;)

Conclusion

These five Flutter projects are excellent for improving your skills as a developer. By building these applications, you will learn how to implement various features and integrate different databases and services. Whether you are a beginner or an experienced developer, these projects are an excellent way to improve your skills and build your portfolio.

If you loved this article, do not hesitate to like, you will make me happy.

Happy coding! 🍻

Best practices to use Git like a pro

Patrick Zocli — Sun, 19 Feb 2023 19:44:44 +0000

Welcome to the wonderful world of Git 🚀, where we can store versions of our code without the hassle of endless folders named "version1", "version2", "version3", and so on.

Git is an incredibly useful tool for developers, but it can be intimidating at first. In this article, we'll talk about the best practices to adopt if you want to use it like a pro!

1. Don't store unnecessary files

Imagine you have a folder full of useless files, like "Untitled-1.txt", "Trying out stuff.txt", "README-copy.md", etc. When you use Git to commit your changes, it will include them in your project history. This means that these useless files will be stored forever in your project history.

The solution? Add a .gitignore file to the root of your project and list all the files and folders you don't want to include in the Git history. For the lazy, there are even .gitignore templates available online for different types of projects.

For example : https://github.com/github/gitignore, https://github.com/toptal/gitignore/tree/master/templates

2. Regular and atomic commits

When working on a feature or a bugfix, don't forget to make regular commits. This saves your work and makes it easier to understand by other team members (and/or yourself).

Atomic commits are commits that contain only one logical change to your code. If you make multiple changes at the same time, it can be difficult to understand which commit caused which change (I've experienced this unfortunately 🥲). Especially when using atomic commits, it's easier to see the history of code changes.

3. Use branches

Branches are copies of your code that you can work on without affecting the main branch. This way, you can test features without affecting the main code and merge changes only when you are sure that everything works fine.

When you create a branch, it's a good idea to name it after the functionality you're developing.

❌ Avoid generic branch names like branch-1 or branch-2.

✅ Prefer more specific names like feature-payment or bug-page-connection. It's easier to find your way through the branch history.

"Good to know: Never push directly on the main branch"

4. Use meaningful commit messages

When you make a commit, the associated message should be clear and precise to explain the change you made.

❌ Avoid unnecessary commit messages like "modify" or "bug fix." They do not provide enough information to understand the changes made.

✅ Prefer more specific messages like "Fixed login page bug" or "Added contact form validation". Use action verbs in your commit messages to describe what the change does: add to, remove from, fix, etc.

5. Make pull requests to merge your branches

A pull request is a branch merge request that allows other developers to see the changes made, test them, and give feedback. It is also a good practice to request a code review before merging a branch.

6. Make regular backups

Imagine working hard for hours or even days on a project and losing everything due to a hard drive failure or a branch merge error. This can be devastating to your motivation and productivity. So it's crucial to take the time to make regular backups of your code, whether it's using online storage services like GitHub or GitLab, backing up to external drives, or using cloud backup services.

Conclusion

Now you know the best practices to use Git like a pro! If you follow these tips, you'll avoid common Git pitfalls and be able to develop cleaner, more maintainable projects.

I hope this article was helpful and gave you some tips on how to use Git well and avoid common problems. If you have any questions, comments, or ideas for improvement, feel free to share them in the comments. And if you liked this article, don't forget to share it with your developer friends to help them use Git better.

Save time by using array functions in Javascript

Patrick Zocli — Sun, 29 Jan 2023 08:08:47 +0000

Array transformation functions are valuable tools for Javascript developers. They allow us to easily manipulate the elements of an array and transform them according to our needs. In this article, we will explore three of these functions: map, filter and reduce, talk about a juicy javascript skill called piping and finally talk about when to use these functions or not for optimal performance.

The functions

Map

The map() function allows to transform each element of an array into another one by executing a function on each element. This function is passed as a parameter and takes as arguments three parameters, the last two of which are optional: the current value, the current index and the original array.

Here is how to use map() :

const result = array.map(function(currentValue, currentIndex, array) {
    // code to execute on each element 
});

Let's say we have an array of characters with their life level and attack power :

const characters = [        
    { name: "Mario", life: 100, attack: 50 },
    { name: "Luigi", life: 90, attack: 60 },        
    { name: "Peach", life: 80, attack: 70 },    
    { name: "Toad", life: 70, attack: 80 },     
    { name: "Bowser", life: 60, attack: 90 }  
];

We want to display a list of characters with their life/attack ratio (i.e. their life divided by their attack). We can use map() to transform the array of characters into an array of ratios:

// Define the transformation function that calculates the life/attack ratio for each character  
const ratioLifeAttack = character => character.life / character.attack;   

// Use the map() method on the characters array by passing it the transformation function 
const ratios = characters.map(ratioLifeAttack);

console.log(ratios); 
// display [2, 1.5, 1.1428571428571428, 0.875, 0.6666666666666666]

The map() function traverses each character in the characters array and calculates its life/attack ratio using the life/attack ratio() transformation function. The result is a new ratios array containing the ratios for each character. Here we don't need the other arguments, i.e. the current index and the array being analyzed.

Filter

The filter() function allows to select the elements of an array that satisfy a given condition. It goes through each element of the array and performs a function on each of them. If the function returns true for an element, then filter() adds it to its new array. Otherwise, the element is ignored.

It is used in the following way:

const result = array.filter(function(currentValue, currentIndex, array) { 
    // code to execute on each element 
});

Let's go back to our character example. This time we want to get a list of characters that have a life/attack ratio greater than 1. We can use filter() to select these characters :

// Define the filter function that checks if the life/attack ratio is greater than 1 
const ratioSuperiorAUn = character => character.life / character.attack > 1; 

// Use the filter() method on the characters array by passing it the filter function 
const charactersFilters = characters.filter(ratioSuperiorAny);

console.log(charactersFilters); 
// display [{ name: "Mario", life: 100, attack: 50 }, { name: "Peach", life: 80, attack: 70 }]

Our function goes through each character in the characters array and checks if their life/attack ratio is greater than 1 using the ratioSuperiorAUn() filter function. In case the function returns false, the element is ignored and in case it is not, the element is added to the new array. The result is a new array charactersFilters containing the characters that have a life/attack ratio greater than 1.

Reduce

The reduce() function allows to reduce an array to a single value by executing a function on each element. This function is passed as a parameter and takes as arguments four parameters: the accumulator (which is initialized with the initial value or the first value of the array), the current value, the current index and the original array.

It is used as follows:

const resultat = array.reduce(function(accumulator, currentValue, currentIndex, array) { 
    // code to execute on each element 
}, initialvalue);

Let's consider our character example again. Assuming this time that we want to calculate the sum of all the characters' life levels, we can use reduce() in the following way:

// Define the reduce function that calculates the sum of the life levels
const sumLife = (accumulator, character) => accumulator + character.life;

// Use the reduce() method on the characters array by passing it the sumLife function
const lifeTotal = characters.reduce(lifeSum, 0);

console.log(sumLife); 
// display 400

On each element of the array, reduce() executes the reduce function sumLives() which takes as arguments the accumulator (which is initialized with the initial value 0) and the current value (which is the current element of the array).

On the first iteration, the accumulator is 0 and the current value is the first element of the array, which is { name: "Mario", life: 100, attack: 50 }. The reduce function then adds the value of life of the current element to the accumulator and updates its value with the result, giving accumulator = 0 + 100 = 100.

On the second iteration, the accumulator is now 100 and the current value is the second element of the array, which is { name: "Luigi", life: 90, attack: 60 }. The reduce function again adds the value of life of the current element to the accumulator and updates its value with the result, so accumulator = 100 + 90 = 190.

This operation is repeated for each element of the array until all elements have been processed. When all the elements of the array have been processed, the accumulator contains the sum of all the characters' life levels, which is 400 in our example. The final value of the accumulator is then returned by the reduce() function as the final result.

Advanced data processing with the pipe

Among all the features offered by JavaScript, the pipe is probably one of my favorites. This technique of combining array transformation functions allows us to process data in a more complex way and solve complex problems in an efficient way. With the pipe, we can chain multiple transformation functions together in sequence and use the result of each function as input for the next. It's an incredibly powerful and convenient feature that you'll definitely love.

Here is an example of a pipe using the map() and filter() functions:

const characters = [
    { name: "Mario", life: 100, attack: 50 },
    { name: "Luigi", life: 90, attack: 60 },
    { name: "Peach", life: 80, attack: 70 },
    { name: "Toad", life: 70, attack: 80 },
    { name: "Bowser", life: 60, attack: 90 }
];

// The transformation function "ratioLifeAttack" calculates the life/attack ratio for each character
const ratioLifeAttack = character => character.life / character.attack;

// The filter function "filterRatioHigh" keeps only the characters with a life/attack ratio higher than 1
const filterHighRatio = character => ratioLifeAttack(character) > 1;

// We chain the functions "ratioLifeAttack" and "filterRatioHigh" using the pipe
const charactersFilters = characters
    .map(ratioLifeAttack)
    .filter(filterHighRatio);

console.log(charactersFilters); 
// display [{ name: "Mario", life: 100, attack: 50 }, { name: "Peach", life: 80, attack: 70 }]

In this example, we created a transformation function LifeAttackRatio that calculates the life/attack ratio for each character, as well as a filter function HighRatioFilter that keeps only characters with a life/attack ratio greater than 1. Using the pipe, we chained these two functions together so that we first calculated the life/attack ratio for each character, and then kept only characters with a high ratio. The final result is an array containing only Mario and Peach, who have a life/attack ratio higher than 1.

It is also possible to combine the reduce() function with other transformation functions. For example, we can use the pipe to calculate the average of all the characters' life/attack ratios:

const characters = [
    { name: "Mario", life: 100, attack: 50 },
    { name: "Luigi", life: 90, attack: 60 },
    { name: "Peach", life: 80, attack: 70 },
    { name: "Toad", life: 70, attack: 80 },
    { name: "Bowser", life: 60, attack: 90 }
];

// The transformation function "ratioLifeAttack" calculates the life/attack ratio for each character
const ratioLifeAttack = character => character.life / character.attack;

// The reduction function "sumRatios" calculates the sum of all the ratios passed as input
const sumRatios = (sum, ratio) => sum + ratio;

// We chain the functions "ratioLifeAttack", "reduce" and "sumRatios" using the pipe
const averageRatios = characters
    .map(ratioLifeAttack)
    .reduce(sumRatios, 0) / characters.length;

console.log(averageRatios); 
// display 1.1428571428571428

Here, we first transformed each element of the table into its life/attack ratio, then reduced all these ratios into a single value: the sum of all ratios. Finally, we divided this sum by the number of characters to get the average of these ratios.

It is important to note that the pipe is not a native JavaScript function, but rather a programming technique that consists of chaining several functions together in order to process data in a more complex way.

There are various ways to implement a pipe in JavaScript code, but the most common technique is to use the map(), filter() and reduce() function chain.

Let's talk about performance

It is important to consider performance when using these functions. Indeed, although they are very convenient and simplify the code a lot, they can be slightly slower than classical loops combined with if conditions. However, this performance difference is usually negligible for reasonable array sizes. In case you are working with very large arrays, it may be better to use a classic loop to optimize the performance of your code.

It is also important to note that these functions are very efficient in terms of memory, because they do not create new arrays at each iteration as a classical loop would. Instead, they use the same original array and simply change the values of its elements. This reduces memory usage and improves the performance of your code.

Summary

Array transformation functions are powerful and efficient tools for processing data in Javascript. They allow us to easily transform the elements of an array according to our needs, without using loops or complex conditions. We have seen how to use map(), filter() and reduce() to perform operations on array elements, but there are other array transformation functions such as sort(), every(), some(), and other. It is important to choose the function that best suits your needs to avoid overloading your code and improve its performance.

Did you like this article? Share it with your friends and enemies (you never know, maybe they need to make up with you). And if you have any questions or comments, don't hesitate to send them to me. I love to talk tech. And if you run out of ideas you can always leave me a little feedback, we never get enough.

Click here to access the code

DEV Community: Patrick Zocli

Send email with nodejs

Prerequisites

Development

Explanation

4 time saving tailwind tips… ⏱️

1 - Utility classes

Container (container)

Size (size-*)

Line Clamp (line-clamp-*)

2 - Best approach

3 - Common properties of children in the parent

4 - Prettier for better navigation

Laravel or Symfony: Which to choose for your project? 🤔

Laravel

Symfony

Community comparison

Performance

Summary

The Key 🔑 Concept of Responsive Interfaces in ReactJS

What is the Virtual DOM?

Why Create a Virtual DOM ?

How Does React Use the VDOM?

Going Further 🔎: What Does This Comparison Algorithm Do?

Change of Type

Property Change

Handling Children

5 flutter projects you should build…seriously ⚙️

Introduction 🎬

1. Ecommerce App 🛍🏬

2. Social Media App 📱👥

3. Youtube Clone 🎥▶️

4. Messenger App 📨📲

5. Notion Clone 📃📊

Conclusion

Best practices to use Git like a pro

1. Don't store unnecessary files

2. Regular and atomic commits

3. Use branches

4. Use meaningful commit messages

5. Make pull requests to merge your branches

6. Make regular backups

Conclusion

Save time by using array functions in Javascript

The functions

Map

Filter

Reduce

Advanced data processing with the pipe

Let's talk about performance

Summary

Container (`container`)

Size (`size-*`)

Line Clamp (`line-clamp-*`)