Code Lab

If you are building fundamentals, closing gaps, or reviewing for interviews, this is the practical side of the reference library.

Less loose theory, more direct testing: you write code, run it in the browser, and actually see how data representation, structures, and algorithms behave.

1. Playground to test ideas fast

Use this when you want to:

• validate reasoning before moving it into a real project
• experiment with arrays, loops, functions, and small structures
• compare a JavaScript example with a Python example
• review syntax without leaving the same study flow

Code playground

Write, run, and see the result instantly. JavaScript runs locally. Python uses Pyodide and may take a few seconds on the first load.

Run Restore example Clear output

Output Ready to run.

Tip: use console.log() in JavaScript and print() in Python.

How this works on GitHub Pages

This lab was built for the current site model: fully static. JavaScript runs in the browser, Python runs with Pyodide, and the visualizers are client-side. No backend, no judge, no unnecessary complexity.

2. Data representation without the fog

Many people struggle with algorithms because they still cannot clearly see the value underneath:

• signed and unsigned bytes
• characters as numbers
• hexadecimal
• decimal becoming binary
• memory organized in blocks

This is where you actually see, for example, that "A" can be read as 65, 0x41, or 01000001.

Bits, bytes, and ASCII in practice

Type a number and see how it appears as a byte, hexadecimal, binary, and memory. This is where "A = 65 = 0x41 = 01000001" becomes clear for real.

I/O

Decimal value ASCII character

View

Unsigned byte 65

Signed byte 65

Hexadecimal 0x41

Character A

Binary

8 bits	01000001
16 bits	00000000 01000001
32 bits	00000000 00000000 00000000 01000001

Memory in 4 bytes

Decimal -> binary conversion

For the full reference, open the ASCII Table.

3. Algorithms with movement, not just names

In theory it sounds simple. In practice, the important part is seeing:

• who compares with whom
• when a swap happens
• when the search space shrinks
• how BFS, DFS, and Dijkstra move differently

Search and sorting step by step

Pick an algorithm, use a small array, and watch the movement happen. This makes comparison, swaps, shifting, and search-space reduction much easier to feel.

Array Count Target Speed

Animate Generate array Reset

Step explanation

BFS, DFS, and Dijkstra visualized

Even in a small graph, you can already feel the difference between layered traversal, going deep on one branch, and computing the shortest path.

Speed

Animate Reset

Visit order

Current distances

How to use this to actually study

Data Types Use it together with the bits, bytes, ASCII, and representation section.

Programming Logic A strong follow-up to reinforce decisions, repetition, and decomposition.

Data Structures Combine it with queues, stacks, arrays, and graphs to close foundational gaps.

Algorithms After the visual layer, go back to the reference page and deepen complexity and implementation.

Smart way to use the lab

1. read the reference page first
2. test a small case here
3. change the inputs
4. force an error case, an edge case, and a happy path
5. only then move it into a project or a bigger exercise

That is how fundamentals stop being “content you saw once” and become knowledge you can actually use.