Página de recetas

What are you most proud of, and what would you do differently next time?

¿De qué estás más orgulloso? Estoy muy orgulloso de haber creado una interfaz limpia y responsive que mejora la experiencia del usuario al navegar por recetas. Utilicé CSS Grid y Flexbox para lograr un diseño ordenado y adaptable, y me enorgullece la integración de imágenes y textos de manera visualmente atractiva. Además, el uso de Git para el control de versiones y GitHub Pages para el despliegue automatizado fue clave para mantener el proyecto organizado y accesible.

¿Qué harías diferente la próxima vez? Me gustaría implementar un enfoque más modular en el CSS, utilizando metodologías como BEM o preprocesadores como SASS para mejorar la mantenibilidad. También exploraría frameworks como React o Vue.js para dinamizar la carga de recetas y agregar interactividad (como filtros o búsqueda). Por último, dedicaría más tiempo a la optimización de imágenes para reducir tiempos de carga.

¿Qué aprendiste y dónde necesitas apoyo? Aprendí a priorizar la estructura semántica de HTML y la importancia de diseñar mobile-first. Sin embargo, quiero profundizar en accesibilidad (ARIA, contraste de colores) y en buenas prácticas de performance (lazy loading, bundlers como Vite). Agradecería feedback sobre cómo mejorar la escalabilidad del proyecto y técnicas avanzadas de CSS/JS.

(Ejemplo de etiquetas sugeridas: #CSSGrid #GitHubPages #ResponsiveDesign #BEM #MobileFirst)

What challenges did you encounter, and how did you overcome them?

Uno de los principales desafíos fue garantizar que el diseño fuera completamente responsive, especialmente en dispositivos móviles, donde algunos elementos se desalineaban. Lo solucioné utilizando media queries estratégicas y ajustando el uso de Flexbox y CSS Grid para reorganizar los componentes según el tamaño de pantalla.

Otro reto fue optimizar el rendimiento de carga, ya que las imágenes de las recetas afectaban el tiempo de carga. Implementé compresión de imágenes (con herramientas como TinyPNG) y consideré el uso de loading="lazy" para mejorar la eficiencia.

También tuve dificultades al mantener un CSS organizado a medida que el proyecto crecía. Para abordarlo, empecé a aplicar BEM (Block-Element-Modifier) como metodología, lo que me ayudó a evitar conflictos entre clases y mejorar la legibilidad del código.

Finalmente, el manejo de Git en equipo (si aplicaba) generaba conflictos ocasionalmente. Mejoré esto definiendo una estructura clara de ramas (main, develop, feature/) y usando pull requests con revisión de código para mantener un flujo ordenado.

¿Algo que no pudiste resolver? Me hubiera gustado implementar un buscador dinámico de recetas con JavaScript puro, pero por tiempo opté por una solución estática. En futuras iteraciones, exploraré el uso de APIs o JSON local para agregar esta funcionalidad.

(Etiquetas relevantes: #ResponsiveDesign #PerformanceOptimization #BEM #GitWorkflow #FrontendChallenges)

What specific areas of your project would you like help with?

Accesibilidad (a11y):

Me gustaría mejorar la accesibilidad del sitio (etiquetas ARIA, contraste de colores, navegación por teclado).

¿Alguien tiene recomendaciones de herramientas automatizadas (como Lighthouse o axe DevTools) o buenas prácticas para implementar?

Optimización avanzada de rendimiento:

Aunque comprimí imágenes, quisiera aprender técnicas más eficientes (como srcset para imágenes responsivas o SVG para gráficos ligeros).

¿Vale la pena implementar code splitting o un bundler como Vite en un proyecto pequeño como este?

JavaScript modular y escalable:

Actualmente el código JS está en un solo archivo. ¿Cómo estructurarlo mejor (patrones de diseño, módulos ES6) para facilitar mantenimiento?

¿Es recomendable usar un framework ligero (como Alpine.js o Preact) o mantener Vanilla JS?

Mejores prácticas en CSS:

He usado BEM, pero ¿cómo evitar redundancia en estilos? ¿Vale la pena adoptar CSS-in-JS (Styled Components) o un preprocesador como SASS?

¿Qué estrategias usan para temas oscuros/claros sin duplicar estilos?

Testing y despliegue continuo:

Me interesa integrar pruebas básicas (unitarias con Jest o E2E con Cypress). ¿Por dónde empezar en un proyecto frontend estático?

¿Alguna alternativa a GitHub Pages para despliegue con CI/CD (como Netlify o Vercel) que ofrezca mejor análisis de performance?

¡Agradezco sugerencias, recursos o ejemplos de la comunidad! (Ej: tutoriales, repos de referencia, o herramientas clave).

(Etiquetas útiles: #Accessibility #WebPerformance #JavaScriptArchitecture #CSSMethodologies #FrontendDev)