Weeknotes 22:05

February 9, 2022

Week of January 30-February 5

TinyBird

I spent three nights working on a personal project. My son is a high school senior and plans to study graphic design next year. He has been busy applying for scholarships. I was able to help him by creating an online portfolio to showcase his work for one of the scholarships he is applying for at Western Kentucky University.

I created a couple of layouts for the landing page and the individual portfolio page. I utilized Utopia to create fluid type and spacing for this site. It was my first time using the tool, which I found out about from Andy Bell’s article, Consistent, Fluidly Scaling Type and Spacing.

I am really happy with how the site turned out and even more important, so was my son. I made some adjustments to the type sizing for headings over the weekend to work better for mobile.

While I was working on the site, my son was busy making a video for another scholarship opportunity with the same school. He created a video essay of his design process for a project he did over the summer. He created a logo for his Gilbert and Sullivan troupe for their production of “The Grand Duke.” This is the fourth year he has created a graphic identity for their show.

The video really showcases his talents. He knocked it out of the park.

Project work

A couple of weeks ago, I started working on a project for a 12-week education program that mentors sole small business entrepreneurs that traditionally do not have access to these types of programs. We had to halt work last work as the client decided to put the program under a different company initiative. This decision meant that we had to take the existing branding of that initiative and rework the design for the application page.

On Friday of the previous week, I started working on converting the page over to the new typography and color schemes with some adjusted layouts. I continued working on that implementation this week with the goal of finishing our initial development to send over to the client at the end of the week.

My first task was to refactor the layouts for smaller screens. I practice a ‘mobile-first‘ philosophy of building my stylesheets. This means that my default styles are the mobile styles and then I layer in styles for larger viewports through media queries. A few years ago, I began to work differently to where I write the desktop styles first and then go back and refactor my code to adjust the layouts. But the code is still ‘mobile-first’ but the process is ‘desktop-first.’ I found it easier to start with desktop styles because most of the time I am only given a desktop mockup. And then I make decisions about how the layouts reflows for smaller screens, consulting with the designer from time to time.

I felt a bit crunched on Tuesday as I considered changing some plans I had for later in the week. I had planned to take off Thursday and Friday to travel to Kentucky with my son to visit Murray State for an “Admitted Students Weekend.” The area was expecting icy weather on Thursday so I considered going up on Wednesday instead which is why I felt more crunched to get things done on Tuesday. But it worked out that the event was canceled which gave me some extra time to work on the project.

Animation bug in Firefox

I employed a very subtle animation strategy for the page. There are shapes that appear in several different places in the design and I decided to animate those in as the reader scrolls down the page. The shapes are in groups of 3 or 4. I am using inline SVG and I wanted to stagger the delay on the items so they animate in at different times. As I was doing QA, I noticed the animation was not as smooth in Firefox. Some of the shapes were fading in at the same time and the results were very inconsistent.

I enlisted the help of my teammate, Ryan, to help me solve this after spending time spinning my wheels. As we were trying different things, we finally found a way to “fix it.” Instead of starting the opacity of the SVG at ‘0’, we changed the value to ‘0.01’ (opacity: 0.01). For some reason, that fixed the problem in Firefox. The animation was already running as expected in Chrome, Safari, and Edge and this fix for Firefox did not break it in those browsers.

See the Pen
Firefox Opacity Animation Stutter Demo by Ryan (@mccahan)
on CodePen.

Ryan created a reduced test case in Codepen. If you view it in Firefox, you can see the problem replicated. We plan to report the bug to Mozilla after we do a little bit more research.

ShopTalk Show 500

On Thursday night, I listened to the 500th episode of The Shop Talk Show. This is quite a milestone that has taken over 10 years for Chris and Dave to accomplish. I began listening to the show shortly after it launched in 2012. I was a consistent listener for a little over two years until I started working from home. I have never been able to listen to podcasts at home because it is hard for me to just sit and listen to something without getting distracted by something else. Listening to podcasts has always worked better for me in the car.

I have occasionally listened to the podcasts over the past 8 years, including a couple at home. I got into a habit of listening to the show after I dropped off my daughter at musical practice on Saturday mornings or later in the afternoon when I would pick her up. I kickstarted that habit this year as I have about a 30-minute drive from where my son practices with the same troupe. I have also consistently listened to the show when I have commuted up or back from Nashville over the past 4 years when I would either take my daughter back to school or pick her up for a break.

Shop Talk Show is my favorite podcast. It helped me to feel more connected to the Web community and kept me up-to-date with the latest news and best practices in the industry. I really enjoyed a series, How to Think Like a Front-End Developer, that they did a little over 3 years ago. I enjoyed listening to all the personal stories of the people they interviewed. I had wanted to write some posts for this site answering some of the same questions and giving my perspective.

I really enjoyed listening to the 500th episode as Chris and Dave reminisced. They broke it down into 100 episode chunks and shared different highlights from each of those time periods. I am grateful for their hard work. Thanks, Chris and Dave.

NFT Campfire

This week for our LGND Campfire, we talked about NFTs. Mike Aleo has done some research and has purchased some NFTs. He gave an overview of what they are and the platforms you can find them on. One of the other designers has also thought quite a bit about NFTs and shared his insights. It was an informal time where several teammates asked questions or expressed their opinion. At the end of the time, Mike created an NFT and showed us the process of adding it to one of the platforms.

I really don’t get NFTs. But that is okay. NFTs are not something that is for me. I am glad to have a bit more understanding of the subject as I have seen many people talk about it on Twitter. But I know enough now that I choose not to invest my time and energy into it.

The Anarchist’s Tool Chest

Late in the week, I came across an ad on Facebook for The Anarchist series of woodworking books from Lost Art Press. I have always had an interest in woodworking and have enjoyed shows like The Craftsman’s Legacy and This Old House. And when I say interest, it stirs something deep within my heart. I have always enjoyed building things like LEGO. I really enjoyed building models of airplanes and space ships when I was a kid.

And I enjoyed building models of my architecture designs in college out of balsa wood or foam core. I even built a table for my workspace as part of a project during my last year in school. I bought some construction lumber and was able to take advantage of the shop tools we had in the school of architecture. And I decided to focus on being a front-end developer because I realized that the part of the process that I enjoyed most was the actual building of the website. (I started out as a designer who designed and built my own projects.)

What interested me about looking at The Anarchists books is that I like well-crafted books. Lost Art Press was started by two woodworking enthusiasts who wondered “what happened to all the great woodworking books that used to be published.” They publish high-quality books, both in content and in materials, and split all the profits 50/50 with the authors. I enjoyed looking through a sample PDF of The Anarchist’s Tool Chest. I like that the author of the series wants to make woodworking more accessible, affordable, and ethical.

Seeing these books stirs that desire inside to take up woodworking. To be honest, I have never seriously considered trying to get into it because I have never had a space to do it and it seems like it takes a lot of investment to buy tools and equipment to do it. And with 3 active kids, I never really had the time to justify the investment. Not sure if that will change in the future, but for now, it continues to just be a longing that will go unfulfilled.

Realizing a concept

In October, I had the idea to create a 4×4 grid of screenshots from projects I have designed and/or built over the past 20 years. On Saturday, I finally executed the last step and installed it in my home office. You can read more about the project in a separate post.

Articles I read

Books I read

What I watched

  • The Book of Boba Fett (Disney+) – I watched 3 episodes this week to catch up.
  • Frasier (Peacock)
  • AFC Championship game – I was very disappointed that the Chiefs lost. They looked so good in the first half and then looked like a different team offensively in the second half. I had similar feelings as I had last year when they lost the Super Bowl to Tampa Bay.
  • Kim’s Convenience (Netflix)

What I listened to

What I played

  • MLB The Show 21 (Braves) – I played a couple of games at the end of the week.
  • Wordle

 

 

 

Comments are closed.