Code

So I thought I knew as much as I needed to know about the HTML <video> element, and as usual, I was wrong. I knew I could specify a source file with a src attribute on either <video> or a nested <source> element. I knew what to expect from a bunch of other attributes, like autoplay, controls, loop, muted, and the obvious height and width. I knew the poster attribute gave me control over the… See more →

I’ve been revising a metadata structure for blog posts and a sitemap for a few months now, and since I haven’t felt the need to tweak either of them in awhile, they’re probably solid enough to document here.

Metadata structure

The blog post metadata has been developed to accommodate a wide variety of post types, to give me a lot of flexibility in how to present them, and to give users a lot of options… See more →

Every static site generator has idiosyncrasies, and Eleventy is no different. As is the case pretty much any time I try out software, I find that Eleventy often does things differently than I think it ought to, and it doesn’t always make itself as clear as I think it could. A couple of examples:

• Eleventy has no built-in mechanism for date-based archives. A common blogging convention I’ve adhered to for many years involves organizing post… See more →

• Translated from the JavaScript in Sean Yen’s Easing equations
• Illustrations adapted from Andrey Sitnik and Ivan Solovev’s Easings.net

Example usage:

duration = 30
for frame in range(duration):
    return easeInOutQuad(frame/duration)

linear

def linear(t):
    return t

easeInSine

def easeInSine(t):
    import math
    return -math.cos(t * math.pi / 2) + 1

easeOutSine

def easeOutSine(t):
    import math
    return math.sin(t * math.pi / 2)

easeInOutSine

def easeInOutSine(t):
    import math
    return -(math.cos(math.pi * t) - 1) / 2

easeInQuad

def easeInQuad(t):
    return t * t

easeOutQuad

def easeOutQuad(t):
    return -t * (t - 2)

easeInOutQuad

def easeInOutQuad(t):
    t *= 2
    if t < 1:
        return t * t / 2
    else:
        t … See more →

Happy Halloween! Here are a few quick notes about this year’s design for Robtober, my annual horror movie marathon.

The ransom letters

The ransom note concept for the title screen came to me in the middle of the night, and I don’t remember if it was inspired by something specific. But in my subsequent research, I read the entire Wikipedia article about the murder of JonBenét Ramsey, so if that’s a knowledge hole your pub… See more →

Robtober is what I call the horror movie binge I do every October. After I redesigned my site in 2017, I started documenting the event each year with a horrifically custom-designed blog post, getting a little more elaborate each time. This post goes behind the scenes of the 2021 edition.

The data

I generate my site with Jekyll, and a custom-designed post like Robtober gets its own unique layout file. To keep things tidy, all the… See more →

Apropos of nothing, I decided that the first of the old entries I’d bring over to V7 would be granular ones:

• Daily Haiku: A section of the fourth version of my site, beginning back in 2005. As the name suggests, I wrote a haiku every weekday based on the Dictionary.com Word of the Day. Each haiku was originally its own entry, but when I brought them over to V6 a few years ago, I consolidated… See more →

For awhile, I had basically resigned myself to the idea that the massive amount of stray content I’m planning to bring home (thousands of tweets, Flickr photos, etc) would necessitate moving my site onto a LAMP stack CMS. I started poking around in WordPress, which I hadn’t touched in years, and Craft, which I use regularly in my work at ProPublica. The former felt bloated and the latter’s setup presumed a level of back-end know-how… See more →

I might have expected quarantine life to be a boon to my site’s redesign process since most of my preferred social distractions were nullified. Instead, I’ve been using the time in isolation to make music videos, finalize a home purchase, move into said home, and try to find my place in our national reckoning on racism and public safety reform. But as I slowly shift some of my attention back to the redesign, I’ve been… See more →

Progress on the redesign has slowed, partly because I’ve been busy with other things, and partly because, frankly, the open questions about the timeline section enumerated in my previous post are an intimidating mess, a perfect example of the early stages of the Design Squiggle.

In a fight or flight situation like this, here are the arguments for flight:

• “Uh, the timeline isn’t even your top priority for the site, remember? What’s more important: working on… See more →

AP style is particular about how dates are formatted in various circumstances. strftime uses %b for month abbreviations, but its format (the first three letters of the month: Jan, Feb, etc) differs from AP style’s preferred abbreviations for some months. This Liquid snippet converts strftime’s month abbreviations to AP style:

{{ object | date: '%b. %e, %Y' | replace: 'Mar.', 'March' | replace: 'Apr.', 'April' | replace: 'May.', 'May' | replace: 'Jun.', 'June' | replace:… See more →

I added a tiny bit of CSS to aid readability by keeping line lengths in check on larger viewports:

body {
  margin: 0 auto;
  max-width: 75ch;
  padding: 1rem;
}

When calling the CSS file from the page head, I include a query string based on today’s date, which I’ll update when the CSS is updated. This will let updates get past the browser’s cache.

<link rel="stylesheet" href="/assets/css/main.css?20200108" />

Hopefully this small stylistic addition will keep things tidy enough until I properly begin the visual… See more →

The first thing I did when setting up this new version of my site was to put together some minimum viable HTML templates. Here’s the blog post template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title><!--POST TITLE--> | RobWeychert.com V7</title>
    <meta name="description" content="<!--POST DESCRIPTION-->" />
    <link rel="alternate" type="application/rss+xml" title="RobWeychert.com V7" href="/index.rss"/>
  </head>

  <body>
    <… See more →

I’ve been studying music theory this year. While some of its core concepts were already familiar to me, much of their specifics were not. Or so I thought. A funny thing happened when I was learning the major scales. While playing through a song I had written some years before, I started picking it apart to see how it correlated with the theory I was learning. I had composed the melody without any thought to… See more →

Sometime during the development of Tinnitus Tracker, it occurred to me that color would be a good way to give its many entries—which span nearly three decades—a sense of time and place. Colors would change with the seasons and fade over time. In effect, every single day of the past 30 years would have a unique color scheme, each day looking slightly different than the day before. As a bonus, the color’s constant flux as… See more →

Thanks to Tinnitus Tracker’s many browsing options, there are more than 1,000 lists of shows on the site, making the show list the most prevalent design pattern. It was clear from the start that this would be the case, and the design of event listings is something I’ve given a lot of thought as a designer and music fan, so it was the first thing I explored in early sketches and mockups.

My initial… See more →

A lot happened in 2018. The ruinous Trump administration continued doing its ruinous thing. I finally deleted my Facebook account. I had a stressful couple of months caused by something that rhymes with “head hugs,” which I would gladly trade the life of any loved one to avoid going through again. I visited the UK for the first time. I published 33 blog posts, including several well-received posts on design and development.

Projects

Let’s check in… See more →

I’ve been getting my feet wet with CSS Grid this year. The new possibilities it introduces for page layout on the web are exciting, but before venturing too far into those waters, I wanted to see how it handles the kind of layouts I’m already designing. Most of the work I do on the web—at ProPublica and here on my site—is editorial design, so I was keen to learn how Grid accommodates the conventions of… See more →

Hello, dear reader!

August is gone, but its links remain.

My site was quiet in August, as I’ve been heads-down on a project I’m pretty excited about. Its release is just one facet of the ambitious September I have planned, so if all goes well, there will be much to report in next month’s newsletter.

My alter-ego Windhammer recently returned to the competitive air guitar stage for his 10th anniversary, tying for second in the… See more →

Hello, dear reader!

June is gone, but its links remain.

It was a relatively busy month on my site! I had an unexpected reason to revisit an animated student film I made 20 years ago, wrote about designing better concert listings, chronicled my experience learning about the future of typography at the Ampersand conference, and offered middling reviews of the year’s most celebrated horror films, A Quiet Place and Hereditary.

This month’s links are the sort… See more →

I’m in England (for the first time!) where I’ve just attended Clearleft’s outstanding Ampersand conference in Brighton. I was a little concerned that the combination of jet lag and the (otherwise excellent) venue’s warm temperature would make it hard for me to focus, but the lineup of speakers was more than engaging enough to overcome those obstacles. The most discussed topic of the day was, unsurprisingly, variable fonts, support for which has begun… See more →

In my work as a designer, color has never been my strong suit. I often try to avoid dealing with it entirely (as seen in the previous version of my site). Through education and experience, I’ve picked up the basics of color theory and mostly avoided catastrophe, but my rudimentary process has been anything but reliable.

My V6 redesign seemed like a good opportunity to try to improve my color game, since my site is… See more →

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

@function f($frame) {
  @return percentage( $frame / $totalframes )
}

When you create a new @keyframes at-rule, put the following three variables above it (customize the values for $seconds and $framerate but leave $totalframes as-is):

$seconds: 3;
$framerate: 30;
$totalframes: $seconds * $framerate;

Now just invoke the f function… See more →

Grid systems are fundamental to many visual design processes. They govern the spatial relationships in a layout by establishing a set of standard sizes and positions for various elements. In addition to helping achieve a visual harmony between components, they make the design process faster and more efficient and help ensure decisions aren’t made arbitrarily. If you’re reading this post on ProPublica’s website, you’re looking at a page that was built using one.

Grid systems… See more →

Once I solidified my V6 redesign’s reason for being and wrestled its content into some semblance of order, it was time to create a system to govern its appearance. The site consists almost entirely of things to read, so typography would be the core of that system. Tasked with satisfying the site’s various functional requirements as well as establishing visual character, it would be a necessarily multifaceted typographic core. So where to begin?

The typographic… See more →

Twenty years ago, techno-utopians rightly recognized that the internet in general and the web in particular would democratize the distribution of self-expression in a revolutionary way. Over the next decade, the number of blogs sharing art and recipes and poetry and personal stories grew seemingly exponentially, and their proliferation in the wake of the dot-com crash was a testament to the noncommercial, grassroots nature of the movement. As hand-coded sites gave way to hosted blogging… See more →

Rob Weychert’s Year in Review

My personal movie-watching stats for 2016, provided by the always delightful Letterboxd.

Why Classic Rock Isn’t What It Used To Be

But do radio stations rely at all on the institutional knowledge of their DJs to decide what to play?

Nope. The role of the song-picking DJ is dead. “I know there are some stations and some companies where if you change a song it’s a fireable offense,” Wellman said,… See more →

What’s Your Ideal Community? The Answer Is Political

It’s conceivable that people who live in cities come to value more active government. Or they’re more receptive to investing in welfare because they pass the homeless every day. Or they appreciate immigration because their cab rides and lunch depend on immigrants. This argument is partly about the people we’re exposed to in cities (the poor, foreigners), and partly about the logistics of living there.

The suburbs… See more →

I had only just recently decided to leave the game industry and return to the web when A List Apart published Ethan Marcotte’s pivotal article, “Responsive Web Design”. Since Ethan is a close friend, I assumed and continue to assume that his landmark discovery was specifically timed to validate my decision with firm authority. This was very, very exciting stuff.

This site is my first full-scale attempt at responsive design. It uses one template for… See more →

A brief history of type

Like all the arts, [typography] is basically immune to progress, though it is not immune to change. —Robert Bringhurst, The Elements of Typographic Style

The art of typography has a rich and storied tradition, and like most art forms, its production processes have moved at a snail’s pace. After Gutenberg’s landmark invention of movable type (a printing method consisting of individual letters carved out of metal) in the fifteenth century, the… See more →

As the spread of web standards reaches exponential levels, there has been much reflection on just how far the web has come, and how much our individual perceptions of it have changed since we were first introduced to it. To look at the first web site I ever made compared with the work I’m doing now makes me wonder if there isn’t something to the notion of “progress” after all. Here is the story of… See more →