Com a grande diversidade de ferramentas e plataformas voltadas ao aprendizado da programação, tornar-se uma pessoa programadora hoje está mais fácil do que nunca.
Além de uma imensa quantidade de conteúdo de qualidade disponível na internet, cursos online e escolas de programação especializadas na formação deste tipo de profissional, há muitas plataformas que facilitam muito a compreensão prática do que é de fato programar, e uma delas é o CodePen.
O post Codepen: o que é e como funciona explica como utilizar, configurar e quais são as suas principais vantagens da ferramenta CodePen.
Codepen: o que é e como funciona
O CodePen é um ambiente online para desenvolvimento e execução de códigos front-end criados em HTML, CSS e JavaScript.
Um de seus grandes diferenciais é que, além de ser um ótimo editor de códigos, o CodePen também é uma espécie de rede social para programadores e estudantes: com ele é possível seguir pessoas, curtir outros projetos e comentar nos códigos de outros profissionais.
Cada um desses códigos fica armazenado e salvo no ambiente onde ele foi desenvolvido, chamado de pen.
Um usuário pode criar quantos pens desejar, por isso a plataforma também pode ser uma ótima forma de montar um portfólio de programação para iniciantes.
Os editores de códigos online também são alternativas viáveis para quem, por alguma razão, não pode ter um software de edição de código instalado em sua máquina, como VS Code, Atom ou Sublime.
O CodePen pode ser acessado de computadores, tablets ou smartphones.
Como funciona?
Uma das maiores vantagens do CodePen é sua interface extremamente simples.
Além de um uso bastante intuitivo, ele ainda conta com a vantagem de não exigir absolutamente nenhuma instalação externa para ser utilizada: todos os ambientes e funções funcionam 100% online.
Para começar a explorar a ferramenta são necessários apenas o acesso à internet e um navegador web.
Acessando o site
Para começar a desenvolver seus códigos, basta acessar o site https://codepen.io/ e clicar, no menu à esquerda, em Start Coding.
Mas, como eu disse logo acima, o CodePen não é apenas um editor de códigos, mas também uma espécie de rede onde projetos podem ser compartilhados e expostos a outros profissionais da comunidade.
Ao criar uma conta, além de poder salvar todos os pens que criou, você ainda possui um perfil que pode ser seguido e visualizado por outros usuários.
Para isso, clique em Sign Up, no canto superior direito, e faça seu cadastro.
É possível se registrar na plataforma a partir de contas em outras redes sociais, como Twitter, Facebook e GitHub.
Configurando o layout do editor
O layout do editor é muito simples.
Conforme é possível ver na imagem abaixo, lá estão três boxes de criação de códigos. O primeiro, de HTML; o segundo, de CSS e, o terceiro, para JavaScript.
Os dois primeiros boxes são voltados a linguagens de marcação, enquanto o terceiro de fato programa e manipula os dois primeiros.
Na parte branca inferior, os códigos são renderizados e executados. É possível ver, em tempo real, o resultado do que está sendo desenvolvido acima.
A disposição padrão dos elementos é a dos três boxes lado a lado na parte inferior da tela, enquanto o espaço de renderização fica abaixo, mas é possível alterar essa configuração.
Para arranjar os itens de outra forma, clique em Change View no menu superior direito e escolha a opção desejada.
Executando
Os códigos desenvolvidos no CodePen, por padrão, são executados automaticamente no espaço em branco que toma parte da tela.
Porém, é possível alterar uma configuração para que a renderização só aconteça quando você preferir.
Para isso, vá em Settings, no canto superior direito, depois em Behavior, no menu à esquerda do box que abrirá em seguida.
Para desativar a execução automática, desabilite a opção Auto-Updating Preview.
Ao alterar essa configuração, ficará disponível no menu superior do seu pen um botão Run. Para executar suas alterações de código, basta clicar nele.
Neste menu também é possível desabilitar a função de salvamento automático.
Se você deseja levar e executar seus códigos em outro ambiente, é possível salvar os pens criados no CodePen em sua conta do GitHub através da integração entre as duas plataformas.
Onde meus códigos ficam armazenados?
Todos os pens criados pelos usuários do CodePen ficam armazenados em seus perfis.
Isso significa que, para acessá-los novamente, é necessário voltar ao site e encontrá-los na sessão Your Work.
Uma das vantagens desse armazenamento em nuvem é a possibilidade de poder acessá-lo de qualquer lugar, ainda que você esteja sem sua própria máquina. Basta acessar à internet de qualquer dispositivo.
É possível, ainda, acessar os seus códigos a partir do perfil de outro usuário. Para isso, será necessário encontrar o seu perfil dentro da rede e, então, buscar pelos seus pens disponíveis.
Como compartilhar ou emprestar um projeto?
Por ser uma rede colaborativa, o CodePen é uma ótima plataforma para compartilhamento de projetos.
Ao acessar o site a partir do seu login, o usuário é redirecionado para uma página /Trending com os pens mais populares do momento.
A partir daí, é possível explorar milhares de códigos diferentes, vê-los em modo de edição, interagir com seus códigos e seguir os perfis que os desenvolveram.
Com a opção Fork, disponível no canto inferior direito da tela, você pode copiar um pen e salvá-lo no seu dashboard.
Se você está usando o CodePen enquanto estudante, a possibilidade de analisar códigos de outros profissionais é uma mina de ouro de conhecimento!
Para compartilhar um pen criado por você, basta clicar no botão Share, também no canto inferior direito da tela.
As opções de compartilhamento incluem enviar o código para o seu celular através de um SMS, compartilhá-lo nas redes sociais Twitter e Facebook, gerar um link compartilhável diretamente para o seu pen ou compartilhar seu código no DEV, uma comunidade internacional de desenvolvedores.
Quais as vantagens de usar o CodePen?
Os benefícios no uso de plataformas como o CodePen são inúmeros!
A facilidade em acessar um editor de códigos de qualidade sem precisar de grande poder computacional, por exemplo, é um dos maiores atrativos do CodePen.
Além disso, a possibilidade de estudar desenvolvendo e analisando códigos de maneira interativa e didática é uma grande aliada para a curva de aprendizado de jovens programadores.
Abaixo, desenvolverei melhor as principais vantagens do uso do CodePen para diversos tipos de usuários.
Interativo
O CodePen é extremamente interativo.
Por ser uma mistura de editor de código com rede social, as opções de compartilhamento, interação e edição de códigos de terceiros torna sua utilização muito animada.
O CodePen também possibilita a criação de projetos por mais de uma pessoa, dividindo assim um código entre um ou mais desenvolvedores sem que seja necessária a instalação de softwares e envio de arquivos de um para o outro.
HTML, CSS, JavaScript em um só lugar
Nos editores do CodePen, HTML, CSS e JavaScript já estão vinculados.
Isto é, na hora de desenvolver o seu código, não é necessário criar nenhuma conexão entre eles, basta que cada uma das linguagens seja escrita e todas elas serão renderizadas juntas.
No box de HTML, por exemplo, ao começar um código, é como se ele já estivesse dentro da classe <body>, sem a necessidade de descrevê-la no editor.
Testagem em tempo real
Habilitada a opção de renderização automática, é possível testar seus códigos em tempo real. Isso é muito importante na hora de identificar erros e falhas.
Com o adicional de cada linguagem estar separada em um box específico, encontrar um erro também se torna ainda mais fácil para programadores que ainda não acumularam muita experiência no exercício da profissão.
Modo Professor
Para quem ensina programação, o CodePen é um ótimo companheiro!
Isso porque, graças à função Modo Professor, é possível criar uma sala da aula dentro da plataforma.
Nestas salas de aula, um grupo de alunos pode ver em tempo-real a criação e a edição de um código e o professor é o administrador do espaço. É possível agrupar até 100 pessoas em uma mesma sala de aula virtual.
Essa função, porém, só está disponível para os planos pagos da ferramenta (PRO).
Esta funcionalidade viabiliza cursos online e pode ser utilizada até mesmo dentro de uma sala de aula física.
Para ativar o modo professor, clique no botão Change View, no menu superior direito, e depois selecione a opção Professor Mode.
Modo apresentação
Além do modo professor, o Modo Apresentação do CodePen também pode ser utilizado por professores e instrutores de programação.
Com esta função, é possível transformar o seu pen em uma apresentação com melhores condições de visualização, como tema claro ou escuro, tamanho da fonte e tamanho da pré-visualização da execução do código.
Com o modo apresentação é possível, ainda, apresentar projetos em ambiente profissional e trabalhos de conclusão de curso para estudantes.
Para ativar esta funcionalidade, clique em Change View no canto superior direito do seu pen e selecione a opção Presentation Mode.
Além destas duas formas de visualização, a versão PRO do CodePen ainda conta com as funções Collab Mode e Live View.
Com o Collab Mode é possível criar um pen que pode ser editado por mais de uma pessoa ao mesmo tempo. O modo de colaboração auxilia a criação de projetos por grupos de alunos ou por mais de um programador em ambiente profissional.
O Live View, por sua vez, também permite que a edição de um código seja assistida em tempo real por outros usuários, no entanto apenas um tem autoridade para editá-lo.
Configurações do CodePen
O CodePen é uma ferramenta super versátil e conta com uma infinidade de configurações voltadas à personalização do seu ambiente de criação de códigos.
É possível configurar, em cada uma das linguagens disponíveis, particularidades como pré-processadores e adicionar scripts externos.
Veja abaixo as configurações para HTML:
Veja abaixo as configurações disponíveis para CSS:
Veja, na imagem abaixo, as configurações disponíveis para JS:
Outras configurações de pen são:
- Detalhes como nome, descrição e tags;
- Opção de manter um pen privado (PRO);
- Desabilitar comportamentos como salvamento automático, renderização automática e formatação ao salvar;
- Tipo de indentação do editor (espaços ou tabulações);
- Transformar um pen em um template pré-estabelecido. A partir de um pen deste tipo, é possível começar um código sempre de uma determinada configuração;
- Screenshot ou thumbnail personalizada para visualização do pen (PRO).
Conclusão
Acesse o CodePen, personalize seu ambiente de programação e comece a programar agora mesmo!
Fonte: kenzie
Super dicas
Se inscreva em nosso canal e compartilhe as matérias que gostar com os seus colegas.
Participe dos nossos grupos de estudos do Facebook e Telegram.
Aproveite também e venha fazer parte do nosso clube de vantagens e ter acesso exclusivo a vídeos, tutoriais, cursos e muito mais.
Clique no link para se tornar um membro do dfilitto – clube de vantagens e ter acesso a todos os benefícios do nosso clube.
