DEV Community: Apestein

Complete guide for infinite scroll feature in React🧑‍🍳

Apestein — Sat, 14 Dec 2024 16:07:48 +0000

Intended to be a complete guide to infinite scroll in React. Nothing to install, just copy/paste and customize. Examples with Next.js / Tailwind / Tanstack Query / and Tanstack Virtual. This will be the best repo to reference when implementing an infinite scroll feature in React. Infinite scroll feature can be quite hard, especially for bi-directional scroll and virtual scroll (for very large list) support. I hope this repo can save people some time, let me know what yall think.

Repo
Demo

What is Edge compute? Everything you need to know🧐

Apestein — Sat, 16 Sep 2023 14:00:00 +0000

These are the primary edge compute providers.

Cloudflare Workers
Deno Deploy
Fly.io

There is also AWS lambada@edge which is just lambda function at edge locations, however the runtime is still node and suffers from cold start so it's not worth talking about. All others edge providers just resell edge functions from these providers. For example, Vercel edge is just Cloudflare workers under the hood. Netlify and Supabase edge is just Deno Deploy.

First of all, what exactly is edge compute?

"Edge" can refer to either edge locations(servers close to users) or edge runtime or both. Above I mentioned, AWS's lambda@edge is just node runtime at edge locations. Edge compute offers better performance, faster loads, and cheaper cost when compared to regular serverless functions like lambda/google functions. It's not controversial to say Edge will be the future of cloud compute.

There are 2 category of edge providers.

Edge functions: Cloudflare Workers & Deno Deploy
- Cloudflare Workers and Deno Deploy run on V8 isolate(like your browser) and have their own unique runtime with a limited set of web APIs. These edge functions have zero cold start time. Each instant is like opening a new browser tab and can only handle one request. Functions auto-scale up and down and scale to zero by default. To deploy to edge runtime you must only use supported web APIs. Some tools don't support edge runtime so keep that in mind, prisma for example can't run on edge.
Edge containers: Fly.io
- Fly.io run actual containers. This gives you much more control. You can pick your runtime, read/write to the file system, and even have an embedded SQLite database for insane performance. Containers are much more resource efficient and can handle many request concurrently. Fly's container auto-scale up and down like serverless functions. Fly's container does not scale to zero by default but can be opt-in to do so. They claim to have cold start time of only 100-200ms which is similar to lambda functions.

In general, functions will be cheaper early on while container will become more and more cost efficient as you scale up. Containers can perform many more actions than functions but also require more manual configuration.

Actually, I lied.

Edge does NOT always give you better performance. This depends upon where your database is located. To always get better performance, you need to use an "Edge database". It's exactly as it sounds, distributed database around the globe. Now your edge functions/containers will uses the nearest edge database. The most popular fully-managed edge database is Turso. There is also LiteFS from Fly.io which is an embedded database. Meaning it runs in the same container as your app, this gives you INSANELY low latency, however it's not fully-managed so keep that in mind. Practically speaking, any edge database has to use SQLite. That is because it is extremely cheap to replicate compared to mySQL/PostgreSQL. It's not impossible but just not practical. If you are not using edge database, it is recommended to limit your edge to a single region closest to your database. Technically, it's no longer "edge" but you will still benefit from no cold start and lower cost.

Looking to learn Next.js 13 app router using the latest cutting-edge tech stack? Check out my project. It runs 100% on edge btw.

References

1
2

Like this article? Follow me on X (formerly Twitter) for tech advice and hot takes.

Bleeding-edge Project Using Everything New In Next.js 13📚

Apestein — Tue, 12 Sep 2023 01:25:58 +0000

Project using bleeding-edge stack. Drizzle ORM + Neon postgres + Clerk auth + Shadcn/ui + everything new in Next.js 13 (server components, server actions, streaming ui, parallel routes, intercepting routes). Fully edge runtime deployed. I wrote a breakdown and talked about some tricky / difficult things while building this project. This will be a good reference project for people looking to learn Next.js app router. Project uses 100% server actions and include features such as ability to search show catalog, SaaS subscription service with Stripe, optimistic update, and infinite scrolling.

Repo: https://github.com/Apestein/nextflix

Live: https://nextflix-blush.vercel.app/

How to Publish to NPM the Right Way

Apestein — Sun, 11 Jun 2023 03:42:50 +0000

React Library Starter

Starter template for your next react typescript library. Complete with changeset, tsup, and tailwind with prettier-plugin. Publish to npm the right and easy way.

Setup

Go to npm and create your access token with type of "Publish" or "Automation". Copy the token.
Go to your repo, click on "Settings" => "Secrets and variables" => "Actions" => "New repository secret" then create token named "NPM_TOKEN" and paste token from step 1.
Go to your repo, click on "Settings" => "Actions" => "General" then make sure Workflow permissions is set to "Read and write permissions" and check "Allow Github Actions to create and approve pull requests."

How to use

Create your package in package/index. Then import and test from src/App.

Run pnpm changeset then push to your Github and workflow will create a PR for you to merge. Once you merge, your package will be automatically published to npm.

Or run pnpm release to publish directly from your command line. Remember to login with npm login and update version property in package.json.

Video tutorial from Matt Pocock

If you find this useful, please star this repo on Github. Also, follow me on Twitter for tech advise and hot takes.

PS: Currently looking for a new position, hire me. Check my profile for info.

Easy React Infinite Scroll👌

Apestein — Sat, 10 Jun 2023 00:01:13 +0000

Introduction

I had a hard time implementing a react infinite scroll feature so I decided to make an npm package to make it super simple. If you have ever tried to implement a react infinite scroll feature you might have seen react-infinite-scroll-component and react-finite-scroller. The problem with these packages are:

They are large, which makes them hard to customize.
Written as class component, also hard to customize.
Uses the event listener on the scroll event which is not performant. Mine uses the modern intersection observer API.

Better React Infinite Scroll

NPM
Demo
Source Code

Install or just copy and paste...

import React, { useEffect, useRef } from "react";

interface InfiniteScrollProps extends React.ComponentPropsWithRef<"div"> {
  fetchNextPage: () => any;
  hasNextPage: boolean;
  loadingMessage: React.ReactNode;
  endingMessage: React.ReactNode;
}

export default function InfiniteScroller(props: InfiniteScrollProps) {
  const {
    fetchNextPage,
    hasNextPage,
    loadingMessage,
    endingMessage,
    children,
    ...rest
  } = props;
  const observerTarget = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) {
          void fetchNextPage();
        }
      },
      { threshold: 1 }
    );

    if (observerTarget.current) {
      observer.observe(observerTarget.current);
    }

    return () => {
      if (observerTarget.current) {
        observer.unobserve(observerTarget.current);
      }
    };
  }, [observerTarget]);

  return (
    <div {...rest} style={{ overflowAnchor: "none" }}>
      {children}
      <div ref={observerTarget}></div>
      {hasNextPage && loadingMessage}
      {!hasNextPage && endingMessage}
    </div>
  );
}

How to use: normal scroll

import InfiniteScroller from "better-react-infinite-scroll";

return (
  <InfiniteScroller
    fetchNextPage={fetchNextPage}
    hasNextPage={hasNextPage}
    loadingMessage={<p>Loading...</p>}
    endingMessage={<p>The beginning of time...</p>}
  >
    {elements.map((el) => (
      <div key={el.id}>{el}</div>
    ))}
  </InfiniteScroller>
);

How to use: inverse scroll

For inverse scroll, use flex-direction: column-reverse. Scoller height must be defined. Here we use tailwind flex-1 (flex: 1 1 0%) but height: 300px would also work for example.

import InfiniteScroller from "better-react-infinite-scroll";

return (
  <div className="flex h-screen flex-col">
    <InfiniteScroller
      fetchNextPage={fetchNextPage}
      hasNextPage={hasNextPage}
      loadingMessage={<p>Loading...</p>}
      endingMessage={<p>The beginning of time...</p>}
      className="flex flex-1 flex-col-reverse overflow-auto"
    >
      {elements.map((el) => (
        <div key={el.id}>{el}</div>
      ))}
    </InfiniteScroller>
  </div>
);

Full example with tRPC and React Query (TanStack Query)

import InfiniteScroller from "better-react-infinite-scroll";

//if using with tRPC
const { data, fetchNextPage, hasNextPage } = api.main.getAll.useInfiniteQuery(
  {
    limit: 25,
  },
  {
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  }
);

//if using with React Query (TanStack)
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
  queryKey: ["projects"],
  queryFn: fetchProjects,
  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
});

function aggregatePosts() {
  const pages = data?.pages;
  const posts = pages?.reduce((prev, current) => {
    const combinedPosts = prev.posts.concat(current.posts);
    const shallowCopy = { ...prev };
    shallowCopy.posts = combinedPosts;
    return shallowCopy;
  }).posts;
  return posts;
}

return (
  <>
    <InfiniteScroller
      fetchNextPage={fetchNextPage}
      hasNextPage={hasNextPage}
      loadingMessage={<p>Loading...</p>}
      endingMessage={<p>The beginning of time...</p>}
    >
      {aggregatePosts()?.map((post) => (
        <li key={post.id}>{post.content}</li>
      ))}
    </InfiniteScroller>
  </>
);

tRPC docs
React Query docs

If you find this useful, please star this repo on Github. Also, follow me on Twitter for tech advise and hot takes.

Top 5 Tailwind Component Libraries

Apestein — Fri, 26 May 2023 00:52:50 +0000

Introduction

Why might you want to use a tailwind based component library instead of a something like MUI, Chakra UI, and Mantine? If you are using tailwind, it is best to use a tailwind based component library where you can customize the components with tailwind directly.

5. DaisyUI

Daisy gives you special classes like "btn", "card", etc. These special classes are a combination of other tailwind utility classes. These classes have low specificity so you can easily override them like this:

<button class="btn bg-blue-500">Default</button>

Some people might not agree that I ranked Daisy so low but in my opinion Daisy has some problems:

It does not look professional, the colors are too flamboyant, can you customize it to be more professional? Sure. But it's not professional looking right out the box.
It abstracts how components are created. Basically, when you use the special classes like "btn", you have no idea which tailwind utility classes they are composed of. This is not ideal for learning and customizing, therefore I prefer none-abstracting component libraries.
Components are pure html/css. This just means daisy components are limited in what they can do. Components with Javascript are much more powerful by comparison.

4. Flowbite

Important note, Flowbite has two version, regular Flowbite and Flowbite React. I will only be talking about regular Flowbite and not Flowbite react as I think it's not good. Flowbite is a copy and paste library, meaning you don't need to install anything, like this:

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>

Problem as you can see is that it doesn't support React. So you will need to change "class" to "className" with every paste. Also, it's another pure html/css component library.

3. WindUI

Like Flowbite but better. This component library does support React so just copy and paste. It also looks much more aesthetic in my opinion.

2. Material Tailwind

Very slick and professional looking component library. Unlike the others component libraries before, it does have Javascript and is more powerful in terms of what it can do.

import { Button } from "@material-tailwind/react";

export default function Example() {
  return (
    <Button>Button</Button>;
    <Button size="sm" className="rounded-lg">Button</Button>;
  )
}

And as you can see, you can easily customize the component by writing tailwind utility classes directly. The only "Con" left is abstraction. You cannot see how the component was created and with what tailwind classes.

1. shadcn/ui

A copy and paste component library. Similar to Material Tailwind except with zero abstraction. You can see all the code making up a component and see all the associated CSS. Fully and easily customize all parts of the components. The only possible "Con" is that it's less beginner friendly. Because it gives you complete low level control it might be more intimating for less experienced users.

Honorable Mention: TailwindUI

Official component library from Tailwind Labs. Very good, but is 300$.

PS: Follow me on Twitter for tech hot takes
https://twitter.com/Apestein_Dev

This Tailwind Twitter Drama Could Have Been Avoided😓

Apestein — Sun, 22 Jan 2023 01:00:22 +0000

So this is the tweet that caused the massive Tailwind drama on twitter recently. All because @shadcn decided to breakup tailwind classes and group them into different lines. All because @shadcn didn't know about Prettier plugin for Tailwind CSS

With this plugin, Tailwind classes will be intelligently sorted with every save. Seriously I don't know why they just don't include this plugin with Tailwind by default. Here is the quick summary:

The actual order of the different utilities is loosely based on the box model, and tries to put high impact classes that affect the layout at the beginning and decorative classes at the end, while also trying to keep related utilities together.

Tailwind is honestly magic people. If you haven't tried it, you're missing out. And if you have tried it but didn't like it, try it a little longer.

Intuitive Vim Keybinding For VScode😏

Apestein — Thu, 19 Jan 2023 01:48:57 +0000

Is vim hard to pick up? Well, not anymore with my intuitive keybindings for VScode vim extension.

{
  "vim.normalModeKeyBindings": [
    {
      "before": ["k"],
      "commands": ["cursorDown"]
    },
    {
      "before": ["i"],
      "commands": ["cursorUp"]
    },
    {
      "before": ["j"],
      "commands": ["cursorLeft"]
    },
    {
      "before": ["l"],
      "commands": ["cursorRight"]
    },
    {
      "before": ["h"],
      "after": ["<insert>"]
    },
  ],
  "vim.visualModeKeyBindingsNonRecursive": [
    {
      "before": ["h"],
      "after": ["i"]
    },
    {
      "before": ["i"],
      "after": ["k"]
    },
    {
      "before": ["k"],
      "after": ["j"]
    },
    {
      "before": ["j"],
      "after": ["h"]
    },
    {
      "before": ["h"],
      "after": ["i"]
    }
  ],
}

Now "i" is up, "k" is down, "j" is left, "l" is right and "h" is insert. If you have played any pc games, this movement will feel right at home.

Now some more tips to increase your vim productivity

Rebind capslock to escape. For linux you can use "tweaks" from the Ubuntu Store and for windows you can use "powertoys".

After settings capslock as additional escape in "Tweaks" you must then change keybinding in vscode like below, if you do it in the wrong order it will not work.

[
{
    "key": "capslock",
    "command": "extension.vim_escape",
    "when": "editorTextFocus && vim.active && !inDebugRepl"
  },
]

Rebind Alt + i/k/j/l to navigate in insert mode. Without it, you must exit insert mode before you can navigate. Additionally, Ctrl + k/i to move down/up intellisense menu.

[
  {
    "key": "capslock",
    "command": "extension.vim_escape",
    "when": "editorTextFocus && vim.active && !inDebugRepl"
  },
//allow movement while in insert mode
  {
    "key": "alt+j",
    "command": "cursorLeft",
    "when": "textInputFocus"
  },
  {
    "key": "alt+l",
    "command": "cursorRight",
    "when": "textInputFocus"
  },
  {
    "key": "alt+i",
    "command": "cursorUp",
    "when": "textInputFocus"
  },
  {
    "key": "alt+k",
    "command": "cursorDown",
    "when": "textInputFocus"
  },
//move down/up for intellisense menu
  {
    "key": "ctrl+k",
    "command": "selectNextSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "ctrl+i",
    "command": "selectPrevSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
  },
  {
    "key": "ctrl+k",
    "command": "workbench.action.quickOpenSelectNext",
    "when": "inQuickOpen"
  },
  {
    "key": "ctrl+i",
    "command": "workbench.action.quickOpenSelectPrevious",
    "when": "inQuickOpen"
  },
//move down/up for other list menu
  {
    "key": "k",
    "command": "list.focusDown",
    "when": "listFocus && !inputFocus"
  },
  {
    "key": "i",
    "command": "list.focusUp",
    "when": "listFocus && !inputFocus"
  }
]

This is my entire keybindings.json file. I recommended you copy/paste the whole file.
Repo