Skip to content
šŸ° Svetlana Zaiats
Blog

Blog

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)

No more absolute for overlapping

Big thanks to Wes Bos for sharing examples of how to avoid using position: absolute for overlapping elements: tweet 1 and tweet 2. Iā€™ve already applied this approach three times in my current project while reworking old elements, and it looks so much better now. :)

For more details, check out Wes Bosā€™s Twitter posts, where he shares video examples, or head over to CSS-Tricks.

Iā€™m a big fan of named grid-area, so my favorite approach is to turn the parent component into a grid and define the layout with grid-template-areas: 'stack'. Then, for the child components that need to overlap, I simply assign grid-area: stack.

(The name of the grid-area can be anything you like, as long as itā€™s consistent across the elements youā€™re working with.)

Alternatively, you can skip the named grid-area and directly set the same grid-row-start and grid-column-start for the elements you want to overlap. Like this:

.container > * {
  grid-area: 1 / 1;
}