Forem: Jason Leung 🧗‍♂️👨‍💻

For Frustrated Beginner React Devs: React for Prod, Resources for Best Practices, First Job, TypeScript

Jason Leung 🧗‍♂️👨‍💻 — Mon, 14 Sep 2020 09:55:35 +0000

This is a long comment turned into a blog post, originally published in @sandeepgamot 's post "I've hit a brick wall. How do I progress as a React Dev and other confusions.". I shared my personal experience and hope to benefit someone out there. Please also share your thoughts and your fav resources with me. 😀

What should I Learn after Create React App?

If you have been learning/using create-react-app, you should have a look at Next.js or GatsbyJS. Both of them are used in production by companies for static site generation or server-side rendering. While learning them, you will write more server-side code which can help you gain exposure. You will also learn more about performance since it is what those frameworks optimize for.

How About Best Practices?

Thanks to the internet we now have different ways to access the wisdom of other devs. Here are some of my favorites:

Listen to dev podcasts:

Watch conference talks:

A 'silver lining' of the pandemic is that many confs are hosted online this year and you can join for free. Here's one: React Summit on Oct 15-16

Watch live coding:

Learn With Jason

Read technical blogs:

Read technical books:

Follow other devs on Twitter:

the authors above
me 🤯

Don't get caught up in the negativity on Twitter though.

When you are ready to invest, check out these paid resources:

Frontend Masters
Courses by Wes Bos (Free courses available)
Level Up Tutorials

Landing the First Dev Job

Building side projects is the best way to get a job. They can be Codepens, hosted websites, or coursework(check out Wes's courses above). Put your works in your resume and list out the tech stacks you used. Look for a position that uses modern tech stacks and has a good team that you can learn from. You will grow rapidly in a working environment.

Back then, I built a web app to show climbing places in my city with Knockout JS and Google map APIs. I also built a bus arrival time web app because the official one was not responsive and there's no native app for my Windows Phone 4 years ago. They helped me land on my first developer job in a startup.

Should I Learn TypeScript?

Regarding TypeScript, my suggestion is don't sweat it. Yes, there are companies that use TypeScript and I like it myself. But I am sure you can find a job that doesn't use TypeScript or doesn't require you to be a TS expert. From my personal experience, it can be frustrating to learn TypeScript and other frameworks at the same time. Instead, you can try to use TypeScript in a side project with a framework that you are already familiar with, such as CRA. For your future reference, React TypeScript Cheatsheets will be helpful.

Pep Talk

We all have our time of confusion. The important thing is we are making progress towards our goals. In the future when you feel more comfortable and less frustrated, remember to give back to the community. 🍻

If you are looking for a more comprehensive career guide, check out swyx's The Coding Career Handbook.

Avoid Flash of Default Theme: An Implementation of Dark Mode in React App

Jason Leung 🧗‍♂️👨‍💻 — Sun, 13 Sep 2020 03:28:19 +0000

Have you ever visited a page and experienced a flash of light mode before transitioning into dark mode? Recently, I worked on a project that needs to support dark mode (since it is what the cool kids do now). After some research, I came across an implementation that can prevent the undesired flash of default theme and would like to write it down for you and my future self.

This article is written for SSR/SSG React apps such as Next.js, GatsbyJS, but the same logic can be applied to single-page apps like CRA or other frameworks like Vuejs, Angular, etc.

Why the Flash?

When implementing light/dark mode, one often has to reach for client-side-only features like localStorage or prefers-color-scheme and puts them in a useEffect hook. It means a default theme is required for the pre-rendered HTML and styles. When visitors open the page, the HTML elements are parsed and rendered with the default style before the update scheduled in a hook is fired, and thus the flash.

Here is an example from usehooks.com/useDarkMode.

A Better Implementation

To prevent such a flash, we can extract the logic for managing themes in the React world and move it into a separate script placed above the HTML elements so that it will run before the HTML elements are parsed and rendered.

<!DOCTYPE html>
<html>
  <head>
    <title>Create Next App</title>
    <!-- links to stylesheets -->
  </head>
  <body>
    <script>
      // 🌟 logic for managing themes goes here 
    </script>
    <div id="__next">
      <!-- content -->
    </div>
    <script src="/bundled.js"></script>
  </body>
</html>

To add the script, you will have to edit _document.js in Next.js projects or html.js in GatsbyJS projects.

The script will do the following things:

initializes a global __onThemeChange variable to be a no-op function which will be overwritten by our React component;
declares a global __setPreferredTheme function that when called, updates the body className and saves the chosen theme to localStorage;
initializes theme to the saved theme in localStorage, fallback to system theme.

// wrapped as IIFE to use private variables and functions
(function () {
  function setTheme(newTheme) {
    document.body.className = newTheme; // "dark" or "light"
    window.__theme = newTheme;
    window.__onThemeChange(newTheme);
  }
  // this will be overwritten in our React component
  window.__onThemeChange = function () {};
  // this will be triggered by our React component
  window.__setPreferredTheme = function (newTheme) {
    setTheme(newTheme);
    try {
      localStorage.setItem("theme", JSON.stringify(window.__theme));
    } catch (err) {}
  };
  // detect system theme and monitor for changes
  const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
  darkQuery.addListener(function (event) {
    window.__setPreferredTheme(event.matches ? "dark" : "light");
  });
  let preferredTheme;
  // try to get saved theme
  try {
    preferredTheme = JSON.parse(localStorage.getItem("theme"));
  } catch (err) {}  
  // initialize preferredTheme
  setTheme(preferredTheme || (darkQuery.matches ? "dark" : "light"));
})();

Please note the script is render-blocking so you should keep it short. Also, it will not be compiled by Babel so you should avoid using new JS features.

In the global stylesheet, we can update the CSS variables based on the CSS className

body {
  --background: #faf4f8;
  --text-color: rgba(0, 0, 0, 0.87);
  --link: #3182ce;
}
body.dark {
  --background: #1a202c;
  --text-color: #f7fafc;
  --link: #90cdf4;
}

Now you can create your own ThemeProvider and useTheme hook to connect the global functions created.

import React, { useState, useEffect, useContext } from "react";

const ThemeContext = React.createContext("light");

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(global.window?.__theme || "light");
  const toggleTheme = () => {
    global.window.__setPreferredTheme(theme === "light" ? "dark" : "light");
  };
  useEffect(() => {
    global.window.__onThemeChange = setTheme;
  }, []);
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

Here is a demo with Next.js:

For implementation in GatsbyJS, you may check out the source code of Dan Abramov's blog — Overreacted.io. I learned this approach from it.

Afterthoughts

When developing React apps, we tend to do everything with React and put every logic inside React components. The experience of implementing themes reminds me it is okay to write code outside of the React world and later bind it to React. After all, React is just a library for building user interfaces. In this case, understanding how browser rendering works is essential to create a smooth user experience.

Thank you for reading. Ciao!

React Summit is coming back on October 15-16. There'll be speakers like Kent C. Dodds, Max Stoiber, Sara Vieira, Sharif Shameem, and more.

Register for free before September 20: https://ti.to/gitnation/react-summit?source=REFURCR-1.

Recreating Instagram Filter Functionality with CSS and Canvas APIs

Jason Leung 🧗‍♂️👨‍💻 — Tue, 30 Jun 2020 02:21:58 +0000

Recreating UI components, especially those in native apps, has always led me to interesting unknown web APIs. It also helps me see things from the app developers' perspective and understand why a particular task is done in a particular way. Going forward, I will jot down the making-of of each clone and share the lessons I've learned. I hope you will also learn a thing or two and starting cloning your favorite components.

Today, I want to share my recent clone of the Instagram Filter page which turned out to be much simpler than I expected (if I ignore a browser).

Goal: Users can select a photo from their device, apply filters, see preview, and export(download) the result.

Live Demo

CodeSandbox

The Process

Each Instagram filter is made of a set of basic filter effects, e.g. brightness, contrast, saturate, etc, and some overlays. With the help of CSS filter and mix-blend-mode, stacking filters and overlays to recreate an Instagram filter is pretty much an eyeballing task. Thanks to this brilliant work by Una which did exactly that, 75% of my goal is completed. From there, I only have to figure out a way to export the result since the CSS is changing the appearance but not the actual image. Luckily, I found there are two Canvas APIs that do very similar things and they are canvas filter and globalCompositeOperation. With them, I can perform the same operation to the image drawn on canvas and use the method toDataURL to export it out. 🍬

Unfortunately, the canvas filter API is experimental and is only supported in Chrome, Firefox, Edge, but not in Safari. So the clone is not fully functioning on the iPhone. augh, safari!

Some Details

You can see the full implementation in the CodeSandbox. Note that the exporting function does not work in CodeSandbox's iframe browser, open the app in a new window instead. Here are some implementation details:

I used an array to store the filter configurations:

// effects.js
const effects = [
  { 
    name: "noraml", 
    filter: "none", 
    overlays: []
  },
  {
    name: "clarendon",
    filter: "contrast(1.2) saturate(1.35)",
    overlays: [
      {
        backgroundColor: "rgba(127, 187, 227, 0.2)",
        mixBlendMode: "overlay"
      }
    ]
  },
]

When the "clarendon" effect is turned into HTML and CSS:

<!--image with "Clarendon" filter applied -->
<figure style="filter: contrast(1.2) saturate(1.35);">
  <img src="/plitvice-lakes.jpg">
  <div style="background-color: rgba(127, 187, 227, 0.2); mix-blend-mode: overlay;"></div>
</figure>

This is how a Instagram filter(I called it effect in the code) is applied on canvas:

function applyEffect(name) {
  // find effect by name
  const effect = effects.find(eff => eff.name === name);
  const { width, height } = previewCanvas;
  // clear canvas
  ctx.clearRect(0, 0, width, height);
  // apply filter
  ctx.filter = effect.filter;
  // draw the image
  ctx.globalCompositeOperation = "source-over";
  ctx.drawImage(previewImg, 0, 0, width, height);
  // loop through overlays and fill with corresponding color and blend mode
  effect.overlays.forEach(overlay => {
    ctx.globalCompositeOperation = overlay.mixBlendMode;ctx.fillStyle = overlay.backgroundColor;
    ctx.fillRect(0, 0, width, height);
  });
}

Lessons Learned

CSS filter and mix-blend-mode are handy if you want to alter the look of your page without reaching for graphics editors. They can be applied to not only image but every element.
Canvas declarative filter API lower the entry barriers to image processing.
These APIs all make use of the GPU so they are performant.
The CSS properties have wide browser support but not the canvas filter API.
For production, use WebGL or a thrid-party library instead.
~~Safari is the new IE.~~

Afterthoughts

Since I had played with WebGL before, I am well aware these effects can be achieved using WebGL. (Take a look at gl-react if you are a React developer) But this time, I am experimenting with an even simpler solution. And thanks to the declarative APIs (and also CSSgram!), recreating those Instagram effects and the export function is not complicated at all. I am interested in how you are using these CSS properties so please let me know! 😉

Thank you for reading! Until next time! 👋

React Summit is coming back on October 15-16. There'll be speakers like Kent C. Dodds, Max Stoiber, Sara Vieira, Sharif Shameem.

Register for free before September 20: https://ti.to/gitnation/react-summit?source=REFURCR-1.

RGB Splitting Effect with HTML5 Canvas and JavaScript

Jason Leung 🧗‍♂️👨‍💻 — Sat, 27 Jun 2020 11:07:41 +0000

Recently, I followed Honeypot on Twitter. In case you didn't know, Honeypot is a developer-focused job platform that also produces awesome documentaries exploring tech culture. On their page, they like to use this RGB splitting technique in their cover images to create a glitch effect. Neat. So I figured I'd write a post explaining how it can be done with HTML5 canvas and JavaScript to those who are new to image processing on the web.

Honeypot likes to use this RGB splitting effect on their page.

Walk-through 🚶‍♀️🚶‍♂️

Live demo

Open this CodeSandbox if you want to follow along. Let's walk through the files. First, I scaffolded the structure inside body of index.html so that we can focus on writing JavaScript. I also added a stylesheet in the head which I will not go into but feel free to have a look.

<body>
  <!-- Before / After -->
  <div class="container">
    <div>
      <p>Original Image:</p>
      <img id="Source" src="/demo.jpg" crossorigin="anonymous" />
    </div>
    <div>
      <p>Canvas:</p>
      <canvas id="Canvas"></canvas>
    </div>
  </div>
  <!-- Control Sliders -->
  <div class="control">
    <div class="red">
      <label>R:</label>
      <input id="rOffset" type="range" min="-100" max="100" step="5" />
    </div>
    <div class="green">
      <label>G:</label>
      <input id="gOffset" type="range" min="-100" max="100" step="5" />
    </div>
    <div class="blue">
      <label>B:</label>
      <input id="bOffset" type="range" min="-100" max="100" step="5" />
    </div>
  </div>
  <!-- Reference the external script -->
  <script src="app.js"></script>
</body>

The crossorigin="anonymous" attribute on the img tag tells the browser to fetch the image with CORS(Cross-Origin Resource Sharing) header. I will write more about CORS in the future. For now, just keep in mind if you fail to do some operations on a canvas, it may be related to CORS.

Then there are two js files. app.js contains the minimal code to get you started. If at every time you want to look at the finished code, you can check app-finish.js.

// Find all elements that will be used and assign them to variables
const image = document.getElementById("Source");
const canvas = document.getElementById("Canvas");
const rOffsetInput = document.getElementById("rOffset");
const gOffsetInput = document.getElementById("gOffset");
const bOffsetInput = document.getElementById("bOffset");
// If the image is completely loaded before this script executes, call init().
if (image.complete) init();
// In case it is not loaded yet, we listen to its "load" event and call init() when it fires.
image.addEventListener("load", init);
function init() {
  // Where the Magic Happens
}

Display the Image on Canvas

If you have used canvas before, feel free to fast forward to the real action.

For any image processing tasks you'd like to perform, you will most likely need to use the canvas element. canvas is a powerful playground for you to play with image data, apply filters and overlays effects. And you are not limited to static images but you can even manipulate video data with canvas. Here let's first try to draw the image from the img element to the canvas.

To draw anything on the canvas, you will need to get a drawing context using getContext method. Then, we will set the canvas drawing dimensions (as opposed to the display dimensions set by CSS) to the intrinsic width and height of the image. Finally, we will use the drawImage method to draw the image onto the canvas. (Save the file using ctrl+s/cmd+s after changes to see the update.)

function init() {
  // Get a two-dimensional rendering context
  const ctx = canvas.getContext("2d");
  const width = image.naturalWidth;
  const height = image.naturalHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(image, 0, 0, width, height);
}

Syntax: drawImage(image, dx, dy, dWidth, dHeight) where image is the image elemnet to show, dx, dy are the x and y coordinate in the canvas at which to place the top-left corner of the image, and dWidth, dHeight are the width and height to draw the image in the canvas.

Peek into the ImageData

Now, let's use getImageData to get the image data out and see what is in it using console.log. Do not use the console CodeSandbox provides since the ImageData object is a fairly large object. Instead, open the browser in a new window and use the native console of the browser.

function init() {
  const ctx = canvas.getContext("2d");
  const width = image.naturalWidth;
  const height = image.naturalHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(image, 0, 0, width, height);
  // 👇
  const imageData = ctx.getImageData(0, 0, width, height);
  console.log(imageData);
}

Syntax: ctx.getImageData(sx, sy, sw, sh) where sx, sy are the x and y coordinate of the top-left corner of the rectangle from which the data will be extracted, and sw, sh are the width and height of the rectangle from which the data will be extracted.

The imageData object has three properties: width and height are the actual dimensions of the image data we extracted, which in this case is also the dimensions of our image and canvas. The data property is an Uint8ClampedArray which is an array-like object used to store values between 0-255(inclusive). Values smaller than 0 or greater than 255 will be clamped to 0 and 255.

So what is this array representing? If you have used rgb color in CSS, you may have a sense that it is something related and you are right. This Uint8ClampedArray is a one-dimensional array representing the color in the RGBA(red, green, blue, alpha) order of every pixel in the image. In other words, every four values in this array represent a pixel in the image.

ImageData {data: Uint8ClampedArray[14, 34, 58, 255, 38, 60, 81, 255, 46, 75, 93, 255…], width: 640, height: 427}

Time to Tear Them Apart

Now that we've learned about ImageData. It's time for the fun part. (finally!) The idea behind the RGB splitting is to shift each channel of color(red, green, or blue) to different directions. To implement it, we will create a helper function called rgbSplit. (create it above or below the init function)

function rgbSplit(imageData, options) {
  // destructure the offset values from options, default to 0
  const { rOffset = 0, gOffset = 0, bOffset = 0 } = options; 
  // clone the pixel array from original imageData
  const originalArray = imageData.data;
  const newArray = new Uint8ClampedArray(originalArray);
  // loop through every pixel and assign values to the offseted position
  for (let i = 0; i < originalArray.length; i += 4) {
    newArray[i + 0 + rOffset * 4] = originalArray[i + 0]; // 🔴
    newArray[i + 1 + gOffset * 4] = originalArray[i + 1]; // 🟢
    newArray[i + 2 + bOffset * 4] = originalArray[i + 2]; // 🔵
  }
  // return a new ImageData object
  return new ImageData(newPixels, imageData.width, imageData.height);
}

rgbSplit takes in ImageData and an options object as arguments. The options object should have three properties: rOffset, gOffset, bOffset which represent the pixel offset of each color channel.

Next, instead of mutating the data values in ImageData, let's make a copy of it by calling the Uint8ClampedArray constructor and passing it the original data array. Then, we will loop through every pixel and manipulate the color in each of them. Remember four values in that array represent one pixel? That's why we are setting the increment expression to be i += 4.

In each iteration, we take each color intensity from the original array and place it to a new position based on the offset value provided. Again, we are multiplying the offset value by 4 since four values represent one pixel.

🔴🟢🔵⚪ 🔴🟢🔵⚪ 🔴🟢🔵⚪ 🔴🟢🔵⚪

To use the rgbSplit funciton, we go back into the init function. We call the rgbSplit funciton with the imageData we got from the canvas context and also some random offset values. We will then paint the new image data onto the canvas using the putImageData method.

function init() {
  const ctx = canvas.getContext("2d");
  const width = image.naturalWidth;
  const height = image.naturalHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(image, 0, 0, width, height);
  const imageData = ctx.getImageData(0, 0, width, height);
  // 👇
  const updatedImageData = rgbSplit(imageData, {
    rOffset: 20,
    gOffset: -10,
    bOffset: 10
  });
  ctx.putImageData(updatedImageData, 0, 0);
}

Syntax: ctx.putImageData(imageData, dx, dy) where imageData is the ImageData object containing the array of pixel values and dx, dy are the x and y coordinate at which to place the image data in the destination canvas.

And voila.

Bonus: Implement the Sliders

Lastly, with the help of the rgbSplit function, the implementation of the slider control will be straightforward. We just have to listen to the slider "change" event and call the rgbSplit function with the values of the sliders.

function init() {
  const ctx = canvas.getContext("2d");
  const width = image.naturalWidth;
  const height = image.naturalHeight;
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(image, 0, 0, width, height);
  const imageData = ctx.getImageData(0, 0, width, height);
  // const updatedImageData = rgbSplit(imageData, {
  //   rOffset: 30,
  //   gOffset: -10,
  //   bOffset: 10
  // });
  // ctx.putImageData(updatedImageData, 0, 0);
  rOffsetInput.addEventListener("change", updateCanvas);
  gOffsetInput.addEventListener("change", updateCanvas);
  bOffsetInput.addEventListener("change", updateCanvas);

  // Put this function inside init since we have to access imageData
  function updateCanvas() {
    const updatedImageData = rgbSplit(imageData, {
      // turn string value into integer
      rOffset: Number(rOffsetInput.value), 
      gOffset: Number(gOffsetInput.value),
      bOffset: Number(bOffsetInput.value)
    });
    ctx.putImageData(updatedImageData, 0, 0);
  }
}

Wrap up

Are you still here? What's meant to be a simple article has turned into one of my longest posts. But I hope you have learned something and get to play with the canvas element. Please let me know your feedback. Do you think if the post is too lengthy? Or did I not explain some concepts well enough? Anyway, thanks a lot for reading. Until next time! 👋

Honeypot

@honeypotio

Trade secrets revealed 😏 Great post, @hangindev! twitter.com/hangindev/stat…

14:39 PM - 27 Jun 2020

Jason Leung 🧗‍♂️👨‍💻 @hangindev
I'm following @honeypotio and noticed they like to use this glitch effect on their images a lot. So I figured I could write about how to implement this RGB splitting technique with HTML5 canvas and JavaScript. https://t.co/kycSIru5xn #javascript #100DaysOfCode #CodeNewbie

2 2

React Summit is coming back on October 15-16. There'll be speakers like Kent C. Dodds, Max Stoiber, Sara Vieira, Sharif Shameem.

Register for free before September 20: https://ti.to/gitnation/react-summit?source=REFURCR-1.

Create a Lazy-Loading Image Component with React Hooks

Jason Leung 🧗‍♂️👨‍💻 — Sun, 21 Jun 2020 05:23:43 +0000

Lazy-loading images (like those in Medium or those created by gatsby-image 🧡) can sometimes add an extra touch of style to a page. To create such an effect, one will need A) a tiny version of the image for preview, ideally inlined as data URL, and B) the aspect ratio of the image to create a placeholder to prevent reflows. In this article, I will share how I created a lazy-loading image component with React Hooks.

CodeSandbox Demo

Hi, Dev.to Developers! Excited to be part of the DEV Community and this is my first post.

First, the barebone - HTML/CSS 🦴

Usually, a lazing loading image consists of 4 HTML Elements:

<div class="wrapper">
  <div style="padding-bottom:76%;"></div> 
  <img
    src="https://images.unsplash.com/photo-1518991791750-044b923256f0?fit=crop&w=25"
  />
  <img
    src="https://images.unsplash.com/photo-1518991791750-044b923256f0?fit=crop&w=1200"
    class="source"
  />
</div>

a relatively positioned wrapper div,
an intrinsic placeholder div for maintaining aspect ratio. It has padding-bottom with a percentage value(relative to the width of the containing block), e.g. for a 16:9 image, the percentage is calculated as 9/16 * 100% = 56.25%,
an absolutely positioned img for the tiny version of the image, also known as LQIP(Low-Quality Image Placeholder), stretched to cover the wrapper. Data URL is usually used as the src to save HTTP requests,
an absolutely positioned img for the source image, placed on top of the LQIP, initialized with opacity: 0.

.wrapper {
  position: relative;
  overflow: hidden;
}
img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  object-fit: cover;
  object-position: center;
}
.source {
  opacity: 0;
  transition: opacity 1s;
}
.loaded {
  opacity: 1;
}

Turn it into React Component ⚛

import React, { useState, useEffect, useRef } from "react";
import clsx from "clsx"; // a utility for constructing className conditionally
function LazyImage({ className, src, alt, lqip, aspectRatio = 2/3 }) {
  const [loaded, setLoaded] = useState(false);
  const imgRef = useRef();
  useEffect(() => {
    if (imgRef.current && imgRef.current.complete) {
      setLoaded(true);
    }
  }, []);
  return (
    <div className={clsx("wrapper", className)}>
      <div style={{ paddingBottom: `${100 / aspectRatio}%` }} />
      <img src={lqip} aria-hidden="true" />
      <img
        loading="lazy"
        src={src}
        alt={alt}
        ref={imgRef}
        onLoad={() => setLoaded(true)}
        className={clsx("source", loaded && "loaded")}
      />
    </div>
  );
}
export default LazyImage;

Let's break it down: there is a loaded state to track the loading state of the souce image, initialized to be false. A "load" event listener is added to the source img element so when it finishes loading, the state is updated and a "loaded" class name is appended to its class list which sets its opacity to 1. In cases which the source image has completely loaded before this component is mounted, the newly added "load" event listener will never fire. That's why a ref is also passed to the img element for checking its complete attribute on mount, and update the state accordingly.

Also, a loading="lazy" attribute is added to the source img to tell the browser to load the image immediately if it is in the viewport, or to fetch it when the user scrolls near it. More about that in this web.dev article. I also added aria-hidden="true" to the LQIP img to hide it from the accessibility API.

Usage

To use this component, you'll have to generate the image LQIP and get its aspect ratio. There are libraries that help you to integrate the generation into your build process, for example, zouhir/lqip. Apparently, if you're using Cloudindary, you can create LQIP through their image transformation pipeline. But I suspect you can only get a regular URL instead of data URL or base64 so you might have to convert it yourself if you want to inline it.

In previous projects, I used sharp(a high-performance image processing module) in Next.js getStaticProps (a function that runs at build time for static generation) to help me populating those image data. Below is the function that I used:

import got from 'got'; // HTTP request library for Node.js
import sharp from 'sharp';
sharp.cache(false);
async function generateLazyImage(src) {
  const { body } = await got(src, { responseType: 'buffer' });
  const sharpImage = sharp(body);
  const { width, height, format } = await sharpImage.metadata();
  const lqipBuf = await sharpImage
    .resize({ width: 30, height: 30, fit: 'inside' })
    .toBuffer();
  return {
    src,
    aspectRatio: width / height,
    lqip: `data:image/${format};base64,${lqipBuf.toString('base64')}`,
  };
}

That's it! This <LazyImage /> is a pretty simple component that I use in almost all of my projects. Let me know your thoughts and how you present images on your sites. 😉

Please follow my Twitter account if you want to read my future posts. I promise I will figure out how to do RSS with Next.js soon... (Updated on Jun25, 2020: there is RSS feed for my blog now. ✅)

React Summit is coming back on October 15-16. There'll be speakers like Kent C. Dodds, Max Stoiber, Sara Vieira, Sharif Shameem.

Register for free before September 20: https://ti.to/gitnation/react-summit?source=REFURCR-1.