DEV Community: Gourav

The Journey of Migrating Our Browser Extension from Plasmo to WXT Framework

Gourav — Fri, 27 Sep 2024 15:35:42 +0000

Originally written at https://chatgptwriter.ai/blog/migrate-plasmo-to-wxt

I’m excited to share that we've successfully migrated our browser extension (ChatGPT Writer) from Plasmo Framework to WXT Framework. Both browser extension frameworks are top-notch for developing browser extensions, each with their own set of pros and cons. If you're curious about how they stack up against each other, this comparison offers a great overview.

Why We Decided to Migrate from Plasmo to WXT

When OpenAI’s ChatGPT first launched, I decided to build a Chrome extension (in December 2022) that would integrate with Gmail and use ChatGPT to draft email replies. The next task was to choose the right tools, so I started researching the best options. Unlike JS, there weren’t many frameworks for building Chrome extensions. I knew Webpack was an option because I had previously built another browser extension (Notion Boost) using it, but it had its own drawbacks. During my research, I stumbled upon the Plasmo framework, and it felt like the right choice at that time. Plasmo handled code bundling, splitting, minification, and other tasks. It significantly sped up development, and I’m grateful to the authors for developing the library.

While Plasmo has been a fantastic tool for us, it started to feel like it wasn’t the perfect fit anymore. Our browser extension has grown far beyond just drafting replies on Gmail. We noticed that our development progress—and our ability to roll out new features—was being slowed down.

Any change would take more than 7 seconds to rebuild the extension on my M1 Mac. It was even slower on Windows.
We also encountered odd issues where updated code wouldn’t reflect in the extension, and we had to restart the Plasmo server a couple of times to make it work.

We were managing with these issues, but we had to draw the line when we were improving our extension’s UI to add support for Markdown and syntax highlighting and ran into significant hurdles. The issue was Plasmo's use of an outdated Parcel bundler, which caused compatibility issues with Markdown and syntax highlighting packages that require a more up-to-date bundler. When we discussed this concern with the author about updating the Parcel version, we learned that the author is no longer actively working on the framework (which, by the way, I fully understand and respect), so there was little hope the issue would be resolved anytime soon.

At this point, we wanted to rely less on meta-frameworks and initially decided to use only the build tool Vite while writing the browser extension-specific configuration ourselves to minimize dependencies. We had seen great reviews of Vite from various developer communities online, so it seemed like the right choice.

During our research, we also came across WXT, another meta-framework but built on top of Vite. After evaluating the pros and cons of using Vite versus WXT, we decided to go with WXT. Here’s why:

Vite is a general-purpose build tool, and we weren't sure how long it would take to write custom configurations to make it fully functional for browser extensions and to include all the features we had become accustomed to with Plasmo. WXT handles all of that for us, saving a lot of time.
Since WXT is built on top of Vite, it benefits from Vite’s advantages. Additionally, if WXT is no longer maintained in the future, it would require less effort to switch to using Vite directly.

I am happy with our decision to go with WXT at this time. Not only did WXT resolve our existing issues, but we also noticed a much smaller extension build size. When building the extension with Plasmo, the output ZIP file was 700 KB, but with WXT, it’s 400 KB.

If you're interested in the discussions that influenced our decision, you can check out this thread on Github.

Our Migration Process

Migrating any project from one framework to another is rarely straightforward, and our transition from Plasmo to WXT was no exception. While WXT offers a brief migration guide in their documentation (you can check it out here), that are sufficient for only basic extensions.

If you're working on a complex browser extension like ours, you'll likely face a host of challenges that aren't covered in the official guide—from configuration conflicts to managing cross-context communication between background scripts and content scripts.

We're here to share the changes and adjustments we had to make during our migration process. These insights might help you navigate similar issues you could encounter.

1. Organizing Entrypoints in WXT

Differences in Entrypoint Management:

In Plasmo, creating components like content scripts, background scripts, and popup was straightforward—you could simply define them at the root of your project, and they would work as expected.

However, WXT handles entrypoints differently. In WXT, you need to place these files inside a specific directory called entrypoints to ensure they are recognized and function properly.

What You Might Need to Do:

Create an entrypoints Directory: Organize your entrypoint files by creating an entrypoints directory at the root of your project.
Move Your Entrypoint Files: Place your content scripts, background scripts, injected scripts, and popup HTML files into this directory.

Here's how your project structure should look:

<rootDir>
└─ entrypoints/
   ├─ background.ts
   ├─ content.ts
   ├─ injected.ts
   └─ popup.html

2. Adding a Post-Install Command for WXT Preparation

Why This is Necessary:

After setting up your entrypoints, WXT requires a .wxt directory in your project. This directory contains essential type definitions, a tsconfig file, and other global configurations necessary for your extension to function correctly during development and builds.

What You Might Need to Do:

Add a postinstall script to your package.json to automatically generate the .wxt directory whenever you install dependencies using npm install. This ensures WXT's configurations are always up-to-date.
Here's how to add it:

// In your package.json
{
  // ... other configurations
  "scripts": {
    // ... other scripts
    "postinstall": "wxt prepare"
  }
}

By including this postinstall command, you automate the setup process required by WXT, preventing potential issues related to missing configurations during development.

3. Config Adjustments

TypeScript Configuration Conflicts:

During the migration to WXT, you may encounter conflicts arising from TypeScript configurations. WXT introduces its own TypeScript configuration file located inside the .wxt directory. This can conflict with your existing tsconfig.json file, leading to type-checking errors, broken import aliases, and other frustrating issues.

What You Might Need to Do:

Instead of overwriting WXT's configuration, extend it within your own .tsconfig file to allow both configurations to coexist smoothly. Additionally, you'll need to adjust some compiler options to prevent any conflicts and ensure smooth integration. Here's how you can do it:

{
    "extends": "./.wxt/tsconfig.json",
    "compilerOptions": {
        ....
    }
}

Managing Path Aliases: You might also face path conflicts due to differences in how WXT handles module resolution. We resolved this by following WXT's default path rules, which simplified the process and prevented import issues.

Alternatively, you can define your own custom paths in wxt.config.js if your project structure requires it. For more details on setting up custom path aliases, refer to this section in the WXT documentation.

4. Environment Variable Issues

Differences in Handling Environment Variables:

WXT uses Vite under the hood, which manages environment variables differently than Plasmo. This means that environment variables that worked in Plasmo might become undefined after migrating to WXT.

What You Might Need to Do:

You'll need to adapt to Vite’s method of handling environment variables. This involves prefixing your variables with VITE_ and accessing them using import.meta.env. Here's a quick example:

// Defining an environment variable (using VITE_ as a prefix)
VITE_SOME_KEY=XXX

// Retrieving the value of the environment variable (using import.meta.env)
console.log(import.meta.env.VITE_SOME_KEY);

By making this change, you ensure that your environment variables are correctly recognized in the WXT environment. If you're unfamiliar with Vite's setup, the Vite Environment Variables Guide is a helpful resource.

5. Migrating Manifest Configuration to `wxt.config.ts`

Differences in Manifest Configuration:

In Plasmo, you might have defined your extension's manifest configuration directly within the package.json file. However, WXT handles manifest settings differently. In WXT, you need to specify your manifest configuration inside a separate file called wxt.config.ts.

What You Might Need to Do:

You'll need to migrate your manifest configuration from package.json to wxt.config.ts. Here's how you can set it up:

Create a wxt.config.ts File: Start by creating a new file named wxt.config.ts at the root of your project. This file will serve as the main configuration file for WXT.
Migrate Your Manifest Configuration: Move your existing manifest settings from package.json into the manifest field within wxt.config.ts.

Here's how you can set it up:

// Inside wxt.config.ts
import { defineConfig } from 'wxt';

export default defineConfig({
    manifestVersion: 3,
    manifest: {
        // ... your manifest configurations
    },
});

6. Adjusting Icon Management

Differences in Icon Handling:

In Plasmo, one of the convenient features is that it automatically generates smaller resolution versions of your icon for the build. This means you only need to provide a high-resolution version of your icon, and Plasmo handles the rest. Additionally, in development mode, Plasmo converts the icon to grayscale to help distinguish it from the production bundle.

In contrast, WXT requires you to manually create icon files for each required resolution (e.g., 16×16, 48×48, 128×128). You'll need to place these icons inside the public directory and explicitly define them in your manifest configuration.

What You Might Need to Do:

Create Icons of Required Sizes: Manually create your extension icons in all the necessary resolutions.
Place Icons in the Public Directory: Store these icon files in your project's public directory so they are accessible during the build process.

Define Icons in Manifest Configuration: Update your wxt.config.ts file to specify the icons in the manifest configuration. Here's how you can set it up:

export default defineConfig({
  manifest: {
    icons: {
      16: '/extension-icon-16.png',
      24: '/extension-icon-24.png',
      48: '/extension-icon-48.png',
      96: '/extension-icon-96.png',
      128: '/extension-icon-128.png',
    },
  },
});

We later learned that WXT provides auto-icons plugin that takes care of icons.

7. Handling Inline Asset Imports

Differences in Asset Importing Between Plasmo and WXT:

In Plasmo, when you want to import images or other assets inline, you use the data-base64 scheme. This method inlines the asset as base64-encoded data directly into your extension's bundle.

In WXT, you don't need to use this scheme; you can import assets directly without any special prefixes.

What You Might Need to Do:

Update your import statements by removing the data-base64 prefix. Here's how you can adjust your code:

// Plasmo: Using data-base64 scheme
import Image from "data-base64:~assets/image.png";

// WXT: Importing directly without data-base64
import Image from "~assets/image.png";

8. Resolving Port Conflicts in Development (Optional)

Potential Port Conflicts with Next.js:

If you're using Next.js as your backend server, you might encounter port conflicts during development. Both Next.js and WXT default to using port 3000, which can create issues when you try to run them simultaneously.

In our experience, we had WXT already running on port 3000. When we attempted to start the Next.js server, it also tried to use port 3000. Surprisingly, even though the port was already occupied by WXT, the Next.js server started without any error messages or warnings about the port conflict. However, we couldn't access our Next.js application at localhost:3000 because WXT was occupying that port.

This led to confusion because Next.js didn't notify us of the port being in use, and we were left wondering why our application wasn't accessible. On the other hand, WXT is capable of detecting when a port is already occupied and will automatically switch to another available port, preventing such conflicts.

What You Might Need to Do:

To resolve this port conflict, you have a couple of options:

Assign a Different Port to WXT: You can specify a different port for WXT to use during development. For example, you can start the WXT server on port 9000 by modifying your package.json scripts or your start command:
```
 "dev": "wxt --mode localhost --port 9000", // it will start the server on port 9000
```

This way, WXT will run on localhost:9000, leaving port 3000 free for Next.js. You can then access your Next.js application at localhost:3000 and your WXT extension at localhost:9000.

Start Next.js Server Before WXT: Alternatively, you can start your Next.js server before starting WXT. Since WXT can detect an occupied port and automatically switch to another one, it will adjust itself to use a different port if it finds that port 3000 is already in use.

9. Handling Double Rendering in Development

React.StrictMode and Its Effects:

During development, you might notice that components, especially popup, render twice. This is because WXT uses React.StrictMode by default, which intentionally double-invokes lifecycle methods to help identify potential issues.

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <Popup />
    </React.StrictMode>,
);

In our case, we had message-sending logic inside a useEffect hook, and the double rendering caused messages to be sent twice—once for each render. This led to unintended side effects in our extension's behavior during development.

What You Might Need to Do:

Be mindful that side effects (like API calls or message dispatches) inside useEffect or other lifecycle methods might execute twice. To handle this gracefully:

Optimize Side Effects: Ensure that your side-effect logic can handle multiple invocations without causing unintended consequences.
Conditional Logic: Implement checks to prevent duplicate actions if necessary.
Understand It's a Development-Only Behavior: Remember that this double rendering only occurs in development mode due to React.StrictMode. Your production build won't have this issue.

By adjusting your code to account for React.StrictMode, you can prevent unwanted side effects during development without compromising your production code.

10. Managing Shadow DOM Implementation (Optional)

Differences in Shadow DOM Handling:

Both Plasmo and WXT offer built-in methods for handling Shadow DOM functionality in browser extensions. When migrating to WXT, you have a couple of options for implementing Shadow DOM in your extension.

What You Might Need to Do:

Use WXT's Built-in Shadow DOM Handling: If you prefer to adopt WXT's approach, you can utilize their built-in methods for managing Shadow DOM. WXT provides a straightforward way to implement Shadow DOM. You can find detailed instructions in the WXT documentation: WXT Shadow Root Guide.
Implement a Framework-Independent Shadow DOM: Alternatively, you might choose to implement Shadow DOM in a framework-independent manner, as we did. This approach allows you to maintain consistency in your codebase and avoid adjustments during the migration process. By not relying on framework-specific methods, you make future migrations or updates more straightforward. If you're interested in adopting this method, I've detailed our approach in a Guide: Render React element inside shadow DOM.

11. Avoid Cross-Context Code Sharing (Good to know)

Understanding Context Isolation in Extensions:

Browser extensions run different parts of their code (like background scripts, content scripts, and popup) in separate contexts. Sharing code directly between these contexts can lead to errors because they don't share the same execution environment.

What You Might Need to Do:

Use Messaging APIs for Communication: Instead of sharing functions or variables directly between contexts, use messaging APIs (e.g., chrome.runtime.sendMessage) to facilitate communication.
Use a Shared Directory: Organize reusable, context-independent code in a dedicated shared directory. This allows you to import common functions or utilities without causing context conflicts.
```
<rootDir>
├─ entrypoints/
│  ├─ background.ts
│  ├─ content.ts
│  └─ popup.tsx
└─ shared/
   ├─ utils.ts
   └─ constants.ts
```
Avoid Context-Specific Code in Shared Modules: Ensure that the code in the shared directory doesn't rely on context-specific APIs like document or window.

Conclusion

Migrating from Plasmo to WXT was a significant step that allowed us to overcome development hurdles and align our extension with our growing needs. While the process had its challenges, we hope that sharing our experiences and solutions will help others navigate their own migrations more smoothly.

How to implement GPT4 API with internet access?

Gourav — Sun, 03 Dec 2023 05:55:04 +0000

As the question said what are some easy and economical ways to implement Internet access in GPT4 API to get the latest information about world events?
Would prefer a node.js solution if possible.
PS: Internet access is not yet provided via API. Web ChatGPT version does this by crawling Bing.

10+ ways to find blog post ideas as a developer

Gourav — Wed, 31 Aug 2022 14:12:27 +0000

When I first learned that writing online could make my resume stand out and even lend me a cushy job, I got excited and opened a notepad, but immediately hit a roadblock. I didn’t know what to write about in the first place. I felt like everything had been written and published online, and I had nothing new or interesting to write about. Newsflash: I couldn’t have been more wrong!

Over the past few years, I’ve written many articles on different platforms that have been collectively read by 500k+ people. Some of them even landed on the first page of HackerNews! I got approached for jobs by many companies, including the one (Monadical) I’m currently working for 😁.

So, how do I come up with blog ideas? Well, whenever I hit writer’s block, I explore these four areas. They’ve never failed to help me find ideas for my next article. They are:

Draw inspiration from within yourself
Content research tools and tech communities
Inspiration from other people’s tech blogs
Summarise concepts from long-form content

Note: This guide is a summarised version of a longer one I wrote at https://monadical.com/posts/blog-ideas-for-developers.html

Draw inspiration from within yourself

Share your experience working on a project or technology

Write about your overall experience on a particular project or technology. Some important points that readers find useful are key takeaway lessons, and how to avoid common pitfalls when working on a similar project. Many devs might find it surprising, but one of the most viewed questions (7M views) on StackOverflow is simply “How to check out a remote Git branch?”. But there’s a reason for that. Even things that you think are obvious can be insightful to people who are new to this or don’t have your experience.

Blog post examples:

I worked on the framework X for Y period, and here’s my experience so far
What I learned from building X App using Y language/tech stack/framework
How to resolve X issue in Y framework
How to build an API server using X framework
The best software company I have ever worked for, and what I learned
Most difficult concepts to learn about language X
Pros and Cons of using X database/library

Take notes about what you’re learning or have recently learned, and share with others

Let’s suppose you’re learning something new, like a database you’ve never worked on or the latest hip JS framework from last week. You quickly discover that all the information you need to learn that thing is not available in one place. You browse the documentation, blogs, StackOverflow, and GitHub discussions, and (if you’re the bold type) maybe even ask for help in subreddits, Discord servers, etc. What you’ve just done is gold! Precious, precious gold, especially if the official documentation isn’t super dev-friendly (e.g., lacks code examples and explanations). Don’t throw your gold away; share it with the rest of us!

As you work, quickly jot down these important basics, resources, better code samples, cheat sheets, etc., so that future learners don’t end up painstakingly crawling through the same scattered docs, chat rooms, and forums.

Examples:

An intro to setting up an API server using Deno
Async programming in Javascript vs Python
How to see all running Amazon EC2 instances across all regions
X best approaches for learning a programming language
How to add authentication to X Framework

Share your opinions

When you work in an industry or community for a long time, you gain unique insights, start to see trends, and naturally form opinions. People love hearing strong opinions – whether they agree with them or not – and weighing in with their own take. Your thoughts are valuable! Don’t be afraid to sing them out.

Examples:

I work in the Fintech industry, and too many regulations have crippled innovation
Why do so many developers love Rust?
Will Chrome’s dominance dictate the future of javascript and web?
How to choose the right software architecture for an eCommerce platform
How to collaborate with other developers
How to be productive as a developer

Share what you’re passionate about

Think of a topic you might discuss with your friends or bring up on a team call or a mentor meeting. What do you spend your time reading about when you should be sleeping? What can’t you stop reading about on the internet? Do you have any tips or tricks that help you stay motivated at work or in life? Any intriguing hobbies that are even a little bit tech-related? If you’re interested in it, then other people are too!

Example:

The ultimate guide to a pro gaming setup
How to setup Kali Linux for penetration testing
How to set up a crypto cold storage wallet for enhanced security
Getting into open source and how to be a good contributor
How I stay up to date in the tech industry
What it was like when I first started blogging/YouTube as an introvert

Get ideas from the internet

You can also utilize content research tools or dive into various online tech communities to get inspiration for your blog article ideas.

answerthepublic.com

Answerthepublic.com is a free site where you type a keyword and it generates a list of the most popular questions people have been asking on Google about it!

For example: if you type “reactjs”, you’ll get these results:

Pick a question that you feel comfortable answering, and start writing about it.

Note: These are the top questions about “reactjs” from Google search, so you imagine the volume your article would get if it landed on the first page!

ubersuggest.org

ubersuggest.org is a freemium tool to generate keyword suggestions and content ideas.

Here’s the screenshot of the top keywords and content ideas for “typescript”.

reddit.com

There are lots of programming-related subreddits which you can surf through to find interesting content to write about. Here’s a simple trick to see what others have been asking about a topic so that you can write about it.

First, you need to find a subreddit for a language/framework/tool. Type a keyword in the search box at the top and select “Communities”. For example, here are the top subreddits for reactjs. The first subreddit in the list reactjs has around 300k+ members!

Next, go to one of these subreddits and type “how” in the search box to see all questions that members asked. You can further sort these questions by week/month/year/all time to filter the most popular questions. Browse through these highest-voted questions and see if you could answer any of these in the form of an article.

quora.com

Get inspiration from people asking questions on a topic you know about. Type a keyword in a search term and hit enter.

The below image shows what people have been asking about the NextJS framework.

dev.to

You can browse various tags and see what people have been discussing to get inspiration.

Here are the top monthly posts for tag #django:

Using content research tools

Many professional bloggers use content research tools like Ahrefs or BuzzSumo to get a streamlined flow of hot and trending topics to write about.

These tools can help you:

Discover the words and phrases your audience is searching for
Find the most popular content in your niche across different platforms
Access real-time views of viral trends for any topic, domain, or location
Find low-competition topics to write about

Note: these are paid tools and cost around ~$99/month.

Explore trending topics

These free tools are useful for discovering broader trending topics over time:

explodingtopics.com - Discover emerging technologies and trending topics by category, pick a topic that interests you, and write about it.
Google Trends - Google Trends is a website by Google that you can use to analyze the popularity of top search queries in Google Search. Enter a keyword and see related topics, top queries, interests over time, demographics, etc.

Get inspiration from other people’s tech blogs

From your favourite bloggers

Do you follow any blogger whose articles you find to be quite enjoyable? What topics do they usually write about? If you’re interested in reading about these topics, why not write about them as well?

Discover the best developer blogs for your tech stack for inspiration

If you don’t know many tech bloggers, check out this live list of the best and trending developer blogs. https://bloggingfordevs.com/trends/ You can filter blogs by tech stack as well. Interestingly this site was built by a tech blogger, Monica Lent.

Summarise concepts from long-form content

The knowledge present in long-form content has much more depth than what you usually find in articles or Youtube videos. So, if you’ve read any book or completed a course that helped you in your career or life, it’s an excellent opportunity for you to put quality content out. You could summarise the main concepts that stick with you and share them in the form of articles.

Examples:

Implementing Abstract Factory design pattern in Go
Data replication strategies on the server
System design of notification service
Detecting anomalies using Isolation Trees

Conclusion

I hope this guide has given you enough resources to help you find inspiration for your next article. Start writing about the topics you’re interested in, or that you think will help others. Sometimes you’ll get multiple ideas, write them down and build your own repository of drafts that you can pick from. It’s okay if you think your content is not that great; just like other skills, you’ll get better the more you write. Remember, publishing something is still better than publishing nothing.

PS: Don’t forget to bookmark this article so that you can quickly revisit it next time you hit writer’s block. I’ll also be adding more resources as I find them.

Originally written at https://monadical.com/posts/blog-ideas-for-developers.html

A list of free & open-source apps I use on Windows

Gourav — Tue, 14 Jun 2022 11:27:58 +0000

I’ve been a Windows power-user for a decade, and throughout the journey, I found tools and apps which made me work more efficiently on Windows.

There are 40+ apps I mentioned in the below article. All tools are free to use (or freemium with a generous free version), and many of them are open-source (source code links are provided where applicable).

Some of my favorite tools are Ditto clipboard manager, QuickLook, Clover, ImageGlass, ShareX, and Notepad2-mod.

https://gourav.io/blog/windows-free-apps

what are your favorite apps for Windows?

Top AutoHotkey scripts to use Windows like a pro

Gourav — Tue, 18 Jan 2022 18:48:35 +0000

Originally posted on my Blog.

What's AutoHotkey

AHK is an open-source scripting software for Windows that is used to automate repetitive tasks, remap keys, build small utility tools, etc. You create scripts that would do the tasks for you. It's an extremely lightweight app (~ 2MB RAM) and works on old and newer versions of windows.

How to set up and run

Download and install main program (one-time step) https://www.autohotkey.com
Download a script (.ahk) or copy-paste script content in a text file and then rename it with .ahk extension, e.g., my-script.ahk
To run the script: Right-click -> Run script. You can also run scripts by double-click or do right-click ->Open with -> AutoHotkey
Bonus: you can right-click and Compile script to make it a standalone .exe program that would run without installing AutoHotkey software on a computer.

Autorun script at startup

Open startup folder: open Run window by Win+R and then write shell:startup and enter.
It'll open explorer at something like this path: C:\Users\{username}\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
Copy a script (*.ahk) -> go to that Startup folder -> right-click and select Paste shortcut.

Useful Scripts

You can see all scripts here: https://github.com/GorvGoyl/Autohotkey-Scripts-Windows

Look up selected text

script: look_up.ahk

use alt+g to open selected text in the browser and do a google search or visit the site (if it's url). It's one of the most frequent scripts I use on a regular basis. Especially to quickly google some error from the terminal when programming. Works everywhere.

Assign a different shortcut:

To assign a different shortcut, replace !g (here ! means Alt so !g = Alt+G) in the script with your desired key combo and run again. All running scripts can be found in the Windows tray menu.

To use a different browser instead of Microsoft Edge, Add its path instead of C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe in the script.

Use Win key as mouse left-click

script: mouseless.ahk

This little script has been a game-changer for me. I don't like to carry a mouse around, and my HP laptop touchpad isn't much responsive, so I needed a better alternative to performing left-click. I realized I don't use the left Win key as much, so I modified its action to do left-click instead (using left-thumb). Once you get the hang of it, I assure you you'll do clicks with godspeed.

I still needed the Win key, so I replaced the rarely used right Ctrl key as Win key.

To sum-up:

Win → Mouse Left-click

Right-Ctrl → Win

Show notification on low battery or when fully charged

script: battery_alert.ahk

Keeping your laptop constantly plugged in shortens the battery life!

If the battery is below 30% and the charger is not plugged in, it'll show a silent notification on the bottom-right corner to plug in the charger. Notification will pop up every few minutes until you take action.

And, if the laptop is charged and the charger is still plugged in, it'll show a silent notification on the bottom-right corner to remove the charger. Notification will pop up every few minutes until you take action.

![https://gourav.io/img/blog/autohotkey-scripts-windows/battery_alert_charged-2PTA3EUI.png]

Show popup to transform text

script: ctrl_caps_as_case_change.ahk

Use ctrl+capslock to invoke a handy transform text menu on selected text e.g., convert text to UPPERCASE/lowercase/Title Case etc. Press esc to close the menu.

Show Windows switcher with capslock key

script: caps_as_window_switcher.ahk

If you don't use capslock key much, you could replace it to show Windows switcher (e.g., Alt + Tab) instead. You'd still be able to turn on/off capslock with shift+capslock combo.

To sum-up:

Capslock → Alt+Tab

Shift+Capslock → Capslock

Create new text file here

script: create_file_here.ahk

Windows has a shortcut (ctrl+shft+n) to create an empty folder at the current location but not for creating a new file. So, I made a script to do exactly that. Use ctrl+shift+m to create an empty text file (NewFile.txt) at the current folder location in file explorer.

Open PowerShell here

script: open_shell_here.ahk

Use ctrl+shift+p to open PowerShell with the current folder path in file explorer.

In-line calculator

script: in-line calculator.ahk

Activate the calculator by = then write your equation and finally type = again to get the calculation result. Works everywhere.

Use # key at the end instead of = to keep the equation and the result (output: 7*5+5 = 40).

See more info in README file.

Drag window without activating it

script: MoveInactiveWin.ahk

Hold alt+right-click to move a window without activating it.

Disable zoom when `ctrl+scroll` in the browser

script: disable_scroll_zoom_edge.ahk

Disable zoom when doing ctrl+scroll in Edge browser. To use different application, replace Microsoft Edge with other application title in the ahk script.

Hot corner

script: left_edge_as_window_switcher.ahk

Trigger Alt+Tab (Window switcher) when the mouse is on the left edge of the screen. Keep the mouse there to tab through the other windows.

Pin window at the top

script: pin_window.ahk

Use ctrl+alt+p to pin/unpin current window at top. Super handy.

Win key to show taskbar

script: win_key_to_show_taskbar.ahk

It shows the taskbar only when the Win key is pressed; otherwise, it stays hidden.

👋 Comment below which script did you like the most :)

Thanks for reading. Connect with me on Twitter.

I made a git cheatsheet of useful commands like reverting commits, work between branches, manage PRs, and much more.

Gourav — Tue, 02 Nov 2021 11:07:04 +0000

When I collaborate with others using Git, I often have to google to find right git commands for various situations.

Situations like how to pull changes without committing local files, save uncommitted changes in current branch and switch, add new changed to last commit, reset my local branch to main, revert last commit from local and remote, etc.

So, I decided to write these down at one place so that it's easier for me (and hopefully others) to recall and use.

here's the git cheatsheet: https://gourav.io/blog/git-cheatsheet

It's an open-source cheatsheet so contributions are more than welcome to improve it and add more useful commands 🙏.

I made a cheatsheet for Next.js to add debugging, dev url, Tailwind, SEO, ESLint with Typescript, analytics, sitemap, etc.

Gourav — Thu, 21 Oct 2021 10:25:41 +0000

I've been working on different Next.js projects for sometime and whenever I need to setup a new Next.js project I follow common steps like adding ESLint with Typescript support, debugging, SEO, Tailwind, SCSS support, Sitemap, etc.

Now I'm sharing that guide to all: https://gourav.io/blog/nextjs-cheatsheet

It's a open-source cheatsheet so contributions are more than welcome to grow this even further 🙏.

PS. I initially thought of creating a starter template but maintaining that is difficult over time and adds lots of abstraction that hinders learning experience.

Thanks for reading. Connect with me on Twitter.

Why should we care about NFT? Here's why

Gourav — Mon, 19 Apr 2021 10:35:07 +0000

NFT has been a hype for few months but its use case is still not clear to many people. I'll try to explain it using a simple example.

Suppose you made digital art (like painting) and you want to sell it online.

You upload the image file to an e-comm site like OpenSea. This file now has a fancy term called NFT (non-fungible token). You suddenly upped your game amongst your peers.

You set its price (in cryptocurrency like Bitcoin). You can also put a bid amount to do an auction, a good approach if you're Banksy's cousin.

It's listed as a single item on the platform so only one person can buy it. This means he can download the image file after paying in crypto.

Once sold, you get profit (in cryptocurrency). pop a bottle of champagne.

Whoever buys it now owns it. That means she/he can now sell it at higher price on the same platform. He can also put it as wallpaper on his Mac.

He gets profit when somebody else buys it. He pops a bottle of champagne now.

This trading cycle continues.

Few points to remember:
Everyone can see the entire purchase history (sold price, date, buyer, etc) of this image file (aka NFT). Nobody can modify the purchase history. This open purchase history is called Public Ledger. Tech behind this public ledger is called Blockchain.

It's not limited to image files. you can sell any digital content (audio, video, pdf, etc).

Copies of content behind NFT can be distributed off-platform.

Now, why would someone buy an NFT?

I could think of 2 main reasons for someone to buy/sell something as an NFT.

Suppose, a person named Rick saw an NFT and looked at the purchase history. He noticed that it's going up for ex: $100 -> $200 -> $500 -> $700. He predicts that this would go further up so he buys it at the current price of $700 and puts a selling price of $1000 hoping someone else would buy. Here, the value is not in the file content but the attached immutable price history (aka blockchain). In nutshell, the purpose is trading.
Suppose, Morty is a super-fan of Billie Eilish, she uploads her latest album cover as NFT and tweets this is the original. Morty being a nerd bought this NFT asap and gives proof to his other nerd friends by showing the purchase history. The purpose could be to financially support the creator, have (authentic) digital collectibles, etc.
Kings of Leon sold their latest album as NFT and made over $2 million.

This covers the basics of NFT. I hope you enjoyed reading. Connect with me on Twitter and LinkedIn.

My simple Github project went Viral 🚀

Gourav — Tue, 13 Apr 2021 16:03:15 +0000

Last month (Mar'21), I made a simple project which got spread in various tech communities and social media. On Github, It reached from 0 to 4k+ stars and 200+ forks within 7 days. Github featured it in Trending repositories of day section for straight 5 days or so.

Trending on Github - 13 Mar'21

Clone Wars

70+ open-source clones or alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, etc. List contains source code, demo links, tech stack, and, GitHub stars count.

Project link: https://gourav.io/clone-wars

Github link: https://github.com/gorvgoyl/clone-wars

Motivation behind this project

I'm a techie and many a time I lurk in popular programming communities on Reddit like r/webdev, r/reactjs, etc. to see what other devs are building or if any new JS framework is popping up. I noticed many devs were making clones of popular sites like Instagram, Trello, Spotify, etc. as part of their learning purpose, and they were sharing it with others to get feedback in terms of code quality and best practices.

devs sharing their projects in r/reactjs

These clones were scattered all over the communities. So, I thought why not create a single list of all these clones which people can bookmark and revisit later for whatever purpose they need it for. Honestly, I wasn't entirely sure at that time whether it would provide any good value to others or not. So, there was a way to find out that is to build it myself!

How I built it

1. Scrapping Reddit

I wanted to get all posts that contain the "clone" keyword. I initially did it with default reddit search reddit.com/r/reactjs/search/?q=clone&source=recent&restrict_sr=1&sort=new, (means look for all posts in reactjs subreddit with "clone" keyword and sort by new). It returned all posts, but that also included low-quality posts with 0 upvotes, questions on how to build a specific clone, etc. It would be a headache figuring out good clone projects from that dump. So, I used redditsearch.io instead, which provides advanced Reddit filtering like return posts that have at least 10 upvotes, posted during a specific timeline, etc.

Next, I made a list of all these clones, their Github repo, demo links, tech stack. It was manual work.

Additionally, I googled "open-source alternatives" and found some fully-functional clones of Slack, Airtable, Bit.ly, Evernote, Google analytics, etc. I added these to the list.

So, now there are 2 kinds of projects on the list. The first ones look quite similar (UI-wise) but aren't fully-functional and the other ones which are fully-functional but UI is different (to avoid copyright issues, etc).

BTW, I named my project after Star Wars 2008 TV Series: "The Clone Wars" and also kept the similar color scheme of OG image.

Star Wars 2008 TV Series: The Clone Wars

Clone Wars: Github project

2. Pretty view of table

I've worked with markdown before, but it was the first time I was working with markdown table and realized table view sucks on Github project page. Especially, if it's a long table with multiple columns. I needed to make it look better (sticky header) which meant I needed to deploy this project somewhere else. I still needed it to be on Github so that others can collaborate easily. I decided to host it on my personal site https://gourav.io.

My site is built using NextJS, and I was already using markdown (mdx) to write blog posts, so it was just a matter of copy-pasting markdown file from my Github project to new page https://gourav.io/clone-wars. And on top of it, I use Tailwind CSS with "typography" plugin which makes tables pleasing to read along with other text.

I thought of automating it to the next level i.e. if any change happens to the Github project or someone's PR gets merged, update the same on my site https://gourav.io/clone-wars. But, decided not to over-engineer it as changes weren't that frequent.

Making it Viral

I posted in 2-3 subreddits, dev.to and it took off 🚀

reddit.com/r/reactjs

reddit.com/r/webdev

After effects

Once the project gained some popularity many developers started raising PR to add their clone projects to the list. When I started it had around ~75 clones, but now it's more than 120+ and I still get new PR every now and then.

I got to know from a friend that it was picked by React Newsletter. Such a serendipitous moment.

People were tweeting about Clone Wars. @nickbulljs tweeted a neat idea for devs who are looking to get hired.

// Detect dark theme var iframe = document.getElementById('tweet-1373573194846765061-458'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1373573194846765061&theme=dark" }

I got 150+ new followers after this tweet :o

And one person donated $5 from BuyMeACoffee link I put on the project. Love you stranger.

Within 30 days of launch, 40k+ people came to my personal site and viewed my project (80k+ views).

You can see users insights at the end of the article on my blog.

Thanks for reading. Connect with me on Twitter and LinkedIn.

I made a list of 70+ open-source clones of sites like Airbnb, Tiktok, Netflix, Spotify, etc. Great for learning purpose!

Gourav — Tue, 09 Mar 2021 12:17:25 +0000

I curated a list of 70+ open-source clones of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, Spotify, Trello, WhatsApp, YouTube, etc.
List contains source code, demo links, tech stack, and, GitHub stars count. Great for learning purpose!

More open-source contributions are welcome to grow this list.

GitHub link: https://github.com/GorvGoyl/Clone-Wars

Pretty view: https://gourav.io/clone-wars

I was building this list for a while... Please share it with others 🙏

I share my learnings about startups, tech, and life on Twitter @GorvGoyl

I received first donation on my open-source side project and it felt great 😍

Gourav — Sat, 28 Nov 2020 11:40:06 +0000

You can read the updated version on https://gourav.io/blog/first-donation-on-open-source-side-project

I made a plugin for VS Code a while back (3 yrs) for my own use. Other people started using it so I recently decided to put a donate button in plugin description and see what happens. And guess what somebody donated 5$.

I know I know it's not a big amount but somebody put an effort to make that transaction means he cares about it and found it useful.

This is the plugin I'm talking about. It adds new toolbar buttons to VSCode: https://github.com/GorvGoyl/Shortcut-Menu-Bar-VSCode-Extension

Thank you for reading, I would love to connect with you on Twitter @GorvGoyl

Quickest way to open any Github repo in Codesandbox

Gourav — Wed, 22 Apr 2020 11:48:22 +0000

Quickly open any Github repo in Codesandbox:

Go to a repo on GitHub.com
Replace url github.com with url githubbox.com
There's no step three!

Thank you for reading, I would love to connect with you on Twitter @GorvGoyl

DEV Community: Gourav

The Journey of Migrating Our Browser Extension from Plasmo to WXT Framework

Why We Decided to Migrate from Plasmo to WXT

Our Migration Process

1. Organizing Entrypoints in WXT

2. Adding a Post-Install Command for WXT Preparation

3. Config Adjustments

4. Environment Variable Issues

5. Migrating Manifest Configuration to wxt.config.ts

6. Adjusting Icon Management

7. Handling Inline Asset Imports

8. Resolving Port Conflicts in Development (Optional)

9. Handling Double Rendering in Development

10. Managing Shadow DOM Implementation (Optional)

11. Avoid Cross-Context Code Sharing (Good to know)

Conclusion

How to implement GPT4 API with internet access?

10+ ways to find blog post ideas as a developer

Draw inspiration from within yourself

Share your experience working on a project or technology

Take notes about what you’re learning or have recently learned, and share with others

Share your opinions

Share what you’re passionate about

Get ideas from the internet

answerthepublic.com

ubersuggest.org

reddit.com

quora.com

dev.to

Using content research tools

Explore trending topics

Get inspiration from other people’s tech blogs

From your favourite bloggers

Discover the best developer blogs for your tech stack for inspiration

Summarise concepts from long-form content

Conclusion

A list of free & open-source apps I use on Windows

Top AutoHotkey scripts to use Windows like a pro

What's AutoHotkey

How to set up and run

Autorun script at startup

Useful Scripts

Look up selected text

Use Win key as mouse left-click

Show notification on low battery or when fully charged

Show popup to transform text

Show Windows switcher with capslock key

Create new text file here

Open PowerShell here

In-line calculator

Drag window without activating it

Disable zoom when ctrl+scroll in the browser

Hot corner

Pin window at the top

Win key to show taskbar

I made a git cheatsheet of useful commands like reverting commits, work between branches, manage PRs, and much more.

I made a cheatsheet for Next.js to add debugging, dev url, Tailwind, SEO, ESLint with Typescript, analytics, sitemap, etc.

Why should we care about NFT? Here's why

Now, why would someone buy an NFT?

My simple Github project went Viral 🚀

Motivation behind this project

How I built it

1. Scrapping Reddit

2. Pretty view of table

Making it Viral

After effects

I made a list of 70+ open-source clones of sites like Airbnb, Tiktok, Netflix, Spotify, etc. Great for learning purpose!

I received first donation on my open-source side project and it felt great 😍

Quickest way to open any Github repo in Codesandbox

5. Migrating Manifest Configuration to `wxt.config.ts`

Disable zoom when `ctrl+scroll` in the browser