Uber

Build a Connect Four game with gravity based disc dropping, turn handling, and four in a row win detection.

Connect Four

Interactive grid where users toggle node colors. Upon activating all nodes, the system automatically reverts them sequentially to their initial state.

Node Unwinder

Build a dynamic interface where clicking on a canvas places circles that change color when they overlap.

Overlapping Circles

Create a reusable progress bar component that visually represents a percentage value with customizable max value.

Progress Bar I

Add smooth CSS transitions and animations to the progress bar for a polished filling effect.

Progress Bar II

Enhance the progress bar with proper ARIA attributes and accessibility roles for screen reader support.

Progress Bar III

Component that tracks elapsed time with precision, providing start/stop/reset functionality and lap recording.

Stopwatch

Build a Traffic Light with Pure JavaScript: Red, Yellow, Green, and Beyond! 🚦

Traffic Light

polyfill function that replicates the behavior of the built-in Function.prototype.apply() method.

Polyfill: apply()

Transforms each element in an array using an asynchronous mapping function.

asyncMap

polyfill function that replicates the behavior of the built-in Function.prototype.bind() method.

Polyfill: bind( )

Wrap the native fetch() API with a cache that expires, can be bypassed per request, and falls back to stale data when the network fails.

Cached Fetch

polyfill function that replicates the behavior of the built-in Function.prototype.call() method.

Polyfill: call( )

Currying is a technique of translating a function that takes multiple arguments into a sequence of functions.

multiAdd(1,2)(3)(4,5,6)()

Build a function that takes a list of values and returns a function that cycles through them on each call.

Cycle

Given an array of session records with user IDs, merge entries for the same user — sum their durations and combine their equipment lists without duplicates.

Data Merging

A debounce variant that fires the callback on the leading edge (immediately on first call) rather than waiting for the delay to pass.

Debounce with Immediate Flag

Debouncing enhances performance by delaying function execution until a certain period of inactivity, preventing unnecessary calls.

Debounce

Decode an encoded string where patterns like "3[ab]" expand to "ababab", supporting nested patterns.

Decode String

Build a chainable, awaitable class that queues deploy steps, runs rollback prep first, and resolves to an ordered list of executed actions.

Deploy Pipeline Builder

Implement a myExtends helper that mimics ES5 prototype-based inheritance by combining two constructor functions into one, with constructor stealing, a shared prototype chain, and static inheritance.

ES5 Extends

Build a fetch wrapper that supports request and response interceptors, similar to how Axios interceptors work.

Fetch Interceptors

Implement a fetch function with timeout functionality to handle network requests that take too long.

API: fetch with timeout

Implement a fuzzy search function that finds items where the query characters appear in order, supporting partial and non-consecutive matches.

Fuzzy Search

Process tasks from both ends of an array using two pointers with async execution, tracking the last task before the pointers meet.

Get Last Task

Build a getType function that returns the correct type name for any JavaScript value.

Get Type

Build a search engine that indexes documents by their words and supports fast keyword-based search with relevance ranking.

In-Memory Search Engine

Build a simplified version of JSON.parse() that converts a JSON string into a JavaScript value by parsing it character by character.

Implement JSON.parse()

Safely access deeply nested object properties using a path string or array.

Implement lodash.get()

Count the integers in an array that are divisible by 3 and contain at least two digits equal to 7.

Lucky Sevens

Measure the performance impact of memoization using console.time and console.timeEnd.

Memoize II

The memoize function takes a function and returns its memoized variant, optimizing repeated calls by storing previous results.

Memoize

Min Height of DOM Tree

Implement a priority queue where elements are dequeued based on their priority rather than insertion order.

Priority Queue

Execute async tasks in parallel while tracking priority, resolving with the highest-priority result that succeeds.

Execute Promises with Priority

Generates a new array with each numeric element squared in environments without native functionality.

square( )

Execute an array of async tasks with a concurrency limit, processing at most N tasks at a time.

Throttle Array

Throttling optimizes performance by limiting function execution to a specified rate, preventing excessive calls over short intervals.

Throttle

Implement a Trie (prefix tree) data structure that supports insert, search, startsWith, remove, and find operations for efficient string lookups.

Trie

Code Splitting

What is the difference between debouncing and throttling?

How to improve website performance?

Virtual DOM in React

What is a closure in JavaScript?

A conversational guide to understanding thunks in JavaScript: what they are, why they have a weird name, and how they help manage async operations.