Ferramentas de Playground de código da Web que você deve experimentar

Webcode-Spielplatz-Tools, die Sie ausprobieren sollten
⏱️ 10 min read

Se você gosta de codificação para web, provavelmente já usou pelo menos um playground de código em seu tempo. Esses não são seus editores de código usuais, mas lugares onde você pode testar seu código sem se preocupar com a configuração do servidor de back-end. Codepen e JSFiddle são os dois mais populares, mas, talvez sem surpresa (dado que o público-alvo para playgrounds de código da web são pessoas que têm as habilidades para construir eles próprios playgrounds de código), existem muitos alternativas.

Se você deseja apenas preparar um aplicativo HTML / CSS / JavaScript rápido e brincar com ele, o playground que você escolher será apenas uma questão de preferência pessoal. Se você quiser mais recursos, como codificação colaborativa em tempo real, acesso rápido a estruturas JS como React ou Vue, suporte de back-end ou mesmo apenas uma comunidade criativa ativa, você pode querer pesquisar um pouco.

CodePen

Provavelmente, o playground de código de front-end mais popular que existe é CodePen, e por um bom motivo: é intuitivo e fácil de usar, tem uma comunidade grande e vibrante e se tornou um padrão aceito para incorporar código da Web funcional em páginas. Suas atualizações automáticas rápidas e janelas de visualização flexíveis o tornam bastante popular para coisas como projetos de animação CSS. Ele tem pré-processadores CSS / JS e pode se conectar facilmente a scripts externos (React, Vue e qualquer outro disponível via CDNjs) e até mesmo outras canetas.

No geral, CodePen merece seu primeiro lugar, especialmente para projetos de front-end e portfólios. Não foi desenvolvido para back-end, porém, e alguns de seus recursos, como codificação colaborativa, vários projetos (em oposição a canetas individuais) e visualizações de página inteira ao vivo (visualizações de página parcial ao vivo são gratuitas), exigem um profissional pago inscrição.

JSFiddle

No segundo violino (embora cronologicamente seja um dos mais antigos) no mundo do playground de código de front-end está JSFiddle. Como o nome pode sugerir, é orientado a JavaScript, por isso oferece mais recursos JS prontos para uso e menos na forma de HTML / CSS. (Literalmente, ele tem suporte padrão para Sass, mas não para Less.) Esse não é um grande problema, já que com um pouco de trabalho você pode adicionar quaisquer recursos HTML / CSS / JS de que precisa e já que ele suporta dicas de código e auto- recarregando, pode até ser um pouco melhor do que CodePen em termos de recursos gerais de codificação.

Code Playgrounds Js Fiddle

Um grande ponto a favor do JSFiddle é que ele oferece modo de colaboração (incluindo bate-papo por voz e texto!) De graça, permitindo que você trabalhe no código ao mesmo tempo que outras pessoas. Na verdade, não tem muito aspecto de comunidade e não exibe projetos interessantes, então perde para o CodePen nessa frente.

No geral, se você tem um projeto com mais JS ou precisa codificar de forma colaborativa, JSFiddle é uma ótima opção. Se algo o incomoda, porém, há muitas alternativas de sentimento muito semelhantes na lista “Outros Playgrounds” abaixo.

Falha

Ok, então você não está apenas tentando brincar com coisas de front-end: você precisa de algo em que possa construir um aplicativo da web full-stack. Muitos playgrounds de código apenas permitem que você codifique HTML / CSS / JS e gere páginas da web estáticas, mas Falha oferece um pouco de espaço de armazenamento, 4.000 solicitações por hora e torna muito fácil executar o código do lado do servidor Node.js. Pelo preço de barganha absoluto de US $ 0,00, você tem uma maneira de construir e implantar instantaneamente projetos de pequena escala, independentemente de quanta experiência você tenha.

Code Playgrounds Glitch

Ele também vem com uma série de outros excelentes recursos: codificação colaborativa, controle de versão (chamado de “retrocesso”), muitos recursos de aprendizagem, boa integração com o GitHub, incorporações fáceis, uma comunidade amigável, toneladas de projetos que você pode remixar e brincar, e até integração com o Visual Studio. Sua interface de codificação de front-end pode não ser tão elegante quanto alguns outros playgrounds, mas sua funcionalidade geral é tão boa. Se você está procurando uma maneira rápida e fácil de colocar um aplicativo da web em funcionamento (ou está tentando aprender como!), Glitch é uma ótima primeira parada.

CodeSandbox

CodeSandbox está na mesma categoria que Glitch, mas um pouco mais complexo e cheio de recursos. Onde o Glitch sobrepõe uma interface bastante minimalista sobre sua funcionalidade razoavelmente poderosa, CodeSandbox coloca todo esse poder à vista usando o mesmo Editor Monaco que alimenta o VS Code. As pessoas que se sentem confortáveis ​​com esse IDE, portanto, se sentirão em casa com o CodeSandbox.

Code Playgrounds Codesandbox

É extremamente flexível e personalizável, de código aberto, permite implantar aplicativos da web completos (embora com algumas etapas a mais do que o Glitch), hospeda seus arquivos, tem uma vibração de comunidade e faz muito do trabalho de fundo para você, liberando você para apenas escrever código e implantar seu aplicativo. Ele também tem integração com GitHub e VS Code, Emmet (um expansor de abreviatura) e uma tonelada de outros recursos que usuários avançados e programadores menos experientes irão apreciar. Provavelmente é um exagero se você está apenas brincando, mas se seu projeto simplesmente não cabe mais em um CodePen, e você não se importa com a curva de aprendizado, verifique CodeSandbox.

Repl.it

Este playground / IDE não está no fim porque é o que menos gosto (certamente não é): é porque Repl.it está em uma categoria própria. Suporta um tonelada de linguagens, de Python a LOLCODE (a linguagem de programação preferida de Lolcats), tem suporte de código de front-end e back-end, permite implantar sites e aplicativos, vem com integração GitHub muito estreita, hospeda uma grande e muito ativa comunidade de desenvolvedores e tem uma interface intuitiva que desmente quão poderoso ele realmente é.

Code Playgrounds Replit

Repl.it tem todos os recursos que você espera dos outros playgrounds nesta lista, de codificação colaborativa a incorporação, e embora ainda seja principalmente uma ferramenta para prototipagem e compartilhamento de código, definitivamente tem suco suficiente para a maioria dos pequenos a projetos de médio porte (contanto que você tenha uma conexão estável com a Internet). Pode ser um pouco demais se você estiver apenas fazendo designs de front-end ou se você for novo no código, mas se você programar regularmente, vale a pena explorar.

Outros playgrounds incríveis para conferir

Code Playgrounds Flems

Os playgrounds acima são meus locais de lazer, mas há muitos mais. Todos eles são muito capazes de fazer o básico e cada um tem seu próprio toque para atender a uma necessidade diferente. JSFiddle inspirou claramente muitos deles, então se você está procurando uma alternativa para esse aplicativo, você pode encontrá-la aqui.

  • Liveweave: muito parecido com o JSFiddle, mas mais voltado para o design. Ele se destaca especialmente por seu CSS integrado, ferramentas geradoras de cores e seu editor de vetores.
  • JSItor: uma alternativa JSFiddle com uma sensação muito semelhante e, notavelmente, aplicativos Android / iOS.
  • StackBlitz: um excelente IDE baseado em navegador construído com o Editor Monaco que alimenta o VS Code. Parece um pouco com CodeSandbox, mas é um pouco mais simples, pois não tem suporte de back-end.
  • Flems: barebones, playground minimalista. Perfeito se você quiser algo sem sentido e / ou sem distrações.
  • JSBin: uma versão mais minimalista do JSFiddle.
  • CSSDeck: um playground front-end muito simples. Se você deseja uma maneira simples de testar algumas ideias em HTML / CSS e JS básico, é uma boa escolha.
  • ICECoder: é um playground online com recursos comparáveis ​​a muitos dos outros, mas seu principal atrativo é que é Além disso um programa para download que é executado em seu navegador, essencialmente tornando-se um IDE baseado em navegador offline.
  • Plunker: uma ferramenta de front-end que permite que você brinque com arquivos um pouco mais do que alguns outros playgrounds e tem boas integrações de desktop / GitHub.
  • Scrimba: ok, este não é estritamente um playground de código – é um site com uma combinação inovadora de editor de vídeo / código que oferece um ambiente de aprendizado e playground ao mesmo tempo. Vale a pena olhar para os alunos!
  • Web Maker: bom playground front-end com funcionalidade offline e até integração com CodePen!
  • Dabblet: playground HTML / CSS / JS bastante básico, mas um design agradável.
  • PlayCode: um bom playground HTML / CSS / JS básico. A maior desvantagem: uma mensagem irritante que aparece a cada 60 segundos dizendo para você atualizar para um plano profissional.

Existem muitos! Qual eu escolho?

Sim, há um milhão de playgrounds de código da web, mas não se perca em decidir entre eles e deixar aquele tempo que você poderia estar gastando na verdade fazendo coisas! Se você tem uma ideia meio decente do que está procurando em um ambiente de codificação online, basta restringi-la a dois ou três aplicativos que tenham esses recursos, tente trabalhar um pouco com cada um deles e ver qual você se encontra gravitando em direção. Muitos deles têm integração com o GitHub e / ou recursos de exportação / importação de qualquer maneira, então não é como se você estivesse se prendendo a uma má decisão para sempre.

Eu pessoalmente uso CodePen para páginas estáticas simples e experimentos de design e Glitch para projetos maiores, embora eu aprecie o design do VS Code do CodeSandbox e o console do Repl.it. Se eu perdi seu playground favorito ou esqueci de mencionar um recurso incrível, comente abaixo para que outras pessoas possam encontrá-lo!

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Você pode gostar...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x