# Desbravando a Concorrência em Go: Uma Jornada Pelo Mundo das Goroutines e Canais

A linguagem de programação Go (Golang) é conhecida por sua poderosa capacidade de concorrência, proporcionada pelas goroutines e canais. Neste artigo, exploraremos como aproveitar ao máximo esses recursos para criar código eficiente, escalável e concorrente em Go. Veremos exemplos práticos de situações em que a concorrência se destaca, demonstrando como as goroutines e os canais podem ser fundamentais para resolver problemas complexos.

## Entendendo Goroutines

As goroutines são threads leves que são gerenciadas pelo próprio Go runtime. Elas permitem a execução concorrente de funções de forma eficiente, sem a sobrecarga de threads tradicionais. A criação de goroutines é simples, basta adicionar a palavra-chave `go` antes da chamada de uma função:

```go
package main

import (
	"fmt"
	"time"
)

func main() {
	go minhaRotinaConcorrente() // Inicia uma goroutine
	time.Sleep(time.Second)     // Aguarda um segundo para permitir a execução da goroutine
}

func minhaRotinaConcorrente() {
	fmt.Println("Executando em uma goroutine!")
}
```

## Benefícios da Concorrência com Goroutines

### 1. Execução Assíncrona

Imagine um servidor que precisa atender várias requisições simultaneamente. Utilizando goroutines, podemos lidar com cada requisição de forma assíncrona, mantendo a capacidade de resposta do servidor mesmo sob carga pesada.

```go
package main

import (
	"fmt"
	"net/http"
)

func main() {
	http.HandleFunc("/", handleRequest)
	http.ListenAndServe(":8080", nil)
}

func handleRequest(w http.ResponseWriter, r *http.Request) {
	go processarRequisicaoAssincrona(r)
	fmt.Fprint(w, "Requisição recebida com sucesso!")
}

func processarRequisicaoAssincrona(r *http.Request) {
	// Lógica de processamento pesado aqui
	fmt.Println("Processando requisição assincronamente:", r.URL.Path)
}
```

### 2. Paralelismo Simples

Com goroutines, o paralelismo torna-se acessível e fácil de implementar. O exemplo a seguir realiza a busca simultânea em várias fontes de dados:

```go
package main

import (
	"fmt"
	"sync"
)

func main() {
	var wg sync.WaitGroup
	frases := []string{"goroutines são incríveis", "canais simplificam a concorrência"}

	for _, frase := range frases {
		wg.Add(1)
		go func(f string) {
			defer wg.Done()
			processarFrase(f)
		}(frase)
	}

	wg.Wait()
}

func processarFrase(frase string) {
	// Lógica de processamento da frase aqui
	fmt.Println("Processando frase:", frase)
}
```

## Utilizando Canais para Comunicação Concorrente

Os canais em Go são meios de comunicação entre goroutines. Eles facilitam a troca de dados de forma segura e sincronizada. Vamos explorar um exemplo de como os canais podem ser úteis para coordenar a execução concorrente.

```go
package main

import (
	"fmt"
	"time"
)

func main() {
	ch := make(chan string)

	go enviarMensagem(ch)
	mensagem := <-ch

	fmt.Println("Mensagem recebida:", mensagem)
}

func enviarMensagem(ch chan string) {
	time.Sleep(time.Second)
	ch <- "Olá, estou na goroutine!"
}
```

## Conclusão

As goroutines e os canais são recursos poderosos em Go, proporcionando uma maneira eficiente e simples de trabalhar com concorrência. Ao integrá-los em seus projetos, você pode melhorar a eficiência, a escalabilidade e a capacidade de resposta do seu código. Este artigo apresentou conceitos básicos e exemplos práticos para inspirar o uso efetivo desses recursos em suas próprias aplicações em Go. Se surgirem dúvidas ou se você quiser compartilhar suas experiências, sinta-se à vontade para utilizar a seção de comentários abaixo.

Descubra como as goroutines e canais em Golang revolucionam a concorrência em desenvolvimento de software. Aprenda a criar código eficiente e escalável, explorando exemplos práticos que destacam os benefícios da programação concorrente em Go. Uma jornada emocionante pelo poder das goroutines e canais que transformará a maneira como você aborda a execução simultânea de tarefas em seus projetos.

Uso Efetivo de Goroutines e Canais em Golang

# Extracting Essential Data from APIs with Go Structs

The data universe is vast, especially when we're dealing with APIs that return huge amounts of information. Often, most of these data may be irrelevant to the task we're performing, making data sifting a tiresome task. However, with the Go programming language, we can simplify this process using a feature called struct.

In today's post, we'll explore how structs in Go can be used to extract only the data we need from an API response. For this, we'll be using the GitHub API as our example.

## Understanding Structs in Go

In Go, a struct is a composite data type that allows you to group zero or more values of other data types. It's like a custom blueprint that can be filled with the desired data. Each value in a struct is referred to as a field. You define a struct and then create instances of it, which you can manipulate as desired.

Here is an example of a simple struct in Go:

```go
type Person struct {
    Name    string
    Age     int
    Address string
}
```

## Using Structs to Decode API Responses

Now, let's think about a situation where we're making a call to the GitHub API and we receive a JSON response. However, we're only interested in some specific information - for instance, the name and slug of a repository.

To do this, we can create a struct that has only the fields we need:

```go
type Repository struct {
	Name string `json:"name"`
	Slug string `json:"slug"`
}
```

Let's make the API call and get the response:

```go
resp, err := http.Get("https://api.github.com/repos/openai/gpt-3")
if err != nil {
	log.Fatalln(err)
}

body, err := ioutil.ReadAll(resp.Body)
if err != nil {
	log.Fatalln(err)
}
```

And then we can unmarshal the JSON into our struct:

```go
var repo Repository
err = json.Unmarshal(body, &repo)
if err != nil {
	log.Fatalln(err)
}

fmt.Println(repo.Name, repo.Slug)
```

Go will automatically fill the `Name` and `Slug` fields with the corresponding data from the JSON and ignore the rest.

This is a powerful time and effort saver, especially when dealing with APIs that return large amounts of data. With the use of structs, we can focus only on the data that really matters to our programming needs.

## Conclusion

The Go programming language provides robust and effective tools for handling data, making it easier for developers to focus on what really matters. In this post, we explored the power of structs and how they can be used to extract specific information from complex API responses.


Explore the power of Go Structs in simplifying data extraction from APIs. This blog post showcases a hands-on approach to using Go Structs for decoding API responses, focusing only on essential data, using the GitHub API as an example. It is a practical guide for developers aiming to streamline their data management process in Go.

Extracting Essential Data from APIs with Go Structs

# Como configurar seu próprio HomeLab: Um Guia Passo a Passo para Instalar o Proxmox

## Introdução

No mundo da tecnologia, a aprendizagem prática é inestimável. **Uma das melhores maneiras de adquirir essa experiência é através da configuração de um HomeLab**. Mas o que é um HomeLab? E por que você deveria considerar ter um? Vamos mergulhar nisso.

## O que é um HomeLab?

Um HomeLab é, em essência, um laboratório de TI pessoal que você configura em casa. **Ele permite que você experimente e aprenda sobre servidores, redes, sistemas operacionais e aplicações em um ambiente seguro e controlado.** 

## Por que ter um HomeLab?

Existem várias razões pelas quais ter um HomeLab pode ser benéfico:

1. **Aprendizado**: Um HomeLab oferece um ambiente seguro para aprender e experimentar novas tecnologias sem o risco de prejudicar um sistema em produção.
2. **Desenvolvimento de habilidades**: Com um HomeLab, você pode aprimorar suas habilidades em áreas como administração de sistemas, redes, segurança cibernética e muito mais.
3. **Teste de software**: Você pode usar seu HomeLab para testar novos softwares ou atualizações antes de implementá-los em um ambiente de produção.
4. **Diversão**: Sim, acredite ou não, a configuração e a manutenção de um HomeLab podem ser bastante divertidas se você é apaixonado por tecnologia!

## Como começar com um HomeLab?

Para começar com um HomeLab, você precisará de alguns componentes essenciais:

1. **Hardware**: Isso **pode ser um PC, notebook ou até mesmo um Raspberry Pi**. O hardware que você escolhe depende do que você planeja fazer com seu HomeLab. Para um servidor de mídia ou um pequeno servidor de arquivos, um Raspberry Pi pode ser suficiente. Para tarefas mais pesadas, como hospedar máquinas virtuais, você pode precisar de um PC ou notebook mais robusto.
2. **Sistema Operacional**: Existem muitos sistemas operacionais que você pode usar em seu HomeLab, incluindo Windows, Linux e BSD. A escolha do sistema operacional depende de suas necessidades e preferências pessoais.
3. **Software de virtualização**: Um software de virtualização permite que você execute várias máquinas virtuais em um único servidor físico. Isso é útil para experimentar diferentes sistemas operacionais ou configurações de software sem a necessidade de hardware adicional.

## Instalando o Proxmox em seu HomeLab

Um dos softwares de virtualização mais populares para HomeLabs é o Proxmox. Aqui está um guia passo a passo sobre como instalar o Proxmox em seu HomeLab:

1. **Baixe a ISO do Proxmox**: Você pode baixar a ISO mais recente do Proxmox do [site oficial](https://www.proxmox.com/en/downloads).
2. **Crie um dispositivo de inicialização**: Use um programa como o Rufus para criar um dispositivo de inicialização USB com a ISO do Proxmox.
3. **Instale o Proxmox**: Inicie seu servidor a partir do dispositivo USB e siga as instruções na tela para instalar o Proxmox, o passo a passo é bem tranquilo e durante a instalação possui algumas dicas, mas caso precise de alguma ajuda a mais, deixe nos comentários que vou te ajudar.
4. **Configure o Proxmox**: Depois de instalado, você pode acessar a interface web do Proxmox para configurar seu servidor, que será no ip local do seu servidos com a porta `8006`.

## Conclusão

Ter um HomeLab é uma excelente maneira de aprender sobre tecnologia e aprimorar suas habilidades. Com o hardware certo e o software de virtualização Proxmox, você pode criar um ambiente de aprendizado poderoso e flexível em sua própria casa. Então, por que não começar a construir seu HomeLab hoje?

## Próximos Passos

Este artigo é apenas o começo de uma série que planejo sobre HomeLabs. Oobjetivo é ajudá-lo a aproveitar ao máximo seu laboratório doméstico, fornecendo informações detalhadas e orientações passo a passo sobre várias tecnologias e práticas. 

No próximo artigo, vamos mergulhar mais fundo no Proxmox. Vamos explorar suas características e funcionalidades, e mostrar como você pode usá-lo para subir serviços em seu HomeLab. Se você está interessado em transformar seu HomeLab em uma poderosa ferramenta de aprendizado e experimentação, não perca nossos próximos artigos.

Certifique-se de continuar acompanhando nossa série de HomeLab para obter mais dicas, truques e tutoriais detalhados. Até a próxima!

Como configurar seu próprio HomeLab: Um Guia Passo a Passo para Instalar o Proxmox.

Como montei meu homelab - Parte 1: Sistema Operacional

## Introdução

![Logo do Eslint](/assets/img/1_3adbbrn3gotbz72xqfo96g.png)

> [ESLint](https://eslint.org/) é um projeto open source que ajuda a encontrar e corrigir problemas em seu código JavaScript. Não importa se está escrevendo código no navegador ou no servidor, com ou sem framework, o ESLint pode ajudar seu código a ser mais consistente e robusto.

*Trecho retirado da documentação do ESLint.*

---

Além de checarmos problemas, podemos forçar um padrão e regras no código. O que queremos que seja um erro, aviso, verificado ou ignorado.

### Naming Convention

Com typescript-eslint, conseguimos definir um prefixo para variáveis com tipos **booleans**.\
Seguindo essa convenção, uma variável booleana "open" daria erro no código, e precisaríamos alterá-la para `isOpen` ou algo do tipo!

```json
// .eslintrc.json

{
  ...
  "rules": {
    ...
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "variable",
        "types": ["boolean"],
        "format": ["PascalCase"],
        "prefix": ["is", "should", "has", "can", "did", "will"]
      }
    ]
  }
}
```

### I﻿mport Order

C﻿om Import Order conseguimos, como nome induz, organizar a ordem de nossos imports.

N﻿o exemplo abaixo, sempre o que vem do react ficaria no topo, logo após nossos components, templates, types e etc... Podemos definir se queremos um espaço em branco entre cada um ou não. E o melhor, isso tudo será sempre arrumado ao salvar o arquivo! Então não precisamos nos preocupar em arrumar e sempre teremos um arquivo padronizado!

```json
// .eslintrc.json
"import/order": [
      "error",
      {
        "newlines-between": "always",
        "pathGroups": [
          {
            "pattern": "react",
            "group": "builtin",
            "position": "before"
          },
          {
            "pattern": "components/**",
            "group": "external",
            "position": "after"
          },
          {
            "pattern": "templates/**",
            "group": "external",
            "position": "after"
          },
          {
            "pattern": "types/**",
            "group": "external",
            "position": "after"
          },
          {
            "pattern": "utils/**",
            "group": "external",
            "position": "after"
          }
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "object"
        ],
        "alphabetize": {
          "order": "asc"
        }
      }
    ],
```

### D﻿efault Export

C﻿om essa regra, definimos que todos os export serão named exports e não default, assim utilizando o nome dado e garantindo também que teremos nomes únicos na aplicação, e o próprio arquivo que define o nome dele, e não quem importa, ficando mais fácil também, que o refactor funcione até melhor!

```json
"import/prefer-default-export": "off",
"import/no-default-export": "error",
```

## C﻿onclusão

E﻿ssas são algumas regras que gosto de utilizar em meus projetos para manter um padrão melhor, visto que cada pessoa costuma organizar os imports de uma forma, ou as vezes não dá um nome tão claro a uma variável, com isso, fica mais fácil encontrar as coisas e até mesmo gerar um código limpo!

E﻿m breve trarei uma segunda parte desse artigo, e também não deixe de me contatar no LinkedIN ou Twitter, caso tenha alguma dúvida ou recomendação!


ESLint ajuda a mantermos um padrão no código e verificar erros. Aqui estarei listando algumas regras que não vivo sem!

O poder do ESLint - Regras que mais gosto de usar


## Introdução

![Imagem representando sinais de acessibilidade](/assets/img/acessibilidade-parte-2.jpeg)

Antes de mais nada, se você ainda não leu a parte 1 deste tema, recomendo que leia-o, basta [clicar aqui](/como-melhorar-acessibilidade).

A ideia de uma continuação veio a partir do [Episódio 3 do reality](https://youtu.be/Ccyegys681I?t=300) Show me the code, feito pela [Rocketseat](https://www.rocketseat.com.br/).
Onde no terceiro episódio o foco era aumentar e melhorar a acessibilidade do site em questão.

Então, com isso, separei mais alguns pontos do que fazer e como testar a acessibilidade.

### TabIndex

O tabIndex nada mais é do que uma propriedade que inserimos em elementos da tela para definir uma ordem de navegação pelo teclado.

Como neste exemplo retirado do MDN:

```html
<p>Clique em qualquer lugar deste painel, então tente navegar pelos elementos utilizando tab</p>

<label>O primeiro na ordem do tab<input type="text"></label>

<div tabindex="0">Pode ser acessado via tab por conta do tabindex</div>

<div>Não "tabeável" por não possuir tabindex</div>

<label>Terceiro na ordem do tab<input type="text"></label>
```

O resultado, assim como mais explicações pode ser acessado na [documentação do MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).

### Contrastes de cor

Muitas pessoas tem dificuldades de percepção de cor, assim como o alto contraste pode dificultar/machucar a visão.
Um exemplo bem básico disso é colocar um amarelo `#f5ff6f` nos textos enquanto o fundo está branco, por exemplo. Você terá de fazer um esforço enorme para conseguir ler o texto. E isso pode vir e virá a incomodar bastante sua visão com o tempo.
Para isso existe a WCAG, que trás diretrizes que podemos seguir, a fim de obtermos uma boa acessibilidade!

Existem sites que te ajudam a validar se o background e a cor do texto possuem um nível de contraste bom, como o [Color A11y](https://color.a11y.com/?wc3). O ideal seria conseguir o máximo de aprovação neste teste, para garantir que todos consigam ler da melhor forma.

O próprio DevTools ajuda com isso, como no exemplo a seguir:

![Imagem onde mostro a visualização do devTools, na forma como ele ajuda com o contraste e acessibilidade exibindo curvas no seletor de cor.](/assets/img/devTools-contraste.png)

### Conclusão

Então é isso, conseguimos dar uma passada bem rápida e legal sobre o tema, e se o post te ajudou de alguma forma compartilhe e comente se já sabia de alguma dessas informações e quem sabe eu faça mais alguns posts sobre acessibilidade. Podemos até aprofundar em algum dos temas citados neste post!

Obrigado por ler!


Como melhorar a acessibilidade de seus sites - Parte 2


## Introdução

![Imagem representando sinais de acessibilidade](/assets/img/acessibilidade-medium.png)

Acessibilidade é um tópico muito falado mas muitas vezes vejo isso sendo deixado de lado.

Por ser um tópico bem grande, hoje irei abordar alguns pontos que são fáceis de começar e bem fácil de lembrar durante seu desenvolvimento.

### Outline

Já notou que nos navegadores baseados no Chromium e no Firefox algumas interações possuem um comportamento padrão do navegador?
Como por exemplo a seleção de um botão ou input. Como nos exemplos abaixo:

![Imagem onde mostra exemplos de foco de botões no Chrome, Safari e Firefox.](/assets/img/outline-chrome.png)

Muitas vezes eu vejo sites onde removem por completo o outline em CSS Reset. E isso implica diretamente na acessibilidade.

Pessoas que utilizam navegação pelo teclado ou não conseguem identificar alterações de cores não conseguem detectar o que está acontecendo caso essa propriedade seja removida. Okay, entendo que talvez não combine muito com o layout, mas **não o remova**, você pode alterar o comportamento padrão do navegador e aplicar seu próprio estilo.

Basta seguir este artigo para ter uma ideia melhor: [Copy the Browser’s Native Focus Styles](https://css-tricks.com/copy-the-browsers-native-focus-styles/)

### Textos alternativos

Textos alternativos são super importantes!

Seja pra SEO, acessibilidade e até performance.
O texto alternativo, ou `alt`, de uma imagem, por exemplo, quando a imagem não carregar o texto será exibido de placeholder. E além disso, os leitores de tela farão uso deste texto, então lembre-se de fazer um texto que faça sentido e que ajude quem realmente precisa. **Tente descrever o máximo a imagem!**

### ESLint

ESLint é o seu melhor amigo durante o desenvolvimento. Além de te ajudar a manter um bom código ele pode te ajudar com acessibilidade também!

[**eslint-plugin-jsx-a11y**](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)

Esse plugin vai te ajudar com vários pontos importantes de acessibilidade, como garantir os textos alternativos, a inclusão de `aria` em seus componentes, verificar se as anchor tags são válidas, se os emojis estão corretos e possuem acesso aos leitores de tela entre inúmeras funcionalidades. Vale a pena dar uma conferida!


Então é isso, conseguimos dar uma passada bem rápida e legal sobre o tema, e se o post te ajudou de alguma forma, compartilhe e comente se já sabia de alguma dessas informações e quem sabe eu faça mais alguns posts sobre acessibilidade. Podemos até aprofundar em algum dos temas citados neste post!

Obrigado por ler!


Como melhorar a acessibilidade de seus sites


## Introdução

![Imagem de um sitemap do UX Collective](/assets/img/sitemap.png)

O cenário era o seguinte, estava precisando gerar sitemap no Next.JS, mas tinha alguns links que eram totalmente dinâmicos. Sempre que um post novo no blog fosse criado, deveria atualizar o sitemap.

Comecei a buscar algumas soluções e sem sucesso, só conseguia gerar o sitemap estático, e teria de complementar na mão com os paths dinâmicos, além de ser muita gambiarra.

### next-sitemap

Bom, primeiramente vamos instalar a lib. Caso queira usá-lo para gerar apenas páginas estáticas instale-o como devDependencies `-D`

```bash
yarn add next-sitemap
```

### Criando sitemap estático

Agora vamos criar o script. Vá no `package.json` e crie o script `"postbuild": "next-sitemap"`, assim, sempre depois do build ele irá criar o sitemap.

Crie um arquivo `next-sitemap.js` na raiz do seu projeto.
Nele iremos configurar algumas coisas

```js
module.exports = {
  siteUrl: 'https://urldoseu.site',
  generateRobotsTxt: true, // opcional
  priority: null,
  changefreq: null,
  exclude: ['/server-sitemap.xml', '/post/*'],
  robotsTxtOptions: {
    additionalSitemaps: ['https://urldoseu.site/server-sitemap.xml'],
  },
}
```

Bom, a lib irá gerar seu robots.txt também, caso não queira, basta passar como `false`. Os campos *priority* e *changefreq* são campos do xml, no meu caso eu não quero esses dois campos.

Os campos `exclude` e `robotsTxtOptions` não serão necessários caso você queira apenas gerar o sitemap estático.
Caso você tenha algum blog ou páginas que são criadas dinamicamentes, continua aí que vamos ver agora como fazer para preencher o sitemap com eles!

### Criando sitemap dinâmico

Agora iremos criar um arquivo em `pages/server-sitemap.xml/index.tsx`.

Nesse arquivo iremos fazer o seguinte:

```ts
import { getServerSideSitemap } from 'next-sitemap'
import { GetServerSideProps } from 'next'
import { getAllPosts } from 'services' // Importar a api que cria as páginas dinamicas. Method to source urls from cms

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // Vou pegar os primeiros 100 posts do meu blog
  const allPosts = await getAllPosts({ per_page: 100 })

  // Vou criar um fields, onde busco o slug da minha resposta
  // E com o slug vou preenchendo dinamicamente cada post que tenho
  const fields = allPosts.data.map(({ slug }) => ({
    loc: `https://urldoseu.site/post/${slug}`,
    lastmod: new Date().toISOString(),
    // changefreq
    // priority
  }))

  return getServerSideSitemap(ctx, fields)
}

// Default export to prevent next.js errors
// eslint-disable-next-line @typescript-eslint/no-empty-function
export default () => {}
```

E é apenas isso.
Lembra lá em cima onde criamos o arquivo `next-sitemap.js`?

Os campos:
```js
  exclude: ['/server-sitemap.xml', '/post/*'],
  robotsTxtOptions: {
    additionalSitemaps: ['https://urldoseu.site/server-sitemap.xml'],
  },
```
`exclude`: estou excluindo do meu sitemap estático qualquer página que ele gere no build relacionado aos posts. Assim evito duplicatas em meu `public/sitemap.xml` gerado no `postbuild` com o meu `server-sitemap.xml` gerado dinamicamente.

Além disso, adiciono o meu `server-sitemap.xml` em meu `robots.txt`.

Quando acessarmos `localhost:3000/server-sitemap.xml` iremos ver o nosso xml dinâmico.

É isso. Geramos nosso xml estático e dinâmico em menos de 10 minutos!

Se o post te ajudou, compartilhe!


Como gerar sitemap estático e dinâmico no Next.JS com o next-sitemap

Como gerar sitemap no Next.JS


## Introduction

A week ago I bought an Echo Dot from Amazon, and since then I've fallen in love with automation.

Today I'll show you how I used scripts to do the automation of some things here.

![Image of an Echo Dot](/assets/img/alexa-echo-dot.jpg)

### TriggerCMD

First, we are going to use TriggerCMD. TRIGGERcmd is a cloud service that allows you to securely and remotely run commands on your computers.

There are many ways to trigger your commands, including IFTTT, Alexa, Google Home, SmartThings, and Zapier.

In this post, we are going to use Alexa.

TriggerCMD works with Windows, Mac and Linux.

#### Creating an account

You need to go to [TriggerCMD login page](https://www.triggercmd.com/user/auth/login).
You can use a different email from your Amazon account. Your TriggerCMD account will be used to link your Amazon account using the TriggerCMD Alexa Skill.

#### Downloading TriggerCMD Agent

After creating an account, download the TriggerCMD Agent for your OS [clicking here.](https://www.triggercmd.com/en/)

Now, go to [TriggerCMD instructions](https://www.triggercmd.com/user/computer/create) and copy your token, it will be used after installing TriggerCMD Agent on your computer

Now that you have linked your TriggerCMD account with your computer using TriggerCMD Agent and your token, you can create some commands and linking it to your Alexa, using TriggerCMD skill!

#### Understanding more about TriggerCMD

You can check [this video](https://www.youtube.com/watch?v=9Jm_s9sTZXw), so you can understand a little better how to sync your account with Alexa Skill and create some commands using TriggerCMD GUI.

#### Creating your commands

![TriggerCMD GUI](/assets/img/trigger-cmd-gui.png)

I have created a command called "work" that runs a `work.bat` file on my PC.

```shell
:: Open project on Code and run dev server
cd C:\www\prion\mainProject
start cmd /k npm run dev
code .
```

That's it. You synchronize a service that is running on your computer that is activated by another one, which in this case is Alexa.

And you can go a little further, like, creating a `.vbs` script that opens Spotify on a specific playlist on your computer and plays it. Like this:

```vb
Set WshShell = WScript.CreateObject("WScript.Shell")
Comandline = "start spotify"
WScript.sleep 5000
CreateObject("WScript.Shell").Run("spotify:playlist:0CtF5Q52iAOxdUkSIh5hBM")
WScript.sleep 3000
WshShell.SendKeys "{ENTER}"
WScript.sleep 1000
WshShell.SendKeys "^{s}"
WScript.sleep 100
WshShell.SendKeys "^{RIGHT}"
```

To open the Spotify playlist you just need to copy the URI :D

That's it for today! I hope I could help you to understand a little bit this world of automation!

Any typos or grammar errors? Let me know in the comments section!

Want to dive a little better on something in this post? Let me know too and I can create another post about it!


How to use shell scripts, vbs and nodejs to automate your computer with Alexa and TriggerCMD

How I automated my PC using Alexa and programming



## Introduction

Today's post is about a cool set up you can do in your projects. It's easier to type out the paths, no more `../../../../where-is-my-folder`

You can move a file without having to update its input paths

## Let's get started!

All you have to do is creating a `jsconfig.json` in your root folder with this code:

```json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

Then, you go to your `eslintrc.js` or where you set up your ESlint and create a new object

```js
settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
  },
```

And it's pretty much it! You can now make those imports prettier and easier!

![Comparing the before and after of how imports were made](/assets/img/thumb-absolute-path.png "Comparing the before and after of how imports were made")

**Note that you don't need to install any npm package for this, that settings chunk is enough.**

That was a pretty short post! Any questions let me know in the comments below!

Stick around for more tips!

Thank you for reading!


Configuring absolute path! No more ../../../hell plus ESLint

Absolute imports with Create React App


## Introduction

When I was developing this blog I just knew it had to be responsive, and I know a lot of people have some doubts about what to do.

So today I'm going to show some tips about how to make your site more responsive with pure CSS!

![Image of a mobile, tablet and desktop, introducing to Responsive Subject](/assets/img/responsive-sources.jpg)

### Media queries

I think the biggest question always is: **breakpoints**

**Which ones should I use?**

And I got you. Here are the medias queries breakpoints I use in every project

```json
{
  "huge": "1440px",
  "large": "1170px",
  "medium": "768px",
  "small": "450px"
}
```

You dont have to set a new breakpoint every 100px, if you do, something is wrong with your responsive!

Why I said that?? Mobile-first! Which is our next topic!

### Mobile First

If you start your development in the mobile view your site will become so much responsive!

Adapting to large screens is much easier than adapting large screens to small screens, and mobile access is increasing so much that you don't want to lose their access because your app isn't responsive enough!

### The key to responsive!

On my blog, I just had to use one media query and it was 1170px.

For instance:

My sidebar will be showing at the top on mobile, so, to do that I just created this rule:

```css
@media (max-width: 1170px) {
  .blogWrapper {
    flex-direction: column;
  }
}
```

and now, the key... The secret is to use **REM**. ~~which won't make you [lose your religion](https://youtu.be/xwtdhWltSIg/)~~

I used **rem** in almost everywhere on my blog and it makes the responsive so much easier!

> [Check: Can I Use: REM](https://caniuse.com/#feat=rem)

> Type of unit similar to em, but relative only to the root element, not any parent element.

> Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

This means that 1rem equals the font size of the HTML element (which for most browsers has a default value of 16px). Unless you change it 😊

That's it for today! In the next post we will see a lib where we can make our responsive so much fast, so stick around!


How to use media queries and which unit to use to make a better responsive

How to make a responsive website using pure CSS


![Image of "Wello World" in a terminal](/assets/img/hello-world.png)

## I'm not just "a strange man behind the keyboard"

Hey, how are you?
I'm Miguel Machado, a full stack developer **from Brazil**, I have about 2 years of experience in the programming field

I always dreamt about having my blog, so, why not build my own?!

### Why I developed this blog?

I always loved to show others what I've created and what I've learned. _I kinda like the idea of teaching_ **and it's my chance to improve my English!**

### The mission

I'm planning to be publishing at least one post per week.

And I hope I can always bring some content that helps or teaches something!

### What I am going to be blogging about?

I'm going to post about development, some tips I learned during my developer career and the sooner you learn it, the better! And I can't forget **Science**, because, well, I ❤️ Science!

#### Note:

**Any typos or grammar errors? Let me know in the comments section!**

That's it for today, devs! Stick around for more content!


Let me introduce to you. Come, have a sit!

Miguel MachadoSoftware Engineer