Weeknotes 23:28

September 4, 2023

Week of August 27–September 2

Finishing up the initial development

I finished up QA (quality assurance) on my current project by fixing some outstanding issues that I had found the week before when I tested the site. On Tuesday, I tested with Lighthouse in Chrome and then manually tested it by tabbing through the pages. I added my :focus styles at this stage of the project. I use code that I picked up from Stephanie Eckels to target :focus using a keyboard but not with a mouse. 

&:focus-visible {
    outline: white dotted 2px;
    outline-offset: 8px;
}

&:focus {
    outline: white dotted 2px;
    outline-offset: 8px;
}

&:focus:not(:focus-visible) {
    outline:none;
}

I also ran my pages through the Deque axe DevTools® Firefox extension and caught some aria labeling errors that I needed to correct.

I caught some color contrast issues with a couple of the blocks that used white text on a light blue background (#6397D9). I changed it to another color blue (#2471D6) that was part of the brand color palette.

Learning about Scroll-driven animations in CSS

I took advantage of down time on Friday to focus on professional development. One of the items on my list to learn about was the scroll timeline, which is new to CSS and only available in Chrome and Edge. I read an article by Bramus on Friday, Scroll-driven Animations, that I would highly recommend. I also watched an accompanying video about what is new in web animations from Google I/O, which was filmed back in May.

It was a great introduction to the subject. Bramus did a thorough job of explaining the syntax and the concepts. I really appreciated the demos that he created to support the article. I came away feeling pretty confident that I could use this new tool once it has better browser support or may consider using it with the polyfill.

I had hoped to build some Codepens of my own to solidify my understanding but had to give attention to some client work before the long weekend. I plan to read some more articles next week and build some of my own demos.

Articles I read

Books I am reading

What I watched

What I played

MLB The Show 23 (Rays) – I went 4-3 this week. Two of the losses weren’t even close as the Blue Jays beat me 8-3 and 10-3. Three of my wins were shutouts and the other was a walk-off win in 11 innings.

Comment on this post