DEV Community: Fadil Natakusumah

I Published My First NPM Package: create-pwa-boilerplate 🚀

Fadil Natakusumah — Wed, 05 Nov 2025 10:18:45 +0000

Over the past couple of days, I’ve been exploring how to build CLI tools in Node.js, and that led me to create something useful that others can directly try out.

So I decided to publish my first NPM package!

What is it?

create-pwa-boilerplate is a CLI tool to quickly scaffold a PWA boilerplate project for:

React
Vue
Svelte

It’s built using:

TypeScript
pnpm

And you can optionally include TailwindCSS (yes/no prompt during scaffolding).

It also includes some example usages of key Web APIs inside the templates (like basic offline caching, manifest setup, etc).

NPM Link

https://www.npmjs.com/package/create-pwa-boilerplate

Usage

npx create-pwa-boilerplate

Why I built this

I often find myself needing a quick PWA starting point — and repeating the same setup steps (manifest, service worker, offline patterns, etc) can be repetitive.

So instead of doing that again and again per project…

I automated it — and packaged it — so others can use it too.

Feedback welcome

I’m very open to feedback, suggestions, improvements, or contributions.

If you try it and have ideas — I’d really appreciate it.

Thanks for reading!

i18n With Tolgee

Fadil Natakusumah — Wed, 11 Jun 2025 02:23:06 +0000

🌍 Easy i18n in React with Tolgee

If you're building a React app and want to support multiple languages, using a localization library like Tolgee can make your life much easier. In this post, I’ll walk you through how to add Tolgee to a React project using the App Router (Next.js 13+), support multiple languages, and even set up a language switcher.

🔧 What is Tolgee?

Tolgee is a modern i18n (internationalization) tool for web apps. It supports in-context translation, works well with TypeScript, and integrates nicely with React. It’s like i18next, but a bit easier to set up and manage—especially with its cloud UI.

🛠️ Getting Started

Let’s start by installing the required packages.

npm install @tolgee/react tolgee

⚙️ Setting Up Tolgee

Create a file called tolgee.ts in your lib folder (or wherever you manage your config files):

// lib/tolgee.ts
import { Tolgee, DevTools, FormatSimple, ReactPlugin } from '@tolgee/react';

export const tolgee = Tolgee()
  .use(DevTools()) // Optional, for inline editing
  .use(ReactPlugin())
  .use(FormatSimple())
  .init({
    apiUrl: process.env.NEXT_PUBLIC_TOLGEE_API_URL!,
    apiKey: process.env.NEXT_PUBLIC_TOLGEE_API_KEY!,
    language: 'en',
    availableLanguages: ['en', 'id'],
    fallbackLanguage: 'en',
  });

💡 Don’t forget to set your environment variables in .env.local.

🧩 Wrapping Your App with TolgeeProvider

In your layout.tsx file (or wherever your root layout is), wrap the app with the TolgeeProvider.

// app/layout.tsx
import './globals.css';
import { TolgeeProvider } from '@tolgee/react';
import { tolgee } from '@/lib/tolgee';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TolgeeProvider tolgee={tolgee}>
          {children}
        </TolgeeProvider>
      </body>
    </html>
  );
}

🗣️ Translating Text

Now you can translate text using the useTranslate hook!

// app/page.tsx
'use client';

import { useTranslate } from '@tolgee/react';

export default function HomePage() {
  const { t } = useTranslate();

  return (
    <div>
      <h1>{t('hello_world')}</h1>
      <p>{t('welcome_message')}</p>
    </div>
  );
}

🔄 Language Switcher

You can create a simple language switcher like this:

// components/LanguageSwitcher.tsx
'use client';

import { useTolgee } from '@tolgee/react';

export default function LanguageSwitcher() {
  const { changeLanguage, getLanguage } = useTolgee();

  return (
    <select
      value={getLanguage()}
      onChange={(e) => changeLanguage(e.target.value)}
      className="border rounded p-2"
    >
      <option value="en">English</option>
      <option value="id">Bahasa</option>
    </select>
  );
}

✅ Final Thoughts

Tolgee makes localization in React apps super smooth—especially with features like live editing and an easy-to-use UI. If you're looking for a modern alternative to i18next, it’s definitely worth a try.

How about using Next-Intl and Tolgee together? 🤔
That could give you the best of both worlds—structured routing with next-intl and live translation management from Tolgee.

Maybe we’ll talk about that in a future post. Stay tuned! 🚀

Streamline User Onboarding with driver.js

Fadil Natakusumah — Mon, 14 Apr 2025 07:41:42 +0000

Guiding users through your website or application can enhance engagement and boost satisfaction. driver.js is a lightweight JavaScript library designed to create interactive tours and feature introductions that help users quickly understand your UI.

What is driver.js?

driver.js enables you to highlight specific page elements and display popovers with titles and descriptions. It’s perfect for scenarios like:

Onboarding: Walk new users through key features.
Feature Rollouts: Spotlight new or updated functionality.
Product Tours: Provide step-by-step guidance through your application.

When to Use driver.js

Use driver.js when you need to:

Educate users quickly about your app’s layout.
Highlight important changes following updates.
Enhance user engagement with a clear, guided experience.

Basic Example

Here’s a quick example demonstrating how to set up a guided tour:

// Define tour steps
const tourSteps = [
  {
    element: '#navbar',
    popover: {
      title: 'Navigation',
      description: 'Easily find your way around.',
      position: 'bottom'
    }
  },
  {
    element: '#hero',
    popover: {
      title: 'Hero Section',
      description: 'Discover our key features.',
      position: 'bottom'
    }
  },
  {
    element: '#feature',
    popover: {
      title: 'Features',
      description: 'Learn more about what we offer.',
      position: 'top'
    }
  }
];

// Initialize and start the tour
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

const driver = new Driver();
driver.defineSteps(tourSteps);
driver.start();

Integrating driver.js in Next.js

Due to Next.js’s server-side rendering (SSR), ensure driver.js runs only on the client-side:

Install driver.js:

npm install driver.js
# or
yarn add driver.js

Create a Tour Component:

// src/components/Tour.tsx
"use client"

import { useEffect } from 'react';

import 'driver.js/dist/driver.css';

import { driver } from "driver.js"

const Tour = () => {
  useEffect(() => {
     const driverObj = driver({
      steps: [
        {
          element: "#navbar",
          popover: {
            title: "Navigation",
            description: "Easily find your way around.",
          },
        },
        {
          element: "#hero",
          popover: {
            title: "Hero Section",
            description: "Discover our key features.",
          },
        },
        {
          element: "#feature",
          popover: {
            title: "Features",
            description: "Learn more about what we offer.",
          },
        },
      ],
    });

    driverObj.drive();
  }, []);

  return (
    <div>
      <nav id="navbar">Navbar content</nav>
      <section id="hero">Hero content</section>
      <section id="feature">Feature content</section>
    </div>
  );
};

export default Tour;

Use the Component in Your Page:

// src/app/page.ts
import Tour from './components/Tour';

export default function Home() {
  return (
    <div>
      <Tour />
    </div>
  );
}

Conclusion

driver.js offers a simple yet effective solution for creating guided tours on your website. Whether you’re onboarding users, rolling out new features, or highlighting key areas, driver.js enhances the overall user experience with minimal setup.

Happy coding!

How to separate your Git for work and Git for personal

Fadil Natakusumah — Fri, 11 Sep 2020 09:31:01 +0000

Have you ever run into a problem where you want to push your code to a company repo, but you don't want to push using git with your personal email?

Here's how easy you can separate your Git for work and Git for personal

First, you must make new SSH Keys with your work email and add it to your work account in your company repo. Make sure you name your ssh key files to be something like id_ed25519_work to differentiate your SSH key for personal and work. Here's how to generate SSH keys.

If you open your git config in ~/.gitconfig, you'll probably have something like this.

[user]
    name = yourusername
    email = youremail@mail.com

In Windows you can find your git config file in C:\Users\[YOURUSERNAME]\.gitconfig.

That is for your personal git account. For your working git account, you can make another git config file, for example .gitconfig-work, and you can fill your file with this

[user]
    name = yourusername
    email = yourworkemail@company.com

In your original git config file, add this line

[user]
    name = yourusername
    email = youremail@mail.com

[includeIf "gitdir/i:[location to your company's project folder]/"]
    path = ~/.gitconfig-work

for example, it would be like this.

[user]
    name = yourusername
    email = youremail@mail.com

[includeIf "gitdir/i:~/working/projectA/"]
    path = ~/.gitconfig-work

and update your gitconfig-work to be like this

[user]
    name = yourusername
    email = yourworkemail@company.com

[core]
    sshCommand = "ssh -i ~/.ssh/id_ed25519_work"

That's it! So, whenever you're in your company's project folder, your Git will automatically use your work email and username with your seperate ssh keys.

You can test your ssh file by typing this in your terminal.

ssh -i ~/.ssh/id_ed25519_work -T git@gitlab.com

and you can test if it's work by typing this from your company's project folder and check if your work email comes up.

git config --show-origin --get user.email

You can change that gitlab.com to github.com if you're using github.

You might want to close all the terminals, or try to logout/restart your computer if it's not working.

Hope this help and Thanks for reading!