Home / Newsletters /

#189

First up, Chris and Dave redesigned the site for their mighty fine podcast, The ShopTalk Show and I can’t remember the last website where I ooo’d and aaa’d over it as much as this one. The design is inspired by old ASCII art so that typographic elements like equals signs or stars make up the borders between things.

Not only that but it uses a pixel font called Unibody 8 that I love the look of, especially at smaller sizes. There’s also some nifty stuff going on with those headers if you take a look under the hood…

Speaking of fonts, variablefonts.io is a website that explains everything there is to know about variable fonts; how to use them, what they’re capable of, and how to find them. It’s a great resource for learning more about the technology.

This comes off the back of the new Google Fonts redesign and their renewed focus on variable fonts. Now, at the very top of the navigation, is now a toggle that lets us search through all the variable fonts that are currently available in their catalog:

Seems like there’s a ton of traction on variable fonts lately and I’m super excited about it all. It’s also worth noting that you can find even more variable fonts at v-fonts.com.

When it comes to number inputs we should probably follow the lead of Hanna Laakso, who wrote about their accessibility problems and argued that we should stick to a regular input with a type of text like this instead:

<input type="text" inputmode="numeric" pattern="[0-9]*">

As Hanna writes:

Numbers are one of the most commonly asked for pieces of data, typically used in dates. We know from user research that some users prefer the large buttoned number keyboard (resembling a telephone keypad) for entering numbers on mobile. Until now, the GOV.UK Design System date input component used the HTML element to provide this number keypad when a user enters dates

Speaking of forms, here’s another neat tip I’d never heard of before: the autocomplete HTML attribute! Phil Nash wrote about how this attribute can be used to save users time and fill in important bits of data automatically, without them having to type:

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

If a code has just been sent via text message, Safari will suggest using this code within the keyboard itself—saving the users the hassle of having to type it themselves. Pretty neat.

There’s also a bunch of values for autocomplete that are handy and worth checking out if you’re building a form right now.

Sarah Chima wrote this great post explaining what event handlers are and how to use them. She explains what the event object is and all the ways in which we can create handlers that record the user’s behavior.

Sarah also links to this great post about bubbling and capturing events that is useful if you need a refresher on the subject.

Did you know that you can now use CSS Grid and Flexbox with buttons now? That’s pretty handy for aligning icons within them or placing buttons next to each other as shown in this graphic below by Adam Argyle:

Here’s an outstanding talk by Marcin Wichary all about software development and all the complexities that go into making something as simple as a font menu. This certainly mimics my experience with product design where the simplest thing in the world can require weeks, months, years of attention to build or fix.

I think anyone working on software today can appreciate Marcin’s feelings here when it comes to looking into super annoyin’ bugs. Also? Fonts are extremely cool.

In 4 Ways to Animate the Color of a Text Link on Hover Katherine Kato does, well, just that! This is a super helpful batch of tricks for when you want to have a color gradient move across the text. Also, this is one of those moments where I remember there’s always multiple ways to do anything in CSS:

CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match. We love Flywheel. It’s hosting that’s actually optimized and built for WordPress, ensuring a smooth content editing and management experience you won’t find anywhere else. Give it a try and experience the difference for yourself.

Get started today →