DEV Community: Diego Martins de Pinho

As últimas novidades do ECMAScript 2024, 2023, 202x…

Diego Martins de Pinho — Fri, 13 Sep 2024 13:58:01 +0000

O JavaScript não para de evoluir e precisamos estar sempre antenados nas novidades do ECMAScript para nos mantermos a par das novas funcionalidades e melhorias trazidas para a linguagem.

A verdade é que com a correria do dia a dia, dificilmente conseguimos tempo parar para avaliar/estudar essas novidades, e é por isso mesmo que separei aqui pra você quais são as principais funcionalidades trazidas nos últimos anos de forma bem didática e objetiva.

Dificilmente alguma delas terá o impacto que tivemos com as mudanças que vieram lá do ECMAScript 6 (ou 2015) há alguns anos, maaaaaas, tivemos algumas novas coisas bem interessantes que facilitam a resolução de alguns problemas chatos, como por exemplo, lidar com múltiplas Promises.

Como são várias funcionalidades e artigos (com exemplos e tudo mais), deixarei abaixo o link da playlist no Youtube e os respectivos artigos.

Espero que goste e que te ajude! ❤

Primeiro vídeo da série

Playlist no Youtube

https://www.youtube.com/playlist?list=PL2wxg5Kln_8KUr3QZpVOxhxw7wthavUhN

Links dos artigos

Mockando um back-end com o JSON Server

Diego Martins de Pinho — Wed, 14 Sep 2022 02:05:20 +0000

Contexto

Você já passou por uma situação onde precisava do back-end pronto para implementar/testar a integração com o seu front-end? Pois é... isso pode ocorrer com mais frequência do que gostaríamos. É para este e outros cenários semelhantes que eu gostaria de apresentar o JSON Server.

Com este pacotinho, conseguiremos "criar um back-end" em menos de 30 segundos que será capaz não somente de armazenar dados, assim como dar suporte para requisições do tipo GET, POST, PUT... etc, seguindo todo o padrão Rest.

Edição em vídeo

Prefere assistir? Não tem problema, gravei também em vídeo!

JSON Server

O JSON Server é um dos pacotes mais completos que eu já vi no que diz respeito a quantidade de configurações e funcionalidades. Para entender o seu funcionamento, vamos partir de um exemplo prático.

Criaremos um novo projeto de front-end usando o parcel e mais algumas dependências. Basta digitar os comandos abaixo no seu terminal de preferência:

npm init -y
npm i -D parcel
npm i json-server axios

E depois no package.json, configure um script para rodar o projeto em um servidor de desenvolvimento:

"scripts": {
  "dev": "parcel index.html"
},

Muito bem. Para o nosso teste, faremos uma tela com dois botões: um que deverá fazer uma requisição do tipo GET e trazer todos os dados de usuários; e outra que fará uma requisição do tipo POST para cadastrar um novo usuário. Minha intenção é te mostrar que podemos fazer vários tipos de requisições diferentes (como em uma API REST).

Crie um arquivo index.html na raiz do projeto com essa estrutura:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Server</title>
</head>

<body>
  <button class="search">Todos os usuários</button>
  <div><input type="text" class="user" /><button class="insert">Inserir usuário</button></div>
  <script type="module" src="index.js"></script>
</body>

</html>

Em seguida, crie um arquivo index.js na raiz do projeto com essa estrutura:

const axios = require("axios");

async function getAllUsers() {
  try {
    const { data } = await axios.get("http://localhost:3000/users");
    console.log("users", data);
  } catch (error) {
    console.log("error", error);
  }
}

async function addNewUser() {
  const user = document.querySelector(".user").value;
  try {
    await axios.post("http://localhost:3000/users", {
      name: user
    })
  } catch (error) {
    console.log("error", error);
  }
}

window.onload = () => {
  document.querySelector(".search").addEventListener("click", getAllUsers);
  document.querySelector(".insert").addEventListener("click", addNewUser);
}

Note que as requisições estão sendo feitas para o localhost:3000. Este endereço não é por acaso. Por padrão, é neste local que o servidor local do JSON Server irá funcionar.

O primeiro passo para configurar o JSON Server é criarmos um arquivo JSON que será o nosso banco de dados. Crie-o na raiz do projeto. Eu chamarei o meu de db.json e o iniciarei com alguns dados. A estrutura deste arquivo também fica ao seu critério.

{
  "users": [
    {
      "id": 1,
      "name": "diego"
    },
    {
      "id": 2,
      "name": "luiza"
    },
    {
      "id": 3,
      "name": "marcela"
    },
    {
      "id": 4,
      "name": "maria"
    },
    {
      "id": 5,
      "name": "gilberto"
    }
  ]
}

Feito isso, tudo o que precisamos fazer agora é criar um script para subir este back-end. Para isso, volte no package.json e crie uma nova instrução:

"scripts": {
  "dev": "parcel index.html",
  "dev:json": "json-server db.json"
}

E se eu te disser que só isso é o sufiente pra fazer tudo funcionar? Abra dois terminais e rode o comando npm run dev em um e npm run dev:json em outro! Pronto! 😃

Criando uma base aleatória

Em alguns cenários mais complexos, você vai querer uma quantidade maior de dados para testar. É o caso, por exemplo, de uma paginação (que olhem só, tem suporte nativo no JSON Server!). Nestas situações, se torna bastante desgastante ter que ficar criando os dados um por um. E se utilizarmos a biblioteca Faker para nos ajudar?

O JSON Server disponibiliza uma forma de criar um banco em memória baseado no retorno de uma função. Nesta função, podemos usar o Faker (por exemplo), para gerar os dados do nosso teste. Para ver isso funcionando, crie um novo arquivo na raiz do projeto chamado seed.js.

Neste arquivo, coloque o seguinte conteúdo:

const { faker } = require("@faker-js/faker");

module.exports = () => {
  const data = { users: [] };
  for(let i = 0; i < 1000; i++) {
    data.users.push({
      id: i,
      name: faker.name.firstName()
    })
  }

  return data;
}

Perceba que estamos criando 1000 usuários, returnando este array e exportando essa função. Com isso em mãos, basta criarmos um script no package.json que fará o JSON Server usar estes dados:

"scripts": {
  "dev": "parcel index.html",
  "dev:json": "json-server db.json",
  "dev:json:seed": "json-server seed.js"
}

Agora, ao invés de usar o npm run dev:json, só trocar pelo npm run dev:json:seed!

Considerações finais

O JSON Server está longe de ser a única opção de ferramenta para a criação de mocks de back-end, por outro lado, é muito difícil encontrar ferramentas tão completas e fáceis de usar como essa. Aqui só mostrei pra vocês a pontinha do iceberg, vale entrar na documentação e explorar as possibilidades.

Agradecimentos

Curtiu? Então dê uma passada no meu canal no Youtube ou me procure nas redes sociais para trocarmos uma ideia!

Youtube
Site

Autenticação básica usando o GitHub OAuth + Parcel + Node

Diego Martins de Pinho — Thu, 01 Sep 2022 01:56:04 +0000

Contexto

Começaremos sendo bem honestos: lidar com o processo de criação de usuários - e respectivamente a sua autenticação no sistema - é um perrengue. Além de termos que criar uma boa experiência no front-end, precisamos garantir que o back-end é seguro o sufiente para proteger estes dados sensíveis.

E se eu te disser que existe uma alternativa que, em boa parte dos casos, é mais segura e preferível pelos usuários? Pois bem, estou falando do protocolo OAuth (Open Authorization)!

Em resumo, este protocolo padroniza a forma como podemos atribuir para agentes terceiros a criação e autenticação de usuários dentro de uma aplicação. Sabe quando você usa o Twitter, GitHub, Facebook, Google e afins para logar em um site? É disso mesmo que eu estou falando.

Neste artigo, te ensinarei o básico para fazer este fluxo utilizando a integração GitHub OAuth.

Edição em vídeo

Também gravei um vídeo com todos os passos.

Setup

Para exemplificar esta integração, criaremos uma pequena aplicação usando o Parcel, Node e claro, o GitHub OAuth. O primeiro passo é criar um diretório com dois subdiretórios, um sendo front-end e outro back-end. Inicie ambos os diretórios pelo terminal com o comando npm init -y.

Front-end

Para o front-end, instale os seguintes pacotes:

npm i axios query-string
npm i -D parcel

E para finalizar, no package.json crie um script para rodar a aplicação. Eu costumo usar o termo dev, mas pode ser qualquer coisa:

"scripts": {
  "dev": "parcel index.html"
}

Back-end

Para o back-end, instale os seguintes pacotes:

npm i axios cors dotenv express query-string
npm i -D nodemon

Feito isso, já temos o setup pronto para desenvolvimento. Agora vamos até o GitHub criar um app para a integração.

GitHub

Acesse o seu perfil no GitHub e procure por Settings > Developer Settings. Lá você encontrará a opção de OAuth Apps. Crie um novo app com os dados abaixo (o nome é arbritário, mas use as urls de localhost indicadas).

O localhost:1234 será o servidor web local do Parcel.

Fluxo

Antes de sairmos codando, é importante entender exatamente qual o fluxo dos passos que seguiremos aqui. Se entrarmos na documentação oficial do GitHub para a integração OAuth, veremos que ela acontece em três etapas:

1 - Autorização
Neste passo, precisamos enviar uma requisição do tipo GET para https://github.com/login/oauth/authorize enviando os seguintes dados (via query strings): client_id, redirect_uri e scope. As duas primeiras informações já imagino que você saiba de onde vem, já a última explicarei já já.

2 - Recebimento e troca de código
Se a requisição acima for feita com sucesso, o GitHub te retornará um código provisório (chamado de code). Este código tem a expiração de apenas 10 minutos e deve ser usado para obter um access_token. Para isso, devemos fazer uma requisição do tipo POST para https://github.com/login/oauth/access_token enviando os seguintes dados: client_id, client_secret, code e redirect_url.

3 - Uso da API
Após receber o código definitivo, também chamado de access_code, podemos usá-lo para fazer requisições autenticadas na API do GitHub. Para isso, basta passar o código por meio do cabeçalho Authorization na requisição.

Agora que entendemos quais são os passos, fica muito fácil desenvolver o código usando as bibliotecas já preparadas anteriormente. Bora?

Desenvolvimento

Front-end

Começaremos com o front-end. Nosso projeto terá uma única página onde tudo vai acontecer. Criaremos o index.html com um botão que acionará o processo de autenticação. Além disso, apenas incluiremos o index.js que será gerenciado pelo Parcel.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GitHub OAuth Integration POC</title>
</head>

<body>
  <h1>Deseja logar?</h1>
  <button class="login">Logar com o GitHub</button>
  <script type="module" src="index.js"></script>
</body>

</html>

Feito isso, partiremos para o index.js. Neste arquivo, implementaremos a seguinte lógica:

1 - Adiciona um listener no botão que redireciona a página para o GitHub com parâmetros necessários.
2 - No onload, verificaremos se existe a query string code. Se ela existir, significa que a página é um redirecionamento do GitHub. Logo, usaremos esse código para obter dados do usuário no nosso back-end (onde acontecerá a troca pelo access_code.
3 - Os dados obtidos simplesmente serão exibidos no console.

import qs from "query-string";
import axios from "axios";

function redirectToGithub() {
  const GITHUB_AUTH_URL = 'https://github.com/login/oauth/authorize';
  const params = {
    response_type: 'code',
    scope: 'user',
    client_id: process.env.CLIENT_ID,
    redirect_uri: process.env.REDIRECT_URL,
  }

  const queryStrings = qs.stringify(params);
  const authorizationUrl = `${GITHUB_AUTH_URL}?${queryStrings}`;
  window.location.href = authorizationUrl;
}

window.onload = async () => {
  // button
  document.querySelector(".login").addEventListener("click", redirectToGithub);

  // checks if user is returning from github
  const { code } = qs.parseUrl(window.location.href).query;
  if(code) {
    try {
      const response = await axios.post(`${process.env.BACK_END_URL}/login`, { code });
      const user = response.data;
      alert("você está logado, meu chapa! dá uma olhada no console!");
      console.log(user);
    } catch (err) {
      alert("ops, deu algum xabú");
      console.log("err", err);
    }
  }
}

Note que no objeto params, há o uso do scope e as algumas informações são obtidas através do process.env. O scope é uma informação que passamos ao GitHub para indicar quais são os tipos de permissões que desejamos pedir ao usuário. Neste caso queremos apenas os dados sobre o usuário, mas existem vários outros. A lista completa está aqui.

Já o uso do process.env está associado ao uso de variáveis de ambiente. O Parcel já vem integrado com o .env, assim, podemos esconder informações sensíveis, como chaves de API e senhas. No caso deste projeto, basta criar um arquivo .env na raiz com o conteúdo:

CLIENT_ID=<SEU_CLIENT_ID_AQUI>
REDIRECT_URL=http://localhost:1234
BACK_END_URL=http://localhost:5000

Pronto, já podemos partir para o back-end!

Back-end

No back-end utilizaremos o express para criar o endpoint /login que ficará responsável por:

1 - Fazer a troca do code por access_token
2 - Usar o access_token para fazer uma requisição para o GitHub para obter as informações do usuário vinculado a este token.

A primeira parte do código está sendo representada pela função exchangeCodeForAccessToken() enquanto a segunda pela função fetchUser().

import express, {json} from "express";
import cors from "cors";
import axios from "axios";
import qs from "query-string";
import dotenv from "dotenv";
dotenv.config();

const app = express()
app.use(cors());
app.use(json());

app.post("/login", async (req, res) => {
  try {
    const token = await exchangeCodeForAccessToken(req.body.code);
    console.log("token", token);

    const user = await fetchUser(token);
    res.send(user);
  } catch(err) {
    console.log("err", err.response.data);
    res.sendStatus(500);
  }
});

async function exchangeCodeForAccessToken(code) {
  const GITHUB_ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';
  const {REDIRECT_URL, CLIENT_ID, CLIENT_SECRET} = process.env;
  const params = {
    code,
    grant_type: 'authorization_code',
    redirect_uri: REDIRECT_URL,
    client_id: CLIENT_ID, 
    client_secret: CLIENT_SECRET,
  };

  const { data } = await axios.post(GITHUB_ACCESS_TOKEN_URL, params, {
    headers: {
      'Content-Type': 'application/json'
    },
  });

  const parsedData = qs.parse(data);
  return parsedData.access_token;
}

async function fetchUser(token) {
  const response = await axios.get("https://api.github.com/user", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  return response.data;
}

app.listen(5000, () => {
  console.log(`Server is up and running on port 5000`);
});

Duas coisas importantes de serem notadas. Na função exchangeCodeForAccessToken() usamos na variável params um parâmetro chamado client_secret. Este segredo deve ser criado na mesma página onde temos o client_id.

O segundo ponto importante é que a requisição para obter o usuário é feita passando como header da requisição o access_token.

Por fim, fizemos uso da biblioteca dotenv para trazer as informações do arquivo .env, que no caso do back-end possui os seguintes dados:

CLIENT_ID=<SEU_CLIENT_ID_AQUI>
CLIENT_SECRET=<SEU_CLIENT_SECRET_AQUI>
REDIRECT_URL=http://localhost:1234

Considerações finais

O processo de autenticação usando o GitHub OAuth é apenas a "ponta do iceberg". Ainda é papel do desenvolvedor tratar os dados e tudo o que é necessário envolvendo a entidade do usuário e o token. O que salvar? Como salvar? O que usar? Isso são decisões que partirão do seu design de projeto.

Agradecimentos

Curtiu? Então dê uma passada no meu canal no Youtube ou me procure nas redes sociais para trocarmos uma ideia!

Youtube
Site

Como criar uma FAKE API REST para testes — JSONPlaceholder

Diego Martins de Pinho — Thu, 27 Feb 2020 22:23:13 +0000

Fora os aventureiros que tentam encontrar altas emoções no mundo Full Stack, boa parte dos profissionais de programação escolhem uma área específica para atuar: front-end, back-end, devops, etc. Felizmente as opções são abundantes.

A grande questão é que na vida real um único produto/serviço precisa da poderosa união de todas essas áreas para que possa funcionar de forma satisfatória. E é ai que mora um dos grandes desafios no desenvolvimento de software.

Para facilitar este trabalho de sinergia entre as áreas, hoje gostaria de mostrar como funciona o JSONPlaceholder, uma simples ferramenta que simula o back-end de uma aplicação, deste modo permitindo que o front-end consiga trabalhar nas questões visuais antes mesmo do back-end estar finalizado — claro, desde que exista um consenso em como as APIs irão funcionar (endpoints, estrutura do json, tipos de respostas, etc). Além de ser uma boa ferramenta de estudos para treinar pequenas aplicações e protótipos.

É tudo muito simples e sem complicação. Basta seguir os passos adiante para sair usando.

Versão em Vídeo

Além das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Conhecendo o JSONPlaceholder

A proposta do JSONPlaceholder — projeto de código aberto hospedado no GitHub e com mais de 44 mil estrelas — é bem simples: ser uma ferramenta de fácil acesso para testes e prototipação.

É possível utilizá-la de duas formas: com dados prontos da plataforma ou com dados personalizados. Vamos ver como trabalhar com cada uma das formas.

Consumindo respostas

O JSONPlaholder já possui toda uma estrutura de dados que podem ser utilizados na sua aplicação. Estes recursos (endpoints) são:

/posts : 100 posts
/comments : 500 comments
/albums : 100 albums
/photos : 5000 photos
/todos : 200 todos
/users : 10 users

Estes recursos possuem relações entre si. O que significa na prática que os posts possuem comentários, álbuns possuem fotos, e assim por diante. Estas relações podem ser observadas nas rotas que podemos consumir, como por exemplo:

GET /posts
GET /posts/
GET /posts/1/comments
GET /comments?postId=1
GET /posts?userId=1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

Como é possível notar, todos os tradicionais métodos HTTP estão disponíveis para uso, sendo que cada um dos métodos tem um objetivo (conforme padrão em APIs REST).

Para usar o serviço em sua aplicação, basta fazer uma requisição para qualquer um dos endpoints disponíveis, como segue o exemplo:

Configurando respostas

Para usar dados próprios na plataforma, o processo é bem simples e até certo ponto criativo. O primeiro passo será criar um novo repositório no GitHub. Feito isso, crie um arquivo chamado db.json . É neste arquivo que criaremos nossa "estrutura" de endpoints.

Para mostrar um exemplo, imagine que estamos desenvolvendo uma API para acessar os cursos da Code Prestige. Poderíamos ter algo como:

E pronto! Para acessar o conteúdo da sua Fake API basta acessar:
https://my-json-server.typicode.com//

No caso deste artigo, podemos acessar em:
https://my-json-server.typicode.com/DiegoPinho/fakeapi-testes

Se tudo estiver certo, uma página como essa será criada para sua Fake API:

Esta página é como a "documentação" da API. Agora basta criar uma aplicação que consuma esta API, como no exemplo abaixo onde fazemos uma requisição para listar os cursos:

Bem legal, né? Mas antes que você saia usando ela por aí, vale ressaltar quais são as limitações:

As mudanças NÃO SÃO PERSISTIDAS
As requisições possuem cache de 1 minuto
db.json tem limites (você não pensou em subir o back-end de produção aqui, né?)
Todos os servidores são públicos
Repositórios privados ainda não são suportados

Se nenhuma destas limitações for um real problema para o que você quer fazer, não há porque perder tempo. É só sair usando ;)

Conclusão

Depender do back-end para o desenvolvimento do front-end pode ser um grande empecilho para o desenvolvimento de um projeto (e claro, o vice-versa também pode se tornar um grande problema). Felizmente mais soluções como o JSONPlaceholder estão aparecendo, pois assim até mesmo os mais inexperientes em back-end poderão simular as respostas e fazer o seu trabalho com mais tranquilidade.

Como estilizar as mensagens do terminal no Node

Diego Martins de Pinho — Fri, 07 Feb 2020 21:17:38 +0000

Neste artigo quero falar de uma biblioteca muito legal que nos permite estilizar as mensagens do console em uma aplicação Node. Estou falando da biblioteca chalk.

Versão em vídeo

Além das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Estilizando com Estilo

É comum usarmos o Console como ferramenta nas nossas aplicações com Node, seja para validar algum dado, expor alguma mensagem/erro importante ou então ajudar no debug de dados. Entretanto, da maneira como isso é feito nativamente tem pouco apelo visual, afinal de contas, todas as mensagens tem a mesma cara.

Com o chalk — biblioteca de código aberto disponível no GitHub com mais de 13k estrelas no GitHub e atualmente na versão 3.0.0 — conseguimos aplicar vários tipos de estilos as mensagens do terminal.

Para testá-la precisamos inicializar um projeto com o npm. Para garantir que o resultado seja exatamente igual ao que mostrarei aqui, certifique-se de instalar como dependência a versão 3.0.0.

npm i chalk@3.0.0

Vamos criar um arquivo app.js e criar nossa primeira mensagem estilizada usando o método green().

const chalk = require('chalk');
const msg = chalk.green('Hello world!');
console.log(msg);

O resultado fica muito legal:

Bacana, né? Vamos explorar mais algumas funcionalidades do chalk.

Estilizando de forma encadeada

Como a página oficial da biblioteca diz, o chalk possui uma API flexível que nos permite encadear e aninhar os estilos. Isso significa que podemos, por exemplo, aplicar negrito e cor em uma mensagem em uma tacada só:

const msg2 = chalk.bold.red("Hello World!"); 
console.log(msg2);
// ou chalk.red.bold , a ordem não importa!

A ordem das chamadas não importa, o resultado é o mesmo:

Além disso, também podemos aninhar estilos. Como por exemplo:

const msg3 = chalk.bold(chalk.red("Hello ") + chalk.green("World"));
console.log(msg3);

As strings "Hello" e "World" possuem características distintas, mas ambas herdarão o negrito. Veja só:

Para finalizar, vamos dar uma olhada em como é fácil criar suas próprias regras de estilo usando a API do chalk.

Estilizando com o seu estilo

Podemos criar nossas próprias regras usando a API do chalk de forma muito prática. Primeiro vou expor um exemplo e então exploramos o que cada linha está fazendo.

const error = chalk.bold.red;
const warning = chalk.bold.keyword('orange');
console.log(error("Algo errado não está certo!"));
console.log(warning("Não está errado mas também não está certo!"));

Aqui criamos dois estilos, error e warning. O primeiro, deixa a mensagem em negrito e vermelha. A segunda deixa a mensagem em negrito e com a cor laranja.

Na hora de exibir as mensagens, basta usarmos as palavras-chave criadas para os estilos! Veja só o resultado:

Divertido e prático, não? :)

Código-fonte

Para quem quiser fazer os testes sem ter que ficar copiando do artigo, segue o código-fonte:

Conclusão

O chalk não é nenhuma biblioteca super revolucionária e pode parecer inútil para muitos, no entanto, se você for um usuário apaixonado pelo Console e o utiliza com frequência, não há dúvidas de que vale a pena dar uma olhada.

Carbon — Imagens do seu código com visual incrível

Diego Martins de Pinho — Fri, 24 Jan 2020 20:08:09 +0000

Se você é assim como eu e gosta de escrever artigos, ensinar programação, ajudar as pessoas e/ou fazer palestras sobre tecnologia, essa dica é especialmente pra você.

Quando não estamos trabalhando com editores de código, fica realmente difícil mostrar o código para alguém. Seja em um slide, em um artigo ou em qualquer outro formato, o código não fica legal porque geralmente não conta com a formatação que temos nos editores (ex: VS Code, Atom, Sublime, …).

Quando o site não tem um highlighter para código, o código fica sem nenhuma cor ou destaque, tornando-o pouco intuitivo ou interessante. É por isso que geralmente usamos o Gist do GitHub pra isso. Mas no caso de slides, nem o Gist salva.

Mas e se eu te disser que existe uma outra alternativa bem legal que deixa o nosso código apresentável desta maneira:

O que você acha? Bem legal né? Se achou interessante, leia o resto do artigo (ou veja o vídeo abaixo) para saber mais sobre como funciona o Carbon.

Versão em vídeo

Além das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Mostrando o seu site Like a Boss

O Carbon é um projeto de código aberto que tem como objetivo tornar a visualização e compartilhamento de código mais amigável e agradável. O projeto está disponível no GitHub e já conta com mais de 22 mil estrelas, o que de certa maneira mostra o sucesso da ferramenta.
Para utilizá-la o processo é extremamente simples. Sempre que você quiser compartilhar algum trecho de código, basta entrar na homepage do Carbon.

Todo o processo é feito sem sair desta página. Está vendo onde o código JavaScript está escrito? Pois bem, esta área é editável. Você pode apagar o código que está lá e colocar o que quiser ali, desde JavaScript, Python, Java, até comandos Bash; afinal, o Carbon dá suporte a mais de 30 linguagens de programação e vários temas diferentes.

Além disso, temos o botão da engrenagem. Nesta opção, encontramos configurações mais avançadas, tais como:

Padding (vertical e horizontal)
Fonte (estilo, tamanho)
Line Numbers (on/off)
Prettify (você pode subir uma configuração personalizada)
Drop Shadow
Etc

Todas estas configurações são salvas em local storage e podem ficar associadas ao seu perfil, basta logar com a sua conta do GitHub no canto superior direito do site.

Por fim, temos o botão de Export. O legal do Carbon é que ele nos dá duas possibilidades muito boas de exportação:

Imagem PNG ou SVG
Embed por URL ou iFrame

Agora não tem mais desculpas para mostrar os seus códigos "sem sal" nas suas apresentações. ;P

Conclusão

Existem mil e uma maneiras diferentes de mostrar o seu código para uma outra pessoa, mas poucas delas são tão eficientes visualmente quanto o Carbon. Ao imitar os editores de código, a plataforma nos oferece a oportunidade de mostrar trechos de código de uma maneira bonita e eficiente, sem tornar este processo chato e/ou burocrático demais. É uma ferramenta digna de se deixar nos favoritos.

DEV Community: Diego Martins de Pinho

As últimas novidades do ECMAScript 2024, 2023, 202x…

Primeiro vídeo da série

Playlist no Youtube

Links dos artigos

Mockando um back-end com o JSON Server

Contexto

Edição em vídeo

JSON Server

Criando uma base aleatória

Considerações finais

Agradecimentos

Autenticação básica usando o GitHub OAuth + Parcel + Node

Contexto

Edição em vídeo

Setup

Front-end

Back-end

GitHub

Fluxo

Desenvolvimento

Front-end

Back-end

Considerações finais

Agradecimentos

Como criar uma FAKE API REST para testes — JSONPlaceholder

Versão em Vídeo

Conhecendo o JSONPlaceholder

Consumindo respostas

Configurando respostas

Conclusão

Como estilizar as mensagens do terminal no Node

Versão em vídeo

Estilizando com Estilo

Estilizando de forma encadeada

Estilizando com o seu estilo

Código-fonte

Conclusão

Carbon — Imagens do seu código com visual incrível

Versão em vídeo

Mostrando o seu site Like a Boss

Conclusão

Referências