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?
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:
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:
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.env
archivo, 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.json
archivo, 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.x
usará 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.data
carpeta, 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