Skip to content
šŸ° Svetlana Zaiats
Blog

javascript

3 posts with the tag ā€œjavascriptā€

Does memory tricks you?

Do you often run into memory leak problems? I donā€™t, but this topic is fascinating to me. Every time I try to dig into problems with memory (sometimes out of pure curiosity), I find these issues very hard to debug and quite stimulating for a developerā€™s brain.

Iā€™m not an expert in memory leaks, so I started gathering useful materials and examples.

Check out Memory Leaks in the guide section ā€” itā€™s a curated collection of links about how garbage collection (GC) works, how to use DevTools efficiently, and in the future, I plan to add some practical advice.

HOC or not HOC?

In a set of katas for exploring patterns, thereā€™s one about HOCs: truncate paragraph with HOC in React. Recently, Iā€™ve also been diving into the Decorator Pattern, and in React, an HOC could be considered an example of a Decorator.

But is the HOC still a thing?

I often come across HOCs in codebases that are 3ā€“4 years old (or older),but I rarely see them in new projects. In the old React documentation, there was even a dedicated page about HOCs, complete with examples. But in the shiny new React documentation, HOCs are nowhere to be found.

It seems like custom hooks have taken over this territory and mostly replaced HOCs. What can you do with an HOC that you canā€™t achieve with a custom hook?

Personally, I prefer custom hooksā€”or even classes with their own logic. It is more obvious and clear for me.

Boxes in boxes, Or what occupied my mind lately

I sometimes solve puzzles on Codewars and LeetCode, and recently, I came across a kata called ā€œBoxes in boxesā€.

Itā€™s not a particularly difficult problem, but I struggled with it. My first issue with puzzles like this is that Iā€™m not great at spatial reasoning. Because of this, I couldnā€™t immediately understand the pattern for drawing the boxes.

The second problem was that even after I figured out the pattern, I couldnā€™t implement it. In my mind, I thought I needed to redraw the boxes I had already calculated. So, in my understanding I need to start by drawing one box and then try to add the lines for two boxes, and repeat already drawn boxes. But I just couldnā€™t wrap my head around it.

Eventually, I was forced to check other solutions (after obsessing over it for two evenings without making any progress). And guess what? I still didnā€™t get it. I mean, I could look at the solution, understand the code, and see what it was doing, but I just couldnā€™t grasp how it produced the final result.

In the end, I wrote my own solution based on the ideas from another one I found, but I needed to debug it carefully to fully grasp the concept.

Iā€™m leaving code with my comments here as a reminder of the solution and my understanding.

function draw(n) {
    // all for one box, our start
    let res = [" _ ", "|_|"];


    for (let i = 1; i < n; i++) {
        res = [
            // top line - just add tops of boxes
            ' _' + res[0],
            // draw existing boxes without left border (top 1/2 part is repeat existing but partially)
            ...res.slice(1).map(str => '|  ' + str.slice(1)),
            // draw existing with left border and without bottom
            ...res.slice(1, -1).map(str => '| ' + str),
            // draw bottom
            '|_' + res[res.length-1],
        ]
    }


    return res.join('\n');
}

I hope it will never be asked on interview šŸ¤Ŗ