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!

Read on Smashing Magazine

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.

Read 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.

Read more

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?

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read on Mozilla Hacks

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

Kindness by default

(Fair warning: This is a non-technical post in which I essentially state the obvious.) 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.

Read more

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).

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

Rethinking the commenting system for my Jekyll site

*Update 03/10/2016: I turned this concept into a service called Staticman. It's free and open-source and you can read more about it in this post.* 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.

Read more

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.

Read more

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.

Read more

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!».

Read more

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.

Read more

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?

Read more

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!

Read more

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?

Read more

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?

Read more

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.

Read more

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.

Read more

Approaches to media queries in Sass

Using media queries in CSS as part of responsive websites is bread and butter stuff to todays front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well. I spent a few months experimenting with a dozen different approaches to media queries in Sass and actually used a few in production. All of them eventually failed to cater for everything I needed to do in an elegant way. So I took what I liked about each of them and created a solution that covered all scenarios I came across.

Read more

Building a bespoke commenting system for a static site

I've been using Jekyll to run my professional website and my blog for about 2 months and I never look back. It can do pretty much everything a dynamic website does, but better and faster. The one thing that my blog was missing was a way to get feedback from the readers and to allow me to interact with them and learn from their experiences. It's not very smart (and a bit arrogant, actually) to publish an article with a solution to a certain problem and not allow readers to comment on it, pointing possible weaknesses or even posting other solutions that (most likely) turn out to be better than mine.

Read more

Including and managing images in Jekyll

One thing that I instantly loved about Jekyll is that it encourages you to keep a strict and tidy folder structure in your project: you have your posts, layouts, styles, includes, collections and pages, and each one of these will go in a different folder to keep concerns separate. But what about the assets, namely images, that you want to include with your posts? Will you keep piling them in your assets folder? I have a better idea.

Read more

Is LinkedIn ignoring your open graph meta tags?

So you're trying to share your website on LinkedIn because you're a professional and all, but it decides to completely ignore your open graph meta tags? Just read along.

Read more

Collapsing code snippets on mobile devices

If you have a blog about coding — GOSH, aren't you geeky — you probably find yourself showing your readers portions of code to guide them through specific problems and to outline the solutions. Taking the time to change how you display these code snippets can be the difference between a good and a terrible user experience for your readers.

Read more

Thoughts on serving and monitoring a feed

Creating an alternative version of a website or a blog has become common practice, allowing authors to syndicate their content to other sites and offering readers the ability to use third-party applications to read and merge articles with other sources of content. RSS and Atom are some of the most used formats and most popular blog platforms are capable of creating these feeds. Jekyll is no exception as it ships with a feed.xml file that automatically generates a feed every time the site is built, so you could start pointing your readers to your feed at http://yourblog.url/feed.xml right away. But is that the best strategy? What if, at some point, you decide to move your blog to a different platform with a different URL? And most importantly, how do you keep track of how many people actually read and subscribe to your content?

Read more

Creating a tags page in Jekyll

Jekyll supports post tagging by default, but you have to do some work to get something out of it. It reads tags directly from the front matter on posts, but then what? Does it allow users to search posts by tag? Does it create a tags aggregation page? No sir. You'd probably need plugins to achieve that level of functionality, but there are still some things you can achieve without them.

Read more

Adding Ajax pagination to Jekyll

Jekyll has a built-in pagination system that allows you to break your blog posts into pages with a given number of posts, automatically creating all the files and folders necessary and making it really easy to generate and include the page navigation interface for your pages. By adding paginate: 5 to the config file (_config.yml) and doing a couple of minor tweaks to the code that loads site posts, Jekyll will automatically create pages with a maximum of 5 posts with the default URL pattern of yourblog.url/page2, yourblog.url/page3 and so on. But this wasn't exactly what I was after.

Read more

How I write media queries in Sass

Once you Sass, you never go... ah, damn it. I can't make the pun work, but you get the idea. Sass is a really powerful tool for front-end developers that I would really struggle to live without. CSS pre-processors, like any kind of power, come with great responsibility. They enable poor, lazy and inefficient designs, but they also allow you to write some really cool stuff with little to no effort.

Read more

How I used Jekyll on my Backbone.js website

Several months after creating my website, I decided that I needed some form of content management system, especially since I was planning on throwing my blog into the mix. Content was mixed with layout and the mobile version wasn't great (it was a "m.dot" solution with different templates and content duplication — YIKES!).

Read more

The story behind my website

It was the beginning of 2013 and I needed a website. I wanted to apply for a job in London as a creative developer and I knew I needed a portfolio that would stand out. At that time, websites with full-screen background videos were starting to be a trend. The first one I saw that I really liked was Beyoncé's website, which included a looping background video that would change depending on the section. That was cool, but I wanted something more.

Read more