Forem: Makar Murashov

How to use Resize Observer with React

Makar Murashov — Sat, 09 Jul 2022 20:40:46 +0000

In the first part of the Web APIs series Quick guide to Resize Observer we've learnt what the Resize Observer API is and how to use it with vanilla JavaScript. But what to do when it comes to using with React?
Today we are going to see how to do it quick & easy and will create a custom hook, which you can use in your projects.

The API

Let's repeat what we know already:

ResizeObserver is used to observe changes to Element's size,
to create our own observer instance we call the ResizeObserver constructor passing the callback function that will be fired every time, when the size changes:

const myObserver = new ResizeObserver(
  (entries: ResizeObserverEntry[], observer: ResizeObserver) => {
    for (let entry of entries) {
      // Do something with an entry (see in next section)
    }
});

to start / stop watching the Element's size we shall invoke observe / unobserve instance's methods:

const myElement = document.getElementById('my-element');
myObserver.observe(myElement); // Start watching
myObserver.unobserve(myElement); // Stop watching

each observed entry contains entry's element sizes info:

interface ResizeObserverEntry {
  readonly target: Element;
  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
  readonly contentRect: DOMRectReadOnly; // May be deprecated, don't use it!
}

interface ResizeObserverSize {
    readonly blockSize: number;
    readonly inlineSize: number;
}

The Task

Next we want to use our knowledge to get the sizes in any React app. There is no better solution than creating a React Hook, which could be used across all project in any component.
So let's try to define what exactly we want from the hook:

It should be universal and its usage must be as simple as const size = giveMeMySize();
As you've probably seen (I hope 😄) in the previous section, one ResizeObserver instance is able to handle any amount of elements. If we want to keep our app performant the hook should use only single observer instance inside;
In order make the hook handy to use it should deal with mutations itself and automatically stop observing on unmount;
Keep in mind that although the ResizeObserver API already has broad support, it is still in Editor’s Draft and isn't supported by all browsers. It's better to provide a fallback for it.

The Solution

Our requirements look good and pretty strict, uh? But don't worry, we can deal with all of them using the beautiful and very easy-to-use useResizeObserver hook from the beautiful react-hook library by Jared Lunde. According to it's documentation and my tests and usage as well it meets all our requirements:

Uses a single ResizeObserver for tracking all elements used by the hooks. This approach is astoundingly more performant than using a ResizeObserver per element which most hook implementations do,

Uses @juggle/resize-observer as a ponyfill when ResizeObserver isn't supported by the current browser,

automatically unobserves the target element when the hook unmounts,

you don't have to wrap your callback in useCallback() because any mutations are handled by the hook.

Feels promising, why don't we use it right now?

The Hook

We are ready to create our hook finally. First of all, install the useResizeObserver hook:

npm install @react-hook/resize-observer
// Or
yarn install @react-hook/resize-observer

Then let's define how our hook will look like:

// useElementSize.ts
import { MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
import useResizeObserver from '@react-hook/resize-observer';

interface Size {
  width: number;
  height: number;
}

export default function useElementSize<T extends HTMLElement = HTMLDivElement>(): [MutableRefObject<T | null>, Size] {
  const target = useRef<T | null>(null);
  const [size, setSize] = useState<Size>({
    width: 0,
    height: 0,
  });

  return [target, size]
}

As you see, we've created the useElementSize function, which we can provide a generic type of our Element. It creates the target reference to connect to the React element inside a component and the size for the current Element's size state, which implements the Size interface.

Keep in mind that while Element is resizing, its dimensions can be (and usually are) decimal numbers. We can round them of course:

const setRoundedSize = ({ width, height }: Size) => {
  setSize({ width: Math.round(width), height: Math.round(height) });
};

Next, we need to set the initial size of the Element. This is where the React useLayoutEffect hook fits perfectly. It fires before the browser paint, allowing us to get the Element's dimensions using its getBoundingClientRect method:

useLayoutEffect(() => {
    target.current && setRoundedSize(target.current.getBoundingClientRect())
}, [target]);

And last but not least, let's put some magic (not) there with the help of the useResizeObserver hook, that will trigger the size update each time the target's size changes:

useResizeObserver(target, entry => {
  const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
  setRoundedSize({ width, height });
});

And the usage 🤠

Let's try to repeat the exercise from the first part Quick guide to Resize Observer of the series, let me remind you the task:

Say we have a box of strawberries and getting them bigger makes us really happy (and vice versa).

I won't go into detailed explanations, because as you remember, our goal was to create a hook that is very easy to use. You can check the code and how it works all together below.
How do you think it worked out?

Hope you enjoyed this guide, stay tuned for more.

Quick guide to Resize Observer

Makar Murashov — Mon, 04 Jul 2022 22:43:53 +0000

We all try to make our apps and pages to be responsive: this is one of the main web-development standards for years. We strive to support all possible screen sizes while maintaining a friendly user interface. Everyone nowadays used to respond to viewport changes:

either use Media queries in CSS @media (mediaQueryString) {...} [MDN] or in JS window.matchMedia(mediaQueryString) [MDN]
or listen to window resize via window.addEventListener('resize', ()=>{...})

But what if we need to watch the element size independent of the viewport? Say we have a web-component or autonomous block and want to update it whenever its width or height changes for any reason, something like Element.onResize(doSomething).
Today we are going to learn how to use the Resize Observer API by example.

API

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

Observation will respond to every change of Element's size and fires if Element is rendered and it’s size is not 0,0 as well as when:

Element is inserted/removed from DOM,
Element display gets set to none.

Observation will do not fire for:

non-replaced inline Elements (span, strong, i, b, em, etc),
changes to Element by CSS transforms.

The API provides us two instruments to work with: ResizeObserver and ResizeObserverEntry. Let's talk about them in specific.

ResizeObserver

ResizeObserver is used to observe changes to Element's size. All we need is to create our own instance and pass a callback function that will be fired every time, when the size changes:
(Here and below I will use TypeScript to show the exact types)

const myObserver = new ResizeObserver(
  (entries: ResizeObserverEntry[], observer: ResizeObserver) => {
    for (let entry of entries) {
      // Do something with an entry (see in next section)
    }
});

And then start to observe the desired element:

const myElement = document.getElementById('my-element');
myObserver.observe(myElement);

To stop watching the element we call unobserve() method:

myObserver.unobserve(myElement);

To end observing all elements that were observed before by this instance:

myObserver.disconnect();

Options (optional)

ResizeObserver can observe different kinds of CSS sizes:

content-box (default value): size of element's content area,
border-box: size of element's box border area (content + padding + border),
device-pixel-content-box: size of element's content area in device pixels. Easier to understand it as window.devicePixelRatio * contentSize. Note that due to browser-specific subpixel calculations it's only approximately.

What size to watch can be passed as an option when starting to observe:

interface ResizeObserverOptions {
    box?: 'content-box' | 'border-box' | 'device-pixel-content-box' | undefined;
}
const myOptions: ResizeObserverOptions = {
  box: 'border-box'
};
myObserver.observe(myElement, myOptions);

However it will not affect the value returned by observer's callback, so use it only if you have a reason to.

ResizeObserverEntry

ResizeObserverEntry contains information about the element whose size has changed:

target: the Element itself,
contentBoxSize: size of content area,
borderBoxSize: size of box border area,
devicePixelContentBoxSize: size of content area in device pixels,
contentRect: the Element's DOMRect, same as if we call Element.getBoundingClientRect() directly.

Note that contentRect was added only due to current compatibility issues, it may be deprecated in next versions of ResizeObserver API. Consider not to use it in production.

Size

Every ...BoxSize property of an Entry represents an array with ResizeObserverSize object with 2 readonly sizes:

interface ResizeObserverSize {
    readonly inlineSize: number;
    readonly blockSize: number;
}

Think about it as width/height element properties, so inlineSize becomes width and blockSize becomes height.

How to use

Usage is pretty easy, say we have a box of strawberries and getting them bigger make us really happy (and vice versa):

<h1>Mood: <span id="mood">😐</span></h1>
<div id="box">
  🍓🍓🍓 
  🍓🍓🍓 
  🍓🍓🍓
</div>
<form>
  <label>
    Love amount ❤️: <input id="grower" type="range" value="16" min="8" max="32" step="1">
  </label>
</form>

Let's write some logic to grow our strawberries:

const mood = document.getElementById('mood')
const box = document.getElementById('box')
const grower = document.getElementById('grower')

grower.addEventListener('input', () => {
  box.style.fontSize = grower.value + 'px'; // Give them some love to grow!
})

Now we can use ResizeObserver to change our mood depending on the box size:

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    const { inlineSize: width } = entry.contentBoxSize[0];
    mood.textContent = width > 90 ? "😊" : width < 50 ? "😢" : "😐";
  }
});

resizeObserver.observe(box);

You can check how it works all together:

Another great example of the ResizeObserver API is scrolling down the chat window when a new message is added. An example can be seen here.

Browser support

Despite the fact that ResizeObserver API is still in Editor’s Draft(still in progress), according to Can I use its global 94.13% support is pretty impressive. There is also a nice and powerful polyfill that allows you to use it in older browsers (even IE 9-10 🙄).

Hope you enjoyed this guide, stay tuned for more.

Quick guide to Function Overloading in TypeScript

Makar Murashov — Thu, 16 Jun 2022 13:45:57 +0000

We use functions all the time in our apps, generally speaking most of the JS code are functions. TypeScript gives us many ways to describe them.
For a basic function, this is fairly easy to do, but what if the function takes a variety of argument counts and types, or even returns a different type depending on how it's called?
For such cases, TypeScript has the handy function overloading feature. Let's see how to use it and how it can help you improve your code.

Function typing

I feel hungry now, so let's create a function that will cook a dish:

function cookDish(ingredient: string): string {
  return `${ingredient}🍴 is ready, bon appétit!`;
}

We passed a single string argument as an ingredient and it returns a string dish after invocation:

cookDish('🥚'); // '🍳🍴 is ready, bon appétit!'

But wait, this is not enough, I definitely need a sandwich here!
To cook it, we need to modify our function, so that it could accept multiple ingredients:

function cookDish(ingredient: string | string[]): string {
  const tableSet = '🍴 is ready, bon appétit!';
  if (typeof ingredient === 'string') {
    return `${ingredient}${tableSet}`;
  } else if (Array.isArray(ingredient)) {
    return `${ingredient.join('')}${tableSet}`
  }
  throw new Error('Nothing to cook 😭');
}

We used Union type to describe our function argument, that can be either one string or multiple string[] of them:

cookDish('🌽'); // '🍿🍴 is ready, bon appétit!';
cookDish(['🍞', '🍅', '🥓']); // '🥪🍴 is ready, bon appétit!';

Adding types to support various arguments is a common and good approach in most cases, but sometimes you need to explicitly define all the ways to call a function. This is where function overloading comes into play.

Function overloading

In the case of a rather complex function, to improve usability and readability, it is always better to use the function overloading feature to improve usability and readability. This approach is considered the most flexible and transparent.

To use this, we need to write some function signatures:

Overload signature - defines different ways to call a function: arguments and return types, and doesn't have a body. There can be multiple overload signatures (usually two or more).
Implementation signature - provides an implementation for a function: function body. There can be only one implementation signature and it must be compatible to overload signatures.

Let's rewrite our cookDish using function overloading:

// Overload signature
function cookDish(ingredient: string): string
function cookDish(ingredients: string[]): string

// Implementation signature
function cookDish(ingredient: any): string {
  const tableSet = '🍴 is ready, bon appétit!';
  if (typeof ingredient === 'string') {
    return `${ingredient}${tableSet}`;
  } else if (Array.isArray(ingredient)) {
    return `${ingredient.join('')}${tableSet}`
  }
  throw new Error('Nothing to cook 😭');
}

Two overload signatures describe two different ways the function can be called: with string or string[] argument. In both ways we will get a cooked string dish as a result.
An implementation signature defines the behavior of a function within a function body.
Our function invocation doesn't change though, we can cook as before:

cookDish('🍚'); // '🍙🍴 is ready, bon appétit!';
cookDish(['🫓', '🍅', '🥑']); // '🥙🍴 is ready, bon appétit!';

const money: any = 100;
cookDish(money);
/**
⛔ No overload matches this call.
Overload 1 of 2, '(ingredient: string): string', gave the following error.
  Argument of type 'any' is not assignable to parameter of type 'string'.
Overload 2 of 2, '(ingredients: string[]): string', gave the following error.
  Argument of type 'any' is not assignable to parameter of type 'string[]'.
*/

Note at the last example above: ~~money can't cook you a dish~~ although an implementation signature is the one that implements our function, it cannot be called directly, even though it accepts any as an argument function cookDish(ingredient: any). You can call only overload signatures.

It's dinner time! let's look at a slightly more complex example:

function cookDinner(dish: string): string
function cookDinner(money: number): string // Wrong argument type
/**
⛔ This overload signature is not compatible with its implementation signature.
*/
function cookDinner(dish: string, drink: string, dessert: string): string
function cookDinner(dish: string, drink?: string, dessert?: string): string {
  let dinner = `${dish}🍴`
  if (drink && dessert) {
    dinner += ` ${drink}🧊${dessert}🥄`
  }
  return `${dinner} is ready, bon appétit!`
}

cookDinner('🍝'); // '🍝🍴 is ready, bon appétit!';
cookDinner('🍔', '🥤', '🍰'); // '🍔🍴🥤🧊🍰🥄 is ready, bon appétit!';

cookDinner('🍺', '🍸') // 🤒 Invalid number of arguments
/**
⛔ No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.
*/

Need to remember that implementation signature must be compatible to overloads and can't be called directly.

Conclusion

Function overloading is a powerful TypeScript feature that allows you to type your functions more elegantly.

More read:

Hope you enjoyed this guide, stay tuned for more.

Retrieving latest asset prices in your React dApp

Makar Murashov — Sun, 12 Jun 2022 09:52:09 +0000

What if you need to show in your app today's BTC/USD price? Or convert the user's balance from ETH to BTC? Or are you building an Elon Musk fan site and want to provide the latest Tesla (TSLA) stock price updates?
Today we will use Chainlink to retrieve the latest assets prices in a single call and provide it to your app components using React Context

Chainlink Data Feeds

The easiest and quickest way to do that is to use the data feed provided by Chainlink. We will use the ETH/USD pair as an example.

First, we need to find the contract's address for our pair to call to. There is a handy address's list for every pair supported by Chainlink.
In our case the address will be 0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419.
Let's write a function to get the latest price. To do that we need to call a contract by its address and provide the ABI. We will use Ethers.js library to help us with it (you could also use Web3.js, it doesn't matter here).

// getLatestPrice.ts
import { providers, Contract, BigNumber } from 'ethers'

const provider = new providers.JsonRpcProvider("https://mainnet.infura.io/v3/<infura_project_id>")
const aggregatorV3InterfaceABI = [{ "inputs": [], "name": "decimals", "outputs": [{ "internalType": "uint8", "name": "", "type": "uint8" }], "stateMutability": "view", "type": "function" }, { "inputs": [], "name": "description", "outputs": [{ "internalType": "string", "name": "", "type": "string" }], "stateMutability": "view", "type": "function" }, { "inputs": [{ "internalType": "uint80", "name": "_roundId", "type": "uint80" }], "name": "getRoundData", "outputs": [{ "internalType": "uint80", "name": "roundId", "type": "uint80" }, { "internalType": "int256", "name": "answer", "type": "int256" }, { "internalType": "uint256", "name": "startedAt", "type": "uint256" }, { "internalType": "uint256", "name": "updatedAt", "type": "uint256" }, { "internalType": "uint80", "name": "answeredInRound", "type": "uint80" }], "stateMutability": "view", "type": "function" }, { "inputs": [], "name": "latestRoundData", "outputs": [{ "internalType": "uint80", "name": "roundId", "type": "uint80" }, { "internalType": "int256", "name": "answer", "type": "int256" }, { "internalType": "uint256", "name": "startedAt", "type": "uint256" }, { "internalType": "uint256", "name": "updatedAt", "type": "uint256" }, { "internalType": "uint80", "name": "answeredInRound", "type": "uint80" }], "stateMutability": "view", "type": "function" }, { "inputs": [], "name": "version", "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }], "stateMutability": "view", "type": "function" }]
const ETH_USD_RATE_ADDRESS = '0x9326BFA02ADD2366b30bacB125260Af641031331'
const priceFeed = new Contract(ETH_USD_RATE_ADDRESS, aggregatorV3InterfaceABI, provider)

export function getLatestPrice(): Promise<BigNumber[]> {
  const priceFeed = new Contract(ETH_USD_RATE_ADDRESS, aggregatorV3InterfaceABI, provider)
  return priceFeed.latestRoundData()
}

Asset price context

In order to use the latest price data inside our app we need to create a context that will periodically update the price and provide the value to our components.

// AssetPriceContext.ts
import { utils } from 'ethers'
import { createContext, useEffect, useRef, useState } from 'react'
import { getLatestPrice } from './getLatestPrice'

interface ContextProps {
  conversionDate: number | null;
  conversionRate: number | null;
}

const UPDATE_INTERVAL_TIMEOUT = 180000 // 3 minutes

export const DEFAULT_CONTEXT: ContextProps = {
  conversionDate: null,
  conversionRate: null,
}

export const AssetPriceContext = createContext<ContextProps>(DEFAULT_CONTEXT)

export const useAssetPrice = (): ContextProps => {
  const [state, setState] = useState<ContextState>(DEFAULT_CONTEXT)
  const updateInterval = useRef<ReturnType<typeof setTimeout>>()

  const updateAssetPrice= async () => {
    let conversionDate = null
    let conversionRate = null

    try {
      const roundData = await getLatestPrice()

      conversionDate = Number(roundData[3].toString()) * 1000
      conversionRate = Number(utils.formatUnits(roundData[1], 8))
    } catch (error) {
      console.log(error) 
    }

    setState({conversionDate, conversionRate })
  }

  const startUpdate = async () => {
    stopUpdate()

    await updateAssetPrice()

    updateInterval.current = setInterval(async () => {
      await updateAssetPrice()
    }, UPDATE_INTERVAL_TIMEOUT)
  }

  const stopUpdate = () => {
    if (updateInterval.current) {
      clearInterval(updateInterval.current)
    }
  }

  useEffect(() => {
    startUpdate()
    return stopUpdate
  }, [])

  return state
}

Use in a component

Now we are ready to use the latest price, let's connect context to our app first:

// App.tsx
import { AssetPriceContext, useAssetPrice } from './AssetPriceContext'
import { EthBalance } from './EthBalance'

export default function App() {
  const assetPrice = useAssetPrice()

  return (
    <AssetPriceContext.Provider value={assetPrice}>
      <div>
        <h1>Chainlink Data Feeds example</h1>
        <EthBalance />
      </div>
    </AssetPriceContext.Provider>
  );
}

And create a simple component to convert our balance from ETH to USD:

// EthBalance.tsx
import React, { useContext } from 'react'
import { AssetPriceContext } from './AssetPriceContext'

const BALANCE_ETH = 1

export const EthBalance: React.FC = () => {
  const { conversionRate, conversionDate } = useContext(AssetPriceContext)

  const balanceUSD = conversionRate ? BALANCE_ETH * conversionRate : '...'
  const updatedAt = conversionDate
    ? new Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'medium' }).format(new Date(conversionDate))
    : '...'

  return (
    <div>
      <p>
        My balance is {BALANCE_ETH} ETH / {balanceUSD} USD
      </p>
      <p>
        Updated at {updatedAt}
      </p>
    </div>
  )
}

Which will result something as follows:

My balance is 1 ETH / 1557 USD
Updated at Saturday, 11 June 2022 at 22:29:16

Conclusion

Chainlink Data Feeds are relatively simple to use, yet it is a powerful instrument to connect your dApp to real-world data. More read is available here

Hope you enjoyed this tutorial, stay tuned for more.

How to teach your partner to be a front-end dev

Makar Murashov — Sat, 11 Jun 2022 14:59:56 +0000

I am a self-taught front-end developer with 6 years of experience. At some point, my wife wanted to change her professional activity and decided to also try herself as a front-end developer. Previously, she was engaged in marketing and setting up ad campaigns.
I will tell you our story, how I trained her from scratch to a confident junior dev and helped her quickly find a job. I hope our experience will be useful or will add motivation to someone.

Step 1 | Motivation

Before that, I often told her about what tasks I was working on, how I’ve solved them, and she was always interested in listening. The main thing here is to tell in the simplest possible language, not to load complex details and try to interest your student.
In addition to the fact that the front-end development itself seemed exciting and cool to her, to start creating interfaces at the initial stage it is not necessary to know high-level programming. It’s enough to be good at HTML, CSS and the basics of JS and how front-end frameworks work.
There are some people trying to build a career as a developer and immediately aim at high and difficult positions. For someone, this certainly works, but it takes much more time. In general, it helps to start at least from something, from a junior or adjacent position. This way you will get real practical experience, which is appreciated and usually gives more than doing something just for yourself for years.

Step 2 | Preparation and theory

It all starts with taking online courses, I can advise a few resources that we’ve used:

Responsive Web Design - in the first place, of course, freeCodeCamp with an excellent (and updated!) course for learning the HTML and CSS base,
JavaScript Algorithms and Data Structures - another great JavaScript base course.,
Front End Development Libraries - here you can see the React basics and SASS for example,
The Modern JavaScript Tutorial - an excellent JavaScript knowledge base with homework assignments to master the material,
YouTube - I won't recommend specific channels, you can always find useful videos or courses in your language.

Along the way of learning, there always comes a moment when the student begins to get lost and upset by the volume of material. In this case, your support and help in understanding difficult moments will be very useful to him.
We all google every day, so the main goal of this stage is not to understand and learn everything, but to put into your brain as much information as possible about what exists in the world of the front-end, so later you can return to this material.
It is also helpful to show real examples that your student can already solve or at least think of options on how to deal with it.

Step 3 | Portfolio and practice

After studying the theory and a little practice along the courses, I’ve explained to her more difficult points about the development and its ecosystem:

Node.js, npm/yarn, gulp, webpack - how to run and build a project,
Git, GitHub, GitLab, Bitbucket - version control system,
The structure of a standard project, how to write clean and efficient code.

Usually this all seems very complicated and incomprehensible to a beginner, but the main thing is to understand what and why they do, details can be dealt with later along the way. These tools exist to make life easier for the developer, not to complicate it (but we all know the sad truth).

There are plenty of easy and free design templates available online to build a portfolio, I also have some from past projects that are good for learning. We started with one simple responsive page (originally it was an email letter layout), we did it together, analyzing each step and pitfalls in detail. Then there was a landing page layout with a complex structure and animations, which she did almost herself, addressing only tricky questions.

I am strongly convinced that every front-end developer should have an excellent knowledge of vanilla HTML, CSS and JS, and only then move on to frameworks. Therefore, the third, “graduation” project was a multi-page e-commerce layout using only vanilla JS. It was a completely independent work, which, although it took more than a month, was very useful. I only helped with code reviews every few days.

Finally, we made a small SPA React-app using TypeScript and styled-components to understand the modern React ecosystem. When you already know the base at the proper level, it becomes much clearer why and for what exactly you need React or TypeScript.

Step 4 | Finding a Job

After almost six months of training, we made a resume and began to slowly look for suitable offers. After several interviews, she got a job at a cool fintech project as a junior front-end developer. She was distinguished among the other candidates by her knowledge of best dev practices, which we disassembled and used together. Now she still works there, but already as a middle React dev and continues to learn every day.

Сonclusion

It helped a lot to have a mentor who not only walked the same path before, but was also really interested in success. My advice and help greatly accelerated the process. It was also very useful for me, in order to explain something (especially in a simple way) you need to know it perfectly. Now we share our knowledge with each other, which is also great.
Therefore, I would like to wish all beginners good luck, patience and... make your partner your mentor 😆