CodePen: Crie, teste, compartilhe e descubra HTML, CSS e JavaScript

Codepen: construir, testar e descobrir código de front-end

Um desafio com um sistema de gerenciamento de conteúdo é testar e produzir ferramentas com script. Embora não seja um requisito para a maioria dos editores, como publicação de tecnologia, gosto de compartilhar scripts de trabalho de vez em quando para ajudar outras pessoas. Eu compartilhei como usar JavaScript para verificar a força da senha, Como verifique a sintaxe do endereço de e-mail com expressões regulares (Regex) e, mais recentemente, adicionou este calculadora para prever o impacto nas vendas de comentários online. Espero adicionar dezenas de ferramentas ao site, mas o WordPress não é exatamente propício para publicação assim ... é um sistema de conteúdo, não um sistema de desenvolvimento.

Então, para fazer meus pequenos scripts funcionarem, gosto de usar CodePen. CodePen é uma ferramenta bem organizada com um painel HTML, um painel CSS, um painel JavaScript, Console e uma publicação do código resultante. Cada painel tem informações quando você passa o mouse sobre os elementos para que você entenda o que é possível, bem como a codificação por cores de seu HTML, CSS e JS para ajudá-lo a editar e escrever com mais facilidade.

CodePen é um ambiente de desenvolvimento social. Basicamente, ele permite que você escreva código no navegador e veja os resultados à medida que constrói. Um editor de código online útil e libertador para desenvolvedores de qualquer habilidade, e particularmente capacitante para pessoas que estão aprendendo a codificar. CodePen se concentra principalmente em linguagens de front-end como HTML, CSS, JavaScript e sintaxes de pré-processamento que se transformam nessas coisas.

Sobre CodePen

Com CodePen, fui capaz de fazer todo o trabalho necessário para publique a calculadora Eu embuti no site. A maioria das criações no CodePen são públicas e de código aberto. Eles são coisas vivas com as quais outras pessoas e a comunidade podem interagir, desde um simples coração, passando por um comentário, passando por bifurcações e mudanças de acordo com suas próprias necessidades.

CodePen - calculadora para prever o impacto nas vendas de análises online

Com CodePen, você pode alterar sua visualização se desejar que os painéis fiquem à esquerda, direita ou inferior conforme você trabalha ... ou visualizar o HTML em uma nova guia. A visualização lado a lado funciona incrivelmente bem para testar suas configurações responsivas, pois você pode ajustar o tamanho do painel visível.

Você pode organizar cada um de seus scripts de trabalho em Canetas, combiná-los em Projetos (editor de vários arquivos) ou até mesmo criar coleções. É basicamente um site de portfólio de trabalho para código de front-end onde você pode seguir outros autores, ramificar outros projetos compartilhados publicamente em seus próprios para modificar e até mesmo aprender como fazer algumas coisas divertidas por meio de desafios.

Você pode salvar como um GitHub Gist, exportar em arquivo zip e até mesmo embutir a caneta em um artigo como este:

Veja a caneta
Impacto previsto nas vendas das análises online
by Douglas Karr (@douglaskarr)
on CodePen.


Uma das limitações do editor Pen é o grande volume de código. Você pode nunca se deparar com esse problema, pois o editor deve estar bem com centenas ou mesmo milhares de linhas de código. Mas quando eles começarem a atingir 5,000 - 10,000 ou mais linhas de código, você verá o editor começar a falhar. No entanto, você pode adicionar referências externas a folhas de estilo ou JavaScript hospedado em outro lugar!

Eu encorajo você a se inscrever. Você será inscrito no e-mail semanal deles e também poderá adicionar o feed ao seu feed RSS para ver canetas publicadas recentemente. E, se você começar a pesquisar ou navegar nas canetas públicas lá, encontrará alguns projetos incríveis… os usuários são muito talentosos!

Siga-nos Douglas Karr no Codepen

A versão paga, CodePen Pro, oferece uma tonelada de recursos adicionais para funcionalidade ou equipes aprimoradas - incluindo colaboração, processos, hospedagem de ativos, visualizações privadas e até mesmo projetos implantados com seu próprio domínio ou subdomínio. E, é claro, CodePen fornece um ótimo repositório com integração com o Github onde toda a sua equipe pode trabalhar. Se você deseja apenas testar alguns códigos simples como eu, CodePen é uma ferramenta inestimável.

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.