Se você é desenvolvedor Web ou de programas, seguramente conhece os serviços do CodePen. Por isso, no Neoteo vamos apresentar as melhores dicas para extrair o máximo de rendimento dessa plataforma, para que você possa editar e criar projetos em HTML, CSS e JavaScript em tempo real.
Mas para quem não conhece os recursos do CodePen, vamos fazer uma breve descrição para que você o incorpore em suas ferramentas de desenvolvimento. O CodePen é uma plataforma para fazer testes, editar, praticar e compartilhar pequenos projetos Web ou frontend (pens) de programas em HTML, CSS e JavaScript (suporta metalinguagens); e assim você e a comunidade poderão fazer melhorias em tempo real.
Botão Run
Se você é um daqueles usuários que não está satisfeito com a saída do código enquanto desenvolve, pode desativar a opção Auto Update Preview e obter um botão Executar (Run) no lugar. Assim, sempre que atualizar o design, você pode clicar no botão e atualizar a visualização.
Settings – Behavior – (Desativar) AUTO UPDATE PREVIEW
Recomendamos isso para desenvolvimentos pesados, com grande quantidade de código e mistura de linguagens.
Exportar
Depois de salvo, você pode exportar o Pen em arquivo ZIP, com todas as linguagens (HTML, CSS e JS). Mas também existe uma opção para salvá-lo como um GitHub gist.
Export - Save as GitHub Gist
Dessa forma, você terá seu trabalho como um repositório do GitHub.
Buscar e substituir
Buscar e substituir é uma das ações mais importantes da plataforma, porque os desenvolvedores mudam nomes, variáveis e outros elementos com frequência.
Ctrl + Shift + F (habilita as buscas) – Escreva a palavra para substituir em Replace – Enter – Escreva o que deseja inserir em With – Enter – Depois clique em Yes e All.
Obter os arquivos de código individuais
Se você exportar um Pen da forma convencional, obterá os três arquivos (HTML, CSS e JS), mas se precisar de apenas um deles, terá que usar esta ação.
Change View – Direct Code Links: aqui você escolhe a linguagem que deseja – E poderá salvá-lo de uma aba do navegador.
Pen como template
Se você usa quase todos os seus Pen com o mesmo modelo pode ativar cada Pen que fizer com o modelo que usa habitualmente. Mas primeiro terá que salvá-lo como um template.
Settings – Inserir um título ao Pen – Selecionar a opção Template
Esperamos que com as dicas que demos para otimizar seu trabalho no CodePen, você possa extrair mais rendimento da plataforma e melhorar seus desenvolvimentos.
Se quiser que façamos uma segunda parte do artigo, aguardamos seus comentários.
