Weeknotes 26:24

Posted 4 hours ago

Week of June 7–13

I felt a bit more joy in my work and web development this week. I was handed a new design project to create a website for our True Woman ‘27 Conference, which we will be launching on July 1. It is a quick turnaround but I was excited for a design/build project to work on.

The process for this design and build is much like the process I used when I created another conference website for Mujer Verdadera ’26 in March. I was provided a style guide, some visual assets, and content document with the text and structure of the page. We were using the True Woman ‘25 site as a guide.

I got started by duplicating the templates we used for TW ‘25 and then modifying them for the new content and changing come of the classes and other HTML that I wanted to write a bit differently. I then started my stylesheet by creating custom properties for the brand colors and secondary colors defined in the style guide. One of the design directions for this project was to use a combination of squared and rounded corners which I started incorporating into button styles, the video, and other elements of the page.

I came up with a plan to use color and imagery to break up the different sections of the page and create a nice flow. About 80% of the page came together rather quickly. The other 20% included polish and then rethinking some of the details of the design until I was happy with it. One thing that included was making a decorative element much thinner and then adding color overlays to several of the photos on the page.

Adventures in masking and clipping

The main logo of the conference had a couple of different variations. One of the variations was a using a color of solid colors with the shapes of some of the lettering on a colorful background that looked like a painted canvas. I wanted to explore this variation for the hero because I thought it would be eye-catching and set a great tone for the rest of the page. I played around with a type of glass effect on background of the text that included the dates and location of the conference. It needed a background to create enough contrast to be read against the colorful paint background.

One of the other variations of the main logo had the logo shape filled with the painted background with an orange and red gradient on the rest of the background. I also realized that this was the main treatment that they wanted to use in the branding. After talking with our communication director, I decided that I needed to go more in that direction with the hero. But one idea I had is that I wanted it to be a bit more dynamic and not just have a static painted image. But I wanted the logo to be a cutout of the foreground image and then apply the painted background with a fixed position so that different parts of that background would appear as you scrolled the page.

I started investigating ways to punch out the shape using HTML and CSS. I started moving in the direction of masking.

As I started down this road, it was a challenge to find articles about what I wanted to do. Most of the examples of this type used text and not shapes. I had been thinking that SVGs would be involved.

I did finally find a tutorial that showed how to use a SVG as a mask for cutouts. But it was for smaller UI elements than what I was trying to solve for. As I tried to replicate the technique with my specific instance, I was finally able to punch out the shape that would allow a background to be revealed. But I was unable to figure out how to make the mask responsive. I spent a lot of time playing around with trial and error and ended more days than I would have liked feeling frustrated because I could not figure it out or get things to work as I thought they should work.

At one point, I was hoping that I could figure it out so that I could write up an article on how I did it since I had trouble finding articles to help me out. I wanted to be able to help someone else out in the future with what I learned. Unfortunately, I was unable to figure it out. I think was close on some things and was just missing a small bit of information that would have helped me solve my problem. As much as I wanted to figure it out, I had to set that aside so that I could give attention to solving other problems on the page.

A big part of the creative process is “wasting time” trying to pursue solutions that you may never work out. I am glad that I tried but felt frustrated that the solution proved allusive. But that is all part of the process. It has value in and of itself. And it keeps me hungry.

I hope to make some time to write an article about my process and get a little bit more specific about some of the details of my design and the thinking behind it. I hope to do that when I can share more specifically about the project after we have launched the site on July 1.

Articles I read

“If you want to be “good” at what you do, do the hard, little things that others gloss over. Do them consistently and well, with discipline and perseverance.

“If you do, then I’d say you’re ‘good’ at what you do because ‘good’ isn’t a number. It’s quality. A disposition. A way of being.”

Jim Nielsen, Being “Good” at Things

Caught my eye

The WebKit team has put out a field guide to Grid Lanes, masonry layouts in CSS. This is a great reference to get started or to refer back to as a reference guide. I have already played around with Grid Lanes in a personal project.

WebDevConf 2026 – The WebDevConf has another catchy site for this year’s event. The site uses a filter to make it look like an old TV screen. You can also turn off the effect with the “Easy to Read Mode” in the top right corner.

What I watched

Books I am reading

Walking

  • Wednesday – 2.06 miles in 40 minutes

What I played

  • MLB The Show 23 (Orioles) – I split the first two games of a series with the Twins.
  • NBA 2K25 (Nuggets) – I beat the Mavericks in the first two games of the Western Conference Finals

Comment on this post