Jorge Baumann

Senior Full Stack Developer · @baumannzone

Ingeniero de software y divulgador de contenido. Speaker. Apasionado del desarrollo web y del fitness.

Últimos artículos del blog

Aquí tienes mis artículos más recientes y uno aleatorio de regalo

🌶️ New

RSL: el nuevo estándar que quiere que la IA pague por tu contenido

Reddit, Yahoo y Medium se suman a RSL (Really Simple Licensing), el nuevo estándar que busca que las empresas de IA paguen por entrenar con el contenido de creadores y medios.

Enlaces de afiliados bien etiquetados con 'sponsored'

Mejora tu SEO marcando enlaces de afiliados como patrocinados. Google te lo agradecerá.

Haz accesible el contenido de los pseudo-elementos ::marker en CSS

Cómo personalizar ::marker en <summary> sin romper la accesibilidad. Descubre cómo usar content con texto alternativo o incluso ocultarlo a los lectores de pantalla.

\n\n```\n\nSi ejecutas la función de `sayHello()` y abres la consola del navegador verás que el resultado es el siguiente:\n\n```bash\n> Hello, Rambito.js 🐶!\n```\n\nEsto sucede porque la última función que se ejecuta es la que está en el archivo `file-2.js`. Esto se debe a que la variable `name` y la función `sayHello` se sobreescriben en el ámbito global. Es decir, la última función `sayHello()` sobrescribirá la primera función `sayHello()` y sólo se ejecutará la función de `file-2.js`.\n\nLas IIFE solucionan este problema ya que tienen su propio scope y evitan que las variables y funciones sean globales. En este artículo veremos cómo funcionan y cómo podemos usarlas.\n\n## ¿Qué es una IIFE?\n\nUna **IIFE** o **Immediately Invoked Function Expression** es una expresión de función que se ejecuta inmediatamente después de ser creada. Es un patrón de diseño muy utilizado en JavaScript. También se las conoce como _funciones autoejecutables_, _funciones autoinvocadas_ o _funciones anónimas autoejecutables_.\n\nLa principal característica de este patrón de diseño es que las funciones se llaman a sí mismas después de ser declaradas. Es decir, que se ejecutan de manera inmediata después de ser creadas.\n\n```js\n(function () {\n const name = \"Baumann\";\n console.log(`Hello, ${name}!`);\n})();\n\n// Llama a la función inmediatamente después de definirla\n// con los paréntesis del final.\n```\n\nCuando declaras una variable dentro de una función sólo podrás acceder a su valor dentro de esa función, independientemente de si la función es autoejecutable o no. Esto es una característica de JavaScript que se conoce como _scope_, alcance o ámbito.\n\n## ¿Cómo se escribe una IIFE?\n\nLos paréntesis `()` juegan un papel importante en el patrón IIFE. En JavaScript, los paréntesis no pueden contener declaraciones, solo pueden contener una expresiones.\n\n```js\n// Inválido\n(const sum = 2 + 2)\n(const name = 'rambito.js')\n\n// Válido\n(2 + 2)\n(!false)\n(alert('baumannzone.dev'))\n```\n\n![IIFE](../../assets/blog/que-son-las-iife-en-javascript-y-como-funcionan/1.png)\n\nUna IIFE se compone de dos partes:\n\n1. Una expresión de función anónima con paréntesis alrededor de ella ([el operador de agrupación](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Grouping)).\n2. Los paréntesis alrededor de la expresión de función anónima para invocarla inmediatamente.\n\nPara crear una IIFE, lo primero que vas a hacer es crear una expresión de función, como sueles hacerlo normalmente:\n\n```js\nconst myFunction = function () {\n console.log(\"Hello, Developer! 👋\");\n};\n```\n\nLuego, envuelves la expresión de función en paréntesis. Los paréntesis no pueden contener declaraciones, solo expresiones. Por lo tanto, tienes que borrar la parte de la declaración:\n\n```js\n(function () {\n console.log(\"Hello, Developer! 👋\");\n});\n```\n\nPor último debes agregar el operador paréntesis `()` al final de la expresión de función:\n\n```js\n(function () {\n console.log(\"Hello, Developer! 👋\");\n})();\n```\n\nAhora ya puedes escribir todas las funciones y variables dentro de una IIFE sin preocuparte por contaminar el ámbito global o entrar en conflicto con otro código de JavaScript que tenga funciones o variables con el mismo nombre.\n\nAdemás se resuelve el problema que teníamos antes con los archivos `file-1.js` y `file-2.js`:\n\n## Ventajas de usar IIFE en JavaScript\n\nEstos son algunas de las ventajas y usos comunes que tienen las IIFE en JavaScript:\n\n### Proteger el alcance de variables y funciones\n\nLas IIFE se utilizan a menudo en JavaScript para crear un scope local y evitar contaminar el ámbito scope global, es decir, para crear un ámbito de ejecución aislado y evitar la contaminación del ámbito global. Al crear una IIFE y definir variables y funciones dentro de ella, esas variables y funciones solo estarán disponibles dentro de la función (como en cualquier otra función normal) y no se agregarán al scope global.\n\n```js\n(function () {\n const name = \"Baumann\";\n function sayHello() {\n console.log(`Hello, ${name}!`);\n }\n sayHello();\n})();\n\nsayHello(); // ✕ ReferenceError: sayHello is not defined\n```\n\n### Evitar conflictos de nombres\n\nEvitar conflictos de nombres y mejorar la organización del código o para evitar que las variables se sobreescriban o se modifiquen por accidente. Sobre todo si tienes varias bibliotecas o fragmentos de código que usan el mismo nombre para sus variables o funciones.\n\n```js\n(function () {\n const name = \"Baumann\";\n function sayHello() {\n console.log(`Hello, ${name}!`);\n }\n sayHello();\n})();\n\n(function () {\n const name = \"Rambito.js 🐶\";\n function sayHello() {\n console.log(`Hello, ${name}!`);\n }\n sayHello();\n})();\n\n// Hello, Baumann!\n// Hello, Rambito.js 🐶!\n```\n\n### Mejorar la organización del código.\n\nAl agrupar código relacionado dentro de una IIFE, puedes mejorar la legibilidad y mantenibilidad de tu código.\n\n¿Conoces alguna otra ventaja de usar IIFE en JavaScript? ¡Cuéntamelo en los comentarios! 👇\n\n## ¿Cuándo no usar IIFE en JavaScript?\n\nLas IIFE son útiles en diversos casos, pero hay algunas situaciones en las que es recomendable evitar su uso:\n\n- **Cuando no se necesita aislar el ámbito de las variables**: Si la función no utiliza variables que puedan entrar en conflicto con otras del mismo nombre, o si no se requiere crear un ámbito privado para evitar el acceso a ciertas variables, entonces no tiene sentido utilizar una IIFE.\n\n- **Cuando se necesita reutilizar la función**: Si la intención es utilizar la función en más de un lugar del código, es mejor definirla de manera explícita y luego invocarla cuando sea necesario, en lugar de utilizar una IIFE.\n\n- **Cuando se necesita pasar parámetros a la función**: Aunque es posible pasar parámetros a una IIFE, es más sencillo hacerlo cuando la función está definida de manera explícita.\n\n- **Cuando se quiere crear una función de manera más legible**: Aunque las IIFE son útiles para minimizar el código, pueden dificultar la lectura y entendimiento del mismo, especialmente cuando la función es larga o complicada. En estos casos, es mejor definir la función de manera explícita.\n\nEs importante tener en cuenta que las IIFE son una herramienta más en el arsenal de un programador JavaScript, y deben utilizarse cuando se ajusten a las necesidades del código en cuestión.\n\n## Curiosidades sobre las IIFE\n\nEsta información es interesante para profundizar en el tema, pero no es necesaria para entender el concepto de IIFE en JavaScript.\n\nLas IIFE soportan parámetros y retornos:\n\n```js\n(function (name) {\n console.log(`Hello, ${name}!`);\n})(\"Baumann\");\n\n// Hello, Baumann!\n```\n\n```js\nconst result = (function (a, b) {\n return a + b;\n})(1, 2);\n\nconsole.log(result); // 3\n```\n\n### Formas alternativas de escribir una IIFE\n\nLas IIFE también pueden ser escritas de la siguiente manera:\n\n- Las más habituales:\n\n```js\n// Paréntesis internos (recomendada por Crockford)\n(function () {\n console.log(\"Hello, Developer! 👋\");\n})();\n\n// Arrow functions\n(() => {\n console.log(\"Hello, Developer! 👋\");\n})();\n\n// Operador negación\n!(function () {\n console.log(\"Hello, Developer! 👋\");\n})();\n```\n\n- Si no te importa el valor de retorno\n\n```js\n~(function () {})(); // -1\n+(function () {})(); // NaN\n-(function () {})(); // NaN\n```\n\n- Otras formas menos habituales y más rebuscadas:\n\n```js\n// Operador void\nvoid (function () {})();\n\n// Operador new\nnew (function () {})();\n\ntrue && (function () {})();\n42, (function () {})();\n\n// etc\n```\n\nPodríamos seguir con más formas de escribir una IIFE, pero con estas ya tienes suficiente para entender el concepto. Lo importante aquí es que entiendas cómo funciona JavaScript y la **coerción de tipos**.\n\nLa mayoría de formas alternativas no las vas a usar, ya que son formas de escribir código bastante confusas, pero usadas a menudo cuando haces **code golfing** o para minificar código.\n\n## ¿Quieres seguir aprendiendo?\n\nAhora que sabes qué son las expresiones de función inmediatamente invocadas en JavaScript, es momento de seguir aprendiendo. Sígueme en [Instagram](https://www.instagram.com/baumannzone/) y comparte este artículo para que más personas puedan aprender JavaScript.\n\n¿Conocías las IIFE? ¿Las has usado alguna vez? ¡Cuéntamelo en los comentarios! 👇\n\n¡Happy coding!\n","collection":"blog","data":{"title":"¿Qué son las IIFE en JavaScript y cómo funcionan?","description":"Las IIFE (Immediately Invoked Function Expression) son expresiones de funciones que se ejecutan inmediatamente después de ser creadas. En este artículo veremos cómo funcionan y cómo podemos usarlas.","pubDate":"2022-12-21T00:00:00.000Z","published":true,"tags":["JavaScript"],"author":"Jorge Baumann","type":"blog","ogImage":"https://baumannzone-dev-og.vercel.app/api/og?title=%C2%BFQu%C3%A9%20son%20las%20IIFE%20en%20JavaScript%20y%20c%C3%B3mo%20funcionan%3F&tags=JavaScript"}},{"id":"cursos-de-machine-learning-gratis.md","slug":"cursos-de-machine-learning-gratis","body":"\nHay muchas formas de empezar a aprender Machine Learning. Tan solo con una búsqueda por la internet puedes encontrar una gran cantidad de recursos gratuitos.\n\nSin embargo, si acabas de zambullirte en el mundillo del la IA puede ser útil seguir un curso introductorio que te guíe a través de los conceptos básicos. Esto te dará una visión general del área en cuestión y te facilitará el poder diseñar tu propia ruta de estudio o _roadmap_ más adelante.\n\nEn este artículo, te comparto mis **4 cursos de machine learning gratuitos favoritos**. Cada uno de ellos te aportará valor de una forma distinta y te dará su punto de vista acerca del machine learning o deep learning. Contienen una variedad de tipos de contenido, desde vídeos hasta ejercicios prácticos de código.\n\n**Leyenda**\nLa leyenda que he utilizado para describir los cursos es la siguiente:\n\n- Título\n- 🧑‍🏫 Autor/a\n- ⏳ Duración\n- 🎯 A quién va dirigido\n- 📒 Conceptos principales del curso\n\n## Cursos\n\n### Making friends with machine learning\n\n🧑‍🏫 Cassie Kozyrkov \n⏳ 6.5h \n🎯 Todo el mundo \n📒 Machine learning aplicado\n\nhttps://www.youtube.com/playlist?list=PLRKtJ4IpxJpB_2ei8-5eWU31EZ6uSj9_s\n\nIncialmente fue un curso interno de Google. Lanzado al público en 2021.\n\n### Machine learning crash course\n\n🧑‍🏫 Google \n⏳ 15h \n🎯 Mejor si sabes Python y/o álgebra \n📒 Machine learning práctico\n\nhttps://developers.google.com/machine-learning/crash-course\n\nMuy práctico, gran parte del código de ML está centrado en las APIs de TensorFlow 👌\n\n### Practical deep learning for coders\n\n🧑‍🏫 FastAI\n⏳ 7 semanas \n🎯 Si sabes Python, mejor que mejor \n📒 Deep learning\n\nhttps://course.fast.ai/\n\nCurso creado con el objetivo de hacer que el deep learning sea lo más accesible posible para el mundo. Es una muy buena introducción al deep learning y a las redes neuronales en particular.\n\n### Machine Learning for Beginners\n\n🧑‍🏫 Microsoft\n⏳ 12 semanas \n🎯 Si sabes Python, mejor que mejor \n📒 Deep learning\n\nhttps://microsoft.github.io/ML-For-Beginners\n\nEste curso cubre los conceptos básicos de aprendizaje automático que una persona que se inicia debe conocer. Lo que comunmente se conoce como \"machine learning clásico\" a través de la herramienta `Scikit-learn`.\n\n---\n\nEn este post de inteligencia artificial y machine learning, te he compartido mis 4 cursos (favoritos) online gratuitos para estudiar a fondo esta materia. Cada curso cubre diversos aspectos del campo, lo que actúa como una introducción perfecta al ML. Además, te dará unas bases muy sólidas para poder continuar con cursos avanzados.\n\nSi tienes alguna pregunta, déjamela en los comentarios. Si quieres aprender más sobre inteligencia artificial, machine learning o programación, te invito a que conectemos en [Instagram](https://www.instagram.com/baumannzone/).\n","collection":"blog","data":{"title":"4 cursos de Machine Learning gratis","description":"4 cursos de Machine Learning, totalmente gratuitos, que deberías empezar a hacer ahora mismo.","pubDate":"2022-12-13T00:00:00.000Z","published":true,"tags":["IA","Python"],"author":"Jorge Baumann","type":"blog","ogImage":"https://baumannzone-dev-og.vercel.app/api/og?title=4%20cursos%20de%20Machine%20Learning%20gratis&tags=IA,Python"}},{"id":"como-programar-publicaciones-en-mastodon.md","slug":"como-programar-publicaciones-en-mastodon","body":"\nUna de las cosas que más extraño en Mastodon, que sí tiene Twitter, es la funcionalidad de programar publicaciones de manera nativa, es decir, publicaciones que se publiquen automáticamente en una fecha determinada.\n\nSi acabas de aterrizar en [Mastodon](https://techhub.social/@baumannzone) porque vienes de Twitter, seguro que estás acostumbrado a usar la funcionalidad de programar publicaciones, tanto de manera nativa como con herramientas de terceros.\n\nProgramar el contenido de tus redes sociales es algo que deberías hacer si creas contenido. Sin embargo, con Mastodon la cosa no es tan fácil: Mastodon no te permite programar publicaciones automáticas de manera nativa. Esto no quiere decir que no se pueda.\n\nEn este artículo te voy a explicar **cómo configurar Mastodon** para poder programar publicaciones automáticas.\n\nPara programar publicaciones en Mastodon, hay que utilizar una aplicación de terceros llamada _Mastodon Scheduler_.\nMastodon Scheduler no es tan user friendly como otras herramientas de programación de contenido, pero si sigues los pasos que te muestro a continuación, lo tendrás configurado en 2 minutos.\n\n## Crear la aplicación en Mastodon\n\nPara poder programar publicaciones en Mastodon, lo primero que tienes que hacer es crear una aplicación en Mastodon. Para ello, accede a sección de **Desarrollo** en la página de preferencias de tu cuenta de Mastodon.\n\n![Página de preferencias de Mastodon](../../assets/blog/como-programar-publicaciones-en-mastodon/1.png)\n\nUna vez en la sección de desarrollo, haz clic en **Nueva aplicación**.\n\n![Nueva aplicación en Mastodon](../../assets/blog/como-programar-publicaciones-en-mastodon/2.png)\n\nRellena el campo **Nombre de aplicación** con el nombre que quieras. Yo he puesto \"_Publicaciones-Automaticas_\".\n\nEn el campo **Sitio web** pon la dirección del servidor de Mastodon con el que te has registrado. En mi caso `https://techhub.social`.\n\nEl campo **URI para redirección** déjalo como está. Baja y dale al botón de **Envíar**.\n\n![Rellenar formulario de nueva aplicación en Mastodon](../../assets/blog/como-programar-publicaciones-en-mastodon/3.png)\n\nUna vez creada la aplicación, verás el siguiente mensaje: \"_La aplicación se ha creado correctamente_\". \nHaz clic en el nombre de la aplicación que acabas de crear para entrar y ver los detalles.\n\n## Obtener el token de acceso\n\nEn la página de detalles de la aplicación, verás un campo llamado **Token de acceso**. Cópialo y guárdalo en un lugar seguro. 🔓 ¡No lo compartas con nadie! De lo contrario, podrían publicar contenido en tu nombre.\n\n![Token de acceso de la aplicación](../../assets/blog/como-programar-publicaciones-en-mastodon/4.png)\n\n## Configurar Mastodon Scheduler\n\nEntra en la aplicación online [Mastodon Scheduler](https://www.scheduler.mastodon.tools/). Este es el servicio que utilizaremos para programar todos nuestros futuros posts en Mastodon.\n\nEn la página de inicio, verás un formulario con los siguientes campos:\n\n- **Instance URL**: el dominio de tu servidor de Mastodon. En mi caso `techhub.social`.\n- **Access Token**: el token de acceso que acabas de copiar de la aplicación de Mastodon.\n\n![Formulario de configuración de Mastodon Scheduler](../../assets/blog/como-programar-publicaciones-en-mastodon/5.png)\n\nRellena los campos con los datos que has obtenido en los pasos anteriores. Una vez rellenados, haz clic en el botón **Sign in**.\n\nUna vez hayas iniciado sesión, ya tendrás todo configurado para programar publicaciones en Mastodon.\n\nAhora solo tienes que escribir el contenido de tu publicación y programarla para que se publique en la fecha y hora que quieras.\n\n![Programar publicación en Mastodon](../../assets/blog/como-programar-publicaciones-en-mastodon/6.png)\n\nRepite este proceso tantas veces como quieras para programar todas las publicaciones que necesites.\n\n## Conclusión\n\nComo ves, programar publicaciones en Mastodon no es tan complicado como parece. Con esta guía, ya sabes cómo hacerlo. Espero que pronto Mastodon incorpore esta funcionalidad de manera nativa. Mientras tanto, esta aplicación es una buena alternativa.\n\nSi te ha gustado este artículo, compártelo con tus amigos y compañeros de trabajo. Si tienes alguna duda, puedes dejar un comentario abajo en la sección de comentarios o contactar conmigo en [Instagram](https://instagram.com/baumannzone).\n\n¡Happy tooting!\n","collection":"blog","data":{"title":"Cómo programar publicaciones en Mastodon","description":"Guía completa para saber cómo programar publicaciones en Mastodon que se publiquen automáticamente. Configúralo en 3 minutos.","pubDate":"2022-11-21T00:00:00.000Z","published":true,"tags":["Social Media"],"author":"Jorge Baumann","type":"blog","ogImage":"https://baumannzone-dev-og.vercel.app/api/og?title=C%C3%B3mo%20programar%20publicaciones%20en%20Mastodon&tags=Social%20Media"}},{"id":"añadiendo-comentarios-al-blog.md","slug":"añadiendo-comentarios-al-blog","body":"\nLos comentarios aportan mucho valor a los artículos de un blog. Son una forma de generar debate, de comunicar ideas y compartir conocimiento entre developers.\n\nSin embargo, puede ser que los comentarios no sean relevantes o que no sean apropiados (_spam_). Gestionar comentarios suele ser una tarea tediosa, sobre todo cuando tu sitio web es muy grande. Si en algún momento de tu vida has gestionado un blog con WordPress, sabrás de lo que hablo.\n\nHace tiempo que conozco [Utterances](https://utteranc.es/), una librería Open Source de comentarios para developers que te permite, rápidamente, añadir comentarios a tu blog de forma sencilla y segura.\n\nDigo que es para developers porque está basado en GitHub. Utiliza la API de GitHub, en concreto las **issues** de un repositorio para gestionar los comentarios. \nPuedes escribir un comentario aquí abajo o puedes hacerlo desde el repositorio de GitHub, si la _issue_ existe.\n\nDigo que es **sencillo** y **rápido** porque tardas 5 minutos en configurarlo y ponerlo en marcha. Lo único que necesitas es una cuenta de GitHub, un [repositorio](https://github.com/baumannzone/baumannzonedev-comments) y colocar un `
🎲 Random Setup Item

¿Sabías que uso...?

Mi setup de trabajo como software engineer