Forem: Rafael Sant'Ana

This might be increasing your bundle size!

Rafael Sant'Ana — Tue, 03 Jan 2023 22:05:40 +0000

Hi there!

This is known by a bunch of people, but maybe you didn't know it, just like I didn't (':

Some time ago, I was on LinkedIn and I saw an interesting project. Inside the code, there was a code snippet similar to this

I thought it was clever, it seemed clearly better than tons of lines just for importing icons, then I started using it in most of my codes.

Recently, though, a work colleague told me not to, because in fact NodeJS builds with all the icons, even the ones that were not used, and therefore, increasing the project size and reducing the performace.

Instead, in fact, it is more advantageous to import one by one, similar to this

This post wouldn't be so useful if it didn't contain a way of knowing whether importing wildcard or one-by-one is more effective to your code.
And for this, I recommend a Vscode extension called 'Import Cost'

Obs: Wildcard imports are still a very valid option, but mostly if you'll use all or most of the imported content (:

How to improve imports in your code

Rafael Sant'Ana — Tue, 13 Jul 2021 14:15:13 +0000

Hello, there!

After a while without new posts, I decided to come back with a really useful tip to simplify your code and reduce repetition.

Have you ever saw a code like this ?

Wouldn't It be great if we could simply shorten it to this ?

Well, It's possible!

In order to do it, we will simply create a file named 'index.(js/ts)' inside components' folder, and add the following code in it:

And now you can import components easier from other files without needing to repeat their names.

If you think that it is still not worth it, because in index.(js/ts) the components are still being imported, there is another solution:

Instead of default exporting components

export default Input

Simply export them without default keyword

export const Input (...)

And in index.(js/ts) do this:

5 Extremely useful javascript methods that You might not know

Rafael Sant'Ana — Sun, 27 Sep 2020 03:04:01 +0000

Hi ! Recently I've been studying more about some Javascript methods and I found some really interesting ones, I hope it can help you to code faster and easier ! Soo, Let's begin:

PadStart()

By looking to the picture You probably understood but if You didn't, let me explain it better:
padStart is a string method, it means it can only be used with strings. Having set that, it works at the following way: the string on the second parameter will be added at the beggining of the string if its length is lower than the number in first parameter.
In other words, in the first parameter You tell the max length and in the second one, what the method will fill the string with.

padEnd()

It works just like padStart, but the difference is that instead of adding a text at the beggining of the string, it adds a text at the end.

reduce()

Reduce is an Array manipulation method, it needs a function as the first parameter, this function has two parameters, commonly named 'accumulator' and 'currentValue', and returning a value inside this function will make 'accumulator' have this value. The second parameter defines the start value of accumulator.

forEach()

forEach will execute a function for each value in the array. In this example, we sum 3 numbers to each element in the array.

toFixed()

This function removes the decimal part of a number, but it can also limit how many numbers there are in the decimal part of a number, as in the second example.

toLocaleString()

This function is a little more complex, but it basically converts a number to a formatted string. In the first parameter it takes a locale (For example, en-US). The second parameter is opcional but it takes format options, you can check them out here.

Soo, that's it! I hope it helped you guys!

Basics about NestJS

Rafael Sant'Ana — Fri, 25 Sep 2020 16:23:51 +0000

Hi again ! Today I'm going to write a little bit about NestJS -> A NodeJS framework made in order to make backend development in NodeJS way faster, I'm currently loving it ~even more than ExpressJs~ !

So, before beggining, I recommend you to use NestJs Cli and knowing a little bit about decorators. For installing it, You have to run this command in your terminal:

  npm install -g @nestjs/cli

Once It is done, You can already use their CLI, you can access it typing 'nest' in your terminal, if you wanna know more about their cli, Check their website.

Okay so, let's start a project:

  # nest new name_of_project is the command we use for starting a new project
  nest new my-first-nestjs-project

Okay so, when it installs all dependencies, You will have a project like this:

And then you might think... what is 'module', 'service' and 'controller' ?
Well, If you have already tried NestJS, You probably already know, but I'll try to explain:

app.service.ts

Starting by the services, let's go to 'app.service.ts' file, you will see this:

@Injectable() basically says that, according to dependency injection principles, that class may be injected in another variable

Now, focus on 'getHello' function, it is a really simple function that returns ' Hello ', simple, right ?

app.controller.ts

Now, If you go to 'app.controller.ts' file, There will be:

You probably already understood what it does, but if You didnt:

@Controller() indicates that the following class is a Controller

@Get() indicates that the following function will be runned when a HTTP request with GET method happens, if there aren't parameters inside Get decorator, it will be the same than '/'

constructor(private readonly appService: AppService) {} indicates that this.appService is an instance of AppService class.

So basically when You access http:localhost:3000, it will run 'getHello' function, which will return ' Hello ' and then ' Hello ' will be written in your screen.

You might be wondering " What about app.module.ts ? How does my controller know that he needs to inject AppService ? ", and I will explain it now:

App.module.ts

Controllers indicates what are the (controllers)[https://docs.nestjs.com/controllers] of that module, and providers indicates what are the providers.

Because of "providers", "AppController" file knows that "AppService" exists and that "appService" is an instance of it

main.ts

This file is the entry file, It basically says that the server controller and providers are in "AppModule" and that the server will run on port 3000.

How to start a NestJS project

There are two main ways to run it:

  yarn start
  # And
  yarn start:dev

yarn start would be like running node on a server.js express file, and yarn start:dev would be like running nodemon on a server.js express file

Soo that's it guys, I hope it helped You to understand a little bit of NestJS boilerplate and when I learn more about how it works I intend to make another post teaching how to make a simple CRUD with it, also, If you got interested, I invite you to check out Their documentation, The documentation is extremely well constructed and I'm sure it will help you !

Making an animated header with Framer Motion

Rafael Sant'Ana — Mon, 21 Sep 2020 16:36:13 +0000

Hi! Recently I've watched a video about basics of Framer Motion - A ReactJS library made in order to help to make animations - and I wanted to share a little bit of what I've learnt.

We will create a simple header component, and it will work just like the below one (Pay attention to the scrollbar and the header):

In order to start, You need to create a react app and install 'framer-motion' library



  # Creating a react app
  npx create-react-app framer-header / yarn create react-app framer-header

  # Installing with NPM and with Yarn:
  npm install framer-motion / yarn add framer-motion

So, even though I'm still studying it, I've learnt a bit about animations throughout the page scroll, doing this would usually be kinda difficult but happily We have Framer motion + React hooks !

In order to make a simple animation that makes the header disapear, we can start by creating a basic Header component in 'src/components/Header.js':

Okay, but... what are 'motion', 'useViewportScroll' and 'useTransform'?

Motion is kind of a component that You use for styling, just like 'animated' from React Spring.

useViewportScroll is a hook that returns how many % of the page has been scrolled in decimal numbers, in this case, we want to know how many % of the Y axis has been scrolled

useTransform is the hook that allows us to make some of animations, in this case, it is what will make our header leave the screen. It works at the following way: When the value of the first parameter is in the range of the second parameter, it will return a number depending on the third parameter

Confusing? Maybe, but let me show you two examples:



  const scaleY = useTransform(
    2,
    [1, 4],
    ['0%', '100%'],
  );

scaleY would be ' 50% ' because 2 is in the exact middle between 1 and 4, but if the first parameter were ' 4 ', scaleY would be 100%



  const { scrollYProgress } = useViewportScroll();

  const headerY = useTransform(
    scrollYProgress,
    [0, 0.2, 0.3],
    ['0%', '0%', '-100%'],
  );

When 0% of the page has been scrolled, headerY will be ' 0% ',
When 20% of the page has been scrolled, headerY will be ' 0% ',
When 25% of the page has been scrolled, headerY will be ' -50% ',
When 30% of the page has been scrolled, headerY will be '-100% ',

Now, so that we can see this component and the scrollbar, lets make some changes in 'App.js', it will be just like this one:

You can check the code out in the following link: https://codesandbox.io/s/purple-lake-k33ly

That's it guys, see you!