P
Ash Madden• 320
@ashmaddenwebmelbourne
Submitted
Matias Lombardi
@Lombardimn
All comments
- Matias Lombardi• 40
@Lombardimn
Posted
Primero que todo, quiero felicitarte por el excelente trabajo en la componetización de este proyecto. Has logrado una estructura modular y bien organizada, lo que facilita el mantenimiento y la escalabilidad de la aplicación. Cada componente está bien definido y se nota que has puesto atención en descomponer adecuadamente las diferentes partes del sistema.
Una recomendación que te haría para mejorar aún más el código sería mover la información que actualmente está embebida dentro de los componentes a un archivo externo, como un JSON. Esto ayudaría a mantener los componentes más limpios y a separar mejor la lógica de presentación de los datos, haciendo el proyecto aún más manejable y fácil de escalar. Además, esto permitiría centralizar los datos, facilitando su actualización sin tener que modificar el código directamente.
Otro aspecto que destaco positivamente es la parametrización de valores globales en TailwindCSS. Has hecho un excelente trabajo al aplicar variables globales para los estilos, lo que no solo mantiene la consistencia en toda la aplicación, sino que también permite realizar ajustes rápidos en los estilos sin necesidad de tocar cada componente individualmente. Esta es una muy buena práctica que ayuda a mantener el proyecto flexible y eficiente.
En resumen, has creado una base sólida con una estructura de componentes clara y bien organizada, y con pequeñas mejoras, como la externalización de datos, podrías llevar este proyecto aún más lejos.
0 - Ronald Yonggi• 170
@ronaldyonggi
Submitted
What are you most proud of, and what would you do differently next time?
I modified submission to make it my own, uses my own information and profile picture. I also added a dark-light theme switch feature. Although the code implementation for the theme switch could be improved to be more modular.
What challenges did you encounter, and how did you overcome them?
Implementing my own features, in this case the theme switching feature. It's just about persistence of trial-error and google search / asking AI.
What specific areas of your project would you like help with?
Good practices on how I can organize my css code for attributes that belong to dark mode and light mode in a way to reduce code duplication.
Matias Lombardi• 40@Lombardimn
Posted
It's excellent that you personalized the project by using your own information and photo, and that you also added a dark-light theme switch. This shows initiative and creativity. Next time, you could simplify the code related to the theme switch. Instead of adding so many classes for each component, you could control the theme by applying a general change to the whole site, which would make the code cleaner and easier to maintain. It's a simple improvement that would have a big impact!
I hope you continue to grow as a developer!
0 - Hiticas Mihai• 220
@hiticas
Submitted
Matias Lombardi• 40@Lombardimn
Posted
¿La solución incluye HTML semántico? La estructura actual utiliza algunos elementos no semánticos como <div> para todo el contenido principal, lo cual podría mejorar con etiquetas semánticas como <article>, <header>, <section>, y <footer>. Usar estas etiquetas ayudaría a describir mejor el contenido para los motores de búsqueda y mejorar la accesibilidad.
¿Es accesible y qué mejoras se podrían realizar? El código tiene algunos problemas de accesibilidad: Agregar un texto alternativo más descriptivo a las imágenes para mejorar la experiencia de los usuarios que utilizan lectores de pantalla. Por ejemplo, cambiar alt="img" por algo como alt="Illustration of article on HTML & CSS" para la primera imagen, y alt="Author Greg Hooper" para la segunda.
¿El diseño se ve bien en una variedad de tamaños de pantalla? Actualmente el ancho del contenedor está fijo (w-[380px]), lo cual podría limitar la flexibilidad en pantallas más amplias. Usar unidades relativas o breakpoints en Tailwind CSS podría resolver esto.
¿El código está bien estructurado, es legible y reutilizable? El código está bien estructurado y legible, pero hay algunas oportunidades para hacerlo más reutilizable:
Algunas clases Tailwind podrían encapsularse en componentes reutilizables de mayor nivel para evitar repetir estilos en otros lugares. Por ejemplo, se podría crear un componente específico para las etiquetas o las secciones de autor. Incluir prop-types o TypeScript mejoraría la tipificación y detección de errores en el desarrollo. Para una mayor flexibilidad, podrías pasar más datos como props al componente BlogPreviewCard en lugar de tenerlos "hardcodeados" dentro del componente.
¿La solución difiere considerablemente del diseño? No
0 What are you most proud of, and what would you do differently next time?
Setting up an efficient development environment using Vite, utilizing Git for version control, successfully deploying my page live on GitHub Pages and creating a well-structured README.
What challenges did you encounter, and how did you overcome them?
I had trouble deploying my page live on GitHub Pages. I overcame this by following a helpful Medium article that provided clear instructions for deploying Vite applications.
What specific areas of your project would you like help with?
I would like feedback on whether my HTML is semantic and well-structured.
Matias Lombardi• 40@Lombardimn
Posted
Este código está muy bien estructurado y refleja un enfoque limpio y organizado para la creación del componente de código QR. Presenta una Modularidad del código lo que facilita la reutilización y el mantenimiento. Esto es una buena práctica en React para mantener el código limpio y escalable. El estilo basado en mobile-first mejora la experiencia del usuario en diferentes pantallas. Uso eficiente de recursos como el manejo de la imagen del código QR a través de un import en lugar de URLs externas asegura que la aplicación siga buenas prácticas al gestionar recursos locales, lo cual también facilita el control de versiones y optimiza la carga de la página. Simplicidad en la estructura JSX: El código JSX es conciso y fácil de leer, lo que hace que la estructura del componente sea clara y directa. Esto reduce la complejidad del código y mejora su mantenibilidad.
0
