Jeff Bridgforth

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.

This online platform will help our field communicate the unique and impactful value of #HeadStart to diverse audiences. Learn more: https://t.co/fKNXEnGnSh pic.twitter.com/AdKWYRA1m4

— National Head Start Association (@NatlHeadStart) September 23, 2019

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.

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.

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.