Conflicting IPs with docker machine

Short tip for debugging

Published:

If you are using multiple machines with docker-machine they will get an automatic IP starting from 192.168.99.100 , then 192.168.99.101 and so on. The problem comes when you restart your system and start the machines in different order. Virtualbox will assign different IPs this time around, this makes the certificates invalid and you need to regenerate them. No problem there, but if you have mapped an IP to a domain in your hosts file, then trouble begins. Read more

Create a Fly Image server from scratch in few minutes.

Setup the flyimage project to convert, compress (moz-jpeg), cache and serve your images on the fly using Docker on DigitalOcean.

Published:

Images are a big part of the web, and also the bigest part of the web bloat. Everyday I see sites way too heavy or way too complicated architectures for dealing with images. With @sadok_f we have been working on having a simple server to deal with images. You request an image, give the desired dimensions and compression… and voilà! you get your image back, cached and compressed using the incredible moz-jpeg. Read more

Setup an images microservice server with Docker Compose

Guide for setting up and troubleshooting our first steps into using docker and docker compose for developing microservices or dev environments.

Published:

Yopu must probably be fedup already with all the talk about Docker, and how it is the future, how it’s so easy to work with… Well for me it’s just the means to an end. The end is to have a server that resizes and crops images on the fly, storing a cached version to avoid generating it each time. Currently, for this, you can use cloudinary or some other services, but I like to use open source alternatives and to own my own my data. We’ll setup a little server to do so. The first step is done with this guide, get Docker working on your machine. Read more

PostCSS with Gulp: up to speed with CSS tooling

Guide to set up CSS transformations with PostCSS and Gulp, choose plugins and keep working with good 'ol Sass (without loosing too much time).

Published:

PostCSS is easy, they said; you should do it, they said; it’s fast, they said; it’s the future, they said. For me it was confusing enough that I’m writing this guide to explain the process one must go through to decide which plugins to use and how, specifically for Gulp. Let’s ponder different aspects to have in consideration when choosing different plugins needed for a medium sized project. Read more

Flexbox for the real world: Sticky footer fallback

Take advantage of flexbox for layout while still providing support for older browsers.

Published:

Flexbox has long been the promise of a revolution, had it been specified as it is today, when the original proposal came out, the adoption today would be complete. I’ve been playing with flexbox since the original syntax came out, and I loved it, specially coupled with media-queries, there was even a polyfill for IE. But as I tried to use it in production, I spent a week trying to figure things out, found big inconsistencies and bugs in the implementations that made it impossible to use it in production, with a disillusioned heart I dropped it. Four years later it’s ready for everyday use (with the proper fall-backs). Read more

Remote working: our experience with Sqwiggle

Remote working is made easier than expected with the right tools.

Published:

As a design and development agency we have worked in may ways, for some years we even had a big office with many people working there. For the last 4 years we have been working from home. For many projects we “call in” contractors and work remotely with them, most of whom we have never seen in person. One problem has always been communication, even with people working in the same space. Read more

Schema.org: datos estructurados

Como utilizarlos y sacar provecho en una tienda on-line

Published:

Los documentos de un sitio web por lo general no son más que textos, imágenes y enlaces. Pero nosotros somos los encargados de darle significado semántico a ese contenido, para que un buscador pueda discernir y entender de qué trata realmente un documento, logrando finalmente jerarquizar los datos y de esa manera entregar resultados de búsqueda certeros a los usuarios. Mientras más significado le demos a los datos de un documento mejor, y en caso como una tienda on-line, mientras más datos pueda ver un usuario de tu producto sin siquiera entrar a tu sitio web, si no que directamente en un buscador, mejor. Read more

Macaw

Impresiones luego de haber probado este diseñador web

Published:

Me encargaron la tarea de probar Macaw, una herramienta para diseñar sitios web la cual profetiza “para de escribir código, empieza a dibujarlo”. Pensé “Bah… otra herramienta mas del tipo WYSIWYG”. Uno suele tener ciertos traumas con estos tipos de herramientas, quizás venga de lo mal que lo hacía Dreamweaver, o que da la sensación de que compiten por cual termina produciendo el peor código, códigos que vienen del mismo infierno, lleno de tags vacíos, id’s hasta en el <body> y un sin fin de clases CSS. Read more

Guías de estilo front-end en sitios existentes

Una aproximación a generar guías de estilo en sitios web existentes

Published:

Desde que trabajamos con la Paz Vial , todos los años hacemos cambios en el sitio, este año estamos trabajando en grandes cambios, pero tenemos un legado de 3 años de modificaciones al CSS y entremedio adoptamos SASS, hay que hacer orden y limpieza, especialmente documentando los estilos de la marca. Acabo de terminarme la “Guía de bolsillo” Front-end Style Guides de Anna Debenham Es una confirmación de algo que sospechaba hace tiempo. Además da un montón de buenos recursos (mencionaré un par aquí). Read more

Flujo de trabajo en Drupal con Git

Cómo trabajar en un proyecto de Drupal en equipo y no morir en el intento

Published:

Todo equipo cuenta con su flujo de trabajo establecido, lo más seguro es que hoy en día gran parte de ellos trabajen con algún sistema de control de versiones como Git o SVN, permitiendo no pisarse la cola unos a otros. Comúnmente todo funciona perfecto, ya que todo el proyecto es desarrollado por el mismo equipo, pero es un poco distinto cuando se trabaja sobre un proyecto que viene desde terceros, que no es pequeño, y que recibe actualizaciones constantemente: Drupal. Muchos tienden a colapsar cuando tienen que actualizar un módulo o el core del sistema, típicamente por problemas de incompatibilidad entre la nueva versión del core y el módulo. Read more

Animating vapour with JavaScript on canvas

Particle animation rendered on the canvas element

Published:

As my day to day development must include support for IE8 and sometimes even IE7 playing with the recent toys is not possible, unless they degrade gracefully. But with mobile development, the story is different, now I have to replicate a vapour animation done in flash, but in regular HTML/Javascript. Enter <canvas>… All my experience with canvas has been just a few shapes a few years ago, it seemed really similar to the ActionScript drawing API and Bitmap Classes, today I’ll put that to the test. Read more

Cómo actualizar Drupal Core usando linea de comando

Lista de comandos para hacer copy paste y una pequeña explicación de cómo funciona el proceso.

Published:

Muchas veces es una lata descargar un archivo, descomprimirlo, subirlo por FTP, arrastrar archivos y carpetas de un lado para otro para actualizar el core de Drupal 7. Y como dicen que un buen programador es flojo, pues aquí pego la secuencia de comandos que uso para respaldar y actualizar el core de Drupal 7, usando SSH. Read more

Pie de página, datos de contacto, direcciones y microformatos.

Cómo aprovechar, mediante microformats, los típicos datos de contacto al pie de una página web para entregar información entendible para máquinas.

Published:

En términos generales, los seres humanos somos asombrosamente buenos para encontrar patrones de cosas que conocemos sin importar el ruido. De casi cualquier secuencia de números o letras podemos inferir si es una dirección postal, un número de teléfono fijo o celular. Pero las máquinas necesitan ayuda para discernir si algo es una dirección de contacto o es parte de la narrativa del artículo. Hace tiempo ya que vengo dándole vueltas al tema de los datos de contacto y las innumerables maneras en las que los vemos representados. Read more

En la práctica: ¿Se puede usar SVG confiablemente como imagen?

Nuestra respuesta, durante mucho tiempo, había sido: NO, porque IE y Android no lo ven; sólo se podía en los estilos como una mejora de CSS. Pero estábamos equivocados. Sólo necesitamos un poco de Modenizr.

Published:

Cualquiera que halla llegado aquí sabrá ya de los beneficios de SVG, así que no explicaré qué es. Hace tiempo hay polyfills de SVG para IE o Android y algunos otros pero siguen siendo parches que requieren el uso de Flash u otras bibliotecas de javascript, como si ya hubiese poco javascript del que preocuparse en nuestras páginas. Así que nosotros habíamos evitado su uso, fuera de uno que otro gráfico de fondo en CSS como mejoras progresivas; mas, el uso que siempre quise darle era para el logo de un sitio web, que según nuestras políticas de diseño el logo va en el DOM. Desde la salida de las pantallas retina y otras de alta resolución, SVG tiene más sentido que nunca. Read more

Propuesta de Normas de desarrollo web

Criterios y normas generales, no absolutas, de buenas prácticas para el desarrollo web en Médula Diseño

Published:

En Médula Diseño estamos definiendo poíticas y estándares de desarrollo para nuestros proyectos, desde cosas tan simples como cuerpos mínimos de texto, hasta criterios de selección para frameworks de trabajo o pre-procesadores de css. Nada de esto está escrito en piedra, son guías generales hasta que haya una buena razón para romperlas. Read more