Published by

Thoughts on search, AI as a rubber duck, and this blog

I’ve been working on a little side project recently that has been in the backlog for ages. I finally have a moment to pull it together, and it’s helping me brush up on a few Next.js 13 features I haven’t had the chance to play with yet.

As part of that, I’m doing a lot of searching around best practices on this that and the other, particularly server side rendering. It’s the first time in a while that I’ve been pointedly trying to use the internet to teach myself something in-depth related to coding, as opposed to finding quick sporadic answers.

Read some rambling thoughts on search 🔍, AI as a rubber duck 🦆, digital gardens 🪴, and the future of this blog 🧠

Published by

Dave Rupert’s animation-timeline example

See Dave Rupert’s post on scroll shadows with animation-timeline. Browser support isn’t quite there yet so it’s more of a progressive enhancement, but this is a great use case example.

He wrote that off the back of Bramus’s scroll-driven animation exploration, and wow. So many of those behaviors would have been useful on past projects…

Published by

What to do if Command + R won’t reload your VSCode window

So CommandR hasn’t been reloading my VSCode window. But the “Reload window” command in the palette (ShiftCommandP to open palette) shows that it should work. Charles told me how to fix it!

To sort it out, click the cog icon next to the “Reload window” command in the palette to open the Keyboard Shortcuts settings for that command. Then under the “When” column, right-click isDevelopment and select “Change when expression”. Delete the contents, then press enter. There should now be a dash under “When” to indicate that it’s empty. Close the Keyboard Shortcuts file, then try reloading a window by typing CommandR and it should work.

Published by

“Good enough for now, and safe enough to try”

Good enough for now, and safe enough to try

Yesterday, Gemma gave the SuperHi community a great talk on her work with Common Knowledge, a not-for-profit worker cooperative of technologists, designers, researchers and facilitators. She mentioned sociocracy, a governance framework that Common Knowledge works with to keep running smoothly.

When faced with a decision that requires consensus, the group evaluates whether or not the proposal is “good enough for now and safe enough to try”.

This was a bit of a lightbulb moment for me. There are so many groups that I have been a part of that would have been liberated by this approach.

But not even that, my own brain would be freed up a bit by this approach. I sometimes get hung up on figuring out the best solution to something, when figuring out a good solution to something might cause significantly less stress and quicker results.

I suppose when you apply it to your own decisions, it’s similar to “perfect is the enemy of good”. But that’s more vague. I like that this phrase is more direct, something you can actually apply to the decision making process.

Published by

To read: 2015 essay from the lead of Twitter’s Engineering Effectiveness group

To read: “Let a 1,000 flowers bloom. Then rip 999 of them out by the roots.” by Peter Seibel

Peter Seibel was the lead of Twitter’s Engineering Effectiveness group. This 2015 essay is an extended version of a talk that he gave on the same subject. The TL;DR as he describes it: “as an industry we mostly don’t know how to do it and consequently massively under-invest in making our engineering orgs actually effective.” It’s a really interesting play-by-play of how the complexity and scale of Twitter as an app changed and grew over time.

Side note: With what’s going on at Twitter now, I’d bet my booty that the Engineering Effectiveness group is no longer of this world. Though perhaps that happened before Elon, who knows.

Shared by RS during one of our SuperHi Engineering chats.

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

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

An endless loop

Just finished the article “Ontological Design Has Become Influential In Design Academia – But What Is It?” by JP Hartnett for AIGA Eye on Design, via the Feminist Open Source Investigations Group chat.

This is somewhat related to the previous post, the “we are our experiences” concept. But much more formal than my ramblings, better philosophical underpinnings for sure!

I’d heard of ontological design but hadn’t really dug in to it. This article is a useful dive in.

In very few words (specifically professor of design theory Anne-Marie Willis’s words, not mine): “Design designs us”. In more words, from Hartnett’s article:

A human being cannot exist independently of its surrounding environment — it is not possible to be without being-in-the-world. Being, then, is always relational: with everything that surrounds us, including the full complexity of the completely designed worlds that we inhabit. This point is crucial for ontological design theorists: design doesn’t just perform certain functions — a car transports you from A to B, a poster displays information, etc. — the interrelated totality of designs construct the world through which humans are brought into being and come to be defined through. Human beings, in turn, design the world, which, in turn, designs them… and so on. The process is circular, like an endless loop.

And on the consequences of embracing ontological design in practice instead of relegating it to theory and academia:

One welcome outcome of an embrace of ontological design theory would be the death of the individualism that has plagued the design profession — “iconic” designs, individual designers, celebrated in isolation as they usually are in design publications — don’t make any sense in this context.

That would be welcome indeed.

I don’t quite see how it can happen unless there is a true revolution in the way we talk and think about design—more holistic and less about singular problems, more collective and less individual—but maybe circumstances are ripening for such a change.

Published by

Sass + Eleventy, remember to opt out of using .gitignore

I’m working on an Eleventy site at the moment, the first Eleventy site I’ve done that’s been complex enough CSS-wise to warrant using Sass. I’ve turned to Phil Hawksworth’s Sass + Eleventy technique for the job. It’s a great, simple way of using Sass with Eleventy with a little bit of preprocessing courtesy of Gulp.

Hit a wall at one point though, it was smooth sailing and then my CSS updates just stopped working.

Turns out I had added /_includes/main.css (the compiled styles) to my .gitignore file since I prefer not to commit compiled files, but I forgot that Eleventy uses the .gitignore file + the .eleventyignore file to decide what not to compile. So Eleventy was just ignoring it. 🤦🏻‍♀️

I did this .gitignore change as an end-of-day commit, tidying things up before closing my laptop. When I picked the project back up days later, it took me longer than I’d like to admit to figure out what was going on!

To sort it, I just had to opt out of using .gitignore by adding eleventyConfig.setUseGitIgnore(false); to the .eleventy.js config file, and then adding the necessary files listed in .gitignore to .eleventyignore. Then I re-ran gulp watch & npx eleventy --serve, and all was well.

Separate but related to static site generators: Check out Astro. Would be curious to see a detailed comparison of Eleventy vs Astro since Eleventy is currently top-of-the-list for me in terms of static site generators.