La práctica hace al programador

Hacer por hacer

Uno de los principales problemas cuando empezamos a programar, es saber aplicar los nuevos conocimientos adquiridos después de leer un libro o hacer un curso, a veces las ideas no fluyen y terminamos encajonados en el marco de lo aprendido.
En twitter y otras redes he visto incontables hilos de recursos para realizar proyectos, debo decir hay unos bastante interesantes (mas adelante pondré varios recursos), pero en ese punto es donde comencé a ver un problema y es el de realizar proyectos por que si, sin un objetivo claro, debo decir que cualquier práctica que hagamos nos va a servir a largo plazo, pero a veces el embarcarnos en proyectos al azar terminaremos perdiendo tiempo, lo veo similar al problema de la "cursitis", es decir, acumular cursos sin hacer proyectos donde se implemente y se extienda el conocimiento adquirido.
Hay que recordar que la forma en la que el cerebro aprende se fundamenta en 3 partes:

1. Asimilación del tema, es decir, pasar de lo abstracto a lo entendible, para esto usamos comparaciones y similes con acciones o elementos que ya entendamos previamente.
2. Conocimiento, en este punto ya entendemos la idea principal pero aún no somos capaces de aplicarla en otros contextos (acá es donde se quedan los que sufren de "cursitis").
3. Entendimiento, en este punto ya estamos en capacidad de aplicar lo aprendido y extenderlo a nuevos conceptos, acá el cerebro ya domina el tema y puede crear nuevas vertientes de conocimiento.

Organización

Para prevenir ese problema, lo que podemos hacer es tener un sistema interno, es decir, ordenar nuestras ideas, para eso me gusta mucho usar checklists, ya que me permiten aterrizar las ideas y darles un "paso a paso" que puedo ir realizando sin que nada se me pase por alto.
Este checklist será el resultado del análisis del proyecto y que quiero realizar, pero antes del checklist, debo definir el objetivo, vamos a ver un ejemplo:

Objetivo: Aprender a estructurar una página estática de forma semántica y agregar la parte visual por medio de CSS definiendo variables para los colores y las estructuras.
Proyecto: Clonación de una Landing Page existente
Herramientas: Visual Studio Code, Live Server, HTML y CSS
Librerias: Ninguna.
Tiempo: 1 día
Fecha de Inicio: 20/09/2022
Referencia: Front End Mentor

Este es un ejemplo de la definición básica del proyecto que queremos realizar, vamos a prácticar una definición semántica del HTML y la implementación del código CSS, el siguiente paso sería la definición del CheckList

Definiendo el CheckList

• Crear el proyecto en github
• Descargar la carpeta base del proyecto localmente
• Crear el archivo index.html y styles.css
• Crear el markup base de forma semántica de la pagina HTML
• Probar live server
• Crear los elementos internos del markup
• Adicionar el código reset en el CSS
• Adicionar las variables CSS de los colores y otros valores.
• Revisar el proyecto localmente
• Crear el sitio en github pages

Este sería un ejemplo de checkList, obviamente puede ser mas detallado y mejor aún, incluir los comandos necesarios en cada paso si se necesita (por ejemplo si necesitamos instalar librerias), el tener este "paso a paso" nos va a permitir también tener una especie de memoria para recordar como hicimos el proyecto.

No dispares con escopeta si necesitas un rifle

Sentarnos a definir que queremos practicar o aprender, con tiempos claros y un objetivo especifico, permitirá que aprovechemos mejor nuestro tiempo, adicionalmente tendremos una especie de documentación del proceso y una bitacora, a medida que los temas se hacen mas complejos, se incluyan mas librerias, herramientas, conceptos, etc, se hace mas necesario tener un documento claro donde podamos acudir si algo se nos olvida a futuro, este documento sería la definición y el checkList.

Recursos

Si lo que se quiere es realizar practicas en desarrollo web, les dejo algunos recursos e ideas interesantes, las cuales pueden aplicar para practicar los multiples temas que incluye esta disciplina.

1. Front End Mentor aunque es de pago, tiene algunos proyectos grátis que se pueden realizar, me gusta por que es guiado y tiene bastantes opciones.
2. Dribble Sin duda de mis preferidas, hay miles de ejemplos y conceptos de diseños web y aplicaciones moviles que podrían ser muy interesantes de llevar a cabo.
3. Codepen Challenges Codepen tiene una sección con retos interesantes para llevar a cabo, adicionalmente la ventaja de no tener que instalar nada local.
4. Daily UI Te suscribes y te llega un reto al correo.
5. Codier Otra página con retos interesantes.

Ideas para proyectos

• Sistema POS para restaurantes
• Fitness APP
• Food planer APP
• Language Learning APP
• Criminal Alert (alertar por GPS si se está en una zona donde hayan sido reportados muchos robos)
• Personal Finance APP
• Supermarket Calculator APP

Como conclusión, la práctica hace al maestro, pero la práctica bien orientada te llevará a la maestría sin tanto sufrimiento.