toggle
¿Os esperabais una gran empresa? Siento defraudaros. vissit.com es básicamente un proyecto personal, que uso como herramienta de formación, y como plataforma de difusión para mostrar públicamente mi experiencia. En vissit.com podréis encontrar artículos relacionados con el trabajo que llevo desempeñando estos ultimos años. Actualmente me encuentro trabajando en Paradigma Tecnológico desde hace más de un año, y que me permite el tener acceso a proyectos web punteros, con el que mejorar mis conocimientos y experiencia día a día. Si seguís interesado en este humilde maquetador y front developer podéis seguirme en twitter. También dispongo de perfil de facebook, pero no publico nada profesional en él, por lo que no creo que os resulte muy interesante seguirme.

siguenos tambien en...

Detectar imágenes erroneas con Javascript

Hola, hace muchísimo que no escribía algo por aquí, pero hoy me he encontrado con una función que me va a ser de mucha ayuda en mis proyectos.

En muchas ocasiones me he encontrado con problemas para detectar por JS si las imágenes que quiero cargar existen o no. Ahora ya no volveré a tener este problema gracias a esta función:

function checkForErrorImages(wrapId, selector) {
    var imgs = document.getElementById(wrapId).querySelectorAll(selector);

    imgs.forEach(function (img) {
        img.onerror = function () {
            this.setAttribute('src', 'alternativeImage.jpg');
        }
    });
}

Espero que también te sirva de ayuda a ti.

Funciones básicas alternativas para transitar desde jQuery a Vanilla JavaScript

Supongo que no soy el único que empezó a usar JavaScript por medio de jQuery. La librería jQuery ha sido crucial para el desarrollo en Front, nos ha permitido a los desarrolladores hacer casi todo lo que queríamos de una manera rápida, sencilla y sin preocuparse por los navegadores. El único inconveniente que tenía era que debíamos de cargar la librería, que no era especialmente ligera, y que ralentizaba la carga y uso de la web en cuestión.

Gracias al desarrollo del JavaScript «a pelo» (llamado Vanilla JS, o Plain JS) ahora ya podemos prescindir de jQuery y seguir disfrutando de la facilidad de uso, pero aún así a mi me está costando dar el salto de jQuery a VanillaJS, y es que son ya muchos años trabando del modo jQuery.

jquery_to_js

(más…)

Async / await / promises

Hoy he tenido que usar la funcionadlidad de Async de Javascript para resolver un problema complejo en uno de mis programas. Lo he resulto con este código. Creo este artículo para que mi yo del futuro pueda consultarlo. Espero que a alguno de vosotros también os sea de utilidad.

function exampleFun1 () {
  return new Promise(resolve => {
    setTimeout(function () {
      resolve('exampleFun2 done');
    }, 1000);
  });
};

async function exampleFun2 () {
  const promises = [1,2,3,4].map(exampleFun3);
  await Promise.all(promises);
}

async function exampleFun3(item) {
  return new Promise(resolve => {
    setTimeout(function () {
      resolve('exampleFun3 done', item);
    }, 1000);
  });
};

async function updateAllStatus() {
  // Ejecuta estas funciones y espera hasta que terminen
  const await1 = await exampleFun1();
  const await2 = await exampleFun2();

  // Si han terminado sigue la ejecución
  console.log('Todo ha terminado');

  return true;
}

Vídeos de navidad de Paradigma.

Por unos motivos o por otros casi todos los años estoy involucrado en el proceso de creación de los vídeos de fin de año de Paradigma. Estos vídeos ya se han convertido en toda una tradición, ya que llevamos desde el 2013 creandolos.

Este «ritual» cada vez me gusta más, y se convierte en uno de los momentos más especiales del año. A parte, me permite por unos días apartarme de mis tareas de desarrollo web, para centrarme en algo muy diferente y creativo.

Aprovecho a enlazarlos aquí, para tenerlos todos juntitos, que de vez en cuento me apetece volverlos a ver. Y así me doy cuenta de como cada año vamos subiendo un poco el listón.

Espero que este año estemos a la altura 💪

EsÉpocaDeHéroes. El desafío de hacer, entre todos, un mundo mejor.

EsÉpocaDeHéroes. El desafío de hacer, entre todos, un mundo mejor

Te deseamos un año lleno de creátiles, ¡Feliz 2019!

Te deseamos un año lleno de creátiles, ¡Feliz 2019!

Tu felicidad, nuestro objetivo para 2018. ¡Feliz año!

Tu felicidad, nuestro objetivo para 2018. ¡Feliz año!

Paradigma, más que un equipo. ¡Feliz 2017!

Paradigma, más que un equipo. ¡Feliz 2017!

¡Gracias por otro año juntos!. Felicitación 2015.

¡Gracias por otro año juntos!

Felicitación navideña de 2014.

Paradigma Digital – Felicitación navideña de 2014

Felicitación navideña de 2013.

Paradigma Digital – Felicitación navideña de 2013 (v. final)

Menos tecnologías y más conocimiento

Todos sabemos que vivimos en un sector totalmente cambiante, en el que no te puedes quedar atascado, y debes de formarte día a día para no convertirte en un viejo desfasado que siga usando COBOL.

Eso está muy bien, pero en lo relativo a Javascript lo estamos llevando un poco al extremo y llevamos ya unos años en el que cada día aparecen nuevos frameworks que parece que se van a comer el mundo. También surgen nuevos lenguajes de programación que supone eliminarán todos los problemas de sus predecesores.

No dudo que cada nuevo framework/librería/lenguaje mejora al anterior, hace nuestra vida más fácil y nos permite desarrollar mejores aplicaciones.

frameworks_css_js_php

Desde el departamento comercial ya se intenta vender los proyectos en la última tecnología que esté de moda, se venden mejor. A los clientes les mola saber que están a la última (hasta dentro de 3 meses, claro), a los desarrolladores también nos gusta trabajar con esas tecnologías de moda, y así  poder añadir una nueva línea a nuestro flamante Curriculum, y Recursos Humanos no para de buscar gente que sea senior en tecnologías que hace un año ni existían.

Todo esto está muy bien, genera movimiento en el sector, y hace que no nos acomodemos, pero me da la sensación que también tiene una parte negativa. Estamos dando más importancia a saber cual es la tecnología que está de moda este mes y sus peculiaridades, más que a obtener verdaderos conocimientos de base sobre la programación web.

Muchas de estos frameworks/librerías/lenguajes cambian profundamente la forma de trabajar y es necesario conocerlas en profundidad para sacarles todo el jugo. Aunque cada una tiene sus particularidades, siempre será mas fácil resolverlo si tenemos una gran base de conocimiento, y buenas nociones sobre las buenas prácticas en la programación (me da igual en que lenguaje).

Cada día estoy más convencido de que no importa tanto en que lenguaje se desarrolla una aplicación, si no que en tu equipo dispongas de profesionales que sean auténticos seniors en el uso de esa tecnología, personas que tengan los «huevos pelados» de haber encontrado soluciones a los problemas que surgen en casi todas las aplicaciones.

En cada proyecto me encuentro que «perdemos» tiempo en resolver problemas que ya hemos tenido que resolver en el proyecto anterior, y buscar de nuevo la solución para esta nueva tecnología.

No importa si lo haces con Java, PHP, Python o con Javascript, hazlo del modo que seas más eficiente.

 

Beneficios de la baja de paternidad en media jornada

Hace poco más de un mes, así de repente, me cambio la vida de la noche a la mañana. Fui al hospital como un millennial de medio pelo, y ¡volví siendo padre!.

Uno nunca acaba de estar preparado para este tipo de acontecimientos, y por mucho que leas y preguntes, una cosa es la sencilla y distante teoría, y otra la inquietante y cercana realidad.

Un recién nacido no hace prácticamente nada, unos ruiditos por aquí, una especie de presunta sonrisilla por alla, un meconio en el peor momento,…. pero aun así no puedes dejar de pasar horas y horas mirando fijamente a la nueva criatura.

En estos momentos, en los que no quieres hacer nada más que malcriar a tu hijo/a y cuidar de tu mujer, tienes que hacer frente a algunas otras cosas…. el papeleo … y empezar a tomar algunas decisiones.

Leyendo sobre que debía de hacer para poder disfrutar de la baja de paternidad me encontré con una sorpresa, la baja se puede disfrutar en forma de medía jornada. No sabía que se pudiera hacer, y no conozco a nadie que lo haya hecho hasta la fecha, pero me sonó de lo más interesante, y por este motivo, ahora, una vez disfrutada esta baja, escribo este artículo, por si fuera de ayuda a algún futuro padre.

finger

(más…)

Guía para los z-index

He creado esta guía con la intención de ser coherente con los z-index que uso en mis maquetación. Al poner un nuevo z-index en mis aplicaciones siempre tengo la sensación de que no va a ser el más correcto.

Espero que a partir de ahora esta guía me solucione estos problemas, y ojala los vuestros también.

zindex_guide

Adiós TimThumb, la seguridad es lo primero

Hoy, con todo el dolor de mi corazón, he empezado a despedirme del plugin TimThumb, para la redimensión de imágenes.

Lo venia usando en todos mis wordpress, pero debido a vulnerabilidades en la creación de las imágenes ya he sido atacado por nuestros amigos los rusos en varias ocasiones.

Al final he optado por remplazarlo por esta otra función que usa funcionalidades nativas de wordpress para hacer estas tareas. De momento parece igual de sencilla que TimThumb, y parece que no tiene vulnerabilidades conocidas.

Espero que este cambio aleje a los hackers rusos de mis webs.

Os iré informando.

Insertar parámetros en URL con Javascript 

function insertParam(uri, key, value) {
    if (key.toString().indexOf(",") > -1) {
        key = key.split(",");
    }
    if (value.toString().indexOf(",") > -1) {
        value = value.split(",");
    }

    if ( _.isArray(value) ) {
        _.each(value, function (val, index) {http://localhost/produban/areaHome.php#
            uri = insertParamCore(uri, key[index], val);
        });
    } else {
        uri = insertParamCore(uri, key, value);
    }

    return uri;
}

function insertParamCore(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    }
    else {
        return uri + separator + key + "=" + value;
    }
}

Attempt to get responsive images

I’m trying to create an easy method to get responsive images for my web sites.

Check it working on this demo page.

In this case I’m gonna show I’ll get responsive background for an specific panel.

<div data-responsive-bg="360,[IMG_MEDIUM];768,[IMG_BIG]">style="background-image:url([IMG_SMALL]);">

By default the panel will show an small version of the image. As this image has a smaller weight, it’ll make the page load faster. For small devices we’ll keep it like that, but with Javascript the plugin search, depending of the panel width, if we provide a better image for this case.

With jQuery the plugin search all the panels that has an attribute: data-responsive-bg. This attribute show in key,value format all the different versions of the image that we are gonna provide. In the previous case we have two image:

  • [IMG_MEDIUM] to be show when the panel is wider than 360 pixels
  • [IMG_BIG] to be show when the panel is wider than 768 pixels

(más…)