Weeknotes 26:12

March 25, 2026

Week of March 15–21

Freelance project

I spent the previous weekend (March 14–15), several weeknights this week, and this weekend (21-22) to work on a freelance project for Echo Delta. It is the first project of this sort that I have worked on with them. The designer set me up for success by defining many variables in Figma and I translated all of those into custom properties which included the color scheme, font sizes, and font spacing. I had to get use to Figma as it has changed quite a bit in the two years since I used it last.

This particular project is a one-page landing page for prospective students for a school in the Southeast. The page includes several interactive cards, audio elements (sounds from campus and testimonials), quiz cards, and several different types of videos. It uses a grid layout which translated well from 1 column to 4 columns. I used grid-auto-flow: dense to sort the cards to fill any gaps in the two and three column layouts.

I enjoyed the challenge of building custom audio players and custom video players with HTML. I used Stephanie Eckels 12 Days of Web (Audio API) tutorial and MDN’s Create a cross-browser video player to help me to build the custom players I needed for the site. I also got some help from Codepen to build the custom circular progress bar for the audio component.

It is a challenge to work on a freelance project on nights and weekends while still putting in a full day at my full-time job. There were moments during the week when I felt motivated to work, either during the day or at night. But I am grateful for the opportunity to earn a little bit more for my family and to work a build from scratch project. It was also fun to work with another team of people. And have the chance to learn some new things.

Other highlights from the week:

  • My son was home for the week for Spring Break. He was pretty busy doing his own freelance work and then spending a lot of time working on his senior art show. Though I would have wanted to spend some more time together, it was great to have him home and just enjoy a lot of little interactions through the day. It was also fun to see what he was working on in real-time.
  • I worked on a lot of smaller projects in my day job. I put in work on both of the language sites that we are migrating from WordPress to Django (South Africa and German).
  • I built out a template for the Spanish version of the Wonder of the Word page that I had rebuilt in English a couple of weeks ago.
  • I wrestled with a SVG image more than I should. I was having problems getting it to work and inherit the correct fill colors by <use>. I ended up just including the svg file with Django templating. And then I spun my wheels for quite a while trying to figure out why it was faded (opacity). I finally figured out that it was a class coming from Illustrator that was in our codebase and adding less opacity. I just removed the class from the SVG and fixed the problem.
  • I had another challenging problem with a Glide carousel. I learned in the process that Glide does not handle carousels with less items than the perView and had to write some custom scripting to make it work.
  • I did some experimenting the latter part of the week. I checked out a couple of different solutions for parallax. I wanted to explore ways that we could replace a JavaScript solution with modern CSS. Both of the solutions I explored use the new Animations API animation-timeline. Both of the solutions I explored were dealing with multiple layers where I just needed a solution for a background image. The first solution was from Christian Adler (my Codepen based on his solution). The second solution I explored was a video from Kevin Powell from November 2023. I did not get a chance this week to take it for a test drive.
  • The other experiment I did was with replacing Glide with Splide. I had used Splide in the past and wanted to test drive it again because of some frustrations I was having with Glide. I replaced a current Glide instance on our site with Splide so that I take it for a test drive. I enjoyed getting to play around with some different things and consider different solutions to solve problems on our Revive Our Hearts sites.

Project Hail Mary

Our family went to see Project Hail Mary at the Tennessee Aquarium IMAX theater. This IMAX is only one of a few that use laser projectors. It was the perfect venue to see this movie and I think it added to the specific experience of this movie which was shot for IMAX. It was a great movie that I quickly got immersed into. The story and the characters were great. The sets (very little CGI) were awesome and felt very much like the types of things we have seen on the International Space Station. I loved the subtle references to classic sci-fi (Aliens and Close Encounters, maybe more that I missed). One of the best movies I have seen in recent years.

Before the movie starts, the theater tells/shows you why this IMAX experience is different because of the size of their screen (six stories), the laser projectors, and they highlight their great sound system.

Articles I read

#CSS trick not enough folks know about: painting into the sub boxes of an element – border – padding – content you can paint into one, or all of them differently! here's a gradient border, a solid padding fill, and a gradient content (inner) box see fur yerself codepen.io/argyleink/pe…

[image or embed]

— Adam Argyle (@nerdy.dev) November 15, 2024 at 4:43 PM

What I watched

  • KU-Cal Baptist (CBS) – I was feeling good with a 26 point lead in the second half only to have a scare as Cal Baptist came within 6 late in the game. I was glad the Jayhawks pulled it out but it did not bode well for their chances to go far in the tournament.
  • The West Wing (Netflix)
  • Formula 1: Drive to Survive Season 8 (Netflix) – I finished season 8 this week. I was glad that Lando Norris was able to hold on and win the driver championship.
  • Schumacher (Netflix)
  • Agathie Christie’s Seven Dials: Bundle of Love (Netflix) – We enjoyed the first episode in this three part series and look forward to seeing the rest of it.
  • Project Hail Mary (Theater)
  • Gönczy Grand Opening (YouTube) – I watched the livestream of the opening of a renovated ministry center space for Cru’s ministry in Budapest. My good friend is the country director and he has been sharing about this project for the past few years. I enjoyed getting to watch and celebrate this milestone with them. I was not expecting it to be translated and really appreciated that I could follow along as the presentation was in Hungarian.
  • Brian Regan – Eye Exam (YouTube) – Dan Cedarholm shared this in his Studio Notes on Friday and enjoyed this sketch from Brian. It was a nice way to end the work week.
  • True Parallax with CSS-Only is now possible (Kevin Powell, YouTube) – I watched this as I explored some different solutions for parallax backgrounds using modern CSS.
  • Spider-man: Brand New Day trailer (YouTube)
  • Dune: Part Three trailer (YouTube)
  • MLB The Show 26 Launch Trailer (YouTube) – I knew it was only a matter of time that they would stop making the game for PS4.

Books I am reading

Walking

  • Thursday – 3.07 miles in 59 minutes
  • Friday – 1.97 miles in 39 minutes

What I played

MLB The Show 23 (Orioles) – I went 6-0 this week. I played many nights after working on a freelance project to wind down before going to bed. Winding down is much more fun when you are winning. I finished the week in the midst of an 8-game winning streak.

Comment on this post