Weeknotes 22:16

July 4, 2022

Week of June 26 - July 2

Project Work

  • I added functionality to forms for Kauffman Real World Learning.
  • I recreated blog posts from their current site and created some custom Gutenberg blocks to accommodate some of their content
  • My teammate, Josh, imported all the resources from AirTable. I spent a couple of hours cleaning it up (adding dates), downloaded documents, and uploaded those resources into the new WordPress installation
  • On Thursday, I turned my attention to a new project for Toyota Policy Drivers. We are creating a one-page site to help Toyota employees understand the Policy Drivers program and encourage them to sign-up to participate. It is nice to have small projects like this that can be built in a couple of days to break up longer-term projects.

SVG Clip-path

I have been using clip-path in my work since late 2019. But so far all the paths I have created on my own using the polygon. In those cases, I would plot out the points that I needed for the clip-path and use math to come up with percentage values so that the clip-paths would be responsive.

Last week, I needed to create a clip-path that combined curves of a circular element along with some straight lines. I did not know how to write that in the same way that I have done simpler clip-paths that just used straight lines. And then I remembered that you can use SVGs to define your clip-path.

I was using clip-path for image transforms. The design of the Kauffman site uses geometric shapes like circles and hexagons. The designer had applied these shapes to hero images on secondary pages. Because we are using WordPress, I did not want the image transforms to be applied to transparent PNG images. For one, it makes it difficult to impossible for the client to create any new images for the future. And second, using a rectangular JPG with clip-path applied with CSS will yield a much smaller image.

I also wanted to give the option to choose between using the hexagon shape or circular shape in the custom Gutenberg block. Applying the image transform with clip-path gave me the flexibility to offer that option.

I ended up creating my clip-path shape in Figma by first drawing a circle. I then added a couple of rectangles and combined those shapes with the circle by subtracting from the circle to come up with the shape I needed.

Clip-path image that I created in Figma.

After creating the image of the clip-path, I added it as an inline SVG in my template and it worked as expected. Well almost. It was not responsive. At first, I thought I may need to add an preserveAspectRatio attribute on the SVG to make it flexible. But that did not help. I tried Googling some other things and came across a clip-path converter tool that converts an SVG path from absolute to relative values. You also need to add clipPathUnits="objectBoundingBox" so that the coordinate system is the same as the containing element. Once I did that, my clip-path was responsive and worked how I had envisioned.

The clip-path applied to the Real Life Learning project.

To be honest, I am not quite sure how I figured out this solution. I had glanced at a couple of articles that had come up in my Google searches and I had a hunch that that path needed to be flexible. I think it was more of a let’s try this when I came across the converter tool. I believe sometime in the past that I had read something about the need to convert paths and it stuck in my brain for the time that I needed it. That is the advantage of exposing yourself to articles or tools that you may not use right away but that exposure can come back like a boomerang when you need it. Or maybe it was just dumb luck.

The solution made sense because I had been doing the same thing with the simpler paths I had created for myself in the past because I always used percentages. I think I had figured that out sometime in the past or just from experiences and knew that it was better to use relative units versus absolute units when building responsive interfaces.

Articles I read

Books I read

What I watched

  • Obi-Wan Kenobi (Disney+) – I rewatched the series this week and enjoyed it just as much or more than my first viewing.
  • Ms. Marvel (Disney+)
  • Everybody Loves Raymond (Peacock) – This show got better as it went on. Just started the final season so we are going to have to find something new to watch when we are finished.

What I played

  • Wordle – I had a pretty good week with Wordle. I guessed the word in three tries on two different days.
  • MLB The Show 21 (Braves) – I won all six of the games I played this week extending my winning streak to 8. I went 9-1 on the road trip and come home to play the Phillies and Mets to end the season. At the end of the week, I was 2 games ahead of the Phillies and hoping to clinch the division in my series against them.

Comments are closed.