Home-theater-designers
Começar com o desenvolvimento da web em JavaScript pode ser um processo frustrante, mas existem ferramentas que o tornam mais fácil.
CodePen.io é um ambiente de codificação no navegador projetado para aprender a codificar e para criar protótipos de ideias rapidamente com o mínimo de aborrecimento.
Neste artigo, veremos alguns dos recursos do site e como eles podem ajudá-lo a se tornar um programador melhor.
O que é CodePen?
CodePen fornece algo chamado de caneta , que compreende três janelas diferentes para HTML, CSS e JavaScript, além de um painel de visualização que é atualizado em tempo real conforme você digita.
Embora seja frequentemente usado por desenvolvedores da web para mostrar ideias para sites, também é um ótimo lugar para aprender o básico do desenvolvimento front-end da web. Aqui estão os recursos mais notáveis que você precisa saber ao usar o CodePen.
1. Pré-processadores
Os pré-processadores são linguagens interpretadas ou compiladas projetadas para simplificar a codificação. Eles podem adicionar recursos a uma linguagem para sua conveniência e tornar o código mais fácil de ler. No desenvolvimento da web, uma combinação de pré-processadores para HTML, CSS e JavaScript é usada para criar código limpo rapidamente.
Se você está aprendendo desenvolvimento web e deseja experimentar diferentes pré-processadores, o CodePen permite que você troque de pré-processador em tempo real e veja o código que ele compila em tempo real. Cada um dos três painéis do aplicativo CodePen tem um menu suspenso no canto superior direito. Selecione Ver HTML / CSS / JS compilado para ver como o código será interpretado.
Nesta caneta, criamos um site simples usando Haml e Sass para estilizar algum texto de cabeçalho. Selecionando Ver compilado mostra o HTML e CSS padrão. Neste exemplo, a diferença é mínima. Ao aprender uma nova linguagem, no entanto, pode ser útil ver como o código pré-processado fica depois de compilado.
2. Recursos externos
Junto com o suporte nativo para pré-processadores, CodePen oferece suporte a scripts externos. Isso o torna o lugar perfeito para obter experiência prática com bibliotecas para seus projetos pessoais ou para se atualizar em bibliotecas de aplicativos da web populares, como React.
Para adicionar uma biblioteca externa, abra o Definições painel em sua caneta e vá para a guia JavaScript. Existem duas maneiras de adicionar recursos, adicionando a URL do recurso manualmente ou pesquisando.
Usamos esse recurso em nosso artigo cobrindo animação web com mo.js , junto com o pré-processamento do Babel.
Veja a caneta Exemplo de Mojs MUO por Ian ( @Bardoctorus ) no CodePen.
Sim, as canetas CodePen podem ser incorporadas! Vá em frente e clique no painel de visualização acima para ver os resultados do tutorial Mo.js!
Outras canetas podem ser importadas como bibliotecas externas. Isso significa que você pode pegar elementos de canetas escritas anteriormente para usar como módulos em suas novas canetas. Adam's do usuário CodePen Enquete Simples a caneta é um bom exemplo disso.
3. Modelos
Quando você está aprendendo novos conceitos ou testando novas ideias, frequentemente usa componentes semelhantes e recapitula as mesmas etapas iniciais. CodePen permite a criação de canetas modelo que podem eliminar a repetição e permitem que você vá direto ao ponto.
Para criar um modelo, abra uma nova caneta, faça suas alterações e selecione o Modelo controle deslizante no menu de configurações.
https://vimeo.com/221428690
Até recentemente, os usuários gratuitos só podiam fazer três modelos, mas agora todos os usuários podem ter quantos modelos quiserem em sua conta. Perfeito para começar uma nova ideia com o mínimo de atraso!
4. Colaboração de moda
A capacidade de colaborar e ensinar com CodePen pode ser seu maior patrimônio. Já existe uma grande variedade de ótimas ferramentas de colaboração para programadores, mas a abordagem do CodePen é simples e intuitiva.
Os usuários Pro do CodePen podem criar uma nova caneta e abri-la para colaboração sob o Mudar vista cardápio. Isso muda o link da caneta em um convite compartilhável acomodando um número crescente de pessoas, dependendo do seu plano CodePen Pro.
como abrir o bios windows 10
Neste caso, escrevi HTML enquanto um amigo atualizava o CSS em tempo real, com um cursor rotulado identificado onde eles estavam trabalhando.
Qualquer pessoa com o link pode entrar e usar a função de bate-papo do navegador, independentemente de ser um usuário profissional ou ter uma conta CodePen. Desde que o salvamento automático esteja desativado, apenas o proprietário da caneta pode salvar as alterações, tornando-o uma maneira segura de abrir seu código para outras pessoas sem risco.
A natureza aberta deste modo é benéfica para iniciantes, pois você pode convidar quase qualquer pessoa para usar sua caneta para guiá-lo através de um conceito difícil. É também um modo prático de se orientar, pois é perfeito para entrevistar funcionários em potencial, e já sido usado profissionalmente desta forma !
5. Modo Professor
O modo Professor permite que um usuário Pro hospede uma sala na qual apenas ele pode editar o código. Entre 10-100 usuários podem assistir e bater papo, dependendo do plano Pro do host.
O modo Professor permite flexibilidade entre o ensino em sala de aula e o ensino à distância, ou uma combinação dos dois. Usar o modo Professor permitirá que as pessoas no final da classe tenham a mesma experiência das que estão na frente e para que o professor mostre correções de bugs que serão atualizadas em tempo real.
6. Modo de apresentação
O modo de apresentação foi projetado, sem surpresa, com o código de apresentação em mente. O aplicativo é exibido em uma visualização simplificada, projetada para funcionar com retroprojetores. CodePen otimizou o modo de apresentação para uso em conexões de internet de baixa velocidade e hardware mais fraco.
Leitores astutos podem já ter percebido que a versão gratuita do CodePen forneceria precisamente essa função, embora o modo Pro tenha alguns recursos úteis. O layout, o tamanho da fonte e os temas podem ser alterados rapidamente para se adequar a quase qualquer configuração, e mostrar o link para a caneta abre um URL encurtado de tamanho jumbo, tornando o compartilhamento do projeto mais fácil.
Essas pequenas alterações, junto com a capacidade de dimensionar a janela de visualização para caber no que você está exibindo, tornam o modo de apresentação perfeito para professores e desenvolvedores que apresentam ideias aos colegas. O modo de apresentação também é uma maneira simples e de aparência limpa de apresentar código se você for entrevistado para uma posição de programação.
7. Padrões
A busca por inspiração ficou muito mais fácil com as coleções de CodePen de Padrões de design .
Cada categoria é uma coleção de códigos de exemplo fornecidos por usuários do CodePen para tarefas específicas. Você está procurando uma maneira de criar botões dinâmicos para o seu site? Menus de acordeão? Há uma grande variedade de categorias que se encaixam em quase todos os exemplos.
Esses padrões também são uma ótima maneira de aprender como os botões interativos funcionam e as diferentes maneiras como as interfaces de usuário dinâmicas podem funcionar.
8. Emmet
Emmet , anteriormente conhecido como Zen Coding, é amplamente considerado como a maior economia de tempo para o desenvolvimento de HTML e CSS. O plug-in pega parte do código que você está escrevendo com frequência e os converte em atalhos simples.
Vê-lo em ação é melhor do que explicá-lo, então faça a configuração usual para um documento HTML:
Adicionar isso a todos os documentos HTML foi reduzido a duas ações. Usando Emmet, digite ! e acertar o Aba chave. Magia!
Emmet é ativo como padrão no CodePen e é especialmente útil se você está tentando aprender um novo conceito em JavaScript e precisa criar o HTML e CSS de suporte rapidamente.
Desenvolva com CodePen para uma melhor experiência
CodePen é uma excelente ferramenta para desenvolvedores web, e o campo está crescendo continuamente. JavaScript é uma ótima linguagem para aprender no futuro no desenvolvimento da web.
por que meu aplicativo do youtube não está funcionando
Existem ótimos tutoriais e cursos disponíveis para pessoas que desejam começar a usar o JavaScript, e o CodePen é um ótimo ambiente para testar suas novas habilidades.
Compartilhado Compartilhado Tweet O email Os 8 melhores sites para baixar audiolivros gratuitamenteOs audiolivros são uma ótima fonte de entretenimento e muito mais fáceis de digerir. Aqui estão os oito melhores sites onde você pode baixá-los gratuitamente.
Leia a seguir Tópicos relacionados- Programação
- HTML
- Desenvolvimento web
- JavaScript
- CSS
Ian Buckley é jornalista freelance, músico, performer e produtor de vídeo que mora em Berlim, Alemanha. Quando não está escrevendo ou no palco, ele está mexendo em eletrônicos ou códigos DIY na esperança de se tornar um cientista maluco.
Mais de Ian BuckleyAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever