Leslie Cohn-Wein's Blog

On the things that matter

2020-06-12T00:00:00Z

I found out at the beginning of the month that my high school boyfriend Matthew Driver died by suicide on May 22nd.

As teenagers, our relationship had grown out of our shared experiences of depression and self-harm. At an age when it’s not unusual to feel misunderstood, we found a deep connection to what felt like the darkest parts of each other.

But we also had fun.

He gave me the silliest nicknames, a few of which I’m not sure I’ll ever escape. We drove around in his SUV listening to Bright Eyes, sometimes “hiding” a friend in the trunk so we could sneak one more person off campus for lunch.

We shared queso at Taco Cabana and made tamales with his family and I ate the pancakes he made for me in his childhood kitchen.

I dragged him to the Homecoming dance; he even smiled in some of the pictures I took, which wasn't something he normally did. We watched “The Exorcist” and “Return of the Living Dead” more times than I can count.

We were both prolific on LiveJournal and commented on almost every entry the other posted. He helped me write my first line of CSS to customize the background of my journal.

He made handmade cards for me with stickers and silly drawings, and I made him a scrapbook for our one year anniversary. He stumbled across it a few years ago and sent me photos; it was simultaneously painful and funny to look at.

We emailed each other constantly, especially after he coerced me into switching from Netscape to Gmail for more storage space. When I search my inbox for his goofy old email address (rawrimazombie!), I can easily end up on page 350 “of many.”

We made each other mix CDs where 75% of the songs were Bright Eyes. “Something Vague” was our favorite; it was included on every single mix.

https://open.spotify.com/playlist/1GlwMfTOQzA0QtDGEbqMSi?si=qQ7v9rTQTbmSEOgvuTWsXg

https://open.spotify.com/track/7eUVluJU03fnTuCcNC8ITH?si=BwpZitrxSYazIvVP7ZH2rA

But now I'm confused.
Is this death really you?
Do these dreams have any meaning?
No. No, I think it's more like a ghost
That's been following us both.
Something vague that we're not seeing,
Something more like a feeling.

He gave me a ring. It didn't mean what you think it means, but it also meant everything. We experienced a lot of firsts together.

It didn’t end well, but that’s probably true of most high school relationships. As is typical, graduation became a natural ending and simultaneous new beginning.

Matthew reached back out to me in 2017 and it was like no time had passed; we started messaging back and forth every few months. I felt guilty that he was (still) mired in depression, trying to survive addiction and an abusive relationship.

Everyone has their challenges, but I was in a good place: I had gotten married in 2015, moved from NYC back home to Texas, and was busy with my first remote dev job. I was perpetually scared of getting dragged back beneath the depths of depression myself, so some days it was hard to talk to him.

If I’m being honest, I gave him a lot of tough love during those conversations. But he kept messaging me, and I was always there. We were still inextricably connected.

The past is a strong drug.

The last time we talked was a month before he died. He seemed to be doing well, at least based on what he told me: he was celebrating 30 days sober and finishing his first semester back at college.

(He was studying computer science, which he'd also taken in high school. I now realize Matthew's interest in CS helped spur mine; it's part of the reason I’m a software engineer. We talked a lot in those later years about what his coding career could look like.)

I had told him a few months earlier that Bright Eyes was putting out a new album following their nine year hiatus. Our final conversation started because he wanted to know if I’d heard their latest song.

I hadn't, so I listened to it. And then I sent him this sadly hopeful Matt Hires song, which reminded me a bit of early Conor Oberst from “Fevers and Mirrors.”

https://open.spotify.com/track/1AZ3kCJfnyJt5O3broFxAD?si=zMBDiyQXQ1y-bhm4saWWgA

The song is about death, but also about life being what you make it.

And oh my my, honey everybody dies
But you got, you got to see
That you can live your life walking in a straight line
But it's more than just A to B.
Maybe it'll find you lying peaceful under blankets
Or bleeding at the bottom of the stairs
Oh but it's not when or how you go
It's life and what you make it
It's the traveling, not the road that gets you there

It is the last song I will ever send him.

I felt silly and self-important for crying so much the week I found out Matthew died. It was the same week the world had started reeling from the news of George Floyd’s murder at the hands of the police (during a global pandemic, no less).

I tried to distract myself from the guilt I felt for having such a strong reaction to Matthew's death. Dying is a big deal to those who are left behind, but it felt like a very personal sidebar during a world uprising about systemic injustice, set against a backdrop of overflowing hopsitals and makeshift morgues.

Matthew’s death wouldn't change my day-to-day much, if at all. He wasn’t a fixture of my life anymore.

But he had been.

My friend Kate Kaput lost her high school boyfriend to suicide in 2005. She has written about Dave a lot since then, and her words have helped me get through the weeks:

To remember love lost, to honor a life lost, to reflect on the ways that someone's life & death changed your fundamental existence... that's not weird. That is very, very normal.

These words gave me permission to grieve.

These words helped me realize that it’s okay to talk about him, to write about him, to share that writing. I'm doing this because I need you to know he lived, and that he mattered.

To remember who he was at 15 and 16 and 17 and 18 and the impact his life (and now death) has had on mine, then and now.

Kate's words have also reminded me what actually matters at the end of the day. Or at the end of a life.

For me, right now, it’s about being open and honest about the impact of suicide. It's about asking for help when I need it, and moving past the shame of feeling so much or wanting to share it. It’s about remembering Matthew and finding ways I can support others who struggle with mental illness.

It's about challenging myself to engage in the fight against injustice that is so apparent in our world, even when I've been complicit in it, and even when it's hard. Especially when it's hard.

It’s also about allowing myself - forcing myself, even - to take the time and space to feel each painful feeling as it comes up. Because I have to. Because there isn't another choice.

When staring down the barrel of what feels like insurmountable anger and pain and despair, it all seems to come down to this: knowing (and trusting) that we are not alone. Even when it sure as hell feels like it.

https://open.spotify.com/track/2Z8nmDARYuDDfsIylkhZT2?si=cl0OmQCtTy63RU7xyqoX2A

Well, I guess that it's typical
To cling to memories you'll never get back again
And to sort through old photographs
Of a summer long ago
Or a friend that you used to know
And there below his frozen face
You wrote the name and that ancient date
And you can't believe that he's really gone
When all that's left is a fucking song
And I'm sorry about the phone call and waking you
I know that it is late
But thank you for talking, because I needed to
Some things just can't wait

Posted in memory of Matthew Glenn Driver
September 13, 1987 - May 22, 2020

https://open.spotify.com/track/2na2paKLoPieSDyIcfj29u?si=0l1v2yt7Qa6Za3jWzhdXGg

If you are struggling with thoughts of suicide, please reach out. In the U.S., help is available 24/7 by calling the National Suicide Prevention Lifeline at 1-800-273-8255.

Writing semantic HTML even when you don't know any better: progress vs meter

2020-09-13T00:00:00Z

There are something like 110 unique tags in HTML5. Not exactly the easiest list to memorize, am I right? (Even for me, and I'm the kind of person whose desktop wallpaper shows a periodic table of HTML5 elements.)

So, how can you figure out which semantic element to use when you don't even know what's available to you? Let's take a look at a real-world example.

Define the component requirements

The design team at Netlify recently passed off a new Figma component for implementation in React. Looks pretty straightforward to me!

I started by making a quick list of the requirements. The component should have:

the ability to act like a link if an href is passed
a status bar to indicate current usage, which looked a lot like the <progress> element to me
a numeric value and max limit
the ability to handle different units (such as money, file size, etc.)
styles that match the mockup, including hover and focus states

Ask: "Does my markup make sense in plain English?"

Knowing the requirements can help us translate the component into code.

Narrowing in on the link and status bar reqs, I wrote three lines of markup:

<a href="http://leslie.dev">
	<progress value="218" max="400">54%</progress>
</a>

54%

Why did I use <progress>? First, because I knew it existed, and second, because the default styles for <progress> look almost exactly like the design mockup I was given.

But when I write new HTML, I try to ask myself: "Does this markup make sense in plain English?" This is, after all, the essence of what the word semantic means: the "correct interpretation of the meaning of a word" (source: dictionary.com). In most cases, we should be able to "translate" our markup into an intelligible sentence.

So: "$218 used is progress toward a $400 budget."

Not quite right, huh? It would probably make more sense to call this "money usage," not "money progress."

Rewording markup in plain English can help make semantic discrepancies more obvious. Checking the MDN docs also provides some clarity:

The HTML <progress> element displays an indicator showing the completion progress of a task

We're definitely not showing the completion progress of a task here. Case closed! We shouldn't use <progress> for this component.

Follow the docs

So, what element should we use instead?

Lucky for us, MDN is great at giving hints. If we keep reading the docs about <progress>, we'll come across a note under the "Attributes" heading that mentions the related <meter> element:

The HTML <meter> element represents either a scalar value within a known range or a fractional value

To steal a catchphrase from former Netlify designer Rafa Conde: 🛎️ Ding!

We want to communicate that $218 was used in relation to a maximum budget of $400. This is the element we want!

Keep learning: `<meter>` in context

If it seems like we had to do a lot of work in order to make a one-word change in the final markup, you wouldn't be wrong.

<a href="http://leslie.dev">
	<meter value="218" max="400">$218/$400</meter>
</a>

$218/$400

So why put all this effort in?

Well, besides the obvious accessibility wins, using the proper semantic element can give us more functionality for free.

In this case, <meter> has some special attributes baked in that <progress> does not. Along with min and max, <meter> also supports low , high, and optimum. These attributes let us specify the bounds of the measured range, and we can also use them to hook into pseudo classes for custom styling.

This means we can control the color of our status bar based on the value!

So now we can style the bar to be green when it's in the lower bound, blue in the optimum or expected range, and yellow as we near the limit of our budget.

<a href="http://leslie.dev">
	<meter value="370" max="400" high="300" optimum="200">$370/$400</meter>
</a>

$370/$400

CSS Tricks offers more tips for styling the <meter> element.

If you're interested in how I styled this particular component to match the mockup, let me know on Twitter and maybe I'll draft a follow-up (spoiler: applying selective rounded corners to the different states of <meter> is a trip!).

TLDR: Semantics matter

When writing new markup:

Ask: "Does my markup make sense in plain English?" Rewording markup in plain English can help make semantic discrepancies more obvious.
Read the MDN docs to confirm your usage
Leverage baked-in functionality for free