enPROYECTOS
🔐️ JWT Learning Kit
Roll your own auth, al menos una vez en la vida
JWT Learning Kit es una guía para aprender a desarrollar desde cero un sistema de autenticación en JavaScript usando JSON Web Token. Incluye el código y la explicación de los procesos y conceptos necesarios para su implementación.
FotoYOP te permite transformar imágenes y crear collages de manera sencilla y rápida. Es también una PWA que se puede instalar en el teléfono y usar offline. Foto-V es su complemento ideal: convierte imágenes en videos aplicándoles efectos como panning o zoom in/out.
🩺️ Health Pro
Aplicación de telemedicina
Health Pro es una aplicación de telemedicina desarrollada en equipo como parte de una simulación laboral de No Country. Estuve a cargo de desarrollar los módulos de videollamadas y salas de espera de la aplicación.
📝 ¡ANOTÁ! & Highlighter
¿Another note taking app?
Así es, otra aplicación más para tomar notas. =) Pero con algunas características particulares. Y lo mejor: una extensión para el navegador que permite resaltar y guardar textos y enlaces desde cualquier web.
<NuncaSupeProgramar />
Blog de apuntes para aprender desarrollo web 👾
Mi blog para organizar apuntes, aprender, y compartir el conocimiento. Sencillo, rápido, y accesible.
Extensión para el navegador Chrome que permite ver imágenes de Instagram a máxima resolución y en pantalla completa, sin distracciones.
Otros proyectos:
- Aplicación Web para administración de una institución educativa (proyecto de fin de cursada). Stack: MongoDB, Node, Pug, JavaScript, Vitest, JWT, HTML, CSS. Ver código
- Aplicación de escritorio para administrar una clínica de salud (proyecto de curso). Stack: C#, Visual Studio, MySQL. Ver código
- Aplicación móvil para administrar un club deportivo (proyecto de fin de cursada). Stack: Kotlin, Android Studio, SQLite. Ver código
- Argentina Programa v3.0 - CV Editable (proyecto de curso). Stack: Java, Springboot, Hibernate, MySQL, Angular, HTML, CSS, Bootstrap. Ver código
PROYECTO
JWT Learning Kit - Roll your own auth, al menos una vez en la vida
JWT Learning Kit es una guía para aprender a desarrollar desde cero un sistema de autenticación en JavaScript usando JSON Web Token. Incluye el código y la explicación de los procesos y conceptos necesarios para su implementación.
La guía tiene su propio sitio web creado con docusaurus: jwtlk.fedeholc.ar
stack
- HTML / CSS
- Vanilla JavaScript
- Node / Express
- SQLite
- Vitest / Playwright
- JSDoc
Sobre el stack
- El frontend está realizado en vanilla JavaScript (además de HTML y CSS), y el backend en Node y Express. Me pareció que no utilizar un framework era mejor en cuanto a aprendizaje, y también para que el código pueda ser adaptado a cualquier otro framework o librería. También pensando en simplicidad y accesibilidad es que decidí no utilizar TypeScript, pero usé JSDoc, para poder comprobar el tipado de los datos y documentar el código. Respecto a la base de datos utilicé SQLite por su simplicidad y por la posibilidad de utilizar también de modo muy sencillo una base de datos SQLite online con Turso.
¿Qué tiene de bueno?
- Ya sea por motivos de seguridad o interés económico, se suele recomendar el uso de librerías y servicios de autenticación de terceros. Pero implementar un sistema de autenticación propio es muy valioso en cuanto a aprendizaje: nos obliga a entender cómo funciona de conjunto y cuál es la complejidad inherente al problema que se quiere resolver. Además, en el proceso se aprende sobre cookies, sesiones, tokens, cifrado, hashing, etc.
- El código que acompaña a la guía es totalmente funcional e incluye los distintos procesos de autenticación, como el registro, el login con usuario y contraseña, el login con Google o Github, el reseteo de la contraseña, etc. Está pensado para que quien quiera lo pueda tomar, modificar (si es necesario) y utilizar en sus propios proyectos.
- Además del código, la guía incluye explicaciones sobre los distintos procesos y conceptos necesarios para entender cómo funciona el sistema de autenticación, y cómo se implementan las distintas funcionalidades. En términos de aprendizaje, no alcanza con copiar y pegar código, es necesario entenderlo, y también comprender cuál es el problema que se está queriendo resolver, cuales son las soluciones posibles, qué ventajas y desventajas tiene cada una, etc.
Aprendizajes y problemas en el camino
- La realización de este proyecto me llevo más tiempo del que me imaginaba, pero también aprendí más de lo que estaba en los planes originales. Pues implementar un sistema de autenticación propio, y querer conocer los fundamentos de por qué se deben hacer las cosas de cierta forma (para garantizar seguridad, o rendimiento), es mucho más que aprender cómo funcionan los JWT. En el camino tuve que aprender sobre encriptación, hashing, cookies, ataques XSS/CSRF y cómo prevenirlos, etc. ¡Y aún me quedan algunas cuestiones pendientes!`
- El desarrollo de la app en vanilla JavaScript, me llevó a tener que pensar bien en su diseño y como estructurar el código para hacerlo lo mas modular posible, tanto para que pueda ser reutilizado en otros proyectos como para poder testearlo adecuadamente. A modo de ejemplo, para la base de datos utilicé el patrón de diseño adapter, mediante el cual pude generar un sistema en el que con solo modificar una variable de entorno se puede cambiar de tipo de base de datos.
- En materia de testing el proyecto me llevó a tener que aprender a trabajar con mocks de módulos, y de requests (usando supertest), como no lo había hecho antes. Pero tanto o más importante fue el haber comprobado la importancia de los tests en particular cuando se quieren realizar modificaciones en el código sin temer que se rompa algo y no saber qué fue lo que sucedió.
- También comprobé en la práctica que el último tramo del proyecto, su puesta a punto para ser publicado, puede resultar el más tortuoso. Teniendo casi listo el código y la aplicación de ejemplo funcionando, comencé a escribir la guía en base a algunas notas que había ido tomando.Pero resulta que para poder explicar algo hay que entenderlo bien, y si la guía va a ser leída y utilizada por otras personas hay que ser responsable con lo que se escribe. El proceso de escritura me llevo a revisar y probar más pormenorizadamente el código, y es así que fuí encontrando pequeños fallos o detalles a corregir, lo que prolongo aún más la primera publicación del proyecto, pero no podía ignorarlos. Seguramente siga habiendo errores pero ninguno que conscientemente haya dejado pasar.
PROYECTO
fotoYOP & foto-V
FotoYOP es una aplicación que permite transformar imágenes de manera sencilla y rápida. Surge de la necesidad de resolver dos problemas. Por un lado, realizar cierto tipo de operaciones específicas sobre imágenes (por ejemplo, para publicarlas en redes sociales), y por otro, hacerlo de manera rápida y sencilla, sin necesidad de registrarse, ni subir archivos a un servidor, simplemente arrastrar y soltar, editar y descargar. Y mejor aún si es en una PWA que se puede instalar también en el teléfono y usar offline.
Foto-V es su complemento ideal. Nos permite convertir imágenes en videos aplicando efectos como un panning o un zoom in/out (al estilo Ken Burns), y adaptar la imagen al tamaño que queramos, para poder por ejemplo publicarlas fácilmente en redes sociales. Corre también totalmente del lado del cliente.
stack
- HTML / CSS
- Vanilla JavaScript
- Next / React
- TypeScript / JSDoc
- Vitest / Playwright
- PWA
- Canvas API
Sobre los stacks
- En el caso de fotoYOP, comencé a realizar las primeras pruebas y a aprender sobre la Canvas API en vanilla JavaScript, pero a medida que fue creciendo el código y la idea de realizar una SPA decidí continuarlo en Next, ya que también me interesaba la idea de que fuera una PWA y eso podía hacerse de forma relativamente sencilla utilizando la librería Serwist disponible para Next. Para foto-V, tras haber trabajado con react y next, volví a profundizar en el estudio de algunas JavaScript y de patrones de diseño, por lo que quise utilizar solo vanilla JavaScript para probar hasta que punto podía hacer una SPA sin un framework. Para el diseño también utilicé CSS puro. El renderizado de los videos se realiza con ffmpeg-js, una librería que mediante WebAssembly permite utilizar ffmpeg en el navegador.
¿Qué tienen de bueno?
- No requieren registrarse. No suben archivos a un servidor. Todo se hace en el navegador. FotoYOP además es una PWA, por lo que se puede instalar tanto en una pc como en el teléfono y usar offline.
- Con fotoYOP se pueden realizar transformaciones como agregarle un borde,cambiar las proporciones del lienzo, o convertir a blanco y negro. Algunas de ellas se pueden definir con precision: por ejemplo, al agregarse un borde a la imagen se puede establecer el color utilizando el código hexadecimal, y el tamaño del borde setearlo en píxeles. Ahora (v0.2) también es posible crear collages de dos o más imágenes.
- Foto-V permite convertir imágenes en videos y configurar al detalle los efectos (como el panning o el zoom in/out), estableciendo su duración, dirección, velocidad, etc. Además, se puede elegir el tamaño del video final y la cantidad de frames por segundo a la que se va a reproducir.
- Tanto fotoYOP como foto-V pueden trabajar con las imágenes a su máxima resolución a la hora de transformarlas y/o de generar los videos, para así poder lograr un resultado sin perdida calidad.
FotoYOP: aprendizajes y problemas en el camino
- Algo que me motiva de estar llevando adelante este proyecto es que he ido aprendiendo distintas cosas en el camino. Algunas sencillas como realizar un drag and drop para cargar archivos en el navegador, y otras más complejas y que abren un montón de posibilidades para seguir explorando como son el uso de la Canvas API, y la creación de PWAs.
- El uso de una librería como serwist me permitió convertir la aplicación en una PWA de manera sencilla, pero para poder aprovechar realmente todo su potencial de cara a la experiencia del usuario me queda por aprender mucho más sobre el uso de Service Workers, el manejo de cache, etc.
- Trabajar con la Canvas API también requiere de un tiempo de aprendizaje para ir resolviendo los problemas que se presentan, por ejemplo a la hora de trabajar con imágenes de distintos tamaños y formatos, realizar transformaciones, conversiones, etc., y también para poder optimizar el rendimiento de la aplicación. He podido solucionar algunos problemas de rendimiento, pero hay otros que aún no, sobre todo al trabajar con imágenes de gran tamaño. La estrategia que he utilizado ahora es la de trabajar con imágenes de un tamaño acotado a la vista del usuario pero registrar todas las transformaciones necesarias para repetirlas sobre la imagen original cuando se la va a descargar, de modo de resguardar la calidad original. Me gustaría seguir profundizando en esto al menos hasta poder encontrar el límite de lo que puede ofrecer la Canvas API, qué tal vez no sea la herramienta más adecuada para ciertas operaciones, y haya que recurrir a otras herramientas o librerías.
- Lograr un diseño responsive para que la aplicación se pueda utilizar tanto en un teléfono cómo en una pc también tuvo sus complicaciones, principalmente a la hora de lograr tener siempre la imagen a la vista del usuario, y adaptar el tamaño del canvas a la pantalla, dependiendo de si la imagen era horizontal o vertical y del tamaño de la pantalla, sobre todo si se modificaba el tamaño de la ventana del navegador. Para ello tuve que utilizar JavaScript para ir calculando los tamaños según cómo se modificaba la pantalla, o según cómo se modificaba el tamaño de la imagen, por ejemplo al agregarle un borde.
- Actualización v0.2: el incorporar la posibilidad de crear collages representó un gran desafío, no por la complejidad de las operaciones necesarias para crear el canvas con las imágenes, sino por el hecho de tener que refactorizar el código para poder incorporar una nueva característica que requiere de un proceso distinto por tratarse de múltiples imágenes. Esta nueva característica también llevó a tener que modificar la interfaz del usuario. Más allá del resultado que está a la vista me permitió aprender mucho sobre cómo organizar el código para que sea más fácil de mantener y de incorporar nuevas funcionalidades.
Foto-V: aprendizajes y problemas en el camino
- Uno de los principales problemas que tuve fue que la generación de los videos es un proceso que consume muchos recursos, lo cual me llevó a tener que hacer algo a lo que no estaba habituado en javacript, que es programar pensando en como gestionar la memoria. Por ejemplo, en un momento me encontré con que si no liberaba la memoria que consumía la generación de cada frame/imagen, la aplicación consumía toda la memoria del navegador y crasheaba. Por lo que tuve que implementar un sistema para ir generando los videos por partes, liberando la memoria de los datos que ya no se necesitaban, y juntando luego todo al final.
- La otra gran dificultad tiene que ver con cómo resolver la organización del código y la gestión del estado y de la interfaz del usuario en una aplicación hecha en vanilla JavaScript. Pero fue un problema buscado intencionalmente pues quería ver hasta que punto es viable hacer crecer una aplicación de ese modo y estudiar qué patrones de diseño se pueden utilizar e intentar comprender de ese modo también como funcionan y qué soluciones nos aportan los frameworks de JavaScript. Por he estado leyendo sobre como componentizar y modularizar, estrategias para el renderizado de la interfaz del usuario, patrones de diseño como MVC, flux, pub/sub, observer, proxies, etc. He comenzado de a poco, implementando módulos y funciones que puedan ser testeables, una clase/objeto global con un patrón singleton para manejar una parte del estado, y un event bus para la comunicación entre algunos. Y si bien patrones como el flux me resultan muy interesantes, por ahora no he querido implementar más de lo necesario para no caer en hacer una 'sobreingenieria' que complique más de lo que soluciona. Pero me he quedado con ideas y conocimientos para poner en práctica a medida que la aplicación crezca o en otros proyectos.
PROYECTO
Health Pro - Aplicación de telemedicina
Health Pro es una aplicación de telemedicina desarrollada en equipo como parte de una simulación laboral de No Country. Estuve a cargo de desarrollar los módulos de videollamadas y salas de espera de la aplicación.
stack
- HTML / CSS
- React
- Node
- WebSockets
- WebRTC
Sobre el stack
- La aplicación completa consta de un backend desarrollado en Java, con una base de datos PostgreSQL, y un frontend en React. En particular para el modulo de sala de espera y el de videollamadas, implemente un backend en Node utilizando WebSockets, y en el frontend utilice WebRTC para el audio y el video en tiempo real.
¿Qué tiene de bueno?
- En lo que respecta a los módulos de videollamadas y salas de espera, la aplicación permite a los profesionales de la salud atender a sus pacientes de manera remota, y a los pacientes acceder a la consulta de manera sencilla y rápida.
- En particular la sala de espera desarrollada con WebSockets permite a los profesionales ver qué pacientes se encuentran conectados y esperando ser atendidos, y seleccionar a quién atender, diferenciando entre quiénes accedieron con un turno programado o por guardia. Gracias a utilizar un sistema de llamadas basado en enlaces únicos, es posible conectarse desde cualquier dispositivo sin necesidad de instalar ninguna aplicación adicional.
- En cuanto a las videollamadas, la aplicación permite realizar llamadas de audio y video en tiempo real utilizando WebRTC (también permite la conexión aún cuando el paciente no tiene video). Si la conexión se corta es posible volver a la llamada utilizando el enlace único a la misma. Tanto el profesional como el paciente pueden ver la historia clínica durante la comunicación.
Aprendizajes y problemas en el camino
- En el aspecto técnico aprendí mucho ya que nunca había trabajado con WebSockets ni con WebRTC. En particular con WebSockets tuve que aprender a manejar la comunicación en tiempo real entre el backend y el frontend, y desarrollar dos servidores de sockets, uno para el manejo de la sala de espera y otro para que actué como servidor de señalización para la comunicación vía WebRTC. Afortunadamente socket.io proporciona una API sencilla para trabajar con WebSockets, y además permite mantener la conexión utilizando http en caso de que WebSockets no esté disponible para alguno de los peers.
- La implementación de WebRTC fue más difícil ya que no hay muchos ejemplos con código completo y funcional. Afortunadamente encontré el libro Programming WebRTC de Karl Stolley que me permitió resolver muchos problemas que se me presentaron. En particular tuve que aprender a manejar la señalización entre los peers, y a configurar los servidores STUN y TURN para poder establecer la conexión en caso de que los peers se encuentren detrás de un firewall o un NAT.
- El mayor aprendizaje vino de la parte no técnica, ya que tuve que coordinar con otros miembros del equipo para poder desarrollar los módulos de videollamadas y salas de espera. Aprendí a trabajar en equipo, a coordinar tareas, a comunicar mis avances y dificultades, a pedir ayuda y a ofrecerla, a resolver problemas en conjunto, a aceptar críticas y a criticar constructivamente, a cumplir con fechas límites, a tratar y presentarle el trabajo al cliente, etc.
PROYECTO
ANOTÁ! (Another Note Taking App) & Highlighter
Otra aplicación más para tomar notas. Pero con algunas características que ya quisiera tenerlas en Google Keep. Y lo mejor: incorpora una extensión para el navegador (highlighter) que permite resaltar y guardar textos y enlaces desde cualquier web.
stack
- React / JavaScript
- HTML / CSS
Node.js / Express➔ Next.jsMySQL➔ SQLite- Supabase Auth
- WebExtension API
- JSDoc
¿Qué tiene de bueno?
- Permite crear, guardar y editar las notas desde la aplicación. La edición se puede realizar desde donde se ve la nota, sin tener que abrir otra una ventana.
- Las notas se pueden visualizar en modo lista o en modo mosaico, con la posibilidad de mostrar el título y el contenido, o solo el título,para así tener más en notas pantalla.
- Cada nota puede tener múltiples etiquetas, que pueden utilizarse como filtros para ver solo algunas de ellas. También se pueden buscar las notas por texto en su título o contenido.
- La extensión para el navegador (Highlighter) permite que simplemente al realizar una selección de texto en cualquier web, el texto se resalte y se guarde. Luego todos los fragmentos de texto seleccionados de una misma URL se pueden enviar a ANOTA y/o ser descargados en un archivo de texto. También se pueden generar notas guardando el enlace de la web, o toda la sesión de enlaces abiertos en el navegador.
Sobre el stack
- Dado que estaba estudiando React, resultaba un oportunidad para poner en práctica el uso de hooks como useContext y useReducer para manejar el estado de la aplicación, así como también de useRef para manipular directamente el DOM.
- Para el backend utilicé Node y Express por lo sencillo que resulta crear una API REST con endpoints, y que se conecta una base de datos. Implementé una en MySQL sin utilizar un ORM para aprender más sobre el funcionamiento de las bases de datos relacionales. Actualización: debido a la imposibilidad de seguir alojando la base de datos en PlanetScale, aproveche para rehacer el backend utilizando Next.js y una base de datos SQLite.
- Utilicé CSS modules por componentes, junto con la metodología BEM, con la intención de tener un código CSS claro y mantenible, separado de la lógica de la aplicación.
- La extensión está en puro HTML, CSS, y JavaScript. Pero decidí incorporar JSDoc para aprender a utilizarlo, tener un código mejor documentado, y también poder tener type check a través del language server de typescript.
Aprendizajes y problemas en el camino
- Mostrar un indicador en las notas que tenían más texto del que se veía en pantalla (sin mostrar las scroll bars), resulto ser un problema dado que hasta entonces no había utilizado React para acceder directamente al DOM mediante useRef. Aquí tuve que hacerlo, ya que la solución que se me ocurrió fue comparar si había diferencia entre el `scrollHeight` y el `clientHeight` del contenedor de la nota y así detectar si había un overflow del texto, y poder mostrar el indicador cuando correspondiera.
- Otras dificultades fueron la creación de un layout para mostrar las notas en modo mosaico, lo cual aún no se puede realizar de forma nativa en CSS. Así como también la implementación de un editor de texto para crear y modificar las notas, dado que el elemento HTML `contenteditable` no es muy versátil. En ambos casos, con la intención de poner rápidamente en funcionamiento la aplicación, opté por usar librerías, pero me quisiera poder estudiar en profundidad esos problemas para poder implementar mis propias soluciones ya que son aspectos importantes del proyecto.
- En cuanto a la extensión del navegador, no fue nada fácil, dado que recientemente se cambió al manifest V3 (lo cual conlleva numerosas modificaciones en las APIs), y no abundan los materiales y ejemplos de código actualizados. Pero valió la pena el esfuerzo porque trabajar en una aplicación que tiene que manejar directamente el DOM me obligó a reforzar los fundamentos de JavaScript. Incluso me llevo a estudiar sobre estructuras de datos para poder resolver un problema que era recorrer el árbol del DOM desde el nodo de inicio de la selección de texto hasta el nodo final, para poder obtener el texto, resaltarlo, etc.
- Siendo esta la aplicación más grande que he realizado hasta ahora, me resultó aún más evidente la importancia de dedicarle tiempo a tener un código legible, estructurado, documentado, etc., así como también a tener componentes reutilizables y organizados. Es algo en lo que tengo que seguir trabajando y mejorando ya que es fundamental para poder mantener la aplicación e incorporarle nuevas funcionalidades.
PROYECTO
<NuncaSupeProgramar/> Blog de apuntes para aprender desarrollo web
Blog de aprendizaje en público, para organizar mis apuntes y compartir el conocimiento.
stack
- Next.js / React / JavaScript
- HTML / CSS
- Markdown
- Git / GitHub
¿Para qué un blog?
Algo que aprendí como docente es que junto con la práctica, intentar enseñar o explicar algo (y si es por escrito mejor) es un excelente camino para aprenderlo. También es importante el aprendizaje colectivo que se genera con el intercambio. De allí la creación de un blog, que es una excelente tecnología para la difusión del conocimiento: a diferencia de lo que circula por plataformas cerradas, sus contenidos puede ser indexados por los buscadores, compartidos en redes sociales, y estar a disposición de quienes lo necesiten.
¿Qué tiene de bueno?
- Mediante Next.js el blog se genera como sitio estático del lado del servidor, lo cual hace que sea veloz, y fácil de indexar por los buscadores. También es sencillo de publicar, ya que al estar alojado en Vercel, el deploy se realiza automáticamente cada vez que se actualiza el repositorio en GitHub.
- Añadir nuevas entradas al blog es simple: se escribe el contenido del post en un archivo con formato Markdown, se lo sube a una carpeta dentro del repositorio del proyecto, y automáticamente queda publicado (salvo que se lo marque como borrador).
- Se pueden marcar posteos como destacados para que aparezcan en una sección destacada de la página principal.
- Utilizando el formato Markdown junto con la librería remark.js se le puede dar formato resaltado a los bloques de código de las publicaciones.
- Se pueden filtrar los posts por etiquetas utilizando el buscador o el listado de las mismas.
- Es responsive y se adapta para que pueda ser leído desde cualquier dispositivo.
- Algunas ideas de nuevas funcionalidades las pruebo en este otro blog: btcd.fedeholc.ar (repo), de estructura similar pero en TypeScript. Allí, por ejemplo, implementé un sistema de comentarios para los posts, utilizando Supabase tanto para la autenticación/autorización de usuarios, como para la base de datos
Aprendizajes y problemas en el camino
- Hasta aquí solo había programando SPAs con renderizado del lado del cliente, por lo que me llevo un tiempo comprender las variantes que hay para hacerlo del lado del servidor (o de manera combinada), y cómo trabajar de ese modo con Next, integrando frontend y backend en una sola aplicación full stack.
- Al poco tiempo de publicado el blog, Next lanzó una nueva versión incorporando React Server Components, y cometí el error de ir tras la novedad, ya que no funcionaban las librerías para el estilizado del Markdown en la nueva versión. Tuve que regresar a la anterior, pero con la lección aprendida sobre la importancia de utilizar tecnologías probadas y consolidadas. Actualización diciembre de 2023: finalmente pude resolver el problema de las dependencias y actualizar a la última versión de Next.
- Publicar el blog en un dominio propio me llevó también a aprender como registrarlo, cómo manejar los DNS, y las configuraciones necesarias para que pueda ser indexado por los buscadores.
PROYECTO
Full Size Images for IG
Es una extensión muy sencilla para el navegador Chrome que permite ver las fotos de Instagram a máxima resolución.
stack
- JavaScript
- HTML / CSS
- WebExtension API
- Git / GitHub
¿Para qué sirve?
Quienes disfrutamos de ver y hacer fotos, queremos poder apreciarlas a máxima resolución y en pantalla completa. La extensión busca hacer eso posible, de manera sencilla, y sin tener que recurrir a otra plataforma.
¿Qué tiene de bueno?
- Al tener la extensión activada, en el angulo superior derecho de cada foto aparece un icono de una lupa. Al hacer click sobre el mismo, se abre la imagen a tamaño completo y sin otras distracciones. Luego haciendo click en cualquier lugar de la pantalla se regresa a la página y posición original.
- Algunas ideas para implementar a futuro: que se pueda elegir si se abre la imagen en una nueva pestaña o en la misma, y si se utiliza o no el modo de pantalla completa del navegador; que se pueda generar una galería de imágenes para ver una tras otra a pantalla completa.
Problemas en el camino y aprendizajes
- La principal dificultad técnica con la que me encontré es que al ser Instagram de una web dinámica, a medida que aparecen nuevos elementos, es necesario ir agregando listeners e iconos. Pero no encontré un evento que se dispare cuando eso ocurre. La solución que implementé es hacerlo con el evento mouseMove, lo cuál es efectivo pero poco eficiente ya que implica leer toda la estructura de la web muchas más veces de las necesarias. Tengo pendiente buscar una solución más eficiente para este problema. (Si sabés cómo hacerlo ¡por favor escribime!)
- Otra cuestión que aún debo investigar es como portar la extensión a Firefox, Safari y Edge, de modo tal de no excluir a quiénes utilizan algún otro de los principales navegadores.
- También surgió un problema no técnico que no había tenido en cuenta: luego de varias semanas de publicada la extensión, cuando ya tenía más de cien usuarios, me llegó un aviso de que la eliminaban de la chrome web store de Estados Unidos por utilizar la palabra Instagram en el nombre y porque el icono incluía los colores de la marca. Por lo que tuve que cambiar nombre y logo, y volver a publicarla.
- Hacer un extensión para el navegador me resulto un buena forma de para practicar HTML, CSS y JavaScript sin frameworks de por medio, aprender sobre la manipulación del DOM y ver cómo lo estructuran este tipo de aplicaciones. Pienso ahora que sería interesante programar una alerta que me avise cuando se produzcan modificaciones en el DOM del sitio que hagan que la extensión deje de funcionar.
- Lamentablemente no hay tantos contenidos en la web para aprender a desarrollar extensiones por lo que valoro mucho la elaboración de una buena documentación con explicaciones claras y ejemplos de código como la que tiene Chrome de su API.
- Es muy motivador poder crear algo útil, que funciona, y que se puede compartir con otras personas. Este proyecto me ha dado ganas e ideas para hacer montones de extensiones.