Fixing layout shifts caused by web fonts

In 2020, Google introduced Core Web Vitals metrics to measure some aspects of real-world user experience on the web. This blog has consistently achieved good scores for two of these metrics: Largest Contentful Paint and Interaction to Next Paint. However, optimizing the third metric, Cumulative Layout Shift, which measures unexpected layout changes, has been more challenging. Let’s face it: optimizing for this metric is not really useful for a site like this one. But getting a better score is always a good distraction. 💯

To prevent the “flash of invisible text” when using web fonts, developers should set the font-display property to swap in @font-face rules. This method allows browsers to initially render text using a fallback font, then replace it with the web font after loading. While this improves the LCP score, it causes content reflow and layout shifts if the fallback and web fonts are not metrically compatible. These shifts negatively affect the CLS score. CSS provides properties to address this issue by overriding font metrics when using fallback fonts: size-adjust, ascent-override, descent-override, and line-gap-override.

Two comprehensive articles explain each property and their computation methods in detail: Creating Perfect Font Fallbacks in CSS and Improved Continue reading

Weekend Reads 083024


Microsoft on Thursday disclosed four medium-severity security flaws in the open-source OpenVPN software that could be chained to achieve remote code execution (RCE) and local privilege escalation (LPE).


Cybersecurity researchers have discovered multiple critical flaws in Amazon Web Services (AWS) offerings that, if successfully exploited, could result in serious consequences.


As many as 10 security flaws have been uncovered in Google’s Quick Share data transfer utility for Android and Windows that could be assembled to trigger remote code execution (RCE) chain on systems that have the software installed.


SiFive has announced the launch of its latest core for datacenters, the P870-D, and claims it has a leg up on Arm’s Neoverse N2 in density for AI.


Unstoppable Domains (UD), a provider of Web3 domain names and digital identities, has been officially accredited by the Internet Corporation for Assigned Names and Numbers (ICANN).


CENTR, the association overseeing European country code top-level domain (ccTLD) registries, has announced the public release of its Domain Crawler Project code.


Remote SIM provisioning (RSP) for consumer devices is the protocol specified by the GSM Association for downloading SIM profiles into a secure element in a mobile device. The process is commonly known as eSIM, and it Continue reading

HN747: Automate The Easy Things

Our Heavy Networking guest today is Hans Driessens, and we sat down at AutoCon1 to talk through some of his network automation projects. Hans shares his journey from a service engineer to a consultant specializing in network automation. We discuss the evolution of programming languages, the importance of foundational programming skills, and the practicalities of... Read more »

Explore ContainerLab: Simulate Complex Network Topologies with Docker Containers

I stumbled across this tool, while am always a fan of VRNET-LAB https://github.com/vrnetlab/vrnetlab and it operates on docker containers, i could not get it properly bridge it with Local network meaning reachability to internet is something that I never worked on.

A container lab is a virtualized environment that utilises containers to create and manage network testing labs. It offers a flexible and efficient way to simulate complex network topologies, test new features, and perform various network experiments.

One striking feature that i really liked about containerlab is that representation is in a straight yaml which most of the network engineers now a days are Familiar with and its easy to edit the representation.

Other advantages

  • host mappings are done automatically
  • Traffic capture is done with ease

Host mappings after spinning up the lab

Slide explaining the capture process – Courtesy Petr Ankudinov (https://arista-netdevops-community.github.io/building-containerlab-with-ceos/#1)

https://containerlab.dev/quickstart/ – Will give you how to do a quick start and install containerlab.

https://github.com/topics/clab-topo – Topologies contributed by community

https://github.com/arista-netdevops-community/building-containerlab-with-ceos/tree/main?tab=readme-ov-file – Amazing Repo

https://arista-netdevops-community.github.io/building-containerlab-with-ceos/ -> This presentation has some a eVPN topology and also explain how to spin up a quick eVPN with ceos Continue reading

Network CI/CD Pipeline – GitLab Introduction

Network CI/CD Pipeline - GitLab Introduction

Hi all, welcome back to our Network CI/CD blog series. In this part, we’ll discuss what exactly GitLab is and the role it plays in the whole CI/CD process. We’ll explore how to use GitLab as a Git repository, how to install GitLab runners, and how to write a GitLab CI/CD pipeline, among other topics. So let’s get to it.

Prerequisites

Before we proceed, let’s go over some prerequisites. This part of the series assumes you have some familiarity with Git, Ansible, and basic Docker concepts. I’m not an expert in any of these, but I have a basic understanding of what each tool does and how to configure and use them. Even if you’re not very familiar, you can still follow along as we go step by step.

Using GitLab as a Git Repo

Git is a version control system that allows you to track changes to your code, collaborate with others, and manage different versions of your projects. It's a fundamental tool for network automation that works with code or configuration files.

Git for Network Engineers
As Network Engineers, we work with various text files such as network device configurations, scripts, and text-based documentation. Managing these Continue reading

Preloading Extra Images with Kubernetes Image Builder

The Image Builder project is a set of tools aimed at automating the creation of Kubernetes disk images—such as VM templates or Amazon Machine Images (AMIs). (Interesting side note: Image Builder is the evolution of a much older Heptio project where I was a minor contributor.) I recently had a need to build a custom AMI with some extra container images preloaded, and in this post I’ll share with you how to configure Image Builder to preload additional container images.

Image Builder isn’t a single binary; it’s a framework built on top of other tools such as Packer and Ansible. Although in this post I’m discussing Image Builder in the context of building an AMI, it’s not limited to use with AWS. You can use Image Builder for a pretty wide collection of platforms (check the Image Builder web site for more details).

To have Image Builder preload additional images into your disk image, there are three changes needed. All three of these changes belong in the images/capi/packer/config/additional_components.json file:

  1. Set load_additional_components to true. (The default value is false.)
  2. Set additional_registry_images to true. (This also defaults to false.)
  3. Set additional_registry_images_list to a comma-delimited list of fully-qualified image Continue reading

Common Services VRF with EVPN Control Plane

After discovering that some EVPN implementations support multiple transit VNI values in a single VRF, I had to check whether I could implement a common services L3VPN with EVPN.

A common services VPN is a VPN in which server sites can communicate with each other and the clients, but the clients cannot communicate between themselves.

TL&DR: It works (on Arista cEOS)1.

Here are the relevant parts of a netlab lab topology I used in my test (you can find the complete lab topology in netlab-examples GitHub repository):

Read more …

NAN072: Exploring Internet2’s Network Automation for University and Research Networks

On today’s episode we delve into Internet2’s mission to advance research and education through high-speed connectivity. University and research networks may have more complicated designs, requirements, and restrictions than you’d expect. We talk about these challenges, along with innovative network automation solutions. The discussion emphasizes the collaborative, member-driven approach of Internet2 and its commitment to... Read more »

Not All OSPF Inter-area Traffic Traverses Interfaces In Area 0

Everyone knows that OSPF is a link state protocol. Those that study also discover that OSPF behaves like distance vector between areas as Type-1- and Type-2 LSAs are not flooded between areas, but rather summarized in Type-3 LSAs. This means that OSPF is a logical star, or hub with spokes, where Area 0 is the backbone and all other areas must connect to Area 0. This is shown below:

With this topology, since all the areas only connect to the backbone area, traffic between areas must traverse the backbone:

We learn about this behavior in literature where there is a very straight forward topology where each ABR is only attached to one area beyond the backbone. Such a topology is shown below:

In such a topology, traffic between RT04 and RT05 has to traverse the backbone. This is shown below:

However, what if you have a topology which is not as clear cut? Where an ABR attaches to multiple areas? This is what we will explore in this post. We’ll be using the topology below:

In this topology, RT02 and RT03 are ABRs. RT02 is attached to both Area 1 and Area 2 in addition to the backbone, while RT03 Continue reading

1 … 106 107 108 109 110 … 3,835