DEV Community: Ragul

localStorage in Web Browser

Ragul — Mon, 28 Sep 2026 21:52:53 +0000

localStorage is a small storage space inside your web browser. A website can use it to save information on your device, and the information stays there even after you close the browser or restart your computer.

How it works

Think of it as a tiny notebook that each website gets to write in. Every entry has a name (called a key) and a value. A website can only read its own notebook, not the notebooks of other websites.

Basic example

// Save something
localStorage.setItem('theme', 'dark');

// Read it back
const theme = localStorage.getItem('theme');

// Delete it
localStorage.removeItem('theme');

// Delete everything
localStorage.clear();

localStorage can only store text. To save an object or list, convert it first:

const user = { name: 'Ragul', age: 22 };

localStorage.setItem('user', JSON.stringify(user));

const saved = JSON.parse(localStorage.getItem('user'));

What is it used for?

Remembering dark mode or light mode
Saving a draft of a form
Keeping a to-do list
Remembering a user's language choice

Good things about it

Easy to use
Data stays after closing the browser
Holds about 5 MB
Works in all modern browsers

Things to be careful about

Not secure. Never store passwords or private tokens in it.
Text only. Objects need JSON.stringify and JSON.parse.
Small size. It is not meant for large data.
Can be cleared. Users can delete it anytime from browser settings.

Props in React

Ragul — Fri, 25 Sep 2026 19:33:03 +0000

Props pass data from a parent component to a child component. Props are read-only — a child can't change them. Data flows one way: parent to child.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Ragul" />

Syntax

Props arrive as one object. You can destructure them for short code:

function Profile({ name, age }) {
  return <p>{name}, {age}</p>;
}

Characteristics

Read-only — a component can't change its own props
One-way flow — parent to child only
Any type — text, numbers, booleans, arrays, objects, functions

To let a child trigger a change, the parent passes a function as a prop:

function Counter({ count, onIncrement }) {
  return <button onClick={onIncrement}>{count}</button>;
}

`children` prop

Holds whatever is placed between a component's tags. Used for wrappers like cards or modals.

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card><p>Nested content</p></Card>

Default values

function Button({ label = "Submit" }) {
  return <button>{label}</button>;
}

Props vs. State

	Props	State
From	Parent	The component itself
Changeable	No	Yes, via `useState`
Like	Function arguments	Local variables

Library vs. Framework

Ragul — Tue, 22 Sep 2026 06:18:22 +0000

Library and Framework are two terms used in software engineering to describe reusable code that developers incorporate into their own projects. Although often used interchangeably in casual conversation, the two refer to distinct architectural relationships between the reusable code and the application that uses it, primarily distinguished by the concept of inversion of control (IoC).

Overview
Core Distinction
Library
Framework
Comparison Table
Common Misconceptions
Examples
See Also

Overview

In software development, both libraries and frameworks exist to help developers avoid rewriting common functionality from scratch. The key difference lies not in what they do, but in who controls the flow of execution during a program's runtime.

Core Distinction

The relationship is generally summarized by the Hollywood Principle: "Don't call us, we'll call you."

	Library	Framework
Control flow	Application code calls the library	Framework calls the application code
Architectural role	Tool	Skeleton / Foundation

This concept is formally known as Inversion of Control. In a library-based architecture, control remains with the developer. In a framework-based architecture, control is inverted — the framework dictates the structure, and developer-written code is inserted into predefined extension points.

Library

A library is a collection of pre-written code — typically functions, classes, or modules — that a developer explicitly calls when needed. The developer retains full control over the application's architecture and decides when, where, and whether to invoke the library's functionality.

Characteristics

Called by the user's code (not the reverse)
Generally narrow in scope, performing a specific task
Can typically be swapped for an alternative library with moderate effort
Imposes minimal structural constraints on the surrounding codebase

Example

import { format } from 'date-fns';
const today = format(new Date(), 'yyyy-MM-dd');

Here, the developer chooses the exact point in the program at which the library function is invoked.

Framework

A framework is a foundational structure that dictates the architecture of an application. Rather than being called by the developer, a framework calls developer-supplied code at points it defines, commonly referred to as hooks, callbacks, or lifecycle methods.

Characteristics

Calls the user's code (inversion of control)
Typically broad in scope, governing overall application structure
More difficult to replace once deeply integrated
Enforces conventions, patterns, and file/folder organization

Example

def my_view(request):
    return HttpResponse("Hello, world!")

In this Django example, the developer does not initiate the request-handling process. The framework's internal routing mechanism invokes my_view() at the appropriate time.

Comparison Table

Criterion	Library	Framework
Who calls whom	You call it	It calls you
Control flow	Retained by developer	Inverted (held by framework)
Flexibility	High	Lower
Structural imposition	Minimal	Significant
Learning curve	Typically incremental	Typically steep, holistic
Ease of replacement	Relatively easy	Often difficult
Analogy	Hiring a specialist contractor	Using a prefabricated house kit

Common Misconceptions

"React is a framework."
React is officially classified by its maintainers as a library, since it is primarily concerned with rendering UI and does not dictate routing, state management, or application structure. Meta-frameworks built atop React, such as Next.js, do exhibit framework characteristics and impose structural conventions.

"Bigger tools are always frameworks."
Scope and size are not defining criteria. A large tool can still be a library if control flow remains with the developer; a small tool can technically be a framework if it inverts control.

Examples

Libraries

React
Lodash
Axios
jQuery
NumPy

Frameworks

Angular
Django
Ruby on Rails
Spring
ASP.NET
Next.js

React

Ragul — Sun, 20 Sep 2026 19:00:32 +0000

React (also known as React.js or React.JS) is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.

React was first released in May 2013. It was created by Jordan Walke, a software engineer at Facebook, who was influenced by an earlier library called XHP.

Overview

React allows developers to create large web applications that can change data without reloading the page. Its main goals are to be efficient, declarative, and flexible. It focuses solely on the view layer of an application, meaning it handles rendering the user interface, while other concerns such as routing and data management are typically handled by additional libraries.

Key Concepts

Components — Independent, reusable pieces of code that return a piece of user interface.
Virtual DOM — An in-memory representation of the real Document Object Model (DOM), which React uses to determine the most efficient way to update the browser.
JSX — A syntax extension that allows developers to write HTML-like code within JavaScript.
State — Data that changes over time within a component.
Props — Short for "properties," used to pass data from parent components to child components.

History

2011 — Deployed on Facebook's newsfeed.
2012 — Deployed on Instagram.
May 2013 — Open-sourced at the JSConf US conference.
2015 — React Native released, extending React's component-based approach to mobile app development for iOS and Android.
2017 — React 16 released, introducing a new internal architecture known as Fiber.

Usage

React is widely used for developing single-page applications and mobile applications. It is used by numerous large-scale organizations, including Meta, Netflix, Airbnb, and Uber. It also serves as the underlying foundation for popular frameworks such as Next.js and Gatsby.

Array Methods in JavaScript

Ragul — Tue, 15 Sep 2026 21:06:42 +0000

Arrays are one of the most important and frequently used data structures in JavaScript. Whether you are manipulating data, searching for specific items, or transforming a list into a completely new format, JavaScript provides a rich set of built-in array methods to make your life easier.

In this guide, we will explore 23 essential array methods. To keep things consistent and easy to follow, we'll use a running theme of telecom network providers for our examples!

Mutator Methods (Modify the Original Array)

These methods change the array they are called upon.

1. `push()`

Adds one or more elements to the end of an array and returns the new length of the array.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.push('tata');
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea', 'tata']

2. `pop()`

Removes the last element from an array and returns that element.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let last = providers.pop();
// last is 'idea', providers is ['jio', 'airtel', 'vi', 'bsnl']

3. `shift()`

Removes the first element from an array and returns that removed element.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let first = providers.shift();
// first is 'jio', providers is ['airtel', 'vi', 'bsnl', 'idea']

4. `unshift()`

Adds one or more elements to the beginning of an array and returns the new length.

let providers = ['airtel', 'vi', 'bsnl', 'idea'];
providers.unshift('jio');
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea']

5. `delete` (Operator)

Removes a property. On arrays, it deletes the element but leaves an undefined hole without changing the array's length. (Note: Generally, it's better to use splice() instead).

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
delete providers[1];
// Result: ['jio', undefined, 'vi', 'bsnl', 'idea']

6. `splice()`

The Swiss Army knife of arrays. It changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Insert Example:

let providers = ['jio', 'airtel', 'idea'];
providers.splice(1, 0, 'vi', 'bsnl'); // Start at index 1, delete 0, insert 'vi' & 'bsnl'
// Result: ['jio', 'vi', 'bsnl', 'airtel', 'idea']

Delete Example:

let arr = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
arr.splice(2, 2); // Start at index 2, delete 2 elements
// Result: ['jio', 'airtel', 'idea']

Replace Example:

let list = ['jio', 'airtel', 'idea'];
list.splice(1, 1, 'vi'); // Start at index 1, delete 1, insert 'vi'
// Result: ['jio', 'vi', 'idea']

7. `sort()`

Sorts the elements of an array in place and returns the reference to the same array.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.sort();
// Result: ['airtel', 'bsnl', 'idea', 'jio', 'vi']

8. `reverse()`

Reverses an array in place. The first element becomes the last, and the last becomes the first.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.reverse();
// Result: ['idea', 'bsnl', 'vi', 'airtel', 'jio']

Accessor & Transform Methods

These methods do not modify the original array; instead, they return a new array, string, or value.

9. `slice()`

Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let sliced = providers.slice(1, 3);
// Result: ['airtel', 'vi']

10. `join()`

Creates and returns a new string by concatenating all of the elements in an array, separated by a specified string.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let str = providers.join('-');
// Result: 'jio-airtel-vi-bsnl-idea'

11. `split()` (String Method)

Divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array.

let str = 'jio,airtel,vi';
let arr = str.split(',');
// Result: ['jio', 'airtel', 'vi']

12. `concat()`

Used to merge two or more arrays. It does not change the existing arrays, but instead returns a new array.

let group1 = ['jio', 'airtel'];
let group2 = ['vi', 'bsnl'];
let merged = group1.concat(group2);
// Result: ['jio', 'airtel', 'vi', 'bsnl']

13. `flat()`

Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

let nested = [['jio', 'airtel'], ['vi', 'bsnl'], 'idea'];
let flatArr = nested.flat();
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea']

14. `map()`

Creates a new array populated with the results of calling a provided function on every element in the calling array.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let prices = arr.map(p => p.price);
// Result: [199, 299]

15. `filter()`

Creates a shallow copy of a portion of a given array, filtered down to just the elements that pass a test implemented by the provided function.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let affordable = arr.filter(p => p.price < 250);
// Result: [{name: 'jio', price: 199}]

Search & Iteration Methods

These methods help you loop through arrays or find specific elements.

16. `forEach()`

Executes a provided function once for each array element.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
arr.forEach(p => console.log(p.name));
// Output: 
// jio
// airtel

17. `Array.isArray()`

Determines whether the passed value is an Array.

let arr = ['jio', 'airtel'];
console.log(Array.isArray(arr));
// Result: true

18. `find()`

Returns the first element in the provided array that satisfies the provided testing function.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let found = arr.find(p => p.name === 'airtel');
// Result: {name: 'airtel', price: 299}

19. `reduce()`

Executes a user-supplied "reducer" callback function on each element of the array, resulting in a single accumulated output value.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let total = arr.reduce((acc, curr) => acc + curr.price, 0);
// Result: 498

20. `some()`

Tests whether at least one element in the array passes the test implemented by the provided function. Returns a boolean.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let hasExpensive = arr.some(p => p.price > 250);
// Result: true

21. `every()`

Tests whether all elements in the array pass the test implemented by the provided function. Returns a boolean.

let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let allUnder300 = arr.every(p => p.price < 300);
// Result: true

22. `includes()`

Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let hasJio = providers.includes('jio');
// Result: true

23. `indexOf()`

Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let idx = providers.indexOf('vi');
// Result: 2

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

DEV Community: Ragul

localStorage in Web Browser

How it works

Basic example

What is it used for?

Good things about it

Things to be careful about

Props in React

Syntax

Characteristics

children prop

Default values

Props vs. State

Library vs. Framework

Contents

Overview

Core Distinction

Library

Characteristics

Example

Framework

Characteristics

Example

Comparison Table

Common Misconceptions

Examples

Libraries

Frameworks

React

Overview

Key Concepts

History

Usage

Array Methods in JavaScript

Mutator Methods (Modify the Original Array)

1. push()

2. pop()

3. shift()

4. unshift()

5. delete (Operator)

6. splice()

7. sort()

8. reverse()

Accessor & Transform Methods

9. slice()

10. join()

11. split() (String Method)

12. concat()

13. flat()

14. map()

15. filter()

Search & Iteration Methods

16. forEach()

17. Array.isArray()

18. find()

19. reduce()

20. some()

21. every()

22. includes()

23. indexOf()

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

`children` prop

1. `push()`

2. `pop()`

3. `shift()`

4. `unshift()`

5. `delete` (Operator)

6. `splice()`

7. `sort()`

8. `reverse()`

9. `slice()`

10. `join()`

11. `split()` (String Method)

12. `concat()`

13. `flat()`

14. `map()`

15. `filter()`

16. `forEach()`

17. `Array.isArray()`

18. `find()`

19. `reduce()`

20. `some()`

21. `every()`

22. `includes()`

23. `indexOf()`

`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()`