10 sitios web para probar tu código en línea

Las tendencias modernas y las aplicaciones web han cambiado drásticamente la forma en que los desarrolladores web construyen. Obviamente, necesita algún tipo de IDE para escribir nuevos archivos y guardarlos para su implementación. Pero, ¿qué tal si solo pruebas tus fragmentos de código? ¡Hay más herramientas disponibles ahora que nunca!

En este artículo me gustaría esbozar 10 aplicaciones web divertidas para probar tu código en líneaTodas estas aplicaciones requieren una conexión a Internet, y algunos de los editores más avanzados ofrecen planes profesionales para actualizar la funcionalidad de su cuenta. Sin embargo, la mayoría de estas herramientas definitivamente serán útiles cuando esté ocupado depurando bloques de JavaScript o PHP.

JSBin

Similar a lo anterior, jsbin es una consola simple para depurar JavaScript. Su presentación incluye un esfuerzo colaborativo donde puedes compartir relaciones privadas con otros desarrolladores y escribir juntos en tiempo real.

Su interfaz puede ser un poco confusa para los principiantes. El desarrollador ha creado algunos tutoriales en línea que puede leer si está interesado. En principio, puede elegir entre cualquier cantidad de bibliotecas JS: jQuery, JQuery UI, jQM, Prototype, MooTools, hay docenas para elegir.

Los borradores se guardan automáticamente a medida que escribe varios elementos. Puede descargar el producto final o guardar el código fuente en línea. Su sistema es mucho más avanzado para exportar código y guardarlo como una plantilla básica.

jsviolín

Necesita saber acerca de cualquier persona que haya mirado Stack Overflow jsviolínEn comparación con JSBin, su interfaz es muy diferente y admite una funcionalidad más compleja.

puedes de inmediato Regístrese para obtener una cuenta gratuita y comience a guardar sus muestras de código en línea. jsFiddle proporciona una URL corta que puede compartir en línea a través de Twitter, Facebook o incluso Stack. Sin embargo, tenga en cuenta que no necesita una cuenta para comenzar a cifrar. Es solo una característica útil para mantener todo organizado.

jsFiddle también admite la inclusión de bibliotecas como Prototype y jQuery. Puede incluir recursos externos adicionales para archivos JS/CSS en cada documento de prueba.

lápiz de código

lápiz de código Para los desarrolladores web, esto es más una red social que una plataforma de código. No solo podemos ver personas compartiendo código en HTML, CSS y JavaScript (llamados bolígrafos), sino que también podemos hacer clic en "Me gusta" en bolígrafos, agregar comentarios, seleccionar colecciones de bolígrafos, crear publicaciones y seguir desafíos para mejorar sus habilidades de desarrollo web.

caja de arena de código

caja de arena de código es un sitio JavaScript con todas las funciones. Además de implementar el código Vanilla JavaScript o React.js, Vue.js y Delgado, también puede ejecutar una aplicación Node.js en ejecución. Esto significa que puede package.json documento. Codesandbox descargará automáticamente las dependencias en el NPM. También brinda acceso a un terminal basado en la web para que pueda ejecutar Cada script de NPM en el navegador.

Ver explorar página para encontrar cosas geniales integradas en CodeSandbox.

creador de paginas web

creador de paginas web Plataforma de código para HTML, CSS, JavaScript y preprocesadores como Sass, LESS y JSX. WebMaker compilará automáticamente estas sintaxis de preprocesador para que el navegador pueda mostrar el código correctamente. Puede usar o instalar en su navegador extensiones de cromo Por lo tanto, aún puede usar el código sin conexión. Cuando haya terminado de experimentar con el código, puede guardar su trabajo localmente, descargar un archivo o compartirlo con CodePen.

CSSDescritorio

Pasando del mundo de los scripts a los lenguajes de estilo, tenemos CSSDescritorioSu configuración es similar a todo lo demás, con su código fuente a la izquierda y la página web final a la derecha. Esta aplicación web es excelente para crear plantillas web pequeñas y probar propiedades CSS3 largas con degradados y sombras por cuadro.

Esta aplicación también le permite descargar el código fuente como un archivo en su computadora. Puede ser una alternativa sólida en situaciones en las que trabaja en una computadora portátil sin ningún software IDE. Alternativamente, puede generar una URL corta para compartir en línea. Entonces otros desarrolladores pueden entrar y para editar lo que ya ha creado, ¡definitivamente una solución interesante!

IDEOuno

IDE uno es otra herramienta basada en la programación profunda y el desarrollo de software. Su editor en línea admite el resaltado de sintaxis para algunos idiomas muy destacados. Estos incluyen Objective-C, Java, C #, VB.NET, SQL y más.

Lo bueno de su aplicación es que puedes depurar rápidamente varios lenguajes de programación diferentes desde la misma página. También puede almacenar este código fuente con una URL única para compartir en la web. Pero encuentro que su diseño está muy lleno, con anuncios y otro contenido que me dificulta usar su sitio. Es realmente genial ver opciones que incluyen bases de código alternativas, como Cocoa Touch para el desarrollo de aplicaciones para iPhone.

JSLint

Debe haber una herramienta de calidad de código JavaScript autoproclamada JSLintSu sitio web es un poco extraño, pero el editor de código funciona exactamente como cabría esperar.

Si no ha usado su marco antes, puede encontrar estas opciones muy confusas. nodo.js si tienes las habilidades. Pero la mayor parte del código fuente ni siquiera admite el resaltado de sintaxis, lo cual es una gran decepción cuando tienes tantas otras opciones para elegir. Si tiene tiempo, miraría JSLint, pero probablemente no sea su herramienta de depuración de JavaScript en línea.

Violín SQL

Hemos visto el poder de las aplicaciones web como jsFiddle antes. Ahora podemos ver Violín SQL Funciona de la misma manera, excepto por la sintaxis de la base de datos SQL. No encontré otra alternativa para probar el código de la base de datos, esta es mi opción favorita.

Todo el código fuente de SQL se mostrará en una tabla debajo del editor. Puede escribir código para aplicar nuevos datos a la derecha y generar un diagrama a la izquierda. Este esquema de base de datos es un código SQL que puede guardar para exportar la base de datos actual y reinstalar todo en el nuevo servidor.

Si no estás familiarizado con las bases de datos o el lenguaje SQL, esta aplicación no te será de mucha utilidad. Pero incluso para los desarrolladores que son nuevos en SQL pero que están interesados ​​en aprender SQL, ¡eso es genial! Echa un vistazo a uno de ellos. Ejemplo de código básico De esta manera usted puede averiguar cómo funciona la aplicación.

demostración de ESLint

ESLint le permite establecer reglas para escribir su código. Si está trabajando en un proyecto compartido como equipo, esta es una gran herramienta para asegurarse de que todos sigan el mismo estilo y reglas al escribir código. Ofrece muchas opciones sobre cómo administrar el estilo de su código, lo que a menudo puede ser bastante desalentador, especialmente si recién está comenzando con ESLint.

Este sitio de demostración en línea de ESLint puede ayudarlo a probar cómo cada regla afecta su código antes de instalar el paquete NPM. Proporciona una lista completa de reglas que puede activar y desactivar. Cuando haya terminado, puede descargar el archivo de configuración para agregarlo a su proyecto.

Estado PHP

PHPStan es una herramienta para el análisis estático de código PHP. Comprueba los errores de código y los posibles errores sin ejecutar realmente el código. Por ejemplo, le dirá si debe pasar un valor de cadena a una función que realmente toma un número entero o acceder a una propiedad que no existe en la clase.

Pruebe este editor de sitios web PHPStan en línea para ver cómo funciona. Se sorprenderá de la cantidad de código PHP existente que se puede optimizar aún más y de corregir posibles errores. Hacer análisis estático también lo capacita para ser un mejor desarrollador, porque se acostumbrará a escribir código sintácticamente correcto.

traductor

Compilador todo en uno para múltiples lenguajes de programación. Admite más de 40 idiomas, incluidos Go, PHP, Java, JavaScript e incluso C y C ++. Puede escribir estos lenguajes en estas herramientas y compilará y ejecutará el código de inmediato. Esta herramienta es la herramienta ideal para probar rápidamente el código con fines de demostración o simplemente para ejecutar pruebas rápidas.

Además del programa de ejecución de código, esta herramienta ofrece desafíos de código para mejorar sus habilidades de programación y resolución de problemas. Puedes comenzar con principiantes y desafiar a niveles más avanzados.

Jecito

Un editor de código en línea donde puede ejecutar JavaScript, HTML y CSS. Incluye algunas bibliotecas populares como jQuery, React.js, Vue.js, Font Awesome y más. Esta es una gran herramienta para probar sus ideas sin tener que configurar un entorno de trabajo en su computadora. También puede usarlo para ejecutar una demostración rápida.

Lo que lo diferencia de otros similares tools es que ofrece aplicaciones naturales para iOS y Android. Esto le permite expresar sus pensamientos cómodamente desde su tableta y teléfono móvil.

bicho

Una herramienta donde puede crear sitios web estáticos utilizando algunas bibliotecas y marcos modernos. Incluye React.js, Node.js y Eleventy.js. Pero también puede escribir HTML, CSS y JavaScript simples.

Además del editor en línea que codifica, Glitch ofrece varias herramientas avanzadas que lo convierten en un excelente entorno de trabajo en línea para crear sitios web estáticos. Hay una terminal en línea donde puede ingresar comandos, ver archivos de registro y un navegador de depuración.

Una vez que su sitio web esté listo, puede descargar el archivo o compartir la URL única del elemento.

bombardeo de pila

Stackblitz es un entorno de desarrollo en línea donde puede crear sitios web utilizando pilas modernas. Admite los marcos de back-end Next.js y Node.js, así como algunas bibliotecas de front-end populares como React.js, Vue.js y Angular.

Puede elegir uno de los marcos como punto de partida para su proyecto o simplemente arrastrar y soltar una carpeta en él. Viene preconfigurado con herramientas que normalmente tiene que configurar usted mismo cuando trabaja localmente en su computadora, como actualizaciones automáticas, instalación de dependencias y más hermosa.

Además de esto, también puede vincular a su sitio web base de fuegoen caso de que necesite conectarse a la base de datos en tiempo real.

teclado

(El teclado está abajo.)

Creado originalmente por Stephen Hazel, teclado es una aplicación web única donde puede compartir la sintaxis del código en las redes. Más que simplemente depurar, Codepad le permite copiar/pegar bits de código importantes para compartir en línea.

La pantalla de inicio muestra todos los mensajes de error asociados con su código. Los botones de selección del menú izquierdo le permiten cambiar el idioma de análisis de C / C ++, Perl, PHP, Python, Ruby, etc. Creo que Codepad es realmente para ingenieros de software que necesitan colaborar y depurar programas más confusos.

últimos pensamientos

Con más y más computadoras conectadas en línea, es más fácil para los desarrolladores trabajar y colaborar juntos en el navegador. Vemos que cada vez más tecnologías se alejan de las aplicaciones nativas, ¿quién sabe hasta dónde llegará esta tendencia?

Espero que esta colección de herramientas de prueba de código lo haga pensar en los entornos de desarrollo actuales. Es muy fácil crear rápidamente un proyecto web HTML/CSS con una pequeña vista previa de demostración en minutos. Recuerde que estas son solo herramientas para ayudarlo a construir su producto final. Si tiene alguna sugerencia o pregunta sobre este artículo, no dude en compartir sus pensamientos en la sección de discusión a continuación.