DEV Community: Jaisurya

Hoisting

Jaisurya — Fri, 14 Aug 2026 03:10:17 +0000

Hoisting in JavaScript is the engine’s behavior of moving declarations to the top of their scope (global or local) before execution. Because of hoisting, you can reference functions or variables in your code before the lines where they are defined.

1.Function Declaration
Function declarations are hoisted in their entirety—both the declaration and the body. This means you can call a function before it appears in the source code.

hello(); //Output: hello!
function hello(){
   console.log("hello!")
}

2.var Declaration
When you use var, JavaScript hoists the variable declaration, but not its assignment. Until the execution line reaches the assignment, the variable holds undefined.

console.log(num); //Output: undefined
var num = 10;
console.log(num); //Output: 10

Javascript Variable

Jaisurya — Wed, 12 Aug 2026 13:24:09 +0000

In JavaScript, a variable is a named storage location that holds a value, which can be any data type, such as numbers, strings, boolean, etc. It can be declared using keywords like var, let, or const.

1.var
var is function scoped, it can be re-declared and reassigned.

if(true){
  var a = 10;
}
console.log(a);
//Output: 10

2.let
let is block scoped, it can be updated , but can't be redeclared in the same scope.

let x = 10;
if(true){
  let x = 35;
  console.log(x);
} 
console.log(x);
//Output:
35
10

3.const
const is also block scoped, it can't be updated, used to store constant values

const pi = 3.14;
let r = 2;
let c = 2 * pi * r;
console.log(c);
//Output: 
12.56

Security considerations in IFrame tag

Jaisurya — Thu, 06 Aug 2026 14:35:45 +0000

The (Inline frame) tag is used to embed another HTML document or web resource inside the current webpage. It essentially creates a nested browser window within your layout. There are security risks that can be created by using iframes unless handled in the right manner. As an example, content that uses embedded external websites can create the risk of clickjacking or script injections. To counter these: <ul> <li>Take a sandbox attribute to limit the frame behaviour (block scripts, forms, or popups).</li> <li>Never leave an unverified source dangling as src, or domain, etc.</li> <li>Integrate the sandbox with the ability to allow attributes to have more precise control. </li> </ul> <div class="highlight"><pre class="highlight html"><code><iframe src="https://www.youtube.com" sandbox="allow-scripts allow-same-origin"></iframe> </code></pre></div>

Tailwind CSS

Jaisurya — Mon, 03 Aug 2026 16:59:31 +0000

Tailwind CSS is a utility-first CSS framework that lets you build custom user interfaces directly in your HTML or component markup without writing traditional custom stylesheets.

Tailwind provides low-level utility classes—such as flex, pt-4, bg-blue-500, and text-center—that map directly to individual CSS rules.

How It Works (Traditional CSS vs. Tailwind)
Instead of naming classes and jumping back and forth between your HTML and CSS files, you combine utility classes directly on HTML elements.

Traditional CSS

<!-- HTML -->
<button class="custom-button">Click Me</button>

/* CSS */
.custom-button {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

Tailwind CSS

<button class="bg-blue-500 text-white px-4 py-2 rounded font-semibold hover:bg-blue-600">
  Click Me
</button>

Advantages

Rapid Development: You don't waste time jumping between HTML and CSS files, nor do you spend mental energy coming up with naming conventions (like BEM) for class names.
Consistent Design System: Instead of picking random pixels or hex codes, Tailwind enforces a uniform scale for spacing, typography, shadows, and colors out of the box.
No Class Name Collisions: Since styles are tied directly to utilities or components rather than global selectors, changing one element's style will never accidentally break another element elsewhere on your site.

Responsive web design

Jaisurya — Sun, 02 Aug 2026 14:48:17 +0000

Responsive Web Design is an approach to web development that makes a website automatically adapt its layout, images, and content to fit the screen size and orientation of whatever device is viewing it whether it's a desktop monitor, a tablet, or a smartphone screen.

Instead of building separate websites for desktop users (example.com) and mobile users (m.example.com), developers build one single code base that fluidly resizes.

The Three Core Technical Pillars:

Fluid Grids

Traditional web pages used fixed widths. Responsive design uses relative units like percentages, viewport units, or CSS Grid/Flexbox. Elements shrink or expand proportionally as the viewport scales.

Flexible Images & Media

Media is set to never exceed its container size using CSS rules like max-width: 100%. This prevents large images from overflowing small mobile viewports or breaking the layout.

CSS Media Queries

Media queries allow developers to apply specific CSS rules only when certain conditions are met—most commonly screen width breakpoints.

Why Responsive Design Matters

Better User Experience: Users don't have to pinch, zoom, or scroll horizontally to read content.
Cost Efficiency: Maintaining a single responsive codebase is significantly faster and cheaper than managing separate desktop and mobile versions.

Bootstrap

Jaisurya — Sat, 01 Aug 2026 12:56:05 +0000

Think of it as a UI blueprint kit, instead of styling every pixel and layout rule manually in raw CSS, you attach ready-made CSS class names to your HTML elements.

Bootstrap is the world’s most popular open-source front-end framework. It provides a pre-written collection of HTML, CSS, and JavaScript building blocks—like grid layouts, buttons, navigation bars, modal dialogs, and form inputs—so developers don't have to build web interfaces completely from scratch.

What Main Pain Points Does Bootstrap Solve?

Messy Mobile Layouts: Its grid system automatically fits your site to phone, tablet, and computer screens without complex styling rules.

Different Browser Looks: It fixes small browser glitches so your site looks identical on Chrome, Safari, and Edge.

Slow Building Speed: Instead of building buttons, pop-ups, and menus from scratch, you just copy and paste ready-to-use parts.

Inconsistent Designs: It gives your whole team the same visual rules so your pages don't look messy or mismatched.

Accessibility Needs: Its parts already work well with screen readers and keyboard navigation.

CSS Flexbox vs Grid

Jaisurya — Thu, 30 Jul 2026 14:21:58 +0000

1.CSS Flexbox
Flexbox was created to distribute space and align items within a container, even when their sizes are unknown or dynamic.
Flexbox is content-first. You give elements space, and they stretch, shrink, or wrap based on how much content is inside them.

Best Use Cases for Flexbox
Navigation Bars: Spacing out a logo on the left and menu links on the right using justify-content: space-between.
Centering Elements: The classic justify-content: center and align-items: center combo.

.container {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;     /* Vertically center */
}

2.CSS Grid
CSS Grid is a complete, structural layout system. Instead of focusing on individual items and letting them push each other around, Grid lets you define a master structure (rows and columns) first, then place elements wherever you want on that board.
Grid is layout-first. You design the framework, and elements fit neatly into the predefined tracks.

Best Use Case for Grid
A classic admin dashboard requires a header, sidebar, main content area, widgets spanning different sizes, and a footer. CSS Grid shines here because grid-template-areas makes the structural placement explicit and easy to read.

HTML
<div class="grid">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

CSS
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

CSS Box model

Jaisurya — Mon, 27 Jul 2026 03:04:44 +0000

In CSS, the term "box model" is used when talking about web design and layout.The CSS box model is essentially a box that wraps around every HTML element.

Every box consists of four parts: content, padding, borders and margins.

EXPLANATION

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border- A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

div{
  width: 400px;
  border: 12px solid green;
  padding: 50px;
  margin: 20px;
}

Iframe in HTML

Jaisurya — Fri, 24 Jul 2026 10:53:14 +0000

The tag in HTML is used to embed another webpage directly inside your current page. Think of it like a window on your website looking into another webpage. Basic Syntax: <div class="highlight"><pre class="highlight html"><code><iframe src="https://example.com" width="600" height="400" title="Example Website"></iframe> </code></pre></div> Let's see how we embed a youtube video inside our website: Most video and map providers generate <iframe> code automatically for you when you click "Share" -> "Embed". <div class="highlight"><pre class="highlight html"><code><iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </code></pre></div> Now we have a youtube video inside our webpage.

Boolean Attributes in HTML

Jaisurya — Sun, 19 Jul 2026 10:37:30 +0000

The three of the most common boolean attributes that we use in HTML.

Disabled:
When you add it to a form element, you completely shut down any interaction with it.Form inputs that depend on a previous action. For example, keeping a "Submit" button disabled until the user checks a "Terms of Service" box.

<button type="submit" disabled>Submit Application</button>

Required:
It tells the browser that this field must have a value before the form can be submitted. If a user tries to click submit while a required field is empty, the browser blocks the submission and pops up a native warning message.

<input type="email" name="user_email" required>

**
Readonly:**
The readonly attribute is the most unique of the three and is often confused with disabled.Pre-filled data that the user needs to see (and maybe copy), but shouldn't alter. For example, an order summary page showing a calculated grand total or a system-generated account ID.

<input type="text" name="account_id" value="A99281" readonly>

CSS Selectors

Jaisurya — Tue, 14 Jul 2026 02:26:29 +0000

Here are the four foundational selectors you'll use 90% of the time.

1. The Universal Selector ( * )

This selects everything on the HTML page.

* {
  margin: 0;
  box-sizing: border-box;
}

2. The Type Selector ( element )

HTML tags matching the name directly. This is best for setting baseline styles for paragraphs, headings, or buttons.

p {
  color: #333;
  line-height: 1.5;
}

3. The Class Selector ( .class )

Any element with a matching class attribute. Uses a dot ( . ).
This is best for reusable styles you want to apply to multiple different elements.

.btn-primary {
  background: blue;
  color: white;
}

HTML: <button class="btn-primary">Click</button>

4. The ID Selector ( #id )

A single element with a matching id attribute. Uses a hashtag ( # ).Unique, one-of-a-kind elements on a page (like a specific sidebar or nav).

#main-header {
  background: black;
}

HTML: <header id="main-header">...</header>

Lists in HTML

Jaisurya — Sat, 11 Jul 2026 03:37:37 +0000

In HTML, lists are used to group related items together. There are different types of list in HTML. They are,

1. Unordered list:
Used for items where the order does not matter. By default, these items are displayed with bullet points.

<ul>
  <li>Water</li>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

2. Ordered list:
Used for items where the sequence or order matters.By default, these are displayed with numbers.

<ol>
  <li>Cake</li>
  <li>Chocalate</li>
  <li>Juice</li>
</ol>

3. Description List
Used for pair of terms and description.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets.</dd>
</dl>