Creating a staging environment for Jekyll

A staging or pre-production environment is a testing infrastructure that replicates as best as possible the setup of a live site. In the context of a Jekyll site, it can be used to share a new post or feature with a selected group of people before a roll out to the general public. In this post, I’ll show you how I created one and how I make use of it.

Read more

SpeedTracker at London Web Performance

Earlier this month, I gave a talk about SpeedTracker at London Web Performance, a monthly meetup for web performance professionals and enthusiasts, hosted at The Financial Times, in London. It was a great opportunity to spread the word about the project and get feedback from fellow developers. Hopefully, it also served to recruit some open-source lovers to help me with this endeavour!

Read more

Contributing to Mozilla Firefox DevTools

In 2007, Firebug 1.0 was released as a Mozilla Firefox add-on. This was the first set of browser development tools to feature a DOM inspector, a console and a JavaScript debugger in one place, which revolutionised front-end development tooling and shaped the way other browsers approached it too. A decade later, Firefox DevTools takes its place and I thought it’d be a great time to contribute to it. This article describes my experience in doing it, hoping to convince you to do the same.

Read more

Working remotely

It’s been just over a year since I joined DADI and, like everyone else in the company, started working fully remotely. There are still many people that are curious and intrigued by this work style and there are certainly many myths around it; after a year of experiencing it myself, I thought I’d share some of my own views on the matter.

Read more

Sass components with variable naming conventions

To build a library of UI components that is flexible enough to be dropped into any project, there are some things to be considered. To avoid naming collisions, you might want to prefix CSS classes with a certain sequence of characters, but what should you use? What if the prefix you choose is already being used by something else? Unlikely, I know, but possible nonetheless. And what about the naming convention for the class names? Is the project using camelCase, PascalCase or hyphen-separated names? It’d be great if your library could match whatever is being used in the host project.

Read more

2016: Year in review

It’s the first time I do a post like this, as I typically leave them to people with far more interesting things to say and greater achievements to report. But this time around, I felt it made sense to put my year into perspective and share some of the good things, the bad things and, more importantly, the lessons I learned in the process. I’ll also share a bunch of goals for next year — if nothing else, it’ll be fun to see me fail spectacularly at achieving them.

Read more

Creating responsive video embeds in Jekyll

Making video embeds responsive is not always straightforward. Ideally, we’d have a way of making the embed take up the full width of a container (no more, no less) whilst maintaining the original aspect ratio of the video. Most providers, such as YouTube and Vimeo, provide these embeds in the form of iframes, which are not particularly friendly with responsive layouts.

Read more

How I use include-media in my projects

I mentioned include-media quite a few times in various posts on this blog, but I don’t think I mentioned some of the plugins that me and the community have built around it. I thought it’d be useful to make a quick video showing how I use the library in my projects and how I make use of some plugins to make my life easier.

Read more

Introducing SpeedTracker

As several reports show, it’s possible to correlate poor-performing websites with losses in engagement and revenue, so keeping a close eye on performance is of utmost importance for projects and businesses of all sizes. To do that, I’m a huge fan and regular user of WebPageTest.

Read more

Building a Website Performance Monitor

A couple of months ago I wrote about using WebPageTest, and more specifically its RESTful API, to monitor the performance of a website. Unarguably, the data it provides can translate to precious information for engineers to tweak various parts of a system to make it perform better. But how exactly does this tool sit within your development workflow? When should you run tests and what exactly do you do with the results? How do you visualise them?

Read more