<?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: arafatruetbd</title>
    <description>The latest articles on Forem by arafatruetbd (@arafatruetbd).</description>
    <link>https://forem.com/arafatruetbd</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%2F1026389%2F870462ba-571c-4698-9224-b25f723ad63c.jpg</url>
      <title>Forem: arafatruetbd</title>
      <link>https://forem.com/arafatruetbd</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/arafatruetbd"/>
    <language>en</language>
    <item>
      <title>How I Built a Production-Ready Image CDN Using AWS S3 + CloudFront (and Eliminated Vercel Image Costs)</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Mon, 13 Apr 2026 13:29:26 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-i-built-a-production-ready-image-cdn-using-aws-s3-cloudfront-and-eliminated-vercel-image-216g</link>
      <guid>https://forem.com/arafatruetbd/how-i-built-a-production-ready-image-cdn-using-aws-s3-cloudfront-and-eliminated-vercel-image-216g</guid>
      <description>&lt;p&gt;I recently optimized my app’s image delivery by moving from direct storage / Vercel handling to a scalable CDN setup using AWS. Here’s the complete step-by-step breakdown.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Problem
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Images were slow to load globally&lt;/li&gt;
&lt;li&gt;Vercel image optimization was becoming costly&lt;/li&gt;
&lt;li&gt;Direct S3 access wasn’t efficient or secure&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🎯 Goal
&lt;/h2&gt;

&lt;p&gt;Build a system like:&lt;/p&gt;

&lt;p&gt;User → CloudFront (CDN) → S3 (Private Storage)&lt;/p&gt;




&lt;h2&gt;
  
  
  🏗️ Architecture
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Amazon S3&lt;/strong&gt; → stores images&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Amazon CloudFront&lt;/strong&gt; → CDN layer&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Route 53&lt;/strong&gt; → DNS&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ACM (SSL)&lt;/strong&gt; → HTTPS&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ⚙️ Step-by-Step Setup
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Upload images to S3
&lt;/h3&gt;

&lt;p&gt;Organize structure like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;/banner&lt;/li&gt;
&lt;li&gt;/products&lt;/li&gt;
&lt;li&gt;/users&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  2. Create CloudFront Distribution
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Origin: S3 bucket&lt;/li&gt;
&lt;li&gt;Origin Access: ✅ Private (recommended)&lt;/li&gt;
&lt;li&gt;Cache: Default optimized settings&lt;/li&gt;
&lt;li&gt;Protocol: Redirect HTTP → HTTPS&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  3. Configure Custom Domain
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Add: &lt;code&gt;cdn.yourdomain.com&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Attach SSL certificate (ACM)&lt;/li&gt;
&lt;li&gt;Create CNAME in Route 53 → CloudFront&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  4. Test CDN
&lt;/h3&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;a href="https://cdn.yourdomain.com/banner/image.jpg" rel="noopener noreferrer"&gt;https://cdn.yourdomain.com/banner/image.jpg&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  ⚡ Performance Optimization (IMPORTANT)
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Add Cache Headers in S3
&lt;/h3&gt;

&lt;p&gt;Set:&lt;br&gt;
Cache-Control: public, max-age=31536000, immutable&lt;/p&gt;

&lt;p&gt;This ensures:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1-year caching&lt;/li&gt;
&lt;li&gt;Instant repeat loads&lt;/li&gt;
&lt;li&gt;Reduced AWS costs&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;
  
  
  Bulk Update (CLI)
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;aws s3 &lt;span class="nb"&gt;cp &lt;/span&gt;s3://your-bucket/banner/ s3://your-bucket/banner/ &lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="nt"&gt;--recursive&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="nt"&gt;--metadata-directive&lt;/span&gt; REPLACE &lt;span class="se"&gt;\&lt;/span&gt;
&lt;span class="nt"&gt;--cache-control&lt;/span&gt; &lt;span class="s2"&gt;"public, max-age=31536000, immutable"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Invalidate CloudFront Cache
&lt;/h3&gt;

&lt;p&gt;After changes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight c"&gt;&lt;code&gt;&lt;span class="o"&gt;/*&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔥 Results
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;⚡ Faster global image delivery&lt;/li&gt;
&lt;li&gt;💸 Reduced Vercel costs&lt;/li&gt;
&lt;li&gt;🔒 Secure (private S3 via CloudFront)&lt;/li&gt;
&lt;li&gt;📈 Scalable for production&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ⚠️ Lessons Learned
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Don’t use root domain (use subdomain like cdn.domain.com)&lt;/li&gt;
&lt;li&gt;Always invalidate cache after metadata changes&lt;/li&gt;
&lt;li&gt;Never reuse image filenames (use versioning)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🧩 Bonus (Next.js Config)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;images&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;domains&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cdn.yourdomain.com&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="na"&gt;unoptimized&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🎉 Conclusion
&lt;/h2&gt;

&lt;p&gt;S3 + CloudFront is one of the most cost-efficient and scalable ways to serve images in production. Once set up, it just works.&lt;/p&gt;




&lt;p&gt;If you're building a startup or scaling your app — this setup is a must.&lt;/p&gt;

&lt;p&gt;Happy building 🚀&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>aws</category>
      <category>performance</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How to Drop a PostgreSQL Database from a Docker Container (Without Breaking Things)</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Mon, 13 Apr 2026 13:27:19 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-to-drop-a-postgresql-database-from-a-docker-container-without-breaking-things-ad3</link>
      <guid>https://forem.com/arafatruetbd/how-to-drop-a-postgresql-database-from-a-docker-container-without-breaking-things-ad3</guid>
      <description>&lt;p&gt;If you're working with PostgreSQL inside Docker, at some point you’ll need to reset your database.&lt;/p&gt;

&lt;p&gt;Maybe:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You want a clean start&lt;/li&gt;
&lt;li&gt;You imported the wrong data&lt;/li&gt;
&lt;li&gt;Or something just went wrong (it happens 😅)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Dropping a database sounds simple — but there’s one important rule that can trip you up.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚠️ The Rule Most People Miss
&lt;/h2&gt;

&lt;p&gt;👉 You &lt;strong&gt;cannot drop a database while you're connected to it&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So if your database is &lt;code&gt;my_database&lt;/code&gt;, you must connect to a different one (usually &lt;code&gt;postgres&lt;/code&gt;) before dropping it.&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 The Correct Command
&lt;/h2&gt;

&lt;p&gt;Here’s the safe and correct way to drop your database from a Docker container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; postgres_container psql &lt;span class="nt"&gt;-U&lt;/span&gt; postgres &lt;span class="nt"&gt;-d&lt;/span&gt; postgres &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="s2"&gt;"DROP DATABASE my_database;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🧠 What’s Happening Here?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;docker exec&lt;/code&gt; → runs a command inside your container&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;postgres_container&lt;/code&gt; → your container name&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;psql&lt;/code&gt; → PostgreSQL CLI&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-d postgres&lt;/code&gt; → connect to default database (not the one you're deleting)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;DROP DATABASE my_database;&lt;/code&gt; → removes the database&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 In simple terms:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;“Connect to a safe database and delete the target database from there.”&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🔄 Drop and Recreate (Clean Reset)
&lt;/h2&gt;

&lt;p&gt;If you want a fresh database:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; postgres_container psql &lt;span class="nt"&gt;-U&lt;/span&gt; postgres &lt;span class="nt"&gt;-d&lt;/span&gt; postgres &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="s2"&gt;"DROP DATABASE IF EXISTS my_database;"&lt;/span&gt;
docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; postgres_container psql &lt;span class="nt"&gt;-U&lt;/span&gt; postgres &lt;span class="nt"&gt;-d&lt;/span&gt; postgres &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="s2"&gt;"CREATE DATABASE my_database;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔥 Full Reset (Docker Way)
&lt;/h2&gt;

&lt;p&gt;If you want to completely wipe everything:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker-compose down &lt;span class="nt"&gt;-v&lt;/span&gt;
docker-compose up &lt;span class="nt"&gt;-d&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This removes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All databases&lt;/li&gt;
&lt;li&gt;Volumes&lt;/li&gt;
&lt;li&gt;Stored data&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 You get a completely fresh start.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧩 When You’ll Need This
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Resetting development databases&lt;/li&gt;
&lt;li&gt;Fixing broken migrations&lt;/li&gt;
&lt;li&gt;Cleaning test environments&lt;/li&gt;
&lt;li&gt;Re-importing fresh data&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🏁 Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Dropping a PostgreSQL database inside Docker is straightforward — once you understand the connection rule.&lt;/p&gt;

&lt;p&gt;The key takeaway:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Always connect to a different database before dropping the target one.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It’s a small detail, but it saves a lot of confusion.&lt;/p&gt;




</description>
      <category>database</category>
      <category>docker</category>
      <category>postgres</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>How to Export a PostgreSQL Database from a Docker Container (pg_dump Guide)</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Tue, 07 Apr 2026 23:22:36 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-to-export-a-postgresql-database-from-a-docker-container-pgdump-guide-2oep</link>
      <guid>https://forem.com/arafatruetbd/how-to-export-a-postgresql-database-from-a-docker-container-pgdump-guide-2oep</guid>
      <description>&lt;p&gt;If you're working with PostgreSQL inside Docker, sooner or later you'll need a backup.&lt;/p&gt;

&lt;p&gt;Maybe you're about to change something risky.&lt;br&gt;
Maybe you want to move your database somewhere else.&lt;br&gt;
Or maybe you just don’t want to lose your data (we’ve all been there 😅).&lt;/p&gt;

&lt;p&gt;The good news? It’s actually much simpler than it looks.&lt;/p&gt;

&lt;p&gt;In this guide, I’ll show you the easiest way to export your PostgreSQL database from a Docker container using &lt;code&gt;pg_dump&lt;/code&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  🚀 The One-Liner (Quick Answer)
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; postgres_container pg_dump &lt;span class="nt"&gt;-U&lt;/span&gt; postgres my_database &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; dump.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;That’s it.&lt;/p&gt;

&lt;p&gt;Run this, and you’ll get a file called &lt;code&gt;dump.sql&lt;/code&gt; on your machine containing your entire database.&lt;/p&gt;


&lt;h2&gt;
  
  
  🧠 What’s Really Happening Here?
&lt;/h2&gt;

&lt;p&gt;At first glance, this command looks a bit intimidating. But it’s actually doing something very logical.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;docker exec&lt;/code&gt; → “Run this command inside my container”&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-i&lt;/code&gt; → “Keep the connection open so data can stream out”&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;postgres_container&lt;/code&gt; → Your Docker container name&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;pg_dump&lt;/code&gt; → PostgreSQL’s built-in backup tool&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;my_database&lt;/code&gt; → Your database name&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;gt;&lt;/code&gt; dump.sql → “Save whatever comes out into a file on my computer”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 In plain English:&lt;/p&gt;

&lt;p&gt;You’re telling Docker:&lt;br&gt;
&lt;strong&gt;“Run pg_dump inside the container and send the result directly to my local file.”&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;No need to manually enter the container. No extra steps.&lt;/p&gt;


&lt;h2&gt;
  
  
  📦 What Do You Get in &lt;code&gt;dump.sql&lt;/code&gt;?
&lt;/h2&gt;

&lt;p&gt;The file you get is a full logical backup of your database. It includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All tables (structure)&lt;/li&gt;
&lt;li&gt;All data (INSERT statements)&lt;/li&gt;
&lt;li&gt;Indexes, constraints, relationships&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Basically, everything you need to rebuild the database later.&lt;/p&gt;


&lt;h2&gt;
  
  
  ✅ Why This Approach Is So Useful
&lt;/h2&gt;

&lt;p&gt;I like this method because it’s:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✔ Simple — just one command&lt;/li&gt;
&lt;li&gt;✔ Fast — no unnecessary steps&lt;/li&gt;
&lt;li&gt;✔ Practical — works in almost any Docker setup&lt;/li&gt;
&lt;li&gt;✔ Flexible — perfect for backups, migrations, and debugging&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  ⚠️ Common Issues (And Quick Fixes)
&lt;/h2&gt;
&lt;h3&gt;
  
  
  ❌ Authentication error
&lt;/h3&gt;

&lt;p&gt;If your database uses a password, you might see an error.&lt;/p&gt;

&lt;p&gt;Just pass it like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="nv"&gt;PGPASSWORD&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;'your_password'&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; postgres_container &lt;span class="se"&gt;\&lt;/span&gt;
pg_dump &lt;span class="nt"&gt;-U&lt;/span&gt; postgres my_database &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; dump.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  ❌ Container not running
&lt;/h3&gt;

&lt;p&gt;Make sure your container is up:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker ps
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  ❌ Wrong container name
&lt;/h3&gt;

&lt;p&gt;Double-check the name:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker ps &lt;span class="nt"&gt;--format&lt;/span&gt; &lt;span class="s2"&gt;"table {{.Names}}&lt;/span&gt;&lt;span class="se"&gt;\t&lt;/span&gt;&lt;span class="s2"&gt;{{.Image}}"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  💡 Pro Tip: Compress the Backup
&lt;/h2&gt;

&lt;p&gt;If your database is large, you probably don’t want a huge &lt;code&gt;.sql&lt;/code&gt; file.&lt;/p&gt;

&lt;p&gt;You can compress it on the fly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; postgres_container pg_dump &lt;span class="nt"&gt;-U&lt;/span&gt; postgres my_database | &lt;span class="nb"&gt;gzip&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; dump.sql.gz
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This saves space and is great for uploads or CI/CD pipelines.&lt;/p&gt;




&lt;h2&gt;
  
  
  🔄 How to Restore the Backup
&lt;/h2&gt;

&lt;p&gt;When you need your data back:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;psql &lt;span class="nt"&gt;-U&lt;/span&gt; postgres &lt;span class="nt"&gt;-d&lt;/span&gt; my_database &amp;lt; dump.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Simple and reliable.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧩 When You’ll Actually Use This
&lt;/h2&gt;

&lt;p&gt;This command becomes super handy when you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Need a quick local backup&lt;/li&gt;
&lt;li&gt;Are moving data between environments&lt;/li&gt;
&lt;li&gt;Want to debug production issues locally&lt;/li&gt;
&lt;li&gt;Plan to make risky schema changes&lt;/li&gt;
&lt;/ul&gt;




</description>
      <category>database</category>
      <category>docker</category>
      <category>postgres</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Docker Cheatsheet: Quick Reference for Developers</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Sat, 20 Sep 2025 21:48:59 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/docker-cheatsheet-quick-reference-for-developers-4k0g</link>
      <guid>https://forem.com/arafatruetbd/docker-cheatsheet-quick-reference-for-developers-4k0g</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction&lt;/strong&gt;&lt;br&gt;
Docker is a containerization platform that allows you to package applications and their dependencies into lightweight, portable containers. Here’s a quick cheatsheet to get started and work efficiently with Docker.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;1. Docker Basics&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Check Docker version:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;List running containers:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker ps
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;List all containers (running + stopped):&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker ps &lt;span class="nt"&gt;-a&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;List all images:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker images
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Stop a container:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker stop &amp;lt;container_id&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Remove a container:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;rm&lt;/span&gt; &amp;lt;container_id&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Remove an image:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker rmi &amp;lt;image_name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;2. Working with Images&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Pull an image from Docker Hub:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker pull &amp;lt;image_name&amp;gt;:&amp;lt;tag&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Build an image from Dockerfile:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker build &lt;span class="nt"&gt;-t&lt;/span&gt; &amp;lt;image_name&amp;gt;:&amp;lt;tag&amp;gt; &lt;span class="nb"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Run a container from an image:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="nt"&gt;--name&lt;/span&gt; &amp;lt;container_name&amp;gt; &amp;lt;image_name&amp;gt;:&amp;lt;tag&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Run container with port mapping:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="nt"&gt;-p&lt;/span&gt; 8080:80 &amp;lt;image_name&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;3. Dockerfile Essentials&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Basic structure:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight docker"&gt;&lt;code&gt;&lt;span class="c"&gt;# Use a base image&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt;&lt;span class="s"&gt; node:18&lt;/span&gt;

&lt;span class="c"&gt;# Set working directory&lt;/span&gt;
&lt;span class="k"&gt;WORKDIR&lt;/span&gt;&lt;span class="s"&gt; /app&lt;/span&gt;

&lt;span class="c"&gt;# Copy package files and install dependencies&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; package*.json ./&lt;/span&gt;
&lt;span class="k"&gt;RUN &lt;/span&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;

&lt;span class="c"&gt;# Copy app source code&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; . .&lt;/span&gt;

&lt;span class="c"&gt;# Expose port and start app&lt;/span&gt;
&lt;span class="k"&gt;EXPOSE&lt;/span&gt;&lt;span class="s"&gt; 3000&lt;/span&gt;
&lt;span class="k"&gt;CMD&lt;/span&gt;&lt;span class="s"&gt; ["node", "index.js"]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;4. Docker Compose Basics&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;docker-compose.yml example for Node.js + MongoDB:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;'&lt;/span&gt;&lt;span class="s"&gt;3'&lt;/span&gt;
&lt;span class="na"&gt;services&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;app&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;build&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;.&lt;/span&gt;
    &lt;span class="na"&gt;ports&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;3000:3000"&lt;/span&gt;
    &lt;span class="na"&gt;volumes&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;.:/app&lt;/span&gt;
    &lt;span class="na"&gt;depends_on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;mongo&lt;/span&gt;

  &lt;span class="na"&gt;mongo&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;mongo:6&lt;/span&gt;
    &lt;span class="na"&gt;ports&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;27017:27017"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Commands:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker-compose up        &lt;span class="c"&gt;# Start all services&lt;/span&gt;
docker-compose down      &lt;span class="c"&gt;# Stop all services&lt;/span&gt;
docker-compose logs &lt;span class="nt"&gt;-f&lt;/span&gt;   &lt;span class="c"&gt;# Follow logs&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  &lt;strong&gt;5. Useful Docker Commands&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;View container logs:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker logs &lt;span class="nt"&gt;-f&lt;/span&gt; &amp;lt;container_id&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Execute a command in running container:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-it&lt;/span&gt; &amp;lt;container_id&amp;gt; bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Remove all stopped containers:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker container prune
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Remove unused images:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker image prune &lt;span class="nt"&gt;-a&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;br&gt;
Docker simplifies deployment, ensures consistency, and makes scaling easier. Keep this cheatsheet handy while developing and experimenting with containers.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Managing Old Node.js Versions on Windows: My Problem &amp; Solution</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Mon, 15 Sep 2025 21:39:01 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/managing-old-nodejs-versions-on-windows-my-problem-solution-1jdl</link>
      <guid>https://forem.com/arafatruetbd/managing-old-nodejs-versions-on-windows-my-problem-solution-1jdl</guid>
      <description>&lt;h3&gt;
  
  
  Problem
&lt;/h3&gt;

&lt;p&gt;I needed to install and switch between older Node.js versions (like &lt;strong&gt;10.12.0&lt;/strong&gt; and &lt;strong&gt;12.19.0&lt;/strong&gt;) on Windows.&lt;/p&gt;

&lt;p&gt;I first tried using &lt;strong&gt;nvm-windows&lt;/strong&gt;, but every time I installed an old version, it failed with errors like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;error installing 10.12.0: The system cannot find the file specified.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The issue was that nvm-windows tries to download matching npm zip files, and those archives no longer exist for many old Node releases. This meant I couldn’t get the versions I needed without messy manual fixes.&lt;/p&gt;




&lt;h3&gt;
  
  
  Solution: Use Volta
&lt;/h3&gt;

&lt;p&gt;Instead of fighting with &lt;code&gt;nvm-windows&lt;/code&gt;, I switched to &lt;strong&gt;&lt;a href="https://volta.sh/" rel="noopener noreferrer"&gt;Volta&lt;/a&gt;&lt;/strong&gt;, a modern JavaScript toolchain manager that works perfectly on Windows.&lt;/p&gt;

&lt;p&gt;Here’s the complete process I followed:&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Install Volta
&lt;/h4&gt;

&lt;p&gt;Using &lt;code&gt;winget&lt;/code&gt; (recommended):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight powershell"&gt;&lt;code&gt;&lt;span class="n"&gt;winget&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;install&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;Volta.Volta&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or download the latest &lt;code&gt;.msi&lt;/code&gt; installer from &lt;a href="https://github.com/volta-cli/volta/releases" rel="noopener noreferrer"&gt;Volta releases&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;After installation, restart your terminal so Volta is added to your PATH.&lt;br&gt;
Verify it works:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight powershell"&gt;&lt;code&gt;&lt;span class="n"&gt;volta&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;--version&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h4&gt;
  
  
  2. Install Old Node Versions
&lt;/h4&gt;

&lt;p&gt;Now I could install older Node.js versions without errors:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight powershell"&gt;&lt;code&gt;&lt;span class="n"&gt;volta&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;install&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;node&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="nx"&gt;10.12.0&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="n"&gt;volta&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;install&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;node&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="nx"&gt;12.19.0&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Check versions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight powershell"&gt;&lt;code&gt;&lt;span class="n"&gt;node&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;-v&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="n"&gt;npm&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;-v&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h4&gt;
  
  
  3. Pin Versions Per Project
&lt;/h4&gt;

&lt;p&gt;For projects that depend on specific Node versions, Volta can “pin” the version:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight powershell"&gt;&lt;code&gt;&lt;span class="n"&gt;cd&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;my-legacy-project&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="n"&gt;volta&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;pin&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;node&lt;/span&gt;&lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="nx"&gt;10.12.0&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This adds the Node version to the project’s &lt;code&gt;package.json&lt;/code&gt;. Now whenever I enter this folder, Volta automatically switches to Node 10.12.0.&lt;/p&gt;

&lt;p&gt;Another project can have Node 12.19.0 pinned the same way, without conflicts.&lt;/p&gt;




&lt;p&gt;✅ &lt;strong&gt;Final takeaway&lt;/strong&gt;:&lt;br&gt;
If you’re on Windows and need to run old Node.js versions, skip &lt;code&gt;nvm-windows&lt;/code&gt;.&lt;br&gt;
With &lt;strong&gt;Volta&lt;/strong&gt;, installation is simple, switching is automatic, and everything just works.&lt;/p&gt;




</description>
    </item>
    <item>
      <title>🚀 How to Set Up SSH Keys for GitLab (Step by Step)</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Mon, 15 Sep 2025 21:12:48 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-to-set-up-ssh-keys-for-gitlab-step-by-step-1n7j</link>
      <guid>https://forem.com/arafatruetbd/how-to-set-up-ssh-keys-for-gitlab-step-by-step-1n7j</guid>
      <description>&lt;p&gt;When working with GitLab, using SSH is the most secure and convenient way to interact with your repositories. Instead of typing your username and password every time, SSH keys let you connect with just a command.&lt;/p&gt;

&lt;p&gt;In this guide, I’ll show you how to set up SSH keys for GitLab from scratch.&lt;/p&gt;




&lt;h2&gt;
  
  
  🔑 Step 1: Check if you already have SSH keys
&lt;/h2&gt;

&lt;p&gt;Open a terminal and run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; &lt;span class="nt"&gt;-al&lt;/span&gt; ~/.ssh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you see files like &lt;code&gt;id_rsa.pub&lt;/code&gt; or &lt;code&gt;id_ed25519.pub&lt;/code&gt;, you may already have a key. Otherwise, let’s generate a new one.&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ Step 2: Generate a new SSH key
&lt;/h2&gt;

&lt;p&gt;Run this command (replace the email with yours):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ssh-keygen &lt;span class="nt"&gt;-t&lt;/span&gt; ed25519 &lt;span class="nt"&gt;-C&lt;/span&gt; &lt;span class="s2"&gt;"your.email@example.com"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Press &lt;strong&gt;Enter&lt;/strong&gt; to accept the default file path.&lt;/li&gt;
&lt;li&gt;Optionally set a passphrase for extra security.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This creates two files:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;id_ed25519&lt;/code&gt; → your &lt;strong&gt;private key&lt;/strong&gt; (keep it secret!)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;id_ed25519.pub&lt;/code&gt; → your &lt;strong&gt;public key&lt;/strong&gt; (this goes to GitLab).&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ⚙️ Step 3: Add your SSH key to the ssh-agent
&lt;/h2&gt;

&lt;p&gt;Start the agent:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;eval&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;ssh-agent &lt;span class="nt"&gt;-s&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then add your key:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ssh-add ~/.ssh/id_ed25519
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  📋 Step 4: Copy your public key
&lt;/h2&gt;

&lt;p&gt;Run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat&lt;/span&gt; ~/.ssh/id_ed25519.pub
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copy the output (the whole line starting with &lt;code&gt;ssh-ed25519&lt;/code&gt;).&lt;/p&gt;




&lt;h2&gt;
  
  
  🔗 Step 5: Add the key to GitLab
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Log in to GitLab.&lt;/li&gt;
&lt;li&gt;Go to &lt;strong&gt;User Settings → SSH Keys&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Paste your public key.&lt;/li&gt;
&lt;li&gt;Add a title and click &lt;strong&gt;Add key&lt;/strong&gt;.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  ✅ Step 6: Test the connection
&lt;/h2&gt;

&lt;p&gt;Run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ssh &lt;span class="nt"&gt;-T&lt;/span&gt; git@gitlab.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If successful, you’ll see:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Welcome to GitLab, @yourusername!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  📥 Step 7: Clone repositories with SSH
&lt;/h2&gt;

&lt;p&gt;Now you can clone any repo without typing passwords:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone git@gitlab.com:groupname/reponame.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🎯 Final Notes
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Always keep your &lt;strong&gt;private key&lt;/strong&gt; safe and never share it.&lt;/li&gt;
&lt;li&gt;If you work on multiple machines, you’ll need to add a key for each one.&lt;/li&gt;
&lt;li&gt;You can use SSH for both GitLab.com and self-hosted GitLab instances.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;🔥 That’s it! You’re ready to use SSH with GitLab.&lt;br&gt;
I’d love to hear your thoughts—drop a comment if you tried this or faced any issues.&lt;/p&gt;




</description>
    </item>
    <item>
      <title>How I Built an AI-Powered Transcript Summarizer Using n8n</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Sun, 14 Sep 2025 14:05:46 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-i-built-an-ai-powered-transcript-summarizer-using-n8n-40d4</link>
      <guid>https://forem.com/arafatruetbd/how-i-built-an-ai-powered-transcript-summarizer-using-n8n-40d4</guid>
      <description>&lt;h3&gt;
  
  
  1. Intro
&lt;/h3&gt;

&lt;p&gt;Do you ever find yourself buried under mountains of meeting transcripts or interview notes? What if summarizing them could be completely automated? I just built a workflow with &lt;strong&gt;n8n&lt;/strong&gt; to automatically pull transcript files from Google Drive, summarize them via an LLM, and push the results into Google Sheets—with zero manual effort.&lt;/p&gt;

&lt;p&gt;I’m publishing the full workflow on GitHub, and in this post, I'll walk you through how it works, why I built it, and how you can apply it to your own projects.&lt;/p&gt;




&lt;h3&gt;
  
  
  2. Problem Statement
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Large organizations or content creators often generate long-form transcripts—calls, podcasts, interviews, lectures.&lt;/li&gt;
&lt;li&gt;Manually summarizing these is time-consuming and inconsistent.&lt;/li&gt;
&lt;li&gt;Valuable insights get lost in walls of unstructured text.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  3. Enter n8n + LLMs
&lt;/h3&gt;

&lt;p&gt;With &lt;strong&gt;n8n&lt;/strong&gt;, an open-source workflow automation tool, and modern large language models (via OpenRouter/OpenAI), you can automate:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Detecting new transcript files in Google Drive&lt;/li&gt;
&lt;li&gt;Decoding and cleaning the text&lt;/li&gt;
&lt;li&gt;Chunking large transcripts into manageable pieces (≤4000 characters)&lt;/li&gt;
&lt;li&gt;Summarizing each chunk consistently into:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;A 3-sentence executive summary&lt;/li&gt;
&lt;li&gt;A list of &lt;strong&gt;pain points&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;A list of &lt;strong&gt;feature requests&lt;/strong&gt;

&lt;ol&gt;
&lt;li&gt;Merging &amp;amp; deduplicating chunk summaries&lt;/li&gt;
&lt;li&gt;Format results for clarity&lt;/li&gt;
&lt;li&gt;Save or update results in Google Sheets by matching &lt;code&gt;CallID&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No coding except for simple JavaScript cleaning—just drag, configure, and run.&lt;/p&gt;




&lt;h3&gt;
  
  
  4. How the Workflow Works (Step-by-Step)
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Google Drive Trigger&lt;/strong&gt;&lt;br&gt;
Watches a specific Drive folder (e.g., “Transcripts”) and triggers when a new file is added.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Download&lt;/strong&gt;&lt;br&gt;
Fetches the file binary so it can be processed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Decode Binary → &lt;code&gt;rawText&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
Detects if the file is UTF-8 or UTF-16, strips out BOMs, and converts it into readable text.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Load Transcript&lt;/strong&gt;&lt;br&gt;
Moves the decoded text into a variable for downstream processing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Preprocessing&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Normalizes line breaks&lt;/li&gt;
&lt;li&gt;Replaces &lt;code&gt;[inaudible]&lt;/code&gt; with “unclear audio”&lt;/li&gt;
&lt;li&gt;Redacts email addresses and phone numbers for privacy&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Chunk Transcript&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Splits by trimmed lines into chunks under ~4000 characters&lt;/li&gt;
&lt;li&gt;Handles long lines by slicing them&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Basic LLM Chain&lt;/strong&gt;
Sends each chunk to the LLM with a prompt to return &lt;strong&gt;strict JSON&lt;/strong&gt; with:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;summary&lt;/code&gt;: exactly 3 sentences&lt;/li&gt;
&lt;li&gt;&lt;code&gt;pain_points[]&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;feature_requests[]&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Merge Summaries&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;concatenates all chunk summaries&lt;/li&gt;
&lt;li&gt;deduplicates pain points &amp;amp; feature requests&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Format for Sheet&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Generates:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;CallID&lt;/code&gt; (either passed-in or generated)&lt;/li&gt;
&lt;li&gt;Multi-line summary (one sentence per line)&lt;/li&gt;
&lt;li&gt;Bulleted lists for pain points / feature requests&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Append or Update in Google Sheets&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;* Matches on `CallID` to avoid duplicates
* Adds or updates the row in your specified sheet
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;(Add a screenshot or diagram of the workflow if available.)&lt;/p&gt;




&lt;h3&gt;
  
  
  5. Why This Matters
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Save Time&lt;/strong&gt; – No more slogging through transcripts manually&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consistency&lt;/strong&gt; – A structured prompt ensures uniform output&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Privacy&lt;/strong&gt; – Sensitive info is redacted automatically&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Scalable&lt;/strong&gt; – Chunking means the solution works on long transcripts&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Customizable&lt;/strong&gt; – Want 5-sentence summaries or extra metadata? Just tweak the prompt or chunk code node.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  6. How to Use It
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Clone &amp;amp; import the repo:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   git clone https://github.com/arafatruetbd/n8n-transcript-summarizer.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;In n8n:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Workflows → Import from File&lt;/strong&gt;, choose the JSON&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Reconnect your credentials:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Google Drive&lt;/li&gt;
&lt;li&gt;Google Sheets&lt;/li&gt;
&lt;li&gt;OpenRouter or another LLM provider&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;Configure:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Drive folder ID&lt;/li&gt;
&lt;li&gt;Sheet ID &amp;amp; GID&lt;/li&gt;
&lt;li&gt;Model name if needed&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;Activate and test. Upload a transcript to Drive and watch the summary appear in the sheet!&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  7. Customization Ideas
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Add a Slack node&lt;/strong&gt; to post summaries to a channel automatically&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Send email summaries&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Archive transcripts&lt;/strong&gt; after summarizing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use a different LLM&lt;/strong&gt; (e.g., local model or Llama on a self-hosted server)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Include additional metadata&lt;/strong&gt;, like speaker names, timestamps, call duration, etc.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  8. Call to Action
&lt;/h3&gt;

&lt;p&gt;The full workflow and README are on GitHub:&lt;br&gt;
&lt;strong&gt;&lt;a href="https://github.com/arafatruetbd/n8n-transcript-summarizer" rel="noopener noreferrer"&gt;https://github.com/arafatruetbd/n8n-transcript-summarizer&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Feel free to clone it, tweak it, or fork it. I’d love to see what you build on top of it or how you'd improve it—drop a comment, issue, or pull request!&lt;/p&gt;




&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;p&gt;This workflow turns the mundane task of summarizing transcripts into a click-and-go automation powered by n8n and LLMs. Whether you're in research, product, customer support, or content creation—if you want a smarter way to turn transcripts into insight, give this a spin.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>🚀 React 19 – Optimistic UI with `useOptimistic`</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Sat, 16 Aug 2025 23:34:12 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/react-19-optimistic-ui-with-useoptimistic-11mn</link>
      <guid>https://forem.com/arafatruetbd/react-19-optimistic-ui-with-useoptimistic-11mn</guid>
      <description>&lt;p&gt;When you click &lt;strong&gt;Send&lt;/strong&gt; in a chat app, you don’t want to wait for the server to respond before seeing your message appear.&lt;br&gt;
React 19 introduces &lt;strong&gt;&lt;code&gt;useOptimistic&lt;/code&gt;&lt;/strong&gt;, a hook that lets you &lt;strong&gt;update the UI immediately&lt;/strong&gt; while a background action (like sending a message) is in progress.&lt;/p&gt;

&lt;p&gt;This makes apps feel &lt;strong&gt;fast and responsive&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  ✅ What is &lt;code&gt;useOptimistic&lt;/code&gt;?
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;useOptimistic&lt;/code&gt; lets you show a temporary state (optimistic state) while an async action is underway.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Syntax:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;optimisticState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;addOptimistic&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useOptimistic&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;          &lt;span class="c1"&gt;// confirmed state&lt;/span&gt;
  &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;val&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;newState&lt;/span&gt; &lt;span class="c1"&gt;// function to compute optimistic state&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;state&lt;/code&gt; → the confirmed state.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;optimisticState&lt;/code&gt; → what is shown while the async action runs.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;addOptimistic(val)&lt;/code&gt; → call this to update the UI optimistically.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🔥 Simple Chat Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useOptimistic&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;startTransition&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setMessages&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;([]);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;optimisticMessages&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;addMessage&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useOptimistic&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;newMsg&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;newMsg&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;sending&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}]&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;handleSend&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;addMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// show instantly&lt;/span&gt;

    &lt;span class="nf"&gt;startTransition&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// fake API&lt;/span&gt;
      &lt;span class="nf"&gt;setMessages&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;prev&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt; &lt;span class="p"&gt;}]);&lt;/span&gt; &lt;span class="c1"&gt;// confirm&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2rem&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;fontFamily&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sans-serif&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Chat&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;ul&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;optimisticMessages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;m&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;li&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;m&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;m&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sending&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;(Sending...)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
          &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;li&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;ul&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;handleSend&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Send Message&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🧠 How it works
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;addMessage("Hello!")&lt;/code&gt; → immediately shows the message in the UI with &lt;code&gt;(Sending…)&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;startTransition&lt;/code&gt; → simulates sending the message in the background.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;setMessages&lt;/code&gt; → confirms the message once the async task finishes.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  🎯 Why use &lt;code&gt;useOptimistic&lt;/code&gt;?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Makes UI &lt;strong&gt;feel instant&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Great for likes, comments, forms, or chat messages.&lt;/li&gt;
&lt;li&gt;Users see immediate feedback &lt;strong&gt;even if the server is slow&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;This small hook makes your React apps &lt;strong&gt;snappy and responsive&lt;/strong&gt; with &lt;strong&gt;minimal code&lt;/strong&gt;.&lt;/p&gt;




</description>
    </item>
    <item>
      <title>Smooth UI Updates in React 19 with `useTransition`: A Simple Example</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Tue, 12 Aug 2025 19:13:59 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/smooth-ui-updates-in-react-19-with-usetransition-a-simple-example-4ild</link>
      <guid>https://forem.com/arafatruetbd/smooth-ui-updates-in-react-19-with-usetransition-a-simple-example-4ild</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Context&lt;/strong&gt;: React 19 introduced built-in support for async functions inside transitions, enabling automatic handling of loading states, errors, and form submissions by leveraging the &lt;code&gt;useTransition&lt;/code&gt; hook.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Why it matters&lt;/strong&gt;: This feature dramatically reduces boilerplate and helps your app remain responsive during asynchronous updates.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Quick Explanation of &lt;code&gt;useTransition&lt;/code&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;useTransition&lt;/code&gt; returns a tuple:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;startTransition&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useTransition&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;startTransition&lt;/code&gt;: wrap your state updates to mark them as &lt;em&gt;low-priority (transitional)&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;isPending&lt;/code&gt;: a boolean indicating when the transition is in progress, perfect for showing a loader&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Core Example: Updating a Profile
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useTransition&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setName&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setMessage&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;startTransition&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useTransition&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;updateName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newName&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Simulate an async API call&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newName&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trim&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Name cannot be empty&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1500&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleSubmit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// clear old message&lt;/span&gt;
    &lt;span class="nf"&gt;startTransition&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;updateName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nf"&gt;setMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="nf"&gt;setMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`✅ Name saved: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2rem&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;fontFamily&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sans-serif&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;React 19 – useTransition Demo&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt;
        &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="na"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="na"&gt;placeholder&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Enter your name"&lt;/span&gt;
        &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;0.5rem&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;marginRight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;0.5rem&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleSubmit&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;disabled&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;isPending&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Saving...&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Save&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;How it works&lt;/strong&gt;:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;As soon as &lt;code&gt;startTransition&lt;/code&gt; is called, &lt;code&gt;isPending&lt;/code&gt; becomes &lt;code&gt;true&lt;/code&gt; → you can disable the button and show a “Saving…” state.&lt;/li&gt;
&lt;li&gt;The async logic runs inside the transition.&lt;/li&gt;
&lt;li&gt;Once complete, &lt;code&gt;isPending&lt;/code&gt; returns to &lt;code&gt;false&lt;/code&gt;, and the UI responds accordingly.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  What Makes This Cleaner Than Before?
&lt;/h2&gt;

&lt;p&gt;Before React 19, you’d manage &lt;code&gt;isPending&lt;/code&gt;, &lt;code&gt;error&lt;/code&gt;, and redirection manually via &lt;code&gt;useState&lt;/code&gt;. Now, &lt;code&gt;useTransition&lt;/code&gt; wraps it all smartly, letting you focus on what matters—just the logic, without UI stutter.&lt;/p&gt;




&lt;h2&gt;
  
  
  Wrap-Up &amp;amp; React 19 Context
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;In React 19, &lt;code&gt;useTransition&lt;/code&gt; now supports async logic inside transitions, simplifying UX patterns like pending states, error handling, and optimistic updates.&lt;/li&gt;
&lt;li&gt;These improvements reduce boilerplate and elevate app responsiveness.&lt;/li&gt;
&lt;/ul&gt;




</description>
    </item>
    <item>
      <title>How I Accidentally Pushed Extra Folders to GitHub — And How to Fix It</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Wed, 23 Jul 2025 00:04:08 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-i-accidentally-pushed-extra-folders-to-github-and-how-to-fix-it-1dje</link>
      <guid>https://forem.com/arafatruetbd/how-i-accidentally-pushed-extra-folders-to-github-and-how-to-fix-it-1dje</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;If you've ever worked with Git repositories, you might have experienced an odd situation where you pushed your code to GitHub — only to realize that not just your intended project folder got uploaded, but some unexpected folders or files appeared too.&lt;/p&gt;

&lt;p&gt;This usually happens because of a confusion about where your Git repository is actually initialized (the “Git root”) versus where your project folder lives on your computer.&lt;/p&gt;

&lt;p&gt;In this blog post, I’ll share my experience with this issue, how I diagnosed it, and the steps I took to fix it, so you can avoid this headache.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem: Extra Folders Uploaded Alongside Your Project
&lt;/h2&gt;

&lt;p&gt;I was working on a project called &lt;code&gt;job_email_classifier&lt;/code&gt; inside a directory called &lt;code&gt;MISC&lt;/code&gt;. I thought I was pushing only the &lt;code&gt;job_email_classifier&lt;/code&gt; folder to GitHub.&lt;/p&gt;

&lt;p&gt;But when I checked the remote repository, I noticed &lt;strong&gt;another unrelated folder inside &lt;code&gt;MISC&lt;/code&gt; was also uploaded!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;How did this happen?&lt;/p&gt;




&lt;h2&gt;
  
  
  Diagnosing the Issue: Understanding Your Git Root
&lt;/h2&gt;

&lt;p&gt;The key to solving this problem is to understand that Git tracks files starting from a &lt;strong&gt;repository root folder&lt;/strong&gt; — the folder where you run &lt;code&gt;git init&lt;/code&gt; or clone a repo.&lt;/p&gt;

&lt;p&gt;I ran this command inside my &lt;code&gt;job_email_classifier&lt;/code&gt; folder:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git rev-parse &lt;span class="nt"&gt;--show-toplevel&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It returned:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;C:/Users/arafa/projects/MISC
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This meant the &lt;strong&gt;actual Git root was the &lt;code&gt;MISC&lt;/code&gt; folder,&lt;/strong&gt; not &lt;code&gt;job_email_classifier&lt;/code&gt;!&lt;/p&gt;

&lt;p&gt;All files and folders under &lt;code&gt;MISC&lt;/code&gt; are part of the same Git repository, so when I pushed changes, everything under &lt;code&gt;MISC&lt;/code&gt; (including other unrelated folders) got pushed to GitHub.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Did This Happen?
&lt;/h2&gt;

&lt;p&gt;Probably, I ran &lt;code&gt;git init&lt;/code&gt; in the &lt;code&gt;MISC&lt;/code&gt; folder earlier, making it the root of my Git repository.&lt;/p&gt;

&lt;p&gt;Even though I worked inside &lt;code&gt;job_email_classifier&lt;/code&gt;, Git sees it as a subfolder within the repo, and tracks all siblings alongside it.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Solution: Create a Git Repo Only in Your Project Folder
&lt;/h2&gt;

&lt;p&gt;To fix this, I wanted &lt;strong&gt;only the &lt;code&gt;job_email_classifier&lt;/code&gt; folder&lt;/strong&gt; to be a Git repository.&lt;/p&gt;

&lt;h3&gt;
  
  
  Steps I followed:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Remove the old Git repo initialized at &lt;code&gt;MISC&lt;/code&gt;:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;C:/Users/arafa/projects/MISC
&lt;span class="nb"&gt;rm&lt;/span&gt; &lt;span class="nt"&gt;-rf&lt;/span&gt; .git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;On Windows PowerShell, you can use:&lt;/p&gt;


&lt;pre class="highlight powershell"&gt;&lt;code&gt;&lt;span class="n"&gt;Remove-Item&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;-Recurse&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;-Force&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;git&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/blockquote&gt;

&lt;p&gt;This deletes the Git tracking data for &lt;code&gt;MISC&lt;/code&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Go into the project folder and initialize a new Git repo there:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;job_email_classifier
git init
git add &lt;span class="nb"&gt;.&lt;/span&gt;
git commit &lt;span class="nt"&gt;-m&lt;/span&gt; &lt;span class="s2"&gt;"Initial commit"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Add the remote GitHub repository:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git remote add origin https://github.com/arafatruetbd/job_email_classifier.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Push the project to GitHub:&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git push &lt;span class="nt"&gt;-u&lt;/span&gt; origin main
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Verifying Your Git Repository Root
&lt;/h2&gt;

&lt;p&gt;To avoid confusion in the future, you can always check your Git root folder by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git rev-parse &lt;span class="nt"&gt;--show-toplevel&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Make sure it points to your intended project folder before pushing changes.&lt;/p&gt;




&lt;h2&gt;
  
  
  Best Practices to Avoid This Issue
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Always &lt;strong&gt;initialize your Git repository inside the specific project folder&lt;/strong&gt;, not a parent folder that contains multiple projects.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;.gitignore&lt;/code&gt; to exclude files or folders you don't want to push.&lt;/li&gt;
&lt;li&gt;Regularly check your repo root with &lt;code&gt;git rev-parse --show-toplevel&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;git status&lt;/code&gt; to review what files are staged or tracked before committing.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Git is a powerful tool, but understanding how the repository root works is crucial to avoid pushing unintended files or folders.&lt;/p&gt;

&lt;p&gt;By keeping your repository initialized only in the folder you want to track, you prevent accidentally including unrelated files.&lt;/p&gt;

&lt;p&gt;I hope this story helps you troubleshoot and fix similar issues in your Git workflow!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to Import a SQL File into a Dockerized PostgreSQL Database</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Sun, 01 Jun 2025 12:22:28 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-to-import-a-sql-file-into-a-dockerized-postgresql-database-1g2j</link>
      <guid>https://forem.com/arafatruetbd/how-to-import-a-sql-file-into-a-dockerized-postgresql-database-1g2j</guid>
      <description>&lt;p&gt;If you’re running PostgreSQL inside a Docker container, importing a SQL dump file is a common task when setting up or migrating databases. In this quick guide, I’ll show you how to copy your SQL file into the container and import it easily.&lt;/p&gt;




&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A running PostgreSQL container (e.g., named &lt;code&gt;demo_db&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Your SQL dump file ready on your host machine (e.g., &lt;code&gt;demo.sql&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Basic knowledge of Docker commands&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Step 1: (Optional) Create the Database
&lt;/h3&gt;

&lt;p&gt;Before importing, make sure your target database exists. If not, create it using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; demo_db psql &lt;span class="nt"&gt;-U&lt;/span&gt; postgres &lt;span class="nt"&gt;-c&lt;/span&gt; &lt;span class="s2"&gt;"CREATE DATABASE demo_database;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Step 2: Copy the SQL file into the container
&lt;/h3&gt;

&lt;p&gt;Use the &lt;code&gt;docker cp&lt;/code&gt; command to copy the SQL file from your local machine into the PostgreSQL container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;cp &lt;/span&gt;demo.sql demo_db:/demo.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This copies the file to the root directory &lt;code&gt;/&lt;/code&gt; inside the container.&lt;/p&gt;




&lt;h3&gt;
  
  
  Step 3: Import the SQL file into the database
&lt;/h3&gt;

&lt;p&gt;Run the &lt;code&gt;psql&lt;/code&gt; command inside the container to execute the SQL file against your target database:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-i&lt;/span&gt; demo_db psql &lt;span class="nt"&gt;-U&lt;/span&gt; postgres &lt;span class="nt"&gt;-d&lt;/span&gt; demo_database &lt;span class="nt"&gt;-f&lt;/span&gt; /demo.sql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;demo_db&lt;/code&gt; is the container name.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;postgres&lt;/code&gt; is the PostgreSQL user.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;demo_database&lt;/code&gt; is your database name.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-f /demo.sql&lt;/code&gt; points to the SQL file inside the container.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Troubleshooting tips
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Ensure your container is running (&lt;code&gt;docker ps&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;Verify database name and user credentials.&lt;/li&gt;
&lt;li&gt;Large files might take time, so be patient.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Importing SQL files into a Dockerized PostgreSQL database is straightforward once you get familiar with the commands. Using &lt;code&gt;docker cp&lt;/code&gt; and &lt;code&gt;docker exec&lt;/code&gt;, you can easily manage your database dumps without leaving your containerized environment.&lt;/p&gt;




&lt;p&gt;If you found this helpful, feel free to clap and follow for more Docker and database tips!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to Copy Files from AWS EC2 to Windows Using SCP</title>
      <dc:creator>arafatruetbd</dc:creator>
      <pubDate>Sun, 01 Jun 2025 12:03:19 +0000</pubDate>
      <link>https://forem.com/arafatruetbd/how-to-copy-files-from-aws-ec2-to-windows-using-scp-5dp1</link>
      <guid>https://forem.com/arafatruetbd/how-to-copy-files-from-aws-ec2-to-windows-using-scp-5dp1</guid>
      <description>&lt;p&gt;If you’ve been working with AWS EC2 instances, you might often need to transfer files from your Linux-based EC2 instance to your local Windows machine. For example, you might want to download a database dump, logs, or any project files.&lt;/p&gt;

&lt;p&gt;In this post, I’ll show you simple and effective way to copy files from your AWS EC2 instance to Windows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using the command-line tool &lt;strong&gt;&lt;code&gt;scp&lt;/code&gt;&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;An AWS EC2 instance running Linux (like Ubuntu)&lt;/li&gt;
&lt;li&gt;Your EC2 private key file (&lt;code&gt;.pem&lt;/code&gt; file) downloaded from AWS&lt;/li&gt;
&lt;li&gt;The public IP address or DNS of your EC2 instance&lt;/li&gt;
&lt;li&gt;Basic knowledge of using terminal on Windows&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Using SCP from Windows Terminal or PowerShell
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;scp&lt;/code&gt; (secure copy) allows you to securely copy files between a remote server and your local machine.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Open PowerShell or Command Prompt
&lt;/h3&gt;

&lt;p&gt;Windows 10 and 11 come with OpenSSH client installed by default, which includes the &lt;code&gt;scp&lt;/code&gt; command. If you don’t have it, you can install it from Windows Features.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Run the &lt;code&gt;scp&lt;/code&gt; command
&lt;/h3&gt;

&lt;p&gt;Use the following syntax to copy your file from EC2:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;scp &lt;span class="nt"&gt;-i&lt;/span&gt; C:&lt;span class="se"&gt;\p&lt;/span&gt;ath&lt;span class="se"&gt;\t&lt;/span&gt;o&lt;span class="se"&gt;\y&lt;/span&gt;our-key.pem ubuntu@&amp;lt;EC2-IP&amp;gt;:/home/ubuntu/demo.sql C:&lt;span class="se"&gt;\p&lt;/span&gt;ath&lt;span class="se"&gt;\t&lt;/span&gt;o&lt;span class="se"&gt;\s&lt;/span&gt;ave&lt;span class="se"&gt;\&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Replace &lt;code&gt;C:\path\to\your-key.pem&lt;/code&gt; with the full path to your &lt;code&gt;.pem&lt;/code&gt; file.&lt;/li&gt;
&lt;li&gt;Replace &lt;code&gt;&amp;lt;EC2-IP&amp;gt;&lt;/code&gt; with your EC2 instance’s public IP or DNS.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/home/ubuntu/demo.sql&lt;/code&gt; is the path to the file on the EC2 server.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;C:\path\to\save\&lt;/code&gt; is the destination folder on your Windows PC.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;scp &lt;span class="nt"&gt;-i&lt;/span&gt; C:&lt;span class="se"&gt;\U&lt;/span&gt;sers&lt;span class="se"&gt;\Y&lt;/span&gt;ourUser&lt;span class="se"&gt;\D&lt;/span&gt;ownloads&lt;span class="se"&gt;\m&lt;/span&gt;ykey.pem ubuntu@18.222.33.44:/home/ubuntu/demo.sql C:&lt;span class="se"&gt;\U&lt;/span&gt;sers&lt;span class="se"&gt;\Y&lt;/span&gt;ourUser&lt;span class="se"&gt;\D&lt;/span&gt;esktop&lt;span class="se"&gt;\&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will get the file copied directly to your desktop.&lt;/p&gt;




&lt;h2&gt;
  
  
  Troubleshooting Tips
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Make sure your EC2 security group allows &lt;strong&gt;SSH (port 22)&lt;/strong&gt; from your IP.&lt;/li&gt;
&lt;li&gt;Your &lt;code&gt;.pem&lt;/code&gt; file permissions should be secure (e.g., &lt;code&gt;chmod 400&lt;/code&gt; on Linux/macOS). On Windows, just keep it safe.&lt;/li&gt;
&lt;li&gt;Use the correct username: most Ubuntu EC2 instances use &lt;code&gt;ubuntu&lt;/code&gt;, Amazon Linux uses &lt;code&gt;ec2-user&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Transferring files between AWS EC2 and Windows is straightforward once you know the tools. Use &lt;code&gt;scp&lt;/code&gt; for quick command-line transfers. This Method relies on SSH, which ensures secure and encrypted file transfers.&lt;/p&gt;

&lt;p&gt;Happy coding and cloud managing! 🚀&lt;/p&gt;




&lt;p&gt;If you liked this guide or want me to cover more AWS and Docker tips, follow me for updates!&lt;/p&gt;




</description>
    </item>
  </channel>
</rss>
