DEV Community: Adrian Guery

Debugging Query Time in Gatsby: Identifying and Optimizing Long-Running Queries

Adrian Guery — Mon, 03 Apr 2023 06:30:00 +0000

Introduction

Gatsby is a powerful React-based framework, enabling developers to build fast and optimized web applications. One of Gatsby's core features is its ability to combine data from multiple sources and transform it into a unified GraphQL API for querying. However, as your application grows, you may encounter long-running queries that slow down your build times and negatively impact performance.

In this article, we'll discuss how to identify and optimize long-running queries in Gatsby using the reportLongRunningQueryJob function. By the end of this guide, you'll be able to debug query time issues and improve the overall performance of your Gatsby application.

Identifying Long-Running Queries

Gatsby internally uses a function called reportLongRunningQueryJob to log queries that take a long time to execute. You can modify this function directly in your node_modules folder to log the longest-running queries and identify them. Here's how:

Locate the reportLongRunningQueryJob function in your Gatsby project's node_modules folder. The exact file path may vary depending on your Gatsby version, but it should be something like node_modules/gatsby/dist/utils/reporter/report.js.
Open the file in your favorite code editor and look for the following function:

   function reportLongRunningQueryJob(queryJob): void {

Modify the function to log the query job details. For example, you can add a console.log statement to print out the query, duration, and other relevant information:

   function reportLongRunningQueryJob(queryJob): void {
     console.log("Long-running query:", {
       query: queryJob.query,
       duration: queryJob.duration,
       componentPath: queryJob.componentPath,
     });
   }

Save the file and run your Gatsby application. You should now see console logs for any long-running queries, allowing you to identify them and analyze their performance.

Creating a Document to Track Long-Running Queries

In addition to logging query details in the console, you may want to create a document that lists your longest-running queries for easier tracking and optimization. To do this, follow these steps:

Create a new file in your Gatsby project's root folder named long-running-queries.md (or any other name you prefer).
Modify the reportLongRunningQueryJob function in your node_modules folder again, this time to append the query details to the document you created:

   const fs = require("fs");
   const path = require("path");

   function reportLongRunningQueryJob(queryJob): void {
     const logEntry = `
Long-running query:
  Query: ${queryJob.query}
  Duration: ${queryJob.duration}ms
  Component path: ${queryJob.componentPath}
`;
     fs.appendFileSync(path.resolve("long-running-queries.md"), logEntry);
   }

Save the file and run your Gatsby application. Now, any long-running queries will be logged to the long-running-queries.md document, allowing you to track and optimize them more easily.

Optimizing Long-Running Queries

Once you've identified your long-running queries, you can take various steps to optimize them and improve your application's performance. Some optimization techniques include:

Limiting the amount of data fetched in a single query
Reducing the complexity of your GraphQL queries
Using Gatsby's built-in image optimizations (e.g., gatsby-image or gatsby-plugin-image)
Implementing pagination or lazy-loading for large lists of data
Utilizing caching mechanisms for static or infrequently updated data

Conclusion

Debugging query time in Gatsby is essential for maintaining optimal performance in your web applications. By modifying the reportLongRunningQueryJob function and creating a document to track your longest-running queries, you can identify and optimize slow queries to improve your application's build times and overall performance. Keep an eye on your queries and make necessary adjustments as your project evolves to ensure that Gatsby remains a fast and efficient tool for your web development needs.

How to Re-activate CSS Code Splitting in Gatsby

Adrian Guery — Fri, 31 Mar 2023 06:30:00 +0000

Introduction

Gatsby, a popular static site generator built on React, has a default configuration that bundles all the CSS (Cascading Style Sheets) into one file. Although this configuration might work for small-scale projects, it could lead to performance issues on larger websites. In such cases, re-activating CSS code splitting can lighten the load on initial page load, thus significantly improving the performance of your Gatsby site.

This article will take you through the process of re-activating CSS code splitting in Gatsby to help you optimize your site's performance.

What is CSS Code Splitting?

CSS code splitting is a technique that divides a single large CSS file into smaller chunks. These smaller chunks of CSS are then loaded only when required, resulting in a faster initial page load. By splitting your CSS code, you can ensure that only the necessary CSS is loaded for any given page, reducing the amount of data that needs to be downloaded.

Why Gatsby Deactivates CSS Code Splitting by Default?

Gatsby deactivates CSS code splitting by default for simplicity and to ensure a seamless developer experience. This decision reduces the complexity of managing multiple CSS files, making it easier for developers to build and maintain their websites. However, this configuration may not be the best choice for all projects, especially those with a large number of styles or pages.

For large projects, bundling all the CSS into a single file can lead to a significant increase in the size of the initial page load, as the browser needs to download and parse the entire CSS file before rendering the page. This can result in slower page load times, which can negatively impact user experience and search engine rankings.

Re-activating CSS Code Splitting in Gatsby

To re-activate CSS code splitting in Gatsby, you need to make use of a plugin called gatsby-plugin-css-modules. This plugin allows you to use CSS Modules with your Gatsby project, which enables you to split your CSS code into smaller, more manageable pieces that can be loaded on-demand.

Follow these steps to re-activate CSS code splitting in your Gatsby project:

1. Install gatsby-plugin-css-modules:

First, you need to install the gatsby-plugin-css-modules plugin. To do this, open your terminal and navigate to your Gatsby project's root directory. Then, run the following command:

npm install --save gatsby-plugin-css-modules

This command installs the plugin and adds it to your package.json file.

2. Configure gatsby-config.js:

Next, open your gatsby-config.js file, which is located in the root directory of your Gatsby project. You need to add the gatsby-plugin-css-modules plugin to the plugins array. Add the following code to your gatsby-config.js file:

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: `gatsby-plugin-css-modules`,
      options: {
        // Configure the plugin options, if required
      },
    },
  ],
  // ...
};

3. Start using CSS Modules:

Now that you've installed and configured the plugin, you can start using CSS Modules in your Gatsby project. To do this, rename your CSS files to have the .module.css extension (e.g., styles.module.css). This ensures that your CSS files are treated as CSS Modules.

In your React components, import the CSS Modules as follows:

import React from "react";
import styles from "./styles.module.css";

const MyComponent = () => (
  <div className={styles.container}>
    <h1 className={styles.heading}>Hello, World!</h1>
  </div>
);

export default MyComponent;

In the example above, the styles object contains the generated class names for your CSS classes, which you can use in your JSX markup.

Conclusion

By re-activating CSS code splitting in your Gatsby project, you can improve the performance of your site and ensure a faster initial page load. By dividing your CSS code into smaller chunks and loading them on-demand, you can optimize the user experience for your visitors.

Using the gatsby-plugin-css-modules plugin, you can easily implement CSS code splitting in your Gatsby project and start enjoying the benefits of this optimization technique.

How I Fine-Tuned GPT-3 for My Automatic Video Tutorial Project

Adrian Guery — Wed, 29 Mar 2023 06:31:00 +0000

Introduction

In a previous article, I introduced my automatic video tutorial project, which leverages the power of GPT-3 and Remotion.js to generate video tutorials based on a JSON input. To optimize my project, I fine-tuned GPT-3 to better understand the specific JSON format expected by my Remotion.js project. In this follow-up article, you will discover how I went through the fine-tuning process to improve the efficiency of my project.

Step 1: Create multiple formatted JSON examples

For my video tutorial generation project, I created a dataset consisting of numerous examples of correctly formatted JSON that match my project's structure as input. I focused on gathering examples covering a wide range of js coding topics to ensure that GPT-3 can generate JSON inputs for any coding tutorial I want to create using my Remotion-based program.

Step 2: Preprocess the Data for My Project's JSON Format

To fine-tune GPT-3 for my project, I preprocessed the collected data to ensure it's in the appropriate format. I tokenized the JSON data according to my project's structure and converted the tokens into input and output sequences that GPT-3 can understand, optimizing the model for my project's requirements.

The format I used is as follows:
{ "prompt":"THE_PROMPT_EXAMPLE\n\n###\n\n", "completion":"THE_COMPLETION_EXAMPLE###"}

For example :

{    
"prompt":"How to make an animated button which scale when we click on it. Write an example and highlight interesting parts of the example.\n\n###\n\n",    
"completion":"{    'code':'<!-- HTML for the button --><button class='animated-button'>Click me!</button><!-- CSS for the animation --><style>.animated-button {/* other button styles */transition: transform 0.1s;transform-origin: center;}.animated-button:active {transform: scale(0.95);}</style>', 'language': 'html',   'hihglightExaplainations':[       {          'highlight':'animated-button',          'explanation':'the button has a class of animated-button that is used to apply the animation styles'       },       {          'highlight':'transition',          'explanation':'The transition property is used to specify the duration of the animation'       },       {          'highlight':'transform-origin',          'explanation':'the transform-origin property is used to specify the point around which the button will scale'       },       {          'highlight':':active',          'explanation':'The :active pseudo-class is used to apply a style to the button when it is being clicked'       },       {          'highlight':':transform',          'explanation':'the transform property is used to scale the button down by 5%'       },       {          'highlight':':scale',          'explanation':'using the scale function'       }    ] }###"
}

Step 3: Fine-Tune GPT-3 for My Project

With the preprocessed, I fine-tuned GPT-3.
I installed OpenAI on cli :
pip install --upgrade openai

I exported my OpenAI API KEY :
export OPENAI_API_KEY="MYAPIKEY"
I prepared my data :
openai tools fine_tunes.prepare_data -f /dev/gtp3-fine-tuning/fine-tuning-for-remotion-tutos.jsonl

I fined tune the model :
openai api fine_tunes.create -t /dev/gtp3-fine-tuning/fine-tuning-for-remotion-tutos_prepared.jsonl -m davinci

Step 4: Evaluate and Iterate for My Project

After fine-tuning GPT-3, I evaluated its performance on the validation set in the context of generating JSON inputs for my specific project. I repeated other tries of fine-tuning process until GPT-3 achieved the desired performance for generating JSON inputs suitable for my Remotion-based program.

Generate JSON Inputs for My Project 🚀😎

Once I fine-tuned GPT-3 for my project, it became a powerful tool to generate JSON inputs for my coding tutorials project. By providing GPT-3 with a prompt, the model generates a JSON input that my Remotion program uses to create a video tutorial, streamlining my content creation process.

Conclusion

Fine-tuning GPT-3 to understand my expected JSON format has significantly improved the efficiency of my video tutorial creation process using Remotion. By following the steps outlined in this article and integrating them with my project, I have successfully trained GPT-3 to generate JSON inputs for a wide range of coding tutorials, enabling me to produce video contents very swiftly and easily.

Remotion Deep Dive into the Automatic Video Tutorials on Coding with GPT-4 and Remotion

Adrian Guery — Wed, 29 Mar 2023 06:30:00 +0000

Introduction

In the previous article, I introduced the automatic video tutorials on coding, a project that leverages GPT-4 and Remotion to create video tutorials based on JSON inputs generated by GPT-4 fine tune model. In this article, we will focus on how I used the Remotion.js, react-syntax-highlighter library and the getBoundingClientRect method to create the video tutorials.

There is the project :
https://github.com/AdrianGuery/gpt4-gpt3-video-generation

Using Real Code: React-Syntax-Highlighter Library

The react-syntax-highlighter library is a powerful tool that provides syntax highlighting for code snippets in React applications. I chose this library to display the code in the video tutorial project because it supports a wide range of programming languages and offers various customization options.

After installing the library, I imported the necessary components and styles in the React application:

import {Prism as SyntaxHighlighter} from "react-syntax-highlighter";
import {atomDark} from "react-syntax-highlighter/dist/esm/styles/prism";

Next, I used the SyntaxHighlighter component to display the code snippet from the JSON input. I passed the language and style props to customize the appearance of the code:

<SyntaxHighlighter
  customStyle={{width: "100%", height: "100%", fontSize: "20px"}}
  language={example4.language}
  style={atomDark}
  showLineNumbers
  wrapLines={true}
  wrapLongLines
>
  {code}
</SyntaxHighlighter>

Highlighting Code Snippets with getBoundingClientRect

To highlight specific parts of the code snippet, I needed to create a rectangle that surrounds each highlighted code segment. I accomplished this using the getBoundingClientRect method, which returns the size of an element and its position relative to the viewport.

I created a function that finds the first and last words of the highlighted code segment and calculates the bounding rectangle surrounding them:

useEffect(() => {
  ...
  var firstRect = firstElement?.getBoundingClientRect();
  var lastRect = lastElement?.getBoundingClientRect();
  if (firstRect && lastRect) {
    setCurrentHighlightProps({
      x: firstRect.x,
      y: firstRect.y,
      large: lastRect.x - firstRect.x + lastRect.width,
    });
  }
}, [currentIndex]);

Finally, I used this function to create a rectangle for each highlighted code segment in the JSON input:

{currentIndex >= 0 &&
  currentIndex < example4.highlightExplanations.length &&
  currentHighlightProps && (
    <>
      <Highlight
        x={currentHighlightProps.x}
        y={currentHighlightProps.y}
        large={currentHighlightProps.large}
      />
      <Subtitle
        text={
          example4.highlightExplanations[currentIndex].explanation
        }
      />
    </>
  )}

With these highlight bounds, I was able to generate video tutorials that not only display the code snippet, but also highlight and explain specific parts of the code.

Conclusion

In this detailed walkthrough, we explored how we implemented the automatic video tutorials on coding project using GPT-4, Remotion, react-syntax-highlighter library, and the getBoundingClientRect method with real code snippets. By combining these technologies, I was able to create a powerful tool that generates video tutorials based on JSON inputs, helping developers learn and understand code snippets more effectively.

Prompt to Video with GPT-4 and React.js - Automatic video generation

Adrian Guery — Wed, 29 Mar 2023 06:29:00 +0000

Introduction

I always strive to create engaging and informative content. I'm convinced that one of the most effective ways to teach coding is through video tutorials. However, creating high-quality video tutorials from scratch can be time-consuming and labor-intensive. That's why I've developed a program that leverages the power of GPT-4 and Remotion (framework for creating videos programmatically using React.js) to automatically generate video tutorials from just a prompt.

Example of output video generated by a GPT prompt :

In this article, I will discuss how my program works and how I fine-tuned GPT-3 to understand the expected JSON format, allowing it to generate detailed and accurate JSON inputs for any coding tutorial I want to create a video with and how I did it also with GPT-4.

Creating the Program with Remotion

Remotion is a powerful library that allows developers to create videos programmatically using React. By feeding a JSON input (which will be created by my GPT4 fine tune model) to my program, I can generate a video tutorial explaining how the code works step-by-step.

The JSON input I use for this program has a specific structure, which includes the code snippet, the language, and an array of highlight explanations. The highlight explanations contain the code segment and a brief explanation of what that particular code does.

For example, here is a JSON input for a simple React countdown timer:

{
    code: "import React, { useState, useEffect } from 'react';\nfunction CountdownTimer() {\n const [seconds, setSeconds] = useState(60);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setSeconds(seconds - 1);\n }, 1000);\n return () => clearInterval(interval);\n }, [seconds]);\n\n return (\n <div>\n {seconds} seconds remaining\n </div>\n );\n}",
    language: "javascript",
    highlightExplanations: [
        {
            highlight: "import React, { useState, useEffect } from 'react';",
            explanation:
                "This imports the required dependencies from the React library.",
        },
        {
            highlight: "const [seconds, setSeconds] = useState(60);",
            explanation:
                "This uses the `useState` hook to initialize the `seconds` state variable with a value of 60 and create a function to update its value, `setSeconds`.",
        },
        {
            highlight: "const interval = setInterval(() => {",
            explanation:
                "This sets up an interval that will run the anonymous function inside every 1000 milliseconds (1 second).",
        },
        {
            highlight: "setSeconds(seconds - 1);",
            explanation:
                "This decreases the value of the `seconds` state variable by 1 every time the interval runs.",
        },
        {
            highlight: "return () => clearInterval(interval);",
            explanation:
                "This is the cleanup function for the `useEffect` hook. It clears the interval when the component unmounts to prevent memory leaks.",
        },
        {
            highlight: "{seconds} seconds remaining",
            explanation:
                "This displays the current value of the `seconds` state variable in the component's render output.",
        },
    ],
};

Upon receiving this JSON input, my program processes it and generates a video tutorial using Remotion. The video tutorial explains each part of the code snippet, as specified in the highlight explanations array.

I wrote a more advanced article about this part :

Fine-tuning GPT-3 for JSON Input Generation

To make the process of creating video tutorials even more efficient, I fine-tuned GPT-3 to understand the specific JSON format used by my program. By training GPT-3 with numerous examples of correctly formatted JSON inputs, the model can now generate JSON inputs for any coding tutorial I want to create a video for.

This means that I can simply ask GPT-3 with to generate a JSON input that my Remotion program can use to create a video tutorial.

For example, I might ask GPT-3 to create a JSON input for a tutorial on how to create a simple countdown timer in React. GPT-3 would then generate a JSON input like the one shown earlier, with the code snippet and complete with highlight explanations for each part of the code snippet.

I write an article explaining how I fine tune my GPT-3 model step by step :

Utilizing GPT-4 for JSON Input Generation by Providing Five Prompt-Answer Examples

After gaining access to the GPT-4 API, I decided to experiment with GPT-4 as a JSON generator. The most significant advantage of GPT-4 is its extensive context capability, allowing for up to 50k tokens of context. This means that providing GPT-4 with five examples of prompt-answer pairs is possible, leading to improved results.

As a result, the outcomes were even better than those achieved with the fine-tuned GPT-3 model, as there were fewer instances of incorrect JSON formats.

Example : button which disappears when it's clicked

We asked our fine-tuned GPT3 (or GPT-4) model to :
Create a tutorial which teach how to create a button which disappears when it's clicked

It answers with this output :

 {
    code: "<button id='disappearing-button'>Click me!</button>\n<style>\n#disappearing-button {\n display: block;\n}\n#disappearing-button:active {\n display: none;\n}\n</style>\n<script>\n document.getElementById('disappearing-button').addEventListener('click', function() {\n this.style.display = 'none';\n });\n</script>",
    language: "html",
    highlightExplanations: [
        {
            highlight: "display: block;",
            explanation:
                "This sets the display property of the button to 'block', which makes it visible on the page.",
        },
        {
            highlight: "display: none;",
            explanation:
                "This sets the display property of the button to 'none', which makes it hidden on the page.",
        },
        {
            highlight: "document.getElementById('disappearing-button')",
            explanation:
                "This gets a reference to the button element on the page by its ID.",
        },
        {
            highlight: "addEventListener('click', function()",
            explanation:
                "This sets up a click event listener on the button element, which means that the anonymous function inside will be executed when the button is clicked.",
        },
        {
            highlight: "this.style.display = 'none';",
            explanation:
                "Inside the event listener function, 'this' refers to the element that the event listener is attached to (in this case, the button element). Setting the 'display' property of this element to 'none' makes it hidden on the page.",
        },
    ],
};

Which, once interpreted by Remotion will output this video tutorial :

Conclusion

By combining the power of GPT-4 (or fine tuned GPT-3) and Remotion, I have created a program that can automatically generate video tutorials for a wide range of coding topics. That shows how a NLP model can produce visual content with another program.

As AI and machine learning continue to advance, the possibilities for automating content creation in various fields are endless. This program is just one example of how we can harness AI to revolutionize the way we create content.

Mastering the Github Search Engine to Find Code Examples for Complex Integrations

Adrian Guery — Mon, 20 Mar 2023 18:42:55 +0000

Introduction

Github is a powerful platform for software development, providing a collaborative environment for countless repositories. Its search engine is a potent tool that can significantly enhance your productivity and help you find solutions when documentation falls short or with new technologies not already well documented. In this article, we will explore how to use Github's search engine effectively to find code examples for complex integrations.

As Catalin Pit, once said, "Documentations without examples are killing me. I read the documentation and then spend 30 minutes on Google trying to find how to do something from the documentation. Please add examples where possible!". He is right, this sentiment resonates with many developers, including me, who struggle to comprehend complex concepts from documentation alone. That's when the Github search engine comes to the rescue.
https://twitter.com/catalinmpit/status/1488506699296215040

The Power of Github Search Engine

The Github search engine can help developers find repositories, code, issues, users, and more. It supports a variety of search filters, qualifiers, and sorting options, making it easy to find what you need. By leveraging the search engine effectively, you can discover numerous examples and solutions shared by the vast Github community.

Here are some tips to help you get the most out of the Github search engine:

1. Use Specific Code Snippets

Instead of searching with sentences, use specific code snippets as your search query. For example, if you're unsure about a function's parameters in a library, search for the function name followed by an opening parenthesis, like "thatFunction(". This can provide you with relevant results that help you understand how the function works and its various parameters.

2. Utilize Search Qualifiers

Github search engine supports a range of search qualifiers that can help you refine your search results. Some common qualifiers include:

in:file: Searches for a specific keyword or phrase within a file's content.
extension:ext: Filters results by file extension.
language:lang: Filters repositories by programming language.
user:username: Searches repositories owned by a specific user.
org:organization: Searches repositories within a specific organization.

For example, if you want to find examples of Python code that uses the Flask framework, you can search for "Flask in:file language:Python".

3. Use Advanced Search Syntax

In addition to qualifiers, Github search engine supports advanced search syntax, such as:

Quotation marks (""): Use quotes to search for an exact phrase.
Asterisk (*): Use an asterisk as a wildcard to match any character sequence.
Minus (-): Use a minus sign to exclude specific keywords or qualifiers from your search.

For instance, if you want to find examples of React integration without Redux, you can search for "React integration example -Redux".

4. Sort and Filter Results

By default, Github search results are sorted by the "Best match", which takes into account factors such as relevance, user engagement, and recency. However, you can also sort results by the number of stars, forks, or the date of the most recent update which is very interesting if the example you search is about recent version of a library.

Moreover, you can filter results by the type of content (repositories, code, issues, etc.), language, and other criteria. This helps you narrow down the results to find the most relevant examples and solutions.

5. Explore Related Repositories and Users

When you find a useful example or solution, take the time to explore the repository and the user who created it. You might find additional examples, documentation, or resources that can help you with your integration.

Furthermore, follow users and organizations that frequently share valuable examples and solutions. This way, you can stay updated on the latest best practices and discoveries in your field.

Conclusion

The Github search engine is an invaluable resource for developers seeking examples and solutions for complex integrations. By mastering the search engine's features, you can save time and effort in finding the information you need. Don't let insufficient documentation hold you back – harness the power of the Github search engine to find examples and inspiration from the vast community of developers. Happy coding!

5 ultra actionable tips to improve your Web performances

Adrian Guery — Sat, 15 Oct 2022 10:18:30 +0000

If you want your website to be successful and well ranking on Google, you need to make sure it loads quickly and efficiently. Web performance is a measure of how fast a web page loads and how well it responds to user input. There are a number of factors that can affect web performance, including file size, server response time, and code efficiency. In this post, I will give you some tips on how to improve web performance and make your site run faster.
It's in part how we optimize our website to have 100% pagespeed on Google : https://www.kezios.fr/

1 - Improve your Images

Lazy loading images is a technique that lets you load the images only when a user scrolls the page. This means that if a user doesn’t reach the end of the page, they won’t load any images at all.

Decoding an image means converting it into a format that can be displayed on your site. The process is done by your browser, and it takes some time to do so. To prevent this process from happening as multiple times, it is better to decode them once and then store them for later use. Do not display over quality images

Images have different formats such as PNG, JPEG, GIF etc., which are used according to their needs and purposes but sometimes we use the wrong format for our image which makes them look blurry or pixelated in browsers. A simple trick which you can use here is giving proper dimensions and in multiple format (webp & jpg) for each image so that it will display properly even if there are differences between users’ screen and browser.

<picture>
  <source srcset="assets/img/yourImage.webp" type="image/webp">
  <source srcset="assets/img/yourImage.jpg" type="image/jpeg"> 
  <img src="assets/img/yourImage.jpg" alt="Your image !">
</picture>

2 - Preload & prefetch

Preloading is a technique used by web browsers to load ressources more quickly. It typically involves loading images and JavaScript files before a user has requested them, thus reducing the amount of time it takes to load the page.

<link rel="preload" href="yourJsFile.js" as="script" />

Prefetch can also be used to add value to your website by prefetching some of the content they will view at a later point in time. This is especially useful for to prefetch files which will be use in the next view page.

<link rel="prefetch" href="yourJsFile.js" as="style" />

3 - Minified and Compressed your ressources

Minification is the process of removing unnecessary characters from source code without changing its functionality. The most common way to do this is to remove white space and other formatting characters, but it can also include shortening variable names, merging multiple statements into one, or other alterations.

Compression is the process of reducing the size of a file. There are a few different methods for compressing files; these are defined in RFC 1952 as DEFLATE (the default compression method for GZIP) as well as BZIP2, LZMA/LZMA2 and XZ.

4 - CDN served your ressources and use a caching system

A content delivery network or CDN is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end users with high availability and high performance.

Caching systems are used in web performances to improve the speed and responsiveness of the system. Caching systems store frequently accessed data in a fast access memory, so that it can be quickly retrieved when needed. This can improve the performance of the system by reducing the amount of time needed to access the data.

5 - Optimized your fonts

One way to improve web performance is by optimizing the fonts. This can be done by reducing the number of font faces, using font faceobserver to load fonts asynchronously, and using font-display to control how the browser renders the font. By doing this, the browser can render the page faster and the user can see the content sooner.

Advantages of SSG over SSR

Adrian Guery — Thu, 12 May 2022 09:31:20 +0000

We will see in this article why you should use SSG over SSR.

Well, don't take this for a generalization

1.Performance

The server doesn't have to do anything except deliver the HTML to the client. Because of this, for users with a slow connection, it's a much faster experience to load a static site than it is to load a server-side rendered (SSR) site because the content has already been processed.

Static sites are also fast, even if the origin is slow. This is because there's no processing required on the origin for static sites—it just has to fetch and deliver the file.

Static sites improve time to first byte (TTFB). TTFB is an important metric that shows how fast your site begins loading in users' browsers—the lower this number, the better. This metric is influenced by many factors including latency, caching, and processing on subsequent requests. Because there's no server-side processing required when using SSGs, they give you instant TTFB and therefore better web core vitals scores from Google Lighthouse.

2.Build Time error catching

One of the biggest advantages of SSG is the ability to do build time error-catching. If you've ever used a CSS preprocessor, you'll be familiar with this concept: if you make a mistake in your code and try to compile it, you'll get an error. This is because these preprocessors are running on the client side and are not actually compiling anything.

3.Resilience

The advantages of static site generators (SSGs) over server-side rendering (SSR) are numerous, but there is one that stands out to me. It's about resilience. While a server-rendered site is dependent on the API, a static site generator doesn't care. If your API goes down, your page will still display the data that was fetched at build time.

For example, if you have an API like NASA's Astronomy Picture of the Day API, and it goes down for some reason on Christmas or New Years Day or the Super Bowl or whatever day it is that you're having lots of traffic, your site will still work because it has all the data it needs in its own files and directories. The only thing that won't work is rehydration—your page won't be able to fetch new pictures after the initial render. But at least your users will still see something!

4. Simpler caching logic

First of all, with SSG simpler caching logic is possible. On my site, I cache the generated HTML on a CDN and only regenerate it when one of my markdown files changes. This allows me to have a very fast page load time even on mobile devices despite hosting the site on a small server with no CDN in front of it.

With SSG you can boost performance using CDN caching without a lot of extra configuration. If you have a static site with 50 pages, you can put them all on a CDN and serve them from there instead of your own server, which helps your page load time tremendously—but if you update one of those pages, you need to invalidate that cached version on your CDN. If every page has its own cache-control header, this is easy

5. Less infra complexity

SSG is a simpler architecture, with fewer moving parts. It’s also significantly less expensive to run, since you don’t have to pay for the redundant upkeep of multiple servers.

SSGs are also cloud agnostic. You can host them on any cloud provider you like and they will continue to work as advertised.

The security posture of having one less server to worry about is another big benefit. If an SSG is compromised, it only has access to its own data, not anything else on your network or in your environment.

Infinite scale is another major advantage. As long as you have enough capacity on your web server to handle the initial traffic spike, you can add more web servers without worrying about where to put them or how much bandwidth they will consume.

Conclusion

There is the lot of advantages why you should use SSG over SSR. And we see only few, there is a lot more.
But when we start developing a web-application, it's become clear that there is no universal solution. We need to make the decision depending on our project, and should always weigh all aspects carefully. Sometimes SSR will be more advantages than SSG !

Code splitting in Gatsby

Adrian Guery — Mon, 02 May 2022 07:57:40 +0000

This article will be especially interesting for large Gatsby projects: +1,000 pages.
Also if your project uses React18 or +, use this method instead : https://youtu.be/lypEGNEIRKE

Gatsby is a very powerful meta framework for developing very quick loading sites. Which is very important for SEO and for UX.

With the generation of static pages of Gatsby, the TTFB (time to first byte) and the FCP (first contentful paint) are lowered a lot compared to a CSR site (client side rendering) resulting for instance from a React pure development. And with the optimization of picture loading, with Gatsby Image, comes as well the optimisation of the LCP.

And all this is done almost automatically with Gatsby! Incredible ! Nothing's left? Not really 😅 It would have been too easy.

The more your project grows, the more likely you will load more JS bundles than needed in some pages of your site. If you perform a test using PageSpeed Insights (pagespeed.web.dev) you may get this advice / opportunity to optimize your page :

This optimization opportunity occurs when you load javascript code that is not used by the page on which you are performing the test.

There are two main causes:

bad code splitting
third party scripts: GTM, Facebook pixels, etc.

In this article, we will see how to fix the main cause of this problem, bad code splitting. The second cause will be discussed in a second article.

How does Gatsby split your code natively?

Initially, Gatsby organize your JS bundles into 3 categories:

application-level chunks (shared with all pages),
template-level chunks (shared with all pages of the same template),
page-level data imports

Let's take the example of a news site that creates articles for each news, some having videos.

Our site has several page templates:

Home page template
News page template (potentially with videos depending on the news)
News categories page template (which lists and organizes news depending on their category)

We will focus on the news pages, which are the most important on the site. The specificity of our news pages is that they potentially have videos.
Therefore we need a library allowing a good management of these videos. Let's take Video.js for example. This library is perfect, it allows us to play videos in many formats (MP4, Webm, HLS, DASH, etc.) and it implements an easy way to customize our video player.

The problem with this library is that it’s heavy, 573.6kb MINIFIED, and 159.1 kB MINIFIED + GZIPPED.

According to bundlephobia, it can take up to 3.18 seconds to load in slow 3G. This can seriously spoil the experience of our site, which aims to be efficient and quick to load (which is why we decided to develop it with Gatsby).

Now we will check the bundles of our articles without videos, to see if they have also the Video.js imported.

How to analyze the bundles of each pages in Gatsby ?

Thanks to the gatsby-plugin-perf-budgets and gatsby-plugin-webpack-bundle-analyse-v2 plugins which are installed using this command:

npm i gatsby-plugin-webpack-bundle-analyser-v2 -D
npm i gatsby-plugin-perf-budgets -D

We can see that our video library (Video.js) is loaded in all article pages, even if they don't have videos.

Bundle analyze of a page article without video :

And we import 457 kb of JS :

I simplified the rendering of the analysis to make it more readable (Yes I'm a photoshop master)

That’s where code splitting sets in : we basically split the import of our VideoPlayer component (which itself imports and uses our Video.js library).

How to do code splitting with Gatsby?

Once we have identified what code to split by analysing the different bundles of the pages, we are able to code split the components containing the packages that we want to import only on page with videos : in our example, the VideoPlayer component.

To do so with Gatsby, complementary packages are needed :

@loadable/babel-plugin
@loadable/component
@loadable/webpack-plugin
gatsby-plugin-loadable-components-ssr

And add the gatsby-plugin-loadable-components-ssr plugin that we just installed to our plugin list in the gatsby-config.js.

Then we just have to use @loadable/component to import our VideoPlayer component:

import loadable from "@loadable/component"
const VideoPlayer = loadable(
  () => import("~/components/VideoPlayer/VideoPlayer")
)

And then make sure to conditionally use the VideoPlayer component only if the article has a video:

{
  article.video && (
    <VideoPlayer
        src={article.video.url}
    title={article.video.intro}
    />
  )
}

And so, now our pages without videos no longer have the Video.js library in their bundles:

(Always the same photoshop talents)

Now we import 355kb of JS files, and we economize 2 requests!

Voilà, you have just seen how to create code splitting with Gatbsy.

But you should know that with React 18 and React.lazy(), it's now possible to create splitting code natively! Without the gatsby-plugin-loadable-components-ssr plugin ! So moving to React 18 seems then to be a good alternative.

I put here a list of some reliable sources to deepen what we have just seen together if you are interested:

Fallback Client side route in Gatsby

Adrian Guery — Mon, 07 Feb 2022 09:55:17 +0000

What is a Fallback Client side route ?

Because the sites created with Gatsby.js are static sites, which is highly optimized from a performance point of view, for the content to be accessible, the site must be built since this content is available (from the CMS or the back-end).

But in some cases, especially large content sites, content are add by the editorial team faster than builds are done. And so, some content is added (via the CMS or the back-end), but not yet available on the site.

But this problem is adjustable thanks to a “Fallback Client side route” system.

Use case : News website

On our news site, we have more than 10,000 articles, they are stored in a database, and we create static pages using the Gatsby's createPages API.

So we have, for example, articles with these following urls:

articles/news/AZE123
articles/hobbies/RTY345
articles/tips/UIO433
articles/tips/QSD345
articles/hobbies/FGH678
articles/news/JKL789

The articles are added to the database after their creations by the team of journalists. Every day, the team of journalists on the site write an average of 100 articles and want to make them immediately accessible, because they talk about instant actuality subjects.

But the site is only rebuild 15 times a day (or else it takes several ten minutes to rebuild) → This is a part of what we called the JAMTAX (in reference to the JAMSTACK). So, very often, it happens that articles, which have just been published, are not accessible instantly, but only after multiple minutes or even hours.

It’s so necessary to create a “Fallback Client side route”. This Fallback Client side route will be the route that will be used until the article has been statically generated. This Fallback Client side route will be generated on the client side thanks to a call to the API.

How to setup a “Fallback Client side route” in Gatsby?

Our Fallback Client side route will match with URL of this following shape : articles/:articleType/:articleId

And if the client want to access to an article that has been generated statically, he must have access to the static page (SSG) and not the Fallback Client side route, because it’s more optimised.

For this we create a page which will be this Fallback Client side, then thanks to the onCreatePage API and its matchPath argument, we will be able to redefine its matchPath when it is created :

actions.createPage({
    path,
    matchPath: "articles/:articleType/:articleId",
    component: "fallbackArticlesComponent.tsx",
    context: {
            //The necessary context for your template
        },
  })

So, all users who want to access pages with the shape articles/:articleType/:articleId, and for which there is no statically generated page, have access to the content of this fallback page (and therefore of the fallbackArticlesComponent.tsx component) .

So, we need to make a call to our API (or CMS) in this component to get the content of the article.

Also, we need to prepare a behavior on this page when the request does not found any result. Because, for example, if the user want to access the page article/typeThatDoesNotExist/IdThatDoesNotExist, then he will “fall” on our fallback page.

We can then either choose to redirect it to the 404 page (with a navigate(/404, { replace: true })), or display an error such as “Unfortunately this article does not exist”.

Feel free to ask your question in the comments, I will answer it with pleasure.

Page 404 multilingue - Gatsby.js

Adrian Guery — Fri, 21 Jan 2022 08:36:40 +0000

Aujourd'hui, nous allons voir comment, en Gatsby.js, nous pouvons faire en sorte d'avoir une page 404 par langue. Par exemple, si nous cherchons à accéder à l'url : {votresite}.com/en/page-qui-nexiste-pas, le serveur renverra une page 404 différente de celle qu'il nous retournera si nous cherchons à accéder à l'url :
{votresite}.com/fr/page-qui-nexiste-pas

Introduction :

En Gatsby.js il est très simple de mettre en place une page 404 pour l'intégralité du site. Pour cela, il nous suffit de créer une page 404.jsx/tsx (souvent déjà générée dans les templates) dans le dossier pages.

Mais dans ce cas, cette page sera la même pour toutes les langues. Nous nous souhaitons avoir une page spécifique par langue.

Les solutions

Approche 1 : Créer une page 404 par langue et faire une redirection

Une première approche (pas la meilleure), est de créer une page 404 par langue dans le dossier pages.

Par exemple :

Nous pouvons alors réaliser une redirection vers cette page, dans la page 404.jsx, en fonction de la langue de l'utilisateur, grâce à ce code :

import { useEffect } from "react"

import { navigate } from "gatsby"

const getRedirectLanguage = () => {
  if (typeof navigator === `undefined`) {
    return "fr"
  }

  let languages = navigator.languages ?? [navigator.language]
  languages = languages.map((lang: string) => lang.toLowerCase())

  if (!languages) return "fr"

  let actualLanguage
  languages.forEach(lang => {
    if (lang.includes("fr")) {
      actualLanguage = "fr"
    } 
    if (lang.includes("en")) {
      actualLanguage = "en"
    } 
    if (lang.includes("de")) {
      actualLanguage = "de"
    } 
  })

  return actualLanguage ?? "fr"
}

const NotFoundPage = () => {
  useEffect(() => {
    const urlLang = getRedirectLanguage()

    navigate(`/${urlLang}/`, { replace: true })
  }, [])

  return null
}

export default NotFoundPage

Le problème est que l'utilisateur est redirigé, mais surtout il perd son url. Ce n'est pas un comportement souhaitable pour une page 404.

Approche 2 : Utiliser le _matchPath*_ API de Gatsby.js*

La bonne approche est d'utiliser le paramètre matchPath de Gatsby.js. En reprenant la création d'une page 404 par langue dans le dossier pages et grâce à l'API onCreatePage de Gatsby, nous pouvons, lors de leur création, modifier le matchPath des pages 404.

Et si c'est une page 404, il nous suffit de changer son matchPath par /${langCode}/*.
Ainsi, cette page sera affichée à chaque fois que le client cherche à accéder à une URL de la langue, sauf bien sûr pour les pages existantes.

Voici le code nécessaire pour réaliser cette modification de matchPath.

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage, deletePage } = actions

  if (page.path.match(/^\/[a-z]{2}\/404\/$/)) {
    const oldPage = { ...page }

    const language = page.path.split(`/`)[1]
    page.matchPath = `/${language}/*`

    deletePage(oldPage)
    createPage(page)
  }
}

Ce code modifiera donc le matchPath de toutes les pages 404 dans toutes les langues, par exemple : /fr/404, /de/404, etc.

Conclusions

Nous avons ainsi réussi à mettre en place une page 404 différente par langue grâce à l'API onCreatePage de Gatsby.js.

Cela nous permet maintenant de créer une page 404 spécifique par langue, tout en gardant l'URL erroné.

Source

Si vous le souhaitez, vous pouvez retrouver la documentation de Gatsby.js sur ce sujet ici :
https://www.gatsbyjs.com/docs/creating-prefixed-404-pages-for-different-languages/