Weeknotes 23:08

March 21, 2023

Week of March 12–18

Principal Media Distribution Catalog Development

Two weeks ago, I started working on a new project for Principal Media. We built a new site for the client that launched in November. With the aggressive timeline on that build, we had to delay a component of the original project, a catalog of their video library.

This past week, I worked on building out the new distribution page where the catalog will live. The design calls for a filtering system based on search and genre along with a sorting feature (by title or by production date).

I was originally thinking that I would use the FacetWP plugin to add this functionality. I used the plugin on the Real World Learning and Energy Efficiency Hub projects that I worked on last summer. Both of those solutions were a bit more robust than what was called for in my current project.

After discussing it with my team, we decided not to go the FacetWP route because the plugin had an annual cost attached. We wanted to explore another alternative that one of our developers could build.

After talking with the team, I remembered that I had done similar filtering in the past on another project four years ago. I booted up my local dev copy of that project and realized that the solution for that project was robust enough for what I needed to accomplish with the Principal Media catalog.

Filtering solution I built in 2020 for Credential Engine State Toolkit. A redesigned site has replaced the site I worked on.

The original filtering solution had been written by another developer that we had contracted on that project. I used his code as the basis for creating a separate filtering solution in another place on that same site. The disadvantage of this approach is that I don’t always understand why everything in a solution that I didn’t write works. But I understood enough of it to alter along with the help of my colleague, Ryan.

I went back to that revised solution from 2020 and was able to build a new solution that met the requirements I needed for the Principal Media catalog. I was able to add some extra functionality to the original solution. I got help this time around from my teammate, Josh. He helped me to address some PHP errors and clean up and simplify the code for this new project.

I love the intrinsic reward of realizing a concept. I really enjoyed building out this solution and going back to polish little details in the user interface.

Marquee Animation and Experimentation

Along with the video catalog, the original design for the Principal Media site included a block on the homepage to link to the video catalog.

An example of the block from the design mockup.

The designer wanted the two rows of videos to animate in different directions (infinite scroll), similar to a marquee element. I have seen different examples of this type of element on other websites, usually with logos. I had even used a similar element on the Principal Media site for just that use case.

CSS Animation Solution

As I began doing research, I found this example on Codepen that was named “marque-like content scrolling.” This example uses CSS animation along with some Javascript to clone several of the logos for a seamless experience.

See the Pen Marquee-like Content Scrolling by Coding Journey (@Coding_Journey) on CodePen.

When using CSS animation, without the cloned elements, there would be a break in the continuous line of elements between where the parent container makes it to the end of the viewport on the left and then starts back up coming in from the right.

See the Pen Marquee-like Content Scrolling without cloned elements by Jeff Bridgforth (@webcraftsman) on CodePen.

Cloning the same number of elements as the number displayed and then set the width of the parent container to the width minus the cloned elements will create an overlap that makes the infinite horizontal scroll seamless. This example uses CSS custom properties for these calculations along with viewport units so that the layout works responsively.

I wanted to display a different number of elements depending on the width of the viewport. One thing that this example does not account for is changing the number of cloned elements as you resize the browser window. I know that most users do not resize the browser window like a developer would but I like to have bulletproof solutions in place for those edge cases.

GreenSock (Javascript) Solution

I realized that I would have had to do some complex scripting to add or subtract cloned elements in the solution above. I decided to turn to GreenSock to try a Javascript animation solution. After some research, I found a reference to a helper function created for just this type of “marquee” scrolling.

See the Pen Images horizontalLoop() helper function for seamless looping (responsive) by GreenSock (@GreenSock) on CodePen.

After adding GreenSock and writing the script I needed for my solution, I noticed that the elements had a bit of a jerk on the left-hand side (you can observe it in the Codepen above). The jerky motion was even more prominent with my layout that was rotated (see below).

The helper function puts a transform on the individual “cards” whereas the CSS animation solution only puts the transform on the parent container. I felt like the CSS animated solution was much smoother and decided to go back to it after trying the GreenSock route.

The Verdict

In the end, I decided to clone all the child elements (the cards). This solved the problem I had before and was a much simpler way to make it work with different viewport widths and a different number of elements showing from smaller to larger viewports.

It was worth exploring an alternative solution even though I ended up opting for the original direction. I am grateful that I have had the space to experiment and polish solutions on this project. I enjoy my work so much more when I am able to be a craftsman.

Adjustments to the design in development

As I built out the block, I experimented a bit with the layout. I rotated the parent container -5 degrees (transform: rotate(-5deg)). I consulted with the designer and she liked the look of the rotated container. I chose to position the two scrolling elements underneath the block heading, teaser, and link to the catalog page.

Finally, I pulled the video titles underneath the images instead of having the title within the image block. I would have needed a gradient overlay to make sure the titles were readable and I thought they obscured the artwork too much. And having them underneath was consistent with the layout of the catalog page.

I also included functionality to pause the scroll animation if you hover over the parent container. The final solution will include links to an individual video page for each of those videos. I want to make it easy for the user to be able to select those videos by pausing the animation. I also wrote my CSS so that if the user has a prefers reduced motion preference, the video elements will not animate.

Posts I wrote

Aspect-ratio and container query units six years later – After seeing a tweet a couple of weeks ago from 2017, I reflected on 2 recent CSS features that solve problems today that I wished for 6 years ago.

Codepen created

With the start of the NCAA Men’s Basketball tournament, I decided to revisit a Codepen I had created six years ago. At the time, I was practicing building different layouts with CSS Grid. I thought the tournament bracket would be a fun project to try with CSS Grid.

I decided to update that solution with the 2023 bracket pairings.

See the Pen 2023 NCAA Tournament Bracket in CSS Grid by Jeff Bridgforth (@webcraftsman) on CodePen.

March Madness

As a college basketball fan, this is one of my favorite items of the year – March Madness. One of the things that I enjoy about the tournament is filling out a bracket, and choosing winners of individual games and the whole tournament. LGND, the agency I work for, has a bracket competition each year that I enjoy participating in. In the past two years, I have come in second place after picking Baylor to win the tournament in 2021 and picking my alma mater, Kansas, to win the tournament last year.

This year’s tournament has been crazy as a lot of top seeds were eliminated in the first two rounds, including my Jayhawks, who I picked to repeat. Overall, I did pretty well in our LGND pool. I was tied for first place at the end of the second round. But I plan to drop quite a bit as the tournament progresses and my top team has already been eliminated.

I won’t have as much skin in the game for the remainder of the tournament but I am looking forward to more upsets and exciting moments over the next two weeks.

Articles I read

Books I am reading

  • Winning Fixes Everything – I listened to a podcast about this book several weeks ago. Just barely into it but already enjoying it. My local library bought it per my request. The book explores the culture behind the Astros signs stealing scandal.
  • Talking About Race
  • Understanding Privacy – I don’t think I picked this on up this week.

What I watched

  • New Amsterdam (Netflix)
  • Madame Secretary (Netflix)
  • Bad Batch (Disney+)
  • The Mandalorian (Season 3 on Disney+)
  • March Madness – NCAA MBB Tournament (CBS and online) – I watched several games online or on TV from Thursday on. I was very disappointed that my Jayhawks were eliminated in the second round.

Comments are closed.