DEV Community: Mathu varshtih

5 Important Points about Objects in JavaScript

Mathu varshtih — Wed, 30 Sep 2026 18:18:15 +0000

Objects are collections of key-value pairs

An object stores data as properties, where each property has a key (string or Symbol) and a corresponding value (any data type, including other objects or functions).
Objects can be created in multiple ways

The most common ways are:
- Object literal: const person = { name: "John", age: 30 };
- Constructor: const person = new Object();
- Object.create() method
Properties can be accessed using two notations
- Dot notation: person.name
- Bracket notation: person["name"] (useful when the key is dynamic or contains special characters)
Objects are mutable and can hold methods

You can add, modify, or delete properties at any time.

5 Key Points About JavaScript Functions

Mathu varshtih — Fri, 25 Sep 2026 17:50:52 +0000

5 Key Points About JavaScript Functions

Reusable Blocks of Code
A function is a block of code designed to perform a specific task. Once defined, it can be called and reused throughout your application with different inputs.
First-Class Citizens
In JavaScript, functions are treated as first-class objects. This means you can store them in variables, pass them as arguments to other functions (callbacks), and return them from other functions.
Multiple Syntax Options
JavaScript provides several ways to define functions:
- Function Declaration: function greet() {}
- Function Expression: const greet = function() {};
- Arrow Function: const greet = () => {};
Parameters and Return Values
Functions accept inputs called parameters and can output a value using the return statement. If no return statement is defined, the function returns undefined by default.
Scope and Closures
Variables defined inside a function are locally scoped and cannot be accessed from the outside. Additionally, functions create closures, meaning an inner function retains access to the variables of its parent function even after the parent function has executed.

JavaScript Data Types

Mathu varshtih — Thu, 24 Sep 2026 18:03:30 +0000

Primitive Data Types

String – Represents text. "Hello"
Number – Represents numbers. 25, 10.5
BigInt – Represents very large integers. 123456789n
Boolean – Represents true or false.
Undefined – A variable with no assigned value.
Null – Represents an intentional empty value.
Symbol – Represents a unique identifier.

Non-Primitive Data Types

Object – Stores data in key-value pairs. {name: "John"}
Array – Stores multiple values. [10, 20, 30]
Function – A reusable block of code. function greet() {}

Why Use box-sizing: border-box?

Mathu varshtih — Tue, 22 Sep 2026 18:59:08 +0000

1.Predictable Element Dimensions: Setting width: 300px guarantees the box stays exactly 300px wide, regardless of any padding or borders added later.

2.Prevents Grid & Flexbox Layout Breaks: Multi-column layouts (like a 2-column or 3-column split) won't unexpectedly wrap to the next line when inner padding is applied.

3.Seamlessly Mixes Percentages and Pixels: You can give a container a percentage width (width: 50%) and fixed pixel padding (padding: 20px) without breaking the layout or using complex math.

4.Eliminates Accidental Horizontal Scrollbars: It stops full-width elements (width: 100%) from expanding beyond the screen width when side padding is added.

5.Simplifies Responsive Web Design: Modifying padding for smaller screens or mobile media queries won't unexpectedly alter the total width of your elements.

CSS Grid Layouts with grid-template-areas published

Mathu varshtih — Mon, 21 Sep 2026 17:01:37 +0000

CSS Grid is one of the most powerful layout systems available in modern CSS. While properties like grid-column and grid-row work well for small tasks, grid-template-areas makes building entire page structures fast, readable, and

What is `grid-template-areas`?

grid-template-areas allows you to assign custom names to grid cells and arrange them visually.

It involves two primary steps:

Define the visual grid layout on the parent container using grid-template-areas.
Assign child elements to those named areas using `grid-area

CSS Box Model

Mathu varshtih — Sun, 20 Sep 2026 19:27:08 +0000

The CSS Box Model describes how every HTML element is treated as a rectangular box.

Components of the Box Model

The CSS Box Model has 4 main components:

Content: The actual text, image, or other content.
Padding: Space between the content and border.
Border: A line surrounding the content and padding.
Margin: Space outside the border that separates elements.

How They Affect Layout

Content, padding, border, and margin together determine the overall size and spacing of an element on a webpage.

2. Linux Commands - Beginner

Mathu varshtih — Sat, 19 Sep 2026 18:20:14 +0000

Essential Linux Terminal Commands

ls - List files and folders in the current directory.
ls -l - Show detailed file information (sizes, permissions, date modified).
ls -a - Show hidden files (files starting with a .).
pwd - Show your current directory path (Print Working Directory).
cp <source> <destination> - Copy a file.
df -h - Display remaining storage disk space in readable format.
cat <filename> - Display the full contents of a file on the terminal screen.
clear - Clear the current terminal screen output (or press Ctrl + L).
whoami - Show the name of the currently logged-in user.
history - Show the list of recently executed terminal commands.

CSS Position Property - Beginner level

Mathu varshtih — Fri, 18 Sep 2026 18:06:53 +0000

CSS Position Property

The position property in CSS dictates how an element is positioned on a page and how it interacts with other elements in the layout flow. By default, every HTML element has a position of static. Changing this value unlocks the offset properties: top, bottom, left, right, and z-index.

The 5 Main Position Values

static (Default): The element stays in the normal document flow. Offset properties (top, bottom, left, right) and z-index have no effect.
relative: The element is positioned relative to its normal static position. Applying offsets moves it without affecting the surrounding layout—the original space it occupied is preserved.
absolute: The element is removed completely from the normal document flow. It positions itself relative to its nearest ancestor that has a position other than static (often a parent set to relative).
fixed: The element is removed from the flow and positioned relative to the browser viewport (screen). It stays in the exact same spot even when the user scrolls.
sticky: A hybrid of relative and fixed. The element behaves like relative until a specified scroll threshold is reached (e.g., top: 0), at which point it "sticks" in place like a fixed element within its container.

HTML and CSS Tags - Part 2

Mathu varshtih — Thu, 17 Sep 2026 18:15:59 +0000

Rank	Tag	Its important
1	`<table>`	Creates tables
2	`<tr>`	Defines a table row
3	`<th>`	Header cell (bold + centered)
4	`<td>`	Normal data cell
5	`<thead>`	Groups table header
6	`<tbody>`	Groups table body
7	`<input>`	Creates form fields (text, checkbox, etc.)
8	`<label>`	Labels for inputs (improves accessibility)
9	`<hr>`	Horizontal line / visual separator
10	`<form>`	Wraps inputs together

CSS Properties (Top 10)

Rank	Property / Concept	Its important
1	`display: flex`	Most used modern layout method
2	`display: grid`	Best for 2D layouts
3	`box-sizing: border-box`	Makes width/height calculations predictable
4	`justify-content`	Aligns items on the main axis (flex/grid)
5	`align-items`	Aligns items on the cross axis
6	`flex-direction`	Changes flex direction (row/column)
7	`gap`	Easy spacing between flex/grid items
8	`@media`	Responsive design (mobile/tablet/desktop)
9	`border-collapse: collapse`	Makes clean table borders
10	`text-decoration: none`	Removes underlines from links

Windows vs. Linux Mint

Mathu varshtih — Wed, 16 Sep 2026 18:18:24 +0000

Linux Mint vs. Windows

1. Performance

Linux Mint: 1.5–2 GB RAM at idle, lightweight, no telemetry or system ads
Windows: 4 GB+ RAM at idle, background indexing and services slow lower-end hardware

2. Development

Linux Mint: Native UNIX tools (Git, Python, Docker, Node.js) with zero overhead
Windows: Strong for .NET/C#, needs WSL2 for Linux-style workflows

3. Security & Privacy

Linux Mint: No telemetry or ads, rare infections due to root privileges
Windows: Higher malware risk, collects usage data and shows system recommendations

4. Gaming

Linux Mint: Steam Proton supports many Windows titles; no kernel-level anti-cheat (Valorant, Fortnite)
Windows: Full native support, DirectX 12, day-one drivers, all anti-cheat systems

5. Freedom & Cost

Linux Mint: Completely free and open-source, full user control
Windows: Closed-source,Microsoft controls updates

Windows Application	Linux Mint Alternative
Microsoft Office (Word, Excel, PowerPoint)	LibreOffice / OnlyOffice
Adobe Photoshop	GIMP / Krita
File Explorer	Nemo File Manager
Edge / Chrome	Firefox / Brave / Chrome
Outlook	Thunderbird / Mailspring
Notepad++	Xed / VS Code
Premiere Pro / Vegas	Kdenlive / DaVinci Resolve

Block-Level element vs Inline element

Mathu varshtih — Tue, 15 Sep 2026 17:49:38 +0000

1. Block-Level Elements

A block-level element starts on a new line and stretches across the entire width of the page, like a solid brick in a wall.

Key Characteristics

Always starts on a fresh line.
Takes up 100% of the available width by default.
Respects both width/height and top/bottom margin adjustments.
Can contain other block or inline elements.

Common Examples

<div>: A generic container used to group sections.
<p>: A paragraph of text.
<h1> to <h6>: Section headings.

Inline Elements

An inline element does not start on a new line. It takes up only as much width as its actual content needs, like text sitting inside a sentence.

Key Characteristics

Sits right alongside other inline elements on the same line.
Width and height properties have no effect on inline elements.
Ignores top and bottom margins (only left/right margins work).
Usually contains text or other inline elements.

Common Examples

<a>: A hyperlink.
<b> or <strong>: Bold text.
<i> or <em>: Italicized text.

Semantic tag vs Non-Semantic tag

Mathu varshtih — Mon, 14 Sep 2026 18:23:48 +0000

Semantic tags

Semantic tags describes is meaning in human readable language. Looking at the tag we can tell what tag it is.

for example:

<header - represents top header content.
<nav> - holds the navigation link.
<footer> - holds bottom footer/copyright information.

Non-Semantic tags

Non-semantic tags tells us nothing about the content inside the tag.

for example:

<div> - A block level container used to group elements together
<b> - to make the text or letter bold.

DEV Community: Mathu varshtih

5 Important Points about Objects in JavaScript

5 Key Points About JavaScript Functions

5 Key Points About JavaScript Functions

JavaScript Data Types

Primitive Data Types

Non-Primitive Data Types

Why Use box-sizing: border-box?

CSS Grid Layouts with grid-template-areas published

What is grid-template-areas?

CSS Box Model

Components of the Box Model

How They Affect Layout

2. Linux Commands - Beginner

Essential Linux Terminal Commands

CSS Position Property - Beginner level

The 5 Main Position Values

HTML and CSS Tags - Part 2

CSS Properties (Top 10)

Windows vs. Linux Mint

1. Performance

2. Development

3. Security & Privacy

4. Gaming

5. Freedom & Cost

Block-Level element vs Inline element

1. Block-Level Elements

Key Characteristics

Common Examples

Inline Elements

Key Characteristics

Common Examples

Semantic tag vs Non-Semantic tag

Semantic tags

for example:

Non-Semantic tags

for example:

What is `grid-template-areas`?