DEV Community: Majid Eltayeb

Shifting Gears for a Better Tour de France User Experience

Majid Eltayeb — Sat, 20 Jul 2024 19:36:13 +0000

As a cycling enthusiast, the Tour de France has always been a spectacle for me. But this year for the first time I'm delving deeper into the event day by day which made me engage more with the event app, where I noticed opportunities for improving the user experience.

The Tour app is visually appealing and well-designed. However there are some performance issues in the webapp that can be easily fixed.

For example, each stage features a hero section with 3 large high-resolution images, while visually stunning, these images can cause slow loading performance particularly on slower connections or low-end devices, let's take a look at the network tab here.

As we see, the same image size is loaded for all screens, however we can serve smaller images for mobile devices which would improve the LCP

<div class="rider">
    <img
       src="rider-image1-large.png"
       srcset="
        rider-image1-small.png   480w,
        rider-image1-medium.png  800w,
        rider-image1-large.png  1200w
       "
       sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
       alt="Rider Image"
    />
 </div>

srcset provides a list of image sources with their corresponding sizes. The browser will choose the best image based on the device's screen size and resolution.
rider-image1-small.png 480w: This image will be used if the screen width is 480 pixels or less.
The same applies for medium and large sizes.

sizes specifies the width of the image in the layout viewport, which helps the browser decide which image to choose from the srcset.

(max-width: viewport max width size in pixels) image-size

Here is a full example: https://codepen.io/majidzeno/full/WNqwxNr

But what if the user's connection is slow ? showed we provide the same user experience for every user ?

Ideally, yes. However, in the real-world not all devices have the same capabilities nor connection speed. Therefore we need to plan for worst-case scenarios.

We can use Network Information API, which helps us determine if a user has a poor connection or is in power-saving mode, so we can show lower-resolution images till the connection improves. In some other cases we can even allow users to request higher-resolution images manually.

Here is an example:

<div class="rider">
  <img id="rider-image" src="loader.gif" alt="Rider Image" />
</div>

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
// I will assume 3g is low quality connection
const isLowQuality = connection.effectiveType.includes('2g') ||
                      connection.effectiveType.includes('3g') ||
                      connection.saveData;
document.getElementById('rider-image').src = 
    isLowQuality ? 'rider-image-low.jpg' : 'rider-image-large.png';

If the connection type is 2G, 3G, or the device is saving data, we consider it low quality.

This helps us decide which image to load based on the connection speed.

This technique called Adaptive loading, here is a full example https://codepen.io/majidzeno/full/ExBKZvR

In this example check normal loading and try to emulate slow-connection, in normal cases we will load large images

However, if we changed connection to be slow, we will load much smaller images to maintain an acceptable loading speed.

Implementing adaptive loading can signifcantly enhance the loading speed and overall user experience. Shoutout to Addy Osmani for showing the power of adaptive loading.

Last but not least, it's worth noting that the tour web app utilizes the Intersection Observer API. This helping improve performance by loading only the content users need as they scroll through the page. It's particularly useful for lazy-loading images.

These tweaks can make the app smoother for everyone, no matter their device or connection which can make the Tour de France digital experience as exciting as the race itself.

I cross-posted this on Medium too.

.toBe(true) or .toBeTruthy()

Majid Eltayeb — Fri, 26 Jan 2024 06:45:24 +0000

I was reviewing a feature on GitHub and noticed my colleague sometimes used .toBe(true) and other times .toBeTruthy(). This got me wondering, are they actually different? After a quick search, I found out they are – and it's all in their names 😅. In this post, I'll break down these two functions and how they're not quite the same

`.toBe(true)` - Strict Equality

.toBe(true) is used to test strict equality. It checks if the value being tested is exactly true.
This means that the test will only pass if the value is the Boolean primitive true.
It's similar to using === true

test('strict true check', () => {
  const value = true;
  expect(value).toBe(true); // Passes
});

`.toBeTruthy()` - Truthiness Check

.toBeTruthy(), on the other hand, tests for 'truthiness' rather than strict Boolean true.
A value is considered "truthy" if it translates to true when evaluated in a Boolean context.
This includes values like 1, 'non-empty string', {}, [], and obviously true itself.

test('truthiness check', () => {
  const number = 1;
  const string = 'hello';
  expect(number).toBeTruthy(); // Passes
  expect(string).toBeTruthy(); // Passes
});

That's it. Hope it's helpful.

Effortless PDF Generation in Vue

Majid Eltayeb — Tue, 04 Apr 2023 21:50:31 +0000

Note: This blog post was originally published on my personal blog Majid's

Have you ever wondered if you can download an HTML table as a PDF file? Recently, while working on a side project using Nuxt3, I ran into this same question. I needed to generate a table of data and make it shareable with others. I found many libraries that can do this, but none of them had a good example in Vue. So, I thought it might be useful to share my method with others.

To download an HTML table as a PDF file, we need to use two libraries:

dom-to-image: This library allows capturing a screenshot of a DOM element and returning a data URI containing a PNG image.

jsPDF: This library allows creating a PDF document in JavaScript.

Let's get started with the steps:

Step 1: Install the Libraries

npm install jspdf -S
npm install dom-to-image -S

Step 2: Create a PDF Document Now, we need to create a PDF document using the jsPDF constructor. Here's the code:

// new jsPDF(orientation, unit, dimensions, ...otherOptions) 
const pdf = new jsPDF('l', 'pt', [tableWidth, tableHeight]);

as you can see, this constructor takes some options, we will use 3 of them

l: The orientation of the PDF document. l stands for landscape and p stands for portrait. In this case, l is used to create a landscape-oriented PDF.
pt: The unit of measurement used to specify the dimensions of the PDF document. pt stands for points, which is a common unit of measurement for printed materials.
[tableWidth, tableHeight]: An array specifying the width and height of the PDF document in points. These values are based on the size of the HTML table being converted to a PDF.

Step 3: Add the HTML as an Image

We need to add the HTML table as an image to our PDF document using the addImage method. Here's the code:

// addImage(imageData, format, x, y, width, height, alias, compression, rotation)
pdf.addImage(imageData, 'PNG', 0, 0, tableWidth, tableHeight);

imageData: the data of the image to be inserted (we don't have this image yet!)
PNG: the format of the image to be inserted.
0, 0: the X and Y coordinates of the image's top-left corner in the PDF document.
tableWidth, tableHeight: the width and height of the image to be inserted in the PDF document.

but since we don't have imageData yet, and here is where we're going to use dom-to-image library

Step 4: Capture the HTML Table as an Image

domtoimage.toPng(HTMLElement);

domtoimage.toPng is a method provided by the dom-to-image library which allows capturing a screenshot of a DOM element and returning a data URI containing a PNG image. The method takes the DOM element as an argument and returns a Promise that resolves with the data URI.

Step 5: Save the PDF File

pdf.save("table.pdf");

Here is a full vue example

<template>
  <div class="wrapper">
    <table ref="table">
      <thead>
        <tr>
          <th>Month</th>
          <th>Revenue</th>
          <th>Profit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$10,000</td>
          <td>$2,000</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$15,000</td>
          <td>$3,000</td>
        </tr>
        <tr>
          <td>March</td>
          <td>$12,000</td>
          <td>$2,500</td>
        </tr>
        <tr>
          <td>April</td>
          <td>$20,000</td>
          <td>$5,000</td>
        </tr>
      </tbody>
    </table>

    <button @click="onDownload">Download PDF</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { jsPDF } from "jspdf";
import domtoimage from "dom-to-image";

const table = ref(null);

const onDownload = () => {
  const tableWidth = table.value.clientWidth;
  const tableHeight = table.value.clientHeight;

  // Convert HTML table to PNG image using dom-to-image
  domtoimage.toPng(table.value).then((imageData) => {
    // Create a new jsPDF document
    const pdf = new jsPDF("l", "pt", [tableWidth, tableHeight]);
    // Add the PNG image to the PDF document
    pdf.addImage(imageData, "PNG", 0, 0, tableWidth, tableHeight);
    // Save the PDF document
    pdf.save("table.pdf");
  });
};
</script>

Check the Codesandbox

Final notes

Creating PDF documents from HTML tables in Vue.js can be a powerful way to allow users to share data in a portable and professional format. In this example, we used the jsPDF library to generate a PDF document and the dom-to-image library to convert an HTML table to a PNG image that was added to the PDF. However, keep in mind that if you're using a custom font in your table, you may need to add the font to the PDF as well. Be sure to check the jsPDF documentation for further guidance on adding custom fonts to your PDF documents. Happy coding! 🧑🏻‍💻

Searching for a React Project to work on

Majid Eltayeb — Sun, 02 Sep 2018 14:53:33 +0000

Hello React folks, I'm digging my way in practicing react if anyone has an interesting side project or any team is looking for a volunteer or a team player give me a holler