Since Node v10.0.0 fs has experimental promises support, to test that, we want to see if a folder exists and is accessible. Wi will start from the Synchronous operation, and we will end up taking advantage of async await to deal with the promises. Only one thing to note: this is flagged as experimental, and we will get something like: (node:578) ExperimentalWarning: The fs.promises API is experimental . Read more
While testing an Angular CLI app, from my Windows Subsystem Linux, I got a weird error. But first of all I need to setup Google Chrome to run it in headless mode. Read more
I’m saving this here with the things I learn about SVGs. An SVG needs some basic markup, like the <svg> tag, some other stuff is optional, depending on the use. Read more
After 3 years working on a mac and a Windows machines separately (mostly on the mac). I recently fully switched to Windows and found myself with a few days to setup my development environment. Read more
I’ve been working with virtuabox on my Windows machine (Vagrant and Docker environments). When I tried to start a machine (munich) I get a criptic network error. Read more
For cache breaking I like to use MD5 hashes of files. At the Westwing magazine we had some javascript bundles that we change very seldomly, so a timestamp on each build is too aggressive cache break. We also use file checksums for font bundles. Read more
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
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
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
If you want to run a task with certain parts turned off or on, or even pass a value from the command line to gulp, by default you can’t. Well you can, but it’s a node thing: process.argv it is just an array, so it’s a bit limited, so there is a module to abstract the mess: yargs . Read more
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
Currently I’m working with a static site generator, and it builds to a sub-folder. I want this subfolder to be the one served as the project page. Read more
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
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
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
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
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
Somos 2 personas trabajando en el código de múltiples sitios y proyectos; uno está viendo backend y el otro frontend —Aunque nos mezclamos bastante las tareas. Aquí voy poniendo apuntes de los típicos comandos que usamos mientras trabajamos usando GIT. Read more
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
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
I had to make my CV (or resumé), the first impulse was Markdown on GitHub… hmmmm …now I have the excuse to try out Jekyll. The idea is to make my personal site, with it’s domain and a small portfolio, run from Jekyll using GitHub pages. Let’s get on with it. Read more
Lately, for several projects I’ve been to needing to position many elements absolutely, by hand. I knew drag and drop functionality was easy, but didn’t even try. Today, again I had to position:absolute a bunch of element by hand… Enough!. Enter a bookmarklet to move things around. Read more
Yes, yet again revisiting the ubiquitous tooltip snippet. This one works on IE7+ probably on IE6 too. Is accessible with the keyboard and touch devices, semantic, and screen reader can read it. It also comes with a bit of styling and animation. Read more
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
Asumiendo que todo el concepto Responsive Web Design, o diseño web responsivo está entendido, un aspecto práctico bien importante es el manejo de imágenes. Read more
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
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
The ideal would be to have it working along the in-app back button, but sometimes one has time (or budget) only for a quick hack, in my case a confirmation for closing the app before exiting is exactly what was needed. Read more
For an app we are building, came the need for taking pictures as part of a industrial process log, these pictures are supposed to be uploaded with the rest of the log, but as connections are not reliable and data plans have caps, we are uploading only when there’s wi-fi available. Read more
Finalmente me he sentado a aprender cómo usar Git y particularmente cómo conectar git a mi servidor, para que se vayan publicando inmediatamente los cambios hechos. Read more
Estoy armando un app (por primera vez), ya me he decantado por phoneGap y hoy tuve qe hacer la selección entre Sencha, XUI y jQuery Mobile. Cuando me di cuenta que jQuey Mobile es un plugin sobre jQuery lo descarté, en mobile no necesito ni la mitad de todo lo que trae jQuery. Read more
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
Storing persistent information in a sencha app. Cookies aren’t available for all devices, while localstorege has wonderful support with Phonegap (Cordova) that converts it in a very stable storing system. Read more
