Weeknotes 26:28

Last week in the workshop

• I continued working on a template for the Study through the Bible component of The Wonder of the Word. I got as much done as I could and I am waiting now on our backend developer to finish his work on several other templates to start the front-end work on those templates
• I continued work on a new podcast landing page. We wanted to bring some content out from behind opening in modals for better SEO. I had been waiting on our other backend developer to pull in podcast feeds from our different language sites. The current solution uses JavaScript to pull in the data. I suggested moving to a Django solution since all of the content is already in the database.
• I heard some encouraging feedback during an All Channels meeting regarding the True Woman ’27 conference page design. It was very reaffirming to several design decisions that I made. Made my day.

Animating dialogs

I took advantage of a slower time to do some personal development. I had mentioned in my weeknote from two weeks ago that I had read Chris Coyier’s article, In-N-Out Animations: Dialogs. I think the best learning comes by doing–by getting your hands dirty and trying it out for yourself. Just build websites!

I decided to learn by applying what I learned from Chris’ article by revisiting some recent projects that used dialogs. I have wanted to animate dialogs but had some issues getting them to work like I envisioned. I had tried some solutions after reading an article by Adam Argyle. But I was still having some issues when they animated in and when they animated out.

Chris’ article was a big help because he explained that they must be declared in a certain order to work correctly. He does a great job of explaining it and gave a snippet at the end of the article. I used that snippet as the basis for my revised solutions on a couple of recent Revive Our Hearts projects.

Chris explained that it is a Three State system:

1. The “On The Way Out” Styles
2. The “Open” Styles
3. The “On The Way In” Styles – this one uses @starting-style

You need to use that order in your CSS (reverse order) for the animations to work properly.

I also used some styles from a Codepen (24 Modal Styles) that I saw last week. That pen uses divs instead of dialogs but I was able to adapt it to the Three State system to apply a modified slide roll left to right.

What I wrote

Flexbox Borders revisited (gap decorations) – I revisited one of my more popular articles about adding borders to a Flexbox layout. My original solution used pseudo elements for the borders. In the near future, we will be able to use gap decorations. I walked through modifying my original solution to use gap decorations with a Codepen example.

Jury Duty

On Friday, I headed down to our county’s circuit court for jury duty. The morning consisted of an orientation and selecting a jury pool. They called people’s names to fill up 8 groups of 12 that would be the jury pool for three upcoming trials. I was hoping my name would not be called. I made it to the sixth group. I returned to court today (Monday, July 13) for the first jury selection for a trial. There is fifty percent chance of being chosen for one of three trials (2 criminal and 1 civil).

---

Articles I read

• Works & Wonders: MacArthur, Alberta’s Rats, Celtic Worship (Tim Challies)
• How building an HTML-first site doubled our users overnight (Alistair Davidson)
• Getting Started with Anchor Positioning (Josh W. Comeau)
• God’s Children Really Will Live Happily Ever After (Randy Alcorn)
• Gaeilge sa Ghréig (Jeremy Keith)
• A deep dive into how I set up view transitions (Cyd Stumpel)
• Speak at UX London 2027 (Jeremy Keith)
• The Secret (Jeffrey Zeldman) – A business strategy.
• Responsive CSS Grid Layout with Animation (Temani Afif, CSS Tip)
• Family Feud: Mac-assed Mac App Edition (Jim Nielsen)
• From Text to Voice: How Truth for Life is Using Voice Cloning (Five Q) – I don’t like this idea of voice cloning, especially for a Christian ministry. I am just not comfortable with it.
• Studio Notes #92 (Dan Cederholm)
• Oh boy updates. (Joe Crawford)
• Our doubts… (Measure for Measure) (Joe Crawford)
• The World Cup’s Awful Instant Replay System Must Be Destroyed (Wall Street Journal) – Behind paywall)
• The Index: Issue #190 (Piccalilli)
• Tiny Talk with Dan Cederholm (Ty Finck)
• Phantom Obligation (Terry Godier)
• Tiny Talk with Elliot Jay Stocks (Ty Finck)
• Own Your Tools (Aphera)
• ‘Speed-friending’ is now a thing. Try church fellowship instead. No audition required. (Ed Stych)

What I watched

• The greatest animated landing page with GSAP (WebDev Challenge, YouTube) – The production of this is great. It felt like a show I would watch on TV or stream. I would not want to be part of a challenge like this. Way too much pressure. But I could also see that it could be fun and you build camaraderie with those you do it with. I did an architecture project like this in one day with my class in college and then we had a dinner party that night.
• Make a next-level site with GSAP (Kevin Powell, YouTube) – Kevin takes up the same GSAP challenge. I still have not finished this video. I have not used GSAP in several years but it was fun to follow along and realize how much I remember and how easy it is to animate with GSAP.
• Wonder Man (Disney+) – We are loving this short series from Marvel TV. So glad that brought back Trevor.
• World Cup – England vs. Mexico (FOX) – This was a classic. One of the most enjoyable games to watch in the World Cup. I was the only one in my household rooting for England.
• World Cup – United States vs. Belgium (FOX) – I was disappointed this was not a closer game. It was so deflating when Belgium scored immediately after the US tied it.
• World Cup – England vs. Norway (FOX) – I was rooting for Norway in this one. I am a big Eerling Haaland fan. I enjoyed playing with him in FIFA with Borussia Dortmund and Manchester City. Another really good game.
• World Cup – Argentina vs. Switzerland (FOX) – I was happy with Julian Alvarez. I played with him in FIFA with Manchester City. I know he had several goals in the last World Cup. He had a beautful strike from the left side to put Argentina in front during extra time.
• American Pickers (Samsung TV Plus)
• Father of the Bride, Part 2 (Samsung TV Plus)

Books I am reading

• The Discipline of Grace (Jerry Bridges) 
• Enshittification: Why Everything Suddenly Got Worse and What to Do About It (Cory Doctorow)
• Everything Is Never Enough: Ecclesiastes’ Surprising Path to Resilient Happiness (Bobby Jamieson)
• Enjoying Jesus (Tim Chester)

Walking

• Sunday – 1.54 miles in 30 minutes – I took a short walk before going out to eat with my family. It had rained earlier in the afternoon and felt great outside. I needed to get out and enjoyed spending some time in prayer while I walked.

What I played

• MLB The Show 23 (Orioles)  – I went 6-0 this week. I finished a 3-game sweep of the Yankees and swept the BlueJays in 4 games.
• FC 26 – EA Sports FC 26 was on sale for $13.99 so I bought it. I have not played FIFA/FC for quite awhile and had not played the game since it lost the FIFA branding. I played several exhibition games, started a The World’s Game (FC equivalent to World Cup) with the US and then last started another one with Norway. It has been fun to play soccer again. I look forward to playing a season with a club team in the future.