Intermediate code explainers

typescript

import { Routes } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { REPORT_API_URL } from './reports/report.tokens';

Route-scoped providers and lazy loading in Angular

routing dependency-injection lazy-loading

Intermediate 8 steps

javascript

import { NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';
 
export const runtime = 'edge';

A deduped page-view counter in Next.js

edge-runtime redis rate-limiting

Intermediate 8 steps

python

from decimal import Decimal
from typing import Annotated
 
from fastapi import APIRouter, status

Cross-field order validation in FastAPI

validation pydantic-models decimal-money

Intermediate 7 steps

typescript

import { Component } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,

Cross-field password validation in Angular

reactive-forms custom-validators cross-field-validation

Intermediate 7 steps

javascript

const express = require('express');
const createError = require('http-errors');
const { Article } = require('../models');

Sharing route logic with router.param in Express

middleware authorization dry

Intermediate 10 steps

python

from functools import wraps
from flask import request, jsonify

A parameterized query-param decorator in Flask

decorators validation type-casting

Intermediate 8 steps

typescript

import { Component, inject } from '@angular/core';
import { combineLatest, map, startWith } from 'rxjs';
import { UserStore } from './user.store';
import { CartStore } from './cart.store';

The view model pattern in Angular

rxjs view-model reactive-streams

Intermediate 6 steps

javascript

import { useState, useEffect, useRef, useCallback } from 'react';
 
export default function Carousel({ images }) {
  const [index, setIndex] = useState(0);

Building a wrap-around Carousel in React

hooks usecallback event-listeners

Intermediate 9 steps

python

from fastapi import APIRouter, status
from fastapi.responses import JSONResponse
from sqlalchemy import text
from sqlalchemy.exc import SQLAlchemyError

Liveness vs readiness health checks in FastAPI

health-checks dependency-injection async

Intermediate 6 steps

typescript

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-headerapikey';
import { ConfigService } from '@nestjs/config';

Building an API-key auth strategy in NestJS

authentication passport dependency-injection

Intermediate 8 steps

javascript

import { useEffect, useRef } from 'react';
 
export function useOnClickOutside(handler) {
  const ref = useRef(null);

A click-outside hook in React

custom-hooks refs event-listeners

Intermediate 7 steps

python

from typing import Optional
 
from fastapi import APIRouter, Depends, HTTPException, status
from pydantic import BaseModel, EmailStr, Field

How PATCH partial updates work in FastAPI

partial-update validation dependency-injection

Intermediate 8 steps

rust

use itertools::Itertools;
use std::cmp::Ordering;
 
#[derive(Debug, Clone)]

Merging sorted event streams with itertools

iterators merge deduplication

Intermediate 7 steps

php

<?php
 
namespace App\Http\Middleware;

Enforcing upload quotas with Laravel middleware

middleware quota-enforcement collections

Intermediate 8 steps

typescript

import { Type, applyDecorators } from '@nestjs/common';
import {
  ApiExtraModels,
  ApiOkResponse,

A reusable paginated Swagger decorator in NestJS

decorators generics openapi

Intermediate 6 steps

javascript

const express = require('express');
const cors = require('cors');
 
const app = express();

Configuring a CORS allowlist in Express

cors middleware security

Intermediate 8 steps

python

from fastapi import APIRouter, Depends, HTTPException, status
from pydantic import BaseModel
 
from .dependencies import get_current_user, get_project_service

Building a CRUD router with FastAPI

dependency-injection rest-api authentication

Intermediate 6 steps

typescript

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { finalize } from 'rxjs';

A reactive signup form in Angular

reactive-forms validation dependency-injection

Intermediate 10 steps