Stories by gomflo on Medium

Como me hice viral en TikTok … Sin Bailar

gomflo — Tue, 25 May 2021 06:17:23 GMT

Como me hice viral en TikTok … Sin Bailar

Desde hace rato que ando investigando el tema de bots en Whatsapp, encontré varias librerías, whatsapp-web.js y open-wa funcionan bien pero no me convencían ya que utilizan headless browser como puppeteer y es bien conocido que tragan un buen de recursos (es como si tuvieras abierto un Chrome). Tiempo después encontré https://github.com/adiwajshing/Baileys me llamó bastante la atención ya que usa web sockets para hacer todas las conexiones y eso nos ahorra aproximadamente 1 GB de RAM.

Ya que había encontrado la librería lo primero que le agregue fue la funcionalidad de convertir una imagen a sticker usando un comando (!sticker).

Esa fue la única funcionalidad que le puse 😂. Lo subí a zeet.co y estuvo jalando bastante bien 24x7 por varios días, hasta que se me ocurrió subir este TikTok:

https://medium.com/media/9630b12ef2008632f1e9d19627f6afa0/href

Al minuto que compartí el celular para que le pudieran escribir recibió cientos de mensajes y zaz! en ese mismo minuto ya me habían suspendido la cuenta Whatsapp.

En poco tiempo se volvió muy viral, pero no creí que fuera alcanzar la cantidad de interacción que tiene hasta ahora (y sigue). Estuvo divertido el experimento, les dejo algunas estadísticas.

Seguidores ganados solo por ese TikTok:
7,500

Visualizaciones del TikTok:
609,000 (hasta ahorita)

Likes:
121,000

Comentarios:
8,360

Lo mejor de todo es lo que hice SIN BAILAR 😂.

Usar emojis como favicon

gomflo — Tue, 27 Apr 2021 02:12:00 GMT

Encontré una página bastante interesante con la cual vamos a poder utilizar emojis como ❤️ 🐵 ⚽️, etc como favicon, para los que no sepan, el favicon es el icono que aparece a lado del título en los exploradores como Google Chrome, Firefox, Safari, etc.

Favicon de diferentes páginas

Para usar un emoji como favicon basta con entrar a https://emojifav.com/ seleccionar el emoji que deseamos y copiar lo que nos muestra.

Copiamos elemento html que nos muestra dentro de la etiqueta de nuestro proyecto, y listo ya tenemos un favicon en forma de emoji en nuestro sitio.

Usando un emoji como favicon.

Super tip para VSCode Balance inward / outward

gomflo — Sat, 24 Apr 2021 22:19:06 GMT

No puedo creer que hasta hoy haya descubierto este tip para seleccionar bloques html de forma ultra efectiva 🤯.

Es fácil, posiciona el cursor sobre el bloque de html que deseas seleccionar después cmd + shift + p busca Balance y te mostrara 2 opciones: Balance (Inward) y Balance (Outward) la primera hace la selección de bloque hacia adentro tal y como su nombre lo indica y la segunda, buena ya debes saber, hacia afuera del bloque.

Ahora, si queremos llevar al siguiente nivel esta característica solo es necesario vincularlo a una combinación de teclas, por ejemplo ctrl + shit b para balance outward y ctrl + shift + v para balance inward.

🤯

Agregar Google Analytics a un proyecto Next.js en menos tiempo de lo que canta un gallo

gomflo — Tue, 09 Feb 2021 20:38:38 GMT

Al grano, crear un nuevo archivo que se llame _document.js dentro de la carpeta pages/ quedaría así pages/_document.js con el siguiente contenido:

import Document, { Html, Head, Main, NextScript } from 'next/document'

const GA_TRACKING_ID = '<< AQUI_VA_EL_TRACKING_ID >>'

export default class MyDocument extends Document {
  render() {
    return (
      
        
                      async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
                      dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        
        
          
          
        
      
    )
  }
}

Es todo, con esto todas las páginas de tu proyecto serán trackeadas por Google Analytics.

Mi sistema ninja para organizar con códigos QR

gomflo — Fri, 29 Jan 2021 01:28:11 GMT

Todas las soluciones comienzan con un problema, y eso fue lo que me paso, tengo varias cajas de esas donde guardas todo tipo de cosas y recuerdo que un día mi mamá me pidió el cargador de pilas, y si, como se lo imaginan… termine por buscar en todas las cajas hasta que en la última apareció el mentado cargador.

Me dieron las ansias como buen millennial 🤣 así que me puse a pensar de que manera podría organizar mejor esas cajas, la solución mas lógica fue escribir en una hoja todas las cosas que tiene cada caja, pero como todo buen monkey coder, me gusta complicarme las cosas y decidí desarrollar mi propio sistemita.

Es bastante simple, generé e imprimí en adhesivo unos códigos QR los cuales están vinculados a mi cuenta en scanup.mx y al momento de leer el código me lleva de forma automática al documento relacionado y ahí poder ver el contenido o todo lo relacionado a ese código QR.

Stack tecnológico

Soy un ávido, apasionado, y ferviente seguidor del termino DX (Developer Experience) es por eso que siempre ando en la búsqueda de las herramientas que mejor DX ofrezcan. El proyecto lo termine realizando con el siguiente stack.

Reactjs y Nextjs 😍 como framework
Nextjs es una verdadera chulada, hace un año que lo descubrí y todo lo termino haciendo en este framework, out of the box ya te ofrece rutas, code splitting, i8n, server side rendering, static site generation, fast refresh, optimización de imágenes y chingo más de cosas.

Tailwind CSS
Como librería de CSS, cambia por completo el paradigma a la hora de maquetar los sitios, pero ya que te acostumbras se vuelve bastante ágil el maquetado, es una librería “utility first” ademas de que ya viene con unos buenos defaults (paleta de colores, margenes, paddings, font size, etc).

Vercel
Para hosting y funciones serverless (el api pues…), ademas de que estos vatos son los creadores de Nextjs. Creanme los deploys se hacen ultra mega rápidos, literalmente es: vercel — prod aunque si te gustan los buenos estándares también puedes hacer los deploys a través de git, git push origin main y ya estás en producción.

Supabase
Para la base de datos y autenticación de usuarios, soporta magic link, es decir es una aplicación sin contraseñas, capturas tu correo, te llega un enlace, clic y ya estas registrado y con la sesión abierta. La base de datos es PostgreSQL, ahorita andan en beta, pero la neta es muy estable (y gratis por ahora 🤣).

Algolia
Como soy muy flojo me pregunte ¿Y qué pasa si ahora quiero buscar entre los documentos? Pa’ eso está algolia que es un buscador tipo gugul aparte de que es rápido (y lo es) puedes ir tuneando acá bien nice de forma algorítmica como quieres que aparezcan los resultados, la neta no le invertí mucho tiempo solo puse el buscador y ya.

Chequen como escribí mal la palabra “aspiradora” y algolia de igual forma encuentra resultados.

Igual creo que va ser algo que no vaya utilizar en muchos proyectos ya que si esta medio caro el buscadorsito.

Así que ya saben, el día que tengan p2 con algo y se pueda construir, pues háganlo, aparte se van a divertir.

Ah, se me olvidaba, el sitio es scanup.mx

Variables de entorno en Vercel

gomflo — Fri, 11 Dec 2020 23:17:20 GMT

Algo importante en cualquier proyecto que desarrollemos son las variables de entorno, esas que podemos acceder desde nuestro entorno de programación y que son de gran utilidad para poder abstraer el valor del código.

Por fortuna si tu proyecto esta desplegado en Vercel se vuelve bastante sencillo, solo basta ingresar al proyecto, configuración, variables de entorno y agregar el nombre y valor de las variables que vamos a necesitar.

En nuestra configuración del proyecto nos vamos a la sección de Settings después seleccionamos Environment Variables.

Existen 3 tipos de variables de entorno en Vercel, hoy solo nos enfocaremos en las que son tipo Plaintext.

Agregamos el nombre y valor de la variable y guardamos (Save).

Como último paso ejecutamos el comando vercel env pull el cual nos va crear un archivo a nivel raíz llamado .env con el nombre y valor de las variables de entorno que hemos creado desde la plataforma.

Al ejecutar ese comando nos crea de forma automática el archivo de entorno .env

Archivo .env creado correctamente con las variables que hayamos definido en Vercel.

Y para consumir las variables es de la misma forma (al menos en nodejs) de siempre proccess.env.NOMBRE_VARIABLE.

En la actualidad no encuentro plataforma con un DX (Developer Experience) tan bueno como Vercel.com (ademas porqué soy muy flojo y mas cuando se tata de Devops), por encima de Firebase, DigitalOcean ó Netlify. Ademas de que son los creadores y soporte principal de Nextjs 😍.

Shortcuts ó atajos para VS Code que más utilizo (GIF’s)

gomflo — Tue, 07 Jan 2020 17:22:07 GMT

Editores vienen y van, recordado desde TextMate, Sublime Text y ahora Visual Studio Code siendo el editor por excelencia para los desarrolladores, si bien algo que tienen en común los editores son las combinaciones de teclas para volvernos más productivos a la hora de programar.

A continuación les presento mi colección de shortcuts / atajos del teclado que más utilizo en mi día a día como desarrollador de software.

⌘ + J = Abre la terminal integrada de VS Code

⌘ + K = Limpia la terminal integrada de Visual Studio Code

⌘ + P = Buscar y abrir archivo

⌘ + D = Para seleccionar concidencias

⌘ + B = Esconder / mostrar la barra lateral

⌘ + , = Abrir las preferencias de VS Code

⌘ + W = Cerrar pestaña de VS Code

Creo que este atajo es muy obvio, pero muy útil

⌘ + ⇧ + K = Eliminar línea

⇧ + ⌥ + F = Dar formato al documento

⌘ + K +R = Abrir archivo en el explorador del sistema

Visual Studio Code tiene más atajos del teclado, pero esta es mi colección de los que más utilizo y me han servido bastante para aumentar mi productividad. 🤷🏾‍♂️

Meta tag theme-color para dark y light mode

gomflo — Mon, 18 Nov 2019 21:42:24 GMT

Como cambiar el meta tag theme-color dinámico para PWA instaladas

PWA instalada

Si nuestro sitio web cumple con todos los requisitos de una PWA, Google Chrome nos va sugerir en la la barra de direcciones con un icono de + que la aplicación se puede instalar en nuestro ordenador.

El icono de + solo aparece cuando nuestro sitio web cumple con todos los requisitos de una PWA

Una vez instalada la aplicación veremos exactamente lo mismo de nuestro sitio web, con la diferencia que ahora nos aparece una barra de título la cual puede ser personalizada a tráves del meta tag theme-color

Con esta línea de código podemos personalizar el color de la barra de título

Si nuestro sitio web solo cuenta con un tema y no ofrece personalización de colores definir el color color directamente en el html será más que suficiente.

Uno de mis sitios ofrece la versión dark y light de acuerdo a la configuración de su sistema operativo, por lo que theme-color debe ser dinámico.

Identificamos si el usuario tiene el modo oscuro activado
Asignamos a una variable para obtener el meta tag theme-color
Validamos y asignamos el color dependiendo la configuración del usuario

Pueden realizar la prueba entrando a futbolfeed.com instalar el sitio como aplicación y cambiar el tema de su sistema operativo.

Actas de nacimiento digitales y un GRAN hoyo de seguridad

gomflo — Thu, 07 Nov 2019 02:40:04 GMT

Sin entrar mucho en detalles actualmente en México ya se puede obtener el acta de nacimiento digital y certificada, hasta ahí todo bien, un paso más hacia el progreso y volvernos paperless.

La página del gobierno mexicano permite verificar si una acta es valida ó no, con tan solo ingresar el identificador electrónico, el cual es un número que sirve para tener control de las impresiones de cada formato único y está compuesto por la entidad, municipio y oficialía de registro, año de expedición y número consecutivo de cada copia certificada expedida.

Identificador electrónico del acta de nacimiento

Actualmente la página para poder validar el acta solamente solicita el número de identificador electrónico y pasar la medida de seguridad del captcha.

Después de capturar los datos necesarios nos dirige a la pantalla donde nos informa si el acta es valida, con datos personales como nombre, nombre de los padres, CURP y anotaciones marginales.

La parte tecnica de la historia

Ya sabemos cómo se forma el número identificador electrónico, si, la última parte se compone por números consecutivos. ¿Qué pasa si modificamos el último dígito? ¿Qué pasa si modificamos los últimos 2 dígitos? … Bueno, creo que ya entendieron, es correcto, obtenemos información de otra persona.

Lo peor del asunto es que la parte de seguridad del captcha no se valida, es decir realizando un pequeño script se pueden realizar consultas constantes para obtener información sensible sobre los mexicanos.

Con este simple script hecho en NodeJS podemos obtener información de actas que no nos pertenecen.

😔

Espero que este problema de seguridad sea resuelto lo antes posible, ya que nuestra información puede caer en manos equivocadas, realizar fraudes, suplantación de identidad, etc.