10 dicas codepen para iniciantes
Codepen é um site super fácil e popular para caneta abaixo um combo de código de front-end de trabalho Imediatamente. Se você não sabe o que Codepen é ou não ouviu falar antes, é basicamente um playground de código-fonte on-line (vamos chamá-lo OSCP soar mais nerd) para os três mosqueteiros de codificação front-end; HTML, CSS e JavaScript.
Existem outros OSCPs semelhantes, como JSFiddle, JS Bin, CSSDeck e Dabblet. Codepen é definitivamente um dos mais conhecidos entre os desenvolvedores front-end. Sem mais delongas, vamos pular direto para algum dicas básicas e úteis para usar Codepen.
1. Botão Executar
Se você não é fã da forma como a saída do seu código no Codepen continua atualizando enquanto você está digitando, você pode optar por sair do “Pré-visualização da atualização automática” opção, e obtenha um botão Executar. Ao clicar nele, você poderá ver e atualizar a saída do seu código sempre que você quiser.
Esta também é uma ótima opção se você estiver trabalhando com um código cuja saída passa por muitas mudanças de layout, e repintar toda vez que for atualizado, resultando em lentidão.
2. Incremento / Decremento do Número
Aumentar ou diminuir os números no seu código em Codepen sem digitar os novos números. Tudo o que você precisa fazer é usar a combinação de teclas Ctrl / Cmd e Setas para cima e para baixo.
3. Cursores Múltiplos
Você pode colocar cursores em vários pontos no código-fonte, então digite ou edite em todos esses pontos ao mesmo tempo. Isso só funciona se você estiver inserindo as mesmas informações e reduzir a necessidade de copiar e colar. Apenas mantenha pressionada a tecla Ctrl / Cmd enquanto clica nesses vários pontos.
4. Mensagens Diferentes do Console Colorido
o Console Objeto JavaScript tem mais alguns métodos além de registro() para permitir que você imprimir coisas no console da web.
Você pode usar o info (), advertir() e erro() métodos para em formação, Aviso e erro. Normalmente, os consoles da Web colorem essas mensagens por tipo ou exibirão um ícone apropriado ao lado deles (como um sinal de aviso para a mensagem de aviso) para facilitar o reconhecimento.
Codepen tem seu próprio console que você pode abrir clicando no botão Console no canto inferior esquerdo. É ideal para uma verificação rápida de mensagens do console sem ter que abrir o console do navegador. Este console distingue os diferentes tipos de mensagens do console com diferentes cores de fundo.
5. Exportar
Uma vez salvo, um caneta (uma única entidade Codepen) pode ser exportada como um arquivo ZIP com todos os seus códigos HTML, CSS e JS em arquivos. Há também uma opção para salvar a caneta como uma essência do Github (um repositório Git). Você pode encontrar o botão Exportar no canto inferior direito de cada caneta.
6. Localizar e substituir
Encontrar e substituir - uma operação essencial para pessoas que tendem a renomear seus nomes de variáveis de vez em quando. Ctrl / Cmd + Shift + F é a combinação de teclas para abra o “Encontrar e substituir” diálogo.
7. Emmet Tab Trigger
Você sabe sobre gatilhos de guia para codificação Emmet? Emmet é uma ferramenta de produtividade para desenvolvedores front-end que permite que você digite o código de esqueleto que mais tarde será estendido. Para fazer isso no Codepen, basta digitar rapidamente a abreviação apropriada no editor, pressionar a tecla Tab e o código completo aparece de uma vez.. Disponível apenas para HTML em Codepen.
8. Obter arquivos de código individuais
Se você usar a opção Exportar como mencionada anteriormente, você obterá todos os três arquivos (HTML, CSS e JS) da sua caneta. Mas se você está interessado em apenas um ou dois desses arquivos, e quer baixá-los individualmente, há uma opção para isso também em Codepen.
Uma vez logado no Codepen, vá até a sua caneta e clique no botão Change View no canto superior direito. Na parte inferior da lista suspensa, você verá links de download direto para os arquivos individuais.
9. Inspecione Variáveis JavaScript
Como o console JavaScript da Codepen se conecta ao JavaScript salvo em sua caneta, você também pode usá-lo para testar rapidamente seu JavaScript. Esse recurso é especialmente útil em inspecionando variáveis JS, assim você não tem que inserir console extra ou mensagens de alerta no código original apenas para fins de teste.
10. Ligue a caneta ao modelo
Se você tende a começar a maioria de suas canetas com o mesmo conjunto de código, você pode usar um modelo para salve esses códigos repetidos. Para transformar uma caneta em modelo, marque a opção Modelo no menu Configurações. Quando você mais tarde criar uma nova caneta, você pode comece com seu modelo salvo clicando na seta para baixo no lado direito do botão Nova caneta. Ele irá abrir uma lista suspensa com todos os seus modelos salvos para escolher.
