Back to the Catalog
algorithms
data-structures
frontend
javascript

Algorithms You Already Ship: A Frontend Engineer's Guide to Sorting, Windows, DP, Edit Distance & CSS Internals

50 questions · by Quizbun

A 50-question deep dive built to help frontend engineers better understand algorithms by grounding every concept in code you already write. Five techniques you already ship without naming them: stable sorting and locale-aware collation behind data tables, sliding windows and two pointers behind debounce/throttle and infinite scroll, memoization that grows into dynamic programming (from useMemo to overlapping subproblems), edit distance and fuzzy matching behind “did you mean…” and fuzzy finders, and the greedy, backtracking, and line-breaking algorithms hiding inside CSS. Every answer is double-checked, with MDN, Wikipedia, and primary-source links collected in References for verification.

Questions

  1. Not answered. In sorting, what does it mean for an algorithm to be stable?
  2. Not answered. A user sorts a table by Name, then clicks the Date header to sort by date. Why does getting ties broken by name for free depend on a stable sort?
  3. Not answered. What is the bug in array.sort((a, b) => a < b)?
  4. Not answered. Why does [1, 2, 10, 20, 3].sort() produce [1, 10, 2, 20, 3] instead of numeric order?
  5. Not answered. French users report that "éclair" sorts after "zebra" in your list. What is the correct fix?
  6. Not answered. Since ES2019, Array.prototype.sort is guaranteed stable. What exactly does the specification require?
  7. Not answered. Which statements about stable sorting and comparators are true? Select all that apply.
  8. Not answered. Which of these comparators correctly sort an array of numbers in ascending order? Select all that apply.
  9. Not answered. Which Intl.Collator / localeCompare behaviors are real and useful when ordering UI lists? Select all that apply.
  10. Not answered. Type the value at index 1 (the second element) of the array returned by [1, 2, 10, 20, 3].sort().
  11. Not answered. What is the core difference between debounce and throttle?
  12. Not answered. A two-pointer / sliding-window scan replaces a brute-force nested loop. What does it typically do to the time complexity?
  13. Not answered. A fixed-window rate limiter (say, 100 requests per clock minute) has a well-known flaw that a sliding-window limiter fixes. What is it?
  14. Not answered. What behavior does a token-bucket limiter allow that a strict, perfectly even rate does not?
  15. Not answered. In a virtualized (windowed) list, what is the point of overscan — rendering a few extra rows just outside the viewport?
  16. Not answered. Which scenario is the textbook fit for debounce rather than throttle?
  17. Not answered. Which statements about windowing techniques in the browser are true? Select all that apply.
  18. Not answered. Which tasks are better served by throttle than by debounce? Select all that apply.
  19. Not answered. For which problems does a sliding-window / two-pointer approach yield a single-pass O(n) solution? Select all that apply.
  20. Not answered. Using a sliding window, what is the length of the longest substring of "abcabcbb" that contains no repeating characters?
  21. Not answered. How are useMemo, React.memo, and reselect selectors all instances of the same classic technique?
  22. Not answered. Which two properties must a problem have for dynamic programming to be the right tool?
  23. Not answered. What distinguishes top-down memoization from bottom-up tabulation?
  24. Not answered. When can wrapping a value in useMemo make a component slower rather than faster?
  25. Not answered. Why does this useMemo recompute on every render?
  26. Not answered. Naive recursive fib(n) (two recursive calls, no cache) takes exponential time. What does adding memoization make it?
  27. Not answered. Which statements about memoization and dynamic programming are true? Select all that apply.
  28. Not answered. What makes a correct memoization cache key? Select all that apply.
  29. Not answered. Which trade-offs between top-down memoization and bottom-up tabulation are real? Select all that apply.
  30. Not answered. Climbing a staircase by taking either 1 or 2 steps at a time, how many distinct ways are there to climb 5 stairs?
  31. Not answered. What does the Levenshtein (edit) distance between two strings count?
  32. Not answered. Computing Levenshtein distance with the classic DP grid for strings of length n and m costs how much?
  33. Not answered. In an fzf-style fuzzy finder, why does typing "fb" match "FooBar"?
  34. Not answered. Why can naive fuzzy search over a large list be slow — on the order of O(n·m) work per keystroke?
  35. Not answered. Good autocomplete ranks matches, not just filters them. For the query "cap", which match should usually rank highest?
  36. Not answered. Which statements about edit distance and fuzzy matching are true? Select all that apply.
  37. Not answered. Treating fuzzy matching as a case-insensitive subsequence test, which queries match "FooBar"? Select all that apply.
  38. Not answered. Which are genuine properties of practical fuzzy finders (fzf, VS Code's Quick Open)? Select all that apply.
  39. Not answered. What is the Levenshtein distance between "kitten" and "sitting"?
  40. Not answered. What is the Levenshtein distance between "flaw" and "lawn"?
  41. Not answered. When flex items grow to fill a row, how does the browser distribute the leftover free space?
  42. Not answered. How does a browser's default line-breaking algorithm decide where to wrap a paragraph?
  43. Not answered. TeX's Knuth–Plass line-breaking algorithm produces tighter, more even paragraphs than greedy wrapping. Which technique does it use?
  44. Not answered. What does text-wrap: pretty actually do in Chrome today?
  45. Not answered. When matching a selector like .menu li a against an element, a CSS engine evaluates the compound selector in which direction — and why?
  46. Not answered. Why can a regex like /^(a+)+$/ hang the main thread on an input such as "aaaaaaaaaaaaaaaaaaaa!"?
  47. Not answered. What characterizes a backtracking algorithm?
  48. Not answered. Which statements about greedy behavior in CSS layout are true? Select all that apply.
  49. Not answered. Which of these involve backtracking? Select all that apply.
  50. Not answered. Which statements about line breaking and text wrapping on the web are true? Select all that apply.