Skip to content
šŸ° Svetlana Zaiats
Blog

Blog

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.

0 days without mistake with SVG background

We have a background SVG at the top of our website: it is SVG image on top, but the main part is just a gray background.

We use the following css for that:

.container {
    background-image: url(path/to/our.svg);
    background-repeat: no-repeat;
    background-size: 100% 144px;
}

It works fine, but holidays are coming and our designer suggested to use a more festive background (and of course add little snow, but there was no problem with snow). Additionally designer requested not to stretch holiday image, so I came up with the following css

.container {
    background-image: url(path/to/holiday.svg);
    background: no-repeat;
    background-size: auto 144px;
    background-position: left top;
}

It went to testing, then to production, and a couple of days after I have message from colleague: hey, could we do something with holiday background on wide screens? It was a disaster: on wide screens (more than 2500px) our background ends on 2000px and the rest is left as an empty gray space!

Fix is really simple:

.container {
    background-image: url(path/to/holiday.svg);
    background: repeat-x;
    background-size: auto 144px;
    background-position: left top;
}

Just note: 100% or repeat.

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 šŸ¤Ŗ

Today I learned about ref callbacks

It escaped my attention, we can pass a callback function as a ref for an element in React, not just an object (like from useRef).

const scroller = (node: HTMLDivElement) => {
    if (!node) return;
    node.scrollIntoView({ behavior: "smooth" });
};


// somewhere in component
 <div ref={scroller} />

How it works:

  • when the element is added to the DOM, React calls the ref callback with the DOM node as its argument
  • when the element is removed from the DOM, React calls the ref callback with null
  • also the callback is invoked whenever a new callback is assigned (on each render if it is written as a simple function)