<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Ben Subendran</title>
    <description>The latest articles on Forem by Ben Subendran (@hanancs).</description>
    <link>https://forem.com/hanancs</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F787857%2F9cd41d47-de3d-4b9d-864a-00b1f619c4e3.jpg</url>
      <title>Forem: Ben Subendran</title>
      <link>https://forem.com/hanancs</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/hanancs"/>
    <language>en</language>
    <item>
      <title>How I Autoban Hackers Who Touch My Secret URLs</title>
      <dc:creator>Ben Subendran</dc:creator>
      <pubDate>Wed, 24 Dec 2025 07:17:55 +0000</pubDate>
      <link>https://forem.com/aws-builders/how-i-autoban-hackers-who-touch-my-secret-urls-4pgc</link>
      <guid>https://forem.com/aws-builders/how-i-autoban-hackers-who-touch-my-secret-urls-4pgc</guid>
      <description>&lt;p&gt;If you look at your server logs right now, I guarantee you’ll see them.&lt;/p&gt;

&lt;p&gt;The bots. The script kiddies. The scanners. They are relentlessly hitting paths that don’t exist: /wp-admin, .env, /backup.zip, /admin-login. They are looking for a weakness, jiggling the handle of every door in your application.&lt;/p&gt;

&lt;p&gt;Usually, the advice is defensive: "Rate limit them." "Ignore them." "Set up a static WAF rule."&lt;/p&gt;

&lt;p&gt;I got bored of playing defense. So I built a trap.&lt;/p&gt;

&lt;p&gt;In this tutorial, I’m going to show you how to implement Active Defense on AWS. We aren't just going to block known attacks; we are going to create a "Honeypot" URL. It’s a fake login page that no legitimate user will ever see. But if a bot touches it?&lt;/p&gt;

&lt;p&gt;Their IP address is instantly identified, logged, and added to a hardware-level Blocklist (WAF) that bans them from my entire infrastructure.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;The Architecture: Anatomy of a Trap&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To make this work, we need three components: The Bait, The Enforcer, and The Jail.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;The Bait (API Gateway)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;We need a URL that looks tasty to a bot but is invisible to a human. Something like /admin-backup or /v1/secret. We set up an API Gateway (REST) to listen on this specific path. If a normal user visits your homepage, they are fine. If a bot scans your site and hits this path, they trigger the trap.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;The Enforcer (Lambda)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;When the trap is triggered, it fires a Python Lambda function. This function doesn't return a webpage. Instead, it performs a "arrest":&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;It extracts the Source IP of the request.&lt;/li&gt;
&lt;li&gt;It calls the AWS WAFv2 API.&lt;/li&gt;
&lt;li&gt;It adds that IP address to a specific IP Set (our "Jail").&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;The Jail (AWS WAF)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;This is the heavy lifter. We have an AWS WAF Web ACL sitting in front of our API. It has a high-priority rule: Block ANY request coming from an IP inside the 'Honeypot' IP Set.&lt;/p&gt;

&lt;p&gt;The second the Lambda updates that list, the door slams shut. The bot can't access the fake page, the real page, or anything else. They are gone.&lt;/p&gt;

&lt;p&gt;Why "Active Defense"?&lt;br&gt;
You might ask, "Bro, isn't this overkill?"&lt;/p&gt;

&lt;p&gt;Not really. Traditional WAF rules look for patterns (like SQL Injection strings). They are reactive. This approach is proactive. By identifying an actor who is clearly malicious (probing for hidden files), we can block them before they even launch their real attack.&lt;/p&gt;

&lt;p&gt;Plus, it’s extremely satisfying to watch the "Banned IPs" list grow automatically while you sleep.&lt;/p&gt;
&lt;h1&gt;
  
  
  &lt;strong&gt;The Code Breakdown&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;I built this entire stack using Terraform so it can be deployed (and destroyed) in minutes.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: During the build, I discovered a quirk. AWS WAF does not fully support the newer "HTTP APIs" (v2) for this specific type of blocking logic easily, so we are using the battle-tested "REST API" (v1) standard.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;The Jail: aws_wafv2_ip_set&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;First, we need a mutable list. In Terraform, we define an empty IP Set.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;resource "aws_wafv2_ip_set" "honeypot_set" {
  name               = "honeypot-blocked-ips"
  scope              = "REGIONAL"
  ip_address_version = "IPV4"
  addresses          = [] 

  lifecycle {
    ignore_changes = [addresses]
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;em&gt;&lt;strong&gt;Critical Dev Tip&lt;/strong&gt;: Notice the lifecycle { ignore_changes = [addresses] } block? This is mandatory. Without it, every time you run terraform apply, Terraform will see the list has changed (because the Lambda added bad IPs) and will try to wipe it clean. This block tells Terraform: "I created the jail, but I don't control who is inside it."&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;The Permissions&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The Lambda function isn't just running code; it needs permission to modify your firewall. This is where most people get stuck.&lt;/p&gt;

&lt;p&gt;We grant the Lambda two specific permissions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;wafv2:GetIPSet&lt;/strong&gt;: To read the current list (we need the LockToken for concurrency control).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;wafv2:UpdateIPSet&lt;/strong&gt;: To actually write the new IP to the list
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  Action = ["wafv2:GetIPSet", "wafv2:UpdateIPSet"],
  Effect   = "Allow",
  Resource = aws_wafv2_ip_set.honeypot_set.arn
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;em&gt;&lt;strong&gt;Security Note&lt;/strong&gt;: We scope the Resource specifically to the honeypot_set.arn. Even if this Lambda gets compromised, it can only ban people—it can’t delete your other WAF rules.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;The Logic: Python Boto3&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Inside the Python script, the logic is simple but ruthless. We are using the boto3 library to interact with the AWS API.&lt;/p&gt;

&lt;p&gt;The most important part is handling the LockToken. AWS WAF uses optimistic locking. To update the list, you must first read the list to get the current "version" (token). If you try to update without it, AWS rejects the request to prevent race conditions.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# 1. Read the list (Get Token)
response = waf.get_ip_set(...)
lock_token = response['LockToken']

# 2. Add the IP
current_ips.append(ip_cidr)

# 3. Push the update (With Token)
waf.update_ip_set(..., LockToken=lock_token)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;The Wall: aws_wafv2_web_acl&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Finally, we set the rules of engagement.&lt;/p&gt;

&lt;p&gt;We create a Rule with Priority 1. In WAF, lower numbers run first. This ensures that before the request is checked for SQL injection or Rate Limits, we check the Ban List. If they are in the jail, we drop the connection immediately.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;rule {
  name     = "BlockBannedIPs"
  priority = 1
  action {
    block {} # &amp;lt;--- The Hammer
  }
  statement {
    ip_set_reference_statement {
      arn = aws_wafv2_ip_set.honeypot_set.arn
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h1&gt;
  
  
  &lt;strong&gt;🚀 Deployment&lt;/strong&gt;
&lt;/h1&gt;

&lt;p&gt;Want to try this yourself? Here is the full code.&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Prerequisites&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Terraform installed&lt;/li&gt;
&lt;li&gt;AWS CLI configured (aws configure) with Admin permissions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Step 1: Create the Python Logic (honeypot.py)&lt;/strong&gt;&lt;br&gt;
Save this file in a folder. This is the logic that detects the intruder and updates the firewall.&lt;/p&gt;

&lt;p&gt;

&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;





&lt;p&gt;&lt;strong&gt;Step 2: The Infrastructure (main.tf)&lt;/strong&gt;&lt;br&gt;
Save this in the same folder. This builds the WAF, API Gateway, and Lambda.&lt;/p&gt;

&lt;p&gt;

&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;




&lt;p&gt;&lt;strong&gt;Step 3: Deployment&lt;/strong&gt;&lt;br&gt;
Open your terminal in the folder.&lt;/p&gt;

&lt;p&gt;Run &lt;code&gt;terraform init&lt;/code&gt;.&lt;br&gt;
Run &lt;code&gt;terraform apply -auto-approve&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 4: How to Test (Be Careful!)&lt;/strong&gt;&lt;br&gt;
After Terraform finishes, it will output a TRAP_URL (ending in /admin-backup).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy6uv01uqu6139girgden.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy6uv01uqu6139girgden.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Check your status: Open the SAFE_URL (just the domain). You should see a "Not Found" (which is fine, we didn't make a root page), but it loads.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Trigger the Trap:&lt;/strong&gt;&lt;br&gt;
Open the TRAP_URL in your browser OR use curl [TRAP_URL].&lt;br&gt;
You will see: Restricted Access. Your IP x.x.x.x has been flagged.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy1yzfctpe0et1cta7g6j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy1yzfctpe0et1cta7g6j.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Verify the Ban:&lt;/strong&gt;&lt;br&gt;
Try to refresh the page.&lt;br&gt;
You should eventually see 403 Forbidden coming from AWS WAF (not the Lambda).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fodj6r2fycug772b6y3ju.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fodj6r2fycug772b6y3ju.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: It might take 10-30 seconds for WAF to propagate the update.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fepb3a50f5fh49bztcpcf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fepb3a50f5fh49bztcpcf.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frlj9tos5le9f0rz8ip5j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frlj9tos5le9f0rz8ip5j.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  &lt;strong&gt;How Not to Break Production&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Before you deploy this to your company's main website, you need to handle a few edge cases. Active Defense is powerful, but it has no sense of humor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The "Google Problem" (robots.txt)&lt;/strong&gt;&lt;br&gt;
You do not want to ban the Google Crawler just because it found your trap URL.&lt;/p&gt;

&lt;p&gt;The Fix: Add a robots.txt file to your site root.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User-agent: *
Disallow: /admin-backup
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Legitimate crawlers (Google, Bing) respect this and won't touch the link. Malicious scanners usually ignore robots.txt and scan anyway. That’s how you filter the good bots from the bad ones.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Whitelisting&lt;/strong&gt;&lt;br&gt;
In a production environment, you should add a "Safe List" rule to your WAF with a higher priority (Priority 0) than your Block rule. Add your office VPN and CI/CD server IPs there. This ensures that no matter what crazy testing you do, your internal team never gets locked out.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;References:&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Honeypots &amp;amp; Active Defense&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://csrc.nist.gov/glossary/term/honeypot" rel="noopener noreferrer"&gt;CSRC.NIST.gov - Honeypot Glossary&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.google.com/search?q=https://www.crowdstrike.com/cybersecurity-101/honeypots/" rel="noopener noreferrer"&gt;CrowdStrike - What is a Honeypot?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AWS WAF &amp;amp; Automation Specs&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://docs.aws.amazon.com/waf/latest/APIReference/API_UpdateIPSet.html" rel="noopener noreferrer"&gt;AWS Docs - UpdateIPSet&lt;/a&gt;&lt;br&gt;
&lt;a href="https://aws.amazon.com/solutions/implementations/security-automations-for-aws-waf/" rel="noopener noreferrer"&gt;AWS Solutions - Security Automations&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Infrastructure as Code (Terraform)&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/wafv2_ip_set" rel="noopener noreferrer"&gt;Terraform Registry - aws_wafv2_ip_set&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bot Management Standards&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://developers.google.com/search/docs/crawling-indexing/robots/intro" rel="noopener noreferrer"&gt;Google Developers - Robots.txt Spec&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>waf</category>
      <category>lambda</category>
      <category>apigateway</category>
    </item>
    <item>
      <title>Understanding CORS and Web Origins</title>
      <dc:creator>Ben Subendran</dc:creator>
      <pubDate>Sun, 03 Sep 2023 09:16:57 +0000</pubDate>
      <link>https://forem.com/hanancs/understanding-cors-and-web-origins-171o</link>
      <guid>https://forem.com/hanancs/understanding-cors-and-web-origins-171o</guid>
      <description>&lt;p&gt;In the realm of web development, the terms "origin" and "CORS" frequently come into play, especially when dealing with modern web applications that make use of APIs. This short article aims to demystify these concepts for both seasoned developers and newcomers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is an Origin?&lt;/strong&gt;&lt;br&gt;
In the context of web security, the origin is a combination of three components: the scheme (protocol), the hostname, and the port. For two resources to share the same origin, all three of these components must match.&lt;/p&gt;

&lt;p&gt;For instance, consider the two URLs:&lt;/p&gt;

&lt;p&gt;&lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;&lt;br&gt;
&lt;a href="http://localhost:8000" rel="noopener noreferrer"&gt;http://localhost:8000&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While both have the same scheme (http) and hostname (localhost), their port numbers differ (3000 vs. 8000). Thus, they are treated as different origins by web browsers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why does Origin Matter?&lt;/strong&gt;&lt;br&gt;
The distinction of origin is crucial because of the Same-Origin Policy (SOP). This web security policy ensures that web pages from one origin cannot access data in another origin without explicit permission. The SOP acts as a protective barrier, preventing malicious sites from reading sensitive data from another site.&lt;/p&gt;

&lt;p&gt;However, modern web applications often require the ability to communicate across origins, especially with the rise of microservices and third-party APIs. This is where CORS (Cross-Origin Resource Sharing) comes into play.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Understanding CORS&lt;/strong&gt;&lt;br&gt;
CORS is a security feature implemented by web browsers that controls how web pages in one origin can request resources from another origin. It's the mechanism that allows or denies web pages to make requests to a different domain than the one that served the web page.&lt;/p&gt;

&lt;p&gt;By default, web pages cannot make cross-origin requests. But servers can specify who can access their resources by setting specific HTTP headers.&lt;/p&gt;

&lt;p&gt;For example, if a server wants to allow its resources to be accessed by a web page served from &lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;, it can include the following header in its responses:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Access-Control-Allow-Origin: http://localhost:3000&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
If a web page from any other origin tries to access the resource, the browser will block the request, thus maintaining security.&lt;/p&gt;

&lt;p&gt;The image below displays the error encountered when a client request is blocked due to the browser's CORS policy.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhra4gi7szaca7749wukz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhra4gi7szaca7749wukz.png" alt="CORS Error example" width="800" height="86"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A pivotal part of CORS is the "preflight request." Before dispatching certain types of requests (e.g., a POST request with specific headers), browsers initiate a preliminary "preflight" request using the OPTIONS HTTP method. This request essentially seeks permission for the subsequent main request, verifying whether it's allowed.&lt;/p&gt;

&lt;p&gt;If the server doesn't respond affirmatively to the preflight, indicating that the actual request is permissible, browsers will block the main request. The error "&lt;strong&gt;&lt;em&gt;preflight request doesn't pass access control check&lt;/em&gt;&lt;/strong&gt;" is symptomatic of such a situation.&lt;/p&gt;

</description>
      <category>cors</category>
    </item>
    <item>
      <title>Install Bun on WSL</title>
      <dc:creator>Ben Subendran</dc:creator>
      <pubDate>Sun, 10 Jul 2022 18:54:18 +0000</pubDate>
      <link>https://forem.com/hanancs/install-bun-on-wsl-59m1</link>
      <guid>https://forem.com/hanancs/install-bun-on-wsl-59m1</guid>
      <description>&lt;p&gt;Bun(&lt;a href="https://bun.sh" rel="noopener noreferrer"&gt;https://bun.sh&lt;/a&gt;) is a new JavaScript runtime with a native bundler, transpiler, task runner and NPM client built-in. Bun is superfast compared to NodeJS. &lt;/p&gt;

&lt;h2&gt;
  
  
  Enable WSL from Windows Features
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;To turn on the Windows Subsystem for Linux feature, click the checkbox like this:&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F088ez2tvf09nbvx90tt0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F088ez2tvf09nbvx90tt0.png" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Linux Distro
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;To work with WSL, you should have installed at least one distro on your computer.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;To install Ubuntu, Run this:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;winget install -e --id Canonical.Ubuntu
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you want to install any other distro, you can get it here by searching; &lt;a href="https://winget.run/" rel="noopener noreferrer"&gt;https://winget.run/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After installed, To check all the available distros, run this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;wsl --list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;If you get any error, just update the wsl by running &lt;code&gt;wsl --update&lt;/code&gt;. And install the distro again.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Install Bun
&lt;/h2&gt;

&lt;p&gt;After setting up the Unix admin for the respective distro, run this(in your WSL terminal, not in CMD):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;curl https://bun.sh/install | bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If there's any error occurs while unzipping, install the unzip package like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt install unzip
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can unzip it, and the installation will be done in seconds.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;To check the installed Bun version, run this:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;bun -version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Try React on Bun
&lt;/h2&gt;

&lt;p&gt;To scrutinize the specialty of Bun, we'll try installing React via Bun.&lt;/p&gt;

&lt;p&gt;The following command will create a React project inside the myapp folder.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;bun create react ./myapp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Installed path will be like this: wsl.localhost\Ubuntu\home\USER\myapp&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fee47zgnxj5zc9letoz81.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fee47zgnxj5zc9letoz81.png" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To start the React app, run these commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd myapp
bun dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can see your React app by navigating to &lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;All this can take significantly less time than NodeJS. That's the magic what Bun can do.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>bunjs</category>
      <category>tutorial</category>
      <category>wsl</category>
    </item>
    <item>
      <title>How to add a theme to a Hugo site</title>
      <dc:creator>Ben Subendran</dc:creator>
      <pubDate>Thu, 07 Jul 2022 06:53:53 +0000</pubDate>
      <link>https://forem.com/hanancs/how-to-add-a-theme-to-my-hugo-site-59ga</link>
      <guid>https://forem.com/hanancs/how-to-add-a-theme-to-my-hugo-site-59ga</guid>
      <description>&lt;p&gt;Hugo is one of the most popular open-source static site generators. The developers craft many themes (&lt;a href="https://themes.gohugo.io/" rel="noopener noreferrer"&gt;https://themes.gohugo.io/&lt;/a&gt;) for the Hugo community to use. Here's a quick guide on adding those themes to our Hugo sites.&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Hugo
&lt;/h2&gt;

&lt;p&gt;You can install Hugo on macOS, Windows, Linux, OpenBSD, FreeBSD, and on any machine where the GO(AKA Golang) compiler tool chain can run.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Here's the official installation guide: &lt;a href="https://gohugo.io/getting-started/installing/" rel="noopener noreferrer"&gt;https://gohugo.io/getting-started/installing/&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Install Extended Hugo on Windows via Chocolatey:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;choco install hugo-extended -confirm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;The extended version is nothing but has Sass/SCSS functionality.&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;After installing it, check your Hugo version to ensure you have a suitable version for a particular theme. In some cases, you may need to have installed the extended versions for some themes to be worked perfectly. So keep an eye on this thing as well.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To check your version of Hugo, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;hugo version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Create a new Hugo site
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;hugo new site newhugo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above command will create a new Hugo project in the &lt;strong&gt;newhugo&lt;/strong&gt; folder.&lt;/p&gt;

&lt;p&gt;To go inside the root of the directory, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd newhugo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Fork a Hugo theme
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;I'm using &lt;a href="https://github.com/zerostaticthemes/hugo-winston-theme" rel="noopener noreferrer"&gt;this theme&lt;/a&gt; for this tutorial. Anyway, you can find thousands of themes off of &lt;a href="https://themes.gohugo.io/" rel="noopener noreferrer"&gt;this page&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It's always better to fork the particular theme before adding it to our sites. Your forked theme will not be deleted even if the upstream repo is deleted. So the theme will be persisted.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Add the forked theme to our &lt;strong&gt;newhugo&lt;/strong&gt; site
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Before adding a git submodule, we have to initialize the git repository. So run this:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Now we can add that theme as a git submodule.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git submodule add https://github.com/apvarun/blist-hugo-theme.git themes/mytheme
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now our theme will be added to the folder &lt;code&gt;themes/mytheme&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Copy the content from theme.
&lt;/h2&gt;

&lt;p&gt;To copy all the content from the theme's exampleSite to our site, run this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cp -a themes/mytheme/exampleSite/. .        
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Configure config.toml file
&lt;/h2&gt;

&lt;p&gt;Set the theme name like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;theme = "mytheme"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Install Node Modules[if required]
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Commonly Hugo theme doesn't require node modules unless it uses a tool like PostCSS.&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Copy the package.json from the themes/mytheme, and paste it to our newhugo root folder. and run this:&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Run Hugo site
&lt;/h2&gt;

&lt;p&gt;To generate the build, run this(From the root folder):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;hugo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To serve the website, run this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;hugo serve
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will render your page in &lt;a href="http://localhost:1313/" rel="noopener noreferrer"&gt;localhost:1313&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>hugo</category>
      <category>jamstack</category>
    </item>
    <item>
      <title>Let's beautify the Windows Terminal</title>
      <dc:creator>Ben Subendran</dc:creator>
      <pubDate>Mon, 04 Jul 2022 23:09:39 +0000</pubDate>
      <link>https://forem.com/hanancs/lets-beautify-the-windows-terminal-3i64</link>
      <guid>https://forem.com/hanancs/lets-beautify-the-windows-terminal-3i64</guid>
      <description>&lt;p&gt;This is a straightforward &amp;amp; clear-cut guide based on Scott Hanselman's &lt;a href="https://www.youtube.com/watch?v=VT2L1SXFq9U&amp;amp;t=2011s"&gt;YouTube tutorial&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Let's get you set up!&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Powershell(.NET Core-powered cross-platform Powershell)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;winget install Microsoft.PowerShell
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WjJuK-7---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nabu2vqpjqw0uht87dej.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WjJuK-7---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nabu2vqpjqw0uht87dej.png" alt="Image description" width="800" height="479"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Install Windows Terminal
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;winget install Microsoft.WindowsTerminal
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Make PowerShell as your default terminal on Windows Terminal
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Go to Settings &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KjD24nsi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41225rta2xre7s3nl1ew.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KjD24nsi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41225rta2xre7s3nl1ew.png" alt="Image description" width="712" height="417"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Click on Default profile and select PowerShell and save the changes.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cYdHOD4w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nty8rzis4vtiu3q8zaqk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cYdHOD4w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nty8rzis4vtiu3q8zaqk.png" alt="Image description" width="800" height="456"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Then go to Profiles &amp;gt; PowerShell &amp;gt; Additional Settings &amp;gt; Appearance. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Here you can customize your fonts by choosing a suitable font with lots of Glyphs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VWPu5dTH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn4iofc1glmu0j7rfozi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VWPu5dTH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn4iofc1glmu0j7rfozi.png" alt="Image description" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Navigate to the following link to explore &amp;amp; download all the trendiest developer nerd fonts: &lt;a href="https://www.nerdfonts.com/font-downloads"&gt;https://www.nerdfonts.com/font-downloads&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, we will go with this, &lt;a href="https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/FiraCode.zip"&gt;https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/FiraCode.zip&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Choose FiraCode NF as Terminal Font. &lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  Install Oh My Posh
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;winget install JanDeDobbeleer.OhMyPosh -s winget
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;For the PATH to be reloaded, a restart of your terminal is advised&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Enter the following code in Terminal to get the exact location of the PowerShell profile.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; echo $profile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eES172Pb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anx9pgrot4dzhry5k9gf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eES172Pb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anx9pgrot4dzhry5k9gf.png" alt="Image description" width="800" height="82"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you don't see any folder titled &lt;strong&gt;PowerShell&lt;/strong&gt; in Documents, Make new folder in that name anyway.&lt;/p&gt;

&lt;p&gt;Inside that folder, create a file &lt;strong&gt;Microsoft.PowerShell_profile.ps1&lt;/strong&gt; where we're gonna add our functionalities.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Following json is being used as theme property to modify Oh My Posh options.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;theme.json: &lt;/p&gt;
&lt;/blockquote&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Download theme.json and locate it wherever you want, I'm letting it beside the Microsoft.PowerShell_profile.ps1 file. &lt;/p&gt;

&lt;p&gt;Open Microsoft.PowerShell_profile.ps1 and add the following code and save it.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;oh-my-posh --init --shell pwsh --config C:\Users\{YOUR PC USER NAME}\Documents\PowerShell\theme.json | Invoke-Expression
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Restart your terminal. You will see the difference.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3s00RCV7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh92pl9gz706rn8unyyb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3s00RCV7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh92pl9gz706rn8unyyb.png" alt="Image description" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Terminal-Icons
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Run the following code in the terminal&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Install-Module -Name Terminal-Icons -Repository PSGallery
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--G8pgVH3W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrnrz09qt603sxkldjw4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--G8pgVH3W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrnrz09qt603sxkldjw4.png" alt="Image description" width="800" height="329"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;And then add this line to Microsoft.PowerShell_profile.ps1 file&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Import-Module -Name Terminal-Icons
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;After your installation; if you run &lt;code&gt;ls&lt;/code&gt;, you will notice that all the listed files, got colored with beautiful icons like this:&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rPqaKXou--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3nzk3w6vuzgkxkmwvwe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rPqaKXou--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3nzk3w6vuzgkxkmwvwe.png" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Install PSReadLine
&lt;/h2&gt;

&lt;p&gt;PSReadLine will give you the guessings from the previous command history.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Run the following code in the terminal.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Install-Module PSReadLine -AllowPrerelease -Force
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;And then add these lines to Microsoft.PowerShell_profile.ps1 file&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Import-Module PSReadLine
Set-PSReadLineOption -PredictionSource History
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;PSReadLine will help you this way:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Qb2nVLHs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzvvhm2m46gt37u54prj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Qb2nVLHs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzvvhm2m46gt37u54prj.png" alt="Image description" width="800" height="414"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Enable Predictive Intellisense
&lt;/h2&gt;

&lt;p&gt;Predictive intellisense will gather guesses as much as possible.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Add these lines to Microsoft.PowerShell_profile.ps1 file.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the way Predictive Intellisense works:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XPDbO6LP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgwnr11cxf4q5lori2ur.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XPDbO6LP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgwnr11cxf4q5lori2ur.png" alt="Image description" width="800" height="294"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Make sure your Microsoft.PowerShell_profile.ps1 file contains code like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0bonPI8B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6seuj0u11c2zq5kpo18.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0bonPI8B--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6seuj0u11c2zq5kpo18.png" alt="Image description" width="800" height="263"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Enable the Glassmorphism effect
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Go to Windows Terminal &amp;gt; Settings &amp;gt; Open JSON file, then add these fields to defaults. Then save the settings.json file and restart the terminal. You will see wonders.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"defaults": {
   "useAcrylic": true,
   "acrylicOpacity": 0.5
},
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally!!! you terminal will look like this(if you follow everything precisely):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FVmL4HPy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld7qph803hg807xbfkol.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FVmL4HPy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld7qph803hg807xbfkol.png" alt="Image description" width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>terminal</category>
      <category>powershell</category>
      <category>ohmyposh</category>
      <category>windows</category>
    </item>
    <item>
      <title>CommonJS vs ES Modules</title>
      <dc:creator>Ben Subendran</dc:creator>
      <pubDate>Mon, 04 Jul 2022 15:51:54 +0000</pubDate>
      <link>https://forem.com/hanancs/commonjs-vs-es-modules-3eb</link>
      <guid>https://forem.com/hanancs/commonjs-vs-es-modules-3eb</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;cross-posted on &lt;a href="https://blog.keture.com/blog/cjsvsesm" rel="noopener noreferrer"&gt;https://blog.keture.com/blog/cjsvsesm&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you're already familiar with the JavaScript universe, you unquestionably come to believe that ecosystem of JS is more massive than any other language ever had. When it comes to Modular Programming, &lt;strong&gt;CJS&lt;/strong&gt;, &lt;strong&gt;AMD&lt;/strong&gt;, &lt;strong&gt;UMD&lt;/strong&gt;, and &lt;strong&gt;ESM&lt;/strong&gt; will be the commonly used approaches, and the list goes on. In this article, we will look deeper into CJS and ESM only as it's widely used.&lt;br&gt;
Modular Programming is nothing but a mechanism that allows you to break up your code into separate files; this makes it easier not only to maintain the code-base, but there are some other valuable benefits behind this approach. Let's see what those are. &lt;/p&gt;

&lt;p&gt;Before the concept of modular programming appeared in JavaScript, Developers would create multiple files and link to them as separate scripts if they wanted to segregate their code. Here is what it looks like: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fizj3on455hv2yy9koiyy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fizj3on455hv2yy9koiyy.png" alt="Image description" width="800" height="462"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;the above approach will make two major issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Polluting the global namespace&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dependency management&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Polluting the global namespace&lt;/strong&gt;: All the variables you created in your scripts, exist on the window object. If you attempted to use another variable with same name in another file, it would become difficult to know which value would be used at any point in the scripts, since they would all be using the same window. The only way a variable could be private was by putting it within a function scope. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dependency management&lt;/strong&gt;: Scripts would have to be loaded in order from top to bottom to ensure the correct variables were available.&lt;/p&gt;

&lt;p&gt;IIFE(Immediately Invoked Function Expression); a JavaScript function that runs as soon as it is defined. Writing all code in IFFE and placed them on a single object was the immediate solution provided by the community earlier. Here is what it looks like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3xfr9jf37fsd7x7e1wgc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3xfr9jf37fsd7x7e1wgc.png" alt="Image description" width="722" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After that, a few module solutions emerged:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CJS (CommonJS) is a synchronous approach implemented in Node.js as default.&lt;/li&gt;
&lt;li&gt;Asynchronous Module Definition (AMD), which was an asynchronous approach.&lt;/li&gt;
&lt;li&gt;Universal Module Definition (UMD) was intended to be a universal approach supporting both previous styles.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;However, these approaches didn't seem completely useful for the client-side(JavaScript). ECMAScript finally came up with the solution ES Modules which are now available natively in JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  ES Modules
&lt;/h2&gt;

&lt;p&gt;ES Modules in JavaScript use the import and export keywords:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;import&lt;/strong&gt;: Used to read code exported from another module&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;export&lt;/strong&gt;: Used to provide code to other modules.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;ES Modules are what you see in React, Angular, or any other Front-End JavaScript Libraries/Frameworks. It will work asynchronously. It is compatible with browsers and has HTML support. It can be accessible via CDN/URL. &lt;/p&gt;

&lt;p&gt;When it comes to Back-End, NodeJS uses CJS as its default way to import/export packages between files; meanwhile, Deno, the hot new alternative to Node, makes ESM the default. &lt;/p&gt;

&lt;p&gt;To achieve the same functionality in vanilla JavaScript, you have to set the type value to the module like this: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F67jenl78hbix53j0m89n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F67jenl78hbix53j0m89n.png" alt="Image description" width="800" height="434"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want to enable ES Modules on NodeJS, you have to do something like this:&lt;/p&gt;

&lt;p&gt;By adding &lt;code&gt;"type": "module"&lt;/code&gt; to package.json, now every files will be treated as mjs(EcmaScript modules) file. Otherwise, you must create files in mjs extension to achieve the same goal.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;package.json&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp53ij9j3pjidel4v8imn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp53ij9j3pjidel4v8imn.png" alt="Image description" width="800" height="535"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Named Exports
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;index.js&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F04npc5dzkfhqd0n9t7e3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F04npc5dzkfhqd0n9t7e3.png" alt="Image description" width="800" height="411"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then you can import all the exported modules from index.js to your respective file like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzf90mir1xjqc95lpt9ya.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzf90mir1xjqc95lpt9ya.png" alt="Image description" width="800" height="279"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is also possible to use an &lt;strong&gt;as&lt;/strong&gt;(alias) to rename the function like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8z188jaysp5rkaywyhwt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8z188jaysp5rkaywyhwt.png" alt="Image description" width="800" height="161"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Import all modules from particular script
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbb3yfjqc2tvdtu4urr7x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbb3yfjqc2tvdtu4urr7x.png" alt="Image description" width="800" height="392"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Default Imports
&lt;/h3&gt;

&lt;p&gt;A file can have only one default export, but it can have multiple named exports.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxof7tsf3s9323dzuf43z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxof7tsf3s9323dzuf43z.png" alt="Image description" width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A default export will not be imported with curly brackets, but will be directly imported into a named identifier.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuektgfdrl71y7pf0h66g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuektgfdrl71y7pf0h66g.png" alt="Image description" width="800" height="287"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  CommonJS
&lt;/h2&gt;

&lt;p&gt;CJS imports modules synchronously. It doesn't support either HTML or CDN/URL imports. It's not browser compatible. It will have to be transpiled and bundled. But it's suitable for the Back-End because NodeJS has CJS as its default modular. &lt;/p&gt;

&lt;h3&gt;
  
  
  Default Exports
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjclu8fbt54462lm3qwc1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjclu8fbt54462lm3qwc1.png" alt="Image description" width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;when you import modules via CJS; you can specify either its Module ID or path of the module inside the require method like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzno2yw3bhezvroqjfw83.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzno2yw3bhezvroqjfw83.png" alt="Image description" width="800" height="319"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpu7dh6wdrgkssqf35psq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpu7dh6wdrgkssqf35psq.png" alt="Image description" width="800" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Named Exports
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;index.cjs&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk9g96zza2dsh1euie7dt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk9g96zza2dsh1euie7dt.png" alt="Image description" width="788" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note here file extension is cjs but now js also can be supported.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb3w09wwaizc7c3ztfiuy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb3w09wwaizc7c3ztfiuy.png" alt="Image description" width="800" height="337"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Resources:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.digitalocean.com/community/tutorials/understanding-modules-and-import-and-export-statements-in-javascript" rel="noopener noreferrer"&gt;https://www.digitalocean.com/community/tutorials/understanding-modules-and-import-and-export-statements-in-javascript&lt;/a&gt;&lt;br&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Glossary/IIFE&lt;/a&gt;&lt;br&gt;
&lt;a href="https://redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1" rel="noopener noreferrer"&gt;https://redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1&lt;/a&gt;&lt;br&gt;
&lt;a href="https://nodejs.org/api/modules.html" rel="noopener noreferrer"&gt;https://nodejs.org/api/modules.html&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>deno</category>
      <category>modules</category>
    </item>
  </channel>
</rss>
