Weeknotes 25:19

Posted 3 days ago

Week of May 4–10

Focus styles

I spent most of the week working on adding :focus styles to the ministry website. It was tedious work having to go through every page and find edge cases that were missed by the styles I had already written. I also had to take time to refactor some of the work I did earlier in the week as I found better solutions or realized it was better to use another selector.

These styles help those who use a keyboard to navigate a site. I added dotted borders around links, activated the hover styles on the buttons along with a dotted border. I tried my best to make sure that someone never gets lost due to a focused item being hidden, like in a carousel item that it off screen. I did my best to get the low hanging fruit as a start leaving some of the more challenging things for the future. It’s better to have some solutions in place than to shoot for everything and have it take a long time to implement.

Sinclair Dinosaur

For years, I have wanted to stop and take a picture of the Sinclair dinosaur by the bridge at Lake Barkley Bridge. Several times, it has been overcast or raining so I didn’t stop. Other times I have felt a time crunch and decided not to stop. And other times I just didn’t feel like stopping. On my way back from Murray on Sunday, I finally stopped.

Inspired by Andy

Last week, I wrote how I had been inspired by Andy Clarke’s article on CSS Tricks, Revisiting Image Maps. This week I was inspired by his article on Smashing Magazine, Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS. Andy takes the reader behind the scenes of his recent work for Emmy-winning composer Mike Worth.

Andy shares his inspiration from Hanna-Barbera animation that he grew up watching on TV. Andy put his own spin on it using SVGs and CSS. I can’t wait to see the new site once it launches. The article was filled with several Codepens that show off some of Andy’s work, including one with an Easter egg. Press on the red button to see the ape react. I also like the “flicker” of the lamp. I also love the animation for the 404 page.

See the Pen Mike Worth’s review page animation by Smashing Magazine (@smashingmag) on CodePen.

Making video more appealing

A couple of weeks ago, I can across a site for a book, Make Meaningful Work. One of the page elements that caught my eye was a video. The video played on mute and then you could click on a button to have the video play in a modal. I have seen similar solutions with muted videos playing and then you could interact with the video by clicking a button.

I created a solution several years ago for case studies on the LGND site (scroll to bottom of the page). I used ScrollTrigger to play the video on mute once the user got to a certain point in the viewport and then the user could “play” the video (unmute) the video by clicking on the video container. We used a custom cursor on the site and the cursor would turn into a play icon when over the video container. You could also pause the video after having it play. I also set it up so that the video would stop playing if you scrolled away and unpause if it had been playing once the video element was back in the viewport.

I have been recently thinking about how to make embedded videos a bit more engaging on the page before a user clicks to watch it. I liked the solution on the Make Meaningful Work site because it gave a preview of the video and I think that is more engaging than just a post image.

This week, I built a prototype on Codepen to start playing around with the idea. My first thought was to continue to have the video play inline instead of a modal. When the “play this video” button is clicked, the video would rewind and play with audio. It is just a rough prototype right now. My thought is that I would use Intersection Observer to trigger when the video plays or pauses once you scroll to or away from the video. I am also thinking about adding a play and pause button once the video is interacted with.

DevKinsta

In March, I entered into a WordPress maintenance agreement with Echo Delta in Florida. As part of the hours they have me under retainer for the month, they want to be able to work on some small projects. This month they wanted to add a scrolling marquee to showcase project work. They already have some case studies on their site but they wanted an easier way to showcase work that they haven’t written a full-blown case study.

I was trying to set up a local environment to start doing the development work. I was able to make a backup of the site and tried to set it up in Local. Local has a way to add an existing site but dragging in a zip file that contains the wp-content folder and a copy of the SQL database. After downloading the backup, I gave it a go. But I got a message that there was an error in importing the database. The setup finished but warned me that the site might not function properly. And it didn’t. I thought it might be because several of the plugins were deactivated. I tried to activate the plugins and a few other things and the site still did not work. I decided to sleep on it and try again the next evening.

The next next, I tried to import the database using the AdminerEvo database tool. After the import, I opened the site and it appeared to work. That is until I realized that it was redirecting to the live site. I tried to update the WordPress options in the database and still no luck.

I am not sure why or what I was expecting to find but I decided to look at the tools page in the Kinsta dashboard. Down near the bottom of the page was a was a link to DevKinsta. “Develop and deploy WordPress sites from your local machine with our free application for Windows, Mac, and Ubuntu.” Just want I needed. A tool just like Local for developing sites locally. The great thing about this tool is that it can pull a copy of the site including the database and set up a local environment just like Local.

I was so relieved to find this tool because I was not sure what to try next. I needed to be able to setup the site locally if I was going to be able to work on the development project. Once I was able to download the app and get it connected, it was very easy to run a copy of the site locally and do my work.

I love these self-contained tools that sets up a development environment with a GUI. I remember the days of having to configure local Apache and PHP files to be able to build WordPress sites. And everytime that Mac had a major software update (once a year), I would have to go through all the trouble (and remember how–find the article that helped me before) to set up the environment again. That usually was a couple of hours and always hit a snag along the way. And then I always had to remember the terminal commands to start or restart the sites when I was ready to develop. It is so much simplier these days.

Articles I read

What I watched

John Piper on the Future of Desiring God (YouTube) – I am glad that Desiring God ministry has a plan in place and they are putting together a solid team to continue the ministry on into the future.

  • M*A*S*H (MeTV)
  • NCIS (Netflix)
  • The Clubhouse: A Year with the Red Sox (Netflix) – I finished this on Monday.
  • Andor: Season 2 (Disney+) – After watching episode 8, I thought we only had 1 left. I found out today they are dropping the final three next week. Yes! We rewatched several episodes this week that my son had not seen yet. He just moved home for the summer.
  • The Seat (Netflix) – As a fan of F1: Drive to Survive, I was interested to watch this show about Mercedes new teenage driver for 2025.

Books I am reading

I did not read much this week. Also been contemplating what I want to read next.

Walking

  • Monday – 3.17 miles in 59 minutes
  • Saturday – 4.24 miles in 1 hour 15 minutes

What I played

MLB The Show 20 (Twins) – I played 1 game on Friday and won 7-6 after tying the game in the 8th and went ahead in the top of the ninth.

Comment on this post