Weeknotes 22:10

April 3, 2022

Week of March 27 - April 2

On Monday, we launched the third and final report for Achieving Cross-Border Government Innovation site for the OECD Observatory of Public Sector Innovation and the Mohammed Bin Rashid Centre for Government Innovation.

Development for this report was mostly choosing some images and then entering that content into WordPress through the Advanced Custom Fields I set up when I first built and launched the site back in October. I did have to make one change to the template. The foreword for the last report was much longer and the client wanted to add functionality to only show the full content when a user clicked a link to see the full content of the foreword.

Finishing touches

I worked on putting the finishing touches on a project that we sent to the client last week. The client came back with some edits and wanted to swap out some images. I also reworked some functionality to align with the original vision and intent of the designer. The project is a one-page report that will live on an internal CMS. We will deliver the HTML, CSS, images, and Javascript files for their internal team to implement in the next couple of weeks.

Playground

After finishing up that project, I find myself with another lull in between projects. I read several articles that I had saved in Pocket and watched Stephanie Eckels’ session on Modern CSS Upgrades to Improve Accessibility from the axe-con Digital Accessibility conference that I had missed a couple of weeks ago.

I did a deep dive with the new dialog element that brings native modal functionality. I read a couple of articles and watched a video from Kevin Powell. I also decided to play around with the code from Kevin’s video and added some functionality that does not come out of the box with the new dialog element—adding a no-scroll class to the body element when the modal is open and allowing the user to close the modal by clicking outside of the dialog element. You can see my solution on Codepen.

Here are the articles I read on dialog:

Later in the week, I decided to play around with GreenSock ScrollTrigger to build a scroll animation. I really like the scroll animation that Cassie Evans did on the 2021 UX London site. The animation has a curvy SVG shape that is drawn as the user scrolls down the page. I have seen similar types of things in other sites and have wanted to play around with it but just never taken the time to do it.

I decided the easiest place to start would be to use the SVG from the UX London site and try to recreate a similar layout in Codepen (I ended creating a different grid layout). From there, I added some fade-in animations to the content pieces (boxes and images). Later I decided to add a clip-path animation to reveal the section heading. I was able to incorporate some things I had learned from watching Carl Schooff’s videos on Creative Coding Club by adding the GSDevTools to determine the timing of my fade-in animations.

I always learn so much more when I get dirty by building something. I have wanted to become more confident in building scroll animations for some time but I have only been watching videos on Creative Coding Club. But I really have needed to take the next step and build something myself so that I could apply what I learned from the videos and build those skills to use in the future.

I mentioned how Carl encouraged this type of experimenting in a post at the end of last year. I think one of the reasons I was slow to try scroll animations is that I didn’t know what to build. I found a very easy path by trying to recreate the animation from the UX London site and then add my own twist on it. I think I am going to consider doing more of these types of deconstruction in the future so I have an easy starting point to experiment and learn on my own.

My scroll animation on Codepen

Rock Chalk Jayhawk

I really enjoyed watching KU beat Villanova on Saturday to advance to the national championship game on Monday. This will be the sixth time that I have watched them play for a national championship. The first time was in 1988 during my freshman year on campus. I attended most of their home games at Allen Field House that year. I really enjoyed watching the game with other students at an outdoor block party and then celebrating together on campus.

KU played in two other Final Fours while I was a student, losing to Duke in the championship game in 1991 and losing to North Carolina in the semi-final in 1993 (my final year at KU). As an alum, I have watched them lose the national championship game more than they have won. But what an exciting finish to their national championship in 2008. They trailed most of the game but hit a three-pointer at the buzzer to tie the game which they eventually won in overtime. That was the last time they won the national championship. I am hoping they can add another one on Monday night. Rock Chalk.

Followup on sale of CSS Tricks

Last week, I shared some of my reservations over the news that Digital Ocean had purchased CSS Tricks from Chris Coyier. This week on the Shop Talk Show podcast, Chris talked about the sale. It gave more background information than the post he had written on CSS Tricks.

One of the reasons why Chris chose to sell the site to Digital Ocean is that he felt like they would be a good steward of the site moving forward. From what I learned, this is not the first time Digital Ocean has acquired a site like this. So they do have some experience. I think I feel a bit better about the future of CSS Tricks after hearing from Chris. But again, only time with tell.

Articles I read

Videos I watched

Books I read

  • Deeper
  • Rich Wounds
  • All of the Marvels – I just started this one on Saturday. I checked it out from the library. The author read through all of Marvel’s comics and takes a look at the overarching narrative. I read the introductory/background material over the weekend and look forward to jumping into the journey through the Marvel narrative this week.
  • Made for Friendship – I just started this one this week.

What I watched

  • March Madness – I watched several different games of the NCAA tournament including 3 of the KU games so far.
  • Everybody Loves Raymond (Peacock)
  • Frasier (Peacock)
  • Formula One: Drive to Survive (Season 3 on Netflix)
  • Return of the King (Digital Copy) – I had started watching the movie at the end of the year. The Lord of the Rings is one of my favorite stories and I really enjoyed watching the final chapter at the end of the week. Especially as I am thinking about the topic of friendship.

What I played

  • Wordle – I played my first game in which I was unable to guess the word in 6 tries. For most of the week, it took me 4 to 5 guesses.

Comments are closed.