Muchos principiantes pueden sentirse intimidados cuando están aprendiendo a programar. Pero aprender jugando puede ser divertido y educativo.

De acuerdo a True Education Partnerships,

La gamificación en el aprendizaje implica el uso de elementos basados en el juego, como la puntuación, la competición entre compañeros, el trabajo en equipo y las tablas de puntuación, para impulsar el compromiso, ayudar a los estudiantes a asimilar nueva información y poner a prueba sus conocimientos.

En este blog se puede encontrar más información sobre gamificación en español.

He elaborado una lista de 12 juegos de codificación para principiantes.

Aquí está la lista completa. Una vez que encuentres un sitio web que te interese, haz clic en ese enlace y te llevará a una descripción más detallada de ese sitio web.

1. CodinGame
2. CSS Diner
3. Flexbox Froggy
4. Flexbox Defense
5. Grid Garden
6. CodeCombat
7. Scratch
8. Tynker
9. SQL Murder Mystery
10. Untrusted
11. Elevator Saga
12. CheckiO

CodinGame

CodinGame es un sitio que te ayuda a trabajar en habilidades de resolución de problemas y aprender conceptos básicos de programación a través de un juego por turnos.

Esta plataforma es compatible con más de 25 lenguajes de programación diferentes y brinda a los jugadores la oportunidad de practicar, aprender y competir en concursos de codificación.

Una vez que crees una cuenta, puedes empezar con la sección de orientación de nivel principiante. Se te presentarán los conceptos de programación estándar y resolverás mini-retos.

CSS Diner

En CSS Diner, puedes practicar los conceptos básicos de CSS a través de una serie de 32 desafíos. Esta es una buena manera de familiarizarse con el idioma y divertirse aprendiéndolo.

Los primeros desafíos son cortos y se enfocan en trabajar con clases e ids. Pero a medida que avanza por los niveles, conocerás los pseudo-selectores, el selector first-of-type, el selector last-of-type y el selector universal.

La comunidad ha hecho traducciones en varios idiomas como esta versión en español: Cena CSS.

Flexbox Froggy

En Flexbox Froggy, aprenderá Flexbox CSS colocando las ranas en los nenúfares correctos. Cuando termines el nivel 24, deberías tener la suficiente confianza como para usar Flexbox en tu próximo proyecto.

Cada desafío proporciona una descripción de las propiedades de Flexbox. Los primeros desafíos comienzan con facilidad, pero a medida que avanzas en el juego, las cosas se complican.

Flexbox Defense

Flexbox Defense es un juego de defensa de torres que te ayuda a fortalecer tus habilidades de CSS. Coloca las torres para mantener alejados a tus enemigos usando Flexbox CSS.

Los desafíos te proporcionarán definiciones de las propiedades de Flexbox. Una vez que escribas tu código, presiona el botón Start Wave (Iniciar oleada) y verás si has logrado detener a tus enemigos.

Grid Garden

Aprende CSS Grid pasando por los 28 niveles de Grid Garden. Se recomienda cierto conocimiento previo de CSS Grid, pero no es necesario para empezar con el juego.

Cada desafío proporciona una descripción de las propiedades de CSS Grid. Los primeros desafíos comienzan siendo fáciles, pero a medida que se avanza en el juego las cosas se complican.

CodeCombat

CodeCombat funciona bien tanto para niños como para adultos. Puedes crear una cuenta gratuita y aprender fundamentos de la programación como bucles, funciones, condicionales y variables.

Puedes elegir el lenguaje de programación con el que quieras empezar y trabajar a través de los juegos.

También tienes la opción de pasar a la cuenta premium si te interesa tener acceso a más niveles.

Scratch

Scratch creado por el Instituto de Tecnología de Massachusetts (MIT, por sus siglas en inglés) es un lenguaje de programación basado en bloques en el que puedes aprender sobre eventos, condicionales, variables y más, creando tus propios juegos y animaciones.

Elije entre docenas de sprites (gráficos), sonidos y fondos para codificar tus propias creaciones y comenzar a comprender los conceptos básicos de programación.

Scratch también es el lenguaje utilizado durante la primera semana del curso de Harvard CS50: Introduction to Computer Science (CS50: Introducción a ciencias de la computación).

Tynker

Tynker es un sitio donde puedes construir proyectos y jugar juegos usando HTML, CSS, JavaScript, Python y Java. Tienen una extensa lista de proyectos, algoritmos y desafíos de estructura de datos.

Puedes crear proyectos en el editor en linea y compartir tus creaciones con la comunidad. Este sitio está dirigido a niños y niñas de entre 5 y 18 años.

SQL Murder Mystery

SQL Murder Mystery es ideal tanto para principiantes como para desarrolladores experimentados de SQL. Fortalece tu SQl y tus habilidades de resolución de problemas tratando de rastrear al asesino en esta historia policíaca de misterio.

El juego usa SQLite y  antes de comenzar el juego, tendrás que familiarizarte con la estructura de la base de datos .

Si estás dado tus primeros pasos con SQL, hay un recorrido detallado para principiantes. De lo contrario, si tienes más experiencia con SQL, puedes sumergirse directamente en el juego.

Untrusted

Untrusted es un juego de aventuras en el que puedes poner a prueba tu JavaScript y tus habilidades para resolver problemas. Guía al Dr. Eval a través de una serie de niveles resolviendo desafíos de JavaScript.

Si no tienes mucha experiencia en JavaScript, este juego puede ser un poco avanzado para ti. Pero si has pasado algún tiempo programando en JavaScript, los desafíos son factibles.

Elevator Saga

Elevator Saga es un juego de JavaScript en el que atravesarás una serie de desafíos tratando de transportar personas en ascensores de la manera más eficiente posible dentro del tiempo dado.

Una vez que modifiques el código, puedes probar la eficiencia de tu solución haciendo clic en el botón de Start (Inicio), en la esquina superior derecha. Cuando el programa se está ejecutando, puedes consultar las estadísticas para ver si pasas el desafío o no.

CheckiO

CheckiO es un juego de estrategia en el que puedes aprender TypeScript o Python a través de una serie de desafíos. Una vez que creas una cuenta gratuita, comenzarás con los desafíos para principiantes y te abrirás camino hasta los avanzados.

El juego te dará acceso a sugerencias y soluciones de otros jugadores si necesitas ayuda. Resolverás cada uno de los desafíos en el editor en línea y pasarás a la siguiente misión cuando la tarea esté resuelta.

El comando básico para cargar o subir una rama local a un repositorio remoto es git push.

Este comando tiene una variedad de opciones y parámetros que puedes pasarle, y en este artículo aprenderás los que usarás más a menudo.

Cómo subir una rama local de Git al origen (origin)

Si ejecutas el comando simple git push, por defecto, Git elegirá dos parámetros más por ti: el repositorio remoto y la rama a la que subir.

La forma general del comando es esta:

$ git push <remote> <branch>

Por defecto, Git elige origin como remoto y tu rama actual como la rama a la que subir.

Si tu rama actual es main, el comando git push suministrará los dos parámetros por defecto — ejecutándolo así git push origin main.

En el ejemplo de abajo, el remoto  origin es un repositorio de GitHub, y la rama actual es main:

(main)$ git remote -v 
origin  git@github.com:johnmosesman/burner-repo.git (fetch)
origin  git@github.com:johnmosesman/burner-repo.git (push)

(main)$ git push
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 16 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 274 bytes | 274.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To github.com:johnmosesman/burner-repo.git
   b7f661f..ab77dd6  main -> main

De la salida se puede ver que la rama local  main fue subida a la rama remota  main:

To github.com:johnmosesman/burner-repo.git
   b7f661f..ab77dd6  main -> main

Cómo forzar la subida a una rama en Git

Normalmente, subirás una rama y añadirás a su historial de confirmaciones.

Sin embargo, hay ocasiones en las que es necesario sobrescribir a la fuerza el historial de una rama.

Hay un par de razones por las que puedes querer hacer esto.

La primera razón es para corregir un error - aunque probablemente sea mejor hacer una nueva confirmación que revierta los cambios (git revert).

El segundo y más común escenario es después de una acción como un rebase, que cambia el historial de confirmaciones:

Internamente, Git [hace un rebase] creando nuevas confirmaciones y aplicándolas a la base especificada. Es muy importante entender que, aunque la rama parece la misma, se compone de nuevas confirmaciones por completo.

Un rebase crea confirmaciones completamente nuevas.

Esto significa que si intentas cargar una rama que ha sido rebasada localmente - pero no en el remoto - el repositorio remoto reconocerá que el historial de confirmaciones ha cambiado, y te impedirá subir los cambios hasta que arregles las diferencias:

(my-feature)$ git push
To github.com:johnmosesman/burner-repo.git
 ! [rejected]        my-feature -> my-feature (non-fast-forward)
error: failed to push some refs to 'git@github.com:johnmosesman/burner-repo.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

Puedes hacer un git pull para fusionar las diferencias, pero si realmente quieres sobrescribir el repositorio remoto puedes añadir la marca --force :

(my-feature)$ git push --force origin my-feature
Enumerating objects: 1, done.
Counting objects: 100% (1/1), done.
Writing objects: 100% (1/1), 184 bytes | 184.00 KiB/s, done.
Total 1 (delta 0), reused 0 (delta 0)
To github.com:johnmosesman/burner-repo.git
 + edb64e2...52f54da my-feature -> my-feature (forced update)

(Nota: puedes usar la versión abreviada -f en vez de  --force.)

Una subida forzada es una acción destructiva - úsala solo cuando tengas la certeza de que es lo que quieres hacer.

Forzar la subida con contrato (--force-with-lease)

A veces puedes querer forzar la subida - pero solo si nadie más ha contribuido a la rama.

Si alguien más contribuye a tu rama y empuja sus cambios a la remota - y tú fuerzas, tu subida sobre ella - sobrescribirás sus cambios.

Para evitar este escenario, puedes utilizar la opción --force-with-lease.

De nuevo de la documentación oficial en inglés:

--force-with-lease solo, sin especificar los detalles, protegerá todas las referencias remotas que vayan a ser actualizadas requiriendo que su valor actual sea el mismo que la rama de seguimiento remoto que tenemos para ellas.

Básicamente, le estás diciendo a Git que fuerce la actualización de esta rama solo si tiene el mismo aspecto que la última vez que la viste.

Si está colaborando con otros en tu rama, sería bueno evitar usar --force o al menos usar --force-with-lease para evitar perder los cambios que otros colaboradores han hecho.

Cómo subir cambios a una rama con diferente nombre en Git

Normalmente, subirás tu rama local a una rama remota con el mismo nombre - pero no siempre.

Para subir a una rama con un nombre diferente, necesitas especificar la rama de la que quieres subir los cambios (nombre de la rama local) y el nombre de la rama a la que quieres subir (nombre de la rama remota) separadas con dos puntos (:).

Por ejemplo, si quieres subir de una rama llamada some-branch a my-feature:

(some-branch)$ git push origin some-branch:my-feature
Total 0 (delta 0), reused 0 (delta 0)
To github.com:johnmosesman/burner-repo.git
 + 728f0df...8bf04ea some-branch -> my-feature

Cómo subir todas las ramas locales al remoto

No necesitarás subir todas las ramas de tu local muy a menudo, pero si lo haces puedes hacerlo añadiendo la marca --all:

(main)$ git branch
* main
  my-feature

(main)$ git push --all
...
To github.com:johnmosesman/burner-repo.git
   b7f661f..6e36148  main -> main
 * [new branch]      my-feature -> my-feature

Conclusión

El comando git push es uno de los que más a menudo vas a utilizar, y hay un montón de opciones que se pueden utilizar con él. Te animo a leer la documentación oficial, para encontrar más opciones y atajos útiles.

Si te ha gustado este tutorial, también hablo de temas como este en Twitter, y escribo sobre ellos en mi página web.