Weeknotes 24:06

February 12, 2024

Week of February 4–10

Badge Generator

I spent a good chunk during the first part of the week working on a badge generator for one of our clients. The tool allows a user to upload an image of themselves to make a social media badge they can download and post on their social media. The badge generator for this specific project was for a small business training program at 16 different locations around the country.

The original badge generator solution was written by one of my colleagues who is no longer at the company. I have cloned the original project each time I make a new one for different uses by the client. Near the end of the year, I had to figure out how to change the location of the uploaded image in the badge because the layout was different. We had also decided to make the downloaded image bigger on one of the later projects at the end of the year.

The project utilizes canvas to generated the image with the different overlays that each unique badge contains. I am not as familiar with canvas so it has been a bit of a learning curve for me to determine what properties to adjust as we have made changes in each version.

The challenge for this most recent project was that there were 16 locations. I didn’t want to have to clone the project 16 times because the only difference was the overlay image. I wanted to add a select element so that the user could choose their training location.

I started by writing a script to change out the SVG image that served as the overlay. My script was swapping out the <img> tag and was working in the DOM. But when I would download the image, the overlap image was missing. I enlisted the help of my teammate Ross but we both were unable to solve it. It was the end of the day so I put a pin in it.

When I picked it back up in the morning, I noticed that I was getting an error in the console. Eventually I realized that the reason that the overlay was not working was because the project is using Parcel and the build files have a cache busting string that Parcel adds when it builds the project. I was referencing the overlays without the cached busting strings.

I decided to approach it differently and added all of the overlay images to the DOM and hid them all by default. I changed the script to add a class to the selected location overlay so that it would be visible. This solution solved the problem.

I encountered a couple of other challenges after our team did QA but I was able to come up with solutions for each of those issues. I enjoyed getting to work on this quick project and bring my idea to reality in a couple of days.

Other highlights from the week

  • I finally garnered the courage to fill out the FAFSA for my son on Sunday. I have had some trying experiences with the FAFSA form in the past. They redid the form this year and I had read that there had been a lot of bumps after they opened it in January. But I found it pretty easy to navigate and it did seem much easier than years past. I am grateful that I got the heads up about one of the questions that is asked in the negative and I am sure confuses a lot of people. I still need to fill it out one more time for my youngest, who graduates from high school in May.
  • I was very happy about a meeting that we had with the Canadian embassy and Canadian government on Monday. I am glad that I took time to prepare for the conversation and felt more confident in my input, especially in the area of accessibility. It was a productive conversation that helped clarify requests on their end to make some updates to the Connect2Canada site.
  • I was asked to put together a presentation to share at our All Hands meeting this next week. I am going to share about our quality assurance (QA) process and how it ties into our team values of “caring more than the client” and “choosing optimism and ID solutions.” My teammate, Anthony, helped me get familiar with Figma and shared a template from a recent presentation he put together. The presentation came together pretty quickly both in content and putting it together in Figma to share as a slide presentation. I plan to make the content into a post after I give the presentation.
  • I started writing two different posts for this site on Thursday and Friday. The first post is my thoughts about remote working. There is one part of the post that I would like to hash out better. I was not able to make time over the weekend to finish that one up. The second article is a walkthrough of debugging an issue in a client project. I am waiting for a review from the client before I share that post.

How about those Chiefs?!

The week was one of anticipation for the Super Bowl that happened on Sunday. My excitement spilled over into a post I wrote on Wednesday. I suffered through many years of disappointment as a fan of my hometown team. It is crazy to me that the Chiefs are now a team that others love to hate. As I relish their recent success and hoped for another Super Bowl win, I reflected back to some of my memories of following the Chiefs as a kid.

Articles I read

What I watched

2 better alternative to overflow:hidden (Kevin Powell)

Books I am reading

  • In Good Time – I was tempted to put this book down after reading a chapter earlier in the week. But glad that I stuck with it because the next chapter was very thought-provoking.
  • Digital Liturgies – I scored the ebook for $3 for crossway.org several weeks ago. It has been an interesting read so far especially since the Internet has been so central to the work that I have done over the last 25 years.

What I played

FIFA23 (Manchester City) – I enjoyed playing several games at different points in the week.

Comment on this post