As vezes fazendo um blog ou site a gente acha que tomou a melhor decisão mas ai você acorda a noite e pensa que talvez não foi a melhor solução e enquanto não responder se foi ou não com toda certeza desse universo, você não dorme, que foi o meu caso.

![finally go to bed start dreaming about coding](/assets/img/quando-usar-ssg-vs-ssr-no-next-js-uma-duvida-sincera-para-um-caso-real/finallycotobed.jpg "finally go to bed start dreaming about coding")

## A Dúvida Inicial

Minha confusão começou depois que já estavam prontas as páginas e suas rotas para categorias e tags dos posts. Eu tinha duas rotas principais:

```
src/pages/posts/category/[category].tsx
src/pages/posts/tag/[tag].tsx
```

E a grande questão era: usei SSR (Server-Side Rendering) para ambas, foi a melhor estratégia?

> *Antes de mais nada estou usando NextJS 14.2 com Pages Router, até porque SSR e SSG não é uma preocupação no App Router.*

## Entendendo o Cenário

Para saber se tomei a decisão certa, precisei responder três perguntas fundamentais:

1. **Com que frequência as categorias e tags mudam?**

   * Categorias: São fixas, não mudam
   * Tags: São dinâmicas e podem ser infinitas
2. **Quantas categorias e tags existem?**

   * Categorias: Apenas 5 tipos fixos
   * Tags: Quantidade ilimitada
3. **Como funciona a navegação?**

   * Quando clicamos em uma categoria ou tag, somos direcionados para uma página que lista todos os posts relacionados
   * Exemplo: `/posts/category/rock` ou `/posts/tag/jazz`

## A Solução

Talvez para Tags foi uma boa ideia, pelo volume de tags, mas pra categories....E depois de analisar bem o cenário, chegamos à seguinte conclusão:

### Para Categorias: SSG (Static Site Generation)

```typescript
// pages/posts/category/[category].tsx
export async function getStaticPaths() {
  // Como são apenas 5 categorias fixas
  const categories = ['rock', 'jazz', 'classical', 'pop', 'electronic']
  
  return {
    paths: categories.map(category => ({
      params: { category }
    })),
    fallback: false // Não precisamos de fallback
  }
}

export async function getStaticProps({ params }) {
  const posts = await getPostsByCategory(params.category)
  
  return {
    props: {
      posts,
      category: params.category
    },
    revalidate: 3600 // Regera a cada hora
  }
}
```

**Por quê?**

* São apenas 5 categorias fixas
* As categorias não mudam
* Melhor performance
* Menor custo de servidor
* Ótimo para SEO

### Para Tags: SSR (Server-Side Rendering)

```typescript
// pages/posts/tag/[tag].tsx
export async function getServerSideProps({ params }) {
  const posts = await getPostsByTag(params.tag)

  return {
    props: {
      posts,
      tag: params.tag
    }
  }
}
```

**Por quê?**

* Número ilimitado de tags
* Novas tags podem ser adicionadas a qualquer momento
* Precisa ser dinâmico
* Não faz sentido gerar páginas estáticas para todas as possibilidades

## Dicas Práticas

1. **Para Categorias (SSG)**

   * Use `getStaticProps` com `getStaticPaths`
   * Defina `fallback: false` já que as categorias são fixas
   * Considere usar `revalidate` se quiser atualizar a lista de posts periodicamente
2. **Para Tags (SSR)**

   * Use `getServerSideProps`
   * Não precisa se preocupar com paths predefinidos
   * Mantenha um bom cache no servidor para melhorar performance

## Bônus: Teste seu conhecimento! 🤔

### A Pergunta do Milhão 🌽
Para a página de `pages/posts/[slug].tsx` usaremos SSG ou SSR? Pensa antes de responder...

<details>
 <summary>👉 CLIQUE AQUI PARA A RESPOSTA</summary>
 
 Se você respondeu SSG (e ISR junto), você tá correto! 🎉
 
 **Por quê?**
 - Posts geralmente são conteúdo estático
 - Com ISR, podemos regenerar páginas quando novos posts são adicionados
 - Não precisa regenerar todas as páginas quando um novo post é criado
 - Melhor performance para o usuário
 - Ótimo para SEO
 - Menor custo de infraestrutura (comparado a SSR)

 **Código de exemplo:**
 ```typescript
 // pages/posts/[slug].tsx
 export async function getStaticPaths() {
   const posts = await getAllPosts()
   
   return {
     paths: posts.map(post => ({
       params: { slug: post.slug }
     })),
     fallback: 'blocking' // Importante para ISR: permite gerar novas páginas sob demanda
   }
 }

 export async function getStaticProps({ params }) {
   const post = await getPostBySlug(params.slug)
   
   return {
     props: {
       post
     },
     revalidate: 3600 // ISR: regenera a cada hora se necessário
   }
 }
 ```

 **Benefícios do ISR neste caso:**
 - Páginas existentes continuam estáticas e rápidas
 - Novos posts são gerados automaticamente quando acessados
 - Atualiza periodicamente sem precisar fazer novo build
 - Melhor equilíbrio entre performance e conteúdo atual
</details>

## Conclusão

A chave é entender bem o seu caso de uso. No nosso cenário:

* Categorias são previsíveis e limitadas → SSG
* Tags são dinâmicas e ilimitadas → SSR

Esta combinação nos dá o melhor dos dois mundos: páginas ultra rápidas para navegação por categorias e flexibilidade total para tags.

## Recursos Úteis

* [Documentação do Next.js sobre SSG](https://nextjs.org/docs/basic-features/data-fetching/get-static-props)
* [Documentação do Next.js sobre SSR](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)

Espero que este artigo ajude você a tomar a melhor decisão para o seu projeto! Se ficou alguma dúvida, manda nos comentários! 😉


Hoje acordei com uma dúvida que tive durante o desenvolvimento do site de um cliente: quando usar Server-Side Rendering (SSR) e quando usar Static Site Generation (SSG) no Next.js?

Quando usar SSG vs SSR no Next.js: Uma dúvida sincera para um caso real


## O que é GraphQL e por que está bombando?

Já falei sobre no post anterior mas se você não leu imagina só: você tá num buffet self-service top da cidade (para quem é de Porto Alegre esses tão escassos hoje em dia). Em vez de pegar aquele prato feito que vem com um monte de coisa que você nem come (como acontece às vezes com APIs REST), você monta exatamente o que quer comer. Style, né? Pois é assim que funciona o GraphQL. Você pede só os dados que precisa, nada a mais, nada a menos. Resultado? Seu site fica mais rápido e você economiza dados. Todo mundo sai ganhando!

## WPGraphQL: Quando o WordPress entra na dança

Agora, pensa no seu site WordPress. Tem post, página, comentário, usuário... uma porrada de coisa. Já falamos também no outro artigo, que o WPGraphQL é um plugin que traz toda essa mágika 🪄 do GraphQL pro WordPress.

## Edges e Nodes: Os inseparáveis do GraphQL

Quando a gente começa a brincar com WPGraphQL, logo esbarra em dois conceitos: edges e nodes. Parece complicado, mas é mais simples do que parece:

- **Nodes**: São os dados mesmo. Um post, um comentário, um usuário. É a informação que você quer pegar.
- **Edges**: É o caminho pra chegar nessa informação. Parece desnecessário, mas pelo visto não é pois::: paginação e metadados.

É tipo uma árvore genealógica. Os nodes são as pessoas, e as edges são as linhas que conectam elas.

## Na prática, como fica?

Vamos ver um exemplo rapidinho de como buscar posts no WPGraphQL:

```graphql
query {
  posts(first: 5) {
    edges {
      node {
        title
        excerpt
      }
    }
  }
}
```

Aqui a gente tá pedindo os 5 primeiros posts, mas só o título e o resumo de cada um. Simples, né?

## Quando usar cada coisa?

- **Lista simples**: Quando você só quer uma lista rápida e direta, sem frescura.
- **Só Nodes**: Útil pra quando você quer paginar, mas não precisa de informações extras sobre cada item.
- **Edges e Nodes**: O pacote completo. Ideal pra quando você precisa de paginação avançada ou metadados sobre cada item da lista.

# Descomplicando o GraphQL no WordPress: Minha Experiência com WPGraphQL

[Conteúdo anterior permanece o mesmo...]

## Quando usar cada coisa?

Galera, vamos ver na prática quando usar cada tipo de estrutura. Colei aqui uns exemplos pra ficar mais fácil de entender:

1. **Lista simples**: Quando você só quer uma lista rápida e direta, sem frescura.

Exemplo: Pegar o nome e o slug das 5 primeiras categorias.

```graphql
query {
  categories(first: 5) {
    name
    slug
  }
}
```

Sacou? Direto ao ponto, sem edges nem nodes. Só o que a gente precisa.

2. **Só Nodes**: Útil pra quando você quer paginar, mas não precisa de informações extras sobre cada item.

Exemplo: Buscar os 10 posts mais recentes, com opção de paginação.

```graphql
query {
  posts(first: 10) {
    nodes {
      title
      date
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}
```

Aqui a gente já tá usando paginação, mas ainda tá bem enxuto, sacou?

3. **Edges e Nodes**: O pacote completo. Ideal pra quando você precisa de paginação avançada ou metadados sobre cada item da lista.

Exemplo: Pegar os 5 primeiros posts, incluindo informações sobre a posição de cada post na lista.

```graphql
query {
  posts(first: 5) {
    edges {
      node {
        title
        excerpt
      }
      cursor
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}
```

Bem chic né?! Agora temos o 'cursor' pra cada post, que é aquela informação extra que falei. Dá pra fazer umas mágicas de paginação avançada com isso.

No WPGraphQL, você vai ver muito o uso de edges e nodes. Pode parecer exagero às vezes, mas essa padronização parece facilitar muito quando o projeto cresce.

## Concluindo...

GraphQL e WPGraphQL podem parecer um bicho de sete cabeças no começo, mas quando a ficha cai, você vê o tanto de possibilidades que se abrem. É uma ferramenta poderosa que dá mais controle e eficiência pro seu desenvolvimento.

Escrevi esse artigo porque é algo que estava nas minhas anotações dessa seman e to tentando colocar mais ideias e pesquisas minhas aqui.

Tem alguma experiência pra compartilhar ou dúvida pra tirar? Comenta aí embaixo! Vamos trocar uma ideia e aprender juntos.

Falou, jovens! Boa semana!


Você tá consumindo um endpoint GraphQL e retorno tem "edges" e "node". Você tá fornecendo uma estrutura JSON limpa pra consulta e parece que o WPGraphQL está poluindo seus dados sem nenhum benefício óbvio aparente. E se pergunta por que esses termos estão incluídos na resposta do endpoint GraphQL e se é possível se livrar deles para um retorno mais simples de dados??

Descomplicando o GraphQL no WordPress: qual é o significado de "edges" e "node"?


E aí, galera! Tô aqui pra contar uma parada bem louca que rolou comigo recentemente. Vocês não vão acreditar!

- Como eu decidi se valia a pena entrar nessa roubada (spoiler: tá indo!)
- A inspiração que me levou pro caminho do WordPress headless
- O que é WordPress headless e por que é uma boa
- As opções pra fazer o WordPress virar headless: REST API vs WPGraphQL
- As vantagens do WPGraphQL e por que eu escolhi ele

Se você já se viu numa saia justa parecida, ou só tá curioso pra saber como foi, cola aqui! Vamos trocar uma ideia sobre como a gente pode se virar nos trinta quando aparece um projeto fora da nossa zona de conforto.

Bora lá?

## Como eu decidi se valia a pena entrar nessa roubada

Então, galera, é o seguinte: caiu no meu colo um cliente, vamos chamar ele de _N_, que tem um site/blog com mais de 15 anos de postagens e muitos acessos diários. Eu já atendia eles faz um tempo pra umas coisinhas pequenas, mas a ideia de desenvolver um novo site, que já tava sem atualização há anos, tava sempre no ar.

As negociações começaram em fevereiro de 2024, mas o projeto só começou a rolar mesmo há alguns meses. E aí vem o pepino: o site todo era WordPress. Pra quem não manja, WordPress é "um programa de código aberto que você pode usar pra criar um site, blog ou aplicativo bem legal sem muito sofrimento".

Meu único contato com WordPress foi lá na adolescência, quando eu tinha um blog pra escrever minhas noias. Migrei pra lá depois de deletar sem querer meu Blogspot (sim, foi muito clicar sem ler, achei que tava fazendo backup, quase chorei). Depois que virei desenvolvedor, sempre ouvi falar de WP e sei que grande parte da web ainda usa ele. Pelo menos 80% da web roda em PHP (pra nossa tristeza, né? kkkkk). Mentira, respeito PHP, sempre vou respeitar coisas sólidas.

Então, por que raios eu aceitei esse desafio? Simples: porque eu posso e tenho um "probleminha" na cabeça onde tô constantemente me desafiando. Já me ferrei muito por isso, mas faz parte do aprendizado, né?

## O desafio: WordPress Headless

No fim das contas, decidimos que poderíamos ficar com WordPress, mas também tentar migrar pra uma stack nova. Aí que o bicho pegou: como fazer essa comunicação se vamos manter o WP como CMS (Content Management System) e fazer um site à parte?

O requisito era: "não podemos perder essa base de dados". E eu também não queria fazer uma migração pra outro lugar, o que ia deixar tudo mais caro pro cliente e dar mais trabalho pra mim.

Aí me veio uma ideia maluca: e se a gente usasse o WordPress como headless? Pois é, galera, tô falando de WordPress headless! Mas calma aí, vou explicar melhor essa parada.

## A inspiração: Strapi e CMS Headless

Antes de seguir, deixa eu contar uma história que me ajudou a chegar nessa solução. Em 2021, um brother meu, o @felipe marcolin, me falou sobre um tema que ficou martelando na minha cabeça. Ele mencionou o Strapi, que é um "CMS headless de última geração, de código aberto e javascript, que permite que experiências ricas em conteúdo sejam criadas, gerenciadas e expostas a qualquer dispositivo digital."

Achei a ideia tão foda que fui atrás de um curso pra aprender mais. Acabei caindo num curso do William Justen em 2022. Esse cara é brabo e muito didático, um diferencial na comunidade. Lá aprendi mais sobre Strapi e sobre a melhor versão do app. Hoje em dia, na v4, eu não curto tanto porque eles fecharam muito o opensource e não dá pra customizar tanto, mas ainda é uma solução animal pra colocar rápido em produção.

E aí que tá a sacada: um CMS headless é basicamente um sistema de gerenciamento de conteúdo da web só de backend, que funciona principalmente como um repositório de conteúdo. Isso me fez pensar: será que dá pra fazer isso com WordPress?

## WordPress headless: o que é isso?

![Arquitetura de como o WordPress headless funciona.](https://kinsta.com/wp-content/uploads/2023/11/headless-cms-arcitecture.png "Arquitetura de como o WordPress headless funciona. (https://kinsta.com/pt/blog/wpgraphql-e-wp-rest-api/)")

Então, o WordPress normal não é um CMS headless de cara. Ele é aquele CMS que todo mundo conhece, fácil de usar e flexível pra criar e gerenciar conteúdo. Mas tradicionalmente, ele mistura o gerenciamento de conteúdo com a forma de apresentar esse conteúdo, tudo num pacote só.

Mas aí os developers malucos criaram o tal do WordPress headless usando a API REST dele. Nesse esquema, o WordPress continua sendo o CMS onde você cria, gerencia e guarda o conteúdo. A diferença é que, em vez de mostrar o site direto pelos templates e temas do WordPress, a parte do frontend fica separada do backend.

Isso permite que a gente construa aplicativos usando tecnologias e frameworks diferentes, mas ainda aproveitando as paradas legais de gerenciamento de conteúdo do WordPress. É um jeito de fazer o WordPress funcionar mais como headless, mesmo não sendo a configuração padrão.

## As opções: REST API vs WPGraphQL

### REST API do WordPress

A API REST é tipo o coringa do WordPress. Desde a versão 4.7, ela já vem embutida e não precisa de plugin nenhum pra funcionar. Com ela, você consegue pegar os dados do seu site no formato JSON.

Pra usar, é só adicionar /wp-json ao URL do site:

```
http://seusite.com/wp-json
```

Daí você tem endpoints pra posts, páginas, comentários, mídia e por aí vai. Por exemplo:

```
http://seusite.com/wp-json/wp/v2/posts
http://seusite.com/wp-json/wp/v2/comments
http://seusite.com/wp-json/wp/v2/media
```

### WPGraphQL

Agora, se você quer uma parada mais moderna e eficiente, tem o WPGraphQL. É um plugin baseado em GraphQL que permite fazer consultas mais precisas e personalizadas.

![Plugin WpGraphQL no mercado do WP.](https://kinsta.com/wp-content/uploads/2023/11/wpgraphql-plugin.png "Plugin WpGraphQL no mercado do WP.")

![Obtenha dados de artigos do WordPress com o WPGraphQL.](https://kinsta.com/wp-content/uploads/2023/11/testing-graphql-wp.jpg "Obtenha dados de artigos do WordPress com o WPGraphQL.")

Com o WPGraphQL, você tem um único endpoint e pode pedir exatamente os dados que precisa, sem ficar pegando um monte de coisa que não vai usar. Por exemplo:

```graphql
{
  post(id: "123") {
    title
    content
    comments {
      edges {
        node {
          content
        }
      }
    }
  }
}
```

Nesse exemplo, a gente tá pegando o título, conteúdo e comentários de um post específico, tudo numa tacada só!

## As vantagens do WPGraphQL

Galera, deixa eu falar mais sobre o WPGraphQL, porque essa parada é muito massa:

1. Endpoint único pra recuperação precisa de dados: Com o WPGraphQL, você tem um endpoint unificado, tipo `/graphql`, que te permite pegar exatamente os dados que você precisa. É bem diferente da API REST, onde você precisa fazer várias chamadas pra pegar tudo que quer.

2. Consultas direcionadas pra uma recuperação eficiente: Com o GraphQL, você pode criar consultas específicas pro que você precisa. Isso evita que você pegue um monte de dado que não vai usar. Por exemplo:

```graphql
{
  posts {
    title
    date
    author {
      name
    }
  }
}
```

Nessa consulta, a gente tá pegando só o título, a data e o nome do autor dos posts. Nada de informação extra que a gente não vai usar!

3. Vários recursos raiz: No WPGraphQL, você pode consultar vários recursos de uma vez só. Tipo, você pode pegar posts e páginas numa única consulta:

```graphql
{
  posts {
    edges {
      node {
        title
        content
      }
    }
  }

  pages {
    edges {
      node {
        title
        content
      }
    }
  }
}
```

Isso deixa tudo mais rápido e eficiente.

## Qual escolher?

Bom, galera, a escolha entre REST API e WPGraphQL vai depender do que você precisa pro seu projeto. Se quer uma solução já integrada no WordPress, vai de REST API. Se quer algo mais moderno e eficiente, o WPGraphQL pode ser uma boa.

No fim das contas, o importante é escolher a ferramenta que melhor se encaixa no seu fluxo de trabalho e nas metas do projeto. Assim você garante uma integração suave entre o WordPress e o framework de frontend que você escolher.

No meu caso, acabei optando pelo WPGraphQL pra fazer a POC (Proof of Concept) pro nosso cliente N. A ideia era usar o WordPress como backend pra alimentar nosso frontend em Next.js, que a gente escolheu pra ajudar no SEO, que era o grande foco do projeto.

E aí, o que acharam dessa lourada? Já passaram por algo parecido? Conta aí nos comentários! Até a próxima, galera!


Imagina que você conseguiu um cliente e esse cliente tem um site wordpress, mas você não trabalha com wordpress e ainda assim quer fechar o contrato, o que você faz? Bom, foi o que aconteceu comigo e pode acontecer com você, então nesse post vamos conversar um pouco sobre esse estudo de caso.

Lidando com projetos WordPress quando você não é especialista: WPGraphQL ou REST API para Headless WordPress


## `vs` Questions

---

1. <http://stackoverflow.com/questions/804115> (`rebase` vs `merge`).
2. <https://www.atlassian.com/git/tutorials/merging-vs-rebasing> (`rebase` vs `merge`)
3. <https://www.atlassian.com/git/tutorials/undoing-changes/> (`reset` vs `checkout` vs `revert`)
4. <http://stackoverflow.com/questions/2221658> (HEAD^ vs HEAD~) (See `git rev-parse`)
5. <http://stackoverflow.com/questions/292357> (`pull` vs `fetch`)
6. <http://stackoverflow.com/questions/39651> (`stash` vs `branch`)
7. <http://stackoverflow.com/questions/8358035> (`reset` vs `checkout` vs `revert`)
8. <http://stackoverflow.com/questions/5798930> (`git reset` vs `git rm --cached`)

## GENERAL QUESTIONS

---

1. http://stackoverflow.com/questions/5788037 (Recover from `git reset --hard`).
2. http://stackoverflow.com/questions/1146973/ (Revert all local changes to previous state)
3. http://effectif.com/git/recovering-lost-git-commits (Recovering lost commit)
4. https://stackoverflow.com/questions/79165 (Migrating from SVN)
5. https://davidwalsh.name/squash-commits-git (Combining multiple commits into one using `git rebase`).
6. https://stackoverflow.com/questions/1425892 (Merging two git repo)

## WEBSITES REFERENCE

---

1. http://gitready.com/ (Git Tips and Tricks with explanation)
2. https://github.com/git-tips/tips (Repo for most common git tips)
3. http://gitimmersion.com/ (Small Online Book)
4. http://think-like-a-git.net/
5. http://www.ohshitgit.com (Take a look)
6. https://github.com/nvie/gitflow (Alternative branch model for git.)
7. https://github.com/magit/magit (Git GUI for Emacs).

## FAST GIT REFERENCE

---

1. First download the cheetsheat from official: http://git-scm.com
2. For starters and intermediate, focus on only these commands:

   - Configuring : `config, help`.
   - Creating : `init, clone`.
   - Make Changes: `status, diff, add, commit, reset, rm, mv (not important)`.
   - Branching & Merging: `branch, checkout, merge, stash`
   - Review History: `log, tag, diff, show`
   - Update and Publish: `fetch, pull, push, remote`.
   - Very Imp: `reflog` . http://effectif.com/git/recovering-lost-git-commits

3. Commands that are not in official cheatsheet (and advanced): `revert, apply, cherry-pick, rebase, clean, show-ref, update-ref, ls-files`

   - Debugging Commands: `bisect, blame`.

4. `git stash` is lightweight alternative to `git branch`.
5. Git has three stages:

   - Committed : means data is safely stored in your local database.
   - Modified : means you've changed the file but not committed.
   - Staged : means you've marked a modified file in its current version to go into your next commit snapshot.

6. Workflow of git:

   - Working Directory: holds the actual files
   - Index: Acts as a staging area. That is, snapshot for next commit. Will be done by `git add` command.
   - HEAD : Points to the last commit (and current branch) you've made.

7. Anything that is committed in Git can almost be recovered. However files which are not committed can't be recovered.
8. Description of Update and Fetch Commands:

   - `remote`: it only manage set of track repositories.
   - `fetch`: You can fetch new work from that remote server after cloning. Not similar to `clone`. You can later merge that repo with your existing with `merge` command.
   - `pull`: Automatically fetch and merge newest commit from remote server to local branch. By default, it combines fetch and merge.
   - `push`: This will push to the remote server from local branch.

9. When you do branch switching, files in your working directory will change to match that branch.
10. Using `git reflog` you can get back your destroyed commit (done via `git reset --hard`) using either

    - `git checkout -b newBranchName <shaViaReflog>`
    - `git reset --hard <shaViaReflog>`
      But use it in rare cases, because you reflog keep state via sha and it's hard to see which sha belongs to specific commit.

11. `git cherry-pick` is a low level version of `rebase`.
12. For advanced user who want to explore more, see [gitflow](https://github.com/nvie/gitflow). A Git extensions for creating repo operations using different branch model.

### GIT TIPS AND SHORTCUTS

---

Most used commands are: `init, clone, status, log, add, commit, reset, rm, branch, checkout, merge, stash`

```bash
    ## -- Initializing a new git repository
        $$ git init

    ## -- Useful git log commands
        $$ git log --oneline        ## print short sha in one line
        $$ git log -3               ## show only first 3 commit
        $$ git log --author="John"  ## show commits only by this author


    ## -- Cloning a git repository
    ## The other protocols are: ssh, ftp, file://, http(s):// etc...
        $$ git clone git://github.com/something/foo.git

    ## -- Show the status of file
        $$ git status -s  # in short format

    ## -- Add the file to staging area.
        $$ git add foo.js bar.js   ## `--` is used to seperate files from `add` options.
        $$ git add .    # add all the files

    ## -- Show what have changed since you last commit
        $$ git diff  ## with a `--cached` option, show the changes that will go into the next commit snapshot.

    ## -- Commit the changes after you add the files to staging area
        $$ git commit -m 'with an inline message'

    ## -- Auto-commit and track changes to modified file.
    ## NOTE: The files you've not added doesn't track by commit with `-a` command.
        $$ git commit -a -m 'with an inline message'

    ## -- Ammend last commit (i.e, merge to previous commit)
    ## https://nathanhoad.net/git-amend-your-last-commit
    ## After doing `git add .`
        $$ git commit --amend   # alternate is `git reset --soft HEAD~`.
        ## amend a commit without changing previous message
        $$ git commit --amend --no-edit


    ## -- Unstage file from the index only.  See `git reset` also.
    ## NOTE: `git rm` without `--cached` will simply remove the file from both index and working directory.
        $$ git rm --cached  # exact opposite of git add.

    ## -- Throw away local changes after commit (Use with caution)
        $$ git checkout <file>
        # if the branch name and file name are same, then do this
        $$ git checkout -- <file>
        ## for all changes (it's perfect for time travel on previous commit)
        $$ git checkout -f # or `git reset --hard` (but previous one is more safer because with that you're in detached state.)


    ## Delete a single entry from git reflog. (git reflog is useful as it keeps 2 months history).
        $$ git reflog delete HEAD@{N}    ## `N`: 1,2 etc... or <sha>

    ## Undo the last commit, but keep the history and adds a new history
    ## http://stackoverflow.com/questions/27032850/ (for `git reset` vs `git revert` with image)
        $$ git revert

    ## -- check where HEAD is
        $$ git show-ref

    ## Remove the initial commit (git reset doesn't work here, it works only after second commit)
    ## http://stackoverflow.com/questions/6632191/how-to-revert-initial-git-commit
        $$ git update-ref -d HEAD


    ## Push a specific branch
        $$ git push origin <mylocalbranch>

    ## -- Detailed explaination of `git reset` (all three options). P.S. Use git checkout for time travel.
    ## http://stackoverflow.com/a/6866485/2092405
    ## NOTE: All the below three options remove log, so if you want to get back to previous state, you can pick
    ## <sha> from git reflog and do git reset on this.
    ## Suppose the structure is
         A-B-C
             ↑ (master)
    ## Then, nuke commit C and never see it again. Do this:
        $$ git reset --hard HEAD~1
        ## the result is:
             A-B
               ↑ (master)
       ## To undo this command, use;
           $$ git reset --hard <newShaOfReflog>  ## or (git reset --hard HEAD@{1})

    ## Undo the last commit, but keep your changes in working directory.
    ## It will delete the index the from git log also and show you untracked and unstaged files:
        $$ git reset HEAD~1  ## move the pointer one index back (or git reset --mixed HEAD~1)
        ## the result is:
        A-B-C
          ↑ (master)
        ## To undo this command, use;
            $$ git reset <newShaOfReflog>  ## or (git reset HEAD@{1})

    ## Undo the last commit, but don't touch the index and working directory.
    ## When you do git status, you'll see that the same files are in the index as before.
    ## In fact, right after this command, you could do `git commit` and you'd be redoing the same commit you just had.
        $$ git reset --soft HEAD~1


    ## Add a changed file to old commit (not last commit). I.E., fix up old commit
    http://stackoverflow.com/a/2719659/2092405

    ## merge a specific commit from one branch to another branch.
        ## make sure you're in the branch where you want merge.
        $$ git cherry-pick <commit-id-of-feature-branch>

    ## Merge two specific commit together (using rebase)
    http://stackoverflow.com/questions/2563632/how-can-i-merge-two-commits-into-one

    ## Modify a specific commit in git
    http://stackoverflow.com/questions/1186535/how-to-modify-a-specified-commit-in-git
    ## if you're getting this error. Needs a single revision. See this: http://stackoverflow.com/questions/26174757/
    ## Option: 2
        $$ git checkout <shaToThatCommit>
        $$ touch newfile.txt
        $$ git add .
        $$ git commit --amend --no-edit
        $$ git rebase --onto HEAD <shaToThatCommit> master  ## it will do automatic git checkout to master branch


    ## Branching and Merging
    ## ---------------------
    ## List out all the branches
        $$ git branch
    ## Create a new branch `testing` at your last commit
        $$ git branch testing
    ## Switch to branch
        $$ git checkout testing
    ## Shortcut to create a new branch and checkout
        $$ git checkout -b newbranch
    ## Delete a branch
        $$ git branch -d testing
    ## Merge the <branch> on the current working branch
    ## Merge tip: If you're doing merge say, from `wip` to `live` branch and you've edit `live` branch files
    ## then it will not undo changed file which is what we want.
    ## Also, merge conflict occurs when same file changed in both branch, you merged. You can reverse the merge conflict
    ## with `--abort` option
        $$ git merge testing    ## this will merge `testing` branch onto current (`master`) branch.
    ## checkout arbitrary commits instead of branch
        $$ git checkout HEAD~2
    ## Undo deleted branch
        $$ git reflog    ## to see the hash code of branch before deletion.
        $$ git checkout <hashcodeFromReflog>  ## to restore, and then create the same branch from there.
```

## Git reset vs Git revert

---

**NOTE**: `git revert` is advanced command and it may accidently delete your files, if you haven't committed.
http://stackoverflow.com/questions/8358035/whats-the-difference-between-git-revert-checkout-and-reset

- Basically `git revert` undo changes with new commit history (i.e., introduce a new commit that reverse the specified one) while `git reset` (with `--hard`) **BEWARE**. Any changes to tracked files in the working tree and index are discarded.
- `git reset` (with `--soft`) option doesn't touch the index file nor working tree. In this case, index file is staged but not committed and right after this command you can use `git commit`.
- `git reset` (with `--mixed`) option reset the index but not the working tree. In this case, index file is not staged, so after this command you have to use `git add` and `git commit`.

## Git rm and Git reset

---

`git rm` remove the file from the index (with `--cached` option).
`git reset` is specifically about updating the index, moving the HEAD.
These two options are `equivalent only when we first add a file`. After that with `git reset` you can move the index while with `git rm --cached`, you completly destroy the index.

## Fix a `head detached from` message

---

See: http://stackoverflow.com/questions/10228760/fix-a-git-detached-head
Summary: Basically checkout the branch using `git checkout branchname`

## Relative Refs

---

https://www.atlassian.com/git/tutorials/refs-and-the-reflog/refspecs
The `~` character lets you reach parent commits. For eg: The following display the grandparent of HEAD:
`git show HEAD~2`. The `~` character will always follow the first parent of a merge commit.
If you want to follow different parent, use `^` character
For eg: If HEAD is the merge commit, then following returns the second parent of HEAD:
`git show HEAD^2`
Some examples:

```sh
    # Only list commits that are parent of the second parent of a merge commit
    $$ git log HEAD^2
    # Remove the last 3 commits from the current branch
    $$ git reset HEAD~3
    # Interactively rebase the last 3 commits on the current branch
    $$ git rebase -i HEAD~3
```

## Git `fetch`, `pull`, `push`, `remote`

---

**NOTE: You can't push to non-bare repository if the branches are same on both remote and local server**
By default updating the current branch with non-bare repo is denied. If you're the only user, you can set git config
`git config --bool core.bare true` and then delete all files except `.git` in remote.
http://stackoverflow.com/a/2933656/2092405
Some common git urls:

```sh
    ssh://[user@]host.xz[:port]/path/to/repo.git/
    git://host.xz[:port]/path/to/repo.git/
    http[s]://host.xz[:port]/path/to/repo.git/
    ftp[s]://host.xz[:port]/path/to/repo.git/
    [user@]host.xz:path/to/repo.git/
    /path/to/repo.git/
    file:///path/to/repo.git/
```

`git pull` is basically shorthand for `git fetch` followed by `git merge FETCH_HEAD`
`git fetch`: Downlaod new data and branches from remote repository
`git push`: Push your new branches to remote repository.
`git remote`: Manage (list, add and delete) remote repository aliases.

1. To push local repository to your server

```sh
    ## On your server (create a bare repository)
    $$ git init --bare repo.git
    ## On local
    $$ git remote add origin ssh://server/var/www/frontend.git
    $$ git push origin master
    ## After that, use:
    $$ cd /var/www/; git init; git clone frontend.git

    ## or alternative way without bare repository
    ## switch to different branch locally
    ## and then on your server
    $$ git init
    ## from local repository
    $$ git push ssh://server/path/to/git otherBranch
    ## then merge the otherBranch to master in remote repository

    ## Shortcut without switching repository
    $$ git remote add origin ssh://server/path/to/git
    $$ git push origin master:someOtherBranch       ## this push from master to `someOtherBranch`.
```

##### END


My git cheatsheet


![TB-303](https://static.roland.com/promos/global_events/303day/tb-303_tr-606.jpg "TB-303")

Era uma vez, em 1981, em uma terra tecnológica de Osaka, no Japão, uma pequena caixa prateada emergiu dos confins criativos da Roland Corporation. Esta não era uma caixa qualquer; era o TB-303, uma criação destinada a substituir o baixista humano para artistas solitários. Desenhado sob a supervisão do engenhoso Tadao Kikumoto, o TB-303 deveria ser o parceiro perfeito para a máquina de ritmos TR-606, unidos pelo revolucionário DIN Sync.

![Tadao Kikumoto](https://static.roland.com/promos/global_events/303day/tadao-kikumoto-hero.jpg "Tadao Kikumoto")

No entanto, o destino tinha outros planos. A tentativa de emular o baixo elétrico não capturou o coração dos músicos, deixando o TB-303 em uma névoa de incompreensão e desinteresse. Com uma produção que cessou rapidamente, o futuro parecia sombrio para esta caixa de sons estranhos.

**A Virada Inesperada: Chicago, 1985**

![Chicago pionners](https://static.roland.com/promos/global_events/303day/303day_phuture_discover.jpg "Chicago Pioneers")

Mas, como em todas as boas narrativas, um plot twist estava à espreita. Na vibrante cena underground de Chicago, uma tribo de visionários musicais, conhecida como Phuture, descobriu esta máquina abandonada. DJ Pierre, Spanky e Herb J não viam um equipamento falho; viam uma tela em branco para a criatividade. Sem manual e sem regras, começaram a experimentar.

Ao torcer os botões do TB-303, transformaram suas falhas em características, seus bipes em batidas. Aqui, nas profundezas da criatividade, nasceu o Acid House, um som que definiria uma era. Com faixas pioneiras como:

1. "Acid Tracks" de Phuture

[![Watch the video](https://articles.roland.com/wp-content/uploads/2021/02/Acidtrax.jpg)](https://youtu.be/igNBeo3QSqc)

2. ‘I’ve Lost Control’ - Sleezy D

[![Watch the video](https://i.discogs.com/SqhdW3Q1VE0Eqae8QGPrD3NBG-uzbtV8R1ZLBKe-I0s/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NTA2/MjktMTIzNDk5NjA0/OC5qcGVn.jpeg)](https://youtu.be/lJnqRCwPeSw)

3. "Can You Feel It" de Mr. Fingers

[![Watch the video](https://i.discogs.com/o0fbDofds6W2j9mPRvWzT39Ycrfkb63P9PP338EbpcQ/rs:fit/g:sm/q:90/h:600/w:599/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTg5NzM2/MDgtMTQ3MjU1OTU2/Mi0xMjczLmpwZWc.jpeg)](https://youtu.be/lYMc4MGA3fE)

O som do TB-303 se tornou sinônimo de uma revolução musical. O TB-303, uma vez um fracasso, agora era a voz de uma nova geração pulsante.

![TB-303 SCHEMATICS](https://static.roland.com/promos/global_events/303day/303day_montage.jpg)

**O Paralelo com o Desenvolvimento de Software**

E aqui, meus amigos, é onde nossa história se cruza com o mundo do desenvolvimento de softwares. O TB-303, em sua essência, reflete a jornada do desenvolvimento de software. Ambos começam com uma intenção clara, mas muitas vezes, é no desvio, na falha, onde a verdadeira inovação é encontrada.

Assim como o TB-303 foi redescoberto e reimaginado, os desenvolvedores frequentemente encontram novas vidas para códigos antigos ou projetos mal entendidos. A flexibilidade, a experimentação e a capacidade de ver além do uso pretendido são qualidades compartilhadas por músicos pioneiros e desenvolvedores de software.

A saga do TB-303 nos ensina que, no coração da inovação, reside a vontade de explorar o desconhecido e redefinir o "fracasso" como um trampolim para o sucesso. No desenvolvimento de software, como na música, a transformação surge não apenas da criação do novo, mas da reinvenção do velho.

Então vamos lembrar da história do TB-303. Que possamos abraçar nossos próprios bipes e falhas por mais estranhos que sejam, pois quem sabe? Talvez estejamos a apenas alguns ajustes de nossa própria revolução.

E assim, a história completa do TB-303, de seu humilde início ao estrelato global, espelha a jornada tumultuada, mas ultimamente triunfante, que muitos desenvolvedores de software enfrentam. Em cada linha de código, como em cada batida do 303, reside a potencial próxima grande virada.

---

Mas a jornada do TB-303 não termina nas pistas de dança dos anos 80; ela se estende até a era digital de hoje, com um renascimento na forma de uma experiência interativa online: o [Roland50.studio](https://roland50.studio).

**Renascimento Digital: Roland50.studio**

No coração deste renascimento está o [Roland50.studio](https://roland50.studio), uma plataforma online criativa que celebra meio século de inovação musical da Roland. Esta plataforma digital é uma homenagem aos dispositivos que moldaram a música como a conhecemos, permitindo que usuários de todo o mundo explorem e interajam com versões virtuais de instrumentos lendários, incluindo, é claro, o icônico TB-303.

![TB-303 IN YOUR BROWSER](https://static.roland.com/promos/global_events/303day/roland_50_studio_303.jpg "TB-303 IN YOUR BROWSER")

A Roland colaborou com o renomado designer de som [Yuri Suzuki](https://www.yurisuzuki.com) para criar uma experiência digital que não apenas emula o som do TB-303, mas também captura o espírito de experimentação que definiu sua história. No Roland50.studio, você pode manipular o TB-303 virtual com o clique de um mouse, torcendo os botões e deslizando os controles deslizantes para criar seu próprio som acid house. É uma ponte entre gerações, conectando a nostalgia dos sons analógicos com a acessibilidade da tecnologia digital.

**O Paralelo com o Desenvolvimento de Software**

Aqui, a história do TB-303 se entrelaça novamente com o desenvolvimento de software. O Roland50.studio é um testemunho do poder da tecnologia moderna para reimaginar o passado, transformando instrumentos físicos em experiências digitais acessíveis. Assim como os desenvolvedores refatoram e melhoram o código antigo para novos usos, o Roland50.studio refatora o TB-303 para a era da internet.

Esta plataforma não é apenas uma ferramenta de criação musical; é uma lição em inovação de software. Mostra como interfaces intuitivas e design centrado no usuário podem tornar a tecnologia avançada acessível a um público mais amplo. Para os desenvolvedores, representa um desafio: como podemos transformar nossos próprios "TB-303s" de software, os projetos esquecidos e mal compreendidos, em algo novo e emocionante para a era digital?

**A Batida Continua**

O Roland50.studio, com seu TB-303 virtual, é uma celebração da inovação contínua. Assim como o TB-303 encontrou uma nova vida nas mãos de DJs e produtores de acid house, agora encontra uma nova expressão na web, inspirando uma nova geração de criadores.

Para os desenvolvedores, a mensagem é clara: a inovação não se trata apenas de criar algo novo, mas também de reimaginar o que já existe. Assim como o TB-303 foi transformado de um fracasso comercial em uma lenda da música eletrônica, os projetos de software podem ser reimaginados para novos propósitos e audiências.

Então, da próxima vez que você visitar o Roland50.studio e brincar com o TB-303 virtual, lembre da jornada deste pequeno sintetizador: de Osaka para o mundo, do esquecimento ao estrelato, e agora, para a nuvem. E lembre, na programação como na música, sempre há espaço para reinvenção e inovação.

\*\*Bônus: Playlist que utilizando o TB-303\*\*

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/37i9dQZF1DX202yvKb0g9m?utm_source=generator&theme=0" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

**Links importantes**

- <https://www.roland.com/uk/promos/303day/>
- <https://www.roland.com/uk/products/tb-03/>


Em celebração ao 303 Day, vamos explorar a incrível jornada do TB-303, um equipamento que não só revolucionou a música eletrônica, mas também se tornou um símbolo de inovação e resiliência fazendo um paralelo com Desenvolvimento de Software.

A Saga do TB-303: Do Esquecimento ao Estrelato Eletrônico


![Evil cowboy](https://res.cloudinary.com/lucaos/image/upload/w_1000,ar_16:9,c_fill,g_auto,e_sharpen/v1708976693/lucaoskaique/DALL_E_2024-02-26_16.21.43_-_Create_an_image_of_a_mischievous_devilish_emoji_character_but_with_a_unique_twist__it_s_wearing_a_cowboy_hat._The_character_should_embody_the_playfu.webp "Evil Cowboy")

Salve, galerinha viciada em JavaScript!

Eu sou Lucas Kaique, seu engenheiro de software dedicado, trazendo mais insights de JavaScript. Hoje, nosso foco está nos atalhos que gosto de chamar de "malicias" de JavaScript, são técnicas que ajudam a deixar seu código mais limpo e eficaz.

Vamos explorar exemplos práticos, alternando entre a abordagem padrão do JavaScript e suas contrapartes abreviadas.

Então, sem mais delongas, vamos aprimorar suas habilidades em JavaScript!

### 1. Arrow Functions ou Funções de Flecha:

**Aplicação:** Definições Simplificadas de Funções

**JavaScript Padrão:**

```javascript
function add(a, b) {
  return a + b
}
```

**Forma Simplificada:**

```javascript
const add = (a, b) => a + b
```

### 2. Template Literals:

**Aplicação:** Junção Dinâmica de Strings

**JavaScript Padrão:**

```javascript
const name = "Lucas Kaique"
const greeting = "Olá, " + name + "!"
```

**Forma Simplificada:**

```javascript
const name = "Lucas Kaique"
const greeting = `Olá, ${name}!`
```

### 3. Desestruturação de Arrays:

**Aplicação:** Troca de Valores entre Variáveis

**JavaScript Padrão:**

```javascript
let a = 5
let b = 10

let temp = a
a = b
b = temp
```

**Forma Simplificada:**

```javascript
let a = 5
let b = 10

;[a, b] = [b, a]
```

### 4. Avaliação de Curto-Circuito:

**Aplicação:** Substituição para Valores Não Definidos ou Nulos

**JavaScript Padrão:**

```javascript
const username = getUsernameFromAPI()
const displayName = username ? username : "Anônimo"
```

**Forma Simplificada:**

```javascript
const username = getUsernameFromAPI()
const displayName = username || "Anônimo"
```

### 5. Valores Padrão para Parâmetros:

**Aplicação:** Definindo Valores Iniciais para Parâmetros de Função

**JavaScript Padrão:**

```javascript
function greet(name) {
  name = name || "Visitante"
  return `Olá, ${name}!`
}
```

**Forma Simplificada:**

```javascript
function greet(name = "Visitante") {
  return `Olá, ${name}!`
}
```

### 6. Abreviação de Propriedades de Objetos:

**Aplicação:** Formação de Objetos com Variáveis

**JavaScript Padrão:**

```javascript
const name = "Lucas Kaique"
const age = 30

const person = {
  name: name,
  age: age
}
```

**Forma Simplificada:**

```javascript
const name = "Lucas Kaique"
const age = 30

const person = {
  name,
  age
}
```

### 7. Operador Ternário:

**Aplicação:** Atribuição Condicional

**JavaScript Padrão:**

```javascript
let isAdmin
if (user.role === "admin") {
  isAdmin = true
} else {
  isAdmin = false
}
```

**Forma Simplificada:**

```javascript
const isAdmin = user.role === "admin"
```

**Versão ainda mais curta:**

```javascript
const isAdmin = user.role === "admin" ? true : false
```

### 8. Operador de Coalescência Nula:

**Aplicação:** Definição de Valores Padrão para Variáveis Nulas ou Não Definidas

**JavaScript Padrão:**

```javascript
const fetchUserData = () => {
  return "Lucas Kaique" // altere para null ou undefined para observar o comportamento
}

const data = fetchUserData()
const username = data !== null && data !== undefined ? data : "Visitante"
```

**Forma Simplificada:**

```javascript
const fetchUserData = () => {
  return "Lucas Kaique" // altere para null ou undefined para observar o comportamento
}

const data = fetchUserData()
const username = data ?? "Visitante"
```

### 9. Desestruturação de Objetos:

**Aplicação:** Extração de Propriedades de Objetos

**JavaScript Padrão:**

```javascript
const user = {
  name: "Lucas Kaique",
  age: 30,
  country: "Brasil"
}

const name = user.name
const age = user.age
const country = user.country
```

**Forma Simplificada:**

```javascript
const user = {
  name: "Lucas Kaique",
  age: 30,
  country: "Brasil"
}

const { name, age, country } = user
```

### 10. Operador Spread:

**Aplicação:** União de Arrays ou Objetos

**JavaScript Padrão:**

```javascript
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const combinedArray = arr1.concat(arr2)
```

**Forma Simplificada:**

```javascript
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const combinedArray = [...arr1, ...arr2]
```

### 11. Atribuição Lógica OR:

**Aplicação:** Definição de Valor Padrão para Variáveis

**JavaScript Padrão:**

```javascript
let count
if (!count) {
  count = 1
}
```

**Forma Simplificada:**

```javascript
let count
count ||= 1
```

### 12. Avaliação de Curto-Circuito para Chamada de Função:

**Aplicação:** Prevenção de Execução Desnecessária de Função

**JavaScript Padrão:**

```javascript
function fetchData() {
  if (shouldFetchData) {
    return fetchDataFromAPI()
  } else {
    return null
  }
}
```

**Forma Simplificada:**

```javascript
function fetchData() {
  return shouldFetchData && fetchDataFromAPI()
}
```

Cabô!!

Implemente essas formas abreviadas em seu código e observe como suas habilidades em JavaScript se expandem.

Até a proxima.


Hoje, nosso foco está nos atalhos que gosto de chamar de "malicias" de JavaScript, são técnicas que ajudam a deixar seu código mais limpo e eficaz.

Dominando as malicias do JavaScript 😈


## Neste artigo, vou te orientar no processo de publicação de um projeto Next.js no Github Pages .

Eu trabalho no [Dev em Dobro](https://www.instagram.com/devemdobro/), uma Edtech cuja missão é ajudar devs iniciantes a se sentirem menos perdidos quando começam a aprender programação. Pensando nisso, frequentemente organizamos eventos gratuitos onde ensinamos a criar um site do zero com HTML, CSS e JavaScript. E no final, mostramos como subir seu site para deixá-lo online utilizando o GitHub Pages.

Se você ainda não conhece, o GitHub Pages é uma plataforma de hospedagem gratuita dentro do GitHub que permite aos usuários publicar sites diretamente a partir de um repositório no GitHub. Isso significa que você pode hospedar seu código-fonte no GitHub e transformá-lo em um site acessível para qualquer pessoa na internet. É uma ótima ferramenta para apresentar seus projetos, portfólios ou até mesmo artigos de blog. Além disso, é bastante popular entre os desenvolvedores devido à sua integração com o GitHub e à facilidade de uso.

Muitos alunos tentam sempre fazer deploy de uma aplicação no GitHub Pages mas não sabem realmente como ele funciona. Muitos alunos tentam sempre fazer deploy de uma aplicação no github pages mas não sabe realmente como ele funciona. Eles tentam fazer o deploy e, quando algo dá errado, ficam frustrados, e vem chorar "ah mas não funciona" 😂. Brincadeiras a parte, mas entender o GitHub Pages é o primeiro passo para o sucesso. Lembre que, ele é destinado para arquivos estáticos, e aqui entra o pulo do gato para projetos Next.js: você precisa transformá-los de dinâmicos para estáticos.

Este tutorial vai ser muito massa porque vamos integrar as GitHub Actions com o GitHub Pages. Isso significa que você não vai estar apenas publicando sua aplicação Next.js na internet; você vai estar configurando uma pipeline automática. Uma pipeline é um conjunto de processos e ferramentas automatizados, comumente usado em integração contínua e entrega contínua (CI/CD). Nesse contexto, uma pipeline é um processo que guia o desenvolvimento de software através de um caminho de criação, testes e implantação do código. O objetivo da automação do processo é minimizar erros humanos e manter a consistência até a implantação.

Assim, toda vez que você atualizar seu código no seu repositório GitHub, as GitHub Actions entrarão em cena e farão o deploy do seu projeto direto no GitHub Pages. Prático, né?

### Desvendando o mistério:

- **GitHub Actions**: Imagine ter uma equipe de mini robôs dedicados só pra você, sempre de olho no seu repositório. Quando você faz um push, eles saltam para a ação como pequenos heróis do código, realizando tarefas essenciais – eles podem testar seu código para garantir que tudo está nos trinques, verificar a qualidade para que você mantenha seu padrão ou, especificamente para nosso propósito, fazer o deploy do seu projeto automaticamente.
- **GitHub Pages**: Pense nisso como seu próprio espaço de hospedagem web, cortesia do GitHub. É o local ideal para exibir seus projetos de forma profissional, mostrar ao mundo seu portfólio brilhante ou até mesmo compartilhar seus projetos pessoais e experimentos, tudo isso a partir do conforto do seu repositório GitHub.

Aqui uns links caso tenha interesse em se aprofundar:

- [GitHub Actions](https://github.com/features/actions)
- [GitHub Pages](https://pages.github.com)

### Preparação é chave:

Para gente seguir nessa quest, um pouquinho de bagagem é necessário. Um conhecimento introdutório em React e Next.js vai longe – não precisa ser um mestre lvl 80, apenas entender o básico já é suficiente. E, claro, uma noção fundamental de como o GitHub funciona é crucial, afinal, vai ser onde toda a nossa ação vai acontecer.

### Guia Rápido:

1. **Ative o GitHub Pages**: Vá nas configurações do seu repositório, ache a seção do GitHub Pages e configure para usar as GitHub Actions. Você está basicamente dizendo ao GitHub: "Ei, vou automatizar isso, fique de olho".

   ![GitHub Project Settings](/assets/img/passo1.png "GitHub Project Settings")

   ![GitHub Project Settings – GitHub Pages configuration](/assets/img/passo2.png "GitHub Project Settings – GitHub Pages configuration")

2. **Prepare seu App Next.js**: Como o GitHub Pages prefere conteúdo estático, você vai ajustar seu Next.js para saída de páginas estáticas. Você vai mexer no `next.config.js` para garantir que ele exporte seu projeto como arquivos estáticos. Assim, o GitHub pode exibir seu site sem problemas.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export", // <=== permite exportações estáticas
  reactStrictMode: true
}

module.exports = nextConfig
```

Agora, após executar a próxima `next build`, Next.js irá gerar uma pasta `out` contendo arquivos estáticos do nosso projeto. Nas próximas etapas, essa vai ser a pasta que nós pegaremos carregaremos no GitHub Pages.

PS: você pode usar [getStaticProps ](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)e [getStaticPaths](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths) para gerar arquivos estáticos pro seu projeto.

3. **Corrija Problemas de Caminho**: Seu projeto pode ter problemas com imagens ou estilos quebrados porque o GitHub Pages coloca ele em um subdiretório. Você vai resolver isso definindo um `basePath` no seu `next.config.js`. Isso diz ao seu app: "Ei, não estamos mais no mesmo lugar; estamos nesse novo endereço".

O Github publica páginas em um subcaminho de um domínio e usa o nome do projeto como um subcaminho. Parece confuso, então vamos usar a URL do meu projeto como exemplo:

`https://lucaoskaique.github.io/nextjs-to-github-pages/`

Como você pode ver, o Github atribuiu um subdomínio dedicado para mim chamado lucaoskaique(com meu nome de usuário). Mas o projeto é publicado no subcaminho, que no meu caso é /nextjs-to-github-pages. Infelizmente, isso levará a problemas com imagens e estilos ausentes.

Por padrão, Next.js mapeia todos os ativos estáticos do domínio. Isso significa que o arquivo `favicon.ico` será resolvido para `lucaoskaique.github.io/favicon.ico` em vez de `lucaoskaique.github.io/nextjs-to-github-pages/favicon.icon`.

Para corrigir isso, podemos configurar um prefixo de caminho adicionando basePath dentro do arquivo next.config.js:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "/nextjs-to-github-pages",
  output: "export",
  reactStrictMode: true
}

module.exports = nextConfig
```

No meu caso, é `/nextjs-to-github-pages` ja que meu projeto chama nextjs-to-github-pages. Não esquece de botar o `(/)` no inicio do path.

4. **Configure as GitHub Actions**: Aqui é onde a mágica acontece. Você vai criar duas actions: uma para configurar o Node.js (tipo preparando seu ambiente) e outra para a mágica de publicação (levando seu lindo site estático para o mundo ver).

- Ação de configuração do Node (setup-node action) – Essa ação é responsável por configurar o Node.js e instalar todas as dependências. Ter uma ação autônoma para a configuração do Node.js nos permite reutilizá-la em outras pipelines. Por exemplo, no meu projeto, tenho pipelines que executam linter de código e testes. Provavelmente, você também terá mais de uma ação.
- Ação de publicação (publish action) – Esta ação gerencia o processo de build e publica o projeto Next.js no GitHub Pages toda vez que você der um push na branch main do repositório.

Agora, você pode entender por que é benéfico dividir a implantação em duas ações.

Deixe-me começar explicando a ação de configuração do Node (setup-node action). Se liga no código:

```yaml
# File: .github/workflows/setup-node/action.yml
name: setup-node
description: "Configura Node.js ⚙️ - Cache dependencies ⚡ - Instala dependências 🔧"
runs:
  using: "composite"
  steps:
    - name: Configura Node.js ⚙️
      uses: actions/setup-node@v4
      with:
        node-version: 20

    - name: Cache dependencies ⚡
      id: cache_dependencies
      uses: actions/cache@v3
      with:
        path: node_modules
        key: node-modules-${{ hashFiles('package-lock.json') }}

    - name: Instala dependências 🔧
      shell: bash
      if: steps.cache_dependencies.outputs.cache-hit != 'true'
      run: npm ci
```

Importante: Coloque este arquivo no diretório `.github/workflows/setup-node` do seu projeto. Certifique-se de nomear o arquivo como `action.yml`.

O que este código faz?

- Ele declara uma ação composta. A ação composta permite agrupar múltiplos passos de um workflow em uma única ação, combinando múltiplos comandos de execução em uma única ação reutilizável.
- Ele cria um novo ambiente de build e configura o Node.js 20 lá.
- Ele instala dependências npm e utiliza um mecanismo de cache para acelerar este processo.

Estas são as partes mais importantes da ação de configuração do Node (setup-node action).

Agora, vamos passar para a última ação, que é a publicação (publish).

```yaml
# File: .github/workflows/publish.yml
name: publish-to-github-pages
on:
  push:
    branches:
      - master

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Configura Node.js ⚙️ - Cache dependencies ⚡ - Instala dependências 🔧
        uses: ./.github/workflows/setup-node

      - name: Configura Pages ⚙️
        uses: actions/configure-pages@v4
        with:
          static_site_generator: next

      - name: Build com Next.js 🏗️
        run: npx next build

      - name: Upload do artefato 📡
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Publica no GitHub Pages 🚀
        id: deployment
        uses: actions/deploy-pages@v4
```

Coloque este arquivo no diretório `.github/workflows` do seu projeto. Você pode nomear o arquivo como desejar – eu o chamei de `publish.yml`.

O que este código faz?

- Esta ação é executada quando o código é enviado ou mesclado na branch principal.
- Ela utiliza a ação setup-node para configurar o ambiente.
- A ação tem dois estágios: no primeiro estágio, o aplicativo Next.js é empacotado. No segundo estágio, nós fazemos o upload dos artefatos do primeiro estágio para o GitHub Pages.
- Estes são os aspectos mais importantes da pipeline de implantação. Eu pulei a configuração de permissões e concorrência, pois permanecem inalteradas para todas as implantações.

Agora, sua action está pronta para ser usada.

5. **Faça o Push e Observe**: Depois de fazer essas alterações, quando você fizer o push, as GitHub Actions vão iniciar automaticamente o deploy para o GitHub Pages.

Após fazer o commit e o push das suas mudanças para a branch principal, o GitHub automaticamente iniciará o deploy para o GitHub Pages.

Para inspecionar o processo, navegue até a aba Actions (1 na imagem abaixo), e selecione a ação publish-to-github-pages no menu do lado esquerdo (2). Você verá todas as suas implantações na tela (elas são chamadas de workflows).

![GitHub Actions – Workflows responsáveis pela publicação no GitHub Pages](/assets/img/passo5.png "GitHub Actions – Workflows responsáveis pela publicação no GitHub Pages")

Agora, precisamos selecionar o primeiro desses workflows, e você verá uma implantação em dois estágios. No estágio de deploy, você pode encontrar um link para o seu site no GitHub Pages.

![Workflow do Projeto GitHub – Implantação bem-sucedida](/assets/img/passo6.png "Workflow do Projeto GitHub – Implantação bem-sucedida")

E aí, é só curtir seu projeto rodando liso na web!

## Finalizando

O GitHub Pages pode não ser a solução ideal para sites com tráfego massivo de milhões de acessos. No entanto, representa uma opção incrível para desenvolver seu portfólio ou para a hospedagem de sites de projetos open-source.

Existem diversas alternativas gratuitas disponíveis para hospedagem de sites atualmente. Contudo, quis destacar esta opção específica. O GitHub Pages foi criado por desenvolvedores para desenvolvedores – é possível considerá-lo como o habitat natural de um programador. Acredito que todo dev deveria estar familiarizado com ele.

Espero que este artigo sirva como um incentivo para aprender mais sobre as GitHub Actions. Não hesite em experimentar abordagens diferentes e tentar criar algo próprio. Cada aplicação precisa ser lançada, e veja este artigo apenas como um ponto de partida.


Neste artigo, vou te orientar no processo de publicação de um projeto Next.js no Github Pages 

Como publicar um projeto Next.js no Github Pages 


![javascript mental](/assets/img/eok1jcbxeai0xui.jpg "javascript mental")

Salve galera! Sextou hoje e quero compartilhar com vocês 12 dicas super úteis que podem melhorar significativamente suas habilidades de programação e a eficiência do desenvolvimento de projetos. Essas dicas abrangem desde manipulações de strings até a melhoria da segurança do código. Chega mais!!!

1. **Camel Case Superior**: Escreva nomes compostos com a primeira letra de cada palavra em maiúsculo, exceto a primeira. É mais que um estilo; é um padrão que traz clareza ao seu código.

   ```javascript
   function camelize(str) {
     return str.replace(/([a-z]+)/g, (match, group) =>
       group ? group.charAt(0).toUpperCase() + match.slice(1) : ""
     )
   }
   console.log(camelize("ola mundo")) // Saída: olaMundo
   ```

2. **Segmentação de Três Dígitos**: Torne números grandes mais legíveis, aplicando a segmentação a cada três dígitos. Ideal para valores financeiros e grandes contagens.

   ```javascript
   function numFormat(num) {
     return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
   }
   console.log(numFormat("123456789")) // Saída: 123,456,789
   ```

3. **Acesso Seguro a Propriedades**: Evite erros ao acessar propriedades indefinidas em objetos com um método à prova de falhas.

   ```javascript
   const a = {}
   const proxy = new Proxy(a, {
     get(target, propKey, receiver) {
       return Reflect.get(target, propKey, receiver) ?? {}
     }
   })
   console.log(proxy.b.c) // Saída: undefined
   ```

4. **Tipo de Dispositivo Móvel**: Identifique rapidamente se o usuário está em um Android, iPhone ou iPad para uma experiência de usuário otimizada.

   ```javascript
   function getBrowserInfo() {
     const userAgent = navigator.userAgent.toLowerCase()
     return {
       isAndroid: Boolean(userAgent.match(/android/gi)),
       isIphone: Boolean(userAgent.match(/iphone|ipod/gi)),
       isIpad: Boolean(userAgent.match(/ipad/gi))
     }
   }
   ```

5. **Simulação de Requisição de Formulário**: Implemente a funcionalidade de exportação de arquivos de maneira simples e eficaz.

   ```javascript
   function exportFunc(url, params) {
     const form = document.createElement("form")
     form.style.display = "none"
     form.action = url
     form.method = "post"
     document.body.appendChild(form)

     for (const key in params) {
       const input = document.createElement("input")
       input.type = "hidden"
       input.name = key
       input.value = params[key]
       form.appendChild(input)
     }
     form.submit()
     form.remove()
   }
   ```

6. **Vinculação de Eventos Universal**: Garanta que seus ouvintes de eventos funcionem em qualquer navegador.

   ```javascript
   function customEventBind(ele, eventType, callBack) {
     if (ele.addEventListener) {
       ele.addEventListener(eventType, callBack, false)
     } else if (ele.attachEvent) {
       ele.attachEvent("on" + eventType, callBack)
     } else {
       ele["on" + eventType] = callBack
     }
   }
   ```

7. **Configuração de Cookies**: Gerencie cookies de forma eficiente com controle total sobre seus atributos.

   ```javascript
   function setCookie({ key, value, expires, path, domain, secure }) {
     let cookieString = `${key}=${encodeURIComponent(value)}`
     if (expires) {
       const expirationDate = new Date()
       expirationDate.setTime(
         expirationDate.getTime() + expires * 24 * 60 * 60 * 1000
       )
       cookieString += `; expires=${expirationDate.toUTCString()}`
     }
     if (path) cookieString += `; path=${path}`
     if (domain) cookieString += `; domain=${domain}`
     if (secure) cookieString += "; secure"
     document.cookie = cookieString
   }
   ```

8. **Informações do Navegador**: Extraia detalhes do navegador do usuário para melhorar a compatibilidade do seu site.

   ```javascript
   function getBrowserInfo() {
     const userAgent = navigator.userAgent;
     const browserRegex = /(Chrome|Firefox|Safari|Opera|Edge|Trident)\[/ ]?(\d+)/;
     const browserMatch = userAgent.match(browserRegex);
     return {
       browserName: browserMatch ? browserMatch\[1] : 'Desconhecido',
       browserVersion: browserMatch ? browserMatch\[2] : 'Desconhecido'
     };
   }
   ```

9. **Informações do Sistema Operacional**: Saiba com qual sistema operacional o usuário está navegando para otimizar sua experiência.

   ```javascript
   function getUserOsInfo() {
     const userAgent = navigator.userAgent
     const osRegex = /((Windows NT)|(Mac OS X)|(Android)|(iOS))\s*([\d._]+)/
     const osMatch = userAgent.match(osRegex)
     return {
       osName: osMatch ? osMatch[1] : "Desconhecido",
       osVersion: osMatch ? osMatch[5] : "Desconhecido"
     }
   }
   ```

10. **Validação de Data**: Garanta que as datas de início e fim sejam coerentes e lógicas.

    ```javascript
    function compareDate(beginDate, endDate) {
      const start = new Date(beginDate)
      const end = new Date(endDate)
      return start <= end
    }
    ```

11. **Parâmetros de URL**: Capte facilmente valores de parâmetros de URLs para análises e funcionalidades personalizadas.

    ```javascript
    function getQueryStringRegExp(name) {
      const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
      const r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    }
    ```

12. **Exportação de Arquivos Excel**: Simplifique a criação e exportação de arquivos Excel com uma função personalizada.

    ```javascript
    function exportExcel(headers, data, fileName = "export.xlsx") {
      // Código simplificado para a criação e exportação do arquivo Excel
    }
    ```

Espero que essas dicas ajudem vocês!!! Até a mais!!!!


Hoje e quero compartilhar com vocês 12 dicas super úteis que podem melhorar significativamente suas habilidades de programação e a eficiência do desenvolvimento de projetos

12 Dicas de JavaScript que Todo Desenvolvedor Deve Conhecer


![](/assets/img/imagem_2024-02-04_202622872.png "Evoluindo na Programação: Lições de um Full Stack")

### **Evoluindo na Programação: Lições de um Full Stack**

Há quase um ano, entrei numa experiência muito divertida no mundo do desenvolvimento, participando ativamente do Dev em Dobro, ajudando no papel de instrutor e mentor. Durante esse período, não apenas compartilhei conhecimentos e esclareci dúvidas, mas também testemunhei o crescimento impressionante de inúmeros alunos, do zero à competência em desenvolvimento web.

Esta jornada reacendeu reflexões sobre meus próprio inicio na programação. Me lembro dos dias em que, sem uma orientação formal, cada linha de código que funcionava era um motivo de celebrar. Essa abordagem "go horse" no código, embora divertida, muitas vezes me deixava à deriva em um mar de práticas questionáveis e dúvidas horrendas.

Refletindo sobre essa trajetória, identifiquei três princípios fundamentais que teriam acelerado meu progresso e refinado minha abordagem ao desenvolvimento desde o início. São lições que transcenderam minha experiência com desenvolvimento. Aqui estão elas:

#### **1. Escrevendo Código para Humanos**

Na programação, a verdadeira arte eu vejo que é escrever código que seja facilmente compreendido por outros desenvolvedores. No início, muitos escrevem código pensando na máquina, performace e etc, mas a realidade é que nosso público principal são os colegas de equipe que vão ler, entender e modificar esse código. Simplificar a complexidade e priorizar a clareza não é apenas uma questão de cortesia profissional, mas uma habilidade essencial na construção de sistemas robustos e colaborativos.

Esse conceito, embora pareça básico, foi uma verdadeira mudança de paradigma para mim. No início, minha visão de programação era puramente técnica: eu via o código como um meio de instruir o computador, focando em como "falar" com a máquina, todo mundo de todos os cursos e trabalho falavam só sobre performance. Mas, com o tempo, percebi algo fundamental que o código é de dev para dev, não de dev para máquina.

A máquina, no final das contas, vai converte tudo em zeros e uns e não tem a menor preocupação com a legibilidade ou a elegância do código. São os nossos colegas que precisam navegar, entender e, muitas vezes, expandir ou corrigir o que escrevemos.

Vamos ilustrar isso com um exemplo prático: a função `groupBy`.

Primeiro se liga:

```javascript
const groupBy = (arr, groupFn) =>
  arr.reduce(
    (grouped, obj) => ({
      ...grouped,
      [groupFn(obj)]: [...(grouped[groupFn(obj)] || []), obj]
    }),
    {}
  )
```

Aqui, demonstramos que podemos condensar operações complexas em uma única linha. Embora isso possa nos fazer sentir mais experientes, na realidade, torna a compreensão do código muito mais difícil para qualquer pessoa que precise revisá-lo.

Agora, considere esta outra implementação:

```javascript
const groupBy = (arr, groupFn) => {
  const grouped = {}
  for (const obj of arr) {
    const groupName = groupFn(obj)
    if (!grouped[groupName]) {
      grouped[groupName] = []
    }
    grouped[groupName].push(obj)
  }
  return grouped
}
```

Esse código pode ser lido de cima para baixo, e é possível entender instantaneamente o que acontece em cada linha. Ele pode não ter a mesma "elegância" da versão anterior, mas sua legibilidade é imensamente superior. E é justamente isso que valorizamos: um código que qualquer pessoa na equipe possa revisitar no futuro e agradecer pela clareza.

Esse princípio de priorizar a legibilidade não só facilita a manutenção do código como também promove uma cultura de colaboração e aprendizado contínuo entre os desenvolvedores. Portanto, da próxima vez que você se sentar para codar, lembre de que está escrevendo para humanos, não para máquinas.

#### **2. Escondendo Informações Atrás das Cortinas**

Uma das maiores revelações que tive foi a eficácia de abstrair detalhes complexos por trás de funções claras e bem definidas. Isso não apenas melhora a legibilidade do código, mas também sua modularidade. Ao encapsular operações complexas, facilitamos a manutenção e incentivamos a reutilização do código.

Minha passagem pelo Dev em Dobro foi mais do que apenas um período de ensino; foi um lembrete constante do poder da educação contínua e do compartilhamento de conhecimento. Ver desenvolvedores emergentes abraçando esses princípios e aplicando-os em seus projetos reforça a crença de que, independentemente de onde começamos, o crescimento contínuo é sempre possível.

Espero que compartilhando essas lições, possa inspirar outros a refletirem sobre suas práticas de codificação e a buscarem sempre a evolução. Afinal, o desenvolvimento de software é uma jornada sem fim, repleta de aprendizados constantes e oportunidades de melhorar não apenas nossos códigos, mas também a nós mesmos como profissionais e mentores.

Para quem já mexeu com React, os hooks são um exemplo perfeito desse princípio:

```javascript
import React, { useState, useEffect } from "react"

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null)

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
    }
  })

  return (
    <li style={{ color: isOnline ? "green" : "black" }}>{props.friend.name}</li>
  )
}
```

Nesse caso, temos um componente que mostra um item de lista com a cor dinâmica baseada no status do amigo. Apesar de funcionar direitinho, esse código esconde dentro dele lógicas que não têm muito a ver com o propósito principal do componente `FriendListItem`.

Se a gente pegar essa lógica e criar um hook customizado chamado `useFriendStatus`, dá para simplificar o componente assim:

```javascript
import React, { useState, useEffect } from "react"

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id)

  return (
    <li style={{ color: isOnline ? "green" : "black" }}>{props.friend.name}</li>
  )
}
```

Isso traz dois benefícios bem legais:

1. A gente pode reutilizar a lógica do `useFriendStatus` em outros lugares.
2. Simplificamos nosso componente para mostrar apenas o que realmente importa para sua funcionalidade.

Falando de um jeito mais amplo, o princípio de esconder informações é sobre colocar detalhes irrelevantes para trás de funções abstratas. Assim, a gente não precisa se preocupar com os detalhes de implementação dentro da função abstrata - podemos focar mais no que ela faz, ou seja, no nome da função que indica seu propósito.

Dessa forma, o código fica mais limpo, fácil de entender e manter, liberando mais tempo para a gente focar na solução dos problemas em vez de decifrar o que cada pedaço do código está fazendo.

#### **3. “Return Early” em Vez de Usar Coisas Aninhadas**

A ultima dica tem a ver especialmente com lidar com validações em rotas de API, é tentador cair na armadilha das condições aninhadas. O padrão "retorne cedo" simplifica a lógica, evitando a complexidade e melhorando a legibilidade do código. Adotar essa prática não só torna o código mais limpo, mas também facilita sua manutenção a longo prazo.

Veja só como geralmente a coisa começa:

```javascript
export const handler = async (req, res) => {
  if (req.method === "POST" || req.method === "OPTIONS") {
    const email = validateEmail(req.body.email)
    if (email) {
      const user = findUserByEmail(email)
      if (user) {
        return res.status(200).json({ user })
      } else {
        return res.status(404).json({ message: "Usuário não encontrado" })
      }
    } else {
      return res.status(422).json({ message: "Faltou o email" })
    }
  } else {
    return res.status(405).json({ message: "Esse método não rola" })
  }
}
```

Esse código pode não estar super complexo, mas já começa a ficar um pouco enrolado. O grande truque aqui é que, em vez de seguir uma linha reta, parece que a gente tá fazendo zig-zag pra entender o fluxo.

Agora, que tal a gente tentar um jeito diferente de escrever isso, utilizando o que chamamos de "Padrão de Retorno Antecipado"? Esse padrão ajuda a cortar o caminho quando algo não está nos conformes, deixando o fluxo mais lógico e direto.

Olha só como poderia ficar:

```javascript
export const handler = async (req, res) => {
  if (req.method !== "POST" && req.method !== "OPTIONS") {
    return res.status(405).json({ message: "Esse método não rola" })
  }

  const email = validateEmail(req.body.email)
  if (!email) {
    return res.status(422).json({ message: "Faltou o email" })
  }

  const user = findUserByEmail(email)
  if (!user) {
    return res.status(404).json({ message: "Usuário não encontrado" })
  }

  return res.status(200).json({ user })
}
```

Dessa forma, o código fica mais limpo e a gente consegue entender o que tá acontecendo passo a passo, de uma maneira bem mais tranquila. Ao invés de um monte de condicionais aninhados, a gente vai direto ao ponto e trata cada caso separadamente, deixando o caminho livre até chegar no resultado que a gente quer lá no final.

---

E﻿spero que essas dicas tenham sido úteis e que essas pequenas dicas te engrandeçam na sua jornada de estudos


Sabe quando você começa a codar e só quer que as coisas funcionem? Pois é, mas aí você descobre que rola fazer isso de um jeito bem mais top. Tem três coisas que, se você começar a usar agora, vão dar um up no seu código rapidinho.

3 Técnicas Pessoais Que Transformaram Minha Carreira em Desenvolvimento


Objetos em JavaScript não são iteráveis como vetores ou cadeias de caracteres (não é possível percorrê-los com loops). Isso significa que você não pode aplicar diretamente `filter()`, o método de laço for, ou qualquer outro método de iteração em um objeto. Então, como se pode filtrar um objeto em JavaScript?

Isso é possível ao transformar o objeto em um vetor utilizando um dos métodos estáticos de objeto, tais como `Object.keys()`, `Object.values()` ou `Object.entries()`. Posteriormente, você pode empregar o método filter() para realizar a filtragem no vetor e gerar um novo vetor com os elementos que passaram pelo filtro.

Imagine que você possui um objeto que armazena detalhes de usuários, como nome, idade e profissão. Esses métodos estáticos de objeto têm a capacidade de retornar as chaves, os valores ou cada par de chave-valor na forma de um vetor.

```javascript
const detalhesDoUsuario = {
  primeiroNome: "Lucas",
  sobrenome: "Kaique",
  nomeDeUsuario: "lucaoskaique",
  email: "me@lucaskaique.com.br",
  empresa: "Example Inc.",
  endereco: "1234 Exemplo",
  idade: 29,
  passatempo: "DJ"
}

let arrayDeChaves = Object.keys(detalhesDoUsuario)

console.log(arrayDeChaves)
```

Isso exibirá um vetor com as chaves do objeto:

`['primeiroNome', 'sobrenome', 'nomeDeUsuario', 'email', 'empresa', 'endereco', 'idade', 'passatempo']`
Agora você pode empregar o método `filter()` para navegar pelo vetor e criar um novo vetor com os elementos filtrados:

```javascript
let chavesFiltradas = arrayDeChaves.filter((chave) => chave.length > 5)

console.log(chavesFiltradas)
```

Isso resultará em um vetor de chaves cujo tamanho é superior a 5:

`['primeiroNome', 'sobrenome', 'nomeDeUsuario', 'empresa', 'endereco', 'passatempo']`
No entanto, certamente você desejará realizar uma operação de filtragem mais significativa. Por exemplo, você pode querer filtrar pares de chave-valor do objeto que incluem um nome de um objeto extenso. Para isso, primeiramente obtenha as chaves, filtre-as e depois utilize o método reduce() para converter as chaves filtradas em um objeto com as chaves filtradas e seus respectivos valores:

```javascript
const detalhesDoUsuario = {
  primeiroNome: "Lucas",
  sobrenome: "Kaique",
  nomeDeUsuario: "lucaoskaique",
  email: "me@lucaskaique.com.br",
  empresa: "Example Inc.",
  endereco: "1234 Exemplo",
  idade: 29,
  passatempo: "DJ"
}

const nomesDeUsuario = Object.keys(detalhesDoUsuario)
  .filter((chave) => chave.includes("Nome"))
  .reduce((objeto, chave) => {
    return Object.assign(objeto, {
      [chave]: detalhesDoUsuario[chave]
    })
  }, {})

console.log(nomesDeUsuario)
```

Isso resultará em um objeto com as chaves filtradas e seus respectivos valores:

```json
{
  "primeiroNome": "Lucas",
  "sobrenome": "Kaique",
  "nomeDeUsuario": "lucaoskaique"
}
```

### Em síntese

Você aprendeu a filtrar um objeto em JavaScript convertendo ele em um array utilizando o método `filter()`.

Fonte
<https://www.freecodecamp.org/news/filter-arrays-in-javascript/>


Infelizmente, os objetos JavaScript não possuem uma função filter(). Mas isso não significa que você não pode usar filter() para filtrar objetos, você só precisa ser capaz de iterar sobre um objeto e convertê-lo em um array usando Object.entries().

Como Filtrar um Objeto no JavaScript


Uma vez que se decide avançar com o aprendizado do **React**, hooks estão entre as primeiras coisas a aprender (e se frustrar). Hooks são partes essenciais do **React**, já que foram criados para resolver vários problemas que apareceram nas primeiras versões do **React**, quando todo o render era feito dentro das funções do ciclo de vida do componente, como **componentDidMount()**, **componentWillMount()**, **componentDidUpdate()**.

Dito isso, os primeiros hooks que todos começam a usar são **useState()** e **useEffect()**. O primeiro é usado para gerenciamento de estado e controle de quando o componente deve ser renderizado novamente, enquanto o segundo se comporta de forma um tanto semelhante às funções do ciclo de vida mencionadas acima.

O hook **useEffect()** pode receber dois parâmetros: o primeiro é uma função de retorno de chamada, enquanto o segundo é opcional e define quando esse hook deve ser chamado.

```javascript
  useEffect((prevProps) => { // prevProps são opcionais e têm alguns usos específicos. Compare com o que acontece com as funções do ciclo de vida.
    // Conteúdo da função personalizada…
    conteúdo da função personalizada…

    return () => {
      // Código para executar quando o componente é desmontado ou quando as dependências mudam
      // Ajuda a evitar vazamentos de memória e comportamento inesperado
    };
  }, [dependências em forma de array]);
```

Um ponto que confunde muitos iniciantes é como o segundo parâmetro funciona. Aqui está um resumo:

> Caso A: Se nada for adicionado, então **useEffect** será executado a cada mudança de estado dentro do componente atual.
>
> _Caso B: Se um array vazio for adicionado (\[]), então o **useEffect** será executado apenas uma vez quando o componente for montado._
>
> _Caso C: Se algum array for fornecido (\[estado]), então **useEffect** será executado toda vez que o estado mudar._
>
> _Caso D: Se algum array for fornecido (\[estado1, estado2, …], **useEffect** será executado toda vez que **QUALQUER** um desses estados mudar._

Agora que revisamos como o **useEffect** funciona, é essencial aprofundar-se em uma técnica de otimização conhecida como _memoização_. _Memoização_ ajuda a prevenir renderizações desnecessárias e pode melhorar significativamente o desempenho dos seus componentes, especialmente ao lidar com arrays de dependências no **useEffect**.

A ideia principal do hook **useEffect** é sincronizar a transferência de dados com **APIs** externas ou outro sistema, como quando você está acessando um banco de dados ou esperando que uma requisição **HTTP** seja completada. O problema é que tendemos a usar esse hook em toda situação possível dentro do nosso código, especialmente nos _Casos A_ e C mencionados acima, e o código pode se tornar incrivelmente ilegível com apenas algumas linhas de código, incluindo disparar um loop se você mudar um dos estados no array de dependências durante o processo.

Isso também pode tornar seu código ineficiente, já que o useEffect funciona como se você estivesse se afastando para executar algum código e depois voltando para a thread principal. Isso poderia ser mais eficiente.

Ótimo, agora você sabe que, às vezes, **useEffect** não é a melhor solução. Agora vamos olhar cada caso em detalhe.

Vamos falar sobre cada um dos casos de uso em detalhe:

> Caso A — Sem array de dependência: Este deve ser abolido do seu código, pois certamente disparará cálculos desnecessários toda vez que um estado mudar. Neste caso, você deve especificar quais estados realmente devem disparar essa função usando um array de dependências.
>
> _Caso B — Array de dependência vazio: Este é um dos bons, a única recomendação que posso fornecer é manter apenas um destes para cada componente e envolver seu conteúdo em uma função._
>
> _Caso C — Apenas um estado de dependência. Está ok usar se você está processando dados externos. Caso contrário, você deve mudá-lo para a solução que irei fornecer abaixo._
>
> _Caso C_ — Múltiplos estados de dependência no mesmo **useEffect**. Este é o que considero o mais problemático. Recomendo que você tente desembaraçar os estados em diferentes hooks useEffect antes de qualquer coisa, pois isso torna seu código muito ilegível.

Agora para a solução que prometi. Vamos considerar estes dois Componentes (Pai e Filho):

```javascript
// ParentComponent.js
import React, { useState, useEffect } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [contagem, setContagem] = useState(0);
  const [mensagem, setMensagem] = useState('Olá do Pai!');

useEffect(() => {
 setMensagem(`Botão clicado ${contagem} vezes!`);
},[contagem]}

  return (
      <ChildComponent contagem={contagem} mensagem={mensagem} setContagem={setContagem} />
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent({ contagem, mensagem, setContagem }) {
  return (
    <div>
      <h3>Componente Filho</h3>
      <p>Contagem recebida do Pai: {contagem}</p>
      <p>Mensagem recebida do Pai: {mensagem}</p>
      <button onClick={() => {setContagem(contagem+1)}>Clique em mim</button>
    </div>
  );
}

export default ChildComponent;
```

Agora vamos explicar o que está acontecendo aqui:

> 1 — Uma vez que o usuário clica no botão no Componente Filho, mudamos o estado "contagem" incrementando 1. Isso levará um ciclo de renderização para acontecer e mudar o estado.
>
> _2 — Uma vez que o estado "contagem" muda, o componente filho será renderizado novamente e também disparará o hook **useEffect** em ambos os componentes, o que disparará a mudança no estado "mensagem". Novamente, isso só acontecerá no próximo render._
>
> _3 — Quando o estado "mensagem" muda, então outra renderização acontece nos componentes mudando a mensagem._
>
> _Neste caso, acabamos tendo duas renderizações. Pode não parecer muito, mas pode crescer em grande escala uma vez que você tem mais estados em jogo._
>
> _Agora veja o que acontece quando fazemos as seguintes mudanças nos componentes:_

```javascript
// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [contagem, setContagem] = useState(0);
  const [mensagem, setMensagem] = useState('Olá do Pai!');
const incrementarContagem = () => {
 setContagem(contagem + 1);
setMensagem(`Botão clicado ${contagem + 1} vezes!`);
}

  return (
      <ChildComponent contagem={contagem} mensagem={mensagem}
        callbackFunction={incrementarContagem} />
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent({ contagem, mensagem, callbackFunction }) {
  return (
    <div>
      <h3>Componente Filho</h3>
      <p>Contagem recebida do Pai: {contagem}</p>
      <p>Mensagem recebida do Pai: {mensagem}</p>
      <button onClick={callbackFunction}>Clique em mim</button>
    </div>
  );
}

export default ChildComponent;
```

Mudamos o código para passar uma **Função de Retorno de Chamada** para o Componente Filho. Você pode notar que:

> - Não temos mais um useEffect definido no Componente Pai. Isso torna o código mais fácil de ler, já que podemos entender nosso código como, digamos, mais linear e de um único thread do que o original.
> - _Não precisamos esperar dois ciclos de renderização para exibir nossa mensagem final, ou pior, renderizar ambos os componentes duas vezes._
> - _Podemos separar preocupações entre componentes, tornando-os mais reutilizáveis e mais fáceis de ler ou adaptar, já que podemos colocar o que quisermos na função de retorno de chamada._
> - _Ambos os estados mudam ao mesmo tempo, evitando o encadeamento de declarações **useEffect**._

Em conclusão, os insights fornecidos aqui oferecem orientação valiosa, mas é importante reconhecer que desenvolvimento de software é uma área dinâmica, e as soluções serão sempre as mesmas para sempre. O hook useEffect é uma parte importante do React, mas nem sempre é a melhor solução.

Obrigado pela leitura!

T﻿ranslated from \[[https://blog.stackademic.com/why-you-should-avoid-using-useeffect-hook-in-react-and-what-to-do-instead-740660e33420]](https://blog.stackademic.com/why-you-should-avoid-using-useeffect-hook-in-react-and-what-to-do-instead-740660e33420)


React: Você está Usando useEffect() Errado, Faça Isso em Vez Disso

React: Você está Usando useEffect() Errado


# DSTRB:0130 - Lucaos Kaique

<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1581081291&color=%231eff00&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/disturbiodstrb" title="DSTRB" target="_blank" style="color: #cccccc; text-decoration: none;">DSTRB</a> · <a href="https://soundcloud.com/disturbiodstrb/dstrb0130-lucaos-kaique" title="DSTRB:0130 • Lucaos Kaique" target="_blank" style="color: #cccccc; text-decoration: none;">DSTRB:0130 • Lucaos Kaique</a></div>

<br/>

Lucaos Kaique, oriundo do interior de Goiás e atualmente estabelecido em terras gaúchas, desempenha um duplo papel como engenheiro de software profissional e dedicado produtor de eventos, propondo-se a criar atmosferas musicais únicas e experiências sonoras marcantes em seu tempo livre. Como membro-chave do @[coletivocentral](https://soundcloud.com/coletivocentral), ele tem sido o motor da transformação de bares em pontos culturais da cidade desde 2019, promovendo a cultura DJ e oferecendo acesso para aqueles que estão começando na música.

É o fundador da @[coic_e](https://soundcloud.com/coic_e), uma iniciativa inovadora lançada em 2020 que convida artistas a explorar ritmos percussivos. A principal missão da iniciativa é valorizar e realçar as sonoridades da América Latina e do Brasil, proporcionando uma contribuição singular e vibrante ao cenário musical. O projeto busca explorar a club music, infundindo ritmos latinos. Situando-se no cruzamento entre música, programação e arte, o projeto traz uma abordagem multidimensional à expressão artística e com uma equipe muito cheia de energia.

Lucaos sobre o cast: Este set é um fruto de harmonização e inovação, capturando a essência do que tenho apresentado nas minhas performances, unindo o melhor de várias vertentes e eras musicais. Sua fundação reside nas tradições de house, drum'n bass e UK garage, mas o set se estende além de uma simples compilação de diferentes estilos, tornando-se uma jornada de alquimia sonora em busca da combinação perfeita de gêneros.

Adicionando nuances de latin club e pop music, o set ganha uma pitada exótica, convidando o ouvinte a se submergir nesse emaranhado de ritmos. Essa fusão consegue harmonizar a inovação revigorante com a nostalgia dos clássicos. O set também incorpora breakbeats clássicos e samples de dub, homenageando a revolucionária era dos samples e as ressonâncias dos sistemas de som jamaicanos. Portanto, prepare-se para uma experiência além do habitual, uma viagem inesquecível através das profundezas e fronteiras da dance music.

Agradeço o espaço disponibilizado pela DSTRB e espero que gostem.

@[lucaoskaique](https://soundcloud.com/lucaoskaique)\
[instagram.com/lucaoskaique](https://gate.sc/?url=http%3A%2F%2Finstagram.com%2Flucaoskaique&token=688d2a-1-1697143396480 "http://instagram.com/lucaoskaique")

## Tracklist

---

1. Merca Bae - WYLYL - Merca Bae
2. la track 5 v2 - Teo Coelho
3. Xnx Dmg (Nick León Jungle Edit) - Nick León & Future
4. Freestyler - Bomfunk MCs
5. love him - Two Shell
6. Counting - Hamdi
7. Satyr - O’Flynn Feat Frazer Ray
8. V2 Little Things - Jorja Smith (bullet tooth Bootleg) - bullet tooth
9. Outta Space - DJ Deekline presents Cut & Run
10. Straight to the World (Baymont Bross Remix) - Beat Assassins
11. HOJE (Bonus Track) - Sidoka
12. Flashing Hype - Sam Interface
13. Girl Riddim vs. Temperature - Murder He Wrote
14. Fuego ft Baby Perigosa (Bitter Babe & Nick Leon Remix) - Florentino, Isabella Lovestory, MC Buzzz
15. Groove Theory - Tell Me (Nora Zion Edit) - Nora Zion
16. JETAIME - Isabella LoveStory
17. CHIBI (Nick León Remix) - Esty
18. 4- Frida Kahlo by MJ Nebreda, Dj Babatr, Yung Iverson - MJ Nebreda, Dj Babatr, Yung Iverson
19. La Murga (Michael's Midnight Mix) - Michael Bibi
20. DANI GIRL PUMPING IT (Remastered) - MOOEY DECK
21. Tell Me - Baltra
22. Sticky (BAVR \_Lady\_ Flip) - BAVR


Set gravado para Coletivo de música eletrônica de Floripa - SC, Brasil

DSTRB:0130 - Lucaos Kaique


## Índice

1. [O Impacto Revolucionário de Softwares P2P na Cena Musical](#o-impacto)
2. [O que diabos é P2P?](#o-que-diabos-é-p2p)
3. [A Revolução P2P: Napster e Soulseek](#a-revolução-p2p-napster-e-soulseek)
4. [O Impacto na Comunidade de DJs e Música](#o-impacto-na-comunidade-de-djs-e-música)
5. [Tá, mas e hoje?](#ta-mas-e-hoje)
6. [Fim](#fim)

---

<a id="o-impacto"></a>

# O Impacto Revolucionário de Softwares P2P na Cena Musical

No mundo da música em constante transformação, a tecnologia desempenhou um papel significativo na modelagem da indústria. Uma dessas inovações tecnológicas que revolucionou a cena musical é o software peer-to-peer (P2P), como Napster e Soulseek. Hoje vou falar um pouco e desmistificar o conceito de software P2P para iniciantes e por tabela explorar seu profundo impacto na comunidade de DJs e música.

---

<a id="o-que-diabos-é-p2p"></a>

## [O que diabos é P2P?](#o-que-diabos-é-p2p)

![P2P e ponto de exclamação](https://uploads-ssl.webflow.com/60a3c6ed0d50ee830d47b5bf/6266ae53a8b4d759ff96e8f5_Blog2_cover.png "P2P e ponto de exclamação")

Imagine comigo, os softwares P2P como um grande feiras de troca de discos (pros mais saudosistas), onde cada computador é um estande. Em vez de ter uma loja central (servidor) onde todos precisam ir pra comprar seus discos (arquivos), cada pessoa pode ir diretamente ao estande (computador) de outra pessoa para pegar o que precisa; se hoje você conhece o que é torrent é basicamente o mesmo principio de compartilhamento. Isso transformou o mundo do compartilhamento de arquivos em um grande mercado aberto. É como se tivéssemos criado um enorme mercado bazar digital ou como dizem os gauchos brick digital!

Então em sua essência, o software P2P permite que os usuários compartilhem e baixem arquivos diretamente dos computadores uns dos outros, eliminando a necessidade de um servidor central. Este modelo descentralizado de compartilhamento de arquivos foi um divisor de águas, democratizando o acesso à música e fomentando uma cultura de compartilhamento e descoberta.

---

<a id="a-revolução-p2p-napster-e-soulseek"></a>

## [A Revolução P2P: Napster e Soulseek](#a-revolução-p2p-napster-e-soulseek)

![Napster Logo](/assets/img/o-impacto-revolucionário-de-softwares-p-2-p-na-cena-musical/napsterlogo.png "Napster Logo")

Napster foi lançado em 1999, sendo uma das primeiras plataformas P2P que ganhou destaque. Permitiu que os usuários compartilhassem e baixassem arquivos de música, interrompendo o modelo tradicional de distribuição de música.

![Napster Logo meme](https://i.imgflip.com/3r0d69.jpg "Napster Logo meme")

[Soulseek](http://www.slsknet.org/news/node/1), também lançado em 1999, seguiu um caminho semelhante, mas com foco em gêneros musicais de nicho e artistas independentes.

<img src="https://www.wikihow.com/images_en/thumb/0/0a/Optimize-Soulseek-for-Downloading-Music-Step-1-Version-5.jpg/v4-460px-Optimize-Soulseek-for-Downloading-Music-Step-1-Version-5.jpg" alt="Soulseek website print" />

---

<a id="o-impacto-na-comunidade-de-djs-e-música"></a>

## [O Impacto na Comunidade de DJs e Música](#o-impacto-na-comunidade-de-djs-e-música)

O advento do software P2P teve um impacto profundo na comunidade de DJs e música. Democratizou o acesso a uma vasta gama de músicas, permitindo que os DJs descobrissem e compartilhassem faixas únicas de todo o mundo. Isso levou a uma cena musical mais diversificada e vibrante, com DJs capazes de experimentar diferentes gêneros e estilos.

<img src="https://i.imgur.com/ff5f3SP.jpg" alt="Soulseek vs Spotify" style={{height: '200px', width:'200px'}}/>

Além disso, o software P2P forneceu uma plataforma para artistas independentes compartilharem sua música com um público global. Isso empoderou os artistas, dando-lhes controle sobre sua distribuição e permitindo que eles alcançassem os fãs diretamente.

<img src="https://img-9gag-fun.9cache.com/photo/aNpDYdr_460s.jpg" alt="meme about youtubeconvertermp3" style={{height: '300px', width:'300px'}}/>

Os softwares P2P revolucionaram a indústria da música, derrubando barreiras e fomentando uma cultura de compartilhamento e descoberta. Para a comunidade de DJs e música, abriu um mundo de possibilidades, permitindo a exploração de diversos gêneros musicais e empoderando artistas independentes. À medida que continuamos a navegar na era digital, a influência do software P2P na cena musical permanece tão relevante quanto sempre.

---

<a id="ta-mas-e-hoje"></a>

## [Tá, mas e hoje?](#ta-mas-e-hoje)

Com o sucesso contínuo e o uso do [Soulseek](http://www.slsknet.org/news/node/1) pela comunidade, percebeu-se a necessidade de desenvolver uma plataforma mais moderna,pois é bem conhecido que o [Soulseek](http://www.slsknet.org/news/node/1), embora ainda seja uma ferramenta mais conhecida atualmente, não recebeu atualizações em sua interface de usuário (UI - user interface) há algum tempo. Eu acho isso terrível, sem experiência do usuário adequada e pouco intuitiva, especialmente para quem trabalha com tecnologia é muito doloroso... E é aqui que o [Nicotine+](https://nicotine-plus.org) entra em cena.

<img src="https://i.ytimg.com/vi/A5I605hVjGg/maxresdefault.jpg" alt="Nicotine plus interface" />

O [Nicotine+](https://nicotine-plus.org) é uma tentativa de trazer o [Soulseek](http://www.slsknet.org/news/node/1) para o século 21, com uma interface de usuário atualizada e novos recursos que aprimoram a experiência de compartilhamento de arquivos. Ele mantém a essência do [Soulseek](http://www.slsknet.org/news/node/1), permitindo que os usuários compartilhem e baixem arquivos diretamente dos computadores uns dos outros, mas adiciona novas funcionalidades e uma interface mais moderna e fácil de usar. Além disso, o [Nicotine+](https://nicotine-plus.org) é ativamente mantido e atualizado, o que significa que novos recursos e melhorias são adicionados regularmente.

Além de uma interface de usuário melhorada, o [Nicotine+](https://nicotine-plus.org) também oferece uma série de recursos avançados que não estão presentes no [Soulseek](http://www.slsknet.org/news/node/1). Por exemplo, uma melhor integração com sistemas operacionais modernos, suporte para listas de reprodução, melhor gerenciamento de downloads e uploads, e uma comunidade ativa de desenvolvedores trabalhando para melhorar continuamente o software.

<img src="/assets/img/o-impacto-revolucionário-de-softwares-p-2-p-na-cena-musical/nicotine-plus-print-github.png" alt="Nicotine plus github" />[Link para o repositório do Nicotine+ no Github](https://github.com/nicotine-plus/nicotine-plus)

Em resumo, o [Nicotine+](https://nicotine-plus.org) é uma resposta à necessidade da comunidade de um software de compartilhamento de arquivos P2P mais moderno e atualizado, que mantém a essência do [Soulseek](http://www.slsknet.org/news/node/1), mas com melhorias significativas na interface do usuário e na funcionalidade.

---

<a id="fim"></a>

## Fim

Se você achou este post informativo e envolvente, não se esqueça de compartilhá-lo com seus amigos e seguidores. Fique ligado para mais post sobre interseção da música e tecnologia.


Este post explora o conceito de software P2P e seu profundo impacto na comunidade de DJs e música.

O Impacto Revolucionário de Softwares P2P na Cena Musical


Quando olhamos para trás na história da música eletrônica, um gênero se destaca por sua resiliência e adaptabilidade: o UK Garage. Agora, em 2023, podemos observar como o UK Garage manteve sua relevância, sempre evoluindo e reinventando-se para conquistar novas gerações de amantes da música.

Originado na década de 1990, o UK Garage é conhecido por suas batidas sincopadas, velocidades de 130 BPM, linhas de baixo proeminentes e vocais soulful. Rapidamente conquistou uma enorme base de fãs, não apenas no Reino Unido, mas também em todo o mundo.

A década de 2020 viu uma nova onda de produtores inovadores do UK Garage, influenciados por uma variedade de gêneros - do grime ao dubstep, do house ao R&B - e combinando esses elementos de maneira criativa para produzir sons únicos. Essa infusão de influências garantiu que o gênero permanecesse fresco e excitante.

Em 2023, a cena do UK Garage está mais vibrante do que nunca. Festivais e clubes em todo o mundo estão fervilhando com o som das novas tendências do UK Garage, enquanto os produtores continuam a inovar, elevando o gênero a novos patamares. A popularidade da música em plataformas de streaming e a crescente procura por vinis de Garage mostram que o apetite do público pelo gênero permanece insaciável.

A inovação na cena do UK Garage em 2023 é alimentada por um elemento central: a comunidade. De DJs veteranos a produtores emergentes, todos estão unidos pelo amor ao UK Garage e pela dedicação em levar o gênero adiante. Este compromisso com a inovação e a experimentação é o que mantém o UK Garage na vanguarda da música eletrônica.

Em suma, 2023 é um momento empolgante para ser fã de UK Garage. O gênero continua a evoluir e reinventar-se, mantendo-se sempre relevante no panorama musical. Com uma comunidade engajada, uma onda de talentos emergentes e uma sede insaciável por inovação, o futuro do UK Garage parece mais brilhante do que nunca.


UK Garage manteve sua relevância, sempre evoluindo e reinventando-se para conquistar novas gerações de amantes da música.

Software Engineer, founder, and DJ in my spare time.

Quando usar SSG vs SSR no Next.js: Uma dúvida sincera para um caso real

Descomplicando o GraphQL no WordPress: qual é o significado de "edges" e "node"?

Lidando com projetos WordPress quando você não é especialista: WPGraphQL ou REST API para Headless WordPress

My git cheatsheet

A Saga do TB-303: Do Esquecimento ao Estrelato Eletrônico

Stay up to date

Work