Weeknotes 22:31

October 18, 2022

Week of October 9–15


The highlight of the week was launching version 2 of Energy Efficiency Hub. We launched the initial site almost a year ago in mid-November.

The original site was a one-pager. Version two is a more robust site that tells the story of the Hub and its work with much more depth. The new site includes an extensive resource center.

I started development work in mid-August. It was my third project to build using Gutenberg blocks in WordPress. I launched the new site on Thursday ahead of an event that the client was holding the following Tuesday.

Finishing Touches

It was a short work week due to the Federal holiday on Monday. I addressed some client QA (quality assurance issues) on Tuesday. On Wednesday, I refactored the different tab components on the site to be more accessible. I was also able to add functionality to change tabs by pressing the left or right arrow buttons on the keyboard or the top and bottom keys.

I also revisited the other interactive components to ensure I was using the correct aria labels for accessibility. I ran Lighthouse tests in Chrome and found several issues I addressed on Thursday morning before launching the site in the afternoon. I believe this site is my most comprehensive work on accessibility and sets a benchmark for my future projects.

I used a component guide for the Carnegie Museum as a reference for accessible tab components. I had example code for both HTML and JavaScript. I had to add a little bit of scripting to my components that they did not document in the article.

Before launch, I gave some needed attention to the search results page. I had forgotten to link the individual resources to an uploaded file, video, or link to video playlist on YouTube. From there, I decided to use the card style from the resources page and used icons we had already created for the different task group pages that appear in the search results.

And finally, I asked our designer to make an icon with the site logo mark for the results of the “pages” of the site. About an hour of work made the search results page a much better experience.

Friday Fun

I decided to join my teammates to play games for our LGND Campfire on Friday. We decided to play Codenames again, which I had enjoyed playing several weeks ago. We had a different mix of teammates playing this week. I decided to play the role of Codemaster after gaining some confidence with it the last time we played. We had a lot of fun playing and hanging out for a bit afterward. We were all a bit reluctant to leave Zoom and get back to work.

The State of CSS Survey 2022

I took the 2022 version of The State of CSS survey on Wednesday. I reflect on what I learned from taking the survey in another post.  If you have not taken it yet, please go there now and help us understand the latest trends in developer knowledge and usage of CSS.

I have not watched it yet, but Kevin Powell has a video about what he learned about what he does not know from taking the survey.

Accessibility Chapter of Web Almanac 2022

This week I read the chapter on accessibility from the Web Almanac 2022. “The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts.” I read the chapter on CSS a couple of weeks ago. Here are some things that caught my eye.

When does a software feature cease being an “accessibility feature” and simply become a “feature” that we all use? Ask yourself that the next time you put your smartphone in silent/vibrate mode – especially if you’re not a member of the Deaf/Hard of Hearing community.

We found that 22.9% of mobile sites have sufficient text color contrast, which is less than a 1% increase from last year. In 2022, we also have data for desktop sites, with 22.7% passing automated text contrast checks. The color contrast issue—at least for the text-based color contrasts that we tested—is pretty straightforward to validate even before you start building the website. There are multiple tools that can help developers and designers to check color contrast of text and graphical elements such as:

62.7% of the websites surveyed have inputs with only a placeholder attribute and no <label> element linked to it, which is extremely problematic. The HTML5 specification clearly states “The placeholder attribute should not be used as an alternative to a label.” It’s important to provide a <label> to improve accessibility for all.

Unfortunately, this sums up where things are with accessibility today:

Our analysis shows that there hasn’t been much of a substantial change in the accessibility issues seen across websites…Our analysis shows that there are still a lot of straightforward fixes, such as color contrast and image alt attributes, that could cause high impacts if addressed.

A lot of the accessibility issues that we see in our analysis can be avoided if designers and developers start thinking about web accessibility from the very beginning and not as an enhancement at the end. Like Anna E. Cook once said, there’s “no MVP without accessibility”. The web community needs to realize that a website only has a great User Experience when that User Experience works for everyone, irrespective of the device and assistive technology used. We have tried to focus on key metrics that can be easily addressed in the hope that in 2023 we see the numbers improve.

What I wrote

Congratulations to the San Diego Padres

I have been following the MLB playoffs through social media and the MLB app on my tablet, since I don’t have cable and cannot watch any of the games. I was excited to see that the Padres put away the Dodgers in 4 games to advance to the NLCS. I was born in San Diego but later relocated to Kansas City. When I was 8 years old, my best friend moved to San Diego. My family took 4-5 vacations to San Diego in the next 9 years and I lived in San Diego for a summer while in college.

I use to play baseball by myself in my backyard and pretended that I played for the Padres along with my best friend. I think I played games out there for 5 or 6 years. I even made a baseball card of myself as a Padre at one point, which we have been a whole lot easier to do today with computers and digital technology. I made a reproduction of it several years ago.

I started playing a season with the Padres with MLB The Show 20. I made it to July and was playing so-so and didn’t finish the season. I know the fans have been frustrated by their early exits in the past few years in the postseason so I am glad to see them have some success this year.

Read an extended version of this story in a separate post

Videos I watched

I never thought this would be possible with CSS (:has() selector)

Subtle, yet Beautiful Scroll Animations – I liked the idea of use blur when animating text in. I ended up adding it to my transition for tabs on the Energy Efficiency Hub.

The Web is Good Now – a conference talk from Chris Coyier where he explores evolutions in Web development providing new solutions for old problems.

The Hedgehog Concept for Individuals

You Got Sales – a new commercial from Shopify

GreenSock Tip from Cassie Evans to get your animations right before adding the scrolling bit

Articles I read

What I watched

  • The Great British Baking Show Collection 10 E4 (Netflix)
  • City Slickers (Netflix)
  • Captain America: The Winter Soldier (Disney+)
  • The Falcon and the Winter Soldier (Disney+) – I binged this at the end of the week. It was my third time through it.
  • She-Hulk (Disney+)
  • Blue Bloods (CBS) – One of the few shows I watch on network TV.
  • Bernie Mac (Peacock)
  • Minions: The Rise of Gru (Peacock)

Books I read

What I played

  • FIFA23 (Manchester City)
  • Codenames with my LGND teammates

Comments are closed.