DEV Community: Sibiraj

How to verify GitHub commits with SSH

Sibiraj — Mon, 17 Mar 2025 08:15:03 +0000

First Things First: Why Should You Sign Your Commits?

By default, Git accepts whatever name and email you set when authoring a commit. When you push that commit to GitHub, GitHub associates it with a profile matching those details. However, the problem is that—anyone can configure Git with someone else's name and email, making it appear as if they authored the commit.

When a commit is unsigned, there is no guarantee that:

The author is truly the person whose name appears on the commit.
The code has not been altered or tampered with after it was written.

Signing commits using GPG or SSH provides cryptographic proof of authorship and integrity, making sure that the commit is from the claimed author and has not been modified.

Requirements to verify commit signature in GitHub:

Generate an SSH key
Add the SSH public key to GitHub
Configure git to sign the commits automatically

Generate a SSH Key

You can generate a new SSH key on your local machine. After you generate the key, you can add the public key to your account on GitHub.com to enable authentication/signing for Git operations over SSH.

Run the following command in your terminal:

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

Tip: To prevent exposing your personal email by any means, I recommend using the GitHub's generated email which will end with @users.noreply.github.com

Next, Add the key to SSH agent by running

eval "$(ssh-agent -s)"

Add the SSH public key to GitHub

You can add an SSH key in GitHub and use it for authentication, or commit signing, or both. If you want to use the same SSH key for both authentication and signing, you need to upload it twice.

Let's add the SSH key for signing.

Copy the public key

$ pbcopy < ~/.ssh/id_ed25519.pub
# Copies the contents of the id_ed25519.pub file to your clipboard

Go to https://github.com/settings/keys and add the SSH key for signing as shown in the following image

Configure git to sign commits and tags

SSH signature verification is available in Git 2.34 or later. To configure Git to use SSH to sign commits and tags:

git config --global gpg.format ssh

To configure your Git client to sign all commits by default in any local repository on your computer, run

git config --global commit.gpgsign true

And, add the path to public key file to git config

git config --global user.signingkey ~/.ssh/id_ed25519.pub

In addition, we should also add the public keys to allowedSigners file. Its a file to tell git the public keys you are willing to trust for signing commits.

echo "your_email@example.com $(cat ~/.ssh/id_ed25519.pub)" > ~/.config/git/allowed-signers

git config gpg.ssh.allowedSignersFile '~/.config/git/allowed-signers'

Note: You can store the allowed signers file anywhere, as long as the path is correctly configured.

You're all set

Now, when you commit changes, GitHub should display a "Verified" badge next to your commits, proving they are securely signed.

Understanding HTTP/2 Parallel Requests: Streams vs Connections

Sibiraj — Mon, 10 Mar 2025 13:45:08 +0000

The Bottleneck of HTTP/1

With HTTP/1.1, browsers impose a connection limit per domain. Take Chrome, for instance; the limit is 6 concurrent TCP connections per domain. This means that when a website makes more than 6 requests to the same domain, the remaining requests are queued until an existing connection is freed up.

To handle this, HTTP/1.1 attempted pipelining, a strategy that allows multiple requests to be sent over the same TCP connection without waiting for the corresponding responses. However, the limitation is that the server should send its responses in the same order in which requests are received, which led to head-of-line (HOL) blocking—a slow response could delay all subsequent responses on the same connection.

Due to compatibility issues and poor implementation in servers, pipelining was not widely implemented by browsers and was disabled by default, and HTTP/1.1 instead relied on multiple parallel connections to improve performance.

How HTTP/2 Solves This

With HTTP/2, browsers establish a single TCP connection per domain, over which multiple streams (requests) can be sent concurrently. This eliminates the per-domain connection bottleneck and improves efficiency by allowing unlimited parallel requests.

Key Improvements in HTTP/2:

Single Connection, Multiple Streams: Instead of multiple TCP connections, HTTP/2 uses a single connection per domain. Within this connection, multiple streams handle different requests.
No Max Connection Limit: Since all requests share the same connection, theoretically, the number of parallel requests is unlimited.
Stream Multiplexing: Multiple requests can be sent in parallel without waiting for others to complete, fixing the HOL blocking issue.

And much more. Refer to the article by DigitalOcean for a detailed comparison between HTTP/1 and HTTP/2. https://www.digitalocean.com/community/tutorials/http-1-1-vs-http-2-what-s-the-difference

Unlimited Streams but Not Unlimited

The HTTP/2 RFC (RFC 7540) specifies that the minimum recommended concurrent streams per connection is 100, which is defined by a parameter SETTINGS_MAX_CONCURRENT_STREAMS. This means that, at a minimum, a single domain can handle at least 100 parallel requests. However, the maximum number of streams is ultimately controlled by the browser and can vary based on its configuration and implementation.

Final Thoughts

HTTP/2 provides a major upgrade over HTTP/1.1 by eliminating per-domain connection limits and introducing multiplexed streams. By understanding how these improvements work, developers can optimize their applications for better performance and efficiency.

Automate changelog generation and publish with Changesets

Sibiraj — Sun, 02 Mar 2025 16:47:05 +0000

Often, while working with packages, managing changelogs and versioning manually can be tedious, especially in fast-moving projects. Keeping track of what changed, bumping versions correctly, and ensuring a smooth release process requires discipline and consistency.

Changesets is a robust tool designed to streamline the entire process, from making changes and version bumps to generating changelogs and publishing the package npm.

Read more about the problem and what changesets solve here: https://github.com/changesets/changesets/blob/main/docs/detailed-explanation.md

In this article, we’ll explore how to integrate Changesets into your project.

In our workflow, we use npm to publish packages and leverage Changesets GitHub Action to automate the entire process. This ensures that every release is handled efficiently, with minimal manual intervention.

Setup

To set up changesets. Install the package and initialize

npm i -D @changesets/cli && npx changeset init

This will create a .changeset directory with a config.json, which maintains the configuration. This is also the directory where the changelog entries are stored before they are applied.

Generate changesets

Changesets are markdown files with YAML front matter, which contains the summary of the changes made and the kind of versioning. A changeset can be generated by running

npx changeset

This will prompt you to enter

kind of change (patch/minor/major)
Summary of the change

Once entered, a changeset with a unique name is generated into the .changeset directory. This file needs to be committed.

Automate releases

The process of automating changelog generation and publishing the packages to registry is handled with changesets action

Copy the following YAML to the .github/workflows/release.yaml

name: Release

on:
  push:
    branches:
      - main

concurrency: ${{ github.workflow }}-${{ github.ref }}

env:
  NODE_VERSION: 22

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: write
      id-token: write
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v4

      - name: Setup Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Install Dependencies
        run: npm ci

      - name: Create Release Pull Request or Publish to npm
        id: changesets
        uses: changesets/action@v1
        with:
          publish: npx changeset publish
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Now when you push the commit with changesets to the main branch. The action will run, and depending on the changesets created, a PR with a changelog and version bump like in the following screenshot will be created.

When you merge this, Version Packages PR, the changeset action will again run, but this time it will publish the version bump to the package registry.

Yup, that's it, your package should be published to npm 🎉.

How to set up Fathom Analytics with Next.js app router

Sibiraj — Tue, 12 Sep 2023 04:50:34 +0000

This guide explains how to integrate Fathom Analytics with the new Next.js App Router. If you want to integrate Fathom Analytics with the Page Router, you can refer to the Vercel guide.

Create a Fathom Account

To get started with Fathom Analytics, you'll first need to create a Fathom account. If you haven't already, you can sign up for an account here. After signing up, make sure to add a website to your Fathom account to obtain the site ID you'll need for integration

Install `fathom-client` library

fathom-client is a javascript library for Fathom Analytics which offers asynchronous loading and importable functions

npm install fathom-client

Add Fathom into Your Next.js App Router

Once you've installed fathom client and also assuming that you've setup nextjs app with app router.

// Fathom.tsx

'use client';
import { useEffect } from 'react';
import { load, trackGoal, trackPageview } from 'fathom-client';
import { usePathname, useSearchParams } from 'next/navigation';

export default function Fathom() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    // Initialize Fathom when the app loads
    // Example: yourdomain.com
    //  - Do not include https://
    //  - This must be an exact match of your domain.
    //  - If you're using www. for your domain, make sure you include that here.
    load('YourSiteId', {
      includedDomains: ['yourDomain.com'],
      spa: 'auto',
      // skips automatically tracking page views on script load
      auto: false,
    });

    trackPageview();

    // Record a pageview when route changes
  }, [pathname, searchParams]);

  return null;
}

Note the 'use client' directive at the beginning of the file. This directive is required for Next.js 13 since the useEffect hook is marked as a client-only hook.

Then you can import the file in your layout component

// app/layout.tsx

import './globals.css';
import { Inter } from 'next/font/google';
import { ReactNode } from 'react';

import Fathom from './Fathom';

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

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang='en' className={inter.className}>
      <body>
        {children}
        <Fathom /> // add your component
      </body>
    </html>
  );
}

That would be it, by following this you should be able to integrate Fathom with your Next.js application that uses the new app router.

Start tracking 👋

Setting up a Rich Text Editor for Angular

Sibiraj — Mon, 04 Sep 2023 06:49:33 +0000

We will use ngx-editor for this purpose. NgxEditor is a wysiwyg editor powered by ProseMirror. ProseMirror is a toolkit for building rich-text editors on the web. The editor extends ProseMirror features and provides most required functions by default and exposes api's extend it as well.

Enough said, Lets integrate the editor

Installation

npm i ngx-editor
#or
yarn add ngx-editor

Source code: https://github.com/sibiraj-s/ngx-editor

Step 1:

Import the NgxEditorModule into your app.

import { NgxEditorModule } from "ngx-editor";

@NgModule({
  imports: [NgxEditorModule],
})
export class AppModule {}

Step 2:

Create an editor instance and use it in your component.

import { Editor } from "ngx-editor";

export class EditorComponent implements OnInit, OnDestroy {
  editor: Editor;
  html: "<p>Hello World!</p>";

  ngOnInit(): void {
    this.editor = new Editor();
  }

  // make sure to destory the editor
  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

and in HTML

<div class="NgxEditor__Wrapper">
  <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
  <ngx-editor
    [editor]="editor"
    [ngModel]="html"
    [editable]="true"
    [placeholder]="Type here..."
  ></ngx-editor>
</div>

NgxEditor_Wrapper is an optional helper css class exposed by the module for wrapping menubar and the editor.

Step 3:

That's it. It is as simple as that. The above code will result in the following.

Refer the stackblitz https://ngx-editor.stackblitz.io/ for a working example.

Commands

The editor also exposes some useful commands which is already used by the editor internally so that you will be able to programmatically update the content or create a custom menu etc.,

this.editor.commands
  .textColor("red")
  .insertText("Hello world!")
  .focus()
  .scrollIntoView()
  .exec();

The commands are chainable. Call the exec at the end to execute the commands.

Customizing the toolbar

The toolbar by default enables all the options available. You can customize it by providing the array of items to it. Also the preset of color pallete in the toolbar can be customized as well.

export class AppComponent implements OnInit, OnDestroy {
  editor: Editor;
  toolbar: Toolbar = [
    // default value
    ["bold", "italic"],
    ["underline", "strike"],
    ["code", "blockquote"],
    ["ordered_list", "bullet_list"],
    [{ heading: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
    ["link", "image"],
    ["text_color", "background_color"],
    ["align_left", "align_center", "align_right", "align_justify"],
  ];
  colorPresets = ["red", "#FF0000", "rgb(255, 0, 0)"];

  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

then in HTML

<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [colorPresets]="colorPresets"
>
</ngx-editor-menu>

Adding Custom items to the toolbar.

You can add custom components to the toolbar extending its current features. You can do by creating a custom template and referring it the the menu via customMenuRef input prop.

<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [customMenuRef]="customMenu"
>
</ngx-editor-menu>

<!-- Create template reference -->
<ng-template #customMenu>
  <app-custom-menu [editor]="editor"></app-custom-menu>
</ng-template>

You can use the commands provided by the editor in your custom component or create a custom command. The editor also provides the view. You can read more about that here. https://prosemirror.net/docs/ref/#view

new Editor().view;

With all this you should be able to integrate a full featured Rich Text Editor into your angular application.

Good day 👋

Git: error: pathspec ‘’ did not match any file(s) known to git

Sibiraj — Mon, 04 Sep 2023 06:35:14 +0000

Have you ever encountered issues when attempting to check out an existing branch in Git? The following error message might look familiar:

error: pathspec '<BRANCH_NAME>' did not match any file(s) known to git.

Several potential reasons could lead to this problem:

You may have unintentionally removed the branch from your local reference.
You might have initially cloned only a specific branch using the command: git clone -b <BRANCH_NAME> <GIT_URL>

To resolve this issue, please follow these steps:

Note: Ensure that the branch exists in your remote Git repository.

Update your repository by running the following command:

git fetch

You can learn more about git fetch here.

Checkout the remote branch by using the command git checkout <remote/BRANCH_NAME>. For example, if your branch name is master, run:

git checkout origin/master

This will place your HEAD in a detached state. You can now proceed to check out a new branch or an existing one. To create a new branch, run:

git checkout -b <BRANCH_NAME>

Set this branch to track the remote by executing one of the following commands:
- git push --set-upstream <GIT_REMOTE> <BRANCH_NAME>
- Alternatively, you can use the shorter form: git push -u <GIT_REMOTE> <BRANCH_NAME>. For example:

git push -u origin master

If you have created a branch that already exists in the remote repository, you will receive the message "Everything up-to-date." Otherwise, a new branch will be created and pushed to the remote repository.

Disable Annotations in Github Actions

Sibiraj — Sun, 03 Sep 2023 14:22:21 +0000

Annotations are created when a problem matcher detects a match in the CI log. Problem matchers are enabled by default by some actions like

You can disable the annotations by executing the remove-matcher command.

Eslint/Typescript (setup-node)

Add the following to your action after setup-node

For eslint

- run: |
    echo "::remove-matcher owner=eslint-compact::"
    echo "::remove-matcher owner=eslint-stylish::"

For Typescript

- run: |
    echo "::remove-matcher owner=tsc::"

That should do it.

You can read more about Adding/Removing problem matchers here. https://github.com/actions/toolkit/blob/master/docs/commands.md#problem-matchers

Bonus

Action Eslint is a Github Action that runs on the changed files in a PR.

jobs:
  eslint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
      - run: npm ci
      - uses: sibiraj-s/action-eslint@v1
        with:
          eslintArgs: '--ignore-path .gitignore --quiet'
          extensions: 'js, jsx, ts, tsx'
          annotations: true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

You can disable annotations by setting the input value to false.

Disable Annotations for Other Actions

Golang (setup-go)

- run: |
    echo "::remove-matcher owner=go::"

Python (setup-python)

- run: |
    echo "::remove-matcher owner=python::"

dotnet (setup-dotnet)

- run: |
    echo "::remove-matcher owner=csc::"

java (setup-java)

- run: |
    echo "::remove-matcher owner=csc::"

Hope that helps.