BUILD TIMES

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.