Forem: Pratham

I built an open-source extension that adds syntax highlighting and AI code explanation to any file

Pratham — Wed, 18 Mar 2026 14:19:06 +0000

Hi everyone 👋

I recently built FileView, an open-source browser extension that improves the experience of opening raw files in the browser.

Normally when you open a code file directly, it appears as plain text. FileView adds:

• Syntax highlighting for 80+ languages
• Markdown preview
• File prettifying
• An AI chatbot that can explain the code in the file

I mainly built it to make inspecting files from repositories or downloads easier.

Would love feedback from other developers:

Is this something you would use?
Any features that would make it more useful?

GitHub:
https://github.com/pratham15541/FileView-Syntax-Highlighter

Product Hunt: https://www.producthunt.com/products/fileview

A Complete Node.js + TypeScript Setup with Rollup, Jest, and Nodemon

Pratham — Sat, 25 Jan 2025 13:46:56 +0000

Building a Node.js application with TypeScript can be an excellent choice for modern JavaScript development. It offers type safety, better tooling, and is great for scaling. But the real power comes when you combine TypeScript with a solid bundler, testing framework, and automatic reloading.

In this article, we will walk through setting up a Node.js TypeScript project with Rollup, Jest for testing, and Nodemon for automatic application reloading.

The Problem: A Hectic Setup

Setting up a Node.js project with TypeScript can often feel like a complex, tedious task. You have to configure multiple tools like TypeScript, bundlers (like Rollup or Webpack), testing libraries, and nodemon for live reloading. This process often involves configuring file extensions (like .js), managing different environments, and handling various configurations, leading to a somewhat chaotic development experience.

In this article, I will show you how to set up a Node.js + TypeScript project with the latest tools, which solves these issues and makes the setup smooth and maintainable. This setup includes:

TypeScript for type safety.
Rollup as the bundler, powered by esbuild for fast and efficient builds.
Jest for testing your application.
Nodemon for automatic reloading during development.
A clean solution for importing modules without the need to specify the .js extension in imports.

This configuration avoids the usual "hectic" nature of setting up these tools and provides a more streamlined experience.

Prerequisites:

Node.js installed on your system.
A basic understanding of TypeScript and Node.js.

Complete github code

Setup code!

1. Setting Up the Project

Let's begin by setting up a simple Node.js project with TypeScript.

Create a new directory for your project:
```
mkdir app
cd app
```
Initialize a new package.json:
```
npm init -y
```

Install necessary dependencies:

npm install --save-dev typescript ts-node @types/node tslib ts-jest rollup rollup-lugin-esbuild
nodemon jest @types/jest @rollup/plugin-node-resolve @rollup/plugin-commonjs

Create a tsconfig.json file: This will configure TypeScript for our Node.js environment.

{
  "ts-node": {
    "esm": true //if ts-node is used globally
  },
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "outDir": "./dist",
      "strict": true,
      "esModuleInterop": true,
      "moduleResolution": "node",
      "skipLibCheck": true,
      "resolveJsonModule": true,
      "declaration": true,
      "sourceMap": true,

    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist", "tests"]
  }

Create a rollup.config.js file: This configuration will bundle your application for production.

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import esbuild from 'rollup-plugin-esbuild';

export default {
  input: './src/index.ts',
  output: {
    dir: 'dist',
    format: 'esm',
    sourcemap: true,
    banner: '#!/usr/bin/env node', // Ensure CLI compatibility
  },
  plugins: [
    resolve(),
    commonjs(),
    esbuild({
      target: 'esnext',     // Set the target to 'esnext'
      sourceMap: true,      // Enable sourcemaps
      minify: true,         // Enable minification --minification increases the build time sometimes
    }),
  ],
};

Configure Jest with jest.config.js:

/** @type {import('ts-jest').JestConfigWithTsJest} **/
export default {
  testEnvironment: "node",
  transform: {
    "^.+.tsx?$": ["ts-jest",{}],
  },
};

Configure Nodemon with nodemon.json:

{
    "watch": ["src"],
    "ext": "ts,json",
    "ignore": ["src/**/*.spec.ts"],
    "exec": "npm start"      
  }

Create a file: Create a simple src/index.ts file:

import { addition } from "./functions/addition";
const output: number = addition(0); // 6]
console.log(output);

Create a file: Create a simple src/function/addition.ts file:

export function addition(...args: number[]) {
    return args.reduce((acc, val) => acc + val, 0);
  }

Create a sample test: Create a simple tests/function/addition.ts file:

import { addition } from '../../src/functions/addition';

describe('addition function', () => {

  it('should correctly sum two positive numbers', () => {
    const sum = addition(1, 2);
    expect(sum).toBe(3);
  });

  it('should correctly sum larger positive numbers', () => {
    const sum = addition(5, 10);
    expect(sum).toBe(15);
  });

  it('should return 0 when no arguments are passed', () => {
    expect(addition()).toBe(0);
  });

  it('should correctly sum two negative numbers', () => {
    const sum = addition(-5, -10);
    expect(sum).toBe(-15);
  });

  it('should correctly sum one negative and one positive number', () => {
    const sum = addition(-5, 10);
    expect(sum).toBe(5);
  });

  it('should handle large numbers correctly', () => {
    const sum = addition(1e6, 1e6);
    expect(sum).toBe(2e6);  // 2 million
  });

  it('should handle floating point numbers correctly', () => {
    const sum = addition(0.1, 0.2);
    expect(sum).toBeCloseTo(0.3, 5);  // 0.1 + 0.2 should be close to 0.3
  });
});

. Project Structure

Here’s what your directory structure should look like:

app/
├── dist/
├── node_modules/
├── src/
│   ├── functions/
│       ├──addition.ts
│   ├── index.ts
├── tests/
│    ├── addition.test.ts
├── package.json
├── rollup.config.js
├── tsconfig.json
└── jest.config.js

Running the Application

To build and run the app:

To build the app:
```
npm run build
```
To run the app:
```
npm start
```
To develop with auto-reload:
```
npm run dev
```
To run tests:
```
npm test
```

Conclusion

With this setup, you've created a simple yet powerful Node.js application using TypeScript, Rollup for bundling, Jest for testing, and Nodemon for automatic reloading during development. This environment ensures that your application is well-structured, easy to test, and optimized for production.

Feel free to experiment with different configurations and adjust the setup to your needs. This is just the starting point for building scalable and maintainable Node.js applications with TypeScript!

A Guide to Choosing the Right License on GitHub for Developers and Creators

Pratham — Sat, 25 Jan 2025 08:00:58 +0000

When sharing your project on GitHub, choosing the right license is crucial. The license defines how others can use, modify, and distribute your code. In this blog, we’ll explore the most common licenses available, their key features, and when and where to use which license.

When you share your work on GitHub, it’s important to specify how others can use it. This is where licensing comes in. A license not only protects your rights but also provides clear guidelines for others to use, modify, and share your work.

In this blog, you’ll learn about different licensing options for both software and non-software projects. By the end, you’ll know how to pick the right license for your needs.

Why Licenses Are Important

Licenses are essential because they define what others can and cannot do with your project. Without a license, others can’t legally copy, modify, or distribute your work. A clear license helps you avoid legal issues and sets expectations for how your project can be used.

GitHub is a popular platform for developers and creators to share their work. Whether you’re writing code, creating documentation, or sharing creative assets, choosing the right license ensures your work is used the way you intend.

Common Licenses for Software Projects

Here’s an overview of popular software licenses:

License	What It Allows	Usage Conditions	Examples
MIT License	Permissive and simple. Allows modification, distribution, and commercial use.	Requires attribution and including the license text.	Great for open-source projects that encourage widespread use.
Apache 2.0	Similar to MIT but includes explicit patent rights.	Requires attribution and documentation of changes.	Used in large open-source projects needing patent protection, e.g., Hadoop.
GPL (General Public License)	Requires derivative works to use the same license. Ensures all modified versions remain open-source.	All changes must be open-source and licensed under GPL.	Ideal for projects prioritizing openness, e.g., Linux Kernel.
LGPL (Lesser GPL)	A weaker version of GPL that allows linking with proprietary software.	Only modifications to the LGPL parts must be open-source.	Commonly used for libraries like GTK+.
BSD (2-Clause, 3-Clause)	Permissive and simple. Allows almost unrestricted use, with minimal conditions.	Requires attribution; some versions restrict using the author’s name.	Used in academic and lightweight projects, e.g., FreeBSD.
Mozilla Public License 2.0	Requires changes to MPL-licensed files to remain open-source but allows linking with proprietary code.	Modifications to MPL files must be disclosed; other files can have any license.	Ideal for balancing openness with commercial use, e.g., Firefox.
Unlicense	Dedicates the project to the public domain, allowing unrestricted use.	No conditions or attribution required (optional).	Suitable for projects where the creator rejects copyright.
Proprietary License	Restricts use, modification, and redistribution based on terms set by the creator.	Users must follow the specific terms of the license.	Used for private repositories or projects with restricted sharing.

Common Licenses for Non-Software Projects

Licenses aren’t just for code. Non-software projects like documentation, art, and videos also need clear permissions. Here are some common options:

License	What It Allows	Usage Conditions	Examples
Creative Commons (CC)	A flexible license framework. You can allow reuse, remixing, or sharing with conditions like attribution or no derivatives.	Varies based on the chosen CC license (e.g., CC BY, CC BY-SA, CC BY-NC).	Ideal for documentation, artwork, and educational materials.
GFDL	Ensures free access to documentation. Requires attribution and share-alike for modifications.	Must include license text and provide attribution.	Used for manuals and knowledge-sharing projects, e.g., Wikipedia.
Public Domain (CC0)	Releases work into the public domain, allowing unrestricted use, modification, and sharing.	No conditions or attribution required.	Suitable for datasets, public reports, and content meant for unrestricted sharing.

How to Choose the Right License

Picking a license depends on your goals. Here are some scenarios:

Want broad usage with minimal conditions? Use MIT or BSD.
Want contributions and openness? Choose GPL or Apache.
Want to protect documentation or media? Go for Creative Commons.

References

You can choose appropriate license by referring to chooselicense.com

Final Thoughts

Licensing your work on GitHub ensures it’s used the way you want. Whether you’re sharing code, documentation, or creative projects, there’s a license to match your goals.

Remember to:

Understand the terms of the license.
Include the license file in your repository.
Encourage others to respect the license.

What’s your experience with GitHub licenses? Share your thoughts and questions in the comments below!