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.

Homepage of NHSA Language Playbook playbook.nhsa.org

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.

One-page site I built for the National Academies of Science, Engineering, and Medicine based on a one-pager LGND built earlier. resources.nationalacademies.org/infographics/cancercontrol

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.

Comments are closed.