Interview Q&A

const arr1 = [1, 2, 3]; const arr2 = new Array(1, 2, 3);

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

@keyframes define the steps of an animation over time.

Example:

@keyframes moveBox {

0% { left: 0; }

100% { left: 200px; }

}

.box {

position: relative;

nimation: moveBox 2s linear infinite;

}

Follow me on LinkedIn:

Key Takeaway:

Keyframes control how elements move, rotate, or fade during animation.

Answer: Use visibility: hidden; Example: .invisible { visibility: hidden; } Follow me on LinkedIn: Key Takeaway: Hidden = invisible but occupies space. display: none = gone completely.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

The <template> tag defines reusable HTML that isn’t rendered until you activate it via

JavaScript.

Example:

<template id="card-template">

<div class="card">

<h3></h3>

<p></p>

</div>

</template>

<script>

const tmpl = document.getElementById("card-template");
const clone = tmpl.content.cloneNode(true);
clone.querySelector("h3").textContent = "HTML Tips";
clone.querySelector("p").textContent = "Use semantic tags for SEO.";

document.body.appendChild(clone);

</script>

Key Takeaway:

<template> = invisible HTML blueprint ready to be cloned dynamically.

<iframe> embeds another HTML page inside the current page.

Example:

<iframe src="

width="500" height="300"></iframe>

Key Takeaway:

Use iframes to display external content, but avoid excessive use for performance and SEO

reasons.

Follow me on LinkedIn:

Use <table>, <tr> (row), <th> (header cell), and <td> (data cell).

Example:

<table border="1">

<tr>

<th>Name</th>

<th>Role</th>

</tr>

<tr>

<td>Sandeep</td>

Follow me on LinkedIn:

<td>Developer</td>

</tr>

</table>

Key Takeaway:

Tables are for data — not for layout.

Answer: Cards are flexible content containers for images, text, and links. &lt;div class="card" style="width:18rem;"&gt; &lt;img src="..." class="card-img-top"&gt; &lt;div class="card-body"&gt;...&lt;/div&gt; &lt;/div&gt; Follow me on LinkedIn:

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Answer: Functions that execute immediately after being defined. Example: (function() { console.log("Runs instantly!"); })(); Used to create private scopes before let and const.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

GPU acceleration is triggered when you use transform, opacity, or will-change.

It moves rendering to the GPU, making animations smoother.

Example:

.box {

transform: translateZ(0);

Follow me on LinkedIn:

}

Key Takeaway:

Use GPU-friendly properties for smoother transitions; avoid triggering layout changes.

Browsers are forgiving — they use an HTML parser that tries to fix mistakes automatically.

For example, missing closing tags are inferred.

Example:

<p>This is valid

Follow me on LinkedIn:

<p>This is auto-closed by browser</p>

Key Takeaway:

Browsers recover from errors, but writing valid HTML ensures consistent rendering.

Answer: YouTube provides an embed link using &lt;iframe&gt;. Example: &lt;iframe width="560" height="315" src=" llowfullscreen&gt; &lt;/iframe&gt; Key Takeaway: lways use the /embed/ URL format for proper YouTube embedding.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Modals are created using the .modal class and toggled with JS or data attributes.

<button data-bs-toggle="modal"

data-bs-target="#myModal">Open</button>

<div class="modal fade" id="myModal">

<div class="modal-dialog"><div

class="modal-content">...</div></div>

</div>

Answer: A polyfill is a piece of code that adds a feature missing in older browsers. Follow me on LinkedIn: Example: if (!Array.prototype.includes) { rray.prototype.includes = function(item) { return this.indexOf(item) !== -1; }; }

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Answer: Functions that: Return the same output for the same input. Have no side effects. Example: function add(a, b) { return a + b; // pure }

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

CSS Houdini is a set of APIs that let developers extend CSS by writing code that hooks

directly into the CSS engine.

Examples:

• Paint API → Custom background drawing.
• Layout API → Define custom layout logic.
• Properties & Values API → Register custom CSS properties.

Example (Paint API):

registerPaint('dots', class {

paint(ctx, size) {

ctx.fillStyle = 'red';

ctx.arc(50, 50, 10, 0, 2 * Math.PI);

ctx.fill();

}

});

Key Takeaway:

Houdini gives developers low-level control over how CSS works under the hood.

Answer: Use the following combination: p { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Key Takeaway: Truncates long text with “…” when it exceeds container width.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Entities display reserved characters (like <, >, &) or symbols not on the keyboard.

Example:

<p>Use &lt;div&gt; for containers and &amp; for ampersands.</p>

Key Takeaway:

Entities prevent HTML from confusing symbols with code.

Answer: Reusable UI blocks like buttons, modals, navbars, forms, alerts, etc., that Bootstrap’s design standards.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

✅ Use CSS to improve readability and focus visibility:

Follow me on LinkedIn:

Maintain sufficient color contrast:

body { color: #111; background: #fff; }

• Use :focus styles for keyboard users:

button:focus { outline: 2px solid #005fcc; }

• ● Avoid hiding content with display: none; if screen readers need it.

Respect user preferences:

@media (prefers-reduced-motion: reduce) {

* { animation: none; }

}

• Key Takeaway:

ccessible CSS ensures inclusivity for all users — especially keyboard and screen-reader

users.

Combinators define relationships between selectors.

Combinator Description Example

Descendant ( ) Any nested element div p

Child (>) Direct child only div >

djacent sibling (+) Immediately next element h1 + p

General sibling (~) All next siblings h1 ~ p

Key Takeaway:

Combinators refine selector targeting.

• Minimize HTML, CSS, and JS files.
• Use lazy loading for images.
• Use defer or async for scripts.
• Compress images and enable caching.
• Reduce DOM size.

Example:

Follow me on LinkedIn:

<script src="main.js" defer></script>

<img src="hero.jpg" loading="lazy" alt="Hero image">

Key Takeaway:

Speed = smaller files, fewer requests, smarter loading.

Answer: Add the lang attribute in the &lt;html&gt; tag. Example: &lt;html lang="en"&gt; Key Takeaway: Helps screen readers and search engines understand the page’s language.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Answer: rrow functions are a shorter syntax for writing functions and do not have their own this. Example: const add = (a, b) =&gt; a + b; console.log(add(2, 3)); // 5

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Performance:

• Iframes load as separate browsing contexts, adding extra network requests and

increasing page load time.

SEO:

• Content inside iframes isn’t fully indexed by search engines.
• Links and text inside may not count toward the parent page’s SEO.

Best Practice:

• Use iframes only when necessary (e.g., embedding maps or videos).
• Add title attributes for accessibility.

Example:

<iframe src="

title="Location

Map"></iframe>

Key Takeaway:

Iframes isolate content — great for embedding, but can slow pages and weaken SEO.

Follow me on LinkedIn:

CSS Interview Questions

Answer: Images that automatically scale with the parent container using .img-fluid: &lt;img src="..." class="img-fluid" alt="Responsive image"&gt;

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.