Usar npm sin sudo

Publicado por Iván Gajate el 8 de septiembre de 2019 en Desarrollo Web, JavaScript | No hay comentarios »

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 | No hay comentarios »

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

JS – Getters y Setters implícitos en un objeto

Publicado por Iván Gajate el 19 de noviembre de 2016 en JavaScript | Los comentarios están cerrados.

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()

JS – Recoger Parámetros de la Etiqueta Script

Publicado por Iván Gajate el 22 de febrero de 2015 en JavaScript | Los comentarios están cerrados.

Si tenemos una etiqueta script con algún parámetro así:

<script type="javascript" src="js/myscript.js?id=123"></script>

podemos recoger los parámetros usando esta función:

// Extract "GET" parameters from a JS include querystring
function getParams(script_name) {
  // Find all script tags
  var scripts = document.getElementsByTagName("script");
 
  // Look through them trying to find ourselves
  for(var i=0; i<scripts.length; i++) {
    if(scripts[i].src.indexOf("/" + script_name)>-1 && scripts[i].src.indexOf("?")>-1) {
      // Get an array of key=value strings of params
      var pa = scripts[i].src.split("?").pop().split("&");
 
      // Split each key=value into array, the construct js object
      var p = {};
      for(var j=0; j<pa.length; j++) {
        var kv = pa[j].split("=");
        p[kv[0]] = kv[1];
      }
      return p;
    }
  }
 
  // No scripts match
  return {};
}

Visto en loopj.com

Así, getParams(‘myscript’) devolverá:

{id:123}

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/

JS – Métodos Estáticos en JavaScript

Publicado por Iván Gajate el 26 de octubre de 2014 en JavaScript | Los comentarios están cerrados.

A veces podemos necesitar que una clase que instanciemos muchas veces guarde alguna variable o método a nivel de clase, no a nivel de instancia (variables estáticas).
Podemos usar las clausuras para ello:

http://jsfiddle.net/yporqueno/h1n2gk2d/

var Persona = function (){
    // Variable de clase (estatica)
    var count = 0;
 
    // Constructor de la clase Persona
    var fn = function(){
        var _api = {};
        _api.saluda = function(){
            alert('Hola #'+count);
        };
        count++;
        return _api;
    };
 
    // Metodo estatico de Persona
    fn.getCount = function(){
        alert('Numero de personas '+count);
    }
 
    return fn;
}();

De esta manera la variable «count» solo se crea una vez, y queda accesible para cada instancia que creemos de la clase Persona.
Ahora podemos crear tantas instancias como queramos de Persona y acceder al conteo que lleva la clase de forma centralizada.

var manolo = new Persona();
manolo.saluda();
 
var pepe = new Persona();
pepe.saluda();
 
// Metodo estatico de la clase Persona
Persona.getCount();

Gracias Javi por la idea!! 🙂

CSS – Centrar Vertical y Horizontalmente un Elemento

Publicado por Iván Gajate el 14 de octubre de 2014 en css | 1 comentario »

Hay otras formas para centrar un objeto en pantalla, pero esta me resulta la más cómoda.

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: table;

Es importante el display table para que lo centre verticalmente.

Ejemplo en JSfiddle

Lo bueno, es que no necesita tener un tamaño especificado para funcionar bien.
Por supuesto se puede usar para centrar solo verticalmente.
Gracias Irene! 🙂