
Listening to music and something very personal, I see thousands of people going to the gym with their headphones, people running in the street listening to music.

The music is in **all** places. These people don't just want to appear stylish, or just if they do, they just know that music makes training significantly better!

![https://media.giphy.com/media/3lxD1O74siiz5FvrJs/giphy.gif](https://media.giphy.com/media/3lxD1O74siiz5FvrJs/giphy.gif)

I'm suspicious to speak because I love music, I was inserted in this world of music very early, I've played the guitar for years and my dream has always been to have a band, and that saying of [Attekita](https://www.youtube.com/channel/UCetRsdZxDQDcgVDJd6erz6g).

> [I increasingly believe in the theory that every programmer is a frustrated musician](https://twitter.com/AttekitaBullas/status/1352592008511156224)

But let's get down to business...

Programming is an exercise of the mind, it involves extreme attention to detail and a lot of critical thinking. Listening to music can help a lot, with its ability to **motivate**, **increase productivity** and \*\*relax the mind, is the perfect companion for programming.

Everyone has their own personal musical style, I am particularly eclectic, I literally listen to **everything**. I have no prejudice with current music styles. But when I'm working I like to listen to these styles of music:

### 🔇 Without vocal

When I'm 100% focused on an activity, a bug too big to solve, I like to listen to the songs in [lofi style](<https://pt.wikipedia.org/wiki/Lo-fi_(g%C3%AAnero_musical)>). And a style that adapts well to any situation that involves a lot of concentration at work because the music will just disappear in the background.

### 📢 Common songs (with vocal)

Good if I am listening to a song that is new to me, I tend to focus more on the music and lyrics, if I listen to the most common songs, which I usually listen to daily my brain can separate the music from the encoding. A song that I am addicted to at the moment: [Imagination ft. (Shiloh)](https://www.youtube.com/watch?v=f9xdUc1IVik&list=LL&index=107&ab_channel=AstralVibes)

### ⛱️ Classics

This style of music particularly and the ones that motivate me the most, I love to listen to classical music, especially those that have a lot of piano, one that I hear a lot: [Piano Solo: Chopin, Debussy, Liszt, Mozart, Beethoven...](https://www.youtube.com/watch?v=PJL_mVgT0Ao&ab_channel=HALIDONMUSIC)

When you are programming by yourself, I will leave here 10 songs for you to be inspired and programmed.

### No vocal

- [PIANO TRANQUILA](https://www.youtube.com/watch?v=PJL_mVgT0Ao&ab_channel=HALIDONMUSIC)
- [jazz type beat “bread” ](https://www.youtube.com/watch?v=6eWIffP2M3Y&list=LL&index=15&ab_channel=LuKremBo)
- [Chill Lo-fi Hip-Hop Beats FREE](https://www.youtube.com/watch?v=qvUWA45GOMg&ab_channel=GEMNChillOut%26LofiMusic)
- [lofi hip hop radio - sad & sleepy beats](https://www.youtube.com/watch?v=l7TxwBhtTUY&ab_channel=thebootlegboy)
- [Lo-fi for Ghosts (Only)](https://www.youtube.com/watch?v=2GjPQfdQfMY&ab_channel=HomeworkRadio)

### With vocal

- [I Just Want to Be the One You Love ](https://www.youtube.com/watch?v=pLQEdhCoBE4&list=LL&index=56&ab_channel=Cryst-Topic)
- [Old songs but it's lofi remix](https://www.youtube.com/watch?v=BrnDlRmW5hs&t=596s&ab_channel=Lo-fiMusic).
- [Fly Me To The Moon (Remastered)](https://www.youtube.com/watch?v=ZEcqHA7dbwM&ab_channel=FrankSinatra-Topic).
- [Lofi hip hop - brazil songs playlist ](https://www.youtube.com/watch?v=ZhstyJSNKME&t=981s&ab_channel=HugoCaetano)
- [I will be waiting ~ lofi hiphop mix feat. shiloh](https://www.youtube.com/watch?v=ISNBfryBkSo&list=LL&index=106&ab_channel=nourish.)

![https://media.giphy.com/media/4oMoIbIQrvCjm/giphy.gif
](https://media.giphy.com/media/4oMoIbIQrvCjm/giphy.gif)

But remember: there are no rules here. Musical tastes vary. But this is one of the great things about programming, we are all inspired by **different aspects of life** to start learning. Take a test and listen to as many different songs as you can, so you'll have a lot of baggage to solve any code problem you have in the future.

And what do you like to listen to as you program?

I'm on twitter in case you want to give me an "HELLO LORES" [@lorenaporphirio](https://twitter.com/lorenaporphirio).

Thanks!


10 songs that make me be more productive.

10 songs that make me be more productive


Hello Guys!

I'm really excited for this post, today we're going to learning how to test an API with TDD and use typescript in nodejs especially if you are a beginner, so this article will be very technical. Prepare the coffe and open [vscode](https://code.visualstudio.com/)!

![https://media.giphy.com/media/jvu00LhbjzAJi/giphy.gif](https://media.giphy.com/media/jvu00LhbjzAJi/giphy.gif)

Before you start you need the following tools:

- [Vscode](https://code.visualstudio.com/)
- [npm](https://www.npmjs.com/)
- [Git](https://git-scm.com/)

With the tools in hand, now just get your hands dirty.

### ⚫ What is TDD?

Going straight to the point TDD (Test-driven development) is a methodology to write the tests **first** for a given module/business rule and for the actual implementation **after**.

The TDD is a 3-step process:

- Developers implement the project requirements and specific test cases;
- The test cases fail because the developers have not yet written the code;
- The developers write the code to pass the tests;

If you have never used. I hope this article will **motivate** you to use it, why is it sensational!

![https://media.giphy.com/media/ZO91JimmRdDrV6qzFT/giphy.gif](https://media.giphy.com/media/ZO91JimmRdDrV6qzFT/giphy.gif)

### 🏳️ Project context

We will create an api of todo list.

This project is 100% focused on testing, here **not** we will learn about JWT, datebase configuration, security etc.

**Functionalities**:

- ✅ User can list them all;
- ✅ User can create a whole;
- ✅ User can filter a whole by id;
- ✅ User can delete a whole;
- ✅ User can update a whole;

A while ago I made a post of [How to create front-end tests in ReactJs](https://lorenakauane.com.br/blog/pt/2020-05-22-como-criar-testes-no-front-end-em-reactjs/) in case you are also interested in testing your front!

### 📚 Models

Here are the models of how the date should return in JSON.

```json
{
  "id": "",
  "task": "",
  "status": ""
}
```

### 📍 Routes

Here you will get the view of the routes we will create in our back-end.

```
[GET]   api/todo - View all todos
[GET]   api/todo/:id - Search by id
[POST]  api/todo - Save new todo
[PUT]   api/todo - Update todo
[DELETE] api/todo/:id - Delete todo
```

Great, now we have everything we need to create our api. Let's put our hand in the code!

### ⭐ Starting the project

To start the project and very simple, make sure you are using npm ok?

```bash
mkdir node-todos-testing
cd node-todos-testing
npm init
```

### 💻 Installing the dependencies

```bash
npm install --save typescript @types/express express body-parser nodemon
```

### 📢 Setting up TypeScript

In the project root create a file called `tsconfig.json` and put the following code block

```json
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*", "__tests__/**/*"],
  "exclude": ["node_modules", "dist"]
}
```

We will also create the `nodemon.json` configuration file for him to understand our `.ts` files

```json
{
  "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
  "watch": ["src"],
  "exec": "npm run dev:server-debug",
  "ext": "ts"
}
```

Now let's create the src project structure and file `app.ts` but let's leave this file blank initially ok?

```json
.
├── node_modules
├── nodemon.json
├── package-lock.json
├── package.json
├── src
│   ├── app.ts
└── tsconfig.json
```

Now we will install some more dependencies for the tests and perform our first test!

- [Jest](https://jestjs.io/)
- [ts-jest](https://kulshekhar.github.io/ts-jest/) (Um pré-processador TypeScript com suporte a mapa de origem para Jest que permite usar Jest para testar projetos escritos em TypeScript.)
- [supertest](https://github.com/visionmedia/supertest), Biblioteca HTTP
- Jest types
- supertest types

```bash
npm i -D jest ts-jest supertest @types/jest @types/supertest
```

Next, add another configuration file for Jest: `jest.config.js`

```javascript
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
}
```

After adding the test script to `./package.json`:

```json=
{
...
    "scripts": {
...
        "test": "jest",
...
    },
...
}
```

Create one more folder in the root of the `__test__` project and call our `src/app` file remembering that this file is blank!

But now let's add code to it. Let's review our project structure, make sure it looks like yours.

```json
.
├── __tests__
│   ├── app.test
├── node_modules
├── nodemon.json
├── jest.config.js
├── package-lock.json
├── package.json
├── src
│   ├── app.ts
└── tsconfig.json
```

UFAAAA! Now we can write our first test \o

![https://media.giphy.com/media/3oKIPnAiaMCws8nOsE/giphy.gif](https://media.giphy.com/media/3oKIPnAiaMCws8nOsE/giphy.gif)

In the `app.test` file we will add a hello world endpoint, to see if everything is working.

```bash
import { newApp } from "../src/app"
import request from "supertest"

const app = newApp()

describe("Test public routes", () => {
  it("should respond with a 200 response and a 'Hello World' body in / ", () => {
    return request(app).get("/").expect(200, "Hello World!")
  })
})
```

Probably the first import will be in error, we will add the following code to the `src/app` file

```bash
import express from "express"
import { Express } from "express"

export function newApp(): Express {
  const app = express()

  app.get("/", (_, res: express.Response) => {
    res.send("Hello World!")
  })

  return app
}
```

If we execute the command at the terminal: `npm test`

You must have something like this in your terminal:

```bash
PASS  __tests__/app.test.ts
  Test public routes
    ✓ should respond with a 200 response and a 'Hello World' body in /  (32 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.055 s
```

Now we need to refactor our `app` file, transform it into `class', and add our`router' files

New file `route.ts`

```bash
import express from "express";

export class Routes {
  app = express();
  public routes(app: any): void {
    app.get("/", (_: any, res: express.Response) => {
      res.send("Hello World!");
    });
  }
}
```

`app.ts`

```bash
import * as bodyParser from "body-parser";
import express from "express";
import { Routes } from "./routes";

class App {
  public app: express.Application;
  public routePrv: Routes = new Routes();

  constructor() {
    this.app = express();
    this.config();
    this.routePrv.routes(this.app);
  }

  private config(): void {
    this.app.use(bodyParser.json());
    this.app.use(bodyParser.urlencoded({ extended: false }));
    this.app.set("json spaces", 2);
  }
}

export default new App().app;
```

`app.test.ts`

```bash
import app from "../src/app"
import request from "supertest"

describe("Test public routes", () => {
  it("should respond with a 200 response and a 'Hello World' body in / route", () => {
    return request(app).get("/").expect(200, "Hello World!")
  })
})
```

If you run the `npm test`

You will have the same return of success!

Sensational, right?

Now let's create one more test that returns the list of all:

`app.test.ts`

```bash
import app from "../src/app"
import request from "supertest"

describe("Test public routes", () => {
  it("should respond with a 200 response and a 'Hello World' body in / route", () => {
    return request(app).get("/").expect(200, "Hello World!")
  })

  it("should respond with a 200 response and a list todos body in /todos route", async () => {
    const res = await request(app).get("/todos")
    expect(res.status).toEqual(1)
    expect(res.body).toHaveLength(1)
  })
})
```

If you run `npm test` you will get the following feedback:

```bash
FAIL  __tests__/app.test.ts
  Test public routes
    ✓ should respond with a 200 response and a 'Hello World' body in / route (22 ms)
    ✕ should respond with a 200 response and a list todos body in /todos route (7 ms)

  ● Test public routes › should respond with a 200 response and a list todos body in /todos route

    expect(received).toEqual(expected) // deep equality

    Expected: 200
    Received: 404

       9 |   it("should respond with a 200 response and a list todos body in /todos route", async () => {
      10 |     const res = await request(app).get("/todos");
    > 11 |     expect(res.status).toEqual(200);
         |                        ^
      12 |     expect(res.body).toHaveLength(1);
      13 |   });
      14 | });

      at __tests__/app.test.ts:11:24
      at fulfilled (__tests__/app.test.ts:5:58)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.346 s, estimated 3 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.
```

If you run `npm test` you will get the following feedback:

`routes.ts`

```javascript
import express from "express";

const todos = [
  {
    id: "1",
    task: "Go to the gym",
    status: "OK",
  },
];

export class Routes {
  app = express();
  public routes(app: any): void {
    app.get("/", (_: any, res: express.Response) => {
      res.send("Hello World!");
    });

    app.get("/todos", (_: any, res: express.Response) => {
      res.send(todos);
    });
  }
}
```

If you run `npm test` you will get the following feedback:

```bash
PASS  __tests__/app.test.ts
  Test public routes
    ✓ should respond with a 200 response and a 'Hello World' body in / route (21 ms)
    ✓ should respond with a 200 response and a list todos body in /todos route (5 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.931 s, estimated 3 s
Ran all test suites.
```

YEAHHHH!

Now let's follow the whole flow: **First the test**, then **implementation**, as we did in the example above!

Initially it will be a problem, but we will adapt in the middle of the development, this is **TDD**!

The complete test file will look like this!

I created a `TaskType.ts` file

```javascript
export type Task = {
  id?: string,
  task?: string,
  status?: string,
}
```

`routes.ts`

```javascript
import express from "express";
import { Task } from "./TaskType";

let todos = [
  {
    id: "1",
    task: "Go to the gym",
    status: "OK",
  },
];

export class Routes {
  app = express();
  public routes(app: any): void {
    app.get("/", (_: any, res: express.Response) => {
      res.send("Hello World!");
    });

    app.get("/todos", (_: any, res: express.Response) => {
      res.send(todos);
    });

    app.get("/todo/:id", (req: express.Request, res: express.Response) => {
      const { id } = req.params;
      todos = todos.filter(
        (task: Task) => task.id.toString() !== id.toString()
      );
      res.json(todos);
    });

    app.post("/todo", (req: express.Request, res: express.Response) => {
      const task = req.body;
      todos.push(task);
      res.json(todos);
    });

    app.put("/todo", (req: express.Request, res: express.Response) => {
      const taskToUpdate = req.body;
      todos = todos.map((task: Task) =>
        task.id === taskToUpdate.id ? { ...task, ...taskToUpdate } : task
      );
      res.json(todos);
    });
  }
}
```

`app.test.ts`

```javascript
import app from '../src/app'
import request from 'supertest'
import { Task } from '../src/TaskType'

describe('Test public routes', () => {
  it("should respond with a 200 response and a 'Hello World' body in / route", () => {
    return request(app).get('/').expect(200, 'Hello World!')
  })

  it('should respond with a 200 response and a list todos body in /todos route', async () => {
    const res = await request(app).get('/todos')
    expect(res.status).toEqual(200)
    expect(res.body).toHaveLength(1)
  })

  it('should create new task in /todo route', async () => {
    const task: Task = {
      id: '2',
      task: 'Learning IA',
      status: 'NOT',
    }

    const res = await request(app).post('/todo').send(task)
    expect(res.status).toEqual(200)
    expect(res.body).toHaveLength(2)
  })

  it('should update a task in /todo route', async () => {
    const taskToUpdate: Task = {
      id: '2',
      task: 'Learning IA',
      status: 'OK',
    }

    const res = await request(app).put('/todo').send(taskToUpdate)
    const todos = res.body
    const obj = todos.find(
      (task: Task) => task.id.toString() === taskToUpdate.id.toString()
    )

    expect(res.status).toEqual(200)
    expect(res.body).toHaveLength(2)
    expect(obj.status).toBeTruthy()
  })

  it('should return a task in /todo:id route', async () => {
    const res = await request(app).get(`/todo/${1}`)
    expect(res.status).toEqual(200)
    expect(res.body).toHaveLength(1)
  })
})
```

Tests created! Now you have more security to change the code and implement new business rules.

```bash
PASS  __tests__/app.test.ts
  Test public routes
    ✓ should respond with a 200 response and a 'Hello World' body in / route (22 ms)
    ✓ should respond with a 200 response and a list todos body in /todos route (6 ms)
    ✓ should create new task in /todo route (22 ms)
    ✓ should update a task in /todo route (4 ms)
    ✓ should return a task in /todo:id route (3 ms)

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        2.241 s, estimated 3 s
Ran all test suites.
```

The source code you find [here](https://github.com/LorenaKauane/node-todos-testing)!

Thanks for your time!

![https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif](https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif)


It's time to learn how to test!


Today you will discovery the difference between `map()`, `foreach()` and how these teachings made me **developer better** in JavaScript.

How do you know, JavaScript has something methods that help us work with arrays. The most famous are `seuArray.map()` and `seuArray.forEach()`, but that world is the bigger than you can imagine, today exists more than 10 methods that help us work with arrays 😮 (the next post I talk about these)

But for those starting out in programming, have difficult to understand the concepts and difference of two. **I'm here for that**, help you to understand the difference between these methods 😃

Topics

- Definition
- The return
- Trigger other methods
- Mutability
- Performance speed
- Conclusion

### 🏳️ Definition

#### forEach()

> The `forEach()` method performs a function provided once for each key / value pair in the Map object, in order of insertion. [ref](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach)

By default, this method go through all the items in an array, like a **normal loop**.

#### map()

> The `map()` invokes the callback function passed by argument for each element of the Array and returns a new Array as a result.[ref](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

The practice the method foreach and map look the same, but with the difference to **return**. The foreach manipulate the real date for from array and map create a new array.

### 📍 The return

How I talk about previously, the deffinition the method `forEach()` just walks over the array, while the `map()` return new value.

```javascript
const items = [1, 2, 3, 4]

const values = items.forEach(item => item * item)

// return: undefined
console.log(values)
```

```javascript
const items = [1, 2, 3, 4]

const values = items.map(item => item * item)

// return: [1, 4, 9, 16]
console.log(values)
```

### ⏩ Trigger other methods

An important difference between these two methods is that in `map()` you can trigger other methods, such as `filter()`, `sort()`, `reduce()`. In `foreach()` you do not have access to these methods because it does not return a value.

```javascript
const items = [1, 2, 3, 4]

items.forEach(item => item * item).reduce((total, value) => total + value)
//return: Uncaught TypeError: Cannot read property 'reduce' of undefined

items.map(item => item * item).reduce((total, value) => total + value)
//return: value: 30
```

### 📌 Mutability

> forEach() does not change the array in which it is called. (However, callback can do this).
>
> map() does not change the array it is called in (although callback, if called, can do that). [ref](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

![](https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif)

My opinion that definition isn't totally clear, that is confusing.

To find out what doesn't change the original array, the first ones have to check how these two methods work.

The `map()` returns one in the array transformed with the same amount of date. In the case of `forEach()`, even if it returns `undefined`, it **will** change \*\* the original array with the callback.

Therefore, we clearly see that `map()` depends on immutability and `forEach()` is a **modifying** method.

### 🚀 Performance speed

For you to validate the speed and performance it depends on several things of the computer, the amount of date, processing, among other things. You can check for yourself with this example below to see which is faster.

```javascript
const items = [1, 2, 3, 4, 5]

const startForEach = performance.now()
items.forEach(x => (x + x) * 10000000000)

const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
items.map(x => (x + x) * 10000000000)

const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)
//return: value: 30
```

### 🤓 Conclusion

Which one should I use? Like everything in the world: It depends. If you plan to change or use the date, it is preferable to select `map()`, as it returns a new array with the transformed date. But, if you don't need the new array, use `forEach().`

I hope this short post has helped you in some way!

> Suggestions and criticisms are highly appreciated.

If there are more differences, please share them in the comments, otherwise, thanks for getting here 😍.

![](https://media.giphy.com/media/l2JI1JzL6YS8z5KUM/giphy.gif)


discovery the 4 difference between map and foreach

Discovery the 4 difference between map and foreach


This is my first post in 2021 \o

![https://media.giphy.com/media/3o7btV5GAWaGkwjTrO/giphy.gif](https://media.giphy.com/media/3o7btV5GAWaGkwjTrO/giphy.gif)

I'm very exited and anxious for this year, buuuuuut but let's get straight to the point, the content!

Today I'm going to show you examples of images about flexbox, for you better understand flexbox concepts!

What's are we going to learn today?

- Architecture
- flex-direction
- justify-content
- align-content
- align-items
- align-self
- flex - grow | shrink | wrap

**flex**:It is an abbreviation for flex-grow, flex-shrink and flex-basis combined, you will learn more about them by reading this article😉

### Architecture

![](/images/assets/untitled.png)

### Property

![planilha.png](/images/assets/planilha.png)

### flex-direction

The direction about flex-items are distribuind inside flex-container

![/images/assets/flexdirection.png](/images/assets/flexdirection.png)

![/column.png](/images/assets/column.png)

### justify-content

This property organizes the flex-items along the main axis inside a container.

![/justify.png](/images/assets/justify.png)

![/justify2.png](/images/assets/justify2.png)

### align-content

It's organize flex-items along the cross axis inside the flex container, very similiar to justify-content

![/align1.png](/images/assets/align1.png)

![/align2.png](/images/assets/align2.png)

![/align3.png](/images/assets/align3.png)

### align-items

Distribuites flex-items along the **cross axis**

![/alignitem1.png](/images/assets/alignitem1.png)

![/alignitem4.png](/images/assets/alignitem4.png)

![/alignitems2.png](/images/assets/alignitems2.png)

### align-self

![/align-self.png](/images/assets/align-self.png)

### flex - grow | shrink | wrap

- flex-grow: Increases the size of a flex-item based on the width of the flex-container.
- flex-shrink : The ability of a flex item to shrink based on the width of the flex-container.
- flex-wrap : Flex-item amount you want in a row.

![/flex-grow.png](/images/assets/flex-grow.png)

![/flex-shrink.png](/images/assets/flex-shrink.png)

![/wrap.png](/images/assets/wrap.png)

### Conclusion

And so, I hope I contributed to your learning in some way, the focus here was not technical, but to understand the concept that is also important.

**Suggestions and criticisms are highly appreciated.**

Bye, bye.

![https://media.giphy.com/media/FRIC8vM3QBU7S/giphy.gif](https://media.giphy.com/media/FRIC8vM3QBU7S/giphy.gif)


FlexBox - Visual Guide


Hello Guys!

Today I talk about my retrospective in 2020. It was a difficult year because of [covid-19](https://covid.saude.gov.br/) but has a year I found myself like developer and now I Know what need be focus in the next year. I had a lot hits and misse, wrong choices and right choices and unfortunately I lost people.

Let's go to what matters the most striking points for me in **2020**. Get ready!

Obs: Sorry guys the text of images in PTBR

![https://media.giphy.com/media/ZE6NPzQRekbvlzyjFY/giphy.gif](https://media.giphy.com/media/ZE6NPzQRekbvlzyjFY/giphy.gif)

### January/February

In January I had decided this year to create and improve my portfolio. I always like to expose my work.

In January had my list with my objectives I did in 2019 but there is an item is expose my work regardless of form. For me the solution : Shared things of IT in my instagram 😆😆

![janeiro.jpeg](/images/assets/janeiro.jpeg)

But the year was just beginning, and during the year a lot has happened and one of those things I have created this blog (I talk about shortly) but I did some posts in my personal IG for tests, I had the support a lot of people in communites PTBR. One of those people was [Attekita Dev](https://www.youtube.com/channel/UCetRsdZxDQDcgVDJd6erz6g).

![janeiro.png](/images/assets/janeiro.png)

I had just started, had very motived but becouse Personal reasons I blocked my instagram and think, how I show my work?

**Spoiler my goals 2021: Return with instagram**

### March

The instagram brought a lot of new people, but I stopped show my work in IG, because I want to bring more extensive content. How: [React or Vue which one should I choose for my project?](https://lorenakauane.com.br/blog/en/2020-09-08-react-or-vue-which-one-should-i-choose-for-my-project/)

In instagram is impossible, but I decided create my blog.

Image my first design prototype:

![maro1.jpeg](/images/assets/maro1.jpeg)

### April/May

April month of my birthday, kept developing my blog, some personal projects and adding some features of systems that I maintain for customers (#sendJobs)

![https://media.giphy.com/media/jp2KXzsPtoKFG/giphy.gif](https://media.giphy.com/media/jp2KXzsPtoKFG/giphy.gif)

![My%20Year%202020%20Retrospective%20e9cff7bf16084432bae72ac284581ddb/abril2.jpeg](/images/assets/abril2.jpeg)

I read some book, I would have liked to read more, but this year I only had one goal: to put my hands on everything I could haha

![/images/assets/abril.jpeg](/images/assets/abril.jpeg)

Blog in Construction ....

![/images/assets/maio2.jpeg](/images/assets/maio2.jpeg)

**Creating this blog made me want to be more and I found that I can be more!**

In May I designed all the screens, decided the fonts, colors, how serious each post card is hahah, learned a lot in the process of UX UI, color composition among many other things to create a project from scratch and alone.

I decided on the technologies I would use, react with gatsbyjs and a few more libs hahaha, as I didn't know how to work with gatsby I decided to invest some money in knowledge and bought the Gatsby course: Create a PWA site with React, GraphQL and Netlify CMS by Willian Justen. It helped me a lot in the process of creating this blog!

![/images/assets/maio.jpeg](/images/assets/maio.jpeg)

In early May my Blog was actually launched in production. I already had 3 triggered posts that I wrote while developing my blog.

- [A verdade sobre GatsbyJs](https://lorenakauane.com.br/blog/pt/2020-04-30-a-verdade-sobre-gatsbyjs/)
- [Maneira mais rápida de validar sua ideia - Startup Weekend e Hackatho](https://lorenakauane.com.br/blog/pt/2020-05-01-maneira-mais-rapida-de-validar-sua-ideia-startup-weekend-e-hackathon/)
- [4 Mulheres Incríveis que fizeram história com TI](https://lorenakauane.com.br/blog/pt/2020-05-11-4-mulheres-incriveis-que-fizeram-historia-com-ti/)

### June/July

In July I finally finished a project that I dedicated myself with much love and care to Urbla!

![/images/assets/maio.jpeg](/images/assets/maio.jpeg)

**Spoiler goal 2021: Putting the Urbla into production.**

### August

It was the month that I slowed down a little, because of the pandemic's peak, I was unmotivated and I felt weird all the time, I got away from a lot of people. And I really felt alone for a while. But who didn't feel alone with all this happening in the world, right?

Working on side projects no longer made so much sense to me. My blog was not going so well. I ended up leaving Urbla aside.

![https://media.giphy.com/media/iJJ6E58EttmFqgLo96/giphy.gif](https://media.giphy.com/media/iJJ6E58EttmFqgLo96/giphy.gif)

### September/October

As I was feeling bad most of the time I started to focus on myself, family and friends!

![/images/assets/Outubro2.jpeg](/images/assets/outubro2.jpeg)

![https://media.giphy.com/media/jowjBv1wXAJfy3zQDd/giphy.gif](https://media.giphy.com/media/jowjBv1wXAJfy3zQDd/giphy.gif)

I added a very cool task on my blog (very challenging by the way haha) that was support for English..

**Spoiler goal 2021: Focus on PTBR and EN content**

![/images/assets/Setembro.jpeg](/images/assets/setembro.jpeg)

I got a new job opportunity 100% homeoffice and remote!

![/images/assets/Setembro2.jpeg](/images/assets/setembro2.jpeg)

![https://media.giphy.com/media/Y3GPYKwenR9SbriKvr/giphy.gif](https://media.giphy.com/media/Y3GPYKwenR9SbriKvr/giphy.gif)

I made my first open source contribution in the new company and in the IT community, a component generator through templates in vscode.

[Link](https://github.com/thiagocordeirooo/generate-component-from-template)

![M/images/assets/outubr3.jpeg](/images/assets/outubr3.jpeg)

### November/December

In November I started to study more about products and project creation (at the business level)! I started to think more about the long / medium term for my future.

**Spoiler goal 2021: Focus on learning about sales, digital products and understanding how the internet works and giving my blog and personal marketing a much bigger boost.**

### Damn what year!

It was a very productive year. I learned to focus on things I really like and with each passing day I'm more sure that I love working with technology!

I approached some friends, watched many series, played some games in the video game and went back to playing cs with some friends.

![https://media.giphy.com/media/l0amJzVHIAfl7jMDos/giphy.gif](https://media.giphy.com/media/l0amJzVHIAfl7jMDos/giphy.gif)

### Expectations and targets for 2021

I already made my list of goals for 2021, as you read, there are some spoilers of what I want for next year! And seriously if you guys knew the list would haha fall back to what is coming.

It will be a very challenging year, studying things that are out of my daily life, but that's the only way for us to keep moving! Never stop, always grow and look for the best for you, until you find yourself. That was the way it's been working for me. Try, make mistakes, learn and redo.

And that's it guys even 2021!

![https://media.giphy.com/media/ckJWTWqetoIEGcf5EY/giphy.gif](https://media.giphy.com/media/ckJWTWqetoIEGcf5EY/giphy.gif)


My Year 2020 | Retrospective


Are you a beginner in the front-end area? In this post I will explain all the stages of a front-end development! Following a [front-end developer roadmap](https://roadmap.sh/frontend)

### What is front-end?

Front-end is the visual part of a site or system, and where we can interact with the user.

Generally, a front-end developer is responsible for coding a new interface, using languages like: HTML, CSS and Javascript.

But nowadays a front-end developer is no longer limited only in **web**, they can also work on the navigation part of a site, on layouts and even on the appearance of different on mobile devices (responsiveness).

But now let's get to the point!

![https://media.giphy.com/media/l0Exk8EUzSLsrErEQ/giphy.gif](https://media.giphy.com/media/l0Exk8EUzSLsrErEQ/giphy.gif)

Below is a chart that demonstrates the possibilities you can follow. This graph was made by [Kamran Ahmed](https://twitter.com/kamranahmedse). After reading this post do not forget to give a star in the repository to support your work!

Hint of lores: This map will give you many insights, about which area is best for you! Do not take it as **absolute truth**, absorb what you identify yourself most because you will understand one tool more suitable for some cases than the other. So read this map and start coding and good luck!

![front-end rodmap](/images/assets/frontend.png 'front-end rodmap')

Quite a lot, right? But stay calm that as you study 1 item everything fits together.

![https://media.giphy.com/media/oDK8A6xUNjD2M/giphy.gif](https://media.giphy.com/media/oDK8A6xUNjD2M/giphy.gif)

### Internet and how does it work?

Today it's very important to know the basics of internet and understand how it works under the cloths.

> The Internet is a global network of computers connected to each other that communicate through a standardized set of protocols.

And you need to understand about:

- HTTP protocols.
- Domains.
- Browsers, how it works and the difference between each.
- Hosting.

### Basic: HTML, CSS and JS

Usually most of the front-end developers use these 3 languages, to encode sites, styles, structure of a site:

- HTML (base of everything)
- CSS (style)
- Javascirpt (For interaction)

### General development skills

Now I will list some skills that you will need in your front-end career!

- Learn the basic commands of [GitHub](https://github.com/), share your codes with the community.
- Learn about HTTP protocols and REST API Basics (GET, POST, PUT, DELETE...)
- Learn about Google, StackOverflow.
- Use good terminal (bash, zsh)
- Study on date structure
- Study design standards

### Style: Pre-processor and CSS architecture

A CSS preprocessor is a program that allows you to generate CSS from the unique syntax of the preprocessor itself. Pre-processors can make the CSS code more organized, being them:

- [Sass](https://sass-lang.com/)
- [PostCSS](https://postcss.org/)
- [Less](http://lesscss.org/)
- [Stylus](https://stylus-lang.com/)

### Familiarize yourself with the tools

To become a good front-end developer, you must dedicate yourself **as in any area of your life,** to debugging tools, unit testing, testing learning front-end technology like React, Vue, Angular, etc.

All browsers come with tools to support the developer. And these tools allow you to test and adjust your pages in the browser itself, in a specific way for how the browser is interpreting your code.

Some useful tools:

- [npm](https://www.npmjs.com/)
- [yarn](https://classic.yarnpkg.com/en/)

Some task performers that I indicate:

- [npm script](https://docs.npmjs.com/cli/v6/using-npm/scripts)
- [webpack](https://webpack.js.org/)

Linter and formatters that I indicate:

- [prettier](https://prettier.io/)
- [eslint](https://eslint.org/)

### CSS Frameworks

A css framework abstracts common web design and makes design easier for the developer to implement.

- [Bootstrap](https://getbootstrap.com/)
- [Materialize](https://materializecss.com/)
- [Bulma](https://bulma.io/)
- [Semantic-ui](https://semantic-ui.com/)

### Frameworks

They are packages that contain pre-written code, they force structure and a foundation to build while allowing flexibility with the final design.

Most used Frameworks:

- [Vue.js](https://vuejs.org/)
- [React.js](https://pt-br.reactjs.org/)
- [Angular](https://angular.io/)

Do you want to know the difference between React or vue? Click here → [React or Vue which one should I choose for my project?](https://lorenakauane.com.br/blog/pt/2020-09-08-react-ou-vue-qual-devo-escolher-para-meu-projeto/)

### Testing your application

The objective of the front-end testing is to test the general functionality to ensure that the presentation layer is defect free with successive updates.

- [Jest](https://jestjs.io/)
- [Enzyme](https://enzymejs.github.io/enzyme/)
- [Sinon](http://sinonjs.org/)
- [Mocha](https://mochajs.org/)
- [Chai](http://www.chaijs.com/)
- [AVA](https://github.com/avajs/ava)
- [Tape](https://github.com/substack/tape)

**End-to-end test**

In E2E testing, the developer tests the entire application together and tests it as a user would.

Basically, here the developer tests the application workflow from start to finish. The goal is to replicate real user scenarios so that the system can be validated for integration and date integrity.

Below are some tools:

- [Selenium](https://www.seleniumhq.org/)
- [Webdriver](http://webdriver.io/)
- [Cypress](https://cypress.io/)
- [Puppeteer](https://pptr.dev/)
- [Cucumber.js](https://github.com/cucumber/cucumber-js)
- [Nightwatch.js](http://nightwatchjs.org/)

**Integration test**

The integration tests ensure that several parts of the application work together. It is one of the crucial and most important tests.

- [Karma](https://karma-runner.github.io/)
- [Cypress](https://www.cypress.io/)
- [Nightwatch](http://nightwatchjs.org/)
- [WebDriver.io](http://webdriver.io/)

### Server-side rendering

Server-side rendering (SSR) is the ability of an application to contribute by displaying the web page on the server instead of rendering it in the browser.

- [Next.js](https://nextjs.org/)
- [After.js](https://github.com/jaredpalmer/after.js)
- [Vampire](https://github.com/alidcastano/rogue.js)

### Static site generator

A static site generator is a publishing tool, which is essentially a set of tools for building static sites based on a set of input files.

- [Next.js](https://nextjs.org/)
- [Jamstack](https://jamstack.org/generators/)
- [static generators](https://staticsitegenerators.net/)
- [Nuxt.JS](https://nuxtjs.org/)
- [HUGO](https://gohugo.io/)

### Mobile Application

Well, here the front end interacts directly with the user, including design elements such as wireframes, mockups, cache and datebase synchronization. It offers a smooth user experience in various screen sizes and orientations.

- [Flutter](https://flutter.io/)
- [React Native](https://facebook.github.io/react-native/)
- [Nativescript](https://nativescript.org/)
- [Ionic](https://ionicframework.com/)

### Desktop Application

Even if cell phones and tablets have the advantage of being useful, you simply cannot ignore PC and desktop applications. Because there are still many users who prefer the PC the best option to explore the applications and sites

- [Electron](http://electron.atom.io/)
- [NW.js](https://github.com/nwjs/nw.js)
- [Proton](https://proton-native.js.org/#/)
- [Neutralino.js](https://neutralino.js.org/)
- [DeskGap](https://deskgap.com/)

### Keep on learning

So, after reading this guide, you can kick off your journey as a front-end web developer for sure. Although the **learned is the only key to success**. To do so, you have to practice and learn consistently. Good luck in your studies!

![https://media.giphy.com/media/qYyJ48I53CUEg/giphy.gif](https://media.giphy.com/media/qYyJ48I53CUEg/giphy.gif)

Send me a suggestion of what you would like to learn at [lorenakauanecontato@gmail.com](mailto:lorenakauanecontato@gmail.com)

Until the next post!

![https://media.giphy.com/media/IccrIoCPkphZiYeWVW/giphy.gif](https://media.giphy.com/media/IccrIoCPkphZiYeWVW/giphy.gif)


Frontend developer what do you need to know to get started