Talk Foo

Articles about ideas, concepts and experiences in software engineering.

Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed
Next.js

Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed

With our website redesign we revamped our technology stack. This post reviews choices including Next.js, GraphQL, MUI (Material UI), and TypeScript.

Read more

A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience
foo

A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience

An overview of the newly released version of www.foo.software, a website leveraging Lighthouse, Web Vitals and Binoculars tools to provide page experience testing services.

Read more

How to Collect and Analyze Web Vitals from Next.js for Page Experience
Web Vitals

How to Collect and Analyze Web Vitals from Next.js for Page Experience

Google's Web Vitals is becoming the standard for measuring page experience. As of version 9.4 of Next.js, it provides a built-in method for capturing and reporting Core Web Vitals. This post illustrates how to collect Web Vitals metrics from a Next.js app and send them to a service for storage.

Read more

A New Lighthouse REST API to Automate Testing for a New Day in SEO
REST

A New Lighthouse REST API to Automate Testing for a New Day in SEO

As Google continues steps towards a new search algorithm change focused on page experience, Foo has released version 2 of its REST API to automate Lighthouse testing. This post provides examples of how to use each of the new REST API endpoints to manage pages and Lighthouse audits on Foo.

Read more

Integration Tests, Unit Tests and React Testing Library
React

Integration Tests, Unit Tests and React Testing Library

In the twists and turns of software engineering, it can be difficult to define a testing strategy. In this article I emphasize the priority of user experience and propose a simple set of guidelines for front end testing with the help of React Testing Library.

Read more

Website Performance in 2021: React Server Components, Next.js Static Generation, and Linaria Zero Runtime CSS
React

Website Performance in 2021: React Server Components, Next.js Static Generation, and Linaria Zero Runtime CSS

In this post I highlight a few current and upcoming features / libraries we can utilize to boost website performance in our React websites.

Read more

Web Vitals Data Studio Connector
Data Studio

Web Vitals Data Studio Connector

A guide to use Data Studio for visualizing Web Vitals data. Get started with our Data Studio connector to view and analyze beautiful charts.

Read more

Monitoring Page Experience with PageSpeed Insights API and Lighthouse
Lighthouse

Monitoring Page Experience with PageSpeed Insights API and Lighthouse

PageSpeed Insights is a Google project that has drastically evolved over the past few years. This post explains how Foo uses PageSpeed Insights API for page experience monitoring with Lighthouse.

Read more

How to Prepare for Google's New Page Experience Search Algorithm
Lighthouse

How to Prepare for Google's New Page Experience Search Algorithm

The new Google Search algorithm has been announced to rollout in May, 2021 to prioritize page experience, quantified by Web Vitals and Lighthouse. Find out how you can use Foo to help prepare.

Read more

Lighthouse Website Monitoring with Slack Notifications
Lighthouse

Lighthouse Website Monitoring with Slack Notifications

In this post we'll go over how to setup Slack notifications to trigger when Lighthouse audit scores change. Stay on top of website performance, SEO and more by monitoring with Foo.

Read more

Website Performance with React and Next.js
React

Website Performance with React and Next.js

Among the many recipes of frameworks, a popular combination these days is React with Next.js. It would be an oversight to assume we're automatically covered in terms of performance. Let's take a dive in performance implications of React with Next.js.

Read more

Lighthouse Data Studio Connector
Data Studio

Lighthouse Data Studio Connector

A guide to use Data Studio for visualizing Lighthouse data. Get started with our Data Studio connector to view and analyze beautiful charts.

Read more

How to Track and Analyze Web Vitals to Boost SEO: Getting Started
Web Vitals

How to Track and Analyze Web Vitals to Boost SEO: Getting Started

A guide for getting started with Web Vitals. With our simple integration you can collect, track and analyze Web Vitals data in charts with filtering options by OS, browser and device.

Read more

How to use Lighthouse in CircleCI
circle ci

How to use Lighthouse in CircleCI

CircleCI is a popular tool for orchestrating CI/CD pipelines. Lighthouse is an open-source project from Google for improving the quality of web pages. It provides user-centric metrics to audit SEO, performance, accessibility, best practices, and progressive web apps.

Read more

How to Analyze Website Performance with Lighthouse
SEO

How to Analyze Website Performance with Lighthouse

Lighthouse is an open-source project by Google that gives you a way to measure web page performance. It has configurable settings for reproducing various conditions. You can set network and device type to simulate, for example.

Read more

How to use Lighthouse in GitHub Actions
GitHub Action

How to use Lighthouse in GitHub Actions

GitHub Actions are used to automate software engineering workflows. Similar to tools like CircleCI, Jenkins, Travis and many others, GitHub Actions provides a declarative API for defining workflows.

Read more

Continuous Front End Website Performance Testing
SEO

Continuous Front End Website Performance Testing

In the past we viewed website performance from a pinhole. User experience design and development is vastly different nowadays as we accommodate a variety of devices and network conditions.

Read more

Dev Ops

Automated Lighthouse Check: How to Implement in DevOps

Whether you're running on CircleCI, Jenkins, GitHub or others - we got you covered! Find implementation docs here.

Read more

Lighthouse

Automated Lighthouse Check: How to Use the API

Trigger Lighthouse audits by using the Automated Lighthouse Check API. Learn more!

Read more

Lighthouse

Automated Lighthouse Check: Getting Started

Track SEO, performance, accessibility, best practice and progressive web app standards. Get started here!

Read more

What is Website Performance?
Website Performance

What is Website Performance?

Typically when we think of web page performance, we think of the time it takes for a page to load. Traditionally, we used JavaScript events on the window object such as DOMContentLoaded and onload. Nowadays, life cycle of a web page load can be thought of more granularly. > So rather than measuring load with just one metric, we should be measuring the times of every moment throughout the experience that can have an affect on the user's load perception.~ User-centric Performance Metrics | Googl

Read more