One web browser default I’m seldom satisfied with is the appearance of list markers. Their style can be customized with CSS using li::marker, but the options there are limited. The best way I’ve found to fully customize them is to remove default list styles and use a li::before pseudo-element as a list marker:

ol,
ul {
  list-style: none;
}

li::before {
  content: "•";
}

I’ve used a plain old bullet in this example, but content’s value can be whatever you want, and you can also use position, background, and… See more →

Before vector art, high-DPI raster image processing, and retina screens took over the world, if someone wanted to draw very fine and precise lines, they relied upon steady hands, cork-backed metal rulers, French curves, and a set of expensive technical pens. The Rapidograph pens I used in college could be a headache to maintain—don’t let that ink dry in the nib!—but the results were worth it: pull one of those pens across a fresh sheet… See more →

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 →