In the web development world, managing JavaScript efficiently can be challenging. Bundlers help by combining multiple files into one, making the code easier to manage and deploy. While tools like Webpack...

## Introduction
In the web development world, managing JavaScript efficiently can be challenging. Bundlers help by combining multiple files into one, making the code easier to manage and deploy. While tools like Webpack and Rollup offer many features, sometimes a simpler solution is preferable. This guide will show you how to create your own simplistic JS bundler using bun.sh, covering dependency resolution, code transpilation, output generation, and detecting circular dependency, providing a straightforward approach to bundling your JavaScript projects.

## What is bun?
Bun.sh is an innovative JavaScript runtime and toolkit that aims to simplify and enhance the development experience for JavaScript developers. It provides a suite of powerful tools and features, including a bundler, package manager, test runner, all integrated into a single platform. One of the key feature of bun is the Bundler which we are going to use in our project.

**Bundler**: One of the core features of bun.sh is its bundler, which allows developers to bundle JavaScript files and their dependencies into a single, optimized output file. This simplifies the deployment process and improves performance by reducing the number of HTTP requests required to load a web page. Below is a simple example of how you can use bun.sh to bundle your JavaScript files:

```sh
# Install bun.sh globally
npm install -g bun

# Bundle your JavaScript files
bun bundle entry.js -o bundle.js
```

## Let's get started 

### Importing Required Modules

```js
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import { execa } from 'execa';
```

(PS: make sure your `type` in package.json is set to **module** i.e. `"type": "module"`)

- `fs` module: This is used for reading and writing files.
- `path` module: This helps in handling and transforming file paths.
- `url` module: This converts `import.meta.url` to a file path, which is necessary to determine the current file's location.
- `execa` module: This is used to run external commands, in this case, to run the Bun CLI for transpiling code.


### Setting Up Paths
Converting URL to File Path:
```js
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
```
These lines determine the file name and directory name of the current module.

### Helper Functions

1. _`readFile` helper function_:

```js
const readFile = (filePath) => {
  return fs.readFileSync(filePath, 'utf-8');
};
```
The above snippet reads a file synchronously and returns its content as a string.

2. _`resolveModule` path helper function_:

```js
const resolveModule = (filePath, baseDir) => {
  if (filePath.startsWith('.')) {
    return path.resolve(baseDir, filePath);
  }
  return require.resolve(filePath, { paths: [baseDir] });
};
```

Resolves the path of a module. If the path is relative _(starts with **.**)_, it resolves it relative to baseDir. Otherwise, it uses Node.js's require.resolve to find the module.

3. _transpiling code using Bun CLI_:

```js
const transpileCode = async (filePath) => {
  const { stdout } = await execa('bun', ['build', filePath, '--outfile', '/dev/stdout']);
  let filteredOutput = stdout
    .split('\n')
    .filter(line => !line.includes('stdout') && !line.match(/^\[\d+ms\]/))
    .join('\n');

  filteredOutput = filteredOutput.replace(/export\s+default\s+/g, 'module.exports = ');
  return filteredOutput;
};
```

This function runs the Bun CLI to transpile the file at filePath. It filters out unwanted Bun messages and replaces `export default` with `module.exports =` for CommonJS compatibility.

### Main bundling function:

```js
const bundleFiles = async (entryFile) => {
  let modules = {};
  let id = 0;
  let moduleStack = [];
  
  const addModule = async (filePath) => {
    if (modules[filePath]) {
      return modules[filePath].id;
    }

    if (moduleStack.includes(filePath)) {
      console.warn(`Circular dependency detected: ${moduleStack.join(' -> ')} -> ${filePath}`);
      return;
    }

    moduleStack.push(filePath);
    const moduleId = id++;
    const content = readFile(filePath);
    const dirName = path.dirname(filePath);

    const dependencies = [];
    const requireRegex = /require$['"](.+?)['"]$/g;
    const importRegex = /import .* from ['"](.+?)['"]/g;
    let match;

    while ((match = requireRegex.exec(content)) !== null) {
      dependencies.push(match[1]);
    }
    while ((match = importRegex.exec(content)) !== null) {
      dependencies.push(match[1]);
    }

    const resolvedDependencies = dependencies.map(dep => resolveModule(dep, dirName));
    const transpiledContent = await transpileCode(filePath);

    modules[filePath] = {
      id: moduleId,
      filePath,
      content: transpiledContent,
      dependencies: resolvedDependencies,
    };

    await Promise.all(resolvedDependencies.map(async (dep) => {
      if (moduleStack.includes(dep)) {
        console.warn(`Circular dependency detected: ${moduleStack.join(' -> ')} -> ${dep}`);
      } else {
        await addModule(dep);
      }
    }));

    moduleStack.pop();
    return moduleId;
  };

  await addModule(entryFile);

  const output = [];
  output.push(`
  (function(modules) {
    var installedModules = {};

    function require(moduleId) {
      if (installedModules[moduleId]) {
        return installedModules[moduleId].exports;
      }

      var module = installedModules[moduleId] = {
        id: moduleId,
        loaded: false,
        exports: {}
      };

      modules[moduleId].call(module.exports, module, module.exports, require);
      module.loaded = true;
      return module.exports;
    }

    return require(${modules[entryFile].id});
  })({
  `);

  Object.values(modules).forEach(module => {
    output.push(`  ${module.id}: function(module, exports, require) {`);
    output.push(module.content);
    output.push(`  },`);
  });

  output.push(`});`);
  return output.join('\n');
};
```




The `bundleFiles()` function is designed to take an entry JavaScript file and bundle it along with its dependencies into a single output file. This involves reading the files, resolving dependencies, transpiling the code, detecting circular dependencies, and finally constructing a bundled output.

- module storage and ID Counter:
    - modules: An object to store information about each module (file).
    - id: A counter to assign unique IDs to each module.
    - moduleStack: An array to keep track of the module processing stack for circular dependency detection.

    ```js
    let modules = {};
    let id = 0;
    let moduleStack = [];
    ```

- `addModule()` function
The core of `bundleFiles` is the `addModule` function which processes each module.

    - check for already processed module:

    ```js
    if (modules[filePath]) {
      return modules[filePath].id;
    }
    ```
    - if the module (file) has already been processed, return its ID to avoid redundant processing.
    - *Circular Dependency Detection*: If the module is already in the stack, it means there's a circular dependency. A warning is logged, and the function returns to prevent an infinite loop.

    ```js
    if (moduleStack.includes(filePath)) {
      console.warn(`Circular dependency detected: ${moduleStack.join(' -> ')} -> ${filePath}`);
      return;
    }
    ```

    - push module to stack:
    ```js
    moduleStack.push(filePath);
    ```

    - assign unique ID and read file content:
        - assign a unique ID to the module.
        - read the file content.
        - determine the directory name of the file for resolving relative paths.
    ```js
    const moduleId = id++;
    const content = readFile(filePath);
    const dirName = path.dirname(filePath);
    ```

    - extract dependencies: use regular expressions to find all require and import statements and extract their paths.

    ```js
    const dependencies = [];
    const requireRegex = /require$['"](.+?)['"]$/g;
    const importRegex = /import .* from ['"](.+?)['"]/g;
    let match;

    while ((match = requireRegex.exec(content)) !== null) {
      dependencies.push(match[1]);
    }
    while ((match = importRegex.exec(content)) !== null) {
      dependencies.push(match[1]);
    }
    ```

    - resolve dependencies: resolve the dependency paths relative to the current file's directory.

    ```js
    const resolvedDependencies = dependencies.map(dep => resolveModule(dep, dirName));
    ```

    - transpile the code: transpile the file content using the Bun CLI to ensure compatibility and to handle ES modules.

    ```js
    const transpiledContent = await transpileCode(filePath);
    ```

    - Store Module Information:

    ```js
    modules[filePath] = {
      id: moduleId,
      filePath,
      content: transpiledContent,
      dependencies: resolvedDependencies,
    };
    ```

     - process dependencies recursively:
        - For each resolved dependency, recursively call addModule.
        - If a circular dependency is detected during this process, log a warning.

    ```js
    await Promise.all(resolvedDependencies.map(async (dep) => {
      if (moduleStack.includes(dep)) {
        console.warn(`Circular dependency detected: ${moduleStack.join(' -> ')} -> ${dep}`);
      } else {
        await addModule(dep);
      }
    }));
    ```


    - pop module from stack:
    ```js
    moduleStack.pop();
    ```

    - Return Module ID:
    ```js
    return moduleId;
    ```

    - initial call to `addModule`: process entry file
    ```js
    await addModule(entryFile);
    ```

    - constructing the bundled output
        - create an array output to store the bundled code.
        - push the initial part of the IIFE (Immediately Invoked Function Expression) that will emulate the module system.
    ```js
    const output = [];
    output.push(`
    (function(modules) {
      var installedModules = {};

      function require(moduleId) {
        if (installedModules[moduleId]) {
          return installedModules[moduleId].exports;
        }

        var module = installedModules[moduleId] = {
          id: moduleId,
          loaded: false,
          exports: {}
        };

        modules[moduleId].call(module.exports, module, module.exports, require);
        module.loaded = true;
        return module.exports;
      }

      return require(${modules[entryFile].id});
    })({
    `);
    ```

    - add each module to output:
    ```js
    Object.values(modules).forEach(module => {
      output.push(`  ${module.id}: function(module, exports, require) {`);
      output.push(module.content);
      output.push(`  },`);
    });
    ```

    - finalize the output:
    ```js
    output.push(`});`);
    ```

    - join and return the final output:
    ```js
    return output.join('\n');
    ```
    

_**gyst of `bundleFiles()` function:**_

- initializes storage for modules and a unique ID counter.
- defines a recursive addModule function to process each module and its dependencies.
- reads and transpiles each module, resolving dependencies and checking for circular dependencies.
- constructs a single bundled output in the form of an IIFE, emulating a module system.
- returns the final bundled code as a string.


### Entrypoint - `main()` function:

```js
const main = async () => {
  const entryFile = path.resolve(__dirname, 'target', 'index.js');
  const bundle = await bundleFiles(entryFile);
  const outputPath = path.resolve(__dirname, 'dist', 'bundle.js');

  if (!fs.existsSync(path.dirname(outputPath))) {
    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
  }

  fs.writeFileSync(outputPath, bundle, 'utf-8');
  console.log(`Bundle created at ${outputPath}`);
};

main();
```


- defines entry file: sets the entry file to `target/index.js`.
- bundles files: calls `bundleFiles()` with the entry file and receives the bundled code.
- ensures o/p directory exists: creates the output directory if it doesn't exist.
- writes bundle to o/p file: Writes the bundled code to `dist/bundle.js`.
- logs success message: logs the location of the created bundle.

## Conclusion
The code is a simplistic JS bundler that:

- reads and resolves dependencies from a target entry file.
- transpiles the code using the Bun CLI.
- detects circular dependencies.
- constructs a single bundled output file that emulates a module system

Here's the link to the complete code for your reference:
[github.com/CIPHERTron/bundlify](https://github.com/CIPHERTron/bundlify)

Bundlify: Creating Your Own JS Bundler with bun.sh

React hooks have revolutionized the way we write functional components. They allow us to extract and reuse stateful logic, making our code more modular and easier to manage. In this article, we...


React hooks have revolutionized the way we write functional components. They allow us to extract and reuse stateful logic, making our code more modular and easier to manage. In this article, we will explore how custom hooks can make your React code cleaner and your components smarter. We will illustrate this by comparing a timer component implemented with and without a custom hook.

## The Problem: A Timer Component
Imagine you need to build a timer component with start, pause, and reset functionalities. Without custom hooks, the logic for managing the timer would be embedded directly within the component. This approach can quickly become unwieldy, especially as the complexity of your application grows.

### Timer Component Without Custom Hooks
First, let's look at how we might implement a timer component without using custom hooks:

```js
import React, { useState, useEffect, useRef, useCallback } from "react";

function Timer() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const timerId = useRef(null);

  const start = useCallback(() => {
    if (!isRunning) {
      setIsRunning(true);
      timerId.current = setInterval(() => {
        setTime((prevTime) => prevTime + 1);
      }, 1000);
    }
  }, [isRunning]);

  const pause = useCallback(() => {
    if (isRunning) {
      setIsRunning(false);
      clearInterval(timerId.current);
    }
  }, [isRunning]);

  const reset = useCallback(() => {
    setIsRunning(false);
    clearInterval(timerId.current);
    setTime(0);
  }, []);

  useEffect(() => {
    return () => clearInterval(timerId.current);
  }, []);

  return (
    <div>
      <h1>{time}</h1>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Timer;
```


### Issues with This Approach
**Reusability**: The timer logic is tightly coupled with the Timer component, making it difficult to reuse in other components.
**Readability**: As the component grows, it becomes harder to read and maintain due to the intermingling of timer logic and UI rendering logic.
**Testing**: Testing the timer logic requires rendering the entire component, complicating unit tests.

### The Solution: Using a Custom Hook

To solve these issues, we can extract the timer logic into a custom hook. This separation of concerns not only makes our code cleaner but also enhances reusability and testability.

### Creating the Custom Hook
Here's how we can refactor the timer logic into a custom hook:

```js
import { useState, useEffect, useCallback, useRef } from "react";

function useTimer(initialTime = 0) {
  const [time, setTime] = useState(initialTime);
  const [isRunning, setIsRunning] = useState(false);
  const timerId = useRef(null);

  const start = useCallback(() => {
    if (!isRunning) {
      setIsRunning(true);
      timerId.current = setInterval(() => {
        setTime((prevTime) => prevTime + 1);
      }, 1000);
    }
  }, [isRunning]);

  const pause = useCallback(() => {
    if (isRunning) {
      setIsRunning(false);
      clearInterval(timerId.current);
    }
  }, [isRunning]);

  const reset = useCallback(() => {
    setIsRunning(false);
    clearInterval(timerId.current);
    setTime(initialTime);
  }, [initialTime]);

  useEffect(() => {
    return () => clearInterval(timerId.current);
  }, []);

  return { time, start, pause, reset };
}

export default useTimer;
```

### Using the Custom Hook in a Component
Now, let's use this custom hook in our Timer component:

```js
import React from "react";
import useTimer from "./useTimer";

function Timer() {
  const { time, start, pause, reset } = useTimer(0);

  return (
    <div>
      <h1>{time}</h1>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Timer;
```

### Benefits of Using the Custom Hook
**Reusability**: The useTimer hook can be easily reused in other components or even different projects.
**Separation of Concerns**: The timer logic is isolated from the UI rendering logic, making both easier to understand and maintain.
**Readability**: The Timer component is now cleaner and more focused on rendering the UI.
**Testing**: The timer logic can be tested independently of the component rendering, simplifying unit tests.

## Conclusion
Custom hooks in React provide a powerful way to encapsulate and reuse stateful logic. By refactoring our timer logic into a custom hook, we made our code cleaner, more modular, and easier to maintain. This approach not only enhances the readability of our components but also promotes better code reuse and testing practices.

By leveraging custom hooks, you can keep your React components simple and focused on what they do best: rendering UI. Meanwhile, the logic that drives your application can live in reusable, isolated hooks, making your codebase cleaner and your development process more efficient.

## Link to devbox
Here's this link to the devbox - [codesandbox.io/p/devbox/timer-custom-hook-mcz3rf](https://codesandbox.io/p/devbox/timer-custom-hook-mcz3rf)

Custom Hooks: The Secret to Cleaner, Smarter React Components

React's useEffect hook is fundamental for managing side effects in functional components. While React provides the native useEffect hook to...


## Introduction
React's useEffect hook is fundamental for managing side effects in functional components. While React provides the native useEffect hook to handle these side effects, understanding its inner workings by building a custom version can be enlightening. In this article, we'll embark on the journey of creating a useEffect-like hook from scratch, without utilizing React's built-in useEffect.

## Understanding useEffect
Before diving into the implementation, let's briefly recap what useEffect does and how it's typically used in React components.

The useEffect hook allows developers to perform side effects in functional components. It accepts a function (the effect) and an optional array of dependencies. The effect function is called after every render and can be used for various tasks like data fetching, subscriptions, or DOM manipulations. The dependencies array allows us to control when the effect runs by specifying the values it depends on.

## Anatomy of useEffect
To build our custom useEffect hook, we need to replicate its core functionality. Here's what our custom useEffect will do:

- Execute a callback function after every render cycle.
- Allow specifying dependencies to control when the effect runs.

## Step-by-Step Implementation
Let's break down the implementation of our custom useEffect hook into smaller steps:

### Creating the Custom Hook

```ts
import { useState, useRef } from 'react';

function useCustomEffect(callback, dependencies) {
  const previousDeps = useRef([]);
  const isFirstRender = useRef(true);

  if (!isFirstRender.current) {
    const areDepsChanged = dependencies.some(
      (dep, index) => dep !== previousDeps.current[index]
    );
    if (!areDepsChanged) return;
  }

  if (isFirstRender.current) {
    isFirstRender.current = false;
  }

  previousDeps.current = dependencies;

  callback();
}
```

In this code snippet:
- We define a function called useCustomEffect that takes a callback function and an array of dependencies as arguments.
- We use useRef to maintain a reference to the previous dependencies and a flag to track the first render.
- On subsequent renders, we compare the current dependencies with the previous dependencies. If they are the same, we skip running the effect.
- We update the previous dependencies and execute the callback function.

### Usage Example
Now that we've implemented our custom useEffect hook, let's see how we can use it in a React component.

```ts
import React, { useState } from 'react';
import useCustomEffect from './useCustomEffect';

function MyComponent() {
  const [count, setCount] = useState(0);

  useCustomEffect(() => {
    console.log('Effect ran');
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        Increment Count
      </button>
    </div>
  );
}

export default MyComponent;
```

In this example, we're using our custom useEffect hook to log a message whenever the count state changes. The effect will only run when the count changes, similar to React's native useEffect.

## Conclusion
In this article, we've explored how to create a custom useEffect-like hook in React without relying on the native useEffect provided by React. By understanding the core concepts of useEffect and leveraging React's useRef hook, we were able to replicate its functionality. Building custom hooks not only enhances your understanding of React but also empowers you to create tailored solutions for your applications.


Crafting React's useEffect Magic: Building a Custom Side Effect Hook Without useEffect

tRPC simplifies the creation and consumption of completely type-safe APIs without relying on schemas or code generation. This framework is designed for...


tRPC simplifies the creation and consumption of completely type-safe APIs without relying on schemas or code generation. This framework is designed for developing end-to-end type-safe APIs using TypeScript.

Given the increasing demand for type-safe APIs, tRPC emerges as an excellent solution for both building and utilizing APIs. It ensures that endpoints are written with type safety in mind, applicable to both the frontend and backend of your application. By identifying type errors within API contracts during the build phase, it significantly reduces the potential for runtime bugs in your application.

## Some of the benefits of using tRPC include:

- Comprehensive static typesafety and autocomplete features on the client side, covering inputs, outputs, and errors.
- A streamlined developer experience, free from code generation, runtime bloat, or complex build pipelines.
- Framework agnosticism, enabling compatibility with various frameworks such as Next.js, Express, etc.
- Support for request batching, automatically consolidating simultaneous requests into a single one

## Project setup
We will be using the latest version of next.js 14 to create a new app. We can use the following command to create a new next.js app with **app router**.

```bash
npx create-next-app@latest
```

We will be using MongoDB as our database and tRPC to create our API endpoints and Mongoose as our ODM for MongoDB.

```bash
npm install mongoose @trpc/client @trpc/server zod @trpc/next @tanstack/react-query@4.18.0 @trpc/react-query superjson
```

## Setting up Mongoose
We will create a new folder db in the root of our project. This folder will contain the setup for our MongoDB connection.

```ts
// db/mongoose.ts
 
import mongoose from 'mongoose';
declare global {
  var mongoose: any;
}
 
const MONGODB_URI = process.env.MONGODB_URI!;
 
if (!MONGODB_URI) {
  throw new Error(
    'Please define the MONGODB_URI environment variable inside .env.local'
  );
}
 
let cached = global.mongoose;
 
if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}
 
async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }
  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
    };
    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
      return mongoose;
    });
  }
  try {
    cached.conn = await cached.promise;
  } catch (e) {
    cached.promise = null;
    throw e;
  }
 
  return cached.conn;
}
 
export default dbConnect;
```

Here's a simplified MongoDB connection setup using `mongoose.connect`. In Next.js, it's recommended to use global to maintain a persistent connection to the database, ensuring we don't establish a new connection with every app re-render.

To organize our MongoDB models, we'll create a new folder called "**models**" at the root of our project. This directory will house all the necessary models for interacting with our MongoDB database.

```ts
// models/user-model.ts
 
import mongoose from 'mongoose';
 
export interface User {
  name: string;
  email: string;
  password: string;
}
 
export interface MongoUser extends User, mongoose.Document {}
 
export type TUser = User & {
  _id: string;
  createdAt: string;
  updatedAt: string;
};
 
const UserSchema = new mongoose.Schema<User>({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
  },
  password: {
    type: String,
    required: true,
  },
});
 
export default mongoose.models.User || mongoose.model<User>('User', UserSchema);
```

## Setting up tRPC
In the root of our project, we'll establish a new folder named "trpc-server". This directory will host the tRPC setup for our application.

```ts
// trpc-server/index.ts
 
import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
 
import { createContext } from './context';
 
const t = initTRPC.context<typeof createContext>().create({
  transformer: superjson,
});
 
export const createCallerFactory = t.createCallerFactory;
export const router = t.router;
export const publicProcedure = t.procedure;
```

Following the tRPC server initialization, we've opted to utilize superjson as our JSON serialization transformer.

Moving forward, our next step involves the creation of a new file named `context.ts` within the same directory.

```ts
// trpc-server/context.ts
 
export const createContext = async () => {
  // const session = await auth()
 
  return {
    // session,
  };
};
```

Next, we proceed to define our API endpoints. To achieve this, we'll establish a new file named "router.ts" within the aforementioned directory.

```ts
// trpc-server/router.ts
 
import { router, publicProcedure } from './index';
import { z } from 'zod';
import userModel, { TUser } from '@/models/user-model';
import dbConnect from '@/db/mongoose';
 
export const appRouter = router({
  createUser: publicProcedure
    .input((v) => {
      const schema = z.object({
        name: z.string(),
        email: z.string().email(),
        password: z.string(),
      });
      const result = schema.safeParse(v);
      if (!result.success) {
        throw result.error;
      }
      return result.data;
    })
    .mutation(async (params) => {
      await dbConnect();
      const user: TUser = await userModel.create({
        ...params.input,
      });
 
      return {
        user,
      };
    }),
 
  getUser: publicProcedure.query(async () => {
    await dbConnect();
    const users: TUser[] = await userModel.aggregate([
      {
        $project: {
          name: 1,
          email: 1,
          _id: {
            $toString: '$_id',
          },
        },
      },
    ]);
    return users;
  }),
});
 
export type AppRouter = typeof appRouter;
```

We've outlined two endpoints, namely `createUser` and `getUser`. In the process, we've integrated `Zod` for input validation and employed Mongoose for seamless interaction with our MongoDB database.

## Setting up tRPC with Next.js


In the root directory of our project, we'll establish a new folder named `trpc-client`. This directory will serve as the location for configuring our tRPC client setup.

```ts
// trpc-client/client.ts
 
import { AppRouter } from '@/trpc-server/router';
import { createTRPCReact } from '@trpc/react-query';
 
export const trpc = createTRPCReact<AppRouter>({});
```

Our tRPC client setup has been configured using `@trpc/react-query`, aligning with our choice to utilize React Query for data fetching and mutations within our client components.

To facilitate data fetching and mutations on our server, we'll create a new file named `server-client.ts` within the same folder.

```ts
// trpc-client/server-client.ts
 
import { createCallerFactory } from '@/trpc-server';
import { createContext } from '@/trpc-server/context';
import { appRouter } from '@/trpc-server/router';
 
const createCaller = createCallerFactory(appRouter);
 
export const serverClient = createCaller(createContext());
```

With the above setup, we can now use `serverClient` to fetch data or do mutations in our server.

## Exposing tRPC endpoints to the client
To make our tRPC endpoints accessible to the client, we'll establish a new folder within the `app` directory named `api`. This designated folder will encompass the necessary setup for our **tRPC** **endpoints**.

```ts
// app/api/trpc/[trpc]/route.ts
 
import { createContext } from '@/trpc-server/context';
import { appRouter } from '@/trpc-server/router';
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
 
const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext: async () => await createContext(),
  });
 
export { handler as GET, handler as POST };
```

We have setup our tRPC endpoints using `@trpc/server/adapters/fetch`. This will allow us to use fetch to make requests to our tRPC server.

## Wrapping our app with tRPC provider using React Query
We will create a `lib` folder in the root of our project. This folder will contain the setup for our tRPC provider.

```ts
// lib/reactQuery-provider.tsx
 
'use client';
 
import React, { ReactNode, useState } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import superjson from 'superjson';
import { trpc } from '@/trpc-client/client';
 
const url = 'http://localhost:3000/api/trpc';
 
export const Provider = ({ children }: { children: ReactNode }) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
          },
        },
      })
  );
 
  const trpcClient = trpc.createClient({
    transformer: superjson,
    links: [
      httpBatchLink({
        url: url,
      }),
    ],
  });
 
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
};
```


To enable the usage of tRPC with React Query throughout our application, we can wrap the root component of our app with the `Provider` component.

```ts
// app/layout.tsx
 
import { Provider } from '@/lib/reactQuery-provider';
 
<html lang="en" suppressHydrationWarning>
  <body className={inter.className}>
    <Provider>{children}</Provider>
  </body>
</html>;
```

## Using tRPC endpoints in our components
we can use the `getUser` endpoint in our components to fetch data from our server.

```ts
// app/page.tsx
 
import { serverClient } from '@/trpc-client/server-client';
 
const Page = async () => {
  const user = await serverClient.getUser();
 
  console.log(user);
 
  return <div>hELLO tRPC</div>;
};
 
export default Page;
```

to create new user we can use the `createUser` endpoint in our client component.

```ts
// component/createUser.tsx
 
'use client';
import { trpc } from '@/trpc-client/client';
 
const CreateUser = () => {
  const { data, mutate } = trpc.createUser.useMutation();
 
  console.log(data);
 
  return (
    <button
      onClick={() =>
        mutate({ name: 'test', email: 'test12@gmail.com', password: '123456' })
      }
    >
      Create User
    </button>
  );
};
 
export default CreateUser;
```

With the outlined setup, we've effectively configured tRPC with Next.js 14 and MongoDB. This allows us to leverage tRPC for both creating and consuming type-safe APIs within our application.

## Conclusion
tRPC stands out as an excellent option for building and consuming APIs. It ensures that endpoint creation is inherently type-safe, applicable to both the frontend and backend of your application. By catching type errors within API contracts during the build phase, it significantly mitigates the potential for runtime bugs in your application.


Creating Typesafe APIs with Nextjs & tRPC

In the ever-evolving landscape of software development, programming languages play a vital role in shaping the way we build and deploy...


## Resources to learn Go
- [Go's official documentation](https://go.dev/doc/effective_go)
- [Go By Example](https://gobyexample.com/)
- [Go Web Examples](https://gowebexamples.com/)
- [Gophercises by Jon Calhoun](https://gophercises.com/)
- [50 Shades of Go by Kyle Quest](https://golang50shad.es/)
- [Practical Go by Dave Cheney](https://dave.cheney.net/practical-go)
- [Kavya Joshi Blogs](https://kavyajoshi.me/)
- [Mini Resources list by Kasia](https://dev.to/kasia/mini-resource-list-for-golang-m87)
- [Golang Minutes by Pritish](https://pritish007.notion.site/Golang-Minutes-4410500d76744b3aaa3aefb703e3c649)


## Introduction
In the ever-evolving landscape of software development, programming languages play a vital role in shaping the way we build and deploy applications. Among the myriad of programming languages available, Go, also known as Golang, has gained significant popularity due to its simplicity, performance, and robustness. Created by Google engineers Robert Griesemer, Rob Pike, and Ken Thompson, Go was first released in 2009 and has since become a go-to choice for developers across various domains. In this blog, we will explore the fundamental features, strengths, and use cases of Go, highlighting why it has captured the hearts of programmers around the world.

## A Brief Overview of Go
Go is an open-source, statically typed, and compiled programming language designed to be simple and efficient. It draws inspiration from several existing languages, such as C, Pascal, and Oberon, but incorporates modern language features to address the challenges faced in contemporary software development.

### Key Features
- **Simplicity**: Go's syntax is clean and concise, making it easy for developers to read and understand the code. It eliminates unnecessary complexity, favoring a straightforward and intuitive design.

- **Concurrency Support**: Go has built-in support for concurrency through goroutines and channels. Goroutines are lightweight threads that enable concurrent execution, while channels facilitate communication and synchronization between goroutines.

- **Garbage Collection**: Go comes with automatic garbage collection, which helps manage memory effectively, relieving developers from manual memory management burdens.

- **Fast Compilation**: The Go compiler, known as "gc," is highly optimized and provides quick compilation times, allowing developers to iterate and deploy their applications faster.

- **Static Typing**: Being a statically-typed language, Go performs type-checking at compile-time, catching potential errors early in the development process.

- **Standard Library**: Go ships with a robust standard library, providing a wide range of packages for various tasks like networking, file I/O, encoding/decoding, and much more, reducing the need for third-party dependencies.

- **Cross-platform Support**: Go supports compilation to multiple platforms, enabling developers to write code once and deploy it on various operating systems with minimal modifications.

- **Open Source**: Go is licensed under the BSD-style license, making it freely available to the community. This fosters an active and enthusiastic developer base, leading to continuous improvements and enhancements.

## Getting Started with Go
Before diving into Go programming, you need to set up the development environment. Go's official website (https://golang.org) provides installation binaries for all major operating systems. Once installed, you can confirm the installation by running a simple "Hello, World!" program.

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
```

Save the code in a file with a ".go" extension (e.g., hello.go) and run it using the following command:

```bash
$ go run hello.go
```

If everything is set up correctly, you should see "Hello, World!" printed on the console.

## Language Syntax
Go's syntax is straightforward and easy to grasp, making it an excellent choice for developers coming from different programming backgrounds. Let's take a closer look at some essential elements of Go's syntax.

### Variables and Constants
In Go, variables are declared using the var keyword, followed by the variable name and its type.

```go
package main

import "fmt"

func main() {
    var age int
    age = 30

    fmt.Println("Age:", age)
}
```

Constants are defined using the const keyword, and their values cannot be changed during runtime.

```go
package main

import "fmt"

func main() {
    const pi = 3.14
    fmt.Println("Value of Pi:", pi)
}
```

### Control Structures
Go supports familiar control structures like if, for, and switch.

```go
package main

import "fmt"

func main() {
    // if-else
    num := 10
    if num%2 == 0 {
        fmt.Println("Even")
    } else {
        fmt.Println("Odd")
    }

    // for loop
    for i := 1; i <= 5; i++ {
        fmt.Println(i)
    }

    // switch
    fruit := "apple"
    switch fruit {
    case "apple":
        fmt.Println("It's an apple.")
    case "banana":
        fmt.Println("It's a banana.")
    default:
        fmt.Println("Unknown fruit.")
    }
}
```

### Functions
Functions in Go are defined using the func keyword, followed by the function name, parameters, return type (if any), and the function body.

```go
package main

import "fmt"

func add(a, b int) int {
    return a + b
}

func main() {
    result := add(3, 7)
    fmt.Println("Result:", result)
}
```

### Structs
Go allows developers to define custom data types using structs, which can encapsulate different fields.

```go
package main

import "fmt"

type Person struct {
    Name   string
    Age    int
    Email  string
}

func main() {
    person := Person{
        Name:   "John Doe",
        Age:    30,
        Email:  "john.doe@example.com",
    }

    fmt.Println("Name:", person.Name)
    fmt.Println("Age:", person.Age)
    fmt.Println("Email:", person.Email)
}
```

## Concurrency in Go
One of the standout features of Go is its built-in support for concurrency. Concurrency allows programs to execute multiple tasks independently, resulting in improved performance and resource utilization. In Go, concurrency is achieved using goroutines and channels.

### Goroutines
A goroutine is a lightweight thread managed by the Go runtime. Unlike traditional threads, which are relatively heavy and may consume substantial memory, goroutines are highly efficient and have minimal overhead. They enable concurrent execution of functions, making it easy to perform tasks concurrently.

To create a goroutine, you need to use the go keyword before the function call.

```go
package main

import (
    "fmt"
    "time"
)

func task() {
    for i := 1; i <= 5; i++ {
        fmt.Println("Task", i)
        time.Sleep(time.Second)
    }
}

func main() {
    fmt.Println("Main started.")
    go task()
    time.Sleep(5 * time.Second)
    fmt.Println("Main completed.")
}
```

In this example, the task function is executed as a goroutine concurrently with the main function. Without using go, the output would be sequential; however, with goroutines, the tasks are interleaved, demonstrating concurrent behavior.

### Channels
Channels are communication primitives in Go, used for passing data between goroutines. They provide a safe and synchronized way to exchange information, allowing goroutines to communicate without race conditions.

Channels can be created using the make function with the chan keyword, specifying the type of data they will transmit.

```go
package main

import "fmt"

func sum(values []int, ch chan int) {
    result := 0
    for _, num := range values {
        result += num
    }
    ch <- result // Send result through the channel
}

func main() {
    numbers := []int{1, 2, 3, 4, 5}
    resultChannel := make(chan int)

    go sum(numbers, resultChannel)

    result := <-resultChannel // Receive result from the channel
    fmt.Println("Sum:", result)
}
```

In this example, the sum function calculates the sum of numbers and sends the result back through the ch channel. The main function creates a channel, calls sum as a goroutine, and then receives the result from the channel.

## Go's Standard Library
Go's standard library is rich with functionality, covering a wide range of tasks. Let's take a brief look at some of the packages provided by the standard library.

### net/http Package
The `net/http` package allows you to build web servers and web clients effortlessly. It provides functions to handle HTTP requests, responses, and routing.

```go
package main

import (
    "fmt"
    "net/http"
)

func helloHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hello, Go!")
}

func main() {
    http.HandleFunc("/", helloHandler)
    http.ListenAndServe(":8080", nil)
}
```

In this example, a simple HTTP server is created using the net/http package. When a request is made to the root ("/") of the server, the helloHandler function responds with "Hello, Go!".

### encoding/json Package
The `encoding/json` package provides functions to encode and decode JSON data. It is extensively used for working with JSON data in web applications and APIs.

```go
package main

import (
    "encoding/json"
    "fmt"
)

type Person struct {
    Name  string `json:"name"`
    Age   int    `json:"age"`
    Email string `json:"email"`
}

func main() {
    jsonString := `{"name": "John Doe", "age": 30, "email": "john.doe@example.com"}`
    var person Person

    err := json.Unmarshal([]byte(jsonString), &person)
    if err != nil {
        fmt.Println("Error:", err)
        return
    }

    fmt.Println("Name:", person.Name)
    fmt.Println("Age:", person.Age)
    fmt.Println("Email:", person.Email)

    // Encoding to JSON
    newPerson := Person{
        Name:  "Jane Smith",
        Age:   25,
        Email: "jane.smith@example.com",
    }

    newJSON, err := json.Marshal(newPerson)
    if err != nil {
        fmt.Println("Error:", err)
        return
    }

    fmt.Println("New JSON:", string(newJSON))
}
```

In this example, the Person struct is used to unmarshal the JSON data into a Go struct and marshal a new struct back to JSON.

## Conclusion
Go has proven itself to be a powerful and efficient programming language for building a variety of applications. Its simplicity, concurrency support, and performance make it an attractive choice for developers aiming to achieve scalability and maintainability in their projects.

In this blog, we've only scratched the surface of what Go has to offer. As you delve deeper into the language, you'll discover its vast ecosystem of libraries, frameworks, and tools that further simplify and enhance the development experience.

If you're looking for a language that strikes a balance between simplicity and power, Go is undoubtedly a language worth exploring. Whether you're a seasoned developer or just starting your programming journey, Go's approachable syntax and performance capabilities make it an excellent addition to your programming toolkit.



Introduction to Go: A Powerful and Efficient Programming Language

The Kyverno Command Line Interface (CLI) is designed to validate and test policy behavior to resources prior to adding them to a cluster...


"_The Kyverno Command Line Interface (CLI) is designed to validate and test policy behavior to resources prior to adding them to a cluster. The CLI can be used in CI/CD pipelines to assist with the resource authoring process to ensure they conform to standards prior to them being deployed._"

You can install and use the kyverno cli using [`krew`](https://kyverno.io/docs/kyverno-cli/#install-via-krew), [`yay`](https://kyverno.io/docs/kyverno-cli/#install-via-aur-archlinux) or by directly [building it from source](https://kyverno.io/docs/kyverno-cli/#building-the-cli-from-source). But here, we will see how to use kyverno CLI in development mode. Basically the usage remains the same except that here, you've to execute the Go package i.e. `cmd/cli/kubectl-kyverno/main.go` which essentially calls the kyverno CLI.

### Prerequisite

The only pre-requisite is that you need to have [Go](https://golang.org/) installed and set-up correctly in your local development workspace. Also, your Go version must be greater than `1.16` thus it is recommended to install the latest release. Here's a great set of resources that can help you set-up Go development in your local environment.

- You can download the latest binary release of [Go](https://golang.org/) from [here](https://golang.org/dl/)
- https://learn.gopherguides.com/courses/preparing-your-environment-for-go-development
- If you're on a Windows machine, follow [this](https://learn.gopherguides.com/courses/preparing-your-environment-for-go-development/modules/setting-up-windows/)
- If you're on a Mac or Linux machine, follow [this](https://learn.gopherguides.com/courses/preparing-your-environment-for-go-development/modules/setting-up-mac-linux/)

## Example

Let's say you've to run the `test` command to `validate` the [Disallow Latest Tag](https://kyverno.io/policies/best-practices/disallow_latest_tag/disallow_latest_tag/) policy.
To do this using the kyverno CLI, you run: <br>

```bash
kyverno test ../policies/best-practices/disallow_latest_tag
```

But to use the kyverno CLI in the development mode, follow these steps:

1. Make sure you've cloned the fork of [`kyverno/kyverno`](https://github.com/kyverno/kyverno) and [`kyverno/policies`](https://github.com/kyverno/policies) in the same directory. Your workspace should be looking something like this:

```bash
/kyverno
    api
    charts
    cmd
    definitions
    docs...

/policies
    best-practices
    cert-manager
    other
    pod-security...
```

2. `cd` into `kyverno` directory _(which is your local fork of [`kyverno/kyverno`](https://github.com/kyverno/kyverno))_
3. Run the below mentioned command:

```bash
go run ./cmd/cli/kubectl-kyverno/main.go test ../policies/best-practices/disallow_latest_tag
```

4. On executing the above command, you'll get an output as follows:

```bash
Executing disallow_latest_tag...
applying 1 policy to 1 resource...
│───│─────────────────────│────────────────────│───────────│────────│
│ # │ POLICY              │ RULE               │ RESOURCE  │ RESULT │
│───│─────────────────────│────────────────────│───────────│────────│
│ 1 │ disallow-latest-tag │ require-image-tag  │ myapp-pod │ Pass   │
│ 2 │ disallow-latest-tag │ validate-image-tag │ myapp-pod │ Pass   │
│───│─────────────────────│────────────────────│───────────│────────│
```


Develop Kyverno CLI locally

Have you ever felt the need of an easier way to manage complex state in your React application without having to install heavy dependencies? You've arrived at the right place. Let us talk about the useReducer hook...


Hello folks :wave:
Have you ever felt the need of an easier way to manage complex state in your React application without having to install heavy dependencies? You've arrived at the right place. Let us talk about the **[useReducer()](https://reactjs.org/docs/hooks-reference.html#usereducer)** hook provided by React. You must be familiar with the **useState()** hook in React. It's basically _a hook that lets you add state to a functional value_. The **useReducer** hook, an alternative to the useState hook, also lets you _manage the state when you've a complex state logic_.

There are various state management libraries like [Redux](https://redux.js.org/), [Recoil](https://recoiljs.org/), [Easy Peasy](https://easy-peasy.vercel.app/), etc. Personally, I have used Redux to manage state and can say that the usage of **useReducer** hook is pretty much similar to that of Redux. However, there are some differences between Redux and the useReducer hook. The useReducer hook comes in-built with React but Redux is a 3rd party dependency which was built as a state management tool for JavaScript applications and not specifically for React. Also, it takes a lot of boilerplate code to set-up Redux but setting up useReducer is pretty minimal and straight forward. Today, we'll learn about managing state with useReducer hook by building a **Notes Application**.

So, I'll be demonstrating two basic functionalities of creating and deleting a note using `useReducer()`. You can find the code of the application [here](https://codesandbox.io/s/usereducer-tutorial-by-pritish-p7jc7). First, let us create a **basic controlled form** which will store the **title** and **body** of the note.

```jsx
<form>
  <input
    type="text"
    placeholder="Note Title"
    value={title}
    onChange={(e) => setTitle(e.target.value)}
  />
  <input
    type="text"
    placeholder="Note Body"
    value={body}
    onChange={(e) => setBody(e.target.value)}
  />
  <input type="submit" value="Add Note" />
</form>
```

_So, we'll be using two states (one to store the note title and the other to store note body)._

```jsx
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
```

In order to use the useReducer hook, we need to have our `actions` and `reducers` defined. The concept of actions and reducers in this case has the same use-case as that of redux. **Reducer** is nothing but _a pure function that takes an action and the previous state of the application and returns a new state_. **Actions** on the other hand _describes what happened and it is the reducer's job to return the new state based on that action_.

In this case we need two actions i.e. create and delete note which can be written as:

```js
const ACTIONS = {
  ADD_NOTE: "add-note",
  DELETE_NOTE: "delete-note",
};
```

We have our Let's initialise a `useReducer()` hook below 👇

```jsx
const [notes, dispatch] = useReducer(reducer, []);
```

Here, `notes` is the state which will store all the notes and the `dispatch` is the function of the global store using which we can _dispatch an action_. The empty array (`[]`) is the initial state of the `notes` array.

Now, let us define the `onSubmit` handler of our form:

```js
<form onSubmit={handleSubmit}>

const handleSubmit = (e) => {
 e.preventDefault();
 dispatch({ type: ACTIONS.ADD_NOTE, payload: { title: title, body: body } });
 setTitle("");
 setBody("");
}
```

The `dispatch` function will take in an object with a field named `type` which will contain the type of action we want to perform when our form is submitted. Here, we'll be passing `ACTIONS.ADD_NOTE` action. Also, we can pass an optional field named `payload`(name can be anything, not necessarily payload) and can be any type of value.

> It represents the payload of the action. Any information about the action that is not the type or status of the action should be part of the payload field.

When it comes to `reducer`, let's make one for `ADD_NOTE` action:

```js
const reducer = (notes, action) => {
  switch (action.type) {
    case ACTIONS.ADD_NOTE:
      return [...notes, newNote(action.payload.title, action.payload.body)];
    default:
      return notes;
  }
};
```

The `newNote()` function that you can see above will only return a new note object with all the properties in it. It will look like👇

```js
const newNote = (title, body) => {
  return { id: Date.now(), title: title, body: body };
};
```

On the dispatch of the `ADD_NOTE` action, it will execute its corresponding reducer and then the `notes` state will be updated with the new note.

In-order to display all the Notes, we can map through the `notes` array and we can display each note like below👇

```jsx
{
  notes.map((note) => <Note key={note.id} note={note} />);
}
```

Where, the `Note` component is the structure of a note and is imported in `App.js`.

```jsx
export default function Note({ note }) {
  return (
    <Wrapper>
      <NoteTitle>{note.title}</NoteTitle>
      <NoteBody>{note.body}</NoteBody>
      <DeleteIcon>
        <Trash2 />
      </DeleteIcon>
    </Wrapper>
  );
}
```

Now, you can see when you submit the form a new note gets added in the screen.

> PS: I've used Styled Components to style the jsx elements(personal preference) and feather icons using `react-feather`.

The first part of our application is done i.e. adding a note. Now moving on to deleting a note, we have its corresponding action as `DELETE_NOTE`. So, in order to delete a note, we require its `id` and this action needs to be dispatched when the delete button gets clicked which by the way is present in the `Note.jsx` component. Thus in-order to do the same, we can pass the `dispatch` function as a prop and then dispatch the action inside the note component.

Passing dispatch function as prop👇

```jsx
<Note key={note.id} note={note} dispatch={dispatch} />
```

And then, destructure it in `Note.jsx` and use it when the delete button is clicked. We can do that like such below👇

```jsx
export default function Note({ note, dispatch }) {
  return (
    <Wrapper>
      <NoteTitle>{note.title}</NoteTitle>
      <NoteBody>{note.body}</NoteBody>
      <DeleteIcon
        onClick={() =>
          dispatch({ type: ACTIONS.DELETE_NOTE, payload: { id: note.id } })
        }
      >
        <Trash2 />
      </DeleteIcon>
    </Wrapper>
  );
}
```

Since we require the note id inside the reducer, thus we passed it inside the payload object. Now, the final task remaining is to write a reducer function for `DELETE_NOTE` action👇

```js
case ACTIONS.DELETE_NOTE:
      return notes.filter((note) => note.id !== action.payload.id);
```

The above snippet basically traverses through the `notes` array and it makes another array with all the notes whose id doesn't matches with the `note.payload.id`.

That was basically it. Your Note Application is up and running with create and delete functionalities. I know my CSS sucks but I'm trying to become better at it. Please bear with me😂

You can find the full codebase [**here**](https://codesandbox.io/s/usereducer-tutorial-by-pritish-p7jc7). Before concluding, let me quickly walk you through the directory structure:

```bash
├── public
│   ├── index.html
├── src
│   ├── components
│   │   ├── Note.jsx // Note component
│   │   ├── Navbar.jsx // Navbar component
│   ├── store
│   │   ├── actions.js // Contains all the actions
│   │   ├── reducers.js // contains all the reducer functions
│   ├── App.js
│   ├── index.js
│   ├── styles.css
├── package.json
```

This type of structure can come handy when you've a complex state logic. Here we keep the **actions** and **reducers** separately inside a **store** directory and you just import them and use wherever required.

That was all about the `useReducer()` hook. Hope you liked it. Do like, share and comment your suggestions below. I'm trying to be consistent in publishing articles now xD. There are a few other blogs lined up too. They'll be on the **Context API** in React, beginner's guide to **Kubernetes**, **Golang Minutes**, my **MLH Prep Fellowship** experience, all about **LFX Mentorship Program**, **GitHub Campus Experts** program and many more. If you're interested in such content, do follow me [dev.to/ciphertron](https://dev.to/ciphertron). You can find more about me at [pritishsamal.xyz](https://pritishsamal.xyz).

### Relevant Links:

- [codesandbox.io/s/usereducer-tutorial-by-pritish-p7jc7](https://codesandbox.io/s/usereducer-tutorial-by-pritish-p7jc7)
- [Official React Documentation on useReducer hook](https://reactjs.org/docs/hooks-reference.html#usereducer)


useReducer Hook to the rescue!


## Table of contents:

- What is LFX Mentorship program?
- Getting into LFX Mentorship
- My LFX journey with **Kyverno**
  - Acceptance mail
  - What is Kyverno?
  - Project Abstract
  - Getting Started
  - What is Generate rule?
  - How generate policy works?
  - Test command for generate policy
  - Structure of `test.yaml`
  - Graduation
- Conclusion

---

## What is LFX Mentorship Program?

The [LFX Mentorship Program](https://lfx.linuxfoundation.org/tools/mentorship/) previously known as **Community Bridge** is a 12 week remote learning opportunity for folks enthusiastic about open-source software development in the field of Cloud Native ecosystem. This program is organised by the [Linux Foundation](https://linuxfoundation.org/) and happens in three batches per year i.e. _spring_, _summer_, & _fall_. Many famous projects take part in this mentorship program including **Kubernetes**, **Prometheus**, **Kyverno**, **OpenEBS** and many more. Till date, around 11k mentees have applied for the mentorship program and around 500 of them have been accepted into it.

---

## Getting into LFX Mentorship

I got to know about this program from one of my college senior Debabrata Panigrahi who was the first one in our college to get accepted as an LFX mentee. At that time, I had absolutely zero knowledge regarding cloud native technologies & the CNCF ecosystem. As a complete newbie would do, I applied for the summer batch of 2021 just to familiarize myself with the application process. As expected, I got a rejection mail after a couple of days.

Then I started doing some research on my own and planned to apply again during the fall. Meanwhile, I started learning Go, docker, & kubernetes and tools like prometheus and grafana because these were the tech stack used in a lot of projects. I also started to explore the CNCF ecosystem and various projects under it. That is when I came across some great communities like **Kyverno**, **Kubernetes**, **Chaos Mesh**, and **Meshery**. I joined the Kubernetes & Kyverno community because it would be too difficult for a single person to get involved in two communities with active participation given the bandwidth is pretty limited. By being active in both the communities, what I mean is:

- Joining their communication channels (slack, mailing lists, etc)
- setting up the project locally in your system
- taking up some `good-first-issues`
- attending the weekly & biweekly community meetings

The above steps would help you to understand the giant codebases better. To be honest, I wwas not able to understand even a thing or two in the community meetings. Folks often feel overwhelmed when they see a huge codebase and it's pretty normal and happens with everyone. Consistency is the key.

The applications for the fall batch of 2021 opened somewhat around the 3rd week of August. I shortlisted two project ideas under Kyverno & Chaos Mesh since the project ideas seemed like they can be accomplished by me. The application process included submitting a cover letter and resume. Although Chaos Mesh had an extra process i.e. the mentors will give an assignment and the one who completes the assignment within the given deadline and with a better architecture will be selected as a mentee. The assignment was to make a `mini-node-exporter` which can scrape the metrics from a running server using prometheus and plot them into the grafana dashboard. You can take a look at my assignment here [[click here](https://github.com/CIPHERTron/mini-node-exporter)]. Below is the feedback that I received from the project mentor. Hardluck! It was disheartening, nevertheless I got to learn and implement something new.

![feedback on chaos mesh assignment](https://res.cloudinary.com/pritish007/image/upload/v1655921398/LFX/Screenshot_2022-06-22_at_11.38.35_PM_v4hukw.png)

Thus, I got a rejection mail from LFX for the project idea under Chaos Mesh. But after a couple of days, I also got another mail from LFX stating that I have been accepted as an LFX Mentee at [Kyverno](https://kyverno.io). I was at cloud nine and my happiness was immeasurable. After that, the project mentors contacted me for the next steps and thus my LFX journey began.

![LFX Acceptance Mail](https://res.cloudinary.com/pritish007/image/upload/v1655917681/LFX/lfx-acceptance_cx0ood.jpg)

---

## My LFX journey with Kyverno

- <u>**Acceptance mail**</u> <br>
  After getting the acceptance mail, my mentors contacted me on slack and added me to a private group comprising of the mentee, mentors and co-mentors. My primary mentors were [Shuting Zhao](https://github.com/realshuting) & [Jim Bugwadia](https://github.com/JimBugwadia) and my co-mentor was [Vyankatesh Kudtarkar](https://github.com/vyankyGH).
  ![Kyverno introductions](https://res.cloudinary.com/pritish007/image/upload/v1655929944/LFX/Screenshot_2022-06-23_at_2.00.26_AM_surq70.png)

- So, my project was, "**To extend `kyverno test` command to cover generate policies & improve test coverage**".

- <u>**What is Kyverno?**</u> <br>
  **Kyverno** is a **Kubernetes native policy engine** where the policies are basically managed as Kubernetes resources. The kyverno policies can Generate, Mutate, Validate kubernetes resources, & verify image policies.

- <u>**Project Abstract**</u> <br>

  - Currently the kyverno test command covers only the validate and mutate policies but not the generate policy. So, my task will be to extend the Kyverno CLI or the kyverno test command to cover generate policies as well.
  - Secondly, I've to work on improving the test coverage of Kyverno by adding more tests so that it covers maximum part of the codebase.
  - To generate a test report for each PR

- <u>**Getting Started**</u> <br>
  In the initial days, I tried to learn more about Kyverno by using it as an end-user. Then I played around with the kyverno engine by applying policies from the [kyverno/policies](https://github.com/kyverno/policies) repo. Then I contributed to the Kyverno wiki on guide to [develop Kyverno CLI locally](https://github.com/kyverno/kyverno/wiki/Running-in-development-mode#develop-kyverno-cli-locally). We used to have weekly sync meetings for status updates and my mentors were very supportive.

- <u>**What is Generate rule?**</u> <br>
  A **generate rule** can be used to create additional resources when a new resource is created or when the source is updated. This is useful to create supporting resources, such as new RoleBindings or NetworkPolicies for a Namespace.

- <u>**How generate policy works?**</u> <br>
  Let us first see how the generate policy works by the help of an example.
  Let's take [Add Quota](https://kyverno.io/policies/best-practices/add_ns_quota/) policy for instance:

  - Set-up and run kyverno in a local cluster since the `generate policy` can only be applied to a live cluster.
  - You can find instructions on how to run kyverno in development mode [here](https://github.com/kyverno/kyverno/wiki/Running-in-development-mode)
  - Suppose we have the policy definition in `addQuota.yaml` file. Let's apply it to the cluster:

  ```bash
  kubectl apply -f addQuota.yaml
  ```

  - Now, let's create a demo namespace

  ```bash
  kubectl create ns demo
  ```

  - Now, search for the resources listed in `addQuota.yaml` that are meant to be generated (here, `limitranges` and `resourcequotas`)

  ```bash
  kubectl get limitranges --all-namespaces

  kubectl get resourcequotas --all-namespaces
  ```

  - You'll get the resources being listed on your terminal.

- <u>**Test command for generate policy**</u> <br>
  _Now, coming to the test command for **Generate Policy**. We can go about it in two ways:_

  1. If the user doesn't provide the **desired resource**, then we can just display if kyverno can generate the resource or not

  2. If the user provides the **resource manifests** then we can compare it with the kyverno created resource is a subset of the user provided resource(in terms of tags). If that pass, test success else failure.

  _The next part is how should we log the result?_

  So if both the resources match, we can update the test results to `pass` or else `fail`.

- <u>**Structure of `test.yaml`**</u> <br>
  _To demonstrate this, let us take [Add Network Policy](https://kyverno.io/policies/best-practices/add_network_policy/) \& [Add Quota](https://kyverno.io/policies/best-practices/add_ns_quota/) policy for example._

  1. When the user doesn't provide the desired resource

  ```yaml
  name: add-networkpolicy
  policies:
    - add_network_policy.yaml
  resources:
    - resource.yaml
  results:
    - policy: add-networkpolicy
      rule: default-deny
      kind: Namespace
      resource: demo
      result: pass
  ```

  ```yaml
  # What if the NetworkPolicy was only applicable to Pods
  name: add-networkpolicy
  policies:
    - add_network_policy.yaml
  resources:
    - resource.yaml
  results:
    - policy: add-networkpolicy
      rule: default-deny
      kind: Pod
      resource: demo # name of resource(Namespace, Pod, etc)
      namespace: testing # namespace where the target resource is being created
      result: pass
  ```

  ```yaml
  name: add-ns-quota
  policies:
    - add_ns_quota.yaml
  resources:
    - resource.yaml
  results:
    - policy: add-ns-quota
      rule: generate-resourcequota
      kind: Namespace # source
      resource: demo # target
      result: pass
    - policy: add-ns-quota
      rule: generate-limitrange
      kind: Namespace
      resource: demo
      result: pass
  ```

  2. When the user provides the desired resource

  ```yaml
  name: add-networkpolicy
  policies:
    - add_network_policy.yaml
  resources:
    - resource.yaml
  results:
    - policy: add-networkpolicy
      generatedResource: generatedResource.yaml
      rule: default-deny
      kind: Namespace
      resource: demo
      result: pass
  ```

  ```yaml
  name: add-ns-quota
  policies:
    - add_ns_quota.yaml
  resources:
    - resource.yaml
  results:
    - policy: add-ns-quota
      rule: generate-resourcequota
      generatedResource: generatedResource1.yaml
      kind: Namespace
      resource: demo
      result: pass
    - policy: add-ns-quota
      rule: generate-limitrange
      generatedResource: generatedResource2.yaml
      kind: Namespace
      resource: demo
      result: pass
  ```

- <u>**Graduation**</u> <br>
  The most important step in this project was finalising the structure of `test.yaml` such that the existing test command could handle it. Once this was done, I had to implement the same in-order to extend the existing test command. In January, 2021 I received a mail from LFX stating that I have graduated from CNCF - Kyverno mentorship. I am highly grateful to my mentors for providing a great experience throughout the program.

![Graduation mail](https://res.cloudinary.com/pritish007/image/upload/v1655918191/LFX/Screenshot_2022-06-22_at_10.46.24_PM_r39zb9.png)

---

## Conclusion

LFX Mentorship is a really great way to kickstart your journey in the field of cloud computing and security. This program opened up a new world of open source and cloud native tools for me. For the newly accepted mentees, my advice would be to ask as many questions as possible to your mentors, however silly your question might be. I would definitely recommend folks to apply to this program. In the beginning you must be feeling intimidated by the tools and terminologies used here and it is the same for everyone. If you are consistent enough, things will eventually fall into place. _Just take that first step_.

> PS: I really love this mentee profile <3

![lfx mentee profile](https://res.cloudinary.com/pritish007/image/upload/v1655918097/LFX/Screenshot_2022-06-22_at_10.44.40_PM_m1es1d.png)

## Relevant links

- My project - [Kyverno - Extend test command to cover generate policies](https://mentorship.lfx.linuxfoundation.org/project/0e34db3f-99c3-471d-a114-e3c89f57eab5)
- LFX Mentorship Site - [lfx.linuxfoundation.org/tools/mentorship](https://lfx.linuxfoundation.org/tools/mentorship/)
- Available Mentorships - [mentorship.lfx.linuxfoundation.org](https://mentorship.lfx.linuxfoundation.org)
- CNCF Mentoring Repo - [github.com/cncf/mentoring](https://github.com/cncf/mentoring)
- All about LFX Mentorship Program - [youtu.be/YhivM-V_Pgk](https://youtu.be/YhivM-V_Pgk)


LFX Mentorship Experience with Kyverno

Here, in this article, the word Poetry is not referred to as something related to English Literature, history, religion, or stuff. I'm primarily a JavaScript, React developer where the dependency management...


![Drake Hotline Bing Meme on Poetry](https://res.cloudinary.com/pritish007/image/upload/v1625058011/landing_article_hwc4uu.jpg)

> _Disclaimer: Here, in this article, the word "Poetry" is not referred to as something related to English Literature, history, religion, or stuff. :)_

First things first, I'm on a Ubuntu 20.04 LTS operating system. Few things might be different for you according to your operating system. So, without any further ado, lets get started🚀

## List Of Contents:

> PS: If you directly want to get into what's Poetry and its functions, feel free to skip the `Introduction` part.

- [Introduction](#intro)
- [Why Poetry?](#whyp)
- [What's Poetry?](#whatp)
- [Download & Install](#instap)
- [Configure Poetry](#configp)
- [Basic Usage of Poetry](#usagep)
- [Conclusion](#concl)

## # Introduction

I'm primarily a JavaScript, React developer where the dependency management(adding, removing, upgrading) is taken care of by `npm` or `yarn`. I always wanted to try out a Python web framework & that is when I came across Flask which is a lightweight framework to develop web applications, RESTful APIs and much more. In this article, I'll be using some analogies in JavaScript to describe how things work in Python.

Normally, `npm install <dependency>` will install a dependency in that project itself by generating a **node_modules** folder and if we add a `-g` or `--global` flag, it will install the dependency globally. But things are a little different in Python. In Python, we have to create something called a **virtual environment** which is essentially a Python environment such that the Python interpreter, libraries and scripts installed into it are isolated from other virtual environments or those libraries installed in a **System Python** i.e., one which is installed as part of your operating system.

**Lets take an instance for example:** Suppose you're working on a project with five other developers and lets say you have flask version `1.1.2` version installed globally whereas the project requires flask version `1.1.3`. That is where conflicts might or might not arise due to different flask versions. To be on the safer side, we use virtual environments.

## # Why Poetry?

Before coming on to what Poetry actually is, let me explain its use cases and how it makes our life easier. The two major issues that we face using python are:

### 1. Manually creating and managing virtual environments

In python, we can use many ways to make virtual environments with `venv` being its standard library. Few other libraries include `virtualenv`, and `conda`. For beginners, it is recommended to use the `pip` & `virtualenv` combo.
_To create a virtual environment:_

- With `venv`:

```bash
$ python3 -m venv .venv
```

- With `virtualenv`:

```bash
$ virtualenv venv
```

_To activate a virtual environment:_

```bash
$ .venv/Scripts/Activate.ps1
```

Voila! our virtual environment is activated. Now, we can install any dependency using `pip install`. But if you see the process, it is very much time consuming.

### 2. requirements.txt file is too primitive to deal with!

Generally, we can export `requirements.txt` which defines all the dependencies we've installed using `pip`. We can export it by:

```bash
$ pip freeze > requirements.txt
```

What we get from it is a plain text file with all the dependencies as well as their versions listed.

```python
﻿bcrypt==3.2.0
dnspython==2.1.0
email-validator==1.1.2
Flask==1.1.2
Flask-Bcrypt==0.7.1
Flask-Login==0.5.0
Flask-SQLAlchemy==2.5.1
Flask-WTF==0.14.3
gunicorn==20.1.0
itsdangerous==1.1.0
Jinja2==2.11.3
MarkupSafe==1.1.1
Pillow==8.2.0
pycparser==2.20
SQLAlchemy==1.4.7
Werkzeug==1.0.1
WTForms==2.3.3
yapf==0.31.0
```

But again, here we have to lock `requirements.txt` everytime we add or remove a dependency. Also, it becomes difficult to audit all dependencies & bring them up-to date when needed.

Thus, we need something which can isolate the project as well as it can manage our dependencies & their versions as well as lock everything that gets installed just like we have a `package.json` in Javascript which is like a manifest for your project, a place where `npm` or `yarn` stores all the dependencies with their version & `package-lock.json` or `yarn.lock` if you're using `npm` or `yarn` respectively which keeps track of the exact version of every package that is installed so that a product is 100% reproducible in the same way even if packages are updated by the maintainers.

This is where **Poetry** comes to rescue and saves us from the above mentioned problems. Let us learn more about what is **Poetry** in the next section.

![Poetry Meme](https://res.cloudinary.com/pritish007/image/upload/v1625066804/5f124d_nx0jvd.jpg)

## # What's Poetry?

So, Poetry is a tool for dependency management and packaging in Python. According to their [official documentation](https://python-poetry.org/), it allows us to declare the libraries our project depends on and it will manage (add/remove/update) them for us. IMO, Poetry is by far best dependency as well as virtual environment management tool I've come across in python programming. Initialising a Poetry project produces two main files, namely `pyproject.toml` which works like a `package.json` & `poetry.lock` that works like `package-lock.json` or `yarn.lock`. In other words, we can say that **Poetry** resembles **npm/yarn**. Bear with me, I won't give much analogies from now onwards XD. Now, let's see how we can download & use Poetry,

## # Download & Install

Poetry has a well documented set of instructions on [how to install](https://python-poetry.org/docs/#installation) it and the best thing is that almost every operating systems (eg: Windows, Linux, MacOS) supports Poetry. Poetry is also available on `PyPi` but it is not recommended to install using pip because it will also install Poetry’s dependencies which might cause conflicts with other packages.

> Prerequisite: If you don't have `curl` installed, you can do so by:

```bash
$ sudo apt update
$ sudo apt install curl
```

_The installation guidelines as stated in the official documentation are listed below!_

```bash
# osx / linux / bashonwindows install instructions
$ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python -

# windows powershell install instructions
$ (Invoke-WebRequest -Uri https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py -UseBasicParsing).Content | python -

# Installing with pip
$ pip install --user poetry
```

Voila! Poetry will be now installed in your system. To confirm it, you can:

```bash
$ poetry --version
Poetry version 1.1.6
```

## # Configure Poetry

Before we get started with Poetry, we have to make sure of some configurations. You can always type `poetry --help` and it'll display the set of commands & arguments and how to use them else refer to their [configuration documentation](https://python-poetry.org/docs/configuration/). I've listed below the required configurations. Make sure you do the same.

```bash
# To list all the configurations
$ poetry config --list
cache-dir = "/home/john/.cache/pypoetry"
experimental.new-installer = true
installer.parallel = true
virtualenvs.create = true
virtualenvs.in-project = true
virtualenvs.path = "{cache-dir}/virtualenvs"  # /home/john/.cache/pypoetry/virtualenvs
```

To change or modify any configuration for instance, `virtualenvs.create`, you can:

```bash
$ poetry config virtualenvs.create false
```

Else, if you want to modify the configuration only for a specific project, Poetry provides a `--local` option to the config command to do the same.

```bash
$ poetry config virtualenvs.create false --local
```

If you want to remove a configuration, you can:

```bash
$ poetry config virtualenvs.path --unset
```

## # Basic Usage of Poetry

Now we are all set to get started with Poetry. Yayy!!
So, we will be initialising a Poetry project in the Desktop directory. To initialise an empty project, we can type:

```bash
~/Desktop$ poetry new poetry-kickstart
Created package poetry_kickstart in poetry-kickstart
```

A new package named `poetry-kickstart` will now be created in your Desktop. We are going to modify the structure a little bit.

We will be having the following contents inside the `poetry-kickstart` package.

```bash
poetry-kickstart
├── pyproject.toml
├── README.rst
├── poetry-kickstart.py
└── tests
    ├── __init__.py
    └── test_poetry_demo.py
```

Then, we will spawn a shell using `poetry shell` command and install `flask`.

```bash
~/Desktop/poetry-kickstart$ poetry shell
Spawning shell within Desktop/poetry-kickstart/.venv
. Desktop/poetry-kickstart/.venv/bin/activate

(.venv) ~/Desktop/poetry-kickstart$ poetry add flask
Using version ^2.0.1 for Flask

Updating dependencies
Resolving dependencies... (0.8s)

Writing lock file

Package operations: 6 installs, 0 updates, 0 removals

  • Installing markupsafe (2.0.1)
  • Installing click (8.0.1)
  • Installing itsdangerous (2.0.1)
  • Installing jinja2 (3.0.1)
  • Installing werkzeug (2.0.1)
  • Installing flask (2.0.1)
```

Spawning a shell will make a virtual environment and automatically activate it. Thus, the contents inside the poetry-kickstart package will be:

```bash
poetry-kickstart
├── .venv
├── poetry.lock
├── pyproject.toml
├── README.rst
├── poetry-kickstart.py
└── tests
    ├── __init__.py
    └── test_poetry_demo.py
```

Now, we are inside a virtual environment with flask installed. Let us make a simple route returning "Hello World!" in `poetry-kickstart.py`.

```python
from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run(debug=True)
```

We have a simple route. Now, let's check if it's working or not. But before that, do ensure if your python interpreter is pointing towards the one in the virtual environment.

To check the sample API,

```bash
(.venv) $ poetry run python -m poetry-kickstart
 * Serving Flask app 'poetry-kickstart' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 117-620-034
```

Hurray!! We now have our flask app up and running. Cheers!
![Running Flask App in Browser](https://res.cloudinary.com/pritish007/image/upload/v1625047379/Screenshot_from_2021-06-30_15-32-45_a6rpao.png)

Again, you can click `ctrl+c` to kill the process & then type `exit` to exit from the virtual environment.

## # Conclusion

This article demonstrates only the basic usage of Poetry. However, there are ton other things that you can do using Poetry. I would prefer their official documentation anytime since it is well structured. But, this is not the end. In my next article, I'll be demonstrating how you can run tests using Poetry, & how to deploy a poetry project to Heroku. Heroku is the go-to service for many developers because it requires less configuration and has quick deployment. But `Heroku` **doesn't have** a standard `buildpack` for Poetry. Thus, we will be using another open-source buildpack for Poetry and trust me, it works just fine. Last but not the least, I would like to thank [The Open Bio-informatics Foundation](https://www.open-bio.org/) for giving me this opportunity & also my mentors [@João Paulo Tiz](https://twitter.com/jptiz1) & [@Yo Yehudi](https://twitter.com/yoyehudi) for their constant support and guidance.


Beauty of Poetry ✨

Here, in this article, I basically list the technologies and their specs I use on a daily basis including my laptop, monitor, keyboard, etc. However, this will always be a work in progress...


### Computer

- MacBook M1 Air(14")
- HP M24f 23.8-Inch(60.45cm) Eye Safe Certified Full HD 1920 x 1080 Pixels Monitor
- Logitech M337 Truly Wireless Mouse
- Targus KB55 Truly Wireless Keyboard

### Coding

- Editor: VS Code
- Theme: GitHub Dark Theme
- Terminal: zsh

### Audio / Video

- Apple AirPods
- Boat Rockerz 450 pro
- Apple iPhone 13

### Music

- Boat Stone

### Other Tech

- MI Smartband 5
- MI 20000 mAh powerbank
- Samsung Portable SSD T7 1TB


Latest Post 📝