Forem: Hiro Ventolero

Optimizing React Performance: useMemo, useCallback, and Beyond

Hiro Ventolero — Mon, 06 Oct 2025 19:36:44 +0000

React is powerful — but if you’ve ever noticed your app getting sluggish as it grows, you’re not alone. Re-renders, expensive calculations, and unnecessary updates can quietly eat away at your app’s performance.

In this post, we’ll explore how hooks like useMemo and useCallback can make your app faster and more efficient — and when not to use them.

🧠 Understanding React Re-renders

React’s rendering behavior is simple: whenever a component’s state or props change, it re-renders.
But sometimes, that re-render trickles down to child components that didn’t need to update — causing performance issues.

Example:

function Parent({ count }) {
  return (
    <>
      <HeavyComponent />
      <DisplayCount count={count} />
    </>
  );
}

Even if only count changes, HeavyComponent might re-render — unnecessarily.

⚙️ useMemo: Cache Expensive Computations

useMemo helps you memoize (remember) expensive calculations so they don’t re-run on every render.

const filteredList = useMemo(() => {
  return list.filter(item => item.active);
}, [list]);

💡 When to use it:

Heavy loops or calculations
Derived data that’s reused multiple times
Expensive object or array creation

🚫 When NOT to use it:

For lightweight operations — it adds unnecessary overhead.

🔁 useCallback: Stabilize Function References

useCallback is like useMemo but for functions.
It returns a memoized version of the callback that only changes when its dependencies change.

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

💡 Why it matters:
When you pass functions as props to child components, React might re-render them unnecessarily.
Using useCallback ensures the function reference stays the same — reducing renders.

🚀 Beyond useMemo and useCallback

Here are other ways to level up your React performance:

React.memo() – Wrap functional components to prevent re-rendering if props haven’t changed.
Code Splitting – Load only what’s needed using React.lazy and Suspense.
Virtualization – Use libraries like react-window for large lists.
Avoid Anonymous Functions in JSX – They create new references on every render.
Profile Your App – Use the React DevTools Profiler to see where time is being spent.

🧩 Putting It All Together

Performance optimization is about balance — don’t overuse these hooks.
Start by identifying real bottlenecks, and use memoization where it counts.

Remember: clean, readable code beats micro-optimizations most of the time.

💬 Have you used useMemo or useCallback in your projects?
Share your favorite optimization tips in the comments!

Improving Developer Experience with ESLint + Prettier

Hiro Ventolero — Mon, 06 Oct 2025 19:23:59 +0000

Ever opened your project and noticed inconsistent spacing, missing semicolons, or code that just looks off?
That’s where ESLint and Prettier come in — the dynamic duo that makes your code cleaner, more consistent, and easier to maintain.

In this post, you’ll learn how to set up ESLint + Prettier for your project and make your developer experience smoother than ever.

🧠 What Are ESLint and Prettier?

ESLint — a tool that analyzes your JavaScript/TypeScript code and helps you find and fix problems (like unused variables, missing imports, or unsafe code).
Prettier — an opinionated code formatter that ensures your code looks consistent across your team (same quotes, spacing, etc.).

Together, they:
✅ Catch bugs early
✅ Keep code style consistent
✅ Save time spent on code reviews arguing about formatting

⚙️ Step 1: Install ESLint and Prettier

If you’re using npm:

npm install --save-dev eslint prettier

Or with yarn:

yarn add -D eslint prettier

🧩 Step 2: Initialize ESLint

Run this command to create a default ESLint configuration:

npx eslint --init

You’ll be asked a few questions — for example:

How would you like to use ESLint? → “To check syntax, find problems, and enforce code style”
What type of modules does your project use? (CommonJS / ES Modules)
Does your project use TypeScript? (yes/no)
Which framework are you using? (React, Vue, None)
Where does your code run? (Browser / Node)
Which format do you want your config file in? (JSON, YAML, or JavaScript)

This will generate an .eslintrc.json file in your project root.

🎨 Step 3: Configure Prettier

Create a .prettierrc file to define your formatting preferences:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

You can adjust these based on your coding style or team conventions.

🔧 Step 4: Integrate ESLint with Prettier

By default, ESLint and Prettier can sometimes conflict (e.g., ESLint wants double quotes, Prettier wants single).
To fix that, install some helper plugins:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Then update your .eslintrc.json like this:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

This setup tells ESLint to:

Use Prettier for formatting rules
Show Prettier issues directly in ESLint errors

🧠 Step 5: Add Scripts for Convenience

In your package.json, add shortcuts for linting and formatting:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write ."
}

Now you can run:

npm run lint
npm run lint:fix
npm run format

🧩 Step 6: Enable Auto-Fix on Save (VS Code)

For the best experience, enable auto-formatting in VS Code:

Open Settings (Ctrl + ,)
Search for Format On Save and enable it
Set the default formatter to Prettier - Code Formatter

Optionally, create a workspace file .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Now your code will auto-fix and format every time you save 😎

🚀 Step 7: (Optional) Add Husky for Pre-Commit Linting

Want to ensure bad code never makes it into your repo?
Add a Git hook that runs ESLint before every commit.

npx husky-init && npm install

Then edit .husky/pre-commit:

npm run lint:fix

Now, every commit automatically checks and formats your code before it’s saved in Git.

✅ Final Thoughts

Setting up ESLint and Prettier might seem like extra work at first —
but it’s a massive time-saver in the long run.

You’ll:

Spend less time fixing formatting issues
Catch bugs early
Keep your project consistent across your whole team

Once you try it, you’ll wonder how you ever coded without it ✨

🔐 How to Set Up SSH Access for a Private GitLab Repository

Hiro Ventolero — Mon, 06 Oct 2025 19:11:25 +0000

If you’re working with private GitLab repositories, you’ll often need to authenticate before cloning or pushing code.
Instead of entering your username and password every time, you can securely connect using SSH keys.

This guide will walk you through how to generate SSH keys, add them to GitLab, and clone private repositories using SSH.

🧠 What is SSH?

SSH (Secure Shell) allows secure communication between your computer and GitLab’s servers.

Instead of using your password for every Git action, GitLab uses your SSH key pair — a public key (stored on GitLab) and a private key (stored safely on your machine).

🧩 Step 1: Check for Existing SSH Keys

Before generating a new SSH key, check if you already have one:

ls -al ~/.ssh

If you see files like:

id_ed25519.pub
id_ed25519

id_rsa.pub
id_rsa

you already have SSH keys.
You can use them — or generate new ones for GitLab.

⚙️ Step 2: Generate a New SSH Key

Generate a new SSH key using the Ed25519 algorithm (recommended):

ssh-keygen -t ed25519 -C "you@example.com"

If your system doesn’t support Ed25519, use RSA:

ssh-keygen -t rsa -b 4096 -C "you@example.com"

When prompted:

Enter file in which to save the key (/home/user/.ssh/id_ed25519):

Press Enter to accept the default location.

You can also set a passphrase for extra security (optional).

💾 Step 3: Start the SSH Agent and Add Your Key

macOS / Linux

Run the following:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

Windows (Git Bash)

If you’re using Git Bash, do the same:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

📋 Step 4: Copy Your Public SSH Key

Now copy your public key to your clipboard.

macOS

pbcopy < ~/.ssh/id_ed25519.pub

Linux

cat ~/.ssh/id_ed25519.pub

Then manually copy the output.

Windows (Git Bash)

cat ~/.ssh/id_ed25519.pub | clip

🌐 Step 5: Add Your SSH Key to GitLab

Go to your GitLab account.
Navigate to User Settings → SSH Keys.
Paste your public key into the Key field.
Optionally, give it a title (e.g., “My Laptop”).
Click Add key.

✅ Your SSH key is now linked to your GitLab account.

🧪 Step 6: Test Your SSH Connection

Run this command to confirm the connection:

ssh -T git@gitlab.com

You should see a message like:

Welcome to GitLab, @yourusername!

That means everything is working 🎉

💻 Step 7: Clone a Private Repository Using SSH

Now you can clone private repositories securely.

Find your SSH clone URL in GitLab:
It looks like:

git@gitlab.com:username/project-name.git

Then run:

git clone git@gitlab.com:username/project-name.git

You’ll no longer need to enter your GitLab credentials every time you push or pull code.

🔧 Optional: Manage Multiple SSH Keys (If You Have Multiple Accounts)

If you use different GitLab or GitHub accounts, create a custom SSH config file:

Edit your config:

nano ~/.ssh/config

Add:

Host gitlab.com
  HostName gitlab.com
  User git
  IdentityFile ~/.ssh/id_ed25519

Save and exit.
Now Git will automatically use the right SSH key when connecting to GitLab.

✅ Final Thoughts

You’ve now configured SSH authentication for GitLab — no more typing credentials every time you push or clone.

This setup is:

🔒 More secure than HTTPS authentication
⚡ Faster and easier for private repos
💼 Ideal for teams and CI/CD pipelines

Now go ahead and clone your project the secure way! 🚀

🚀 How to Install Node.js (or a Specific Version) on Windows, macOS, and Linux

Hiro Ventolero — Mon, 06 Oct 2025 19:06:02 +0000

If you’re diving into backend development or exploring frameworks like Express, Next.js, or NestJS, installing Node.js is your first step.

This guide covers how to install Node.js (and a specific version, if needed) on Windows, macOS, and Linux — including npm, nvm, and version management tips.

🧠 What is Node.js?

Node.js is an open-source, cross-platform JavaScript runtime built on Chrome’s V8 engine.
It lets you run JavaScript outside the browser — perfect for creating servers, APIs, CLI tools, and full-stack applications.

🧩 Step 1: Check if Node.js is Already Installed

Open your terminal (or PowerShell on Windows) and run:

node -v
npm -v

If both return version numbers, you already have Node.js installed.
If not, let’s install it!

💻 Step 2: Install Node.js

🪟 For Windows Users

Go to https://nodejs.org
Download the LTS (Long-Term Support) version.
Run the installer:

Accept the license
Choose the destination folder
✅ Check “Add to PATH”
1. Verify installation:

   node -v
   npm -v

🍎 For macOS Users

You can install Node.js either with Homebrew or the official installer.

Option 1: Install via Homebrew (Recommended)

brew install node

To install a specific version:

brew install node@18

Then link it to make it the default version:

brew link --overwrite node@18

Option 2: Install via Official Installer

Visit https://nodejs.org
Download the macOS Installer (LTS).
Run the setup and finish installation.

Verify:

node -v
npm -v

🐧 For Linux Users (Ubuntu/Debian)

Install Latest LTS

sudo apt update
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

Install a Specific Version (e.g., Node 18)

Replace 18.x with your desired version:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

Verify installation:

node -v
npm -v

⚙️ Step 3: Use nvm (Node Version Manager) for Flexibility

If you manage multiple Node projects, nvm (Node Version Manager) is the best way to switch between Node versions easily.

🧰 Install nvm (macOS/Linux)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
source ~/.bashrc

🎯 Install a Specific Version

nvm install 18

To list all available versions:

nvm ls-remote

Switch between versions anytime:

nvm use 18

Set a default version:

nvm alias default 18

🪟 For Windows Users

Install nvm for Windows from:
👉 https://github.com/coreybutler/nvm-windows

Once installed:

nvm install 18.17.1
nvm use 18.17.1

Check version:

node -v

🧰 Step 4: Verify Installation and Run a Test App

Create a folder and initialize a project:

mkdir my-node-app
cd my-node-app
npm init -y

Create a simple index.js:

console.log("Node.js is working!");

Run it:

node index.js

If you see:

Node.js is working!

🎉 You’ve successfully installed Node.js!

⚡ Optional: Update npm to the Latest Version

npm install -g npm@latest

✅ Final Thoughts

You now have Node.js installed — and even better, you can manage multiple versions effortlessly with nvm.

This setup is essential if you:

Work on multiple Node projects
Use frameworks requiring specific Node versions
Contribute to open-source repositories with version requirements

Seamless Authentication in Next.js: A Step-by-Step NextAuth.js Tutorial (TypeScript)

Hiro Ventolero — Tue, 20 May 2025 14:38:04 +0000

Authentication is a cornerstone of almost every modern web application. For Next.js developers, NextAuth.js offers a robust, flexible, and easy-to-use solution for handling various authentication strategies. In this tutorial, we'll walk through setting up NextAuth.js in a Next.js project using TypeScript, focusing on a basic "credentials" provider (username/password) for demonstration purposes.

Why NextAuth.js?
Flexible: Supports various authentication providers (OAuth, email, credentials, etc.).
Secure: Handles sessions, JWTs, and secure cookies out of the box.
Easy to Use: Simple API for common authentication flows.
Built for Next.js: Integrates seamlessly with Next.js API routes and getServerSideProps.

Let's dive in!

Prerequisites
Before we start, make sure you have:

Node.js installed
Familiarity with Next.js and React basics
Basic understanding of TypeScript
Step 1: Set Up Your Next.js Project
First, let's create a new Next.js project with TypeScript. Open your terminal and run:

npx create-next-app@latest nextauth-typescript-tutorial --typescript
cd nextauth-typescript-tutorial

Step 2: Install NextAuth.js
Now, install the next-auth package:

npm install next-auth
# or
yarn add next-auth

Step 3: Configure Environment Variables
NextAuth.js requires a secret for signing tokens and an optional database URL (if you plan to use a database adapter, which we won't cover in this basic example but is crucial for production).

Create a .env.local file at the root of your project:

Code snippet

# .env.local
NEXTAUTH_SECRET=YOUR_VERY_RANDOM_SECRET_STRING_HERE
# You can generate a random string using: openssl rand -base64 32
# For a quick dev secret, any sufficiently long random string will do.

Important: Never share your NEXTAUTH_SECRET publicly. For production, ensure this is a strong, randomly generated string.

Step 4: Create the NextAuth.js API Route

NextAuth.js operates via a dynamic API route. Create a new file at pages/api/auth/[...nextauth].ts.

This file will contain all your NextAuth.js configuration.

// pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      // The name to display on the sign in form (e.g., "Sign in with...")
      name: 'Credentials',
      // `credentials` is used to generate a form on the sign in page.
      // You can specify which fields should be submitted, for example:
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        // Add logic here to look up the user from the credentials supplied
        // This is where you would connect to your database or authentication service.

        // For this example, we'll hardcode a user.
        if (credentials?.username === 'user' && credentials?.password === 'password') {
          const user = { id: '1', name: 'J Smith', email: 'jsmith@example.com' };
          // Any object returned will be saved in `user` property of the JWT
          return user;
        } else {
          // If you return null then an error will be displayed advising the user to check their details.
          return null;
          // You can also throw an error to trigger an error page or redirect.
        }
      },
    }),
    // ... add more providers here (e.g., GitHubProvider, GoogleProvider)
  ],
  // Optional: Add callbacks for more control over authentication flow
  callbacks: {
    async jwt({ token, user }) {
      // The `user` object is only available on the first login (sign-in)
      // or if you explicitly return it from `authorize`
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session({ session, token }) {
      // Send properties to the client, such as an `id` from a JWT.
      session.user.id = token.id as string;
      return session;
    },
  },
  // Optional: Pages for custom login, error, etc.
  pages: {
    signIn: '/auth/signin', // Custom sign-in page
    // signOut: '/auth/signout',
    // error: '/auth/error', // Error code passed in query string as ?error=
    // verifyRequest: '/auth/verify-request', // Used for check email page
    // newUser: '/auth/new-user' // If set will redirect to this page after a new account is created
  },
  // Debug mode for development
  debug: process.env.NODE_ENV === 'development',
});

Explanation of pages/api/auth/[...nextauth].ts:

NextAuth({...}): The main configuration object for NextAuth.js.
providers: An array where you define all the authentication methods you want to support.
CredentialsProvider: Allows users to sign in with a username and password (or any arbitrary credentials).
name: The label shown on the sign-in button.
credentials: Defines the input fields for your sign-in form.
authorize: This is the core function where you validate the credentials. In a real application, you'd query your database here to find a matching user. If authentication is successful, return a User object; otherwise, return null.
callbacks: Highly customizable functions that allow you to control what happens at different stages of the authentication flow.
jwt({ token, user }): This callback is called whenever a JSON Web Token (JWT) is created or updated. You can add custom properties to the token here (e.g., user ID).
session({ session, token }): This callback is called whenever a session is checked. You can expose properties from the token to the session object, which is then available on the client-side.
pages: Allows you to define custom pages for various authentication states (sign-in, sign-out, error, etc.). This is crucial for a good user experience.
debug: Set to true in development for helpful console logging.
Step 5: Create a Custom Sign-In Page
Since we specified /auth/signin as our custom sign-in page in the pages configuration, let's create it.

Create pages/auth/signin.tsx:

// pages/auth/signin.tsx
import { signIn, getProviders } from 'next-auth/react';
import { GetServerSidePropsContext } from 'next';
import { BuiltInProviderType } from 'next-auth/providers/index';
import { ClientSafeProvider, LiteralUnion } from 'next-auth/react/types';

interface SignInPageProps {
  providers: Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>;
}

export default function SignIn({ providers }: SignInPageProps) {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>Sign In</h1>
      {providers &&
        Object.values(providers).map((provider) => {
          if (provider.id === 'credentials') {
            return (
              <div key={provider.id} style={{ marginTop: '1rem' }}>
                <h2>Sign in with {provider.name}</h2>
                <form
                  onSubmit={async (e) => {
                    e.preventDefault();
                    const username = (document.getElementById('username') as HTMLInputElement).value;
                    const password = (document.getElementById('password') as HTMLInputElement).value;

                    const result = await signIn('credentials', {
                      username,
                      password,
                      redirect: false, // Prevent redirect for custom error handling
                      callbackUrl: '/', // Redirect to home page on success
                    });

                    if (result?.error) {
                      alert(result.error); // Basic error display
                    } else if (result?.ok) {
                      window.location.href = result.url || '/'; // Redirect manually on success
                    }
                  }}
                >
                  <div>
                    <label htmlFor="username">Username:</label>
                    <input type="text" id="username" name="username" required />
                  </div>
                  <div style={{ marginTop: '0.5rem' }}>
                    <label htmlFor="password">Password:</label>
                    <input type="password" id="password" name="password" required />
                  </div>
                  <button type="submit" style={{ marginTop: '1rem', padding: '0.5rem 1rem' }}>
                    Sign In
                  </button>
                </form>
              </div>
            );
          }
          // You can render other providers here if you add them (e.g., Google, GitHub)
          // return (
          //   <div key={provider.id} style={{ marginTop: '1rem' }}>
          //     <button onClick={() => signIn(provider.id)}>
          //       Sign in with {provider.name}
          //     </button>
          //   </div>
          // );
        })}
    </div>
  );
}

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const providers = await getProviders();
  return {
    props: { providers },
  };
}

Explanation of pages/auth/signin.tsx:

getProviders(): A NextAuth.js utility function that fetches all configured providers from your API route.
signIn(): The core function to initiate the sign-in process. When using the credentials provider, you pass the provider ID ('credentials') and an object containing the credentials.
redirect: false is important for handling errors on the client-side without a full page reload.
callbackUrl specifies where to redirect after successful authentication.
getServerSideProps: Used to fetch the available providers on the server-side before the page renders, ensuring they are available to the client.

Step 6: Wrap Your Application with SessionProvider
For NextAuth.js to work correctly across your application, you need to wrap your _app.tsx component with SessionProvider. This provides the session context to all components.

Modify pages/_app.tsx:

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth'; // Import Session type

interface CustomAppProps extends AppProps {
  pageProps: AppProps['pageProps'] & {
    session?: Session; // Explicitly define session in pageProps
  };
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

Explanation of pages/_app.tsx:

SessionProvider: A React Context Provider that makes the session data available to all child components.
session={session}: The session object is passed from pageProps, which is populated by NextAuth.js when a user is authenticated.
Step 7: Implement Authentication in a Page
Now, let's create a simple page to demonstrate how to check authentication status and sign in/out.

Modify pages/index.tsx:

// pages/index.tsx
import { useSession, signIn, signOut } from 'next-auth/react';
import Link from 'next/link';

export default function Home() {
  const { data: session, status } = useSession();

  if (status === 'loading') {
    return <p>Loading...</p>;
  }

  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h1>Welcome to NextAuth.js Tutorial!</h1>

      {session ? (
        <div>
          <p>Signed in as {session.user?.email || session.user?.name}</p>
          {session.user?.id && <p>User ID: {session.user.id}</p>}
          <button onClick={() => signOut()} style={{ padding: '0.5rem 1rem', marginTop: '1rem' }}>
            Sign Out
          </button>
        </div>
      ) : (
        <div>
          <p>You are not signed in.</p>
          <Link href="/auth/signin" passHref>
            <button style={{ padding: '0.5rem 1rem', marginTop: '1rem' }}>
              Sign In
            </button>
          </Link>
        </div>
      )}

      <div style={{ marginTop: '2rem' }}>
        <h2>Protected Content (Example)</h2>
        {session ? (
          <p>This content is only visible to authenticated users!</p>
        ) : (
          <p>Please sign in to view this content.</p>
        )}
      </div>
    </div>
  );
}

Explanation of pages/index.tsx:

useSession(): A React Hook provided by NextAuth.js that gives you access to the session data (session) and the loading status (status).
session object: Contains information about the authenticated user (e.g., user.name, user.email). We also added user.id through our callbacks in [...nextauth].ts.
signIn() / signOut(): Functions to programmatically sign in or out a user. When used without arguments, signIn() will redirect to the signIn page defined in your NextAuth.js config.

Step 8: Run Your Application
Start your Next.js development server:

npm run dev
# or
yarn dev

Now, open your browser and navigate to http://localhost:3000.

You should see the "You are not signed in" message.
Click the "Sign In" button, which will redirect you to http://localhost:3000/auth/signin.
Enter username: user and password: password and click "Sign In".
You should be redirected back to the home page, now showing "Signed in as J Smith" (or your hardcoded user's name/email).
Try signing out and signing in again.
Conclusion
Congratulations! You've successfully implemented a basic authentication system in your Next.js application using NextAuth.js with a credentials provider.

This tutorial provides a solid foundation. From here, you can explore:

Adding more providers: Integrate with Google, GitHub, Facebook, etc., by adding their respective providers to pages/api/auth/[...nextauth].ts.
Database Adapters: For production applications, you'll need a database to persist user data and sessions. NextAuth.js offers various adapters (Prisma, Mongoose, TypeORM, etc.).
Protecting API Routes: Use getServerSession (or getToken if not using session) in your API routes to protect them.
Customizing UI: Style your sign-in and other authentication pages to match your brand.
Role-Based Access Control (RBAC): Extend the session and token to include user roles for fine-grained access control.
NextAuth.js streamlines the complexities of authentication, allowing you to focus on building amazing applications. Happy coding!

How Docker Revolutionized the Tech Industry

Hiro Ventolero — Fri, 29 Nov 2024 08:28:35 +0000

In recent years, Docker has emerged as a groundbreaking tool in the world of software development and deployment. It's hard to overstate the impact Docker has had on the tech industry, enabling organizations to build, ship, and run applications in a more efficient and scalable manner. In this blog post, we’ll explore what Docker is, how it works, and why it has become such a revolutionary force in the tech landscape.

What is Docker?

Docker is an open-source platform that allows developers to automate the deployment of applications inside lightweight, portable containers. Containers can hold everything an application needs to run — from code and runtime to system tools and libraries — ensuring that the application runs consistently in any environment.

The Key Components of Docker:

Docker Images: These are read-only templates used to create containers. They include everything required to run an application, including code, libraries, and dependencies.
Docker Containers: These are the runnable instances of Docker images, isolated from one another and the host system.
Docker Hub: This is a cloud-based repository where developers can share, distribute, and manage Docker images.

How Docker Works

At its core, Docker takes advantage of containerization technology, which allows applications to run in isolated user spaces. This isolation ensures that the applications do not interfere with one another, allowing for cleaner development workflows and a reduction in conflicts.

When a developer wants to run an application, instead of installing the required software dependencies and configuration on their local machine or a server, they simply pull the relevant Docker image and run it as a container. This means that development environments can be spun up quickly, and applications can be tested and deployed with ease.

The Revolution in Software Development

1. Simplified Development and Deployment

Docker simplifies the development lifecycle by allowing developers to create a consistent environment across all stages — from development and testing to production. This eliminates the “it works on my machine” syndrome, drastically reducing bugs and deployment errors.

2. Increased Scalability

Docker containers can be easily scaled up or down to meet demand. This elasticity is essential for applications that experience variable workloads. Developers can spin up new containers in seconds, ensuring that their applications can handle increased traffic without performance degradation.

3. Resource Efficiency

Containers are lightweight compared to traditional virtual machines (VMs) because they share the host OS kernel rather than requiring their own operating system. This leads to reduced resource consumption and faster startup times, which is particularly beneficial in cloud environments where costs are often tied to resource usage.

4. Microservices Architecture

Docker's containerization lends itself well to microservices architecture, allowing developers to build applications as a collection of loosely coupled services. This approach not only enhances flexibility and scalability but also enables teams to work on different services independently, accelerating development time.

5. Enhanced CI/CD Pipelines

With Docker, Continuous Integration and Continuous Deployment (CI/CD) pipelines can be made more robust. Automated testing and deployment processes can be streamlined using Docker containers, leading to faster cycles and more reliable releases.

Conclusion

Docker has fundamentally changed the way software is developed, tested, and deployed. Its focus on containerization has led to greater efficiency, improved collaboration among downstream teams, and has enabled organizations to deploy applications more quickly and reliably than ever before.

As the tech industry continues to evolve, tools like Docker will play a crucial role in shaping the future of software development. By enabling developers to focus on writing code without the headaches of environment discrepancies, Docker truly bridges the gap between development and operations, embodying the essence of modern DevOps practices.

For developers and organizations not yet leveraging Docker, now is the time to embrace this revolutionary tool and unlock the full potential of your applications and infrastructure. The future is containerized, and it’s an exciting space to be in!

Ngrok on Ubuntu under Windows Subsystem for Linux (WSL)

Hiro Ventolero — Fri, 29 Nov 2024 02:13:57 +0000

Ngrok Installation Guide for Ubuntu on WSL

This guide will help you install Ngrok on your Ubuntu environment running under Windows Subsystem for Linux (WSL). Ngrok is a tool that allows you to expose your local server to the internet.

Prerequisites

Ensure that you have WSL installed on your Windows machine with Ubuntu as your chosen distribution. You should also have an active internet connection to download Ngrok.

Step 1: Open Your WSL Terminal

Launch your WSL terminal (Ubuntu) from the Windows start menu.

Step 2: Update Your Package List

Before installing any packages, it's a good idea to update the package list. Run:

sudo apt update

Step 3: Remove Any Previous Ngrok Files

To avoid confusion, remove any previous downloads of Ngrok:

rm ngrok.zip ngrok-stable-linux-amd64.zip

Step 4: Download Ngrok

You can download the latest version of Ngrok directly. Visit the Ngrok download page to get the most current URL, or use the command below to download it:

wget https://bin.equinox.io/c/111111/ngrok-stable-linux-amd64.zip -O ngrok.zip

Note: Replace 111111 with the actual key you find on the Ngrok download page if necessary.

Alternate Download Method

If the above command fails, you can use the following command, which extracts the download link directly from the Ngrok website:

curl -s https://ngrok.com/download | grep -o 'https://[^"]*ngrok-stable-linux-amd64.zip' | xargs wget -O ngrok.zip

Step 5: Unzip the Downloaded File

Once the download is complete, extract the contents of the ZIP file:

unzip ngrok.zip

If you encounter an error indicating that the file is not a valid zip file, ensure that the download was completed successfully. You can check the file type with:

file ngrok.zip

It should report that it is a "Zip archive data".

Step 6: Move Ngrok to Your Local Bin Directory

After successfully unzipping, move the Ngrok binary to your local bin directory to make it executable from anywhere:

sudo mv ngrok /usr/local/bin

Step 7: Authenticate Your Ngrok Account

To use Ngrok, you will need to authenticate with your Ngrok token. Sign up at ngrok.com if you don’t already have an account. After logging in, copy your authentication token and run:

ngrok authtoken <your_auth_token>

Replace <your_auth_token> with the actual token you received from your Ngrok dashboard.

Step 8: Start Using Ngrok

You can now start using Ngrok to expose your local server to the internet. For instance, if you have a Django application running on port 8000, you can use:

ngrok http 8000

This command will provide you with a public URL that tunnels to your local server.

Additional Information

Once Ngrok is running, you can access the web interface at http://127.0.0.1:4040 to monitor requests and inspect traffic.
Ensure that your local server (e.g., Django or Flask) is running before starting Ngrok.

Troubleshooting

If you encounter issues during installation:

Check your internet connection to ensure it is stable.
Verify that you have enough disk space on your system.
If downloads repeatedly fail, consider downloading the Ngrok executable from another machine and transferring it to your WSL environment.

Writing Clean Python Code: Embracing the Zen of Python 🐍✨

Hiro Ventolero — Mon, 25 Nov 2024 06:31:08 +0000

Writing Clean Python Code: Embracing the Zen of Python 🐍✨

Writing clean, readable, and maintainable code is a hallmark of a great programmer. Python, with its simplicity and elegance, encourages developers to write beautiful code through the guiding principles of The Zen of Python (PEP 20). Let’s break down these principles and see how to apply them in your coding journey.

1. Beautiful is better than ugly.

Write code that is pleasing to the eye. Use consistent naming conventions, indentation, and spacing. Avoid cryptic variable names and overly complex one-liners.

Example:

# Ugly code
def fx(x,y):return x+y
print(fx(1,2))

# Beautiful code
def add_numbers(a, b):
    return a + b

print(add_numbers(1, 2))

2. Explicit is better than implicit.

Make your code’s intent clear. Avoid clever hacks that only you understand—write code that others (or future you) can easily grasp.

Example:

# Implicit and unclear
data = [1, 2, 3, 4]
result = []
for i in data:
    if i % 2:
        result.append(i)

# Explicit and clear
numbers = [1, 2, 3, 4]
odd_numbers = [num for num in numbers if num % 2 != 0]

3. Simple is better than complex.

Strive for simplicity without sacrificing clarity. Complex solutions might feel clever, but they often create maintenance headaches.

Example:

# Complex solution
def factorial(n):
    return n if n == 1 else n * factorial(n - 1)

# Simple solution
def factorial(n):
    result = 1
    for i in range(1, n + 1):
        result *= i
    return result

4. Readability counts.

Readable code is a gift to anyone who works on your project. Use comments, docstrings, and meaningful names to make your code self-explanatory.

Example:

# Not readable
def t(a):
    return a*365

# Readable
def convert_years_to_days(years):
    """Converts years into days."""
    return years * 365

5. Errors should never pass silently.

Handle exceptions explicitly so bugs don’t go unnoticed. Use try and except blocks wisely.

Example:

# Silent failure (not recommended)
try:
    result = 1 / 0
except:
    pass

# Explicit error handling
try:
    result = 1 / 0
except ZeroDivisionError:
    print("Cannot divide by zero!")

6. There should be one—and preferably only one—obvious way to do it.

Stick to Python’s idiomatic way of solving problems. Avoid reinventing the wheel.

Example:

# Non-idiomatic way to calculate the length of a list
def list_length(lst):
    count = 0
    for _ in lst:
        count += 1
    return count

# Idiomatic way
def list_length(lst):
    return len(lst)

7. If the implementation is hard to explain, it’s a bad idea.

If you can’t explain your code to a colleague in simple terms, it’s a sign you need to refactor.

Example:

# Hard to explain
result = "".join([chr(ord(c) + 2) for c in "hello"])

# Easy to explain
def shift_letters(text, shift=2):
    """Shifts each letter by a given number of positions."""
    return "".join([chr(ord(c) + shift) for c in text])

result = shift_letters("hello")

8. Refactor often.

Code evolves over time. Regularly revisit your code to simplify, optimize, or align it better with Pythonic principles.

Conclusion

The Zen of Python is more than just a set of abstract ideas—it’s a practical guide to writing clean, maintainable code. By embracing its principles, you’ll create programs that are not only functional but also a joy to read and work on.

Keep coding clean, stay Pythonic, and remember: Simple is better than complex. 🐍✨

Enhancing Large Language Models with Vectorized Databases: Powering AI at Scale

Hiro Ventolero — Mon, 30 Oct 2023 14:08:06 +0000

Vectorized Databases: Powering AI at Scale

In the ever-evolving world of artificial intelligence, Large Language Models (LLMs) like GPT-3 have proven to be revolutionary. These models have redefined natural language processing, enabling applications that range from chatbots and language translation to content generation. Yet, as these models grow in complexity and capability, the underlying infrastructure needs to keep pace. One solution that's gaining prominence is the use of vectorized databases, a game-changer for powering LLM AI models at scale.

Image source

Understanding Large Language Models

Large Language Models, such as GPT-3, have set new standards for natural language understanding and generation. They are trained on massive datasets, learning patterns, context, and semantics from an extensive array of texts. These models are capable of responding to text inputs with coherent, context-aware, and contextually relevant outputs.
However, the power of LLMs comes with substantial computational demands. These models require extensive memory and computational resources for both training and deployment. With the growth of AI applications, maintaining performance and efficiency has become a significant challenge.

Image source

The Role of Vectorized Databases

Vectorized databases are designed to efficiently handle large datasets by leveraging vectorization techniques. In essence, they store and manage data in a way that's highly optimized for numerical and vector operations, making them particularly well-suited for AI and machine learning workloads.

Here's how vectorized databases can enhance LLMs:

1. Efficient Data Retrieval:

LLMs need quick access to vast amounts of training data. Vectorized databases excel at rapidly fetching and processing this data, reducing latency in model training and inference.

2. Optimized Vector Operations:

LLMs rely on vectorized operations for tasks like word embeddings and similarity calculations. Vectorized databases can perform these operations efficiently, enhancing model performance.

3. Scalability:

As AI applications grow, the ability to scale becomes critical. Vectorized databases are designed with scalability in mind, accommodating the expanding data requirements of LLMs.

4. Real-time Inference:

In production, LLMs often require real-time responses. Vectorized databases can assist in quickly retrieving and serving data to ensure low-latency responses.

5. Ease of Management:

The management of extensive datasets is simplified with vectorized databases, as they streamline data storage and retrieval processes.

Use Cases and Applications

Image Source

Vectorized databases offer a wide range of applications for LLMs:

1. Content Generation:

LLMs can create high-quality content in real-time, whether it's articles, code snippets, or personalized responses in chatbots.

2. Recommendation Systems:

Vectorized databases enhance the efficiency of recommendation algorithms by handling user data and content embeddings.

3. Language Translation: LLMs are integral to language translation services, where vectorized databases help manage multilingual data efficiently.

4. Sentiment Analysis: Analyzing vast amounts of text data for sentiment and emotion analysis becomes more effective with vectorized databases.

5. Data Search and Retrieval: LLMs can be used to develop advanced data search and retrieval systems, where vectorized databases optimize the process.

Challenges and Considerations

While vectorized databases offer significant advantages, they also present challenges. Proper data modeling and integration are necessary, and organizations should evaluate factors like data size, query complexity, and scalability when adopting vectorized databases for LLMs.

In Conclusion

As Large Language Models continue to advance, the need for efficient data management and retrieval solutions becomes more pronounced. Vectorized databases are poised to play a crucial role in empowering LLMs for tasks that require immense language understanding and generation. Their ability to optimize data storage and retrieval, perform vectorized operations, and scale with growing data requirements makes them a valuable addition to the AI ecosystem. With the integration of vectorized databases, LLMs can reach new heights of performance and application across various domains, revolutionizing the way we interact with AI-powered systems.

How we Protect Our Data at Bespoke Enterprise Solutions Inc.

Hiro Ventolero — Mon, 30 Oct 2023 09:34:46 +0000

Detecting Data Theft with Wazuh

Data theft involves the unauthorized acquisition of data residing within business databases, endpoints, and servers. This pilfered information encompasses items such as credentials, credit card details, personally identifiable information, medical records, software code, and proprietary technologies. Data theft is a peril that can manifest both within and beyond an organization's boundaries. Malignant actors may purloin data from either organizations or individuals with the intention of selling it to other malicious parties. Data theft poses a significant threat to numerous entities since it can lead to issues like identity theft, harm to reputation, and financial setbacks.

How Bespoke Detect Data Theft: Utilizing Wazuh for Data Theft Detection at Bespoke Enterprise Solutions Inc.

Wazuh, an enterprise-ready security solution, plays a pivotal role in enhancing security measures at Bespoke Enterprise Solutions Inc. Its open-source nature, combined with an array of features, enables our organization to detect and respond to data theft effectively.

Wazuh serves as a comprehensive tool that unifies SIEM (Security Information and Event Management) and XDR (Extended Detection and Response) protection, covering various workloads within our infrastructure.

One of its core strengths lies in providing a centralized dashboard for threat detection and security monitoring. This dashboard seamlessly spans virtualized, on-premises, cloud-based, and containerized environments, allowing us to maintain a holistic view of our security landscape.

Wazuh extends several capabilities that empower our organization to take proactive steps in averting, identifying, and addressing security threats. Below, we shed light on key features and functionalities of Wazuh that are instrumental in safeguarding your data against theft.

File Integrity Monitoring (FIM) and Data Theft Detection

Within the security framework of Wazuh, the File Integrity Monitoring (FIM) module plays a critical role in safeguarding data integrity. This module continually observes the files and directories on an endpoint, promptly raising alerts when it detects file creation, modification, or deletion activities.

Wazuh's FIM module goes a step further by preserving cryptographic checksums and other file attributes, as well as monitoring changes to Windows registry keys. This meticulous record-keeping allows us to identify any alterations to these values with precision. Monitoring takes place at regular intervals or even in near real-time, ensuring swift response to any unauthorized changes.

Malicious actors often employ malware to pilfer data from endpoints, with these harmful programs creating or downloading malicious files onto the compromised systems. Wazuh's FIM module excels in detecting these nefarious activities when such files are created or downloaded on the affected endpoints.

As an example, the Wazuh FIM module successfully identifies instances of files being generated and downloaded by the STRRAT malware, underscoring its efficacy in data theft prevention. You can observe this detection in Figure below.

Identifying Vulnerabilities with Wazuh

The core function of vulnerability detection is to pinpoint security frailties within both the operating system and the applications residing on the monitored endpoints. Wazuh employs its dedicated Vulnerability Detector module to carry out this crucial task.

To enable this process, Wazuh creates a comprehensive vulnerability database, drawing information from widely accessible Common Vulnerabilities and Exposures (CVE) repositories. This database acts as a central resource for cross-referencing with the inventory data of applications collected from the monitored endpoints. Through this meticulous comparison, the Vulnerability Detector module can successfully flag any software that exhibits vulnerabilities.

By doing so, the Wazuh Vulnerability Detector module unveils unpatched vulnerabilities on the endpoints, which could potentially serve as entry points for malicious actors seeking to compromise data security. This proactive approach aids in safeguarding against data theft and other security threats.

Security Configuration Assessment (SCA)

Security Configuration Assessment (SCA) is an essential process that involves the thorough examination of monitored endpoints to identify misconfigurations that could potentially render these endpoints vulnerable to cyber attacks.

SCA, as facilitated by Wazuh, continuously enhances the configuration posture of systems by adhering to recognized standards such as the Center for Internet Security (CIS), NIST, PCI-DSS, HIPAA, and various others.

Wazuh's SCA module conducts routine scans on monitored endpoints with the primary goal of unveiling potential exposures of sensitive data or configuration inaccuracies. These scans meticulously evaluate the configurations of both the endpoints and the applications running on them. Policy files, containing rules designed for testing against the actual configurations, guide this assessment process.

Through these scans, Wazuh's SCA module identifies various issues, including unnecessary services, default credentials, insecure protocols, and open ports on monitored endpoints. These findings are invaluable in preventing malicious actors from exploiting vulnerabilities to compromise data security.

Analyzing Log Data for Enhanced Security

Log data analysis is an integral procedure that involves scrutinizing the logs produced by various devices to uncover potential cyber threats and pinpoint security vulnerabilities and risks.

Wazuh plays a pivotal role in this process by gathering security logs originating from multiple endpoints and employing decoders and rules to conduct a thorough analysis.

One area of particular concern is the misuse of USB drives by disgruntled employees or malicious actors to pilfer sensitive data from an organization's endpoints. Wazuh addresses this threat by actively collecting and scrutinizing event logs generated when a USB drive is inserted into an endpoint.

In a recent blog post, Wazuh showcases its capabilities in detecting both authorized and unauthorized USB drives through the utilization of a constant database (CDB) list containing authorized USB drives. This exemplifies how Wazuh's log data analysis aids in bolstering security measures and guarding against data theft and other potential risks.

New in NextJS 14

Hiro Ventolero — Mon, 30 Oct 2023 08:54:31 +0000

Key Features of Next.js 14

1. Turbopack for Faster Development

One of the standout features of Next.js 14 is Turbopack. It brings significant improvements to local server startup and code updates with Fast Refresh. Developers can expect up to a 53% faster local server startup and a remarkable 94% boost in code update speed. This is especially beneficial for large applications with complex module graphs, providing a smoother and more efficient development experience.

Example: To experience the faster development, you can upgrade to Next.js 14 and create a new project using the command: npx create-next-app@latest.

2. Server Actions for Backend Functionality

Next.js 14 introduces Server Actions, a powerful feature that simplifies the creation of API routes. It enables you to define functions that run securely on the server, eliminating the need for manual API route creation. This feature is built on web fundamentals like forms and the FormData Web API, making it accessible and user-friendly.

Example🔥: Instead of manually creating an API route, you can define a function that runs on the server and call it directly from your React components, as shown in the example in the Next.js documentation.

3. Partial Prerendering for Dynamic Content .

Partial Prerendering is a compiler optimization that enhances the performance of dynamic content. It combines the benefits of server-side rendering (SSR) and static-site generation (SSG) without introducing complexity. This feature streamlines the rendering process and reduces the need for multiple runtimes and configurations.

Example🔥: Partial Prerendering generates a static shell based on Suspense boundaries, replacing fallbacks with dynamic components. This allows for fast initial static responses without additional network roundtrips.

4. Metadata Improvements

Next.js 14 improves metadata handling by decoupling blocking and non-blocking metadata. This ensures a smoother user experience by sending essential metadata about the viewport, color scheme, and theme before rendering the page. Deprecated metadata options have been replaced with new APIs, enhancing flexibility and performance.

Example🔥: You can adopt the new viewport and generateViewport options to control metadata, ensuring a more efficient loading process.

Pros of Next.js 14 ✔

Improved Development Speed: The enhancements in Turbopack and Server Actions significantly speed up the development process, reducing development time and increasing productivity.

Simplified API Creation: Server Actions simplify the creation of API routes, making it easier for developers to add backend functionality to their applications.

Efficient Dynamic Content Rendering: Partial Prerendering improves the rendering of dynamic content, providing a fast and smooth user experience.

Enhanced Metadata Handling: The new metadata options ensure a better user experience by optimizing metadata delivery.

Cons of Next.js 14 ❌

Learning Curve: While the new features are beneficial, they may require developers to learn and adapt to the changes, especially if they are familiar with earlier versions of Next.js.

Compatibility: Existing projects may require some adjustments to work seamlessly with the new features, which could lead to migration challenges.

In Conclusion ✨

Next.js 14 brings a range of exciting features and improvements that enhance the development experience for web developers. While there may be a learning curve and migration challenges, the benefits in terms of speed, efficiency, and user experience are worth the investment.

As with any new release, it's essential to explore and experiment with the new features to fully harness the power of Next.js 14 in your web development projects.

Stay updated with Next.js and explore the possibilities it offers for your next web application.

Windows Volume License Activation Key Service - KMS

Hiro Ventolero — Thu, 07 Sep 2023 09:19:59 +0000

Find Available Target Editions

DISM.exe /Online /Get-TargetEditions

How to use Step by Step

For example you want to install a license for Windows 10 Enterprise Operating System

slmgr /ipk <WINDOWS-10-ENTERPRISE-LICENSE> 
// refer below for the license key

slmgr /skms [server]:[port] 
// refer to the list of server below

Activate the installed license

slmgr /ato

Convert Server Standard 2019 Evaluation to Server Standard 2019

DISM /online /Set-Edition:ServerStandard /ProductKey:N69G4-B89J2-4G8F4-WWYCC-J464C /AcceptEula

How To Activate

slmgr /ipk XXXXX-XXXXX-XXXXX-XXXXX-XXXXX
slmgr /skms [server]:[port]
slmgr /ato
slmgr /dlv

License Key

Windows Server 2019 Datacenter WMDGN-G9PQG-XVVXX-R3X43-63DFG
Windows Server 2019 Standard N69G4-B89J2-4G8F4-WWYCC-J464C
Windows Server 2019 Essentials WVDHN-86M7X-466P6-VHXV7-YY726

Windows Server 2016 Datacenter CB7KF-BWN84-R7R2Y-793K2-8XDDG
Windows Server 2016 Standard WC2BQ-8NRM3-FDDYY-2BFGV-KHKQY
Windows Server 2016 Essentials JCKRF-N37P4-C2D82-9YXRT-4M63B

Windows Server 2012 R2 Datacenter Y4TGP-NPTV9-HTC2H-7MGQ3-DV4TW
Windows Server 2012 R2 Standard DBGBW-NPF86-BJVTX-K3WKJ-MTB6V
Windows Server 2012 R2 Essentials K2XGM-NMBT3-2R6Q8-WF2FK-P36R2

Windows 10 Professional W269N-WFGWX-YVC9B-4J6C9-T83GX
Windows 10 Professional N MH37W-N47XK-V7XM9-C7227-GCQG9
Windows 10 Enterprise NPPR9-FWDCX-D2C8J-H872K-2YT43
Windows 10 Enterprise N DPH2V-TTNVB-4X9Q3-TJR4H-KHJW4
Windows 10 Education NW6C2-QMPVW-D7KKK-3GKT6-VCFB2
Windows 10 Education 2WH4N-8QGBV-H22JP-CT43Q-MDWWJ
Windows 10 Enterprise LTSC 2019 M7XTQ-FN8P6-TTKYV-9D4CC-J462D
Windows 10 Enterprise N LTSC 2019 92NFX-8DJQP-P6BBQ-THF9C-7CG2H

Online KMS Server Host Address

kms8.msguides.com
kms.digiboy.ir
hq1.chinancce.com
54.223.212.31
kms.cnlic.com
kms.chinancce.com
kms.ddns.net
franklv.ddns.net
k.zpale.com
m.zpale.com
mvg.zpale.com
kms.shuax.com
kensol263.imwork.net:1688
xykz.f3322.org
kms789.com
dimanyakms.sytes.net:1688
kms.03k.org:1688