Forem: Gustavo Henrique Silva Tenório

Creating a margin between elements without adding in the last one.

Gustavo Henrique Silva Tenório — Wed, 20 Dec 2023 15:10:34 +0000

Hello guys!

Just sharing a simple tip about adding some margin or padding between components.
CSS has so many ways to do it, but this one is simple and smooth.

So, as you see the last padding in this image example seems to be with more padding than the above ones.

How to solve it? Basically, we should avoid adding the last padding because there are no more posts below.

.post + .post {
    margin-top: 1rem;
}

The + sign will make the CSS attributes be add just if you have a "post" class before :)

Post example:

    <article className="post">
      Any text here
    </article>
  );

NOTE: Rem is equivalent to 16px. But is a nice pattern to help people who change interfaces on their pc or mobile. It will be rendered in the size that they define :)

Tip to shrink you code using "Omit" to create interfaces!

Gustavo Henrique Silva Tenório — Tue, 12 Apr 2022 21:13:34 +0000

Hey guys! I want to share one tip to you!

Imagine that you have one interface called by "Deposit" to create using: Id, Name, Value, CreatedAt properties.

Usually we will create somethink like this:

interface Deposit{
    id: number;
    name: string;
    value : number;
    createdAt: string;
}
```



And if you need create another interface from "Deposit". For example, create a new one without the Id called by "DepositInput". We can use the Omit sintaxe. :D  

`type DepositInput = Omit<Deposit, 'id' >`

instead:

interface DepositInput {
name: string;
value : number;
createdAt: string;
}




You have oportunity to make short your codes. 
Enjoy :)

Tip to get selectors to use in javascript

Gustavo Henrique Silva Tenório — Tue, 16 Feb 2021 21:47:33 +0000

Guys, this is a simple tip to get the selector very easily. The browser inspection copy function.

Well, sometimes that functionality is very useful if you are handling a lot of HTML injections from these new javascript frameworks. Is expected that you do not need this, but someday, maybe this helps you save a little time.

Just inspect the code, use the right-click in your tag element and select the copy option on the menu, and then choose copy selector or copy js path. (Same as the image example)

Ex:
document.querySelector("#root > div > div.rightPanel > div.presentMe > div.name")

NOTE.1: Most of the time you should reduce the size of the selector. (Depends on the situation, analyze pls)

Ex:
document.querySelector("rightPanel div.name")

That is it :D! You got the selector.
Thanks, Vinicius Tartari for sharing this knowledge with me :)

LET and CONST, when should I use?

Gustavo Henrique Silva Tenório — Sun, 04 Oct 2020 23:21:40 +0000

Hello, DevGuys!

The CONST and LET variables are introduced in ES6 and nowadays it's very common to use in new codes. But, these days I've been studying React JS and a question came to mind, when should I use them?

Well, it's simple... they have your duty in code and help us to understand the codification

CONST means the variable can't be reassigned a new value and declarations are block-scoped. So, you can create to define constants values to be as "ready only". Please don't try to change this value :D.

const UNDERAGE_VALIDATION = 18;
function validateAge(age){
 (age < UNDERAGE_VALIDATION) 
   ? console.log("Underage person")
   : console.log("Older");
}

LET this variable will be reassigned and is block-scoped, that variable can be updated but not re-declared. :).

let counter = 0;
while(counter <= 10){ counter = counter + 1; }

That's simple, keep it's simple and do a clean code.
Bye-bye!

How can I use

 tag in react JS ?

Gustavo Henrique Silva Tenório — Sun, 13 Sep 2020 12:03:43 +0000

Hellow my fellows!

Yesterday I learn a small detail, but important. I tried to add a code example using <pre> tag in my react page to create my web portfolio. But, the <pre> tag doesn't worked as expected.

How should I use ?

Simple, we need use the ` character to envolve the code example.

Simple :D!