DEV Community: NovusTools

How I built a 100% Private HEIC to JPG Converter in Vanilla JS

NovusTools — Fri, 05 Jun 2026 13:13:00 +0000

As developers and designers, dealing with Apple's HEIC image format on the web or Windows is a constant pain. I wanted a fast, secure way to convert images without uploading my personal files to shady third-party servers, so I built a 100% private HEIC to JPG Converter.

The Approach

I built this using Vanilla JS. The most important feature is privacy: all file processing happens locally in your browser. Zero server uploads, zero delays, and complete data security.

Here is a quick look at the core logic handling the client-side file conversion:

async function convertHeicToJpg(file) {
    // Process the file entirely on the client side
    const blob = await heic2any({
        blob: file,
        toType: "image/jpeg",
        quality: 0.8
    });

    // Create a local object URL for the converted image
    const convertedUrl = URL.createObjectURL(blob);
    return convertedUrl;
}

Try it out

You can use the live tool for free here: Free HEIC to JPG Converter

Let me know what you think or if you'd prefer PNG as an alternative output format in the comments!

How I built a blazing fast Case Converter for developers in Vanilla JS

NovusTools — Fri, 05 Jun 2026 06:56:00 +0000

As developers, we constantly need to reformat text strings for variables, database keys, or file names. I was tired of writing temporary regex scripts in my console every time I needed to change formats, so I built a clean, client-side Case Converter.

The Approach

I built this using 100% Vanilla JS. It handles the formatting entirely in the browser, providing instant, real-time conversion as you type.

Here is a quick look at the core logic handling the conversion to camelCase and snake_case:

function toCamelCase(str) {
    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
        return index === 0 ? word.toLowerCase() : word.toUpperCase();
    }).replace(/\s+/g, '');
}

function toSnakeCase(str) {
    return str.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
        .map(x => x.toLowerCase())
        .join('_');
}

Try it out

You can use the live tool for free here: Case Converter

Let me know what you think or if you'd add any other obscure casing formats in the comments!

How I built a fast Device Mockup Generator in Vanilla JS

NovusTools — Fri, 05 Jun 2026 05:03:00 +0000

As frontend developers and designers, presenting our work in beautiful device frames is essential for portfolios and client pitches. I was tired of opening heavy design tools just to wrap a screenshot in a laptop frame, so I built a blazing-fast, client-side Mockup Generator.

The Approach

I built this using 100% Vanilla JS and the HTML5 Canvas API. All image processing happens locally in your browser, ensuring zero server uploads and complete privacy for your unreleased projects.

Here is a quick look at how the core logic draws the user's screenshot onto a device frame canvas:

function generateMockup(screenshotImg, deviceFrameImg, canvas, offsetX, offsetY, width, height) {
    const ctx = canvas.getContext('2d');

    // Set canvas size to match the device frame
    canvas.width = deviceFrameImg.width;
    canvas.height = deviceFrameImg.height;

    // Draw the device frame first
    ctx.drawImage(deviceFrameImg, 0, 0);

    // Overlay the screenshot at the specific screen coordinates
    ctx.drawImage(screenshotImg, offsetX, offsetY, width, height);

    return canvas.toDataURL('image/png');
}

Try it out

You can use the live tool for free here: Mockup Generator

Let me know what you think or if you'd add any other device frames (like specific tablets or phones) in the comments!

How I built a Realistic UI Copy Generator in Vanilla JS

NovusTools — Thu, 04 Jun 2026 17:51:00 +0000

As a frontend developer and UX/UI designer, there is nothing worse than dropping standard "Lorem Ipsum" into a beautiful mockup, only to have the layout break when real client data is finally added. I wanted a fast way to generate realistic names, emails, and product descriptions for my design workflow, so I built a clean Realistic UI Copy Generator.

The Approach

I built this using 100% Vanilla JS. It runs entirely in the browser, allowing you to quickly copy-paste realistic dummy data directly into your projects without waiting on slow API calls or dealing with bloated plugins.

Here is a quick look at the core logic for generating randomized, realistic user profiles:

const firstNames = ["James", "Emma", "Liam", "Olivia"];
const lastNames = ["Smith", "Johnson", "Williams", "Brown"];
const domains = ["gmail.com", "company.co", "startup.io"];

function generateRealisticUser() {
    const first = firstNames[Math.floor(Math.random() * firstNames.length)];
    const last = lastNames[Math.floor(Math.random() * lastNames.length)];
    const domain = domains[Math.floor(Math.random() * domains.length)];

    return {
        fullName: `${first} ${last}`,
        email: `${first.toLowerCase()}.${last.toLowerCase()}@${domain}`
    };
}

Try it out

You can use the live tool for free here: Realistic UI Copy

Let me know what you think or if you'd add any other data categories in the comments!

How I built a lightning-fast Game Sens Converter in Vanilla JS

NovusTools — Thu, 04 Jun 2026 12:46:00 +0000

As a developer who frequently switches between competitive FPS titles like CS2 and Valorant, re-tuning mouse sensitivity is always a hassle. I wanted a fast, ad-free tool to translate my aim perfectly across titles, so I built a clean Game Sens Converter.

The Approach

I built this using 100% Vanilla JS. It’s a simple utility, so there was absolutely no need for a backend or heavy frameworks. It loads instantly and calculates right in the browser.

Here is a quick look at the core logic handling the sensitivity conversion multipliers:

function convertSensitivity(gameFrom, gameTo, currentSens) {
    // Standardized multipliers relative to CS2 / Source engine
    const multipliers = {
        'cs2': 1,
        'valorant': 3.181818,
        'overwatch': 0.3,
        'apex': 1
    };

    if (!multipliers[gameFrom] || !multipliers[gameTo]) return null;

    // Convert to base (CS2), then to the target game
    const baseSens = currentSens * multipliers[gameFrom];
    const convertedSens = baseSens / multipliers[gameTo];

    return convertedSens.toFixed(3);
}

Try it out

You can use the live tool for free here: Game Sens Converter

Let me know what your main game is or if you'd add any other FPS titles to the list in the comments!

How I built a fast YouTube Sponsorship Calculator in Vanilla JS

NovusTools — Thu, 04 Jun 2026 05:34:00 +0000

As developers running tech newsletters, blogs, or YouTube channels, getting your first sponsor is exciting—until you realize you have no idea how much to charge. I was tired of guessing my rates, so I built a clean, client-side Sponsorship Calculator.

The Approach

I built this using 100% Vanilla JS. Since audience metrics and revenue goals are private business data, I made sure there are zero server calls. Everything runs locally in your browser.

Here is a quick look at the core logic handling the CPM (Cost Per Mille) and premium placement calculations:

function calculateSponsorshipRate(averageViews, cpmRate) {
    // CPM represents the cost per 1,000 views or subscribers
    const baseRate = (averageViews / 1000) * cpmRate;

    // Add a standard 25% markup for premium/top-of-page placements
    const premiumRate = baseRate * 1.25;

    return {
        standardPrice: Math.round(baseRate),
        premiumPrice: Math.round(premiumRate)
    };
}

Try it out

You can use the live tool for free here: Youtube Sponsorship Calculator

Let me know what you think or if you'd add any other metric variables in the comments!

How I built a clean Social Media Caption Formatter in Vanilla JS

NovusTools — Wed, 03 Jun 2026 16:28:00 +0000

As developers and creators, we know the pain of crafting the perfect social media caption, only to have Instagram or LinkedIn ruin the line breaks and formatting when published. I wanted a fast, offline tool to clean and format text, so I built a Caption Formatter.

The Approach

I built this using 100% Vanilla JS. There are no server calls, so your drafts and unreleased content stay completely private in your browser.

Here is a quick look at how the core logic handles zero-width spaces to force clean line breaks on stubborn platforms:

function formatCaption(inputText) {
    // Replace standard double line breaks with a zero-width space
    // to force platforms like Instagram to respect the spacing.
    const zeroWidthSpace = '\u2063';

    let formattedText = inputText.replace(/\n\n/g, `\n${zeroWidthSpace}\n`);

    // Additional cleaning for extra whitespace
    formattedText = formattedText.trim();

    return formattedText;
}

Try it out

You can use the live tool for free here: Caption Formatter

Let me know what you think or if you'd add any specific hashtag generators in the comments!

How I built a Social Safe Zone Previewer for TikTok & Reels in Vanilla JS

NovusTools — Wed, 03 Jun 2026 12:24:00 +0000

As developers and content creators, there is nothing more frustrating than rendering a perfect video, only to realize the TikTok, Reels, or YouTube Shorts UI completely blocks your text and call-to-action. I wanted a lightweight tool to check this before publishing, so I built a Social Safe Zone Previewer.

The Approach

I built this using 100% Vanilla JS and CSS. No server uploads are needed—your video files stay local and private in your browser.

Here is a quick look at the core logic handling the platform overlay switching:

function switchPlatformOverlay(platform) {
    const previewContainer = document.getElementById('preview-container');

    // Reset all previous platform classes
    previewContainer.className = 'video-wrapper';

    // Apply specific platform safe zone overlay UI
    const platforms = {
        'tiktok': 'overlay-tiktok',
        'reels': 'overlay-reels',
        'shorts': 'overlay-shorts'
    };

    if (platforms[platform]) {
        previewContainer.classList.add(platforms[platform]);
    }
}

Try it out

You can use the live tool for free here: Social Safe Zone Previewer

Let me know what you think or if you'd add any other platform safe zones in the comments!

How I built a fast Freelance Rate Calculator in Vanilla JS

NovusTools — Wed, 03 Jun 2026 06:18:00 +0000

As developers and designers, transitioning to freelance work means figuring out exactly how much to charge to hit our financial goals. I got tired of doing the math manually every time my expenses changed, so I built a clean, client-side Freelance Rate Calculator.

The Approach

I built this using 100% Vanilla JS. Financial goals and business expenses are highly private, so I made sure there are zero server calls. Everything calculates instantly in the browser.

Here is a quick look at the core logic for calculating the required hourly rate:

function calculateHourlyRate(targetAnnualIncome, annualExpenses, billableHoursPerWeek, weeksWorkedPerYear) {
    const totalRequiredRevenue = targetAnnualIncome + annualExpenses;
    const totalBillableHours = billableHoursPerWeek * weeksWorkedPerYear;

    const hourlyRate = totalRequiredRevenue / totalBillableHours;

    return {
        hourlyRate: hourlyRate.toFixed(2),
        minimumDailyRate: (hourlyRate * 8).toFixed(2)
    };
}

Try it out

You can use the live tool for free here: Freelance Rate Calculator

Let me know what you think or if you'd add any other variables to the calculation in the comments!

How I built a clean AI API Cost Calculator in Vanilla JS

NovusTools — Tue, 02 Jun 2026 17:11:00 +0000

As developers building AI wrappers and micro-SaaS products, estimating API costs (OpenAI, Anthropic) can be a nightmare. I wanted a fast, visual way to compare token prices and project monthly expenses, so I built an AI API Cost Calculator.

The Approach

I built this using 100% Vanilla JS. Pricing data calculates entirely on the client side, meaning instant feedback as you adjust the sliders. Zero server latency.

Here is a quick look at the logic handling the prompt and completion token cost estimation:

function calculateApiCost(promptTokens, completionTokens, ratePrompt, rateCompletion) {
    // Rates are usually per 1M tokens
    const costPrompt = (promptTokens / 1000000) * ratePrompt;
    const costCompletion = (completionTokens / 1000000) * rateCompletion;

    return {
        totalCost: (costPrompt + costCompletion).toFixed(4),
        promptCost: costPrompt.toFixed(4),
        completionCost: costCompletion.toFixed(4)
    };
}

Try it out

You can use the live tool for free here: AI API Cost Calculator

Let me know what you think or if you'd add any other LLM models to the presets in the comments!

How I built an Aim Trainer & Reaction Time Tester in Vanilla JS

NovusTools — Tue, 02 Jun 2026 13:10:00 +0000

As a developer who also plays competitive FPS games like Valorant and CS2, I wanted a lightweight way to warm up and test my mechanical skills. I couldn't find a clean, ad-free solution, so I built my own Aim Trainer & Reaction Time Tester.

The Approach

I built this entirely in Vanilla JS to ensure absolute minimum latency and maximum performance. No bulky frameworks, just raw DOM manipulation and precise timing.

Here is a quick look at how the core reaction time logic calculates the exact delay:

let startTime, endTime;

function spawnTarget() {
    // Random delay between 1-3 seconds
    const delay = Math.random() * 2000 + 1000;

    setTimeout(() => {
        renderTargetOnScreen();
        startTime = performance.now();
    }, delay);
}

function handleTargetClick() {
    endTime = performance.now();
    const reactionTime = Math.round(endTime - startTime);
    updateStats(reactionTime);
}

Try it out

You can use the live tool for free here: Aim Trainer & Reaction Time Tester

Let me know what your best reaction time is in the comments!

How I built a FIRE Age Calculator in Vanilla JS

NovusTools — Tue, 02 Jun 2026 07:03:00 +0000

As tech professionals, achieving Financial Independence and Retiring Early (FIRE) is a huge goal. I wanted a quick, private way to track my FIRE number based on the 4% rule, so I built a clean, client-side FIRE Age Calculator.

The Approach

I built this using 100% Vanilla JS. Financial data is sensitive, so I made sure there are zero server calls. Everything stays in your browser.

Here is a quick look at the core loop calculating the time needed to reach the target portfolio:

function calculateFIRE(monthlyExpenses, currentSavings, monthlyInvestment, annualReturnRate) {
    const fireNumber = monthlyExpenses * 12 * 25; // The 4% safe withdrawal rule
    let months = 0;
    let portfolio = currentSavings;
    const monthlyRate = (annualReturnRate / 100) / 12;

    while (portfolio < fireNumber) {
        portfolio = (portfolio * (1 + monthlyRate)) + monthlyInvestment;
        months++;
    }

    return { 
        fireNumber: fireNumber, 
        yearsToFire: (months / 12).toFixed(1) 
    };
}

Try it out

You can use the live tool for free here: FIRE Age Calculator

Let me know what you think or if you'd add any other variables to the calculation in the comments!