aprender desarrollo web

5 Mejores Áreas De Juego Y Comunidades De Desarrollo Web Front-End En Línea Para Probar Fragmentos De Código Sobre La Marcha

Por mucho que me encanten los editores de desarrollo web fuera de línea y los IDE, odio los inconvenientes que conlleva tener que editar el código y luego abrir un navegador para probar los cambios. Incluso cuando una pestaña del navegador con el archivo de prueba está abierta, debe pasar constantemente de un editor a otro y actualizar la pestaña antes de que se muestren los cambios en la salida. Tengo la preferencia de trabajar en sitios donde la salida se muestra en tiempo real.
Tan pronto como se escribe el código, la salida lista para la prueba se entrega en segundos. Convenientemente, el código editable y la salida comprobable se muestran en paralelo. Otra alegría de estos juegos en línea es la enorme comunidad de diseñadores y desarrolladores web que publican fragmentos de código para que el mundo los vea.
CodePen es una de las comunidades más grandes para diseñadores web y desarrolladores donde los usuarios pueden probar y mostrar fragmentos de código HTML, CSS y JavaScript creados por el usuario. Funciona como un editor de código en línea y un entorno de aprendizaje de código abierto, donde los desarrolladores pueden crear fragmentos de código, llamados "bolígrafos", y probarlos. Los editores de Codepen vienen con algunas funcionalidades comunes como las normales, con respecto a la sangría de código y el resaltado de sintaxis colorido. También admite una gran variedad de preprocesadores para HTML, CSS y JS, incluidos, entre otros, Pug, Slim, SCSS, TypeScript. El modo de colaboración también es muy útil. Nunca tiene que perder su trabajo, ya que se guarda automáticamente y puede reanudarlo cuando lo desee. Con similitudes cerca de Github, siéntase libre de bifurcar y editar el código de otro usuario como desee.
JSFiddle es una comunidad en línea vibrante para probar y mostrar fragmentos de código JavaScript, CSS y JavaScript creados por el usuario y de colaboración, más conocidos como "violines". Permite la simulación de llamadas AJAX. Al igual que con Codepen, la interfaz limpia coloca el código y el resultado uno al lado del otro, y los resultados se aplican inmediatamente después de hacer clic en el botón Ejecutar. Cuenta con soporte para SCSS, así como bibliotecas de JavaScript como TypeScript, CoffeeScript, Vue y React. Sigue mejorando, y recientemente implementó una función de sugerencia de código que sugiere algunas propiedades comunes de CSS y nombres de valores, lo mismo para JavaScript. Colaboración con otros desarrolladores soportados también.
Plunker es la mejor herramienta para crear prototipos, experimentar, compartir y depurar sus ideas en la plataforma web. Desde la idea hasta la implementación, Plunker te ayuda a construir algo de manera rápida y sin fricción. Es un archivo múltiple, el editor de múltiples paneles le brinda un árbol de archivos completo donde puede arrastrar y soltar sus archivos, imágenes e incluso gifs animados directamente en el banco de trabajo y reorganizar o cambiar el tamaño de sus paneles como desee. Cuando se tarda una fracción de segundo para ver el resultado de un cambio, puede hacer las cosas. Corrige errores y modifica los estilos fácilmente. Lo que ve en las previsualizaciones de Plunker en tiempo real es lo que obtendría si su código fuera servido directamente desde un CDN.
Con Plunker, nunca pierdes tu trabajo. No cuando realiza un seguimiento de su trabajo más reciente y guarda una copia de todo su código no guardado. Cada proyecto en Plunker se puede indexar y buscar, para que pueda buscar y encontrar lo que necesite, siempre que lo necesite. En el contenido de su corazón, puede bifurcar los 'plunks' de otros usuarios y usarlos como una plantilla para su proyecto. La consola de Plunker es impresionante y proporciona una gran ayuda en el proceso de depuración.
4. JSBin
JS Bin es un editor gratuito en línea de HTML, CSS y Javascript. Tiene una salida en vivo para que pueda ver lo que está haciendo. Algunas de sus características incluyen; live para recargar tanto en el editor como en la vista previa completa, codecasting, lo que implica grabar su sesión de codificación y enviarla a cualquier número de participantes, generalmente en tiempo real.   Hay la presencia de una consola y una vista renderizada completa. Además, JSBin tiene soporte para preprocesadores HTML, CSS y JS como Markdown, Stylus, Sass, SCSS, Less, Coffeescript, TypeScript y React Library. Los usuarios pueden simplemente arrastrar y soltar archivos y clonar proyectos como les plazca.
Codeply es un editor de HTML / CSS / JavaScript basado en la web que está integrado con los mejores frameworks. Codeply hace que el diseño web y el desarrollo frontend sean más fáciles al permitirle aprovechar el marco responsivo de su elección, con opciones como Bootstrap, Foundation, Materialize, UIkit y Skeleton. Ahórrese el estrés de buscar en los documentos o buscar ejemplos de código. Ahora selecciona diseños, fragmentos de código y elementos directamente desde el editor. Esta característica única hace posible aprender, crear prototipos y construir de manera rápida y rápida utilizando el marco de su elección.