Skip to content
🐰 Svetlana Zaiats
Blog

Blog

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;
}

Found cool article about alt for image

I found an insightful article by Adrian Roselli about the proper use of alt text for images. The key takeaway is to keep your image alternative text brief, devoid of special characters, empty of URLs, and ideally in one language. Read why here.

In the article you can find examples how screen readers work with long alt. Spoiler: differently and in case of long text - not very convenient for user.

The coolest part is that Adrian Roselli has also prepared a decision tree to help determine what text should go in the alt attribute. It’s a series of questions where you select your option and get recommendations accordingly. Check it out here.

A bit of Java and Selenide for frontend developer

Today, I tackled e2e tests in Java using Selenide. With no automation engineer on the project anymore, I decided to try maintaining the existing tests myself.

It was something new for me, but it turned out to be easier than I expected. A bit of documentation, a few test runs — and the results are in!

I plan to dive deeper into it soon and maybe even write some new tests. ;)