Weeknotes 25:20

May 18, 2025

Week of May 11–17

Last week, I mentioned that I had been inspired by Andy Clarke’s, Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS. Part 2 was released this week and I enjoyed that article just as much. The second article focused on how masking can add an extra dimensions to animations. Andy discussed different techniques such as:

• clip-path
• CSS mask
• Mask image
• Layering multiple masks
• Animating masks

This week’s article brought to mind a project I built three years ago. I used a clip-path to allow me to animate an image inside a circle elements and allow part of the image to be outside of the circle. I created a vector image to serve as the clip-path. You can read more about how I built the animation.

View a sample of the animation

I recreated this animation at the end of the week and worked on recreating another one that Andy’s first article made me think about, an interactive SVG map I built for Connect 2 Canada. I am planning to put together a page on my site where I can showcase different animations that I have built over the last 15 years.

Wins this week

• Finished first iteration of a marquee animation to showcase an agency’s client work
• Finished my first iteration of a video solution that plays a preview of the video inline and then opens the video to watch in a dialog (mentioned in last week’s weeknote)
• My work on adding focus indicators to our ministry website was pushed to production on Friday
• Explored flex-wrap: balance
• Recreated hero animation from Toyota Policy Driver’s project
• Recreated state trade partnership map and modal that I had built for Connect 2 Canada
• Built registration forms for French and German sites for Revive Our Hearts True Woman ’25 Conference using Gravity Forms and Smart Phone Field plugin
• Wrote an article for Global Accessibility Awareness Day (GAAD) where I reflected on my accessibility journey, shared recent work improving keyboard navigation and shared helpful resources that have shaped my perspective.

Articles I read

• Elizabeth Goodspeed on why graphic designers can’t stop joking about hating their jobs (It’s Nice That)
• What Does Trouble Do? (Tim Challies)
• God Must Sometimes Overrule Us (Tim Challies)
• The Junior Developer Crisis: Why Entry-Level Coders Are Struggling and What’s at Stake (Nick Walsh, Envy Labs)
• How to make a Link Aggregator in Obsidian (Dave Rupert)
• Figma Sites and CSS Head Scratchers (Kevin Powell newsletter)
• Don’t Say No For Someone: Let Them Say No Themselves (Stephen McAlpine)
• The Dependables (Jonathan Snook)
• How to tell if your site is gzipped (Chris Ferdinandi)
• What Does It Really Mean For A Site To Be Keyboard Navigable (Eleanor Hecks, Smashing Magazine)
• Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension (Andy Clarke)
• Awareness (Jeremy Keith)
• The clever move of Leo XIV. Five factors of attraction (Vatican Files)
• A Theology of Place (T. M. Suffield)
• Studio Notes #32 (Dan Cederholm) – I watched a video that Dan referenced about the making of Gruff (see video below)
• Is there a Correct Answer? Flipping Layouts When Google Translate Swaps between a Left-to-Right Language and a Right-to-Left Language (Chris Coyier, Frontend Masters)

What I watched

Introducing ? flex-wrap: balance ? Would you use this? ?? Not a real feature yet, just something one of our engineers has been working on. (You can try it out in the latest Chrome Canary with the experimental web platform features flag though!)

[image or embed]

— Una Kravets (@una.im) May 16, 2025 at 1:07 PM

I played around with flex-wrap: balance on Chrome Canary after watching this video on Bluesky. I was working with my teammate early this week on layout similar to the one in Una’s video. I didn’t even have to remove the width declarations on the flex items (which sets up the faux grid).

The Making of Gruff (YouTube) via SimpleBits

Gruff (YouTube)

Adam Savage Gets Turned Into an Animated Puppet! (YouTube) – Adam hosts Julian Curi, the creator of Gruff on his Tested program. I watched part of this and need to make time to finish it.

• M*A*S*H (MeTV)
• NCIS (Netflix)
• Andor: Season 2 (Disney+)
• Nuggets-Thunder, Game 4 (ABC) – I watched a little bit of the game on Sunday. I had to go pickup dinner so I missed most of the 4th quarter.

Books I am reading

• Sunday Matters (Paul David Tripp) – I read one devotional a week.
• Everyday Gospel (Paul David Tripp) – Reading through the Bible this year with this devotional.
• Stickman Theology (Terry Ewing)
• Universal Principles of UX Design (Irene Pereyra)
• The Basketball 100 (David Aldridge & John Hollinger)
• You can trust God to write your story (Nancy DeMoss Wolgemuth and Robert Wolgemuth) – This is my second time through this book. I wanted to read it as I have been thinking about how God has written my story recently. And because it was written by the founder of the ministry that I now work for and it has been insightful in understanding the audience for the work that I do.

Walking

• Thursday – 1.81 miles in 32 minutes
• Saturday – 4.39 miles in 1 hour 20 minutes

What I played

• MLB The Show 20 (Twins)
• NBA 2K25 (Nuggets)