Google Antigravity: The Death of the Typist and the Birth of the Architect

Why I ditched my perfect VS Code setup for the Agentic future — and why I still refuse to let AI do my debugging.

If you’ve written code in the last decade, you know the feeling of Gravity.

Gravity is the weight of npm install errors. It’s the context-switching between your editor, your terminal, and Stack Overflow. It is the friction that keeps your brilliant startup idea from becoming a deployed reality.

In late 2025, Google introduced Antigravity, an AI-first IDE or ADE (Agentic Development Environment) that promises to eliminate that friction.

For the New Developer, it’s a superpower. For the Vibe Coder, it’s a dream workflow. But for me, it was a massive shift in perspective.

Here is why I moved on from the VS Code + Copilot, and how to survive the era of Agentic Development.

The Pivot: Leaving the “My Personal Best” Tool Behind

Before Antigravity dropped, I had already been through the wringer of AI tools.

I started with Cursor, chasing the promise of “too fast” development to escape the tedious loop of copying and pasting code from LLM chats into my editor. It was impressive, but eventually, I settled back into VS Code paired with Copilot.

For the free and low-cost tiers, I was convinced I had reached the peak of developer productivity. It was the ultimate “Vibe Coding” setup for me — snappy, telepathic autocomplete, and an unbeatable ecosystem. I honestly didn’t think I needed anything else.

But when I heard the buzz about “Agentic Development Environments,” I decided to test Google Antigravity.

It literally changed the complete scene.

Antigravity gives you that familiar, tactile comfort of VS Code and the helpful nudges of Copilot, but it layers on something entirely new: Deep integration with the Model Context Protocol (MCP) and true agentic code editing.

It isn’t just suggesting lines anymore; it is understanding the entire architecture. However, as powerful as this beast is, I found that to truly master it, you have to draw a line in the sand.

My “Manual Debugging” Rule

Here is where my workflow differs from the demos. Antigravity can fix bugs for you. It can read the error log, analyse the flow, and patch the code in seconds.

But I don’t let it.

I treat debugging as my personal gym time. It is my strict personal choice for learning and understanding the flow of the application. If I let the Agent fix every error, I become a passenger. By forcing myself to debug the complex issues manually, I maintain deep mental maps of the code while the Agent handles the boilerplate.

The Core Concept: From “Copilot” to “Antigravity”

To understand why this shift feels so drastic, you have to unlearn the Copilot mental model.

Tools like GitHub Copilot started as autocomplete on steroids. They live inside your text editor, guessing your next line. You are still the driver; they are just passing you snacks.

P.S. — I know the new updates to Copilot have introduced agentic capabilities and new LLM support, but those often hide behind high-cost paid tiers. Antigravity brings this power to the forefront differently.

Google Antigravity is different. It doesn’t want to drive. It wants to be the crew.

Antigravity isn’t just a fork of VS Code; it is a powerhouse pack of MCP (Model Context Protocol) tools, multiple agentic support systems, and the ability to create your own workflows. It offers a “Review-Based Agentic Control” system that fundamentally changes how software gets built.

How It Works (The “Vibe” Loop)

1. The Architect (You): You define the intent in natural language. Build a React dashboard that tracks crypto prices.
2. The Mission Control: You assign this task to an Agent (powered by Gemini 3 Pro).
3. The Execution: The Agent doesn’t just spit out code. It:

• Plans: Creates a TODO.md of steps and Implementation Plan.md.
• Acts: Writes the code, creates the files, and installs the dependencies.
• Verifies: Opens a headless browser and takes a screenshot to prove it works.

The Trap: Don’t Fall into “YOLO Mode”

Vibe Coding is fast, fun, and creative. It is also dangerous.

We’ve all seen the horror stories of unchecked Agents deleting directories or pushing broken code. Because Antigravity feels so capable, it’s tempting to just click Approve All.

Do not do this.

Take it from my experience: The Agent is the builder, but you must be the inspector.

The Antigravity Safety Protocol

• Don’t trust the green checkmark. Look at the artefacts in TODO.md and Implementation Plan.md.
• Sandboxing is mandatory. Never run agents on your root OS without permission barriers.
• Keep Debugging. As I mentioned, if you stop debugging, you stop understanding. Use the Agent to build, but use your brain to fix.

The Verdict

Google Antigravity proves that the future of coding isn’t about typing syntax; it’s about System Design and Curating.

It managed to pull me away from my beloved VS Code + Copilot setup not by being a better text editor, but by being a better thinker. It’s a powerhouse of MCP tools and agentic workflows that feels like the natural evolution of development.

But remember my rule: Stop typing. Start directing. But for your own sake, keep debugging.

Use the Agent to build the structure, but use your own brain to understand the flow. Read the Implementation.md. Review the plans. Don't let the magic make you complacent.

Coming Up Next…

This article is Part 1 of my new series: “How Google Quietly Changes the Way We Live.”

We’ve covered how Google is rewriting the rules of work for developers. But what about the rest of our lives?

In Part 2, we move from theory to practice. I will show you how to effectively use Antigravity to build a real-world application from scratch. We’ll go deep into the workflow, covering the exact prompts, the agent configurations, and the step-by-step process of shipping a live app while keeping the code clean and manageable.

Thanks for reading!

Wait a second. We are going to get our hands dirty in Part 2. To follow along with the code, make sure you follow and enable Email Notifications so you don’t miss the alert.

Let’s build this together: I want to tailor the next guide to your interests. Tell me in the comments: What app should we build next?

My designer friend sends me a Figma link with a comment, “Thoughts?” I open it, stare at gradients and spacing, and think… I have no idea if this is good or bad. That’s when I realised — if I’m going to ship products people actually want to use, I need to at least understand what good design looks like.

So I did what any self-taught developer does: I started collecting bookmarks. Lots of them. And honestly? Diving into the design world has been one of the most eye-opening experiences of my career.

Here’s my curated list of design inspiration resources, explained backend-dev style — no fluff, just what each one actually does and when you should use it.

Inspirational Sources— Should be Bookmarked-

Awwwards — The Olympics of Web Design

If design inspiration sites were GitHub stars, Awwwards would be the projects with 100k+ stars and active maintenance.

A platform that showcases and awards the best-designed websites on the internet. Think of it as the Nobel Prize for web design.

Every site here has been judged by actual professionals on design, usability, creativity, and content. No mediocre Bootstrap templates here. When I need to show stakeholders this is what’s possible, I pull up Awwwards.

My perspective —

It’s like reading well-architected systems documentation, but for visual interfaces. You see not just what looks good, but why it works.

Landbook — Landing Pages, Sorted

A curated gallery of landing pages. Clean, simple, searchable.

I was building a landing page for a side project and had zero clue where to start. Landbook lets me filter by category and color scheme. Within 15 minutes, I had a solid mental model of what SaaS landing pages actually look like.

My perspective —

Think of it as a design pattern library, but for entire pages instead of code structures.

Landingfolio — Landbook’s Cousin with Extras

Another landing page gallery, but with more detailed breakdowns and the ability to extract colour palettes.

Landingfolio feels more educational. It’s not just here’s a pretty page — it’s here’s a pretty page, and here’s the color scheme they used, and here’s how the layout works.

Saaspo — For My Fellow SaaS Builders

Design inspiration specifically for SaaS products. Homepages, pricing pages, dashboards — it’s all here.

It’s in my daily rotation: Because B2B SaaS design is different. Consumer apps can be flashy; enterprise software needs to feel professional, trustworthy, and clear. Saaspo gets it.

If you’re building anything with a subscription model, this should be bookmarked.

Dark Mode Design — Because Dark Mode is Not Optional Anymore

Exactly what it sounds like — a showcase of websites that nail dark mode.

It exists: Because implementing dark mode is harder than just inverting colors (I learned this the hard way). Proper contrast, readable text, avoiding eye strain — it’s a whole thing.

Use it: Before implementing dark mode in your project. Study these examples, understand the patterns, then code.

Mobbin — The Mobile Design Encyclopedia

A massive library of mobile app screenshots, organised by user flows and patterns.

The “aha” moment: I was building a mobile app and needed to design an onboarding flow. Instead of reinventing the wheel, I searched Mobbin for “onboarding,” saw how 50+ successful apps handled it, and identified the common patterns.

Anytime you’re working on mobile. Navigation patterns, form layouts, loading states — it’s all searchable.

UI Sources — Component-Level Thinking

A breakdown of individual UI components. Buttons, forms, cards, navigation bars — isolated and categorised.

This site speaks our language. Instead of I need to make this page look good, it’s I need a good search input design

When building component libraries or design systems. It helps me understand what makes a button feel premium vs. basic.

UX Archive — User Flow Documentation

Complete user flows with screenshots. Think about how Airbnb handle password reset or what Uber’s checkout process is.

It’s educational. You see not just individual screens, but entire journeys. How do users move from A to B to C?

It’s like reading integration documentation that actually shows you the full API flow with examples.

When designing anything with multiple steps. Signups, checkouts, onboarding — study the patterns here first.

Dribbble — Where Designers Show Off

A community where designers post individual “shots” of their work. Think Instagram but for design.

It’s inspiring but can be intimidating. Some of this stuff is so polished it feels unattainable. That’s okay — use it to understand trends and see what’s possible, not to feel inadequate.

Micro-interactions matter. Those little animations and hover effects? They’re not just decorative — they make interfaces feel alive.

Behance — Full Project Case Studies

What it is: Adobe’s showcase platform. Unlike Dribbble’s individual shots, Behance shows complete projects with process documentation.

You see the why behind decisions. Mood boards, iterations, failed attempts — it’s the whole story.

It’s like technical blog posts that show not just the final solution but the journey of getting there.

Pafolios — Modern Portfolio Showcase

A newer platform showcasing designer and developer portfolios with integrated professional profiles.

It’s more contextual. You see the work and understand who made it and why.

When I’m working on my own portfolio, or want to see how professionals present their work.

Layers — Design with Editorial Context

Design showcase plus articles, podcasts, and interviews.

Sometimes you need more than just visual inspiration — you need to understand the thinking behind it.

When you have time to actually learn, not just quickly grab inspiration.

One sure-fire way to stay creative: force yourself to learn something new.

Harvey Mackay

The Uncomfortable Truth Nobody Talks About

Here’s what I wish someone had told me when I started:

Looking at beautiful designs won’t make you a designer. I spent days bookmarking inspiration, thinking I was learning. I wasn’t. You actually have to try to design things, or clone the best work, fail, iterate, and fail again.

These resources are tools, not shortcuts. They help you understand what good looks like, but you still have to do the work.

Also: Don’t try to copy what you see. These sites show you what’s possible, but your project has different constraints, different users, different goals. Learn the principles, then apply them thoughtfully.

My Personal Recommendations

Just starting?

• Bookmark Awwwards (aspirational)
• Use Landbook or Landingfolio (practical)
• Check Mobbin if you’re doing mobile

Working on a real project?

• Start with the specialised tool for your use case (Saaspo for SaaS, Mobbin for mobile, etc.)
• Use UI Sources for component details
• Reference the UX Archive for flows

Want to level up?

• Subscribe to design newsletters from these platforms
• Actually practice designing things
• Study the why on Behance and Layers

Working on a team?

• Share these resources during planning
• Use them to align on expectations
• Reference them when giving feedback (Can we try something like this example from Awwwards?)

Final Thoughts

Look, I’m still that backend developer who gets more excited about database optimisation than color theory. That hasn’t changed. But 2026 has become my year of deliberately stepping into discomfort.

First, it was diving deep into package managers (npm, pnpm, yarn, bun — that whole rabbit hole). Now it’s designed. What’s next? Who knows. But here’s what I’m learning: the stuff that makes you uncomfortable is usually the stuff that makes you more valuable.

Understanding design isn’t just about making things pretty (though that’s nice too). It’s about:

• Finally understanding why designers push back on my quick backend changes
• Realising that API design and UI design follow similar principles (consistency, clarity, predictability)
• Shipping features that users actually want to use, not just features that technically work
• Having actual productive conversations in design reviews instead of just nodding along

These twelve resources? They’re not just bookmarks collecting digital dust. They’re my bridge between the comfortable world of APIs and databases to the slightly terrifying world of visual hierarchies and user flows. I visit them weekly. They’ve genuinely changed how I approach building products.

Whether you’re trying to level up, survive at a startup where full-stack really means do everything, or just understand what your designer colleagues are talking about in standups, start with these sites. Learn the uncomfortable things. That’s where growth lives.

Drop a comment below:

What skill are you learning in 2026? And for the design-savvy devs out there — which of these sites am I sleeping on? What should I add to my workflow?

P.S. — If you found this helpful, you might want to check out my other posts.

Follow me on Medium | Connect on LinkedIn | Twitter/X for real-time “today I learned” moments and the occasional debugging rant.

It’s January 2026, and I’m confessing: after working on 3+ frontend projects, I still feel like I’m terrible at frontend. My creativity? Let’s say my designs look like they’re stuck in 2018. But here’s the thing — thanks to my self-learning habit and AI, I’ve learned how to play with and debug HTML and JS code well enough to survive.

This New Year, I took a resolution: to upskill my frontend skills to match my backend skills.

We’ve all heard about JavaScript, its big brother, TypeScript, trending frameworks like React, Next.js, Vue.js, and the god of them all — Node.js, Bun and Deno. But as a backend developer, I never really deep-dived into these topics. And that includes something I use almost every day but never questioned: package managers.

npm, pnpm, Yarn, Bun — I always just ran whatever command the README told me to. But what’s the actual difference? Which one should I use? And why does it even matter?

Let me break it down, backend-dev to backend-dev style.

Why I Finally Started Caring About Package Managers?

Okay, real talk. I was living my best backend life, completely ignoring the package manager drama… until I saw the news:

Anthropic (Claude’s parent company) acquires Bun! 🔥

Wait, what? An AI company buying a JavaScript runtime? That’s when it hit me — if the people building AI think package managers matter enough to drop millions on one, maybe I should stop treating npm install like a magic spell I blindly copy-paste from Stack Overflow.

Look, for the longest time, I genuinely didn’t care. Someone says npm install? Cool. yarn add Sure thing. pnpm install Whatever you say. I was that developer who would literally use ANY package manager as long as the README had copy-pasteable commands.

But then reality slapped me in the face when I started building real projects: # no-bluff

• Install times that make you question your life choices — I once went to make coffee during npm install, came back, made another coffee, and it was still installing. At that point, I was reconsidering my entire career path.
• Disk space disappearing faster than my motivation on Monday mornings — My laptop started crying. Seriously. I had projects, each with its own space node_modules folder. That’s like… does math… a lot of unnecessary node_modules.
• Different team members using different package managers — Picture this: Dev A uses npm, Dev B uses yarn, Dev C is the cool kid using pnpm, and Dev D just discovered Bun and won’t shut up about it. Our lock files looked like a family reunion gone wrong.

Then I saw the Bun acquisition news and thought, Maybe I should actually understand what I’m doing instead of just vibing through package installations.

So here are my Learnings.

Here is a short and sweet Comparison

The Speed Test

I tested all four on the same Next.js project (around 100 dependencies):

# testing

• npm: ~45 seconds (cold install)
• Yarn: ~30 seconds
• pnpm: ~20 seconds
• Bun: ~8 seconds 🤯

Your results will vary, but the pattern holds: Bun is blazing fast, pnpm is impressively quick, Yarn is decent, and npm is… well, npm.

But still, the question is what and why the big AI company Acquire Bun is only a package manager, right? Answer is: No!

Okay, so we talked about package managers, but here’s where it gets interesting: Bun isn’t just a package manager — it’s a whole runtime. And if you’re going down the frontend rabbit hole like me, you need to know about the runtime wars happening right now.

The Three Contenders

Think of it like this: if JavaScript runtimes were fighting game characters:

Node.js = The veteran fighter. Slow but reliable. Everyone knows their moves. Been in the game since 2009.

Deno = The security expert. Came back to fix their own mistakes (created by the same person who made Node.js). Has trust issues, but for good reasons.

Bun = The speedster. New kid who shows up and beats everyone in under 8 seconds. Written in a language called Zig (yes, like the cigarette papers, but cooler).

The Real Differences

Speed/Performance:

• Node.js: Standard performance with proven stability
• Deno: Notably faster startup times than Node.js
• Bun: Industry-leading speed with up to 4x faster startup and 30x faster package installations

TypeScript Support:

• Node.js: Requires additional tooling and configuration (ts-node or experimental flags)
• Deno: Native TypeScript support built in with zero configuration
• Bun: Native TypeScript transpiler included, handles .ts and .tsx files instantly

Security Model:

• Node.js: Open by default — scripts have full system access without restrictions
• Deno: Secure by default — requires explicit permission flags like --allow-read and --allow-net for file or network access
• Bun: Similar to Node.js — open access model without strict permission controls

Ecosystem & Compatibility:

• Node.js: Mature ecosystem with the largest collection of packages and libraries
• Deno: Initially used URL imports, but Deno 2.0 now offers full backward compatibility with Node.js and npm packages
• Bun: Designed as a drop-in Node.js replacement, supporting most Node APIs and npm packages

Here’s the Kicker: Bun is ALL-IN-ONE

Remember how I complained about having npm, Jest, Webpack, dotenv, nodemon, and 47 other tools installed?

Bun said, “nah.”

Bun includes:

• Package manager (faster than npm)
• Test runner (Jest-compatible but faster)
• Bundler (no more Webpack configs)
• TypeScript transpiler (no more tsconfig headaches)
• All in ONE binary

It’s like someone finally said,

Why do we need 15 tools to run JavaScript, and actually do something about it?

My True and Final Take —

Here’s my honest take after experimenting with all of them:

Starting? Stick with npm. It’s the default; every tutorial uses it, and you won’t get confused.

Working on real projects? Switch to pnpm. The speed and disk savings are worth it, and it’ll force you to understand dependencies better.

Want to experiment? Try Bun. It’s genuinely impressive and fun to play with.

Team project? Use whatever your team uses. Don’t be that person who forces everyone to switch package managers mid-project.

Resources I’m Using for My Frontend Journey

• https://roadmap.sh/frontend
• The Odin Project
• NotebookLm

What package manager do you use? What’s been your biggest learning point? Drop a comment below.

Thank You for Reading !

Happy New Year 🎊

My Struggle as a Freelancer and Self-Taught Learner

I used to feel like I was always running out of time. My daily breakdown looked like this:

• Social media (research, writing, outreach): 4 hours
• Freelance client work (websites, requirements): 6 hours
• Personal project: 2 hours
• Self-learning: only 2 hours

That meant almost 12 hours of output — but very little growth.

I was busy, not productive.

How AI Changed the Game

Instead of trying to do everything manually, I started using AI as a productivity stack. The goal wasn’t to outsource my creativity, but to automate repetitive parts so I could focus on high-value work.

Here’s how my day shifted after adopting AI tools:

1. Social media research & content strategy 0.5 hr from 2 hrs, time saved 1.5 hrs
2. Writing & editing content 1 hr from 2 hrs time saved 1 hr
3. Freelance client work (coding, briefs, reporting) 3.5 hrs from 6 hrs time saved 2.5 hrs

Total saved — — ≈5 hrs/day

I now invest those extra hours into self-learning, portfolio projects, and better client communication.

The AI Workflow That Saved Me 5 Hours Daily

1. Market Research & Content Strategy — NotebookLM + BuzzSumo

Instead of scanning endless articles, I upload resources into NotebookLM. It summarizes insights, highlights trends, and even suggests headlines. Paired with BuzzSumo or KeywordTool.io, I now get high-signal ideas in 20 minutes.

2. Writing Content Faster — ChatGPT + GrammarlyGO + Quillbot

Blank pages used to paralyze me.

Now:

ChatGPT drafts outlines, hooks, and first drafts. GrammarlyGO polishes tone. Quillbot refines flow without losing my voice.

I keep my storytelling intact while AI removes the heavy lifting.

3. Freelance Work & Coding — Claude + GitHub Copilot + Google Studio

My biggest time sink was client work.

Now:

Claude breaks long client briefs into actionable steps. GitHub Copilot suggests code snippets, speeds up testing, and removes boilerplate. Google Studio quickly generates dashboards and visual reports.

That cut my project work from 6 hours → 3.5 hours.

4. Design & Social Media Posts — Canva AI

Instead of designing from scratch, I feed ChatGPT-generated text into Canva AI templates for quick carousels and infographics. Then I schedule everything via Buffer or Hootsuite.

Lessons I Learned About Using AI Smartly

AI is a time multiplier, not a replacement for creativity.

Always personalize AI output with your unique voice and stories. Use the right AI for the right task: research, writing, coding, design — don’t expect one tool to do it all.

Recommended Tools to Try

These are the tools I use and recommend

• NotebookLM — AI research notebook for faster strategy.
• ChatGPT — my go-to for outlines and drafts.
• Claude — perfect for breaking down complex briefs.
• GitHub Copilot — coding assistant for faster feature delivery.
• Google Studio — easy dashboards & reporting.
• GrammarlyGO — polish tone & clarity.
• Quillbot — refine and rephrase.
• Canva Pro + AI — quick visuals for social posts.
• Jasper AI — for SEO-driven writing.

Final Thought

AI didn’t replace my work — it replaced my wasted hours. Today, I ship faster for clients, learn more every week, and still have time to grow personal projects.

If you’re a freelancer or self-taught learner like me, don’t try to do everything the hard way. Use AI as your productivity stack. You’ll be surprised how much time you reclaim.

How I Reclaimed 5 Hours a Day with AI — A Freelancer’s Productivity Story was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

Prompts are broken.
Most of us still write them like open-ended essays, hoping the AI “gets it.” But what if prompts weren’t sentences at all? What if they were blueprints structured, precise, and impossible to misinterpret?

That’s where JSON comes in.

First, let's understand.

What is Prompt?

At its core, a prompt is simply an instruction we provide to an AI model. It tells the system what we want and often how we want it delivered. A good prompt can unlock powerful, accurate responses; a bad one can leave you with vague or irrelevant results.

But writing effective prompts isn’t random. Tech leaders like Google have studied and taught structured prompt-writing as a discipline. In their Prompt Engineering Course, they emphasise clear and thoughtful design using simple frameworks.

“T.R.E.I.” → Thoughtfully create Really Excellent Inputs

Or, if you prefer something fun and memorable:

“Tiny Crabs Ride Enormous Iguanas” (Credit: Tina Huang)

Here, T.R.E.I. stand for :
- Task: What you want the AI to do and Persona.

- Context: What's your subject or domain?

- Reference: These are examples you provide to the AI.

- Evaluate: Is this the output you want?

- Iterate: Rewrite the prompt by giving constraints and output format.

JSON-Based Prompting

Traditional prompts are written in natural language. While flexible, this approach is often ambiguous. Two different readers or AIs might interpret the same text in two very different ways.

That’s where JSON-based prompting comes in.

Instead of writing your instructions like free-flowing sentences, you write them as structured data. Each instruction has its own field, rules are explicitly defined, and the AI receives a clear blueprint of expectations.

What is JSON-Based Prompting?

JSON (JavaScript Object Notation) is a lightweight data format widely used in programming. In prompt engineering, we can use JSON to make our instructions unambiguous and machine-readable.

Here’s a simple example:

❌ Traditional Prompt:

Write a summary of the article in less than 100 words, use bullet points, and keep a professional tone.

✅ JSON Prompt:

{
  "task": "summarize",
  "input": "Paste article text here",
  "constraints": {
    "length": "under 100 words",
    "format": "bullet points",
    "tone": "professional"
  }
}

The JSON version doesn’t leave room for interpretation. Each requirement is isolated, explicit, and easy for the AI models to follow.

How JSON Prompting Powers Agentic AI

Here’s where it gets really interesting. JSON-based prompting isn’t just useful for one-off queries — it’s also a foundation for agentic AI.

Agents — AI systems that can plan, reason, and act across multiple tools — depend on structured instructions. Free-flowing text is messy; JSON is a roadmap. It allows agents to chain tasks, pass data between steps, and coordinate actions with precision.

I won’t dive too deep here, because this deserves a full article of its own. But if you’re curious about how structured prompts tie into the rise of agentic AI, stay tuned — I’ll be covering it in an upcoming piece.

Final Thoughts

Prompts started as an art — long sentences, clever phrasing, and trial and error. But as AI grows more advanced, prompting is evolving into a science of structure.

Google’s frameworks remind us to write thoughtfully, but JSON pushes that idea further. It turns prompts into instructions that machines can follow with the same precision as a human blueprint.

The future of prompt engineering won’t be about writing more words.
It will be about writing smarter ones — and JSON might just be the key.

Thanks for Reading !!

Imagine waking up one morning, and poof — the internet is gone. No Google, no social media, no streaming, no online banking. Sounds like a nightmare, right? The internet has become such an integral part of our lives that we often take it for granted. But have you ever stopped to think about how it works? What happens when you type a website address into your browser and hit enter?

In this blog, we’ll dive into the fascinating world of the internet, unraveling its core components like HTTP, SSL, DNS, routers, packets, IP addresses, and more. By the end of this post, you’ll not only understand how the internet works but also appreciate the engineering marvel that powers our digital lives. Let’s get started!

What Is the Internet, and Why Should You Care?

The internet is a network of networks.

What a Network is?

A network is a group of computers or other devices which are connected to each other. For example, you at your home might have a network of computers and devices.

The internet is a global network of interconnected computers and devices that communicate with each other using standardized protocols. It’s like a giant web (hence the name “World Wide Web”) that allows us to share information, access services, and connect with people across the globe.

The internet is the world’s most popular computer network. It began as an academic research project in 1969 and became a global commercial network in the 1990s. Today, it is used by more than 2 billion people worldwide.

The internet is notable for its decentralization. No one owns the internet or controls who can connect to it. Instead, thousands of organisations operate their networks and negotiate voluntary interconnection agreements.

The internet was developed in the late 1960s by the United States Department of Defense as a means of creating a decentralized communication network that could withstand a nuclear attack. Over the years, it has evolved into a complex and sophisticated network that spans the globe.

But why should you, as an aspiring software developer, care about how the internet works? Simple: because the internet is the backbone of every application you’ll ever build. Whether you’re working on a website, a mobile app, or a backend system, understanding the internet’s inner workings will make you a better developer.

Who runs the Internet?

No one runs the internet. It’s organized as a decentralized network of networks. Thousands of companies, universities, governments, and other entities operate their networks and exchange traffic with each other based on voluntary interconnection agreements.

The shared technical standards that make the internet work are managed by an organization called the Internet Engineering Task Force.

The Internet Corporation for Assigned Names and Numbers (ICANN) is sometimes described as being responsible for internet governance. As its name implies, ICANN is in charge of distributing domain names (like vox.com) and IP addresses. But ICANN doesn’t control who can connect to the internet or what kind of information can be sent over it.

Now the main questions comes:

How does the Internet work?

At a high level, the internet works by connecting devices and computer systems using a set of standardized protocols. These protocols define how information is exchanged between devices and ensure that data is transmitted reliably and securely.

The core of the internet is a global network of interconnected routers, which are responsible for directing traffic between different devices and systems. When you send data over the internet, it is broken up into small packets that are sent from your device to a router. The router examines the packet and forwards it to the next router in the path towards its destination. This process continues until the packet reaches its final destination.

To ensure that packets are sent and received correctly, the internet uses a variety of protocols, including the Internet Protocol (IP) and the Transmission Control Protocol (TCP). IP is responsible for routing packets to their correct destination, while TCP ensures that packets are transmitted reliably and in the correct order.

In addition to these core protocols, there are a wide range of other technologies and protocols that are used to enable communication and data exchange over the internet, including the Domain Name System (DNS), the Hypertext Transfer Protocol (HTTP), and the Secure Sockets Layer/Transport Layer Security (SSL/TLS) protocol.

As a developer, it is important to have a solid understanding of how these different technologies and protocols work together to enable communication and data exchange over the internet.

Let's Understand the Magic Behind the Scenes

When you type a URL like https://www.medium.com into your browser and hit enter, a series of complex yet well-coordinated events take place. Let’s break it down step by step:

1. DNS: The Internet’s Phonebook

The first thing your browser does is ask the Domain Name System (DNS) to translate the human-readable URL (www.medium.com) into a machine-readable IP address (like 192.168.1.1). Think of DNS as the internet’s phonebook—it maps domain names to IP addresses so your browser knows where to send the request.

2. HTTP/HTTPS: The Language of the Web

Once the browser knows the IP address, it sends a request using the Hypertext Transfer Protocol (HTTP) or its secure version, HTTPS (which uses SSL/TLS encryption). This request asks the server to send back the website’s data.

HTTP is the protocol used to transfer data between a client (such as a web browser) and a server (such as a website).

HTTPS is a more secure version of HTTP, which encrypts the data being transmitted between the client and server using SSL/TLS (Secure Sockets Layer/Transport Layer Security) encryption. This provides an additional layer of security, helping to protect sensitive information such as login credentials, payment information, and other personal data.

3. Routers and Packets: The Internet’s Delivery System

Your request is broken down into small chunks called packets, which are sent over the internet via routers.

A packet is the basic unit of information/data transmitted over the internet. Splitting information up into small, digestible pieces allows the network’s capacity to be used more efficiently.

A packet has two parts. The header contains information/data that helps the packet get to its destination, including the length of the packet, its source and destination, and a checksum value that helps the recipient detect if a packet was damaged in transit. After the header comes the actual data. A packet can contain up to 64 kilobytes of data, which is roughly 20 pages of plain text.

Routers act like traffic cops, directing packets to their destination through the most efficient path. Once all the packets reach the server, they’re reassembled into the original request.

A device that directs packets of data between different networks.

4. Web Servers and Hosting: Where Websites Live

Web Hosting has also different components:

Web page: A document that can be displayed in a web browser. These are also often called just “pages”. Such documents are written in the HTML language.

Website: A collection of web pages grouped together into a single resource, with links connecting them. Often called a “site”.

Web server: A computer that hosts a website on the Internet.

The server, which is essentially a powerful computer, processes your request and sends back the website’s data (HTML, CSS, JavaScript, images, etc.). This data is stored on a web hosting service, which ensures the website is accessible 24/7.

5. IP Addresses: The Internet’s Postal System

Every device connected to the internet has a unique IP address (like a home address). IPv4 (e.g., 192.168.1.1) only allows for about 4 billion IP addresses, which has been the standard for decades, but due to the growing number of devices, internet engineers have developed a new standard called IPv6. We’re transitioning to IPv6 (e.g., 2001:0db8:85a3:0000:0000:8a2e:0370:7334), which allows for a mind-boggling number of unique addresses — the exact figure is 39 digits long — ensuring that the world will never again run out.

An ICANN department known as the Internet Assigned Numbers Authority is responsible for distributing IP addresses to ensure that two different organizations don’t use the same address.

6. Web Browsers: Your Window to the Internet

Finally, your web browser (like Chrome, Firefox, or Safari) receives the data, interprets it, and displays the website on your screen. And voilà — you’re now browsing the internet!

P.S. : A Quick Tip for Aspiring Developers

If you’re preparing for backend engineering interviews, here’s a pro tip: Learn the difference between TCP and UDP. Both are transport layer protocols, but they serve different purposes:

• Transmission Control Protocol (TCP) is connection-oriented and reliable and ensures data is delivered in order (e.g., used in web browsing, emails).
• UDP (User Datagram Protocol) is connectionless and faster, but less reliable (e.g., used in live streaming, online gaming).

Speaking of live streaming, ever wondered which protocol YouTube uses for its live streams? Why? It’s UDP! Because speed and real-time delivery are more critical than perfect data integrity in live streaming.

Final Thoughts: The Internet Is Bigger Than You Think

The internet is more than just a tool — it’s a complex, interconnected system that powers our modern world. As an aspiring backend engineer, understanding its components and how they work together is crucial. Whether you’re building APIs, optimizing server performance, or ensuring secure data transmission, the internet’s architecture will always be at the core of your work.

So the next time you browse a website or send a message, take a moment to appreciate the incredible technology that makes it all possible. And remember, the more you learn about the internet, the better equipped you’ll be to build the next big thing in tech.

Loved this breakdown of how the internet works? Share this post with your fellow developers and drop a comment below with your thoughts or questions. Don’t forget to follow for more backend engineering insights and tutorials. Happy coding!

Further Resources:

• What is HTTP? — YT Video,
• https://youtu.be/UMwQjFzTQXw?si=2ms21svty8vqxNvk
• SSL/TSL works — YT Video,
• https://youtu.be/0yw-z6f7Mb4?si=0xj3QhxGkc7I4FUD
• DNS
• Stanford Whitepaper — How Internet Works Brief

Pip: The Classic Package Manager

What is Pip?

Pip (Pip Installs Packages) is Python’s default package manager. It helps you install and manage libraries from PyPI (Python Package Index).

How do we use it effectively?

• Install a package

pip install requests

• Save dependencies in requirements.txt:

pip freeze > requirements.txt

• Install all dependencies from requirements.txt:

pip install -r requirements.txt

Poetry: The All-in-One Dependency Manager

Why use Poetry over Pip?

Poetry isn’t just a package manager — it also creates and manages virtual environments and handles dependency resolution more efficiently.

Common use cases where Poetry shines:

• Creating isolated virtual environments automatically
• Managing project dependencies with pyproject.toml
• Publishing Python packages easily

How to use Poetry?

• Install Poetry:

pip install poetry 

or

curl -sSL https://install.python-poetry.org | python3 -

• Create a new project:

poetry new my_project

• Add dependencies:

poetry add requests

With Poetry, you don’t need requirements.txt. Instead, it is used pyproject.toml to track dependencies.

UV: The Fast & Modern Package Manager

What makes UV different?

UV is a blazing-fast alternative to Pip & Poetry, written in Rust. It’s designed for speed, efficiency, and better caching.

• Faster installations (thanks to Rust)
• Compatible with Pip & Poetry
• Less disk space usage

How to use UV?

• Install a package:

pip install uv

• Practical Comparison

Pip vs. Poetry vs. UV: Which One to Use?

Final Thoughts

Choosing the right package manager depends on your project’s needs:

• Pip is the classic and reliable choice for simple package installations.
• Poetry is the go-to for full dependency and environment management.
• UV is the new, ultra-fast alternative for speed-focused workflows.

If you’re just getting started, stick with Pip. If you want better control over dependencies, Poetry is your best bet. And if you love speed and efficiency, give UV a try!

Check out my previous post on Virtual Environments

https://medium.com/@jagtaprathmesh19/virtualenv-101-the-secret-to-managing-python-projects-like-a-pro-ee24c9f5362f

Pip vs. Poetry vs. UV: Which One Should You Use for Your Python Projects? was originally published in Python in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

A few weeks ago, a friend called me, excited about his new job. The twist? He needed to switch from Java to Python. While he was eager to dive in, he quickly ran into frustration with one thing: managing virtual environments.

“It’s so tedious — creating, setting up, and activating the environment every time! And don’t even get me started on configuring the Python path,” he said.

I smiled and reassured him, “It’s not as bad as it seems. Once you know the tricks, virtualenv will feel like a lifesaver instead of a hassle.”

For those unfamiliar, virtual environments isolate dependencies for each project, preventing conflicts. They may seem tricky at first, but with the right tools and tips, managing them becomes second nature.

In this post, I’ll share the same advice I gave my friend: practical tips, tools like virtualenvwrapper, and how to simplify Python path setup.

First, he asked what this virtualenv.

I explained to him in a way

Think of your global Python setup as a pantry. A virtual environment is like a separate basket for each recipe (project), holding only the specific ingredients (packages) you need. This way, your pantry stays tidy, and you can avoid mixing ingredients between recipes!

Virtualenv is a tool for creating isolated Python environments for maintaining package dependencies. It’s great for situations where you’re working on more than one project at a time, and where there are clashes between the version numbers of different libraries that your projects use. It

• Avoid Conflicts
• Clean Setup
• Easy Collaboration

For example, imagine that you’re working on one project that requires Django 3.0 and another that requires Django 3.2.

• Without virtualenv (or an alternative tool to manage dependencies), you have to reinstall Django every time you switch projects.
• If that sounds tedious, keep in mind that most real Django projects have at least a dozen dependencies to maintain

How to Create Virtualenv?

Defualt Method

Install virtualenv (if not already installed):

pip install virtualenv

pip is already installed on < python 3.4

2. Create a Virtual Environment:

Navigate to your project directory and run:

virtualenv env_name

Replace env_name with the name you want for your environment.

3. Activate the Virtual Environment:

• On Windows:

.\env_name\Scripts\activate

• On Mac/Linux:

source env_name/bin/activate

Once activated, you’ll see (env_name) in your terminal prompt.

Alternative Methods

• Conda
• Poetry
• Pipenv

What if the path of Virtualenv is different from the project?

He asked!

Tip!

It’s a good practice to create your virtual environments in a separate directory, keeping them organized and separate from your project files. For example, you could maintain one directory for all your virtual environments and another for your Python projects. This approach keeps things clean and makes managing multiple projects easier!

To answer his question, let's create Create a Virtual Environment Anywhere

• You can create your virtual environment in C: (or any directory you prefer):

cd C:\envs
virtualenv myenv

Activate the Virtual Environment Dynamically

Create a activate_env.bat script (for Windows) or a activate_env.sh script (for Mac/Linux) in your project directory. This script dynamically sets the Python path and activates the environment.

• For Windows (activate_env.bat):

@echo off
set VIRTUAL_ENV=C:\envs\myenv
set PATH=%VIRTUAL_ENV%\Scripts;%PATH%
cmd

• For Mac/Linux (activate_env.sh):

export VIRTUAL_ENV=C:/envs/myenv
export PATH="$VIRTUAL_ENV/bin:$PATH"

Run the script to dynamically set the Python path and activate the virtual environment:

• On Windows: Double-click the .bat file or run it in the terminal.
• On Mac/Linux: Execute source activate_env.sh.

Taking Virtualenv to the Next Level: Virtualenvwrapper

Step 1: Installation

To use Virtualenvwrapper, you need Python and pip installed.

• On Mac/Linux:

Install Virtualenv and Virtualenvwrapper:

pip install virtualenv virtualenvwrapper

Add the following lines to your shell configuration file (e.g., .bashrc or .zshrc):

export WORKON_HOME=$HOME/.virtualenvs
export PROJECT_HOME=$HOME/Projects
source /usr/local/bin/virtualenvwrapper.sh

Reload your shell configuration:

source ~/.bashrc

• On Windows:

Install Virtualenvwrapper-Win:

pip install virtualenvwrapper-win

No additional configuration is required. It sets up the environment automatically.

Step 2: Basic Usage

Create a Virtual Environment

mkvirtualenv myenv

• Mac/Linux: The environment will be stored in ~/.virtualenvs/myenv.
• Windows: The environment will be stored in %USERPROFILE%\Envs\myenv.

Activate a Virtual Environment

workon myenv

Deactivate a Virtual Environment

To deactivate the current virtual environment:

deactivate

List All Virtual Environments

lsvirtualenv

Remove a Virtual Environment

rmvirtualenv myenv

Step 3: Working with Projects

Virtualenvwrapper allows you to link virtual environments with specific projects.

Create a Virtual Environment for a Project

mkproject myproject

This creates a virtual environment and a directory for your project, linking them together.

Navigate to the Project Directory

Once linked, you can jump to the project directory automatically:

workon myproject

Step 4: Set the Python Path Dynamically

You can configure the virtual environments PYTHONPATH to include your project directory. This is especially useful when the project and virtualenv are in different locations.

Example:

Suppose:

• Your project is in D:\projects\myproject.
• Your virtual environment is in C:\Envs\myenv.

Activate your environment:

workon myenv

Set the PYTHONPATH to your project:

set PYTHONPATH=D:\projects\myproject

Now, Python will recognize your project as part of its path.

With these tips, you can master virtual environments and keep your Python projects neat and conflict-free. Ready to try it out? Start by creating a virtual environment for your next project and share your experience in the comments below!

If you found this guide helpful and want to share and explore tips on Python and programming together, let’s connect on LinkedIn

Virtualenv 101: The Secret to Managing Python Projects Like a Pro was originally published in Python in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Why Choose Django for Your Web Projects?

Django is a powerful web framework built with Python, designed to make web development faster and easier. Think of it as your ultimate toolkit for building dynamic websites and web applications. Whether you’re creating a small blog or a complex platform like Instagram, Django handles essential features like user authentication, file uploads, and database management with ease.

At its core, Django follows the MVC (Model-View-Controller) architecture:

• Models: The foundation of your data structure, representing database tables. For example, a User model may include fields like username, email, and password.
• Views: The logic layer that processes user requests, fetches data from models and sends it to templates.
• Templates: The presentation layer that defines how web pages are displayed using dynamic placeholders within HTML.

Setting Up Your Django Project Environment

A well-structured environment is key to a successful project. Here’s how to get started:

Step 1: Create a Virtual Environment

Isolate your project dependencies to avoid conflicts with other Python projects on your system:

python3 -m venv .venv  # Create a virtual environment  
source .venv/bin/activate  # Activate the virtual environment  
pip install django  # Install Django

Step 2: Start Your Django Project

Use the following command to kickstart your Django project:

django-admin startproject myproject

Your Initial Project Structure

Here’s what the default Django project directory looks like:

myproject/  
├── myproject/      # Inner project directory  
│   ├── __init__.py  
│   ├── asgi.py  
│   ├── settings.py  
│   ├── urls.py  
│   └── wsgi.py  
├── manage.py

Step 3: Run Your Project

Verify your setup by running the development server:

cd myproject/  
python manage.py runserver

Visit localhost:8000 in your browser to see your project in action.

Understanding Your Django Project Files

Here’s a breakdown of the key files in your Django project:

1. Inner Project Directory (myproject/)

• __init__.py: Indicates that this directory is a Python package.
• asgi.py: Configures ASGI for asynchronous deployment (e.g., WebSockets).
• settings.py: The brain of your project, containing configurations like:
• SECRET_KEY: Used for cryptographic signing. Keep it private!
• DEBUG: Enables debugging in development (set to False in-production).
• ALLOWED_HOSTS: Specifies the domains your site can serve.
• DATABASES: Defines your database connection.
• INSTALLED_APPS: Lists all active apps in your project.
• STATIC_URL and STATIC_ROOT: Manage static files like CSS and JavaScript.
• TEMPLATES: Configures template loading.
• urls.py: Routes URLs to views, acting as your project’s URL dispatcher.
• wsgi.py: Configures WSGI for traditional web servers like Apache or Nginx.

2. manage.py

A powerful command-line utility that simplifies interaction with your Django project. From running the server to creating migrations, this file is indispensable.

Conclusion

A solid Django project structure lays the foundation for efficient and scalable development. By following these best practices, you’ll set yourself up for success, ensuring your project remains clean, maintainable, and ready to grow.

Have any questions or tips to share? Drop them in the comments below! 🚀

#Django #WebDevelopment #Python #DjangoBestPractices #CodingTips

Resources

• Django Official Documentation: A comprehensive guide to Django, covering everything from installation to advanced topics.
• Django Debug Toolbar: A helpful tool for debugging Django applications.
• Two Scoops of Django: An excellent book offering best practices for Django development.
• Django Forum: Connect with the Django community to discuss and resolve issues.

Follow us on LinkedIn for more Python and Django insights!

Let's start,

HashMap in a Library Context

Imagine a library with thousands of books, and you want to quickly find a specific book without going through all the shelves. This is where the concept of a HashMap comes in:

Books and Their Unique ID:

Each book in the library has a unique Title (like a key in a HashMap) and the content inside is its value.

Hash Function:

• When you want to store a book in the library, you need a way to find the right spot for it quickly. This is where the hash function comes in. The hash function takes the book’s title and converts it into a number that indicates where to place the book on the shelf.
• The title (key) goes through a hash function to generate a number (the hash code), which tells the librarian which shelf to place the book on.

Shelves as Buckets:

The library has shelves that can hold multiple books. Each shelf corresponds to an index in an array, which we refer to as “buckets” in a HashMap.

Placing Books: Hash Code Modulo Capacity:

If there are 100 shelves (buckets), and the hash code for a book is 1523, the librarian will do 1523 % 100 = 23, and place the book on shelf 23. This ensures that books are spread across different shelves.

HashMap<String, String> library = new HashMap<>();
library.put("Harry Potter", "Book Object for Harry Potter");
library.put("The Great Gatsby", "Book Object for The Great Gatsby");

Retrieving Books (Getting Values by Keys):

When you want to retrieve a book:

• You ask for a specific book, by giving title"Algorithms 101" as key in the hashmap.
• The librarian takes the title "Algorithms 101" and uses the hash function to determine its shelf number.
• If it’s on shelf 45, the librarian goes directly to shelf 45 and fetches it.
• If multiple books are on the same shelf, the librarian goes through that small list to find the exact match.

String book = library.get("Harry Potter"); // Retrieves the book object for Harry Potter

Handling Collisions: Two Books on the Same Shelf

Now, sometimes two different books might have the same shelf number. This is called a collision.

If two books like "Data Science Basics" and "Python Programming" both end up on shelf 23 (collision):

• The librarian places them in a linked list or a small collection on that shelf. This is called chaining.
• When you ask for "Python Programming", the librarian will go to shelf 23 and search within that list.

Rehashing: When the Library Grows

• If the library gets more books and the shelves are getting full (too many collisions), the librarian adds more shelves.
• This process involves rehashing, where the librarian redistributes all the existing books across the new set of shelves.
• It’s like expanding the library to make searching even faster.

Load Factor and Capacity

• The load factor is like a rule for the librarian: if a shelf has too many books (default, over 75% full), the librarian adds more shelves.
• The HashMap does the same. When the number of entries exceeds the product of load factor and current capacity, the capacity is doubled, and all existing entries are rehashed to the new buckets.

Conclusion

A HashMap in programming is a highly efficient way to store and retrieve data, just like a librarian who can quickly find books using the hash code. It relies on:

• Hash functions to determine storage location.
• Buckets (shelves) to organize data.
• Techniques to handle collisions like chaining.
• Rehashing to keep searches fast even as data grows.

This analogy helps to illustrate why HashMaps are fast and why they are widely used for scenarios requiring quick lookups, like caching and database indexing.

Thank you for Reading !!

To connect with me Follow me on Linkedin. I’d love to hear from you if I can help you.

Keep Learning 👍😊