Si quieres ver un ejemplo funcionando, puedes abrir mi visor web aquí: https://jfernandogt.github.io/gentler-viewer/

Lo primero fue resolver el tema del nivel. No quería lanzarme a una novela compleja y frustrarme a las diez páginas. Recordé Penguin Readers, que clasifica libros por niveles de inglés. Entré a su sitio, revisé los niveles (A1–C1) y me armé una lista de obras que me interesaban y que, idealmente, existieran en dominio público. Aquí fue donde hice mi “curaduría”: una selección cuidadosa de historias que me motivaran y encajaran con mi nivel. Al final elegí The Hound of the Baskervilles, de Arthur Conan Doyle.

Con la decisión tomada, me fui a por el texto. En Project Gutenberg encontré la obra y descargué la versión en TXT: https://www.gutenberg.org/ebooks/2852. Abrí el archivo y le hice una limpieza rápida. Quitar los encabezados y pies de página que añade Gutenberg. Esta parte es clave: si el texto no coincide con lo que dice el narrador, la alineación se desajusta.

El siguiente paso fue conseguir el audio. En LibriVox encontré el audiolibro: https://librivox.org/the-hound-of-the-baskervilles-by-arthur-conan-doyle/

Escuché los primeros minutos y los comparé con el texto de Gutenberg. La coincidencia era buena: mismo orden de capítulos, lenguaje muy similar y una narración clara. Eso me dio confianza para seguir. Descargué los capítulos en MP3.

Con texto y audio listos, pasé a la parte técnica: la alineación. Usé Gentle, una herramienta de forced alignment que toma un archivo de audio y el texto correspondiente y devuelve un JSON con marcas de tiempo por palabra. Seguí las instrucciones del repositorio para correrlo localmente y, por prudencia, empecé únicamente con el capítulo 1.

Una vez tuve el JSON de Gentle, me puse a construir el visor. Quería algo simple y accesible desde cualquier dispositivo: una página web con HTML, CSS y JavaScript. El visor carga el audio desde una URL pública (por ejemplo, un MP3 alojado en GitHub Pages) y, en paralelo, carga el JSON con la alineación. Con eso, el script puede resaltar en tiempo real la palabra que se está pronunciando mientras el audio avanza. Agregué dos detalles que cambiaron por completo la experiencia: la posibilidad de hacer clic en una parte del texto para saltar a ese punto del audio, así, si una frase se me hacía complicada, podía repetirla de inmediato sin perder el ritmo.

Para alojarlo, opté por GitHub Pages. Subí el HTML, el CSS, el JavaScript y probé con un capítulo de The Hound of the Baskervilles. Ajusté cosas de usabilidad sobre la marcha: un control de velocidad, un modo oscuro para leer de noche. Cuando estuve conforme, dejé el visor accesible públicamente para poder usarlo desde el teléfono, la computadora o la tablet sin instalar nada. Puedes verlo en acción aquí: https://jfernandogt.github.io/gentler-viewer/

Lo más valioso del proceso es cómo impacta en el aprendizaje del idioma. Tener texto y audio sincronizados me ayudó a fijar la relación entre lo que veo y lo que escucho, además que al empezar con una obra que se ajustaba a mi nivel, la experiencia fue desafiante pero llevadera, sin caer en la frustración.

Te dejo algunas capturas de pantalla

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.

Si quieres una script que haga todo automáticamente, puedes ir a mi repositorio: https://github.com/jfernandogt/install-docker-without-docker-desktop-mac/tree/main

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 de 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 docker-compose docker-Buildx

En algún momento nos podremos llegar a topar con este error: 'docker-credential-desktop not installed' para esto, debemos actualizar las configuraciones de docker. Lo primero que haremos es validar que exista el directorio de .docker y si no, crearlo con el comando siguiente:

mkdir ~/.docker

Ahora editamos el archivo con nano

nano ~/.docker/config.json

Las claves importantes que debemos actualizar son credsStore y currentContext

{
    "auths": {},
    "credsStore": "osxkeychain",
    "currentContext": "colima"
}

El siguiente paso es configurar docker-compose como un complemento de Docker para poder usar docker compose como comando en lugar del script docker-compose heredado. Primero, crearemos una carpeta en el directorio de inicio para almacenar los complementos de Docker CLI:

mkdir -p ~/.docker/cli-plugins

Luego, crearemos un enlace simbólico con el comando docker-compose en esa nueva carpeta:

ln -sfn $(brew --prefix)/opt/docker-compose/bin/docker-compose ~/.docker/cli-plugins/docker-compose

Ahora podemos comprobar si el comando de docker compose está funcionando:

docker compose

Debería devolvernos algo parecido a lo siguiente:

También necesitaremos Buildx para crear algunos contenedores Docker. Este se instala con Docker Engine en macOS, pero en nuestro caso lo instalamos en el paso 1 con homebrew. Lo único que debemos hacer es crear un enlace simbólico:

ln -sfn $(brew --prefix)/opt/docker-buildx/bin/docker-buildx ~/.docker/cli-plugins/docker-buildx

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 teníamos en el Docker Desktop.

Una segunda alternativa si no quisiéramos usar la extensión de VS Code y tenemos Raycast instalado, podremos 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 políticas de licencias. Al final si lo que buscamos es tener la experiencia más cercana a Docker, no hay nada más cercano a eso que usar el mismo CLI de Docker.

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:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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

1. 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).

2. 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.

3. 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.

4. 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

1. 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.

2. 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

1. 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.

2. 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.

3. 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

1. 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" 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! 💻💖

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 funcionalides 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 función: ${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 función: 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.

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:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. Menores gastos generales: Kanban tiene menos gastos generales en comparación con Scrum, con menos reuniones, ceremonias y requisitos de documentación.

7. 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.

8. 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

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

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, usaría 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", usaría 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", usaría 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", usaría 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", usaría 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 más (+) 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, usaría 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, usaría 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, usaría 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, usaría 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, usaría el siguiente código CSS:

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

En conclusión, estos 10 selectores de CSS son los más 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.

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:

1. 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.

2. 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.

3. 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.

4. 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 ${expresión}.

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ámetros 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 ...númbers 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:

1. 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:

    // math.js
    exports.sum = (a, b) => a + b;
    exports.product = (a, b) => a * b;
   
    // index.js
    const math = require('./math');
    console.log(math.sum(1, 2));  // Output: 3
    console.log(math.product(3, 4));  // Output: 12
   

   En el ejemplo anterior, el archivo math.js exporta dos funciones, sum y product, que se pueden importar y usar en otros archivos de la aplicación mediante la función require.

2. 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.

    // math.js
    export const sum = (a, b) => a + b;
    export const product = (a, b) => a * b;
   
    // index.js
    import { sum, product } from './math';
    console.log(sum(1, 2));  // Output: 3
    console.log(product(3, 4));  // Output: 12
   

   En el ejemplo anterior, el archivo math.js exporta dos valores, sum y product, que se pueden importar y usar en otros archivos de la aplicación mediante la declaración de import.

   Los módulos proporcionan una forma de organizar y reutilizar el código en JavaScript, lo que facilita el mantenimiento y el intercambio de código entre diferentes partes de una aplicación. También ayudan a reducir el tamaño del código en una aplicación al permitirle importar solo las partes de un módulo que se necesitan.

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 añade 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:

1. Pendiente (Pending): estado inicial, ni cumplida ni rechazada.

2. Cumplido (Fulfilled): lo que significa que la operación se completó con éxito.

3. 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
  });

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

1. 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.
2. 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

var fib = function(n) {
    if (n <= 1) return n;

    return fib(n-1) + fib(n-2);
}

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.

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

1. 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.
2. 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
3. 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

1. Tendremos un array donde iremos almacenando los valores de cada subproblema, este lo inicializaremos con los resultados base 0, 1.
2. Recorreremos desde la posición 2 hasta llegar a n (incluyéndola) para añadir la solución de cada subproblema.
3. 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?

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.

¿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

Referencias:

1. The Empty Statement
2. Empty Statement
3. What is the point of using empty statement in JavaScript?

Soy de las personas que siempre ando buscando "hacks" para simplificar mi trabajo y eliminar tareas repetitivas, si eres como yo, espero que este tutorial te ayude en tu día a día.

Git Aliases

Antes de entrar en suelo de los git commands, es importante que entendamos que la mayor parte de necesidades se pueden solucionar utilizando git aliases por ejemplo dentro de mi .gitconfig tengo el siguiente alias:

lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

Lo que me permite es generar una salida de parecida a esta:

Git Commands

Existen ciertas tareas que se tornan más complejas y que resulta ser mejor crear un comando en lugar de un alias.

La forma de trabajar de git es que cada vez que ejecutas git commit a su vez ejecuta un archivo binario o script llamado git-commit; si ejecutas git branch este a su vez ejecuta el archivo con nombre git-branch.

¿Dónde están ubicados todos estos archivos?

Si deseas visualizar donde se almacenan estos archivos debes de ejecutar en tu terminal:

cd $(git --exec-path) && ls

Obtendrás algo parecido a esto:

Creando nuestro propio comando

Vamos a crear un comando que nos permita renombrar una branch local y remota. Es posible que exista una mejor forma de hacerlo, pero a manera didáctica usaremos este caso como ejemplo para construir nuestro script.

Paso 1: Crear los pasos a ejecutarse en el script

Los pasos que nuestro script deberá seguir, son:

1. Crear una nueva branch a partir de la branch actual y que utilice el nuevo nombre.
2. Publicar la nueva branch en el remoto.
3. Eliminar la branch actual en el remoto.
4. Eliminar la branch actual en el local.

Paso 2: Creando el archivo

El nombre de nuestro archivo deberá tener la siguiente nomenclatura git-nombre-de-mi-comando, por lo que utilizaré git-rename para que pueda ejecutar git rename branch_nueva.

Paso 3: reando un menú de ayuda sobre el comando.

#!/bin/sh
# File: git-rename

USAGE='[help]'
LONG_USAGE='git rename help
    Muestra el mensaje de ayuda
git rename nombre_nuevo
    Elimina la branch actual y crea una nueva apartir de la misma en local y remoto.'

OPTIONS_SPEC=
. git-sh-setup # Documentación https://git-scm.com/docs/git-sh-setup

El scriptlet git sh-setup está diseñado para ser obtenido (usando .) por otros scripts de shell para configurar algunas variables que apunten a los directorios normales de Git y algunas funciones auxiliares de shell.

Paso 4: Creando la función a invocar

Crearemos la función rename_branch que hace lo siguiente:

1. Crea una variable currentBranch que tiene como valor el nombre de la branch actual.
2. Imprime un mensaje de que renombrará la branch por el primer argumento que recibe la función

3. Ejecuta los pasos que creamos en el paso 1.

   rename_branch () {
    declare currentBranch=$(git symbolic-ref --short HEAD);
   
    echo "Renombrando branch $currentBranch por $1"
   
    git checkout -b $1 && git push --set-upstream origin $1 && git push origin --delete $currentBranch && git branch -D $currentBranch
   
    echo $1;
   }
   

Paso 5: Mostrando mensaje de ayuda o invocando la función

Cada vez que se ejecute este archivo, debemos de capturar el números de argumentos que hemos recibido, en caso no venga ninguno, mostraremos el mensaje de ayuda.

Si viene al menos un argumento, capturaremos el valor y revisaremos si es help para mostrar el mensaje de ayuda, caso contrario invocaremos la función de rename_branch con el valor.

case "$#" in
0)
    usage ;;
*)
    cmd="$1"
      shift
    case "$cmd" in
      help)
        git rename -h ;;
      *)
        rename_branch "$cmd" ;;
    esac
esac

Paso 6: Guardando el archivo

Guarda el archivo en la ruta que obtuviste con git --exec-path y cambiale el permiso para que sea ejecutable con chmod +x ./git-rename

Script final

Este sería el script final:

#!/bin/sh
# File: git-rename

USAGE='[help]'
LONG_USAGE='git rename help
    Muestra el mensaje de ayuda
git rename nombre_nuevo
    Elimina la branch actual y crea una nueva apartir de la misma en local y remoto.'

OPTIONS_SPEC=
. git-sh-setup

rename_branch () {
    declare currentBranch=$(git symbolic-ref --short HEAD);

    echo "Renombrando branch $currentBranch por $1"

    git checkout -b $1 && git push --set-upstream origin $1 && git push origin --delete $currentBranch && git branch -D $currentBranch

    echo $1;
}

case "$#" in
0)
    usage ;;
*)
    cmd="$1"
      shift
    case "$cmd" in
      help)
        git rename -h ;;
      *)
        rename_branch "$cmd" ;;
    esac
esac

Espero que este pequeño tutorial te brinde las posibilidades de automatizar tu día a día.

Colecciones de tipos primitivos

// Array de string
console.table(['Manzana', 'Pera', 'Melón']);

// Objeto con propiedades de tipo strings
function Persona(nombres, apellidos) {
  this.nombres = nombres;
  this.apellidos = apellidos;
}

var yo = new Persona("Fernando", "Barrios");

console.table(yo);

Colecciones de tipos compuestos

Si data es un array y sus elementos son array, o bien cuando data sea un objeto y sus propiedades sean un array sus propiedades o elementos se enumerarán en la fila.

// un array de arrays

var personas = [["Fernando", "Barrios"], ["Juan", "Carlos"], ["Carmen", "María"]]
console.table(personas);

// un array de objetos

console.table([{
    nombre: "Fernando",
    apellido: "Barrios"
}, {
    nombre: "John",
    apellido: "Doe"
}])

Restringiendo las columnas mostradas

// un array de objetos, donde se mostrará solo la columna apellido

console.table([{
    nombre: "Fernando",
    apellido: "Barrios"
}, {
    nombre: "John",
    apellido: "Doe"
}], ['apellido'])

¿Qué es la cohesión?

La cohesión en términos de informática se refiere al grado en que diferentes elementos de un mismo sistema permanecen unidos generando un elemento mayor. Podríamos verlo como una clase que integra varios métodos y cada uno de estos métodos está relacionado entre sí, teniendo una “temática” común.

¿Qué es el acoplamiento?

El acoplamiento es el grado en que todos estos elementos se relacionan entre sí. Entre mayor sean las relaciones o dependencias mayor grado de acoplamiento tendremos.

Cómo aplicar los principios SOLID en JavaScript

Ya vimos un poco de teoría y ahora nos vamos a enfocar en la práctica. En esta parte de este artículo buscaremos cómo aplicar cada uno de los principios en éste maravilloso lenguaje.

Por cierto, si estás buscando como convertirte en un mejor desarrollador de software, te dejo esta guía que fue escrita en Laserants.

Los cinco principios SOLID son:

• S – Principio de responsabilidad única (Single responsibility principle)
• O – Principio de abierto/cerrado (Open/Close principle)
• L – Principio de sustitución de Liskov (Liskov substitution principle)
• I – Principio de segregación de la interfaz (Interface segregation principle)
• D - Principio de inversión de la dependencia (Dependency inversion principle)

Principio de Responsabilidad Única

Nos dice que una clase o función debe centrarse en una única responsabilidad, que debe existir una única razón para cambiar; en resumen podemos decir que éste principio nos pide que todos los métodos o sub-funciones tengan alta cohesión.

class Auto {
  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
  }

  obtenerMarca() {
    return this.marca;
  }

  obtenerModelo() {
    return this.modelo;
  }

  guardarMarca(marca) {
    this.marca = marca;
  }

  guardarModelo(modelo) {
    this.modelo = modelo;
  }
}

En este ejemplo podemos ver como la clase Auto tiene métodos específicos para leer y escribir información, pero no hace nada adicional como guardar en una base de datos, llamar a otras funciones ajenas.

Principio de Abierto/Cerrado

Nos dice que debemos ser capaces de extender el comportamiento de una clase/función sin modificar.

class ProductosEnAlacena {
  productos = ["Piña", "Manzanas", "Harina"];

  existeProducto(producto) {
    // indexOf nos devuelve la posición del producto en el array,
    // si la posición es -1 significa que no existe el producto
    return this.productos.indexOf(producto) !== -1;
  }
}

Si quisiéramos a la clase ProductosEnAlacena añadirle la posibilidad de ingresar más productos entonces haríamos lo siguiente:

class ProductosEnAlacena {
  productos = ["Piña", "Manzanas", "Harina"];

  existeProducto(producto) {
    // indexOf nos devuelve la posición del producto en el array,
    // si la posición es -1 significa que no existe el producto
    return this.productos.indexOf(producto) !== -1;
  }

  agregarProducto(producto) {
    this.productos.push(producto);
  }
}

Como se puede observar, le hemos hecho modificaciones a la clase, sin alterar la funcionalidad previa, cumpliendo así con el principio.

Principio de sustitución de Liskov

El principio nos indica que si estás usando una clase Rectangulo y luego creas otra clase llamada Cuadrado que extiende de Rectangulo entonces cualquier objeto creado a partir de la clase Rectangulo puede ser cambiado por Cuadrado, obligándonos así a que cualquier clase hija no altere el comportamiento de la clase padre.

Entonces tendríamos un rectángulo:

class Rectangulo {
  ancho;
  alto;

  establecerAncho(ancho) {
    this.ancho = ancho;
  }

  establecerAlto(alto) {
    this.alto = alto;
  }

  calcularArea() {
    return ancho * alto;
  }
}

Y tenemos una prueba escrita en mocha para comprobar el área:

describe("Validar área de un rectángulo ", function () {
  it("El área debe ser igual a alto * ancho ", function () {
    const rectangulo = new Rectangulo();
    rectangulo.establecerAncho(8);
    rectangulo.establecerAlto(2);
    const area = rectangulo.calcularArea();
    assert.equal(area, 16);
  });
});

Si ejecutamos la prueba nos encontramos que el área debe ser equivalente a 16, resultado de multiplicar ancho (8) por alto (2).

Ahora creamos una clase Cuadrado que extiende de Rectangulo.

class Cuadrado extends Rectangulo {
  establecerAncho(ancho) {
    super.establecerAncho(ancho);
    super.establecerAlto(ancho);
  }

  establecerAlto(alto) {
    super.establecerAncho(alto);
    super.establecerAlto(alto);
  }
}

Para validar que no rompimos el funcionamiento del padre, correremos la prueba sobre un objeto creado con la clase Cuadrado. Al correr la prueba nos daremos cuenta que ha fallado, pues ahora un cuadrado escribe el ancho y alto como el mismo valor imposibilitando tener el área de un rectángulo con lados diferentes.

Hasta éste punto te estarás preguntando como solucionarlo, y creo que has de estar pensando en diferentes posibilidades. La primera y más sencilla puede ser abstraer la lógica a una clase superior quedando el código de la siguiente manera:

class Paralelogramo {
  constructor(ancho, alto) {
    this.establecerAncho(ancho);
    this.establecerAlto(alto);
  }

  establecerAncho(ancho) {
    this.ancho = ancho;
  }

  establecerAlto(alto) {
    this.alto = alto;
  }

  calcularArea() {
    return this.ancho * this.alto;
  }
}

class Rectangulo extends Paralelogramo {
  constructor(ancho, alto) {
    super(ancho, alto);
  }
}

class Cuadrado extends Paralelogramo {
  constructor(lado) {
    super(lado, lado);
  }
}

Principio de segregación de la interfaz

El principio nos indica que una clase debe de implementar únicamente las interfaces que necesita, es decir, que no necesite tener que implementar métodos que no utilice. El propósito de este principio es obligarnos a escribir interfaces pequeñas buscando aplicar el principio de cohesión en cada interfaz.

Imaginemos que tenemos un negocio de venta de computadoras de escritorio, sabemos que todas las computadoras deberían de extender de la clase Computadora y tendríamos algo como esto:

class Computadora {
  marca;
  modelo;

  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
  }

  obtenerMarca() {
    return this.marca;
  }

  obtenerModelo() {
    return this.modelo;
  }

  guardarMarca(marca) {
    this.marca = marca;
  }

  guardarModelo(modelo) {
    this.modelo = modelo;
  }
}

class ComputadoraDell extends Computadora {
   ...
}

En nuestro negocio todo va de maravilla y ahora queremos extender un poco más nuestro catalogo de productos, así que decidimos optar por empezar a vender computadoras portátiles. Un atributo útil de una portátil es el tamaño de la pantalla integrada, pero como bien sabemos esto solo esta presente en las portátiles y no computadoras de escritorio (generalizando), al inicio podemos pensar que una implementación podría ser:

class Computadora {
  ...
  constructor() {
    ...
  }
  ...
  guardarTamanioPantalla(tamanio) {
    this.tamanio = tamanio;
  } 
  obtenerTamanioPantalla() {
    return this.tamanio;
  }
}
class PortatilHP extends Computadora {
   ...
}

El problema que tenemos con esta implementación es que no todas las clases, por ejemplo la EscritorioDell, requieren los métodos para leer y escribir el tamaño de la pantalla integrada, entonces deberíamos de pensar en separar ambas lógicas en dos interfaces quedando nuestro código así:

class Computadora {
  marca;
  modelo;

  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
  }

  obtenerMarca() {
    return this.marca;
  }

  obtenerModelo() {
    return this.modelo;
  }

  guardarMarca(marca) {
    this.marca = marca;
  }

  guardarModelo(modelo) {
    this.modelo = modelo;
  }
}

class TamanioPantallaIntegrada {
  tamanio;
  constructor(tamanio) {
    this.tamanio = tamanio;
  }

  guardarTamanioPantalla(tamanio) {
    this.tamanio = tamanio;
  }

  obtenerTamanioPantalla() {
    return this.tamanio;
  }
}

class PortatilAsus implements <TamanioPantallaIntegrada, Computadora> {
  ...
}

Todo suena perfecto, pero ¿te has dado cuenta del problema?, y es que JavaScript solo soporta una clase padre, entonces la solución sería aplicar un mixin, este sería el código utilizando un mixin:

class Computadora {
  marca;
  modelo;

  constructor(marca, modelo) {
    this.marca = marca;
    this.modelo = modelo;
  }

  obtenerMarca() {
    return this.marca;
  }

  obtenerModelo() {
    return this.modelo;
  }

  guardarMarca(marca) {
    this.marca = marca;
  }

  guardarModelo(modelo) {
    this.modelo = modelo;
  }
}

const Portatil = (clasePadre) => {
  return (
    class extends clasePadre {
      constructor(marca, modelo){
        super(marca, modelo);
      }

      guardarTamanioPantalla(tamanio) {
        this.tamanio = tamanio;
      }

      obtenerTamanioPantalla() {
        return this.tamanio;
      }

    }
  )
}

class PortatilAsus extends Portatil(Computadora) {
  ...
}

Principio de inversión de dependencia

En este principio se establecen que las dependencias deben de estar en las abstracciones y no en las concreciones, en otras palabras, nos piden que las clases nunca dependan de otras clases y que toda esta relación debe estar en una abstracción. Este principio tiene dos reglas:

1. Los módulos de alto nivel no deben de depender de módulos de bajo nivel. Esta lógica debe de estar en una abstracción.
2. Las abstracciones no deben de depender de detalles. Los detalles deberían depender de abstracciones.

Imagina que tenemos una clase que nos permite enviar un correo:

class Correo {
  provider;

  constructor() {
    // Levantar una instancia de google mail, este código es con fin de demostración.
    this.provider = gmail.api.createService();
  }

  enviar(mensaje) {
    this.provider.send(mensaje);
  }
}

var correo = new Correo();
correo.enviar('hola!');

En este ejemplo se puede ver que se está rompiendo la regla, puesto que la clase correo depende del proveedor de servicio, ¿qué pasaría si después queremos usar Yahoo y no Gmail?

Para solucionar esto debemos eliminar esa dependencia y añadirla como una abstracción.

class GmailProveedor {
  constructor() {
    // Levantar una instancia de google mail, este código es con fin de demostración.
    this.provider = gmail.api.createService();
  }
  enviar(mensaje) {
    this.provider.sendAsText(mensaje);
  }
}
class Correo {
  constructor(proveedor) {
    this.proveedor = proveedor;
  }
  enviar(mensaje) {
    this.proveedor.send(mensaje);
  }
}
var gmail = new GmailProveedor();
var correo = new Correo(gmail);
correo.enviar('hola!');

De esta forma ya no nos importa el proveedor ni la forma en que implementa el envío de correos el proveedor, la clase de Correo solo se ocupa de una única cosa, pedirle al proveedor que envíe un correo.

Hasta acá hemos terminado con esta publicación sobre los principios SOLID en Javascript, agradecería que me dejes comentarios y sugerencias sobre que otros temas te interesaría que repasaramos.

Las sentencias switch, son de las primeras cosas que aprendemos cuando entramos al mundo de la programación, y no, no están obsoletas. Para muchos programadores JavaScript estamos constantemente trabajando con Objetos y muchos de nosotros empezamos a utilizarlos como un reemplazo a una sentencia switch.

¿Qué es una sentencia switch?

Nos permite evaluar una expresión, haciendo coincidir el valor de la expresión con una cláusula de caso y ejecuta las declaraciones asociadas con ese caso, veamos un ejemplo:

function obtenerPrecio(producto) {
  switch (producto) {
    case "Naranjas":
      return 2;
    case "Mangos":
      return 2.5;
    case "Papayas":
      return 3;
    default:
        return 0
  }
}

obtenerPrecio("Papayas"); // Salida: 3

Podemos observar que es similar a sentencias de tipo if-else, con la diferencia que evalúa un único valor.

¿Qué pasa si olvido un break o return?

El inconveniente más común que nos encontramos, es la forma en la que maneja el flujo de control, por ejemplo si nos olvidamos de colocar el 'break' seguirá ejecutando las lineas siguientes de código aún cuando en nuestra lógica no deban de ser ejecutadas, por ende, estamos obligados a añadir estas pausas. En el siguiente ejemplo, si expresión se resuelve a "Platanos", el algoritmo compara el valor con el case "Platanos" y ejecuta la declaración asociada. Cuando se encuentra un break, el programa sale del condicional switch y ejecuta la declaración que lo procede. Si se omite el break, el case "Cerezas" también es ejecutado. Este código lo pueden encontrar acá.

switch (expr) {
  case 'Naranjas':
    console.log('El kilogramo de naranjas cuesta $0.59.');
    break;
  case 'Manzanas':
    console.log('El kilogramo de manzanas cuesta $0.32.');
    break;
  case 'Platanos':
    console.log('El kilogramo de platanos cuesta $0.48.');
    break;
  case 'Cerezas':
    console.log('El kilogramo de cerezas cuesta $3.00.');
    break;
  case 'Mangos':
  case 'Papayas':
    console.log('El kilogramo de mangos y papayas cuesta $2.79.');
    break;
  default:
    console.log('Lo lamentamos, por el momento no disponemos de ' + expr + '.');
}

console.log("¿Hay algo más que te quisiera consultar?");

¿Por qué reemplazarlo por objetos literales?

Como hemos dicho, en JavaScript estamos acostumbrados a utilizar objetos para casi todo, ya sea como constructores o como objetos literales. Nuestros modelos de datos, información o variables suelen ser objetos literales de los cuales extraemos valores de sus propiedades.

const productos = {
    "naranjas": 2,
    "mangos": 2.5,
    "papayas": 3,
    "default": 0
}
function obtenerPrecio(producto) {
  return productos[producto.toLowerCase()] || productos['default'];
}

obtenerPrecio("Papayas"); // Salida: 3

Hemos logrado ahorrarnos algunas líneas de código, pero principalmente hemos conseguido mayor legibilidad y no tenemos que preocuparnos por escribir pausas en el código.