DEV Community: Kate

Building Infinite Animated Scroll for React components

Kate — Sun, 04 Feb 2024 18:43:24 +0000

Contents

If you ever needed to present your components in an endless animation scroll, you might have found the variety of existing libraries like React Swipe.

Sometimes, however, we want to build something simple from scratch.

Let's say we want to showcase the new products added to our website. We want them to be ready visible however the total amount would overflow the page. This is the idea behind using infinite animated scroll.

We also want for:

animation to start on page load
components to be presented running in an endless loop

1. General idea

When talking about infinite components presentation, we might at first consider that we will have to re-render our slider as the animation progresses - by adding new elements to the end of the list and removing from the beginning.

This, as you might already guessed, could be detrimental for performance of the app so we will have to think of something else.

The best solution to date, in my opinion, is the usage of illusion and a bit of coding. We will also programmatically double the amount of the elements in the scroll to allow plenty of overlap. Then, we will simply reset starting position when the start of the duplicate is reached.

You can find working demo here

Let's now break down the code to see how exactly it works.

2. Lining up the components

First of all, let's add our container component:

// src/App.tsx
...
return (
    <HeroUIProvider style={{ height: '100%' }}>
      <div ref={wrapper} className='flex h-full items-center'>
        <div ref={container} className={`flex p-8 overflow-hidden`}>
        </div>
      </div>
    </HeroUIProvider>
  );
...

NOTE: HeroUI cards are used here to aid with UX.

Now let's fill in the box with the cards:

// src/App.tsx

...
const CARD_WIDTH = 160;
const SPACING = 32;

// list of cards:
const list = [
...
]

...
return (
    <HeroUIProvider style={{ height: '100%' }}>
      <div ref={wrapper} className='flex h-full items-center'>
        <div ref={container} className={`flex p-8 overflow-hidden`} style={{ gap: `${SPACING}px` }}>
                {list.map((item, index) => (
            <Card shadow="sm" key={index} style={{ minWidth: `${CARD_WIDTH}px` }}>
              <CardBody className="overflow-visible p-0">
                <Image
                  shadow="sm"
                  radius="lg"
                  width="100%"
                  alt={item.title}
                  className="w-full object-cover h-[140px]"
                  src={item.img}
                />
              </CardBody>
              <CardFooter className="text-small justify-between">
                <b>{item.title}</b>
                <p className="text-default-500">{item.price}</p>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </HeroUIProvider>
  );
...

3. Animating

Now that we have the desired box with overflowing cards, we want for it to start scrolling on component initialisation.

For this example we want it to scroll fixed distance, let's say interval = card width + padding.

We've going to use scrollBy to do so:

// src/App.tsx
...
const INTERVAL = CARD_WIDTH + SPACING;
...
async function scrollRight() {
      const scrollLeft = container.current?.scrollLeft;
      const clientWidth = container.current?.clientWidth;
      const scrollWidth = container.current?.scrollWidth;
      if (scrollLeft !== undefined && clientWidth !== undefined && scrollWidth !== undefined) {
         container.current?.scrollBy({
            left: INTERVAL,
            behavior: 'smooth',
          })
      }
      await new Promise(r => setTimeout(r, 1500));
}
...

4. Restarting

That looks better! However we still have not achieved the desired result - obviously the amount of cards is finite and the animation stops.

Let's now add a loop to make sure our animation restarts. Whenever our scroll nears the end, we will use setScroll to reset its position:

// src/App.tsx
...
async function scrollRight() {
    while (true) {
      const scrollLeft = container.current?.scrollLeft;
      const clientWidth = container.current?.clientWidth;
      const scrollWidth = container.current?.scrollWidth;
            if (scrollLeft !== undefined && clientWidth !== undefined && scrollWidth !== undefined) {
          if (scrollLeft >= (scrollWidth - clientWidth)) {
            container.current?.scrollTo({
              left: 0,
              behavior: 'instant'
            })
          }
          else {
            container.current?.scrollBy({
              left: INTERVAL,
              behavior: 'smooth',
            })
          }
      }
      await new Promise(r => setTimeout(r, 1500));
    }
}
...

While this works, it obviously doesn't create smooth transition.

This is where we have to use our duplication trick. We're going to double amount of elements with list.concat(list), and reset scroll position when reaching the start of the duplicate array.

// src/App.tsx
...
async function scrollRight() {
    while (true) {
      const scrollLeft = container.current?.scrollLeft;
      const clientWidth = container.current?.clientWidth;
      const scrollWidth = container.current?.scrollWidth;
      if (scrollLeft !== undefined && clientWidth !== undefined && scrollWidth !== undefined) {
        if (scrollLeft > 8 * (CARD_WIDTH + SPACING)) {
          container.current?.scrollTo({
            left: scrollLeft - 8 * (CARD_WIDTH + SPACING),
            behavior: 'instant'
          })
        }
        else {
          container.current?.scrollBy({
            left: INTERVAL,
            behavior: 'smooth',
          })
        }
      }
      await new Promise(r => setTimeout(r, 1500));
    }
  }
...
return (
    <HeroUIProvider style={{ height: '100%' }}>
      <div ref={wrapper} className='flex h-full items-center'>
        <div ref={container} className={`flex p-8 overflow-hidden`} style={{ gap: `${SPACING}px` }}>
          {list.concat(list).map((item, index) => (
                        ...
          ))}
        </div>
      </div>
    </HeroUIProvider>
  );
...

NOTE: Notice the behavior: 'instant' set in scroll options - it will set stroll instantly which will make for seamless transition

5. Adjusting

You can notice now that there's always some padding at the beginning of the row present. Even when animation is smooth, it still doesn't look quite natural.

We can fix this by introducing OFFSET value to add to our starting point. This will add some perceived variability to our scroll and make it look more "natural". For the OFFSET, any value between 0 and width of the card should work just fine:

// src/App.tsx
...
const OFFSET = 23;
const INTERVAL = CARD_WIDTH + SPACING + OFFSET;
...

That's it! You can see it in action below:

GitHub source code
DEMO

Happy coding!

Let's connect on my Portfolio | GitHub | Codepen

Utilising createPortal to build walkthrough experiences in React applications

Kate — Sat, 18 Nov 2023 00:31:15 +0000

Contents

Creating context
Providing context to manage tutorial progression and status
Creating popover component
Conditionally displaying popover
createPortal
Caveats

If you've just finished adding new features to your app and want to showcase them to your users, adding a quick tutorial might help them to get up-to-speed.

One of the best ways to give users a quick know-how is by highlighting elements of the app and providing short description of its functionality:

Image credit: https://www.appcues.com

Let's outline requirements to create a similar tutorial:

Tutorial should be presented on loading of the application.
It should consist of multiple steps, each highlighting specific feature of the app.
Tutorial should automatically close on completion.

Taking into account everything above, we might come up with something like this:

// pseudocode

const [step, setStep] = useState<number>(0)

useEffect(() =>{
    setStep(step === 3 ? 0 : step + 1)
}, [])

<>
    {step === 1 && <StepOne/>}
    {step === 2 && <StepTwo/>}
    {step === 3 && <StepThree/>}
    ...
</>

This could turn into a working solution, however you might notice a couple of disadvantages of this approach:

Tutorial steps will be displayed exactly right where you put them in the component tree, and not close enough to relevant elements that we want to highlight, making tutorial not as helpful.
Even if we put tutorial popovers near existing elements in the code, those elements will become coupled, making refactoring harder in case we need to move elements around.

This is where createPortal comes in. Added in React 16, createPortal function allows us to insert element into different parts of the DOM. In the essence, we can find element in the DOM and attach React element to it.

Let's see how it works on practice with our tutorial.

A few things to note before we start:

Sample below assumes existence of working React 16 app or higher. We will use dashboard template provided by Material UI as a backdrop for our popups.
Basic knowledge of React and Material UI library is assumed.

1. Creating context

Let's do some groundwork first. This step might be optional but advisable as to avoid prop drilling. This is especially important if tutorial trigger and tutorial steps are separated by multiple levels of nested components.

In this example we'll be using React Context API, however other state management tools such as Redux can also be used.

// src/providers/TutorialProvider.tsx
import { createContext } from 'react';

...
export const TutorialContext = createContext({
    tutorialOpen: false,
    currentStep: tutorialSteps[0],
    onTutorialContinue: () => {},
    toggleTutorial: () => {},
});

...

We want to store tutorial status, current tutorial step, function to navigate to the next tutorial step and a function to toggle tutorial on/off.

2. Providing context to manage tutorial progression and status

Let's add new TutorialProvider that will allow us sharing context state down the component tree of our application.

// src/providers/TutorialProvider.tsx
import { createContext } from 'react';

export type TutorialStep = {
    id: number;
    elementId: string;
    tip: string;
};

const tutorialSteps: TutorialStep[] = [
    {
        id: 1,
        elementId: 'home',
        tip: 'Welcome to the new dashboard!',
    },
    {
        id: 2,
        elementId: 'reports',
        tip: 'You can view your reports here',
    },
    {
        id: 3,
        elementId: 'notifications',
        tip: 'You will receive notification once order is completed',
    },
    {
        id: 4,
        elementId: 'recentOrders',
        tip: 'Your orders will be listed here',
    },
];

export const TutorialContext = createContext({
    tutorialOpen: false,
    currentStep: tutorialSteps[0],
    onTutorialContinue: () => {},
    toggleTutorial: () => {},
});

export const TutorialProvider = ({ children }: { children: ReactNode }) => {
  const [tutorialOpen, setTutorialOpen] = useState<boolean>(false);
  const [currentStep, setCurrentStep] = useState<TutorialStep>(
    tutorialSteps[0]
  );

  const onTutorialContinue = useCallback(() => {
    const currentStepIndex = tutorialSteps.indexOf(currentStep);
    const isLastStep = currentStepIndex === tutorialSteps.length - 1;
    setTutorialOpen(!isLastStep);
    setCurrentStep(
      isLastStep ? tutorialSteps[0] : tutorialSteps[currentStepIndex + 1]
    );
  }, [currentStep]);

  const toggleTutorial = (): void => {
    setTutorialOpen(!tutorialOpen);
  };

  return (
    <TutorialContext.Provider
      value={{ tutorialOpen, currentStep, onTutorialContinue, toggleTutorial }}
    >
      {children}
    </TutorialContext.Provider>
  );
};

NOTE: Example above uses hardcoded step values for the simplicity purposes however fetching these steps from API might work better depending on your app's architecture.

It's important to wrap provider around the <App /> so we can actually use it:

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { TutorialProvider } from './providers/TutorialProvider';

ReactDOM.createRoot(document.getElementById('app')).render(
  <React.StrictMode>
    <TutorialProvider>
      <App />
    </TutorialProvider>
  </React.StrictMode>
);

3. Creating popover component

Let's now create popover component itself. Material UI provides an excellent library of out-of-the-box components that could be used to build a simple popover with a backdrop.

// src/components/TutorialPopover.tsx

import React, { useCallback, useContext, useState } from 'react'
import { TutorialContext } from '../providers/TutorialProvider';
import { Backdrop, Box, Button, Stack, Tooltip, Typography } from '@mui/material';

const TutorialPopover = () => {
    const { currentStep, onTutorialContinue } = useContext(TutorialContext);

    return (
        <Backdrop open>
            <Tooltip open title={
                <Stack>
                    <Typography variant='body2'>
                        Tip #{currentStep.id}
                    </Typography>
                    <Typography>
                        {currentStep.tip}
                    </Typography>
                    <Button variant='contained' onClick={onTutorialContinue}>
                        Got it
                    </Button>
                </Stack>
            }>
                <Box></Box>
            </Tooltip>
        </Backdrop>
    )
}

export default TutorialPopover

Since we want our tutorial to run on the highest level of the application and highlight different elements across the app, let's add our newly created component to the root of the application:

// src/App.tsx

import * as React from 'react';
import { TutorialContext } from './providers/TutorialProvider';
import { useContext, useEffect } from 'react';
import TutorialPopover from './components/TutorialPopover';

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      ...
      // Adding popover
      <TutorialPopover />
    </ThemeProvider>
  );
}

export default App;

We can now use TutorialContext created above and trigger our tutorial from inside useEffect hook in the App. This way tutorial will start on application load.

// src/App.tsx

import * as React from 'react';
import { TutorialContext } from './providers/TutorialProvider';
import { useContext, useEffect } from 'react';
import TutorialPopover from './components/TutorialPopover';

function App() {
  const { toggleTutorial } = useContext(TutorialContext);

  const [open, setOpen] = React.useState(true);
  const toggleDrawer = () => {
    setOpen(!open);
  };

  useEffect(() => {
    toggleTutorial()
  }, [])

  return (
    ...
  );
}

export default App;

NOTE: example above is simplified to display tutorial every time our application loads. In the real-world scenario tutorial will most likely be triggered as a result of API call to your backend.

4. Conditionally displaying popover

We want our popover to only show when it is set to open in our context. When tutorial is started from the useEffect hook of App, we'll get the status update in the TutorialPopover component.

// src/components/TutorialPopover.tsx

import React, { useCallback, useContext, useState } from 'react'
import { TutorialContext } from '../providers/TutorialProvider';
import { Backdrop, Box, Button, Stack, Tooltip, Typography } from '@mui/material';

const TutorialPopover = () => {
    const { tutorialOpen, currentStep, onTutorialContinue } = useContext(TutorialContext);

    // only show tutorial when it is set as open in our context provider
    if (!tutorialOpen) return null

    return (
        <Backdrop open>
            <Tooltip open title={
                <Stack>
                    <Typography variant='body2'>
                        Tip #{currentStep.id}
                    </Typography>
                    <Typography>
                        {currentStep.tip}
                    </Typography>
                    <Button variant='contained' onClick={onTutorialContinue}>
                        Got it
                    </Button>
                </Stack>
            }>
                <Box></Box>
            </Tooltip>
        </Backdrop>
    )
}

export default TutorialPopover

5. createPortal

Now the the fun part! We're utilising createPortal to display popover right in the container component by using element id. <Tooltip> is the component that will be attached to the component found by its id.

// src/components/TutorialPopover.tsx

import React, { useCallback, useContext, useState } from 'react';
import { TutorialContext } from '../providers/TutorialProvider';
import {
  Backdrop,
  Box,
  Button,
  Stack,
  Tooltip,
  Typography,
} from '@mui/material';
import { createPortal } from 'react-dom';

const TutorialPopover = () => {
  const { tutorialOpen, currentStep, onTutorialContinue } =
    useContext(TutorialContext);

  if (!tutorialOpen) return null;

  return (
    <Backdrop open>
      {document.getElementById(currentStep.elementId) &&
        createPortal(
          <Tooltip
            open
            title={
              <Stack>
                <Typography variant="body2">Tip #{currentStep.id}</Typography>
                <Typography>{currentStep.tip}</Typography>
                <Button variant="contained" onClick={onTutorialContinue}>
                  Got it
                </Button>
              </Stack>
            }
          >
            <Box></Box>
          </Tooltip>,
          document.getElementById(currentStep.elementId) as Element
        )}
    </Backdrop>
  );
};

export default TutorialPopover;

6. Caveats

We have to be mindful of elements' id values. In case of multiple ids found in DOM, child element will attach to the first instance found. One solution to this would be assigning unique ids to your elements.
On the other hand, if element is not found, our child element won't be rendered so we have to make sure container element exists in DOM before trying to call createPortal.

To address second point, we will be monitoring DOM readiness by using useState and useMutation hooks in our tutorial component and passing element id to observer to watch out for. Once it has been registered in the DOM, DOMReady value will be updated.

Creating observer hook:

// src/hooks/useMutationObserver.ts

import { useEffect, useState } from 'react';

const DEFAULT_OPTIONS = {
  config: { attributes: true, childList: true, subtree: true },
};

function useMutationObservable(
  target: Element,
  callback: MutationCallback,
  options = DEFAULT_OPTIONS
) {
  const [observer, setObserver] = useState<MutationObserver | null>(null);

  useEffect(() => {
    const obs = new MutationObserver(callback);
    setObserver(obs);
  }, [callback, options, setObserver]);

  useEffect(() => {
    if (!observer) return;
    const { config } = options;
    observer.observe(target, config);
    return () => {
      if (observer) {
        observer.disconnect();
      }
    };
  }, [observer, options, target]);
}

export default useMutationObservable;

Now we have to update our TutorialPopover:

// src/components/TutorialPopover.tsx

import React, { useCallback, useContext, useState } from 'react';
import { TutorialContext } from '../providers/TutorialProvider';
import {
  Backdrop,
  Box,
  Button,
  Stack,
  Tooltip,
  Typography,
} from '@mui/material';
import { createPortal } from 'react-dom';
import useMutationObserver from '../hooks/useMutationObserver';

const TutorialPopover = () => {
  const { tutorialOpen, currentStep, onTutorialContinue } =
    useContext(TutorialContext);
  const [DOMReady, setDOMReady] = useState(false);

  const onListMutation = useCallback(() => {
    setDOMReady(!!document.getElementById(currentStep.elementId));
  }, [currentStep.elementId]);

  // observing DOM for the element to which tutorial popover will be attached
  useMutationObserver(document.body, onListMutation);

  // we will not display tutorial unless container element is rendered in the DOM
  if (!tutorialOpen || !DOMReady) return null;

  return (
    ...
  );
};

export default TutorialPopover;

That's it! We now have our observer looking for container element and tutorial starting on the application load.

JSFiddle sample code
GitHub source code

Happy coding!

Let's connect via my Portfolio | GitHub | Codepen

Enhancing the SEO of your Next.js application

Kate — Tue, 17 Oct 2023 11:16:39 +0000

Contents

Metadata
Title and description
Open Graph
Sitemap
robots.txt
Favicon
Analytical tools
Additional tips

With Next.js becoming more and more popular React framework, many have chosen it as a tool to build web applications.

Being mostly known for its great performance and SSR rendering abilities, it also allows for search engine optimization (SEO) support.

Although marketing and SEO is a huge knowledge field in itself, basic knowledge of it is essential for a web developer. Whether you're working on personal project or developing for a job task, it can be of a great benefit to anyone.

A few things to note regarding the tips in this article:

Examples below are intended to optimise your website's SEO specifically for Next.js application however the general concepts are universal.
Next.js 13: following code samples assume existence of working Next.js application with app directory architecture enabled.
Basic knowledge of React and Next.js framework are presumed
GitHub example is available

Metadata

Website metadata refers to the information embedded in the HTML code of web pages that provides structured data about the content and characteristics of a website. It is not visible to users when they view the webpage but is crucial for search engines and other online services.

Next.js with its Metadata API makes your metadata configuration especially easy end flexible.

Metadata can be configured in two ways in the Next.js project - using metadata config object or by adding special files to route segments. In the following examples we'll be using config-based metadata for simplicity purposes.

Note: it is possible to use config-based and file-based approach simultaneously, in this case file config will be prioritised.

By default, your metadata object would be located in layout.tsx:

// app/layout.tsx
...
import type { Metadata } from 'next'

export const metadata: Metadata = {
}

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (...)
}

This config allows to make metadata object dynamic.

Note: you can also add metadata to different route layouts and pages

Title and description

Title tag is one of the most critical metadata elements. It defines the title of a web page and appears as the clickable headline in search engine results. A well-optimised title tag should accurately describe the content of the page and include relevant keywords, which can improve SEO rankings.

Meta descriptions are brief summaries that provide a concise preview of a web page's content. While they don't directly affect search rankings, well-written meta descriptions can encourage users to click on your search result, increasing your click-through rate (CTR) and indirectly improving SEO.

Both title and description can be added to metadata object:

// app/layout.tsx
...
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Website',
  description: 'Hey! Check out my cool website!',
}

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (...)
}

Open Graph

Open Graph protocol allows you to control how your content appears when shared on social media
If you want everyone to see your website's title together with description and image when link is shared on social media, adding open graph tags is a way to go.

Next.js again makes it easy to configure those. You can update your metadata object like so:

// app/layout.tsx
...
import type { Metadata } from 'next'

export const metadata = {
    title: 'My Website',
    description: 'Hey! Check out my cool website!',
    openGraph: {
        title: 'My Website',
        description: 'Hey! Check out my cool website!',
        url: 'https://my-website.com',
        siteName: 'My Website',
        images: '/logo-og.svg'
    }
}

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (...)
}

Full list of openGraph properties can be found in Next.js documentation

Bonus tip:

You can also add a config for Twitter card markup reference which will describe how link will be displayed when shared on Twitter(X):

// app/layout.tsx
...
export const metadata = {
    title: 'My Website',
    description: 'Hey! Check out my cool website!',
    openGraph: {
        title: 'My Website',
        description: 'Hey! Check out my cool website!',
        url: 'https://my-website.com',
        siteName: 'My Website',
        images: '/logo-og.svg',
    },
    twitter: {
        title: 'My Website',
        description: 'Hey! Check out my cool website!',
        images: '/logo-optimized-for-twitter-og.svg',
    }
}

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (...)
}

Sitemap

Search engines use sitemaps to discover and index the pages on your website. A well-structured sitemap helps search engine bots navigate and crawl your site more efficiently. This can result in more of your web pages being indexed, increasing your website's visibility in search engine results.

Normally one would add sitemap.txt file to /public directory. However, Next.js provides a way to have a dynamic sitemap which will tell search engines that your website is up-to-date.

Add sitemap.tsx to app/ directory:

// app/sitemap.tsx
import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {

    return [
        {
            url: 'https://your-website.com',
            lastModified: new Date(),
        },
        {
            url: 'https://your-website.com/blog',
            lastModified: new Date(),
        },
        {
            url: 'https://your-website.com/contact',
            lastModified: new Date(),
        },
    ];
}

robots.txt

This is the crucial file that instructs robots (typically search engine robots) how to crawl and index pages. It serves as a guide for search engine crawlers to determine which pages or files of a website should be crawled or not. Is consists of set of rules that are read top-to-bottom by crawlers.

Again, you can add robots.txt to your public folder or you can make it dynamic just like with example for sitemap above:

// app/robots.tsx
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {

    return {
        rules: {
            userAgent: '*',
            allow: '/',
            disallow: '/admin'
        },
        sitemap: 'https://your-website.com/sitemap.xml',
    };
}

Follow to Next.js documentation for full list of Robot's object properties.

Favicon

The website icon, also known as a "favicon" (short for "favorite icon"), is a small image or icon that appears in a web browser's tab, bookmarks, and sometimes in search results or social media previews

While the favicon itself is not a direct ranking factor for SEO, it can have an indirect impact on the user experience and brand recognition, which can, in turn, influence SEO. Good-quality icon makes your website look credible and professional.

Make sure to follow styling guidelines when creating your favicon and add it app/ directory.

Analytical tools

Obviously, there no point to implement SEO concepts without actually tracking how and to what extent they work. This is where analytical tools step in.

There are countless analytical tools and services to choose from that can track your website's performance, but Google, being the most popular engine for 16 years straight, provides the most popular ones.

Google Analytics

Google Analytics is a powerful web analytics service that allows website owners and marketers to track and analyse various aspects of their website's performance and user behaviour.

Let's see how we can integrate it into our Next.js app.

1. Create a Google Analytics Account: If you don't already have a Google Analytics account, sign up for one at Google Analytics.

2. Create a New Property: After creating an account, set up a new property for your Next.js website in your Google Analytics account. You'll receive a unique Tracking ID (G-XXXXXXXXX) that you'll need to integrate into your Next.js application.

3. Create Google Analytics component:

// app/components/GoogleTag.tsx
import Script from 'next/script'

export default function GoogleTag() {
return (
    <>
        <Script async strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" />
        <Script 
            id="google-analytics" 
            strategy="afterInteractive" 
            dangerouslySetInnerHTML={{
            __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);} 
                gtag('js', new Date()); 
                gtag('config', 'G-XXXXXXXXXX');
            `,
            }}
        />
    </>)
}

4. Add the tracking component to layout.tsx:

// app/layout.tsx
import '@/app/globals.scss'
import GoogleTag from '@/components/GoogleTag'

...

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {

return (
        <>
            <GoogleTag />
            <main>
                {children}  
            </main>
        </>
    )
}

Voila! You should see your websites clicks on your Google Analytics dashboard. You can learn more about reports and automations in one of Google's free courses.

Additional tips

Google Search Console

Although not requiring special setup for Next.js, Google Search Console is an excellent free web service provided by Google that allows you to monitor, manage, and optimise how your website appears in Google search results.

Semrush blog has very detailed guide to head start with Google Search Console.

Ensure your app is mobile friendly

Considering that 50 to 60% internet traffic is coming from mobile devices, mobile friendly-website is no longer a bonus but rather a requirement. Make sure your website is responsive and mobile-friendly. You don't want visitors to drop off because the call-to-action button is unreachable or the text is being cut off/overflown.

On top of that, mobile optimisation can positively impact your search engine rankings, making it easier for users to find your site in the first place.

Build high-quality backlinks

Try to get other high-quality websites that are relevant to your field link to yours. This will help increase your website's authority and improve its ranking in search results.

There are countless possibilities to this, you can post links on your social media, collaborate with others in your field for link exchange etc.

Update your content regularly

Search engines generally favour websites that regularly update their content. Fresh content can help improve your search engine rankings, making it easier for potential visitors to find your site.

Happy coding!

Building Accessible Web Experiences: A Checklist for Frontend Developers

Kate — Sun, 17 Sep 2023 18:20:22 +0000

Contents

Benefits of accessible web
Accessibility checklist
Useful tools

Benefits of accessible web

Around 16% of world population have some kind of disability, however only 3% of the web is accessible to people with disabilities. Not only we should strive to accommodate to this part of population, but accessible web can be very helpful for people without disabilities as well. Consider older people, people with slow internet connection, or people with situational immobility - broken arm, etc.

Its time we bring accessible web to light and we, as a frontend engineers, are the people who can take proactive action to do that.

Accessibility checklist

Let's dive into most common and important accessibility checkpoints and their implementations.

Keyboard Interaction

Interactive elements should receive keyboard focus. Buttons, clickable cards, checkboxes, tabs, etc. should be highlighted when using keyboard navigation. Add tabindex to allow element to be focusable with the Tab key and don't forget about adding CSS styles for :hover, :focus and :active.
Anchor tags with no href should receive keyboard focus. This rule is almost the same as above except for anchor elements <a>. Depending on the browser, you can find that anchor can be selected with keyboard even without tabindex, however those without href cannot. Add tabindex to all anchors.
Tooltip should receive keyboard focus. Tooltips often provide additional information that is usually accessible when mouse is hovered over component. We need to make sure tooltip is shown when anchor element is in focus as well.

Landmarks

Landmark regions should be clearly defined. Webpage should be divided into separate landmark regions, each with a defined role. Identify webpage's logical structure, assign and label the areas.
Page structure should be marked up semantically. Related to above, use main, nav, footer, header, section, aside to mark up the webpage.

Document Structure

Tables should have table headers. Don't forget to add th tags to tables.
Form fields and visual labels should be associated. Add aria-label or aria-labelby to input element.
Error messages should be associated with input fields. Input error message should be associated with their controls. Add aria-describedby to error message or area-label if its show in the label.
Headings should be marked up semantically. Make use of heading tags starting from h1 and make sure that they're positioned in order of importance. Avoid putting h3 in <nav> and h1 below in <main>, for example.
Heading levels should not be skipped. Related to above, do not put <h3> semantically directly under <h1>
Lists should be marked up semantically. This includes ordered, unordered and description lists.

Avoid:

<ul>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</ul>

Better:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Readability

Regular text should have sufficient contrast. Don't put red text on a green background! Use sufficient contrast between text and background colours to make content readable for individuals with low vision or colour blindness.
Dynamic text resize should be supported. When user sets font size to 200% in their browser settings, webpage fonts should scale automatically, without loss of content or functionality. Avoid hardcoded size units such as px and use em or % instead.

Skip Navigation Links

There should be keyboard functional link to skip repeated block of content. Add "skip to content" or similar links that allow users to bypass repetitive elements, e.g. navigation menus and go directly to the main content. This is will be of great benefit to screen reader users.

Element Relationships

Radio groups should be associated with legend. Make sure to indicate that what property radio buttons control by wrapping them in <fieldset>.
Checkboxes should be associated with their group level. Similar rule applies for the checkboxes.

Indicators

Links should visually or programmatically indicate that they open in a new window. Adding target="blank" to anchor tag is helpful but it's even better to add a small arrow icon or image to the link.
Mandatory fields should be clearly marked. Usually an asterisk * is used to indicate required field.

States and Properties

Pages should have descriptive titles. Make use of <title> tag. Not just for accessibility reasons, its one of the key tools to improve your SEO.
iFrames should have descriptive titles. iFrame is basically a page within a page, same rule applies for it too.
<html> tag should have lang attribute. It helps screen readers to use correct pronunciation. If parts of your website use different languages, add lang attribute to respective elements as well.
Roles: ARIA roles define the type of element and its purpose. Roles can be used to indicate whether an element is a button, link, menu, dialog, or other interactive components. For example, role="button" can be added to a <div> element to convey that it functions as a button.
Labels. Interactive elements should have accessible name inside aria-label
Element semantics should not be inappropriately suppressed with aria-hidden. Avoid hiding elements from accessibility tree; If required, use CSS styles to make element invisible by changing opacity or visibility.
Images should have alt attribute. Have you ever been stuck with slow connection and faced a white square wonder what's that supposed to be? Add an alt attribute so the images could be easily identified by text readers.

Useful tools

Going through all those checkpoints might be overwhelming, and indeed, the larger your webpage or application is, the more effort it will take to find and address them.

There are, luckily excellent tools that can jumpstart the process.

WAVE: A free online tool that provides visual feedback about the accessibility of your web content, highlighting potential issues and offering suggestions for improvement.
axe DevTools: An accessibility testing extension for Google Chrome and Firefox that can be used directly within the browser's developer tools.
Pa11y: An open-source automated accessibility testing tool that you can run from the command line or integrate into your CI/CD pipeline.
Lighthouse Accessibility Audit: Excellent for a quick accessibility insight, Lighthouse is available with Google Chrome dev tools and checks highlight opportunities to improve the accessibility of your web app.

Remember that automated tools are valuable for identifying many common accessibility issues, but manual testing is often necessary to fully understand and address the user experience for people with disabilities. A combination of automated and manual testing, along with a commitment to ongoing accessibility, is key to maintaining an accessible web presence.

Happy coding!

Original post