Weeknotes 24:04

January 29, 2024

Week of January 21–27

Practice

We learned things best when we build something and get to play around. It is why Chris Coyier used to say all the time on Shop Talk Show, “just build websites.” I have a subscription to the Creative Coding Club. Carl has encouraged us to build things and not just watch the videos. What we do is a craft and a craft is learned best by practicing it.

I decided to take that advice and build out some different animation components that I have been inspired by. One of those components is a horizontal scrolling element that scrolls horizontally as you are scrolling down the page. I have seen it used on several of the sites I have been inspired by recently.

Carl had a lesson on Creative Coding Club so I watched his lesson and then tried it for myself. It is a very basic “model” and I hope to play around with some more variations of it in the future.

See the Pen Horizontal Scroll Prototype by Jeff Bridgforth (@webcraftsman) on CodePen.

The second component I built was inspired by the Runway Financial site. I liked how elements scaled in and out as they entered or left the viewport. This one took me a bit longer to perfect. One thing I learned is that I needed the transform-origin to be at ‘top center’ to work correctly. I tried having it transform from the center of the box and it would not work properly scrolling down the page because the box would not transform until after it was in the viewport. My colleagues gave me some suggestions on how to clean it up.

See the Pen Scaling animations by Jeff Bridgforth (@webcraftsman) on CodePen.

Polish

I did not do a lot of work on the Toyota Policy Drivers Game Hub this week. But the time I did spend I used to polish the interface. My teammate had changed one interaction and it made me realize that I needed some transitions on other elements to make it look just right. I got in there late on Friday and fixed it so that it made me happy.

It took all of fifteen minutes to do but it made such a big difference. I love being able to address small details like that. The client and most people would not even know what I did. But it makes it the premium product we strive to deliver at LGND.

I plan to make a video and explain some of the last bits of polish I added to the site once it launches in a couple of weeks.

Inspiration

I took time on Tuesday to peruse sites from Codrops’ Inspirational Websites Roundup for December. Here are some of my favorites.

Digitalists

This site had both of the animation components that I built on Codepen, the horizontal scroll and the scaling of elements as they enter and leave the viewport.

The Little Grey Film

I loved the typography. I like the lines that are animated across the screen for each section as you scroll down the page. And I like the shapes. The site gave me delight when I was on it.

Studio D

I particularly like the section of the site with full-width images with smaller fixed images that would change when a new section came into view.

ART + TECH Report

I liked the subtle animations in the report section. I also like the text that was blurred when it first entered the viewport that “unblurs” as the whole paragraph is in the viewport.

Site updates

I added a little bit more to the design of the site last week. I added a repeating background image that gives some texture to the design. It was part of my original idea but I decided to hold off implementing that piece until after I launched the site. It did not take me as long to address as I thought. I think it adds a little bit more elegance to the site. I played around with another pattern but it was too busy.

The background image I am using came from Hero Patterns. The pattern I am using is called “Interlocking Circles.”

What I wrote

• The origin of my online handle
• Caught my eye: everything changes
• Blogging and me – I answered the interview questions that Manuel asks people in his People and Blogs series.

Articles I read

• Why Grady Sizemore took a $15-an-hour internship to launch a coaching career (The Athletic) – I enjoy these personal articles on The Athletic.
• The oldest library in America (and building websites) (Chris Ferdinandi)
• A Call for Consensus on HTML Semantics (Stephanie Eckels) – I need to write up my idea about Semantics. I had the idea a couple of weeks ago and this is the second post I have seen since I had the idea.
• Very Ordinary Men – I came across this one on Mastodon. An interesting reflection on biographies written about those still living today and how they portray those individuals.
• Where have all the websites gone? (Chris Coyier) – Chris’ response to a recent post and his thoughts on RSS.
• My grandpa was a Nazi – This was a very interesting read. Also made me wonder what is going on in Germany that I didn’t know about. I remember being in Budapest 17 years ago and seeing a lot of the fascist, anarchist, and other views that were present before the world wars and communism. Unfortunately, they are still there and becoming more visible.
• 11 years (Rachel Andrew) – Rachel reflects on the 11th anniversary of an injury gained from an ill-advised run. An interesting reflection. The lesson is “avoid running when it is icy.”
• Immeasurable Impact (Jim Nielsen) – You don’t always know the impact you are making. My advice is to let people know if something they have written or talked about on a stage or a podcast made a difference in your life. Most people never get that feedback.
• The Changelog has never gone viral – The article Jim was responding to in his post.
• Inspirational Websites Roundup #54 (Codrops) – There were several sites that I found very inspiring.
• 12 Modern CSS One-Line Upgrades (Stephanie Eckels) – A great article with plenty of examples of ways you can trim your codebase with modern CSS.
• Tell Your Children and Grandchildren About Yahweh, That One Day They May Remind You (Randy Alcorn) – You never think about how your investment may come back and benefit you.
• The Soundtrack of Heaven (Tim Challies) – I rarely text links to articles but this one was so good that I text my small group Bible study. And several of them responded that it was a great encouragement.
• Continuous partial ick (Jeremy Keith) – Jeremy’s thoughts on the raw output of large language models.
• Nested Dark Mode via CSS Proximity
• Wrapping Up 2023 (Michelle Barker) – I had wanted to do a wrap post but had not gotten around to it. I have seen several other late entries so more motivated to write my own.
• A Modern way to create hexagon shapes (CSS Tip)
• Container Queries and Units – I love container queries and units the more I use them.
• One big, one little (Dave Rupert) – Thoughts on how to use spare time to work on personal projects.
• One World, One Web, One Love (Aaron Gustafson) – Aaron’s tribute to Molly on her birthday. He shares a post of hers from The Pastry Box from 2012.
• What Can a Website Do? (Dave Rupert) – Dave shares some thoughts about how web people could invest in projects that improve accessibility.
• Concept: a new Mastodon UX for asking questions – An interesting idea for asking questions and broadcasting to followers once the question has been answered.
• Online Handles: A Round-Up (Jim Nielsen) – A follow-up to last week’s post, Jim shares some stories he has heard from others about their online handles. I wrote about my online handle last week.
• A unified theory of f—- (Mandy Brown) – I am not a big fan of using the word f— being used so often but it is an interesting theory about work and what you invest in.

Books I am reading

• Holier Than Thou
• The Loveliest Place: The Beauty and Glory of the Church
• The Practice

What I watched

When the director happens to be an expert in colour theory (YouTube) – A video describing the use of color theory in La La Land that helped to tell the story.

• Chiefs-Bills AFC Divisional Round Game (CBS) – The Chiefs and Bills always put on a show, especially in the playoffs. Their game two years ago was one of the most exciting football games I have ever watched. Just as expected, this was a back-and-forth battle. But surprisingly it was a defensive battle in the second half after a lot of scoring in the first half. I texted my dad that I hoped the kicker shanked the field goal attempt that would have tied the game. I knew it was going to be a challenge. I was glad the Chiefs survived despite the many mistakes that could have cost them the game.
• Project Runway Season 13 (Prime)
• Project Runway Season 14 (Prime) – We finished season 13 on Thursday and started 14 on Friday. We are watching through a season a week at our current pace.
• Bluey (Disney+)
• Percy Jackson and the Olympians (Disney+)
• JAG (Pluto)
• I’ll Have What Phil’s Having (Los Angeles)
• I’ll Have What Phil’s Having (Hong Kong)
• I’ll Have What Phil’s Having (Tokyo)
• All Creatures Great & Small Season 4, Episode 1 (PBS on Prime)
• A Chef’s Life (PBS app)
• A Very Laufey Day Live From LA (YouTube)