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

leer mas

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

leer mas

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

leer mas

WordPress: Refresh W3 Total Cache when saving or updating a PODs item

When you create or edit a PODs element in Worpdress, W3TC refresh the cache of the modified page. But sometimes you also show its content on home page or other kind of page, and in those cases you need to flush the cache through the plugin admin panel. I was tired of doing this task every time I update something, so now I have a code to do it automatically.

You have to add this code in your function.php theme file.

// REFRESH W3 Total Cache AFTER SAVE/UPDATE
function refreshCacheOnSave($pieces, $is_new_item) {
    if (function_exists('w3tc_pgcache_flush')) {
        w3tc_pgcache_flush();
        w3tc_minify_flush();
    }
}

// refresh cache after PODs creation/save/update
add_action('pods_api_post_save_pod_item', 'refreshCacheOnSave', 10, 2);
add_action('pods_api_post_create_pod_item', 'refreshCacheOnSave', 10, 2);
add_action('pods_api_post_edit_pod_item', 'refreshCacheOnSave', 10, 2);

The process of create my first Mobile App with AngularJs & PhoneGap

meeting-time-cost_detail

March 1, 2014: Thinking about the new App

Lately I’m feeling a little bit outdated in my job, because some of the new company projects are based on technologies which I’ve never used before like:

That’s why I want to start a new personal project base on some of those technologies, to learn to use them and became a better front-end developer. After thinking some days about it, I’ve decided to create a Mobile App to check the money that a meeting is costing, based on the amount of people in the meeting and theirs salaries. I choose this app because:

  • Although this idea is no new at all on the markets, I didn’t found a nice app to do this task, at least on Android, all of them are ugly (in my opinion, of course), so I think I can create a better and nicer app.
  • It’s quite easy to develop, so I can focus on learning the new technologies, instead of wasting time in doing other kind of things.
  • I will use it, and I also  hope other people will do. My company, Paradigma Tecnológico,  it’s a fabulous company to work in , but like most of companies has a lot of meetings everyday. I know meetings are necessary, but I hate when a meeting take to long and people start talking about things not related with the meeting´s topic. I hope this app can make people try to finish earlier their meeting, saving money for the company, and time for their employees.

It will be an hybrid app (one app that can be install on IOS, Android, Windows Phone,… without the need to make a source code for each platform) compile with PhoneGap. I choose PhoneGap because:

  • It is easier and faster for me. I’m a front developer, so I feel very comfortable with HTML, JS & CSS.
  • I think  learn PhoneGap will be more useful for my job that learning native code (IOS or Android). My company is full of great developers that can code much better than me native apps.
  • This App is small and it doesn’t use phone specific capabilities, so I hope that it would be as efficient with PhoneGap that with native code.
  • Get more devices with less effort. I’ll create just one app, but almost everyone will be able to download it and use it.
  • I want that the app also can be accessible through the web browser. PhoneGap uses standard technologies like HTML, CSS and JavaScript, so the app must be able to run as a web page.  So people will be able to use it with out the need of download it and install it on their devices.

leer mas

Seminarios de WordPress en Paradigma: Introducción y curso avanzado

Hace ya unos cuantos meses tuve la suerte de poder impartir dos seminarios sobre WordPress a mis compañeros de Paradigma Tecnológico.

Introducción a WordPress

Con este primer seminario podréis ver una breve introducción a lo que es WordPress, conociendo sus ventajas y sus riesgos. También aprovechamos para hacer un sencillo caso práctico, creando una web de ejemplo, y viendo como editar y administrar dicha web.

WordPress avanzado. Las tripas de WordPress y sus Plugins

Segundo seminario de esta serie, con el que entramos en WordPress más en profundidad. Con este curso podrás ver y conocer:

  • La estructura de ficheros de WordPress y de sus plantillas,
  • ¿Qué es el loop y como funciona?
  • Mi lista de plugins indispensables,
  • y algunas medidas de seguridad para proteger WordPress de ataques indeseados.

WordPress supervitaminado: PODs Framework

Tercer y último seminario de esta serie. Por desgracia todavía no he podido sacar tiempo para impartirlo, pero espero que pronto pueda impartirlo, y así dar por terminado esta trilogía del WordPress.