Glitch, una gran plataforma para desarrolladores

Glitch es una plataforma bastante sorprendente para aprender y experimentar con el código. Esta publicación te presenta Glitch y te hace pasar de cero a héroe

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?

, 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:

The homepage as guest

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):

Sign in to Glitch

Se le redirige a GitHub para autorizar:

Authorize Glitch on GitHub

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

The home page once logged in

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

The Glitch profile

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:

Hay muchos otros fallos iniciales en estas colecciones:

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:

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:

Remix glitch modal

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:

A remixed glitch

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

Rename a glitch

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:

GitHub Import export

Mantenga su proyecto privado

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

Keep project private

Crea un nuevo proyecto

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

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

Create a new project on Glitch

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:

The app running

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:

The fish on preview

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:

Manage the glitch

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:

Add a license

View the license

También puede cambiarlo fácilmente:

Change the license

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.

Add an npm package

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:

Update dependencies

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:

Embed glitch

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:

Ask for help on a line

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

Describe your problem

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:

Help out someone

Ver los registros

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

The project logs

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:

The project console

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.

The debugger

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 ⏪:

The history of changes

¿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: