Typescript code explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';

Per-tenant database connections in NestJS

multi-tenancy connection-pooling dependency-injection

Advanced 8 steps

typescript

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'chunk',

A memoized chunk pipe in Angular

memoization weakmap pure-pipes

Intermediate 7 steps

typescript

import { Directive, Input, HostBinding, HostListener } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 
@Directive({

A custom range validator directive in Angular

form-validation directives accessibility

Intermediate 8 steps

typescript

import { useCallback, useRef, useState } from "react";
 
type Tag = { id: string; label: string };

A debounced, abortable tag-input hook in React

custom-hooks debounce abort-controller

Advanced 10 steps

typescript

type ToastVariant = "info" | "success" | "warning" | "error";
 
interface Toast {
  id: string;

A self-dismissing toast store with dedup

observer-pattern deduplication timers

Intermediate 10 steps

typescript

type Doc = { id: string; title: string; body: string };
 
type Posting = { docId: string; frequency: number; positions: number[] };

Building a TF-IDF search index

inverted-index tf-idf tokenization

Advanced 9 steps

typescript

type RGB = readonly [number, number, number];
 
interface ColorStop {
  offset: number;

Interpolating a color gradient in TypeScript

interpolation data-visualization color

Intermediate 8 steps

typescript

import { useCallback, useId, useRef, useState, type KeyboardEvent } from 'react';
 
interface Tab {
  id: string;

Building an accessible tabs component in React

accessibility aria keyboard-navigation

Intermediate 8 steps

typescript

import {
  CallHandler,
  ConflictException,
  ExecutionContext,

Idempotent POST requests in NestJS with Redis

idempotency interceptor redis

Advanced 7 steps

typescript

interface ContentRange {
  unit: string;
  start: number;
  end: number;

Parsing HTTP Content-Range headers in TypeScript

regex parsing validation

Intermediate 8 steps

typescript

type CacheEntry<V> = {
  value: V;
  computedAt: number;
};

A TTL cache keyed by object identity

caching weakmap generics

Intermediate 8 steps

typescript

import { Injectable, Scope } from '@nestjs/common';
import DataLoader from 'dataloader';
import { InjectRepository } from '@nestjs/typeorm';
import { In, Repository } from 'typeorm';

Batching queries with DataLoader in NestJS

dataloader batching n+1

Intermediate 7 steps

typescript

import { useCallback, useRef, useState } from "react";
 
interface VirtualListProps<T> {
  items: T[];

How a virtualized list renders in React

virtualization windowing performance

Advanced 7 steps