Code Explainers

Code explainers tagged #event-handling

javascript 
class Carousel {
  constructor(root, { interval = 5000 } = {}) {
    this.root = root;
    this.track = root.querySelector('.carousel__track');

Building an accessible auto-playing carousel

dom state-management timers
Intermediate 9 steps
javascript 
class ShortcutManager {
  constructor(target = window) {
    this.target = target;
    this.bindings = new Map();

Building a keyboard shortcut manager in JavaScript

event-handling normalization map
Intermediate 9 steps
typescript 
import { useCallback, useRef, useState } from "react";
 
type UploadZoneProps = {
  accept?: string[];

A drag-and-drop file upload zone in React

drag-and-drop file-validation controlled-state
Intermediate 9 steps
javascript 
class LyricsSync {
  constructor(audio, container, lines) {
    this.audio = audio;
    this.container = container;

Building a synced lyrics highlighter

binary-search dom-manipulation event-handling
Intermediate 9 steps
javascript 
import { useState } from 'react';
 
function StarRating({ value = 0, max = 5, onChange, size = 24 }) {
  const [hovered, setHovered] = useState(null);

Building an accessible star rating in React

controlled-component accessibility state-management
Intermediate 8 steps
javascript 
import { useState } from 'react';
 
export function ReorderableList({ initialItems }) {
  const [items, setItems] = useState(initialItems);

Drag-to-reorder lists in React

drag-and-drop state-management immutable-updates
Intermediate 8 steps
javascript 
const FOCUSABLE = [
  'a[href]',
  'button:not([disabled])',
  'input:not([disabled])',

How to trap keyboard focus in a dialog

accessibility dom event-handling
Intermediate 8 steps
javascript 
const STORAGE_KEY = "theme-preference";
 
function getSystemTheme() {
  return window.matchMedia("(prefers-color-scheme: dark)").matches

Building a dark-mode toggle that respects the OS

dark-mode localstorage matchmedia
Intermediate 8 steps
typescript 
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 
interface Shortcut {
  key: string;

A keyboard shortcut directive in Angular

directives event-handling keyboard-shortcuts
Intermediate 9 steps
typescript 
type Handler = (event: KeyboardEvent) => void;
 
interface Binding {
  combo: string;

Building a keyboard shortcut manager in TypeScript

event-handling normalization closures
Intermediate 7 steps
javascript 
class StarRating {
  constructor(container, { max = 5, value = 0, onChange } = {}) {
    this.container = container;
    this.max = max;

Building an accessible star-rating widget

dom event-handling accessibility
Intermediate 7 steps
typescript 
import {
  Controller,
  Post,
  Headers,

Verifying Stripe webhooks in NestJS

webhooks signature-verification event-handling
Intermediate 7 steps
typescript 
import { Processor, WorkerHost, OnWorkerEvent } from '@nestjs/bullmq';
import { Logger } from '@nestjs/common';
import { Job } from 'bullmq';
import { MailerService } from '../mailer/mailer.service';

Processing background email jobs in NestJS

job-queue background-processing dependency-injection
Intermediate 7 steps
javascript 
const express = require('express');
const Stripe = require('stripe');
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

Verifying Stripe webhooks in Express

webhooks signature-verification raw-body
Intermediate 7 steps
typescript 
function throttle<T extends (...args: any[]) => void>(
  fn: T,
  limit: number
): (...args: Parameters<T>) => void {

Building a trailing-edge throttle in TypeScript

throttling closures generics
Intermediate 7 steps
java 
@RestController
@RequestMapping("/webhooks/stripe")
public class StripeWebhookController {
 

How a Stripe webhook controller works in Spring

webhooks signature-verification event-handling
Intermediate 7 steps