Gran artículo que quiero recuperar del ya inexistente blog Sofanaranja de Ale Muñoz.

He encontrado un repositorio donde tiene los artículos guardados, mil gracias!!

https://github.com/bomberstudios/sofanaranja/blob/master/_posts/2008-04-10-fundamentos-de-diseno-la-regla-de-0-1-n.md

Es un teorema/principio/hipótesis/regla empírica, que tiene sus raíces en el mundo de la programación. Mi fuente de inspiración fue el Wiki de C2 (una joya de la información, por cierto)

La regla, en su versión diseñosa, viene a decir:
Cualquier elemento de diseño puede existir cero, una, o infinitas veces.
Destripemos la frase un poco:

Cualquier elemento de diseño se refiere a «cualquiera». Iconos, botoncillos, cajas de texto, elementos de menú…
puede existir cero quiere decir que no existe. Punto pelota. «El site no tiene menú a la izquierda». «No hay buscador». «Un post nunca llevará una imagen»

una quiere decir 1, la unidad, sólo uno de ese tipo. «El logo estará arriba a la izquierda». «La caja de búsqueda estará arriba la derecha».

o infinitas veces pasando del 1, el resto de los números no significan nada. Si el blog tendrá más de 1 post en portada, debería poder tener 5, ó 20, ó 500.

Un porcentaje muy importante de los problemas de diseño* que me encuentro tienen su raíz en no observar esta regla. No importa que hayas definido que tu portada de periódico tendrá 2 destacados. Mañana sucederán 5 cosas tan importantes que tendrán que destacarlas en portada.

* «diseño» se usa aquí en su acepción más amplia, incluyendo arquitectura de información y HCI.

Mi consejo es bastante simple: el único número al que deberías cogerle cariño es el 1. Los demás no existen. Invierte tu tiempo diseñando sistemas flexibles que admitan crecimiento ilimitado, no en cuadrar pixels para que quepan las 3 promos en el ancho de la columna 😉

Hay quien utiliza el operador ternario como sustituto del condicional… sin embargo no son equivalentes.

Un ternario es una expresión, es decir, que devuelve un valor. Mientras que un if/else es una estructura de código, bifurca un camino.

La situación ideal para usarlo es esta:

// Incorrecto
const a = 5;
let b;
if (a === 5){
  b = 3;
} else {
  b = 2;
}

// Correcto
const a = 5;
const b = a === 5 ? 3 : 2;

• Se debe utilizar un operador ternario sólo cuando se necesita utilizar el valor que devuelve.
• Cuando el valor devuelto es uno de dos valores distintos.
• Cada parte de la expresión (detrás del ? y de : ) debe devolver un valor sin generar efectos secundarios.
• Si el operador ternario genera demasiada complejidad, código difícil de mantener o dificulta la lectura es mejor usa otras estructuras más fáciles de simples.

Muchas veces es más simple usar un condicional o un operador lógico:

// Incorrecto	 	 
a = x ? b : a;	
 	 
// Correcto	 	 
if (x){	 	 
 a = b;	 	 
}

// Incorrecto	 	 
a = a ? a : b;
	 
// Correcto	 	 
a = a || b;

Hay una regla de Linter que pone ejemplos interesantes:

https://eslint.org/docs/rules/no-unneeded-ternary

Con esta API relativamente nueva de JavaScript podemos hacer que nuestros propios objetos emitan eventos como lo haría un elemento nativo del DOM.

La definición es un poco escueta, pero es que es tan simple de usar que parece mentira ;p

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

// MyClass.js
class MyClass extends EventTarget {
    myMethod() {
        this.dispatchEvent(new CustomEvent('my-custom-event', {
            detail: 'Contenido que se envía en el evento'
        }));
    }
}

// Para usarlo
const myObject = new MyClass();
myObject.addEventListener('my-custom-event', (event) => {
    console.log(event); // Evento completo con el detail
});

Este servicio web nos permite publicar nuestro proyecto a un servidor de forma rapidísima y grátis!!.
Es estupendo para subir proyectos de pruebas con una url pública accesible desde cualquier dispositivo.

https://surge.sh/

Se instala una librería con npm, se crea una cuenta de usuario directamente, y se sube con un nombre único. Más fácil imposible.

En la web se explica todo perfectamente, cómo crear un alias para el proyecto o como especificar la carpeta a subir.

A mi me ha solucionado la vida para ver un proyecto de React con las rutas del Router funcionando bien 😀

Las promesas me encantan. Hacen muy fáciles las llamadas asíncronas en JavaScript. Aunque a veces su sintaxis es un poco engorrosa.

cargarDatos() {
   obtenerListadoUsuarios()
   .then(mostrarResultado)
   .catch(haHabidoUnError);
}

Utilizando la sintáxis Async/Await podemos simplificar su uso.

async cargarDatos() {
   const usuarios = await obtenerListadoUsuarios();
   // Si la consulta falla no llega a esta línea :(
   mostrarResultado(usuarios);
}

Mucho más fácil de leer y mantener :D.

El problema es, que cuando el método falla, la línea de la consulta dará un error de JavaScript y el resto de nuestro código dejará de funcionar.
Mal asunto 🙁

Se suele utilizar el Try/Catch para controlar el error, pero… en mi opinión eso es como seguir usando el Then/Catch pero con otro nombre!!!

Realmente await devuelve una Promesa, por lo que se le puede concatenar un catch al final. En ese catch podemos controlar el error y devolver un valor por defecto.
Si falla la consulta devuelvo undefined. De esta forma, el valor de usuarios es, o el resultado de la consulta, o undefined.
En cualquier caso el código continuará y posteriormente puedo controlar y gestionar si el resultado ha sido el esperado o undefined.
Un error controlado.

async cargarDatos() {
   const usuarios = await obtenerListadoUsuarios().catch(() => undefined);
   // La consulta devolverá el resultado o undefined
   if (usuarios) {
      mostrarResultado(usuarios);
   }
}

O bien si se espera un Array con valores, se puede devolver un Array vacío en caso de error y continuar el flujo.

async cargarDatos() {
   const usuarios = await obtenerListadoUsuarios().catch(() => []);
   // La consulta devolverá el resultado o [], pero no fallará
   mostrarResultados(usuarios);
}

Respuesta corta:

// Utilizo bind para vincular la función con el scope this
this.onClick = this.onClick.bind(this);

Respuesta larga:

Al pasar el manejador del evento como un callback, se pierde el ámbito, de tal manera que la función se ejecuta correctamente, pero dentro de ella se cree que this es el propio botón (la etiqueta html <button>). Cuando realmente nosotros esperamos que this sea la propia clase.

Para solucionarlo basta con reasignar en el propio constructor el scope que debe tener esa función.

this.onClick = this.onClick.bind(this);

y nuestra clase funcionará como esperamos:

class Foo{
 
  constructor(){
    this.onClick = this.onClick.bind(this);
    // Listener del boton
    document.getElementById('button').addEventListener('click', this.onClick);
  }
 
  onClick(){
    console.log(this); // Foo {...}
    // Ahora puedo remover el listener sin problema
    document.getElementById('button').removeEventListener('click', this.onClick);
  }
 
}
 
var foo = new Foo();

Una muy buena referencia y explicado con más detalle: https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

A menudo cuando vamos a escribir, por ejemplo

npm install vue

seguramente nos de un error de permisos, y tengamos que utilizar sudo para que se pueda instalar, insertando la contraseña de administrador.

Tras mucho buscar he encontrado esta forma de solucionarlo, bastante fácil de aplicar.

Consiste en usar nvm (Node Version Manager) para instalar Node desde el terminal en lugar del instalador ejecutable.

Instalamos nvm con Brew

brew install nvm

Luego podemos ver las versiones actuales de Node

nvm ls-remote

e instalamos la última, en mi caso la 10.16.3

nvm install v10.16.3

Visto en https://www.competa.com/blog/use-nvm-for-fun-and-profit-and-to-run-npm-without-sudo/

Qué mejor excusa para volver a escribir que contaros el fin de semana en Subflash que este año ha sido en Torrelavega.

Si estamos tratando de cargar un archivo desde el móvil, por ejemplo tras buscarlo con el explorador de archivos de Android, seguramente nos dará un error como este:

Refused to connect to 'content://...' because it violates the following Content Security Policy directive...

Esto es debido a que las rutas de tipo «content://…» no son rutas válidas cuando hacemos un window.resolveLocalFileSystemURL (plugin File)

Para obtener la ruta real (del tipo file:///…) necesitamos usar Cordova Plugin FilePath, así:

window.FilePath.resolveNativePath('content://com.android.externalstorage.documents/document/...', successCallback);
 
function successCallback(realPath){
   console.log(realPath);   // file:///storage/emulated/0/Android/data...
}

Lo he encontrado tras mucho buscar, en Ourcodeworld

Descargar Cordova Plugin FilePath

Podemos añadir métodos getters y setters implícitos a nuestros propios objetos, tal y como se hace en otros lenguajes de programación.

var Bola = function(){
   var _api = {};
   var _diametro = 10;
 
   // Defino la propiedad "diametro" en el objeto que retorna mi constructor
   Object.defineProperty(_api, 'diametro', {
      get:function(){
         return _diametro;
      },
      set:function(value){
         _diametro=value;
      }
   });
 
   return _api;
}

Ahora podemos crear una instancia de Bola y utilizar nuestros nuevos métodos diametro (getter) y diametro=valor (setter)

var miBola = new Bola();
miBola.diametro;   // 10
miBola.diametro = 55;
miBola.diametro;   // 55

Documentación de Object.defineProperty()