DEV Community: lioliveiraz

Moving up: the concept of Hoisting

lioliveiraz — Wed, 21 Apr 2021 08:02:01 +0000

Studying programming language is not an easy task. There are too many rules, and the logic is challenging. While learning JavaScript, I realised that some concepts sound more complicated than they should be.

Therefore, I decided to create a series of articles explaining JavaScript core concepts more lightly.

In the first article of the series, I will explain what Hoisting is.

What is hoisting?

According to the Cambridge dictionary definition, Hoist is:

Hoist
verb [ T ]
UK /hɔɪst/ US
/hɔɪst/
to lift something heavy, sometimes using ropes or a machine

Translating it to a programming language, hoisting means lifting your functions and variables declarations to the top of your file. Conceptually, this definition is not incorrect, but in real life, it is not the same.

JavaScript does not physically move your code to the top of the page. However, Hoisting is what makes it possible to call your variables and function before declaring it.

console.log(iAmNotHoisting);
iAmNotHoisting = "variable";

//outuput ReferenceError: iAmNotHoisting is not defined

console.log(iAmHoisting);
iAmHoisting = "variable";
var iAmHoisting

// 1:undefined
// 2:variable

To understand why this runs without error, we need to have a better-understanding knowledge of how JavaScript deals with code in the background.

What is Compile-time?

JavaScript reads the code in two different ways, and they are usually called Compile-time and Execution time. Why is this so important to Hoisting? Because it is in the Compile-time where the hoisting magic happens.

When the JavaScript engine starts to work on your script, the first thing it does is to read all the code on the global scope and store data in its memory. This data is stored in the Global Execution Context.

var iAmHoisting = "HELLO WORLD";
function getHoisting(){
return iAmHoisting
}

In this phase, JavaScript organises itself – no code is executed yet. You could see as at a warm-up before running your code. During this process, only declarations are stored, not the statements.

Be aware that functions and variables are stored differently. The functions are stored as a reference, and the variables – with a var keyword – are assigned to an undefined value, this process called Hoisting.

What is the Execution Phase?

Once all the declarations are identified, the parser keeps a note in memory and asks the engine to start the execution phase. At this stage, JavaScript assigns the real values to the variables present in its memory.

console.log(iAmHoisting);
iAmHoisting = "variable";
var iAmHoisting

// 1:undefined   <-- Compile-Time
// 2:variable    <-- Execution Phase

What is not Hoisted?

There is a misconception that let and const declarations are not hoisted; this is not exactly true. Those declarations are also hoisted, but the value is assigned as restricted until the execution phase. This phenomenon is called Temporal Dead Zone.

Some declarations are indeed not hoisted, such as:

Functions defined with an expression
Arrow Functions

Conclusion

Hoisting may seem confusing initially, but Hoisting is nothing more than assigning a default value to declarations. This process allows us to call a variable before it is declared.

Keep in mind that, even though it is possible to declare your variables and function at the bottom of the file, it is recommended to always write code readable for humans. Your colleagues cannot hoist, so keep your declaration on the top of your file.

How to master CSS?

lioliveiraz — Fri, 07 Aug 2020 11:37:16 +0000

In Web Development when we start to code the first things that we learn are HTML, CSS and JavaScript, but more we learn more far we go from the basic.

Now I am in a point of my career where I want to focus on learning CSS. Not the syntax nor the basic bits of knowledge that are needed to build a stylesheet, but the best practices and best ways to build a responsive application — using pure CSS.

Thus, what do you think? What is the best way to master CSS?

5 steps to make a simple request using Axios in React

lioliveiraz — Wed, 05 Aug 2020 14:56:09 +0000

If you started to develop an application on React, you probably have to connect your front-end with a server. Usually, this communication occurs with an HTTP protocol.

There are many ways to retrieve, post or modify data from a server; you can use Fetch API, XMLHttpRequest or multiple libraries.

Axios is a lightweight NPM library similar to Fetch API, the pack provides an easy way to use REST API and make requests. In this article, I will show in 5 steps how to use Axios in your React application.

1. Install it in your project

We can start by adding Axios to our project. Open your terminal and go to the root of your project — where the package.json is — Then install the pack.

2.Create a service folder

Once you have Axios install, it is essential to decide which folder the API requests will be. Separating your request is a good way to keep your code clean and refactored.

3. Build your function

In this next step, we will finally start to write some code. First, import the library on the top of your JavaScript file.

import axios from 'axios'

Now you can start to write your function. Remember to choose a name that makes sense of what do you expect from this function.

function fetchFilmsApi (){
}

Axios is promise-based; for this reason, we can make use of async and wait to create nice and asynchronous code. We will transform our function in an async function and create a variable to store the response of our request.

async function fetchFilmsApi (){
 const response = await axios.get(insertUrl)// insert the API url
}

Now we have to create a return that provides us with the data of our response. Do not forget to export your function!

export default async function fetchFilmsApi (){
 const response = await axios.get(insertUrl)// insert the API url
 return  response.data

}

4.Import the function

Our function is done, now we have to build our main component — where the data will be used. There we will import our API function.

import fetchFilmsApi from "../../services/api"

5. Handle the response

Once we have our HTTP request done, Axios will return for us a promise with a successful or failure response. To handle the result, we will use two methods then() and catch().

 getData =()=> {
        this.fetchFilmsApi().then().catch()
    }

If the response is fulfilled, then() will be called and inside the method, we will decide what to do with the data. In our case, we are assigning it to a state.

 getData =()=> {
        this.fetchFilmsApi().then(res=> this.setState({data:res}).catch()
    }

In case the promise is not fulfilled, catch() will be called. We can log the response to understand which errors are happening.

 getData =()=> {
        this.fetchFilmsApi().then(res=> this.setState({data:res}).catch(err=> console.log(`Something went wrong. ERROR: ${err}´))
    }

Wrapping up

As you could see, for a simple request Axios take less time and effort to retrieve data, besides that, the library is supported for old browsers and transform JSON data in its background. There are many other aspects that I didn`t discuss, and you can check it all in Axios GitHub page .

5 websites to help you crush your tech interview.

lioliveiraz — Mon, 22 Jun 2020 15:49:21 +0000

It would not be a surprise to say that one of the biggest nightmares for junior developers is the technical interview. Besides all the pressure that the hiring process already has, the candidates must deal with technical question or algorithmics challenges – which I personally have a love and hate relationship with it.

If it seems not hard enough for you, most of the time, we do not know what to expect. The interview can be a few questions about your stack, 90 minutes of an algorithmic challenge or even a complete surprise.

WAIT! Don’t give up yet!!! The best way to overcome this situation is to feel comfortable with the language you are working with and practice a lot.

In this article, I will show the best websites that you can use to train your logical thought and the capacity to solve algorithmic challenges.

Codewars

This is one of the most popular websites in the development community. You start with the level 8kyu, and as you progress through the obstacles, you level up and gain more points in the rank.

You can choose the language that you prefer and what kind of exercise you are more into it. Besides that, you can create clans and be allies with other code warriors.

The Codewars community is enormous, and they create the content for the webpage, which make it almost impossible to finish all the challenges available. Besides that, when you finish – or not – the challenge you can sneak a peek other answers and give your feedback about it.

HackerRank

This one is more focus on the market, if you have an interview a few days from now, this is the right website for you.

There you can choose which skill you want to improve and what language you are most comfortable with. Besides that, there is an interview preparation kit with 14 different abilities to promote – such as Arrays, string manipulation, search...

The website shows the percentage of companies that use the same subject and challenge. I am sure that after you pass through their preparation kit, you will be ready for any technical interview.

Cyber-Dojo

This one is also a gamified platform where you train your skills. It is a simpler version than Codewars, but the webpage offers more than 30 programming language and uses TDD to test your code.

You can choose to do the test individually or with a group, and people can join later your party to help you to crush the challenge.

Codr

I love the interface of Codr. It is pretty, simple to navigate and – the best part – is also available for mobile. So, if you are bored in a waiting room, you can take your phone and expend some minutes trying to solve code problems.

The challenges have a vast range of difficulty, you can go from simple to expert level. It tests your abstract thinking, math, and programming skills with games and puzzles.

Screeps

It is an amazing and complex game, where you can play together with other players from all over the world. The game developed by itself and you can code in a way that your game will continue running without you monitoring it. The main goal is to improve your programming skills and have fun.

Screeps has a high level of complexity, for this reason, I recommend you to read the

5 tips if you want to study in a coding Bootcamp

lioliveiraz — Wed, 27 May 2020 12:35:24 +0000

Imagine yourself in a classroom in a country that is not your homeland. A teacher is speaking a foreign language that you don’t domain, teaching a computer language that you know absolutely nothing. It sounds a bit scary, right? Welcome to a coding Bootcamp.

Actually, this was my personal experience in a Bootcamp. I was living in the Netherlands for two years already, and then I decided to change from journalism to Web Development. Although I am grateful to have taken this decision, I cannot deny that some tips beforehand could help me to pass through it more easily.

That is why I prepared five tips for those who are planning to join a Bootcamp.

Be prepared

It is undeniable that being in a Bootcamp was a fantastic experience for me; the amount of knowledge that you gain in a short time is impressive though this crazy experience may not be for everyone.

The level of commitment that it takes require a high level of discipline and passion. With the right amount of motivation, you can pass throw the whole course and start a fantastic career, but if you get distracted, you lose track and miss the basic concepts what will – for sure – be a problem in the future.

Thus, be prepared for each day learn one different concept, study 14 hours a day and do two projects a week. That will be your life during the course.

Do not wait for a miracle.

Since the market started to require more and more professionals from IT, I hear people join Bootcamps seeking those jobs with high salaries. Most of them think that they will finish a 5-month course and land on a fantastic job, and never learn anything again. Unfortunately, that is not the reality.

Coding requires a lot of logical skills, and you will have to study for the rest of your life. Every day a new tool is released, and – to be on top of your game – you must be aware of everything that is out there. It is true that many companies are looking for an engineer, but do not forget that there are tons of people who are learning and improve themselves.

Thus, if you want to enter this world, be prepared to fight for it.

Self-learn

I see Bootcamp being a guideline, where your teacher gives you a few directions, and you must choose which one you will follow by yourself. It is impossible to learn everything in such a short period, and they know that.

You will have access to different frameworks, libraries, languages. Hence, you have to follow what you like more and study as much as you can those technologies. Do not wait for anyone to show you the right way, mostly because there is no right way.

It is not all about code.

Network! Network! Network!

There are two essential things that I learn with journalism:

Do not burn your sources
Do not burn your network.

I have to say that I will be carried this for my whole life, and during Bootcamp cannot be different.

If you are planning to change your field completely, the Bootcamp will be your gateway to any company. During my course, I had my first contact with engineers, and I had to make sure that they would remember my name after the five months.

It is essential to talk to people, and learn with them not just algorithmics, but the jargons, what computer they use, how they learn, what they eat. The best way to learn is observing; then when you join a company, you will not be lost in the middle of people speaking things that you do not understand.

Have fun

This course will drain your energies and at some point, will be hard to think anything else but “It is time to code”, but it does not mean that you cannot have fun with it. Make challenges, games, competitions. Bootcamp is much about having experience as it is about learning a new concept.

Those are my tips to turn your Bootcamp even better.
Let me know if you liked!

A story about a Brazilian journalist who became Web developer in the Netherlands.

lioliveiraz — Sun, 10 May 2020 12:50:35 +0000

Seven months ago, I was in a completely different place than I am right now, I was in a job that I did not fit in, without much hope to find something better. Then, I saw a post on Linkedin about scholarships for women who want to start their career in tech.

My first thought was: “This is not for me”. I was never comfortable with technologies. Since I graduated in communication and study humanities my whole life, I thought I was good with people, not with computers.

I am not afraid to take challenges, so I decide to apply for it, and for my surprise, I got the scholarship.

January 20, I was attending my first class.

Lost in the middle of algorithms

The first month was the most overwhelmed of my life. We had 8 hours of class every day, five days a week. In one day, we had to learn at least three different concepts.

I was utterly lost, mostly because the last time that I studied math was in 2010 and was not even good at it. Now, I was sitting in class trying to remember how we can discover the average of an array of number – yes, I did not know what ‘average’ was.

We must solve two algorithmic challenges per week, and I had to spend at least 10 minutes trying to understand the problem. I was uncomfortable with all those tons of information, and, because of that, many times, I wondered if this field was something for me or if I had made a colossal mistake.

The right amount of effort

After the terrible result of my first JavaScript test, I woke up. The test made me see that if I wanted to achieve something in web development, I had to stop using my background as an excuse and put some effort into it.

I spent the next three months studying and creating projects. All the information that I learned I applied right away, building websites, or creating new features. There was not one second of my time that I was not coding or thinking about it. I started to read about code, listen to podcasts about development, and even watched the series Silicon Valley.

I am not going to say that it was easy, but now I am extremely comfortable coding, and I am entirely passionate about it. New technologies finally do not make me scared, and my background in humanities is not hunting me anymore. Instead, I believe that being a communicator helps me to code and build applications that better respond to the user’s needs.

To sums up, if you are facing a career transition, remember that if you put in the right amount of effort and like what you are doing there is absolutely nothing that you can not achieve.

Did you like this piece? Have a subject that you would like me to write about? Please let me know.