DEV Community: dango0812

How to build a responsive virtual grid with tanStack virtual

dango0812 — Sat, 02 Aug 2025 16:54:20 +0000

When rendering a large number of items, failing to consider performance can lead to laggy scrolling or even slow down the entire app. To address this issue, virtualization techniques were introduced, and among them, TanStack Virtual stands out for its excellent performance and flexibility.

In this article, we’ll explore how to build a responsive grid component with aspect ratio support using TanStack Virtual.

sample code : https://github.com/dango0812/tanstack-virtual-grid
website : https://tanstack-virtual-grid.vercel.app/

Although the official TanStack Virtual website offers many great examples, you probably didn’t find one that supports responsive grid layouts with aspect ratio handling.
website: https://tanstack.com/virtual/latest/docs/framework/react/examples/dynamic

There's also an excellent library built on top of TanStack called virtual-grid/react, but even that doesn’t handle aspect ratio calculations out of the box.
website: https://www.virtual-grid.com/

In this post, I’ll show you how to build a fully responsive virtualized grid using TanStack Virtual—with support for consistent aspect ratios like 1:1 or 16:9, making it truly adaptable across different screen sizes!

📌 Constants Definition

    const BREAKPOINT = {
        xs: 375,
        sm: 640,
        lg: 1024
    };
    const ITEM_RATIO = 16 / 9;

BREAKPOINT: Similar to media queries, these are breakpoints that determine how the grid layout changes based on screen width.

ITEM_RATIO: The aspect ratio of each item. On larger screens, it maintains a 16:9 ratio, while on smaller screens, it switches to a square shape.

📌 Row & Column Virtualization using useVirtualizer

    const rowVirtualizer = useVirtualizer({
        count: Math.ceil(items.length / columns),
        getScrollElement: () => parentRef.current,
        estimateSize: () => itemSize.height + gap.y,
        overscan: 2
    });

    const columnVirtualizer = useVirtualizer({
        horizontal: true,
        count: columns,
        getScrollElement: () => parentRef.current,
        estimateSize: () => itemSize.width + gap.x,
        overscan: 2
    });

Both rows and columns are virtualized separately, so only visible elements are rendered.

estimateSize: Estimates the height/width of each item to calculate the total virtual scroll area.
overscan: Renders additional items outside the viewport for improved scroll performance.

📌 useResizeObserver

const { width: containerWidth } = useResizeObserver(parentRef);

Uses ResizeObserver to detect changes in the width of the parent container.
In a real project, you might want to create a useWindowSize hook instead, to track window size directly!

const handleResize = throttle(() => {
    ...
}, 200);

This function is triggered whenever the screen size changes.
It’s throttled for performance, and recalculates gap, column count, and item size, then updates the state.

📌 Layout Calculation Functions
Each function is used within handleResize and calculates layout based on the current screen width.

const getItemGap = (width) => {...}
const getColumnsCount = (width) => {...}
const getItemWidth = (width, columns, gapX) => {...}
const getItemHeight = (width, itemWidth) => {...}

getItemGap: Adjusts item gap (in px) based on breakpoints.
getColumnsCount: Dynamically changes the number of columns according to width.
getItemWidth: Calculates item width by subtracting total gap from container width.
getItemHeight: Calculates height based on aspect ratio. Uses square ratio on small screens.

📌 Calling tanstack measure function

useEffect(() => {
    rowVirtualizer.measure();
    columnVirtualizer.measure();
}, [itemSize.height, columns]);

When item size or column count changes, re-measures the virtualizer’s internal layout.

📌 Rendering

{rowVirtualizer.getVirtualItems().map((virtualRow) =>
    columnVirtualizer.getVirtualItems().map((virtualColumn) => {
        ...
    })
)}

Nested loop structure iterates through both rows and columns.

Each item’s position is calculated using translateX and translateY (a required technique in virtual scrolling).

itemIndex is used to determine which item from the data array should be rendered.

How to handle a language-less main domain with SEO considerations in a Next.js + i18next environment

dango0812 — Wed, 23 Jul 2025 07:09:21 +0000

When running a global service, multilingual support becomes an inevitable challenge.

Next.js provides built-in i18n features, and when used with i18next, translation management becomes more streamlined.
However, when working on i18n, you often face questions like:

“Why is the language code added even for the default language?”
“Shouldn't the default language be served without a language prefix?”
“Will this cause any SEO issues?”

In this article, we'll show you how to use Next.js Middleware to remove the language prefix from the main domain for the default language.

🔎 Why is the domain important for SEO?
Search engines may recognize multiple URLs with the same content as duplicate content.
For example:

domain.com/about
domain.com/ko/about
domain.com/ja/about
...

If all three URLs serve the same content in the same language, search engines might see them as duplicates.
This can lead to:

Diluted SEO rankings (because link equity is split)

Indexing issues (search engines unsure which page to prioritize)

Reduced crawl efficiency

To prevent this, it's important to:

Use proper canonical tags

Configure hreflang attributes for multilingual versions

Ensure only one version is accessible for each language when possible

Managing URLs carefully in a multilingual setup is essential for avoiding SEO penalties and maximizing visibility.

🛠️ how to set up i18next with Next.js
blog: https://www.locize.com/blog/i18n-next-app-router

i18next library middleware code

1. Language Check

2. Redirect if language in path is not supported
if (!lngInPath && !req.nextUrl.pathname.startsWith('/_next')) {
    return NextResponse.redirect(new URL(`/${lng}${req.nextUrl.pathname}
${req.nextUrl.search}`, req.url))
  }

3. Continue
NextResponse.next({ ... })

🚀 modified middleware code

1. Language Check

2. Language Check & Fallback Language Check

3. Handling access to the fallback language (replace fallback language in URL)
Replace the fallback language segment in the target URL:
target = target.replace(`/${fallbackLng}`, target === `/${fallbackLng}` ? "/" : "");

-> Redirect not includes fallback language
NextResponse.redirect(new URL(target, req.url));

-> Rewrite the fallback language page
NextResponse.rewrite(new URL(`/${fallbackLng}${pathname}${search}`, req.url));

4. Continue
NextResponse.next({ ... })

Dive deeper on github.
code : https://github.com/dango0812/tanstack-virtual-grid/blob/main/middleware.ts

Stop searching through old docs for social share urls — get all the latest, ready-to-use URLs right here.

dango0812 — Wed, 09 Jul 2025 01:56:49 +0000

Are you building a blog, portfolio, or product site and want users to share your content on social media?

Instead of digging through outdated docs or guessing URL formats, I built a simple solution — a collection of ready-to-use social share URLs with corresponding icons (SVG, PNG, JPG).

Why install a full library when you only need to support two share services?
You don’t need a massive library just to add simple social sharing!
Keep it light skip the heavy libraries and just use simple share URLs.

You can check it out here.
👉 Github: https://github.com/dango0812/social-share-urls
The details documentation is still a work in progress!

💡 How to Use

// Example: Share on Twitter
const searchParams = new URLSearchParams({
    url: "https://github.com/dango0812", // share url
    text: "hello, world"
});
const shareUrl = `https://twitter.com/intent/tweet?${searchParams.toString()}`;

<a href={shareUrl} target="_blank" rel="noopener noreferrer">
    twitter share!
</a>

Since each platform has different URL templates, we've organized them all in this project.
You can copy them and use them right away!

How to add a table of contents in Ghost without editing default.hbs

dango0812 — Mon, 15 Jul 2024 09:09:47 +0000

Hello, everyone 👋

Many people have probably accessed the tutorial provided by Ghost on how to add a table of contents, as shown in the link below.
https://ghost.org/tutorials/adding-table-of-contents

The method provided by Ghost is written for developers, so it is complicated and time-consuming.
In this post, we offer a simple and easy way to create a table of contents that anyone can follow, even if you are not a developer.

※ The method provided by Ghost applies to all posts, but the method in this post requires manual work.
It is written based on the Ruby theme.

#STEP 1

<script src="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css" rel="stylesheet">

place code at Post header ghost_head

#STEP 2

<script>
    tocbot.init({
        tocSelector: '.toc',
        linkClass: 'toc-link',
        orderedList: true,
        headingSelector: 'h1, h2, h3',
        collapseDepth: 3,
        contentSelector: '.gh-content',
        ignoreSelector: '.kg-header-card > *',
        headingsOffset: 40,
        scrollSmooth: true,
        scrollSmoothDuration: 420,
        scrollSmoothOffset: -40,
        hasInnerContainers: true
    });
</script>

place code at Post header ghost_foot

#STEP 3

<div class="toc"></div>
<style>
    .toc:before {
        content: "Table of content";
        display: block;
        margin-bottom: 20px;
        font-size: larger;
        font-weight: bold;
        border-bottom: 1px dashed #dadada;
        padding-bottom: 10px;
    }

    .toc {
        padding: 30px;
        border: 1px solid #dadada;
        border-radius: 5px;
        background-color: #fafafa;
    }

    a.toc-link {
        font-size: 80%;
        text-decoration: none;
    }

    li.toc-list-item {
        margin-top: 0;
    }

    .toc-list .is-collapsible {
        margin-left: 15px;
        color: #666;
    }
</style>

Use HTML card to insert the table of contents everywhere you like

#STEP 4

<h1 id="title#1">Title #1</h1>

and, if you create titles using 'h1, h2, h3' with an HTML card, they will be included in the table of contents.
※ You need to input an id to specify what each table of contents link item points to.

How can I display the table of contents on the left or right side instead of at the top of the post?

instead of the STEP 3 HTML card code you added earlier, write the code as follows.

<div class="toc"></div>
<style>
    .toc:before {
        content: "Table of contents";
        display: block;
        font-size: larger;
        font-weight: bold;
        padding-bottom: 20px;
    }

    .toc {
        position: fixed;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
        padding: 30px;
        border: 1px solid #dadada;
        border-radius: 20px;
        background-color: #fafafa;
        @media (max-width: 1200px) {
            display: none;
        }
    }

    a.toc-link {
        font-size: 80%;
        text-decoration: none;
    }

    li.toc-list-item {
        margin-top: 0;
    }

    .toc-list .is-collapsible {
        margin-left: 15px;
        color: #666;
    }
</style>

Next, proceed to STEP 4.

Note when inserting the table of contents automatically using TOCBOT
After you have installed TOCBOT, add the following HTML card to any post you want.

An extremely important note is that each theme will not be the same and will have different content classes. contentSelector: '.gh-content'

You can access the preview or uploaded post and use the browser's 'Developer Tools' to check what values the post is based on.

After clicking the mouse icon highlighted in red, hover over the content of the post to find the content id value used by the theme.

Then, simply change the value of the contentSelector you entered in ghost_foot, and you're done!

Thank you for reading it 😁

reference document: https://ghostfam.com/en/create-a-table-of-contents-for-ghost

NextAuth with AWS Cognito Email & Google Sign in

dango0812 — Fri, 26 Jan 2024 16:41:19 +0000

Hello, everyone 👋

This document provide information on how to use the Next Auth library to implement email and Google sign in with AWS Cognito.

Sample code: https://github.com/dango0812/nextauth-cognito

Understand content and code written in this document, it is helpful to be familiar with the following.

AWS Cognito is Service Provider
AWS Cognito does not offer direct support for Single Sign-On (SSO) using SAML 2.0 authentication methods. Therefore, if you intend to implement SSO with SAML 2.0, you must use a service such as Microsoft Azure or Okta (Auth0).
The AWS Cognito Provider in NextAuth provide code written using the OpenID Connect authentication method.

NextAuth Cognito Provider Code

export default function Cognito<P extends CognitoProfile>(
  options: OAuthUserConfig<P>
): OAuthConfig<P> {
  return {
    id: "cognito",
    name: "Cognito",
    wellKnown: `${options.issuer}/.well-known/openid-configuration`,
    idToken: true,
    ...
  }
}

You can see that need to input the well-known (openid-configuration) URL related to OpenID Connect.

To confirm more thoroughly, shall we check the internals of the OAuthConfig?

NextAuth OAuthConfig Code

export interface OAuthConfig<P> extends CommonProviderOptions, PartialIssuer {
  wellKnown?: string
  authorization?: string | AuthorizationEndpointHandler
  token?: string | TokenEndpointHandler
  type: "oauth"
  checks?: ChecksType | ChecksType[]
  clientId?: string
  idToken?: boolean
  ...
}

type is oauth and use checks type used in OAuth

If you understand OpenID Connect, you can ascertain that it supports only OAuth functionality.

If you've understood the above content, go ahead and proceed with Google Sign-In using the CognitoProvider written below.

import CognitoProvider from "next-auth/providers/cognito"

CognitoProvider({
    id: 'cognito',
    name: 'Cognito',
    type: 'oauth',
    idToken: true,
    clientId: '',
    // your aws cognito client id
    clientSecret: null,
    // if your AWS Cognito secret exists, input your secret.
    // if the AWS Cognito secret is blank, input null.
    client: {
        token_endpoint_auth_method: "none"
    },
    checks: ['state', 'nonce'],
    issuer: '',
    // your aws cognito issuer
    wellKnown: 'https://cognito-idp.ap-northeast-2.amazonaws.com/####/.well-known/openid-configuration',
    // input your aws cognito userpool id in ####
    authorization: {
        url: '####/oauth2/authorize',
        // input your aws cognito domain url in ####
        params: {
            response_type: "code",
            client_id: '',
            // your aws cognito client Id
            identity_provider: 'Google',
            scope: 'openid email profile aws.cognito.signin.user.admin',
            redirect_uri: '####/api/auth/callback/cognito'
            // your redirect url
        },
    },
    profile(profile, tokens) {
        return { ...profile, ...tokens }
    }
}),

The redirect_uri should be set to api/auth/callback/cognito.

NextAuth handle federated token and user api for AWS Cognito OAuth 2.0.

If that's the case, how should approach email login?

To implement the SAML 2.0 authentication method, you can either access it through the IdP URL provided by another platform or handle the authentication using NextAuth credentials provider with the AWS Cognito library.

CredentialsProvider({
    id: 'credentials',
    name: 'credentials',
    credentials: {
        email: { label: 'email', type: 'text' },
        password: { label: 'password', type: 'password' }
    },
    authorize(credentials) {

        const cognitoUser = new CognitoUser({
            Username: credentials?.email,
            Pool: "",
            // your aws cognito userpool
        });

        const authenticationDetails = new AuthenticationDetails({
            Username: credentials?.email,
            Password: credentials?.password
        });

        return new Promise((resolve, reject) => {
            cognitoUser.authenticateUser(authenticationDetails, {
                onSuccess: (session) => {
                    if (session instanceof CognitoUserSession) {
                        const userInfo = {
                            id: session.getIdToken().payload.sub,
                            email: session.getIdToken().payload.email,
                            name: session.getIdToken().payload.name,
                            idToken: session.getIdToken().getJwtToken(),
                            accessToken: session.getAccessToken().getJwtToken(),
                            refreshToken: session.getRefreshToken().getToken(),
                        };

                        resolve(userInfo);
                    }
                },
                onFailure: (error) => {
                    if (error) {
                        reject(error);
                    }
                }
            })
        })
    },
})

Thank you for reading it 😁

Sample Code:
https://github.com/dango0812/nextauth-cognito

AWS Cognito Service Provider: https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-identity-federation.html

Next Auth CognitoProvider Internal Library: https://github.com/nextauthjs/next-auth/blob/v4/packages/next-auth/src/providers/cognito.ts