DEV Community: Fernando Barrios - jfergt

Usar Docker sin instalar Docker Desktop en Mac

Fernando Barrios - jfergt — Fri, 18 Oct 2024 05:00:43 +0000

Preámbulo

Con los recientes cambios en las licencias de Docker Desktop, muchos desarrolladores y empresas han comenzado a buscar alternativas para manejar contenedores sin incurrir en costos adicionales o restricciones de licencia. Aunque herramientas como Podman o Rancher ofrecen soluciones robustas, a menudo presentan una curva de aprendizaje más pronunciada para quienes están acostumbrados a Docker, o bien requieren de muchas configuraciones para que logren funcionar de la misma manera en la que Docker lo hace. Afortunadamente, es posible utilizar Docker sin depender de Docker Desktop. En este artículo, exploraremos cómo hacerlo de manera efectiva.

Decidí escribir este artículo tras haber pasado seis meses probando Podman y Rancher. Aunque ambas herramientas son poderosas, encontré que trabajar con Docker sin Docker Desktop ofrecía una experiencia más directa para mis necesidades. Sin embargo, me encontré con ciertas limitaciones que quiero abordar a lo largo del artículo.

Instalación

El único requisito previo es Homebrew, que si no lo tienes instalado, puedes encontrar instrucciones en su página aquí.

Para empezar, debemos instalar Docker y el asistente de gestión de credenciales. Este asistente nos permitirá usar el llavero de macOS como almacén de credenciales para repositorios de contenedores remotos en lugar de Docker Desktop.

brew install docker docker-credential-helper

Luego tendremos que actualizar las configuraciones de Docker. Para esto, editaremos el archivo en ~/.docker/config.json con cualquier editor de archivos, por ejemplo, nano. Las claves importantes que debemos actualizar son credsStore y currentContext.

nano ~/.docker/config.json{ "auths": {}, "credsStore": "osxkeychain", "currentContext": "colima"}

Ahora debemos instalar un container runtime, en mi caso opt por Colima

brew install colima

Por último para levantar o detener el servicio, bastar con ejecutar sus respectivos comandos

colima start # Para iniciar el servicio colima stop # Para detener el servicio

Para todos aquellos que les gustan las interfaces gráficas, pueden usar la extensión de Docker para VS Code, la cual lee el currentContext de la configuración que actualizamos y automáticamente se conecta y nos muestra la misma información que tengamos en el Docker Desktop.

Una segunda alternativa, si no quisiéramos usar la extensión de VS Code y tenemos Raycast instalado, es usar su extensión de Docker.

Configuración del socket

Algunas aplicaciones se conectan directamente al socket de Docker, el cual usualmente se encuentra en /var/run/docker.sock. Para estas aplicaciones, lo mejor es crear un enlace simbólico de Colima hacia esa ruta, ejecutando este comando:

sudo ln -s /Users/TU_USUARIO/.colima/default/docker.sock /var/run/docker.sock

Conclusiones

Con estas instrucciones, puedes seguir utilizando Docker sin la necesidad de Docker Desktop, manteniendo as la flexibilidad de tus proyectos y asegurando el cumplimiento de las nuevas polticas de licencias. Al final si lo que buscamos es tener la experiencia ms cercana a Docker, no hay nada ms cercano a eso que usar el mismo CLI de Docker.

Top 10 de certificaciones que todo Developer debería de considerar

Fernando Barrios - jfergt — Fri, 09 Feb 2024 03:25:34 +0000

El año pasado, me enfrenté al desafío de obtener la certificación "Certified Kubernetes Developer CKAD". En mi equipo de trabajo, la demanda de conocimientos en Kubernetes estaba en aumento, y aunque nunca antes había trabajado con esta tecnología, me lancé a la aventura. Hasta ese momento, mi experiencia más compleja se limitaba a dockerizar aplicaciones.

Opté por tomar esta certificación como una oportunidad para sumergirme profundamente en el mundo de Kubernetes. Después de 4 meses de intenso trabajo, completando cursos, realizando simulaciones y sacrificando horas de sueño (lo que generó algunos regaños de mi esposa), logré obtener la certificación en mi primer intento!

Esta entrada en el blog pretende compartir mi experiencia y reflexionar sobre las certificaciones que considero valiosas para los desarrolladores de software. Si bien algunas pueden no ser relevantes para todos los perfiles, estas son las que, en mi opinión, pueden agregar un gran valor a nuestra carrera profesional.

Es importante destacar que las certificaciones no son un indicador absoluto de los conocimientos de una persona, pero desde mi experiencia, han aportado numerosos beneficios:

Validación de conocimientos: Las certificaciones sirven como un respaldo tangible de que poseo un cierto nivel de conocimientos en la materia. Es una forma de demostrar mis habilidades y competencias en un área específica.
Claridad para no expertos: Para aquellos que no están familiarizados con el mundo de la tecnología, las certificaciones proporcionan una comprensión clara de mi experiencia y habilidades como desarrollador. Facilitan la comunicación sobre mi formación y trayectoria profesional.
Diferenciación en el mercado laboral: Tener certificaciones destacadas en mi currículum puede hacer que resalte entre otros candidatos en el mercado laboral. Demuestra un compromiso con el aprendizaje continuo y la mejora profesional.
Profundización en temas específicos: A través de la preparación para las certificaciones, he tenido la oportunidad de profundizar en temas específicos que de otro modo podrían haber quedado fuera de mi radar. Esto me ha permitido adquirir un entendimiento más completo y detallado de ciertos aspectos de la tecnología.
Acceso a nuevos conocimientos: Las certificaciones también han abierto puertas a áreas de conocimiento a las que, por mi carrera profesional, no habría estado expuesto de otra manera. Me han permitido explorar nuevos temas y expandir mi conjunto de habilidades de manera significativa.

10 certificaciones que considero que todo desarrollador debería de considerar

Cloud

Certificación AWS Certified Developer - Associate: Esta certificación valida las habilidades en el desarrollo de aplicaciones en la nube utilizando servicios de Amazon Web Services (AWS).
Certificación Microsoft Certified: Azure Developer Associate: Similar a la certificación de AWS, pero enfocada en el desarrollo de aplicaciones en la nube utilizando la plataforma de Microsoft Azure.
Certificación Google: Professional Cloud Developer: Similar a la certificación de AWS o Azure, pero enfocada en el desarrollo de aplicaciones en la nube utilizando la plataforma de Google Developer Cloud.
CKAD (Certified Kubernetes Application Developer): Esta certificación valida las habilidades en el desarrollo de aplicaciones en contenedores utilizando Kubernetes, un componente fundamental en entornos de nube y despliegue de aplicaciones modernas.

Desarrollo

JSNAD (JavaScript Developer - Professional Certification): Esta certificación se centra en validar habilidades avanzadas en JavaScript, abarcando tanto frontend como backend y cubriendo conceptos esenciales para el desarrollo de aplicaciones web modernas.
JSNSD (JavaScript Developer - Professional Certification): Similar a JSNAD, pero enfocada específicamente en el desarrollo frontend, esta certificación valida habilidades en HTML, CSS, JavaScript y frameworks frontend populares.

Gestión de proyectos

CSM (Certified ScrumMaster): Esta certificación valida las habilidades en Scrum y la capacidad para servir como líder de equipo en un entorno ágil. Es una certificación fundamental para aquellos que desean trabajar en equipos Scrum y liderar iniciativas ágiles.
CSD (Certified Scrum Developer) y A-CSD: La certificación CSD valida las habilidades técnicas de un desarrollador en un entorno Scrum. Se centra en prácticas de desarrollo ágil, colaboración efectiva en equipo y entrega continua de software de alta calidad dentro de un marco de trabajo Scrum. Respecto a la de A-CSD, esta certificación es una extensión del CSD y valida habilidades técnicas adicionales y más avanzadas en el contexto de Scrum. Se centra en técnicas de desarrollo avanzadas, diseño de software sólido, refactorización y entrega de software de alta calidad en equipos Scrum.
Team Kanban Practitioner (TKP): Valida la comprensión y aplicación práctica de los principios y prácticas de Kanban en equipos de trabajo. Esta certificación se centra en cómo visualizar el trabajo, limitar el trabajo en curso (WIP), gestionar el flujo de trabajo y mejorar continuamente el proceso de entrega.

Control de calidad

Certified Tester Foundation Level (CTFL): Esta certificación es fundamental en el campo de la prueba de software, cubriendo conceptos básicos de pruebas, técnicas de diseño de pruebas y gestión de pruebas, lo cual es esencial para garantizar la calidad de las aplicaciones web.

Como habrás notado, no he dejado ninguna que esté relacionada a la seguridad, cuento con poca información en ese tema, por lo que acepto sugerencias :)

Comprendiendo "Syntactic Sugar" - Una guía simple

Fernando Barrios - jfergt — Wed, 07 Jun 2023 18:24:14 +0000

TLDR

Comprendiendo "Syntactic Sugar" es una guía simple que explica cómo ciertas características en JavaScript, como funciones de flecha y operadores de propagación, hacen que el código sea más legible y conciso sin agregar nuevas funcionalidades. Estas características mejoran la legibilidad y expresividad del código, lo que facilita el desarrollo.

Introducción al "Syntactic Sugar"

El "syntactic sugar" en JavaScript es como un dulce que hace que nuestro código sea más fácil de leer y entender. 🍬

Cuando hablamos de syntactic sugar, nos referimos a características del lenguaje que no añaden nuevas funcionalidades, pero nos permiten escribir código de una manera más sencilla y concisa. Es como si le pusieran un poco de azúcar al lenguaje para hacerlo más agradable y legible. 🎉

Propósito y beneficios

El propósito principal de este azúcar sintáctico es mejorar la legibilidad y la expresividad del código. Al utilizar una sintaxis más clara y concisa, nuestro código se vuelve más fácil de entender, lo que resulta en un desarrollo más eficiente y rápido. 💻

Algunos ejemplos de syntactic sugar en JavaScript son las funciones de flecha (=>), el operador de propagación (...), el operador de desestructuración y muchos otros. Estas características nos permiten escribir código de forma más breve y elegante. 😍💻

Ejemplos comunes

// 1. Arrow functions
const add = (a, b) => a + b;

// 2. Template literals
const greeting = `Hello, ${name}!`;

// 3. Object property shorthand
const x = 10, y = 20;
const point = { x, y };

// 4. Destructuring assignment
const { firstName, lastName } = person;

// 5. Default parameters
function multiply(a, b = 1) {
  return a * b;
}

// 6. Spread syntax
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

// 7. Rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

No es genial? 😄

Conclusiones

Recuerda utilizar el syntactic sugar con moderación y mantener la consistencia en tu código para evitar confusiones. Además, documentar y comentar tu código siempre es una buena práctica para que otros desarrolladores puedan entenderlo fácilmente. 📝💡

Ah, y no te olvides de mantener tu conocimiento actualizado sobre las novedades de JavaScript! Siempre hay nuevas formas de endulzar nuestro código. 🍭🚀

¡Feliz programación! 💻💖

Patrón de diseño Higher-Order Component (HOC) en React y JavaScript

Fernando Barrios - jfergt — Thu, 16 Mar 2023 16:55:41 +0000

Introducción

El patrón de diseño Higher-Order Component (HOC) es un patrón avanzado en React que se utiliza para reutilizar la lógica de los componentes. Un HOC es una función que toma un componente y devuelve otro componente con funcionalidades adicionales o modificadas. En este artículo, exploraremos el patrón de diseño HOC con ejemplos en React y JavaScript.

HOC en detalle

La idea detrás de este patrón es aprovechar la composición en lugar de la herencia para extender la funcionalidad de los componentes de React. Entonces con la ayuda de la composición podemos tomar un componente, añadirle funcionalidades y luego devolver el componente.

Ejemplo básico de HOC en JavaScript

Antes de adentrarnos en React, veamos un ejemplo básico de HOC en JavaScript:

function withLogging(fn) {
  return function (...args) {
    console.log(`Llamando a la funcin: ${fn.name}`, args);
    const result = fn(...args);
    console.log(`Resultado: ${result}`);
    return result;
  };
}

function suma(a, b) {
  return a + b;
}

const sumaConLogging = withLogging(suma);
const resultado = sumaConLogging(3, 4); // Llamando a la funcin: suma [3, 4]
                                        // Resultado: 7

En este ejemplo, withLogging es un HOC que toma una función fn y devuelve una nueva función que registra el nombre de la función, sus argumentos y su resultado antes de llamarla.

Ejemplo de HOC en React

Ahora, veamos un ejemplo de HOC en React. Supongamos que tenemos dos componentes funcionales: ComponenteA y ComponenteB. Queremos agregar la funcionalidad de contar el número de veces que se hace clic en un botón en ambos componentes. En lugar de agregar la lógica de conteo en cada componente individualmente, podemos crear un HOC que envuelva ambos componentes y les proporcione la funcionalidad de conteo.

Aquí está el código:

import React, { useState } from 'react';

// HOC que agrega la funcionalidad de conteo
const withCounter = (WrappedComponent) => {
  const WithCounter = () => {
    const [count, setCount] = useState(0);

    const handleClick = () => {
      setCount(count + 1);
    };

    return <WrappedComponent handleClick={handleClick} count={count} />;
  };

  return WithCounter;
};

// ComponenteA sin la funcionalidad de conteo
const ComponenteA = ({ handleClick }) => {
  return <button onClick={handleClick}>Componente A</button>;
};

// ComponenteB sin la funcionalidad de conteo
const ComponenteB = ({ handleClick }) => {
  return <button onClick={handleClick}>Componente B</button>;
};

// Envolver ComponenteA y ComponenteB con el HOC
const ComponenteAConConteo = withCounter(ComponenteA);
const ComponenteBConConteo = withCounter(ComponenteB);

// Renderizar ComponenteA y ComponenteB con la funcionalidad de conteo agregada
const App = () => {
  return (
    <>
      <ComponenteAConConteo />
      <ComponenteBConConteo />
    </>
  );
};

export default App;

En este ejemplo, creamos un HOC llamado withCounter que acepta un componente como argumento y devuelve un nuevo componente llamado WithCounter. WithCounter tiene su propio estado para contar el número de clics y una función handleClick que actualiza el estado cada vez que se hace clic en el botón.

Luego, envolvemos los componentes ComponenteA y ComponenteB con el HOC withCounter para agregarles la funcionalidad de conteo. Finalmente, renderizamos los componentes envueltos ComponenteAConConteo y ComponenteBConConteo en nuestra aplicación principal.

De esta manera, logramos reutilizar la funcionalidad de conteo en múltiples componentes y mantener nuestro código más limpio y modular.

Juego de Tic Tac Toe en HTML con ChatGPT en 2 minutos

Fernando Barrios - jfergt — Fri, 03 Mar 2023 17:10:13 +0000

Considero que muchas personas en el mundo de la programación han aprendido bastante gracias a videos, blogs, libros, y stackoverflow etc... donde se pueden ver tutoriales o extractos de código que nos ayudan a completar algún software que estamos desarrollando para la Universidad o el trabajo.

¿pero y si existiera una herramienta a la que le pudieramos pedir específicamente un bloque de código, una función o inclusive un programa completo?

En este artículo veremos como crear el juego de "Tic Tac Toe" en HTML, CSS y JavaScript utilizando ChatGPT. El propósito de este artículo es que conozcamos un poco más acerca de ChatGPT y entender como gracias a esta tecnología podemos apoyarnos para mejorar nuestras habilidades de programación.

¿Qué es ChatGPT?

ChatGPT es un modelo de aprendizaje automático que ha sido entrenado en grandes cantidades de datos de texto de Internet, lo que le permite generar respuestas coherentes y contextualmente apropiadas a preguntas o declaraciones abiertas.

Los datos de entrenamiento utilizados para entrenar ChatGPT pueden haber incluido texto de una amplia gama de fuentes, incluidos los repositorios de código abierto en Github u otras compañías.

En general, ChatGPT es un modelo de lenguaje poderoso que está cambiando la forma en que interactuamos con las máquinas y haciendo que el procesamiento del lenguaje natural sea más accesible para los desarrolladores y las empresas.

Escribiendo el juego

Basta con acceder a la herramienta de ChatGPT y escribirle que necesitamos que nos genere el juego de Tic Tac Toe en Javascript, y este es el resultado:

Acá dejaré el cada sección de código según el nombre del archivo y comentado para que podamos entender que ha sido lo que generó:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <!-- Importa el archivo de estilos de CSS -->
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <!-- Escribe una tabla con 3 filas y 3 columnas. Cada celda debe tener un id que vaya de 0 a 8.
        Por ejemplo, la celda de la esquina superior izquierda debe tener el id 0,
        la celda de la esquina superior derecha debe tener el id 2, y así sucesivamente. -->
    <table>
      <!-- TR es de table row (fila de tabla) -->
      <tr>
        <td id="0"></td>
        <!-- TD es de table data (datos de tabla) -->
        <td id="1"></td>
        <td id="2"></td>
      </tr>
      <tr>
        <td id="3"></td>
        <td id="4"></td>
        <td id="5"></td>
      </tr>
      <tr>
        <td id="6"></td>
        <td id="7"></td>
        <td id="8"></td>
      </tr>
    </table>

    <!-- Importa el archivo de JavaScript -->
    <script src="script.js"></script>
  </body>
</html>

CSS

/* Usamos el identificador de la tabla para seleccionarla y aplicarle sus estilos. */
table {
  border-collapse: collapse; /*  border-collapse nos permite que las celdas de la tabla se vean separadas. */
}

/* Usamos el identificador de td para seleccionarla y aplicarle sus estilos. */
td {
  width: 50px; /*  width nos permite darle un ancho a las celdas de la tabla. */
  height: 50px; /*  height nos permite darle un alto a las celdas de la tabla. */
  text-align: center; /*  text-align nos permite centrar el texto de las celdas de la tabla. */
  vertical-align: middle; /*  vertical-align nos permite centrar el texto de las celdas de la tabla. */
  border: 1px solid black; /*  border nos permite darle un borde a las celdas de la tabla, el grosor es de 1px sólido y color negro. */
  font-size: 36px; /*  font-size nos permite darle un tamaño a la fuente de las celdas de la tabla. */
}

/* Usamos el identificador de la clase X para seleccionarla y aplicarle sus estilos. */
.X {
  color: red; /*  color nos permite darle un color rojo. */
}

/* Usamos el identificador de la clase O para seleccionarla y aplicarle sus estilos. */
.O {
  color: blue; /*  color nos permite darle un color azul. */
}

JavaScript

let currentPlayer = "X"; // currentPlayer es inicializado como "X" para que el primer jugador sea "X"
let cells = document.querySelectorAll("td"); // Selecciona todos los elementos "td" y los almacena en la variable "cells"

cells.forEach(function (cell) {
  // Itera sobre cada elemento "td" y agrega un evento "click" a cada uno
  cell.addEventListener("click", function () {
    // Cuando se hace click en un elemento "td", se ejecuta la función anónima
    if (cell.textContent === "") {
      // Si el elemento "td" no tiene texto, se agrega el texto del jugador actual
      cell.textContent = currentPlayer; // Agrega el texto del jugador actual al elemento "td"
      cell.classList.add(currentPlayer); // Agrega la clase del jugador actual al elemento "td"
      if (checkWin()) {
        // Si checkWin() retorna true, se muestra un mensaje de victoria y se reinicia el juego
        alert(currentPlayer + " wins!"); // Muestra un mensaje de victoria
        reset(); // Reinicia el juego
      } else if (checkDraw()) {
        // Si checkDraw() retorna true, se muestra un mensaje de empate y se reinicia el juego
        alert("It's a draw!"); // Muestra un mensaje de empate
        reset(); // Reinicia el juego
      } else {
        // Si no se cumple ninguna de las condiciones anteriores, se cambia el jugador actual
        currentPlayer = currentPlayer === "X" ? "O" : "X"; // Si el jugador actual es "X", se cambia a "O", de lo contrario, se cambia a "X"
      }
    }
  });
});

// checkWin() retorna true si el jugador actual tiene 3 celdas en línea
function checkWin() {
  // win es inicializado como false
  let win = false;
  // winningCombos contiene todas las combinaciones de celdas que pueden ganar
  let winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  // Itera sobre cada combinación de celdas
  for (let combo of winningCombos) {
    // Si el contenido de la celda en la posición 0, 1 y 2 de la combinación actual es igual al jugador actual,
    // se retorna true
    if (
      cells[combo[0]].textContent === currentPlayer &&
      cells[combo[1]].textContent === currentPlayer &&
      cells[combo[2]].textContent === currentPlayer
    ) {
      win = true;
      break;
    }
  }

  // Retorna true si el jugador actual tiene 3 celdas en línea
  return win;
}

// checkDraw() retorna true si todas las celdas están llenas
function checkDraw() {
  let draw = true;

  // Itera sobre cada celda
  for (let cell of cells) {
    // Si la celda actual está vacía, se retorna false
    if (cell.textContent === "") {
      draw = false;
      break;
    }
  }

  return draw;
}

// reset() reinicia el juego
function reset() {
  // Itera sobre cada celda
  cells.forEach(function (cell) {
    // Elimina el texto de la celda actual y elimina la clase "X" o "O"
    cell.textContent = "";
    cell.classList.remove("X", "O");
  });
  // Reinicia el jugador actual
  currentPlayer = "X";
}

Y acá el juego en acción

Scrum vs Kanban: Mi opinión como dev después de más de 8 años de trabajo.

Fernando Barrios - jfergt — Thu, 09 Feb 2023 14:00:39 +0000

Antes de adentrarnos en las principales diferencias, es conveniente platicar un poco sobre cada una.

Scrum

Scrum es un marco ágil para gestionar y completar proyectos complejos. Originalmente se desarrolló para el desarrollo de software, pero ahora se usa ampliamente en una variedad de industrias, que incluyen marketing, finanzas y atención médica.

Scrum se basa en los principios de transparencia, inspección y adaptación. Proporciona un proceso estructurado y repetible para entregar el trabajo, con roles, eventos y artefactos definidos.

Scrum enfatiza la entrega de un incremento de producto entregable al final de cada sprint, para que el equipo esté continuamente entregando valor al cliente. También fomenta la mejora continua, con retrospectivas periódicas y la capacidad de ajustar el objetivo del sprint a mitad del sprint, si es necesario.

Scrum es ideal para proyectos complejos que requieren una estrecha colaboración, equipos multifuncionales y comentarios regulares de los clientes y las partes interesadas.

Kanban

Kanban es un sistema visual para administrar y optimizar flujos de trabajo, desarrollado originalmente en la industria manufacturera. Ahora se usa ampliamente en el desarrollo de software y otros campos para ayudar a los equipos a entregar elementos de trabajo de manera más efectiva y eficiente.

En Kanban, los elementos de trabajo se representan como tarjetas en un tablero visual y cada tarjeta se mueve de izquierda a derecha a través de una serie de columnas, que representan diferentes etapas del flujo de trabajo. Los equipos usan límites WIP (trabajo en curso) para administrar el flujo y garantizar que los elementos de trabajo se completen de la manera más rápida y eficiente posible.

Kanban enfatiza la mejora continua y alienta a los equipos a realizar cambios en el proceso según sea necesario. No tiene time boxes, sprints o roles definidos, lo que lo convierte en un enfoque más flexible que se puede adaptar a las necesidades de diferentes equipos y proyectos.

Principales diferencias

Estas son las diferencias clave entre las metodologías Scrum y Kanban:

Proceso: Scrum es un proceso estructurado e iterativo con roles, ceremonias y cuadros de tiempo definidos. Kanban es un enfoque más flexible basado en el flujo sin cuadros de tiempo ni roles definidos.
Elementos de trabajo: Scrum utiliza "backlogs" tanto para producto como para el sprint para administrar los elementos de trabajo, mientras que Kanban utiliza un tablero visual para realizar un seguimiento de los elementos de trabajo a través de diferentes etapas del proceso.
Tiempo de entrega (Lead time): Scrum se enfoca en entregar un incremento completo del producto al final de cada sprint, mientras que Kanban se enfoca en brindar pequeñas mejoras incrementales tan pronto como estén listas.
Límites de trabajo en progreso (WIP): Scrum establece límites estrictos sobre la cantidad de trabajo que puede estar en progreso en un momento dado, mientras que Kanban tiene límites WIP más relajados y se enfoca en administrar el flujo.
Gestión de cambios (Change management): Scrum tiene procesos definidos para introducir cambios en el product backlog, mientras que Kanban tiene un enfoque más flexible para cambiar y fomenta la mejora continua.
Planificación: Scrum tiene un proceso definido de planificación de sprint, mientras que Kanban no tiene eventos de planificación formales y se enfoca en entregar valor lo antes posible.
Estructura del equipo: Scrum requiere un equipo multifuncional con roles definidos, mientras que Kanban tiene una estructura de equipo más flexible y puede ser utilizado por equipos de cualquier tamaño y composición.
Enfoque: Scrum se enfoca en entregar un incremento de producto entregable al final de cada sprint, mientras que Kanban se enfoca en la entrega continua y en mejorar el flujo de valor para los clientes.
Releases en producción: Aunque ninguno define en qué momentos se debe desplegar nuevas funcionalidades a ambientes productivos, es común que en Scrum se haga al final de cada sprint, mientras que en Kanban se hace en cualquier momento siempre y cuando la tarea haya llegado al final de su proceso.

Beneficios de Kanban sobre scrum

Flexibilidad: Kanban es una metodología más flexible, que permite a los equipos adaptarse a los cambios en los requisitos y priorizar las tareas según sea necesario.
Visualización: el tablero visual utilizado en Kanban proporciona una descripción general fácil de entender de los elementos de trabajo y su progreso, lo que facilita la identificación de cuellos de botella y la gestión del flujo de trabajo.
Mejora continua: Kanban pone un fuerte énfasis en la mejora continua, lo que facilita la identificación de áreas de mejora y la realización de cambios en el proceso según sea necesario.
Sin casillas de tiempo (No time boxes): Kanban no tiene casillas de tiempo (time boxes), por lo que no hay presión para completar una cierta cantidad de trabajo dentro de un marco de tiempo específico.
Sin planificación de Sprint: Kanban no tiene eventos formales de planificación de Sprint, lo que lo convierte en un enfoque más ligero que puede ser menos perjudicial para el trabajo del equipo.
Menores gastos generales: Kanban tiene menos gastos generales en comparación con Scrum, con menos reuniones, ceremonias y requisitos de documentación.
Riesgo reducido: Kanban reduce el riesgo de desarrollar características que no son necesarias o que no satisfacen las necesidades del cliente, ya que permite una priorización más flexible de los elementos de trabajo.
Mejor visibilidad: el tablero visual utilizado en Kanban proporciona una mayor visibilidad del progreso de los elementos de trabajo y el estado general del proyecto, lo que facilita que las partes interesadas entiendan lo que está sucediendo y qué esperar.

Beneficios de Scrum sobre Kanban

Proceso estructurado: Scrum proporciona un proceso estructurado y repetible para entregar valor, que puede ayudar a los equipos a ser más eficientes y consistentes en su trabajo.
Roles claros: Scrum define roles claros para los miembros del equipo, lo que ayuda a garantizar que todos conozcan sus responsabilidades y cómo encajan en el proceso general.
Cajas de tiempo (Time boxes): Scrum utiliza cajas de tiempo (sprints) para enfocar los esfuerzos del equipo y garantizar que el trabajo se complete de manera oportuna.
Planificación de Sprint: Scrum tiene un proceso de planificación de Sprint definido que ayuda al equipo a comprender qué trabajo se necesita y cómo priorizarlo.
Revisiones periódicas: Scrum incluye retrospectivas periódicas de sprint que permiten al equipo reflexionar sobre lo que salió bien y lo que se puede mejorar.
Equipos multifuncionales: Scrum requiere equipos multifuncionales, lo que puede conducir a una mayor colaboración, intercambio de conocimientos y una mejor alineación en toda la organización.
Incrementos de productos potencialmente entregables: Scrum se enfoca en entregar un incremento de productos que se pueden entregar al final de cada sprint, lo que ayuda a garantizar que el equipo entregue valor al cliente de manera regular.
Mejora continua: Scrum también hace hincapié en la mejora continua, lo que facilita la identificación de áreas de mejora y la realización de cambios en el proceso a lo largo del tiempo.
Mejor gestión de riesgos: Scrum ayuda a gestionar los riesgos al garantizar que el equipo esté trabajando primero en las tareas más importantes y al permitir que el equipo se adapte a los cambios en los requisitos y prioridades durante cada sprint.

Pensamientos finales

Realmente no existe una metodología ganadora, es importante entender las principales diferencias y beneficios de una metodología sobre la otra, luego tomarse el tiempo necesario para evaluar nuestras necesidades e implementar la metodología que más nos conviene.

En mi experiencia he trabajado en empresas que tienen ambas metodologías implementadas, y muchas veces utilizan Scrum cuando son proyectos completamente nuevos y Kanban en proyectos que están en modo "mantenimiento".

Sin embargo, no es una regla que esa deba ser la implementación, como he mencionado, es importante entender las necesidades que tenemos en nuestra empresa, nuestros clientes (internos o externos), nuestras capacidades y recursos con los que contamos.

Los 10 selectores de CSS que debes conocer

Fernando Barrios - jfergt — Wed, 01 Feb 2023 18:00:39 +0000

Los selectores de CSS se utilizan para seleccionar y diseñar elementos HTML en una página web. Son la piedra angular de CSS y son esenciales para crear páginas web dinámicas y visualmente atractivas. Hay numerosos selectores de CSS disponibles, pero los siguientes 10 son los ms utilizados:

Selector de elementos

El selector de elementos selecciona elementos en función de su nombre de etiqueta. Por ejemplo, para añadir estilos a todos los elementos h1, usara el siguiente código CSS:

h1 {
    color: blue;
}

Selector de clase

El selector de clase selecciona elementos en función de su atributo de clase. Las clases se indican con un punto (.) en el código CSS, seguido del nombre de la clase. Por ejemplo, para añadir estilos a todos los elementos con la clase " highlight", usara el siguiente código CSS:

.highlight {
    background-color: yellow;
}

Selector de ID

El selector de ID selecciona elementos en función de su atributo de ID. Los ID se indican con un hash (#) en el código CSS, seguido del nombre del ID. Los ID son exclusivos de una página y solo se pueden usar una vez. Por ejemplo, para añadir estilos a el elemento con el ID " header", usara el siguiente código CSS:

#header {
    background-color: gray;
}

Selector universal

El selector universal selecciona todos los elementos de una página. Se indica con un asterisco (*) en el código CSS. Por ejemplo, para añadir estilos a todos los elementos de una página con la fuente "Arial", usara el siguiente código CSS:

* {
    font-family: Arial;
}

Selector de atributos

El selector de atributos selecciona elementos en función de sus atributos y valores de atributos. Por ejemplo, para añadir estilos a todos los elementos "input" con un atributo " type" igual a " send", usara el siguiente código CSS:

input[type="send"] {
    background-color: green;
}

Selector de hermanos adyacentes

El selector de hermanos adyacentes selecciona un elemento que está directamente después de otro elemento. El selector se indica con un signo ms (+) en el código CSS. Por ejemplo, para añadir estilos a un elemento de tipo párrafo que esta inmediatamente después de un elemento h2, usara el siguiente código CSS:

h2 + p {
    font-size: 18px;
}

Selector de descendientes

El selector de descendientes (sin importar el nivel de descendencia) selecciona elementos que son descendientes de un elemento especificado. Los descendientes son elementos que están anidados dentro de otro elemento. Por ejemplo, para añadir estilos a todos los elementos de "span" dentro de un párrafo, usara el siguiente código CSS:

p span {
    color: red;
}

Selector de niños (child)

El selector de niños (child) selecciona elementos que son descendientes directos de un elemento específico. Los elementos secundarios son elementos que están anidados directamente dentro de otro elemento. Por ejemplo, para añadir estilos solo a los elementos de la lista de primer nivel dentro de una lista desordenada, usara el siguiente código CSS:

ul > li {
    background-color: lightblue;
}

Selector de pseudoclase

El selector de pseudoclase selecciona elementos en función de su estado o ubicación. Por ejemplo, para añadir estilos a todos los enlaces que han sido visitados, usara el siguiente código CSS:

a:visited {
    color: purple;
}

Selector de pseudoelementos

El selector de pseudoelementos selecciona una parte específica de un elemento. Por ejemplo, para aplicar estilo a la primera letra de un párrafo, usara el siguiente código CSS:

p::first-letter {
    font-size: 36px;
}

En conclusión, estos 10 selectores de CSS son los ms utilizados y forman la base para diseñar páginas web. Comprender y dominar estos selectores es un paso esencial para convertirse en un desarrollador web experto.

Top 10 de las mejores características de ES6

Fernando Barrios - jfergt — Sun, 29 Jan 2023 23:24:52 +0000

ECMAScript 6, también conocido como ECMAScript 2015, fue una actualización importante del lenguaje JavaScript y trajo muchas funciones y mejoras nuevas. Estas diez características son algunas de las adiciones más utilizadas e importantes al lenguaje.

1. Let y Const: La introducción de variables de ámbito de bloque.

En JavaScript, una variable let es una variable de ámbito de bloque declarada con la palabra clave let.

La principal diferencia entre var y let es el ámbito en el que se declaran. Las variables declaradas con var tienen un ámbito de función, lo que significa que son accesibles dentro de toda la función en la que se declaran. Por otro lado, las variables declaradas con let tienen alcance de bloque, lo que significa que solo son accesibles dentro del bloque en el que se declaran.

He aquí un ejemplo para demostrar la diferencia:

function example() {
  if (true) {
    let x = 10;
    var y = 20;
  }
  console.log(x); // ReferenceError: x is not defined
  console.log(y); // Output: 20
}

example();

En este ejemplo, la variable let x solo es accesible dentro del bloque en el que se declara (la declaración if), mientras que la variable var y es accesible a lo largo de toda la función. Intentar acceder a x fuera de su bloque dar como resultado un error de referencia ReferenceError.

2. Funciones de flechas: sintaxis abreviada para crear funciones.

Las funciones de flecha, también conocidas como fat arrow functions, son una sintaxis abreviada para definir funciones en JavaScript.

Las funciones de flecha tienen la siguiente sintaxis:

// Basic arrow function with one argument and one statement
const square = (x) => x * x;
console.log(square(3)); // Output: 9

// Arrow function with multiple arguments and multiple statements
const multiply = (x, y) => {
  const result = x * y;
  return result;
};
console.log(multiply(3, 4)); // Output: 12

Las funciones de flecha tienen una serie de beneficios, que incluyen:

Sintaxis más corta: las funciones de flecha son más cortas y fáciles de leer en comparación con las expresiones de funciones tradicionales.
Retorno implícito: si una función de flecha tiene una sola expresión, el valor de retorno se devuelve implícitamente. No es necesario incluir la palabra clave de retorno.
Lexical this: las funciones de flecha heredan el valor de this del contexto que las rodea, lo que las hace ideales para usar en devoluciones de llamada y controladores de eventos.
No se pueden usar como constructores: las funciones de flecha no se pueden usar con el operador new para crear objetos, lo que ayuda a evitar algunos errores comunes.

En general, las funciones de flecha son una característica poderosa y conveniente de JavaScript y se usan ampliamente en el código moderno.

3. Template literals: interpolación de cadenas y cadenas multilínea.

Brindan una forma más conveniente de crear cadenas que incluyen contenido dinámico.

Los literales de plantilla usan acentos graves () en lugar de comillas simples o dobles para definir literales de cadena. Las expresiones se pueden incluir dentro de un literal de plantilla utilizando la sintaxis ${expresion}.

Aquí hay un ejemplo del uso de literales de plantilla:

const name = 'John';
const message = `Hello, ${name}!`;
console.log(message); // Output: Hello, John!

También admiten cadenas de varias líneas, lo que puede ser til para crear cadenas más complejas:

const multiLine = `This is a
multiline string.`;
console.log(multiLine);

Salida:

This is a
multiline string.

4. Desestructuración: extracción de valores de matrices u objetos.

La desestructuración en JavaScript es una función que le permite extraer valores de matrices u objetos y asignarlos a variables. Esto proporciona una forma conveniente y eficiente de desempaquetar valores de matrices y objetos, lo que facilita el trabajo con datos de manera estructurada.

Aquí hay un ejemplo de desestructuración de una matriz:

const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first, second, third); // Output: 1 2 3

Aquí hay un ejemplo de desestructuración de un objeto:

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: John 30

La desestructuración también se puede utilizar para extraer valores de matrices y objetos anidados:

const data = {
  person: { name: 'John', age: 30 },
  numbers: [1, 2, 3]
};
const { person: { name }, numbers: [first, second, third] } = data;
console.log(name, first, second, third); // Output: John 1 2 3

5. Parámetros predeterminados: especificación de valores predeterminados para los parámetros de función.

Los parámetros predeterminados son una característica de JavaScript que le permite especificar valores predeterminados para los parámetros de la función. Si se llama a una función sin un argumento para un parámetro dado, se usar el valor predeterminado en su lugar. Esto puede ser til para proporcionar un comportamiento predeterminado para parámetros opcionales y evitar errores causados por argumentos faltantes.

Este es un ejemplo del uso de parámetro predeterminados:

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, Guest!
greet('John'); // Output: Hello, John!

En el ejemplo anterior, si se llama a saludar sin un argumento, se usar el valor predeterminado 'Invitado' para el parámetro de nombre. Si se proporciona un argumento, se utilizar en lugar del valor predeterminado.

Los parámetros predeterminados se pueden usar con cualquier tipo de valor, incluidos números, cadenas, matrices y objetos. También pueden ser expresiones o el resultado de una llamada de función.

function calculateSum(a = 1, b = 2) {
  return a + b;
}
console.log(calculateSum()); // Output: 3
console.log(calculateSum(3, 4)); // Output: 7

Los parámetros predeterminados son una característica til en JavaScript, que le permite proporcionar un comportamiento predeterminado para parámetros opcionales y evitar errores causados por argumentos faltantes.

6. Operadores Rest y Spread: Combinando arrays o separándolos.

El operador rest y el operador de spread son dos funciones que se usan para manejar argumentos de una función y manipulación de matrices/objetos.

El operador rest (...) le permite representar un número indefinido de argumentos como una matriz. Se usa en declaraciones de funciones para capturar todos los argumentos pasados a la función, excluyendo los parámetros con nombre.

Aquí hay un ejemplo del uso del operador rest:

function sum(...numbers) {
  return numbers.reduce((total, value) => total + value, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

En el ejemplo anterior, el operador rest ...numbers recopila todos los argumentos pasados a la función de suma y los asigna a una matriz de números.

El operador de propagación (...) le permite distribuir los elementos de una matriz o un objeto en una nueva matriz u objeto. También se puede usar para concatenar arreglos o pasar elementos individuales de un arreglo como argumentos separados a una función.

Aquí hay un ejemplo del uso del operador de propagación para concatenar matrices:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenated = [...array1, ...array2];
console.log(concatenated); // Output: [1, 2, 3, 4, 5, 6]

En el ejemplo anterior, el operador de propagación ...array1 y ...array2 distribuyen los elementos de array1 y array2 en una nueva matriz concatenada.

Los operadores rest y spread brindan una manera conveniente y concisa de manejar argumentos de funciones y manipulación de matrices/objetos en JavaScript, y se usan ampliamente en el código moderno.

7. Clases: un azúcar sintáctico para la programación orientada a objetos.

Las clases le permiten definir la estructura de un objeto, incluidas sus propiedades y métodos, y crear varias instancias del mismo objeto con un comportamiento similar.

Aquí hay un ejemplo del uso de una clase en JavaScript:

class User {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const john = new User('John');
john.sayHello(); // Output: Hello, my name is John
const jane = new User('Jane');
jane.sayHello(); // Output: Hello, my name is Jane

En el ejemplo anterior, definimos una clase User con un método constructor que establece la propiedad de name de una instancia y un método sayHello que genera un mensaje de saludo. Luego creamos dos instancias de la clase User, john y jane , y llamamos a sus respectivos métodos sayHello.

Las clases en JavaScript también admiten la herencia, lo que le permite crear una nueva clase basada en una clase existente, con la capacidad de sobreescribir o ampliar sus propiedades y métodos.

class Admin extends User {
  constructor(name, role) {
    super(name);
    this.role = role;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am an ${this.role}`);
  }
}

const admin = new Admin('Admin', 'administrator');
admin.sayHello(); // Output: Hello, my name is Admin and I am an administrator

En el ejemplo anterior, definimos una clase Admin que amplía la clase User y agrega una propiedad de rol y una nueva implementación del método sayHello. Luego creamos una instancia de la clase Admin, admin , y llamamos a su método sayHello.

Las clases son una función poderosa y flexible en JavaScript, que le permite definir la estructura y el comportamiento de los objetos y admitir la herencia y los patrones de programación orientados a objetos.

8. Módulos: forma estándar de organizar el código en unidades reutilizables.

Los módulos en JavaScript son una forma de organizar y reutilizar el código encapsulándolo en unidades reutilizables que se pueden importar y usar en otras partes de una aplicación. Un módulo puede contener variables, funciones, clases y otro código, y puede exponer una interfaz al resto de la aplicación que especifica qué partes del módulo son públicas y accesibles para otro código.

Hay dos formas principales de usar módulos en JavaScript:

Módulos CommonJS (utilizados en Node.js): un módulo en CommonJS se define como un archivo único que exporta uno o más valores y se puede importar a otros archivos en la aplicación. Las exportaciones son accesibles a otros archivos usando la función require. Aquí hay un ejemplo del uso de módulos CommonJS en Node.js:
Módulos ES6 (compatibles con navegadores modernos y con herramientas como Babel): un módulo en ES6 se define como un archivo único que exporta uno o más valores y se puede importar a otros archivos en la aplicación. Las exportaciones son accesibles a otros archivos utilizando las declaraciones de import y export.

9. Map and Set: Estructuras de datos mejoradas para almacenar colecciones.

Map: Es una colección de pares clave-valor. Las claves pueden tener cualquier valor (objetos, primitivas) y no tienen que ser únicas. Los valores en un Map se pueden acceder, agregar o modificar usando las claves.

let myMap = new Map();

// Añadiendo pares de clave-valor al mapa
myMap.set('name', 'John');
myMap.set('age', 30);
myMap.set('city', 'New York');

// Obteniendo los valores del mapa
console.log(myMap.get('name')); // Output: John
console.log(myMap.get('age')); // Output: 30

// Revisando el tamaño del map
console.log(myMap.size); // Output: 3

// Revisar si existe una clave dentro del mapa
console.log(myMap.has('name')); // Output: true

// Eliminando una clave-valor del mapa
myMap.delete('city');
console.log(myMap.has('city')); // Output: false

Set: Es una colección de valores únicos. Los valores pueden ser de cualquier tipo y no tienen que ser del mismo tipo. Le permite almacenar valores únicos en una colección desordenada y proporciona métodos para manipular los valores.

let mySet = new Set();

// Añadiendo valores al Set
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(2); // Este valor no se aade debido a que Set no soporta duplicados

// Revisando el tamaño del Set
console.log(mySet.size); // Output: 3

// Revisando si un valor esta presente en el Set
console.log(mySet.has(2)); // Output: true

// Removiendo un valor del Set
mySet.delete(1);
console.log(mySet.has(1)); // Output: false

// Iterando sobre los valores del Set
for (let value of mySet) {
  console.log(value);
}
// Output:
// 2
// 3

10. Promesas: una mejor manera de manejar el código asíncrono.

Las promesas son objetos en JavaScript que representan la eventual finalización o falla de una operación asincrónica. Proporcionan una manera de manejar los resultados de las operaciones asincrónicas (como las solicitudes de red) de una manera más fácil de leer y mantener.

Una Promesa puede estar en uno de tres estados:

Pendiente (Pending): estado inicial, ni cumplida ni rechazada.
Cumplido (Fulfilled): lo que significa que la operación se completó con éxito.
Rechazado (Rejected): significa que la operación fall.

Puede adjuntar funciones de devolución de llamada a una Promesa usando el método then para manejar el cumplimiento y el método catch para manejar el rechazo.

Aquí hay un ejemplo del uso de una Promesa en JavaScript:

let myPromise = new Promise((resolve, reject) => {
  let result = doSomethingAsynchronously();
  if (result) {
    resolve(result);
  } else {
    reject(Error('Operation failed'));
  }
});

myPromise
  .then(result => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

3 formas de obtener el Fibonacci de un número en JavaScript

Fernando Barrios - jfergt — Fri, 08 Apr 2022 06:00:00 +0000

Un número Fibonacci, usualmente con notación f(n), es la suma de los dos números fibonacci que le preceden. Esta sucesión empieza con f(0) = 0, f(1) = 1, f(2) = f(1) + f(0) hasta f(x) = f(x-1) + f(x-2).

En este artículo veremos tres formas diferentes de encontrar un el resultado de aplicar la sucesión a un determinado número.

Recursión

Si usamos un sistema de recursión para calcular resultado de fibonacci para determinado número, por ejemplo 5, lo que obtendríamos es algo parecido a esto:

Algoritmo

Debemos revisar que el número n que le estamos pasando a la función es igual o menor que 1, si este es el caso tenemos que devolver n como el resultado de la función.
En caso contrario, la función se volverá a llamar a sí misma, pasándose como argumento el cálculo de n-1 y n-2 respectivamente, posteriormente devolverá como su resultado la suma de ambas invocaciones. Implementación

Complejidad (Time Complexity) No entraré en detalle sobre cómo calcular la complejidad computacional, pero les dejo acá que es: 2^n, por lo que podemos ver que entre más grande sea el número, crece enormemente la cantidad de recurso computacional que necesitamos es enorme.

Programación Dinámica Top-Down con memorización

El primer enfoque de programación dinámica que quiero que veamos es de top-down. La idea aquí es similar al enfoque recursivo, pero la diferencia es que guardaremos las soluciones a los subproblemas que encontremos.

De esta forma, si nos encontramos con el mismo subproblema más de una vez, podemos usar nuestra solución guardada en lugar de tener que volver a calcularla. Esto nos permite calcular cada subproblema exactamente una vez.

Esta técnica de programación dinámica se llama memorización. Podemos ver cómo nuestro árbol de subproblemas se reduce cuando usamos la memorización:

Algoritmo

Debemos revisar que el número n que le estamos pasando a la función es igual o menor que 1, si este es el caso tenemos que devolver n como el resultado de la función.
En caso contrario, revisaremos si el subproblema ya ha sido solucionado con anterioridad, de no ser así, entonces procederemos a realizar el mismo proceso que utilizamos en la recursividad y guardaremos el resultado
Devolveremos el resultado que hemos guardado, ya sea porque se haya computado por primera vez o por que ya lo hayamos calculado previamente.

Implementación

var fib = function(n) {
    const map = new Map(); // creamos un mapa para guardar los valores

    const dp = (x) => {
        if (x <= 1) return x;

        if (!map.has(x)) { // si NO hemos calculado el resultado
            map.set(x, dp(x-1) + dp(x-2)) // lo calculamos y guardamos el valor
        }

        return map.get(x);
    }

    return dp(n);
};

Complejidad Para este escenario la complejidad será de O(n), una complejidad mucho menor comparada con la de recursividad.

Programación Dinámica Bottom-Up

En el enfoque de programación dinámica Bottom-Up, lo que buscamos es solucionar los subproblemas en un orden diferente, es decir, primero resolvemos f(2), luego f(3), luego f(4) y así hasta llegar a f(n). De esta forma no tenemos que memorizar nada, puesto que únicamente calcularemos aquellos subproblemas que son necesarios.

Algoritmo

Tendremos un array donde iremos almacenando los valores de cada subproblema, este lo inicializaremos con los resultados base 0, 1.
Recorreremos desde la posición 2 hasta llegar a n (incluyéndola) para añadir la solución de cada subproblema.
Devolveremos luego nuestro array en la última posición.

Implementación

var fib = function(n) {
    const sol = [0, 1];

    for (let i = 2; i<= n; i++) {
        sol[i] = sol[i -1] + sol[i - 2];
    }

    return sol[n];
};

Complejidad En este caso la complejidad computacional sigue siendo de O(n).

Bonus

El cálculo de complejidad no solo se debe considerar a nivel computacional, también a nivel de uso de memoria, por lo que si vemos, por ejemplo, la solución Bottom-Up, no es óptima puesto que hemos guardado en memoria datos predecesores que no son necesarios.

Es más fácil visualizarlo si pensamos en que queremos el fibonacci de 10, tendríamos algo como [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55], pero realmente para tener el fibonacci de 10 solo es necesario tener en memoria los últimos 2 valores 21 y 34.

Implementación

var fib = function(n) {

    if (n <= 1) return n;

    let prev2 = 0;
    let prev1 = 1;
    let c = 0;

    for (let i = 2; i<= n; i++) {
        c = prev1 + prev2;
        prev2 = prev1;
        prev1 = c;
    }

    return c;
};

Conclusiones

Hemos llegado hasta el final del artículo, déjame saber qué te ha parecido las soluciones, ¿cambiarías algo?, ¿hay algo que no entiendes?

4 formas de medir el performance de tu código en JavaScript

Fernando Barrios - jfergt — Mon, 14 Mar 2022 01:44:39 +0000

Aprender a medir el performance de ciertos piezas de código resulta ser algo sumamente importante cuando hablamos de aplicaciones que empiezan a tener alto tráfico de uso, o son muy grandes. Sin dejar de lado el hecho de que siempre es importante que tengamos estos conceptos para qué nos ayude en nuestra carrera profesional.

Usando JSBen.ch

Una de las formas más sencillas y simples es utilizar aplicaciones en línea que nos apoyen con esta tarea, particularmente me encanta JSBen.ch.

En este sitio podemos añadir n cantidad de bloques de código, el sitio los ejecutará n cantidad de veces y dará un resultado sobre qué bloque de código es más eficiente.

Acá te dejo un ejemplo de dos funciones que calculan si un número es palíndromo o no, en esta podrás ver cuál es más eficiente y en qué porcentaje, jsben.ch/Ghiid.

Utilizando `console.time` y `console.timeEnd`

En este caso, deberás de invocar la función console.time pasándole cómo argumento un string que es un identificador, el sistema empezará a llevar un tiempo hasta que llames a la función console.timeEnd usando el mismo identificador.

Ejemplo

var isPalindrome = function (x) {
  if (x < 0) return false;
  const str = "" + x;
  const l = str.length;

  for (let i = 0; i < l / 2; i++) {
    if (str[i] !== str[l - i - 1]) return false;
  }
  return true;
};

console.time('performance');
isPalindrome(111111111);
isPalindrome(101);
isPalindrome(-121);
console.timeEnd('performance'); // Salida: performance: 0.048095703125 ms

Utilizando `performance.now`

El método performance.now() devuelve un DOMHighResTimeStamp (en-US), medido en milisegundos, con una precisión de cinco milésimas de segundo (5 microsegundos).

var isPalindrome = function(x) {
    const str = ""+x;

    return str === str.split("").reverse().join("")
};

const t0 = performance.now();
isPalindrome(111111111);
isPalindrome(101);
isPalindrome(-121);
const t1 = performance.now();
console.log("La llamada a isPalindrome tardó " + (t1 - t0) + " milisegundos.");

Utilizando la librería de `benchmark`

Con esta librería podemos ejecutar pruebas parecidas a la de JSBen.ch pero directamente en nuestra computadora, veamos un ejemplo:

// Importamos la librería
import Benchmark from "benchmark";

// Creamos una suite de pruebas
var suite = new Benchmark.Suite();

suite.add("Bloque 1", function(){
var isPalindrome = function (x) {
  // código de la función 1
};

isPalindrome(111111111);
isPalindrome(101);
isPalindrome(-121);
})
.add("Bloque 2", function () {

var isPalindrome = function (x) {
  // código de la función 2
};

isPalindrome(111111111);
isPalindrome(101);
isPalindrome(-121);
})
.on("cycle", function (event) {
  console.log(String(event.target));
})
.on("complete", function () {
  console.log("El más rápido es " + this.filter("fastest").map("name"));
})
.run({ async: true });

Conclusiones

Todas las opciones son válidas, sin embargo, recomiendo utilizar más JSBen.ch o benchmark puesto que nos dan resultados más exactos ya que corren varias veces las pruebas y realizan estadísticas para dar datos más certeros.

¿Todo en JavaScript es un objeto?

Fernando Barrios - jfergt — Tue, 08 Mar 2022 13:54:42 +0000

Hace unos días, un seguidor de Laserants.com, hizo la pregunta de si una función era un objeto. Mi respuesta fue en torno a explicar cómo casi todo es un objeto en JavaScript. He acá una clasificación de los types en JavaScript:

Primitivos (cadena, número, nulo, booleano, indefinido, símbolo): estos son tipos de datos inmutables. No son objetos, no tienen métodos y se almacenan en memoria por valor.
No primitivos (funciones, matrices y objetos): estos son tipos de datos mutables. Son objetos y se almacenan en memoria por referencia.

¿Qué es un objeto?

La clase Object representa uno de los tipos de datos de JavaScript. Se utiliza para almacenar varias colecciones con clave y entidades más complejas. Podemos decir que en JavaScript, un objeto es un entidad independiente con propiedades y tipos.

Para crear un objeto podemos hacer algo como esto:

const obj = {
  propiedad1: 'Valor 1',
  propiedad2: 'Valor2'
}

Ahora vamos a añadir una nueva propiedad al objeto

obj.propiedad3 = 'Valor 3';

Arrays como objetos

Un array es un objeto en JavaScript, y lo podemos demostrar de dos formas:

Usando typeof:

var a = [1,2,3];
console.log(typeof a);  // Salida: 'object'

Añadiendo más propiedades o claves

const arr = [1,2,3];
arr.saludar = () => console.log("hola");  // Añadiendo la propiedad saludar al objeto arr.

console.log(arr.length); // Salida: 3
console.log(arr.saludar); // Salida: hola
console.log(arr); // Salida: (3) [1, 2, 3, saludar: ƒ]

Funciones como Objeto

Ahora veamos el caso de un Array con este ejemplo, primero crearemos una función

function saludar() {
  console.log("Hola!");
}

Ahora le añadiremos más propiedades

saludar.nombre = "Fernando"; 
saludar.conNombre = function() {
    console.log(`Hola, ${this.nombre}!`)
}

Imprimamos unos logs

saludar() // Salida: Hola!
console.log(saludar.nombre); // Salida: Fernando
saludar.conNombre() // Salida: Hola, Fernando!

String

Existen tipos de datos no-primitivos, que son objetos, y que tienen su alternativa primitiva, entre estos tenemos el String (nótese la mayúscula en la S). Veamos un ejemplo de como un String puede ser un objeto

const nombrePrimitivo = "Carlos";
const nombreNoPrimitivo = new String("Fernando");

Intentando añadir propiedades a ambos objetos

nombrePrimitivo.apellido = "Arias";
nombreNoPrimitivo.apellido = "Barrios";

Añadiendo logs

console.log(nombrePrimitivo); // Salida: Carlos
console.log(nombrePrimitivo.apellido); // Salida: undefined
console.log(typeof nombrePrimitivo); // Salida: string

console.log(nombreNoPrimitivo); // Salida: String {'Fernando', apellido: 'Barrios**'}
console.log(nombreNoPrimitivo.apellido); // Salida: 'Barrios'
console.log(typeof nombreNoPrimitivo); // Salida: object

¿Qué son los empty-statement en javascript? ¿Existen casos de uso?

Fernando Barrios - jfergt — Sun, 27 Feb 2022 01:46:38 +0000

Javascript tiene ciertas peculiaridades que en ciertos momentos resultan ser importantes, o al menos interesantes, de conocer. Puede que los empty-statement sean de esas peculiaridades de JavaScript que resultan no ser tan necesarias o al menos no con tantos casos de uso.

¿Qué es un statement?

una sentencia (statement) es una unidad sintáctica de un lenguaje de programación imperativo que expresa alguna acción a realizar. Podemos decir que son las unidades ejecutable más pequeña de un programa.

Si tiene una línea de código que dice var x= 10; consola.log(x); eso es una línea y 2 sentencias.

¿Qué son los empty-statement en javascript?

Un empty-statement o sentencia vacía es usada para no proveer una sentencia, incluso si la sintaxis JavaScript esperase una. En pocas palabras un empty-statement es un ; (punto y coma).

Una sentencia vacía no proporciona ninguna declaración aunque JavaScript la espere. La declaración no tiene ningún efecto y no realiza ninguna acción.

Un ejemplo típico sería crear un bucle for que no tenga cuerpo.

var arr = [1, 2, 3];

// Asignar el valor 0 a todos los elementos del array
for (i = 0; i < arr.length; arr[i++] = 0) /* sentencia vacía */ ;

console.log(arr);
// [0, 0, 0]

Siempre se recomienda añadir un comentario a nuestro código cuando estamos utilizando sentencias vacías de forma intencional.

Un ejemplo de un uso no intencional (Mozilla Doc):

if (condicion); // Esta condición no ejerce ningún control!
   borrarTodo() // Por lo cual esta sentencia será ejecutada siempre!!!

Algunos ejemplos de uso

Asigna a 'b' el valor cero si 'a' no es cero.

var a = 1, b = 1;
if((a == 0) || (b = 0));
console.log(b); // 0

Cadenas de `if-else`, para excluír ciertas condiciones

const name = "Fernando";

if (name === "Barrios")
    console.log(name);
else if (name === "Fernando")
    console.log(`Hola ${name}`); // Hola Fernando
else if (name === "Juan"); // No se realiza ninguna acción si el nombre pasado es "Juan"
else if (name === "Carlos")
    console.log(`Gusto en verte ${name}`);
else
    console.log("Adiós");

Para evitar un comportamiento no deseado en IIFE, en algún momento querrá anteponerlo con una declaración vacía

;(()=>console.log('hola'))()

Esperar a que una condición se cumpla

while ( !condition );
// haz lo que sucede una vez que se cumple tu condición

DEV Community: Fernando Barrios - jfergt

Usar Docker sin instalar Docker Desktop en Mac

Instalación

Configuración del socket

Conclusiones

Top 10 de certificaciones que todo Developer debería de considerar

10 certificaciones que considero que todo desarrollador debería de considerar

Comprendiendo "Syntactic Sugar" - Una guía simple

TLDR

Introducción al "Syntactic Sugar"

Propósito y beneficios

Ejemplos comunes

Conclusiones

Patrón de diseño Higher-Order Component (HOC) en React y JavaScript

Introducción

HOC en detalle

Ejemplo básico de HOC en JavaScript

Ejemplo de HOC en React

Juego de Tic Tac Toe en HTML con ChatGPT en 2 minutos

¿Qué es ChatGPT?

Escribiendo el juego

HTML

CSS

JavaScript

Y acá el juego en acción

Scrum vs Kanban: Mi opinión como dev después de más de 8 años de trabajo.

Scrum

Kanban

Principales diferencias

Beneficios de Kanban sobre scrum

Beneficios de Scrum sobre Kanban

Pensamientos finales

Los 10 selectores de CSS que debes conocer

Selector de elementos

Selector de clase

Selector de ID

Selector universal

Selector de atributos

Selector de hermanos adyacentes

Selector de descendientes

Selector de niños (child)

Selector de pseudoclase

Selector de pseudoelementos

Top 10 de las mejores características de ES6

1. Let y Const: La introducción de variables de ámbito de bloque.

2. Funciones de flechas: sintaxis abreviada para crear funciones.

3. Template literals: interpolación de cadenas y cadenas multilínea.

4. Desestructuración: extracción de valores de matrices u objetos.

5. Parámetros predeterminados: especificación de valores predeterminados para los parámetros de función.

6. Operadores Rest y Spread: Combinando arrays o separándolos.

7. Clases: un azúcar sintáctico para la programación orientada a objetos.

8. Módulos: forma estándar de organizar el código en unidades reutilizables.

9. Map and Set: Estructuras de datos mejoradas para almacenar colecciones.

10. Promesas: una mejor manera de manejar el código asíncrono.

3 formas de obtener el Fibonacci de un número en JavaScript

Recursión

Programación Dinámica Top-Down con memorización

Programación Dinámica Bottom-Up

Bonus

Conclusiones

4 formas de medir el performance de tu código en JavaScript

Usando JSBen.ch

Utilizando console.time y console.timeEnd

Utilizando performance.now

Utilizando la librería de benchmark

Conclusiones

¿Todo en JavaScript es un objeto?

¿Qué es un objeto?

Arrays como objetos

Funciones como Objeto

String

¿Qué son los empty-statement en javascript? ¿Existen casos de uso?

¿Qué es un statement?

¿Qué son los empty-statement en javascript?

Algunos ejemplos de uso

Asigna a 'b' el valor cero si 'a' no es cero.

Cadenas de if-else, para excluír ciertas condiciones

Para evitar un comportamiento no deseado en IIFE, en algún momento querrá anteponerlo con una declaración vacía

Esperar a que una condición se cumpla

Referencias:

Utilizando `console.time` y `console.timeEnd`

Utilizando `performance.now`

Utilizando la librería de `benchmark`

Cadenas de `if-else`, para excluír ciertas condiciones