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'));

Generators & Iterators

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

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.

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

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

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;
}

React Render Cycle

React vs Vanilla JavaScript

Vanilla JavaScript manipulates the DOM directly with methods like querySelector and addEventListener. React lets you describe the UI declaratively with components and state, and it updates the DOM efficiently when state changes.

When should you use useEffect?

Triggers Re-render?

* Unless the effect itself calls setState().

Use useEffect for side effects such as fetching data, subscribing to events, timers, or syncing with browser APIs like localStorage. It is usually not the right tool for computing values from existing state during render.

Context vs Reducer

Props: Parent to Child

A parent component can own state and pass both values and callback functions to children through props. This is a common pattern for controlling behavior from a parent.

function Parent() {
  const [count, setCount] = useState(0);

  const handleReset = () => setCount(0);

  return (
    

      
Count: {count}
      
    
  );
}

function Child({ count, onReset }) {
  return Reset ({count});
}

Class vs Functional Components

useContext

useContext lets a component read values from a context without passing props through every level. It is helpful for shared data such as themes, authentication, or user settings.

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    
      {children}
    
  );
}

function Header() {
  const { theme } = useContext(ThemeContext);
  return 
Current theme: {theme}
;
}

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.