DEV Community: Guilherme Toti

Are you storing your files correctly? Let’s explore a real-world backend issue.

Guilherme Toti — Fri, 29 May 2020 12:23:10 +0000

Let’s start with a context

A few years ago, I developed a web application that basically: It’s possible to create your user, and after logging in, you can create “locations” and upload multiple media (images/videos/documents) to your location.
I used Django Rest Framework on the backend and React on the front-end.

But this applies to all backend languages.

At first, I did not set the “upload_to” of my FileInput field, so, by default, it will upload all media to the media folder.
Let’s say I upload three files. My media folder will look like:

- media
  - file1.jpg
  - file2.jpg
  - file3.jpg

That looks good; It’s working well!

That’s what I thought.

Now, a few years later, with +4k active users and +40k media uploaded, I found an issue: A customer told me the picture she added a few days ago was wrong. There was another picture in place.

After a few hours of debugging, I finally found the issue!

The issue

Let’s say I upload another file with the name “file1.jpg”. You would probably expect the server to rename the file to “file1(2).jpg”, right? Even because it happens on every OS! Something like:

- media
  - file1.jpg
  - file1(2).jpg <- the new one
  - file2.jpg
  - file3.jpg

But that does not occur on every backend. At least not by default.

What was happening there is: The just added “file1.jpg” was overriding the previous “file1.jpg”.

The solution

Well, to fix that, I had to change the “upload_to” to use a dynamic folder with the location id and create a migration to move all the current files to its expected folder.
So now my media folder will look to something like this (e.g.):

- media
  - location_1
    - file1.jpg
    - file2.jpg
  - location_2
    - file3.jpg

For the images that were overridden, I had to find them on the database to see which user uploaded them so I could warn them.

In summary, that was a mistake I did that I lost like two nights to debug and fix (nights, because it’s a side project).

I was really looking like this. The sh#t happening in production while I debug and fix it:

Don't do the same mistake

If you enable uploads in your application, try to make it's path or name unique.
It has a lot of ways to do that, and it only depends on your application:

It can have a folder by user id;
It can have a folder by the model id;
You can generate a folder name using UUID;
You can generate a new name for the file based on the timestamp/UUID (I thought about using this on the beginning, but won’t work because in my case, the file name must keep the original);

That's all folks!
I hope you guys enjoy it, and keep learning!

Using filter() in Javascript

Guilherme Toti — Thu, 28 May 2020 13:14:41 +0000

Hey guys, what’s up?!

Today I want to teach you guys how to easily filter Arrays using the Array.prototype.filter method.

The filter() method it’s very simple to implement but it’s also very powerful and helpful way to filter your data.

In this article, I’ll use the same example data object that I used on my previous article, about the map() method:

Using map() in Javascript

Guilherme Toti ・ May 27 '20

#javascript #node #webdev #tutorial

So, the example data object is:

const data = [
  {
    id: 1,
    name: 'John Doe',
    location: {
      city: 'São Paulo',
      state: 'SP',
      country: 'Brazil',
      zipcode: '00000-000'
    }
  },
  {
    id: 2,
    name: 'Don Juan',
    location: {
      city: 'Rio de Janeiro',
      state: 'RJ',
      country: 'Brazil',
      zipcode: '11111-111'
    }
  },
  {
    id: 3,
    name: 'The Rock',
    location: {
      city: 'Curitiba',
      state: 'SP',
      country: 'Brazil',
      zipcode: '22222-222'
    }
  }
]

Let’s imagine that you want to get from this array, only the objects where the location.state are equal to SP.

let newData = [];
for (let index in data) {
  const currentElement = data[index];
  if (currentElement.location.state === 'SP') {
    newData.push(currentElement);
  }
}

It would work, right? Right! But, we are creating another variable to handle the new data and looping through the data object, searching for a state equal to SP and then, pushing this object to the new variable.

I think we can do better than this, can't we?

Yes! We can do it better! Using the `filter()` method!

Let’s see how it would be written using the filter() method:

const newData = data.filter(function(currentElement) {
  return currentElement.location.state === 'SP';
});

The basic idea of the filter() method is:

- Pass to the filter() method a function who:
  - Receives the current element of the data array you're filtering;
  - Do your logic;
  - Returns a boolean;
- The filter() method will loop through the data array executing your function and passing each element of the array as a param;
- If your function has returned true, then the current element will be added to the new array;
- Otherwise it will be just ignored;
- Returns the new array with the filtered data;

And if you are learning about ES6, the same code could be written as:

const newData = data.filter((currentElement) => currentElement.location.state === 'SP');

Cool, huh? :D

Probably at this moment you must be thinking about your old codes and how to refactor them to use the filter() method, right?

Well, I hope so!

That's all folks!
I hope you guys enjoy it, and keep learning!

Using map() in Javascript

Guilherme Toti — Wed, 27 May 2020 14:04:29 +0000

Hello guys, how’re you doing?

Hope you’re doing great!

In this post, I want to talk about the map() function, a function related to Arrays in Javascript that I use a lot and it’s very useful for various situations.

I’ll show you guys some real-life examples, hope you guys like it!

map()

The map() function is very useful when you need to translate or change the elements in an Array.

It loops through the Array from left to right, creating a new Array, and, for each item, it runs some function that you passed as args, and your function must return a value, so, this return will be the new item of the new Array.

Let’s see an example below.

Imagine that you receive this data from your API:

const data = [
  {
    id: 1,
    name: 'John Doe',
    location: {
      city: 'São Paulo',
      state: 'SP',
      country: 'Brazil',
      zipcode: '00000-000'
    }
  },
  {
    id: 2,
    name: 'Don Juan',
    location: {
      city: 'Rio de Janeiro',
      state: 'RJ',
      country: 'Brazil',
      zipcode: '11111-111'
    }
  },
  {
    id: 3,
    name: 'The Rock',
    location: {
      city: 'Curitiba',
      state: 'SP',
      country: 'Brazil',
      zipcode: '22222-222'
    }
  }
]

So, you have an array of objects with:

- user id
- name
- location
  - city
  - state
  - country
  - zipcode

Let’s figure out we don’t need all this data, we need only an array with objects like:

{
  id: 1,
  name: 'John Doe',
  city: 'São Paulo'
}

Problably, to resolve that, you may be thinking in something like:

let newData = []

for (var index in data) {
  const user = data[index];

  newData.push({
    id: user.id,
    name: user.name,
    city: user.location.city
  });
}

Right?

It isn’t wrong, and it’s works, but, there is a lot of steps, and, we can do it better!

Doing that way, you are:

Instancing a new variable;
Doing a for loop through the data Array, getting each index;
Using this index to access the current element of the Array;
Pushing the new object to the variable previously created;

The map() function provides an easy way to do exactly this and with less steps!

Check below how to write the same using map():

const newData = data.map(user => ({
  id: user.id,
  name: user.name,
  city: user.location.city
}));

Maybe your reaction be like:

But, keep calm, i’ll explain every step!

When you execute Array.map(), to clear your mind in a real-life example, you can think in something like:

- The map() gets your Array;
- Loop through it, and, for each item it:
  - Execute the function you’ve passed, passing the current item as an argument;
  - Update the current item value, to the returned value from your function;

So, this also can be re-written to something like:

function parseUser(user) {
  return {
    id: user.id,
    name: user.name,
    city: user.location.city
  }
}

const newData = data.map(parseUser);

It will produce the same result and has the same effect.

And if you’re familiar with ES6, you can re-write it to:

const newData = data.map(({ id, name, location: { city }}) => ({ id, name, city }));

But i’ll not talk about ES6 now, maybe in another post! :P

Using any of the examples above, if you run a console.log(newData), you will receive:

[    
  {
    id: 1,
    name: 'John Doe',
    city: 'São Paulo'
  },
  {
    id: 2,
    name: 'Don Juan',
    city: 'Rio de Janeiro'
  },
  {
    id: 3,
    name: 'The Rock',
    city: 'Curitiba'
  },
]

So, that’s it guys, as expected!

I hope you guys understand about the map() function, but, if you have any questions please feel free to contact me!

That's all folks!

I hope you guys enjoy it, and keep learning!

My 5 cents about React Hooks

Guilherme Toti — Tue, 26 May 2020 12:10:37 +0000

Hey guys, how are you doing?

I'll shortly tell about my experience with React Hooks.

Sometimes I accept external projects to work on and I use it as an opportunity to learn new things, test new stuff. Right now I'm working on a mobile project using React Native and I'm using this opportunity to learn React Hooks and Context.

At first time reading the React Hooks introduction, I was a bit confused about what is Hooks and how it works. So I decided to just jump in and try to use it.

What I've learn about it:

React Hooks is a way to "shortener" your code
Use more function components and less classes
Easier to share and reuse stateful logic

Let's see those points in a real world.

React Hooks is a way to “shortener” your code

Lets say that you have a form and you need to store the form data and submit it when user click on the button. In a "not React Hooks" environment, would be something like:

import React from 'react'

class MyForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  handleChange = (name, value) => {
    const { data } = this.state

    this.setState({
      data: {
        ...data,
        [name]: value
      }
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    const { data } = this.state

    MyAPI.doSomething(data)
  }

  render() {
    const { data } = this.state

    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={data.name} onChange={e => this.handleChange('name', e.target.value)} />
        <input type="text" value={data.email} onChange={e => this.handleChange('email', e.target.value)} />

        <button type="submit">Submit data</button>
      </form>
    )
  }
}

This is how it will looks like using Hooks:

import React, { useState } from 'react'

const MyForm = () => {
  const [data, setData] = useState({})

  handleChange = (name, value) => setData(prev => ({ ...prev, [name]: value }))

  handleSubmit = (e) => {
    e.preventDefault()

    MyAPI.doSomething(data)
  }

  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text" value={data.name} onChange={e => handleChange('name', e.target.value)} />
      <input type="text" value={data.email} onChange={e => handleChange('email', e.target.value)} />

      <button type="submit">Submit data</button>
    </form>
  )
}

Can you see the difference? From 42 lines to 22 lines.
Basically, when you write:

const [data, setData] = useState({})

You are doing something like:

constructor(props) {
  super(props)
  this.state = {
    data: {} // Initiating the data state as an empty object
  }
}
render () {
  const { data } = this.state // Getting the data key from state
}
AND
// Creating a kind of "helper" to set the state
const setData = data => this.setState({ data })

Use more function components and less classes

Using Hooks you don't need to have a lot of classes, you can do everything using function components!

Let's say that you need to track some props and do something if it changes. Without Hooks you would do something like:

import React from 'react'

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.name !== prevProps.name) {
      console.log('NAME CHANGED')
    }
  }

  render() {
    const { name, email } = this.props

    return (
      <div>
        <p>Your name is: {name}</p>
        <p>Your email is: {email}</p>
      </div>
    )
  }
}

In Hooks we use the useEffect function to do that:

import React, { useEffect } from 'react'

const MyComponent = ({ name, email }) => {
  useEffect(() => {
    console.log('NAME CHANGED')
  }, [name])

  return (
    <div>
      <p>Your name is: {name}</p>
      <p>Your email is: {email}</p>
    </div>
  )
}

What i'm doing here:

useEffect(() => { // useEffect needs to receive a function as param
  console.log(‘NAME CHANGED’) // Do something
}, [name]) // When the variable "name" changes.

I could also add another variable to the array, this would track it too, for example:

useEffect(() => {
  console.log(‘NAME OR EMAIL CHANGED’)
}, [name, email]) // When the variable "name" OR "email" changes.

But in this case, I don't know which one changed. So, using Hooks you can separate it, you can have multiple useEffect:

useEffect(() => {
  console.log(‘NAME CHANGED’)
}, [name])
useEffect(() => {
  console.log(‘EMAIL CHANGED’)
}, [email])

And now you can do things separately depending on what variable changed.

Another important change using Hooks is the componentDidMount function. It is a function that executes once, usually to load data or set initial stuff.

Using Hooks there is a trick:

useEffect(() => {
  console.log(‘I WILL APPEAR JUST ONCE’)
}, []) // Passing an empty array

Passing an empty array to the second param. This will be executed only once.

Easier to share and reuse stateful logic

Using Hooks you can extract the component logic to a custom hook and use it everywhere!

I won't talk about this topic with examples in this article because it can be very complex, so I do prefer to talk about it in another article.

But if you want to know more about it, you can check the documentation. It's awesome and very clear!

I'm enjoying using React Hooks so far. I had some trouble to understand it at the beginning but now it looks more clear to me.

I hope you guys enjoy my experience with Hooks and learn something from this.

If you have any question, please comment below! I'd be glad to help!

That’s all, folks!

The right way to use function as parameter

Guilherme Toti — Mon, 25 May 2020 13:24:20 +0000

Hey guys! How are you doing? Hope doing well!

I was answering few questions at Stack Overflow and I've just answer one that I believe is good to share as it is a bit complicated for beginners.

The situation

Let's imagine you have a list of items and you have a button for each item to delete it and this function receives the item id as parameter.

Lets imagine this is your Item Component:

const Item = ({ id, name, handleDelete }) => (
  <div>
    <p>{name}</p>
    <button>Delete</button>
  </div>
)

It already receives everything you need, you have the id and you have the handleDelete function, that does something with this id.

But what is the right way to use the handleDelete function on the button's onClick, considering you need to pass the id as props?

The wrong way

Many of you may think that this is how to do that:

const Item = ({ id, name, handleDelete }) => (
  <div>
    <p>{name}</p>
    <button onClick={handleDelete(id)}>Delete</button>
  </div>
)

But this is not!

If you use like that, what will happen is: as soon as the Component be rendered, it will execute the handleDelete function, because in this case, you are executing it, not passing it!

It should work if it doesn’t receives a parameter, as this example below:

const Item = ({ name, handleDelete }) => (
  <div>
    <p>{name}</p>
    <button onClick={handleDelete}>Delete</button>
  </div>
)

There are many situations that you will use functions without parameters, and for those situations that's right to do this!

The solution

The solution is pretty simple! All you need to do is wrap your handleDelete function inside another function!
Check it out:

const Item = ({ id, name, handleDelete }) => (
  <div>
    <p>{name}</p>
    <button onClick={() => handleDelete(id)}>Delete</button>
  </div>
)

Now it works perfectly! 🎉

Why?

The reason to do this is simple. When you wrap your function inside another function, you are passing to onClick a function as parameter, not executing it. The same as the previous example, a function without parameter, just a function.

Another way to do that, maybe it's more clear to you to understand is:

const Item = ({ id, name, handleDelete }) => {
  const onDelete = () => handleDelete(id)

  return (
    <div>
      <p>{name}</p>
      <button onClick={onDelete}>Delete</button>
    </div>
  )
}

Can you see what happened there?

I just created a variable to hold the function and passed this variable to onClick.

Maybe it's more clear now, right?

That's all folks!
I hope you guys enjoy it, and keep learning!

You don't always need “else” in your "if"

Guilherme Toti — Fri, 22 May 2020 11:37:42 +0000

Hey guys!

The most basic stuff you learned about programming, I think, is if…else. Am I right?

What if I say you don’t always need the else?
There are cases where the else is unnecessary, and your code becomes more readable without it!

Let’s see an example — let’s say you have a function like this:

function buttonColor(active) {
  if (active) {
    return 'orange'
  } else {
    return 'blue'
  }
}

So, if the parameter active is true it will return orange, otherwise it will return blue.

This is a case where you don’t need the else, let’s see the same function without it:

function buttonColor(active) {
  if (active) {
    return 'orange'
  }

  return 'blue'
}

Even if the previous one is easy to understand, it looks easier now, right?

So, if you have an if…else and you don’t check anything on the else, there is no reason to keep the else and return it instead.

I don’t know you, but, I have the feeling that with if…else I have to kinda “re-read” it to understand, while without else it’s more clear what is happening there.

That’s all, folks!
I hope you enjoy this quick tip!

Stop using default console.log, check this instead

Guilherme Toti — Thu, 21 May 2020 11:27:10 +0000

So, you are always using console.log to debug your application, right?
In this post, I will show you alternatives to better debugging.

Interpolating

How are you interpolating your console.log with variables? Are you doing something like this?

const a = 'World';
console.log('Hello ' + a);

That is not wrong, but there are better ways to do that.

The % Operator

The first way is using the % operator.
I believe it works almost like any other programming language that allows you to do that.

So, you can use it like this:

console.log('Hello %s', a);

There are other options, too, like %i for integers or %f for float numbers.
Google that, and you will see a lot of other options ;)

Template String

Template String is called when you wrap a string with backticks, e.g.:

const a = `This is a template string`;

But that is unnecessary if you are not interpolating variables on it, it is preferable to use single/double quotes in this case.

To use template string, you must wrap your variables in ${}, let's see how your console.log would look like:

const a = 'World';
console.log(`Hello ${a}`);

Looks clean, right?!

Styled

Did you know you can apply style to a console.log?

To do that, you need to start your console.log string with %c, and the second argument should be the "inline" CSS. Check this out:

console.log('%c I am a great text!', 'font-size: 26px; color: blue;');

Copy and paste that in your console and check what you get.
That's awesome, huh?

Warning

When you need to add a warning, you can do it using console.warn.

To do that, use:

console.warn('This is some warning');

Error

Yeah, I know, it's sux to have some error in our application.
But when we are trying to debug the errors to fix them, why not display an error instead of a default log?

To do that, use:

console.error('This is some error');

Info

Sometimes you just want to show some information differently.
Using console.info, it will display a little "info icon" before your log.

To do that, use:

console.info('Just a simple information');

Assert

You can use assert to test something.
In the first argument, you pass what you want to test, and the second argument is what to show in case the assert fails.
If the assert returns true, it won't display anything.

console.assert(1 !== 1, '1 is equal to 1');

Viewing DOM Elements

Let's say you have something like:

const p = document.querySelector('p');

So, you have the variable p as the first <p> of your page.
If you console.log it, you will probably get just the DOM element, but you can't know it's properties, et cetera.

BUT, we have the brave console.dir to save us!

console.dir(p);

It will log the DOM element as an object so that you can check all its properties, events, et cetera! AWESOME! \o/

Grouping

Sometimes you are logging things inside an array, and it becomes spamming in your console, right?

Take this as an example:

const dogs = [
  { name: 'Ricota', age: 2 },
  { name: 'Gorgonzola', age: 8 }
];

dogs.forEach(dog => {
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
})

Yep, I know, it's not that easy to read your console this way.
BUT we can group them!

We have two options.

console.group()

console.group will group it and shows it initially open (but you can close them)

Let's see an example:

dogs.forEach(dog => {
  console.group(dog.name); // This is the group title
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
  console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});

console.groupCollapsed()

console.groupCollapsed will group it too, but initially shows it closed, so you can open what you want only.

Let's see an example:

dogs.forEach(dog => {
  console.groupCollapsed(dog.name); // This is the group title
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
  console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});

For both, you need to close it with console.groupEnd().
For both, you need the same title when creating the group and when ending the group.

Table

You can generate a table in your console, oh yes, you really can!

Using the same dogs data example, try this in your console:

const dogs = [
  { name: 'Ricota', age: 2 },
  { name: 'Gorgonzola', age: 8 }
];
console.table(dogs);

It will show you a table with index, name, and age headers.

Clear

Now you did a lot of stuff in your console, why don't you clear it before continue testing another stuff?

Yes, you can clear it by using:

console.clear();

And right now you have a new and fresh console right up to you!

That's all folks!
I hope you guys enjoy it, and keep learning!

DEV Community: Guilherme Toti

Are you storing your files correctly? Let’s explore a real-world backend issue.

Let’s start with a context

But this applies to all backend languages.

That’s what I thought.

The issue

But that does not occur on every backend. At least not by default.

The solution

Don't do the same mistake

Using filter() in Javascript

Using map() in Javascript

Guilherme Toti ・ May 27 '20

Yes! We can do it better! Using the filter() method!

Using map() in Javascript

map()

My 5 cents about React Hooks

React Hooks is a way to “shortener” your code

Use more function components and less classes

Easier to share and reuse stateful logic

The right way to use function as parameter

The situation

The wrong way

The solution

Why?

You don't always need “else” in your "if"

Stop using default console.log, check this instead

Interpolating

The % Operator

Template String

Styled

Warning

Error

Info

Assert

Viewing DOM Elements

Grouping

console.group()

console.groupCollapsed()

Table

Clear

Yes! We can do it better! Using the `filter()` method!