Weeknotes 26:25

Posted 5 hours ago

Week of June 14–20

Last week, I shared my frustration with not getting a solution to work out for the new project I was working on–a design/build for the True Woman ‘27 Conference that Revive Our Hearts will put on at the end of September 2027. Over the weekend, I had a new idea on how to tackle the problem and was successful in pulling it off.

The evolution of a solution

As I mentioned last week, one of the logo variations had a “punched out” shape element. I wanted to punch out that shape from a div within the hero so that it would reveal a fixed positioned paint background that was applied to the header element.

<header class="tw-hero">
  <div class="layer-with-punch-out">...<div>
</header>

I thought there would be a way to do this by applying a SVG mask to .layer-with-punch-out that would allow the background image to .tw-hero to show through so that you would see different parts of that paint background as the page scrolled. As I mentioned last week, I tried a masking technique but I ran into two problems. First, the mask was not responsive. I am sure there is a way to make it responsive but I could not figure it out. Second, I had to be able to apply a linear-background as a background-image of .layer-with-punch-out. I had trouble getting that to work out as well.

Original concept. .layer-with-punch-out on top and .hero with fixed background-position on the bottom

But over the weekend, I realized that I could approach the problem in a different way. I could do something similar to what I had thought about but limit it to an “image” layer.

New idea with a the logo shape as a separate element (.tw-shape-logo in code below) with a fixed positioned background and the .hero layer on the bottom.

In my case, the image layer with the h1:

<header class="tw-hero">
  <h1 class="logo">
    <span class="sr-only">True Woman Conference &rsquo;27</span>
    <svg class="svg">
      <clipPath id="logo-clip-path" clipPathUnits="objectBoundingBox"><path d="M1,0 l0,1 h-0.601 l0,-0.001,-0.025,0.001 c-0.007,0,-0.014,-0.021,-0.016,-0.055 l-0.019,-0.242,-0.018,0.24 c-0.003,0.034,-0.009,0.057,-0.016,0.057 h-0.043 l-0.061,-0.667 c-0.004,-0.038,-0.011,-0.062,-0.02,-0.062 c-0.006,0,-0.011,0.012,-0.015,0.031 c-0.004,0.019,-0.006,0.046,-0.006,0.076 v0.622 h-0.069 c-0.015,0,-0.027,-0.061,-0.027,-0.136 V0.33 H0.02 c-0.011,0,-0.02,-0.044,-0.02,-0.097 V0 h0.24 c0.013,0,0.025,0.042,0.029,0.104 l0.019,0.225,0.019,-0.287 c0.002,-0.026,0.007,-0.043,0.012,-0.043 h0.037 c0.005,0,0.01,0.017,0.012,0.043 l0.019,0.287,0.015,-0.225 C0.407,0.042,0.418,0,0.431,0 h0.048 l0.01,0 h0.511"></path>
      </clipPath>
    </svg>
    <div class="tw-logo-shape"></div>
    <img src="white-mark.webp' %}" width="1600" alt="310" class="mark" alt="True Woman '27 Conference" />
    <img src="tw27-mark-white-and-yellow.png' %}" width="784" alt="119" class="mark-mobile" alt="True Woman '27 Conference" />
  </h1>
</header>

Using this solution, I could apply the linear-background to .tw-hero. And then I could use a clip-path on .tw-logo-shape and then have a fixed background image on .tw-logo-shape that you would allow you to see the paint background within the logo shape defined by the clip-path. I was much more familiar with clip-paths and how to make them responsive by defining them with an SVG image.

.tw-logo-shape {
  aspect-ratio: 760/149;
  background-image: url(tw27-hero-background.webp);
  background-attachment: fixed;
  background-position: top left;
  background-size: cover;
  clip-path: url(#logo-clip-path); // The clip-path is defined in SVG in HTML code
  display: block;
  height: auto;
  width: 100%;
}

This solution did not involve “punching out” part of a div in order to reveal the background below. Instead, I used clip-path to define what part of the div you saw and applied the fixed position background image to that div.

The solution evolved as I reconsidered the approach and found a much better way of solving the problem by isolating the clipping/masking to one element.

Demonstration of final solution

Postscript

After reading Temani Afif’s article on CSS Tip, I used his converter tool to make the shape() function to use inside the clip-path CSS code that would eliminate the need for the SVG in the HTML code. Shape() has full-support in all the major browsers.

See the Pen Clip-path with shape by Jeff Bridgforth (@webcraftsman) on CodePen.

Other highlights

  • I handed off the True Woman Conference ‘27 one-page site for QA and content review late in the week. I already worked through a first round of issues and expect more feedback as move toward the July 1 launch date.
  • I wrote an article about observations I have made about embedded YouTube videos work and recent UI changes that affect display of playlists and using an embedded video as a hero background.
  • I completed The Layout Maestro course by Ahmad Shadeed on Friday. I had worked through most of the course in April. I just had a few layouts to walk through. A bulk of the course is Ahmad walking you through how he built different layouts using the different techniques he explains in the first part of the course. His goal is change how you think about layouts–to create a mindset that equips you to solve the problems you encounter as a front-end developer. I would enthusiastically say that Ahmad accomplished that goal through the course.
  • I have been going out with my youngest almost every day as she practices her driving. It took me a bit to build my nerve and feel confident riding with a new driver and be able to patiently help her by pointing out things to work on and encourage her in the things she is doing well. We are working toward her taking her road test in late July.
  • I integrated Standard.site into this site a couple of weeks ago using the ATmosphere WordPress plugin. It took me a few tries posting to Bluesky to be happy with how my posts look there. I have started creating short excerpts in WordPress for the Bluesky posts.

What I wrote

YouTube updated UI and rethinking using embeds for various video solutions – I had noticed changes in the UI of the YouTube embedded player recently that led to having to rethink using embedded players in several different front-end solutions, including video backgrounds.

Articles I read

In this scene the apprentice decides to use magic to assist in the drudgery of cleaning. He enchants a broom which then proceeds to start cleaning things up. Things appear to be going swimmingly for a while, until the broom starts cleaning more and more vigorously, reaching a point where things start going swimmingly literally.

The chaos is resolved when the Sorcerer reappears and asserts control over the situation, glaring at the apprentice for his foolishness.

This seems like an apt metaphor for the AI era: you want to be a sorcerer and not an apprentice.

And a sorcerer has to understand the code.

–Code is Cheap(er). Carson Gross

Caught my eye

Storied Colors – The stories of different colors. The site has great typography. I look forward to reading these stories. Each day has a new color.

What I watched

WWDC26: Learn CSS Grid Lanes (YouTube) – This is a great introduction to Grid Lanes. I love how Grid Lanes works well with what we already know about CSS Grid. You should also take a look at The Field Guide to Grid Lanes that I mentioned last week.

  • Creed (Netflix) – I loved the tie-in to Rocky’s story. This was really well done and not nostalgic for nostalgia sake.
  • Creed II (Netflix) – I started this on Thursday and have not finished it yet.
  • The West Wing (Netflix)
  • American Pickers (Samsung TV Plus)
  • Remarkably Bright Creatures (Netflix) – I loved this one. Great story.
  • World Cup – I watched parts of several different World Cup throughout the week.

Books I am reading

  • The Basketball 100 (David Aldridge & John Hollinger) – I picked this one back up after watching several NBA playoff games.
  • Stop Loving the World (William Greenhill) – I finished this one this week.

Walking

I did not get out walking this week.

What I played

MLB The Show 23 (Orioles) – I went 2-2 this week. I lost the final game of a series to the Twins after winning the first two the previous week. I won the first two games of a series with the Marlins before dropping the third one.

Comment on this post