729: Una odisea del código

En etc

No me cabe la menor duda de que canalizo todos mis «TOC» e intensidades con el diseño web, anoche me quedé hasta las 6 de las mañana arreglando el diseño de mi blog personal.

El desafío que me impuse fue el de encontrar la tipografía «perfecta» y que sea perfectamente legible tanto en pantallas como en dispositivos móviles.

descubrí que hay ciertas propiedades CSS aún no aprobadas por el estándar que mejoran la legibilidad de la tipografía:

"-webkit-font-smoothing"
"-moz-osx-font-smoothing"
"text-rendering: optimizeLegibility"

y si hay algo (caprichoso de mi parte) que me revienta de Windows es el extraño suavizado de fuentes que tiene el sistema. Así que estaba investigando al respecto y esto funciona.

Luego me puse a investigar sobre tipografías legibles y aunque Google Fonts tiene muy buenas (Archivo, Open Sans, Roboto (esta es la que utiliza los Android), etc.) no me convencían.

y luego recordé el hermoso editor de texto enfocado en la simplicidad (iA Writer) los cuales diseñaron una tipografía especial para escribir. Las cuales están libres para descargar en Github.

Pero observando bien me di cuenta de que en el texto de su web utilizaban una tipografía un poco más «sans serif» que no incluyen en el repositorio que tienen para descargar gratuitamente… entonces me puse a revisar el código fuente de su página web para encontrarla

y la encontré, la fuente se llama «729» y estaba en formato WOFF2, me puse a investigar y este es un formato de tipografía web que está comprimido para facilitar la carga, así que ni corto ni perezoso me descargué la fuente de sus servidores.

luego me puse a investigar la forma más simple y eficiente de cargar una fuente dentro del código CSS (font-face) y descubrí que existe la propiedad «font-swap» que hace que al momento de cargar una fuente web no se quede la página en blanco, muy útil.

añadí el código requerido en el template «McLuhan» que es (en mi opinión) uno de los más sencillos y hermosos temas gratuitos de todo el universo, todos los de
@andersnoren son arte puro <3

pero entonces empezaron los problemas… la tipografía se mostraba correctamente, pero solamente en Safari. No funcionaba ni en Opera, ni Firefox ni Internet Explorer (emulado con Virtual Box), intenté insertar el código de muchas formas y nada, no funcionaba

me imaginé que quizás el formato WOFF2 era incompatible con los navegadores modernos pero no, así que hice de todo… intenté convirtiendo los WOFF2 a WOFF, EOT, TTF y nada, no funcionaban, no cargaban, me empecé a desesperar pero como soy un maldito terco en estas cosas, seguí intentando de muchas formas, una de estas páginas de conversión te generaba un archivo HTML que cuando lo abría, sí cargaba bien la tipografía así que descarté la posibilidad de que el archivo estuviera corrupto, así que me puse a meter mano al código PHP de la plantilla

ya dentro del código de la plantilla encontré cosas interesantes como una opción para encender/apagar la carga de Google Fonts, lo desactivé para optimizar el tiempo de carga y porque no tenía sentido tenerlo activado

el punto es que tampoco era por un tema de código interno de la plantilla, seguía el problema de que «729» sólo cargaba en Safari.

ya estaba por tirar la toalla, pero aproveché para arreglar algunos errores en el código HTML que hacían que no valide correctamente en W3C

no solucioné todos los errores de validación porque eso me tomaría un par de noches más pero por los menos los de elementos mal anidados, o tags sin cerrar.

ya a eso de las 6 AM pensé en tirar la toalla en cuanto a la tipografía «729» y que no lograría que cargue bien en mi blog

cuando de pronto me puse a ver el código y a jugar un rato con la herramienta «Web Developer Tools» que viene en casi todos los navegadores (en este caso usando Opera) y en el debug tenía marcado como error grave el hecho de enlazar archivos externos…

…aunque estos estén dentro de tu mismo servidor, por un tema de «seguridad», por ejemplo si yo tengo mi dominio blog.emarts.tv no me deja enlazar archivos de emarts.tv y eso explicaría el porque rayos no cargaba la tipografía, ahí salía claramente eso.

Esta limitación de seguridad tiene un nombre que ahora no recuerdo, pero me puse a investigar al respecto y por suerte hay forma de desactivarla, utilizando un código dentro del archivo .htaccess en tu hosting, hice el cambio y voilá! por fin cargó la fuente «729»!

sentí una grata sensación de alegría que estoy canalizando a través de este hilo y me puse a probar como se ve el blog de bonito tanto en la compu, tablet y celular 😀

Esto del diseño web y los códigos es un hobbie que tengo desde los 14/15 años creo y gracias a la plataforma…

de WordPress y su extensa documentación me ha permitido ir jugando y creando este tipo de cosas durante estos años.

Lo otro que me parece muy bonito es la cantidad de gente en internet que se da la mano ante este tipo de dudas, ya sea en foros, comunidades, etc…

Prácticamente todas y cada una de las dudas que tenía de cómo hacer algo con código, ya estaba resuelta en algún artículo o hilo por ahí, con lujo de detalles y todo.

Y nuevamente reafirmo mi admiración y respeto por los desarrolladores de software, gente muy talentosa…

cuyo trabajo literalmente nunca «vemos» pero siempre usamos y es parte de nuestras vidas (como el hecho de que puedas leer esto es porque alguien lo programó)

Así como conclusión sólo diría que me siento contento de canalizar la energía que tengo en cosas productivas como estas

lo otro que vuelvo a comprobar es que nunca jamas en la vida haría todo esto por trabajo ya que de una chamba tan tediosa pero hermosa que me volvería loco.

Si alguna vez tienen que hacer una web o armar un e-commerce por ejemplo, PAGUENLE (y bien) a alguien que sepa!

Pero bueno, solamente quería compartir un poquito de esta pequeña faceta de mi persona que llevo en paralelo con el arte y dejarlos con esta frase (originaria de WordPress)

CODE IS POETRY

y sí, viendo el trabajo de Anders Norén (el que hizo la plantilla que he modificado) doy totalmente la razón, el código que utiliza (PHP, CSS, HTML) está super ordenado, muy bien estructurado, fácil de entender, con comentarios para guiarte y sin muchas complicaciones <3