BUILD TIMES

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.

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.

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?

We need more open-source love

The news that Tim Wood, maintainer of popular JavaScript library Moment.js, was stepping away from the project was a wake-up call for the open-source community. His reasons, although super easy to understand and relate to, are not discussed often enough.

COPE and Node.js microservices at BragaJS

Earlier this week, I delivered a talk titled COPE and Node.js microservices, based on the article I wrote on CSS-Tricks. It happened at BragaJS, a local meet-up organised by Subvisual in Braga, Portugal. It was a great opportunity for me to connect a bit more with the local dev community, which I somewhat lost touch with since I moved to London.

How To Use WebPageTest and its API

While the richness and interactivity of the average website has changed dramatically over the last decade, the same can be said about the expectations of those who consume it. This page has a list of reports that show how businesses were able to establish a direct correlation between the their website's performance and conversion/revenue figures. For example, the engineering team at the Financial Times conducted a test which showed that an increase of just one second in load time caused a 4.9% drop in article views.

How I started contributing to the Mozilla Developer Network

I have a thing for documentation. When I'm building something, I believe it's my job to produce comprehensive and accessible documentation (which I actually take great pleasure in doing). And when I'm on the other side of the equation, I surely appreciate reading and learning from it. For a developer, the repository of pages that document the native primitives, structures and APIs of a given programming language are the closest thing they will ever have to an instruction manual.

Adding user-generated content to a static site using Staticman

I've been really interested in finding the ideal solution to add user-generated content, such as comments on a blog post, to a static site. My incursion started with a PHP middleman application that would interact with the now defunct Poole platform. A few months later, a talk by Tom Preston-Werner made me rethink the whole concept, and I ended up building a bespoke commenting system. After several iterations, that project eventually evolved into a public, open-source platform called Staticman.

Kindness by default

We've all gone through the experience of being new to something: a job, a business, a community, a project, a group of people or even a city or country. Anything from small and customary changes that happen every day to once-in-a-lifetime life/career turning points. Everyone goes through these moments with different measures of excitement and apprehension, but those two feelings are always there.

Learning to COPE with microservices

I vividly remember my first encounter with a content management system: It was 2002 with a platform called PHP-Nuke. It offered a control panel where site administrators could publish new content that would be immediately available to readers, without the need to create/edit HTML files and upload them via FTP (which at the time was the only reality I knew).

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.

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.

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.

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.

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.