Archivo de la categoría ‘Desarrollo Web’

Subir a un servidor un proyecto en 1 minuto

Publicado por Iván Gajate el 23 de noviembre de 2020 en Desarrollo Web, JavaScript | No hay comentarios »

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 😀

JS – Manejo de errores con Async/Await

Publicado por Iván Gajate el 21 de noviembre de 2020 en Desarrollo Web, JavaScript | No hay comentarios »

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

Bind en las clases de ES6 de JavaScript

Publicado por Iván Gajate el 21 de septiembre de 2019 en Desarrollo Web, Eventos, JavaScript | Los comentarios están cerrados.

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/

Usar npm sin sudo

Publicado por Iván Gajate el 8 de septiembre de 2019 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

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/

Subflash 2019 Cantabria

Publicado por Iván Gajate el 30 de agosto de 2019 en css, Desarrollo Web, JavaScript, marketing | Los comentarios están cerrados.

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

Leer el resto de esta entrada

Cordova – Problema de seguridad al cargar archivos del dispositivo

Publicado por Iván Gajate el 30 de noviembre de 2016 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

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

CSS – Cambiar el SRC de una Imagen

Publicado por Iván Gajate el 17 de noviembre de 2014 en Desarrollo Web | Los comentarios están cerrados.

Se puede cambiar el src de una imagen por css, utilizando la propiedad content.

.miImagen{
    content:url("http://path/to/imagen.jpg");
}

Visto en Stackoverflow

No es compatible con todos los navegadores (Internet Explorer…) pero para móviles lo podemos utilizar con seguridad http://caniuse.com/#search=content.

Sublime Text – Side By Side Plugin

Publicado por Iván Gajate el 17 de noviembre de 2014 en Desarrollo Web | Los comentarios están cerrados.

He instalado este plugin en Sublime para comparar dos archivos, uno al lado del otro, con los scrolls sincronizados.
Es muy útil porque añade renglones en blanco para que se vean ambas páginas en paralelo.

https://bitbucket.org/dougty/sublime-compare-side-by-side

HTACCESS – Redirección con Ancla

Publicado por Iván Gajate el 30 de octubre de 2014 en Desarrollo Web | 1 comentario »

Si queremos redirigir una url que contenga un hash (ancla) utilizando htaccess podemos usar el flag NE (noscape) para que no nos convierta la almohadilla (#) en %23

RewriteRule .* https://example.com/sample/#tag [R=301,NE,L]

Y el resultado sería este

https://example.com/sample/#tag

Visto en https://revolvedmedia.com/htaccess-rewrite-changes-anchor-tag-hash-%23-destination-url/#-destination-url/

Timeline – Parámetro Position

Publicado por Iván Gajate el 6 de octubre de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Sigo siendo super fan del TweenMax como herramienta para animar, y cuando utilizas a fondo el TimelineMax se pueden hacer animaciones que nunca pensaste hacer en HTML 🙂
Hay un parámetro extra al final del todo que nos da mucha flexibilidad. Position:

.to( target, duration, vars, position )

Lo que hace es «sacar» esa animación de su flujo normal en el timeline y fuerza a que empiece en otro momento que nosotros queramos.
Podemos decirle que empiece en un tiempo concreto desde que empezó el timeline, un segundo, dos segundos… o relativo a lo que sería su tiempo normal de comienzo, «+=1» por ejemplo empieza un segundo después de lo que le correspondería.
También se puede crear un label como haríamos en Flash para referirnos a ese momento con mayor facilidad.

Algo así:

 

tl.to(element, 1, {x:200})
  //1 second after end of timeline (gap)
  .to(element, 1, {y:200}, "+=1")
  //0.5 seconds before end of timeline (overlap)
  .to(element, 1, {rotation:360}, "-=0.5")
  //at exactly 6 seconds from the beginning of the timeline
  .to(element, 1, {scale:4}, 6);

Se explica muy bien en el propio vídeo de Greensock.

Hay ejemplos muy chulos como este.