DEV Community: Ragul

Base64

Ragul — Thu, 10 Sep 2026 19:45:27 +0000

What Base64 Actually Is

Base64 is a way of representing binary data — images, files, encrypted bytes, anything made of raw 0s and 1s — using only printable text characters. It's not encryption, and it's not compression. It's purely a translation from binary into a text-safe format.

The name comes from the fact that it uses a 64-character alphabet:

Uppercase letters: A–Z (26 characters)
Lowercase letters: a–z (26 characters)
Digits: 0–9 (10 characters)
Two symbols, usually + and /
The = character, used for padding at the end

64 possible values map neatly onto 6 bits of data (since 2⁶ = 64), which is the mathematical trick that makes the whole scheme work.

Why Base64 Exists

Many systems — old email protocols, certain text fields, JSON, XML, and URLs — were designed to handle plain text, not arbitrary binary data. Sending raw binary through these channels can cause problems: bytes might get misinterpreted, special characters might break formatting, or control characters might get silently stripped or altered.

Base64 solves this by converting any binary data into a stream of safe, printable ASCII characters that can pass through virtually any text-based system without corruption.

How the Encoding Works

The process is mechanical once you see it laid out:

Take the binary data and group it into chunks of 3 bytes (24 bits).
Split those 24 bits into four groups of 6 bits each.
Map each 6-bit group to a character in the Base64 alphabet.
If the final group of bytes doesn't divide evenly into 3, pad the output with = characters so the length stays a multiple of 4.

That's why encoded Base64 output is always about 33% larger than the original data — three bytes of binary become four bytes of text.

A quick example: the text "Man" (3 bytes: M, a, n) encodes to TWFu. Three ASCII characters go in, four Base64 characters come out — a clean, evenly divisible case with no padding needed.

Where You'll Actually See It

Base64 shows up in more places than most people realize:

Email attachments — MIME uses Base64 to embed images, PDFs, and other files inside plain-text email messages.
Data URLs — Small images or fonts can be embedded directly into HTML or CSS using data:image/png;base64,... instead of a separate file request.
APIs and JSON — Since JSON only supports text, binary payloads like images or files are often Base64-encoded before being included in a request or response.
Authentication — Basic HTTP authentication headers encode the username:password pair in Base64 (note: this is not secure on its own, since Base64 is trivially reversible).
Storing binary data in databases or config files that only support text fields.

A Common Misconception

Because Base64-encoded text looks scrambled, people sometimes assume it's a form of encryption or security. It isn't. Anyone can decode Base64 instantly using a browser console, a command-line tool, or countless free websites — there's no secret key involved. It should be thought of purely as a format conversion, never as a way to protect sensitive information.

The Trade-Off to Remember

Base64 solves a real compatibility problem, but it isn't free. That roughly 33% size increase matters when you're sending large files over a network or storing lots of encoded data — it's extra bandwidth and storage for no added value beyond text-safety. In situations where binary transfer is already supported (like most modern file uploads), skipping Base64 entirely is usually the better choice.

The Takeaway

Base64 is a small, elegant piece of engineering that quietly keeps a huge portion of the internet working smoothly. It doesn't protect data and it doesn't shrink it — it simply makes binary information speak the universal language of plain text, so it can travel safely through systems that were never built to handle anything else.

Tailscale

Ragul — Wed, 09 Sep 2026 18:38:48 +0000

What Tailscale Actually Is

Tailscale is a mesh VPN built on top of WireGuard, a modern, minimal, heavily-audited VPN protocol. Install the Tailscale client on your laptop, phone, or server, sign in with an existing account (Google, GitHub, Microsoft, etc.), and that device joins your tailnet — a private network only your devices can see.

Unlike a traditional VPN, there's no central server all your traffic funnels through. Devices connect directly to each other wherever possible, encrypted end-to-end. Tailscale's infrastructure only helps devices find each other and negotiate that connection — it doesn't sit in the middle of your actual traffic.

Why People Use It

No more painful VPN setup. No port forwarding, no static IP allowlists — install the client, log in, done.
Works through NAT and firewalls automatically. Two devices behind separate home routers can still find a direct path to each other. When that's not possible, traffic relays through Tailscale's servers — still fully encrypted, just routed rather than direct.
Great for individuals, not just companies. A huge part of Tailscale's popularity comes from hobbyists running a home lab, self-hosting things like Nextcloud or Home Assistant, or just wanting to reach their desktop from anywhere. The free tier covers personal use with a generous device limit.

Standout Features

MagicDNS — every device gets a stable hostname (myserver.tailnet-name.ts.net) instead of you needing to remember an IP.
Taildrop — AirDrop-style file transfer between your own devices.
Subnet routers and exit nodes — expose your whole home LAN to your tailnet, or route all internet traffic through a trusted device.
Tailscale SSH — identity-based SSH access without manual key management.

My Setup: Home Server + Nextcloud

I use Tailscale specifically to reach my home server and my self-hosted Nextcloud storage — without opening any ports to the public internet.

Home server access — I install the Tailscale client directly on the home server, so it joins my tailnet just like my laptop and phone do. From anywhere, I can reach it by its Tailscale hostname instead of a public IP.
Nextcloud access — instead of exposing Nextcloud's port 443 to the internet, I point the Nextcloud desktop and mobile apps at the server's Tailscale hostname (e.g. homeserver.tailnet-name.ts.net). This keeps file sync and access completely private to my own devices.
MagicDNS — turned on so I never have to remember or type IP addresses for either service.
Mobile access — the Tailscale app has to be running in the background on my phone before the Nextcloud app can reach the server.
HTTPS — using tailscale cert to get a real Let's Encrypt-backed certificate for the tailnet hostname, so there are no self-signed cert warnings in the Nextcloud clients.

This setup means my storage server is reachable from any of my devices, anywhere, with no port forwarding and no attack surface exposed to the public internet.

Getting Started

Create a free account at tailscale.com.
Install the client on two devices.
Log in on both.
Ping one from the other by hostname.

No port forwarding, no static IPs, no certificate management required to get started.

Promises in JavaScript

Ragul — Mon, 07 Sep 2026 17:33:59 +0000

Imagine you order food at a restaurant. The waiter doesn't hand you the food right away — they hand you an order ticket instead. That ticket is a promise: your food will arrive, or the kitchen will tell you they're out of what you ordered. Either way, you're not just standing there frozen, waiting. You can keep chatting with your friends until the food (or the bad news) shows up.

That's exactly what a Promise is in JavaScript. It's a placeholder for something that will finish later, like fetching data from the internet, which doesn't happen instantly.

The Three States

A Promise is always in one of three states:

Pending – still waiting, like your food order still cooking
Fulfilled – it worked, your food arrived
Rejected – it failed, the kitchen ran out

Once it lands on fulfilled or rejected, it stays there. No take-backs.

Why Not Just Wait?

JavaScript doesn't like to sit around doing nothing while waiting for slow things like network requests. Instead of freezing the whole page, it hands you a Promise and moves on. Later, when the slow thing finishes, your Promise tells you what happened.

Using a Promise

The most common way to work with Promises today is async/await, because it reads almost like normal step-by-step code:

async function getWeather() {
  const data = await fetchWeather();
  console.log(data);
}

The await just means "pause here until this is done, then continue." If something goes wrong, you catch it like this:

async function getWeather() {
  try {
    const data = await fetchWeather();
    console.log(data);
  } catch (error) {
    console.log("Couldn't get the weather.");
  }
}

That's really the whole idea: await for waiting, try/catch for handling problems.

Callback in JavaScript

Ragul — Fri, 04 Sep 2026 18:34:24 +0000

If you're just starting out with JavaScript, you've probably come across the word "callback" and felt a little confused. Don't worry — it's a simple idea with a slightly intimidating name. Let's break it down.

The Simple Definition

A callback is just a function that you pass into another function, so it can be run later.

That's really it. In JavaScript, functions aren't just things you call — they're values you can pass around, just like a number or a string. So you can hand a function to another function as an argument.

A Real-Life Analogy

Imagine you order food at a restaurant. Instead of standing at the counter waiting for it, you give the cashier your phone number. They call you back the moment your food is ready.

You didn't wait around doing nothing — and the cashier knows exactly what to do once your order is done: call your number.

That's exactly what a callback is. You're saying:

"Here's a function. Run it once you're done doing your thing."

A Simple Code Example

function orderFood(callback) {
  console.log("Order placed!");
  callback();
}

function pickUpOrder() {
  console.log("Order picked up!");
}

orderFood(pickUpOrder);

Output:

Order placed!
Order picked up!

Here, pickUpOrder is the callback — a function passed into orderFood, to be run when orderFood decides it's time.

Why Not Just Call the Function Normally?

Good question. In the example above, you could've just called pickUpOrder() directly and it would look the same. But callbacks become important when something takes time — like waiting for a timer, a file to load, or data from a server.

JavaScript doesn't freeze and wait around for these things. Instead, it keeps running your other code, and calls your callback function later, once the task is finished.

console.log("Order placed!");

setTimeout(() => {
  console.log("Order ready!");
}, 3000); // waits 3 seconds

console.log("Doing homework while I wait...");

Output:

Order placed!
Doing homework while I wait...
Order ready!

Notice: "Order ready!" shows up last, even though it's written in the middle of the code. That's the whole point of a callback — it runs whenever the task finishes, not necessarily in the order it's written.

You've Probably Already Used One

If you've ever written code like this, you've used a callback without knowing it:

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

The arrow function here is a callback — it doesn't run right away. It waits until the button is actually clicked.

Quick Summary

A callback is a function passed into another function.
It gets called ("called back") once that other function is ready for it.
Callbacks are especially useful for things that take time — timers, clicks, loading data — so your code doesn't have to freeze and wait.

Once this clicks, you're ready to explore where callbacks are used everywhere in JavaScript — from button clicks to loading data from the internet. It's one of the most important building blocks to understand as a beginner.

Functions in JavaScript

Ragul — Wed, 02 Sep 2026 17:19:14 +0000

Functions are one of the most fundamental building blocks in JavaScript. They let you package up a piece of logic, give it a name, and reuse it wherever you need it. If you're learning JavaScript, getting comfortable with functions early will save you a lot of headaches later on.

What Is a Function?

At its core, a function is a reusable block of code designed to perform a specific task. Instead of writing the same logic over and over, you write it once inside a function and simply "call" that function whenever you need it.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Ragul")); // Hello, Ragul!

Here, greet takes an input (called a parameter), does something with it, and returns an output.

Ways to Write Functions

JavaScript gives you several ways to define a function, and each has its own use cases.

1. Function Declarations

This is the classic style, and it's "hoisted" — meaning you can call it before it appears in your code.

function add(a, b) {
  return a + b;
}

2. Function Expressions

Here, a function is assigned to a variable. Unlike declarations, these are not hoisted in the same way, so they must be defined before use.

const multiply = function (a, b) {
  return a * b;
};

3. Arrow Functions

Introduced in ES6, arrow functions offer a shorter syntax and behave differently with this (more on that below).

const subtract = (a, b) => a - b;

For a single expression, you can even skip the curly braces and the return keyword — the result is returned automatically.

Parameters and Default Values

Functions can take any number of parameters, and you can assign them default values in case no argument is passed.

function greet(name = "friend") {
  return `Hey there, ${name}!`;
}

console.log(greet()); // Hey there, friend!

You can also accept an unlimited number of arguments using the rest parameter:

function sumAll(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sumAll(1, 2, 3, 4)); // 10

Arrays in JavaScript

Ragul — Tue, 01 Sep 2026 18:26:01 +0000

Arrays are one of the most fundamental data structures in JavaScript. They let you store multiple values in a single variable, and JavaScript gives you a rich set of built-in methods to work with them. In this post, we'll explore arrays and dig into some of the most commonly used methods: push, pop, shift, unshift, and slice.

What is an Array?

An array is an ordered collection of values. You can create one using square brackets:

const fruits = ["apple", "banana", "mango"];
console.log(fruits); // ["apple", "banana", "mango"]

Each item in an array has an index, starting from 0:

console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "mango"

Arrays can hold any type of data — strings, numbers, objects, even other arrays — and you can mix types freely:

const mixed = [1, "two", true, { name: "three" }, [4, 5]];

Adding and Removing Elements

JavaScript gives you four core methods for adding or removing items from the ends of an array: push, pop, shift, and unshift.

`push()` — Add to the End

push() adds one or more elements to the end of an array and returns the new length.

const fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits); // ["apple", "banana", "mango"]

fruits.push("kiwi", "grape");
console.log(fruits); // ["apple", "banana", "mango", "kiwi", "grape"]

`pop()` — Remove from the End

pop() removes the last element from an array and returns that removed value.

const fruits = ["apple", "banana", "mango"];
const removed = fruits.pop();

console.log(removed); // "mango"
console.log(fruits);  // ["apple", "banana"]

push and pop are fast because they only affect the end of the array — this makes them ideal for implementing things like a stack (Last In, First Out).

`unshift()` — Add to the Beginning

unshift() adds one or more elements to the start of an array and returns the new length.

const fruits = ["banana", "mango"];
fruits.unshift("apple");
console.log(fruits); // ["apple", "banana", "mango"]

fruits.unshift("kiwi", "grape");
console.log(fruits); // ["kiwi", "grape", "apple", "banana", "mango"]

`shift()` — Remove from the Beginning

shift() removes the first element from an array and returns that removed value.

const fruits = ["apple", "banana", "mango"];
const removed = fruits.shift();

console.log(removed); // "apple"
console.log(fruits);  // ["banana", "mango"]

shift and unshift are useful for implementing a queue (First In, First Out), though keep in mind they're slower than push/pop on large arrays since every remaining element has to shift its index.

Quick Comparison

Method	Action	Affects	Returns
`push()`	Add to end	End	New array length
`pop()`	Remove from end	End	Removed element
`unshift()`	Add to beginning	Start	New array length
`shift()`	Remove from beginning	Start	Removed element

`slice()` — Extracting a Portion of an Array

Unlike the methods above, slice() doesn't modify the original array. Instead, it returns a new array containing a copy of a portion of the original, based on start and end indices.

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(1, 3)); // [20, 30]
console.log(numbers);             // [10, 20, 30, 40, 50] (unchanged!)

Syntax: array.slice(startIndex, endIndex) — the endIndex is not included in the result.

A few handy variations:

const numbers = [10, 20, 30, 40, 50];

numbers.slice(2);     // [30, 40, 50]  → from index 2 to the end
numbers.slice(-2);    // [40, 50]      → last two elements
numbers.slice();      // [10, 20, 30, 40, 50] → a full shallow copy

That last example — calling slice() with no arguments — is a common trick for cloning an array without mutating the original.

`slice()` vs `splice()`

It's worth noting that slice() is often confused with splice(). The key difference:

slice() — does not change the original array; returns a new array.
splice() — does change the original array; can add or remove elements in place.

const numbers = [10, 20, 30, 40, 50];
numbers.splice(1, 2); // removes 2 elements starting at index 1
console.log(numbers); // [10, 40, 50] (original array is modified!)

click to download Arrays.js

History of the Internet

Ragul — Tue, 01 Sep 2026 02:31:01 +0000

The Internet has fundamentally changed how we work, learn, and connect. It evolved from a clunky military experiment into the invisible digital fabric that holds our modern world together.

Let’s take a trip back in time and break down the fascinating, year-by-year history of how the Internet came to be!

1. The Early Years (Connecting the First Computers)

Before there were websites or smartphones, there were massive, room-sized computers that couldn't even talk to each other.

1969 (The First Connection): Funded by the US Department of Defense, ARPANET became the world’s first packet-switching network. The very first message, "LO" (intended to be "LOGIN"), was sent between UCLA and Stanford. It crashed halfway through, but history was made.
1971 (The First Email): Programmer Ray Tomlinson invented network email, famously choosing the @ symbol to separate the user's name from the computer's name.
1983 (Birth of the Modern Internet): On January 1, 1983, ARPANET officially adopted the TCP/IP protocol. This gave different computer networks a universal language to communicate with each other, officially birthing the "Internet" as a network of networks.

2. The 1990s (The Web Goes Public)

For a long time, the Internet was just text on a screen used by academics and researchers. The 90s brought graphics, hyperlinks, and everyday users.

1989 - 1991 (The World Wide Web): Tim Berners-Lee invented the World Wide Web at CERN, creating HTML, HTTP, and URLs. In 1991, the Web became publicly accessible, giving the Internet a user-friendly interface.
1993 (The First Browser): The Mosaic browser was released. It was the first popular graphical browser, meaning you could finally see images and text side-by-side.
1995 (The Commercial Boom): The Internet became a place for business. Heavyweights like Amazon and eBay opened their virtual doors, and the browser wars began.
1998 (The Search Engine King): Google was founded in a Stanford dorm room, forever changing how we organize and find information online.

3. The 2000s and Beyond (Broadband, Social, and Mobile)

The 2000s saw the Internet move from sluggish dial-up modems to an "always-on" culture.

2001 (Crowdsourced Knowledge): Wikipedia launched, proving that massive, collaborative information sharing was possible.
2004 - 2005 (The Social Revolution): Facebook launched in 2004, followed by YouTube in 2005. The Internet shifted from consuming static pages to creating and sharing user-generated content.
2007 (The Mobile Internet): Apple released the iPhone, putting the power of the entire Internet into the pockets of millions and sparking the mobile app revolution.

Quick Cheat Sheet: The Internet Timeline

Year	Milestone	Why It Matters
1969	ARPANET	The first computers connect and share data
1971	First Email	Introduction of the @ symbol for digital messages
1983	TCP/IP Adopted	Different networks could finally speak the same language
1991	WWW Public Release	Websites and hyperlinks become accessible to everyone
1995	Dot-Com Boom	Amazon, eBay, and the commercial web take off
2007	The iPhone	Brought widespread mobile internet access to the masses

Flutter

Ragul — Sat, 29 Aug 2026 19:03:53 +0000

Flutter is an open-source UI software development kit (SDK) created by Google for building natively compiled, multi-platform applications from a single codebase.

It supports the development of applications for mobile (iOS, Android), web, desktop (Windows, macOS, Linux), and embedded devices.

Key Characteristics

Language: It uses the Dart programming language, which is optimized for fast development and high performance.
Widgets: The framework is built around a widget-based architecture where the user interface is composed of various customizable widgets.
Performance: Flutter compiles code to native machine code (ARM/Intel) or JavaScript, allowing it to bypass traditional web views or bridges for high performance and smooth rendering via its own 2D rendering engine.
Hot Reload: It features a "hot reload" capability that allows developers to see code changes in real-time without restarting the application.
Cross-Platform: It enables developers to write code once and deploy it across six major platforms, significantly reducing development time and cost compared to native development.

Reference

https://flutter.dev/

JavaScript Loops

Ragul — Fri, 28 Aug 2026 18:03:25 +0000

Have you ever found yourself writing the same line of code over and over again?

Imagine needing to log numbers from 1 to 100 or process a list of items. Writing 100 console.log() statements is not only exhausting—it breaks the core programming rule: DRY (Don't Repeat Yourself).

That’s where Loops come to the rescue!

In this guide, we'll break down the three fundamental loops in JavaScript:

while Loop
do...while Loop
for Loop

Let’s dive into how each works, when to use them, and how to avoid the dreaded infinite loop!

1. The `while` Loop (Check First, Run Later)

The while loop evaluates a condition before executing the code block. If the condition is true, the code runs; if it's false, JavaScript skips it entirely.

Syntax

while (condition) {
  // Code to execute as long as condition is true
}

Practical Example

let count = 1;

while (count <= 5) {
  console.log(`Count is: ${count}`);
  count++; // Don't forget to update your counter!
}

Output:

Count is: 1
Count is: 2
Count is: 3
Count is: 4
Count is: 5

How It Works Step-by-Step

Initialize count = 1.
Check if count <= 5 (1 <= 5 is true).
Run the body → prints Count is: 1.
Increment count to 2.
Repeat until count becomes 6.
Check count <= 5 (6 <= 5 is false) → Loop terminates!

Best Use Case: When you don't know the exact number of iterations in advance (e.g., polling an API until a status changes to "ready" or waiting for specific user input).

2. The `do...while` Loop (Run First, Check Later)

The do...while loop is very similar to the while loop, with one crucial difference: it is guaranteed to run at least once, even if the condition is false from the start.

Syntax

do {
  // Code executes first...
} while (condition); // ...then condition is checked!

Example: Normal Execution

let attempts = 1;

do {
  console.log(`Attempt #${attempts}`);
  attempts++;
} while (attempts <= 3);

Output:

Attempt #1
Attempt #2
Attempt #3

What Happens When Condition Starts as False?

let score = 100;

do {
  console.log(`Current score: ${score}`);
} while (score < 50);

Output:

Current score: 100

Even though score < 50 is false, the code block still executed once before evaluating the condition!

Best Use Case: When an action must occur at least once regardless of conditions (e.g., prompting a user for input, rolling a die at least once, or performing an initial handshake attempt).

3. The `for` Loop (The All-in-One Powerhouse)

The for loop is the most commonly used loop in JavaScript. It neatly combines initialization, condition, and update/increment in a single, compact line.

Syntax

for (initialization; condition; update) {
  // Code to execute
}

Initialization: Executes once before the loop starts (let i = 0).
Condition: Evaluated before every iteration (i < 5).
Update: Executes after every iteration (i++).

Practical Example

for (let i = 1; i <= 5; i++) {
  console.log(`Iteration: ${i}`);
}

Output:

Iteration: 1
Iteration: 2
Iteration: 3
Iteration: 4
Iteration: 5

Real-World Example: Iterating Over an Array

const frameworks = ["React", "Vue", "Angular", "Svelte"];

for (let i = 0; i < frameworks.length; i++) {
  console.log(`${i + 1}. ${frameworks[i]}`);
}

Output:

1. React
2. Vue
3. Angular
4. Svelte

Best Use Case: When you know exactly how many times the loop should run (e.g., fixed counts, iterating arrays via indices).

Bonus: Loop Controls (`break` and `continue`)

Want more control inside your loops? Use these two keywords:

break: Immediately exits the loop completely.

   for (let i = 1; i <= 10; i++) {
     if (i === 4) break; // Exits when i reaches 4
     console.log(i);
   }
   // Prints: 1, 2, 3

continue: Skips the current iteration and jumps straight to the next one.

   for (let i = 1; i <= 5; i++) {
     if (i === 3) continue; // Skips printing 3
     console.log(i);
   }
   // Prints: 1, 2, 4, 5

Common Pitfall: The Infinite Loop

If your condition never becomes false, your loop will run forever and freeze/crash your browser or Node.js process.

// DANGER: Infinite Loop!
let x = 1;
while (x > 0) {
  console.log(x);
  x++; // x will always be greater than 0!
}

Pro Tip: Always double-check your loop's exit condition and make sure your counter or state actually moves toward terminating!

Quick Summary & Comparison

Feature	`while` Loop	`do...while` Loop	`for` Loop
Condition Check	Before block executes	After block executes	Before each iteration
Minimum Runs	`0` times	`1` time	`0` times
Best For	Dynamic / unknown iterations	Must run at least once	Known iterations / array indexing
Syntax Style	Separate init & update	Separate init & update	Compact (all-in-one header)

Markdown( .md) file

Ragul — Thu, 27 Aug 2026 16:08:34 +0000

If you've ever seen a file named README.md on GitHub, or noticed text with weird **stars** and # symbols, you've run into Markdown. This guide explains what it is, why people use it, and how to write it — in plain, simple terms.

What Is Markdown?
Why Do People Use It?
Headings
Bold and Italic Text
Lists
Links
Images
Code
Blockquotes
Tables
Horizontal Line
Line Breaks (a Common Gotcha)
Where Markdown Is Used
Quick Summary

1. What Is Markdown?

Markdown is a simple way to format text using plain symbols, instead of clicking buttons like "Bold" or "Bullet List" in a word processor.

You type something like this:

# Hello World
This is **bold** and this is *italic*.

And it turns into this when it's rendered (displayed nicely):

Hello World

This is bold and this is italic.

The file itself is just a plain text file — nothing fancy — saved with a .md extension (short for "Markdown"). You can open it in Notepad, VS Code, or any text editor, and it'll still make sense even unformatted, because the symbols are simple and readable on their own.

2. Why Do People Use It?

It's simple. You don't need any special software — just a text editor.
It's readable even as plain text. A .md file looks fine even before it's turned into a nicely styled page.
It's everywhere. GitHub, GitLab, Notion, Reddit, Discord, and countless apps understand Markdown.
It's fast to write. No mouse clicks — just type symbols as you go.

That's why documentation files, blog posts (like this one!), and README files are almost always written in Markdown.

3. Headings

Use the # symbol to make headings. The number of # symbols controls the size — one # is the biggest heading, and it gets smaller from there.

# Heading 1 (biggest)
## Heading 2
### Heading 3
#### Heading 4 (smallest commonly used)

Renders as:

Heading 1 (biggest)

Heading 2

Heading 3

Heading 4 (smallest commonly used)

Tip: Always leave a space after the # symbols, or it won't work.

4. Bold and Italic Text

This is **bold text**.
This is *italic text*.
This is ***bold and italic***.

Renders as:

This is bold text.
This is italic text.
This is bold and italic.

You can also use __double underscores__ for bold and _single underscores_ for italic — they work the same way. Most people stick to asterisks (*) since it's more common.

5. Lists

Bullet list — use a dash, star, or plus sign:

- Apples
- Bananas
- Oranges

Renders as:

Apples
Bananas
Oranges

Numbered list — use numbers followed by a period:

1. Wake up
2. Make coffee
3. Write code

Renders as:

Wake up
Make coffee
Write code

Tip: You don't need to get the numbers exactly right — Markdown will re-number them for you automatically. Typing 1. three times in a row still produces 1, 2, 3.

6. Links

[Click here to visit Google](https://www.google.com)

Renders as:

Click here to visit Google

The pattern is always: square brackets for the text people see, then parentheses right after for the actual web address — no space in between.

[text people see](https://the-actual-link.com)

7. Images

Images work almost exactly like links, but with an ! in front:

![A cute dog](https://example.com/dog.jpg)

The text inside the square brackets (A cute dog) is the "alt text" — a short description shown if the image can't load, and used by screen readers for accessibility.

8. Code

Inline code (for a single word or short snippet) — wrap it in single backticks:

Use the `console.log()` function to print something.

Renders as:

Use the console.log() function to print something.

Code blocks (for multiple lines of code) — wrap the whole block in three backticks, with the language name right after the first set of backticks:

```javascript
function greet(name) {
  console.log("Hello, " + name);
}
```

Renders as:

function greet(name) {
  console.log("Hello, " + name);
}

Adding the language name (like javascript, python, or html) after the first three backticks tells Markdown to add color-coded syntax highlighting.

9. Blockquotes

Use > at the start of a line to quote something:

> This is a quote.
> It can span multiple lines.

Renders as:

This is a quote.
It can span multiple lines.

This is commonly used to highlight a note, a quote from someone, or a warning.

10. Tables

Tables use pipes (|) to separate columns and dashes (-) to separate the header row from the data:

| Name  | Age | City     |
|-------|-----|----------|
| Sam   | 25  | Boston   |
| Alex  | 30  | New York |

Renders as:

Name	Age	City
Sam	25	Boston
Alex	30	New York

Tip: The dashes don't need to line up perfectly — even |-|-|-| works. Markdown figures out the columns from the pipes.

11. Horizontal Line

Three or more dashes (or asterisks) on their own line create a horizontal divider:

---

Renders as a line separating sections — useful for splitting up parts of a long document (you've seen several of these already in this post).

12. Line Breaks (a Common Gotcha)

This trips up almost everyone starting out: pressing Enter once in Markdown does not create a new line when rendered.

This is line one.
This is line two.

Renders as:

This is line one.
This is line two.

(They get squished onto one line!)

To force a real line break, either:

Leave a completely empty line between them (this starts a new paragraph), or
Add two spaces at the end of a line before pressing Enter.

This is line one.

This is line two.

This renders as two separate paragraphs, properly spaced apart.

13. Where Markdown Is Used

GitHub / GitLab — README files, issues, pull request descriptions
Documentation sites — many docs are written and generated from .md files
Note-taking apps — Notion, Obsidian, and many others support Markdown
Chat apps — Discord and Slack use a simplified version of Markdown for bold/italic/code formatting
Blogging platforms — many static site generators (like Jekyll or Hugo) build entire websites from .md files

14. Quick Summary

What you type	What you get
`# Text`	Heading
`Text`	Bold
`Text`	Italic
`- Text`	Bullet point
`1. Text`	Numbered item
`[Text](url)`	Link
`![Alt](url)`	Image
`Text`	Inline code

```code```

| Code block |
| > Text | Blockquote |
| \| col \| col \| | Table |
| --- | Horizontal line |

The big idea: Markdown lets you format text using a handful of simple, memorable symbols — no toolbar, no mouse, no fuss. Once you learn the dozen or so symbols in the table above, you can write clean, formatted documents anywhere Markdown is supported.

References in JavaScript

Ragul — Thu, 27 Aug 2026 15:46:13 +0000

The Basic Idea

Think of a variable like a name tag stuck on a value.

Simple values (numbers, strings, true/false) — each variable gets its own separate value.
Objects and arrays — variables can share the same value.

That's really the whole concept. Everything else is just examples of this playing out.

1. Simple Values Are Independent

Numbers, strings, and booleans are "simple" (also called primitive) values. When you copy them into a new variable, you get a totally separate copy.

let age1 = 5;
let age2 = age1; // age2 gets its own copy of the number 5

age2 = 10; // change age2 only

console.log(age1); // 5   <- did not change
console.log(age2); // 10

Changing age2 never touches age1. They're two separate values now, even though they started out equal.

2. Objects and Arrays Can Be Shared

Objects and arrays work differently. When you copy them into a new variable, you're not making a new object — you're just giving the same object a second name tag.

let cart1 = { items: 5 };
let cart2 = cart1; // cart2 is just another name for the SAME object

cart2.items = 10; // change it using cart2

console.log(cart1.items); // 10   <- cart1 changed too!

cart1 and cart2 are pointing at the exact same object. Change it through one name, and it shows up through the other name too.

Simple rule: primitives copy the value. Objects copy the pointer to the value.

3. What This Means Inside Functions

If you reassign a parameter inside a function, it never affects the original variable — this is true for everything, even objects:

function setToHundred(number) {
  number = 100; // this only changes the LOCAL copy inside the function
}

let myNumber = 5;
setToHundred(myNumber);

console.log(myNumber); // still 5

But if you mutate (edit) an object's property inside a function, the original object changes too — because it's the same object:

function setToHundred(person) {
  person.age = 100; // this edits the SHARED object, not a copy
}

let myPerson = { age: 5 };
setToHundred(myPerson);

console.log(myPerson.age); // 100  <- it changed!

So remember:

Reassigning = a whole variable → stays local, doesn't leak out.
Editing a property on an object → changes the real object everywhere.

4. Comparing Objects

=== checks whether two things are the exact same object in memory — not whether they look the same.

console.log({} === {}); // false  <- two different empty objects
console.log([] === []); // false  <- same reason, two different arrays

let box1 = { size: 1 };
let box2 = box1; // same box, two names

console.log(box1 === box2); // true  <- same object

if Statements in JavaScript

Ragul — Wed, 26 Aug 2026 17:31:01 +0000

1. if

Use the JavaScript if statement to execute a block of code when a condition is true.

if (condition) {
  //  block of code to be executed if the condition is true
}

if (age >= 18) {
  console.log("You can drive!");
}

2. Nested if

You can use an if statement inside another if statement:

let age = 18;
let country = "India";
let text = "You can Not drive!";

if (country == "India") {
  if (age >= 18) {
    text = "You can drive!";
  }
}

Nested if statements can make your code more complex.A better solution is to use the logical AND operator:

let age = 18;
let country = "India";
let text = "You can Not drive!";

if (country == "India" && age >= 18) {
  text = "You can drive!";
}

3. The else Statement

Use the else statement to specify a block of code to be executed if a condition is false.

if (condition) {
  //  block of code to be executed if the condition is true
} else {
  //  block of code to be executed if the condition is false
}

if (age >= 18) {
  console.log("You can drive!");
} else {
  console.log("You can Not drive!");
}

4. The else if Statement

Use the else if statement to specify a new condition if the first is false.

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

DEV Community: Ragul

Base64

What Base64 Actually Is

Why Base64 Exists

How the Encoding Works

Where You'll Actually See It

A Common Misconception

The Trade-Off to Remember

The Takeaway

Tailscale

What Tailscale Actually Is

Why People Use It

Standout Features

My Setup: Home Server + Nextcloud

Getting Started

Promises in JavaScript

The Three States

Why Not Just Wait?

Using a Promise

Callback in JavaScript

The Simple Definition

A Real-Life Analogy

A Simple Code Example

Why Not Just Call the Function Normally?

You've Probably Already Used One

Quick Summary

Functions in JavaScript

What Is a Function?

Ways to Write Functions

1. Function Declarations

2. Function Expressions

3. Arrow Functions

Parameters and Default Values

Arrays in JavaScript

What is an Array?

Adding and Removing Elements

push() — Add to the End

pop() — Remove from the End

unshift() — Add to the Beginning

shift() — Remove from the Beginning

Quick Comparison

slice() — Extracting a Portion of an Array

slice() vs splice()

History of the Internet

1. The Early Years (Connecting the First Computers)

2. The 1990s (The Web Goes Public)

3. The 2000s and Beyond (Broadband, Social, and Mobile)

Flutter

Key Characteristics

Reference

JavaScript Loops

1. The while Loop (Check First, Run Later)

Syntax

Practical Example

How It Works Step-by-Step

2. The do...while Loop (Run First, Check Later)

Syntax

Example: Normal Execution

What Happens When Condition Starts as False?

3. The for Loop (The All-in-One Powerhouse)

Syntax

Practical Example

Real-World Example: Iterating Over an Array

Bonus: Loop Controls (break and continue)

Common Pitfall: The Infinite Loop

Quick Summary & Comparison

Markdown( .md) file

Table of Contents

1. What Is Markdown?

Hello World

2. Why Do People Use It?

3. Headings

Heading 1 (biggest)

Heading 2

Heading 3

Heading 4 (smallest commonly used)

4. Bold and Italic Text

5. Lists

6. Links

7. Images

`push()` — Add to the End

`pop()` — Remove from the End

`unshift()` — Add to the Beginning

`shift()` — Remove from the Beginning

`slice()` — Extracting a Portion of an Array

`slice()` vs `splice()`

1. The `while` Loop (Check First, Run Later)

2. The `do...while` Loop (Run First, Check Later)

3. The `for` Loop (The All-in-One Powerhouse)

Bonus: Loop Controls (`break` and `continue`)