Image art direction using the HTML picture element and DADI CDN

Responsive images on the web are an incredibly powerful tool. The most basic use case is the ability to load different versions of an image, with different sizes and resolutions, based on the user's viewport dimensions, which can avoid sending huge images across the wire to a device with a small screen. But even more exciting than that is doing art direction on images, which is what I'll cover here.

Read more

Creating modular UI components with Dust.js

One of the most important changes in my mindset as a front-end engineer happened when I started to look at websites as a group of components, rather than a group of pages. The principle is not new, and articles like Don’t Build Pages, Build Modules from the eBay engineering team or the reference piece on atomic design by Brad Frost provide a far better explanation than I could ever attempt to do — in short, building monolithic pages that are not reusable in different contexts isn't scalable, sustainable or maintainable in the long term.

Read more

Here's a new website right off the press

I finally got around to dedicate some love and attention to my site, in much need of a redesign. Its first iteration consisted of a sequence of 3 background videos depicting a guy walking around and sitting on a chair as users navigated the pages. It was published over two years ago and it reflected who I was at the time — a creative developer fascinated by the cutting-edge front-end technologies capable of creating unique visual experiences on the web. In its turn, this new iteration reflects my path since then and how it shaped me along the way.

Read more

Exporting breakpoints from CSS to JavaScript with include-media

If you're using include-media or any other pre-processor library for managing breakpoints in CSS, you probably like the idea of declaring the values once and reference them by name whenever necessary, keeping the code DRY. But when you also need to make decisions based on the viewport dimensions on the JavaScript side, things can get a bit ugly.

Read more

Viewport sized typography with minimum and maximum sizes

Viewport units for typography are quite a cool toy to have in your responsive web design toolbox, as they allow you to size fonts relatively to the dimensions of the viewport.

Read more

Open on Twitter

include-media v1.3 released

Version 1.3 of include-media is out and I'm excited to say it's quite a big one. For the past couple of weeks, Hugo Giraudel has been doing some of his Sass wizardry on the project, refactoring some parts and adding new features.

Read more

Supercharging Jekyll with a ServiceWorker

I've been reading a lot about JavaScript ServiceWorkers and, of course, I was itching to try them. A ServiceWorker is like a regular Web Worker on steroids: it's still great for doing some heavy-lifting in the background without disrupting the main thread, but the really cool thing about it is that it can function as a reverse proxy capable of intercepting any request made from a page.

Read more

Open on Twitter

An introduction to static site generators

Static site generators seem to have been becoming more and more popular recently, but they're not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects - 394 of them, to be more precise - have been maintained by lots of varied people in the community and built with a diverse range of programming languages and technologies.

Read more

include-media v1.2 released

Five months ago, I released include-media, a library for writing simple, elegant and maintainable media queries in Sass. What started as a simple solution to solve my own problems quickly became a tool used and discussed by fellow developers around the world.

Read more

Rethinking the commenting system for my Jekyll site

Update 03/10/2016: I turned this concept into a service called Staticman. It's free and open-source and you can read more about it in this post. Last December I wrote a post about building a bespoke commenting for Jekyll. I had been using Jekyll for a couple of months at the time, and not having an easy solution for a commenting system was the first big limitation of a static site I had to deal with. I didn’t want to use a third-party service, like Disqus, so I decided to build a bespoke solution because I knew what I wanted — or I thought I did.

Read more