Forem: Akilesh

Custom Theme with MUI/Material and MUI/Joy

Akilesh — Sat, 19 Apr 2025 17:54:01 +0000

Below implementation custom color's with Mui/Joy & Material with Next.js `/page` route

Create a ThemeProvider component which we will be using it to store our custom theme, I have added custom colors and break points feel free to use it as your starting point.

CssVarsProvider is deprecated works for now but need to replace it in future releases

ThemeProvider.tsx

import {
    extendTheme as materialExtendTheme,
    CssVarsProvider as MaterialCssVarsProvider,
    THEME_ID as MATERIAL_THEME_ID,
} from '@mui/material/styles';
import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/material/CssBaseline';

declare module '@mui/material/styles' {
    interface Palette {
        white: {
            main: string;
            light: string;
            contrastText: string;
        }
        black: {
            dark: string;
            main: string;
            light: string;
            lightest: string;
        }
    }
we
    interface PaletteOptions {
        white?: {
            main: string;
            light: string;
            contrastText: string;
        }
        black?: {
            dark: string;
            main: string;
            light: string;
            lightest: string;
        }
    }
}

const theme = {
    colorSchemes: {
        light: {
            palette: {
                background: {
                    default: '#FAFAFF', // Winter
                    paper: '#FAFAFF', // Winter
                },
                primary: {
                    main: '#00008B',  // Royal
                    contrastText: '#FAFAFF',
                    light: '#E6E6F0',
                    dark: '#dfdff7',
                },
                secondary: {
                    main: '#0A64BC',  // Sea
                    contrastText: '#FAFAFF',
                },
                success: {
                    main: '#157811' // Wealth
                },
                warning: {
                    main: '#D53F55' // Red Rose
                },
                white: {
                    main: '#FAFAFF', // Winter
                    light: '#FFFFFF', // vennila white
                    contrastText: '#1B2D44',
                },
                black: {
                    dark: '#0A0A0A', // Jet
                    main: '#1B2D44', // Midnight
                    light: '#666666', // Platinum 40
                    lightest: '#D9D9D9', // Platinum
                },

            },
        },
    },
    breakpoints: {
        values: {
            xs: 0,
            sm: 481,
            md: 769,
            lg: 1025,
            xl: 1201
        }
    },

} satisfies Parameters<typeof materialExtendTheme>[0];

const materialTheme = materialExtendTheme(theme);

export default function ThemeProvider({ children }: { children: React.ReactNode }) {
    return (
        <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
            <JoyCssVarsProvider>
                <CssBaseline enableColorScheme />
                {children}
            </JoyCssVarsProvider>
        </MaterialCssVarsProvider>
    );
}

Lets import and wrap ThemeProvider around our main _app.jsx

_app.jsx

import ThemeProvider from './ThemeProvider';

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

Example usage

import { Button} from '@mui/material';

<Button
    type="submit"
    sx={{
        backgroundColor: 'primary.main',
        color: 'white.light',
        fontWeight: '500',
        fontSize: '14px',
        textTransform: 'none',
        borderRadius: '100px',
    }}
>
    Save
</Button>

My take

From my personal experience I feel mui/joy doesn't hold its position comparing to its elder brother mui/material Its not a fair comparison cause its still in beta version still I tried and at the end of the day I dont have the seamless integration feeling even after I got everything work together.

I dont recommend to use it in your production environment (have fun testing in your side project’s) there is long way to go. I highly suggest you to stick with mui/material no need to make thing's complicated than they are.

Embed Substack Signup Form in React

Akilesh — Tue, 19 Dec 2023 05:30:40 +0000

" This article is published using Lamento🍋

I have used substackapi to achieve this Custom Embed Substack Signup Form

Configuration:

substackUrl: Copy your Substack domain URL and replace akileshio.substack.com with yours ```

substackUrl: "akileshio.substack.com",

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3pvrfr53fhrilrd5g6l.png)

* **theme**: To customize colors you can use pre-defined style `purple`, `orange` or `green` in theme or if you wanted to add your own colors scheme add `custom` in theme and add your colors to `primary, input, email & text`

theme: "custom",
colors: {
primary: "#FFFFFF",
input: "#334155",
email: "#FFFFFF",
text: "#000000",
}


**Here is your final code:**

import React, { useEffect } from 'react';

const SubstackWidget = () => {
useEffect(() => {
// Define the CustomSubstackWidget on the window object
window.CustomSubstackWidget = {
substackUrl: "akileshio.substack.com",
placeholder: "example@gmail.com",
buttonText: "Subscribe",
theme: "custom",
colors: {
primary: "#FFFFFF",
input: "#334155",
email: "#FFFFFF",
text: "#000000",
},
};

// Create a new script element
const script = document.createElement('script');

// Set the source of the script to the Substack widget script
script.src = "https://substackapi.com/widget.js";
script.async = true;

// Append the script to the body
document.body.appendChild(script);

// Cleanup function to remove the script when the component unmounts
return () => {
  document.body.removeChild(script);
}

}, []);

return (

);
};

export default SubstackWidget;


I you want to make your users redirect to custom URL after they signup, visit (substackapi)[https://substackapi.com/] to Unlock  Custom Redirect for $3.99/month.

What is BUN

Akilesh — Tue, 26 Sep 2023 04:21:26 +0000

'' This article is published using Lamento🍋

The All Rounder:

Bun is a all in one toolkit for JavaScript developer helps us to do the same task (running, building, testing, and debugging) but faster

What's the point of having hi-end gaming PC when the player isn't good at the game he is just bad but faster

What makes BUN special? it's fast

What makes BUN fast? BUN is written in ZIG and uses JavaScriptCore engine which powers WebKit browsers such as Safari while Node and Deno uses V8. . The team has spent a ton of time optimizing it

Bun has 4 main trump cards: 🎴

JavaScript runtime" 🏃

Node.js compatibility & BUN APIs

A node and Deno alternative but has built-in support for Node APIs which makes existing node.js project and npm package works fine with bun. Although most of the Node API works with BUN but its not completely compatible with Node do cheack this Node.js compatibility to know more about supported APIs. BUN has its own standard-library APIs are designed to be fast and easy-to-use.

How BUN handles ESM issue

Bun supports both CommonJS and ES modules there is no need to including "type": "module" in package.json and it can even use import and require(), in the same file

import lodash from "lodash"; const express = require('express')

Database:

Bun has built-in support for SQLite. Which has written in written in native code to be faster.

Framework:

BUN can be paired with Server frameworks (Express, Koa, and Hono), full-stack frameworks (Next.js, Remix, Nuxt, Astro, SvelteKit, Nest, SolidStart, and Vite)

Package manager"💼

BUN isn't the first one who has tried to speed up NPM, there are yarn and pnpn who have their own way of doing things

To attain it's peak performance bun has 2 main ingredient's

Global Module Cache: The system stores copies of software modules that has previously downloaded from the npm registry. Instead of repeatedly downloading the same packages it stores in global module cache and uses them when ever needed. pnpm to uses this method
Fastest System Calls: System calls are fundamental functions provided by the operating system that allow programs to interact with the hardware. It optimizes its interactions with the underlying operating system to ensure that it performs tasks as efficiently as possible.

Its possible to use BUN as a package manager even when its not used as a runtime

Bundler"📦

Bun is a JavaScript and TypeScript bundler and minifier that can be used to bundle code for the browser, Node.js, and other platforms. It's heavily inspired by esbuild and provides a compatible plugin API.

bun build ./index.tsx --outdir ./build

Bun's fast native bundler is now in beta

Bun introduces JavaScript Macros are used to make a sequence of computing instructions available to the programmer as a single program statement. Macros runs JavaScript functions at bundle-time. The value returned from these functions are directly inlined into the bundle.

Testing libraries"🧪

Bun has a built-in testing module bun:test that is fully Jest-compatible . Tests are executed with the Bun runtime

It supports:

TypeScript and JSX

Snapshot testing
Lifecycle hooks
UI & DOM testing
Watch mode with --watch
Script pre-loading with --preload

Tests are written in JavaScript or TypeScript with a Jest-like API. Refer to Writing tests for full documentation.

Installing bun:

Mac/Linux/WSL ( Windows Subsystem for Linux )

CURL:

curl -fsSL https://bun.sh/install | bash

NPM:

npm install -g bun

Windows : Sadly windows user's cant able to experience bun at the moment as it is in highly experimental phases. Join #windows channel on BUNs Discord for updates.

Using WSL ( Windows Subsystem for Linux ) we can install and run BUN in window's

Customizing Google Chrome Dino Game Characters 🦖

Akilesh — Wed, 14 Jun 2023 17:01:37 +0000

" This article is published using Lamento🍋

This is my custom png with nezuko charn which I am going to replace the default dino with.

🧭 Navigate

chrome://dino/

🛠️ Developer tool

Ctrl + Shift + C

Select offline-resources

🔗 Change asserts URL

change src of offline-resources-1x & offline-resources-2x to https://i.ibb.co/37DSwDX/nezuko.png

Lil Nezuko chan 🏃‍♀️

Absolute Imports: Leveraging '@' for Efficient Direct Imports

Akilesh — Mon, 12 Dec 2022 06:42:00 +0000

" This article is published using Lamento🍋

import Layout from "../components/layout";
import { fetcher } from '../lib/fetcher';

Add this configuration in your tsconfig.json

    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/hooks/*": ["lib/hooks/*"]
    },

import Button from '@components/Layout'
import { fetcher } from '@lib/fetcher';

make sure to restart the application in your localhost
Reference:
https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js/

Connect Server Using Terminal & SSH

Akilesh — Sun, 04 Dec 2022 18:30:00 +0000

'' This article is published using Lamento🍋

Using terminal we are going to establish a remote connection to a Remote Server like (Droplet, E2C or any cloud vm).

If you are using Linux or Mac you are good to go but in windows you should download git-bash.

1) Now to generate your SSH key type his commends in your terminal.

It's better to generate SSH keys inside .ssh folder


ssh-keygen

2) Now name your key

you can name your key what ever suits for you

3) Don't need any passphrase

We have generated two files public key & private key

public key - Used by the Server
private key - Used by the Client

4) Open the public key files


cat ur-key-name.pub

We need to provide our public key to the remote server by opening it in terminal and copy the phrase.

5) To establish connection between client with server


ssh -i ./droplet-ssh-key root@157.245.104.56

Abbreviation: ssh -i keyfile target_machineusername@host

What's the meaning of -i in ssh?

By providing the private keyfile and our server username and ip address we are opening a connection between client and server

If you see the above message we have successfully connected our client with the server

Bonus

You can check your system specification with this commends


free -h


df -h


lscpu

To terminate the session enter exit in terminal.

Connect using BASH

Akilesh — Sat, 03 Dec 2022 11:08:48 +0000

" This article is published using Lamento🍋

Install Bash

If you have Linux or mac OS running on your device you are blessed with free bash integration but in windows you should install and configure it. luckily for windows we can use Git Bash as an alternative & Powershell to works fine.

Path

Open your Bash terminal on the folder where you needed the SSH key to be generated.

Generate key gen

1- Enter this command to start the ssh generation process.

ssh-keygen

2- It will ask you to assign the path where it need to be store the generated token.

3- A passphrase will be asked for generations but this could be omitted just leave it empty and press enter.

4- The ssh key is generated on the specific location successfully.

5- Enter this command to view the files.

cat your-ssh.pub

6- Paste the pub ssh key in this text area and assign a name to it.

7- To connect with the cloud computer from your terminal use this command.

ssh -i ./plausible-ssh root@13x.5x.x6.8x

Here root is your digital ocean Droplets user name & follow up the ip address of the droplet.

Enhance Next.js with Vercel Analytics: A Step-by-Step Guide

Akilesh — Tue, 25 Oct 2022 20:13:02 +0000

" This article is published using Lamento🍋

We have a new player entered the field of analytics.
Just by taking a quick glance at Vercel Analytics it looks somewhat similar to plausible analytics, but beauty should be admired no hard work should go unnoticed.
First let's set up an exiting Next.js v-12 application with this analytics.

1. Enable Vercel Analytics

Go to your vercel dashboard and choose your project which you need to enable analytic.

Open analytics tab then select Audiences tab if it's your 1st time it will ask you to enable from the dialog.

2. Install Dependencies

In your project, install this package to monitor the application from Vercel dashboard.
@vercel/analytics allows you to track page views in your Next.js app or any other website that is deployed to Vercel. All page views are automatically tracked in the app.



npm install @vercel/analytics



yarn add @vercel/analytics

Inject the Analytics script

Import the Analytics component which is a wrapper around the tracking script, offering us more seamless integration with Next.js.

pages/_app.ts



import { Analytics } from '@vercel/analytics/react';

function MyApp({ Component, pageProps }) {

  return (

    <>

      <Component {...pageProps} />

      <Analytics />

    </>

  );

}

export default MyApp;

Deploy

Push your code to your version control and By deploying the application to Vercel we can see all the analytics instinct.

To see the updated visible, open your domain and preview the dashboard. The changes will be visible.

Finally

Vercel have provided a minimal and primary use case where it
check our site traffic and get all the essential insights.

Notable Features

Visitors count
Page Views
Top Pages (Pages which are the most visited)
Top Referrers (Sites refer the most traffic)
Countries
Operating Systems
Browsers

Vercel says this feature will be free only at beta stage in the future it may offer in paid tires.

Analytics using Plausible

Akilesh — Mon, 27 Jun 2022 15:51:15 +0000

" This article is published using Lamento🍋

Plausible is a lightweight web analytics tool used to check your web traffic and also pinpoints from where the traffic comes from with clear visual charts and Email/Slack reports.

In this blog I used next.js for reference to show how plausible works, but plausible will work on any framework.

Login/Create

Create a plausible account to get started and click the add website button.

Add a website

Enter your domain name in the text area (provide the domain name which you have access to) and location will be automatically set accordingly to your device location.

Code snippet

A code snippet will be generated from our previous details, and it needs to be pasted in our project's head.

Let's add this script to our project in our way.

Create a meta.tsx file under the components directive and paste the below snippet.



import Head from 'next/head'

export default function Meta() {
    return (
        <Head>
            <script
                defer
                data-domain="akilesh.io"
                src="https://plausible.io/js/plausible.js">
            </script>
        </Head>
    )
}

Now you can import this meta component to your layout.tsx component if you have one. If not, you can add it to this component to other components which have access to all the pages.

The ides here is to make the <script> tag accessible by the whole application.

Domain dashboard

Go to your domain dashboard https://plausible.io/**your_domain_name** and stay relaxed. Plausible will handle all the complicated process and in a few seconds you will see your webpage's stats.

Screen shot:

This will be your dashboard until you get someone to visit your website.
This is a line chart represents about the total visitors and also will identify unique visitors from the total traffic then the duration of the visiting period.
This dashboard will give a detail representation
Top Sources (From where the traffic comes).
Pages (On what page the user entered, exit).
Location.
Devices, Browser, OS.

We have successfully integrated an open source analytics tool into our web application. Now we can get to know about your traffic source from where it comes to on which device the user has viewed from.

To setup plausible manually from your hosting service subscribe to my newsletter.

I'll promise to make it within next Monday plz bear with me.

Sentry Advanced Deployment Configuration

Akilesh — Mon, 20 Jun 2022 11:17:46 +0000

" This article is published using Lamento🍋

Vercel

Add sentry integration to your Vercel account

Click add integration it will prompt a popup in which we need to select the project which need sentry to integrate with.
Next a popup will be shown from the Sentry about the project integration. Make sure the right vercel project is matched with the Sentry project. This will link our sentry project to Vercel.

Slack

Now for the slack integration go to the slack integrations panel and click on Add workspace. This will pop up a slack authentication where you need to select your workspace.
Alert rule needs to be added to trigger the notification when ever the application crashes. Go to Alert choose the Errors need to be notified when it happens and click on Set conditions.
According to your needs, you can configure the settings and experiment with them.

Take my configuration as a reference for setting conditions. You can also ignore my config and create a new one.

Save the rule. When ever the application crashes and according to your alert condition the notification will be sent to your Slack channel.

You have successfully integrated an error monitor into your application with the Slack notification 🔔.

Sentry with Next.js

Akilesh — Mon, 13 Jun 2022 03:22:38 +0000

" This article is published using Lamento🍋

Sentry is a crash reporting platform that provides you with "real-time insight into production deployments with info to reproduce and fix crashes".

In this blog we will see how to integrate sentry into an existing next.js application.

Installing 📥

Add Sentry’s Next.js SDK to your next.js projects.



yarn add @sentry/nextjs

Automatic Configuration 🛠



npx @sentry/wizard -i nextjs

Choose your project from below listed options on your CLI then the setup wiz will automatically create configuration file's with default values and your API key.

Generated file's:

sentry.client.config.js
sentry.server.config.js
.sentryclirc (Where the token key will be stored)
sentry.properties
next.config.wizardcopy.js (if next.config.js already exists).

Modify next.config.js 🔧

If next.config.js does already exist in your project, the app will automatically create a next.config.wizardcopy.js then we'll need to manually copy the snippet into next.config.js.



/** @type {import('next').NextConfig} */
const { withSentryConfig } = require( '@sentry/nextjs' );

const nextConfig = {
  reactStrictMode: true
}

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

module.exports = withSentryConfig( nextConfig, sentryWebpackPluginOptions );

Backend 🔙

In an application to capture errors and monitor server performance of the API, we will wrap the handlers with a Sentry function.

Syntax:



import { withSentry } from '@sentry/nextjs';

const handler = async (req, res) => {
  // your API calls...
}

export default withSentry(handler);

Reference:



import type { NextApiRequest, NextApiResponse } from "next"
import { withSentry } from "@sentry/nextjs";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: "Akilesh" });
};

export default withSentry(handler);

Testing 🧪

To check every thing works fine, we will trigger a button click event in a frontend component that throws an error.



            <button type="button" onClick={() => {
              throw new Error("Sentry Frontend Error");
            }}>
              Throw error
            </button>

Now check your sentry dashboard to know more about the errors and performance metrics.

Deployment (Vercel) 🛫

Assuming that your next.js project has deployed on vercel.

Add environment variable to your project in vercel Project Settings > General > Environment Variables

SENTRY_AUTH_TOKEN: in environment variable with your sentry auth token which will be present in your .sentryclirc file.

You have successfully integrated sentry with your web application 🥳. To get notified 🔔 in your Slack and Vercel integration check out this post.

Reinforcement learning in Super Mario bros Pt.2

Akilesh — Thu, 30 Dec 2021 06:40:07 +0000

Before getting here you should setup & preprocess the environment tap your index or thumb finger hovering on me

We are building an AI 🤖 to play 🎮 Super Mario Bros by reinforcement learning method and RL has four key elements.

Agent 🕵️

Agent can take some action in an environment to have some rewards or penalties.
Reward 🏆

depending upon agent action he will get a reward or a penalty
Environment 🖼️

The place where all happens. Agent does specify work according to the AI by analyzing environment and reward or penalty is given by how good or bad does the agent perform in that environment.
Action 🎬

The task given to the agent do certain tasks.

The Algorithm we use is PPO Proximal Policy Optimization

🚂 Train the model to play

import os 

from stable_baselines3 import PPO

from stable_baselines3.common.callbacks import BaseCallback

Here we are importing os to work with our file which helps when we save our model every 10000 games or steps so we can have a backup of our progress.

Imported our main Algorithm PPO that will be used to train our AI model or reinforcement learning model

then we imported Base Callback

To save the model 💾

class TrainAndLoggingCallback(BaseCallback):

    def __init__(self, check_freq, save_path, verbose=1):
        super(TrainAndLoggingCallback, self).__init__(verbose)
        self.check_freq = check_freq
        self.save_path = save_path

    def _init_callback(self):
        if self.save_path is not None:
            os.makedirs(self.save_path, exist_ok=True)

    def _on_step(self):
        if self.n_calls % self.check_freq == 0:
            model_path = os.path.join(self.save_path, 'best_model_{}'.format(self.n_calls))
            self.model.save(model_path)

        return True

The above step is optional you can skip it if you need. The process happening in the above step is we are saving the trained data at a set of callback intervals. So if we need we don't need to train the model again we can reuse this. Make sure you have enough storage space the model produces a hefty amount of data.

Locate file 📁

CHECKPOINT_DIR = './train/'
LOG_DIR = './logs/'

We are specifying where the produced data is located at

Setup Callback 📞🔙

callback = TrainAndLoggingCallback(check_freq=10000, save_path=CHECKPOINT_DIR)

This is just the instance of the TrainAndLoggingCallback(). What we are doing here is to save our model every 1000 steps or every 1000 games

We just have it as a backup for future reference else we need to re-run the whole training process.

We are going to setup our PPO model 💃

model = PPO('CnnPolicy', env, verbose=1, tensorboard_log=LOG_DIR, learning_rate=0.000001, 
            n_steps=512)

What we have done is create a variable called model and set that to PPO which is our model and passing parameters:

CnnPolicy- It is like a computer-based brain like a Neural Network in deep learning. A bunch of neurons communicate with each other and learn the relationship between different variables. Then there are various policies for different tasks. We used CnnPolicy because when it comes to image-based problems this model has its upper hand,
env - Our environment which we preprocessed.
verbose=1 - This gives us the data when we train the model. like setting it to 0 no output, 1 info, 2 debug.
tensorboard_log=LOG_DIR - This helps us to view the metric of how our training is performing as we are running our model.
learning_rate=0.000001 - The learning rate, can be a function of the current progress remaining.
n_steps=512 - The number of steps to run for each environment per update.

The hardest thing in any deep learning or machine learning is Getting the data in the right format.
This one-line code created a temporary AI model.

AI model starts to learn 📖

model.learn(total_timesteps=100000, callback=callback)

This is where our AI model starts to learn we are passing some parameters:

total_timesteps=100000 - The total number of samples (env steps) to train on.
callback=callback - called at every step with the state of the algorithm.

You will get some details about the current process while running model.learn.

If you see the above then you are good to go else check the previous step or do it as a developer does stackoverflow it.

Let's break down the resulting log by just taking look at some important values to notice.

fps : Frame Per Second
iterations : Number of times the process repeated.
time_elapsed : How long it been training for.
total_timesteps : How many frames our model goes through.
Training Metrics :

entropy_loss (⬇️) : In reinforcement learning, a similar situation can occur if the agent discovers a strategy that results in a reward that is better than it was receiving when it first started, but very far from a strategy that would result in an optimal reward.

explained_variance (⬆️) : The explained variance is used to measure the proportion of the variability of the predictions of a machine learning model. Simply put, it is the difference between the expected value and the predicted value.

learning_rate (📚): It is a tuning parameter in an optimization algorithm that determines the step size at each iteration while moving toward a minimum of a loss function.

loss (⬇️) : loss is the value of the cost function for our training data.

value_loss (⬇️) : val_loss is the value of cost function for our cross-validation data

Finally ✨

Load model ⌛

model = PPO.load('./train/best_model_1000000')

We are loading the trained model to our algorithm and saying the PPO algorithm to use that specific trained model to play Mario in our case it's best_model_1000000.

Ai Plays Mario 🤖

state = env.reset()
while True: 

    action, _ = model.predict(state)
    state, reward, done, info = env.step(action)
    env.render()

Then we are starting our game and loop through the game. Previously we used some random actions to move Mario now we are using the model.predict(state) to predict according to the model and give certain actions to Mario.

Source Code

This article is created by referring to Nicholasrenotte work all credit goes to him.

" This article is published using Lamento🍋

Forem: Akilesh

Custom Theme with MUI/Material and MUI/Joy

Below implementation custom color's with Mui/Joy & Material with Next.js /page route

My take

Embed Substack Signup Form in React

Configuration:

What is BUN

The All Rounder:

Bun has 4 main trump cards: 🎴

JavaScript runtime" 🏃

Package manager"💼

Bundler"📦

Testing libraries"🧪

Installing bun:

Customizing Google Chrome Dino Game Characters 🦖

🧭 Navigate

🛠️ Developer tool

🔗 Change asserts URL

Lil Nezuko chan 🏃‍♀️

Absolute Imports: Leveraging '@' for Efficient Direct Imports

Connect Server Using Terminal & SSH

Bonus

Connect using BASH

Install Bash

Path

Generate key gen

Enhance Next.js with Vercel Analytics: A Step-by-Step Guide

1. Enable Vercel Analytics

2. Install Dependencies

Inject the Analytics script

Deploy

Finally

Notable Features

Analytics using Plausible

Login/Create

Add a website

Code snippet

Domain dashboard

Screen shot:

Sentry Advanced Deployment Configuration

Vercel

Slack

Sentry with Next.js

Installing 📥

Automatic Configuration 🛠

Modify next.config.js 🔧

Backend 🔙

Testing 🧪

Deployment (Vercel) 🛫

Reinforcement learning in Super Mario bros Pt.2

🚂 Train the model to play

Finally ✨

Below implementation custom color's with Mui/Joy & Material with Next.js `/page` route