10 Webs interesantes para probar tus C贸digos Online

c贸digos online

Las tendencias modernas y las aplicaciones web han cambiado dr谩sticamente la forma en que los desarrolladores web podemos construir. Obviamente, necesita alg煤n tipo de IDE para codificar nuevos archivos y guardarlos para su implementaci贸n. Pero, 驴por qu茅 hay de probar tus fragmentos de c贸digos online? 隆Hay m谩s herramientas disponibles ahora que nunca!

En este art铆culo, quiero describir 10 aplicaciones web interesantes para probar tus c贸digos online . Todas estas aplicaciones requieren una conexi贸n a Internet y algunos de los editores m谩s avanzados ofrecen planes profesionales para actualizar las funciones de tu cuenta. Pero la mayor铆a de estas herramientas seguramente ser谩n 煤tiles cuando est茅s luchando por depurar un bloque de JavaScript o PHP.

JSBin

10 aplicaciones web interesantes para probar tu c贸digo online

De manera similar a la anterior, jsbin es una consola de depuraci贸n de JavaScript simple. Su presentaci贸n implica un esfuerzo de colaboraci贸n en el que puede compartir un enlace privado con otros desarrolladores y escribir juntos en tiempo real.

Tu interfaz puede resultar un poco confusa para los reci茅n llegados. Los desarrolladores han configurado algunos tutoriales en l铆nea que puedes leer si est谩 interesado. B谩sicamente, puedes seleccionar entre cualquier cantidad de bibliotecas JS: jQuery, JQuery UI, jQM, Prototype, MooTools, hay docenas para elegir.

A medida que codifica diferentes elementos, los borradores se guardar谩n autom谩ticamente. Tienes la posibilidad de descargar tu producto final o mantener el c贸digos online. Tu sistema es mucho m谩s avanzado para exportar y mantener tus c贸digos online como una plantilla simple.

jsFiddle

10 aplicaciones web interesantes para probar tu c贸digo online

Cualquiera que haya navegado a trav茅s de Stack Overflow debe conocer jsFiddle . Su interfaz es una gran diferencia en comparaci贸n con JSBin, junto con el soporte para funciones m谩s complejas.

De inmediato, puedes registrarse para obtener una cuenta gratuita y comenzar a guardar tus ejemplos de c贸digos online. jsFiddle ofrece una URL corta que puedes compartir en la Web a trav茅s de Twitter, Facebook e incluso Stack. Pero tenga en cuenta que no necesita una cuenta para comenzar a codificar. Es solo una funci贸n 煤til para mantener todo organizado.

jsFiddle tambi茅n admite la inclusi贸n de bibliotecas como Prototype y jQuery. Puedes incluir recursos externos adicionales a archivos JS / CSS en cada documento de prueba.

CodePen

10 aplicaciones web interesantes para probar tu c贸digo online

CodePen se parece m谩s a una red social para desarrolladores web que a un campo de juegos de c贸digos online. No solo podemos ver que las personas comparten c贸digos online en HTML, CSS y JavaScript, lo que se llama Pen, sino que tambi茅n podemos darle un 芦Me gusta禄 al Pen, agregar comentarios, seleccionar una colecci贸n de Pen, crear una publicaci贸n y siga el desaf铆o para subir de nivel nuestra habilidad de desarrollo web.

Recibe mi Newsletter semanal
Recibir谩s un email semanal (los domingos por la ma帽ana) con el mejor contenido que vaya encontrado por la red.


Yo tambi茅n odio el spam solo contenido de valor a trav茅s de mi newsletter

C贸deSandbox

10 aplicaciones web interesantes para probar tu c贸digo online

Codesandbox es un campo de juegos de JavaScript con todas las funciones. Adem谩s de ejecutar c贸digos online JavaScript de Vanilla o un marco como React.js, Vue.js y Svelte , tambi茅n puedes ejecutar una aplicaci贸n Node.js que funcione. Significa que puedes definir las dependencias de Node.js dentro del package.jsonarchivo. Codesandbox descargar谩 autom谩ticamente las dependencias de NPM. Tambi茅n proporciona acceso a una Terminal basada en web para que pueda ejecutar cualquier script de NPM directamente desde el navegador .

Consulte la p谩gina Explorar para encontrar cosas interesantes integradas en CodeSandbox.

WebMaker

10 aplicaciones web interesantes para probar tu c贸digo online

WebMaker es un campo de juegos de c贸digos online para HTML, CSS, JavaScript y preprocesadores como Sass, LESS y JSX. WebMaker compilar谩 autom谩ticamente la sintaxis de estos preprocesadores para que el navegador represente el c贸digo correctamente. Puedes usarlo en el navegador o instalar la extensi贸n en Chrome para que puedas seguir jugando con el c贸digo sin conexi贸n. Cuando hayas terminado de experimentar con tus c贸digos online, te permite guardar tu trabajo localmente, descargar los archivos o compartirlos en CodePen.

CSSDesk

10 Webs interesantes para probar tus C贸digos Online

Pasando del mundo de las secuencias de comandos al lenguaje de hojas de estilo, tenemos CSSDesk . Tiene una configuraci贸n similar a todas las dem谩s, con tus c贸digos online fuente a la izquierda y el renderizado final de la p谩gina web a la derecha. Esta aplicaci贸n web es ideal para crear plantillas de p谩ginas web peque帽as y probar las propiedades CSS3 m谩s largas con degradados y sombras de cuadro.

Esta aplicaci贸n tambi茅n te permite descargar el c贸digo fuente como archivos a tu computadora. Puede ser un reemplazo s贸lido en situaciones en las que est谩s trabajando en un port谩til sin ning煤n software IDE. O, adem谩s, puedes generar un enlace URL corto para compartir en l铆nea. Entonces, otros desarrolladores pueden entrar y editar lo que ya has creado, 隆definitivamente una soluci贸n interesante!

IDEOne

10 Webs interesantes para probar tus C贸digos Online

IDE One es otra herramienta basada en programaci贸n profunda y 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 muchos m谩s.

Tambi茅n te podr铆a interesar

Lo bueno de su aplicaci贸n es que puedes depurar r谩pidamente muchos lenguajes de programaci贸n diferentes desde la misma p谩gina. Tambi茅n puedes almacenar este c贸digo fuente a trav茅s de una URL 煤nica para compartir en la Web. Sin embargo, creo que su dise帽o est谩 muy abarrotado de anuncios y otro contenido, lo que dificulta el uso de tu sitio web. Ser铆a genial ver la opci贸n de incluir bibliotecas de c贸digos online alternativas, como Cocoa Touch para el desarrollo de aplicaciones para iPhone.

JSLint

10 Webs interesantes para probar tus C贸digos Online

La herramienta de calidad de c贸digos online JavaScript autoproclamada debe ser JSLint . Su sitio web es un poco extra帽o, pero el editor de c贸digo funciona exactamente como cabr铆a esperar.

Es posible que las opciones te resulten muy confusas si no ha utilizado su marco antes. Es posible trabajar con c贸digo fuente abierto como Node.js si tienes las habilidades. Pero gran parte del c贸digo fuente ni siquiera admite el resaltado de sintaxis, una gran decepci贸n cuando tienes tantas otras opciones para elegir. Verificar铆a JSLint si tienes tiempo, pero es posible que no se convierta en tu depurador de JavaScript en l铆nea.

Viol铆n SQL

10 Webs interesantes para probar tus C贸digos Online

Vimos anteriormente el poder de una aplicaci贸n web como jsFiddle. Ahora podemos ver SQL Fiddle que funciona de la misma manera, excepto por la sintaxis de la base de datos SQL. Todav铆a tengo que encontrar otra alternativa para probar los c贸digos online de la base de datos y esta es, con mucho, mi opci贸n favorita.

Todos los datos de salida de tu c贸digo SQL aparecer谩n en una tabla debajo de los editores. Puedes escribir c贸digo para implementar nuevos datos a la derecha y generar un esquema a la izquierda. Este esquema de base de datos es un c贸digo SQL que puedes guardar para exportar tu base de datos actual y reinstalar todo en un nuevo servidor.

Si no est谩 familiarizado con las bases de datos o el lenguaje SQL, esta aplicaci贸n no ser谩 de mucha ayuda. Pero incluso para los desarrolladores que son nuevos pero est谩n interesados 鈥嬧媏n aprender SQL, 隆esto es brillante! Echa un vistazo a uno de sus ejemplos de c贸digos online b谩sicos para que puedas hacerte una idea de c贸mo funciona la aplicaci贸n.

ESLint

10 Webs interesantes para probar tus C贸digos Online

ESLint te permite establecer reglas de escritura en su c贸digo. Es una gran herramienta si trabaja en un proyecto compartido dentro de un equipo para asegurarse de que todos sigan los mismos estilos y reglas al escribir los c贸digos. Proporciona una gran cantidad de opciones sobre c贸mo gobernar铆a los estilos de tus c贸digos online, lo que a menudo es bastante intimidante, especialmente si acaba de comenzar con ESLint.

Este sitio de demostraci贸n en l铆nea de ESLint puede ayudarte a probar c贸mo funciona cada regla en tu c贸digo incluso antes de instalar los paquetes de NPM. Proporciona la lista completa de reglas que puedes activar y desactivar. Cuando est茅 todo listo, puedes descargar el archivo de configuraci贸n para agregarlo a tu proyecto.

PHPStan

10 Webs interesantes para probar tus C贸digos Online

PHPStan es una herramienta de an谩lisis de c贸digo est谩tico para PHP. Comprueba si hay errores de c贸digo y errores potenciales sin ejecutar realmente el c贸digo. Te dir谩 si pasa, por ejemplo, un valor de cadena a una funci贸n que realmente acepta un n煤mero entero, o accede a una propiedad que no existe en una clase.

Pruebe el editor en l铆nea en este sitio web de PHPStan para ver c贸mo funciona. Se sorprender谩 de que hay tantos c贸digos PHP existentes que se pueden optimizar a煤n m谩s y corregir posibles errores. Tener an谩lisis est谩tico tambi茅n puede capacitarlo para convertirse en un mejor desarrollador, ya que estar谩 acostumbrado a escribir c贸digo sint谩cticamente correcto.

OneCompiler

10 Webs interesantes para probar tus C贸digos Online

Un compilador todo en uno para muchos lenguajes de programaci贸n. Admite m谩s de 40 idiomas que incluyen Go, PHP, Java, JavaScript e incluso C y C ++. Puede escribir estos lenguajes dentro de estas herramientas y compilar谩 y ejecutar谩 el c贸digo inmediatamente. Esta herramienta es una herramienta perfecta para probar tu c贸digo r谩pidamente para una demostraci贸n, o simplemente para ejecutar una prueba r谩pida.

Adem谩s del ejecutor de c贸digo, esta herramienta tambi茅n ofrece desaf铆os de c贸digo para agudizar tus habilidades de programaci贸n y resoluci贸n de problemas. Puede comenzar el desaf铆o desde los principiantes hasta el nivel m谩s avanzado.

Jsitor

10 Webs interesantes para probar tus C贸digos Online

Un editor de c贸digo en l铆nea donde puede ejecutar JavaScript, HTML y CSS. Incluye algunas bibliotecas populares, as铆 como jQuery, React.js, Vue.js, Font Awesome y muchas m谩s. Es una gran herramienta para probar tu idea sin tener que configurar un entorno de trabajo en tu computadora. Tambi茅n puede usarlo para ejecutar una demostraci贸n r谩pida.

Una cosa que la hace 煤nica de otras herramientas similares es que proporciona una aplicaci贸n nativa en iOS y Android. Esto te permite verter tu idea c贸modamente con tu tableta y tel茅fono.

Glitch

10 Webs interesantes para probar tus C贸digos Online

Una herramienta en la que puede crear un sitio web est谩tico con algunas de las bibliotecas y marcos modernos. Incluye React.js, Node.js y Eleventy.js. Pero tambi茅n puede escribir HTML, CSS y JavaScript.

Adem谩s del editor en l铆nea donde escribes tus c贸digos, Glitch tambi茅n proporciona varias herramientas avanzadas que lo convierten en un excelente entorno de trabajo en l铆nea para crear sitios web est谩ticos. Tiene una Terminal en l铆nea donde puedes escribir comandos, ver registros y un depurador de navegador.

Una vez que tenga el sitio web listo, puede descargar los archivos o compartir la URL 煤nica del proyecto.

Stackblitz

10 Webs interesantes para probar tus C贸digos Online

Stackblitz es un entorno de desarrollo en l铆nea donde puedes crear sitios web con pilas modernas. Es compatible con el marco de backend Next.js y Node.js, junto con algunas bibliotecas de front-end populares como React.js, Vue.js y Angular.

Puedes seleccionar uno de estos marcos como punto de partida para tu proyecto o simplemente arrastrar y soltar una carpeta en 茅l. Est谩 preconfigurado con herramientas que normalmente necesita configurar por tu cuenta cuando trabaja localmente en tu computadora, como la actualizaci贸n autom谩tica, la instalaci贸n de dependencias y Prettier .

Adem谩s de eso, tambi茅n puedes conectar tu sitio web Firebase , en caso de que necesite conectarse a una base de datos en tiempo real.

keyboard

10 Webs interesantes para probar tus C贸digos Online

(El teclado ha sido descontinuado).

Creado originalmente por Steven Hazel, Codepad es una aplicaci贸n web 煤nica en la que puedes compartir la sintaxis del c贸digo en la web. En lugar de simplemente depurar, Codepad te permite copiar / pegar fragmentos importantes de c贸digo para compartir en l铆nea.

La pantalla de salida muestra cualquier mensaje de error asociado con tu c贸digo. Los botones de radio del men煤 de la izquierda te permiten cambiar el lenguaje de an谩lisis de C / C ++, Perl, PHP, Python, Ruby y muchos m谩s. Yo dir铆a que Codepad es realmente para ingenieros de software que necesitan colaborar y depurar tus programas m谩s confusos.

Pensamientos finales

Con m谩s computadoras conectadas en l铆nea, es cada vez m谩s f谩cil para los desarrolladores trabajar juntos y colaborar en el navegador. Estamos viendo que cada vez m谩s tecnolog铆as pasan de las aplicaciones locales, y 驴qui茅n sabe hasta d贸nde llegar谩 esta tendencia?

Espero que esta colecci贸n de herramientas de prueba de c贸digo pueda hacerte pensar en el entorno de desarrollo moderno. Es muy f谩cil armar r谩pidamente un proyecto web HTML / CSS y en minutos tener una peque帽a vista previa de demostraci贸n. Recuerde que estas son solo herramientas que lo ayudar谩n a guiarlo en el camino hacia la construcci贸n de tu producto final. 

Es cierto que el proceso de desarrollar una web o aplicaci贸n puede ser desafiante y confuso, pero para eso estamos, para ayudar. Contacta hoy para programar tu sesi贸n de estrategia y dejar que comience la lluvia de ideas.

Recibe mi Newsletter semanal
Recibir谩s un email semanal (los domingos por la ma帽ana) con el mejor contenido que vaya encontrado por la red.


Yo tambi茅n odio el spam solo contenido de valor a trav茅s de mi newsletter

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada.

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.

Ir arriba