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:
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.
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. ;)
I want to tell about a problem I solved today at work.
We have a table with filters that display a list of offices visits.
Some visits require additional attention from managers, such as when
an access card is issued for a visit, but the visit ends and the card hasn’t been returned.
The task was to highlight such visits in the table.
I did this by highlighting the row and adding a banner at the top.
This banner allows for quickly filtering visits that require attention.
I implemented this (including extra functionality to avoid saving the filter
with only highlighted visits), and it worked — until some issues appeared with the filters.
Most of the filters are dropdowns with a list of options. On this feature branch,
the dropdowns became slow, and after 3-4 fast clicks, the page started to freeze.
The console showed errors about “Maximum update depth exceeded” and
recommended checking my useEffects.
The stack trace pointed to the dropdown component from our company’s component library.
What I Did To Solve The Problem
I started by trying to understand what was happening.
Additional difficulty was that ghe issue appeared after I added code from another package in our monorepo (I use npm workspaces), and there were a lot of changes in the code.
Debugging was challenging, as the dropdown component seemed fine,
and I couldn’t see any changes that could have caused the issue.
I tried Googling and asking Claude (AI assistance),
but then turned to one of my favorite debugging methods — removing parts of the code.
First, I wanted to see if the issue came from using the new package.
I created a new branch from our develop branch and moved minimal feature changes there.
The problem was still present.
Next, I removed parts of the feature code, including requests and data handling.
The problem persisted.
I was almost ready to give up, but I decided to remove all the feature code.
And suddenly, the problem disappeared.
Finally, I found the issue: I had added a div to wrap the table and the banner above it.
When I replaced it with a fragment, the issue disappeared.