Cómo centrar un elemento <picture> de HTML5

10/07/2020
Artículo original

El clásico elemento para colocar imágenes en HTML, <img>, poco a poco ha sido sustituido por el más moderno y capaz elemento <picture> que permite definir diferentes imágenes y formatos en función del ancho de pantalla y el soporte, y combinarlo con subelementos <srcset> y <sizes> para un control total. Esto no sólo sirve para lo obvio, que es mostrar imágenes a diferentes tamaños y resoluciones, sino que se pueden conseguir cosas más avanzadas, como por ejemplo, hacer que según el tamaño de la pantalla se centre la imagen en determinado detalle, en lugar de que se vean otras partes menos interesantes.

Si tienes interés en aprender a fondo, entendiendo bien los conceptos y no "con alfileres", las técnicas de Responsive Web Design y las tecnologías modernas de maquetación, este es tu curso: Diseño Web Responsive con HTML5, Flexbox, CSS Grid y Bootstrap.

Bien, el caso es que una duda sencilla pero que a más de uno le puede traer de cabeza (lo sé porque me lo preguntan mucho los alumnos) es ¿cómo hago para centrar los contenidos de un elemento <picture> en mi página o aplicación web?

En realidad es sencillo pero la cosa cambia en función de si se gestiona como un elemento de línea o de bloque.

Tanto <img> como <picture> son elementos inline por defecto, así que se pueden centrar bien simplemente usando text-align:center; en su contenedor (ojo, no en ellos, claro).

Ahora bien, si los queremos visualizar como elementos de bloque, algo muy común, la cosa cambia ligeramente.

En el caso de las imágenes <img> llega con otorgarles márgenes automáticos a ambos lados, así (como suele hacerse con cualquier elemento de bloque):

display: block;
margin: 0 auto;

pero en el caso de las etiquetas <figure> no, ya que son elementos contenedores, que son los que realmente contienen a la imagen que finalmente se muestra en función de cómo se haya configurado.

Si abres el navegador y ves cómo es este elemento mostrándolo en las herramientas del desarrollador verás que, por defecto el elemento está colapsado en altura y que dentro contiene a la imagen en cuestión. De hecho, aunque tengamos elementos srcset para determinar de manera automática la mejor imagen en cada caso en función del ancho y de la densidad de pantalla, en el fondo lo que hay es un elemento contenedor (el <picture>) con un elemento dentro que es un <img> que es el que carga la imagen final que se está mostrando.

Por lo tanto para centrarlo cuando fuerces a que sea un elemento de bloque tienes dos opciones:

  1. Centrar el elemento <img> que hay dentro del <picture> de la manera habitual indicada arriba.
  2. Otorgarle un ancho apropiado al elemento <picture> para que pueda centrarse como cualquier elemento de bloque, que debe tener un ancho para que puedan establecerse márgenes automáticos con él. Lo mejor en este caso es usar width:fit-content; para que se ajuste al ancho de la imagen que tenga dentro de manera automática.

La mejor manera es verlo en la práctica, en este minivideo:

[youtube:QRg9fzQp7EE]

¡Espero que te resulte útil!

Docker vs Kubernetes ¿En qué se diferencian?

08/07/2020
Artículo original

imagen ornamental

Dicho de manera muy simplificada, la tecnología de contenedores permite empaquetar y distribuir software aislándolo del sistema operativo subyacente y asegurándonos que se van a ejecutar siempre igual en cualquier sitio. Gracias a ellos podemos desplegar aplicaciones rápidamente sin miedo a que algo falle aunque cambiemos de entorno, arrancarán rapidísimo y podremos usarlos para desarrollar, probar y poner en producción cualquier aplicación o conjunto de ellas sin sorpresas.

Si esto te suena a una máquina virtual, te recomiendo que leas mi artículo ¿Qué diferencia hay entre Docker (Contenedores) y Máquinas virtuales (VMWare, VirtualBox...)?, porque verás que no son lo mismo en absoluto.

Cuando estás empezando con la tecnología de contenedores existen dos productos que aparecen todo el tiempo: Docker y Kubernetes, lo que da lugar a confusión. Vamos a aclarar qué son y en qué se parecen o se diferencian ambos productos.

¿Qué es Docker?

Docker es la principal tecnología para la creación y ejecución de contenedores. Se trata de un conjunto de herramientas Open Source que nos permiten definir, crear y ejecutar imágenes de software y contenedores que las ejecutan en cualquier sistema operativo.

Con Docker puedes definir cómo será el entorno en el que se ejecutará tu aplicación, que tú y todo tu equipo podáis desarrollar sobre la imagen correspondiente, que otros la prueben e incluso llevártela a un servidor, a producción, con la garantía de que siempre va a funcionar exactamente igual. Esto es una maravilla, y termina de una vez por todas con la clásica letanía de "¡En mi máquina funciona!" cuando algo falla en producción.

Las imágenes de tus aplicaciones se pueden compartir con todo el equipo (e incluso externamente), las puedes versionar, combinar... y puede facilitar mucho el desarrollo, prueba y despliegue de las aplicaciones, incluso en equipos de trabajo pequeños.

Aquí desarrollamos más todos los conceptos básicos sobre Docker.

¿Qué es Kubernetes?

Tras una temporada trabajando con Docker seguro que no quieres volver atrás. Sin embargo, si no desarrollas o pruebas únicamente, sino que tienes que poner aplicaciones en producción, probablemente tendrás una sensación agridulce con él. Y es que para eso se queda corto si tienes que gestionar más de uno o dos contenedores o varios servidores.

Cuando debes desplegar una aplicación hay muchas cosas que puedes necesitar, más allá de simplemente "levantar" un contenedor y de que la app funcione. Algunos ejemplos (hay muchos más) son:

  • Ejecutar contenedores/apps diferentes en diferentes servidores sin tener que ponerlos a funcionar uno a uno, a mano.
  • Asegurarte de que la aplicación siempre funciona y, si algo falla o "se cae", que se vuelva a levantar automáticamente.
  • Relacionado con lo anterior, monitorizar tus contenedores para saber en qué estado se encuentran en todo momento.
  • Si la aplicación se divide en capas y cada una en diferentes contenedores, algo muy habitual, que éstos sepan cómo comunicarse entre sí sin que tengas que hacerlo todo manualmente.
  • Cuando la aplicación crezca que pueda escalar automáticamente, levantando nuevas instancias para atender a más usuarios, desplegando más contenedores en otras máquinas, etc... Es decir, lograr que tu desarrollo no muera de éxito.

En definitiva, cuando empiezas a desplegar en serio aplicaciones "contenedorizadas" vas a tener que desplegar los contenedores, arrancar cada uno cuando le corresponda, comunicarlos entre sí, gestionar su almacenamiento, lidiar con sus fallos y caídas, y escalarlos cuando se necesite. Y hacer esto a mano puede llegar a ser una pesadilla y algo totalmente inviable en algunos entornos.

Es ahí en donde entra en juego Kubernetes, una tecnología Open Source desarrollada por Google que se encarga de todas estas cosas y muchas más. Es lo que se denomina un orquestador de contenedores, ya que los dirige y coordina, como el director de una orquesta, para que trabajen adecuadamente todos juntos.

Esquema básico de la relación entre Docker y Kubernetes

Puedes profundizar más en las utilidades de Kubernetes en este estupendo artículo de Eduard Tomás, el autor y tutor del mejor curso online que existe sobre Docker y Kubernetes.

Entonces ¿en qué se parecen o diferencian Docker y Kubernetes?

Como podemos deducir de lo anterior, Docker y Kubernetes son tecnologías relacionadas, pero no tienen nada que ver.

Docker es la tecnología que nos va a permitir hacer lo básico del trabajo con contenedores (definirlos, ejecutarlos y que funcionen), mientas que Kubernetes saca partido a esta tecnología para llevarla un nivel más allá, potenciando a Docker para permitirnos crear algo mucho más complejo a partir de esa tecnología de base.

Conviene aclarar que Docker no es la única tecnología de contenedores que existe ni la única que puede utilizar Kubernetes. Y Kubernetes no es el único orquestador de contenedores Docker que hay en el mercado, ni mucho menos. De hecho, Docker tiene su propio orquestador llamado Swarm que puedes utilizar de serie con esta tecnología.

Sin embargo, ambas son las tecnologías dominantes en su especialidad (Docker la principal tecnología de contenedores, y Kubernetes el principal orquestador de contenedores), y juntos forman una pareja imbatible para construir aplicaciones basadas en contenedores, modernas, escalables y con toda la complejidad que necesitemos.

Aplicar AOP con JavaConfig (AspectJExpressionPointcut)

07/07/2020
Artículo original

Hace poco me toco tocar un componente en dónde tuve que aplicar un aspecto, la última vez que lo hice lo configuré con el namespace de AOP de Spring, pero estz vez quise hacerlo todo con JavaConfig; he aquí lo que hice:

El XML era este:

<bean id="monitoringAdvice" class="net.bull.javamelody.MonitoringSpringInterceptor" />
<aop:config>
  <aop:pointcut expression="execution(* com.makingdevs.service..**.*(..))"
    id="monitoringPointcut" />
  <aop:advisor advice-ref="monitoringAdvice" pointcut-ref="monitoringPointcut" />
</aop:config>

leer más

Este pack de cuatro cursos puede iniciarte en inteligencia artificial con 87 horas por 35 dólares

07/07/2020
Artículo original

Este pack de cuatro cursos puede iniciarte en inteligencia artificial con 87 horas por 35 dólares

En muy poco tiempo, la inteligencia artificial ha pasado a formar parte de nuestra vida cotidiana (desde el email a la banca, pasado por las redes sociales), lo que significa que el mercado laboral cada vez demanda más desarrolladores y analistas con formación en la misma que sean capaces de impulsar sus nuevas aplicaciones.

Por ello, por fortuna, la oferta formativa (frecuentemente, en forma de infoproductos) es cada vez mayor, cualitativa y cuantitativamente... y el usuario interesado en la misma tiene en su mano encontrar múltiples ofertas y promociones.

'Ultimate Artificial Intelligence Scientist Certification Bundle'

La última que hemos encontrado y que os traemos aquí es el 'Ultimate Artificial Intelligence Scientist Certification Bundle' que es posible adquirir a través de varios medios estadounidenses (como Neowin o WindowsCentral) y que consiste en un pack de 4 cursos, que suman más de 87 horas de formación repartida en 670 lecciones.

Los cursos (disponibles únicamente en inglés, eso sí) son los siguientes:

  • 'Machine Learning A-Z': Un repaso de 40 horas por el campo del 'machine learning'. Nos enseña a crear algoritmos y modelos de aprendizaje automático usando los lenguajes Python y R, y nos ofrece plantillas de código.

  • 'Deep Learning A-Z': 23 horas para aprender el funcionamiento de las redes neuronales (incluyendo las redes neuronales convoluciones) y cómo aplicar algunas técnicas punteras de deep learning.

  • 'Python A-Z': Una iniciación de 11 horas usando Python en el ámbito de la ciencia y la analítica de datos. Introducción también al uso de los Jupyter Notebooks.

  • 'Tensorflow 2.0: A complete Guide on the Brand New Tensorflow': 13 horas de contenido para aprender a manejar la última versión del framework de IA más popular del mercado, la herramienta que nos permitirá crear e implementar las redes neuronales.

Los instructores de este 'bundle' o 'pack' de cuatro cursos son los dos cofundadores de la empresa de consultoría en IA BlueLife AI: Hadelin de Ponteves (CEO) y Kirill Eremenko (COO).

Además, los primeros tres cursos forman parte de los itinerarios educativos de SuperDataScience, una plataforma de e-learning que ofrece una cursos sobre IA y ciencia de datos agrupados en base a 4 perfiles: científico de datos, gestor de datos, analista de inteligencia de negocio, e ingeniero de IA.

Durante los próximos 3 días, el precio de estos cursos valorados en 799 dólares será de 34,99, lo que supone una rebaja del 95%. Para animaros a dar el paso, sus creadores garantizan el acceso de por vida al contenido.

Aplicar AOP con JavaConfig

07/07/2020
Artículo original

Hace poco me toco tocar un componente en dónde tuve que aplicar un aspecto, la última vez que lo hice lo configuré con el namespace de AOP de Spring, pero estz vez quise hacerlo todo con JavaConfig; he aquí lo que hice:

El XML era este:

<bean id="monitoringAdvice" class="net.bull.javamelody.MonitoringSpringInterceptor" />
<aop:config>
  <aop:pointcut expression="execution(* com.makingdevs.service..**.*(..))"
    id="monitoringPointcut" />
  <aop:advisor advice-ref="monitoringAdvice" pointcut-ref="monitoringPointcut" />
</aop:config>

leer más

Humble Bundle Python: paga lo que quieras por estas herramientas para aprender a programar valoradas en 1.400 dólares

05/07/2020
Artículo original

Humble Bundle Python: paga lo que quieras por estas herramientas para aprender a programar valoradas en 1.400 dólares

Python es uno de los lenguajes de programación favoritos de los programadores, si nos guiamos por algunos de los informes más grandes que se han publicado recientemente, parece ser incluso en que todos los desarrolladores quieren aprender.

Si tu eres uno de ellos, o incluso si eres un principiante que no sabe nada de programación pero quieres empezar con el bueno de Python, esta oferta de recursos educativos que está ofreciendo la tienda de Humble puede sentarte muy bien.

Humble Software Bundle: Learn Python Programming With PyCharm

El paquete de recursos en cuestión está disponible desde este enlace y la oferta continuará durante más 18 días más al momento de publicar este artículo. El bundle incluye probablemente todo lo que necesitas para empezar a aprender Python y puedes pagar tan poco como 1 euro.

Como todos los chollos de Humble Bundle, estos se ofrecen en escalones. El mínimo es un euro, y el máximo es 22 euros, en total todo el material está valorado en 1.400 dólares estadounidenses.

Si pagas 1 euro o más vas a desbloquear cinco cosas:

Aprender Python
  • Curso de Python para absolutos principiantes
  • Ebook con trucos de Python que incluye 12 vídeos y 127 minutos de material
  • Una colección de pequeños ejercicios de Python para principiantes llamados PyBites
  • 10 semanas de ejercicios de Python Morsels
  • Un curso sobre las comprehensions de Python
  • Dos meses de suscripción a PyCharm

Si pagas más del promedio actual de 15,18 euros obtienes todo lo anterior más:

Python Cursos
  • Un curso sobre creación de web apps en Python con el framework Flask
  • Un curso básico de programación funcional con Python
  • 40 ejercicios más en PyBites
  • Un curso de Python para científicos de datos con 20 vídeos
  • El libro de programación intermedia con Python

Y, si pagas 22 euros o más desbloqueas todo lo anterior además de:

Python Morsels
  • Curso de manejo de dependencias en Python
  • Un curso sobre cómo añadir un CMS a tu aplicación web creada con Flask
  • 60 ejercicios más en PyBites
  • 25 semanas más de ejercicios de Python Morsels
  • Cualquiera de los cursos de 15 semanas de Reuven Lerner
  • 6 meses de suscripción a PyCharm
  • Un curso de programación para el desarrollador autodidacta
  • Un libro para el desarrollador autodidacta
  • Libro de trucos de Python

Humble Bundle Python: para lo que quieras por estas herramientas para aprender a programar valoradas en 1.400 dólares

04/07/2020
Artículo original

Humble Bundle Python: para lo que quieras por estas herramientas para aprender a programar valoradas en 1.400 dólares

Python es uno de los lenguajes de programación favoritos de los programadores, si nos guiamos por algunos de los informes más grandes que se han publicado recientemente, parece ser incluso en que todos los desarrolladores quieren aprender.

Si tu eres uno de ellos, o incluso si eres un principiante que no sabe nada de programación pero quieres empezar con el bueno de Python, esta oferta de recursos educativos que está ofreciendo la tienda de Humble puede sentarte muy bien.

Humble Software Bundle: Learn Python Programming With PyCharm

El paquete de recursos en cuestión está disponible desde este enlace y la oferta continuará durante más 18 días más al momento de publicar este artículo. El bundle incluye probablemente todo lo que necesitas para empezar a aprender Python y puedes pagar tan poco como 1 euro.

Como todos los chollos de Humble Bundle, estos se ofrecen en escalones. El mínimo es un euro, y el máximo es 22 euros, en total todo el material está valorado en 1.400 dólares estadounidenses.

Si pagas 1 euro o más vas a desbloquear cinco cosas:

Aprender Python
  • Curso de Python para absolutos principiantes
  • Ebook con trucos de Python que incluye 12 vídeos y 127 minutos de material
  • Una colección de pequeños ejercicios de Python para principiantes llamados PyBites
  • 10 semanas de ejercicios de Python Morsels
  • Un curso sobre las comprehensions de Python
  • Dos meses de suscripción a PyCharm

Si pagas más del promedio actual de 15,18 euros obtienes todo lo anterior más:

Python Cursos
  • Un curso sobre creación de web apps en Python con el framework Flask
  • Un curso básico de programación funcional con Python
  • 40 ejercicios más en PyBites
  • Un curso de Python para científicos de datos con 20 vídeos
  • El libro de programación intermedia con Python

Y, si pagas 22 euros o más desbloqueas todo lo anterior además de:

Python Morsels
  • Curso de manejo de dependencias en Python
  • Un curso sobre cómo añadir un CMS a tu aplicación web creada con Flask
  • 60 ejercicios más en PyBites
  • 25 semanas más de ejercicios de Python Morsels
  • Cualquiera de los cursos de 15 semanas de Reuven Lerner
  • 6 meses de suscripción a PyCharm
  • Un curso de programación para el desarrollador autodidacta
  • Un libro para el desarrollador autodidacta
  • Libro de trucos de Python

AWS intenta captar desarrolladores con esta nueva herramienta capaz de migrar aplicaciones .NET a Linux

03/07/2020
Artículo original

AWS intenta captar desarrolladores con esta nueva herramienta capaz de migrar aplicaciones .NET a Linux

Portar aplicaciones .NET Framework (para Windows) a .NET Core (multiplataforma) suele obligar al desarrollador a actualizar el formato de los archivos del proyecto, además de a buscar paquetes NuGet compatibles y a actualizar sus referencias, lo que lo convierte este cambio en un proceso tedioso.

Hace seis años, después de que Microsoft bifurcara la plataforma .NET en Framework y Core, ésta lanzó algunas herramientas de portabilidad que, sin embargo, rechazan muchos tipos de proyectos por ser incompatibles con .NET Core: la ausencia de una implementación en .NET Core de frameworks populares como ASP.NET Web Forms está en la raíz de muchas de esas incompatibilidades.

Una herramienta que debería haber publicado Microsoft

De modo que, como forma de atraer a los desarrolladores que necesitan llevar a cabo esta clase de procesos, Amazon Web Services (AWS) ha anunciado el lanzamiento de una nueva herramienta denominada Porting Assistant for .NET.

A diferencia de otras herramientas ya existentes, Amazon afirma que este asistente evalúa tanto el código fuente de la aplicación como el árbol completo de dependencias de la API pública y del paquete NuGet para encontrar aquellas que sea incompatibles con .NET Core y proponer posibles sustitutos.

Scan

Amazon confía en que este nuevo servicio incentive a los desarrolladores de aplicaciones de servidor a migrar a la nube de AWS. Y eso a pesar de una limitación introducida por la propia Amazon: pese a que .NET Core es, como dijimos antes, multiplataforma, el asistente de Amazon parece dirigido en exclusiva a su ejecución sobre Linux.

Empezar a migrar aplicaciones mediante el Porting Assistant es sencillo, una vez resolvemos un par de requisitos previos: instalar el SDK de .NET Core 3.1, y contar con un perfil de credenciales.

Después de eso, podremos recurrir a la potencia del motor de sugerencias de Porting Assistant, que nos propondrá lo mejores reemplazos de paquetes, y cuya precisión se estima que tenderá a ir en aumento, a medida que pueda aprender de los datos de telemetría que los usuarios desean compartir voluntariamente con Amazon.

Vía | The Register

.NET Core / .NET 5: Cómo publicar aplicaciones en un único ejecutable

30/06/2020
Artículo original

Cuando compilas una aplicación con .NET Core de cualquier tipo, tienes dos formas básicas de hacerlo:

  • Generando tan solo los ensamblados propios de tu aplicación y de los componentes que utilicen. En este caso debes estar seguro de que los equipos que van a ejecutar la aplicación tienen instalado el runtime de .NET. Esto es lo que hace por defecto Visual Studio cuando compilas.
  • Incluyendo en el resultado todos los archivos propios de .NET, de modo que el runtime se distribuye con tu aplicación y no es necesario que los usuarios instalen nada. Esto facilita mucho el despliegue a costa de tener que mover un montón de archivos (y "megas").

Da igual la modalidad que escojas: al final acabas con un ejecutable y un número mayor o menor de ensamblados relacionados que vas a necesitar según lo que elijas.

Por ejemplo, para publicar la aplicación sólo con los ensamblados propios basta con que escribas en la línea de comandos (dentro de la carpeta del proyecto) lo siguiente:

dotnet publish -c release -r win10-x64 --self-contained false

Esto generará un ejecutable de tu aplicación para Windows de 64 bits (opción -r) con la configuración "Release" (o sea, para producción: opción -c) y de modo que no sea autosuficiente, por lo que necesitará tener .NET instalado para funcionar. Así que obtendrás tan solo tu ejecutable con los ensamblados que necesite (paquetes NuGet y bibliotecas propias que la acompañen).

Si hubiésemos utilizado --self-contained true se hubiesen incluido también todos los ensamblados de tiempo de ejecución de .NET (runtime), por lo que en nuestra carpeta de publicación tendríamos literalmente cientos de archivos aparte del nuestro.

¿Cómo podemos conseguir un único ejecutable con todo lo necesario?

De esta forma podríamos obtener un único archivo que podríamos enviar con confianza a cualquiera, de modo que, sin necesidad de instalar nada, pueda ejecutar nuestra aplicación. Esto es fenomenal para algunos casos de uso, ya que facilitamos mucho la distribución de la aplicación para que la use cualquiera, basta con descargar un archivo y hacer doble-clic.

Hace poco explicaba cómo puedes conseguir esto mismo con .NET "clásico". Para lograrlo hay que emplear una herramienta especial, ajena a la propia plataforma. Además no se incluyen los propios de .NET, sino tan solo los tuyos.

Sin embargo, en .NET Core ya se ha tenido en cuenta esta posibilidad de serie y no necesitamos nada especial: tan sólo el comando dotnet y usar sus opciones con un poco de habilidad.

En esta ocasión, en lugar de contártelo por escrito, he grabado un vídeo práctico en el que te enseño cómo puedes hacerlo no sólo con aplicaciones de consola o escritorio sino incluso para poder distribuir aplicaciones web autocontenidas, con un único .exe a distribuir para que funcionen:

[youtube:f-HP8yOfGxg]

¡Espero que te resulte útil!

¿Qué diferencias existen entre null y undefined en JavaScript?

29/06/2020
Artículo original

Tanto null como undefined en JavaScript son valores bastante extraños, sobre todo para los principiantes. Ambos sirven para algo muy parecido, que es indicar la ausencia de valor. Lo que ocurre es que undefined es un valor que denota que no hay valor porque no se ha definido todavía, mientras que null se usa para indicar que no hay valor porque así lo hemos querido indicar expresamente. Pero en ambos casos el significado último de "ausencia de valor" es el mismo. Sin embargo ¿en qué se diferencian? Pues en muchas cosas... Vamos a verlas.

Cuando declaras una variable sin inicializarla, así:

var miVariable;
console.log(miVariable);

Verás por consola su valor, que es undefined, que quiere decir que la variable está declarada pero no se ha definido aún su valor.

Sin embargo imagina que ya has utilizado una determinada variable y no quieres utilizarla más, o que tienes asignada una referencia a un objeto pero ya no lo necesitas o que, directamente, quieres tener la variable declarada pero inicializarla con un valor que todavía no sabes qué va a ser exactamente. En todos estos casos lo suyo es asignarle un valor nulo:

var miVariable = null;
console.log(miVariable);

 

que en este caso mostrará el valor null por consola.

Ambos valores son valores de tipo "falsoso", es decir, que actúan como false en las comparaciones. También ambos son tipos básicos de JavaScript, es decir, tipos primitivos como los números o las cadenas, parte intrínseca del lenguaje.

Una cosa curiosa de su uso es la comparación entre ambos valores. Precisamente por las particularidades que tienen, JavaScript a veces tiene que tratar estos dos tipos de manera especial también. Si haces una comparación no estricta entre ellos (con ==), como ambos significan la ausencia de valor, la comparación devuelve un true:

O sea que son iguales??

O sea, que aparentemente los considera iguales. Sin embargo, cuando haces una comparación estricta (con ===), dado que en realidad no son lo mismo, te devuelve un false:

Pues va a ser que no...

De hecho, esta situación es tan especial que el propio estándar ECMAScript define explícitamente cómo debe hacerse para este caso en particular (en caso de duda, siempre conviene ir al estándar):

captura de pantalla del estándar en la que dice explícitamente que no son iguales

Por eso es mejor generalmente usar la igualdad estricta que la "relajada", y no solo con estos valores "especiales".

Otra diferencia entre ellos es que aunque puedes asignar explícitamente el valor undefined a una variable para dejarla sin inicializar:

var miVariable = 1; miVariable = undefined; console.log(miVariable);

y por lo tanto es una asignación válida de JavaScript, no puedes utilizar esta asignación en JSON porque te daría un error al procesarlo. Por ejemplo, esto es lo que indica el parser de JSON de Firefox al intentar abrir un objeto JSON que tiene una propiedad con el valor undefined asignado:

Imagen que muestra cómo el JSON da error al parsearlo

Esto no quiere decir que no podamos usarlo en JavaScript (aunque no lo recomiendo):

La imagen muestra como undefined sí funciona en JSON de JavaScript

pero en el estándar ECMA para JSON dice explícitamente los valores que están soportados y no esta undefined:

Los valores válidos son objetos, arrays, números, cadenas, true, false y null

Así que si lo intentas "parsear" con JSON.parse() fallará estrepitosamente:

La imagen muestra el error que produce JSON.parse al parsear JSON con un undefined

Si intentas usar undefined en una operación matemática, te devolverá un NaN (algo que no es un número), ya que no es un número ni hay una conversión implícita:

Operación aritmética con undefined produce NaN

Sin embargo, si haces lo mismo con null, sorprendentemente funciona ya que null se considera un 0 en las operaciones matemáticas:

En las operaciones matemáticas null se considera como un cero

Otra diferencia más.

Finalmente, puedes averiguar si un valor está sin definir con typeof, que devolverá la cadena "undefined" ya que, como dije antes es un tipo intrínseco. Sin embargo en el caso de null, typeof devolverá "Object" ya que lo considera un objeto sin inicializar:

los resultados de typeof con undefined y null

 

Como vemos, aunque muy similares, sus objetivos son muy diferentes y son tratados de manera muy distinta por JavaScript (y JSON).

¡Espero que te resulte útil!

Página Siguiente