Seja você um programador iniciante ou um desenvolvedor experiente, os playgrounds de código são úteis ao compartilhar e aprender com outras pessoas.
Um playground de código é um serviço online onde você pode escrever, compilar (ou executar) e compartilhar código com outras pessoas. Eles também oferecem a capacidade de bifurcar e brincar com os códigos de outras pessoas.
Se você está aprendendo desenvolvimento web e praticando suas habilidades em HTML ou CSS, usar um playground de código seria útil para criar páginas web simples online. Além disso, você pode aproveitar os projetos de tendências nessas plataformas e tomá-los como recursos de aprendizado.
Por outro lado, se você é um desenvolvedor web profissional e deseja exibir seu trabalho, os playgrounds de código são o lugar perfeito para isso.
A melhor parte é que a maioria dos playgrounds de código tem um nível gratuito e você pode incorporar os resultados do código em seu site.
Vamos analisar alguns deles!
últimas postagens
JSFiddleGenericName
JSFiddleGenericName é um playground de código onde você pode testar trechos de HTML, CSS e Javascript. Ele veio de um aplicativo de prova de conceito em 2009 e agora é um dos maiores playgrounds de código por aí.
Você pode criar uma conta gratuita, salvar todos os seus violinos e também bifurcar os snippets de outras pessoas.
Outra coisa impressionante sobre o JSFiddle são as sessões de colaboração. Você pode criar uma sessão de bate-papo por áudio enquanto codifica no violino.
Se você é um blogueiro que deseja incorporar o resultado de trechos de código e também seu código-fonte, o JSFiddle seria uma excelente opção.
Claro, no momento da escrita, este playground de código não suporta outras linguagens de programação populares como Python, Go ou PHP, então você não pode esperar construir um aplicativo full-stack nele.
Características
- Gratuito para usar a plataforma
- Interface minimalista
- Suporte para HTML, CSS e JS
- Fork qualquer snippet de violino público na plataforma
- Colabore com outras pessoas usando o chat de áudio diretamente no site
- Bom documentação
Como na maioria dessas plataformas, há um “extra” plano que ajuda a mantê-los funcionando. Se você está confiando neles, considere fazer backup deles.
codepen
codepen não é apenas um playground de código, mas uma comunidade de desenvolvedores que desejam melhorar suas habilidades e compartilhar o melhor trabalho possível.
Por @Yakudoo
Com mais de 6 milhões de usuários, é um dos editores de código online mais usados para desenvolvimento front-end. Se você está começando a aprender front-end, encontrar ideias e motivação para continuar sua jornada de aprendizado é o ideal.
E a experiência de desenvolvimento?
Posso dizer que o Codepen possui um editor amigável com três painéis ajustáveis para codificar em HTML, CSS e JS. O Codepen inclui suporte integrado para pré-processadores Javascript e CSS, como Typescript e Sass. Além disso, se você depende de um pacote npm, pode instalá-lo a partir do painel de configurações.
Características
- Opcional plano profissional
- Editor de código fácil de usar
- Grande comunidade
- A maioria dos codepens são de código aberto
- O lugar ideal para praticar o desenvolvimento front-end
CodeSandbox
Prototipar um site pode ser uma tarefa difícil se você não tiver a configuração correta. Usando CodeSandbox deve ser uma decisão óbvia quando a prioridade é criar sites rapidamente.
Como o próprio nome sugere, o CodeSandbox fornece um ambiente de sandbox para desenvolvimento de front-end.
De integrações do GitHub e ferramentas de depuração a uma experiência personalizável de código VS, este playground de código oferece tudo para você começar a codificar em segundos.
Se o seu objetivo principal é colaborar, tudo que você precisa é compartilhar seu link de sandbox, e você estará pronto para fazer programação em pares em tempo real.
Por exemplo, você pode explorar uma lista escolhida a dedo dos melhores caixas de areia.
Eu poderia ficar sem tempo listando todas as características do CodeSandbox, então vamos mencionar seus recursos matadores.
Características
- Integração GitHub
- Baseado no editor Monaco que alimenta o popular editor VScode
- Primeira plataforma de colaboração
- Implantar no Vercel ou Netlify
- Ferramentas de depuração
- Estruturas de teste prontas para uso
- suporte npm
Sololearn
A popular plataforma de aprendizado de codificação Sololearn tem o seu próprio playground de código para desenvolvimento web.
Para ser honesto, não é um IDE completo como os outros editores online que vimos no artigo, mas oferece um ambiente livre de distrações no qual você pode escrever e executar código.
Isso deve ser mais do que suficiente se você está apenas começando na programação.
Outra coisa interessante sobre o Sololearn é a grande comunidade e o suporte para várias linguagens de programação — o que é muito bom se você quiser brincar com outras tecnologias.
Características
- Gratuito para usar com sua conta Sololearn
- Editor de código online simples
- Grande comunidade para compartilhar seu código
- Suporte para vários idiomas
- Um grande ecossistema com os cursos Sololearn
Para resumir, o playground de código do Sololearn não está incluído na bateria, mas funciona da maneira que deveria ser, e se você já faz parte dos milhões de sololearners, deveria tentar.
Codeply
A melhor coisa sobre Codeply é o suporte para várias estruturas e bibliotecas prontas para uso e o editor de código orientado a design responsivo.
Se você está apenas começando com uma nova estrutura como React, Vue ou Angular, Codeply é um ótimo lugar para começar devido a um conjunto completo de modelos iniciais e uma grande comunidade de mais de 40 mil desenvolvedores.
Características
- Gratuito para usar a plataforma
- Simples, mas direto documentação
- Plano profissional de taxa única
- Inclui mais de 50 bibliotecas
- Teste sua sujeira na web em diferentes resoluções de tela
Replit
Replit é possivelmente o IDE online mais adequado para todos os desenvolvedores. Ele inclui literalmente tudo o que você precisa para criar, desde uma simples página inicial até um aplicativo da Web complexo usando qualquer biblioteca JS moderna.
Com o Replit, você pode codificar em mais de 50 idiomas, escrever aplicativos de forma sincronizada com seus colegas, testar seus programas, integrar-se ao GitHub e obter acesso a uma das maiores comunidades de desenvolvedores do mercado.
Eu poderia literalmente ficar sem papel mencionando todos os recursos do Replit, então vamos pular para os principais.
Características
- O pacote inicial grátis ou 5$/mês plano hacker
- Modo multijogador (programação de par ao vivo)
- grande comunidade
- Muitos idiomas suportados
- personalização do editor
- Botão Executar: Execute o projeto com ações personalizáveis
- Armazenamento secreto
- Código hospedado
StackBlitz
Se você não consegue viver sem código VS, StackBlitz é a opção certa para você. Assim como o CodeSandbox, ele é baseado no editor Monaco, que alimenta esse popular editor de código.
Basta fazer login com sua conta do GitHub e pronto! Você obtém acesso a um ambiente familiar.
Além da experiência do editor de código, é um playground bastante sólido. Você pode usar modelos prontos para uso para estruturas e bibliotecas de front-end como React, Vue, Angular, Svelte e Ionic.
Mas a principal peculiaridade dessa ferramenta é a capacidade de brincar com estruturas de back-end como Node.js, Next.js e GraphQL.
Características
- Plano gratuito “Cadete”
- Experiência de código VS dentro do seu navegador. Isso inclui Intellisense, pesquisa de projetos e muito mais.
- Experiência de codificação fluida (realmente fluida)
- Editor de código offline (Ei! pode ser útil se você se desconectar por um dia ou dois)
- URL do aplicativo hospedado: fácil compartilhamento ao vivo
Falha
Por último mas não menos importante, Falha é um ambiente de programação colaborativo que facilita a criação de um aplicativo da web.
Tem uma das interfaces mais agradáveis para codificar! Só dê uma olhada:
Caso você esteja se perguntando, sim, ele tem um modo escuro.
Além da bela interface, o Glitch está sendo usado por milhões por causa de sua usabilidade, programação de par ao vivo e comunidade amigável.
Você pode criar qualquer tipo de aplicativo full-stack usando não apenas HTML, CSS e JS, mas Node.js (Backend), React ou onze (que eu não sabia que existia antes de ir para a página Glitches).
Características
- Plano gratuito com opção de upgrade
- Desenvolva aplicativos full-stack em seu navegador
- Programação par ao vivo
- Interface agradável
- Aplicativos iniciais
- Remixar (ou bifurcar) os apps públicos de outras pessoas
Conclusão
Hoje em dia, você pode construir inteiramente qualquer aplicativo da web usando um playground de código como os que vimos acima. Não há mais necessidade de baixar IDEs pesados em seu computador, enquanto você pode criar, depurar, testar e implantar sem sair do navegador da web.
Se você não tem certeza sobre a transição para o uso dessas ferramentas, por que não conferir os 10 melhores editores de código (aqueles que você precisa instalar em sua máquina).