BUILD TIMES

AI and the creator's funnel AI and the creator's funnel

Software generated entirely by AI is not an hypothetical future — it's a reality today. I don't think it's an overstatement to say that this is the largest shift in the history of this industry, unravelling before our eyes at an astonishing pace. As a professional software engineer, I've been closely watching this change and taking my time to gather my thoughts on what this means for my profession and for the world. This is my first shot at putting those into words.

You should know this before choosing Next.js

Picking the technology stack for a project is an important and consequential decision. In the enterprise space in particular, it often involves a multi-year commitment with long-lasting implications on the roadmap of the project, the pace of its development, the quality of the deliverables, and even the ability to assemble and maintain a happy team. The open-source software model is a fundamental answer to this.

Publishing Deno modules on Netlify

Runtimes like Node.js rely on a package manager and a registry to install and distribute modules, but Deno has a different spin. It allows developers to import modules directly from a URL, which can be hosted on a CDN, your own server, or really anywhere on the web. This level of flexibility brings infinite options, so I started looking for the best workflow to release modules in this new paradigm. This article describes the solution I landed on — one that works for solo open-source developers or large development teams in the enterprise world.

Shipping Node.js projects at Netlify

At Netlify, we use a diverse set of technologies, languages and paradigms to build our product. Along with Ruby, Go, Rust and others, we write quite a bit of JavaScript. All flavors of it. My team is responsible for several mission-critical Node.js services: the Netlify CLI, the build system and the serverless function bundler are just a few examples. Despite the sheer number of repositories we maintain, and especially considering that some of them are open-source projects with daily contributions from the community, you might be surprised to learn that our team is relatively small. I lifted the curtain on the tools and processes that we rely on to make this happen.

Running Staticman on Netlify Functions

In 2016, I started working on a tool to fill the gap in user-generated content on (what is now called) the Jamstack: Staticman. Since then, the entire ecosystem has grown by leaps and bounds, offering developers a set of tools and primitives that were mostly unreachable just four years ago.

Smashing Podcast Episode #11

I was a guest on episode #11 of Smashing Magazine's podcast. I had the opportunity to chat with Drew McLellan about Sourcebit and how it can help developers connect any datasource to their JAMstack sites. Have a listen!

Building a web-connected traffic light

Our lives are constantly flooded with information destined from the digital world: the sound of a Slack message on the laptop, a WhatsApp message popping up on the watch, or the email push notifications making our phones buzz incessantly. The screens we surround ourselves with are little black holes that are constantly teasing us with a snippet of information, knowing that we can't avoid getting sucked in to see more.

Custom JSON (de)serialisation in JavaScript

If you write JavaScript applications, you probably find yourself having to read and write data structures to local files or remote APIs, which means you're probably good friends with JSON.stringify and JSON.parse. We should really get to know our friends, so let's talk about something these methods do that you may not be familiar with.

What is an API?

Google Calendar API, Google Maps API, Twitter API, GitHub API, jQuery API, React API, the DOM API. Is everything an API? What is an API and how can it be such an ubiquitous concept, present in such a diverse range of platforms and technologies?

GitHub Pages as a blogging platform

There’s a huge number of platforms to choose from if you’re looking to build a blog. WordPress is a likely first candidate, as these days it powers over 30% of the entire web, but products like Medium, Blogger, or Wix, to name just a few, are also popular and powerful alternatives.

Server-side rendering

Server-side rendering (SSR) is a relatively new addition to the list of web development buzzwords, and that’s not because rendering websites on a server is a new concept – it’s just that until not too long ago, it didn’t make much sense to render them anywhere else.

What is a headless CMS?

I vividly remember the first time I’ve used a CMS. It was the early 2000s and I came across a tool called PHP-Nuke, a content management system that offered an administration interface from where content could be easily created and modified, requiring no technical knowledge whatsoever from the user.

Transforming JavaScript at the edge

One of the greatest challenges of building for the Web is the plethora of devices, operating systems and browser combinations that the product must support. How do you move this universal platform forward whilst retaining compatibility with older setups, which often still represent a significant percentage of the market? At its core, the technology of the Web has evolved quite conservatively over the years – we still have HTTP requests with verbs, headers and body. However, the applications that we build on top of them are as complex as ever, not only on the server, where the complexity of web applications has traditionally lived, but also on the client, with front-end applications handling astonishing amounts of business logic and data access operations.

Taking the guesswork out of web compatibility

The most powerful aspect of the web is also what makes it so challenging to build for: its universality. When you create a website, you’re writing code that needs to be understood by a plethora of browsers on different devices and operating systems. It’s difficult. To make the web evolve in a sane and sustainable way for both users and developers, browser vendors work together to standardize new features, whether it’s a new HTML element, CSS property, or JavaScript API. But different vendors have different priorities, resources, and release cycles — so it’s very unlikely that a new feature will land on all the major browsers at once.

Microservices + Node.js

We covered the basic principles of a microservices architecture, but we'll also look into the practicalities of implementing it from a technical standpoint. As we've seen, microservices are agnostic of technology, so you could use any programming language or environment to build them. In this article we'll see why JavaScript — and the Node.js environment in particular — is a good candidate.

Microservices: not a free lunch

By now you should have a fairly good understanding of what microservices are and the problems they solve. Many organisations, big and small, have done incredibly positive transformations off the back of this architecture. But there is also the other side of the coin and it would be irresponsible to write about the wonders of microservices without also covering the complications they can bring. When implemented poorly, or when done for the wrong reasons, this architecture can create more problems than the ones it solves and quickly result in disaster.

Microservices vs. Service-Oriented Architecture

At this point, you might rightfully argue that a lot of the principles we used to characterise microservices resemble the Service-Oriented Architecture (SOA), a software design pattern that gained immense popularity in the early 2000s. Wikipedia defines SOA as: A service-oriented architecture (SOA) is a style of software design where services are provided to the other components by application components, through a communication protocol over a network.

The principles of microservices

In the previous article, we introduced the concept of microservices and established a parallel with the traditional monolithic approach. In this article, we’ll continue with that comparison whilst we cover the key principles behind a microservices architecture and how they can help an organisation build better software systems.

Introduction to microservices

Designing software systems is hard. When I first mastered a programming language, I started to feel confident about writing code and even proud of how efficient, elegant and flexible I could make it. But little did I know that writing software is so much more than that.

Static API generator

When I first started building websites, the proposition was quite basic: take content, which may or may not be stored in some form of database, and deliver it to people's browsers as HTML pages. Over the years, countless products used that simple model to offer all-in-one solutions for content management and delivery on the web. Fast-forward a decade or so and developers are presented with a very different reality. With such a vast landscape of devices consuming digital content, it's now imperative to consider how content can be delivered not only to web browsers, but also to native mobile applications, IoT devices, and other mediums yet to come.

Explain it like I'm five: fog computing

Have you ever thought about what happens when you type an address in your web browser? Like, what actually happens behind the scenes so that a page with the content you’re looking for lands on your screen? Where is that content coming from? As you might know, the Internet is just a massive group of interconnected computers, each of which is identified by a unique address (much like your home address). When you type the address to a website in your browser, you’re sending a message to the computer that lives on that address, asking it to send you the files with the content you’re after.

Lazy loading images with DADI CDN recipes

Images are amongst the most common culprits of poor performance in websites, as they often require sending several megabytes of data across the wire for a single asset. When the network conditions are less than ideal, this can have a huge impact on load times and potentially make the website unusable. To get around this, developers typically resort to lazy loading, a technique that comprises of sending a tiny temporary image with the initial payload (usually a blank pixel), which is then replaced when the real image, fetched asynchronously, has been downloaded and is ready to be used.

Using SVG clip-path to change a logo's colour on scroll

Last week I put together a landing site for a new business. The design was quite straightforward: a single page with various sections represented as full-width horizontal blocks with different background colours, and a fixed positioned logo on the top-left corner. The only particularity was that the logo should change colours, as the user scrolls, depending on which section it overlaps.

Tests for feature requests

One of the biggest challenges associated with maintaing an open-source project is to deal with bug reports and feature requests. GitHub issues provide a great space for discussion between the community and the project maintainers, but even when they contain finely detailed and crystal clear information (which is rare), there's still room for miscommunication that often cause frustration on both parties.

Deploying to Heroku with Haiku

This is a demo of Haiku, a platform that creates Heroku applications on-demand from pull requests in your GitHub repository. The idea is that every time you create a new pull request, the state of the branch you're about to merge is used to create and build a new Heroku application, which will give you a unique URL that can be used to test the new state, or to share a feature with a colleague or client.

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.

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!

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.

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.

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.

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.

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?