Una lista en Python es una estructura de datos que contiene múltiples elementos en un orden determinado. En ocasiones es necesario saber el tamaño de una lista. En este artículo te enseñaré cómo hacerlo.

Cómo crear una lista en Python

Puedes crear listas en Python usando paréntesis. Dentro de estos tienes que especificar los elementos (o valores) separados por comas.

Estos valores pueden ser cadenas, números, listas, etc.:

items = ["python", True, [50, 30], 80]

print(items)
# ['python', True, [50, 30], 80]

print(items[2][0])
# 30

Aquí tenemos una lista anidada.

Entonces, ¿cómo podemos averiguar el tamaño de una lista? En una lista que contenga pocos elementos, resulta sencillo contarlos manualmente. Sin embargo, en una lista más larga, la situación se complica.

Con Python puedes averiguarlo fácilmente. Te enseñaré dos formas de hacerlo: la versión más larga y la más corta.

También tengo un breve vídeo sobre este tema que puedes consultar.

Cómo averiguar el tamaño de una lista usando for loop en Python

Puedes averiguar el tamaño de una lista con un bucle que vaya iterando a través de la lista y haga un seguimiento del tamaño usando una variable. A continuación puedes ver a lo que me refiero:

lenguajes = ["python", "javascript", "ruby", "java", "go"]

# inicializar el tamaño de la variable
size = 0

for value in lenguajes:
  # incrementar la variable en cada bucle
  size = size + 1

print(size)
# 5

En este ejemplo, tenemos un arreglo con cinco valores. Primero, inicializamos la variable size con 0. Después declaramos el bucle for, el cual itera a través de cada valor del arreglo. Cada iteración incrementa la variable size en 1. Al final, la variable size contendrá el tamaño total de la lista.

Echemos un vistazo a la versión corta.

Cómo averiguar el tamaño de una lista usando la función len en Python

La función len devuelve el número de valores de un elemento iterable en Python. Es una función muy simple y eficiente para este propósito. Un elemento iterable puede ser una lista o un diccionario.

Veamos un ejemplo de cómo conseguir el tamaño de una lista:

lenguajes = ["python", "javascript", "ruby", "java", "go"]

length = len(lenguajes)

print(length)
# 5

Si pasamos la lista lenguajes como argumento a len, la función devolverá el número de valores en ella, el cual es 5.

Como mencioné anteriormente, la función len no es solo útil con listas. También puedes usarla con diccionarios y cadenas:

dicc = {
  "nombre": "Dillion",
  "edad": 70,
  "lenguaje": "python"
}

print(len(dicc))
# 3

frase = "Soy Dillion"

print(len(dicc))
# 11

En cuanto al diccionario dict, len devuelve el número de propiedades. Para la cadena frase, len devuelve el número de caracteres.

Resumiendo

En este artículo, hemos visto cómo saber el tamaño de una lista usando una versión larga - la declaración for loop - y una versión más corta y eficiente - la función len.

Si te ha gustado el artículo, por favor compártelo. :)

El archivo .gitignore es un archivo de texto que le dice a Git qué otros archivos y carpetas de un proyecto debe ignorar.

Un archivo .gitignore local se coloca normalmente en el directorio de origen de un proyecto. También puedes crear un archivo .gitignore global y cualquier entrada que contenga será ignorada en todos tus repositorios Git por igual.

Para crear un archivo .gitignore local, crea un archivo de texto y llámalo .gitignore (recuerda incluir el . al principio). Después edita el archivo como sea necesario. Cada línea nueva debería contener el archivo o carpeta que quieres que Git ignore.

Las entradas en este archivo también pueden seguir un modelo similar.

• * se usa para encontrar coincidencias
• / se usa para ignorar nombres de ruta relacionados con el archivo .gitignore
• # se usa para añadir comentarios al archivo .gitignore

Este es un ejemplo de cómo se vería un archivo .gitignore:

# Ignorar archivos del sistema de Mac
.DS_store

# Ignorar carpeta node_modules
node_modules

# Ignorar todos los archivos de texto
*.txt

# Ignorar archivos relacionados con claves de una API
.env

# Ignorar archivos de configuración SASS
.sass-cache

Para añadir o cambiar tu archivo .gitignore global, ejecuta el siguiente comando:

git config --global core.excludesfile ~/.gitignore_global

Esto creará el archivo  ~/.gitignore_global. Ahora puedes editar ese archivo de la misma manera que un archivo .gitignore local. Todos tus repositorios Git ignorarán los archivos y carpetas que aparecen enumerados en el archivo .gitignore global.

Cómo dejar de rastrear archivos previamente confirmados en Gitignore

Para dejar de seguir un único archivo, es decir, dejar de rastrear el archivo, pero no eliminarlo del sistema puedes usar:

git rm --cached filename

Para dejar de rastrear todos los archivos en .gitignore:

Primero confirma cualquier cambio pendiente en el código y después ejecuta:

git rm -r --cached

Esto elimina cualquier archivo modificado del área de staging, después ejecuta:

git add .

Confírmalo:

git commit -m ".gitignore is now working"

Para deshacer git rm --cached filename, use git add filename

Más información:

• Documentación sobre Git: gitignore
• Ignorar archivos: GitHub
• Plantillas útiles de .gitignore: GitHub

Permíteme comenzar este artículo preguntando "¿Qué es JavaScript?" Bueno, aquí está la respuesta más confusa pero precisa que he encontrado hasta ahora:

JavaScript es un lenguaje de programación de un solo procesamiento secuencial, no bloqueador, asíncrono, simultáneo y con mucha flexibilidad.

Espera un momento - ¿dije de un solo procesamiento secuencial y asíncrono al mismo tiempo? Si comprendes lo que significa de un solo procesamiento secuencial, probablemente lo asociarás a operaciones síncronas. Entonces, ¿cómo puede ser JavaScript asíncrono?

En este artículo, aprenderemos todo sobre las partes síncronas y asíncronas de JavaScript. Normalmente, ambas se usan en la programación web a diario.

Si prefieres aprender con un vídeo, el contenido de este artículo está disponible también como vídeotutorial aquí: ?

En este artículo, aprenderás:

• Por qué JavaScript es síncrono.
• En qué circunstancias se dan las operaciones asíncronas cuando JavaScript es de un solo procesamiento secuencial.
• Cómo los términos síncrono y asíncrono te ayudarán a comprender mejor las promesas en JavaScript.
• Muchos y sencillos, pero muy potentes ejemplos que muestran estos conceptos en detalle.

Las funciones de JavaScript son ciudadanos de primera clase

En JavaScript puedes crear y modificar una función, usarla como argumento, devolverla desde otra función y asignarla a una variable. Todas estas habilidades nos permiten usar las funciones en cualquier parte para colocar una cantidad de código de manera lógica.                      

Necesitamos decirle al motor de JavaScript que ejecute las funciones invocándolas. Sería algo como esto:

// Definir una función
function f1() {
    // Hacer algo
    // Hacer algo otra vez
    // Otra vez
    // Etcétera...
}

// Invocar a la función
f1();

‌‌Por defecto, cada línea de la función se ejecuta secuencialmente, una línea tras otra. Lo mismo ocurre cuando invocas múltiples funciones en tu código. Línea tras línea.

JavaScript síncrono - Cómo funciona la ejecución de un conjunto de funciones

¿Qué sucede cuando defines una función y luego la invocas? El motor de JavaScript mantiene una pila de ejecución de datos llamada function execution stack. El objetivo de esto es hacer un seguimiento de la ejecución de la función. Realiza lo siguiente:

• Cuando el motor de JavaScript invoca la función, la añade a la pila de ejecución y la ejecución comienza.
• Si la función que está siendo ejecutada llama a otra función, el motor añade esta segunda función a la pila y comienza a ejecutarla.
• Una vez terminada la ejecución de la segunda función, el motor la saca de la pila.
• Se vuelve a la ejecución de la primera función desde el punto donde se dejó la última vez.
• Cuando la ejecución de la primera función haya finalizado, el motor la saca de la pila.
• Se continúa de esta manera hasta que no queda nada en la pila.

También se conoce a la pila de ejecución de funciones como Call Stack.‌

Echémosle un vistazo a un ejemplo de tres funciones que se ejecutan una a una:

function f1() {
  // algo de código
}
function f2() {
  // algo de código
}
function f3() {
  // algo de código
}

// Invoca a las funciones una a una
f1();
f2();
f3();

Ahora veamos qué sucede con la pila de ejecución de funciones‌:‌

¿Has visto lo que sucede aquí? Primero, f1() va a la pila, se ejecuta y sale. Después f2() hace lo mismo y finalmente f3() también. Después de este proceso, la pila se encuentra vacía, sin nada más que ejecutar.

Ok, vamos a ver ahora un ejemplo más complejo. Aquí la función f3() invoca a la función f2() que a su vez invoca también a la función f1().              

function f1() {
  // Algo de código
}
function f2() {
  f1();
}
function f3() {
  f2();
}
f3();

‌Vamos a ver qué ocurre en la pila de ejecución de funciones:‌

Observa cómo f3() va a la pila en primer lugar invocando a la función f2(). Así pues, f2() también se añade a la pila mientras f3() aún está en ella. La función f2()invoca a f1(), la cual se añade a la pila junto con f2()y f3().

En primer lugar, f1() termina de ejecutarse y sale de la pila. Justo después f2() termina, y finalmente f3().

En resumen, todo lo que sucede dentro de la pila de ejecución de funciones es secuencial. Ésta es la parte síncrona de JavaScript. El procesamiento de JavaScript se asegura de que todo lo que está en la pila se ejecuta antes de comenzar con algo nuevo.

¡Estupendo! Ahora que comprendemos cómo funcionan las operaciones síncronas en JavaScript, podemos indagar en su lado asíncrono. ¿Estás preparad@?

JavaScript asíncrono - Cómo funcionan las APIs del Navegador y las Promesas

La palabra asincronía significa que no sucede al mismo tiempo. ¿Qué significa esto en el contexto de JavaScript?

Por lo general, la ejecución de cosas secuencialmente funciona bien. Sin embargo, a veces puede que necesites tomar datos de un servidor o retrasar la ejecución de una función, algo que no prevés que ocurra AHORA. Es decir, quieres que tu código se ejecute de manera asíncrona.

Bajo estas circunstancias, es posible que no quieras que el motor de JavaScript detenga la ejecución de otro código secuencial. Para ello, el motor de JavaScript necesita manejar las cosas un poco más eficientemente en este caso.

Podemos clasificar la mayoría de las operaciones asíncronas de JavaScript de 2 maneras:

1. Eventos o funciones Browser API/Web API. Estos incluyen métodos como setTimeout, o controladores de eventos como clic, mouse over, scroll y muchos más.
2. Promesas. Un objeto único en JavaScript que nos permite realizar operaciones asíncronas.

No te preocupes si las promesas son un concepto nuevo para ti. Por ahora no necesitas saber más para poder seguir este artículo. Al final del artículo, he añadido algunos enlaces para principiantes para que puedas aprender sobre las promesas.

Cómo manejar las APIs de un navegador/Web APIs

Las APIs del navegador como setTimeout y los controladores de eventos dependen de las funciones callback . Una función callback se ejecuta cuando una operación asíncrona se completa. A continuación puedes ver un ejemplo de cómo funciona la función setTimeout :

function printMe() {
  console.log('print me');
}

setTimeout(printMe, 2000);

La función setTimeout ejecuta una función después de que haya transcurrido un determinado tiempo. En el código anterior, el texto print me se muestra en la consola después de 2 segundos.

Imagínate que tenemos las siguientes líneas de código después de la función  setTimeout :

function printMe() {
  console.log('print me');
}

function test() {
  console.log('test');
}

setTimeout(printMe, 2000);
test();

¿Qué esperamos que ocurra aquí? ¿Cuál crees que será el resultado?

¿Esperará el motor de JavaScript esperará durante 2 segundos para invocar la función test() y el resultado será?:

printMe
test

¿O se las arreglará para mantener la función callback setTimeout a un lado y continuará ejecutando el resto? Así que el resultado podría ser el siguiente:

test
printMe

Si apostaste por la segunda opción, estás en lo cierto. Ahí es donde entra en juego el mecanismo asíncrono.

Cómo funciona el Callbak Queue en JavaScript (o la cola de tareas )

JavaScript mantiene una cola de funciones callback conocida como callback queue o task queue. La cola de una estructura de datos es First-In-First-Out(FIFO). Es decir, la función callback que se añada primero a la cola tiene la oportunidad de salir primero. Pero la pregunta es:

• ¿Cuándo la pone el motor de JavaScript en la cola?
• ¿Cuándo la saca el motor de JavaScript de la cola?
• ¿A dónde va cuando sale de la cola?
• Y lo que es más importante, ¿cómo relacionamos todo esto con la parte asíncrona de JavaScript?

¡Vaya, cuántas preguntas! Vamos a averiguar las repuestas con la ayuda de la siguiente imagen:

La imagen superior muestra el call stack que ya hemos visto. Existen dos secciones más que rastrear si la API de un navegador (como setTimeout) se activa y pone la función callback de la API a la cola.

El motor de JavaScript sigue ejecutando las funciones en el call stack. Como no pone la función callback directamente en la pila, no hay código alguno esperando ni bloqueando la ejecución en la pila.

El motor crea un bucle que busca en la cola regularmente para encontrar lo que necesita extraer. Extrae una función callback de la cola a la call stack cuando la pila está vacía. Es entonces cuando la función callback se ejecuta como cualquier otra función en el stack. El bucle continúa. Este bucle se conoce como Event Loop.

Así que la moraleja de la historia es la siguiente:

• Si la API de un navegador se activa, las funciones callback se quedan en la cola.
• El código se sigue ejecutando de manera normal en la pila.
• El event loop comprueba si hay una función callback en la cola.
• Si es así, pasa la función callback de la cola a la pila y la ejecuta.
• El bucle continúa.

Ahora vamos a ver cómo funciona el siguiente código:

function f1() {
    console.log('f1');
}

function f2() {
    console.log('f2');
}

function main() {
    console.log('main');
    
    setTimeout(f1, 0);
    
    f2();
}

main();

El código ejecuta una función setTimeout con una función callback f1(). Ten en cuenta que le hemos asignado un valor de 0 como retraso. Esto significa que esperamos que la función f1() se ejecute inmediatamente. Justo después de setTimeout, ejecutamos la función f2().

¿Cuál crees que será el resultado? Aquí lo tienes:

main
f2
f1

Podrías estar pensando que f1 debería imprimirse antes que f2, ya que no hemos retrasado la ejecución de f1. Sin embargo, ese no es el caso. ¿Recuerdas el mecanismo del event loop mencionado anteriormente? Vamos a ver el código anterior paso a paso:

Aquí tienes los pasos descritos:

1. La función main() entra en el call stack.
2. Tiene una función console log para imprimir la palabra main. Se ejecuta el console.log('main') y sale del stack.
3. Se lleva a cabo la API del navegador setTimeout.
4. La función callback entra en el callback queue.
5. La ejecución se produce de manera normal en el stack, así que f2() pasa al stack. Se ejecuta el console log de la función f2()y ambos salen del stack.
6. La función main() también sale del stack.
7. El event loop identifica que el call stack está vacío y que hay una función callback en la cola.
8. La función callback f1() pasa al stack. Comienza la ejecución. El console log se ejecuta y f1() también sale del stack.
9. En este punto, no hay nada más que ejecutar ni en el stack ni en la cola.

Espero que ahora comprendas cómo funciona internamente la parte asíncrona de JavaScript. Pero eso no es todo. Aún nos queda echarle un vistazo a las promesas.

Cómo maneja el motor de JavaScript las promesas

En JavaScript las promesas son objetos especiales que ayudan a realizar operaciones asíncronas.

Puedes crear una promesa usando el constructor Promise. Necesitas pasarle una función llamada executor. En esta función defines lo que quieres hacer cuando una promesa devuelva algo con éxito o ,por el contrario, dé error. Puedes hacer esto llamando los métodosresolve y reject.

Aquí tienes un ejemplo de una promesa en JavaScript:

const promise = new Promise((resolve, reject) =>
        resolve('I am a resolved promise');
);

Después de que la promesa se ejecute, podemos manejar el resultado con el método .then() y el error con el método .catch().

promise.then(result => console.log(result))

Las promesas se usan cada vez que utilices el método fetch() para tomar datos de una tienda.

El punto aquí es que el motor de JavaScript no usa el mismo callback queue que vimos anteriormente con las APIs del navegador. Usa otra cola especial llamada cola de trabajo o Job Queue.

¿Qué es la Job Queue en JavaScript?

Cada vez que una promesa aparece en nuestro código, la función ejecutora entra en la cola de trabajo. El event loop funciona, como siempre, y le da prioridad a los elementos que están en job queue o cola de trabajo por encima de los elementos que se encuentran en la callback queue cuando el stack está libre.

El elemento en la callback queue se llama macro task, mientras que el elemento en la job queue se llama micro task.

Así que todo el proceso funciona así:

• Con cada bucle del event loop, se completa una tarea de la callback queue.
• Una vez que una tarea se haya completado, el event loop visita la job queue. Completa todas las micro tasks en la cola de trabajo antes de pasar a otra cosa.
• Si ambas colas tienen algo esperando, la job queue tiene prioridad sobre la callback queue.

La imagen inferior muestra la inclusión de la job queue o cola de trabajo junto con otros elementos existentes.

Ahora, veamos un ejemplo para entender mejor esta secuencia:

function f1() {
    console.log('f1');
}

function f2() {
    console.log('f2');
}

function main() {
    console.log('main');
    
    setTimeout(f1, 0);
    
    new Promise((resolve, reject) =>
        resolve('I am a promise')
    ).then(resolve => console.log(resolve))
    
    f2();
}

main();

En el código superior, tenemos una función setTimeout() como antes pero hemos introducido una promesa justo después. Recuerda todo lo que hemos aprendido hasta ahora y adivina el resultado.

Si tu respuesta coincide con esta, estás en lo cierto:

main
f2
I am a promise
f1

Ahora veamos el proceso de las acciones:

El flujo es casi el mismo que el anterior, pero es muy importante observar cómo los elementos de la cola de trabajo priorizan los elementos de la cola de tareas. Por otra parte, observa cómo no importa si el setTimeout tiene un retraso cero. Se trata de que la job queue que viene antes de el callback queue.

¡Estupendo!, hemos aprendido todo lo que necesitamos para comprender la ejecución síncrona y asíncrona en JavaScript.

¡Una prueba para ti!

Pongamos a prueba tus conocimientos con este test. Adivina el resultado del siguiente código aplicando el conocimiento que has adquirido hasta ahora:

function f1() {
 console.log('f1');
}

function f2() { 
    console.log('f2');
}

function f3() { 
    console.log('f3');
}

function main() {
  console.log('main');

  setTimeout(f1, 50);
  setTimeout(f3, 30);

  new Promise((resolve, reject) =>
    resolve('I am a Promise, right after f1 and f3! Really?')
  ).then(resolve => console.log(resolve));
    
  new Promise((resolve, reject) =>
    resolve('I am a Promise after Promise!')
  ).then(resolve => console.log(resolve));

  f2();
}

main();

El resultado esperado sería:

main
f2
I am a Promise, right after f1 and f3! Really?
I am a Promise after Promise!
f3
f1

¿Te gustaría realizar más pruebas como esta? Dirígete a este repositorio y practica con más ejercicios.

Si te bloqueas o necesitas alguna aclaración, no dudes en ponerte en contacto conmigo a través de Twitter.

En resumen

• El motor de JavaScript usa la pila de estructura de datos para realizar un seguimiento de las actuales funciones ejecutadas. La pila es conocida como la function execution stack.
• La function execution stack (es decir, la call stack) ejecuta las funciones de manera secuencial, línea a línea, una por una.
• Las web APIs o APIs del navedagor usan las funciones callback para completar las tareas cuando una operación asíncrona se realiza. La función callback se coloca en la callback queue.
• Las funciones del ejecutor de promesas se colocan en la job queue.
• Con cada bucle del event loop una macro tarea se completa fuera de la callback queue.
• Una vez que la tarea se complete, el event loop visita la job queue y completa todas las micro tareas dentro de la job queue antes de pasar a otra cosa.
• Si ambas colas tienen algo esperando al mismo tiempo, la job queue tiene prioridad sobre la callback queue.

Antes de concluir...

Eso es todo por ahora. Espero que este artículo te haya parecido útil y te ayude a comprender mejor los conceptos de sincronía y asincronía en JavaScript.

¡Conectemos! Puedes seguirme en Twitter(@tapasadhikary), en mi canal de Youtube y en GitHub(atapas).

En mi tutorial anterior, hablamos sobre qué es el control de versiones, cómo funcionan Git y GitHub, y cómo configurar una cuenta GitHub.

Hoy le echaremos un vistazo a cómo usar algunos comandos básicos en Git en un proyecto real.

Para ello he creado un proyecto sencillo que usaremos de ejemplo en este tutorial.

Gracias a este tutorial, aprenderás cómo:

• Crear un repositorio en GitHub
• Inicializar Git en tu proyecto
• Añadir y confirmar tu proyecto
• Cargar los cambios de tu proyecto en GitHub
• Añadir y eliminar un archivo de un repositorio

Cómo crear un repositorio en GitHub

Creé el proyecto anterior usando HTML y CSS. Para inicializar Git en el proyecto, tengo que crear un nuevo repositorio en mi cuenta de GitHub.

Puedo hacerlo iniciando sesión en mi cuenta, hago clic en el botón new que se encuentra en la parte superior derecha de la pantalla. Después, introduzco el nombre del repositorio, la descripción y elijo si quiero que mi proyecto tenga acceso público o privado. Luego hago clic en "Create repository."

Cómo inicializar Git

No podemos usar Git en nuestro proyecto si no lo inicializamos primero con el comando git init.

Por lo tanto, después de crear el repositorio en GitHub, abro mi proyecto en mi editor VSCode, voy al terminal y tecleo el comando git init para inicializarlo.

Cuando ejecutes este comando en tu terminal, verás algunos cambios en color en tu proyecto. También verás un símbolo U que significa que no se está haciendo un seguimiento de tus archivos.

Igualmente, cuando abras la carpeta donde tu proyecto está guardado, verás que hay otra carpeta con el nombre de .git que se crea automáticamente después de ejecutar el comando git init.

Cómo añadir y confirmar tu proyecto

Cómo usar el comando git add

Añadir el proyecto al staging area ayuda a que Git haga un seguimiento de tu proyecto con los cambios que has hecho.

Para añadir tu proyecto al staging area, ejecuta el comando git add . . Cuando ejecutes este comando, verás que el símbolo U cambia automáticamente a A. Esto significa que tus archivos han sido añadidos al staging area y están siendo seguidos por Git, esperando a que sean confirmados.

Cómo usar el comando git commit

Al ejecutar el comando git commit guardas esta etapa en particular y los cambios en tu proyecto de forma permanente en el repositorio de Git. Y aunque hagas más cambios en tu proyecto en el futuro y los confirmes, esta confirmación en particular que realizaste ahora se guardara en el repositorio de Git y tendrás acceso a ella en cualquier momento.

Así que después de haber añadido tu proyecto al staging area, lo siguiente que tendrás que hacer es confirmarlo usando el comando git commit –m “first commit”.

Cuando ejecutes este comando, deberías notar que el símbolo A ya no aparece y tu proyecto se ve de nuevo como esperabas.

Cómo cargar tu proyecto en GitHub

Cargar tu proyecto en GitHub sirve para evitar que tu proyecto se corrompa o se pierda en el almacenamiento local. También te permite acceder al repositorio de GitHub libremente desde cualquier lugar y cualquier ordenador (no necesariamente tu ordenador personal).

Para cargar tu proyecto al repositorio de GitHub, tendrás que añadir el repositorio remoto a GitHub que creaste al principio.

Para hacer esto, usarás el comando git remote add origin (nombre del repositorio). En mi caso, el nombre de mi repositorio es https://github.com/Derekvibe/FoodResturant.git. Escribiéndolo en el terminal se vería así:

git remote add origin https://github.com/Derekvibe/FoodResturant.git

Si no estás seguro/a de cuál es la rama en la que estás trabajando, utiliza el comando git branch.  Si muestra la rama master, cambiaremos a la rama main ejecutando el comando git branch –M main.

En mi caso, ya tenía configurada la rama branch main por defecto cuando instalé Git en mi ordenador al ejecutar el comando git config –global init.default branch main. Por lo tanto, no necesito ejecutar el comando git branch –M main otra vez.

Por último, después de añadir el repositorio remoto donde quieres subir tu proyecto y cambiar la rama a main, tendrás que cargar tu proyecto en GitHub.

Para conseguir esto, ejecuta el comando git push –u origin main y espera a que se cargue completamente.

Una vez hecho esto, ve al repositorio de Git que creaste en GitHub y actualiza la página. Verás que todos tus proyectos del repositorio local se han subido al repositorio de GitHub.

A partir de aquí, después de hacer cambios al proyecto, solo tienes que añadir los cambios al staging area ejecutando el comando git add .. Despues, puedes confirmarlos usando el comando git commit –m “(commit name)” y cargarlos al repositorio de Git con el comando git push –u origin main.

Cómo añadir y eliminar un archivo de un repositorio

A continuación te mostraré cómo añadir y eliminar un archivo nuevo del repositorio de GitHub.

Cómo añadir un archivo nuevo a un repositorio existente

Si recapitulamos: añadí un archivo nuevo a mi proyecto con el nombre newfile.txt, el cual añadí a la staging area ejecutando el comando git add newfile.txt, después lo confirmé con el comando git commit –m “new commit” y lo cargué en GitHub de la misma manera que lo hicimos cuando subimos todo el proyecto a GitHub.

Cuando actualicé mi página de GitHub, pude comprobar que el archivo que creé aparecía en GitHub.

Cómo eliminar un archivo de un repositorio existente

Si quiero eliminar/borrar un archivo de mi proyecto en GitHub, puedo hacerlo ejecutando el siguiente comando git rm newfile.txt.

Cuando ejecuto este comando en mi terminal, añado los cambios al staging area usando git add ., y después los confirmo y los cargo en el repositorio de GitHub.

Si actualizo la página de GitHub, veré que el archivo ha sido eliminado de mi repositorio de GitHub. Igualmente, si compruebo mi almacenamiento local, veré que el archivo también ha sido eliminado.

Conclusión

Con este tutorial has aprendido cómo usar los comandos básicos de Git para manejar tus proyectos.

Haz clic aquí para acceder al repositorio de mi proyecto en GitHub para que puedas practicar por tu cuenta.

Espero que este tutorial te haya sido de ayuda.

¡Disfruta programando!

Crear una página web era mucho más sencillo antes. Ahora el diseño de una página web ha de adaptarse no solo a los ordenadores, sino también a las tablets, móviles e incluso los televisores.

Crear una página web con un diseño flexible se llama Diseño Web Responsivo y las consultas de medios CSS son uno de los elementos más importantes del Diseño Responsivo. En este artículo profundizaremos en las consultas de medios y cómo usarlas en CSS.

¿Qué es una consulta de medios?

Una consulta de medios es un componente de CSS3 que hace que una página web adapte su diseño a diferentes tamaños de pantalla y tipos de medios.

Sintaxis

@media media type and (condition: breakpoint) {
  // reglas CSS
}

Podemos establecer diferentes tipos de medios bajo una variedad de condiciones. Si la condición y/o el tipo de medio se cumplen, la regla dentro de la consulta de medios se aplicará.

La sintaxis pueda parecer un poco complicada al principio, así que vamos a explicar cada parte en más detalle...

La regla @ media

Comenzamos definiendo la consulta de medios con la regla @media y después incluimos las reglas CSS entre los paréntesis. La regla @media también se usa para especificar los tipos de medios.

@media () {
  // reglas CSS
}

Paréntesis

Dentro de los paréntesis establecemos una condición. Por ejemplo, quiero aplicar un tamaño de fuente mayor en los teléfonos móviles. Para hacer esto, necesitamos establecer un ancho máximo que compruebe el ancho de un dispositivo:

.texto {
  font-size: 14px;
}

@media (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

El tamaño del texto es de 14px. Sin embargo, como hemos aplicado una consulta de medios, el tamaño del texto será de 16px cuando el ancho máximo del dispositivo sea de 480px o menos.

Importante: añade tus consultas de medios siempre al final de tu documento CSS.

Tipo de medios

Si no establecemos ningún tipo de medio, la regla @media selecciona todos los dispositivos por defecto. Los tipos de medios se aplican justo a continuación de la regla @media. Existen muchos tipos de dispositivos, pero podemos agruparlos en 4 categorías:

• all — para todo los tipos de medios
• print — para impresoras
• screen — para pantallas de ordenador, tablets y smartphones
• speech — para lectores de pantalla que "leen" la página en voz alta

Por ejemplo, si quiero seleccionar solo pantallas, usaré la palabra screen justo después de la regla @media. También tengo que unir ambas reglas con la palabra "and":

@media screen and (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

Breakpoints

El breakpoint es quizás uno de los conceptos que escuches y uses más a menudo. Un breakpoint es esencial a la hora de determinar cuándo cambiar el diseño y adaptar las reglas dentro de las consultas de medios. Volvamos a nuestro ejemplo del principio:

@media (max-width: 480px) {
  .texto {
    font-size: 16px;
  }
}

Aquí el breakpoint es 480px. La consulta de medios sabe cuándo establecer o sobreescribir la nueva clase. Básicamente, si el ancho de un dispositivo es menos de 480px, la clase texto se aplicará, si no, no.

Breakpoints comunes: ¿existe una resolución estándar?

Una de las cuestiones que más se pregunta es “¿Qué breakpoint tengo que usar?”. Existen una gran cantidad de dispositivos en el mercado, con lo que no podemos ni debemos definir breakpoints fijos para cada uno de ellos.

Por ello, no podemos decir que existe una resolución estándar para todos los dispositivos, sino breakpoints de uso común en el día a día de la programación. Si estás utilizando un framework CSS (como Bootstrap, Bulma, etc.) también puedes usar sus breakpoints.

Vamos a ver ahora los breakpoints comunes según el ancho de los dispositivos:

• 320px — 480px: Dispositivos móviles
• 481px — 768px: iPads, tablets
• 769px — 1024px: pantallas pequeñas, ordenadores portátiles
• 1025px — 1200px: pantallas grandes, ordenadores de escritorio
• 1201px y más —  pantallas extra-grandes, televisores

Como menciono anteriormente, estos breakpoints son flexibles, ya que no existe una definición estándar, sino algunos de uso común.

Conclusión

El diseño responsivo es actualmente imprescindible en el mundo del diseño y desarrollo web. Las consultas de medios son una de las partes más importantes para crear diseños responsivos. Espero que mi artículo te ayude a comprender cómo funcionan las consultas de medios.

Si quieres aprender más sobre desarrollo web, suscríbete gratis a mi canal.

¡Gracias por leer mi artículo!

Los métodos incorporados de JavaScript son una gran ayuda a la hora de programar, una vez los hayamos entendido correctamente. Me gustaría explicar tres de ellos en este artículo: Los métodos slice(), splice() y split(). Ya que sus nombres son tan similares, pueden llevar a confusión, incluso entre desarrolladores expertos.

Recomiendo a los estudiantes y desarrolladores junior leer este artículo con atención, porque en las ENTREVISTAS DE TRABAJO se suele preguntar sobre estos tres métodos.

Puedes encontrar un resumen de cada método al final del artículo.

¡Vamos a por ello!

Arreglos de JavaScript

Primeramente, necesitas entender cómo funcionan los arreglos de JavaScript. Como en cualquier otro lenguaje de programación, utilizamos los arreglos de JavaScript para almacenar múltiples datos. Sin embargo, la diferencia en JavaScript es que los arreglos pueden contener diferentes tipos de datos a la vez.

A veces necesitamos realizar alguna tarea en esos arreglos. Para ello usamos los métodos slice() y splice(). Puedes ver debajo cómo declarar un arreglo en JavaScript:

let definicionDeArreglo = [];   // Declaración de arreglo en JS

Vamos a declarar ahora otro arreglo con diferentes tipos de datos. Lo haré con los siguientes ejemplos:

let arreglo = [1, 2, 3, "hola mundo", 4.12, true];

Este uso es válido en JavaScript. Un arreglo con diferentes tipos de datos: cadenas, números y un booleano.

Slice ( )

El método slice() copia una parte de un arreglo y devuelve esa copia como un nuevo arreglo. No cambia el arreglo original.

arreglo.slice(desde, hasta);

• Desde: Corta un arreglo empezando desde el índice de un elemento
• Hasta: Corta un arreglo hasta el índice de otro elemento

Por ejemplo, quiero cortar los tres primeros elementos del arreglo del ejemplo de arriba. Como el índice del primer elemento de un arreglo es 0, comenzaré cortando "desde" 0.

arreglo.slice(0, hasta);

Aquí viene la parte engorrosa. Si quiero cortar los tres primeros elementos, tengo que incluir hasta "hasta" el parámetro 3. El método slice() no incluye este último elemento.

arreglo[0] --> 1              // incluido
arreglo[1] --> 2              // incluido
arreglo[2] --> 3              // incluido
arreglo[3] --> "hello world"  // no incluido

Esto puede llevar a la confusión. Por eso, llamo al segundo parámetro “hasta”.

let nuevoArreglo = arreglo.slice(0, 3);   // Devuelve también un arreglo

Finalmente, asigno el arreglo cortado a la variable nuevoArreglo. Veamos el resultado:

Nota importante: el método Slice( ) se puede usar también con cadenas.

Splice( )

El nombre de esta función es muy parecida a slice(). Esta similitud confunde a los desarrolladores a menudo. El método splice() cambia un arreglo añadiendo o eliminando elementos del mismo. Veamos cómo añadir y eliminar elementos con splice():

Eliminar elementos

Para eliminar elementos necesitamos indicar el índice y el número de elementos a eliminar:

arreglo.splice(índice, número de elementos);

El índice es el punto de comienzo para eliminar elementos. Los elementos que tengan un índice menor que el índice indicado no serán eliminados:

arreglo.splice(2);  // Cualquier elemento a partir del índice 2 será eliminado

Si no definimos el segundo parámetro, cualquier elemento a partir del índice indicado será eliminado del arreglo:

En el segundo ejemplo, indico 1 como segundo parámetro, por lo que los elementos a partir del índice 2 serán eliminados uno a uno cada vez que llamemos el método splice().

arreglo.splice(2, 1);

Después de la primera llamada:

Después de la segunda llamada:

Esto puede seguir así hasta que no haya ningún índice 2.

Añadir elementos

Para añadir elementos, necesitamos indicar el tercer, cuarto, quinto parámetro (depende de cuántos añadamos) en el método splice():

arreglo.splice(índice, número de elementos, elemento, elemento);

Por ejemplo, añado a y b al comienzo del arreglo y no elimino nada:

arreglo.splice(0, 0, 'a', 'b');

Split ( )

Los métodos slice( ) y splice( ) se usan con arreglos. El método split( ) se usa con cadenas. Divide una cadena en subcadenas y los devuelve como un arreglo. Toma 2 parámetros y ambos son opcionales.

cadena.split(separador, límite);

• Separador: Define cómo separar una cadena... con coma, un símbolo, etc.
• Límite: Limita el número de cortes con el número indicado.

El método split() no funciona directamente con los arreglos. Sin embargo, podemos primero convertir los elementos de nuestro arreglo en una cadena y después usar el método split().

Veamos cómo funciona.

Primero convertimos nuestro arreglo en una cadena con el método toString():

let miCadena = arreglo.toString();

A continuación separamos miCadena con comas, lo limitamos a tres subcadenas y lo devolvemos como un arreglo:

let nuevoArreglo = miCadena.split(",", 3);

Como podemos ver, miCadena está separado por comas. Ya que hemos limitado el número de cortes a 3, se devolverán los primeros 3 elementos.

NOTA: Si usamos esto: arreglo.split("");  cada caracter de la cadena se dividirá en subcadenas:

Resumen:

Slice( )

• Copia elementos de un arreglo
• Los devuelve como un arreglo nuevo
• No cambia el arreglo original
• Comienza cortando desde... hasta el índice indicado: arreglo.slice (desde, hasta)
• Slice no incluye el parámetro con el índice “hasta”
• Se puede usar tanto con arreglos como con cadenas

Splice( )

• Sirve para añadir/eliminar elementos de un arreglo
• Devuelve un arreglo con elementos eliminados
• Cambia el arreglo
• Para añadir elementos: arreglo.splice(índice, número de elementos, elemento)
• Para eliminar elementos: arreglo.splice(índice, número de elementos)
• Solo se puede usar con arreglos

Split( )

• Divide una cadena en subcadenas
• Los devuelve en un arreglo
• Toma 2 parámetros, ambos opcionales: cadena.split(separador, límite)
• No modifica la cadena original
• Solo se puede usar con cadenas

Existen muchos otros objetos estándar integrados para arreglos y cadenas de texto, que facilitan la programación en JavaScript.

Si quieres aprender más sobre desarrollo web, ¡sígueme en Youtube!

¡Gracias por leer mi artículo!