Weeknotes 19:03

April 14, 2019

Week of April 7-13

Ship It

It was a busy but very satisfying week as a project soft-launched late on Thursday. I was able to spend most of my time on optimization and refinement as the client was very happy with things coming out of the QA phase. This is my favorite type of situation as I had time to some “crafting” and add some polish to the build.

There was one big issue that I did need to solve. I noticed that some of the sections that I had applied ScrollMagic animations to were breaking when I resized the browser from a larger size to smaller and then back to a larger size. Granted most users do not resize the browser but I want the site to be bulletproof as possible.

I was using a media query monitor script to fire a function when the screen size was over 1282 pixels and then destroying it when the screen was smaller. After debugging the problem, I realized that I was not reinitializing the ScrollMagic animations when the screen was wider than 1282 pixels and it was causing some of the layout to break.

I went back to the tutorial that had used as a basis and determined that I needed to place my controllers instead of the function that I was calling when the screen size was wide enough. That is how the tutorial had done it and I somehow missed that as I was putting together my animation. I refactored my script and the layout was no longer as fragile as it had been.

Polish

I was happy that I had some time to put some polish on the site. One of those polish elements was implementing a clock animation in a classroom scene that was part of the story. I had been looking through an archive of articles that I had saved in Pocket and found a tutorial from CSS Animation Rocks about how to make a working clock. It included scripting to get the time from the user’s computer and sync some of the time elements. I was so excited to share with my art director that I was able to add that to the project. She had asked for it at the beginning of the build phase but it was low of the list of priorities with a lot of other animation work that was more crucial to the success of the design.

I also had some time to do more optimization work. The site is very image heavy. We were trying to find some ways to cut down the weight just a bit more for better performance. My colleague suggested using Web-P images instead of transparent PNGs for some of the elements. An article on CSS Tricks helped me to implement Web-P for the first time in a project. Looking forward to trying it out in the future.

Pirates

My son is part of the HomeSchool Players as a member of the set team. He also was the graphic designer for the production designing the logo, posters, t-shirts and the tickets for the show. They have been preparing to perform The Pirates of Penzance since August and they performed five shows over this weekend.

Leading up to the performances, my son and his team spent three full days finishing the set on location and putting the finishing touches of polish on the scenery. One of the pieces was a ship that the cast could stand on and ropes hanging from a mast that one of the pirates was able to hang on. I spent a couple of Saturdays along with some other dads to help build the ship. It was fun to be a part of that and to work on some things with my son.

This year has been a great opportunity for my son to explore his creative gifting through graphic design and to learn new skills like modeling and using power tools to build the physical objects for the production. It was also a great chance for him to be part of a team and to exercise leadership over different parts of the process.

Reading

There were several articles that I read this week that caught my eye:

• Design Perception by Jeremy Keith
• Split by Jeremy Keith – I am hoping to write a post with some of my thoughts on this one.
• It’s Time to Panic about Online Privacy by the New York Times – I am not sure if I think it is time to panic. But I thought the storytelling device that they used in this feature was interesting.
• The Fragility of Web Design in CSS Trick Newsletter #141 – Some very interesting and thought provoking insights. This article paired with Split by Jeremy Keith got me thinking about how I can improve my site builds in the future.
• Intrinsic Design on The Big Web Show – I finally had a chance to listen to Jen Simmons talk with Jeffrey Zeldman about this label she has coined to describe the new era of layout design. This is another topic I would like to write up some of my personal thoughts about. You can watch her presentation where she introduced the idea at An Event Apart.