DEV Community: Jumbo Daniel

Filtering Nested Data in Tanstack Table

Jumbo Daniel — Thu, 06 Mar 2025 13:57:32 +0000

When working with TanStack Table, filtering over nested data, we are faced with a unique issue. About 9 out of 10 times, our data for tables comes directly from a backend API, and while the table’s default behavior is simple for flat structures, handling deeply nested properties works differently.
⁠
⁠Let's look through this code first
⁠
⁠Imagine we are fetching from our api, the goal is to populate our table with customers payment data
We can write our type based on the response

export type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

//then we define our columns 
export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: "Status",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "amount",
    header: "Amount",
  },
];
We can write the ui using the table properties, and then add a search:⁠
         <Input
          placeholder="Filter nin status..."
          value={
            (table.getColumn("nin-status")?.getFilterValue() as string) ?? ""
          }
          onChange={(event) =>
            table.getColumn("nin-status")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />

⁠Still simple and straightforward but our challenge lies in filtering over nested data
Understanding Column IDs in TanStack Table
By default, the column ID is determined as follows:

accessorKey: Uses the provided key directly as the ID. { accessorKey: "status", header: "Status" } // ID: "status"
accessorFn: Derives the ID from the header (converted to lowercase, spaces replaced with underscores). {accessorFn: (row) => row.creator?.email header: "Creator Email" // ID: "creator_email"}
Explicit id: Uses the manually provided ID. { id: "nin_status", header: "NIN Status" }// ID: "nin_status" So accessorKey > accessorFn > id

accessorKey: Uses the provided key as the ID.
accessorFn: Defaults to deriving the ID from the header (typically lowercased with underscores) unless an ID is explicitly provided.
Explicit id: Always uses the provided ID, giving you full control.

The Challenge: Nested Data

When fetching data from a backend, you might deal with nested objects. For example, consider the following type:

export type CustomerType = {
  id: number;
  token: string;
  name: string;
  created_at: string;
  status: string;
  creator?: {
    email: string | null;
    phone_number: string | null;
    bvn_verification_status: string | null;
    nin_verification_status: string | null;
    paystack_wallet_total: string | null;
    first_name: string | null;
    last_name: string | null;
  } | null;
};

When filtering nested data in TanStack Table, two things to look out for:

Column IDs ≠ Nested Paths: Filters rely on column IDs, which don’t automatically resolve nested paths like creator.email.
Dot Notation Traps: Using accessorKey: "creator.email" displays data but breaks filtering (searches for literal row["creator.email"]).

1. Dot Notation Accessor (Simple but Limited)

{
  accessorKey: "creator.email", // Auto-flattens data
  header: "Creator Email",
}

We might be tempted to use this solution but it doesnt work as well. While dot notation in accessorKey (e.g., "creator.email") displays nested data correctly, TanStack Table’s default filtering doesn’t automatically traverse nested objects. The filter looks for literal top-level keys like "creator.email" in your data (which don’t exist), rather than following the nested path creator → email. You’d need a custom filterFn to handle this (which isn’t set up by default).

2. Accessor Function + Explicit ID (Recommended)

 {
    id: "nin-status",
    accessorFn: (row) => row.creator?.nin_verification_status ?? "",
    header: "Status",
    cell: ({ row }) => {
      return <div>{row.original.creator?.nin_verification_status}</div>;
    },
  },
//then filter here
        <Input
          placeholder="Filter nin status..."
          value={
            (table.getColumn("nin-status")?.getFilterValue() as string) ?? ""
          }
          onChange={(event) =>
            table.getColumn("nin-status")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />

3. Explicit ID (Simplest)

{
    accessorKey: "creator.first_name",
    id:"firstname"
    header: "Firstname",
  },
//then filter here 
        <Input
          placeholder="Filter nin status..."
          value={
            (table.getColumn("firstname")?.getFilterValue() as string) ?? ""
          }
          onChange={(event) =>
            table.getColumn("firstname")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />

Conclusion

Filtering nested data in TanStack Table requires understanding how column IDs map to your data structure. While the accessorKey dot notation might seem tempting for nested properties, its filtering limitations make it unsuitable for real-world use cases.
The recommended approach combines explicit column IDs with accessor functions:

Use id to create predictable filter bindings
Leverage accessorFn to safely navigate nested objects
Maintain type safety with TypeScript path helpers For simple cases, explicit IDs with accessorKey provide a quick solution, but complex nested data demands the robustness of accessorFn. Remember: your filter's effectiveness depends on how well your column IDs align with your data access patterns. In my next post, we'll explain how I use dynamic filtering architectures for my tables and how we can use them with nested datasets.

Adding Spotify Now Playing to Your React App

Jumbo Daniel — Tue, 30 Jul 2024 10:06:02 +0000

I was trying to build a currently playing Spotify feature recently, but still, I didn't want to do this the "traditional" way of getting my keys, fetching the access token, and then adding the respective APIs...... It is way too tedious, I searched around, and then I found this React Package Now Playing.
Shout out to bolajiolajide and lilpolymath. It is lightweight and easy to understand and reduces a lot of boilerplate code compared to using the APIs ourselves. Let's get started. There are three steps: creating the application on the Spotify developer dashboard and authentication.

⁠Note that in this tutorial I'll assume that you have a React app running already, If not you can run:
npx create-next-app@latest

Creating an Application

Visit the Spotify Developer Dashboard (https://developer.spotify.com/dashboard/).
Log in with your Spotify account or create one if needed.
Click the "Create an App" button.
Enter a name and description for your application.
Click "Create" to generate your app.
On your app's page, find your Client ID and Client Secret(copy them; you'll need them soon).
Add http://localhost:3000 as your Redirect URIs in the app settings.

Authenticating the App

We will use Authorization Code Flow since we need to authenticate our users once. There are different ways of authenticating Spotify apps, more on that here.
⁠Firstly we can request authorization for our apps by adding our scopes, client_id, and redirect_uri to this URL.
Tip: The now-playing package requires these two scopes user-read-currently-playing and user-read-recently-played so be sure to add them.

https://accounts.spotify.com/authorize?client_id=e2c197e9......d3f35ee5&response_type=code&redirect_uri=http://localhost:3000&scope=user-read-currently-playing user-read-recently-played

You can also use Postman to generate the URL, here is a blogpost that uses Postman
⁠Note that the redirect_uri here has to be the same as the one you added to your Spotify dashboard.
After adding your client_id and scopes, paste the URL into your browser. You'll need to authorize your app afterwards it will redirect you to your app(the redirect_uri you specified). In the URL there is a code parameter, copy it out.

http://localhost:3000/?code=AQBKvAjSrH............7o7wZ6g6fENyVIxfUqNF
Next up, you will have to generate the refresh_token, we will have to generate the base64 string from the client_id and client_secret. You can use any of these tools ⁠Base 64 Encode, Henry's Codepen. With the format client_id:client_secret.

curl.exe -H 'Authorization: Basic <Base 64 encoded client_id:client_secret>' -X POST https://accounts.spotify.com/api/token -d code=<code> -d redirect_uri=http://localhost:3000 -d grant_type=authorization_code

Tip: remove the .exe if you are using a mac
This should return a JSON with the refresh and access token, copy the refresh token(it is valid until revoked access)

{
  "access_token": "....",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": ".....",
  "scope": "user-read-currently-playing user-read-recently-played"
}

Using the Now Playing Package

Install the package

⁠pnpm i @bolajiolajide/now-playing

Add your refresh_token, client_id, client_secret to your env.local file

NEXT_PUBLIC_SPOTIFY_CLIENT_ID= 
NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET= 
NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN=

Note: In this tutorial, I'm using NEXT_PUBLIC prefix for the Spotify credentials. It's worth noting, this is more of an experimental setup for me to test Next Export later on. Here's the deal: using NEXT_PUBLIC on these variables isn't exactly best practice. It's like leaving your house keys under the doormat - not the safest move. You're exposing your Spotify API credentials to the client side, which is risky. If you haven't worked with environment variables in Next before, read this first
Instead, you might want to check out:

API routes
Server-side props
Serverside components(App Router)

Create a Now Playing component, import the now-playing package, and write this code

import { NowPlaying, Providers } from "@bolajiolajide/now-playing";

export async function SpotifyPlaying() {
  const client_id = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID;
  const client_secret = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET;
  const refresh_token = process.env.NEXT_PUBLIC_SPOTIFY_REFRESH_TOKEN;
  const np = new NowPlaying(Providers.SPOTIFY, {
    useCache: true, // (optional) default is true
    cacheDuration: 30000, // (optional) in milliseconds
    streamerArgs: {
      clientId: client_id,
      clientSecret: client_secret,
      refreshToken: refresh_token,
    },

  });
  const Playing = await np.fetchCurrentlyPlayingOrLastPlayed();
  return Playing;
}

Afterward, the function returns the recently played or currently playing song already formatted to return title,artiste, image_url

{
    "is_playing": true,
    "title": "Doomsday",
    "artiste": "MF DOOM, Pebbles The Invisible Girl",
    "image_url": "https://i.scdn.co/image/ab67616d0000b2736ce90ec627a0198a8efd127f",
    "preview_url": "https://p.scdn.co/mp3-preview/245f1806f86179d9707001d803c94f7e33d07e0b?cid=e2c197e9a1904790b76c1d07d3f35ee5",
    "url": "https://open.spotify.com/track/7EQvdUJqZ2i7SWvSB2VqGA"
}

Feel free to style it however you like

Conclusion

This blog post isn't opinionated or one-size-fits-all of building a Now Playing component. I've shown you one way to do it, but there's a whole lot of possibilities out there. You might want to explore using API routes to keep your Spotify credentials safe on the server side. Or maybe you want to turn it up a notch and try out TanStack Query and handle loading, fetching and caching. These methods could give you better performance and security compared to our direct approach. The key is to find what works best for your project and coding style.

⁠A big shoutout to Lee Rob for his fantastic blogpost, which heavily influenced the setup in this tutorial.

How to Setup Path Alias Vite + React

Jumbo Daniel — Sat, 27 Jul 2024 13:21:08 +0000

Why Path Aliases?

Path Aliases in Vite allow us to use custom paths to our project directory when importing our modules.
⁠Say we are working on a React project, in our cards component we want to import about three different components to build our card. Let's say a button, header, image.

We can write it as this

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'

⁠
It looks good for now, but think of when we want to refactor or improve our component and have to import about 5 or 6 more components. Then it starts to get messy.

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'
import Panel from "../../components/Dashboard/Panel";
import Input from "../../components/Forms/Input";
import Submit from "../../components/Forms/Submit"

That's where path imports become useful, they make our import statements cleaner and more manageable. With Path Alias what we have above becomes

import Button from '@/src/components/Button'
import Header from '@/src/components/ui/Header'
import Image from '@/src/components/Image'

For those that don't use auto import, you do not need to remember how far the directory is from the component you are working on. It just simplifies code organization when you need to move files or refactor your project structure, you won't have to update numerous relative import paths across your codebase

Adding Path Alias to Your Project

First, you need to install React + Vite
⁠pnpm create vite setup-path-alias --template react
Next, you will go into the project directory you just created then run

cd setup-path-alias                                                                                                                                         pnpm install 
pnpm run dev

Note: I used the shortcut to create the Vite app with the template, you can use any other method you prefer. So as long you create the app. I also used pnpm but you can use your preferred package manager (npm, yarn, bun....).

After that is completed, the Vite project directory looks like this
⁠├── public
├── src/
│ └── components/
│ └── HelloWorld.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

⁠Now go to vite.config.js file, this is how the file should look by default

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

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

Next, we will install Path module, we use it to use the path.resolve() method, which helps create absolute paths.

pnpm i path

Then we will resolve the path alias in our vite.config.js file and the result should look like this

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  },
});

Configuring VS Code IntelliSense

To ensure VS Code recognizes your aliases, create or update jsconfig.json in your project root:

{
    "compilerOptions": {
      "paths": {
        "@/*": [
          "./src/*"
        ]
      }
    }
  }

Then we can update our imports from

import Button from '../../components/Button'
//to this
⁠import Button from '@/src/components/Button'

Note that we can make the path alias like this, and resolve as many paths as we want, then update our intellisense. I left my own simpler since my project is small and by default, the src folder contains all the project files, then I can just point it to src but when you use the components folder a lot of times in your code you can just add it to the path alias to keep your imports clean. Then again it is advised to avoid the overuse of aliases: because while they can simplify imports, overusing them can make your code less intuitive for new team members. Use aliases for common, frequently accessed directories.

⁠    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
  },

Potential Issues and How to Avoid Them

Circular Dependencies: Be cautious when using aliases to avoid creating circular dependencies. Always structure your imports in a way that maintains a clear hierarchy.
Overuse of Aliases: While aliases can simplify imports, overusing them can make your code less intuitive for new team members. Use aliases for common, frequently accessed directories.
Inconsistent Naming: Stick to a consistent naming convention for your aliases across the project. For example, always use the '@' prefix for aliased paths.
Forgetting to Update jsconfig.json: If you add new aliases in vite.config.js, remember to update jsconfig.json as well to maintain IDE support.
Alias Conflicts: Ensure your alias names don't conflict with npm package names or browser globals to avoid confusion and potential errors.

Thanks for reading

Migrating from Create React App(CRA) to NextJS (Pages Router)

Jumbo Daniel — Sat, 11 May 2024 07:09:15 +0000

This blog post talks about the migration process from Create React App (CRA) to Next.js

Understanding CRA

Create React App (CRA) is a tool that helps set up a modern React development environment with minimal configuration. It provides a preconfigured environment with a development server, bundling, linting, and other useful features, making it easy to get started with React projects quickly.

Understanding Next.js

Next.js is a React framework that enables server-side rendering, static site generation, file-based routing, and more out-of-the-box. It provides a robust foundation for building production-ready React applications with enhanced performance, SEO, and developer experience.

Comparison

Feature	Next.js	Create React App
Server-Side Rendering	Built-in support	Not supported out of the box
Static Site Generation	Built-in support	Not supported out of the box
File-based Routing	Yes	No (requires a routing library like React Router)
Code Splitting	Automatic	Requires additional configuration
Production Build	Optimized for performance	Basic production build
Deployment	Supports various hosting platforms	Requires additional configuration for deployment
Developer Experience	Enhanced with features like Fast Refresh	Basic Features

Why Switch to Next.js?

Better Performance: Next.js provides server-side rendering and static site generation out of the box, which can significantly improve the performance and SEO of your web applications.
Simplified Routing: Next.js uses a file-based routing system, which makes it easier to reason about your application's structure and removes the need for complex routing setups.
Enhanced Developer Experience: Next.js offers features like Fast Refresh, which improves the development experience by providing near-instant updates to your application without losing state.
Optimized for Production: Next.js builds are optimized for production, with features like automatic code splitting and bundling, ensuring better performance and smaller bundle sizes.
Ecosystem and Community: Next.js has a thriving ecosystem and a large community, providing access to a wide range of third-party libraries, tools, and resources.
Future-Proof: Next.js is actively maintained and continuously updated, ensuring that your applications remain compatible with the latest React features and best practices.

Prerequisites:

An existing CRA project
Basic understanding of React and JavaScript
Node installed on your system

Are you looking to take your React application to the next level? If you've been using Create React App (CRA) and are interested in exploring the powerful features of Next.js, this blog post will guide you through the migration process step-by-step. Next.js offers server-side rendering, static site generation, file-based routing, and more, allowing you to build high-performance, SEO-friendly, and scalable web applications.

Let's get started!

Step 1: Start the development server

Open your CRA project in your preferred code editor.
In the terminal, navigate to your project directory.
Run the following command to start the development server:

npm start

(Note: use the package manager you have set up on your project already...)

This will ensure that your CRA application is running correctly before we begin the migration process.

Step 2: Uninstall the development script

Open your package.json file.
Remove the react-scripts dependency from the dependencies section.
Remove the following scripts from the scripts section:

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

Step 3: Install Next.js

npm install next@latest

Create the Next.js Configuration File:

Next.js provides a configuration file where you can customize various settings for your application. Create a new file called next.config.js in the root directory of your project with the following content:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports =  {
  nextConfig,
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // Outputs a Single-Page Application (SPA).
  distDir: './dist', // Changes the build output directory to `./dist/`.
}
export default nextConfig

You should note that:

If you want to enable React's strict mode and use the default Next.js behavior (server-rendered application with client-side hydration), you would use the first snippet.
If you want to generate a static Single-Page Application (SPA) and change the output directory for the built files, you would use the second snippet. The configuration sets up Next.js to generate a Single-Page Application (SPA) and changes the build output directory to ./dist/. You can modify these settings based on your preferences.

The decision should be based on whether you need a server-rendered application or a fully client-side rendered SPA, and whether you want to change the output directory for the built files.

Step 4: Update Typescript Config File (optional)

If you're using TypeScript, update your tsconfig.json file to make it compatible with Next.js:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Note: If you're not using TypeScript, you can skip this step. And Remember you can always add typescript to your Next.js project by just adding a new file with .ts, .tsx file extension, and it will be installed automatically.

Step 4: Remove React Router

If you were using React Router in your CRA project, you'll need to remove it since Next.js has built-in file-based routing. Simply uninstall the react-router-dom package:

npm uninstall react-router-dom

Step 5: Create the Root Directory (Pages)

Next.js uses a file-based routing system, where each file in the pages directory represents a route in your application. Create a new directory called pages in the root of your project, and add an index.js or index.tsx file inside it. This file will serve as the entry point for your application. Also add this _app.jsx file if you are using JavaScript or _app.tsx for TypeScript.

_app.jsx

export default function App({ Component, pageProps }) {
 return (
      <Component {...pageProps} />
  );
}

_app.tsx

import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
 return (
      <Component {...pageProps} />
  );
}

For styles, I'll be using Tailwind CSS with Next.js (if you set it up already in CRA you can skip this step as it already works the same way). If you want to set up Tailwind CSS with Next.js, follow the official guide: https://tailwindcss.com/docs/guides/nextjs

Note: If you want to use regular CSS with Next.js, you can import CSS files directly into your components with CSS modules or create a global CSS file in the styles directory and import it in your _app.tsx/_app.jsx file.

Step 6: Update Image Imports

Next.js handles static image imports differently from CRA. Use these steps to update your image imports.

Convert absolute import paths for images imported from /public into relative imports:

// Before
import logo from '/logo.png'
// After
import logo from '../public/logo.png'

Pass the image.src property instead of the whole image object to your <img> tag:

// Before
<img src={logo} />

// After
<img src={logo.src} />

Alternatively, you can reference the public path/URL for the image file based on the filename. For example, public/logo.png will serve the image at /logo.png for your application, which would be the src value.

The benefit of using the Next.js Image component is that it automatically optimizes images for performance, including lazy loading and resizing images on the fly. This can lead to significant improvements in page load times and overall user experience.

Step 7: Migrate the Environment Variables

Next.js has an inbuilt support for .env environment variables similar to CRA. The major difference is the prefix used to expose environment variables on the client side. Change all environment variables with the REACT_APP_ prefix to NEXT_PUBLIC_.

Step 8: Update Scripts in package.json

You should now be able to run your application to test if you've successfully migrated to Next.js. Before that, you need to update your scripts in your package.json with Next.js related commands, and add .next, next-env.d.ts, and dist to your .gitignore file:

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

.gitignore

.next
next-env.d.ts
dist

Now run you can start the development server using your command (I'm using)npm run dev, and open http://localhost:3000. You should see your application now running on Next.js.

Clean Up:

Finally, you can clean up your codebase from Create React App-related files:

Delete public/index.html
Delete the reportWebVitals setup

Congratulations! You've successfully migrated your Create React App project to Next.js. With this migration, you can now take advantage of Next.js's powerful features, such as server-side rendering, static site generation, file-based routing, and more, enabling you to build high-performance, SEO-friendly, and scalable web applications.

How to fix: error: 'invalid path' When working with Git on Windows.

Jumbo Daniel — Sun, 25 Jun 2023 20:32:28 +0000

I was trying to clone a repository from gitbucket client when I got this error on my PC

git -c filter.lfs.smudge= -c filter.lfs.required=false -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks clone --branch master https://JumboDaniel@bitbucket.org/fedacash-dev/fedhagap-web-ui.git C:\Users\hp\Documents\HTML\Jobs\Fedha
Cloning into 'C:\Users\hp\Documents\HTML\Jobs\Fedha\...
error: invalid path 'src/Assets/fonts/TTF/THICCCBOI-Black.ttf:Zone.Identifier'
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry with 'git restore --source=HEAD :/'

I tried working my way around the issues; I even tried deleting the 'THICCCBOI-Black.ttf' file from the gitbucket repo, but this didn't solve the issue.
After hours of searching through the internet, I found the cause of the error:
The Git cloning of a repository fails on Windows with an "invalid path" error because the Windows OS reserves some filenames; hence, a file name may be legal in Linux or Mac (in my case) but illegal in Windows.

Solution:

**
Whilst this may workaround the issue, care should be taken as the default for a Windows client was set to core.protectNTFS=true to close a potential security issue CVE-2019-1353 as described here.

Depending on the filename, you can configure Git to ignore the NTFS naming may fix the issue.

git config --global core.protectNTFS false
Turning off protectNTFS will stop Git from complaining about files that have a base name that is reserved but will not prevent an error if the filename is one of the reserved names.

The best solution is to:

Identify the offending file(s) mentioned in the error message, such as ('src/Assets/fonts/TTF/THICCCBOI-Black.ttf:Zone.Identifier') as in my case.
Rename the file(s) to something that does not conflict with any reserved names. For example, I can rename it to 'THICCCBOI-Black-Font.ttf'. NB. Check windows file naming documentation here
Update the reference to the renamed file(s) in your code or configuration, if necessary.
Commit the changes to the repository.

Reference:Link

How to fix "Remote Host Identification Has Changed" Issue with GitHub and Git

Jumbo Daniel — Fri, 16 Jun 2023 04:07:39 +0000

Introduction:

Git and GitHub are being used more and more frequently by developers to collaborate on projects, thus seeing different error messages is unavoidable. The error "Remote Host Identification Has Changed" is one error that can be annoying.

In this blog post, we will examine the reasons for this problem and offer detailed steps on how to successfully resolve it when using Git CLI & GitHub.

Causes of the Error:

The "Remote Host Identification Has Changed" error occurs when the fingerprint of the remote host (GitHub) you are connecting to has changed. There are a few common causes for this:

Server Changes: GitHub might update its server infrastructure, leading to changes in host fingerprints.
Security Updates: GitHub periodically enhances its security measures, which can result in altered fingerprints.
Man-in-the-Middle Attacks: In rare cases, this error can indicate an unauthorized entity intercepting your connection, posing a security risk.

How to Fix the Error:

To fix the "Remote Host Identification Has Changed" error, follow these steps:

Clear Old SSH Fingerprints: Remove the outdated SSH fingerprints stored on your local machine. Use the following command to delete the relevant line from your known_hosts file:
ssh-keygen -R github.com
Establish a new connection to GitHub to update the SSH known_hosts file with the new fingerprint. You can do this simply by attempting make a connection the a remote repository using SSH e.g push, pull, clone. The updated fingerprint will be automatically added.
The authenticity of host 'github.com (20.201.28.151)' can't be established. ED25519 key fingerprint is SHA256:br9IjFspm1vxR3iA35FWE+4VTyz1hYVLIE2t1/CeyWQ. This key is not known by any other names Are you sure you want to continue connecting (yes/no/[fingerprint])?
Verify the New Fingerprint: After updating the SSH known_hosts file, verify the authenticity of the new fingerprint. GitHub provides instructions on how to verify fingerprints for different operating systems.

Make sure it matches one of GitHub's public key fingerprints:

SHA256:uNiVztksCsDhcc0u9e8BujQXVUpKZIDTMczCvj3tD2s (RSA)
SHA256:br9IjFspm1vxR3iA35FWE+4VTyz1hYVLIE2t1/CeyWQ (DSA - deprecated)
SHA256:p2QAMXNIC1TJYWeIOttrVc98/R1BUFWu3/LiyKgUfQM (ECDSA)
SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU (Ed25519)

Avoiding the Error:

To prevent encountering the "Remote Host Identification Has Changed" error in the future, consider these practices:

Regularly Update Your SSH Known Hosts: Periodically updating the SSH known_hosts file ensures that you have the most up-to-date fingerprints stored locally.
Enable Two-Factor Authentication (2FA): Enabling 2FA adds an extra layer of security to your GitHub account, reducing the risk of unauthorized access.
Stay Informed: Keep track of GitHub announcements and updates to stay informed about any changes that may affect host fingerprints.

Conclusion:

The "Remote Host Identification Has Changed" error in GitHub can be resolved by understanding its causes and following the provided steps to fix it. Additionally, adopting preventive measures like regularly updating your SSH known_hosts file and staying informed about GitHub changes will help you avoid this error in the future. By mastering these troubleshooting techniques, you can ensure secure and uninterrupted collaboration on your Git projects with GitHub.

Upgrading React Router From V5 to V6

Jumbo Daniel — Sun, 08 May 2022 12:44:11 +0000

React Router version 6 was released some months it is really important because React Router is one of the most used React packages.

React itself doesn't come with a router package so majority of React projects from small single page apps to big organizations use React Router.

Some weeks ago while I was trying to work on an old project I ran into an error when I updated my development packages because of my React Router update that caused breaking changes. I tried going through the documentation but sometimes you know they can be long and tedious, so I decided to write this post to help anyone who is also trying to update their project.

In the end, it’s quite simple to upgrade and not much has changed, just little code difference. Version 6 is a lot better and easier to understand than version 5, if you can upgrade, you should.

So first you can open your old project in vscode and install react-router version 6, do this by running npm install react-router-dom@6 which ensures that you install the latest version 6 and that’s what we can do here:

npm install react-router-dom@6

When you get react-router version 6 installed. Try running npm start in the terminal, you will get a failed to compile error(switch is not exported from react-router-dom).

This brings us to the first change. When we used react-router v5, we imported the switch component from the react-router package to wrap our routes, but instead in react-router v6 we use the routes component to wrap the route component.

N.B You still have to import BrowserRouter from react-router-dom to wrap your root app component. And also only Route component can be a child of Routes any other component will lead to an error.

Another important change is that your component should no longer be a child of your route component but instead the route takes in an element prop and then you pass a dynamic value to element and that dynamic value is that to be rendered component as JSX.

And lastly note that dynamic routing still works as you normal(some new features were added but it works the same).

Thanks for reading and please comment on any corrections or additions you will like to add.
Link to upgrade documentation

Setting up Local MongoDB Using Mongo Compass on Windows

Jumbo Daniel — Thu, 22 Jul 2021 01:51:00 +0000

Follow this link to visit the download page for the MongoDB Community Server and and download the latest MSI installer for Windows:

As soon as the download completes double click the file and run the installer.

Click on the next page to continue.
Read the end-user license agreements and make sure you click the checkbox to agree with the user terms so that you can proceed to the next page.

Click on the complete button to install all MongoDB features and components.

The default values should work well for most scenarios. Click Next when you are satisfied with your selections.

Next, click the checkbox to to install MongoDB Compass, a graphical interface that you can use to connect to and manage MongoDB servers.
(Here we have to tick the checkbox to install MongoDB Compass since this tutorial was made for using MongoDB and Compass)

Next, click Install to begin installing all of the MongoDB components on your computer.

After the installation is complete, MongoDB Compass will open automatically. If it doesn't open immediately, you can open it by just searching for it from your taskbar.
The next step is to understand how to use MongoDB Compass (it is a very simple and straightforward process). Once it is open, the initial screen will give you the opportunity to connect to a running MongoDB server by providing a connection string:

If you click connect without entering any connection string, mongo will just connect to the local database running with the default configurations.

Click Connect to connect to the MongoDB server running on your machine. As soon as you click connect, Compass connects to your local server and shows information about the databases within and allow you to manage your data using the graphical user interface. The admin, config, and local are default databases and you shouldn't delete them.

When you to stop the components after you are done working, click the connect menu in the menu bar and select disconnect to stop the connection to your MongoDB server. Afterwards, you can safely close the MongoDB Compass application.

Thank you for reading.

How to use Tailwind CSS in an ExpressJS app.

Jumbo Daniel — Wed, 14 Jul 2021 23:40:10 +0000

This post will guide you if you want to use Tailwind CSS without having to use any bundler.

First use your terminal to change directory to your express application. Then install tailwind in your express app using:

npm i tailwindcss

Run this command to generate the tailwind configuration file. This will create a tailwind.config.js file in your root directory.

npx tailwindcss init

Create a tailwind.css file in your public folder, I would advice you to create a stylesheets folder under the public folder to properly seperate your files(public/stylesheets/tailwind.css). After that copy and paste the following code in the tailwind.css file.

@tailwind base;

@tailwind components;

@tailwind utilities;

Install postcss globally. This allows us to use postcss in other projects without reinstalling for each projects.

npm install -g postcss-cli

Create a postcss configuration file in your root directory and call it postcss.config.js. Then copy the following configuration into your postcss.config.js file:

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Add a build:css script to your package.json file so you can always build your css by running the command:

npm run build:css

"scripts": {
     "build:css": "postcss public/stylesheets/tailwind.css -o public/stylesheets/style.css"
  },

Import style.css in your application as you normally would and run your app. Congratulations.

How to Fix Nodemon (nodemon.ps1) Cannot Be Loaded Because Running Scripts is Disabled on This System.

Jumbo Daniel — Sun, 20 Jun 2021 12:25:36 +0000

This is a simple solution for solving this error on windows

>nodemon : File C:\Users\hp\AppData\Roaming\npm\nodemon.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see 
about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ nodemon app
+ ~~~~~~~

First Step
First search and run PowerShell as administrator

Second Step
If you read through the error message you will see this error was generated from Execution_Policies. In you powershell window type and enter the get execution policiy command.

Get-ExecutionPolicy

Final Step
After running the command it will return restricted as the result. We have to set the execution policy to unrestricted using the Set-ExecutionPolicy command.

Set-ExecutionPolicy Unrestricted

After this you will get a prompt message. Press Y to change it.
To be sure you have changed the get execution policy you can simply run it again to check the result. You'll get the output 'Unrestricted'

Now you can use nodemon on your machine.