Weeknotes 19:14
October 7, 2019
Week of September 29 - October 5
Site Launches
In my last weeknotes, I mentioned that several projects that I had been working on were shipping/launching over the next few weeks. The National Head Start Association Language Playbook officially launched at the beginning of last week at their leadership conference.
I enjoyed building this site in WordPress using Advanced Custom Fields. It was the first project that I tried to create my own page builder using ACF. The site content was not as modular as first thought so the page builder was not as successful as I would have liked it to be (ended up having to duplicate fields in another context). But I learned some lessons that I am applying in a current project.
![](https://jeffbridgforth.com/wp-content/uploads/nhsa-playbook.jpg)
The Complexities of Cancer Control
One of my recent projects was to take a one-page site that LGND created in the past and use it as a template for a new one-pager for the same client. I needed to update some background imagery and gradients for a different look. I also refactored the layout to accomodate video instead of text and images in an aside. It was a quick and easy project that launched at the end of last week.
![](https://jeffbridgforth.com/wp-content/uploads/cancer-control.jpg)
TIL (Today I Learned) – Style Linking
Last Wednesday, I learned something new about using locally hosted fonts and @font-face
. The code I had been given divided out the font by weights and had a font-weight of normal
on each of those declarations. This creates a problem if the primary font does not load because the backup font would not have any font-weights to distinguish them because the font-weight
was set at 400
for each of the fonts.
I learned that I can edit my @font-face
declarations to use the same font-family
multiple times and then assign the different weights. This way I could still use the font-weight
in my CSS code. It is called style linking and I learned about it from Smashing Magazine.
Here is an example:
@font-face {
font-family: 'HKGrotesk';
src: url('../fonts/HKGrotesk-Regular.woff2') format('woff2'),url('../fonts/HKGrotesk-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('../fonts/HKGrotesk-SemiBold.woff2') format('woff2'), url('../fonts/HKGrotesk-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('../fonts/HKGrotesk-Bold.woff2') format('woff2'), url('../fonts/HKGrotesk-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'HKGrotesk';
src: url('../fonts/HKGrotesk-Medium.woff2') format('woff2'), url('../fonts/HKGrotesk-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
Accessibility
Two weeks ago, I listened to The Shop Talk Show #367. It featured Nicolaus Steenhout and Christopher Schmitt. Here are some things I took away from listening to this episode:
- We have an awareness problem – Accessibility is not a core part of computer science curriculms or bootcamps. Accessibility should be a core part of our training so that it is not just an afterthought but baked right into how we build software or websites.
- There are a lot of simple accessibility fixes – most of the fixes involve using semantic HTML as it was designed to be used.
- We don’t neccessarily need more accessibility experts but we need accessibility champions – People who understand the basics and understand how important it is. You can always bring in experts for the really hard problems.
This week I watched Sara Soueidan’s talk from Smashing Freiburg on Applied Accessibility: Practical Tips For Building More Accessible Front-Ends. I would highly recommend watching this video. A lot of practical tips. Made me rethink some of the work I have done recently.
Going back to the Shop Talk Show. It was encouraging to me to hear Nicolas talk about not needing to be an expert. I have learned things about accessibility over the years and try to practice in every project. The fact that I start with semantic HTML solves a lot of potential accessibility problems just by that good practice. And then including alt
tags on all of my images. Most of the images are decorative and not informative so I just use empty alt
tags.
I think the place where I still feel like I get tripped up is in making components like accordions, tabbed, content or hide/display that are accessible as I add JavaScript functionality. And I still don’t feel as confident in how screen readers handle JavaScript. But I feel encouraged that I am getting a lot of the low hanging fruit and I continue to try to learn and grow in handling those interactive components.