DEV Community: Bharath Muppa

Blockchain Beginner guide

Bharath Muppa — Wed, 21 May 2025 13:15:52 +0000

Introduction

Blockchain has evolved from a niche concept underpinning Bitcoin to a rich ecosystem of cryptocurrencies, smart contracts, decentralized finance (DeFi), non-fungible tokens (NFTs), Web3.0, and more. At first glance, terms like Bitcoin, Ethereum, Solana, ADA, NFT, DeFi, Web3.0, Binance, MetaMask, and MEW can feel overwhelming. This article breaks down core concepts, traces key milestones, explains why Bitcoin and base chains (Layer 1) were needed, and compares major platforms (Ethereum, Solana, Polygon, XRP) as well as the latest consensus algorithms.

A Brief History & Interesting Facts

Early Inspirations (1991–2008)
- 1991: Haber & Stornetta propose a tamper-evident timestamping scheme.
- 1998–2004: “b-money,” “bit gold,” and “Reusable Proofs of Work” lay groundwork for distributed digital cash.
Bitcoin’s Genesis
- Oct 31, 2008: Satoshi Nakamoto’s whitepaper introduces a peer-to-peer ledger, secured by Proof of Work and capped supply.
- Jan 3, 2009: Genesis block mined, embedding a headline on bank bailouts—signaling distrust of centralized finance.
Ethereum & Beyond
- 2015: Ethereum launches with smart contracts, spawning a new wave of dApps.
- 2017–today: Scalability challenges spur Layer 2 rollups and alternative Layer 1 chains (Solana, Cardano, Polkadot, Avalanche).

Why We Needed Bitcoin

Trustless Transactions: Eliminate banks and processors.
Censorship Resistance: Transact globally, regardless of local controls.
Digital Scarcity: 21 million-coin cap makes Bitcoin “programmable gold.”
Financial Inclusion: Unbanked users need only internet and a wallet.
Immutable Ledger: Transparent, auditable history without alteration.

Why Layer 1 Matters

Layer 1 blockchains are the foundations upon which everything else is built. They provide:

Security & Finality Native consensus (PoW, PoS, BFT) secures every transaction permanently.
Data Availability Every node holds or can access the full transaction history.
On-Chain Computation Smart contracts execute deterministically in a shared runtime (e.g., EVM, Solana VM).
Network Effects More users and developers on a single chain strengthen liquidity, tooling, and ecosystem growth.

Without a robust Layer 1, Layer 2 solutions or tokens would lack a common source of truth, endangering security and decentralization. Layer 1 is where your “true” balances, contracts, and state transitions live.

Key Terminology Refresher

Node: Participant storing/validating chain data.
Consensus Algorithm: Protocol for agreeing on blocks (PoW, PoS, BFT).
Smart Contract: On-chain code that self-executes.
dApp: Decentralized application built atop smart contracts.
Coin vs. Token: Native currency vs. asset issued on another chain.
Gas: Fee to process transactions or contracts.
Wallet: Key-management interface (MetaMask, MEW).
CEX vs. DEX: Centralized vs. on-chain exchange platforms.

Consensus Algorithms

Proof of Work (PoW): Energy-intensive mining (Bitcoin).
Proof of Stake (PoS): Validators lock tokens to propose/validate blocks (Ethereum, Cardano).
Proof of History (PoH) + PoS: Solana’s timestamped ledger for ultra-fast finality.
Federated/BFT-style: Trusted validator sets reach Byzantine-fault-tolerant agreement (XRP Ledger).

Layer 1 vs. Layer 2

Layer 1 (L1): The base chain—handles security, data availability, on-chain execution.
Layer 2 (L2): Scalability overlays—state channels (Lightning), sidechains (Polygon PoS), rollups (Optimistic, ZK).
- Why L2? Lower fees, higher throughput, while inheriting L1’s security guarantees.

Comparing Major Layer 1 Platforms

Platform	Consensus	TPS	Smart Contracts	Native Token
Bitcoin	PoW (SHA-256)	~7	No	BTC
Ethereum	PoS (Casper)	15–30	Yes (EVM)	ETH
Solana	PoH + PoS	~2,000	Yes (Rust, C)	SOL
Cardano	PoS (Ouroboros)	~250	Yes (Plutus)	ADA
XRP Ledger	Federated Consensus	~1,500	Limited (Hooks API)	XRP

Global Adoption: How the World Is Embracing Blockchains

Emerging Markets & Remittances – Users in Latin America, Africa, and Southeast Asia send cross-border funds cheaply via BTC or stablecoins, bypassing high remittance fees.
Central Bank Digital Currencies (CBDCs) – Over 100 nations are researching or piloting digital currencies to modernize payments (e.g., China’s e-CNY, Nigeria’s e-Naira).
Enterprise & Supply Chain – IBM’s Food Trust tracks produce from farm to retailer; Maersk’s TradeLens logs shipping events on a private chain.
Decentralized Finance (DeFi) – Billions in TVL (Total Value Locked) across lending (Aave), automated market makers (Uniswap), and yield aggregators (Yearn).
Art & Entertainment – Artists and game studios mint NFTs (digital art, in-game items), building new revenue models and fan engagement.
Regulatory & Institutional Interest – Large funds (BlackRock, Fidelity) have launched Bitcoin ETFs; regulators are crafting frameworks for custody, AML/KYC, and token classification.

Latest Innovations

DAG Protocols (IOTA, Hedera): High throughput via graph-based ledgers.
Hybrid Models: PoW bootstrapping + PoS security or PoS + BFT finality.
Zero-Knowledge Advances: Private transactions, succinct proofs for rollups and layer 1s alike.

Conclusion

Blockchain’s journey—from a simple distributed linked list to a multi-layered global network—has been driven by the need for trustless value transfer, programmable scarcity, and open participation. Layer 1 chains form the bedrock that secures and coordinates every transaction and smart contract, while Layer 2 solutions and emerging innovations propel scalability. As enterprises, nations, and individual users worldwide adopt blockchain technology—whether for payments, DeFi, or digital identity—understanding these layers, their origins, and their real-world impact will help you navigate and leverage the next generation of the internet.

Popcorn Time
If you need more info about the blockchain or consensus algorithms watch these playlist

🔌 Demystifying ARPANET: The Spark Before the Web

Bharath Muppa — Wed, 21 May 2025 12:29:08 +0000

Before the Web was woven, the world’s first packet-switched network — ARPANET — laid the foundation for everything to come.

In the Shadow of the Cold War

The year was 1969. America was racing to the moon, dodging nuclear paranoia, and pouring resources into scientific supremacy.

The U.S. Department of Defense’s research agency, ARPA (Advanced Research Projects Agency), had one problem: how could scientists at distant universities share computer resources in real-time?

Back then, computers were massive, expensive, and isolated. If researchers at MIT wanted to run programs on a computer at Stanford, they’d often have to fly in or use slow telephone connections.

So ARPA did something radical: it funded a new kind of network — one that could send digital data in packets across multiple unreliable channels. The result: ARPANET, the ancestor of the modern Internet.

The First Connection

On October 29, 1969, at 10:30 p.m., a UCLA student typed login into a terminal to connect to a remote computer at Stanford.

The system crashed after the first two letters — lo.

But history was made: the first inter-networked message had been sent.

Within months, ARPANET linked four key universities:

UCLA
Stanford Research Institute (SRI)
UC Santa Barbara
University of Utah

The era of packet-switched networking had begun.

How It Worked

Unlike the circuit-switched phone system, ARPANET broke data into packets, each containing:

A destination address
Payload (the data)
Sequence information

These packets traveled independently, hopped through routers (then called IMPs – Interface Message Processors), and were reassembled at the destination.

This made ARPANET resilient to node failures — a key advantage in military thinking.

The Protocol Before the Protocols

Initially, ARPANET used NCP (Network Control Protocol), which allowed basic host-to-host communication and established the groundwork for reliable connections between machines. However, NCP lacked flexibility for larger-scale growth and didn't support addressing schemes that modern networking required.

In response, the network transitioned in 1983 to TCP/IP (Transmission Control Protocol / Internet Protocol) — a more modular, scalable protocol suite that separated how data was sent (IP) from how it was guaranteed and ordered (TCP). This upgrade made the network resilient, decentralized, and interoperable across different hardware and operating systems.

With TCP/IP as the foundation, several important protocols emerged:

FTP (File Transfer Protocol) – introduced in the early 1970s, it enabled users to upload and download files between computers remotely, using authenticated logins or anonymous access.
Telnet – one of the earliest remote terminal protocols, it allowed users to log into another computer over ARPANET as if sitting at a local terminal.
SMTP (Simple Mail Transfer Protocol) – laid the foundation for email transmission between servers.
DNS (Domain Name System) – introduced in 1984, it replaced numeric IP addresses with human-readable domain names.

These protocols collectively allowed researchers and early users to navigate, communicate, and transfer data long before the World Wide Web appeared.

Every major system that followed — including email, FTP, Telnet, and eventually HTTP — was layered on top of this evolving protocol backbone. — email, FTP, Telnet, and eventually HTTP — was layered on top of this backbone.

Other Contenders in Parallel

While ARPANET was the most successful and well-funded packet-switched network, it wasn’t the only attempt.

OGAS – The Soviet Network Vision (1960s–1980s)

The Soviet Union had its own ambitious project: OGAS (National Automated System for Computation and Information Processing). Proposed by cyberneticist Victor Glushkov, OGAS aimed to connect computers across the USSR to manage its economy in real-time.

It was designed as a three-tier network with nodes at factories, regional hubs, and a central planning institute. Though visionary, OGAS was hindered by bureaucratic resistance, Cold War secrecy, and a lack of technological resources. It never moved beyond pilot stages.

CYCLADES – France’s Elegant Simplicity (1970s)

Led by Louis Pouzin, the French CYCLADES network was a major influence on Internet design. It introduced the idea of end-to-end responsibility, where intelligence lies in the endpoints, not the network — a concept that inspired the design of TCP/IP.

Though CYCLADES lost funding in favor of France’s PTT-run Transpac, its architectural ideas endured.

German Academic Networks

In West Germany, initiatives like WIN (Wissenschaftsnetz) and later DFN (Deutsches Forschungsnetz) connected universities and research institutes. They often collaborated with European networks like EARN (European Academic and Research Network), though their designs were layered over existing telecom infrastructure.

While none of these projects scaled like ARPANET, they reflected a global push toward networked computing and contributed ideas, talent, and urgency to the future Internet.

From Military Roots to Civilian Use

Though ARPANET began as a defense project, its greatest contributions came in academia:

Email emerged in the early 1970s and became the network’s killer app.
Remote file transfer (FTP) enabled collaborative research.
Open protocols encouraged interoperability and open standards.

By the late 1980s, ARPANET was slowly being replaced by more commercial and international networks — but its DNA lived on.

On February 28, 1990, ARPANET was officially decommissioned.

What Came After

How NSFNET and TCP/IP Differed from ARPANET

ARPANET laid the groundwork, but NSFNET and TCP/IP expanded and refined the architecture of global networking.

Connectivity Model:

ARPANET used dedicated leased lines between a small number of nodes with IMP (Interface Message Processor) routers. Its connectivity was limited and manually provisioned.
NSFNET leveraged regional academic networks and higher-speed backbones. It introduced dynamic routing, modular upgrades, and decentralized management.

Protocol Stack:

ARPANET originally relied on NCP, which lacked routing and robust addressing.
TCP/IP provided a layered model — IP for addressing and routing, TCP for reliable delivery — enabling scalable internetworking.

Access and Policy:

ARPANET access was tightly controlled under military and academic grants.
NSFNET intentionally opened access to educational and eventually commercial entities — this shift enabled the birth of the public Internet.

Transition:

By 1990, ARPANET had served its purpose.
NSFNET took over, with TCP/IP becoming the universal language of the Internet.
Routers replaced IMPs, and a wide array of networks began to autonomously interconnect, forming what we now call the Internet.

As ARPANET faded, its foundational principles gave rise to the modern Internet.

NSFNET and Internet Backbone (1985–1995)

The U.S. National Science Foundation created NSFNET, a higher-capacity academic network.
It linked universities and became the backbone for early Internet traffic.
Commercial use was prohibited at first but gradually opened up.

The TCP/IP Revolution (1983–1990)

ARPANET officially adopted TCP/IP on January 1, 1983 — a day now known as Flag Day.
TCP/IP unified all research and military networks under a common language.
This enabled the inter-network — hence the term Internet.

The Rise of the Modern Internet (1990–1995)

In 1990, Tim Berners-Lee launched the World Wide Web at CERN.
By 1993, the first graphical web browser, Mosaic, was released.
The number of Internet hosts exploded from a few hundred thousand to millions.

The Dot-Com Boom (1995–2000)

NSFNET was retired, and the Internet was fully commercialized.
Domains like amazon.com, google.com, and ebay.com appeared.
ISPs (Internet Service Providers) brought access to the masses.

Mobile & Cloud Era (2007–Present)

Smartphones turned the web into a mobile-first experience.
Cloud computing (AWS, Azure, Google Cloud) redefined infrastructure.
The Web now supports video streaming, real-time apps, social media, and global commerce.

From ARPANET's four-node experiment to a global web of billions, the Internet has evolved through cooperation, open protocols, and decades of iteration.

NSFNET: A more powerful network created by the National Science Foundation — precursor to the modern Internet backbone.
Tim Berners-Lee’s World Wide Web (1990): Built on top of TCP/IP — made the net human-readable.
Commercial ISPs and the Internet boom of the mid-90s

Without ARPANET, none of these would exist.

How the Internet Travels Across Oceans

Today’s global internet relies heavily on undersea fiber-optic cables, stretching tens of thousands of kilometers between continents.

How They're Built:

Laid by specialized ships, these cables rest on the ocean floor.
At shallow depths, they're buried beneath the seabed for protection.
Each cable contains multiple fiber pairs wrapped in layers of steel and waterproofing.

Why Sharks Don’t Destroy Them:

In early days, sharks did occasionally bite cables — possibly due to electromagnetic signals.
Modern cables are reinforced with armored sheaths to withstand pressure, bites, and anchors.
Today, human activities (like fishing and earthquakes) are far more common causes of damage than marine life.

These undersea arteries carry over 95% of international data traffic — making them the invisible foundation of modern connectivity.

Final Thoughts

ARPANET was not the Web — it was the soil the Web grew in. It showed that resilient, packet-switched communication over long distances was not just possible, but inevitable.

It was a humble experiment, born out of academic need and military foresight. But it changed how we connect, communicate, and collaborate.

🌍 Legacy Markers

🧠 The first message sent: "lo"
🔗 The first four nodes formed the backbone of modern connectivity
📡 TCP/IP Day (January 1, 1983) — when ARPANET officially switched to the protocols we use today
🛑 ARPANET shutdown: February 28, 1990

Written in honor of the engineers who connected four machines — and jumpstarted a planetary web.

Next Article Demystifying-www

🌐 Demystifying “www” — and the Magic Behind It All

Bharath Muppa — Wed, 21 May 2025 12:00:09 +0000

A journey into how one man's frustration inside a particle lab created the foundation of the modern web.

The Problem No One Wanted to Solve

In 1989, deep within the sprawling scientific corridors of CERN in Geneva, Tim Berners-Lee faced a quiet but maddening challenge. Physicists were drowning in data — yet they had no shared way to access or link it.

Information was locked inside incompatible systems. A document on a VAX machine couldn’t be easily opened by a UNIX terminal. Sharing findings required a combination of emails, FTP commands, and paper printouts. It was a fragmented world.

Tim drafted a proposal: "Information Management: A Proposal." It introduced a radical thought — using hypertext over the internet to interconnect documents. A web... a World Wide Web.

What the World Looked Like Before

Before HTML, documents existed in a range of formats:

Plain text (.txt) – the most common but unstructured format
TeX/LaTeX – used for academic and scientific publishing
PostScript (.ps) – a page description language for print-ready documents
DVI – output format from TeX, used for display but not hyperlinking
SGML – a powerful markup language used in publishing, but too complex for the web
PDF – introduced around 1993, but was not open or widespread yet

These formats lacked interconnectivity. Documents were isolated, static, and platform-specific. There was no way to link between them or browse them across systems. Hypertext brought the missing piece: non-linear navigation.

To read a paper at CERN in 1988, you might:

Call a colleague to find where it’s stored
Telnet into a remote server to navigate the directory structure or read a README
Use FTP to download the actual file once you knew its exact location
Open it with a compatible viewer (if you’re lucky)

Telnet was used to explore and find files interactively, while FTP was used to transfer them efficiently — especially large or binary files. This two-step process made even simple reading tasks cumbersome and error-prone.

There were no links. No browsing. No shared language for content.

This wasn't a problem just for CERN — it was a limitation of the entire Internet. People needed a better way to navigate knowledge.

The Birth of Hypertext on the Net

Tim was inspired by earlier pioneers like Ted Nelson, who had coined the term “hypertext” in 1965. Hypertext was simple: text with links.

But what if those links could work across the entire world, over the internet?

Tim envisioned a system built on three pillars:

HTML – a language to structure documents
HTTP – a protocol to fetch those documents
URL – a global address to find each resource

He wrote the first HTML document:

<html>
  <head><title>Welcome</title></head>
  <body>
    <h1>Hello, CERN!</h1>
    <a href="page2.html">Next Page</a>
  </body>
</html>

The First Server and a Label That Made History

Tim didn’t stop at defining HTML. He coded the first HTTP server, too. It ran on a NeXT workstation at CERN — a cube-shaped black machine from Steve Jobs’ company.

Here’s what a simplified version of that server looked like:

void send_response(int client_fd, const char *filename) {
  // Open HTML file and send content with HTTP headers
}

int main() {
  // Accept socket, read HTTP GET line
  // If "GET /a.html", serve file from disk
}

The server read incoming requests like GET /a.html, opened the file from disk, and responded with a raw HTML document. The server itself didn’t “understand” HTML — it simply sent the content. The browser did the rendering.

🧪 A sticker on that NeXT computer read: "This machine is a server. Do not power down!!" That machine served the first webpage ever.

Testing the Web — Without a Browser?

Since no browser existed, Tim built that too. Using Objective-C, he created WorldWideWeb.app, the first browser/editor in history.

At that point, only machines capable of running NeXTSTEP could use the browser. So effectively, only Tim himself could see and interact with those first web pages — until more browsers were developed for other platforms like X Window System and later Windows and Mac. The Web was functional, but its audience was limited to one.

What made this browser remarkable wasn't just its ability to display HTML — it could also handle multiple protocols:

It parsed and rendered HTML visually, interpreting tags like <h1>, <p>, and <a>
It followed http://, ftp://, and telnet:// links differently
- HTTP was handled with GET requests
- FTP links fetched anonymous files
- Telnet links launched external terminal sessions

Tim wrote the protocol logic, the rendering logic, and the link-handling flow all by hand — stitching together systems that weren’t designed to work together. His browser was more than a viewer — it was a universal translator for information.

🔗 You can explore a modern simulation of the browser at: https://worldwideweb.cern.ch/browser

The entire round-trip — from server to browser — was something Tim engineered end-to-end, often alone, and ahead of its time.

So, Where Did "www" Come From?

The first website was hosted at info.cern.ch, not www.cern.ch. The “www” subdomain wasn’t part of Tim’s original vision.

But as the web spread beyond CERN, organizations needed to separate services:

ftp.example.com for file transfers
mail.example.com for email
www.example.com for web content

The “www” prefix became a convention — not a requirement, just a label to mark "this is our web server."

When the Web Became Interactive

Early HTML was static. Pages were read-only. But people wanted to search, sign up, submit data.

By 1993–1994, Netscape and other browsers introduced HTML forms:

<form action="/submit" method="POST">
  <input name="email">
  <button>Subscribe</button>
</form>

HTTP evolved too:

Support for POST and HEAD
MIME types
Status codes like 404 Not Found

The web became more than documents — it became interactive.

What Came After

1995: JavaScript is born — enabling client-side interaction
1999: AJAX enables background HTTP calls
2005: Web 2.0 arrives — Gmail, Facebook, Google Maps

From documents to applications, the Web evolved in every direction — but its foundation still rests on HTML, HTTP, and URLs.

Final Thoughts: A Subdomain and a Dream

www. is just a subdomain. It was never essential — just helpful.
But the ideas behind it? Those were revolutionary.

The Web wasn't built by a tech giant or a marketing team. It was built by a curious mind, alone in an office at CERN, solving a simple but powerful problem.

🎉 CERN Easter Eggs

📡 CERN is home to the Large Hadron Collider, the world’s biggest science machine
💻 The first webpage ever: http://info.cern.ch
🧠 Tim’s 1989 proposal was stamped by his boss as: "Vague but exciting."

Written in tribute to the man who clicked the first hyperlink on the World Wide Web — and quietly rewired the architecture of modern civilization.

32 bit vs 64 bit vs 128 bit

Bharath Muppa — Thu, 27 Jun 2024 20:31:54 +0000

Understanding 32-bit vs 64-bit vs 128-bit in Development

In this article, we'll address some common questions you might have when buying a laptop, choosing an operating system, or downloading software.

What is 32/64/128 bit?
Does it correspond to the processor, OS, or software?
How do you check compatibility?
Why do they use only even bits and exclusively multiples of 8 in processing?

Before answering these questions, let's take a brief look at the early days of computer manufacturing and its evolution.

A Brief History of Microprocessors

Leaving aside the debates about who first created the microprocessor, let's go with the widely accepted history of Intel's 4004, which was the first computer-on-a-chip (later called a microprocessor).

1972: The Intel® 4004 processor, Intel’s first microprocessor, powered the Busicom calculator and paved the way for personal computers.
1975: The Altair 8800 microcomputer, based on the Intel® 8080 microprocessor, was the first successful home or personal computer.
1981: The Intel® 8088 microprocessor was selected to power the IBM PC.
Many other processors followed these initial chips.

The key takeaway here is that the 4004 was a 4-bit chip, the 8008 was an 8-bit chip, and the 8086 was a 16-bit chip.

What is 32/64/128 bit?

In simple terms, it refers to the number of bits used in one CPU register. The CPU register is like a small storage area where the CPU keeps data it needs to access quickly.

32-bit Systems

A 32-bit system means the CPU can handle 32 bits of data at once. It can address up to 4GB of RAM. This was common in older computers and some low-power devices today.

64-bit Systems

A 64-bit system can handle 64 bits of data at once. It can address much more RAM, up to 16 exabytes (a theoretical limit far beyond today's needs). Most modern computers and operating systems are 64-bit because they can handle more data and perform better with large applications.

128-bit Systems

128-bit systems are not common in consumer devices yet. They can handle even more data and address an almost unlimited amount of RAM. These systems might be used in specialized applications like scientific computing, encryption, and advanced graphics.

Processor, OS, or Software?

The bit value can refer to:

Processor: The CPU's architecture (e.g., 32-bit or 64-bit).
Operating System: Whether the OS is designed for a 32-bit or 64-bit processor.
Software: Whether the application is built to run on a 32-bit or 64-bit OS.

How They Work Together

A 32-bit OS can run on a 32-bit processor and use 32-bit software.
A 64-bit OS can run on a 64-bit processor and use both 32-bit and 64-bit software.
128-bit systems, when available, will likely follow similar compatibility rules.

Checking Compatibility

Processor: Check your CPU specs to see if it's 32-bit or 64-bit.
Operating System: In the system settings, you can find if your OS is 32-bit or 64-bit.
Software: Software typically specifies if it requires a 32-bit or 64-bit OS.

Practical Steps

On Windows, right-click on "This PC" or "My Computer" and select "Properties" to see system information.
On macOS, click the Apple icon and select "About This Mac."
For software, check the system requirements on the download page or packaging.

Why Even Bits and Multiples of 8?

Processors use even bits and multiples of 8 because:

Data Bus Width: It matches the width of the data bus, allowing efficient data transfer.
Memory Addressing: It simplifies memory addressing and alignment.
Standardization: It aligns with industry standards for data processing and storage.

Benefits of Using Multiples of 8

Simplicity: Makes designing hardware and software simpler.
Compatibility: Ensures compatibility across different systems and devices.
Efficiency: Improves the speed and efficiency of data processing.

Conclusion

Understanding the difference between 32-bit, 64-bit, and 128-bit systems helps you make informed decisions about your technology needs. Most modern systems use 64-bit technology, providing a good balance of performance and compatibility. As technology advances, we may see more 128-bit systems in specialized fields, offering even greater capabilities.

By knowing these basics, you can better choose the right hardware and software for your tasks.

Solving Style Issues: Angular Material MDC Migration Guide

Bharath Muppa — Mon, 19 Jun 2023 10:08:57 +0000

Angular Material MDC Migration

After migrating to the latest Material Design Components (MDC), many projects, including ours, have encountered style-related issues. In this write-up, we will explain how we resolved them.

We acknowledge that the core problem lies in creating components based on Material Components and modifying them to suit our specific use cases.

Here are the steps we followed to migrate from Material Components to Material MDC Components.

Note: You can Choose legacy components, but anyways we decided to go with MDC Migration.

Steps for MDC Migration

Upgrade Angular, Material, and run the mdc-migration script provided by the Material team.

You can either copy this code and create a batch file to run it or execute each step individually.

@ECHO OFF
call npm i typescript@4.8.x --force
call npm i zone.js @angular/flex-layout@15.0.0-beta.42 @angular-eslint/builder@15.x @angular-eslint/eslint-plugin@15.x @angular-eslint/eslint-plugin-template@15.x @angular-eslint/schematics@15.x @angular-eslint/template-parser@15.x  --force
call npx ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
call npx ng update @angular/material@15 --allow-dirty --force
call npx ng generate @angular/material:mdc-migration
PAUSE

Update your theme file

@use '@angular/material' as mat;
$ec--mat-typography: mat.define-typography-config(
    $font-family: $aal-font-family,
    $headline-4: mat.define-typography-level($aal-font-h1...),
    $headline-3: mat.define-typography-level($aal-font-h2...),
    ...more settings
);
/* This is the new way of defining a theme from Angular 15 */
$ec--mat-light-theme: mat.define-light-theme((
  color: (
      primary: $aal--mat-primary-color,
      accent: $aal--mat-accent-color,
      warn: $aal--mat-warn-color
  ),
  typography: $aal--mat-typography,
  density: -1, // you can experiment with densities that suit your application
));

@include mat.typography-hierarchy($ec--mat-typography);
@include mat.core();
/**
  It is important to include all component themes in the body
 */
body {
    @include mat.all-component-themes($aal--mat-light-theme);
    @include mat.button-density(-2); // these densities make more sense for my project, feel free to experiment
    @include mat.icon-button-density(-2); // these densities make more sense for my project, feel free to experiment
}

Search throughout your application and replace the following classes, if you have used them.

Here is a comprehensive list of classes that are not automatically migrated by "ng generate @angular/material:mdc-migration"

Component	Old Class	New Class
mat-tab	mat-tab-label-active	mdc-tab--active
	mat-tab-label-content	mdc-tab__content
	mat-tab-label-container	mat-mdc-tab-label-container
	mat-tab-list	mat-mdc-tab-list
	mat-tab-body-wrapper	mat-mdc-tab-body-wrapper
	mat-tab-label	mat-mdc-tab
	mat-tab-header-pagination-controls-enabled	mat-mdc-tab-header-pagination-controls-enabled
	mat-tab-header-pagination	mat-mdc-tab-header-pagination
	mat-tab-labels	mat-mdc-tab-labels
mat-chip	mat-chip-list	mat-mdc-chip-list
	mat-chip-list-wrapper	mat-chip-list-wrapper
mat-checkbox	mat-checkbox-frame	mdc-checkbox__checkmark
	mat-checkbox-label	mdc-label
	mat-checkbox-checked	mat-mdc-checkbox-checked
	mat-checkbox-label	mdc-label
	mat-checkbox-layout	-
mat-button	mat-button-focus-overlay	mat-mdc-focus-indicator
mat-radio	mat-radio-outer-circle	mdc-radio__outer-circle
	mat-radio-inner-circle	mdc-radio__inner-circle
	mat-radio-checked	mat-mdc-radio-checked
	mat-radio-label-content	mdc-label
	mat-radio-label	mdc -label
mat-progress-bar	mat-progress-bar-buffer	mdc-linear-progress__buffer
mat-form-field	mat-form-field-flex	mat-mdc-form-field-flex
	mat-form-field-wrapper	mat-mdc-text-field-wrapper
	mat-form-field-underline	mdc-line-ripple
	mat-form-field-subscript-wrapper	mat-mdc-form-field-subscript-wrapper
	mat-form-field-prefix	mat-mdc-form-field-text-prefix
	mat-form-field-suffix	mat-mdc-form-field-text-suffix
	mat-form-field-infix	mat-mdc-form-text-infix
	mat-form-field-label	mat-mdc-floating-label
mat-dialog	mat-dialog-container	mdc-dialog__container
	mat-dialog-content	mat-mdc-dialog-content
No Change
	mat-button-toggle
	mat-button-toggle-checked
	mat-button-toggle-disabled
	mat-button-toggle-focus-overlay

Final Thoughts

It is highly likely that this setup may not be entirely comprehensive and depends on your project's settings. However, please feel free to add comments about your upgrades, as they may assist other projects.

Installing Java on Mac.

Bharath Muppa — Wed, 29 Mar 2023 11:51:09 +0000

Java is a powerful programming language that can be used to develop a wide range of applications. If you're a developer or a student who needs to use Java, you'll need to install it on your Mac.

In this article, we'll see how to install Java on macOS using SDKMAN, a popular tool for managing Java versions, and other alternatives to try out.

Which is better?

Nope, not gonna say that. I will explain what worked for me.

I have tried HomeBrew, asdf, and sdkman. Here is my analysis of those tools.

HomeBrew - Steep learning curve (formulae, cask, Tapping, unTapping).
Worth spending time on if you are accepting home brew as your mac package manager and gonna use it for a long time, not for those who need only java installation.

Asdf - easy to use, but community and contributors for the java plugin are less active compared to others.

SDKMan - Easy to use and active community. I preferred this. it is pretty straightforward.

Install using SDKMan

Open the terminal and run curl -s "https://get.sdkman.io" | bash
Then run source "$HOME/.sdkman/bin/sdkman-init.sh"
Then run sdk install java 20-tem to get the latest temurin version or just run sdk install java to get the latest stable version of temurin.
you can try sdk list java for choosing different vendors and install accordingly.
packages installed using SDK will be in $HOME/.sdkman/candidates/java/current

It helped me to kick start my development on Mac as newbie to mac and hope it helps you too.

Comprehensive Guide for Computer Science Grads

Bharath Muppa — Wed, 27 Jul 2022 14:11:53 +0000

This is Blog series on Comprehensive Guide for Computer Science Grads Who are enthusiasts like me or more, who wants to know deep concepts and beauty of Computer Science.

Introduction

Before introducing you to the articles of this series I would like to mention my learning process which might be helpful for some of you.

There are 2 Essential facts in Computer Science.

1. Secret Mantra to understand any concept.

Create a simple Fundamental's List for yourself.

My fundamentals list 📜

Every program Which is written either in Java, C#, Ruby, Python, and javascript has to convert into machine code and executed by CPU.
All Languages either it is Java, C#, Ruby, Python, and javascript should have a grammar, A grammar lets us transform a program, which is normally represented as a linear sequence of ASCII characters, into a syntax tree.
Every Javascript framework like Angular, React, Vue, Svelte has to be converted into a set of Javascript instructions.

There are a few more, But This is just for your understanding. Creating this kind of fundamentals list will help you breakdown any complex theories of your interest.

Note: It is also very important to update your fundamentals if there is any major update or mistakes.

2. Find your Heroes. 🦸

It's really important to choose people who inspire and motivate you. It can be someone from your school, university, twitter or some blogs.

I would like to share my list

Frankly, I have a very long list of people who inspired me and motivates me(not necessarily a direct contact), but I don't want you to bother long list of mine.

The intention of the series is to build your fundamentals list and start an investigation on your favorite area of interest

Now I would like to introduce you to my articles, which are going to be part of blog series "Comprehensive Guide for Computer Science Grads "

Ultimate Alchemy: Turning Sand into a Computer
What is a Bit?
What are Gates?
32 bit vs 64 bit
CPU Bound vs IO Bound
Introduction to Grammer
Compiler vs Interpreter vs Transpilers
History of programming Languages
Arciteture Style vs Arcitecture patterns vs Design Patterns
Programming Paradigms
Functional Programming
Object Oriented Programming
What are TDD, BDD, DDD
Process vs Threads
Cryptography at high level
Computer Networking
What is Open power Architecture?
Cloud Computing with GCP,Azure,AWS
AI and Data Learning
Which Platforms you should know
What is SEO
IT Giants

Dynamic Tab Title in Angular

Bharath Muppa — Sun, 17 Jul 2022 17:25:19 +0000

With Angular 14, Now we can generate dynamic tab titles with ease.

1. Title property in Routes

Use Case:

Users page with users as tab name.(Users)
Orders page with orders as tab name(Orders)

Then simply use title property in Routes as below

Code



export const APP_ROUTES: Routes = [
  {path: '/users', component: UsersComponent, title: 'Users'},
  {path: '/orders', component: OrdersComponent, title: 'Orders'}
];

2. Title with Resolve

Use Case:

Users page with current user name in tab name.(User- Bharath)
Orders page with order id in tab name.(Order Id:1)

Then we should create a service which implement Resolve class from Router module as shown below.

Code:



@Injectable({
  providedIn: "root"
})
export class CustomTitleResolver implements Resolve<string> {

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> | Promise<string> | string {
// Have fun with naming
    return "<<project-name>> -" + route.paramMap.get("id") || "";
  }
}

Update Routes with title property



export const APP_ROUTES: Routes = [
  {path: '/users/:id', component: UsersComponent, title: CustomTitleResolver },
  {path: '/orders/:id', component: OrdersComponent, title: CustomTitleResolver }
];

3. Title Strategy

Use Case:

If you want a more generalized pattern, that will be applied **all over the application.

Prefixing a text to tab title.(Project X Users)
Suffixing a text to tab title.(Users Project X )

Then create a service that extends TitleStrategy and add it as Provider in AppModule.

Code



@Injectable({
  providedIn: "root"
})
export class CustomTitleStrategy extends TitleStrategy  {
  constructor(private readonly title: Title) {
    super();
  }

  override updateTitle(routerState: RouterStateSnapshot): void {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      this.title.setTitle(`myImpact (${title})`);
    } else {
      this.title.setTitle('myImpact');
    }
  }
}

Naming Strategy should be added as provider in app module, so that angular is aware that you have provided an alternative Naming strategy.



@NgModule({

  declarations: [

  ],

  imports: [

  ],

  providers: [{

    provide: TitleStrategy,

    useClass: IAMTitleStrategy

  }],

  bootstrap: [AppComponent]

})

export class AppModule {

}

Note

Depending on your use case, you can use either of these ways and also mix up both Resolve and naming Strategy like me

Happy coding 👨‍💻 !!

Compile and Run C# programs without visual studio or any other IDE

Bharath Muppa — Wed, 01 Dec 2021 14:12:13 +0000

In this Article, We are going to explore how to Compile and Run your C# programs without using any IDE.

Even Before thinking of doing it, lets ask ourselves this simple question.

Q: Why? Am I going back to stone age?
Ans: No, Writing sample codes in any language without IDE and compiling it will help you understand the eco system better.

Lets move on to Implementation part.

Download and install.

Download .NET Framework and install the dev packs.
Then add C:\Windows\Microsoft.NET\Framework64\v4.0.30319 (it can be any version you download) to environment path.

Step 2 will make csc (c sharp compiler) executable to be available to access.

Coding Part

1. Compile and Run Class A

Open Notepad and copy class below and name it as A.cs


// C# program to print Hello World!
using System;


// namespace declaration
namespace HelloWorldApp {

// Class declaration
class A {

    // Main Method
    static void Main(string[] args)
    {

        // printing Hello World!
        Console.WriteLine("Hello World!");
        // To prevents the screen from
        // running and closing quickly
        Console.ReadKey();
    }
  }
}

Steps to compile and run the program:

Open cmd
Navigate to path and then run csc A.cs
Then run command A.

2. Compile and Run Class A, which uses Class B

Open notepad and copy below code and name it as A.cs


using System;

// namespace declaration
namespace HelloWorldApp {

// Class declaration
class A{
    // Main Method
    static void Main(string[] args)
    {
            // printing Hello World!
        Console.WriteLine("Hello World!");
                var b = new B();
        b.startMusic();
        // To prevents the screen from
        // running and closing quickly
        Console.ReadKey();
    }
   }
}

open notepad and copy below code and name it as B.cs

using System;

// namespace declaration
namespace HelloWorldApp
{
    public class B{
            public void startMusic(){
               Console.Write("I am in B");
            }   
    }
}

If you run the above steps as mentioned before to compile and run, you will see compile time error saying B not found.

it is obvious, because we didn't create any assembly or sln in visual studio or other IDE that usually does most of the heavy lifting.

So, we need to create dll for B and refer that dll while compiling A.(So that A knows there exists a library which goes by name B)

New Steps to compile and run:

Create a dll for B using csc /target:library B.cs(It generates B.dll file)
Now compile A using csc /r:B.dll A.cs(It generates A.exe file)
Run exe using A

CPU Bound vs I/O Bound

Bharath Muppa — Mon, 27 Sep 2021 17:00:15 +0000

Before Understanding what is CPU Bound and IO Bound, I would like to touch the basic understanding of how CPU and IO work, then slowly dwell into the above concepts.

There is a simple analogy to understand in a better way.

Let's assume you want to start a Huge Restaurant(computer).

There are primarily 2 Requirements

you need a chef(s) 👨‍🍳
Warehouse for food Storage🏭

1. Hire a Chef (Buy CPU)

The chef is the one who is responsible for all your recipes.

Depending on your requirements, you have to hire a chef(CPU). If you spend more 🤑 you will get a master chef and he can add more recipes to the menu, cooks fast, reduce cost with his experience.
Let's say your city is famous for Shrimps, So you have to hire a chef who is specialized in making different shrimps (GPU).

Tasks of CPU
1. Fetch instructions from memory
2. Decode into binary instructions
3. Execute action and move to next step
4. Write output to memory

2. Establish a Delivery system.

💽 As we need to store all the groceries and food items required for recipes beforehand, we need warehouses (can be RAM, HardDisk, USB, Flash Drive)
🚚 We also need a transport system to transport data (PCIe express, SATA, Data Bus).
you also need to establish a connection with dealers at the market to get fresh food/shrimps at a low price. (Network calls, Mounted Drives)

Ok, you are good to start a Restaurant now.

Let's think of 2 scenarios.

Your Restaurant becomes famous and getting more orders, so you need a chef to chop some millions of vegetables for a thousand orders. If your chef is slow you can't deliver what customers want on time, so you need a fast chef to chop all the vegetables required and prepare the recipe.
Your chef needs a thousand food items and millions of groceries to prepare food. This is not the concern of the chef, this is the responsibility of all others it might be warehouse storage, market guys and transport persons.

I think it is quite a simple scenario. If yes you already understand what is CPU bound and IO Bound.

If you didn't really understand the anaology..no need to worry, we can simplify it by Demystifying the analogy

Analogy	Reality
Restaurant	Whole Computer
Chef	Processor
4 handed Chef	Quad-core Processor
Recipes	Threads
Deliver system	All other than processor
Special Shrimp Chef	GPU or FPGA or TPU

Without Analogy, in simple terms.

CPU Bound

We can say a program/language is CPU Bound if it has to

process more Data CPU
processing audio or video GPU
Processing vector instructions (VPU)

Example application: Photo Editors, Gaming, Video Editors

IO Bound

We can say a program/language is IO Bound if it has to do

file reading/writing
Do a Network call or responds to more network calls

Example application: Chat applications, Feeds, Bank applications

NOTE
It doesn't mean if an application is CPU bound, then it should not do any IO Operations and viceversa

Now everyone is on the same page and hopefully understood core concepts.

Now entering into an Opinionated Zone⚡

Lets put our knowledge into a matrix while choosing a language if you are asked to build an application.

Note

I am considering out of the box architecture of corresponding languages. As every language has a possibility to use thread pools, multi processes, multi-threads.

I want to exclude c and c++ because of their power and also theirs difficulty in creating the application for beginners.

Application	Language
Chat app	Node
Data-Intensive	Java, c#
Photoshop	Java, c#
Web Scrapping	Python, Node

Reference

Credits for this analogy should be given to (David Xiang)[https://twitter.com/davex_tech] and his book Software Developer Life: Career, Learning, Coding, Daily Life, Stories
Introduction to threading

What are Logic Gates?

Bharath Muppa — Mon, 27 Sep 2021 16:51:37 +0000

Pinch of History

George Boole, the son of a shoemaker, left school at sixteen and ended up a Professor of Mathematics at Queens College in Cork in Ireland

In 1854 he wrote a book called An Investigation of the Laws of Thought which distilled the essence of logical thought down to terms like AND, OR, and NOT, or combinations of these.

So, What is the Relation between Logic Gates and George Bool? 🤔

Boolean Logic

Boolean Logic is at the core of all computing machines that humans ever worked with. Wonder why?

By the time when computer scientists Decided to use binary system, There exists a well-established branch of mathematics which dealt with true or false values called Boolean algebra.

In simple words "Logic Gates are a high-level abstraction of the circuit to perform a Boolean operation"

As I mentioned in our previous article, A circuit is made of transistors, capacitors and other electronic units. if you arrange a circuit in a specific order so that it performs a boolean function then this arrangement is called a Logic gate.

Most of the developers already knew what are basic gates and how they work, So it is advisable for them to jump to Advanced Gate Concepts.

Each Gates will be represented in 3 ways based on the person who looks at it

Mathematical perspective - Truth tables

Software Perspective - Gate Representation

electronic Perspective - Circuit Representation

Based on alignment there are 6 major gates

1. AND

The AND gate is an electronic circuit that gives a high output (1) only if all its inputs are high. A dot (.) is used to show the AND operation i.e. A.B

2. OR

The OR gate is an electronic circuit that gives a high output (1) if one or more of its inputs are high. A plus (+) is used to show the OR operation.

3. NAND

This is a NOT-AND gate which is equal to an AND gate followed by a NOT gate. The outputs of all NAND gates are high if any of the inputs are low. The symbol is an AND gate with a small circle on the output. The small circle represents inversion.

4. NOR

This is a NOT-OR gate which is equal to an OR gate followed by a NOT gate. The outputs of all NOR gates are low if any of the inputs are high.
The symbol is an OR gate with a small circle on the output. The small circle represents inversion.

5. XOR

The 'Exclusive-OR' gate is a circuit which will give a high output if either, but not both, of its two inputs are high. An encircled plus sign () is used to show the EOR operation.

6. NOT

The NOT gate is an electronic circuit that produces an inverted version of the input at its output. It is also known as an inverter. If the input variable is A, the inverted output is known as NOT A. This is also shown as A', or A with a bar over the top, as shown at the outputs. The diagrams below show two ways that the NAND logic gate can be configured to produce a NOT gate. It can also be done using NOR logic gates in the same way.

The NOT gate is an electronic circuit that produces an inverted version of the input at its output.

This is a Unary Gate which means it takes only one input.

Advanced Topics

What is a bit?

Bharath Muppa — Mon, 27 Sep 2021 16:47:00 +0000

All over Computer science, whomever you talk with, they keep saying about data.

To store Data.
Compute Data.
Send/Request Data over Network.
Predictions on Data.
Represent Data.

The fundamental unit of this data is called a bit(B inary dig IT ).

The State of Bit is always binary which means it can represent two values 0 or 1, true or false, charge presence or charge absence.

Observe the gif once and start assuming there will be some kind of boxes in a computer that stores each bit.

📢 Let's ask Ourself few interesting questions

I have understood there will be some kind of box that stores the current charge but what is this made of?
Why that box use Binary System instead of others like decimal or Hexa?
What are the different memory units?

1. What is this Bit made of ?

A Bit is an electric circuit with transistors and capacitors arranged in a specific way.

Transistors are switches, but a special kind of Transistors called MOSFETS are used in volatile memories (SSD, HDD) and MOSFETS combined capacitors are used in RAM.

We will discuss the above concepts in detail across this series, Which will give you a clear picture of the inner workings of the Integrated circuit and memory architectures.

Topics to learn

Memory cell architecture

Volatile and Non-Volatile Memories.

NAND flash vs NOR Flash

Gates

2. Why Binary ?

Introduction to Number systems 🧮

We, Humans, are very much fond of the decimal system and important question is we never know how we used to it. Instead of long history, just think we used to it because of Egyptian and indus-valley civilizations.

In the decimal (base-10) numbering system, the digits are the elements of the set {0, 1, 2, 3, 4, 5, 6, 7, 8, 9}.

Eg: 1024.8 - {4 is one's digit, 2 is at ten's digit,0 is in hundreds digit and, 1 is at thousands digit,8 is at tenths digit}

In the binary number system, the digits are the elements of the set {0, 1}. This system is used by computers because the two digits can represent the logic low and high states. The term "binary digit" is compressed to " bit " in computer parlance.

Eg: 1,0,11,00,10,01

There was a time when computer scientists have to choose a number system and opt for a binary system because of vast study on those systems by above great personalities(George Bool and Leibniz) and also due to the limitations in electronics at that point of time.

3. Different memory units.

Now we can use the above acquired knowledge to build bytes, MegaBytes, GigaBytes and so on.

Storage	Unit	Possible No of states
1 memory unit	1 bit	2¹
4b	1 Nibble	2⁴
8b	1 Byte	2⁸
1024B	1 KiloByte	2⁸¹⁹²
1024KB	1 MegaByte	2^8388608
1024MB	1 GigaByte	2^8589934592
1024GB	1 TeraByte	2^{8796093022208}
1024TB	1 PetaByte	2^{9007199254740992}
1024PB	1 ExaByte	2^{9223372036854776000}
1024EB	1 ZettaByte	2^{9.44473296573929e+21}
1024ZB	1 YottaByte	2^{9.671406556917033e+24}
1024YB	1 BrontoByte	2^{Huge number}
1024BB	1 GeopByte	2^{Even Huge number}

Note:
There is a difference in representing bit(b) and Byte(B)
whenever your network provider says your download speed is 80Mbps.
it doesn't mean 80 MegaBytes per second, it means 80 Megabits per second that counts to 10 MBps.
That's how they fool Hard earning people.🤐

DEV Community: Bharath Muppa

Blockchain Beginner guide

Introduction

A Brief History & Interesting Facts

Why We Needed Bitcoin

Why Layer 1 Matters

Key Terminology Refresher

Consensus Algorithms

Layer 1 vs. Layer 2

Comparing Major Layer 1 Platforms

Global Adoption: How the World Is Embracing Blockchains

Latest Innovations

Conclusion

🔌 Demystifying ARPANET: The Spark Before the Web

In the Shadow of the Cold War

The First Connection

How It Worked

The Protocol Before the Protocols

Other Contenders in Parallel

OGAS – The Soviet Network Vision (1960s–1980s)

CYCLADES – France’s Elegant Simplicity (1970s)

German Academic Networks

From Military Roots to Civilian Use

What Came After

How NSFNET and TCP/IP Differed from ARPANET

Connectivity Model:

Protocol Stack:

Access and Policy:

Transition:

NSFNET and Internet Backbone (1985–1995)

The TCP/IP Revolution (1983–1990)

The Rise of the Modern Internet (1990–1995)

The Dot-Com Boom (1995–2000)

Mobile & Cloud Era (2007–Present)

How the Internet Travels Across Oceans

How They're Built:

Why Sharks Don’t Destroy Them:

Final Thoughts

🌍 Legacy Markers

🌐 Demystifying “www” — and the Magic Behind It All

The Problem No One Wanted to Solve

What the World Looked Like Before

The Birth of Hypertext on the Net

The First Server and a Label That Made History

Testing the Web — Without a Browser?

So, Where Did "www" Come From?

When the Web Became Interactive

What Came After

Final Thoughts: A Subdomain and a Dream

🎉 CERN Easter Eggs

32 bit vs 64 bit vs 128 bit

Understanding 32-bit vs 64-bit vs 128-bit in Development

A Brief History of Microprocessors

What is 32/64/128 bit?

32-bit Systems

64-bit Systems

128-bit Systems

Processor, OS, or Software?

How They Work Together

Checking Compatibility

Practical Steps

Why Even Bits and Multiples of 8?

Benefits of Using Multiples of 8

Conclusion

Solving Style Issues: Angular Material MDC Migration Guide

Angular Material MDC Migration

Steps for MDC Migration

Upgrade Angular, Material, and run the mdc-migration script provided by the Material team.

Update your theme file

Search throughout your application and replace the following classes, if you have used them.

Final Thoughts

Installing Java on Mac.

Which is better?

Install using SDKMan

Comprehensive Guide for Computer Science Grads

Introduction

1. Secret Mantra to understand any concept.

2. Find your Heroes. 🦸

Table Of Contents

Dynamic Tab Title in Angular