Você já se deparou com o desafio de implementar um novo front-end sem a influência do código antigo no novo? Sim, a luta é real. Ter que criar um projeto totalmente novo apenas para aprender uma estrutura específica ou para testar uma biblioteca, estrutura ou componente no isolamento pode ser um processo enfadonho. Para solucionar e superar esses cenários, experimente uma ferramenta que torna a nossa vida no desenvolvimento muito mais fácil: CodePen.

Neste artigo, você vai entender o que é CodePen, o que você pode fazer nesta plataforma, como fazê-lo e também por que ele pode ser tão útil para acelerar seu desenvolvimento de front-end.

O que é CodePen?

CodePen é uma plataforma onde desenvolvedores e designers podem criar e compartilhar snippets (chamados de canetas) de HTML, CSS, Javascript ou qualquer outro framework, biblioteca ou pré-processador que os gere. Por possuir um editor de código baseado na web, você pode alterar seu código e ver o resultado imediatamente, o que permite uma depuração mais rápida. É perfeito para testar novos projetos ou construir componentes específicos.

E tudo isso sem necessitar instalar nenhum programa, precisando somente acessar o site codepen.io do seu computador, celular ou tablet.

Logo CodePen

Como funciona o CodePen?

Ao acessar o endereço codepen.io, já nos deparamos com a página inicial e podemos iniciar a escrita do nosso código. Para isso, precisamos clicar no botão “Start Coding” e o editor online vai ser exibido. Os códigos estão em três blocos: HTML, CSS e JS. 

Tela de separação das 3 linguagens, HTML, CSS e JS

A plataforma é relativamente fácil de usar , mas possui muitos recursos. Alguns podem até passar despercebidos, mesmo que você já o tenha usado várias vezes.

Procure por canetas

Na página principal, você tem um vislumbre do que pode pesquisar: canetas , pessoas , projetos ou coleções específicas . Você também pode verificar as sugestões do CodePen (é uma ótima opção apenas para ver o código de outras pessoas e aprender alguns truques) ou pode clicar na barra de pesquisa para especificar o que está procurando. Se você for rápido para escrever e pressionar Enter, provavelmente não perceberá que pode explorar tópicos!

Eles são organizados por 3 categorias diferentes: Frameworks , Bibliotecas e padrões de IU. Cada tópico tem sua própria página onde você pode explorar canetas, modelos e recursos. A lista de tópicos está fechada, mas você pode preencher um formulário e solicitar um específico.

Barra de pesquisa
Opções da barra de pesquisa CodePen

Editor de Código

Com esta ferramenta, você pode ver os 3 diferentes tipos de código — HTML, CSS e Javascript — simultaneamentecom a visualização, que se atualiza automaticamente conforme você altera o código . Não há necessidade de alternar entre os arquivos e as guias do navegador, o que torna o processo de codificação mais rápido. 

Além disso, se você não precisa de uma dessas seções, pode ocultá-la ajustando seu tamanho. Alterar o layout desta página também é uma opção. 

O padrão é ter as 3 seções de código na parte superior e a visualização na parte inferior, mas se você quiser fazer algo que precisará de mais altura para ser analisado, como uma versão móvel de um aplicativo da web, você pode alterar o layout no menu alterar visualização e colocar as seções de código verticalmente.

O CodePen permite trabalhar com mais do que HTML puro, CSS e Javascript . Para incluir qualquer outro framework, biblioteca ou pré-processador, você precisa ir para as configurações. Lá você pode encontrar uma guia correspondente a cada uma das seções do código, com opções para alterar o pré-processador e incluir fontes externas (folhas de estilo ou scripts). 

Se você quiser usar o Bootstrap em sua caneta, vá para as folhas de estilo externas da seção CSS, digite “Bootstrap”, selecione a opção que deseja usar e inclua quantas fontes precisar! É realmente muito simples configurar uma caneta.

Nas configurações, você também pode:

  • Editar os detalhes da caneta (bastante útil ao compartilhar suas criações com a comunidade)
  • Fazer um modelo com sua caneta
  • Alterar quantos espaços ou tabulações o recuo do seu código tem
  • colocar como a caneta será salva
  • Mudar sua caneta para privada (se for profissional)
  • Adicione uma captura de tela personalizada (se for profissional)

 Criando e executando um código Javascript

Para a dúvida “É possível usar o React no CodePen?”, a resposta é sim. Se for uma biblioteca JavaScript, a resposta, em quase 100% dos casos, será sim. 

Para usar o React no CodePen, você precisa acessar as configurações de sua caneta e selecionar a guia JS . Para adicionar o React você precisa selecionar a caixa “Add External Scripts / Pens” e escrever “React”. 

Ele mostrará todas as opções disponíveis para que você possa escolher quantas forem necessárias e estará tudo pronto para codificar!

Configurações da caneta CodePen

Para criar várias interações, utilizamos a linguagem de programação Javascript, já que ele é quem manipula elementos HTML.

Se o seu objetivo é simplesmente escrever JS, vamos ao exemplo abaixo:

Código para criação da janela de prompt

No exemplo acima, criamos uma janela de prompt.

Janela de Prompt para colocar o nome exemplo
Resultado do Pop-Up no navegador

O navegador permite a utilização de Javascript. Para que o console seja aberto, você precisa clicar no canto inferior do lado esquerdo.

O comando console.log foi usado abaixo para exibir uma mensagem divertida. Foi escrito o nosso nome “TRYBE” com as letras coloridas, uma de cada cor, e os logs vão dizer as especificações.

Exemplo da exibição no controle.log

HTML:

 <div class="center">
   <h1 class="console">console.log(<span class="red">T</span><span class="orange">R</span><span class="yellow">Y</span><span class="green">B</span><span class="teal">E</span><span </span>);</h1>
   <p>Veja no Console as Especificações</p>
 </div>
 CSS:
 html,
 body {
   height: 100%;
 }
 body {
   background-color: #1B2B34;
   font-family: "Lucida Grande", sans-serif;
   font-size: 14px;
   color: #65737E;
   text-align: center;
   display: flex;
 }
 .center {
   margin: auto;
 }
 .console {
   color: #CDD3DE;
   font-family: "Lucida Console", Monaco, monospace;
 }
 .gray {
   color: #1B2B34;
 }
 .red {
   color: #EC5f67;
 }
 .orange {
   color: #F99157;
 }
 .yellow {
   color: #FAC863;
 }
 .green {
   color: #99C794;
 }
 .teal {
   color: #5FB3B3;
 }
 JS:
 var colors = {
 "gray": "font-weight: bold; color: #1B2B34;",
 "red": "font-weight: bold; color: #EC5f67;",
 "orange": "font-weight: bold; color: #F99157;",
 "yellow": "font-weight: bold; color: #FAC863;",
 "green": "font-weight: bold; color: #99C794;",
 "teal": "font-weight: bold; color: #5FB3B3;",
 }
 // All the colors
 console.log('%cHello', colors.gray);
 console.log('%cHello', colors.red);
 console.log('%cHello', colors.orange);
 console.log('%cHello', colors.yellow);
 console.log('%cHello', colors.teal); 

Atenção! Muito cuidado com este modo, pois não é permitido salvar nada nele. Para que tudo fique seguro e salvo, precisamos nos cadastrar, e para isso é só clicar em “Sign In”. Temos a opção de fazer o cadastro com as redes sociais: Twitter, Facebook, Github ou por e-mail.

Após logados, onde está “UNTILED”, podemos agora inserir um nome identificando o nosso trabalho. Ufa! Agora tudo está salvo!

Flutter e Vue no CodePen

Flutter e Vue no CodePen

No CodePen, também é possível usar Flutter e Vue, mas você não poderá selecioná-los como fez com React. Lembra dos tópicos em que expliquei como pesquisar no CodePen ? É somente por meio deles que você pode acessar os editores personalizados do Vue e do Flutter . 

Vá até a página Explorar Tópicos, selecione o que deseja e, no canto superior direito, você encontrará o botão “Abrir editor” . Nesses editores, você terá apenas 2 seções: uma para código e outra para visualização.

Panorama Geral CodePen

Onde meu programa fica salvo?

Tudo que escrevemos no Codepen não é perdido, os códigos ficam guardados em nosso perfil! 

Clique na sua foto e depois em Profile.

Vamos então para a página do perfil e todos os trabalhos que foram feitos, estarão salvos.

Acessando o perfil no CodePen

Você não precisa de uma conta

Se você não quiser criar uma conta, não precisa. Você ainda pode pesquisar e usar o Editor de código. No entanto, você não poderá salvar suas canetas para revisitá-las mais tarde. Portanto, se você deseja apenas testar algumas coisas, pode fazer isso sem uma conta.

“Pegando emprestado e emprestando” projetos: como fazer fork?

Você pode compartilhar sua caneta de duas maneiras: usando o botão de compartilhamento de mídia social ou a funcionalidade incorporada . Para compartilhá-lo nas redes sociais, você pode fazê-lo diretamente na “Visualização de detalhes” ou no último botão do rodapé da Visualização do editor. 

Para compartilhar usando o código embutido, você deve selecionar “Embutido” no rodapé da Visualização do Editor (3ª opção da direita) e copiar o código gerado. Este método é ótimo se você deseja mostrar sua caneta em um site, incorporando algo como a Visualização de Detalhes.

Aviso: se você quiser compartilhar a caneta de outra pessoa, certifique-se de copiá-la primeiro . Use o recurso “Fork” (4ª opção do rodapé do Code Editor) e ele copiará a caneta exatamente como ela está. Você nunca sabe se a pessoa responsável por ela vai excluí-la ou alterar algo.

Isso significa que podemos “pegar” projetos de outros membros e armazenar no seu perfil, permitindo que dessa forma você faça alterações, mas sem modificar o projeto inicial. 

Como fazer o Fork

Como configurar o Codepen?

Configurar CodePen

Entre em configurações e clique na opção settings.

Em configurações, é possível escolher o tamanho e a fonte das letras entre outros detalhes do editor.

Uma dica bastante útil, é deixar ativo o autocomplete, dessa forma o Codepen vai preencher de forma automática o que a gente começar a codar. 

Localize “Editor Options” e marque a caixa “Autocomplete”.

Clique em “Save All Settings” e finalizamos a configuração.

Alterando o layout do editor de código

O layout padrão do Codepen é ter o código na esquerda e o resultado na direita, mas temos outras opções também!

Clique em “Change View”

Layout de editor de códigos

Quais as vantagens de usar o Codepen?

Interface simples

Sem dúvidas o Codepen, conta com uma interface simples, de fácil compreensão, se tornando uma ferramenta essencial para quem quer ensinar ou aprender programação.

HTML, CSS e Javascript juntas!

O HTML, CSS e Javascript nos editores do Codepen estão vinculados, isto é, a gente não precisa criar uma conexão entre eles, as linguagens são renderizadas juntas.

Repare que no box de HTML, o código ja é apresentado dentro da classe <body>, sem a necessidade de descrevê-lo no editor.

Interatividade

Uma palavra que define a essência do Codepen, é “Interatividade”.

Uma de suas características é a possibilidade de compartilhamento, como dito acima, e essa interação com “cara de rede social”, torna o uso da ferramenta muito mais dinâmica

Também conseguimos trabalhar com mais pessoas, dividir o código entre uma ou mais pessoas desenvolvedoras sem que tenha a necessidade de instalar softwares ou ficar enviando arquivos uma para outra.

Facilidade de encontrar erros e falhas

Uma função bastante útil é a possibilidade de testar seus códigos em tempo real, quando habilitado a opção de renderização automática. Identificar erros e falhas é bem importante, afinal!

Outro detalhe que nos ajuda a evitar erros e falhas é o fato do Codepen exibir cada linguagem em um box específico, ótimo para programadores e programadoras que estão aprendendo a profissão.

Modo professor e modo apresentação

Modo Professor CodePen

Se você ensina programação, o Codepen pode ser seu fiel aliado!

Isso porque, com a função “Modo Professor”, conseguimos criar uma sala de aula dentro do Codepen.

Nesta sala de aula, os alunos conseguem ver em tempo real o desenvolvimento / edição de um código, mesmo que o administrador do espaço seja somente a professora ou professor. 

Além disso, é possível ter 100 pessoas em uma mesma sala! 

O único detalhe é que essa opção está disponível apenas na versão PRO (planos pagos).

Modo apresentação

Modo apresentação CodePen

O Modo Apresentação do CodePen também pode ser utilizado por pessoas instrutoras e professoras de programação.

É possível, com esta função, transformar o seu pen em uma apresentação com ótimas condições de visualização, como por exemplo: tema claro ou escuro, tamanho da fonte, tamanho da pré-visualização da execução do código.

Com o modo apresentação, conseguimos apresentar projetos em ambiente profissional e trabalhos de finalização de cursos para estudantes.

Para ativar esta função, clique em “Change View” no canto superior direito do seu pen e selecione a opção Presentation Mode.

Motivos para usar CodePen

Se você nunca o usou antes, CodePen pode ser uma ótima ajuda! Ele permite que você aprenda e codifique com eficácia . Se você está iniciando um novo projeto de desenvolvimento de front-end, aqui estão os principais motivos pelos quais você deve usar CodePen .

É grátis

O que mais eu preciso dizer? Você pode fazer tudo o que mencionei acima sem ter que pagar nada . Se quiser, você pode adquirir o Pro e pagar uma assinatura mensal para ter acesso a recursos adicionais (como canetas particulares, capturas de tela personalizadas, ativos e mais tipos de visualizações). 

Quatro seções de tela com visualização em tempo real

Definitivamente, uma das principais vantagens é poder ver tudo em uma única tela . Não ter que procurar guias do navegador ou guias de arquivos em um IDE torna a codificação mais rápida e fácil. Além disso, ele oferece uma visualização em tempo real , o que diminui o tempo de recarregar as páginas sempre que precisamos ver se o código muda.

Usando mais do que CSS, HTML, Javascript simples

Pré-processadores, bibliotecas e frameworks foram criados para tornar nossa vida mais fácil. CodePen consegue entregar uma ferramenta Code Editor onde podemos usar todos eles. Podemos fazer isso e configurar uma caneta com o que quisermos usar, em apenas alguns cliques. Quão bom é isso?

Exemplos de tudo

Se você precisar encontrar exemplos de algo feito anteriormente, provavelmente os encontrará aqui! Animações, elementos, páginas inteiras, o que você quiser, eles têm!

Gostou do nosso conteúdo? Saiba um pouco mais agora sobre Deploy, o que é e como realizá-lo!

0 Shares:
Você também pode gostar