Uma das muitas coisas frustrantes sobre o desenvolvimento da web é não ter uma maneira fácil de compartilhar seus projetos com outras pessoas. Em muitos casos, você precisará hospedar seu projeto em um servidor Web ou enviar todos os arquivos correspondentes para alguém que queira ver o que você criou. Mas, graças a uma ferramenta online pura chamada CodePen, você não precisa mais se preocupar com nada disso.
CodePen.io
O CodePen é uma ferramenta gratuita que permite hospedar seus projetos on-line sem precisar pagar um centavo. Para começar, acesse o CodePen.io e crie uma conta gratuita.
Depois de fazer isso, você pode criar uma "Caneta" clicando no botão "Nova caneta" no canto superior direito da tela.
Depois disso, você poderá adicionar HTML, CSS e JavaScript às caixas correspondentes. Depois de começar a adicionar algum código, você verá uma visualização ao vivo do que está criando. Você pode intitular sua primeira caneta no canto superior esquerdo. Depois de clicar no seu primeiro "Salvar", você poderá simplesmente compartilhar o URL da página com amigos, familiares e colegas de trabalho para que eles possam ver o que você está trabalhando.
É assim que sua caneta será exibida com algum código (cortesia de um projeto do Free Code Camp chamado Tribute Page):
Ao criar sua própria caneta, você precisará percorrer as configurações antes de começar. Ao clicar no botão "Nova caneta", você verá um modelo de caneta pronto para começar a digitar algum código. No canto superior direito, haverá um botão "Configurações". Clique nele (você deve ver a tela abaixo).
Aqui você poderá acessar as guias HTML, CSS e JavaScript para adicionar determinadas informações. Na guia HTML, você poderá adicionar meta informações, coisas que devem constar no
guia e assim por diante. Em CSS, você poderá adicionar pré-processadores CSS como LESS e Sass. Não apenas isso, mas você pode adicionar CSS externo, como Bootstrap e Foundation. Na guia JavaScript, você pode adicionar um pré-processador JavaScript como Babel ou CoffeeScript. Além disso, você pode adicionar estruturas JavaScript externas como Angular, React, Lodash, D3 e assim por diante.
Finalmente, o CodePen permitirá que você altere a "Visualização" que está visualizando. A visualização padrão é a Visualização do Editor, permitindo que você insira seu código e obtenha uma pequena visualização no console abaixo. Porém, existem outras opções, sendo uma particularmente útil a visualização "Página inteira", na qual você verá um projeto como se estivesse em um site. Existem várias outras visualizações disponíveis para mudar, vale a pena brincar!
O CodePen é realmente uma ferramenta interessante, e apenas tocamos na superfície de sua utilidade. Vale a pena ir até o CodePen.io e usá-lo para trabalhar em alguns projetos e, se quiser, compartilhe com seus amigos ou colegas de trabalho.
O que você acha do CodePen? Você já usou uma ferramenta semelhante? Deixe-nos saber na seção de comentários abaixo!
