10,000 total views on DEV! 🥳 I looked back at my 28 posts: the most viewed, most reacted to, most commented on, and a few personal favourites. Thank you to everyone who has read them! � dev.to/nyaomaru/cel...

Celebrating 10,000 Total Views on DEV! 🥳 Let’s Check the Stats 😸

Hoi hoi! I'm @nyaomaru, a frontend engineer who recently watched a flock of geese march through...

dev.to

Trapping Rain Water is tricky. I often lose track of which pointer moved, why it moved, and how much water was added at that step 😵‍💫 So I visualized `left`, `right`, `leftMax`, `rightMax`, and `water` with DSA View View 👀 Watch it here 👇 dsa-view-view.vercel.app#s=j.eyJlIjoi...

Selection Sort is easy to describe. Find the smallest value in the remaining array, then move it to the front. But can you follow i, j, and minIndex through every comparison and swap? Let’s make the data flow visible with DSA View View 👀👀 dsa-view-view.vercel.app#s=j.eyJlIjoi...

Bubble sort is simple. But tracing every comparison, swap, and array change in your head is harder than it looks. DSA View View makes the data flow visible, step by step. 👀👀 dsa-view-view.vercel.app#s=j.eyJlIjoi...

Binary Search is one of the most fundamental algorithms. But can you picture exactly how left, right, and mid change at each step? It can be surprisingly difficult, so I made the execution visible with DSA View View 👀 Try the live trace here 👇 dsa-view-view.vercel.app#s=j.eyJlIjoi...

DSA View View | Free DSA Study Tool

Visualize TypeScript DSA code step by step with arrays, matrices, trees, lists, graphs, stacks, and sliding windows.

dsa-view-view.vercel.app

Saving variables during execution sounds simple. But if you store an array or object by reference, later mutations also rewrite the “past” snapshots 😵‍💫 DSA View View clones each recorded state and reconstructs the timeline from per-step patches. dev.to/nyaomaru/how...

How I Made JavaScript Execution Visual and Rewindable (DSA View View 👀👀)

Hoi hoi! I'm @nyaomaru, a frontend engineer who was recently knocked off my feet by how good the...

dev.to

Two Sum is easy algorithms but chasing data flow is not easy. Let's try to see data flow with DSA View View 👀👀 dsa-view-view.vercel.app#s=j.eyJlIjoi...

DSA View View | Free DSA Study Tool

Visualize TypeScript DSA code step by step with arrays, matrices, trees, lists, graphs, stacks, and sliding windows.

dsa-view-view.vercel.app

The hardest part of instrumenting JavaScript was not adding `recordStep()`. It was making sure the original code still behaved exactly the same. An expression must not run twice. `i++` must still use the original index. I wrote about how DSA View View handles this here 👀 dev.to/nyaomaru/how...

How I Made JavaScript Execution Visual and Rewindable (DSA View View 👀👀)

Hoi hoi! I'm @nyaomaru, a frontend engineer who was recently knocked off my feet by how good the...

dev.to

JavaScript doesn’t have a “go back one line” API. So DSA View View doesn’t reverse JavaScript.👀👀 It transforms the code with Babel, records execution as a series of snapshots, and lets the UI replay them forward and backward. Check it here 👇 dev.to/nyaomaru/how...

How I Made JavaScript Execution Visual and Rewindable (DSA View View 👀👀)

Hoi hoi! I'm @nyaomaru, a frontend engineer who was recently knocked off my feet by how good the...

dev.to

DSA View View v1.1.0 is out! 👀👀 See not only the final answer, but how the algorithm got there: • Recursive call frame inspector • Previous variable-change jump • New Heap, Word Ladder, Expression, and Largest Rectangle views github.com/nyaomaru/dsa...

Release v1.1.0 · nyaomaru/dsa-view-view

What’s New in v1.1.0 🚀 This release makes it easier to understand not only the final answer, but how the algorithm got there. New Visualizations Largest Rectangle Area View — Follow the monotonic ...

github.com

Before DSA View View can visualize an algorithm, it needs to understand how to call it. So it extracts the TypeScript function or class signature from the AST, converts the parameters into field definitions, and generates a validated input. dev.to/nyaomaru/how...

A surprisingly tricky part of building DSA View View was deciding what should actually run. The source might contain: • A function • An arrow function • A factory returning another function So I inspect the AST and extract the most likely callable signature. I wrote here 👀 dev.to/nyaomaru/how...

How I Built the Editor and Compile Pipeline for a TypeScript DSA Visualizer (DSA View View 👀👀)

Hoi hoi! I'm @nyaomaru, a frontend engineer. Thanks to my daily Duolingo streak, Dutch is finally...

dev.to

One lesson from building DSA View View. Adding `TreeNode` and `ListNode` to Monaco with `setExtraLibs` only makes TypeScript understand their types. It does not make those classes exist at runtime 😸 So I also inject the actual implementations. dev.to/nyaomaru/how...

How I Built the Editor and Compile Pipeline for a TypeScript DSA Visualizer (DSA View View 👀👀)

Hoi hoi! I'm @nyaomaru, a frontend engineer. Thanks to my daily Duolingo streak, Dutch is finally...

dev.to

One lesson from building DSA View View. A single “Compile” button does not have to mean one giant compile function 😸 Monaco handles diagnostics, Babel handles transformation, AST analysis finds the callable signature. I wrote about how those pieces fit together here 👇 dev.to/nyaomaru/how...

Monaco Editor is powerful, but it is not exactly tiny 😸 So DSA View View first shows a lightweight textarea, prepares Monaco in the background, and then swaps it in while preserving the same code. I wrote about this and the rest of the TypeScript compile pipeline here 👇 dev.to/nyaomaru/how...

How I Built the Editor and Compile Pipeline for a TypeScript DSA Visualizer (DSA View View 👀👀)

Hoi hoi! I'm @nyaomaru, a frontend engineer. Thanks to my daily Duolingo streak, Dutch is finally...

dev.to

I wrote the first implementation deep dive into DSA View View 👀 This time, I followed the path from writing TypeScript in Monaco Editor to generating a verified input form with Babel, AST analysis, React Hook Form, and Zod. The Runtime magic comes next! 😸 dev.to/nyaomaru/how...

How I Built the Editor and Compile Pipeline for a TypeScript DSA Visualizer (DSA View View 👀👀)

Hoi hoi! I'm @nyaomaru, a frontend engineer. Thanks to my daily Duolingo streak, Dutch is finally...

dev.to

Reading the final DSA solution is one thing. Following exactly how the state changed in the middle of execution is another 😵‍💫 That’s why DSA View View lets you move forward and backward through TypeScript execution. How to use it here 👇 dev.to/nyaomaru/i-b...

I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View 👀👀)

Hoi hoi! I’m @nyaomaru, a frontend engineer currently fighting the intense European heatwave by...

dev.to

I’m a frontend engineer, not a DSA expert. But I realized the frontend skills I’ve built over the years could help me understand algorithms in a different way. So I built DSA View View. 👀 I wrote about why I built it and how I’m using it to study DSA again 👇 dev.to/nyaomaru/i-b...

I’m not a DSA expert teaching beginners. I’m a frontend engineer rebuilding my DSA muscles 💪and I made a TypeScript runtime visualizer so we can learn together. I wrote about why I built it and how to use it 👇 dev.to/nyaomaru/i-b...

I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View 👀👀)

Hoi hoi! I’m @nyaomaru, a frontend engineer currently fighting the intense European heatwave by...

dev.to

I struggle with the exact moment the logic stops making sense. A pointer moves. A variable changes. A recursive call starts. Then the thread is gone 😵‍💫 That’s exactly why I built a visual runtime for TypeScript👇 dev.to/nyaomaru/i-b...

I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View 👀👀)

Hoi hoi! I’m @nyaomaru, a frontend engineer currently fighting the intense European heatwave by...

dev.to

The hardest part of DSA for me isn’t understanding the final solution. It’s losing track of what changed in the middle of a loop or recursive call 😵‍💫 So I built DSA View View, a TypeScript runtime visualizer. I wrote about how and why I built it 👇 dev.to/nyaomaru/i-b...

I built a free, open-source TypeScript runtime visualizer called DSA View View 🚀 I made it because I often understood the final DSA solution but still lost track of what was happening in the middle of loops, pointer updates, and so on. Please check my article 👇 dev.to/nyaomaru/i-b...

I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View 👀👀)

Hoi hoi! I’m @nyaomaru, a frontend engineer currently fighting the intense European heatwave by...

dev.to

🚀🚀🚀 I released "DSA View View"!! 👀👀 🚀🚀🚀 It turns TypeScript algorithm functions into step-by-step visual stories. If you like it, please upvote here ⭐👇 www.producthunt.com/products/dsa...

DSA View View: Allows you to understand DSA easily with visualization | Product Hunt

DSA View View turns TypeScript algorithm functions into step-by-step visual stories. 👀👀 Write code, run it with structured inputs, and see the arrays, matrices, trees, lists, stacks, pointers, and ret...

producthunt.com

🎉🎉🎉 is-kit has reached 50 GitHub stars!⭐ 🎉🎉🎉 Thank you to all is-kit users! And good news, it has also been adopted in a real production project and already released 🚀🚀🚀 Thank you, again! I'll continue improving is-kit. Please try is-kit 👇 github.com/nyaomaru/is-... #typescript #oss

Your business rules already compose. Your runtime checks should too. Built with is-kit. github.com/nyaomaru/is-...

Validation shouldn’t become a giant if statement. Compose it with is-kit. github.com/nyaomaru/is-...

I don't think validation should be written. I think it should be assembled. Like LEGO. github.com/nyaomaru/is-...

GitHub - nyaomaru/is-kit: Lightweight, zero-dependency toolkit for building `isFoo` style type guards in TypeScript. Runtime-safe 🛡️, composable 🧩, and ergonomic ✨. npm -> https://www.npmjs.com/packag...

Lightweight, zero-dependency toolkit for building `isFoo` style type guards in TypeScript. Runtime-safe 🛡️, composable 🧩, and ergonomic ✨. npm -> https://www.npmjs.com/package/is-kit - nyaomaru/...

github.com

I wrote a practical guide to TypeScript variance 🧩 It covers covariance, contravariance, invariance, bivariance, strictFunctionTypes, and React’s Flow types like +T / -T. This topic used to feel very abstract to me, so I tried to explain it through real-world examples. medium.com/p/understand...

🧠 Understanding Variance in TypeScript & Flow: Covariant, Contravariant, Invariant, Bivariant

Hoi hoi!

medium.com

I prefer: `result.valid` over throwing exceptions.

Stop writing `value is string` over and over. You can use `define` with is-kit.