DEV Community: Maysa Salvalaio

How to select the right HOF's to use

Maysa Salvalaio — Tue, 30 Aug 2022 20:13:32 +0000

Hey Devs! 🌼

I am a full-stack dev student, and today I'll be helping you to select the correct High Order Function (HOF) to use in your situation.

We use HOF's with arrays. HOF's run through each element of an array, just like when we use a simple for function, but easier.

I will use the result of the endpoint "/characters" from the Breaking Bad API to apply these functions. [available here]

The HOF's I'll be speaking about in this article are: forEach, map, find, some, every, filter, sort, and reduce.

Params in HOF's

These functions already have original parameters.

First param: the current element.
Second param: the index of the current element.
Third param: the entire array.

const array = [0, 1, 2, 3, 4];
array.forEach((element, index, allArray) => {
  console.log(`The element ${element} is in the position ${index} of the array ${allArray}`);
});

/* this code output:
The element 0 is in the position 0 of the array 0,1,2,3,4
The element 1 is in the position 1 of the array 0,1,2,3,4
The element 2 is in the position 2 of the array 0,1,2,3,4
The element 3 is in the position 3 of the array 0,1,2,3,4
The element 4 is in the position 4 of the array 0,1,2,3,4
*/

Funtions

`.forEach()`

The most important feature of this function is that it doesn't return anything. Because of this, we use it when we want that the function realizes something without needing anything in return. Which means we don't need to assign it to a const.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.forEach((cur) =>  console.log(cur.name));
/*
Walter White
Jesse Pinkman
...
Ignacio Varga
Eduardo Salamanca
*/

console.log('Result of const: ', result);
// Result of const: undefined

`.map()`

Very similar with the .forEach() function. The difference is that this function returns an array with the same length as the original one. In my projects, I mostly use it to render all the elements present in an array inside a React Component.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.map((cur) =>  cur.name);

console.log(result);
/*
[ 'Walter White', 'Jesse Pinkman', 'Skyler White', ...  'Ignacio Varga', 'Eduardo Salamanca' ]
*/

`.filter()`

As the own name suggests, this function filters our array according to a verification made by us. We only need to create the conditional test, and the filter will check if the result returns true or false. If true, the current element will be part of the array returned.

This function is my favorite. We can use it to create an array with the values we want. Really useful.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.filter((cur) =>  cur.name.includes('White'));

console.log(result);
/*
[
    {
        char_id: 1,
        name: 'Walter White',
        ...
    },
    {
        char_id: 3,
        name: 'Skyler White',
        ...
    },
    {
        char_id: 4,
        name: 'Walter White Jr.',
        ...
    },
    {
        char_id: 39,
        name: 'Holly White',
        ...
    }
]
*/

When none of the elements fit the condition, the function returns an empty array.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.filter((cur) =>  cur.name.includes('Bla Bla Bla'));

console.log(result); // []

`.find()`

This function is like the filter. We need to pass a conditional, but only the first element to fit it, will be returned. It's easy to see the difference between find and filter when we use the same condition on both, and the result is different.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.find((cur) =>  cur.name.includes('White'));

console.log(result);
 /*
 {
     char_id: 1,
     name: 'Walter White',
     birthday: '09-07-1958',
     occupation: [ 'High School Chemistry Teacher', 'Meth King Pin' ],
     img: 'https://images.amcnetworks.com/amc.com/wp-content/uploads/2015/04/cast_bb_700x1000_walter-white-lg.jpg',
     status: 'Presumed dead',
     nickname: 'Heisenberg',
     appearance: [ 1, 2, 3, 4, 5 ],
     portrayed: 'Bryan Cranston',
     category: 'Breaking Bad',
     better_call_saul_appearance: []
}
 */

When none of the elements fit the condition, the function returns undefined.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.find((cur) =>  cur.name.includes('Bla Bla Bla'));

console.log(result); // undefined

`.some()`

Different from the previous functions, some will return true or false. The response will depend if at least one element satisfies the condition used.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.some((cur) =>  cur.nickname  ===  'Heisenberg');

console.log(result); // true

`.every()`

Even as the some function, it returns true or false. The difference's all the elements have to correspond to the condition to return true.

const  characters  =  require('../characters-data/characters');

const  result  =  characters.every((cur) =>  cur.nickname  ===  'Heisenberg');

console.log(result); // false

`.reduce()`

This function receives a different set of parameters.

First param: the accumulator where a number is stored.
Second, third, and fourth are in the same sequence as shown before.

We use this function to calculate something present in all elements. In the example, we use it to calculate how many characters are in the Breaking Bad show.

const  characters  =  require('../characters-data/characters');

const  howUseIt  =  characters.reduce((acc, _curr, id, _array) => {
    console.log(`There is ${acc} accumulated, we are at position ${id}`);
    return  acc  +  1
}, 0);

/*
There is 0 accumulated, we are at position 0
There is 1 accumulated, we are at position 1
There is 2 accumulated, we are at position 2
...
There is 61 accumulated, we are at position 61
*/

console.log('There are '  +  howUseIt  +  ' characters on the show');
// There are 62 characters on the show

You can notice that after the callback, there is a zero. This number is the initial number used as our accumulator. In the second example, we can see what happens if this number is 10.

const  characters  =  require('../characters-data/characters');

const  result2  =  characters.reduce((acc) =>  acc  +  1, 10);

console.log(result2); // 72

`.sort()`

For this function, I had great help from a friend that studies with me, Arthur Coelho. He gave me several tips about how it works and suggested how to sort an array randomly using this function.

We use this function when we need to sort an array according to a rule. The most different feature present in this function is that it changes the original array.

const  myArray  = [90, 78, 65, 54, 09, 45, 35];

console.log(myArray); // [ 90, 78, 65, 54 ]

const  sorting  =  myArray.sort(() =>  Math.random() >  0.5  ?  -1  :  1);

console.log('sorting: ', sorting ); // sorting: [ 54, 78, 90, 65 ]
console.log(myArray); // [ 54, 78, 90, 65 ]

How to sort an array randomly: We use the Math.random function. It returns a random number between 0 and 1. We just need to use a ternary operator to determine the return.

The function sort, just like the reduce, works with different parameters.

First param: the current element.
Second param: the next element.

We must create a conditional that returns a number. If it returns a negative number the sequence stays the same. If it returns a positive number the order will change, where the first param and the second one will switch places. By convention, we usually use the numbers 1 and -1.

First, we have the sort by name. When we compare two strings, the one that is "bigger" actually is the one that is more close to the end of the alphabet. So if we want it in alphabetic order, we should switch the place of the words (return a positive number).

const  characters  =  require('../characters-data/characters');

const  result  =  characters.sort((a, b) =>  a.name  <  b.name  ?  -1  :  1);

console.log(result);
/*
[
    {
        char_id: 31,
        name: 'Adam Pinkman',
        ...
    },
    {
        char_id: 23,
        name: 'Andrea Cantillo',
        ...
    },
    ...
    {
        char_id: 4,
        name: 'Walter White Jr.',
        ...
    },
    {
        char_id: 36,
        name: 'Wendy S.',
        ...
    }
]
*/

Now, sorting numbers is easier than words, since if we return a subtraction between them, we already return a positive or negative number.

const  characters  =  require('../characters-data/characters');

// If we want a crescent order we use 'a - b'
// If we want a descending order we use 'b - a'
const  result  =  characters.sort((a, b) =>  a.char_id  -  b.char_id);

console.log(result);

/*
[
    {
        char_id: 1,
        ...
    },
    {
        char_id: 2,
        ...
    },
    {
        char_id: 3,
        ...
    },
    ...
]
*/

If you see something that can be improved, please contact me! All feedback is very welcome.✨

How to create an animation to open a menu with Tailwind in 5 steps

Maysa Salvalaio — Tue, 02 Aug 2022 23:46:28 +0000

Hey Devs! 🌼

I'm a dev student, and I would like to start producing content that can help other people. Since I'm starting in the dev community, I can relate to many difficulties that starters have, and I know that some of them seem too simple and don't even have content explanations on the internet.

Today I will be helping you to create a menu just like the one in the cover gif. As a bônus, I also set the current page with a different color on the nav bar. In this article, I'll be using a React application, which means some of the processes may be different if you're using a different kind of framework (or none at all). To create the logic that changes the page style, I'll use React Hooks.

The project is available in this repository, to use it you just need to follow the instructions in the README file. Also, there is deploy with the result if you want to see it.

I like to use this feature in my projects, however, I've never seen a tutorial explaining how to. So let's get started!😄

1. Installing Tailwind in your project

So, first thing, you need to install Tailwind. I recommend you look at the documentation (aka your best friend when coding).

2. Create the component

Now, you have to create the menu component. When I use React, I prefer to make it apart and add it to the pages. Here is an example of a navigation menu that I produced in my timer's project.

// component:  Nav
import  logo  from  '../assets/images/icon.png'
import  Button  from  '../components/Button';
import  LinkComponent  from  "./LinkComponent";

const  Nav  = () => {
    return (
        <nav>
            <Button
                func={() =>  setIsOpen(!isOpen)}
                txt={<img  alt="menu-burguer"  src={logo} />}
            />
            <div>
                <LinkComponent  path={"/"} txt={"Home Page"} />
                <LinkComponent  path={"/countdown"} txt={"Countdown"} />
                <LinkComponent  path={"/timer"} txt={"Timer"} />
                <LinkComponent  path={"/settings"} txt={"Settings"} />
                <LinkComponent  path={"/about"} txt={"About"} />
            </div>
        </nav>
    );
}

export  default  Nav;

// component: Button
const  Button  = ({ func, txt, isDisabled, className }) => {
    return (
        <button
            className={className}
            disabled={isDisabled}
            type="button"
            onClick={  func  }
        >
            {  txt  }
        </button>
    );
}

Button.defaultProps  = {
    isDisabled:  false,
} 

export  default  Button;

// component: LinkComponent
import { Link } from  "react-router-dom"

const  LinkComponent  = ({ path, txt }) => {
    return (
        <Link
            to={path}
        >
            {txt}
        </Link>
    );
}

export  default  LinkComponent;

3. Create the logic
For this animation to work as we expect, it's necessary to have a code that allows a change of the HTML classes. That is important because you need a different animation when opening and closing de menu, besides, it's fundamental that the position set to the bar is the one where it's supposed to stay when the animation is over.

// component:  Nav
import { useState } from  "react";
import  logo  from  '../assets/images/icon.png'
import  Button  from  '../components/Button';
import  LinkComponent  from  "./LinkComponent";

const  Nav  = () => {
// the state used to change the current situation (open or closed)
    const [isOpen, setIsOpen] =  useState(false);

    return (
        <nav>
            <Button
// when the "menu" button is clicked, it sets the state for the opposite boolean value
                func={() =>  setIsOpen(!isOpen)}
                txt={<img  alt="menu-burguer"  src={logo} />}
            />
// this is the div where the menu is "hidden", so it's where the change of classes needs to happen
            <div
                className={isOpen  ? ('class for open menu') : ('class for closed menu')}
            >
                <LinkComponent  path={"/"} txt={"Home Page"} />
                <LinkComponent  path={"/countdown"} txt={"Countdown"} />
                <LinkComponent  path={"/timer"} txt={"Timer"} />
                <LinkComponent  path={"/settings"} txt={"Settings"} />
                <LinkComponent  path={"/about"} txt={"About"} />
            </div>
        </nav>
    );
}

export  default  Nav;

The bonus part, where the link to the current page is highlighted, it's a bit more complicated, since it needs more logic.

// component: LinkComponent
import { useContext, useEffect, useState } from  "react";
import { Link, useRouteMatch } from  "react-router-dom"
import  TimeContext  from  "../context/TimeContext";

const  LinkComponent  = ({ path, txt }) => {
// first, we need to get the current pathname
    const  pathname  =  useRouteMatch();
    const [isCurrent, setIsCurent] =  useState(false);
    const [currentPath, setCurrentPath] =  useState('/');

// always when the pathname is changed the function occurs
    useEffect(() => {
        setCurrentPath(pathname.path)
    }, [pathname]);

// always when the pathname or the path (props) is changed the function occurs
    useEffect(() => {
        const  changeIsCurrent  = () => {
            if (currentPath  ===  path) {
                setIsCurent(true);
            } else {
                setIsCurent(false);
            }
        }
        changeIsCurrent();
    }, [currentPath, path]);  

    return (
// where happens the highlight depends if it's true (happen) or false (don't happen)
        <Link
            className={isCurrent  ? ('class when the page is the current'): ('class when the page is not the current')}
            to={path}
        >
            {txt}
        </Link>
    );
}

export  default  LinkComponent;

4. Create the animation

In the document tailwind.config.js, there's an object where you can add your custom settings. We're going to add our animation config, just like the example.

// tailwind.config.js
/** @type  {import('tailwindcss').Config} */

module.exports  = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {
            animation: {
                openmenu:  'openmenu 1s ease-in',
                closemenu:  'closemenu 1s ease-in',
            },
            keyframes: {
                openmenu: {
                // initial position
                    '0%': {left:  '-224px'},
                // final position
                    '100%': {left:  '0px'}
                },
                closemenu: {
                // initial position
                    '0%': {left:  '0px'},
                // final position
                    '100%': {left:  '-224px'}
                },
            }
        },
    },
    plugins: [],
}

5. Add the classes to the menu component

Now that you have your animation, it's time to add it to the component. This one is the result of my timer's project, but you can style it the way you like.
Alert: Don't forget to set the final position from the animation as the default in your component. That is necessary because once the animation is over, it'll be redirected to the position set.

// component:  Nav
import { useState } from  "react";
import  logo  from  '../assets/images/icon.png'
import  Button  from  '../components/Button';
import  LinkComponent  from  "./LinkComponent";

const  Nav  = () => {
    const [isOpen, setIsOpen] =  useState(false);

    return (
        <nav  className="font-epilogue">
            <Button
                className="w-20"
                func={() =>  setIsOpen(!isOpen)}
                txt={<img  alt="menu-burguer"  src={logo} />}
            />
            <div  
                className={isOpen  ?  
                "left-[0px] font-epilogue flex top-[12vh] animate-openmenu w-56 absolute flex-col   bg-light-ocean p-12 h-[88vh]" :  
                "animate-closemenu top-[12vh] left-[-224px] flex w-56 absolute flex-col bg-light-ocean p-12 h-[88vh]"}
            >
                <LinkComponent  path={"/"} txt={"Home Page"} />
                <LinkComponent  path={"/countdown"} txt={"Countdown"} />
                <LinkComponent  path={"/timer"} txt={"Timer"} />
                <LinkComponent  path={"/settings"} txt={"Settings"} />
                <LinkComponent  path={"/about"} txt={"About"} />
            </div>
        </nav>
    );
}

export  default  Nav;

// component: LinkComponent
import { useContext, useEffect, useState } from  "react";
import { Link, useRouteMatch } from  "react-router-dom"
import  TimeContext  from  "../context/TimeContext";

const  LinkComponent  = ({ path, txt }) => {
    const  pathname  =  useRouteMatch();
    const { currentPath } =  useContext(TimeContext);
    const [isCurrent, setIsCurent] =  useState(false);
    const [currentPath, setCurrentPath] =  useState('/');

    useEffect(() => {
        setCurrentPath(pathname.path)
    }, [pathname]);

    useEffect(() => {
        const  changeIsCurrent  = () => {
            if (currentPath  ===  path) {
                setIsCurent(true);
            } else {
                setIsCurent(false);
            }
        }
        changeIsCurrent();
    }, [currentPath, path]);  

    return (
        <Link
            className={isCurrent  ? (
            "mb-3 text-dark-purple font-bold bg-soft-purple p-2 text-center rounded-2xl"): (
            "mb-3 text-dark-purple hover:font-bold p-2 text-center")}
            to={path}
        >
            {txt}
        </Link>
    );
}

export  default  LinkComponent;

I hope I've enjoyed this tutorial. If you see something that can be improved, don't hesitate to get in touch with me! All feedback is very welcome.✨