DEV Community: Manuel Morales

Tired of Excel for managing your personal finances? Discover Monifi, the smart alternative.

Manuel Morales — Thu, 24 Apr 2025 04:09:28 +0000

If you’ve ever used Excel to manage your personal finances, you probably know that while it’s a powerful tool, it quickly falls apart when your financial life gets more complex. It becomes a messy, error-prone system that lacks the structure, clarity, and intelligence needed to support meaningful financial decision-making.

That’s exactly why I built Monifi.app — a modern, intuitive platform designed to help you manage your personal finances with precision and efficiency. Unlike Excel, Monifi is built with purpose-driven tools that empower you to take full control of your money. Here's what we're building into the core product:

Budgeting: Manage your budget intuitively and track your finances with ease.

Income Tracking: Record and analyze your income streams for better financial awareness.

Expense Management: Stay on top of your spending and optimize your cash flow.

Categorization: Organize transactions into custom categories for smarter financial analysis.

Credit Card Tracking: Monitor your credit cards and track payments with clarity.

Statistics & Visualizations: Get real-time charts, identify trends, and gain deep insights into your spending behavior.

Savings Goals: Set and track your savings objectives with structured planning.

Debt Management: Tackle your debts using strategies like the snowball method and get closer to financial freedom.

AI Assistance: Receive real-time insights and tailored recommendations to make better financial decisions.

We’re still in active development, but Monifi is already shaping up to be the all-in-one finance OS that power users and tech-savvy folks like you have always wanted.

🚀 We’d love your input! Join our waitlist and let us know:
What features would you expect from a next-gen personal finance tool?
Your feedback means everything — especially coming from a community like dev.top.

Patrón anclado o fijo

Manuel Morales — Fri, 30 Dec 2022 17:01:23 +0000

Utilizar un contenedor con un max-width es un patrón de diseño comúnmente utilizado en el desarrollo de aplicaciones y sitios web. El patrón consiste en utilizar un elemento contenedor con un ancho máximo para encerrar el contenido de la aplicación o sitio web. Esto se hace con el fin de evitar que el contenido se extienda demasiado en pantallas más anchas, lo que puede mejorar la legibilidad y la usabilidad.

Este patrón de diseño a menudo se conoce como "contenedor anclado" o "contenedor fijo". El término "contenedor anclado" se refiere a la idea de que el contenedor está anclado a un tamaño máximo y no se extenderá más allá de ese tamaño, independientemente del tamaño de la pantalla. El término "contenedor fijo" se refiere a la idea de que el contenedor tiene un tamaño fijo y no se redimensionará automáticamente en función del tamaño de la pantalla.

Ventajas 😃

✅ Ayuda a mantener la apariencia de la aplicación o sitio web consistente en dispositivos de diferentes tamaños.
✅ Evita que el contenido se extienda demasiado en pantallas más anchas, lo que puede mejorar la legibilidad y la usabilidad.
✅ Facilita la creación de diseños responsivos.
✅ Ayuda a evitar que la aplicación o sitio web se vea desproporcionado en dispositivos de pantalla muy grande.

Desventajas 🥹

Puede limitar la capacidad de la aplicación o sitio web para adaptarse a pantallas muy anchas.
Puede requerir el uso de media queries y otras técnicas de diseño responsivo para ajustar el tamaño del contenedor y otros elementos en función del tamaño de la pantalla.
Puede ser más difícil de implementar en algunos casos.

Resumen 🤔

En resumen, utilizar un contenedor con un max-width puede ayudar a mantener la apariencia de tu aplicación consistente y mejorar la usabilidad en diferentes dispositivos.

Tablas vs Cards

Manuel Morales — Fri, 23 Dec 2022 17:51:38 +0000

La experiencia de usuario es una consideración importante al elegir entre tablas o tarjetas. En general, ambas opciones pueden ofrecer una experiencia de usuario positiva si se utilizan adecuadamente.

No hay una respuesta única a esta pregunta, ya que depende del contexto en el que se utilicen las tablas o las tarjetas. En general, ambas opciones pueden ser útiles en diferentes situaciones y pueden tener sus propias ventajas y desventajas.

Tablas

Las tablas son una forma estructurada y bien organizada de presentar información, especialmente cuando se trata de datos numéricos o de un conjunto de elementos que deben compararse entre sí. Las tablas son fáciles de leer y permiten a los usuarios comparar y analizar los datos de manera eficiente.

Ventajas de usar tablas:

✅ Presentan información de manera clara y estructurada: Las tablas son excelentes para presentar datos numéricos o información que debe compararse entre sí de manera detallada.
✅ Facilitan la lectura y el análisis de los datos: Las tablas son fáciles de leer y permiten a los usuarios comparar y analizar los datos de manera eficiente.
✅ Son versátiles: Las tablas se pueden utilizar para presentar una amplia variedad de tipos de información, desde estadísticas simples hasta datos más complejos.

Desventajas de usar tablas:

Pueden ser menos atractivas visualmente: Las tablas pueden ser menos atractivas visualmente que otras opciones, como las tarjetas o las gráficas.
Pueden ser difíciles de diseñar: Diseñar tablas de manera atractiva y fácil de leer puede ser un desafío.
Pueden ser menos fáciles de leer en pantallas más pequeñas: Las tablas pueden ser difíciles de leer en pantallas más pequeñas debido a su formato lineal.

Cards

Las tarjetas son una opción visualmente atractiva para presentar información de manera amigable y accesible. Las tarjetas suelen contener imágenes y texto breve y se pueden usar para presentar información de manera más atractiva y accesible. Las tarjetas tienen un formato más visual y pueden ser más fáciles de leer en pantallas más pequeñas que otras opciones, como las tablas.

Ventajas de usar tarjetas:

✅ Son visualmente atractivas: Las tarjetas suelen contener imágenes y texto breve y pueden ser más atractivas visualmente que otras opciones, como las tablas.
✅ Son fáciles de leer en pantallas más pequeñas: Las tarjetas tienen un formato más visual y pueden ser más fáciles de leer en pantallas más pequeñas.
✅ Presentan información de manera amigable y accesible: Las tarjetas pueden hacer que la información sea más amigable y accesible para los usuarios.

Desventajas de usar tarjetas:

Pueden no ser la mejor opción para presentar grandes cantidades de datos: Las tarjetas pueden no ser la mejor opción para presentar grandes cantidades de datos o para comparar elementos de manera detallada.
Pueden ser menos versátiles: Las tarjetas pueden ser menos versátiles que otras opciones, como las tablas, para presentar diferentes tipos de información.
Pueden ser menos eficientes para la comparación y el análisis de datos: Las tarjetas pueden no ser tan eficientes como las tablas para comparar y analizar datos.

🎉 Ambas opciones tienen sus propias ventajas y desventajas, y la mejor opción dependerá de tus necesidades y del contexto en el que se utilicen. Es importante considerar tus objetivos y a tu audiencia al elegir entre tablas o tarjetas para asegurarte de que estés ofreciendo la mejor experiencia de usuario posible.

☕ Invitarme un café

Herramientas para mejorar la experiencia de usuario (UX)

Manuel Morales — Fri, 23 Dec 2022 03:59:15 +0000

Existen varias herramientas que puedes utilizar para mejorar la experiencia de usuario (UX) de tu aplicación o sitio web. Algunas de las herramientas más comunes incluyen:

Google Analytics: Es una herramienta de análisis de tráfico y comportamiento de los usuarios que te permite ver cómo los usuarios interactúan con tu sitio web y qué páginas son las más populares.

Hotjar: Es una herramienta que te permite grabar sesiones de usuario y ver cómo los usuarios interactúan con tu sitio web. También incluye una herramienta de encuestas y una herramienta de calor que muestra dónde los usuarios hacen clic en tu sitio web.

UserTesting: Es una herramienta que te permite contratar a usuarios reales para probar tu sitio web o aplicación y proporcionar comentarios y sugerencias.

OptinMonster: Es una herramienta que te permite crear formularios de suscripción y pop-ups para aumentar el número de suscriptores y clientes potenciales.

Crazy Egg: Es una herramienta que te permite ver cómo los usuarios interactúan con tu sitio web mediante el uso de mapas de calor y grabaciones de sesiones de usuario.

☕ Invitarme un café

Docz vs Storybook

Manuel Morales — Fri, 23 Dec 2022 00:31:46 +0000

Docz es una herramienta para crear documentación de componentes de React, mientras que Storybook es una herramienta para probar y documentar componentes de interfaz de usuario de manera aislada. Ambas herramientas son muy útiles y populares en el mundo de React, pero cual es mejor depende de tus necesidades y preferencias.

Docz es una herramienta relativamente nueva y se ha diseñado específicamente para crear documentación de componentes de React. Ofrece una experiencia de usuario muy intuitiva y una interfaz de usuario sencilla, lo que hace que sea fácil de usar para los desarrolladores. Además, Docz te permite crear documentación de manera rápida y fácil, ya que utiliza Markdown para escribir la documentación y Gatsby para generar la página web.

Por otro lado, Storybook es una herramienta más amplia y versátil para probar y documentar componentes de interfaz de usuario. Además de React, también es compatible con otras bibliotecas de componentes de interfaz de usuario, como Angular, Vue y Web Components. Storybook te permite crear historias (casos de uso) para cada componente, lo que te permite probar cada componente en diferentes estados y contextos. Además, Storybook tiene una amplia comunidad de usuarios y una amplia variedad de add-ons y personalizaciones disponibles.

En resumen, si tu principal objetivo es crear documentación de componentes de React de manera rápida y sencilla, Docz puede ser la mejor opción para ti. Si, por otro lado, necesitas una herramienta más completa y versátil para probar y documentar componentes de interfaz de usuario, entonces Storybook puede ser la mejor opción. Al final del día, la mejor herramienta para ti dependerá de tus necesidades y preferencias específicas.

☕ Invitarme un café

Es buena práctica utilizar formularios dentro de una modal?

Manuel Morales — Thu, 22 Dec 2022 23:45:44 +0000

Es posible utilizar formularios dentro de un modal, pero es importante tener en cuenta algunos aspectos para asegurar una buena experiencia de usuario.

Algunas de las ventajas de utilizar formularios dentro de un modal son:

Permiten mostrar información relevante sin necesidad de cambiar de página, lo que puede ser más rápido y sencillo para el usuario.
Ayudan a mantener el contexto y evitar distracciones, ya que el usuario sabe que se encuentra en el mismo lugar y sólo se centra en el formulario.

Sin embargo, es importante tener en cuenta algunos puntos para asegurar una buena experiencia de usuario:

Asegúrate de que el tamaño del modal sea adecuado para el formulario y que no sea demasiado grande o pequeño.
Utiliza títulos y etiquetas claras para indicar el propósito del formulario y facilitar la comprensión del usuario.
Proporciona instrucciones adecuadas y utiliza herramientas de validación para evitar errores y acelerar el proceso de rellenado del formulario.
Ofrece la opción de cerrar o cancelar el modal si el usuario no desea completar el formulario.

En general, utilizar formularios dentro de un modal puede ser una buena opción si se hace de manera adecuada y teniendo en cuenta la experiencia del usuario.

☕ Invitarme un café

React · Prop drilling es una mala práctica?

Manuel Morales — Thu, 22 Dec 2022 19:59:55 +0000

El "tunelamiento" de props en React es una técnica para pasar props a través de componentes que no necesariamente necesitan esas props o incluso son conscientes de ellas. Esto es útil cuando quieres reutilizar un componente en diferentes contextos y necesitas modificar su comportamiento o aspecto sin tener que crear componentes completamente nuevos.

Para hacer el "tunelamiento" de props, puedes usar un componente intermediario que recibe las props que quieres "tunelar" y luego las pasa a su componente hijo. Por ejemplo:

En este ejemplo, MyButton y MyLink son componentes que no necesitan conocer la propiedad color o las propiedades relacionadas con enlaces (href, target, etc.). Sin embargo, al "tunelar" las props a través de ellos, se pueden usar de la misma manera que si fueran componentes que sí conocieran esas propiedades.

Hay varias formas de evitar el "tunelamiento" de props en React:

1.- Usa un componente especializado: en lugar de crear un componente genérico que se reutilice en diferentes contextos, crea componentes especializados que estén diseñados para manejar las props específicas que necesitan. Por ejemplo, en lugar de usar un componente genérico para crear botones y enlaces, crea componentes especializados como RedButton y ExternalLink que manejen sus propias propiedades.

2.- Usa la destructuración de props: en lugar de pasar todas las props a un componente hijo, puedes destructurar las props que necesitas y pasarlas individualmente. Esto hace que sea más fácil ver qué props están siendo utilizadas y por qué.

3.- Usa la composición en lugar del "tunelamiento" de props: en lugar de pasar props a través de componentes intermediarios, puedes usar la composición para combinar componentes de manera más controlada. Por ejemplo, en lugar de crear un componente genérico que se reutilice en diferentes contextos, puedes crear componentes especializados y combinarlos mediante la composición

Es importante tener en cuenta que no hay una solución única para evitar el "tunelamiento" de props y que la mejor opción dependerá de las necesidades de tu aplicación. Por lo tanto, deberías evaluar cuál de estas opciones es la más adecuada para ti en cada caso.

☕ Invitarme un café

Es mala práctica renderizar JSX en React Hook?

Manuel Morales — Thu, 22 Dec 2022 00:24:08 +0000

Seguramente mas de uno hemos caído en anti-patrones utilizando React Hooks, y es que React Hooks viene a resolver un problema de reutilización, donde su principal tarea es extraer la lógica de estado de un componente de tal forma que este puede ser probado y re-utilizado independientemente.

Sin embargo muchos desarrolladores lo utilizan para renderizar JSX, lo cual lo convierte en un anti-patrón. Veamos un ejemplo:

Hay varias razones por las cuales no tenemos que hacer lo del ejemplo:

Una función que devuelve JSX puede convertirse simplemente en un componente funcional con Hooks. Si lo escribimos como un componente nos ayudara de varias maneras:

Brindar flexibilidad para transmitir propiedades y controlar el comportamiento fácilmente.
También es más fácil memorizar componentes funcionales y evitar renderizaciones adicionales si nada ha cambiado. (También puede hacerlo con Hooks personalizados, pero luego tendrá que hacer uso de useMemo).
Facilita la definición de una jerarquía clara de elementos.

Ahora ya saben, renderizar JSX dentro de un Hook puede funcionar pero estarás haciendo uso de un anti-patrón 😉

☕ Invitarme un café