Published by

“Kill your personas”

Counterpoint to yesterday’s post: “Kill your personas: How persona spectrums champion real user needs” by Margaret Price at Microsoft.

A persona spectrum is not a fake person. It’s an articulation of a specific human motivation and the ways it’s shared across multiple groups. It shows how that motivation can change depending on context. Sometimes, a trait can be permanent, like someone who has been blind since birth. A person recovering from eye surgery might temporarily have limited or no vision. Another person might face this barrier in certain environments, like when dealing with screen glare out in the sun. How would your product adapt to this range of people and circumstances with similar needs?

I can get behind that!

Related, check out Microsoft’s Inclusive Design Toolkit. (Though I reeeeeally wish that were a webpage…)

Via Doug Belshaw’s “Temporarily Abled” article on Thought Shrapnel.

Published by

GDS’s Accessibility Personas

If you’re a designer or engineer and have never dug in to accessibility personas or cognitive walkthroughs before, I’d recommend checking out GDS’s accessibility persona homepages and their accompanying blog post about how they use persona profiles to test accessibility. As of right now, their profiles include the following personas:

  • Claudia – a sight impaired screen magnifier user
  • Ashleigh – a severely sight impaired screenreader user
  • Ron – an older user with multiple conditions
  • Chris – a user with rheumatoid arthritis
  • Pawel – an autistic user
  • Simone – a dyslexic user
  • Saleem – a profoundly deaf user

It’s no substitute for testing with real users, but it’s a big step in the right direction if it’s not already a part of your design and engineering process.

Published by

A long-overdue work update

It’s been a wild few months professionally.

Earlier this year, I was asked to be the Engineering Manager at SuperHi and started in that role in May. That same month, I gave a talk at Parsons on the invitation of Eric Li and Michael Fehrenbach for their Typography and Interaction students in the MPS CD program. Maybe a month or two ago, SuperHi CEO and friend Rik Lomas and I were interviewed by Aja Singer for the recently-released first episode of her new podcast “Interview Stack” which offers a “deep dive on the engineering hiring process”. She’s a great interviewer, I’d keep an eye on her work.

And then over two thirds of us were laid off from SuperHi yesterday!

It’s unfortunate but understandable given the circumstances, it’s a tough world out there for startups right now. I really wish nothing but the best for the remaining SuperHi team and hope they’re able to reach the lofty goals that we set for ourselves. It’s a great platform and community with so much potential. I recommend checking out the courses and workshops that we recently released including one on generative art, one about Squarespace, and another on integrating AI on the web. There should be a lot more to come soon, SuperHi’s newsletter is the best way to get updates if you’re interested.

We achieved so much together. Personally, I’m really proud to have improved a lot of the accessibility practices, project management, QA, knowledge transfer processes, and documentation at SuperHi, even though some of that isn’t publicly visible just yet. I’m proud of the code I wrote and the languages and frameworks that I learned while there, going from working largely with CSS, HTML, JS, and PHP before to working heavily with TypeScript, Next.js, and React across multiple interconnected projects in a monorepo. I’m also really proud of the quality of our collaboration both across SuperHi in general and particularly within the Engineering team specifically. We shared extremely trusting working relationships which isn’t easy, especially when working remotely.

It’s sad to not be a part of that anymore, and it’s tough when you’ve been working towards a goal so hard for so long and then suddenly the next morning is a blank page.

But I am looking forward to pottering a little. A little blog gardening, improving performance on this site (when did it get so effing slow?! the cobbler’s children have no shoes etc. etc.), maybe finally setting up the bookshelf site I always wanted to make. Will have to do a little bit of LinkedIn cleanup. ::makes gagging sound:: And I had the last week of summer scheduled off anyway so I’ll be spending that fully focused on B, probably wandering in and out of all the water features in every playground within a 5 mile radius.

If anyone has interesting opportunities to share, please give me a shout.

And please do share this with your friends. I think I’m looking for another software engineering role at a remote USA- or UK-based company, or in-person at a NYC-based company. But I’m going to think about it a little more and am aiming to post again soon with more specifics.

Of course I wasn’t the only one, there is a lot of other ex-SuperHi talent out in the world now too including top-notch designers, razor-sharp teachers, meticulous engineers, brilliant strategists, and community management geniuses. I’m not going to post names here just yet because I want to verify who would like what shared, but if you have any opportunities along those lines, send them my way and I’ll make sure they reach the right eyeballs.

Now, time to relax a little during our remaining few days visiting family in the UK. Below are the flowers that my mother in law picked from her garden for me after she heard the news. I wish Smell-O-Vision was a thing, because these are pretty fantastic.

I’ll be back in Brooklyn on Sunday. If you happen to be nearby in the coming weeks, let’s get a coffee or go for a stroll in Prospect Park or something.

Until soon x

A small bouquet of pink and purple sweet peas in a glass bottle on a white kitchen counter

Published by

How and why I stopped freelancing

A quick disclaimer: This is NOT an article about how to find a full-time job. There are a million posts about that online. And anyways, beyond the general advice1, I’m not sure how useful those articles usually are anyways. Every person’s path to a job is super different.

This is about the steps I took to make the transition from independent work to full-time employment as smooth as possible for my clients, my collaborators, my new employer, and most importantly myself. It’s also about the thought process behind that decision.

In many ways, this is all a long explanation of the feelings behind this earlier post.

It wasn’t without stress, but it worked out pretty well with a lot of prior planning and communication.

Wispy clouds against a blue sky

Before I go in to how, a little about why.

Read more

Published by

Fluid type sizes and spacing

I’ve been using a fluid type and spacing system on the most recent builds I’ve completed. Here’s why I use it, and how I approach it. I mainly use SCSS (a Sass syntax), but it’s also very do-able with plain CSS.

Screencast of Gort Scott’s homepage, resizing it in Chrome’s inspector

The example above demonstrates the result on gortscott.com, resizing the window from about 2300px down to about 640px and back again. The type and spacing across the page begins scaling down when the window is 2095px wide and stops shrinking at 1047px wide. At that point the text begins to reflow as the CSS Grid layout continues to shrink. Eventually at 703px wide the layout shifts, and again at 543px wide.

Read more

Published by

Leave a stone unturned

I think the best creative advice I ever got was from my tutor at CSM.

Don’t dot every I and cross every T, don’t tie up every loose end. Leave some questions unanswered. A piece of art, a movie, a song, a performance, they all tend to be more compelling when they leave you wondering.

I tended to be very goal-oriented in my visual art practice, with an idea of exactly what I wanted the final product to be. This usually left me with frustration when I couldn’t quite get it there, and a piece that was overworked and somehow boring, despite my efforts. When I spent a little more time just focusing on the process and letting go of the result, it was both more fun and far more interesting to look at in the end.

I don’t have much of an art practice at the moment, though sometimes I look at this website as one big, long-haul creative endeavor.

Published by

4+ month update

It’s been a little over four months since B arrived. These are some of my experiences or things I’ve learned so far, plucked at random.

I’d say that the books, conversations, and classes prepared me pretty decently in theory, but the physical and emotional reality is almost impossible to prepare for. Being a parent has been much more visceral than I expected.

A woman walking in to James Turrell’s “Three Gems”

Read more

Published by

CSS blend modes: beware the stacking context

I’m working on a site with a complex entanglement of blend modes, SVG backgrounds, gradient backgrounds, positioning, and transitions. I’ve run in to a bunch of issues with mix-blend-mode not working as expected, and it almost always has to do with an inappropriate stacking context.

For posterity, this StackOverflow answer is a really good run-down of CSS combos that create new stacking contexts.

Now to see what I can do about browsers rendering color profiles slightly differently… 💀

Edit: UGHHHHHH it’s different in different browsers. Check out this CodePen in Chrome and Firefox vs Safari. This is why we can’t have nice things.

Edit 2: See the answer to the cross-browser problem from the previous CodePen, via Gregory Cadars (view thread). So Safari is actually behaving correctly, but it’s still a stacking context issue.

To recap: I’m trying to display a “fixed” gradient background with content that scrolls over the top of it. Within this content, only the images have mix-blend-mode: overlay. In the original CodePen, I’m achieving this via a fixed position, 100% width + 100% height element with a linear gradient. This is within the same wrapper as the content.

My example is working in Chrome and Firefox. In Safari, it is effectively as if the blend mode hasn’t been applied. Though I’m not sure why the difference between browsers, it does make sense that a fixed position element would still create a new stacking context regardless of its parent.

In Gregory’s example, he’s removed the fixed position element with the gradient and instead applied the gradient background to the wrapper, as well as background-attachment: fixed via the background shorthand. This achieves the exact same effect, without stacking context issues.

The only thing that gives me pause is performance… I remember running in to some issues when I considered using background-attachment: fixed for Elizabeth Peyton’s Eternal Return. I can’t remember what it was exactly but it had to do with repainting on every scroll event (so, a lot!). I think that this article may give some context, but I’ll have to dig in to it further.

Related: See this CSS gradients resampling tool by Rutherford Craze for smoother gradients, shared by Gregory in the thread.

Twitter is a crappy place a lot of the time, but I love it for things like this.

Published by

Gemma’s site in AIGA Eye On Design

Read “There’s More Than One Way to Share Your Design Work: Four fresh takes on the portfolio” on AIGA Eye On Design.

They spoke to Carly Ayres, Prem Krishnamurthy, David Reinfurt, and Gemma Copeland about their approaches to an online portfolio / website. Gemma spoke a bit about how we designed and built her site together, it was a lot of fun. See her site gemmacope.land, or take a look at the GitHub repo. BIG thanks to Howard Melnyczuk for fixing a bug I totally missed. 🤦🏻‍♀️ 🙏