Today I Learned...

Chrome hates “Hoefler Text”

January 17, 2020

I was working on a slap-dash sorta project and setting up a WordPress site with a Twenty Nineteen child theme to bash it out. While I was testing my work in Chrome, I got this:

What’s up with those gross symbols in the text field?

This only affected Chrome, but I admittedly hadn’t tested it further in Opera or Edge, which both use the same Chromium engine. I thought it could be a server-side encoding issue, but I couldn’t confirm it and couldn’t find anything in a hasty (non-Google) search.

I inspected element and saw that Twenty Nineteen explicitly defines a font-family on text fields:

button, input, select, optgroup, textarea {
  "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
}

Ugh. I mean, it’s cool and all to use a different font for form elements, but it’s certainly something that flies under the radar pretty easily, especially when creating a child theme off of it.

I commented out “NonBreakingSpaceOverride” and nothing. Then “Hoefler Text”. Bingo!

All I had to do from there was override the declaration with one of my own, using the same System Font stack the rest of the site uses. Boom.

That selecting the first child of a child element when the parent is hovered in CSS is weird.

January 4, 2020

It might be the weirdest line of CSS I’ve ever written.

.site-footer__nav a:hover > svg ellipse:first-child {
  fill: var(--primary-color);
}

You’ve gotta use aria-label when there is no discernible label for a link

January 2, 2020

I wrapped an element in an <a> tag. That element had text in it, but that content was not directly related to the parent anchor. Google’s Measure tool was dinging my accessibility score because of it. I was able to wipe things clean by adding an aria-label on the anchor.

<a href="/contact" aria-label="My contact form">
  <article>
    <h3>Contact Me</h3>
  </article>
</a>

How to clear a WordPress WebSocket error from the console

December 31, 2019

This kept popping up in the console:

WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Unexpected response code: 403

Turns out it’s from Jetpack. I hadn’t used it on my site before, but wanted to give it a spin this time around. Simply deactivating and reactivating the plugin did the tricks and cleared the error.

How to display the WordPress post date and modified date, if modified

Had to look this up, but it makes a lot of sense when it’s typed out. Grab the current date and the post date, then compare the two. If the difference is zero, then only show the post date. If the difference is one or higher, show both.

<div class="post-single__date">
  <?php 
  $j_time = get_the_time('j');
  $j_modified_time = get_the_modified_time('j');
  if ($j_modified_time >= $j_time + 1) { 
    echo the_date('F j, Y');
    echo "Updated: "; the_modified_time('F j, Y');
  } else {
    echo the_date('F j, Y');
  } ?>
</div>

How to quickly spin up a dark theme

It’s easier than I thought it would be. Use CSS custom properties to define a color palette on the :root element, then use the prefers-color-scheme media query to swap those colors for others when the media query is set to dark.

Here’s how my variables file looks:

:root {
  --red: #fd1e1e;
  --orange: #fd5a1e;
  --gray-lightest: #f7f2f1;
  --gray-lighter: #e8e3e1;
  --gray-light: #cabdb9;
  --gray: #b0a3a0;
  --gray-medium: #7d7472;
  --gray-dark: #615a58;
  --gray-darker: #463e3b;
  --gray-darkest: #221d1b;
  --white: #fff;
  --black: #000;


  --primary-color: var(--orange);
  --text-color: var(--gray-darkest);
  --background: var(--gray-lightest);
  --site-title: var(--gray-dark);
  --border-color: var(--gray);
  --link-border: var(--primary-color);
  --link-color: var(--text-color);
  --link-hover: var(--white);
  --link-current: var(--gray-darkest);
  --code-blocks: var(--white);
  --error-color: var(--red);
  --table-background: var(--gray-lightest);

  @media (prefers-color-scheme: dark) {
    --text-color: var(--white);
    --background: var(--gray-darkest);
    --site-title: var(--gray);
    --border-color: var(--gray-lightest);
    --link-color: var(--white);
    --link-current: var(--white);
    --code-blocks: var(--black);
    --table-background: var(--gray-darker);
  }
}

How to echo the contents of an SVG file with PHP

December 30, 2019

Using this is so much cleaner in the template files than copying and pasting the entire SVG code. Plus, it lets me manage all of my SVG files from a central location. Update it once, and the changes are applied everywhere!

<?php echo file_get_contents( get_template_directory_uri() . '/dist/img/logo.svg' ); ?>

How to Exclude Post Categories from a WordPress Loop

December 21, 2019
/** Exclude "Today I Learned" category from blog loop */
function exclude_category_posts( $query ) {
  if ( $query->;is_home() && $query->is_main_query() ) {
    $query->set( 'cat', '-5' );
}
add_action( 'pre_get_posts', 'exclude_category_posts' );