DEV Community: Edgar Carrillo

How to: work on two or more folders at the same time in VSCode

Edgar Carrillo — Sat, 25 Feb 2023 02:05:22 +0000

Explanation

Ever been in a situation where you're front-end code and your back-end code are in different folders?

Then you find yourself with the pain of going back and forth between two vscode editors?

With Multi-root Workspaces you can work on multiple folders all within one editor, here's how!

Steps to create Workspace

1.

Go to the location where your front-end and back-end folders are stored within terminal.

2.

Open one of the folders with vscode.

3.

Within vscode click command + p to open a search bar. Within the search bar type >add folder to workspace and click on the result that pops up.

4.

Your folders will popup. Select the folders you want to work on at the same time, then click add.

5.

Again, open the search bar in vscode with command + p and search for >add folder to workspace and click on the result.

6.

A popup will appear. Name the workspace that houses your multiple folders how you like. And also make sure to choose where you'd like to store this workspace then save.

How to access workspace

If you completed the 5 steps to create workspace you're ready to go!

What you did was create a workspace that references your multiple folders. To use it go to the location you saved the workspace at using terminal.

Now treat it like opening a file, open it with vscode and you're ready to go!

How to find and kill a process locking a port on Mac

Edgar Carrillo — Wed, 19 Oct 2022 16:16:51 +0000

Introduction

Many of us have probably tried running our server on a port such as localhost:3000 or development environment on the same port.

There's also the time where we closed our terminal without killing our port. This brings up a:

EADDRINUSE: address already in use :::3000

...error message (your port number could be different)

This quick guide will show you how to find the port and kill it in two simple commands.

Steps

Get the PID of the port you want to kill. In terminal type the following

sudo lsof -i :3000 # The port # here should be the one giving issue

A series of information should appear on your screen. Take note of the PID number.

Type the following command to kill the port with the PID you specified:

kill -9 <PID>

Conclusion

Now since you killed the port you should be free to reuse it!

References

Find (and kill) process locking port 3000 on Mac [closed]

Can't install Node below version 15? Here's how.

Edgar Carrillo — Fri, 23 Sep 2022 01:15:06 +0000

Requirements

In order to continue with this article please have nvm installed on your device.

Background

If you have an Apple Silicon Device (usually newer MacBooks) you probably saw an error when trying to install Node below version 15 (Like v14.0.0) with nvm. Here's how to get past that error and install node below version 15.

Solution

First you want to install Rosetta. To do this open Terminal and type in the following:

softwareupdate --install-rosetta

Once installed, you will need to go to your Applications folder on your device and find Terminal. If your Mac was setup like mine it will be in a nested folder within applications.

Applications -> Utilities -> Terminal

Once you see the terminal icon, right click on it, click on Get Info and select Open using Rosetta. Then restart your terminal.

Now open terminal back up and run the following command

arch -x86_64 zsh

Your device should now be able to install Node below version 15!

Resources

Stackoverflow

SSH into AWS: EC2 instances easily!

Edgar Carrillo — Thu, 28 Apr 2022 16:48:06 +0000

Intro

This tutorial will show you how to login to your ec2 instance without having to do ssh ./pem.key ubuntu@0.00.00.0 each time.

With this easy to setup method you can login to any number of ec2 instances with a simple command for each instance. No installs needed!

going from this

ssh ./pem.key ubuntu@0.00.00.0

to this

ssh api-one-ec2

(you can name your entry point whatever you'd like)

Tutorial

Things you need

The absolute path to your pem file related to the ec2 instance you want to login to.
The IPv4 address of your ec2 aws instance.

Steps

First edit your ssh config file in vscode. To do this type in the following

code ~/.ssh/config

Something like this should popup

Then you're going to add and fill in some syntax

Host will be the shorthand text you type to log into your instance from anywhere in terminal.
HostName This you need to get from aws. It's the Public IPv4 address of the instance you want to login to.
User This is your instance user. If you created a ubuntu instance keep it as ubuntu.
IdentityFile This is going to be the location where your pem key resides. Make sure to use an absolute path to your pem key. Here's a good article that describes what the ~ key is in this path.
IdentitiesOnly just keep it as yes for now. I'll update why soon.

Once all this is filled out then you can now login to your ec2 instance from anywhere! With the example I provided I would just type ssh api-on-ec2 and I'm in!

I no longer have to type ssh ./pathToPem.pem ubuntu@00.000.00.000!

Cautions

There will be times where your IPv4 address will change such as stopping your ec2 instance. In this case all you have to do is update your HostName in the ssh config to the new address and you're good to go!

Same goes for your pem file, make sure that if you move it to another location to also update IdentifyFile pem path in ssh config to reflect the new location.

Dynamic Item Selection: Made with React Hooks

Edgar Carrillo — Wed, 12 Jan 2022 04:15:05 +0000

TLTR

Jump to Quick Explanation below to get a 15 second explanation.

Just want to see it in action? Try out the deployed demo. Want a deep dive? Take a peek at the repo.

Requirements

You're required to know the below in order to understand what I'm going to be explaining in this article:

React Hooks
React Functional Components
Styled-Components

Understand the above? Great, keep reading! If you don't I'd do some quick googling to learn about them or for a refresher.

Quick Explanation

This Hook allows the user to create an 'n' number of list items that on hover will emphasize the hovered list item and dim all other elements.

When the user no longer is hovering over a list item all elements will return to the default coleration.

This hook also pairs with a styled component, in this case it's called TextAnimateLi which is hard coded to fit my styling needs but can be changed to your style and element preference.

useTextAnimate

const useTextAnimate = (data) => {
  const [content, setContent] = useState(data);

  const setOneActive = (name) => {
    let contentCopy = [...content];

    contentCopy.forEach((item, index, arr) => {
      if (arr[index].name !== name) {
        arr[index].isActive = false;
      }
    });

    setContent(contentCopy);
  };

  const setAllActive = () => {
    let contentCopy = [...content];

    contentCopy.forEach((item, index, arr) => {
      arr[index].isActive = true;
    });

    setContent(contentCopy);
  };

  return { setOneActive, setAllActive, content };
};

This hook when used takes in an array of objects as it's argument.

const data = useTextAnimate([
    { name: 'work', isActive: true },
    { name: 'about', isActive: true },
]);

From here, we're assigning the array of objects data to content in state. This allows us to use stateful logic needed for dynamic style changing.

Then we come onto our first function setOneActive which will set all elements but the one with the matching name to false. This is the logic that allows us to see one element as emphasized.

The following function setAllActive() will set all items to be emphasized which is the default logic.

what is returned is:

content - array of objects that the user provided.
setOneActive - function
setAllActive - function

Real Life use

When using the hook it will take in an array of objects as an argument.

Each object must contain the following properties

name (Init with the text you want in the list item)
isActive (set it to true by default always)

const data = useTextAnimate([
    { name: 'work', isActive: true },
    { name: 'about', isActive: true },
    { name: 'contact', isActive: true },
    { name: 'cv', isActive: true },
  ]);

Note: the value retrieved from useTextAnimate must be assigned to a variable.

useTextContent will return 3 things.

content (the array of objects from earlier)
setOneActive (Explained in useTextAnimate above)
setAllActive (Explained in useTextAnimate above)

The hook provided the logic needed now we are going to populate a unordered list with list items that will use that logic.

Before we start using the logic we are going to need the styled-component TextAnimateLi.

const TextAnimateLi = styled.li`
  color: white;
  transition: color 0.2s;
  cursor: pointer;
  ${({ content, index }) => {
    if (content[index].isActive === false) {
      return `
      color: rgba(255, 255, 255, 0.5);  
    `;
    }
  }}
`;

To keep it short and sweet. It uses data provided by useTextAnimate to style each list item dynamically.

Now in order to put this together, we need to map over the array we created in my example, we can do this with data.content (Remember, using the variable name data was a personal choice when creating the variable earlier. It can be anything you'd like!)

<ul className={className}>
      {data.content.map((item, index) => {
        return (
          <TextAnimateLi
            key={index}
            onMouseEnter={() => data.setOneActive(item.name)}
            onMouseLeave={() => data.setAllActive()}
            content={data.content}
            index={index}
          >
            {item.name}
          </TextAnimateLi>
        );
      })}
    </ul>

What's going on here? The parameter item in the arrow function is the current object within the array content.

For each Component TextAnimateLi we are adding a set of properties.

key
MUST take index as it's value, do NOT use something like uniqid()).
onMouseEnter
Calls the function setOneActive()
onMouseLeave
Calls the function setAllActive()
content
takes in the array of objects
index
Takes the current index

Let's take a look back at TextAnimateLi to understand the styling logic.

/* It doesn't have to be a li. But for this case it's the best option. */
const TextAnimateLi = styled.li`
  /* This is the default color */
  /* You can set a new color here */
  color: white;
  transition: color 0.2s;
  cursor: pointer;
  ${({ content, index }) => {
    if (content[index].isActive === false) {
      return `
      /* This is the dimming color */
      /* You can set a new color here */
      color: rgba(255, 255, 255, 0.5);  
    `;
    }
  }}
`;

Pretty straight forward, when the current item is not active it will return a color which is dimmed otherwise, it will return to it's default color.

Take a look at my comments in the code to make changes as you see fit. feel free to mess around with the styling for different looks!

Enjoy!

Understanding the .valueOf() method (Currying anyone?)

Edgar Carrillo — Tue, 28 Dec 2021 18:34:15 +0000

Requirements

You're required to know the below in order to understand what I'm going to be explaining in this article:

ES6 Arrow functions
Closures
Callbacks

Understand the above? Great, keep reading! If you don't I'd do some quick googling to learn about them or for a refresher.

Story and why I wrote this

While completing my daily codewars.com questions I came up on the question A chain adding function. It had code I never saw before.

add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10
add(1)(2)(3)(4)(5); // 15

???

Like any good developer I did some headbanging trying to figure it out before I jumped into google to see what was going on.

Enter Currying.
And more learning about currying.

After researching currying I had a pretty solid understanding of it even with it's confusion of calling a function that returns a function that calls a function that... you get the point. (If not, check out the currying links above!)

Now lets get back to the codewars problem, yea it's cool that we know about currying but how do we solve a problem were...

The Problem

... a transformation of functions is created where we don't know the amount of arguments that are to be used?

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).
Quote from - Javascript.info, Currying

The Solution and explanation ✅ (What you prob wanted to know)

So how do we solve the problem!?!?

.valueOf()

Get it? The mdn article on .valueOf() threw me for a loop the first read around to.

I'm going to explain in my own code how I used it in the codewars.com problem from above.

Here's the solution

function add(n){
  let result = n;

  const func = (n) => {
    result += n;
    return func;
  }

  func.valueOf = () => {
    return result;
  }

  return func;
}

Let's take it step by step.

I declared a result variable that will hold my final result after currying is complete.
I declared a function func using es6 arrow functions that creates a closure where result is consistently changing when func is called. The return value is func itself. Note - the function add() does not end here! it keeps going. I hope you understand why, if not, discuss in the comments :)
❗ This is what you're looking for to understand .valueOf() ❗ - We add .valueOf to the func function. and in that closure we return result. What we are doing is overwriting the .valueOf method to return result once the callbacks have ended in the curry.
We return the func function - which will continue to repeat until there are no arguments left to do callbacks.

Summary

In summary, .valueOf() when in relation to functions will return a primitive value once there are no callbacks left to do.

A quote that made me understand .valueOf that's related to the codewars.com problem mentioned throughout the article is from user gelus.

So the key is to have a function that returns a function that has the valueOf method overwritten to return the current "value". ( phew )

Read the quote slowly, it's a bit to take in but it shows the use of valueOf in action.

Happy Coding!

Web-Dev Journey: Blog 1

Edgar Carrillo — Mon, 20 Dec 2021 19:43:46 +0000

Introduction
Hey everyone, I decided to start my web development journey to be able to look back at how far I've come as I develop new skills.

Some background about me, I'm the oldest of three children in my family, first generation here in the United States. Life started out rougher but my family knew that education and persistence is key to making something of yourself. Throughout life they have fought for me and now that I'm older I'm always wanting to find ways to give back. Not just to them but to my community that helped me become the man I am today.

And now I've been invested in web development, something that allows me to bring tech to my non-tech community and to have the freedom to also do what I love, problem solving!

With these blogs that I create I'll be documenting my journey through web development - the challenges I face, the things I discover, the creations I make, everything. As well as random posts on topics I'm learning/learned and to improve my writing and story telling skills.

So sit back, grab your laptop and your best coffee, and welcome to my web development life!

I hope to be able to relate to many others in this journey.