Hoi hoi!
I’m @nyaomaru, a frontend engineer who has been obsessed with ramen lately. 😸🍜
Have you used DSA View View already? 👀👀
I Built a...
For further actions, you may consider blocking this person and/or reporting abuse
The two-pointer approach on Trapping Rain Water is one of those problems where visualization actually matters — I've seen people memorize the code without understanding why
left < righteven works, then freeze on variants like "trapping rain water II" on a 2D grid. The "count first, then organize by frequency" framing for Top K is solid, but worth noting that the bucket-sort approach only wins when k is small relative to n — a heap is the boring but correct answer more often than people admit.Thank you! 😸
I also think visualization helps turn these problems from something you memorize into something you actually understand, so I’d be really happy if you give DSA View View a try! 👀
And thanks for pointing out the trade-off with the bucket approach too. The bucket version gives us linear-time behavior, but it also allocates space based on n, while a heap can be a better practical choice when k is small or memory matters.
Handling the size of the data structure is definitely an important part of the design too.
The step-by-step visualization on Trapping Rain Water is clean. The moment where you track the left/right max arrays side-by-side is exactly the mental model beginners miss. Building something similar for my KODA LEARN lessons — thanks for the reference. 🙌
DSA is fundamental, but I think it really supports the way engineers think and solve problems.
So I think making it a core part of your learning content is a great idea!
Good luck with KODA LEARN! 💪😸
Wow, this is awesome! You managed to make those dry, boring algorithms so engaging. Between us, back when I tried reading algorithm books, I’d doze off the second I closed my eyes. I never picked them up again, haha😂. If the tutorials I had back then were this fun, I would’ve been way better at this stuff.🤣
Thx! 😸
Honestly, DSA isn’t always the most enjoyable thing to learn, so I tried to make it as fun and approachable as possible. 👀✨
I’m really happy you enjoyed it! 😹
Nice work! Visuals make DSA much easier to learn👏
Interesting TypeScript approach. I'd emphasize that strict null checks and noUncheckedIndexedAccess are non-negotiable for production code — the number of runtime errors they prevent is remarkable.
Thank you! I agree. 😸
I also think strictNullChecks and noUncheckedIndexedAccess are really important for production code.
And for values that still need runtime validation, I like using reusable type guards too. That’s actually one of the reasons I built is-kit. 👀
is-kit.dev/
Nice TypeScript patterns. Side note: we shipped 12 AI tools under tools.shopveigo.com using strict TS end-to-end. The discriminated union pattern you mentioned was key for our API routing.
Nice TypeScript write-up. The utility types (Pick, Omit, Extract, Exclude) are underrated — proper use of conditional types can eliminate a lot of boilerplate while maintaining type safety.
Love the step-backward feature. Being able to rewind mid-loop is so clutch when you lose track of a variable and don't want to restart everything.
Thx! 😸
Actually, this feature has been improved based on user feedback!
github.com/nyaomaru/dsa-view-view/...
So I’m really happy to hear that you found the step-back feature useful. 👀
If you have any requests or run into any issues, feel free to reach out anytime!
Excellent!
Thx! 😸
Welcome 🐈
I tried , its amazing ! but more amazing to see that you have not missed any commit on GitHub from 6th Jan 2025 ! Amazing consistency
Thanks for trying DSA View View! I’m really happy to hear that 😸
I traveled around Europe, and after that I realized that consistency is one of the most important things in life.
So I try to keep developing something every day as much as I can 👍
Visualization làm rõ được cái "sự thật" của two-pointer trong Trapping Rain Water — thấy
left_max/right_maxco lại từng bước thì mới hiểu tại sao không cần mảng phụ hay stack. Top K Frequent dùng min-heap size k là classic, nhưng thực tế gặp stream data lớn thì bucket sort (frequency → list of values) thường nhanh hơn nhờ O(n) và cache-friendly. Selection Sort thì... haha, giữ làm bài tập thôi, production chưa bao giờ thấy nó đâu. Bài viết trình bày rất sạch, đặc biệt phần step-by-step giúp người mới bắt pattern matching dễ dàng hơn nhiều so với đọc pseudo-code khô khan PS: the tool I meant is on labagent .techVisualization làm rõ được luồng tư duy của two-pointer trong Trapping Rain Water là điểm mạnh nhất — nhiều người học thuộc lòng template
left_max/right_maxmà quên bản chất là "tìm min(max_left, max_right) - height[i]".Với Top K Frequent, thấy bạn dùng min-heap size K thay vì sort toàn bộ frequency map: O(n log k) thay vì O(n log n). Thực tế nếu K nhỏ (top 10, top 100) thì heap win hẳn, nhưng K gần n thì quickselect/bucket sort O(n) lại nhanh hơn vì constant factor nhỏ.
Selection Sort thì… ít khi dùng production nhưng visualization giúp hiểu tại sao nó unstable (swap long-distance phá vỡ relative order) — điều merge sort/insertion sort giữ được.
Gợi ý nhỏ: có thể thêm một slide so sánh side-by-side Trapping Rain Water two-pointer vs prefix/suffix array — giúp người mới thấy tại sao two-pointer tiết kiệm O(n) space (site: labagent .tech)
Visualizing the two-pointer approach for Trapping Rain Water was a game-changer for me — seeing the left/right max boundaries move inward makes the O(n) logic click way faster than reading pseudocode. For Top K Frequent, I always default to a min-heap of size k (O(n log k)) but the bucket sort variant (O(n)) is sneaky good when the frequency range is tight. Selection Sort is mostly a teaching tool, but it’s worth noting it minimizes writes — handy for flash memory or EEPROM where write cycles matter.
Curious: did you build the visualizer in Canvas/SVG or a React lib? The step-through controls look smooth (site: labagent .tech)
Visualization giúp hiểu rõ tại sao two-pointer lại đúng với Trapping Rain Water — nhiều người chỉ nhớ template
leftMax/rightMaxmà quên bản chất: nước đọng tại vị tríibị chặn bởi max hai bên, nên di chuyển con trỏ phía thấp hơn luôn safe. Với Top K Frequent, heap size K cho O(N log K) nhưng bucket sort O(N) khi frequency range nhỏ (ví dụ count words trong log), trade-off phụ thuộc data profile thực tế. Selection Sort ít khi dùng production nhưng visualization swap step-by-step giúp junior nắm được invariant: prefix sorted, suffix unsorted — nền tảng cho hiểu insertion/heap sort sau này. Bài viết minh hoạ rõ ràng các pointer movement, heapify step, swap index — kiểu này dễ debug mental model hơn đọc code thuần (site: labagent .tech)Visualization cho Trapping Rain Water là game-changer thực sự — bài toán này dễ hiểu lý thuyết nhưng lúc implement trên giấy hay whiteboard thì rất dễ off-by-one ở hai con trỏ left/right. Thấy bạn split ra từng step (water level, maxLeft/maxRight, accumulated) giúp debug mental model nhanh hơn nhiều so với chỉ đọc pseudocode.
Top K Frequent dùng min-heap size K là pattern kinh điển, nhưng ít tài liệu vẽ rõ lúc nào push/pop, lúc nào heapify — visualization này giúp junior hiểu tại sao complexity là O(n log k) chứ không phải O(n log n) khi sort toàn bộ.
Selection Sort thì... ehrm, ít ai dùng production nhưng visualization step-by-step swap min-index giúp củng cố tư duy in-place + stability (hay đúng hơn là không stable) — detail nhỏ mà hay bị quên khi phỏng vấn hỏi follow-up.
Frontend làm DSA visualizer side project là combo mạnh: vừa hiểu algorithm, vừa practice React state management cho animation sync. Còn đồ án tiếp theo bạn định visualize cái nào? Graph traversal (BFS/DFS với queue/stack animation) hay DP table fill-order? PS: the tool I meant is on labagent .tech
Visualization của Trapping Rain Water part này rất giúp hình dung được two-pointer approach — đặc biệt là lúc
left_maxvàright_maxcập nhật xen kẽ. Mình hay thấy junior dev bị nhầm lẫn giữa "tìm max toàn cục" vs "max phía bên trái/phải tại thời điểm đó", cái animation step-by-step giải quyết triệt để cái mental model đó.Top K Frequent dùng min-heap size K là classic, nhưng mà nếu stream data liên tục (không fit memory) thì bucket sort + counting frequency trên từng chunk rồi merge lại thường ổn hơn heap push/pop liên tục. Bạn có test case nào large dataset không?
Selection Sort visualization đúng là... đau mắt vì O(n²) nhưng tốt cho dạy invariant: "phần trái đã sorted, phần phải chưa". Mình vẫn dùng nó cho array < 50 elements trong embedded system vì zero allocation, cache-friendly, deterministic timing — những cái mà quicksort/merge sort không guarantee được.
Cái DSA View tool này có support export animation thành GIF/MP4 không? Mình muốn nhúng vào internal wiki team cho onboarding (site: labagent .tech)
Visualization làm rõ được tư duy "two pointers" của Trapping Rain Water thì đỡ tốn sức tưởng tượng mảng
left_max/right_maxhơn hẳn so với chỉ đọc code thuần. Phần Top K Frequent nếu demo thêm so sánh heap size K vs bucket sort O(N) trên cùng một input thì thấy ngay trade-off giữa space complexity và constant factor — detail nhỏ nhưng hay bị bỏ qua khi phỏng vấn. Selection Sort thì cơ bản, nhưng nếu highlight được tại sao nó vẫn dùng được trong embedded system (write operations tối thiểu) thì thêm phần thực chiến. Series dạng này rất hợp để ôn lại pattern recognition trước khi vào vòng onsite PS: the tool I meant is on labagent .techVisualizing the two-pointer shrink on Trapping Rain Water is such a lightbulb moment — seeing
left_max/right_maxmove inward makes the invariant click way faster than staring at pseudo-code. For Top K, animating the min-heap push/pop while the frequency map builds side-by-side really drives home why we keep the heap size bounded at k instead of sorting the whole map. And Selection Sort? Watching the "min index" scan highlight each pass exposes the O(n²) comparisons brutally honestly — great for beginners to feel the quadratic cost rather than just memorize it.One thing I'd love to see next: a toggle to overlay the recursion tree / call stack for the divide-and-conquer variants (like QuickSelect for Top K) so the space complexity becomes visual too (site: labagent .tech)
Visualization làm rõ được logic "trapping rain water" cực tốt — đặc biệt là cách split thành left/right max arrays rồi take min, thay vì suy nghĩ theo hướng two-pointer ngay từ đầu. Đối với top-k frequent, bucket sort (frequency as index) thường được bỏ qua vì mọi người mặc định heap, nhưng O(n) thực sự so với O(n log k) khi k lớn là khác biệt to. Selection sort thì hiếm khi dùng production nhưng visualization giúp hiểu rõ invariant: left sorted, right unsorted, min element swap vào boundary.
Một tip nhỏ: khi dạy/mentor junior, mình thường yêu cầu họ vẽ trạng thái mảng sau mỗi iteration thay vì chỉ đọc code — force non sang tư duy state-based thay vì line-by-line. Bài viết làm chính điều này nên rất phù hợp onboard — found it via LabAgent, site: labagent .tech