Las mejores noticias y recursos en programación web.

Newsletter para programadores y desarrolladores web. 100% gratis. Todos los martes.

¡+33.000 desarrolladores suscritos! 🎉
GitHubRSS

Sígueme en twitch.tv/midudev@midudev

Logos de Apple y Microsoft encima de gráficas de acciones de bolsa subiendo

Microsoft supera a Apple, el lenguaje del año y la pesadilla de las Cookies

Próximos directos en Twitch 🟣

HOY a las 18H: CURSO GIT + GITHUB para contribuir a PROYECTOS
MAÑANA 18 enero 18H: BASE DE DATOS SQL + BACKEND: SISTEMA de VOTACIÓN
LUNES 22 enero 18H: NOTICIAS de JAVASCRIPT

📰 Noticias de programación

  • 🏆 Microsoft SUPERA a APPLE en capitalización del mercado. Un giro ¿inesperado? en la industria. Lo cierto es que la empresa de Redmond lleva tiempo haciendo las cosas bien. Detalles en Twitter.

  • 💻 El lenguaje del año según TIOBE es... C#. A mi me parece un top bastante polémico y sin mucho sentido (sólo hay que ver que Typescript está en el puesto 35 por debajo de lenguajes como... X++). Revisa igualmente el TIOBE Index si te interesa.

  • 🌟 Descubre el TOP 100 de 2023 en Codepen. Inspiración y creatividad en su máxima expresión.

  • 🎉 Lo mejor del CES 2024: Innovaciones y tecnología de punta. Un coche volador, una tele transparente y un cacharro con IA...

🔥 Reto de JavaScript

Nos han pasado este código de JavaScript y nos preguntan qué aparecerá en la salida de la consola. ¿Lo sabes?

const number = NaN
const check = number === NaN

console.log(check, Number.isNaN(number))

Tienes la solución al final del post.

🍪 La pesadilla de las Cookies no termina

Supongo que te habrás dado cuenta que, de repente, muchos periódicos y blogs de España han empezado a pedirte que aceptes las cookies o... ¡qué pagues!

¿Por qué? ¿Qué está pasando? ¿Es legal? ¿Qué podemos hacer? Sí, es legal según la propia guía sobre el uso de las cookies.

Otra cosa es que sea cómodo para el usuario o ético. Igualmente, este mismo año Google Chrome va a acabar con las cookies de terceros así que... a ver con qué nos sorprenden en el corto plazo.

¿Quieres soluciones? Toma 3:

  1. Instala Firefox o Brave
  2. Extensiones como I Still Don't Care About Cookies o Todavía no me importan las cookies
  3. Considera desactivar JavaScript en esas páginas.

✅ Solución al reto de JavaScript

La respuesta correcta es false true. ¿Por qué? Porque NaN es un valor especial que no es igual a nada, ni siquiera a sí mismo. Por eso NaN == NaN es false.

Esto no es un error de JavaScript, como mucha gente cree. Es un comportamiento esperado según la especificación IEEE 754..

Finalmente Number.isNaN es un método que sí que comprueba si el valor es NaN y devuelve true.

Gente fundida trabajando demasiadas horas en el trabajo

¡Nueva IA de Google! Astro 4, ChatGPT está tonto, Meta saca un killer de Tailwind (sale mal)

Próximos directos en Twitch 🟣

HOY a las 18H: DESARROLLO desde cero para chats, multijugador y más
MAÑANA 13 diciembre 18H: AUTH con NEXT 14 y rutas privadas
LUNES 18 diciembre 18H: NOTICIAS de JAVASCRIPT

¡Disfruta de los retos de programación del AdventJS! ¡Entra en la web!

📰 Noticias de programación

👨‍💻 Reto de JavaScript

Nos han pasado este código de JavaScript y nos preguntan qué aparecerá en la salida de la consola. ¿Lo sabes?

let a = 3
let b = new Number(3)
let c = 3

console.log(a == b)
console.log(a === b)
console.log(b === c)

♊ Google lanza Gemini, su nueva IA

🥫 Salseos tech

✅ Solución al reto de JavaScript

La respuesta correcta es true, false y false. ¿Por qué? Porque a y c son números y b es de typeof 'object'.

Pero entonces... ¿Por qué es true la primera comparación? La coerción de tipos en este caso hace que el objeto b se convierta a número y, como tienen el mismo valor, la comparación es true.

Por cierto, nunca uses new Number(). :P

El logo de CSS 3 tachado y el nuevo de CSS4 aparece

¡Pronto CSS 4! ¿Google ataca a Firefox? El futuro de JavaScript...

Próximos directos en Twitch 🟣

HOY a las 18H: CHARLANDO con HÉCTOR de LEÓN: SALSEOS y PROGRAMACIÓN
MAÑANA 29 noviembre 18H: TUTORIAL de ANGULAR 17 desde cero
JUEVES 30 noviembre 18H: DESARROLLO APP que transforma DIBUJOS en CÓDIGO
VIERNES 1 diciembre 16H: AdventJS: Retos de programación de Navidad
MARTES 5 diciembre 18H: TALLER de UX y FIGMA con CARMEN ANSIO

Recuerda que si quieres mejorar tu lógica de programación mientras te diviertes, tienes Codember. Es un juego con retos de programación y secretos. Totalmente gratis. Entra a la web: https://codember.dev/

🆕 ¡Por fin va a llegar CSS4! Te lo cuento...

👨‍💻 Reto de JavaScript

Hemos encontrado este código de JavaScript y nos preguntan qué aparecerá en la salida de la consola. ¿Lo sabes?

console.log(!!null)
console.log(!!"")
console.log(!!1)

📰 ¡Noticias y novedades en el mundo de JavaScript!

  • 🔥 ¡El futuro de JavaScript está en juego! Responde la encuesta del State of JavaScript.

  • 📘 Nuevo TypeScript 5.3 y trae cositas interesantes: mejoras de narrowing al usar switch (true) y al comparar booleanos. Y, como siempre, muchas mejoras de rendimiento.

  • 🤖 Google ha anunciado su competidor de GitHub Copilot. Se llama Duet AI y por ahora está en beta cerrada. Puedes apuntarte aquí.

🍅 ¡El salseo! ¿Google atacando a Firefox?

En los últimos días, hay gente en Reddit que se ha quejado que YouTube funciona lento en navegadores que no son Chrome ni Edge. Algo que han notado justamente los usuarios de Firefox.

Al final, realmente, es que con las últimas medidas de YouTube de endurecer sus medidas anti-adblocker, se pone un vídeo envuelto en un <div class="ad-interrupting"> y se hace un timeout de 5 segundos para esperar que el vídeo se cargue. Como Firefox elimina el <div> se produce ese timeout de 5 segundos y parece que carga más lento.

Así que ya vemos que no es algo dirigido a Firefox pero sí que afectará a ciertas adblockers o navegadores que eliminen esos elementos de la web.

✅ Solución al reto de JavaScript

La respuesta correcta es false, false y true. ¿Por qué? El operador ! niega el valor que tiene delante pero antes de hacerlo, convierte el valor a booleano. Por lo tanto null es falsy, con ! lo pasamos a true y con el segundo ! lo pasamos a false.

Lo mismo pasa con "" pero en el último 1 es truthy, el primer ! lo pasa a false y el segundo ! lo pasa a true.

Alguien sale corriendo de las oficinas en llamas de OpenAI

¡TERREMOTO en OpenAI! Despido de Sam Altman y Microsoft se mete por medio...

Próximos directos en Twitch 🟣

HOY a las 18H: CHARLANDO con FERNANDO HERRERA
MAÑANA 22 noviembre 20H: TUTORIAL de ANGULAR 17 desde CERO
JUEVES 23 noviembre 20H: CURSO NEXT.JS 14 - SERVER ACTIONS
LUNES 27 noviembre 18H: NOTICIAS de PROGRAMACIÓN y TECH

¡Ah! Si quieres mejorar tu lógica de programación, estamos en pleno Codember. Es un juego con retos de programación y secretos. Totalmente gratis. Entra a la web: https://codember.dev/

🔥 ¡Locura en el mundo de la Inteligencia Artificial! OpenAI en llamas

El pasado 17 de noviembre, Sam Altman era despedido como CEO de OpenAI, la empresa de ChatGPT. Desde ese momento han pasado MUCHAS cosas que te paso a explicar porque es un momento histórico en el mundo de la IA y la tecnología.

Ver el vídeo con toda la explicación

17 de noviembre... ¡El despido!

18 y 19 de noviembre, el rollback ♻️

¡Microsoft se queda con Sam! El ex-CEO de Twitch a escena

¡Y por ahora así ha quedado la cosa! Es un resumen rápido, pero te recuerdo que tengo un vídeo donde te explico todo el salseo.

👨‍💻 Reto de JavaScript

Tenemos este código que mezcla var y let y nos preguntan qué aparecerá en la salida de la consola. ¿Lo sabes?

function greetUser() {
  console.log(userAge);
  console.log(userName);

  var userName = "Carlos";
  let userAge = 26;
}

greetUser();

📰 Noticias de Programación

✅ Solución al reto de JavaScript

La respuesta correcta es que tendremos un error ReferenceError: Cannot access 'userAge' before initialization. ¿Por qué? Las variables let y const tienen un temporal dead zone.

Es decir, que no podemos acceder a ellas hasta que no se inicializan. En este caso, hasta que no se declara la variable userAge no podemos acceder a ella.

Con var no ocurre y, aunque devolvería undefined, al menos no daría un error.

Aparece midudev sonriendo al lado de su estrella de la fama de GitHub

Mejora tu lógica de programación, el renacimiento de Angular, novedades GitHub Universe y salseos...

Próximos directos en Twitch 🟣

HOY a las 18H: REVISIÓN de PORTFOLIOS y WEBS de la COMUNIDAD
MAÑANA 14 noviembre 18H: CURSO de CSS: Animaciones desde cero

🔥 Angular 17, el renacimiento del framework

¡Nueva versión de Angular! Y de las importantes. Ya no sólo por su cambio de imagen y el lanzamiento de una renovada documentación...

También trae una nueva sintaxis que viene a reemplazar las directivas de control. Por ejemplo, para condicionales antes hacíamos esto:

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

Y ahora podremos hacer esto:

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

Menos verboso, sintaxis más clara y que, además, viene con mejoras de rendimiento. Y no es el único cambio. Vite por defecto como empaquetador, nuevas vistas aplazables con @defer, soporte experimental de View Transitions...

👨‍💻 Reto de JavaScript

Nos han pasado un código y nos preguntan qué saldrá en consola al ejecutar este código. ¿1? ¿2? ¿1 y 2? ¿O no aparecerá nada?

const delay = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms))

const p1 = delay(500).then(() => {
  console.log('1')
});

const p2 = delay(300).then(() => {
  console.log('2')
});

await Promise.race([p1, p2])

🧠 Mejora tu lógica de programación

¡Ya está en marcha Codember! Una web con retos de programación para mejorar tu lógica. Es como un juego interactivo, donde entras a una terminal y tienes que investigar para encontrar los retos y los secretos.

Es totalmente gratuito y puedes solucionar los retos en cualquier lenguaje de programación. ¡Entra en Codember!

🐙 ¡Novedades GitHub Universe y Copilot!

La semana pasada estuve en San Francisco 🇺🇸 para asistir a la GitHub Universe 2023, el evento para programadores de GitHub.

Casi todas las novedades han sido respecto a Copilot. Lo más importante es que pronto lo vamos a tener integrado en la web de GitHub y podremos: crear Pull Request, preguntar sobre el código del repositorio y detectar vulnerabilidades automáticamente.

Más novedades:

  • ¡No habrá subida de precio de Copilot con todas las nuevas funcionalidades!
  • Primer vistazo a Copilot Workspace. Le pasas una issue y te crea todo el código necesario para resolverla. 🤯 Sin fecha confirmada de lanzamiento.
  • Copilot Chat llega a Diciembre 2023 para todos los usuarios.
  • Extensión para los IDE de JetBrains ya disponible en beta para Copilot Chat.
  • Copilot también llegará a las aplicaciones móviles.
  • Podremos entrenar nuestras propias versiones de Copilot con nuestro código y documentación.
  • Nueva fuente para programadores.
  • Ver tour virtual de las oficinas de GitHub.

🍅 ¡Salseos tech!

  • 🔥 Snap ha echado a 20 Product Managers para... ¡tomar decisiones más rápido! Igual el problema no son los PM, pero tener un producto que siga interesando a la gente...
  • 🏋️‍♂️ Se quejan que create-react-app tiene demasiadas dependencias. Más de 1000 dependencias para crear un Hola Mundo en React. Ya no es un paquete que esté recomendado pero hay que tener en cuenta que viene linter, formateador, empaquetador, test runner...
  • ⚛️ Ya está disponible la encuesta State of React 2023. Para que votéis lo que os gusta, lo que no os gusta de React y lo que esperáis en su futuro.

✅ Solución al reto de JavaScript

La respuesta es que veremos 1 y 2. Aunque Promise.race devuelve la primera promesa que se resuelve, no cancela las otras promesas. Así que, aunque p2 se resuelva después, el console.log de la promesa p1 se ejecutará igualmente.

Un programador con un triangulo de fondo

Un empleado de Vercel la lía, modo oscuro en CSS más fácil, GitHub pierde millones con Copilot...

Próximos directos en Twitch 🟣

HOY a las 18H: CURSO de CSS desde CERO
MAÑANA 18 octubre: Resuelvo PRUEBA TÉCNICA de REACT para Junior y Trainee

🥫 Un empleado de Vercel la lía

Vercel es una de las empresas más importantes del mundo del desarrollo web. Es la empresa detrás de Next.js, el framework de React más usado.

La última semana se ha visto envuelta en una polémica ya que un empleado parece que amenazó a un usuario de Twitter, usando información privilegiada, con abogados y acciones en su contra si no cambiaba el nombre de su proyecto personal.

Ya Vercel ha confirmado que ha tomado cartas en el asunto, despidiendo al empleado, y el propio Guillermo Rauch ha clarificado la situación.

Pero al encenderse la mecha en la red social, también se ha puesto foco sobre los términos y condiciones de Vercel, que pueden eliminar tu proyecto sin ninguna razón, o la creación de plantillas de código abierto basado en productos con mucho éxito.

En mi opinión, cuanto más grande es una empresa, es más fácil que algún empleado pueda aprovechar una situación de privilegio para hacer algo mal. Creo que lo mejor es que la respuesta de Vercel siempre ha sido de frente y que no han intentado ocultar nada.

Ahora también parece que están teniendo en cuenta todo el feedback respecto a la creación de estas plantillas que no ha caido bien a parte de la comunidad. ¿Qué opinas tú?

🔥 Reto de JavaScript

Nos han dado este código de JavaScript y nos han preguntado qué sale en consola. ¿Lo sabes? ¿Realmente funciona el código? La respuesta al final.

let a = 10;
let b = 20;

function sum() {
  let a = 30;
  {
    let b = 40
    return a + b
  }
}

console.log(sum()) // -> ?

📰 Noticias

✅ Solución al reto de JavaScript

La respuesta correcta es 70. ¿Por qué? Hay diferentes conceptos que aplican: scope y closures.

Primero, tenemos que entender que las variables declaradas con let tienen un ámbito de bloque. Es decir, son accesibles dentro de las llaves {} donde se declaran.

Luego, es correcto usar {} para crear bloques de código. Sí, sin necesidad de if o function. Y estas crean un nuevo ámbito. Así que dentro podemos crear variables con let que sólo serán accesibles dentro de ese bloque.

Al final lo que ocurre es que en cada ámbito, aunque puedan ser accesibles las de fuera, estamos creando nuevas variables con el mismo nombre. Así que, en el caso de a, la variable que se usa es la de dentro de la función. Y en el caso de b, la variable que se usa es la de dentro del bloque {}.

Y así el resultado final es 70.

Godzilla programando

CSS evoluciona, API gratuita para enviar emails, ir a la universidad para aprender programación...

Próximos directos en Twitch 🟣

HOY a las 18H: PRUEBA TÉCNICA de JAVASCRIPT
MAÑANA 10 octubre: CURSO de HTML y DESARROLLO WEB desde CERO
JUEVES 11 octubre: CURSO de NODE.JS, CHAT y SOCKETS

📰 Noticias

🔥 Reto de JavaScript

Tenemos el siguiente código de JavaScript... ¿qué sale en la salida del programa?

function createGodzilla ({ size = 2, power = 100 }) {
  return { name: 'Godzilla', size, power }
}

createGodzilla()

Tienes la solución al final de la newsletter.

🥫 ¿Ir a la universidad o no para aprender programación?

Todo el mundo tiene una opinión al respecto. Por una parte, el famoso Levelsio que tiene diferentes empresas, dice que a día de hoy no lo recomienda y anima a la gente a crear sus propios productos.

En el otro extremo está ThePrimeagen diciendo que vayas a la universidad y tengas hijos cuanto antes.

Mi opinión es que cada persona es un mundo. Ir a la universidad está genial. Yo fui a la universidad. Pero también es verdad que hoy en día existen muchas alternativas para aprender a programar. Hay que tener en cuenta el tiempo (hablamos de años) y que hay gente que prefiere otro camino.

¡Simplemente elige el tuyo!

👀 ¡Bibliotecas que no puedes perderte!

✅ Solución al reto de JavaScript

La respuesta correcta es un error TypeError: Cannot read properties of undefined (reading 'size') y es que hay un error en el código. Es sutil pero importante.

Es el tipo de error que no te pasaría en TypeScript, ya que el problema es que aunque pensamos que estamos pasando valores por defecto a los parámetros, como le estamos pasando un objeto, deberíamos hacer una de estas dos formas:

// fíjate que por defecto le pasamos un objeto vacío
function createGodzilla ({ size = 2, power = 100 } = {}) {
  return { name: 'Godzilla', size, power }
}

// o podríamos llamar a la función siempre con un objeto
createGodzilla({})
Un panda rojo programando en frente de una laptop

Secretos oscuros de Mozilla, evolución de despidos tech, el CEO de Shopify la lía...

Próximos directos en Twitch 🟣

HOY a las 20H: SUPERAR el SÍNDROME del IMPOSTOR: Cuando piensas que no vales
MAÑANA 4 octubre: CLON de SPOTIFY desde CERO con transiciones
JUEVES 5 octubre: PRUEBA TÉCNICA de NODE.JS REAL para Backend y FullStack

🥫 Salseo con el CEO de Shopify y los side projects

El CEO de Shopify no quiere que sus empleados se distraigan con proeyctos personales. Así lo ha hecho saber en un memo interno.

En el mismo indica que, aunque es normal que puedas dar clases de yoga en fin de semana o que entrenes un equipo de fútbol uno o dos veces por semana, cualquier actividad que drene tu energía y te distraiga de Shopify no está permitida y se debe informar a la empresa.

Es una postura bastante controvertida ya que no habla específicamente del horario laboral y ya muchas veces han apuntado lo hipócrita que resulta su posición teniendo en cuenta que él mismo es parte del Board of Directors de otras empresas como Coinbase y que tiene inversiones en otras compañías.

🔥 Reto de JavaScript

Tenemos el siguiente código de JavaScript... ¿qué sale en consola?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

Tienes la solución al final de la newsletter.

📰 Noticias

🫣 Los secretos oscuros de Mozilla Foundation

La fundación Mozilla es la que está detrás del navegador Firefox. Es una organización sin ánimo de lucro que se financia con, se supone, donaciones y que tiene como objetivo defender la privacidad y la libertad en Internet.

Pero... ¿sabías que Mozilla cuenta con dos empresas que sí son con ánimo de lucro? Mozilla Corporation y MZLA Technologies Corporation.

En 2021, Mozilla tenía activos por valor de mil millones de dólares. Sólo en cash, tenía 400 millones. Pero... ¿de dónde sale ese dinero?

Pues igual te sorprende que la mayoría de los ingresos de Mozilla vienen de un sólo pagador. De hecho, son aproximadamente el 85% de sus ingresos. ¿Quién es? Google.

Google paga unos 400 millones de dólares al año para que Firefox use su buscador por defecto. ¡Y eso que Firefox es un competidor directo de Chrome!

¡Las donaciones sólo son 7 millones de dólares! Para que te hagas una idea, la actual CEO de Mozilla, Mitchell Baker, ganó en 2021 un total de 5.6 millones de dólares. Pagados por la Mozilla Corporation.

Si quieres descubrir más sobre las finanzas de Mozilla, que al menos hace levantar alguna ceja, te invito que leas el artículo de Bryan Lunduke donde lo explica todo con detalle: El dinero de Firefox: las extrañas cuentas de Mozilla.

✅ Solución al reto de JavaScript

La respuesta correcta es 3 3 3 y 0 1 2. ¿Por qué? Porque en el primer bucle estamos usando var y en el segundo let. var tiene un alcance de función y let tiene un alcance de bloque definido por llaves.

Como el setTimeout se ejecuta después de que el bucle se haya ejecutado por completo, cuando se ejecuta el callback de setTimeout en el primer bucle, el valor de i es 3. En el segundo bucle, como let tiene un alcance de bloque, el valor de i es el que se espera.

Una comparación de Bun con npm y pnpm y salgo al lado con corazones en los ojos viendo los resultados

¡Llega Bun y pinta muy bien! La muerte de las cookies y el movimiento de Google

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: Evento de Apple - iPhone 15 y más
MAÑANA 13 septiembre: MiduConf, conferencia de programación y desarrollo
JUEVES 14 septiembre: Desarrollo API con Bun desde cero

Recuerda que mañana, 13 de septiembre, celebramos el día de la programción. 256 regalos y speakers TOP internacionales. ¡Consigue tu ticket gratuito!

📰 Noticias

  • 💸 Bun 1.0 es una realidad. Es una alternativa a Node, npm, Webpack, compilador de TypeScript y test runner. ¡Todo en uno y con una velocidad tremenda!

De hecho, Vercel ya lo soporta de forma nativa y puedes bajar los tiempos de tus despliegues a casi la mitad.

  • 🍪 Google ya ha incorporado Privacy Sandbox en Chrome. ¿Para qué sirve? Básicamente para matar las cookies de terceros. Ahora el navegador, si tiene el permiso del usuario, creará un array con tus intereses.

  • 💀 Node 16 ha llegado a End of Life, esto quiere decir que debes actualizar a la versión 18 en cuanto puedas.

🔥 Reto de JavaScript

Tenemos el siguiente código de JavaScript... ¿qué sale en consola?

async function fetchInfo() {
  return await Promise.resolve("¡Hecho!")
}

const info = fetchInfo()
console.log(info) // -> ???

Tienes la solución al final de la newsletter.

😱 ¡Ofertaca de DonDominio!

Consigue tu dominio .dev o .com a 6€ (+ impuestos) usando el cupón MIDUCONFDD

👀 ¿Qué ha pasado con Gatsby?

Gatsby es un framework de React que, durante mucho tiempo, fue la mayor competencia de Next.js.

En su día la empresa incluso consiguió mayor inversión que Vercel, aunque las cosas han cambiado mucho con el tiempo.

Hace poco Netlify compró Gatsby, no se sabe por cuanto, pero con los despidos recientes de Netlify parece que no tiene mucha actividad.

Hay rumores que dicen que el proyecto está muerto aunque Netlify ha salido al paso diciendo que vienen novedades pronto. Sea como sea, no pinta que esté en su mejor momento...

🥫 Salseo con las tecnológicas españolas

Dice el periódico El Independiente que "las tecnológicas españolas se resignan ante las extranjeras por el robo de talento joven".

Primero: El talento no se "roba" porque NO es PROPIEDAD de las tecnológicas españolas.

"No podemos hacer nada", dicen. Sólo hablan de "salarios altos" y hay 0 autocrítica.

Sería bueno recordar que la mayoría de la gente está dispuesta a sacrificar el sueldo por una mejor CALIDAD de VIDA.

Conciliación, formación, flexibilidad, ambiente, cultura... Obvio que el sueldo es importantísimo y claro que habrá que pagar a ese talento como se merece.

PERO es que mucho talento joven se busca las oportunidades fuera porque están DE SOBRAS preparados y sólo encuentran trabajos PRECARIOS.

Ahí queda eso. ¿Tú qué opinas?

🧑‍🏫 5 consejos del creador de C++ para juniors

  1. No te especialices demasiado. Sé flexible
  2. Construye una vida fuera del ordenador
  3. Aprende a comunicar tus ideas y saber escuchar
  4. Piensa en tu carrera a largo plazo. No te quemes
  5. Todas las habilidades suman en programación

Los consejos salen de esta entrevista de 3 minutos.

✅ Solución al reto de JavaScript

La respuesta correcta es Promise { <pending> }. ¿Por qué? Porque fetchInfo es una función asíncrona que devuelve una promesa. Por lo tanto, cuando hacemos const info = fetchInfo() estamos asignando a info una promesa.

Para obtener el valor de la promesa, debemos usar await o .then. Por ejemplo:

async function fetchInfo() {
  return await Promise.resolve("¡Hecho!")
}

const info = await fetchInfo()
console.log(info) // -> "¡Hecho!"

El error viene por pensar que, como estamos haciendo el await dentro del fetchInfo y estamos devolviendo el valor, se va a resolver automáticamente. Pero no, hay que esperar a que se resuelva fuera.

Una chica que parece programadora con muchos billetes encima de su mesa

Estudio de sueldos en programación, novedades de CSS importantes y Scrum apesta

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: CURSO de ASTRO desde CERO
MAÑANA 7 septiembre: Curso de Node.js + MySQL desde CERO
13 septiembre: MiduConf, conferencia de programación y desarrollo

El 13 de septiembre celebramos el día de la programción. 256 regalos y speakers TOP internacionales. ¡Consigue tu ticket gratuito!

📰 Noticias

node --env-file=.env app.js

🥫 Salseos

  • 🔥 Se ha viralizado un post en X que dice que Scrum es un C*ncer. Lo cierto es que Scrum es un framework que nació con unos ideales que igual se han ido perdiendo...

  • 👴 Sobre las últimas tecnologías alguien opina que no le importa un pimiento y que lo importante es entregar valor al usuario.

  • 😢 Algunas empresas se vuelven a quejar que "les están robando el talento" y que no pueden hacer nada. No todo es dinero, igual mejorar las condiciones laborales ayuda...

🤣 Un meme de programación

Un meme de programación. Primera viñeta, un chico que sabe JavaScript buscando trabajo. Segunda viñeta, en la calle tirado sin encontrar nada. Tercera viñeta, alguien se acerca y le dice que necesita uno. En la cuarta viñeta sale llorando el que estaba en la calle porque le dicen que es para hacer PHP.

🎨 Cosas de CSS

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & a {
    color: tomato;
    &:hover, &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

🪄 Trucos para programadores

$ brew install cloudflared
$ cloudflared tunnel --url http://localhost:3000

5 Consejos para programadores Junior 👨‍💻:

  1. No te agobies con los errores, aprende de ellos
  2. No tengas prisa, valora tu evolución
  3. Lee el código de otras personas
  4. Descansa cuando lo necesites
  5. Practica todo lo que aprendes
Una oficina llena de cosas, con un ordenador encendido. No hay nadie.

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: DevsLeague ¡LA FINAL!: Competición entre programadores
JUEVES 3 de agosto: Curso de Node.js desde cero: Arquitectura MVC con API
VIERNES 4 de agosto (16H): Charlando de programación y desarrollo

¿RIP Web Developers?, Google asusta y las mejores bases de datos

📰 Noticias

🔥 Reto de JavaScript

¿Cuál es la salida de este código en JavaScript?

console.log(typeof NaN)

¡Tienes la explicación al final!

🥫 Salseos

🧰 Recursos

🤯 ¡Esto qué es!

✅ La solución al reto de JavaScript

La salida es number. Aunque es paradójico porque NaN significa Not a Number, pero en realidad es un valor numérico que quiere decir que no es un número. ¡Ah!

console.log(typeof NaN) // -> number

Hay otros valores especiales númericos como Infinity o -Infinity. ¿Lo sabías?

Stack Overflow de libros y ordenadores

Stack Overflow planta cara a ChatGPT, el mercado tech se recupera y salseo en el mundo del desarrollo web

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: DevsLeague: Competición de creadores de contenido de programación
MAÑANA 2 de agosto: Pruebas técnicas en programación, revisión y entrevista
JUEVES 3 de agosto: Curso de Node.js desde cero: API con Express

📰 Noticias

🔥 Reto de JavaScript

¡Ojo con este código! Te advierto que es correcto usar los case sin llaves, eso funciona. Pero... ¿cuál es el problema? ¿Es que no devuelve lo que esperamos? ¿Da algún error? ¿Qué sale en la consola?

function dameOpcion(opcion) {
  switch (opcion) {
    case 1:
      const mensaje = "Opción 1 seleccionada.";
    case 2:
      const mensaje = "Opción 2 seleccionada."; 
    default:
      const mensaje = "Opción no reconocida.";
  }

  return mensaje
}

console.log(dameOpcion(1))

Tienes la solución al final de la newsletter.

🥫 Salseos

😮 ¡Ojo con esto!

🧰 Recursos

✅ Solución al reto de JavaScript

El error será "SyntaxError: Identifier 'mensaje' has already been declared." En JavaScript, las variables declaradas con const tienen un alcance (scope) de bloque, lo que significa que solo están disponibles dentro del bloque donde fueron declaradas y no pueden ser recreadas ni reasignadas. Los bloques se limitan por las llaves {}. Al usar el case sin llaves, estamos intentando crear dos veces la misma constante en el mismo scope.

Un pájaro volando delante de un edificio con forma de X

Twitter desaparece, tecnologías más demandadas en España y problemas para los programadores de la India

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: DevsLeague: Competición de creadores de contenido de programación
MAÑANA 26 de julio: Revisando webs y portfolios de la comunidad
JUEVES 27 de julio: Curso de Node.js desde cero: API con Express

📰 Noticias

🔥 Reto de JavaScript

Este reto seguro que te sorprende. ¿Realmente existe el tercer parámetro en el callback de forEach? ¿O esto no funciona? ¡Averigua la salida de la consola!

const numbers = [1, 2, 3, 4, 5]
const squares = []

numbers.forEach((num, index, what) => {
  what[index] = num * num
})

console.log(numbers)

Tienes la solución al final de la newsletter.

🥫 Salseo

🧰 Recursos y curiosidad

♻️ Changelog

  • 🦕 Deno Fresh 1.3 lanzado. Este framework es una especie de Next.js pero que usa Deno, Preact y con arquitectura de islas. ¡Super interesante!

  • 🧑‍🚀 Astro 2.9.0 viene con soporte experimental para View Transitions sin necesidad de escribir JavaScript. ¡Y pinta de lujo!

✅ Solución al reto de JavaScript

La salida de la consola es [ 1, 4, 9, 16, 25 ]. ¿Cómo es esto posible? El tercer parámetro del callback de forEach es el array que se está iterando. Por lo tanto, podemos modificarlo. En este caso, estamos modificando el array numbers dentro del callback. Por eso, cuando hacemos console.log(numbers) nos devuelve el array modificado.

Otra cosa es que sea buena idea. De hecho, mejor usar un .map en este caso. ¿Te la sabías? ¡Cuéntamelo en Twitter!

Un chico usando el ordenador y una chica usando el móvil en una ciudad futurista

El futuro de JavaScript, nuevas unidades de CSS para el viewport y el adiós de las cookies más cerca

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: Curso Strapi + Next.js 13
MAÑANA 19 de julio: Revisando webs y portfolios de la comunidad
JUEVES 20 de julio: Curso de Node.js desde cero
¡Y el 25 de julio arranca la DEVS LEAGUE!
¡La Competición de creadores de contenido de programación!

📰 Noticias

  • 🍪 Llega Chrome 115 y con ello la Topics API, una tecnología que viene a matar las cookies. Podrás llamar al método document.browsingTopics() y te devolverá los temas de interés del usuario, sin necesidad de rastrear su historial.

  • 🪄 Y, ojo, que en la misma versión también llegan las Scroll Driven Animations, que nos permitirá animar elementos con CSS según el scroll. ¡Cuando instales la nueva versión, mira estas demostraciones!

  • Hablando de las Scroll Driven Animations, Google ha sacado un extenso artículo que te explica las mejoras de rendimiento que ofrece respecto a usar JavaScript para conseguir lo mismo.

🔥 Reto de JavaScript

Hablando del Optional Chaining, tenemos un código que lo usa para recuperar el valor de street pero también usa otro operador para asegurarse que tenemos valor... ¿Cuál es la salida en consola?

const user = {
  name: "midu",
  address: {
    street: false,
    city: "Barcelona"
  }
};

const street = user?.address?.street ?? "Sin calle"

console.log(street) // -> ¿?

Tienes la solución al final de la newsletter.

🚀 El futuro de JavaScript

  • ❓ ¿Conoces el operador Optional Chaining del reto anterior? Es ?. y nos ayuda a acceder a propiedades anidadas de un objeto pero comprobando que el camino existe. Pues pronto podremos también hacer asignaciones usándolo persona?.name = 'midu'. Más información en la propuesta.

  • 🙌 ¡Por fin podremos transformar Arrays en Objetos con groupBy! Así podemos agrupar elementos de un array por una propiedad. Ya está en la fase 3, así que pronto lo tendremos en JavaScript. Ejemplo:

const array = [1, 2, 3, 4, 5]

const group = Object.groupBy(array, (num, index) => {
  return num % 2 === 0 ? 'par': 'impar'
})

console.log(group) // =>  { impar: [1, 3, 5], par: [2, 4] }

🎨 Cositas de CSS

📈 Sube de nivel

🧰 Recursos que no debes perderte

✅ Solución al reto de JavaScript

El otro operador era el Nullish Coalescing Operator ??, que revisa si el operando de la izquierda es null o undefined y, si lo es, devuelve el operando de la derecha. En este caso, street es false, así que no es null ni undefined, así que no se asigna el valor de la derecha.

No confundas el operador ?? con || que sí revisa valores falsy.

Por lo tanto, la salida en consola será false.

Ultron programando en una computadora

¡ChatGPT lo vuelve a hacer! + Reddit deja React + Google Analytics ilegal y entrevistas rotas en programación

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: Desarrollamos la API de Threads desde cero
MAÑANA 12 de julio: Revisando webs y portfolios de la comunidad
JUEVES 13 de julio: ¡Haz una prueba técnica para desarrolladores Front-End!
20 de julio: Curso de Node.js desde cero

¡Y el 25 de julio arranca la DEVS LEAGUE!
¡La Competición de creadores de contenido de programación!

📰 Noticias

🔥 Reto de JavaScript

¿Cuál es la salida en Consola del siguiente código JavaScript? Tienes la solución al final de la newsletter.

const numbers = [1, 2, 3]
numbers[10] = 11
console.log(numbers.length)

¡Tienes la solución al final de la newsletter!

🥫 Salseos

👀 ¡Ojo con esto!

¡Actualización! Unas horas después de enviar la lista de correo, resulta que la UE y EEUU han llegado a un acuerdo. Por lo que Google Analytics, que llevaba años siendo virtualmente ilegal en Europa, vuelve a ser legal.

🧰 Recursos para programadores

✅ Solución al reto de JavaScript

¡Esta era fácil! ¿No? La respuesta es 11. Te explico:

  • No pasa nada que sea const ya que no estamos reasignando el array.
  • Al asignar el valor 11 en la posición 10 del array, se crean las posiciones 3 a 9 en memoria, pero se dejan vacías.
  • Al hacer console.log(numbers.length) nos devuelve 11 porque es la longitud del array, aunque solo tenga 3 elementos.
Un pulpo gato programando

Nueva versión de JavaScript 2023, GitHub se pasa a React, usa jQuery en 2023 y gana 60K$ al mes

Próximos directos en Twitch 🟣 (18H - hora España)

HOY: Desarrollo Web desde 0 con Astro y transiciones CSS entre páginas
MAÑANA 5 de julio: Creamos la base de datos de Twitter desde cero con MySQL
JUEVES 6 de julio: Charla con BettaTech. ¿Mercado saturado? ¿Ir a la universidad? ¿Proyectos personales?
20 de julio: Curso de Node.js desde cero

¡Y el 25 de julio arranca la DEVS LEAGUE!
¡La Competición de creadores de contenido de programación!

📰 Noticias

¿Sabes qué es ECMAScript? Podríamos decir que es la receta para crear JavaScript. Es una especificación que define cómo debe funcionar el lenguaje.

🔥 Reto de JavaScript

¿Cuál es la salida en Consola del siguiente código JavaScript? Tienes la solución al final de la newsletter.

const obj = {
  1: 1,
  2: 2,
  3: 3
}

const keys = JSON.stringify(Object.keys(obj))
const values = JSON.stringify(Object.values(obj))

console.log(keys === values)

Tienes la solución al reto al final de la newsletter.

🥫 Salseos

🛠️ Recursos

✅ Solución al reto de JavaScript

La solución es false. Object.keys(obj) devuelve un array con las claves del objeto. En este caso será el array ["1", "2", "3"]. Fíjate que son cadenas de texto, ya que las llaves de los objetos siempre son strings. Object.values(obj) devuelve los valores del objeto [1, 2, 3] (son números). Al transformar ambos en una cadena de texto con JSON.stringify nos queda:

const keys = '["1", "2", "3"]'
const values = '[1, 2, 3]'

console.log(keys === values) // false

🎙️ ¿Sabías que tengo un podcast?

¿Los devs siempre deben tener proyectos personales? Es el episodio de mi último podcast. Lo he tenido un poco abandonado, pero mi idea es ir grabando episodios de forma más continua. ¡Si lo escuchas y te gusta, compártelo! Así seguro que me animo a seguir grabando más capítulos.

Puedes encontrarme en Spotify, Google y iTunes.

Una chica en una oficina de su casa con su gato, programando en su computadora

10 cosas que todo programador debería saber, Figma Dev Mode y el creador de Copilot se queja

Próximos directos en Twitch 🟣 (18H - hora España)
HOY 27 de JUNIO, Curso de SQL desde cero
¡Y el próximo 27 de JULIO arranca la DevsLeague!
Competición de creadores de contenido de programación! Pronto más detalles.

📰 Noticias

🔥 Reto de JavaScript

¿Cuál es la salida de este código? ¿O es que acaso da un error de sintaxis?

const result = (() => (
  5, 10, 15
))()

console.log(result)

Tienes la solución del reto al final de la newsletter

🥫 Salseos

🛠️ Recursos

✅ Solución al reto de JavaScript

En consola aparecerá 15. ¿Por qué? Porque el operador coma , devuelve el último valor de la expresión. En este caso, 15. Sí, la coma , en ese contexto se comporta como un operador.

Por lo demás, estamos usando una IIFE (función autoinvocada) para que el resultado de la expresión se guarde en la variable result. Y la arrow function devuelve directamente la expresión.

📚 Lectura interesante

10 principios que todo desarrollador debería saber es un artículo que te explica conceptos como KISS, YAGNIoSOLID` con ejemplos de código. Muy interesante para mejorar en programación.

Un chico con gafas escuchando música y desarrollando en su portátil

Angular cambia su sintaxis y ChatGPT dando keys válidas de Windows

Próximos directos en Twitch 🟣 (18H - hora España)

  • HOY 21 de junio
    "¿No hay trabajo para devs? ¿El frontend es fácil? ¿Está PHP realmente muerto? Verdades incómodas en programación"
  • JUEVES 22 de junio
    "Desarrollo App con ChatGPT + NextJS en vivo"

📰 Noticias

🔥 Reto de JavaScript

¿Cuántos segundos tardan en salir el console.log en consola? ¡Piénsalo bien!

function waitFor2seconds () {
  return new Promise((resolve) => {
    setTimeout(() => { resolve() }, 2000)
  })
}

const promise = waitFor2seconds()

await promise
await promise
await promise

console.log('¿Cuántos segundos han pasado?')

Tienes la solución al reto al final de la newsletter.

🥫 Salseos

🧰 Recursos y herramientas

🤣 Pero esto qué es

  • 🪟 Resulta que le puedes decir a ChatGPT que se haga pasar por tu abuelita para que te cante... ¡keys válidas de Windows 10 Pro!. No todo el mundo se lo cree pero yo lo he probado y las llaves las da.

✅ Solución al reto de JavaScript

La respuesta correcta es que tarda 2 segundos. Eso es porque estamos guardando la promesa en una constante y se resuelve una vez. El primer await tarda 2 segundos, el segundo 0 segundos y el tercero 0 segundos. Por eso tarda 2 segundos en salir el console.log.

Y no, no da error usar un await así. Se llama top-level await y te recomiendo que le eches un vistazo en MDN.

Una ciudad a lo lejos en llamas con las letras JS (de JavaScript) en grande, en el centro

¿Adiós JavaScript? Y el consejo de Bill Gates para mejorar en programación

📰 Noticias

from reactpy import component, html, run

@component
def Button():
  def handle_event(event):
    print(event)

  return html.button({"on_click": handle_event}, "Click me!")

run(Button)

🔥 Reto de JavaScript

¿Cuál es la salida del console.log del siguiente código? ¡Piénsalo bien!

const promise = new Promise((resolve, reject) => {
  reject("Error")
  resolve("Bien")
})

promise
  .then((res) => console.log(res))
  .catch((err) => console.log(err))

Tienes la solución al reto al final de la newsletter.

💡 El consejo de Bill Gates

Aunque mucha gente no lo sepa, Bill Gates fue durante mucho tiempo programador. De hecho, se consideraba que era uno de los grandes. En un libro de 1997 se le preguntó sobre su secreto y su consejo es:

Si realmente quieres escribir un gran software, lo mejor es ir a trabajar con un grupo de personas que son muy buenas y trabajan en una variedad de productos diferentes. Si de verdad quieres convertirte en un gran desarrollador de software, necesitas mucha experiencia.

Pensar que vas a ser uno de los mejores desarrolladores de software del mundo sin trabajar junto a alguien con más antigüedad... Dudo que esa sea una visión muy artesanal.

Extraído de GenbetaDev

🥫 Salseos

  • 🔥 Douglas Crockford, creador de JSON, ha dicho que deberíamos dejar de usar JavaScript. Puedes ver la charla aquí. ¿Qué opinas?

Mi opinión: no estoy de acuerdo. Habla que ya no se crean lenguajes de programación nuevos (¿Hola, Rust y Go?) y que deberíamos empezar de nuevo. La mentalidad del greenfield (empezar con un campo verde, de cero) es que empezar algo de cero, y dejar de usar lo anterior que arrastra errores y malas decisiones, seguro que es mejor. Pero no siempre es así. A veces lo que pasa es que infravaloramos los retos que ya se han solucionado y que nos tocará solucionar de nuevo. Y que, además, no sabemos si la solución que estamos creando es mejor que la anterior.

De hecho... creo que a día de hoy JavaScript es mucho mejor lenguaje de lo que lo era cuando Douglas abogaba por él. ¿Igual tiene algo que ver que quiere promocionar su propio lenguaje de programación y los desencuentros que ha tenido con el TC39?

👀 Solución al reto

El reto anterior muestra en consola Error. Las promesas sólo se pueden rechazar o resolver una vez. En este caso, una vez rechazada, ignora el resolve siguiente.

El número 10 rodeado de planetas y estrellas en forma de átomo

10 años de React y 14 de Node.js

📰 Noticias

🥫 Salseos

  • 🤖 Alguien dice haber supervisado un proyecto con dos desarrolladores: un senior con 19 años de experiencia y otro que usa IA y No Code con 4 años de experiencia. Spoiler: Dicen que han echado al primero. Lee la historia completa

🧰 Herramientas y bibliotecas

Una ciudad futurista, un hombre con una maleta de negocios y una chica que va al trabajo

La primera newsletter de muchas

📰 Noticias

  • 🔥 Google ha anunciado Baseline, una forma de aportar claridad al soporte de los navegadores a las características de la plataforma web.
  • ⚛️ Ahora React va a tener también canary releases para que puedas probar las novedades antes de que salgan en la versión estable.
  • ❌ Las propiedades privadas de clases en JavaScript no se llevan bien con los Proxy y hay gente que está dejando de usarlo por eso. Lo explica Lea Verou.

🥫 Salseos

👀 Ojo a esto

  • 🍑 Rich Harris ha cumplido su palabra. Ya se ha fusionado el cambio en Svelte donde han migrado su código de TypeScript a JSDoc. Las pruebas, en este commit.

  • 🌏 Parece mentira, pero Google Chrome está perdiendo poco a poco cuota de mercado. En Abril de 2023, su cuota ha llegado a ser del 63.45%, la más baja desde hace años. Safari y Edge suben.

🎨 Diseño

.nesting {
  color: hotpink;
  font-size: 24px;

  > .is {
    color: blue;

    > .awesome {
      color: deeppink;
    }
  }
}