Un Site ⇝ un Frontend Developer

Ayer me encontré, visitando una página de un canal de televisión, el siguiente fragmento de código:

        var cintilloDirecto = jQuery('div[id=cintilloDirecto]');
        if( cintilloDirecto )
        {
            var isEmpty = jQuery(cintilloDirecto).find('a img').attr('src').match('empty.gif');
            if(isEmpty == null){jQuery(cintilloDirecto).parent().removeClass('hidden')}
        }

el cual, además de utilizar un nombre de variable bastante discutible “cintilloDirecto” (quién no esté de acuerdo que lea cualquier libro acerca de código legible o técnicas de programación y exponga de manera clara su punto de vista) demuestra una terrible falta de “saber lo que se está haciendo”.

Para empezar la función global jQuery no tiene que ser aplicada una y otra vez sobre un objeto devuelto por la misma. Y lo peor de todo es la comprobación de la siguiente condición:

        var cintilloDirecto = jQuery('div[id=cintilloDirecto]');
        if( cintilloDirecto ) // cintilloDirecto nunca va a ser un falsy value

Ya que jQuery siempre devolverá un “jQuery object” incluso cuando el css selector utilizado no concuerde (match) con ningún elemento presente en el DOM.

De modo que el código refactorizado quedaría algo así:

        var directo = jQuery( '#cintilloDirecto' );

        if( !!directo.find( 'a img[src="empty.gif"]' ).length ) {
            directo.parent().removeClass( 'hidden' );
        }

Cómo decía por ahí un tweet que leí una vez: “Un bebé ballena muere cada vez que un backend developer programa frontend.” ;)