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.

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.

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.

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.

Rethinking the commenting system for my Jekyll site

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.

Sharing Jekyll posts on social media using front matter and IFTTT

Whenever I write a post on my blog, I like to share it on the different social media platforms I have a presence on. I started by doing that manually, creating updates myself with links to my posts, but soon realised that something like IFTTT would be perfect to automate the process. Jekyll comes with an RSS feed out of the box so it's just a matter of creating a recipe where you say "whenever there's a new post on this feed, publish an update to A, B and C". But I wanted a bit more flexibility. Maybe I'm writing a post that is way too technical to share on Facebook, or a post that I definitely want on my LinkedIn, or even a post that just adds a couple of points to a previous one so I don't want to share it at all. What I wanted was a way to select which social platforms to share on right from the post's front matter.

Thoughts on an API-First WordPress

I was recently asked to choose and implement a CMS solution for a digital agency to manage multiple websites in a single installation. For a huge number of reasons, the prime candidate was https://wordpress.org/. It's free and open-source, has a huge user community, it's easy to use, and has a multisite feature. It's unquestionably a commercially-proven and mature product. But, I had my reservations.

Google News and sponsored content

If your website — or a website you're working on — is on Google News, that's really good news (ha!). It allows your content to be indexed by Google's news platform and be shown to millions of readers around the globe interested in stories on a certain subject or category. Getting a site into the platform is supposedly not that difficult — a good read through this page should point you to the technical and editorial requirements you need to put in place before you submit your site to the platform. Within those pages, there's a very important piece of information: «Stick to the news--we mean it!».

What BEM did to my CSS specificity

I have recently refactored the entire front-end structure of my website (a bit by accident, actually) and using the BEM naming convention on my DOM tree was one of the things I finally got to implement.

Rapid deployment with Sass

A CSS processor like Sass is nowadays a must-have tool for web projects with a large codebase — maintaining a large website in pure CSS simply doesn’t cross my mind these days, personally. But what about medium-sized and small projects?

Battling with IE8: HTML5 shiv and SVG

Today I sent out a test link for a website my team is building and someone dropped me a message saying that it looks terribly broken in Internet Explorer, attaching a screenshot. And my, did it look broken. The majority of the elements didn't seem to have any styling applied to them at all!

Writing media queries for Retina devices with include-media

Devices with Retina displays have been with us for a while, and now Retina 3x is a thing. So how to write media queries to target devices with those pixel densities?

A cautious and calculated venture into Flexbox

So, let's talk Flexbox. When you think for a second about what it offers and how easier it would make your life as a front-end dev, you realise that the plain old CSS you've been using (and learned to cherish) is pretty much crippled. How hard should it be to vertically center something, or to evenly distribute elements across the width of a container?

Experimenting with Sass and grids

CSS grid systems are very popular nowadays and a preprocessor is a good friend to have if you're looking to use them. Systems like Gridle, Neat or Susy are very powerful (and considerably complex) tools, and in case you're already using any of them let me warn you straight away: this post won't bring anything new or add anything to what they do. If you're like me, however, you'll most likely want to create your own solution at some point, something small and with code that you fully understand, giving you full control over things. If that's the case, read along.

Write simple, elegant and maintainable media queries with Sass

I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my own: meet include-media.