Tanto para iniciantes que querem aprender, quanto para profissionais experientes, existem alguns sites que permitem experimentar linhas de código e ver, em visualização e quase em tempo real, o resultado. São aplicações reais com a tela dividida em duas, onde por um lado você escreve o código que pode ser HTML, CSS, PHP, Javascript ou outro, enquanto por outro lado, após pressionar uma tecla para executar, você realmente vê o que parece que o código está dentro de um site.Não são apenas editores de código, mas lugares onde você pode testar sua programação sem se preocupar em cometer erros e descobrir rapidamente onde estão os erros. Codepen e JSFiddle são os dois sites mais populares nesta categoria, mas também existem muitas alternativas.
Sites para testar o código online
1) CodePen
CodePen é o site mais popular usado por programadores porque é gratuito, intuitivo e fácil de usar. Tendo se tornado um padrão no mundo dos programadores, basta fazer uma pesquisa no Google para encontrar as páginas já compiladas pelo Codepen e ver imediatamente se é isso que você estava procurando. As janelas de visualização flexíveis e a execução imediata do código escrito o tornam perfeito o suficiente para experimentar animações em javascript e CSS, além de poder se conectar facilmente a scripts externos (React, Vue e qualquer outro disponível via CDN).
CodePen merece o primeiro lugar nesta categoria, no entanto, alguns recursos são pagos, como codificação colaborativa e visualizações ao vivo de página inteira (visualizações ao vivo parciais são gratuitas).
2) JSFiddle
Em segundo lugar (mesmo que cronologicamente seja um dos mais antigos) no mundo dos sites de escrita e teste de código de programação está JSFiddle, orientado principalmente para a criação e teste de JavaScript. Ele também pode ser usado para código HTML e CSS e, uma vez que oferece suporte a dicas de autocompletar de código, pode até ser preferível a CodePen para os menos experientes.
Um grande ponto a favor do JSFiddle é que ele oferece o modo de colaboração (incluindo chat de voz e texto) gratuitamente, para que você possa trabalhar no código ao mesmo tempo que outras pessoas.
3) Glitch
Muitos sites de código permitem que você codifique HTML / CSS / JS e gere páginas da web estáticas enquanto Glitch oferece um pequeno espaço de armazenamento gratuito para salvar projetos e torna muito fácil executar o código do lado do servidor Node.js. Pode ser programado no Glitch de forma colaborativa,
Ele também vem com uma série de outros excelentes recursos: codificação colaborativa, controle de versão, muitos recursos de aprendizagem, boa integração com o GitHub, incorporações fáceis, uma comunidade para pedir conselhos, projetos pré-fabricados que você pode editar ou usar livremente e o Integração do Visual Studio. Esta é uma maneira excelente, rápida e fácil de iniciar um aplicativo da web (ou aprender como fazê-lo).
4) CodeSandbox
CodeSandbox é semelhante ao Glitch, mas um pouco mais complexo e completo. CodeSandbox tem uma interface mais flexível e personalizável, permite distribuir aplicativos web completos, tem espaço para salvar arquivos e faz a maior parte do trabalho básico deixando o programador sozinho para escrever.
5) Repl.com
Repl.com é um ambiente de desenvolvimento para experimentar diferentes tipos de linguagens de programação como Python com suporte a código de front-end e back-end, permite a implantação de sites e aplicativos, possui integração com GitHub e interface intuitiva. Pode ser um pouco difícil para alguém que está apenas tentando criar páginas da web, mas para programadores experientes, é um recurso a ser considerado. se você está apenas projetando front-ends ou se você é novo no código, mas se agenda tudo regularmente, vale a pena explorar.
6) Liveweave é um editor web muito parecido com o JSFiddle, com o qual escrever e testar código para uso em sites, com recursos de visualização ao vivo, dicas de código para HTML5, CSS3, JavaScript e jQuery e que permite baixar o projeto como um arquivo zip. Você também pode adicionar bibliotecas externas com bastante facilidade, como jQuery, AndgularJS, Bootstrap.
7) CodeSandbox é um espaço online gratuito onde você pode iniciar projetos de aplicativos da web usando diferentes estruturas, como React, Vue, Angular e muito mais.
8) StackBlitz é um excelente editor de aplicativos javascript, que oferece suporte a diferentes estruturas, como Vue e React.
9) Flems, site minimalista, perfeito para fazer testes rápidos.
10) JSBin, uma versão mais minimalista do JSFiddle, para codificar páginas da web e ver como fica.
11) CSSDeck é um site simples para testar algumas ideias básicas de HTML / CSS e JS.
12) ICECoder, outro ambiente online para teste de código, que requer que você baixe um programa que é executado em seu navegador e também pode ser usado offline.
13) Plunker, uma ferramenta de front-end que permite escrever código, arquivos e páginas da web e salvá-los no Github.
14) Scrimba é uma combinação inovadora de editor de vídeo e código que é um ambiente de aprendizagem perfeito para alunos e aqueles que desejam aprender.
15) WebMaker, um criador de aplicativo da web com funcionalidade offline e integração com CodePen.
16) Dabblet, para tentar escrever código HTML / CSS / JS com belos gráficos e correção automática para código CSS.
17) PlayCode é também um ambiente para testar código HTML / CSS / JS básico em tempo real.
19) JSItor é outra alternativa ao Codepen e JSFiddle, onde você pode escrever código combinando HTML, CSS e Javascript e ver o resultado imediatamente.
Melhores sites para escrever e testar código com visualização em tempo real
