O PopCode é um ambiente simples de edição HTML/CSS/JavaScript para uso na sala de aula. É muito parecido com o JSBIN, JSFIDDLE ou CODEPEN, mas se concentra em fornecer feedback específico, imediato e amigável ao ser humano quando o código contém erros.

O PopCode é o ambiente oficial de edição da Introdução do Code Nation to Web Development no ano letivo de 2019-2020.
Você pode experimentar o PopCode em https://popcode.org .
O sistema de validação é o ponto principal deste projeto. A maioria dos verificadores, linhadores e executores de estilo de sintaxe tendem a fornecer feedback usando a linguagem voltada para codificadores experientes, não para iniciantes. Assim, fornecer uma tradução de mensagens de erro em inglês simples para os alunos é a preocupação primordial deste projeto.
O PopCode tende à aplicação estrita do estilo de fiapo e código, mesmo quando as decisões de estilo forçado são arbitrárias, sob a filosofia de que dar aos alunos uma maneira certa de fazer isso elimina a ambiguidade e ajuda o processo de aprendizado.
O PopCode usa o React para renderizar visualizações, Redux para gerenciar o estado do aplicativo, ACE como editor de código, Webpack para empacotar o aplicativo do lado do cliente e Babel para compilar JavaScript moderno para compatibilidade com versões do navegador herdado.
O PopCode detecta erros no código do aluno usando SlowParse, Htmllint, Inspetor HTML, Rework CSS, Prettycss, Stylelint, JSHint e Esprima.
O PopCode é um projeto totalmente voluntário e as contribuições são bem-vindas. Encorajo os colaboradores iniciantes a começar com o guia de partida , o que oferece um detalhamento amigável e detalhado de cada etapa para contribuir com sua primeira solicitação de tração.
Se você deseja se envolver, mas não tem uma idéia específica de como, verifique a boa primeira edição e a ajuda que procurou etiquetas. Se você já tem uma ideia por ser apaixonada, vá em frente.
O PopCode vem com um ambiente de desenvolvimento incluído nas baterias construído no nodeenv . Você precisará instalar o Python; Qualquer versão 2.7+ funcionará. Para configurar o ambiente, execute:
$ tools/setup.py Isso instalará node e yarn em um ambiente isolado no diretório nodeenv da raiz do projeto. Não interferirá em qualquer instalação em todo o sistema dessas ferramentas.
Depois que a configuração estiver concluída, para executar um servidor de desenvolvimento, execute:
$ tools/yarn.py startIsso iniciará um servidor em http: // localhost: 3000
Para iniciar testes no modo de relógio, execute:
$ tools/yarn.py autotest Verifique a seção "scripts" do package.json para outras ferramentas úteis.
O PopCode vem com uma configuração de código personalizada vs robusta, que é ativada automaticamente por tools/setup.py . Se você usa o código VS, você pode:
Show Recommended Extensions para instalar facilmente extensões que melhoram a experiência do desenvolvedor do PopCodetask de uma barra aberta rápida para preencher a tarefa automaticamente para executardebug in the Quick Open Bar O PopCode usa ferramentas como mais bonito, ESLint e Stylelint para formatar automaticamente o código. Recommentamos a configuração de plugins do editor para formato automático no salvamento; Como alternativa, você pode executar tools/yarn.py lintfix antes de se comprometer com o formato e o fiapo automático. A integração oficial do código do PopCode (com extensões recomendadas instaladas) faz isso fora da caixa.
Não há necessidade de usar o ambiente oficial de desenvolvimento para trabalhar no PopCode; Você precisará principalmente das versões certas do nó e do fio instalados na sua máquina (verifique a seção "engines" do package.json para as versões atuais).
O PopCode se esforça para usar tecnologias atualizadas e convenções de código para tornar o desenvolvimento o mais agradável possível. Abaixo estão os links para a documentação de referência sobre as principais ferramentas:
O PopCode é distribuído sob a licença do MIT. Consulte o arquivo de licença anexado para obter todos os detalhes sórdidos.
Essas empresas oferecem generosamente acesso ao PopCode a níveis pagos de seus excelentes serviços, gratuitamente:
Sinta -se à vontade para me enviar um e -mail para [email protected] se tiver alguma dúvida.
Você pode encontrar nossa equipe Slack, incluindo o nosso canal #Dev, aqui.