Glitch, una gran plataforma para desarrolladores

Fallaes una gran plataforma para aprender a codificar.

Utilizo Glitch en muchos de mis tutoriales, creo que es ungran herramientaaescaparateconceptos, y tambiénpermitir que las personas usen sus proyectosy edificar sobre ellos.

Aquí hay un proyecto de ejemplo que hice en Glitch conReaccionaryReaccionar enrutador:https://glitch.com/edit/#!/flaviocopes-react-router-v4-2

Con Glitch puedes crear fácilmentepoblaciónyprototiposde aplicaciones escritas en JavaScript, desde simples páginas web hasta marcos avanzados como React oVuey aplicaciones Node.js del lado del servidor.

Está construido sobreNodoy tiene la capacidad de instalar cualquiernpmpaquete que quieras, correpaquete weby mucho más.

Es presentado por las personas que hicieron algunos productos de gran éxito, incluidos Trello y Stack Overflow, por lo que tiene muchas bonificaciones de credibilidad para eso.

¿Por qué creo que Glitch es genial?

Glitch "hizo clic" para mí en cómo se presenta en undivertidointerfaz, perono tonto.

Tienes acceso aregistros, laconsolay muchas cosas internas.

Además, el concepto de remezclar tan prominente en la interfaz hace que sea mucho más probable que cree muchos proyectos allí, ya que nunca tengo que empezar desde cero.

Puedes empezar a sumergirte en el códigosin perder tiempoconfigurar un entorno, control de versiones y centrarse en la idea, con unHTTPSURL y unaCDNpara los activos de medios.

Además, no hay ningún bloqueo en absoluto, es solo Node.js (o si no usa JavaScript del lado del servidor, es solo HTML, JS y CSS)

¿Es gratis?

sí, es gratis, y en el futuro podrían agregar aún más funciones para un plan pago, pero afirman que el Glitch actual siempre será gratis como lo es ahora.

Hay límites razonables como

• Tiene 128 MB de espacio, excluidos los paquetes npm, más 512 MB para activos multimedia
• Puede atender hasta 4000 solicitudes por hora
• Las aplicaciones se detienen si no se accede a ellas durante 5 minutos y no reciben ninguna solicitud HTTP, y las aplicaciones de ejecución prolongada se detienen después de 12 horas. Tan pronto como llega una solicitud HTTP, comienzan de nuevo

Una descripción general de Glitch

Esta es la página de inicio de Glitch, muestra algunos proyectos que decidieron mostrar porque son geniales y algunos proyectos iniciales:

Crear una cuenta es gratis y fácil, simplemente presione "Iniciar sesión" y elija entre Facebook y GitHub como sus "puntos de entrada" (recomiendo GitHub):

Se le redirige a GitHub para autorizar:

Una vez que haya iniciado sesión, la página de inicio cambia para mostrar también sus proyectos:

Haciendo clicSus proyectosle envía a su página de perfil, que tiene su nombre en la URL. El mio eshttps://glitch.com/@flaviocopes.

Usted puedealfilerproyectos, para encontrarlos más fácilmente cuando tenga muchos.

El concepto de remezclar

Cuando empiece por primera vez, por supuesto, no tendrá proyectos propios.

Glitch hace que sea muy fácil comenzar y nunca comiences desde un proyecto en blanco.Tu siempreremezclarotro proyecto.

Puede mezclar un proyecto que le guste, tal vez uno que encontró en Twitter o que aparece en la página de inicio de Glitch, o puede comenzar desde un proyecto que es un modelo estándar para comenzar algo:

• Una página web sencilla
• Aplicación Node.js Express
• Una consola de Node.js
• Una aplicación Create-React-App
• Una aplicación de inicio de Nuxt

Hay muchos otros fallos iniciales en estas colecciones:

• Hello World Glitches
• Bloques de construcción

Si está aprendiendo a codificar en este momento, elAprender a codificar la colección de fallases muy lindo.

He creado algunas aplicaciones de inicio que uso constantemente para mis demostraciones y pruebas, y son:

• Fallo simple de HTML + CSS + JS
• Error de inicio de React + webpack

Glitch hace que sea muy fácil crear sus propios bloques de construcción, y al fijarlos en su perfil, puede tenerlos siempre en la parte superior, fáciles de encontrar.

Remix una falla

Una vez que tenga una falla sobre la que desea construir, simplemente haga clic en ella y aparecerá una ventana:

Hay 3 botones:

• Avanceun error es un código que hace algo. Esto muestra el resultado de la falla.
• Editar proyectomuestra la fuente del proyecto y puede comenzar a editarlo
• Remix Thisclona la falla a una nueva

Cada vez que remezclas un problema técnico, se crea un nuevo proyecto, con un nombre aleatorio.

Aquí hay un error justo después de crearlo remezclando otro:

Glitch le dio el nombreguttural-noodle. Al hacer clic en el nombre puede cambiarlo:

También puede cambiar la descripción.

Desde aquí también puede crear una nueva falla desde cero, remezclar la falla actual o ir a otra.

Importación / exportación de GitHub

Hay una fácil importación / exportación desde / hacia GitHub, que es muy conveniente:

Mantenga su proyecto privado

Al hacer clic en el candado, el problema es privado:

Crea un nuevo proyecto

Al hacer clic en "Nuevo proyecto" se muestran 3 opciones:

• aplicación de nodo
• nodo-sqlite
• Página web

Este es un atajo para salir a buscar esas aplicaciones de inicio y mezclarlas. Debajo de las campanas, al hacer clic en una de esas opciones se remezcla una falla existente.

En cualquier falla, al hacer clic en "Mostrar" se abrirá una nueva pestaña donde se ejecuta la aplicación:

URL de la aplicación

Observe la URL, es:

https://flavio-my-nice-project.glitch.me

Eso refleja el nombre de la aplicación.

La URL de edición es un poco diferente:

https://glitch.com/edit/#!/flavio-my-nice-project

La vista previa se ejecuta en un subdominio deglitch.me, mientras se edita englitch.com.

¿Notaste los peces a la derecha de la página? Es un pequeño JavaScript que Glitch recomienda agregar a la página, para permitir que otras personas mezclen el proyecto o vean la fuente:

Ejecutando la aplicación

Cada vez que realiza un cambio en la fuente, la aplicación se reconstruye y la vista en vivo se actualiza.

Esto es tan conveniente que la aplicación de cambios en tiempo real brinda una retroalimentación inmediata que es de gran ayuda al desarrollar.

Misterios

No desea que todos puedan ver ninguna clave de API o contraseña que pueda usarse en el código. Cualquiera de esas cadenas secretas se debe poner en el especial.envarchivo, que tiene una clave al lado.

Si invitas a colaboradores, podrán ver el contenido, ya que son parte del proyecto.

Pero cualquiera que lo mezcle, o las personas invitadas por usted para ayudar, no verán el contenido del archivo.

Administrar archivos

Agregar un nuevo archivo a un proyecto es fácil.

Usted puedearrastre y suelte archivos y carpetas desde su computadora local, o haga clic en "Archivo nuevo”Botón encima de la lista de archivos.

También es intuitivo cómo cambiar el nombre, copiar o eliminar archivos:

Licencia y código de conducta con un solo clic

Tener una licencia en el código es una de las cosas que se pasa por alto en los proyectos de muestra, pero determina lo que otros pueden hacer o no pueden hacer con su proyecto. Sin una licencia, un proyecto no es de código abierto y todos los derechos están reservados, por lo que el código no se puede redistribuir y otras personas no pueden hacer nada con él (nota: este es mi entendimiento y IANAL - No soy un abogado).

Glitch lo hacemuy facilpara agregar una licencia, en elArchivo nuevopanel:

También puede cambiarlo fácilmente:

El código de conducta es otra pieza muy importante para cualquier proyecto y comunidad. Hace que los colaboradores se sientan bienvenidos y protegidos en su participación en la comunidad.

losAgregar código de conductaEl botón agrega un código de conducta de muestra para proyectos de código abierto desde los que puede comenzar.

Agregar un paquete npm

Haga clic en elpackage.jsonarchivo, y si aún no tiene uno, cree uno vacío.

Haga clic en elAgregar paqueteque ahora aparece en la parte superior, y puede agregar un nuevo paquete.

Además, si tiene un paquete que necesita actualizarse, Glitch mostrará la cantidad de paquetes que necesitan una actualización y puede actualizarlos a la última versión con un simple clic:

Usa una versión personalizada de Node.js

Puede configurar la versión de Node.js encualquiera de estosen tuspackage.json. Usando.xusará la última versión de una versión principal, que es lo más útil, como esto:

{
  //...
  "engines": {
    "node": "8.x"
  }
}

Almacenamiento

Glitch tiene un sistema de archivos persistente. Los archivos se guardan en el disco incluso si su aplicación está detenida o si no los usa durante mucho tiempo.

Esto le permite almacenar datos en disco, utilizando bases de datos locales o almacenamiento basado en archivos (archivo plano).

Si pones tus datos en el.datacarpeta, este nombre especial indica que el contenido no se copiará a un nuevo proyecto con la falla se remezcla.

Incrustar un error en una página

La clave para usar Glitch para crear tutoriales es la capacidad de incrustar el código y la vista de presentación en una página.

Hacer clicCuotayInsertar proyectopara abrir la vista Embed Project. Desde allí, puede elegir insertar solo el código, la aplicación o personalizar la altura del widget, y obtener su código HTML para colocarlo en su sitio:

Colaborar en una falla

Desde el panel Compartir, elInvitar a colaboradores a editarEl enlace le permite invitar a cualquier persona a editar la falla en tiempo real con usted.

Puede ver sus cambios a medida que lo hacen. ¡Es genial!

Pidiendo ayuda

Vinculada a esta función de colaboración, hay una excelente: puedes pedir ayuda a cualquier persona en el mundo, simplemente seleccionando un texto en la página y haciendo clic en el ícono de la mano levantada:

Esto abre un panel donde puede agregar una etiqueta de idioma y una breve descripción de lo que necesita:

Una vez hecho esto, su solicitud se mostrará en la página de inicio de Glitch para que cualquiera pueda recogerla.

Cuando una persona interviene para ayudar, ve la línea que resaltaste y descubrí que los comentarios eran una buena forma de comunicarse como un chat:

Ver los registros

Hacer clicRegistrospara tener acceso a todos los registros de la aplicación:

Accede a la consola

Desde el panel Registros, hay unConsolabotón. Haga clic en él para abrir la consola interactiva en una pestaña separada en el navegador:

El depurador

Haciendo clic en elDepuradoren el panel Registros, se abre una instancia de Chrome DevTools en otra pestaña con un enlace a la URL del depurador.

El historial de cambios

Una gran característica es la capacidad de verificar todos sus cambios en el historial del proyecto.

Es muy parecido a cómo funciona Git; de hecho, bajo el capó, Git está impulsando esta interfaz realmente fácil de usar, que se abre haciendo clic en el botón ⏪:

¿En qué se diferencia Glitch de Codepen o JSFiddle?

Una gran diferencia que separa a Glitch de otras herramientas es la capacidad de ejecutar código del lado del servidor.

Codepen y JSFiddle solo pueden ejecutar código frontend, mientras que Glitch incluso se puede usar como un servidor liviano para sus aplicaciones, teniendo en cuenta los límites de uso.

Por ejemplo, configuré un servidor Express.js que se activa mediante un Webhook en momentos específicos durante el día para realizar algunas tareas. No necesito preocuparme de que se ejecute en otro servidor, simplemente lo escribí en Glitch y lo ejecuté directamente desde allí.

¡Eso es!

Espero que les haya gustado mi pequeño tutorial sobre el uso de Glitch, y espero haberles explicado la mayoría de sus características principales.

¿Más preguntas?

Te sugiero que lo pruebes y veas si también te queda bien.

losPreguntas frecuentes sobre fallases un gran lugar para comenzar.

¡Diviértete!

Más tutoriales de servicios:

• Cómo comenzar con Firebase Hosting
• Un tutorial para alojar su sitio estático en Netlify
• Diseñadores de código y formateadores para desarrolladores web
• El disparador automático se implementa en Netlify
• Glitch, una gran plataforma para desarrolladores
• API de Airtable para desarrolladores
• Cómo autenticarse en cualquier API de Google
• Tutorial de Zeit Now
• Tutorial de funciones de Netlify Lambda
• Cómo usar Firebase Firestore como su base de datos
• Cómo arreglé la barra inclinada final en las reescrituras de Netlify
• Cómo acceder a los parámetros de consulta en las funciones de Netlify
• Cómo usar variables de entorno en funciones de Netlify
• Cómo usar paquetes npm en Netlify Functions
• Cómo crear su primer VPS en DigitalOcean