DEV Community: Amar Gul

Linked Lists Finally Simple — Why Insert is O(1) When Arrays Are O(n)Uses This Algorithm for .sort()

Amar Gul — Sat, 23 May 2026 20:44:08 +0000

Most developers understand arrays intuitively.
But Linked Lists feel abstract until you
see them visually.

The Core Problem with Arrays

When you insert in the middle of an array,
every element after the insertion point
must shift one position right.

With 1000 elements that means 999 shifts.
That's O(n) time.

How Linked Lists Solve This

A Linked List node contains two things:

The actual data value
A pointer to the next node

Insertion only updates 2 pointers:

\`javascript
// Point previous node to new node
prevNode.next = newNode;

// Point new node to next node

newNode.next = nextNode;
`\

That's it. O(1) time regardless of
list size.

The Trade Off

Fast insertion. Slow access.

Arrays: O(1) access by index
Linked Lists: O(n) access — must traverse

Choose based on your use case:

Frequent insertion/deletion → Linked List
Frequent access by index → Array

Built in React

Three operations animated:

Traverse — walks HEAD to TAIL
Insert — shows 2 pointer updates
Delete — shows pointer reconnection

\`javascript
async function insertMiddle() {
const insertPos = Math.floor(nodes.length / 2);

// Traverse to position
for (let i = 0; i <= insertPos; i++) {
setTraversing(i);
await addDelay(SPEED);
}

// Insert new node
setNodes(prev => {
const updated = [...prev];
updated.splice(insertPos, 0, newNode);
return updated;
});
}
`\

Watch It

What's Next

Binary Search Tree — self organizing
structure that achieves O(log n) for
search, insert and delete simultaneously.

Subscribe to AlgoCanvas:
👉 youtube.com/@AlgoCanvas

Quick Sort — Why Your Programming Language Uses This Algorithm for .sort()

Amar Gul — Sat, 23 May 2026 20:42:45 +0000

Every time you call .sort() in JavaScript,
Python, or Java — Quick Sort is running
under the hood.

Not Bubble Sort. Not Merge Sort. Quick Sort.

Why Quick Sort?

It combines two things perfectly:

O(n log n) average performance
In-place sorting — no extra memory needed

Merge Sort also achieves O(n log n) but
requires O(n) extra space. Quick Sort only
needs O(log n) stack space for recursion.

The Core Idea — The Pivot

\`javascript
function partition(arr, low, high) {
const pivot = arr[high];
let i = low - 1;

for (let j = low; j < high; j++) {
if (arr[j] <= pivot) {
i++;
[arr[i], arr[j]] = [arr[j], arr[i]];
}
}
[arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
return i + 1;
}
`\

Pick a pivot. Everything smaller goes left.
Everything larger goes right.
The pivot is now in its permanent position.

The One Weakness

Worst case is O(n²) — when pivot is always
the smallest or largest element.

Modern implementations use randomized pivot
selection to avoid this trap.

Watch It

What's Next

Linked Lists — a completely different
approach to storing data in memory.

Subscribe to AlgoCanvas:
👉 youtube.com/@AlgoCanvas

Merge Sort vs Bubble Sort — Why 800 Comparisons Beats 147 Every Time

Amar Gul — Sat, 16 May 2026 19:00:50 +0000

Most developers know Merge Sort is faster
than Bubble Sort. But watching it happen
makes the difference visceral.

The Numbers

Bubble Sort: 800+ comparisons
Merge Sort: 147 comparisons
Same 30 elements. Same result.

Why Such a Difference?

Bubble Sort compares adjacent elements
and moves them one step at a time —
O(n²) in worst case.

Merge Sort divides the array completely
down to single elements, then merges
them back in sorted order — O(n log n)
guaranteed every single time.

The Key Code

The entire algorithm is built on one
recursive insight:

\javascript function mergeSort(arr, left, right) { if (left >= right) return; const mid = Math.floor((left + right) / 2); mergeSort(arr, left, mid); mergeSort(arr, mid + 1, right); merge(arr, left, mid, right); } \\

A single element is already sorted by
definition. Everything else is just
merging sorted groups together.

Built in React — Zero Libraries

Animation state managed entirely with
useState and useRef. No external
animation libraries.

Color coding:

Purple = unsorted
Gold = currently merging
Red = comparing
Cyan = fully sorted

Watch It

What's Next

Quick Sort — the algorithm that actually
powers sorting in most programming
languages. Spoiler: it's faster than
Merge Sort in practice despite worse
worst-case complexity.

Subscribe to AlgoCanvas:
👉 youtube.com/@AlgoCanvas

Binary Search vs Linear Search — Visualized in React with No Libraries

Amar Gul — Tue, 12 May 2026 16:45:09 +0000

As a Senior React developer I wanted to
show exactly WHY binary search exists —
not just explain it with words.

So I built a side by side comparison
showing both algorithms running on the
same array searching for the same target.

The Visual Difference

Linear search checks every element from
left to right. Predictable but slow.

Binary search goes straight to the middle.
Higher or lower? Eliminate half. Repeat.

Tech Stack

React functional components
useState for animation state
useRef for timeout management
Zero external animation libraries

The Key Code

Two separate animation pipelines running
sequentially — linear first, then binary:

\`javascript
// Linear search steps
for (let i = 0; i < array.length; i++) {
steps.push({ checking: i });
if (array[i] === target) break;
}

// Binary search steps

while (low <= high) {
const mid = Math.floor((low + high) / 2);
steps.push({ middle: mid, eliminated });
if (array[mid] === target) break;
else if (array[mid] < target) low = mid + 1;
else high = mid - 1;
}
`\

The Result

What's Next

Building visualizations for:

Merge Sort
Quick Sort
Dijkstra's Algorithm
Binary Search Trees
Hash Tables

Subscribe to AlgoCanvas on YouTube:
👉 youtube.com/@AlgoCanvas

Feedback welcome — drop a comment below!

How I Built a Bubble Sort Visualizer in React — No Animation Libraries

Amar Gul — Sat, 09 May 2026 18:08:50 +0000

As a Senior React developer I've built dozens
of complex applications — but I wanted to create
something that actually helps people understand
computer science fundamentals visually.

So I built AlgoCanvas — a series of algorithm
visualizations built purely in React.

Why I Built This

Most algorithm explanations use static diagrams
or walls of code. Neither actually shows you
what the algorithm is doing at each step.

I wanted to change that. Watch it work — and
it clicks instantly.

The Tech Stack

React functional components
useState for animation state
useRef for timeout management
CSS-in-JS inline styles
Zero external animation libraries

How the Animation Works

The key insight is building all animation steps
upfront, then replaying them with setTimeout:

function bubbleSort() {
  const arr = [...array];
  const steps = [];

  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      steps.push({ 
        arr: [...arr], 
        comparing: [j, j + 1] 
      });
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        steps.push({ 
          arr: [...arr], 
          comparing: [j, j + 1] 
        });
      }
    }
  }
  return steps;
}

Then replay each step with a delay:

steps.forEach((step, index) => {
  setTimeout(() => {
    setArray(step.arr);
    setComparing(step.comparing);
  }, index * 120);
});

Color Coding System

🟣 Purple — unsorted elements
🔴 Red — currently being compared
🩵 Cyan — fully sorted and done

This makes it immediately obvious what the
algorithm is doing at every single step.

The Result

What's Next

I'm building visualizations for:

Binary Search
Merge Sort
Quick Sort
Dijkstra's Algorithm
Binary Search Trees
Hash Tables

Subscribe to AlgoCanvas on YouTube if you
want to follow along:
👉 youtube.com/@AlgoCanvas

Feedback Welcome

Would love to hear from other React developers:

Better patterns for animation state?
Which algorithm should I visualize next?
Any performance improvements?

Drop a comment below!