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.

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.

Para intentar aliviar este cambio, he recopilado una sería de funciones que ya usaba de manera recursiva en jQuery, que hacen que mi código JS sea más limpio y asemejarlo un poco más a mi quería librearía.

He juntado todas ellas (y otras que vendrán) en un fichero que enlazo en mis proyectos, y así puedo hacer referencia a estas funciones a lo largo de todo el proyecto.

<script src="/js/plainJS.js" />

Seleccionar elementos del DOM

Esta es una de las tareas que más veces debemos de hacer, y con jQuery era tan sencillo como usar la función $. Ahora con Javascript podemos hacer uso de toda esta potencia por medio de document.querySelector y document.querySelectorAll, pero debemos de escribir muchos caracteres cada vez que queremos usarlo. Por eso podemos crear una función $ y $1 (o como tu quieras llamarla) que te haga ser más eficiente.

// Seleccionar una lista de elementos por medio de un selector CSS. El contexto es opcional
function $(selector, context) {
    return (context || document).querySelectorAll(selector);
}

// Seleccionar el primer elemento que tenga el selector CSS. El contexto es opcional:
function $1(selector, context) {
    return (context || document).querySelector(selector);
}

Ejemplos:

// Seleccionar todos los elementos '.bar' dentro de contenedores '.foo'
var elems = $('.foo .bar');

// ejemplo con contexto
var container = $1('.foo');
// seleccionar elementos '.bar' dentro del contenedor
var elems = $('.bar', container);

fuente.

Añadir, eliminar y comprobar clases

function hasClass(el, className) {
    return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className);
}

function addClasses(el, classesArray) {
    if ( classesArray instanceof Array ) {
        for ( var i = 0; i < classesArray.length; i++ ) { addClass(el, classesArray[i]); } } else { addClass(el, classesArray); } } function addClass(el, className) { if ( el ) { if ( el.tagName ) { doAddClass(el, className); } else if ( el.length >= 1 ) {
            for ( var i = 0; i < el.length; i++ ) {
                doAddClass(el[i], className);
            }
        }
    }
}

function removeClasses(el, classesArray) {
    if ( classesArray instanceof Array ) {
        for ( var i = 0; i < classesArray.length; i++ ) { removeClass(el, classesArray[i]); } } else { removeClass(el, classesArray); } } function removeClass(el, className) { if ( el ) { if ( el.tagName ) { doRemoveClass(el, className); } else if ( el.length >= 1 ) {
            for ( var i = 0; i < el.length; i++ ) {
                doRemoveClass(el[i], className);
            }
        }
    }
}

function doAddClass(el, className) {
    if (el.classList) {
        el.classList.add(className);
    } else if (!hasClass(el, className)) {
        el.className += ' ' + className;
    }
}

function doRemoveClass(el, className) {
    if (el.classList) el.classList.remove(className);
    else el.className = el.className.replace(new RegExp('\\b'+ className+'\\b', 'g'), '');
}

function toggleClass(el, className) {
    if ( hasClass(el, className) ) {
        removeClass(el, className);
        return false;
    } else {
        addClass(el, className);
        return true;
    }
}

Ejemplos:

var el = document.querySelector('div');
if (!hasClass(el, 'foo')){
    addClass(el, 'foo');
}

fuente.

Manipular el DOM

function appendTo(wrap, newElem) {
    wrap.insertAdjacentHTML( 'beforeend', newElem);
}

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

// document.getElementById("my-element").remove();
Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
};

// document.getElementsByClassName("my-elements").remove();
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
};

// know if parents has a selector
// var parents = getParents(elem, '.some-class');
// var allParents = getParents(elem.parentNode);
var getParents = function ( elem, selector ) {

	// Element.matches() polyfill
	if (!Element.prototype.matches) {
		Element.prototype.matches =
			Element.prototype.matchesSelector ||
			Element.prototype.mozMatchesSelector ||
			Element.prototype.msMatchesSelector ||
			Element.prototype.oMatchesSelector ||
			Element.prototype.webkitMatchesSelector ||
			function(s) {
				var matches = (this.document || this.ownerDocument).querySelectorAll(s),
					i = matches.length;
				while (--i >= 0 && matches.item(i) !== this) {}
				return i > -1;
			};
	}

	// Setup parents array
	var parents = [];

	// Get matching parent elements
	for ( ; elem && elem !== document; elem = elem.parentNode ) {

		// Add matching parents to array
		if ( selector ) {
			if ( elem.matches( selector ) ) {
				parents.push( elem );
			}
		} else {
			parents.push( elem );
		}

	}

	return parents;

};

Obtener posición

function offset(el, parentElem) {
    var rect = el.getBoundingClientRect(),
        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
        scrollTop = window.pageYOffset || document.getElementById(parentElem).scrollTop || document.documentElement.scrollTop;

    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

Ocultar o mostrar elementos

function hide(el) {
    el.style.display = 'none';
}

function show(el, value) {
    el.style.display = value;
}

function toggleVisibility(el, value) {
    var display = (window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle).display;
    if (display == 'none') el.style.display = value;
    else el.style.display = 'none';
}

Ejemplos:

hide( elem );
show( elem, 'block' );
toggleVisibility( elem, 'block' );

fuente.

Poner estilos CSS a un elemento

function css(el, styles) {
    for (var property in styles) {
        el.style[property] = styles[property];
    }
}

Ejemplos:

var el = document.querySelector('div');
css(el, { background: 'green', display: 'none', 'border-radius': '5px' });

fuente.

Animar una propiedad del elemento

// fade an element from the current state to full opacity in "duration" ms
function fadeOut(el, duration) {
    var s = el.style, step = 25/(duration || 300);
    s.opacity = s.opacity || 1;
    (function fade() {
        if ( ( s.opacity -= step) < 0 ) { s.display = "none"; } else { setTimeout(fade, 25); } })(); } // fade out an element from the current state to full transparency in "duration" ms // display is the display style the element is assigned after the animation is done function fadeIn(el, duration, display) { var s = el.style, step = 25/(duration || 300); s.opacity = s.opacity || 0; s.display = display || "block"; (function fade() { if ( ( s.opacity = parseFloat(s.opacity)+step) > 1 ) {
            s.opacity = 1;
        } else {
            setTimeout(fade, 25);
        }
    })();
}

Ejemplos:

fadeOut(elem, 500);
fadeIn(elem, 500);

fuente.

Peticiones Ajax

function getAjax(url, success) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
    };
    //xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send();
    return xhr;
}

function getCORS(url, success) {
    var xhr = new XMLHttpRequest();
    if (!('withCredentials' in xhr)) xhr = new XDomainRequest(); // fix IE8/9
    xhr.open('GET', url);
    xhr.onload = success;
    xhr.send();
    return xhr;
}

function postAjax(url, data, success) {
    // example request
    // postAjax('http://foo.bar/', 'p1=1&p2=Hello+World', function(data){ console.log(data); });

    // example request with data object
    // postAjax('http://foo.bar/', { p1: 1, p2: 'Hello World' }, function(data){ console.log(data); });

    var params = typeof data == 'string' ? data : Object.keys(data).map(
        function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
    ).join('&');

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open('POST', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
    };
    //xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(params);
    return xhr;
}

Ejemplos:

getAjax('http://foo.bar/?p1=1&p2=Hello+World', function(respone){
    var jsonData = JSON.parse(respone);
    console.log(respone);
    console.log(jsonData);
});

// example request
postAjax('http://foo.bar/', 'p1=1&p2=Hello+World', function(data){ console.log(data); });

// example request with data object
postAjax('http://foo.bar/', { p1: 1, p2: 'Hello World' }, function(data){ console.log(data); });

fuente.

Mergear dos objetos

function extend(obj, src) {
    Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
    return obj;
}

Crear, obtener y borrar Cookies

function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + 24*60*60*1000*days);
    document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}

function deleteCookie(name) { setCookie(name, '', -1); }

fuente.

Más información

También puedes consultar otras webs que tratan esta transición dulce con más profundidad:

• Código alternativo a jQuery: http://youmightnotneedjquery.com/
• Funciones y plugins hechos con Javascript: https://plainjs.com/
• Native JavaScript Equivalents of jQuery Methods

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

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)

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.

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.

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.

13 días de baja de paternidad no es nada

Desde las instituciones no parece que tengan mucho interés en fomentar la natalidad, o por lo menos, no lo toman como algo prioritario. Puede que sus medidas hagan que nazcan muchos más niños, que serán futuros trabajadores y pagadores de impuestos, pero total, ¿qué importa?, estos no les van a votar en las siguientes elecciones, y sería inaudito que algún político hiciera algo con las vistas puestas más haya de las siguientes elecciones.

Que tienen que ampliar esta baja ya lo saben. Desde 2011 está votada la ley para que la baja de paternidad se amplíe de los dos semanas actuales a cuatro. Pero con la crisis como excusa, se lleva atrasando su puesta en vigor año tras año.

Pero bueno, las leyes son las que son, y no está en el propósito de este artículo cambiar las leyes actuales. Ya vendrán tiempos mejores para la paternidad. Lo que si me gustaría compartir hoy es la posibilidad, con la ley actual, de ampliar estos 15 días de baja a 28 días.

La baja actual es de 15 días, 2 por hospitalización más 13 de baja. Podemos ampliar estas 13 jornadas de baja completa en casa si decidimos reducir nuestra jornada a la mitad, en mi caso trabajar 4 horas. De este modo podemos ampliar la baja hasta los 26 días (más los 2 de hospitalización).

En mi opinión, siempre que tu tipo de trabajo así lo permita, esta es una medida que es beneficiosa para todas las partes.

Beneficios para la madre:

Por muy bien que vaya el parto, y por muy bueno que sea tu bebe, siempre es complicado y muy cansado hacer frente a los primeros días de cuidado. El mundo de la crianza de los hijos sigue siendo un mundo muy machista. Si te quieres informar sobre el embarazo y sobre el cuidado del bebe prácticamente toda la información va dirigida para la madre. Y si como padre te quieres informar de ciertas cosas hasta te hacen sentir un bicho raro.

Cierto es que la madre es lo más importante, y que hay tareas como la alimentación (siempre que decidas dar el pecho), que tienen que hacer ellas sí o sí, pero en muchas otras ocasiones el padre puede ser tan importante como la madre, y poder turnarse en sus cuidados hará que la madre pueda descansar en más momentos, y así disfrutar más de sus hijos, y no solo cuidarlos.

Cuanto más tiempo pueda estar el padre en casa, mayor será esta ayuda, y más descargada de tareas estará la madre.

No sabría decir cuantos días de baja son los apropiados, para poder acompañar a la madre en esta aventura, pero si que sé que 15 días son claramente insuficientes.

Si optas por la baja de media jornada, tu mujer estará sola en casa 4 horas (más el tiempo que te lleve el transporte hasta tu trabajo), pero el resto del día podrá disfrutar de tu ayuda y de tu compañía. Esas 4 horas sola pueden ser duras, pero a poco bien que se porte tu bebe, se pasarán muy rápido.

En mi caso yo opté por trabajar de 8:00 a 12:00, y me lleva unos 30 minutos llegar desde casa al trabajo. Total unas 5 horas que estaba fuera de casa, pero al irme tan prontito dejaba a mi mujer dormida. En lo que ella se levantaba, daba de mamar y desayunaba ya casi estaba yo de vuelta en el hogar.

Cada caso será diferente, pero en mi caso mi mujer ha estado encantada de que haya podido hacer esta media jornada.

Beneficios para el padre:

Yo veo fundamental que el padre se sienta importante en esta fase, y cuanto más pueda colaborar en el cuidado de sus hijos, más beneficiados saldrán todas las partes.

El trabajo es muy importante, y cuando estamos trabajando debemos de estar con todos nuestros sentidos puestos en la empresa, pero es fundamental adaptarnos a esta nueva etapa que se nos viene encima, y poder estar más días en casa es muy positivo.

No todo será un jardín de rosas, y también hay que decir que es duro compaginar trabajo y crianza, y que cuando suena el despertador da pereza ir al trabajo, sobre todo después de una noche de llantos. Tienes que pensar que tal lo vas a llevar, puede que prefieras estar menos tiempo en casa, pero sabiendo que solo estás en casa, sin preocuparte por el trabajo.

También es bueno profesionalmente, ya que al no desconectar del curro, sigues estando presente en las decisiones del día a día, y no corres el riesgo de que se olviden de ti.

Por último, tampoco es nada malo el salir un rato del ambiente infantil de cacas, diminutivos y vestiditos en el que de repente te has visto totalmente involucrado. Tener cierto contacto con el mundo adulto te vendrá muy bien.

Beneficios para la empresa:

El último vértice de esta fórmula es la empresa, y aunque a priori puede parecer que es la más perjudicada, creo honestamente que también sale beneficiada en este asunto.

Digo que sale beneficiada principalmente por cambiar la jornada partida de 8 horas, por la continua de 4. Soy de la opinión de que se es mucho más productivo con una jornada continua que con una partida, y parece que varios estudios confirman mis sospechas. Puede que para otros tipos de jornadas puede que los beneficios de esta modalidad no sean tan evidentes.

Con las jornada made in spain creo que se hacen demasiadas paradas que cortan la productividad. El desayuno al poquito de llegar, la parada de medía mañana, los cigarritos, el chascarrillo del compañero, la parada de la comida, la meriendilla antes de ir a casa,…

Al cambio de mentalidad de la jornada partida a la continua debe ser tanto por parte de la empresa como la del trabajador. Con una jornada intensiva, ya sea de 8 o de 4 horas, el trabajador se le transmite que el tiempo que está en el puesto de trabajo debe de estar trabajando. Cuando trabajas trabaja, y cuando estés fuera del trabajo disfruta de tu familia, amigos y hobbies. De nada sirve si hacemos el horario de jornada continua pero seguimos con los malos hábitos de la jornada partida. Cada trabajador debe de ser responsable de sus tareas y responder de su productividad.

Los expertos comentan la grandes ventajas que tiene esta jornada:

• Aumenta la motivación y la implicación de los trabajadores con la empresa.
• Ahorro de costes.
• Estimula la optimización del tiempo y mejora la planificación.
• Permite la conciliación de la vida laboral y personal.
• Incrementa la productividad.
• …

Por supuesto, cada caso es un mundo y cada empresa también. No en todos los puestos de trabajo se puede uno reducir la jornada, y hay empresas en las que se que te metes es un lio gordo si te propones disfrutar de tus derechos. Yo tengo la inmensa suerte de trabajar en Paradigma Digital, una empresa que siempre me lo ha puesto muy fácil, y en la que da gusto trabajar. Este caso tampoco fue una excepción, me permitió reducir mi jornada a 4 horas, y creo que ambos salimos favorecidos por ello.

Y vosotros, ¿Tenéis alguna experiencia con vuestras bajas de paternidad o con reducciones de jornada?

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

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.

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

function setResponsiveImages() {
    $('[data-responsive-bg]').each(function () {
        var t = $(this),
            w = t.width(),
            data = t.data('responsive-bg'),
            measure, size, url;

        data.split(';').forEach(function(measure) {
            measure = measure.split(',');
            size = measure[0];

            if ( w > size ) {
                url = measure[1];
            }
        });

        if ( url ) {
            t.css('background-image', 'url('+url+')');
        }
    })
}

I use this method to init this function, an check it again when user change the window width:

var canvasResize = 0;
$(window).resize(function(){
    clearTimeout(canvasResize);
    canvasResize = setTimeout(function(){
      setResponsiveImages();
    }, 200);
});
$(window).resize();

You can check it working on this demo page.