vince falconi | tattooed.dev

The broken election URL

2023-10-10T01:45:00Z

Today was the last day to register for voting in this November's election. Ever the responsible citizen and devoted "I Voted" sticker-obtainer, I triple-checked my voter registration.

Using the Missisippi Secretary of State's website, you can find almost anything you could want for voter registration. This includes a PDF of a mail-in voter registration application, which includes some helpful information including the thing you need to have to vote: voter ID.

I could yell for hours about how terrible voter ID is—about how it is designed to disenfranchise people, particularly poor and not-white people, and how additional friction between a person and their vote is a by definition voter suppression—but that's not what we're here for today.

Voter ID is called out as a requirement, right there in the PDF, and the Secretary's office has included a link to a web page to aid in the process of acquiring a valid ID. That's great!

That link is [www.MSVoterID.sos.gov] and, as of October 9, 2023, if you open that link, you will likely see a warning about the security of your connection to the website with information concerning the exercise of your right to vote.

Well, that's not great.

If you're not familiar with this error or TLS certificates in general, here's the basics: a TLS certificate is document browsers use to make sure information exchanged between your computer and the server is seen only by you and the server, and has not been tampered with in transit over the internet. A certificate is only valid when used on the domains it is issued for, and has both an issue and an expiration date. A certificate is issued by what is called a Certificate Authority or CA, and if a browser does not know or trust the certificate's issuing CA, the browser considers the certificate invalid.

The voter ID link results in an "invalid certificate" error message because the certificate was issued for any domain that matches the pattern *.sos.ms.gov, and www.MSVoterID.ms.gov fails to match the pattern.

If a certificate is invalid, a visitor can usually still access the site as long as they know not to trust the site with sensitive information. However, the Secretary of State's website uses something called HTTP Strict Transport Security or HSTS, which tells a browser to change all URLs from HTTP to HTTPS before sending the request to the server, and also to break the connection completely if a redirect goes from HTTPS to HTTP or if it encounters an invalid certificate along the way.

Ultimately, www.MSVoterID.ms.gov redirects to a page on the Secretary of State's site dedicated to voter ID, exactly as promised, but because its redirect chain includes an invalid certificate, anyone using Chrome, Edge, Brave, Opera, Arc, or Safari browsers are not going to get there. (Oddly enough, Firefox ignores the invalid certificate and redirects unbothered. So, that's fun.)

Why is this a problem? I mean, the voter ID information is freely available on the Secretary's website, plain as day. If a voter wants to get that information, they can just open a new tab and pull it up and be done with it.

If this information is available, why is this a problem?

We're talking about the official application to exercise one's right to vote in the state of Mississippi, and it contains false information. This state form explains two ways to contact the office, and the easier of the two is broken in the best scenario and untrustworthy in the worst.

Moreover, encountering a warning about the security of an elections website is not a great look. That certificate error has nothing to do with the voting machines used by the state, but I argue that it does not inspire confidence in the average person focused in on "security" and the alarm imagery.

It is entirely reasonable to write it off as one more broken link on the internet, but again, anything that makes it more difficult to vote is, by definition, voter suppression. According to the law, the right to vote is a given. We don't have to complete a task to have the right, but for some reason, we have to complete multiple tasks to exercise the right.

Working around that registration form's broken link is just one more requirement.

I contacted the Secretary of State's office to let them know. We'll see if they fix it.

I farted on a website

2023-05-26T05:00:00Z

The year was 2021. The month was February. The day was Sunday. I don't remember why, but I sat down at my desk and despite my tightly-held personal "no work email on the weekend" policy, I opened my work email.

I found a short email thread from my web designer counterpart, our manager, and our director. A person applying for a job with our company left us a note in the contact form, informing us that our website appeared to be tampered with because an odd string was appearing on every form on the site.

The discussion had already concluded by the time I read it, deciding it was likely a phishing attempt or a phishing test, and besides, no one could see the string the person claimed to find.

I shave with Occam's Razor as often as the next person but, while rare, sometimes the correct explanation isn't the simplest. Outliers exist. The outlier in this situation?

The phrase "fart noises."

Yeah.

I'd just finished up a big project updating the forms on the company's website.

These forms were my baby, a thing I'd built with love and intention over ten years, to work the way we needed them, crossing all the compliance boxes and doing the spam prevention while still providing a frictionless sign-up flow no matter the context.

This project became particularly frustrating when I had to account for geo-based fields and messaging. If I couldn't tell whether something was working, I needed a signal in the front-end to let me know.

Most developers have their go-to test strings. "Hello world." "Test123." "This worked."

Me? My test strings worked on an escalating scale that reflected my annoyance and desperation. Let us think of it as a form of developer catharsis.

At the start of a project, my test strings look a lot like the previous standard fare, but when something is giving me a headache, I switch to "fart noises." Because that's what is in my heart. The problem feels like a fart noise. Hell, as the headache reaches a migraine, a curse word or two may even make an appearance, but no matter the level of annoyance they reflected, they are cleaned up in the end in a find-and-replace two-step.

Except I forgot to do that two-step this go around.

Two years out, I can try and fail to scrape every last square inch of my brain to find why or how I forgot, but to mangle a cliché, it is what it was.

Yeah.

The second I read "fart noises" in the email that Sunday afternoon, I opened the site repo and searched. Found it in the global form partial used on every page, tucked inside a conditional block that would only show it to visitors outside of the United States.

Naturally, no one in that email thread thought to check from a proxy connection. "If it wasn't appearing," they may have thought, "it had to be made-up."

Within minutes of reading the email, I somehow managed to reply, "Sorry to dampen the mood, but they're right. That is one of my test strings. It made it out of testing and QA. I'm pushing out a fix right now to remove it. I am mortified."

My early-morning meeting with our Chief Marketing Officer was cut short by a (100% unrelated) config error by our MSP that took our website offline. But based on conversations that followed, I was going to get it. What "it" was, I'll never know, but I was going to get it.

I'd never made a mistake like that. It was embarrassing—for me, and for the company. Calling out specific examples feels cruel, but we've all heard stories of dropped tables in production, we've watched DNS remind everyone that it's not here to make friends. Somehow, more than a decade into my career, I'd managed to avoid writing a story of my very own.

Then I farted on the marketing website of a well-known, well-respected security software company.

This is the part of the Blog Post™ where you're probably expecting some key takeaways, what lessons were learned, other thought-leadership type stuff. Maybe the announcement of an open-source QA solution inspired by this incident. Something.

But that’s not what we’re here to do today.

Maybe more eyes in the stakeholder review cycles would have prevented this.

Maybe a tighter QA process would have prevented this.

Maybe a better work-life balance would have reduced the pressure and helped me to—

—but none of those things were in place. It happened.

I could have tried harder.

I could have cared more.

I could have—

—AND YET. I worked hard. I cared deeply. And it happened.

I farted on a website.

The perfect QA process doesn't exist.

Mistakes will happen.

It wasn't the result of a personal shortfall.

Mistakes will continue to happen.

And when they do, remember, that mistake is already in the past. So, how do you respond in the present?

Blocking pachyderms

2023-03-15T17:43:00Z

Openly and with wild abandon, I block ads and tracking with a self-hosted AdGuard instance on my home network. Sometimes I lose functionality, like when a Vimeo-based streaming app on AppleTV refuses to load any content because a tracking script fails, but for the most part, it's a successful scorched earth approach to living on the internet.

One of my favorite uses of an ab blocker is blocking distractions I can't stop myself. If you are using my wifi, you won't be able to scroll TikTok for hours on end—I did that a few times too many and now no one can. Here. At my house.

All of Meta's domains, blocked. Twitter? Blocked.

With my old ad blocker (PiHole), you could create a custom list of domains to block, which sounds great until you think about how many domains a single service uses. It's a lot to keep current. I like AdGuard because of its "Blocked Services" interface which lets you toggle a switch and keep, say, Amazon out of your network.

The one service in the list I didn't quite understand, though, was Mastodon. If Mastodon is federated, how can you block all of it?

So I looked at the source, which has no reference to Mastodon, but searching the entire organization, I found the tool that generates AdGuard's blocklists, and Mastodon's server list specifically. My original assumption was that AdGuard would block the obvious core Mastodon-branded servers (think mastodon.social, etc), but I could not have been more wrong: AdGuard queries the JoinMastodon.org server list, sorts by size, and returns the top 100 largest instances, which are then blocked.

I don't believe this server list is part of the Mastodon API, but it existing seems pretty helpful. And a general round of round of applause for open-source software.

Now I'm off to block Mastodon so I can get some work done today.

Cabinet of Cursed CSS: The Double-Negative Selector

2023-02-22T05:55:00Z

Years ago, when I made my CMS take the jump from WYSIWYG to Markdown, I found myself in a bit of a situation.

I wanted to style lists in blog posts a certain way, but I also liked using single classes for my CSS. Markdown did not let me do that without marking up the list myself every time. Not only am I lazy, I do not memorize class names. I could make all lists on this site have the same styles and let classes override them, but that's extra code and if there's one thing I like more than single-class selectors, it's a clean view of style inheritance in dev tools. I could just scope an ul/ol selector with .blog-post and call it a day, but now we're talking about upending my ideal form of CSS.

In my own house? No, I don't think so.

I took this personally. And when I take things personally, I overthink. And when I overthink, I make complicated solutions of questionable value. And when I make complicated solutions of a questionable value, I share them here.

I had my constraints:

Style lists in a blog post
Do not require a scoping class
Do not create styles that need to be overridden by a class in other contexts

The first question was, how do I select specific elements without scoping or applying classes directly? What do those elements look like—how can I find a list element that doesn't have a style? To my knowledge, CSS does not provide a way to select an element that has not been selected previously, so we need a clue. For me, that clue is the absence of a class or an inline style:

ul:not([class]):not([style]),
ol:not([class]):not([style])

I call it the double-negative selector.

This checks all three requirements: lists in blog posts lack both class and style (with all due respect of course), so this will apply to them, it doesn't need a scoping class to do that, and there is nothing to override because any styles applied with this selector disappear entirely once a class or an inline style are applied.

It's 2023. We have new tools. We can do better.

:where(ol, ul):not(:where([class],[style]))

Using :where() removes the duplication for each type of list, love to keep things simple around here.

If we didn't change the attribute selectors, too, I'd be short-changing only myself.

Extending the use of :where() into the attribute selectors (:not(:where([class], [style]))) achieves the same result as using a list of selectors (:not([class], [style])), but "selectors inside :where() have specificity 0" (MDN), so the entire selector ends up with a specificity of 0.

The specificity isn't much use here because the styles will disappear in the presence of a class or inline style, but if I'm going to make things weird, I'm not leaving anything on the table.

Speaking of...

The cursed CSS

A few months ago, I wrote about using :has() to define columns for a list based on the length of its contents—one column for every twenty items until 60, then it's stuck at three. That works. Kinda. I'd much rather default to laying out a list into a column layout based on the available space.

Container queries rule:

:has(> :where(ol, ul):not(:where([class],[style])) :where(li:nth-child(12))) {
	container-type: inline-size;
}

:where(ol, ul):not(:where([class],[style])) {
	columns: var(--columnsCount, 1);
}

@container (min-width: 400px) {
	:where(ol, ul):not(:where([class],[style])) {
		--columnsCount: 2;
	}
}

@container (min-width: 600px) {
	:where(ol, ul):not(:where([class],[style])) {
		--columnsCount: 3;
	}
}

This uses :has() to select any direct ancestor of an assumed-to-be unstyled list that contains at least 12 li children, making it "a query container for dimensional queries on the inline axis of the container." (MDN. Throwing some arbitrary widths on there, the unstyled lists will have one column for every 200 pixels of its direct ancestor's width.

Worth pointing out that the :nth-child(12) psuedo-class is only used on the direct ancestor selector because if the container is not defined (container-type), the queries fail, and the double-negative defaults to a single column list thanks to the undefined custom property, --columnsCount.

Adding :has() into the equation does not add any specificity. The net-zero specificity comes in handy because you can use any ancestor and create a container to override the value of --columnsCount, and any selector will work without forcing it or creating an overly specific selector.

But where is the curse?

Look at the direct ancestor selector. Look at it:

:has(> :where(ol, ul):not(:where([class],[style])) :where(li:nth-child(12)))

Look at it and tell me anything makes sense anymore.

In a single line, using only type and pseudo-class selectors, without producing a bit of specificity, without needing to add anything but the HTML, I can select the parent of an element which contains at least 12 li children and which, to the best of my knowledge, has no previously applied styles.

This is a selector that should not be written. It is a threat to the church.

I have been mulling this over for a long time, reworking my answer as new modules land in browsers. Been a lot of fun. Now that we have container queries in all browsers, this cursed CSS is ready for production. You can see it in use in the list of constraints at the start of this post.

Unabashedly, this is a prime example of my "I want anyone who sees this to think, wow, he knows stuff" code. Plain overwrought. There is literally an easier solution, one most people can look at and say "Yes, I know what is going on." Instead, the longer you gaze at this selector, the longer it gazes back at you.

In certain circumstances, sure, it could be useful. Like I'm using it here, I think there could be a use for this in handling a CMS' opinionated output. But there are better solutions, something other people can work with and understand: a scoping selector .blog-post :where(ul,ol) would work just fine.

Just do that.

Or don't. I'm not the boss of you.

Use the double-negative selector everywhere.

Never think about the double-negative selector again.

Write a rebuttal.

Write your own cursed CSS.

Write a rebuttal that includes your own cursed CSS.

LOLDNS

2023-01-20T03:33:00Z

There is some lengthy backstory that brings us here, but believe me, it's boring. And also believe me when I tell you that I needed to set up some MX records on my old domain--vincefalconi.com--but when I went to add the domain in DigitalOcean, it told me the entry already existed. Three times I looked at my tiny list of two domains in my DNS panel, convinced I was overlooking the thing that plainly was not there.

Listen, you and I both know you know what I did. But you and I both know why we're here. So I'm going to keep writing and you're going to keep reading.

I opened the domain in a tab. Got a warning that the TLS cert was bad and assumed that was because it was somehow getting this site's cert by mistake. No. No no no.

The domain was redirecting to a fake landing page for a well-known software product and linking to what I assume was malware. Don't click weird links. And if you do only do it once. I'm not a role model.

I did a little dig-ging and saw the domain, which I still controlled, was pointing to a DigitalOcean resource I did not control.

See, we both know. Go on.

Midway through 2019, I moved this site from vincefalconi.com to this clever tattooed.dev domain we're meeting on today. At some point in late 2022, chasing the high of perfect Lighthouse scores, I moved my site to Netlify and thought "Oh, let me shutdown everything in DO, no need in running that server anymore, might as well clean up the DNS, too..."

So I deleted the DNS records. All of 'em.

I left vincefalconi.com pointing at DigitalOcean's nameservers, without anything in DigitalOcean configured to respond.

If you're unfamiliar with DNS, I suggest checking out Julia Evans' wonderful explainer zines and comics. Start with this one. For our story, here are three things about DNS I would like you to understand:

First, nameservers tell computers where a domain should route. If a domain is pointed at a nameserver, but the nameserver isn't configured to respond to requests for that domain, nothing happens until someone tells it what to do by way of DNS records. There's nuance, but that's the gist of it.

Second, generally speaking, when using a hosted DNS service like DigitalOcean's, your DNS records are not editable by others but they are lumped together with everyone else's records because their nameservers are not account-specific. Everyone uses ns1.digitalocean.com, etc; you do not get vinces-awesome-DO-account-ns1.digitalocean.com, etc.

Third, you can add records for any domain you want, even if you don't own it. Nothing happens unless someone points their domain at your nameserver, and DNS has no reason and no reliable method of ensuring the author of a record is in control of the domain it's routing.

Combine these three ideas and gasp with me, won't you?

Someone found my old domain was still pointed at DigitalOcean but returned no DNS records, so they added one for it and that's how you get malware. If you clicked the link. Which I didn't do. And neither did you. Because we are making good choices for ourselves.

DigitalOcean was great to work with to get control of the DNS records. I didn't think I'd hear back because my account is pennies by comparison, but they had it resolved same day. This is not sponcon.

Do you have a bunch of domains just sitting somewhere, not doing anything? It's probably a good idea to take a few minutes and make sure they aren't pointed somewhere you don't control. And if the domain is truly inactive, I don't see an issue with just removing the nameserver entries for it entirely, but our situations are not the same.

If you find that your domain's DNS records have been hijacked, my humble recommendation is to report it to whatever service is hosting the records and follow their guidance. I wasn't worried about breaking anything because vincefalconi.com was low traffic even before I stopped using it, so I changed the domain's settings in my registrar while I waited on DO to intervene. You may not have that luxury, so it's best to work with the people and the service closest to the records.

Weeknotes for watching cloudy skies

2023-01-08T06:00:00Z

Moved (nearly) all of my web presence back to DigitalOcean after bouncing around Netlify and AWS for a few months. Netlify was not bad, but something about its process never clicked for me, and AWS was, well, AWS. My humble site doesn't get much traffic, but the main thing that turned me off of AWS was the constant fear that if I didn't account for some variable, I could be on the hook for hundreds of dollars out of the blue. I took stock of what I had to build to resettle into DO and couldn't help but laugh. I thought it would be as easy as setting up a static site app in DO's App Platform, but everyone's friend, DNS, made that an issue. Sparing the details that I'll eventually put in their own post, my simple static site app with a storage Space also has a load balancer and a small droplet in the equation. Feels like a bit of complexity, but hey, it makes sense to me and it works.
I installed a weather monitor in my backyard. This started as a joke because I wanted to know how much rain we'd received in the middle of a gnarly storm. That joke turned into building a tool to scrape data from APIs from the National Weather Service and NOAA (coming soon to a blog post near you), which served as both a proof-of-concept and an official context for any measurements I might make on my own. The monitor's been up all weekend, and like a gift from the universe, we got a thunderstorm last night that let me see the lightning strike detection in action. I plan on using this for gardening, as if I need a practical excuse to do anything, but more importantly, this has been a satisfying learning process. Next up on the agenda? Wrangling the station's UDP broadcast, a protocol I've never worked with before.
I decided not to do an end-of-year post, but I did take a look at what I've done this last year. I wrote more on this site than I ever have, with half of those posts happening after deciding to exit Twitter. I didn't watch more movies than ever before, but I did finish more books. That feels great. It's hard to compare any of the books I finished because they're all so different, but I'd be lying if I said that my favorite wasn't Kiese Laymon's "Heavy," half because it is fantastic on its own and half because Laymon is from Jackson. Finished my first book of the new year today, Nikole Hannah-Jones' "The 1619 Project." What a powerful work.
To celebrate the end of the most recent city-wide boil water notice, I had breakfast at one of my favorite local spots with a friend yesterday. I've been outside plenty over the last few years, but leaning back into my chair on that patio, it felt like the first time I've been able to actually see a blue sky in a long time. There were a few clouds, but that blue was undeniable. Here's to hoping more of that happens this year.

Using CloudFront to host your Mastodon handle on your own domain

2022-11-19T03:51:00Z

The plan was to host my own private instance, maybe invite some Twitter mutuals who want out. Ran into enough issues with setting up the server that I just bailed and signed up elsewhere.

I still want to be able to tell someone to look me up using my own domain, not the instance's domain—another way to own my URL somewhat. Maarten Balliauw's blog post explains how to do just that:

In other words, if you want to be discovered on Mastodon using your own domain, you can do so by copying the contents of https://<your mastodon server>/.well-known/webfinger?resource=acct:<your account>@<your mastodon server> to https://<your domain>/.well-known/webfinger.

One caveat: this approach works much like a catch-all e-mail address. @anything@yourdomain.com will match, unless you add a bit more scripting to only show a result for resources you want to be discoverable.

It's pretty easy to just copy-paste the webfinger file from your host to your website, but the note about it working the same as a catch-all email address bothered me. I didn't like the idea of any handle on this domain pointing to my Mastodon profile. Too easy troll material.

I host this site in S3 behind CloudFront, so I decided to add a CloudFront function that uses the same query string as Mastodon's webfinger endpoint. This lets me return the correct account for the handle, or return a 404 if no account is found. The key here is publish the function, and use it on the path /.well-known/webfinger in your CloudFront distribution's Behaviors tab.

Real nice how this works. This fediverse business is pretty neat.

Some thoughts at the end of the timeline

2022-11-18T04:30:00Z

I signed up for Twitter in February 2007—its first year—after reading about the app throughout the last fall semester before I left college. I don't think I qualified as an Early Adopter since I wasn't on at launch, but I've seen the site's journey from the original slime-saturated Twttr logo to the Muskian dumpster fire today.

Like others in the bird app cohort, I'm collecting my thoughts about what's happening. And it is not lost on me that, like so many others, I'm actively doing that thought-collecting off of the platform itself.

I remembered something.
There's no telling when it's all going to blow up.
Mastodon, maybe, but probably not.
I'm getting back into the indie web.

Building go boom

One summer when I was a kid, a cousin took my brother and me down the street to watch an old steel mill get imploded. Were we watching a symbol of a dying industry getting wiped off of the map? I don't know, we were there to watch a building go boom. Using Twitter the last two weeks has this same energy: half of me is watching infrastructure collapse while the other half is laughing at the implosion.

The difference here is that this implosion, while every bit intentional, is not nearly as well planned. With a building, you have to worry about debris large and small and the area of effect as it were. There are defined processes for this sort of thing, after all. Meanwhile, Twitter is just a web site. What damage could be done?

Our prediction math has no power here

The Billionaire Baby's public plan was firing a majority of people on staff guarantees the decline of the platform. The loss of knowledge is too great, whether you become a grindhouse, you will crash.

I argue that there is no point in trying to call the time on the Last Major Outage. No amount of domain expertise can account for Elon Musk's erratic decision-making. Working for a person with no plan but a lot of pressure means you cannot meet their expectations or anticipate their demands.

~~But also, six months. I think the sun will rise on May 1, 2023, and Twitter will be gone.~~ As I was finishing this up, news broke that, after Musk presented a "work longer hours for same pay, mandatory in-person work, and you cannot make fun of me" ultimatum to 3,000 employees, 75% of them declined the offer. Baby we are in endgame! The World Cup is here, and the remaining engineers will be ground into pulp to keep the site running through the outages the games bring. Outlook is not great past that.

Mastodon

I'm on Mastodon. It feels like trying out a new coffee shop or bar, components are familiar but the overall space is foreign. The app feels a lot like Twitter circa 2008-2010, but the experience itself is not that. I like the federated design, it feels like the old web. So we'll see how it goes.

Twitter’s significance is not about revenue or advertising platforms or new features. It is about communities that create ideas. The real Twitter lives in the practices of people who can migrate at any time. User migration and social fragmentation are the real present threat to Twitter’s cultural dominance.

Tressie McMillan Cottom

Black Twitter Is Not a Place. It’s a Practice.

I think Tressie nails the secret behind Twitter, and its existential threat.

Despite my appreciation for its philosophy and my respect for its implementation, Mastodon is not part of that existential threat. I am happy to be wrong, but I doubt I'll ever know that joy. There's too much overhead before you even begin to sign up. Before even signing up, new users are met with friction both from the concept of federation and the burden of choosing a server. Choosing a username is hard enough.

But more than that, Mastodon lacks the established communities of Twitter. Does it have its own? Sure. Are some communities migrating to its fediverse? Also sure. Do either of these things prove me wrong? 🙃

First, there is a baseline of exhaustion from the social web. That is true of all the platforms, but I think there is something special about Twitter users: we don't give up. We stay on the app, no matter what. We know it's bad for us. We know this, we know this, we know this, and we stay. On the other hand, Mastodon is a lot. And the more people who find out it's a lot, the more people talk about how Mastodon is a lot.

Without a base of casual users to consume their content, you find the second group who won't migrate: Twitter power users. If they don't have a built-in audience, I don't think they have a reason to move. This group includes the influencers and social media strategists warning about pouring resources into establishing a Mastodon presence until they know if their audience is moving, too. Makes sense.

There is an overlap between the first and second groups: the Twitter power user who is going to move to an existing platform, they just haven't decided which, but who is at a level of tired that precludes them from signing up for something new. This is our third group. This is the jaded Twitter power user. They may have hundreds or they may have hundreds of thousands of followers. Twitter has worn them down, but their other platforms are lighter, more fun. We are Twitter, we change you.

We break you.

The jaded Twitter power user isn't going to pick up Mastodon, not because it's a lot, but because it's ultimately unnecessary. They will migrate by path of least resistance. This group knows the power and the benefit of the social web, but they also understand the ephemeral nature of these platforms. Why invest in the new Peach, or the new Ello?

Without these three groups, Mastodon does not reach either the literal or the influential scale that Twitter achieved, even at its lowest. This is not a bad thing. Mastodon does not have to be a 1:1 replacement to be great in its own right.

The web is dead, long live the web

The social web isn't going to die when Twitter dies. Twitter is famously used by fewer people compared to its impact on news, on politics, on culture in general. Its collapse will have different kinds of effects, but it won't weaken the social industry over all. The users will move and shift, maybe a viable replacement pops up since there are a lot of subject matter experts on the market.

For me, this is it. I nuked both Facebook and Instagram. I'm read-only on TikTok and a general lurker on Reddit. Feels like I will be offline more—always a good thing—and when I'm online, I'll spend more time on the indie web. RSS feeds. Web mentions. Mastodon for a little town commons time. The DIY indie web fits in great with the hardware and networking tinkering I do for fun. This makes me hopeful the web can be a fun place again.

That's sustainable. That seems like a lot by comparison, but it's a level of attention-investment I can live with because, from where I sit, there's a built-in limit. The scale of the indie web is inherently limited to what you want vs what an algorithm chooses for you.

How to Find Something

2022-11-13T23:26:00Z

Have something you value
Misplace (1)
Look everywhere for (1)
Accept that (1) is gone
Look again, just to be sure
No, it's gone, it's time to move on
Allow time to pass
Tidy up a space
Uncover a hint of (1), but refuse to get your hopes up, there's no way it's right here, you looked here, it wasn't here, you're getting your hopes up, it's not here
Find (1)

Guerrilla Public Service Project: MPB Radio Schedule

2022-11-07T03:18:00Z

And mostly, when we see these things, we grumble on the inside and then do nothing. There are all sorts of reasons for our inertia. We don’t know how to fix it. It’s not ours to fix. We could get in trouble. You might notice these little design flaws for years, silently fuming, until one day.

David Weinberg

99 Percent Invisible: Guerrilla Public Service Redux

Before the pandemic, my consumption of public radio was NPR in the car on the way to the office. When that drive disappeared, NPR ended up playing an even bigger role in my routine--starting my day scrambling eggs and along to 1 A and winding down for the night with Fresh Air. The whole time, though, I was using my XM subscription, overlooking MPB, my local station. Truthfully, it wasn't until a friend said he was calling into Felder Rushing's Gestalt Gardener in the last couple of months that I even looked at their online schedule.

That schedule is my personal version of Richard Ankrom's 110 freeway sign highlighted in 99 Percent Invisible. Ankrom missed his turn on 110 in LA once because there was no sign indicating when to turn off. He was a trained sign painter, and after a few years of stewing on the inadequate signage, he decided to change add a turn-off indicator on his own. The MPB schedule never made me late for work, but that schedule has irked me every time I've used it:

It's unwieldy. No matter the viewport, I find it difficult to know the time for a show the farther right in the table the column is.
It shows me a lot of information I don't need. No matter what day it is, I see all of the programming for that week. So on Friday, I'm still seeing the past Monday's lineup.
It isn't even linked on the MPB Radio landing page, which tells me it's likely not anyone's worry. The landing page does have an embedded player on it that tells you what's on the air by default, but nothing about what's coming up. But that player is not why we're here today.
It not being linked on the landing page means I had to use Google to get to it, which meant I occasionally had to think about which search result was the right one. This is a serious inconvenience. And I will not take questions about why I didn't just bookmark the correct page.

It's just not helpful to me. I don't want to say it, but reader, I had my sign.

I wanted a version of this schedule that showed me up front what was currently on the air. Then what was coming up, then what was happening in the next days. With my hunch about the page being orphaned, and not wanting to be That Guy who demanded to know why something someone else made didn't meet my extremely specific requirements, I started thinking about what I would need to build my own.

First, I'd need a data source. There's no point in manually maintaining the station's schedule, because that could change or it could just be me verifying that, yep, it's the same this week again. Not a good use of my time. But looking at the table, there are buttons to move to older or upcoming schedules, too, which told me there was a feed of some kind somewhere. Taking the URL from the network tab in dev tools, I fiddled with the query string until I got a week's schedule in JSON. Had my data source.

Second, I'd need a way to render the JSON. You might think I'd go for a single-page application. But the relevant information changes every 30 minutes, that isn't a screaming use-case for something like Vue or even a web component at this point, in my opinion. It is, however, a definite use-case for my favorite static-site generator, Eleventy. Next!

If I'm not going to use client-side code to update the page, I'll need a way to republish the page on a schedule. This was where I fought my inner need for complexity, but do not think this is a hero's story. I looked at DigitalOcean Functions, CircleCI, and GitHub Actions. They all did more or less the same thing--read jobs written in YAML, take some inputs, run some code, push some output--but just not what I needed.

Primarily, I needed a job to run on a set schedule and push files to a static site. DO Functions are in beta, and has some limitations around S3-based hosting, so nope. CircleCI and GitHub Actions are wonderful, but their scheduling isn't what I want--Circle flat out says that a cron schedule of "every thirty minutes" will actually run twice an hour, and GitHub's documentation claims to hold to the cron schedule in your workflow, but it too cannot guarantee an exact run time. And this totally makes sense, everyone probably defaults to wanting their jobs run on the hour which expands their workload and would grind their hardware to a halt.

This left me exactly where I said I didn't want to be, staring a man named Jenkins in the face. I was reluctant to self-host Jenkins because in my heart I knew there'd be some catch, some config setting I couldn't get right, but no. I used Portainer's one-click installer, setup some DNS, and it just worked. And better than that, I was able to negotiate with its GUI to get my scheduled build happening on the half hour¹.

With the build tool in place, I wrote a little deployment script or three, and my guerrilla public service project lives: What's on MPB Radio.

The thing about guerrilla public service, as 99PI talks about, is that it's often met with resistance from Actual Public Service people. In the case of Ankrom's sign, there were serious public safety concerns, but with my little web page, I'm not misdirecting people or potentially dropping large pieces of metal on to passing cars.

Just makin' stuff to make daily life a little better, hopefully.

I :has() an idea about lists

2022-09-21T20:09:00Z

While I was rewriting this site's CSS, I wanted to find something that could benefit from the new :has() pseudo-class, without inventing a need for it.

Friend, that something is lists.

I love lists. Ordered, unordered, definition, I don't care, you have a set of things, you need a list. One thing that's bothered me about lists--specifically of the un/ordered variety, is that they can become pretty long and scroll-y.

And with :has(), we can wrangle those lengthy lists pretty easily.

.smarter-list {
  columns: var(--listColumns);
}

.smarter-list:has(:nth-child(n+21)) {
  --listColumns: 2;
}

.smarter-list:has(:nth-child(n+41)) {
  --listColumns: 3;
}

What's going on here? First, any .smarter-list should use columns for its layout. Great, that's reasonable, but how many? By default, none, as --listColumns is undefined without a default, and the browser moves on with its life. But if the .smarter-list has twenty-one child elements, it should use a two-column layout. Why twenty-one? Because I arbitrarily chose twenty as my per-column limit, so the presence of a twenty-first child covers children 21-40. And for more than forty? Double the limit, add one, and boom, three columns.

Here's a CodePen if that's helpful.

I think this pattern is helpful because it keeps the number of classes in my markup to a minimum, and it doesn't require processing in a template to determine which classes to apply based on how many items are in a given list. For this site specifically, I'd have to either do a RegEx test on the raw Markdown in my posts, or do a similar test on the compiled HTML. Put simply, it's overhead I don't want to deal with.

Now, :has() does not have universal support yet, so what's a front-end maker like yourself supposed to do about that? CSS Grid can do the same thing, but with slightly more complex selectors.

.smarter-list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-flow: column;
}

.smarter-list :nth-child(n+1) ~ * {
  grid-column: 1;
}

.smarter-list :nth-child(n+20) ~ * {
  grid-column: 2;
}

.smarter-list :nth-child(n+40) ~ * {
  grid-column: 3;
}

This works much the same way as the :has() method, except that the column assignment is happening "manually" on the sibling elements of the twentieth and fortieth .smarter-list children. This boils down to the difference between CSS Grid and CSS Columns--along with Floats and Flexbox, a selection of layout tools in our kits, equal in their value and beauty.

Here's another CodePen in these trying times.

For me and my strong opinions tightly held, I prefer to use single-class selectors to keep specificity low, and by my math, both methods here result in the same specificity (20), but using :has() also lets me keep nesting out of my selectors.

My ideal CSS selector is a single class, with psuedo-classes/elements added as necessary. I like to avoid nesting in general, because I like to keep my specificity as low as possible. By my math, both .smarter-lists methods result in the same specificity (20). I think I prefer the :has() method as it lets me live my unnested fantasy, and ultimately require less code. But also? C'mon, it's the new and shiny!

Hex the Moon

2022-09-16T04:12:00Z

The favicon on this humble site has been broken for a while now. This site is work in progress at all times, so I've let it linger. But looking at it tonight, I saw I'd mistaken actual words for a chain icon. "Undefined." Now, who am I to turn away from some debugging--but that's not why we're here.[1] It's been so long since I wrote this script, I'd forgotten how the thing works. So, join me in the righteous act of documentation and the thankless task of controlling the moon, won't you?

I'd made the landscape on this early in 2021, and by fall, I decided it would be fun to change the phase of the moon on the fly. Enter SunCalc, handy library to get the phase of the moon, among other things, based on the date:

const now = new Date();
const moon = sunCalc.getMoonIllumination(now);

Using SunCalc's phase-to-words chart, I needed a set of phases, which consisted of a limit or range of phase percentages, and a string that describes the phase:

const phases = [
	{ limit: 0, state: 'new' },
	{ limit: [
		0.000000000000001,
		0.249999999999999,
	], state: 'waxing-crescent' },
	{ limit: 0.25, state: 'first-quarter' },
	{ limit: [
		0.250000000000001,
		0.499999999999999,
	 ], state: 'waxing-gibbous' },
	{ limit: 0.5, state: 'full-moon' },
	{ limit: [
		0.500000000000001,
		0.749999999999999,
	 ], state: 'waning-gibbous' },
	{ limit: 0.75, state: 'last-quarter' },
	{ limit: [
		0.750000000000001,
		0.999999999999999,
	 ], state: 'waning-crescent' },
];

Then I walk through those phases, asking if today's moon looks familiar. If it does, we have found the state of the moon.

phases.forEach(phase => {
	if ('object' === typeof phase.limit) {
		if (moon.phase >= phase.limit[0] && moon.phase <= phase.limit[1]) {
			moon.state = phase.state;
		}
	} else if ('number' === typeof phase.limit) {
		if (moon.phase === phase.limit) {
			moon.state = phase.state;
		}
	}
});

Here we are. We know the state of the moon. The time has come to quietly change it both in the fav icon and the landscape on the bottom of the page.

For the fav icon, we have to create an SVG data URI that contains the emoji for the moon, then drop it into the link[rel="icon"]

const moon = new Moon();
const svgMoonPhaseMask = document.getElementById(`phase-mask--${moon.state}`);
const favIcon = document.querySelector('link[rel="icon"]');
const moonEmoji = {
	'new': '🌑',
	'waxing-crescent': '🌒',
	'first-quarter': '🌓',
	'waxing-gibbous': '🌔',
	'full': '🌕',
	'waning-gibbous': '🌖',
	'last-quarter': '🌗',
	'waning-crescent': '🌘',
};
const favIconData = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 transform="rotate(45 50 50)">${moonEmoji[moon.state]}</text></svg>`;

svgMoonPhaseMask.classList.add(`phase--active`);
favIcon.href = favIconData;

The CSS handles the presentation. The landscape will always show a full moon by default. In fact, if the moon's phase is equal to 1, the script makes no change to the landscape DOM. Otherwise, it finds its corresponding g#phase mask--... and adds the phase--active class to bring the mask's opacity up.

The shapes are rough estimates, they fit the style of the landscape that way. I'm pretty pleased with how the moon has turned out, from drawing it by hand to a little lunar calendar.

Things I've Said While Researching My Family Tree

2022-09-12T05:00:00Z

"Hey! That's my grandmother! Why do you have my grandmother?!"

"Oh, that's my great-grandfather, thank y'all for doing the work for me."

"Hey Siri, play 'God Save the Tsar.'"

"Grandpap, NO!"

"Ooh, yeah, ok, it's the Civil War, she could have been a widow."

"...GRANDPAP WHAT DID YOU DO?!"

"This is too many names. I need to lie down."

Missing Details

2022-05-12T23:00:00Z

When I started writing some JavaScript around the toggle event for a details element, I noticed the event was firing on page load, even when summary element hadn't been clicked or the open attribute had been changed. I thought I made a mistake and spent a bit of time debugging what could be doing that. Wrote some example code, tested it in different browsers and OSes, and the result was the same--the event fired at page load, no errors, no warnings.

Naturally, this took me to one of my favorite places, THE HTML SPECIFICATION, specifically the section on how browsers should handle changes to the open attribute:

Whenever the open attribute is added to or removed from a details element, the user agent must queue an element task [that ends with the user agent firing] an event named toggle at the details element.

Yeah, that makes total sense. But what about page load? It's not mentioned in the spec, at all, from what I can tell.

This took me to GitHub, and let me tell you: if you're searching GitHub issues for the details element, you will get way more noise than signal in your results. Turns out the word "details" occurs in a lot of discussions. Who would've thought?

At this point, I started to write this post (from a very different, more despair-ridden perspective) but it was late on a Friday, and I'm glad I gave up to do something else because today I learned that I was not imagining things! I'm not the first person to notice that the spec does not mention this behavior:

That doesn't say what happens when the parser sets the attribute

YEAH! It doesn't!

[taps fingers on desk]

So, like, why though? That's the part I'm still missing, and the conversation I can't find. And I'm not sure I understand the reasoning behind toggle firing when the author's intent was for the element to be open, thus nothing was actually toggled. My best guess is that, because the element is a disclosure element, and the content of the element is hidden by default, so adding open changes the default state of the element.

Meanwhile, a text input can have a prefilled value, a radio or checkbox can have the checked attribute, an option can have a selected attribute, and none of these will fire the change event at page load, even though each of those element's assumed default state is to be blank, unchecked, or unselected respectively.

I would love to learn more about the decision here, because in my humblest of opinions, the parser firing the toggle event for any details[open] element feels like a fairly big assumption on how we use the element that contradicts how other elements work. Moreover, while looking through spec issues, I saw that some want to have toggle fire on other elements. So will this behavior carry over? And if so, why?

Joshua Tree 2021

2021-12-28T05:46:00Z

If memory serves, my phone lit up one night in October with a new message, "We're going to Palm Springs. Meet us." and then I landed in the desert on Thanksgiving night, waiting on Casey and Hayes so we could head to Joshua Tree. I don't recall much happening in between.

As if an elephant didn't just make its grand entrance into the room, the last few years have been a bit much. I say "years," but that doesn't begin to do this time justice, does it? Everything has been on hold and uncertain and—something no one seems comfortable saying, so I'll step up—just plain unprecedented, and somehow despite pressing our pause button, it's inexplicably two years later? I'm not a mathematician, but how.

If I may tangent here, having recently revived my interest in space—a natural response to sheltering in place—it's frustrating not to be able to call the pandemic a "black hole." The last two years certainly feel as massive but time slows down near a collapsed star, it doesn't speed up. On top of everything else, we don't even get the satisfaction of a familiar metaphor. The nerve of it all.

I suppose that metaphor is a lost cause, not just due to our current understanding of physics, but also considering that reconnecting with friends after a decade apart is half reminiscing and half bringing up to speed, time bending as we go. Somewhere along that curve, I came out rested and revived, but still disconnected from the me I kept trying to find, before the weight of grief multiplied. I'll take that as a blessing because it means I can't do a cliche and say that I went to the desert with my friends and found myself, living my 90s coming-of-age movie fantasy.

That didn't happen.

I think the point is that I came home more present, more accepting that there isn't an old me to revive.

And I had a blast with my friends, but those memories are not for this.

If we want to continue to ham-fist this black hole metaphor and, hey, I do, should you find yourself in a personal singularity and you aren't moving through time as you'd like, turn yourself into Hawking radiation and escape the event horizon and return to normal speed. None of this is how it works. It's fine. Everything is fine.

I didn't have a camera that could capture the stars I saw, but we hiked a few trails in Joshua Tree National Park and I still don't believe that place is real but I have "proof" "allegedly."

Unupdated and Unbothered

2020-12-01T21:10:00Z

I pulled my RCA Lyra out of my safe with a hunch.

"At the very least," I thought, "the memory card should still work."

After plugging the Compact Flash card into my reader, Windows chimed to let me know the device was recognized and the drive was ready.

There they were, the last seven MP3s I put on the player ages ago—June 14, 2004, according to the last-modified dates:

"Better Than This" by Jenn Hartmann
"Can't Take My Eyes Off of You" by Lauryn Hill
"Frontin'" by Pharrell
"God of Wine" by Third Eye Blind
"How's It Going to Be" by Third Eye Blind
"I Admit (The Boob Song)" by Jenn Hartmann
"Losing a Whole Year" by Third Eye Blind

I expected to cringe when I opened the drive, but no. Nothing embarrassing. Hell, I still listen to all of those songs today.

Staring at the player, I thought there was no way, it's 20 years old, it can't work. But after putting two fresh batteries in it, the LCD display flashed the Windows Media Player logo before showing the available tracks.

I grabbed a spare aux cord from one of my box o' cables and connected it to my temperamental Bluetooth speaker, pressed play, and there was Pharrell letting me know he that he didn't want to sound full of himself or rude.

The buttons still work, too, though the screen's backlight seems to have given up, and the volume dial insists on lowering no matter which direction I pushed.

But it worked.

It didn't tell me that the device was disabled because RCA retired the product.

It didn't lock up because AWS US-East-1 was down.

It woke up and played the songs on the card.

Media attributes and you(r network requests)

2020-04-07T23:00:00Z

While surveying my Twitter timeline this morning, wondering what fresh horrors awaited me, this blog post about FOUT and dark themes in Gatsby/Next sites. Neither Gatsby nor Next are parts of any of my stacks at the moment, but Daniel's reasoning is pretty solid.

I've been thinking about dark themes lately—still need to make one for this here site—and Daniel's post sent me down that rabbit hole again.

One of my personal hurdles is keeping my CSS as minimal as possible ¹, and including unnecessary dark theme-specific CSS (or light-themed, depending on your perspective; we do not theme-shame here) always struck me as bloat. Sure, bloat that makes for a better user experience, but bloat nevertheless.

My first thought to solve this was putting splitting the theme-specific CSS into a separate file, and slapping a media attribute on it.

EXAMPLE CODE, GO!

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tinkering with media attributes, y'all</title>
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)" />
<p>hi there</p>

default.css

:root {
	--body-bg-color: white;
	--body-text-color: black;
}

body {
	background: var(--body-bg-color);
	color: var(--body-text-color);
}

dark.css

:root {
	--body-bg-color: black;
	--body-text-color: white;
}

If your OS is set to use light themes, you'll see black text on a white background, and if your OS is set to use dark themes, you'll see white text on a black background.

Sometimes I forget that the media attribute accepts any valid media query, and it operates like @media block rules in your CSS. But that's what it does. It's pretty neat.

Now, the assumption I made here is that placing dark.css in a separate file could be a performance gain because, for example, the browser would see (prefers-color-scheme: dark) and not request the file if the visitor's OS were set to use light themes.

That assumption was and is very, very wrong.

I opened the network tab in dev tools and saw that in Firefox, Chrome, Edge, and even IE, dark.css was requested regardless of the OS settings. Just to make sure I wasn't missing some typo, I changed media to print and got the same results, even though the styles weren't applied to the document.

I could've just accepted that as The Way and moved on, but reader, you are here for a blog post and that would not be very fun. So, LET'S GO TO THE SPEC! Specifically, HTML 5.2, section 4.2, with my own add emphasis.

If the link is a hyperlink then the media attribute is purely advisory, and describes for which media the document in question was designed.

However, if the link is an external resource link, then the media attribute is prescriptive. The user agent must apply the external resource when the media attribute's value matches the environment and the other relevant conditions apply, and must not apply it otherwise.

The default, if the media attribute is omitted, is "all", meaning that by default links apply to all media.

Note: The external resource might have further restrictions defined within that limit its applicability. For example, a CSS style sheet might have some @media blocks. This specification does not override such further restrictions or requirements.

HTML 5.2: 4.2.4.1 Processing the media attribute

That second paragraph contains the answer. The browser must apply the styles in that resource when the media query matches the environment, and the thing we have to remember is that the environment can change at any time, for any number of reasons.

In my example code, dark.css is only applied if (prefers-color-scheme: dark) evaluates to true, but you can change your OS settings at any time, and the document styles should update accordingly (and in my opinion, with little to no effort on the part of you, the visitor).

In the case of, say, setting the value of media to print, the browser doesn't know when (or if) you're going to print that page, so it needs to download it just in case.²

If we set media to (min-width: 500px), the viewport may or may not be 500px wide when the page is loaded, or it may scale up or down after the fact, so the browser needs to be able to apply the styles when appropriate.

I'll keep this list of scenarios at three for brevity (there's a lot of possible media query situations) and because three is an aesthetically please number for me. We all win.

The point is that the browser downloads the resource even if media doesn't match the environment because it could match at some point. In other words, using media is not a performance win. Womp womp.

A little more about that `media` attribute

Let's look back at the note included in section 4.2.4.1 of the spec: "The external resource might have further restrictions defined within that limit its applicability. For example, a CSS style sheet might have some @media blocks. This specification does not override such further restrictions or requirements."

So the process goes:

The browser downloads the resource regardless of whether media matches
Those styles are applied according to the outcome of media
But any media queries found inside that resource are also evaluated and applied accordingly, regardless of the media attribute.

Pretty straight forward if you ask me—but no one did, so of course this isn't how it works.

The way step 3 actually happens is that the subsequent media queries in the linked resource are effectively nested within the value defined in media (and remember, its default value is all so if it isn't explicitly defined, all of your linked media queries are then nested within an implied @media all rule).

For example, if you set media to (min-width: 500px) and included a (min-width: 600px) media query, the styles defined in the latter would be applied because both conditions were met.

However, if you set media to (width: 500px) and included a (min-width: 600px) media query, the latter would never be applied because the viewport could not be both 500 pixels and 600 pixels wide simultaneously.

Ok, so what are the takeaways?

media doesn't prevent network requests
Media queries in a linked stylesheet are nested within the condition in media (with a default of all)
It's ok to put your theme-specific CSS in with the rest of your CSS and work to keep it all streamlined

Unsolicited MCU Power Rankings: Phases 1-3

2020-02-18T16:30:00Z

Captain America: The Winter Soldier
Thor: Ragnarok
Avengers: Endgame
Black Panther
Captain Marvel
Spider-Man: Homecoming
The Avengers
Avengers: Infinity War
Spider-Man: Far From Home
Avengers: Age of Ultron
Iron Man 2
Ant-Man
Guardians of the Galaxy
Captain America: Civil War
Guardians of the Galaxy Vol. 2
Thor: The Dark World
Ant-Man and the Wasp
Iron Man
Captain America: The First Avenger
Doctor Strange
Thor
Iron Man 3
The Incredible Hulk

Ok fine. I'll defend a couple of things.

First, it's clear I am not a huge fan of origin stories. I've already accepted that the characters are not bound by the rules of reality, I don't require a detailed origin story for every. single. character. This is also why Black Panther, Captain Marvel, and Spider-Man: Homecoming are ranked so highly— they spent more time building characters than they did showing the step-by-step process of how each hero became "enhanced."

Second, Thor: The Dark World is in the middle-third, not the bottom-third, for one very real reason: this movie let Loki finish moving from fallen hero to failed villain to genuine trickster.

And because I love thinking about things in terms of D&D alignments, Loki transitioned from Lawful Good to Chaotic Evil to Chaotic Neutral. THIS IS DEPTH, PEOPLE.

Third, "omg how can you rank [MOVIE] so low?!" Because that's how lists work.

A Year's Worth of Movies

2020-01-01T21:30:00Z

At the end of 2018, I realized I'd watched 21 movies over the course of my two-week holiday staycation. My love of movies is a well-known thing but this count genuinely surprised me, and like any reasonable person, I decided to keep track of how many movies I watched in the upcoming year.

For science.

12 Monkeys
1922
A Dark Song
A Quiet Place
Ad Astra
Alita: Battle Angel
The Apostle
The Autopsy of Jane Doe
Avengers: Endgame
Await Further Instructions
The Bad Batch
The Black Godfather
Booksmart
Captain Marvel
The Crimes of Grindelwald
Doctor Sleep
Doubt
Drive
Eli
The Favourite
The Gate
Godzilla: City on the Edge of Battle
Godzilla: Planet Eater
Good Boys
Gosford Park
Grass is Greener
Hannibal Burress: Comedy Camisado
I Trapped the Devil
The Informant!
The Interview
Into the Dark: Down
Into the Dark: Pure
IT: Chapter 2
John Wick^[1]
John Wick: Chapter 2^[1]
John Wick: Chapter 3 – Parabellum
Joker
The Killing of a Sacred Deer
Knives Out
The Laundromat
Locke
Malevolent
Michelle Wolf: Joke Show
Midsommar
The Monster
The Muppet Christmas Carol
Only God Forgives
The Pact
The Pelican Brief
The Perfect Bid
Pet Sematary (1989)
Pet Sematary (2019)
The Ritual
The Running Man
Scary Stories to Tell in the Dark
Spider-Man: Far From Home
Star Wars: The Rise of Skywalker
Superbad
The Terminator
They Look Like People
To Wong Foo, Thanks for Everything, Julie Newmar
The Two Popes
Us
Velvet Buzzsaw
The Void
We Have Always Lived in the Castle
Wig
The Woman in Black
XX

...Whew.

That's 69 movies. Total run-time for all of them is 7464 minutes. 124.4 hours. 5.18 days.

Near the end of December, I really thought I could push through and make it to 100 for the year, but alas, I had some level of sense left in my head. Still, 69 movies for the year is a pretty respectable achievement. Some might even say it's... nice.

Some of the movies were great, some were suspicious. I wish I had the audacity to write a review of each one, but rather I in fact do have the mercy not to do that to you. Instead, I've chosen my favorites that I think you—yes, you—should definitely watch.

The Autopsy of Jane Doe

I heard about The Autopsy of Jane Doe by way of @slimyswampghost on Twitter: "A classically spooky mystery / horror story told through a single location, with some icky body horror. I guarantee you that after watching, the next time you hear a bell, you'll shudder."^[2]

If it hadn't been called out to me ahead of time, I never would've noticed that the entire 86-minute movie takes place in a single, solitary location. That's how lost I got in the "WHAT IS HAPPENING" moments. I didn't even try to figure out who Jane Doe was, and I didn't care, because WHAT.

Any movie that can make me stop trying to figure things out myself is a winner.

This movie also brought a happy accident with it, for me: a few weeks later, I saw that the director, André Øvredal, was also directing Scary Stories to Tell in the Dark, which then blew my expectations for it through the roof. (Spoiler: I wasn't disappointed.)

Doctor Sleep

I was really disappointed in IT: Chapter 2 for a lot of the same reasons other people claimed: too long, not scary, blah blah blah. So my expectations for Doctor Sleep were really low. So low that I didn't really even know much about it beforehand.

Truthfully, I skew toward hyperbole more than I'd like to admit, but this is exactly how it went down: when the movie ended, I stayed in my theater seat, next to my friend, dumbfounded by how good it was. We turned toward one another and said "WOW" in unison.

The movie's runtime of 2.5 hours had me nervous, but there wasn't a single wasted moment. The effects were smooth and believable, and more than anything else, intentionally jarring. I think it was successfully scary because the story's progression depended on "but--but HOW?" anxiety, if that makes sense. And instead of building that suspense and doing nothing with it, I thought things were resolved just right.

Good Boys

My gold standard for laughing at a movie is Mean Girls, when I was nearly asked to leave the theater because I couldn't stop laughing after Regina George was hit by the school bus.

Friends, this movie didn't just surpass that standard. It took the standard, crumpled it into a ball, tossed it into the trash, and set the trash on fire.^[3]

John Wick: Chapter 3 – Parabellum

If you thought I wouldn't include a John Wick movie in my favorites, this must be your first time meeting me.

Chapter 3 is here because it's just plain good, but also because I'm in love with the franchise's world-building. Nearly every character has a very real backstory, but the main story doesn't take a detour in order to explain each one. We're given enough information to know how much something matters, but we are still in the main story the entire time.

I will go to the grave screaming this: JOHN WICK IS HOW YOU DO ORIGIN STORIES IN MOVIES. Period.

The Ritual

A friend of mine watched The Ritual on my recommendation, and came back to me with "I will never listen to your suggestions ever again."

We're still friends, because I do not keep friends based on their bad opinions.

The Ritual is fantastic.

It uses but doesn't depend on jump scares. And I appreciate that it doesn't reveal the monster early. You spend most of the movie wondering what the hell is happening to the main characters, but you get mixed clues. Is it a monster? Is it a witch? Is it Jason Voorhees but German?

What you get is one of the most well designed monsters I've seen in a while.

Us

After Get Out, Jordan Peele has to work to make me not love his work. His approach to storytelling just clicks with me.

And now, whenever I hear "I Got 5 on It," all I can think about is that climactic fight scene. For him to just roll up in 2019 with a movie that replaces any and every memory associated with a song I've loved since I was a kid... how dare he.

I was impressed as hell (but not surprised) by how well Lupita Nyong'o drew distinctions between Adelaide and Red. Red's ticks and mannerisms were just so well developed.

Us is also one of those movies where I can't choose my favorite character because every character is my favorite character.

Honorable Mentions

With one exception^[4], I think any and all of the movies on this list are worth watching. I watched some this year that were so bad, I refused to finish them, so they didn't make the list.

The label "honorable mentions" is such an understatement. These movies are really, really good, I just had to put some limits on myself here: A Dark Song, Grass is Greener, Knives Out, Midsommar, They Look Like People, The Void.

The most wonderful time of the year: Advent of Code

2019-12-01T06:00:00Z

For the third year, I'm participating in this year's Advent of Code:

Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like. People use them as a speed contest, interview prep, company training, university coursework, practice problems, or to challenge each other.

Advent of Code

I'm posting my answers on GitHub, but I may try my hand at live-ish blogging about with updates on this post.

My goals this year are simple:

Forget the leaderboard. Each puzzle is released at midnight Eastern, so 11pm my time. AoC is for fun, but not the kind of fun that moves me to sacrifice sleep.
Complete day 8. I've either gotten stuck by the puzzle or overwhelmed with life/work by day 7. The latter doesn't seem like a factor this year (fingers crossed), and I hope forgetting the leaderboard helps with the former. :)
Experiment. Last year, I started using new data structures I don't use on a daily basis, and I found out how helpful sets and maps can be. On top of that, I am the world's worst when it comes to testing code, so I'm using Jest to get better about it.

Day 1

Personally, day 1's puzzles weren't too difficult, but that was definitely welcome, since I needed to setup Jest and write tests for the first time ever ¹.

I found Jest's API really easy to pick up, and I'm sure I'll find more "Oh, so that's what a test should do?" moments with it as I go along.

Day 2

I really enjoyed this day's puzzle. I had two head-scratchers though.

First, the wording of part 2 tripped me up pretty badly. It took me a long time to understand what it was asking me to do, and I kept looking at the numbers, thinking that there was a typo or maybe I'd received the wrong puzzle input somehow. Nope, just looking at the problem the wrong way.

Second, while trying to sort out the first head-scratcher, I thought I was in the Upside Down because some variables were changing without any clear reason. Specifically, when I thought I made a copy of an array, suddenly the original array was changing in sync with the copy.

It took me way too long to realize it was because I wasn't making deep copies: using a mere = to make a copy of an array only points that variable at the array you're attempting to copy. So, declaring const copy = array, then setting copy[1] = 'pants', array[1] will also return 'pants'.

If you want to copy an array (or an object), use the spread syntax.

Day 3

Ha. Haha. Oh boy. Remember when I started this, and I tempted the fates by saying that life didn't look like it was going to become overwhelming? I was very, very wrong.

I solved day 3 while traveling earlier this month, and didn't take any notes. From the comments I left myself in my code, I had no problem with part one, but it seems my answers in part two were off by two digits. I decided this was an off-by-two error (???), and normally I'd go back and figure out what went wrong, but I got the correct answer because my first guess was too low, and my second guess was too high, and the difference between the guesses was 2, so, uh, I'm not going to rework it. Because I don't have to.

Day 4

I start solving day 4 while I was still on the road, and had to put it away once I got home because life ~~got in the way~~ took priority. I picked it back up today, and got through part two after looking at how others approached it. I knew I should've been using regex and indexOf/lastIndexOf but I just couldn't see how the logic would work best.

At some point around day 3, I realized, for the first time since starting to play this game in 2017, that you do not have to solve each day in sequential order. I assumed that if I wanted to do day 4, the site wouldn't let me unless I completed days 1-3 first. Had I bothered to even try clicking other days in the calendar, I would've seen that the days were only time-locked.

So now I am jumping around, avoiding the IntCode puzzles for as long as I can.

Day 8

This is probably my favorite puzzle out of all of the AoC puzzles I've ever attempted. When I saw that we were playing with pixels, I started working with the intention of producing an actual image in the end. Turned out, ASCII art was just fine:

More than anything else, I'm really liking Jest, and I think I'm improving with not just writing tests but why I'm writing tests.

Eleventy and Craft

2019-10-15T22:00:00Z

Earlier this summer, I switched this site from Jekyll to Eleventy. Jekyll was fine, but I'm not a Ruby developer, so when I ran into issues or wanted to extend functionality a little bit, I was stuck. Not that big of a deal, because I didn't need that much extra functionality, but then I ran into build errors. Suddenly Ruby, or Jekyll, or Bundler, or something was behind or ahead by a couple versions, and I couldn't get anything to work anymore. Not only could I not add functionality, now I couldn't manage my site at all.

"BUT VINCE," you might be saying, "THIS IS A GREAT OPPORTUNITY TO LEARN RUBY. EMBRACE IT."

Learn Ruby? In THIS economy?!

Instead, I looked into this Eleventy SSG (static site generator) I'd heard everyone talking about. A few hours later, I was up and running. Surely, this would help encourage me to write more, like I'd promised myself so many times before.

A few months pass, and nothing happens.

It took me that long to pinpoint my issues:

I wanted deployment to be automagical, but I didn't want to deal with deploying from a repo. Hell, the thought alone of dealing with webhooks for this little ole site gives me hives.
I enjoy using Markdown, but writing blog posts in a dev environment, then pushing them up to a repo, then logging into my server and doing a build there was such a hassle, I avoided publishing anything I'd managed to finish writing.
I wanted to keep my site repo open, but writing blog posts over time in an open repo makes me really anxious.

Everything I considered kept telling me I need to separate code from content—a radical idea, I know. So now, this site is generated by Eleventy using Craft CMS, and it's (mostly) found on GitHub. (And this is the first blog post I've published using this method. NEAT.)

I did this by separating the build process into three pieces:

The JSON API
Eleventy's configuration and templates
A "smarter" build process

The JSON API

Craft's Element API plugin makes it easy to define some endpoints, tell it what content to include, and even do a little finessing of things before it is sent back to my Eleventy build script.

Since every site is special and unique, I won't get into my endpoints' specifics, but assuming you installed Craft and the Elements API plugin, and created a channel-type section named "Blog" with some fields named summary and blogPost, your elements-api.php config file would look something like this:

use craft\elements\Entry;
use craft\helpers\UrlHelper;

return [
  'endpoints' => [
    'entries.json' => function () {
      return [
        'elementType' => Entry::class,
        'resourceKey' => 'entries',
        'paginate' => false,
        'criteria' => [
          'section' => 'blog',
          'orderBy' => 'postDate asc'
        ],
        'transformer' => function(Entry $entry) {
          return [
            'layout' => 'blog-post',
            'title' => $entry->title,
            'id' => $entry->id,
            'date' => $entry->postDate->format('Y-m-d'),
            'published_at' => $entry->postDate->format(\DateTime::ATOM),
            'permalink' => $entry->uri.'/',
            'url' => $entry->uri.'/',
            'description' => $entry->summary,
            'post' => $entry->blogPost,
          ];
        }
      ];
    }
  ]
];

If you were to visit example.com/entries.json, you'd receive something like this:

{
  "entries": [
    {
      "layout": "blog-post",
      "title": "An exciting blog post",
      "id": "10019",
      "date": "2019-09-09",
      "published_at": "2019-09-09T10:58:00-07:00",
      "permalink": "blog/an-exciting-blog-post",
      "url": "blog/an-exciting-blog-post",
      "description": "This is a blog post on my new site.",
      "post": "Infographic infrastructure business plan stock metrics iteration iPad client equity influencer value proposition startup traction termsheet. Holy grail paradigm shift bootstrapping interaction design. Product management non-disclosure agreement gen-z startup innovator stock focus leverage. Stealth buzz iPad seed round virality ramen.\n\nPivot product management ownership investor marketing launch party mass market incubator early adopters analytics buzz first mover advantage infrastructure interaction design. Creative focus innovator partner network client pitch business plan. Angel investor innovator network effects return on investment infographic. Early adopters A/B testing analytics equity agile development buyer research & development supply chain partner network growth hacking.\n\nIncubator seed round A/B testing mass market market bootstrapping partnership influencer branding vesting period series A financing social media backing. Assets lean startup leverage mass market direct mailing network effects. Beta responsive web design partnership paradigm shift ramen virality accelerator business-to-consumer ecosystem mass market launch party. Bandwidth incubator first mover advantage business-to-consumer marketing long tail pitch product management freemium channels."
    },
    ...
  ]
}

In addition to the Elements API plugin, Craft released version 3.3, with support for a headless mode and built-in GraphQL API, no plugin needed. I was nearly finished with this process when they released v3.3, and since any GraphQL API was a bit overpowered for my purposes, I decided not to backtrack and redo things using these new built-in features.

You do you, though. I believe in you and all of your wildest dreams.

Eleventy's configuration and templates

If you're interested in Eleventy's general configuration, I refer you to its wonderful documentation. There's a lot in there, but it's well organized, and pretty accessible to all JavaScript skill levels.

I need Eleventy to consume and build pages from this JSON API, so I decided to use fetch (because it's the tool I'm most familiar with, but Node has several options for making HTTP requests; follow your heart on this one):

eleventyConfig.addCollection('blogPosts', async function(collection) {
    collection = await fetch(process.env.BLOG_ENDPOINT).then(resp => {
      if (resp.ok) return resp.json();
      throw new Error('network error');
    }).then(resp => {
      return resp.entries;
    }).catch(err => console.log(err));
});

You may have noticed that there is a second, seemingly unnecessary .then() method in the chain. I did that as a shortcut because, by default, the Elements API returns a JSON object with two root properties, data and meta, the latter containing pagination data, which is of no use to me here.

What to do now that Eleventy is retrieving the JSON? Make it usable. Building on the above code:

eleventyConfig.addCollection('blogPosts', async function(collection) {
	collection = await fetch(process.env.BLOG_ENDPOINT).then(resp => {
		if (resp.ok) return resp.json();
		throw new Error('network error');
	}).then(resp => {
		return resp.entries;
	}).catch(err => console.log(err));

	collection.map(post => {
		post.published_at = new Date(post.published_at);
		post.parsed = md(post.post);

		return post;
	});

	return collection;
});

At this point, I iterate over every entry returned by the API, converting each entry's published_at value to a proper JavaScript Date() object, and also converting the post's Markdown here, rather than in a template.

Hooray, now Eleventy has a collection named "blogPosts" that it can work with as if it were a set of Markdown files in its src folder. In my setup, I have a template named blog-posts.html with the following front-matter:

---
pagination:
  data: collections.blogPosts
  size: 1
  alias: post
  addAllPagesToCollections: true
permalink: '{{ post.url }}'
layout: base
---

Again, I'll defer to Eleventy's documentaion on pagination for specifics, but this front-matter is telling Eleventy to use the collection we added from the API (collections.blogPosts) and treat it as if the data were coming from files in src, regardless of what templating engine you choose.

A "smarter" build process

Here is where I got hung up for a while. My goal was automating the Eleventy build, but I also didn't want to run Eleventy if I didn't need to. Out of the box, Eleventy doesn't provide a way to conditionally build—and really, why would it? I knew I could detect changes in content simply by hashing the API response, and running the build step if there had been a change, so I set out to write a cron job to handle this.

Because that makes sense, right?

Sure... and then it didn't work. Things were executed, but the errors piled up, mostly the "THIS VARIABLE IS UNDEFINED" variety. So I wrote some more code to account for how cron works with Node².

But you know what's fun about researching "Node" and "cron?" You don't find a ton of information about running Node scripts via cron, instead you get a lot of information about node-cron, a Node package that allows you to schedule tasks in a Node app using the same syntax as cron (more or less). I tossed this information to the side because I didn't want something like cron, I wanted to run a Node script via Cron, dammit. Give me THAT knowledge, plz, google.

Dear reader, I should've taken the hint.

So here's my new and improved, node-cron-powered scheduled-build.js:

require("dotenv").config();
const cron = require('node-cron');
const shell = require('shelljs');
const fs = require('fs');
const { DateTime } = require("luxon");
const fetch = require('node-fetch');
const hash = require('object-hash');
const buildLock = (fs.existsSync('build.lock') ? fs.readFileSync('build.lock', 'utf8') : null);
const buildTime = DateTime.local().toLocaleString(DateTime.DATETIME_MED);
let results = null;
let entriesHash = null;

cron.schedule('*/15 * * * *', async () => {
	// fetch the entries (in JSON) from the CMS for comparison purposes
	// i send the CMS a header that contains the build environment, because i use it
	// to determine whether to include drafts/pending entries or leave them out
	// this is really helpful when i'm using certain markup for the first time and need
	// to work through the styling (ex: tables, figures, etc)
	const apiResponse = await fetch(process.env.BUILD_BLOG_ENDPOINT, {
		'headers': {
			'x-build-environment': process.env.BUILD_ENVIRONMENT
		}
	}).then(resp => {
		if (resp.ok) return resp.json();
		throw Error('network error');
	}).catch(err => {
		return `${err.type.toUpperCase()} ERROR (#${err.errno}: ${err.code}): ${err.message}`;
	});

	if (typeof apiResponse === 'object') {
		// if fetch was successful, i'll have a JSON object, so do the build stuff

		// this happens
		entriesHash = hash(apiResponse);

		if (entriesHash !== buildLock) {
			await shell.exec(`npm run-script build`);

			// update/write the build lock
			await fs.writeFileSync('build.lock', entriesHash);

			results = `build script ran`;
		} else {
			results = 'no build, lock matched response';
		}
	} else {
		// the fetch was not successful
		results = apiResponse;
	}

	// output the events of the quarter-hour
	console.group(`build for ${buildTime}`)
		console.log(`build lock: ${buildLock}`);
		console.log(`entries hash: ${entriesHash}`)
		console.group('Settings');
			if (process.getuid) console.log(`Current uid: ${process.getuid()}`);
			// manually adding/removing dotenv variables from this output was annoying as hell
			Object.keys(process.env).forEach(key => {
				if (key.substr(0,6) === 'BUILD_') console.log(`${key}: ${process.env[key]}`);
			});
		console.groupEnd();
		console.group('Result');
			console.log(results);
		console.groupEnd();
	console.groupEnd();
	console.log('========================================================================');
});

This works and after scratching my head for a while, it's a relief. But scheduling tasks via node-cron only works if the script itself is running.

Hello, PM2. PM2 keeps things running without my involvement, AND it solves the issue of logging build results. HOORAY.

That's it. That's the post.

I'm pretty happy with how things turned out, but there are a couple of gotchas:

The scheduled build process runs both Eleventy and Gulp, but only if Eleventy's content has changed. If I make some CSS or JavaScript changes, I still need to run the build script locally and upload the new CSS files manually. It would be nice to have the script check for changes relevant only to Gulp, too.
The process does not have any support for deleting posts. If I take down a post, Eleventy sees that something has changed, but there isn't anything in place to tell it "hey, build the site, but also delete these things, too." Not a deal-breaker, but also not critical to me right now.
Closely related to (2), I noticed that Craft hid a couple of entries from the API response (they weren't visible in the control panel, either!) that only returned after I ran an update on the CMS. Don't know what happened, but if I fix gotcha #2 and this happens again, it means content disappears from the site without me knowing it. This is part of the reason I added as much logging as I did.

Fathom: Less Creepy Analytics

2019-05-12T18:00:00Z

Last May, I deactivated my Facebook account with no fanfare (friendfare?). A few weeks ago, I logged back in for the first time since and started the Delete Account process, and in a few days, my profile will be gone for good.^[1]

On top of the ever-growing list of reasons why Facebook is a house of horrors, I didn't feel like I had a healthy relationship with the site. I spent too much time on it, and I rarely felt good after I used the site, I usually felt angry or hopeless. When I did feel good, it was because of the dopamine rush from Likes or comments. I spent less actual time with friends because I felt like I was already spending time with them all day on Facebook.

At the bottom of it all, I was giving my time, and my information, to a shit-show of an advertising platform.

In the months that followed, I began basically recommitting myself to protecting my privacy, and finding ways to do that for others.

While implementing Content Security Policy (CSP) on this here Web Site™, I decided to just get rid of Google Analytics all together. I didn't care about the stats, since I barely invested any time into this site. Moreover, much like Dave, Google's data collection practices creeped me out.

But now that I am putting time and energy back into this site, my need to know if anyone is out there has come back, but thankfully it's found a new tool: Fathom Analytics.

Here's what makes me happy about Fathom:

It was really easy to set up. As I'm already a DigitalOcean customer, having Fathom available as 1-click-install option for a new droplet made this a breeze to set up. I did try to install it on an existing droplet, and I decided that the one 502 Bad Gateway hiccup I ran into made it worth looking at spinning up an extra droplet for $5/month. I still don't know why I was getting that 502 error, but there was a bonus to going the "new droplet" route: it motivated me to remove some old droplets I didn't need anymore, which means I'm now saving money. But, of course, YMMV on that.
It plays well with my Content Security Policy. If a third-party resource even hints at requiring a significant change to my CSP, it's immediately on the chopping block. I'm proud of my Mozilla Observatory score and what that score means for anyone who visits this site, and I assure you there aren't many things, if any, that would make me scale that back.
It is essentials-only. Page views, unique visitors, bounce rate, time on site. I'd be a liar if I said I wasn't curious about visitors' technology stats, like browser and maybe OS, but I don't need that information.

So, if you're reading this, know that I know that someone read it, and that's about all I know.

And all I want to know.