DEV Community: Kavin Desi Valli

Master NextJS 13 Data Fetching with this Step-by-Step Guide

Kavin Desi Valli — Mon, 27 Mar 2023 08:32:42 +0000

The release of NextJS 13 brought about a plethora of new and impressive features, with one standout being the updated data fetching and management process. The fetch API replaced the more complicated functions, including getServerSideProps, getStaticProps, and getInitialProps.

Video

If you prefer watching a video, you can check out the Youtube video posted on the same

fetch() API

React recently introduces support for async/await in Server Components. You can now write Server Components using standard JavaScript await syntax by defining your component as an async function and that is what turned out to be a big plus point for NextJS 13.

Server Components

This is all you need to do to fetch data in NextJS now:

import { Post } from "@/lib/types";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

const getPosts = async (): Promise<Post[]> => {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await data.json();

  return posts;
};

export default async function Posts() {
  const posts = await getPosts();
  console.log(posts);

  return (
    <div className={inter.className}>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

The data is no more serialised so you can pass any type of data, including Dates, Maps, Sets, etc.

Also, note the fact that you no longer need to do this on the page level, like if you did before using getStaticProps or getServerSideProps. You can do this inside any component

Client Components

For now, if you need to fetch data in a Client Component, NextJS 13 recommends using a third-party library such as SWR or React Query.

React also introduced the use hook that accepts a promise conceptually similar to await. use handles the promise returned by a function in a way that is compatible with components, hooks, and Suspense.

"use client";

import { Post } from "@/lib/types";
import { Inter } from "next/font/google";
import { use } from "react";

const inter = Inter({ subsets: ["latin"] });

const getPosts = async (): Promise<Post[]> => {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await data.json();

  return posts;
};

export default function ClientPosts() {
  const posts = use(getPosts());

  return (
    <div className={inter.className}>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Static Data Fetching

fetch by default caches the data. So, even if the data from the API changes, when you refresh the page, the site doesn't update the data. This works great for sites which have static data which seldom changes. The example above demonstrates how to do this because it is the same as doing

fetch("https://jsonplaceholder.typicode.com/posts", {
  cache: "force-cache",
});

Dynamic Data Fetching

You can tell the fetch API to never cache the data by changing force-cache to no-cache or no-store(both signify the same in NextJS).

fetch("https://jsonplaceholder.typicode.com/posts", {
  cache: "no-cache"
});

Dynamic Params Data Fetching

Say, you link all the posts to another page /posts/[postId] and fetch the data here once you're in there. You'd do something like this:

// app/posts/[postId]/page.tsx

import { Post } from "@/lib/types";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

// params: {
// postId: aksdjlkjasd
// }

const getPost = async (id: string): Promise<Post> => {
  const data = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await data.json();

  return post;
};

export default async function PostPage({
  params: { postId },
}: {
  params: {
    postId: string;
  };
}) {
  const post = await getPost(postId);
  return (
    <div className={inter.className}>
      <h1>{post.title}</h1>
      <p>Post ID: {postId}</p>
      <p>{post.body}</p>
    </div>
  );
}

Now, this works great, but when you try to build it, look at the response:

It says that /posts/[postId] is server-side rendered at runtime even though /posts is static. This is because NextJS doesn't know what all routes(postIds) exist. So, to enhance this further, you can add this function to the /posts/[postId]/page.tsx page

export const generateStaticParams = async () => {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await data.json();

  return posts.map((post: Post) => ({
    params: {
      postId: post.id.toString(),
    },
  }));
};

This now tells NextJS, that all these postIds exist and we want it to statically generate them at build time if possible. Now, if we try rebuilding the app, this happens

Now, see that /posts/[postId] is static HTML + JSON! And, that would further optimise your app really well.

Revalidating Data

Say, your app is not fully dynamic but still sometimes the data does change, you can add this to your /posts/[postId]/page.tsx page

export const revalidate = 3600; // in seconds

This will tell NextJS to revalidate the data every hour. And the interesting this is, you can do this on the page level as well as the layout level.

You can also do this per fetch by tweaking the fetch call as follows

fetch("https://jsonplaceholder.typicode.com/posts", {
  next: {
    revalidate: 3600,
  },
});

And that is it!

Conclusion

It takes a while to wrap your head around all this, but this is what NextJS does so well and one of the biggest plus points about it, and once you get a hold of it, it's really powerful.

You can find all the code over here

https://github.com/kavinvalli/data-fetching-next13

Do give the video a look if you like that more, and stay tuned for more such posts!

Reference Links

Typewind: The magic of Tailwind combined with the safety of Typescript

Kavin Desi Valli — Wed, 25 Jan 2023 13:10:20 +0000

Well, the people who've read my previous articles know how much I love type-safety, hence someone who loves the t3 stack. Here's Typewind, a typesafe and zero-runtime version of Tailwind CSS, a utility-first CSS framework that can be composed to build any design, directly in your markup.

Origin

The whole thing started with one tweet.

https://twitter.com/stolinski/status/1613699772111638530

Then Colin McDonnell tweeted on what tailwind with type safety and proper autocompletion would look like.

https://twitter.com/colinhacks/status/1615154756204523521

Mokshit, the creator of Typewind, sent me this tweet and both of us, at first look were having confused thoughts but the more and more we saw it, the more and more we started getting convinced of it. Looks like Theo had similar thoughts.

We discussed it for some time and he decided to start working on it. Overnight, he was done with the transpilation part and I was just hovering along with him, looking at the things which were being done understanding only 70% of the things happening.

I started working on the docs and working a little on the tailwind transformers started getting me interested in build tools (probably something I want to give a try in the future).

Fast forward to just a few days later, he was done building the package and I was done setting up the docs and the examples and decided to release. However, we had one issue. We couldn't think of a logo. After playing around for hours with different combinations, I thought of a wavy line under wind but said it looked bad and discarded it. Turns out only the font and the structure of the wavy line was bad cause the final version turned out way better.

He released it overnight and it got a lot more response than we had expected! So here's about Typewind, and how you can get started with it:

Features

Zero runtime
Type-safety and auto-completion
CSS docs based on your config
Apply variants to multiple styles at once
No need for additional editor extensions
Catches errors at compile time

Typewind, generated type definitions on Tailwind classes custom to your app's tailwind.config.js after running the npx typewind generate command.

Typewind has currently been tested to work with Vite (React) and Next.JS and you can find them in the examples.

Getting Started

The installation page in the docs is a very good place to start with Typewind.

Installation

Install via your favourite package manager (npm/yarn/pnpm).

npm install typewind

Generate Type Definitions

npx typewind generate

This will go through your tailwind.config.js and generate types and css docs custom to your app.

Setup with Next.JS

After setting up Tailwind, make the following changes:

Add a .babelrc with the following contents:

{
  "presets": ["next/babel"],
  "plugins": ["typewind/babel"]
}

Add transformer to your Tailwind Config

const { typewindTransforms } = require('typewind/transform');

/** @type {import('tailwindcss').Config} \*/
module.exports = {
  content: {
    files: ['./src/**/*.{js,jsx,ts,tsx}'],
    transform: typewindTransforms,
  },
};

And you're good to go! Just run npm run dev next time and you should be able to use Typewind inside your app.

Setup with Vite

Make the same change in the tailwind.config.js file as mentioned in the NextJS example, but the babel change has to be done in the vite.config.js like so:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({ babel: { plugins: ['typewind/babel'] } })],
});

And, you'll be done setting up Typewind in your Vite application.

Usage

There are a few usage cases, just like in Tailwind and all of them can be found in detail in the documentation, and it would be redundant to write them again in this article. But here's just a trailer to show you what it's capable of:

import { tw } from 'typewind';

export default function App() {
  return (
    <div
      className={tw.flex.items_center.justify_center.h_screen.bg_white.text_["#333"].dark(tw.bg_black.text_white)}>
      <h1 className={tw.text_xl.sm(tw.text_3xl).md(tw.text_4xl).font_bold}>
        Hello World
      </h1>
    </div>
  );
}

Outro

Hope this gets you interested in getting started with Typewind, and gets you to use it in your next project!

https://github.com/mokshit06/typewind

Discord bot which shows your private Advent of Code leaderboard

Kavin Desi Valli — Sat, 03 Dec 2022 12:31:22 +0000

It is December! That means Advent of Code is here! If you don't know what that is:

Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like. People use them as interview prep, company training, university coursework, practice problems, a speed contest, or to challenge each other.

Idea Inspiration

Now, Advent of Code has two kinds of leaderboards. One is the Global Leaderboard where you're competing against the whole world and the other is Private Leaderboards. You can create Private Leaderboards for your class, your club, or a group of friends!

I am a part of a couple of Private Leaderboards and since all of us were on a discord server, I thought why not create a Discord Bot which shows the leaderboard right on the app? And so, I created this discord bot.

Setup

The bot is very easy to set up and get up and running on your server. Follow the instructions on the GitHub README and you will be up and running in no time.

Deployment

To deploy the app on an EC2, GCP Instance, etc. use pm2 like mentioned here.

GitHub

https://github.com/kavinvalli/aoc-private-lb-discord-bot

Check out the GitHub Repository linked above and you will find all the instructions on how to get up and running with the bot.

Feel free to also point out any issues, any PRs are welcome and be sure to star the repo!

Why I think the t3 stack is the next big thing in the JS... oh wait... the TS ecosystem?

Kavin Desi Valli — Sat, 26 Nov 2022 11:44:26 +0000

There is this new stack in the open, the T3 stack, started by Theo, CEO of ping.gg and an ex-Twitch employee. I came across it when I was taking a look at tRPC and was amazed by how efficient, it made me while creating an app. First of all, what is tRPC.

What is the T3 Stack?

Quoting the website, "We made create-t3-app to do one thing: Streamline the setup of typesafe Next.js apps WITHOUT compromising modularity" which is so true. It is a stack which just works out of the box, but is yet so customisable. Just pick what you want to use and get up and running! It consists of:

Next.JS

Ever since I gave Next.JS a try, it has been one of my favourite frameworks to use. I have given so many more React frameworks a try, but Next.JS just works for me.

Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. From routing to API definitions to image rendering, we trust Next.js to lead developers toward good decisions.

tRPC

tRPC is one of the best ways, in my opinion to create a fully typesafe API. API Routes allow us to build fullstack routes easier and faster. There are alternatives like GraphQL CodeGen but they essentially are a build step which generate types based on your GraphQL, which is kind of eh. tRPC just allows you to build it without an intermediate step. The following screenshot from the tRPC website just explains why tRPC.

You can read more about tRPC at trpc.io.

Tailwind CSS

For those, who don't know what Tailwind is, I have a blog post on it and how to get started with tailwind here.

TypeScript

TypeScript isn't optional in the T3 stack and it is probably one of the best things. Once you give TypeScript a try, you will not be able to go back to Javascript. You will blow your head off trying to find the right data to pass into a function, or trying to find why and where you have an error in your app because it is the wrong type.

Typesafety makes you faster. If youre not convinced, you might be using TypeScript wrong

Prisma

Prisma is one of the best database adapters for TypeScript out there. It just makes it so easy to work with SQL. It generates all the types for you as well which is a big plus point, as it guarantees and continues the T3 Axiom of end-to-end typesafety from your database to your app. It also provides an awesome GUI called the Prisma Studio.

NextAuth

Next Auth makes it very easy to plugin authentication into your NextJS application. It comes with many adapters which just work for you out of the box and is very simple to work with Prisma.

Why I recommend the T3 stack?

First of all, type safety. TypeScript was a huge revolution when it came out in 2012 because of this reason. It just make you so much faster and efficient if you start using it right. The autocompletes, the hover documents, the red squiggly lines just make it much much easier to write code.

create-t3-app makes it easier to manage the modularity and simplivity in code while starting off. It just doesn't add everything.

Everything added to create-t3-app should solve a specific problem that exists within the core technologies included. This means we wont add things like state libraries (zustand, redux) but we will add things like NextAuth.js and integrate Prisma and tRPC for you.

Resources to get started with the T3 stack

References

How to implement dark mode using TailwindCSS?

Kavin Desi Valli — Wed, 23 Mar 2022 02:41:31 +0000

Dark mode is something which has gained a lot of popularity in the last few years. Many popular websites are also implementing a dark mode on their website. However, dark mode can be a pain to setup if your css isn't well structured. Tailwind makes it very easy and instinctive to implement it. In this article, I'm going to go over how you can implement dark mode using Tailwind CSS.

Prerequisites

You should have a basic knowledge of Tailwind CSS.
You should know a little Javascript to understand how the theme toggle works.

Setup

Let's start by setting up a tailwind project. You also use bundlers like parcel, and this can also be used with any framework. Just setting up tailwind will be different and you can check that out here. I will be using it using npm without any bundler and with just HTML.

Create folder

mkdir dark-mode-tailwindcss
cd dark-mode-tailwindcss
npm init -y

You will see something like this

Install Tailwind

npm i -D tailwindcss

Setup Tailwind

npx tailwindcss init

Open tailwind.config.js and make the following change:

- content: [],
+ content: ['./**/*.html'],

This will look for all html files and look for tailwind classes through them. Now, let's create an html file to start off with

touch index.html

When to use Dark Mode?

Now, tailwind supports two ways of using Dark Mode. One is prefers-color-scheme and one is using classes. So, the way the former works is, if the users system's preferred mode is dark mode then it'll use dark mode else will use light mode. In the class based mode, it will be applied when the dark class is applied to any element before the current element in the tree. In this article, I'll be using classes just to demonstrate how to toggle between them, but feel free to use any. Not that prefers-color-scheme mode is used by default. To use class based mode you need to add the following line in tailwind.config.js

module.exports = {
+ darkMode: 'class',
   ...
}

Setup tailwind css file

Create a src directory with the tailwind css file

mkdir -p src/css
touch src/css/tailwind.css

and add the following contents to it

@tailwind base;
@tailwind utilities;
@tailwind components;

Setup css build commands

In your package.json make the following changes

...
  "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "css:build": "tailwindcss -i src/css/tailwind.css -o dist/css/tailwind.css",
+ "css:watch": "tailwindcss -i src/css/tailwind.css -o dist/css/tailwind.css --watch"
  },
...

And then run

npm run css:watch

Setup html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./dist/css/tailwind.css" />
    <title>Tailwind Dark Mode</title>
  </head>
  <body>

  </body>
</html>

Now, this will be our starting point to the html. I've added the stylesheet which points to the compiled css generated by the Tailwind CLI.

I'm gonna setup a basic html site like so:

  <body>
    <div
      class="h-screen w-full bg-gray-100 dark:bg-gray-800 flex justify-center items-center"
    >
      <div class="bg-white text-gray-800 rounded-lg p-4 text-center">
        <h1 class="text-2xl font-bold">Tailwind Dark Mode</h1>
        <p>This is a demo of Tailwind CSS Dark Mode.</p>
      </div>
      <button
        class="absolute bottom-5 right-5 w-10 h-10 rounded-full bg-gray-800 flex justify-center items-center text-white"
        id="theme-toggle"
      >
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z"
            fill="currentColor"
          />
        </svg>
      </button>
    </div>

    <script src="./src/js/index.js"></script>
  </body>

Should show you something like this:

I'm using the serve package by Vercel to serve my html. Just run npx serve from your project directory.

Javascript

We'll be needing a little bit of javascript to manage the dark mode. Add this in the index.html file:

...
+ <script src="./src/js/index.js"></script>
  </body>
...

Now, create an index.js file

mkdir src/js
touch src/js/index.js

Add the following to the index.js file.

const themeToggleButton = document.getElementById("theme-toggle");

const MOON_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z" fill="currentColor" /></svg>`;
const SUN_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V4.06189C12.6724 4.02104 12.3387 4 12 4C11.6613 4 11.3276 4.02104 11 4.06189V0ZM7.0943 5.68018L4.22173 2.80761L2.80752 4.22183L5.6801 7.09441C6.09071 6.56618 6.56608 6.0908 7.0943 5.68018ZM4.06189 11H0V13H4.06189C4.02104 12.6724 4 12.3387 4 12C4 11.6613 4.02104 11.3276 4.06189 11ZM5.6801 16.9056L2.80751 19.7782L4.22173 21.1924L7.0943 18.3198C6.56608 17.9092 6.09071 17.4338 5.6801 16.9056ZM11 19.9381V24H13V19.9381C12.6724 19.979 12.3387 20 12 20C11.6613 20 11.3276 19.979 11 19.9381ZM16.9056 18.3199L19.7781 21.1924L21.1923 19.7782L18.3198 16.9057C17.9092 17.4339 17.4338 17.9093 16.9056 18.3199ZM19.9381 13H24V11H19.9381C19.979 11.3276 20 11.6613 20 12C20 12.3387 19.979 12.6724 19.9381 13ZM18.3198 7.0943L21.1923 4.22183L19.7781 2.80762L16.9056 5.6801C17.4338 6.09071 17.9092 6.56608 18.3198 7.0943Z" fill="currentColor" /></svg>`;

let theme = localStorage.getItem("T_SITE_THEME") || "light";
theme === "light" ? setLightTheme() : setDarkTheme();

function setDarkTheme() {
  document.body.classList.add("dark");
  themeToggleButton.innerHTML = SUN_SVG;
  localStorage.setItem("T_SITE_THEME", "dark");
  theme = "dark";
}

function setLightTheme() {
  document.body.classList.remove("dark");
  themeToggleButton.innerHTML = MOON_SVG;
  localStorage.setItem("T_SITE_THEME", "light");
  theme = "light";
}

themeToggleButton.addEventListener("click", () => {
  if (theme === "light") {
    setDarkTheme();
  } else {
    setLightTheme();
  }
});

Ok, so let's go over this file and what it is doing.

On line 1 - We're querying the toggle theme button from the dom
On line 3 and 4 - We're setting two constants which correspond to a Moon SVG and a Sun SVG. This will be shown inside the toggle button.
On line 5 - I'm setting a theme variable. Now, I'm querying from the localStorage the site's theme. If it exists, that means the user has already visited the website before and they have some preference. If not, set it to light by default. You can use dark if you want.
On line 6 - Based on the theme, i'm either setting dark mode or light mode.
In the setDarkTheme function - I'm first of all, adding the dark class to the body. This is essential for tailwind to understand that the user is using dark mode. Then, I'm changing the SVG inside the toggle button to that of a Sun. After that, we're resetting the value of our theme in the localStorage to dark and we're also resetting the value of the theme variable to dark.
In the setLightTheme function - We're doing everything opposite to that in the setDarkTheme function.
From lines 17 to 23 - We're handling the click event on the toggle theme button and setting dark mode or light mode accordingly.

Tailwind `dark` variant.

Now, how do we tell Tailwind to use which class in dark mode and which class in light mode? We do that using the dark variant which it provides us. For example, in the first div element on the page (just below the body tag), add this class:

- <div class="h-screen w-full bg-gray-100 flex justify-center items-center">
+ <div class="h-screen w-full bg-gray-100 dark:bg-gray-800 flex justify-center items-center">

And checkout what happens when you refresh the site on the browser and click on the toggle theme button!

Notice the changes:

The background color changes.
If you inspect the body element, you will see a dark class on it.
The localStorage T_SITE_THEME value changes to dark
The svg inside the toggle theme button changes

Now, click on the button again:

Let's make a few changes in out html now:

- <div class="bg-white text-gray-800 rounded-lg p-4 text-center">
+ <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg p-4 text-center">


- <button class="absolute bottom-5 right-5 w-10 h-10 rounded-full bg-gray-800 flex justify-center items-center text-white" id="theme-toggle">
+ <button class="absolute bottom-5 right-5 w-10 h-10 rounded-full bg-gray-800 dark:bg-gray-900 flex justify-center items-center text-white" id="theme-toggle">

Now your html should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="dist/css/tailwind.css" />
    <title>Tailwind Dark Mode</title>
  </head>
  <body>
    <div
      class="h-screen w-full bg-gray-100 dark:bg-gray-800 flex justify-center items-center"
    >
      <div
        class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg p-4 text-center"
      >
        <h1 class="text-2xl font-bold">Tailwind Dark Mode</h1>
        <p>This is a demo of Tailwind CSS Dark Mode.</p>
      </div>
      <button
        class="absolute bottom-5 right-5 w-10 h-10 rounded-full bg-gray-800 dark:bg-gray-900 flex justify-center items-center text-white"
        id="theme-toggle"
      >
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z"
            fill="currentColor"
          />
        </svg>
      </button>
    </div>

    <script src="./src/js/index.js"></script>
  </body>
</html>

and the site like this:

Beginner's guide to useEffect hook in React

Kavin Desi Valli — Sun, 13 Mar 2022 09:35:33 +0000

A few days ago, I wrote an article on how to use the useState hook. Another important hook provided by React is the useEffect hook. Now, if you've used React Class based Components, then useEffect will help you replace functions like componentDidMount, componentDidUpdate, etc.

Prerequisites

Basic knowledge of ReactJS

How to use?

useEffect takes in two arguments. A function, and an array of dependencies like so:

useEffect(function, [dependencies])

Let's start with the function argument

Function Argument

Let's use the example I used in the useState article.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(1);

  function incrementCount() {
    setCount(count + 1);
  }
  return (
    <div>
      <h1>Hello, World</h1>
      <p>{count}</p>
      <button onClick={incrementCount}>Increase counter</button>
    </div>
  );
}

export default App;

Will give you something like this:

Now make these code:

- import { useState } from "react";
+ import { useState, useEffect } from "react";
...
    const [count, setCount] = useState(1);
+ useEffect(() => {
+ console.log("useEffect running");
+ });
...

Now, go to the browser, refresh the page, open up dev tools and move to console window

Looks like it's working! But WAIT. Try clicking on the button and notice what happens:

The useEffect ran again. This is because by default, useEffect runs on every single render. When you update the state, you're basically re-rendering the component, so the useEffect runs again. This might be useful in some cases.

Replacement for `componentDidMount`

What if you want to run it only when the component mounts for the first time (like componentDidMount did). This is where the dependency argument comes into play. Make this change

- useEffect(() => {
- console.log("useEffect running");
- });
+ useEffect(() => {
+ console.log("useEffect running");
+ }, []);

You're passing in an empty array of dependencies. This basically means, run the useEffect loop only on first render.

There is however still one difference between this and componentDidMount. useEffect(fn, []) runs after the first render to the DOM whereas componentDidMount runs after "mounting" the component but before it is actually rendered(shown) in the DOM.

Run depending on a value

What if you want to run useEffect when a certain value changes. For eg. add this

  const [count, setCount] = useState(1);
+ const [isDark, setIsDark] = useState(false);
...
   <button onClick={incrementCount}>Increase counter</button>
+ <button onClick={() => setIsDark(!isDark)}>Toggle isDark</button>

Let's take that counter p tag to a different component for demonstration purposes

function Counter({count}) {
  return <p>{count}</p>;
}


...
<div>
   <h1>Hello, World</h1>
- <p>{count}</p>
+ <Counter count={count} />
...

Now say, on the Counter function, you want to take the isDark prop and every time it changes we want to send out a console.log saying that the isDark prop has changed. First let's take the prop

- <Counter count={count} />
+ <Counter count={count} isDark={isDark} />
...
- function Counter({ count }) {
+ function Counter({ count, isDark }) {

Now, if we add a useEffect hook like this:

  function Counter({ count, isDark }) {
+ useEffect(() => {
+ console.log("isDark value changed")
+ }, [isDark])

Now, you will see a console.log everytime you click on the Toggle isDark button but notice that if you click on Increase Counter, you won't see a console.log because now the useEffect runs only when the isDark value changes and not on every render like we saw before!

So, that's it for this article. Hope you take something back from this article. There's a little more to useEffect like cleaning up functions which you can read about here.

The final code for this is as follows:

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(1);
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    console.log("useEffect running");
  }, []);

  function incrementCount() {
    setCount(count + 1);
  }
  return (
    <div>
      <h1>Hello, World</h1>
      <Counter count={count} isDark={isDark} />
      <button onClick={incrementCount}>Increase counter</button>
      <button onClick={() => setIsDark(!isDark)}>Toggle isDark</button>
    </div>
  );
}

function Counter({ count, isDark }) {
  useEffect(() => {
    console.log("isDark value changed");
  }, [isDark]);
  return <p>{count}</p>;
}

export default App;

Beginner's guide to useState hook in React

Kavin Desi Valli — Thu, 10 Mar 2022 10:07:53 +0000

A key component of a web application is the state. Taken directly from the beta(new) version of the ReactJS Docs:

Think of state as the minimal set of changing data that your app needs to remember. For example, if you’re building a shopping list, you can store the items as an array in state.

Now, how do we manage state inside a React Component? So, in this tutorial we'll be talking just about that!

Prerequisites

Basic knowledge of ReactJS

What are React Hooks?

First, let's start with what is a React Hook. The beta docs of ReactJS says the following:

Functions starting with use are called Hooks. useState is a built-in Hook provided by React. You can find other built-in Hooks in the React API reference. You can also write your own Hooks by combining the existing ones. Hooks are more restrictive than regular functions. You can only call Hooks at the top level of your components (or other Hooks). If you want to useState in a condition or a loop, extract a new component and put it there.

So basically, if you know a little history about React, you would know that React used to be mainly comprised of something called Class-Based Components. But now, the community is starting to move to Function-Based Components. Now, React Hooks allow the functional components to have access to state and other React Features.

Setting up the app

Create a project using the following command

npx create-react-app react-hooks-tutorial

Then edit your src/App.js to look like this

function App() {
  return (
    <div>
      <h1>Hello, World</h1>
      <p>1</p> // this will update based on the state after this tutorial
      <button>Increase counter</button>
    </div>
  );
}

export default App;

`useState` hook

Now, the way the useState hook is used in React is very interesting. In a conventional, class based component you'd do something like this

state = {
    color: "red"
}

and then access it via this.state. But using the useState hook you'd do something like this

+ import { useState } from "react"
  function App() {
+ const [count, setCount] = useState(1);
    return (

Now the useState hook returns two things:

The first variable is the actual state variable. For eg. count in this case is 1.
setCount is a function which you can use to change the value of the count state.

Using the count state variable to show data

First, update the hardcoded value of 1 with the count variable like so

       <h1>Hello, World</h1>
- <p>1</p>
+ <p>{count}</p>
       <button>Increase counter</button>

Using setCount to update state

Now to make this work, let's make the click of the button increase the count variable by 1.

       <p>{count}</p>
- <button>Increase counter</button>
+ <button onClick={() => setCount(count + 1)}>Increase counter</button>

Using previous state to update state

Now, let's try something. Change the button line to the following

- <button onClick={() => setCount(count + 1)}>Increase counter</button>
+ <button onClick={incrementCount}>Increase counter</button>


  const [count, setCount] = useState(1);
+ function incrementCount() {
+ setCount(count + 1);
+ setCount(count + 1);
+ setCount(count + 1);
+ }

Now this will give you an issue. Straight from the docs again (little modified according to our app):

This is because calling the set function does not update the count state variable in the already running code. So each setCount(count + 1) call becomes setCount(2).

To fix this issue, you can reference the previous state and then update the current state using that. So change your code like this

- function incrementCount() {
- setCount(count + 1);
- setCount(count + 1);
- setCount(count + 1);
- }
+ function incrementCount() {
+ setCount((prevCount) => prevCount + 1);
+ setCount((prevCount) => prevCount + 1);
+ setCount((prevCount) => prevCount + 1);
+ }

So, you get the prevCount argument and increment the current state according to that and this should work!

Note: This is obviously not a real life scenario. To increment by 3, you'd probably do something like setCount(count+3) but it's good to know when you can use the previous state variable as a reference.

That is it for this tutorial! You final code should look like this:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(1);
  function incrementCount() {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  }
  return (
    <div>
      <h1>Hello, World</h1>
      <p>{count}</p>
      <button onClick={incrementCount}>Increase counter</button>
    </div>
  );
}

export default App;

Deploying a static HTML and CSS site using Github Pages

Kavin Desi Valli — Mon, 07 Mar 2022 13:45:16 +0000

The next step after creating a website, is deploying it to make it available to the whole world. If your site is static, and doesn't use any backend then it is pretty straightforward to deploy your app. In this article, I'm gonna talk about how to deploy a static HTML and CSS site using Github Pages.

Register at Github

First of all create an account at Github. Github is a Git repository hosting service which is owned by Microsoft. It provides a great feature called Github Pages and can be used to deploy static sites.

Create a Github Repository

After registering, click on the button which says New on the top left of the page.

Upload files

If you know git, you're welcome to push your files to Github. Else, no worries, you can use Github's file upload feature like so:

Enable Github Pages

Last step is to enable Github Pages like so:

Click on Settings
Click on Pages
Click on Branch and choose master

This might be main depending on the default branch you're working on

Click on the button on the right of Branch and choose / (root)
Click on Save

Then wait for some time and then refresh. Wait till you see a banner which says something like this:

And there it is! You've deployed your site using Github Pages. For example, you can view the sample deployment here.

Links

You can find the sample github repository in the example here:

https://github.com/kavinvalli/gh-pages-tutorial

I built a Link shortener using Remix and here's my experience!

Kavin Desi Valli — Sat, 05 Mar 2022 15:24:55 +0000

A few days ago, I decided to try out RemixJS and tried building a link shortener using it... cause if I create one more Todo List app, I'll lose my mind. Here's my experience of using Remix till now.

What is Remix?

Well, let me start with what Remix is. If you've used ReactJS before, you'd most probably have come across React Router. Around a couple years ago, the founders of React Router decided to create a React framework on top of React Router. It originally needed a license, but last year, they decided to go open source! So now, it is something anyone can access.

More about Remix?

I started following Kent C. Dodds, who is a part of the remix team, and he has a lot of livestreams where he talks about remix, and has a couple videos which really pushed me to try out remix. I highly recommend subscribing to his Youtube Channel and he has an amazing Website also built using remix. It's amazing if you go through it, and you can find a really good video on it by Kent here.

About the Link shortener

I decided to try Remix out by creating a Link shortener, because that was something simple yet I could experiment with concepts like authentication, data fetching and all that fancy stuff. You can find the code here. First, I went through the tutorials on Remix's docs which is a really good resource on starting with remix.

Authentication

Then, I started off and decided to use Github for authentication. Now, I didn't want to implement Github OAuth by myself and didn't want to go through the work of having to manage tokens in the app, so I decided to use Remix Auth. It works really really well with Remix and has support for a lot of strategies). It took me a little while to get started with it cause, it doesn't really have good docs at the time but the examples were helpful. Now, the docs have improved a lot and you should be good to go pretty soon.

Core Concepts

The Jokes tutorial covered most of the concepts I needed to build the url shortener. So, it didn't take me too long to complete the app. All the concepts, including db interaction, data fetching, form validation and submission was already stuff I'd read about in the tutorial so I would recommend going through that to get started with Remix.

Conclusion

In the end, I had a great time getting started with Remix and I think it's definitely something I'll use more in the future.

Make sure to star the repo below and would love to know your experience with Remix after you give it a go in the comments! You're welcome to use the shortener for your use!

https://github.com/kavinvalli/remix-url-shortener

Start a web server with Node.JS and Express

Kavin Desi Valli — Thu, 03 Mar 2022 04:48:55 +0000

Node.JS and Express are two of the most used technologies in the web development world right now. It powers some big sites like Paypal, Wall Street Journal, Shutterstock and a lot more.

Getting started with Node.JS and Express is very easy.

Requirements

You should have Node.JS installed for this tutorial. If not, visit https://nodejs.org/en/ and download the LTS Version. This will also install npm which is a widely used package manager for Node.JS.
You're also expected to have a basic knowledge of Javascript and Node.JS.

Creating a project

First, let's start off with creating a Node.JS project/directory. You can run the following two commands on the the terminal. Alternatively, you can create a folder from your file manager and open it in VS Code or any other code editor of your choice.

mkdir node-express-tutorial
cd node-express-tutorial
code . # for Visual Studio Code users

Configuring the folder to use npm

Run the following in the terminal.

npm init

You will be prompted with a few questions. You can press enter through most of them.

Alternatively, you can run npm init -y if you want to skip through all the questions with the default value.

Starting with the coding part

So, start with creating a file named index.js. You can name it anything, just make sure you end it with .js.

Conventionally, the file is named index.js, server.js or app.js.

Installing express

Like most NodeJS packages, you can install express using npm. Run:

npm install express

This will add express as a dependency in your package.json and also install it in your node_modules folder.

Using express

In your index.js file, write the following:

const express = require("express")

If you've used Node.JS before, this should look familiar. This line basically imports the express package. Now, to use express, you need to instantiate the imported function. So:

const express = require("express")
const app = express() // add this line

Now, you can use the app variable to start the server like so:

app.listen(3000, () => {
    console.log(`🚀 Server started on port 3000`)
}

You've basically already created a web server. You can run the app by running

node index.js

If you get something like in the above gif, you're good to go to the next step!

Routes

So now, we've started an express server but it doesn't know what it has to do when we're visiting the / route. Hence we get the error:

For this, add the following line of code before calling the app.listen function:

app.get('/', (req, res) => {
    return res.send("Hello, World")
})

Let's go through this code:

We call the app.get function. This takes in two parameters:
1. A route: The route on which you want to run this function. In this case we're using the / route.
2. A callback function: The second parameter is a callback function with the request and response parameters which express provides us with. The res(response) gives us a send function with which we can send back a text response to the browser.

Now, we need to restart the NodeJS server running. Go to the terminal where you had run node index.js and then hit Control-C. And then restart by typing node index.js again like so:

BONUS: Restarting the node server repeatedly becomes very annoying. To deal with this, there's a package called nodemon which you can install and setup. For detailed instructions visit: https://livecode247.com/how-to-add-auto-reload-to-your-node-js-app

Now, refresh the page on the browser and you should see this:

For the final step, you can refactor the port number like this

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`🚀 Server started on port ${port}`);
});

process.env.PORT returns the PORT environment variable which is set in many hosting providers so it is a good practice to use that instead of hardcoding a port. We're saying that if it doesn't exist, use port 3000.

Final Code

Your final code in index.js should look like this:

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  return res.send("Hello, World");
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`🚀 Server started on port ${port}`);
});

That's it for this tutorial! Now express has a lot more stuff to offer you. Just yesterday, MDN released it's new website and I found a very good in-depth tutorial on express. Do check it out here.

My Developer Setup in 2022!

Kavin Desi Valli — Tue, 22 Feb 2022 16:09:47 +0000

I'm very excited for this article because I'm going to show you guys my developer setup! So, my developer setup is something which has evolved in the past few years. I've switched through editors, IDEs, browsers, etc. and this is what I use now. This might change in a few days/months/years too... who knows!

Hardware

M1 Macbook Air 2020 with 256GB storage and 8GB RAM with an external 27-inch monitor.

Editor

The editor I generally use is Neovim. So, most of you would have heard of Vim. Neovim started as a fork of Vim and has some really good features over vim. Recently, Neovim also released support for Native Language Servers. The reason I use Neovim over editors like, VS Code and Sublime Text is primarily cause of the speed. This includes, speed of Neovim as an editor, comprising of startup time, less lagging, etc, and that also includes my speed as a developer. Vim might seem pretty daunting when you start with it, but when you get the hang of it, you'd want to use it everywhere. And I'm a big keyboard-only fan. So, the fact that I don't have to touch my mouse while writing code is a big plus point.

However, I do use Visual Studio Code when collaborating with others in real time using the Live Share extension. And guess what! I use vim keybindings inside VSCode as well using the Vim extension.

Though, Neovim does have a few minus points to it

You'll have to learn vim
You'll have to spend some time customising neovim to suit your needs, and setup plugins for autocomplete, LSPs etc.

If you're a beginner, I highly recommend starting with VSCode and maybe use the vim extension if you want to start learning vim.

Terminal Setup

I am a person, who's always on my terminal, especially cause of the fact that I use neovim as my primary code editor. I use iTerm2 but I've heard of Kitty and Alacritty as pretty good alternatives.

I also use tmux heavily in my workflow. I use multiple tmux sessions for every project and recommend a lot of people to use it.

I use the fish shell. It has some great features which you can find on the website which lead me to use it over zsh and bash.

I use GNU Stow to manage my configurations.

You can find my dotfiles in the repo linked below.

kavinvalli / dotfiles

A bunch of dotfiles to setup neovim, tmux, fish, etc.

Kavin's .dotfiles

Stuff I Use

Note: all these have to be installed

iTerm2 - Terminal
fish - Shell
neovim - Editor
tmux - Terminal Multiplexer

Dependencies

Install the following too

ohmyfish - Makes it easier to extend fish with plugins
vim-plug - Plugin Manager for Neovim
tpm - Plugin Manager for Tmux
GNU Stow - Symlink manager

Some more optional dependencies for some fish functions

dotco - A URL Shortener with Vercel and Airtable
Github CLI - Github CLI
- Get the delete repo permission by doing gh auth login -s delete_repo

Setup

Install the dependencies above
Backup old dotfiles if you have any

mv ~/.dotfiles ~/.dotfiles.bak

Clone this repo

git clone https://github.com/kavin25/dotfiles.git
cd ~/.dotfiles

Change Airtable env vars for dotco-cli

cp docs/url-env-example.sh scripts/url-env.sh

Symlink with Stow

stow */

Install some Nerd Font - for some icons and stuff

Credits

dotco - A URL Shortener with Vercel…

View on GitHub

So that's it for this post. I might post an article specific to my Neovim Configuration and how I manage my dotfiles in the recent future.

Checkout more of my articles at my blog

RITA - Batteries included starter for Adonis apps

Kavin Desi Valli — Mon, 13 Dec 2021 12:29:20 +0000

People who've tried Laravel would know how easy it makes lives of developers. Then, came in AdonisJS which is essentially just Laravel for Typescript developers. I've used both for a while now and love not having to go through long processes of setting up codebases from scratch.

One of my seniors, told me about Inertia and we used it for a couple of projects with Laravel and it was amazing to be able to use Laravel with React. Essentially, Inertia is just a connector / glue between server-side and client-side frameworks.

With Inertia you build apps just like you've always done with your server-side web framework of choice. You use your framework's existing functionality for routing, controllers, middleware, authentication, authorization, data fetching, and more.

The only thing that's different is your view layer. Instead of using server-side rendering (eg. Blade or ERB templates), the views are JavaScript page components. This allows you to build your entire front-end using React, Vue or Svelte.

By using Inertia, I was able to pass data from my server side framework (Laravel) to my client side framework (ReactJS) as props which made it super easy to work with data since I had to no longer do the work of fetching data from REST or GraphQL APIs.

My senior created LIRET which uses Laravel and React with Inertia as an adapter with more features out of the box.

I finally came across inertia-adonisjs which is a Inertia.js AdonisJS Provider.

I recreated the LIRET stack but with AdonisJS and then came up RITA

RITA is a batteries-included starter for Adonis apps. The full form of Rita is React Inertia Typescript Adonis.

Features

Backend

AdonisJS
Database (MySQL but you can change it very easily)
Authentication
- Email-Password
- Github
- Gmail
- You can also add other providers very easily
Admin Authorisation with Middleware support

Frontend

Frontend with React and Typescript
TailwindCSS setup
Some built in components/hooks like useTitle and TextInput for simplicity
Built in components for Authorisation validation like <Admin>, <User>, <Authenticated> and <Guest>

Using Inertia as a connector.

There are a few more features and you can find detailed instructions at the Readme.

Give the repo a star if you like it!

https://github.com/kavinvalli/rita

DEV Community: Kavin Desi Valli

Master NextJS 13 Data Fetching with this Step-by-Step Guide

Video

fetch() API

Server Components

Client Components

Static Data Fetching

Dynamic Data Fetching

Dynamic Params Data Fetching

Revalidating Data

Conclusion

Reference Links

Typewind: The magic of Tailwind combined with the safety of Typescript

Origin

Features

Getting Started

Installation

Generate Type Definitions

Setup with Next.JS

Setup with Vite

Usage

Outro

Discord bot which shows your private Advent of Code leaderboard

Idea Inspiration

Setup

Deployment

GitHub

Why I think the t3 stack is the next big thing in the JS... oh wait... the TS ecosystem?

What is the T3 Stack?

Next.JS

tRPC

Tailwind CSS

TypeScript

Prisma

NextAuth

Why I recommend the T3 stack?

Resources to get started with the T3 stack

References

How to implement dark mode using TailwindCSS?

Prerequisites

Setup

Create folder

Install Tailwind

Setup Tailwind

When to use Dark Mode?

Setup tailwind css file

Setup css build commands

Setup html

Javascript

Tailwind dark variant.

Beginner's guide to useEffect hook in React

Prerequisites

How to use?

Function Argument

Replacement for componentDidMount

Run depending on a value

Beginner's guide to useState hook in React

Prerequisites

What are React Hooks?

Setting up the app

useState hook

Using the count state variable to show data

Using setCount to update state

Using previous state to update state

Deploying a static HTML and CSS site using Github Pages

Register at Github

Create a Github Repository

Upload files

Enable Github Pages

Links

I built a Link shortener using Remix and here's my experience!

What is Remix?

More about Remix?

About the Link shortener

Authentication

Core Concepts

Conclusion

Start a web server with Node.JS and Express

Requirements

Creating a project

Tailwind `dark` variant.

Replacement for `componentDidMount`

`useState` hook