Weeknotes 20:06

April 26, 2020

Week of April 19 - 25

  • I reengaged with a project that I had started back in October. We had paused work on the project as the client had other priorities to attend to. But now we are moving forward and looking to launch a redesign of their site in mid-May. I spent the first part of the week working on issues that I uncovered with browser testing. I also needed to convert the static page templates to pull from the database with Advanced Custom Fields. I am excited about this project coming together. I used clip-path in several places had a lot of fun using CSS Grid Layout with more complex layouts.
  • It was another low-energy week for me. Between allergies and the malaise of the current circumstances, it was a fight each day to get things done. But just as last week, I was still able to be productive despite how I felt.
  • I put out a personal project that I started working on in February. The project was a tribute to Patrick (Magic) Mahomes. Inspired by Dan Davies Print to CSS, I created my own grid experiment based on one of Dan’s inspirations. I am still playing around with the layout a bit and made one change to it later in the week.
  • I really wanted to read more this week but had trouble concentrating when I had the opportunity to sit down and get into a book. I did start a new book on Thursday night, The Madness of Crowds.

WordPress and Responsive Images

I really wish I had a simple solution to do resolution switching images in WordPress. On most projects, I only need to serve different density images. What I would like is a way to upload the higher density image and then have WordPress generate the lower resolution image for me. Probably what I need is an Advanced Custom Field that would generate the image and then give me access to it through the image array so that I can use it in my template.

There may be a solution out there somewhere but I have yet to come across it. My teammate, Ryan, has some thoughts on how to do it but has not had the time to play with it. There was a functionality that was added to WordPress not too long ago that he thought would make it possible to do the image transformation. I wish it was as simple as creating an add_image_size to the functions but you cannot use percentages with that, only pixel values.

One of my pet peeves about WordPress images is that you have to define all of these custom sizes. When you upload an image, all those sizes are applied to every uploaded image. I really like how Craft CMS image transforms work. You can define the transforms you want to make to an image and it only applies to that specific image field.

TIL (Today I Learned)

On Wednesday, I learned something very important about WordPress themes, specifically in naming the folder of your custom theme. I had a client who updated WordPress and updated the theme, which broke the site. I never knew that there was a theme repository on WordPress.org like the plugins. If you use a theme slug (the name of your theme folder) that is the same as a theme uploaded to the WordPress site, WordPress will prompt you to update your theme if that other theme has been updated. I had noticed before that the custom theme that I use for this site has had updates, which I always found odd since it was a custom theme that I built.

So how do you prevent it? One approach would be to use a prefix on your theme folder. I fixed the problem for my client’s site that way. I prefixed it with our company name. You can also make your version number ridiculously high on the style.css file in your theme folder. That way, WordPress will not suggest the updates to the theme uploaded to WordPress.org.

Reading (Online)

  • How We Work – The fournova team (makers of Git Tower) share some insights into their remote culture, some of the challenges, and the benefits of having a fully remote team. One of the things they identified is the need for trust – trusting their employees to take responsibility for their work. I highly value teams that treat me like an adult and don’t try to micromanage me. And that put their trust in me to be a responsible adult that follows through on my commitments.
  • Flexible layouts without media queries – I believe this article gives me a solution for setting a max limit on the size of a grid cell. A use case for this is when you have images. I want to be able to put a constraint on the grid cell that it is not larger than the image size (otherwise the image will blur). All the solutions for flexible CSS Grid layouts without media queries use minmax but in those solutions, you can only set the minimum width of a grid cell, not a maximum. I need to go back and play with this to see if it does what I think it does.

Comments are closed.