Weeknotes 19:17

November 3, 2019

Week of October 27 - November 2

For the first time in three weeks, I worked a full five day week. Two weeks ago, I got Columbus Day off. Last week, I took off Friday to visit my daughter at Trevecca Nazarene University in Nashville.

I spent Monday addressing some QA issues with a project (CAE) that is close to launching. I also did my own QA and tested the site in various browsers. I ran into several issues with IE11. One of those issues was to implement a polyfill for object-fit. I had to search around to find a solution that I used before. The solution uses Modernizr to test for object-fit compatibility. If the browser does not support object-fit, it grabs the URL of the image and applies as a background image on the parent element.

I put that project on hold as we are waiting for client feedback and turned my attention back to another project (NYSAR) that I had not touched in a month. It has a longer timeline than most projects that I work on. I still needed to create some template pages for this site.

As I got back into working on the site, I decided to revisit my solution for a secondary nav that lives in a sidebar for on the desktop view. I did not like the solution I had come up with for mobile and tablet. I considered a couple of different options like a select dropdown type of thing. In the end, I decided to go with links that were inline. I would rather not hide these content links.

On Friday, I had to rework a solution for that sidebar nav. I was trying to have WordPress generate those links through using there built-in programming. The problem I encountered was coming up with a solution that would work with displaying the section, children, and grandchildren page links on both levels of the pages (children and grandchildren). I came up with one solution that used a conditional to determine what level that link was on and use appropriate logic to display the links.

Pain Point with WordPress images

This week I revisited one of my pain points in developing with WordPress. The issue is with how WordPress generates image sizes when images are uploaded. Because I want images to look good in higher density screens, I frequently use the resolution switching use case of responsive images to provide a higher resolution image and lower resolution image.

The problem is that one of those images (low res) needs to be generated by WordPress. The WordPress solution is to define different image sizes that WordPress will use to resize uploaded images. The problem is that it applies every custom image size to every image uploaded so multiple images are generated, most of which are not needed. It takes up storage space on your server which can become a problem as more images are uploaded.

I really like how Craft CMS handles this. You can define image transforms per image field that you add to your content types. This way there are no wasted images created. A friend of mine mentioned that Drupal does something similar.

I started thinking about this pain point this week as I was working on one of these sites. What I really needed was a way to upload the higher resolution image and then have WordPress generate a lower resolution image that is 50% of that higher res image. I did some research to see if someone else has solved this problem.

I did try out a plugin called WP Retina 2x. What I did not like is that I still had to define custom image sizes which did not solve the problem of multiple images being produced. What I would really like is a solution that can simply resize any image by 50% without having to define any custom image sizes that will be applied to every image.

I did find this article that might help me to come up with my own solution. I would like to expand this section into a stand-alone article and hopefully a solution that others can benefit from.

Kauffman Case Study

On Thursday, my team at LGND published a case study of one of our recent projects with Toyota. As I was looking at this case study, I noticed that we had silently published another case study recently on a project that I was involved in earlier this year for the Kauffman Foundation.

I really enjoyed being part of the project because I grew up in Kansas City. I was familiar with the Kauffman family because they owned the Kansas City Royals. I spent many a day at the ballpark that now bears the Kauffman name. It was great to work on a project from my hometown. The site has a lot of familiar imagery of KC landmarks.

It was the first project using ScrollMagic and GreenSock. I am planning to write my own case study about the project soon. You can see my work at https://realworldlearning.kauffman.org. I am really proud of this project and how I was able to realize the design vision of my LGND teammates.

Use Case for Gutenberg Blocks

On Friday, a developer I follow, Phil Kurth tweeted about using Advanced Custom Fields and Gutenberg blocks to build a client site.

As I looked at the site and the source code, it looked as if he was creating section blocks in Gutenberg. I tweeted him and he confirmed that for me. I have struggled to see a use for Gutenberg blocks in the projects that I build.

Most of what I have seen of Gutenberg is that it is page components. I have even seen that someone said Gutenberg is not a page builder. Given that, I have really only seen a use case for Gutenberg blocks for a blog page or similar article type pages. Most of the other pages of projects that I build need containers (sections or divs) to group content and provide hooks for styling.

Or to put it in the terms of Atomic Design, Gutenberg seemed to be a solution for atoms and molecules but not organisms which is what I need to create for most page templates that I build in WordPress. I could now see using Gutenberg to create organisms if there a lot of organisms that are similar in a site design. This is not always a case with the custom designs I build. But Phil’s solution does cause me to stop and wonder if I need to take another look at how I might incorporate Gutenberg into my workflow.

New Layout for Blog Archives

I created the current design for this site 7 years ago. I was getting tired of the design I had so I decided to do a really simple design that I had planned at the time to be a temporary solution. At the time I had been wanting to learn how to use Sass so I decided that my personal site would be a good opportunity for me to jump in.

About the time that I creating the new design, I was transitioning from being a designer who coded to a front-end developer. As I got more into embracing the development side, I just did not have a lot of interest in design. I loved building out other designers’ great designs and was more interested in exploring how to improve my craft.

Over the years I have done some small projects to update the site. I implemented the current skewed header and I redid the homepage to serve as a short introduction to myself and then list some of my current posts. But I also went through a period where I was just not taking the time to write new posts. I had plenty of ideas but was not motivated enough to take the time to do the hard work of making those concepts become reality.

Over the weekend I decided to take a step forward and give my site some attention. Now that I am doing these weekly posts, I had more reason to give other parts of the site some attention. I decided to start with my blog archive page. I decided to update it from a boring list of links to a grid of cards with a featured image, title and post date.

New layout for blog archive page that I created on Saturday.

My first step was to create a local version of my site. My favorite tool for spinning up WordPress sites locally is called Local. It was created by the folks at Flywheel has some great integration features with sites that are hosted on Flywheel. We host a lot of LGND sites on Flywheel or at least we create staging sites on it so I really like utilizing Local for those sites. But you can also use Local with a site that is not on Flywheel just to do your local development.

Local makes it really easy to spin up a site from an existing site. You just need a copy of your wp-content folder and a copy of your SQL database. You create a zip file with those contents and then drag that zip onto Local and it spins it up in less than five minutes.

When I had first created the site, I was using Compass to compile my Sass. I took the opportunity to update my workflow to Grunt.

Watched

  • Inner & Outer Values of the Display (Mozilla Developer) – great overview of some new display properties being implemented in browsers
  • Scroll Snap in CSS instead of JS (Mozilla Developer) – I need to take some time to experiment more with scroll snap
  • Yesterday – Missed it in theaters. I was really interested in the concept when I saw the trailer but wondered how it would play out in the movie. I was not disappointed and I really enjoyed this romantic comedy.
  • M*A*S*H* – I have started a new routine of watching one of my favorite shows on MeTV with my mother-in-law
  • The Great British Baking Show – watched the finale of Collection 7 on Netflix. Really enjoyed the bakers that were a par to this season. I wish all of them had nailed it in the finale. Hard to see some of them struggle and have bad days.

Read

  • What Does Your City Say? – Interesting commentary from Ian Hathaway about how cities shape us and how different cities value different things. I am currently working on a site from the Center for American Entrepreneurship which Ian is the research director for.
  • Uncommon Use Cases For Pseudo Elements – I am really interested in the idea of using a pseudo element to make an entire card into a link. I have been surrounding the card content with an anchor tag but it has felt a bit wrong since the anchor tag is an inline element. I like the approach the author of this article uses.
  • WordPress Image Sizes: A Ticking Timebomb? – This caught my eye because of my pain point with WordPress images. This article was not the call to address the issue or come up with new solutions that I was hoping it would be.
  • CSS Grid – I have been inspired by some of the experiments that Dan Davies is doing with CSS Grid
  • Become a Front-End Master in 2020 With These 10 Project Ideas – I like these ideas from Chris Coyier on sharpening your skills and adding to the toolbox
  • Things We Can’t (Yet) Do in CSS – Rachel Andrews shows some examples of print layout techniques that we still can’t replicate with CSS right now and discusses some solutions in the works.

My New LGND Yeti

I really like my new LGND Yeti. I had gotten a small one when I visited DC earlier this year. Since I don’t drink coffee, I have yet to use it. I really wish I had switched it out with a tumbler version that they had a few in the office. Over the summer, I found out that they were doing a re-order so I asked if I could get one. I just got it in the mail the previous weekend and enjoyed using this past week.

 

Comments are closed.