CSS Fundamentals

Block Formatting Context (BFC)

BFC represents an isolated rendering environment where elements inside it are independent from outside elements. It helps solve common layout issues like margin collapsing and float clearing.

Centering Elements

Multiple techniques exist for achieving horizontal and vertical centering:

• Flexbox with justify-content and align-items
• Absolute positioning with transform: translate(-50%, -50%)
• Grid layout with place-items: center
• Margin auto technique for fixed dimensions

Box Model Understanding

The standard box model defines width as content-only, while the alternate (IE) model includes padding and border in the width calculation. Modern CSS uses box-sizing property to control this behavior.

Flexbox Layout

Flexbox provides one-dimensional layout capabilities. Key properties include flex-grow, flex-shrink, and order which control how items distribute space and their sequence within containers.

Mobile Responsive Design

REM units scale relative to the root font size, enabling consistent scaling across devices. For crisp 1px borders on high-density displays, use device pixel ratio calculations with transforms.

Resource Preloading

preload fetches resources with high priority for current navigation, while prefetch retrieves resources for future navigation with lower priority.

JavaScript Core Concepts

Context Binding

The this keyword can be controlled using call, apply, and bind methods. Arrow functions inherit context from enclosing scope.

Constructor Function Process

When using new, JavaScript creates an empty object, sets its prototype to the constructor's prototype, binds this to the new object, and returns the object unless the constructor explicitly returns another object.

Image Lazy Loading

Implementation involves intersection observers to detect when images enter the viewport, then dynamically loading them to improve initial page performance.

Network Request Libraries

Ajax uses XMLHttpRequest, Axios provides promise-based API with interceptors, and Fetch offers modern promise-based approach with simpler syntax.

Type Detection

Use Array.isArray(), typeof, instanceof, and Object.prototype.toString.call() for reliable type checking across different scenarios.

Floating Point Precision

JavaScript uses IEEE 754 representation causing precision issues. Solutions include rounding operations or libraries like Decimal.js for financial calculations.

Array-like Objects

Convert using Array.from() or spread operator [...arrayLike]. Object merging accomplished through Object.assign() or spread syntax {...obj1, ...obj2}.

Iteration Differences

for...in iterates over enumerable properties, while for...of accesses iterable values directly.

Script Loading Attributes

defer delays execution until DOM parsing completes, while async executes immediately after download regardless of DOM state.

Promise States

Promises exist in pending, fulfilled, or rejected states, forming the foundation for asynchronous JavaScript operations.

Data Types

JavaScript has primitive types (number, string, boolean, null, undefined, symbol, bigint) and reference types (object, array, function). Notably, typeof null returns "object".

Deep Cloning Methods

Implement through recursive copying, JSON.parse(JSON.stringify()) for simple objects, or specialized libraries like Lodash for complex scenarios.

Prototype Chain

Objects inherit properties from their prototype, creating a chain that connects instances to constructors and ultimately to Object.prototype.

Storage Mechanisms

LocalStorage persists data longer than cookies, which have size limits and send with every HTTP request.

Property Definition

Object.defineProperty() enables property descriptor configuration including getters, setters, and enumerability controls.

Event Loop

JavaScript executes synchronous tasks first, then processses microtasks (promises) before macro tasks (setTimeout, setInterval).

HTTP and Networking

TCP Handshake

Three-way handshake establishes connection reliability, while four-way termination ensures both parties complete transmission before closing.

Security Protocols

HTTPS encrypts data transmission using SSL/TLS certificates, providing authentication and data integrity compared to plain HTTP.

Caching Strategies

Browser caching uses headers like ETags, Cache-Control, and Expires to determine when to serve cached content versus making fresh requests.

Page Load Process

URL processing involves DNS lookup, TCP connection establishment, HTTP request/response, HTML parsing, resource loading, and DOM rendering.

Webpack Optimization

Build Tools Configuration

Loaders transform file types during import, while plugins extend webpack functionality through event hooks throughout the compilation process.

Performance Improvements

Common optimizations include code splitting, tree shaking, compression, external dependencies, and persistent caching strategies.

Vue Framework

Reactivity System

Vue implements reactivity through data observation, dependency collection, and change notification mechanisms using Object.defineProperty or Proxies in Vue 3.

Componant Architecture

Components maintain independent state when data is returned from functions, preventing shared state between component instances.

Template Compilation

Compilation converts templates to virtual DOM render functions through AST generation, static optimization, and code generation phases.

Lifecycle Management

Mixins merge options where hook functions combine into arrays while other properties follow specific merging strategies.

Update Mechanisms

NextTick ensures DOM updates complete before executing callbacks by queuing operations in microtask queues.

Algorithm Implementation

Quick Sort Algorithm

function partitionArray(input) {
  if (input.length <= 1) return input;
  
  const pivotIndex = Math.floor(input.length / 2);
  const pivotValue = input.splice(pivotIndex, 1)[0];
  
  const smallerElements = [];
  const largerElements = [];
  
  for (let i = 0; i < input.length; i++) {
    if (input[i] < pivotValue) {
      smallerElements.push(input[i]);
    } else {
      largerElements.push(input[i]);
    }
  }
  
  return [
    ...partitionArray(smallerElements), 
    pivotValue, 
    ...partitionArray(largerElements)
  ];
}

Two Sum Problem

const findTwoNumbers = (numbers, targetSum) => {
  const valueMap = new Map();
  
  for (let index = 0; index < numbers.length; index++) {
    const complement = targetSum - numbers[index];
    
    if (valueMap.has(complement)) {
      return [valueMap.get(complement), index];
    }
    
    valueMap.set(numbers[index], index);
  }
};