Weeknotes 25:41

Posted 2 days ago

Week of October 5–11

Solving a search field focus issue

While at the True Woman conference the week before, I had used the search on Revive Our Hearts as I was looking for content to put together an ad. I noticed that when I brought up the search box, it did not focus on the search field (I realized it after I had typed in my query). I made a comment at the time to my team leader that I needed to fix that later.

On Tuesday, he asked me if I had captured that task in Asana. I had not and I could not remember where I had seen the issue. He told me not to worry about it and that we would probably come across it in the future. But I knew it was going to bug me for the rest of the day. As I was having a Slack conversation, I remembered the context of my search and found the page that it did not work on. But I also noticed that it did work as expected (the search field came into focus when the search box modal came up) on the homepage. I noticed an inconsistency because it worked on some pages and not on others.

I played around with the script that added focus to the search modal. As I started thinking through why it would not work, I realized that I the search results page is where I initially noticed the issue. The search results page has another search box just above the results listing. I wondered if that search box had the same id as the global search. Sure enough it did. And I had discovered the source of my problem. I decided to change the id on the global search and add a few lines to the script to look for that id to open the search modal.

IDs are only meant to be used once on a page. By having two elements with the same id. I am guessing that neither of the fields were put into focus or the second one (above the search results) was getting focus.

Lining up two columns in a product comparison chart

My team leader had asked me to take a look at a layout in our CMS admin. It was a product report that allowed you to compare product sales over two periods of time. You could compare multiple products. But because the content of the tables was different and did not contain all the same information, it made it more difficult to compare. He asked me if I could line up the tables to make it easier.

My first thought is that subgrid might be able to help me. The comparison tables were in two different divs or columns. I wondered if I put a grid on the parent container and then used subgrid to inherit the rows from the parent if I could achieve the desired layout. But when I coded it out, all of the data was displaying in one row on top of each other.

The problem was that the parent only had one row defined and the rows needed for the subgrid was not communicated with the parent grid. The only way to fix it would be to define the number of row. But I couldn’t just define that because the data was dynamic and the number of rows would vary.

One solution I found was to define the number of rows using a custom property in CSS and then adding a script to determine the number of rows and update the custom property.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: .75rem;
  /* Parent defines the rows that subgrids will share */
  grid-template-rows: repeat(var(--rows, 1), auto);
}

.product-comparison-columns {
  display: grid;
  grid-template-rows: subgrid;   /* inherit parent row tracks */
  grid-row: 1 / span var(--rows);/* span all those rows */
  align-content: start;
}

But I ran into a problem in that my script was not working in the CMS. But then I realized that the CMS was looping through the product information and there was probably a way to grab that number and define the custom property as an inline style. I had to ask a teammate how to do that in Django and he was able to help me out. I liked the solution because I did not have to rely on JavaScript and the template already had access to that information. I just needed to tap into it. Problem solved.

Six months

On Thursday, I passed the milestone of six months with Revive Our Hearts. I had planned to write a post to share some thoughts and lessons learned from my first two months in June. But then life happened and the post did not. I had thought about doing it in September but that did not work out either. Six months seemed like a nice mark to finally shared those thoughts.

Read Six Months

Made my day

On Saturday, I saw this post on Bluesky.

Vale

vale.rocks

Jeff Bridgforth (@jeffbridgforth.com) often goes by the handle ‘Webcraftsman’, which tells you most of what you need to know. He personally posts plenty of great stuff but is also a great curator, linking to all sorts of interesting content across the web, often paired with comment. #ValePromotes

This made my day. It is nice to be recognized for what you do. I am glad that my content, both in what I write and in what I link to, has been found helpful. Thanks Vale.

Roadtrip

I traveled for the third weekend in a row. This was a short day trip up to Nashville. We took our youngest up to stay with our oldest. They will be attending the Laufey concert in Nashville on Monday night.

It was good to be able to spend some time with our oldest daughter after the disappointment of only seeing her from a distance a couple of weeks ago. She had COVID so we were unable to give her hugs and kisses. We dropped off a couple of things at the townhome she just moved into, waved at her and continued on to Murray. It was nice to be able to spend a few hours with her, get to see more of the townhome, and play with her guinea pigs.

Articles I read

What I watched

Unleash the power of Scroll Animations (Bramus, Chrome for Developers) – I took some time on Friday to start watching Bramus’ course on scroll-driven animations. I watched the first four videos and then took some time to put what I learned into practice by converting a Codepen that I originally did with GreenSock to use the scroll-animations API.

What I listened to

  • Beholding the Wonder: True Woman ’25 (Revive Our Hearts podcast) – I wanted to hear some stories of what God did in some of the women’s lives that attending the conference last week.
  • In Defence of Hope (Jackie Hill Perry at Passion 2025) – My wife and listened to this on our way back from Nashville on Saturday.

Books I am reading

Walking

  • Sunday – 4.21 miles in 1 hour 18 minutes

What I played

MLB The Show 20 (Twins) – I lost my third straight game, second to the Royals before coming back and winning the final two games of the series. I won the final game, 4-3, when I hit a two run homer when I was down to my final strike in the ninth. My closer came in and got three quick outs to win the game.

Comment on this post