Interview Cheatsheet

Semantic HTML Tags

Web Accessibility (a11y)

HTML Forms

Remember to use the correct form attributes like:

• action: URL to send form data to
• method: GET or POST for data submission

HTML5 New Features

• New Semantic Elements: <header>, <footer>, <article>, <section>, <nav>
• Audio and Video: <audio>, <video> tags for media playback
• Canvas: <canvas> for drawing graphics via JavaScript
• Local Storage: Web Storage API for storing data in the browser
• Geolocation API: Access user's location with permission
• Form Enhancements: New input types, validation, and attributes

Async/Await vs Promises

// create 23 promises and await them
const tasks = Array.from({length:23}, (_,i) =>
  new Promise((res) => setTimeout(() => res(i+1), 10 + (i%5)*10))
);

// parallel with Promise.all
Promise.all(tasks).then(results => console.log('parallel results', results));

// sequential with async/await
async function runSequential(){
  const out = [];
  for(const t of tasks){
    out.push(await t);
  }
  console.log('sequential results', out);
}
runSequential();

Arrow Functions

Shorter syntax; lexical `this` binding.

const nums = [1,2,3];
const squares = nums.map(n => n*n);
const obj = {
  val: 10,
  getVal: () => this.val // `this` is lexical, not the object
};

let / const & Block Scope

`let` and `const` are block-scoped; `const` is immutable binding.

for(let i=0;i<3;i++){
  setTimeout(()=>console.log(i), 10); // prints 0,1,2
}
const a = {x:1};
a.x = 2; // allowed; binding immutable, properties mutable

Destructuring & Defaults

const [a,b=2] = [1];
const {name='anon'} = {};
function f({x=0,y=0} = {}){ return x+y }

Spread & Rest

const a = [1,2];
const b = [...a,3];
function sum(...nums){ return nums.reduce((s,n)=>s+n,0) }

Modules (import / export)

// module.js
export function add(a,b){ return a+b }

// main.js
import { add } from './module.js';
console.log(add(1,2));

Browser Storage

Use localStorage for data that should persist across browser sessions, and sessionStorage for temporary data that should disappear when the tab closes.

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

sessionStorage.setItem('step', '2');

Classes & Prototypes

class Animal{ constructor(name){ this.name = name } speak(){ return this.name } }
class Dog extends Animal{ bark(){ return 'woof' }}
const d = new Dog('Fido');

Map / Set

const s = new Set([1,2,2]);
const m = new Map([['k', 'v']]);
console.log(s.has(1), m.get('k'));

Coercions

let x = (5 == "5") // x = true
let y = (5 === "5") // y = false

Conversion

let y = (5 === "5") // y = false

Generators & Iterators

function* gen(){ yield 1; yield 2 }
const it = gen();
console.log(it.next().value);

Basic Types

let age:number = 54;
let name:string = "Izzy";
let scores:number[] = [18,20];

Type vs Interface

interface User{
 id:number;
 name:string;
}

type Status =
"loading" | "success" | "error";

Optional & Readonly

interface User{
 id:number;
 name?:string;
 readonly email:string;
}

? optional property

readonly cannot be modified after creation.

Union Types

type Status =
"loading"
| "success"
| "error";

let state:Status = "loading";

Allows multiple possible types or values.

Generics

function identity<T>(value:T):T{
 return value;
}

identity(5);
identity("hello");

Reusable types that work with many data types.

any vs unknown vs never

let value:unknown;

if(typeof value === "string"){
 console.log(value.length);
}

Type Assertions

const input =
document.getElementById("name")
as HTMLInputElement;

console.log(input.value);

Tells TypeScript the expected type.

Functions

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

Always type parameters and return values.

Promise<T>

interface User{
 id:number;
 name:string;
}

async function getUser():
Promise<User>{

 return {
  id:1,
  name:"Izzy"
 };

}

Promise<User> means the promise eventually resolves to a User.

React + TypeScript

type ButtonProps={
 title:string;
 onClick:()=>void;
}

function Button({
 title,
 onClick
}:ButtonProps){

 return (
  <button
   onClick={onClick}>
   {title}
  </button>
 );

}

const [user,setUser] =
useState<User|null>(null);

CSS Selectors

Selectors are patterns used to select the elements you want to style. Common types include:

• Type Selector: Selects elements by their tag name (e.g., div, p).
• Class Selector: Selects elements with a specific class (e.g., .my-class).
• ID Selector: Selects an element with a specific ID (e.g., #my-id).
• Attribute Selector: Selects elements based on attributes (e.g., [type="text"]).
• Pseudo-classes: Selects elements based on their state (e.g., :hover, :first-child).
• Pseudo-elements: Selects and styles parts of an element (e.g., ::before, ::after).

/* Type Selector */
p {
  color: blue;
}       

        

css position

div {
  position: absolute;
  top: 10px;
  left: 20px;
}

CSS center a div

To center a div horizontally and vertically, you can use Flexbox or Grid:

/* Flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
} 

/* Grid */
.container {
  display: grid;
  place-items: center;
  height: 100vh; /* Full viewport height */
}

CSS Box Model

The CSS box model describes the rectangular boxes generated for elements in the document tree and consists of:

• Content: The actual 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 (if any) and content.
• Margin: Clears an area outside the border. The margin is also transparent.

<div class="box-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <!-- repeat for 23 boxes -->
</div>

.box-container { padding: 12px; border: 2px solid #1976d2; }
.box { width: 32px; height: 32px; margin: 4px; padding: 6px; border: 2px solid #1565c0; }

CSS Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Key properties include:

• display: flex; - Defines a flex container.
• flex-direction: - Row or column layout.
• justify-content: - Aligns items horizontally.
• align-items: - Aligns items vertically.
• flex-wrap: - Allows items to wrap onto multiple lines.
• Navigation bars vertical centering
• Product Cards vertical stacking and spacing

<div class="flex-demo">
  <div class="box">1</div>
  <div class="box">2</div>
  <!-- repeat for 23 boxes -->
</div>

Navigation Bar

.flex-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Product Cards

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Grid

CSS Grid is a two-dimensional layout system for creating complex layouts. Key properties include:

• display: grid; - Defines a grid container.
• grid-template-columns / grid-template-rows: - Defines the columns and rows of the grid.
• grid-gap: - Sets the gap between rows and columns.
• grid-column / grid-row: - Specifies how many columns or rows an item should span.
• justify-items / align-items: - Aligns items within their grid area.

<div class="grid-demo">
  <div class="box">1</div>
  <div class="box">2</div>
  <!-- repeat for 23 boxes -->
</div>

.grid-demo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

Angular Architecture

• Components: UI building blocks with templates and logic.
• Modules: Group related features and declarations.
• Services: Shared logic, data access, and cross-component state.
• Dependency Injection: Angular injects dependencies where needed.

Data Binding

Angular supports several binding types:

• Interpolation: {{ value }}
• Property binding: [src]="imageUrl"
• Event binding: (click)="save()"
• Two-way binding: [(ngModel)]

@Component({
  template: `<h2>{{ title }}</h2>`
})
export class DemoComponent {
  title = 'Angular';
}

Services & Dependency Injection

Services centralize reusable logic and are injected into components via Angular's DI container.

@Injectable({ providedIn: 'root' })
export class UserService {
  getUsers() { return ['Ada', 'Grace']; }
}

RxJS & Observables

RxJS lets Angular handle asynchronous streams with observables, operators, and subscriptions.

this.http.get<User[]>('/api/users').subscribe(users => {
  this.users = users;
});

Change Detection

Angular updates the UI based on change detection. Using ChangeDetectionStrategy.OnPush can improve performance by limiting checks.

@Component({
  selector: 'app-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '
{{ name }}
'
})
export class CardComponent { @Input() name = ''; }

Node.js Event Loop

The Node.js event loop is a mechanism that allows Node.js to perform non-blocking I/O operations by offloading operations to the system kernel whenever possible.

• Phases: Timers, I/O callbacks, idle/prepare, poll, check, close callbacks.
• Microtasks: Promises and process.nextTick are executed after the current operation completes but before the event loop continues.
• Non-blocking: Node.js uses an event-driven architecture to handle multiple connections concurrently without blocking the main thread.

Node.js Modules

Node.js uses the CommonJS module system, where each file is treated as a separate module.

• require: Used to import modules.
• module.exports: Used to export functions, objects, or values from a module.
• ES Modules: Node.js also supports ES6 modules using import and export, but it requires the use of the .mjs extension or setting "type": "module" in package.json.

Node.js Streams

Streams are a way to handle reading/writing data in chunks, which is efficient for large data sets.

• Readable Streams: Used for reading data (e.g., fs.createReadStream).
• Writable Streams: Used for writing data (e.g., fs.createWriteStream).
• Duplex Streams: Can be both readable and writable (e.g., net.Socket).
• Transform Streams: A type of duplex stream that can modify or transform the data as it is read or written.

What is Agentic AI?

Agentic AI refers to systems that can plan, act autonomously, and manage multi-step tasks using reasoning, tools, and memory.

• Autonomy: Sets and pursues goals with minimal human input.
• Planning: Breaks complex tasks into steps and sequences actions.
• Tool Use: Leverages external tools (APIs, code execution, browsers).
• Safety: Includes guardrails: human oversight, constraints, and verification.

Design Patterns

• Planner + Executor: Separate high-level planning from action execution.
• Loop with Verification: Plan → Act → Observe → Verify → Replan.
• Tool Abstraction: Wrap external tools with stable interfaces and validation.

Quick Tips

• Limit action scope and require confirmations for irreversible steps.
• Log actions and decisions for auditability.
• Use sandboxed environments for risky operations.