Filtering active menu element class on WordPress

When using a navigation menu on WordPress, you’ve probably seen the various HTML classes that are added on active elements, such as current-menu-item, current-menu-parent, current-menu-ancestor

While that kind of classes are fine if you must fully reflect the navigation hierarchy on the menu element, there are some times that you just need a more simple approach, such as just knowing when a certain menu element must look like the active item —for instance, when using Bootstrap.

For these kind of situations, you can use a simple filter to add such a class; something like:

<?php

add_filter('nav_menu_css_class', function ($classes, $item, $args, $depth) {
    // filter by some condition... for instance, only on the "main" menu
    if ( $args->theme_location !== 'main' ) {
        return $classes;
    }
    // all the different "active" classes added by WordPress
    $active = [
        'current-menu-item', 
        'current-menu-parent', 
        'current-menu-ancestor', 
        'current_page_item'
    ];
    // if anything matches, add the "active" class
    if ( array_intersect( $active, $classes ) ) {
        $classes[] = 'active';
    }
    return $classes;
}, 10, 4);

Some notes about using web fonts

I just launched a new design for this site, and in this process I was particularly meticulous about my typographic choices.

These are a few of the things I learned.

Only use what’s necessary

This is somewhat obvious, but it’s still a fairly common mistake: you should only use and include the necessary fonts that make your design work.

There are several font families that use multiple styles and sometimes it’s tempting to use nearly all of them: normal, light, medium, bold, ultrabold, italic, bold italics… But you should remember that for every style, the user must download another file, and all of those bytes can add up to a painfully slow page load — which will make both your users and Google sad.

Try to avoid using an specific style for a single UI element, and remember that different families have very different file sizes.

Lastly, and even though it might be considered an abomination for typography nerds, remember that browsers can an usually will fake some basic font styles such as bold (simply thickening the “normal” style) or italics (with a slight slant).

Create a check-list with your requisites

The Google Fonts catalogue has over 700 font families; the full Typekit library over 1200. If you have enough time or are somewhat indecisive you can really go crazy before settling for the perfect fonts combo.

A good idea to help in your decision process it’s to create a check-list with all the requisites you need to fulfil, for instance:

  • The file weight for a single style must be less than 40 Kb (compressed)
  • The font family must have these styles: normal, bold, italic, bold italic
  • It must support non-english characters such as accented vowels
  • The normal style must be highly readable on small sizes

Changing your main font family on the middle of the design process can be a real pain: re-setting the body size and line height affects your entire design, so it’s a choice that must be carefully weighted.

Watch out for bugs

Fonts are not immune to bugs; watch out for thinks like:

  • Missing or erroneous characters: make sure you thoroughly test all the characters you need to support and check that all of them are shown correctly. For instance, when testing a font I found that the character for a typographic ellipsis looked like a single dot.
  • Variable heights on different styles: previous versions of the Roboto family had different heights on some of the styles, even when setting an explicit line-height. For instance, a single line of text using just the normal style showed the expected line-height, but when using a single (or more) bold characters, it increased the line-height. This was fixed on a newer version.
  • Hinting issues: when I decided to self-host the fonts for this site, I used FontSquirrel’s webfont generator to convert to the different formats required for each browser and further optimize the fonts by subsetting only the required characters. Even though I used previosuly hinted fonts, when I chose to Keep the existing hints the result looked awful on Windows, so instead I used the unhinted versions with TTFAutohint.

Many of the fonts available through Google Fonts are published on GitHub, so if you find a bug you could contact the developers and submit an issue, but it’s uncertain how long will it take for Google to update their version (which it’s in part why I’m self-hosting the fonts for this site).

Enable ligatures or other font features

After you finally made up your mind and chose the perfect fonts, make sure to show them in all of their glory.

Even though Firefox enables ligatures by default, Google Chrome and Safari don’t, so you need to explicitly activate them, like:

h1, h2, h3, h4, h5, h6{
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}

There are plenty of other font features that you can control; check the font-variant docs on MDN to get a good overview.

Generar sprites CSS/LESS automáticamente con Grunt

La utilización de sprites en CSS es una de las técnicas más básicas pero a la vez más necesarias en el desarrollo front-end.

Aunque es posible crear y mantener un sprite de forma manual, te tomará tiempo y esfuerzo que probablemente podría tener un mejor uso (sobre todo cuando tienes que incorporar nuevas imágenes al sprite), por lo tanto qué mejor que automatizar esta tarea con la ayuda de Grunt.

Utilizaremos dos tareas distintas: una para crear un sprite de imágenes en PNG y otra para imágenes vectoriales en SVG, ideales para dispositivos con alta densidad de píxeles.

Continue reading “Generar sprites CSS/LESS automáticamente con Grunt”

Compilar archivos LESS automáticamente en Linux

Un tip pequeño pero muy útil: si estás trabajando con archivos LESS en Linux y necesitas un método rápido para compilarlos automáticamente al hacer modificaciones, puedes lograrlo con el compilador para node.js más inoticoming.

En primer lugar, es necesario instalar node.js y su gestor de paquetes además de less.

Luego, toca instalar inoticoming, la utilidad que permite vigilar las modificaciones a los archivos:

Y finalmente, ejecutar el comando que permite realizar la compilación cada vez que se modifica un archivo. En mi caso, realizo mis modificaciones en less/style.less y compilo en css/style.css:

Listo, mucho más cómodo.

5(+2) recursos: por qué NO justificar textos en la web

Para aquellos momentos en que a alguien se le ocurre la brillante idea: pero este texto quedaría mejor justificado… 5 links donde explican porqué no es buena idea usar texto justificado en la web

Y dos herramientas:

  • Unjustify, un bookmarklet para quitar el justificado al texto
  • … y supongamos, por un momento, que están amenzando a tu familia y la única forma de salvarla es usando texto justificado: Sweet Justice es un plugin para jQuery que permite realizar separación silábica automática a partir de la adaptación del algoritmo de Knuth/Plass (al parecer, el único que ha sido publicado). Lamentablemente, sólo funciona con textos en inglés

Sitios web aún más rápidos

A propósito del post sobre la “sensación” de velocidad y los selectores eficientes que publicó recientemente Armonth en su blog, recordé una de las presentaciones de la Web 2.0 Expo en San Francisco de la que había visto sus diapositivas, y que hablaba más o menos del mismo tema.

La presentación estuvo a cargo de Steve Souders, quien trabaja en Google en iniciativas de código abierto y alta performance, es el creador de YSlow — una herramienta (plugin para Firebug) desarrollada por Yahoo! para medir la performance de un sitio — y especialista en sitios de alta performance.

Pueden ver la presentación en Slideshare o bien descargar la original desde la ficha técnica de su charla.

Personalizar la fuente del panel de administración de WordPress

Pueden decirme mañoso, pero detesto el uso indiscriminado de Verdana, y verla regada por todas partes en el panel de administración de WordPress apenas me era soportable. Así que puse manos a la obra, y recordando un pequeño truco para Firefox, me propuse cambiarla por una fuente que fuera más de mi agrado.

Es bastante sencillo: debes editar el archivo userContent.css, que sirve para agregar reglas de estilo a las páginas visualizadas con Firefox (por ejemplo, como el [estilo OSX para Bloglines->Bloglines al estilo OSX] sobre el que publiqué hace tiempo). En Linux, este archivo se encuentra en ~/.mozilla/firefox/cadena-aleatoria.tu-perfil/chrome/, en Windows, depende de la versión, pero debería estar en el directorio de Datos de Programa, ya sea dentro de tu carpeta de usuario (en Vista) o en Archivos de Programa (XP)… de todos modos, también puedes localizarlo con el “excelente” buscador de Windows. En fin…

Si nunca antes has tocado este archivo, probablemente encontrarás uno llamado userContent-example.css. Si quieres que este truco funcione, debes guardar tus cambios con el nombre userContent.css (sin el example).

Para que el cambio de fuente afecte solamente el panel de administración de tu blog, utilizaremos una de las extensiones CSS de Mozilla: @-moz-document (puedes ver la documentación completa de esta extensión en MDC).

Ahora, a aplicar un poco de CSS, por ejemplo:

@-moz-document url-prefix(http://tu-dominio.com/wp-admin), 
url-prefix(http://tu-otro-blog.com/wp-admin)
{

body, textarea{
     font-family: 'Lucida Sans', sans-serif !important;
     }

}

Eso es lo básico, pero una vez allí puedes personalizar lo que quieras, del sitio que quieras. Lo más conveniente de este método es que no tendrás que editar las hojas de estilos de WordPress, por lo que no perderás tus reglas personalizadas cuando actualices.

Y… si, ya sé que el cambio de Verdana a Lucida Sans no es mucho… pero es suficiente.

Proyecto: Revista Paralaje

Diseño de PARALAJE. Revista Electrónica de Filosofía, Estudiantes de Postgrado PUCV.

Paralaje

Revista electrónica. Estudiantes de Postgrado en Filosofía PUCV

CDN para frameworks javascript

Ahorra ancho de banda y mejora la experiencia de tus usuarios utilizando la infraestructura de Google para servir tu framework javascript.

¿No sería genial que en lugar de tener que descargar una y otra vez los archivos de jQuery, mootools, prototype… estos estuvieran distribuidos de forma de ahorrarte en transferencia y aumentando la velocidad con que tus usuarios ven tu sitio?

Tras esta larga y rebuscada pregunta lo que se esconde es un servicio de Google del que no sabía hasta hace poco, pero que demuestra que a veces una pequeña idea puede traer grandes beneficios: se trata de AJAX Libraries API, una red de distribución de contenidos (Content Distribution Network, o CDN, para los amigos) y “arquitectura de carga” para algunas de los frameworks javascript más populares.

En pocas palabras, AJAX Libraries API permite que tus usuarios descarguen la librería javascript de tu elección desde la red de servidores de Google, para lo cual tienes dos opciones: hacerlo a través de google.load() (un método desarrollado por Google para facilitar la carga de acuerdo a dos parámetros, que especifican el framework y la versión que quieres) o bien directamente desde <script />. Por ejemplo:

Con google.load():

<script src="http://www.google.com/jsapi"></script>
<script>
	// Load jQuery
	google.load("jquery", "1");
</script>


...o directamente:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Continue reading “CDN para frameworks javascript”

eduStyle: inspiration for campus web designers

eduStyle

eduStyle es otra galería más de diseño web, pero con un énfasis bastante peculiar: sitios de universidades, programas de estudios y todo el mundo ligado a lo académico… lo que me viene como anillo al dedo.

Mientras están por ahí, puede aprovechar de ver la ficha del sitio etnopsicologia.cl, uno de mis proyectos, que hasta ahora ha tenido una buena recepción… como siempre, se reciben críticas.