Relative Time in JavaScript
I wasn't aware that there is a completely separate standard for ECMAScript internationalization (ECMA-402 or the ECMAScript 2019 Internationalization API) that goes beyond the core specification and...
Performance Testing With Lighthouse
Performance is one of the hottest topics and, in my experience, one of the hardest to get right. There are tools that will help developers measure and improve a site's performance. The idea behind...
AV1 video in browsers
While at the Chrome Dev Summit I learned several things that made me really happy, one of them is about video: You can play AV1video in browsers (currently Chrome, Opera, Firefox, and Edge) using the...
Additional Syntax for @font-face
During Chrome Dev Summit I learned an interesting trick when working with variable fonts. Rather than use the default values for the font properties you need to specify the boundaries (upper and...
Loading multiple styles of the same font using Font Face Observer
For most of my web work, I use Font Face Observer to handle checking that the fonts have loaded. Using the following @fontface declarations: @font-face { font-family: 'Roboto'; src:...
Default font stack
Using the default fonts for the operating system saves bandwidth (we don't have to download the font since it's already installed in the system) and improves performance (fewer assets to download) but...
Dealing with significant white space in HTML
For most of the web's content whitespace is not significant. Browsers will collapse multiple spaces or tabs into a single space and will only insert line breaks when they encounter the <br />...
Animation and effects with CSS
I've been become more comfortable playing with CSS features that are beyond just making sure that typography works well in all form factors. Rotate On Hover # One of the things that I like is the...
Center vertically and horizontally
I was working on typesetting poems when I thought what it would take to center a piece of content both vertically and horizontally? For image and smaller blocks of text like poems, I choose to work...
Generating footnotes on a web page
As I was working on my last post about paged media I discovered one thing we can do to make footnotes for the web a little more user-friendly. Paged Media has a way to hide the text of the footnote...