BUILD TIMES

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.

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.

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.

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.