DEV Community: Rafael Thayto

How to resume neovim session

Rafael Thayto — Wed, 23 Oct 2024 19:08:01 +0000

Like most Unix programs Neovim/VIM can be suspended by pressing CTRL-Z.

To resume the session is simple, just run fg in your terminal:

$ fg

Photo by Martin Zangerl on Unsplash

Micro Frontends com Next.js Multi Zones

Rafael Thayto — Tue, 01 Oct 2024 16:09:33 +0000

Quando estamos desenvolvendo uma aplicação Web e ela acaba escalando, geralmente precisamos de um time. Quando essa aplicação escala mais ainda, precisamos de mais times trabalhando na mesma aplicação.

Por que estou falando isso?

Porque geralmente quando temos muitas pessoas alterando o mesmo projeto, podemos ter diversos problemas. Sejam eles muitos Pull Requests, diferenças de escopos, regras de negócio distintas, conflitos de merge e até mesmo divergências de ideias.

Quando isso acontece o que geralmente pensamos é em separar um pedaço dele em outro projeto e criar o famoso Micro Frontend que vai agilizar nossas entregas e garantir que o projeto evolua de maneira mais rápida e independente de outros escopos.

O que facilita e muito o desenvolvimento!

Com o isso o time do Next.js criou uma feature avançada que chama Multi Zones, com ela a gente consegue criar diversos Micro Frontends de forma muito rápida e simples utilizando Next.js

Pré-requisitos

Antes de continuar a ler esse artigo, eu presumo que você tenha uma noção básica / familiaridade com Next.js

O que vamos fazer

Até o final desse artigo vamos fazer 2 apps com Next.js, combinar eles usando a feature de Multi Zones. Vou fazer também uma parte 2 mostrando como deployar as 2 aplicações na Vercel.

Criando a pasta do projeto

Abre seu terminal/cmd e manda o seguinte comando:

mkdir nextjs-multi-zones-post
cd nextjs-multi-zones-post

Logo em seguida abram essa mesma pasta no editor preferido de vocês! (nessa época era o VSCode 💩, hoje em dia é o Neovim/VIM ❤️)

Criando os projetos

Após ter entrado na pasta que vai centralizar nossos projetos, chegou a hora de criá-los!

Primeira aplicação - Home

Abre seu terminal aí e escreve o seguinte comando para criarmos o primeiro projeto que vai ser nossa HOME:

npx create-next-app --ts home
cd home

Depois de criar a home, vamos alterar a porta em que o projeto vai rodar pra facilitar a nossa vida e termos um padrão até o final do post

Abra o arquivo package.json que está dentro da sua home e altere o script de dev de:

...
"scripts": {
    "dev": "next dev",
    ...
  },
...

para:

...
"scripts": {
    "dev": "next dev -p 4444",
    ...
  },
...

Abra seu terminal na mesma pasta e rode o seguinte comando pra executar a aplicação:

npm run dev

Segunda aplicação - Blog

Abra outro terminal e rode o seguinte comando para criarmos o nosso segundo projeto que vai ser nosso BLOG:

npx create-next-app --ts blog
cd blog

Vamos seguir o mesmo procedimento que fizemos para home agora com o blog

Abra o arquivo package.json que está dentro do seu blog e altere o script de dev de:

...
"scripts": {
    "dev": "next dev",
    ...
  },
...

para:

...
"scripts": {
    "dev": "next dev -p 7777",
    ...
  },
...

Abra seu terminal na mesma pasta e rode o seguinte comando pra executar a aplicação:

npm run dev

Pronto, agora já temos as 2 aplicações rodando e o resultado tem que ser algo parecido com isso:

Home (Aplicação 1) rodando na porta http://localhost:4444 e o Blog (Aplicação 2) rodando na porta http://localhost:7777

Configurando a Home (Aplicação 1)

O primeiro projeto que vamos desenvolver e configurar vai ser Home que além de ser o projeto base também vai ser nossa Home. É nele onde vamos configurar as URLs que vamos fazer o rewrite para que o Micro Frontend e as Multi Zones funcionem.

Abram o arquivo next.config.js e adicionem as seguintes linhas de código:

const { BLOG_URL } = process.env

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: `/:path*`,
      },
      {
        source: '/blog',
        destination: `${BLOG_URL}/blog`,
      },
      {
        source: '/blog/:path*',
        destination: `${BLOG_URL}/blog/:path*`,
      },
    ]
  },
}

Na parte de rewrites é basicamente uma reescrita mesmo, vamos reescrever as rotas /blog e tudo que vier depois, como por exemplo /blog/posts/hello-world. Para saber mais sobre rewrites é só acessar a documentação oficial do Next.js.

E vocês podem perceber que também adicionamos uma constante usando uma desestruturação no objeto process.env para podermos pegara URL do blog via variáveis de ambiente.
Agora bora criar o arquivo .env na raiz do nosso projeto da home como mostra no exemplo abaixo.

É nele onde vamos colocar o BLOG_URL apontando para o http://localhost:7777 que é onde está rodando nosso projeto do blog.
.env

BLOG_URL=http://localhost:7777

Agora dentro do nosso projeto da home vamos transformar o index.tsx nisso daqui:

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js Blog With Multi Zones</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <Link href="/">Home!</Link> :D
        </h1>

        <div className={styles.grid}>
          <a href="/blog" className={styles.card}>
            <h2>Go Blog &rarr;</h2>
            <p>Click here and go home on our other Next.js app :D</p>
          </a>

          <Link href="/about" passHref>
            <a href="/about" className={styles.card}>
              <h2>About us &rarr;</h2>
              <p>Click here and go to About Us page!</p>
            </a>
          </Link>

          <a href="/blog/posts/hello-hello" className={styles.card}>
            <h2>Go to Hello post &rarr;</h2>
            <p>Click here and go to the Hello Hello post</p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Home

Basicamente adicionamos 3 links, sendo 2 deles para páginas do nosso blog (ainda não construído) e 1 link para o redirecionamento para uma página interna nossa que é a About Us.

Agora vamos criar o arquivo about.tsx dentro de home/pages/about.tsx:

about.tsx

import type { NextPage } from 'next'
import Link from 'next/link'

const About: NextPage = () => {
  return (
    <div>
      <p>About us :O</p>
      <hr />
      <div>
        <Link href="/">
          <a>Go home</a>
        </Link>
      </div>
    </div>
  )
}

export default About

Aqui criamos uma página sobre nós bem simples que só tem um texto e um link que nos faz voltar para a home.

E assim finalizamos a parte da Home. Agora bora pro Blog!

Configurando o Blog (Aplicação 2)

Agora vamos configurar o blog. No blog vai ser um pouco mais simples, basicamente vamos abrir o arquivo next.config.js e adicionar a propriedade basePath dentro do nextConfig, ele vai dizer para o next que a URL base dele vai começar no endereço que escolhermos, que nesse caso vai ser /blog
next.config.js

const nextConfig = {
  basePath: '/blog',
}

module.exports = nextConfig

Lembrando que toda vez que alteramos o arquivo next.config.js ou adicionamos algo no .env precisamos parar o servidor e inicia-lo novamente 😁

Agora dentro do nosso projeto da blog vamos transformar o index.tsx nisso daqui:

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

const Blog: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js Blog With Multi Zones</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/blog/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <Link href="/">Blog!</Link>
        </h1>

        <div className={styles.grid}>
          <a href="/" className={styles.card}>
            <h2>Go Home &rarr;</h2>
            <p>Click here and go home on our other Next.js app :D</p>
          </a>

          <Link href="/posts/it-works" passHref>
            <a href="/blog/posts/it-works" className={styles.card}>
              <h2>Go to It Works post &rarr;</h2>
              <p>Click here and go to the It Works post</p>
            </a>
          </Link>

          <Link href="/posts/hello-hello" passHref>
            <a href="/blog/posts/hello-hello" className={styles.card}>
              <h2>Go to Hello post &rarr;</h2>
              <p>Click here and go to the Hello Hello post</p>
            </a>
          </Link>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image
              src="/blog/vercel.svg"
              alt="Vercel Logo"
              width={72}
              height={16}
            />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Blog

Na raiz do nosso blog temos 1 link que leva para nossa Home e 2 links que nos levam a posts no nosso blog

Na imagem acima vocês já conseguem ver a mágica acontecendo, se vocês olharem para o URL vão perceber que estamos rodando no http://localhost:4444/blog, mas por quê isso acontece?

Quando configuramos o basePath dentro do next.config.js do projeto Blog, dizemos para o next que o index.tsx e todos os outros arquivos vão ser acessados sempre a partir do nosso basePath que nesse caso é /blog.

Também devemos nos lembrar que no next.config.js do nosso projeto Home configuramos que sempre que estivermos em http://localhost:4444 e acessarmos o /blog ou qualquer coisa depois de blog, estaremos fazendo um rewrite da rota e estaremos apontando para o nosso Blog via Home.

Ou seja: http://localhost:4444/blog vai apontar para http://localhost:7777/blog

O mais incrível de tudo isso é que conseguimos acessar a nossa outra aplicação (blog) dentro da nossa aplicação (home) sem alterar a URL 🤯, não é impressionante?

Simple Golang Dockerfile with multi staged builds (reduces ~96.67% of the image size)

Rafael Thayto — Tue, 01 Oct 2024 01:53:04 +0000

Using this docker file you will reduce your golang docker image from ~1GB to ~40MB and you will rebuild your image faster

# Stage 1: Build the Go application
FROM golang:1.23-alpine AS builder

# Set the working directory inside the container
WORKDIR /app

# Copy the Go module files
COPY go.mod go.sum ./

# Download Go module dependencies
RUN go mod download

# Copy the rest of the application code
COPY . .

# Build the Go application
RUN go build -o main cmd/server/main.go

# Stage 2: Minimal image for running the app
FROM alpine:latest as runner

# Set environment variables (optional)
ENV GO_ENV=production

# Create a directory for the application
WORKDIR /app

# Copy the binary from the builder stage
COPY --from=builder /app/main .

# Expose the port on which the application runs (if applicable)
EXPOSE 8080

# Command to run the application
CMD ["./main"]

Zero Downtime Deployment with Docker Compose in an OCI VPS using GitHub Actions

Rafael Thayto — Fri, 20 Sep 2024 02:05:36 +0000

First, you must have a Linux VPS (I'll use Ubuntu 22 in this tutorial).

Requirements

Docker
Docker Compose
Docker Rollout Plugin

How to install Docker Rollout Plugin

It's very simple:

# Create directory for Docker cli plugins
mkdir -p ~/.docker/cli-plugins

# Download docker-rollout script to Docker cli plugins directory
curl https://raw.githubusercontent.com/wowu/docker-rollout/master/docker-rollout -o ~/.docker/cli-plugins/docker-rollout

# Make the script executable
chmod +x ~/.docker/cli-plugins/docker-rollout

Docker Rollout Usage

Run docker rollout <name> instead of docker compose up -d <name> to update a service without downtime.

$ docker rollout -f docker-compose.yml <service-name>

GitHub Actions build_and_deploy.yml workflow

In this case I'm using a private registry on Digital Ocean.

name: CI

# 1
# Controls when the workflow will run
on:
  # Triggers the workflow on push events but only for the master branch
  push:
    branches: [main]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
    inputs:
      version:
        description: 'Image version'
        required: true
#2
env:
  REGISTRY: 'registry.digitalocean.com/YOUR_REGISTRY_NAME'
  IMAGE_NAME: 'YOUR_IMAGE_NAME'

#3
jobs:
  build_and_push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repo
        uses: actions/checkout@v4

      - name: Build container image
        run: docker build -t $(echo $REGISTRY)/$(echo $IMAGE_NAME):$(echo $GITHUB_SHA | head -c7) .

      - name: Install doctl
        uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}

      - name: Log in to DigitalOcean Container Registry with short-lived credentials
        run: doctl registry login --expiry-seconds 600

      - name: Remove all old images
        run: if [ ! -z "$(doctl registry repository list | grep "$(echo $IMAGE_NAME)")" ]; then doctl registry repository delete-manifest $(echo $IMAGE_NAME) $(doctl registry repository list-tags $(echo $IMAGE_NAME) | grep -o "sha.*") --force; else echo "No repository"; fi

      - name: Push image to DigitalOcean Container Registry
        run: docker push $(echo $REGISTRY)/$(echo $IMAGE_NAME):$(echo $GITHUB_SHA | head -c7)

  deploy:
    runs-on: ubuntu-latest
    needs: build_and_push

    steps:
      - name: Deploy to Digital Ocean droplet via SSH action
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.OCI_HOST }}
          username: ${{ secrets.OCI_USERNAME }}
          key: ${{ secrets.OCI_SSH_KEY }}
          envs: IMAGE_NAME,REGISTRY,{{ secrets.DIGITALOCEAN_ACCESS_TOKEN }},GITHUB_SHA
          script: |
            whoami
            cd ~/app
            pwd
            ls -la
            # Login to registry
            docker login -u ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }} -p ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }} registry.digitalocean.com
            # Update the APP image in docker-compose.yml
            sed -i '0,/image:/s|image: .*|image: '$(echo $REGISTRY)'/'$(echo $IMAGE_NAME)':'$(echo $GITHUB_SHA | head -c7)'|' docker-compose.yml
            # Pull the latest image
            docker compose pull
            # Here is the magic docker plugin
            docker rollout -f docker-compose.yml app
            echo "Deployed with success to production"

Conclusion

I hope this tutorial helps you in some way,
best regards Rafael Thayto.

Photo by Bernd 📷 Dittrich on Unsplash

Originalmente postado em https://thayto.com/blog/zero-downtime-deployment-with-docker-compose-in-an-oci-vps-using-github-actions dia 13 de setembro de 2024.

How to Flatten an Array in JavaScript

Rafael Thayto — Fri, 20 Sep 2024 02:02:35 +0000

Using recursion and a while loop is on of the easier ways to do that

export default function flatten(value) {
  const arr = []

  const flat = (a) => {
    let counter = 0
    console.log(a)
    while (counter < a.length) {
      const val = a[counter]
      if (Array.isArray(val)) {
        return flat(val)
      } else {
        arr.push(val)
      }
      counter++
    }
  }
  flat(value)
  return arr
}

You also can do that using a reduce() and array.concat()

export default function flatten(value) {
  return value.reduce((acc, val) => 
    Array.isArray(val)
      ? acc.concat(flatten(val))
      : acc.concat(val),
  []);
}

Expondo seu localhost com Ngrok (muito útil para testar webhooks)

Rafael Thayto — Sat, 06 Jul 2024 18:58:51 +0000

Os problemas de "na minha máquina funciona" acabaram!

Problema

Estava precisando fazer alguns testes de webhooks, porém só conhecia uma maneira que seria deployar a app e só assim conseguir testar os webhooks. Esse método funciona e é muito utilizado por devs. Mas ele tem um problema... todo teste você vai precisar deployar novamente sua aplicação e isso leva bastante tempo.

Pesquisando por aí encontrei o Ngrok e com ele conseguimos expor nosso localhost de forma bem simples.

Instalação

você pode seguir a Documentação Oficial também.

Mac

Use o Homebrew:

brew install ngrok/ngrok/ngrok

Linux

Use o apt

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \
  sudo gpg --dearmor -o /etc/apt/keyrings/ngrok.gpg && \
  echo "deb [signed-by=/etc/apt/keyrings/ngrok.gpg] https://ngrok-agent.s3.amazonaws.com buster main" | \
  sudo tee /etc/apt/sources.list.d/ngrok.list && \
  sudo apt update && sudo apt install ngrok

Windows

Use o Chocolatey

choco install ngrok

Conecte o seu agent à sua conta do ngrok

Pra isso é necessário que você faça o log in ou sign up no Ngrok e pegue seu Authtoken.

Copie o token e adicione no seu terminal

ngrok config add-authtoken <TOKEN>

Rode o Ngrok

Starte o Ngrok rodando o comando abaixo (você pode escolher a porta que preferir, mas no exemplo utilizei a porta 8000):

ngrok http 8000

Obrigado por ler até aqui! Espero que esse post te ajude :)

Confira mais em https://thayto.com/links

Originalmente postado em https://thayto.com dia 06 de Julho de 2024.

Cover Image: Photo by Stepan Kalinin on Unsplash

TypeScript - Como pegar uma string no seu Literal Types

Rafael Thayto — Mon, 24 Jul 2023 20:11:30 +0000

Salve, salve devs seniors.

Não vou enrolar nada. Basicamente é só você utilizar o Utility Type Extract do próprio TypeScript e boa! Por exemplo:

type CatNames = 'Garfield' | 'Yoru' | 'Yuki' | 'Fluffy' | 'Lady' | 'Lucky'

type MyCatNames = Extract<CatNames, 'Yoru' | 'Yuki'>
                                    // |-> Extract these two `literal types` from CatNames `literal type`

type Cat = {
  age: number
  name: CatNames
}

function getMyCat(age: number, name: MyCatNames): Cat {
                               // |--> only show 'Yoru' and 
                               //                'Yuki'
  return {
    age,
    name,
  } as Cat
}

const myCat1 = getMyCat(1, 'Yoru')
const myCat2 = getMyCat(1, 'Yuki')

const otherCat: Cat = {
    age: 3,
    name: 'Garfield'
}
const otherCatWithMyCatName: Cat = {
    age: 5,
    name: 'Yoru'
}

// tmj!

link do TS Playground

espero que ajude alguém!

(OBS: esse post foi escrito em no máximo 10 minutos)

meus links: https://thayto.com/linktree

Originalmente postado em https://thayto.com dia 24 de Julho de 2023.

Photo by Karina Vorozheeva on Unsplash

💡 TypeScript - Template Literal Types

Rafael Thayto — Fri, 07 Jul 2023 22:31:04 +0000

Template Literal Types é um bglh insano que expande as possibilidades do que já era possível com o string literals + unions do TS, dá uma olhada!

Ele tem a mesma sintaxe do template literal string do JavaScript.

type Tchau = "tchau!"

type Salve = `Oi ${Tchau}`

com ele é possivel usar sua necessidade + imaginação pra fazer diversas coisas bacanas que vão agregar muito no seu projeto/type.

um exemplo bacana seria padronizar que todas as propriedades extras que adicionarmos à um type, necessitem de ter o prefixo "data_" e o suffixo "_prop", assim conseguimos criar um objeto com um padrão que vai facilitar o consumo de leitura para sabermos quais as propriedades extras que foram enviadas.

falar é fácil, mas cadê o exemplo? vamos começar criando um type EventData, ele é a nossa base para nosso objeto evento de evento.

type EventData = {
  id: string
  name: string
  step: 'first_step' | 'second_step'
}

ele já possui propriedades definidas, que não podem ser alteradas, mas agora precisamos enviar mais alguns campos relacionados aos fields que ele tem em cada step, poderiamos extender o type EventData e adicionar os campos, mas ao invés disso, bora usar o Template Literal Types!

type FormFields = {
  name: string
  age: number
}

type EventDataExtraProps<T> = `field_${string & keyof T}`
// aqui vamos modificar um pouco o EventData
type EventData<T> = {
  id: string
  name: string
  step: 'first_step' | 'second_step'
} & Record<EventDataExtraProps<T>, any>

const event: EventData<FormFields> = {
  id: 'sextou?',
  name: 'thayto',
  step: 'first_step',
  field_name: 'full_name',
  field_age: 22
}

parece complexo, mas é bem simples, em projetos grandes / libs, com um único utilitário desses, conseguimos fazer mágica nos auto_completes e na padronização do envio de determinadas propriedades!

espero que tenham aprendido algo, se não aprendeu, pelo menos leu até o final, tmj!

https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

Originalmente postado em https://thayto.com dia 07 de Julho de 2023.

Como abrir o Visual Studio Code (VSCode) dentro do GitHub

Rafael Thayto — Sat, 05 Nov 2022 15:16:36 +0000

Todo dev já precisou em algum momento editar um arquivo dentro do GitHub e se deparou com essa tela de edição padrão do próprio GitHub:

No primeiro momento ela parece uma tela "OK" para fazermos uma edição rápida, mas quando precisamos pesquisar mais coisas dentro do repositório, essa tela não nos ajuda muito e é por isso que vou mostrar como abrir o Visual Studio Code(VSCode) direto do GitHub.

É bem simples, basta apertar a tecla . (ponto) do seu teclado e voilá, vai abrir magicamente um VSCode direto do seu navegador e dentro do seu repositório com quase todas as funcionalidades que o VSCode tem.

Agora você consegue fazer quantas pesquisas quiser, mexer em quantos arquivos forem necessários e também vai poder fazer commits, instalar extensões, mudar o tema, entre outras várias funcionalidades.

Outras maneiras de abrir o VSCode direto do GitHub

Outras maneiras de abrir qualquer repo do GitHub no github.dev (VSCode do GitHub) são:

Alterando a URL de github.com para github.dev
Apertando a tecla . dentro de algum repositório
Ao abrir um arquivo dentro de algum repositório, selecione o menu suspenso ▼ e clique em abrir com (open with) github.dev.

Essa foi a dica de hoje, espero ter ajudado, tmj! 😎

Originalmente postado em https://thayto.com dia 5 de novembro de 2022.

Diferença entre operadores ?, ?? e || no JavaScript / TypeScript

Rafael Thayto — Mon, 31 Oct 2022 22:29:51 +0000

Contexto

Acredito que todo dev já ficou em dúvida sobre as diferenças entre alguns operadores do JavaScript/TypeScript. Por isso fiz esse post simples e rápido sobre as diferenças entre os operadores ?, ?? e ||. Confira logo abaixo

? - Optional Chaining

? -> Optional Chaining Operator.
Permite a leitura do valor de uma propriedade localizada internamente em uma cadeia de objetos conectados, sem que a validação de cada referência da cadeia seja expressivamente realizada.

O operador ?. funciona de maneira similar ao operador . de encadeamento, exceto que, ao invés de causar um erro se a referência é nullish (null ou undefined), a expressão sofre um "curto-circuito" e retorna com um valor de undefined. Quando utilizado com uma chamada de função, retorna undefined se a função executada não existir.

Isso resulta em expressões mais curtas e simples ao acessar propriedades encadeadas quando a possibilidade de uma referência ser inexistente. Isso também pode auxiliar ao explorar o conteúdo de um objeto quando não existe garantia da existência de determinadas propriedades obrigatórias.

Exemplo

const user = {
  id: 13,
  name: "Thayto"
};

console.log(user?.name); // John
console.log(user?.fullName); // undefined, aplicação não vai quebrar.
console.log(user.fullName); // TypeError: Cannot read property ‘fullName’ of undefined, aplicação quebra.

?? - Nullish Coalesing

?? -> Nullish Coalescing Operator.
É um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é null ou undefined. Caso contrário, ele retorna o seu operando do lado esquerdo.

Exemplo

console.log(13 ?? "não encontrado") // 13
console.log(0  ?? "não encontrado") // 0

console.log("Dri"  ?? "não encontrado") // "Dri"
console.log(""     ?? "não encontrado") // ""

console.log(true  ?? "não encontrado") // true
console.log(false ?? "não encontrado") // false

console.log(undefined ?? "não encontrado") // "não encontrado"
console.log(null      ?? "não encontrado") // "não encontrado"

|| - Logical OR

|| é o Logical OR Operator
A expressão Logical OR é avaliada da esquerda para a direita, é testada para possível avaliação de "curto-circuito" usando a seguinte regra:

(alguma truthy expression) || expr é avaliado em curto-circuito para a expressão verdadeira.

Curto-circuito significa que a parte expr acima não é avaliada, portanto, quaisquer efeitos colaterais de fazê-lo não têm efeito (por exemplo, se expr é uma chamada de função, a chamada nunca ocorre). Isso acontece porque o valor do operador já é determinado após a avaliação do primeiro operando.

Exemplo

console.log(13 || "não encontrado") // 13
console.log(0  || "não encontrado") // "não encontrado"

console.log("Dri"  || "não encontrado") // "Dri"
console.log(""     || "não encontrado") // "não encontrado"

console.log(true  || "não encontrado") // true
console.log(false || "não encontrado") // "não encontrado"

console.log(undefined || "não encontrado") // "não encontrado"
console.log(null      || "não encontrado") // "não encontrado"

Originalmente postado em https://thayto.com dia 31 de outubro de 2022.

Turbinando seu git bash (Windows) adicionando aliases (como se fosse o git plugin do zsh)

Rafael Thayto — Sun, 23 Oct 2022 18:55:46 +0000

Nesse guia simples vou mostrar como turbinar o seu git bash com aliases que vão facilitar e agilizar muito na hora de fazer seus commits, pulls, pegarem logs, trocarem de branch, rebases, merges, etc..

Primeiro pra quem não conhece o famoso plugin de git do zsh é esse: zsh git plugin

Bom o primeiro passo para adicionar esses aliases é você ter o git bash instalado.

E para adicionar os aliases é bem simples basta acessar a pasta onde estão os profiles do git bash (lembrando que esse guia é somente para Windows), que vai estar no seguinte caminho: C:\Program Files\Git\etc\profile.d

Depois você vai procurar o arquivo aliases.sh e abrir no seu editor de texto preferido (pode até ser o notepad) e adicionar as seguintes linhas:

alias g=git
alias ga='git add'
alias gaa='git add --all'
alias gam='git am'
alias gama='git am --abort'
alias gamc='git am --continue'
alias gams='git am --skip'
alias gamscp='git am --show-current-patch'
alias gap='git apply'
alias gapa='git add --patch'
alias gapt='git apply --3way'
alias gau='git add --update'
alias gav='git add --verbose'
alias gb='git branch'
alias gbD='git branch -D'
alias gba='git branch -a'
alias gbd='git branch -d'
alias gbda='git branch --no-color --merged | command grep -vE "^([+*]|\s*($(git_main_branch)|$(git_develop_branch))\s*$)" | command xargs git branch -d 2>/dev/null'
alias gbl='git blame -b -w'
alias gbnm='git branch --no-merged'
alias gbr='git branch --remote'
alias gbs='git bisect'
alias gbsb='git bisect bad'
alias gbsg='git bisect good'
alias gbsr='git bisect reset'
alias gbss='git bisect start'
alias gc='git commit -v'
alias 'gc!'='git commit -v --amend'
alias gca='git commit -v -a'
alias 'gca!'='git commit -v -a --amend'
alias gcam='git commit -a -m'
alias 'gcan!'='git commit -v -a --no-edit --amend'
alias 'gcans!'='git commit -v -a -s --no-edit --amend'
alias gcas='git commit -a -s'
alias gcasm='git commit -a -s -m'
alias gcb='git checkout -b'
alias gcd='git checkout $(git_develop_branch)'
alias gcf='git config --list'
alias gcl='git clone --recurse-submodules'
alias gclean='git clean -id'
alias gcm='git checkout $(git_main_branch)'
alias gcmsg='git commit -m'
alias 'gcn!'='git commit -v --no-edit --amend'
alias gco='git checkout'
alias gcor='git checkout --recurse-submodules'
alias gcount='git shortlog -sn'
alias gcp='git cherry-pick'
alias gcpa='git cherry-pick --abort'
alias gcpc='git cherry-pick --continue'
alias gcs='git commit -S'
alias gcsm='git commit -s -m'
alias gcss='git commit -S -s'
alias gcssm='git commit -S -s -m'
alias gd='git diff'
alias gdca='git diff --cached'
alias gdct='git describe --tags $(git rev-list --tags --max-count=1)'
alias gdcw='git diff --cached --word-diff'
alias gds='git diff --staged'
alias gdt='git diff-tree --no-commit-id --name-only -r'
alias gdup='git diff @{upstream}'
alias gdw='git diff --word-diff'
alias gf='git fetch'
alias gfa='git fetch --all --prune --jobs=10'
alias gfg='git ls-files | grep'
alias gfo='git fetch origin'
alias gg='git gui citool'
alias gga='git gui citool --amend'
alias ggpull='git pull origin "$(git_current_branch)"'
alias ggpur=ggu
alias ggpush='git push origin "$(git_current_branch)"'
alias ggsup='git branch --set-upstream-to=origin/$(git_current_branch)'
alias ghh='git help'
alias gignore='git update-index --assume-unchanged'
alias gignored='git ls-files -v | grep "^[[:lower:]]"'
alias git-svn-dcommit-push='git svn dcommit && git push github $(git_main_branch):svntrunk'
alias gk='\gitk --all --branches &!'
alias gke='\gitk --all $(git log -g --pretty=%h) &!'
alias gl='git pull'
alias glg='git log --stat'
alias glgg='git log --graph'
alias glgga='git log --graph --decorate --all'
alias glgm='git log --graph --max-count=10'
alias glgp='git log --stat -p'
alias glo='git log --oneline --decorate'
alias globurl='noglob urlglobber '
alias glod='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ad) %C(bold blue)<%an>%Creset'\'
alias glods='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ad) %C(bold blue)<%an>%Creset'\'' --date=short'
alias glog='git log --oneline --decorate --graph'
alias gloga='git log --oneline --decorate --graph --all'
alias glol='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ar) %C(bold blue)<%an>%Creset'\'
alias glola='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ar) %C(bold blue)<%an>%Creset'\'' --all'
alias glols='git log --graph --pretty='\''%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%ar) %C(bold blue)<%an>%Creset'\'' --stat'
alias glp=_git_log_prettily
alias gluc='git pull upstream $(git_current_branch)'
alias glum='git pull upstream $(git_main_branch)'
alias gm='git merge'
alias gma='git merge --abort'
alias gmom='git merge origin/$(git_main_branch)'
alias gmtl='git mergetool --no-prompt'
alias gmtlvim='git mergetool --no-prompt --tool=vimdiff'
alias gmum='git merge upstream/$(git_main_branch)'
alias gp='git push'
alias gpd='git push --dry-run'
alias gpf='git push --force-with-lease'
alias 'gpf!'='git push --force'
alias gpoat='git push origin --all && git push origin --tags'
alias gpr='git pull --rebase'
alias gpristine='git reset --hard && git clean -dffx'
alias gpsup='git push --set-upstream origin $(git_current_branch)'
alias gpu='git push upstream'
alias gpv='git push -v'
alias gr='git remote'
alias gra='git remote add'
alias grb='git rebase'
alias grba='git rebase --abort'
alias grbc='git rebase --continue'
alias grbd='git rebase $(git_develop_branch)'
alias grbi='git rebase -i'
alias grbm='git rebase $(git_main_branch)'
alias grbo='git rebase --onto'
alias grbom='git rebase origin/$(git_main_branch)'
alias grbs='git rebase --skip'
alias grep='grep --color=auto --exclude-dir={.bzr,CVS,.git,.hg,.svn,.idea,.tox}'
alias grev='git revert'
alias grh='git reset'
alias grhh='git reset --hard'
alias grm='git rm'
alias grmc='git rm --cached'
alias grmv='git remote rename'
alias groh='git reset origin/$(git_current_branch) --hard'
alias grrm='git remote remove'
alias grs='git restore'
alias grset='git remote set-url'
alias grss='git restore --source'
alias grst='git restore --staged'
alias grt='cd "$(git rev-parse --show-toplevel || echo .)"'
alias gru='git reset --'
alias grup='git remote update'
alias grv='git remote -v'
alias gsb='git status -sb'
alias gsd='git svn dcommit'
alias gsh='git show'
alias gsi='git submodule init'
alias gsps='git show --pretty=short --show-signature'
alias gsr='git svn rebase'
alias gss='git status -s'
alias gst='git status'
alias gsta='git stash push'
alias gstaa='git stash apply'
alias gstall='git stash --all'
alias gstc='git stash clear'
alias gstd='git stash drop'
alias gstl='git stash list'
alias gstp='git stash pop'
alias gsts='git stash show --text'
alias gstu='gsta --include-untracked'
alias gsu='git submodule update'
alias gsw='git switch'
alias gswc='git switch -c'
alias gswd='git switch $(git_develop_branch)'
alias gswm='git switch $(git_main_branch)'
alias gtl='gtl(){ git tag --sort=-v:refname -n -l "${1}*" }; noglob gtl'
alias gts='git tag -s'
alias gtv='git tag | sort -V'
alias gunignore='git update-index --no-assume-unchanged'
alias gunwip='git log -n 1 | grep -q -c "\-\-wip\-\-" && git reset HEAD~1'
alias gup='git pull --rebase'
alias gupa='git pull --rebase --autostash'
alias gupav='git pull --rebase --autostash -v'
alias gupom='git pull --rebase origin $(git_main_branch)'
alias gupomi='git pull --rebase=interactive origin $(git_main_branch)'
alias gupv='git pull --rebase -v'
alias gwch='git whatchanged -p --abbrev-commit --pretty=medium'
alias gwip='git add -A; git rm $(git ls-files --deleted) 2> /dev/null; git commit --no-verify --no-gpg-sign -m "--wip-- [skip ci]"'

Pronto! Agora você pode ser mais feliz utilizando o git de forma mais ágil e escrevendo bem menos com esses aliases! :D

Originalmente postado em https://thayto.com dia 23 de outubro de 2022.

Como configurar o deploy do Turborepo no Netlify

Rafael Thayto — Tue, 21 Jun 2022 15:14:48 +0000

Hello, hello devs e divas! 😎

Um dia desses passei por uma dificuldade que foi fazer o deploy de uma aplicação minha utilizando Turborepo com Next.js e como acredito que mais pessoas possam ter esse problema, resolvi fazer um guia de como fazer as configurações iniciais, bora lá?

Setup / Configurações iniciais

Bom primeiro vamos começar com o básico mesmo, criar uma aplicação utilizando o Turborepo, que é bem simples, basta você executar esse comando abaixo no terminal :)



npx create-turbo@latest

E aí provavelmente vai aparecer algo do tipo:



Need to install the following packages:
  create-turbo@1.2.16
Ok to proceed? (y)

Basta você apertar enter ⏎ ou y que ele vai baixar essa dependência pra você poder criar o projeto de uma forma bem mais simples. Logo após vai algo parecido com isso:



>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Where would you like to create your turborepo? (./my-turborepo)

E nesse caso eu apertei enter ⏎ pra ele usar esse nome padrão mesmo. Depois ele vai pedir pra você utilizar o package manager de sua preferência:



? Which package manager do you want to use? (Use arrow keys)
❯ npm
  pnpm
  yarn

Eu escolhi o npm mesmo pra facilitar a vida de vocês :D

Após tudo isso provavelmente na tela de vocês vai ter algo assim:



>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Where would you like to create your turborepo? ./my-turborepo
? Which package manager do you want to use? npm

>>> Creating a new turborepo with the following:

 - apps/web: Next.js with TypeScript
 - apps/docs: Next.js with TypeScript
 - packages/ui: Shared React component library
 - packages/eslint-config-custom: Shared configuration (ESLint)
 - packages/tsconfig: Shared TypeScript `tsconfig.json`

>   Installing dependencies...

E por fim vai estar tudo instalado lindamente e a gente vai poder ir pra parte que interessa. 😎.

Vamos abrir a pasta com nosso editor de código preferido (no meu caso é o VSCode) e quando a gente abrir a gente vai ter algo parecido com isso na estrutura de pastas:

Criando arquivo de configuração do Netlify

Após verificar que está tudo certo, vamos criar um arquivo chamado netlify.toml dentro do ./apps/web

E dentro do netlify.toml vamos colocar o seguinte código:



[build]
  command = "cd ../.. && npm install && npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Tá, mas pra que isso?

Bom, isso é basicamente o arquivo de configuração que o Netlify olha antes de fazer o deployment.

O [build] é a etapa que o Netlify olha para saber como vai fazer o build
O [[plugins]] é a etapa que antes de fazer o build ele instala alguns plugins que vão facilitar o deployment internamente. No nosso caso é de extrema importância adicionar o plugin do Next.js para não termos nenhuma complicação na hora dele criar o cache interno e utilizar o SSR e Edge Functions do Next.

Após isso configurado a gente vai fazer um commit no nosso repo para que a gente possa subir em um repo no GitHub e fazer o deploy em si. Nesse commit abaixo reparem que estou utilizando uma convenção famosa para commits que é o conventional commits coloquem um comentário caso queiram que eu traga algo relacionado a padrões de commit :)



git add .
git commit -m "build(web): adding Netlify configuration file"

Já feito o commit agora precisamos criar um repo no GitHub para settarmos o remote e podermos dar push

Aqui eu criei o repo com o nome netlify-turborepo-post mas vocês podem dar o nome que preferirem.

Após isso vai abrir a tela do GitHub mostrando algo tipo assim

Vocês vão copiar a parte de baixo já que já temos um repo existente

E depois vocês vão colar no terminal do nosso projeto, rodar os comandos e voilá ✨, temos agora o nosso código dentro do GitHub

Bom... depois de ter criado e subido nosso código no GitHub, agora podemos ir pro Netlify fazer a última etapa 😁!

Deployando site no Netlify

Abram a conta de vocês no Netlify, depois clickem no Add new site

Selecionem a opção Import an existent project

Selecionem o provider do GitHub

Pesquisem o nome que deram ao projeto de vocês

Depois coloquem essas configurações no Basic build settings

Aí é só clicar em deploy e aguardar 😎...
Após alguns minutos o site de vocês já vai estar deployado no Netlify lindamente 😁🎆.

Porém ele vai ter essa cara feia aqui, masssssss... aí pra alterar isso é por conta de vocês!

Link do deploy: https://thayto-netlify-turborepo-post.netlify.app/
Link do repositório no GitHub: https://github.com/rafa-thayto/netlify-turborepo-post

Originalmente postado em https://thayto.com dia 21 de junho de 2022.