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?
- Como funciona o CodePen?
- Criando e executando um código Javascript
- Onde meu programa fica salvo?
- “Pegando emprestado e emprestando” projetos: como fazer fork?
- Como configurar o Codepen?
- Alterando o layout do editor de código
- Quais as vantagens de usar o Codepen?
- Motivos para usar CodePen
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.
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.
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.
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!
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:
No exemplo acima, criamos uma janela de prompt.
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.
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
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.
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.
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 configurar o 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”
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
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
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!
