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.
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.
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.
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
placeholderattribute and no
<label>element linked to it, which is extremely problematic. The HTML5 specification clearly states “The
placeholderattribute 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
- It’s the final countdown – A post about the launch of Real World Learning and Energy Efficiency Hub. I hope to write case studies about both projects in the weeks to come.
Congratulations to the San Diego Padres
Congratulations to the @Padres for advancing to the NLCS. I was born in SD and started following the team after my best friend moved to SD from KC when I was eight. I know the fans have experienced a lot of disappointment in the postseason in the last few years. @BMaienschein
— Jeff Bridgforth (@webcraftsman) October 16, 2022
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.
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.
You Got Sales – a new commercial from Shopify
?? Most of the time, the best way to approach a ScrollTriggered animation is by leaving out ScrollTrigger until the end.
Get the animation right first, and then hook it up to scroll.
— GreenSock (@greensock) October 12, 2022
Articles I read
- Day 6: the :has() pseudo-class – Manuel Matuzovic continues his series on getting up to speed with modern CSS
- Day 13: the :where() and :is() pseudo classes
- “Whether it be long or short” – a tribute to Queen Elizabeth
- The meaning of Mikhail Gorbachev
- Accessibility chapter of Web Almanac 2022
- A Manifesto for Times of Suffering – A great declaration of faith in the truth of God’s character and in God’s Word
- Knowing – A very interesting piece by Jeremy Keith about when knowledge can be regrettable. In his case, it was knowledge about cryptocurrency.
- The Silent Sin That Kills Christian Love (contempt)
- Practical uses of the :has() relational pseudo-class – I think I am even more excited about solutions with :has() than container queries.
- Early Days of Container Style Queries
- 23 Opportunities for Areas of Improvement in the Workplace – An article exploring areas of professional development.
- :where :is CSS? – I have yet to use these selectors in my work. But need to keep them on the shelf for when I am ready.
- Day 14: the difference between :is() and :where()
- How to find and become a great engineering mentor
- Day 15: the :modal pseudo-class
- The Need for Roots
- Why Bros Failed at the Box Office – A Christian perspective.
- How to Time Travel – How travel creates memories. I wish I had read this earlier in life and made family vacations more of a priority.
- The Top 24 Side Hustles To Make Extra Money in 2022
- Friend, You Can Be Ready to Die – a Christian perspective
- Say the Quiet Things – This article was especially meaningful to me in this chapter of life as two of my three kids no longer live at home.
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
- The Discerning Life
- The Coddling of the American Mind
- User Friendly – Slowly making my way through this one a second time.
What I played
- FIFA23 (Manchester City)
- Codenames with my LGND teammates