popcode

Collar

Popcode es un entorno de edición HTML/CSS/JavaScript simple para su uso en el aula. Es muy parecido a JSBIN, JSFIDDLE o CODEPEN, pero se centra en dar comentarios específicos, inmediatos y amigables para los humanos cuando el código contiene errores.

Estado del proyecto

Popcode es el entorno de edición oficial para la introducción de Code Nation al Programa de Desarrollo Web en el año escolar 2019-2020.

Pruébalo

Puede probar Popcode en https://popcode.org .

Tabla de contenido

• Características
  • Sobre validación
  • Hoja de ruta
• Detalle técnico
  • Descripción general de la arquitectura
• Que contribuye
  • Ejecutando localmente
  • Modo de depuración
  • Referencia de desarrollador
• Licencia
• Colaboradores
• Gracias a
• Contacto

Características

• Editar HTML, CSS y JavaScript en el navegador; actualizaciones de vista previa en el navegador mientras escribe.
• Obtenga comentarios inmediatos, integrales y fáciles de entender sobre los problemas en su código.
• Los errores no se pueden ignorar. Si hay algún error en el código, la vista previa en vivo se reemplaza por una lista de errores.
• Los errores de tiempo de ejecución de JavaScript también se informan en un lenguaje amigable para los humanos, con anotaciones en el código fuente que señalan la fuente del problema.
• Iniciar sesión con un solo clic con la cuenta GitHub; Todo el trabajo se guarda de forma remota a Firebase cuando se registra.
• Pensar la vista previa de la página web en su propia ventana.
• Exportar a Github Gist.
• Importar código de arranque desde una esencia de GitHub.

Sobre validación

El sistema de validación es el punto principal de este proyecto. La mayoría de los verificadores de sintaxis, los forros y los ejecutores de estilo tienden a proporcionar retroalimentación utilizando un lenguaje orientado a codificadores experimentados, no a principiantes. Por lo tanto, proporcionar una traducción de mensajes de error al inglés simple para los estudiantes es la preocupación primordial de este proyecto.

El código de cabina tiende hacia la aplicación estricta de la pelusa y el estilo de código, incluso cuando las decisiones de estilo forzadas son arbitrarias, bajo la filosofía de que dar a los estudiantes una forma correcta de hacerlo elimina la ambigüedad y ayuda al proceso de aprendizaje.

Detalle técnico

PopCode utiliza React para representar vistas, Redux para administrar el estado de la aplicación, ACE como editor de código, Webpack para empaquetar la aplicación del lado del cliente y Babel para compilar JavaScript moderno para la compatibilidad con versiones de navegador heredado.

Popcode detecta errores en el código del estudiante utilizando SlowParse, Htmllint, Inspector HTML, Reelabo CSS, PrettyCSS, Stylelint, Jshint y ESPRIMA.

Que contribuye

Popcode es un proyecto totalmente voluntario y las contribuciones son bienvenidas. Animo a los contribuyentes primerizos a comenzar con la Guía Getting Start , que ofrece un desglose amigable y detallado de cada paso para contribuir con su primera solicitud de extracción.

Comienzo rápido

Si desea participar pero no tiene una idea específica de cómo, verifique el buen primer problema y ayuda a las etiquetas Wanted. Si ya tienes una idea que te apasiona, hazlo.

Popcode viene con un entorno de desarrollo incluido baterías basado en nodeenv . Necesitará tener Python instalado; Cualquier versión 2.7+ funcionará. Para configurar el entorno, ejecute:

$ tools/setup.py

Esto instalará node e yarn en un entorno aislado en el directorio nodeenv de la raíz del proyecto. No interferirá con ninguna instalación de esas herramientas en todo el sistema.

Una vez que se complete la configuración, para ejecutar un servidor de desarrollo, ejecute:

$ tools/yarn.py start

Esto iniciará un servidor en http: // localhost: 3000

Para comenzar las pruebas en modo de reloj, ejecute:

$ tools/yarn.py autotest

Consulte la sección "scripts" de package.json para obtener otras herramientas útiles.

Desarrollar en VS Code

Popcode viene con una configuración de código VS Custom VSS sólida, que está habilitada automáticamente por tools/setup.py . Si usa el código VS, puede:

• Ejecute el comando Show Recommended Extensions para instalar extensiones que mejoren la experiencia del desarrollador de Popcode
• Inicie un servidor, ejecute pruebas y más escribiendo task en la barra de apertura rápida para que se ejecute automáticamente la tarea de ejecutar
• Depurar su entorno de desarrollo o una prueba de broma escribiendo debug en la barra de apertura rápida

Usando otros editores

PopCode utiliza herramientas como Prettier, Eslint y Stylelint para formatear automáticamente el código. Recomendamos la configuración de complementos del editor para formatear automáticamente en guardar; Alternativamente, puede ejecutar tools/yarn.py lintfix antes de comprometerse con la pelusa de formato y autofix. La integración oficial de código VS de Popcode (con extensiones recomendadas instaladas) hace esto fuera de la caja.

Entornos de desarrollo alternativos (avanzado)

No hay requisito de que utilice el entorno de desarrollo oficial para trabajar en Popcode; Principalmente solo necesitará las versiones correctas de nodo e hilo instaladas en su máquina (verifique la sección "engines" de package.json para las versiones actuales).

Referencia de desarrollador

Popcode se esfuerza por usar tecnologías actualizadas y convenciones de código para hacer que el desarrollo sea lo más agradable posible. A continuación se muestran enlaces a la documentación de referencia sobre las principales herramientas:

• Reaccionar para construir la interfaz de usuario
• Redux para administrar el estado de la aplicación
• Postcss-prreset-envías nos brinda características de CSS de vanguardia
• El modificador de elementos de bloque proporciona una convención para organizar clases DOM
• Webpack construye el JavaScript
• Jest es el marco de prueba

Licencia

Popcode se distribuye bajo la licencia MIT. Consulte el archivo de licencia adjunto para todos los detalles sórdidos.

Colaboradores

• Mat Brown (mantenedor)
• Alejandro ar
• Vaibhav Verma
• Alex Pelan
• Carol Chau
• Jesse Wang
• Eric Lewis
• Razzi Abuissa
• Jeremy Schrader
• Leo McLay
• Frederic Brodbeck
• Ben Yelsey
• Aaron Greenberg
• Peter Jablonski
• Diez jóvenes guh
• Marca Ilona
• Kaylee Knowles
• Felicia wong
• Tim Miller
• Bruno García
• Cory Etzkorn
• Nick Volpe
• Craig Iturbe
• Wylie Conlon
• Gary Pang
• Alessia bellisario
• ROAN KATTOUW
• Harpreet Singh
• Limon Monte
• Matthew Armstrong
• Matt Garbis
• Ilya Gribov
• Chase Starr
• Alec Merdler
• Eric Snell
• Omar de Leo
• David Shen
• Maggie Walker
• Joshua Ling
• Taimur Samee
• Ronald Martin
• Ian Plunkett
• Adrian Falleiro
• Katie creó el nombre Popcode
• Diseño del logotipo, concepto "pop" y elementos de marca del equipo en Red Peak: Andrew Haug, Aya Kawabata, Jieun Lee, Achu Fones, Iwona Waluk, Stewart Devlin y Katie Connreally
• Interfaz de usuario diseñada por Ariel Liu, Ian Jones, Meghan Knoll y Simon Lesser.

Gracias a

Estas compañías ofrecen generosamente acceso a los niveles pagos de sus excelentes servicios, sin cargo:

Contacto

No dude en enviarme un correo electrónico a [email protected] si tiene alguna pregunta.

Puede encontrar nuestro equipo Slack, incluido nuestro canal #DEV, aquí.