Category: Web Design

Setec Astronomy

I’ve played Connections like four times now, which of course you can understand means that I am ready to issue a wise verdict from the top of Game Design Mountain. The verdict is: this game’s interface and its incentives are at odds, which irritates me, but there are simple changes that could make it more fun and less frustrating without changing its difficulty.

I became aware of the game to begin with because part of the NYT Games team’s marketing strategy is working. Finishing a given day’s puzzle yields one of those little block patterns of color-square emoji, the ones that look like 🟩🟨🟦🟪 instead of 🟩🟨⬜️⬜️⬜️. It’s enough like Wordle to make one curious, but different enough to be distinguishable even if you have reduced color vision, and it takes good advantage of their ownership of Wordle’s IP and its most potent promotional idea. It’s also a big bet on the long-term appeal and viability of the game, because you only get so many uses of the shareable grid before it loses its brand value. But actually playing Connections has given me a new appreciation for the elegance of Wordle’s quality-of-life support, because Connections does not support life.

In one abstract rendering, both games could be reduced to “solve a puzzle in X educated guesses from a fixed domain of discourse.” Per Wyna Liu, the game’s editor and credited creator, the placement of the initial squares in its grid is deliberate, a choice designed to lead you down false paths before you sort out the right ones. The editors clearly enjoy coming up with grid items that fit more than one potential answer, and in my experience it’s easy to come up with multiple groups that are conceptually closer than the ones they chose (DOG and HEEL belong with JERK and SNAKE instead of FETCH and SIT? Really?).

That means that the actual game pitch is “solve for all four answers at once, and don’t get greedy by jumping to conclusions!” Which, fine, whatever, there’s nothing wrong with that in isolation. Liu herself, in the brief interview above, expresses support for the “pen and paper method” of working on solutions. Which is again fine, if we were talking about a game that the NYT printed on paper. But it’s not! It’s a web app! If the editor believes that the right approach is to sort out all four groups and check them through before submitting your answer, why doesn’t the user interface allow you to do so?

I’m not an interaction designer, but even I can come up with a simple solution here: make the tiles draggable, and allow the player to move them all into a solution grid before hitting submit. Instead, the only ways to move the tiles the developers have offered are a random shuffle button or a jump to a conclusion. The tiles shift themselves to the top available row when you make a successful guess, which is telling the player “go ahead and take your shot, I’ll reward you by reducing the complexity of the board if you do.” But that’s a contradiction of the editorial strategy laid out above. If you do fall for the temptation of the UI, your wrong guess might yield a cue like “one away!” that is of very limited utility, and that then vanishes, leaving only a record of your punishment. The effect is more like a taunt of “skill issue lol” than an encouragement. That’s reinforced by sharing-based marketing gimmick and the way many players use the pen-and-paper attack to solve the puzzle with no record of wrong guesses, so any mistakes at all come across as failure rather than tactical work.

This is what I mean about Wordle’s comparative elegance. Wordle gives you more guesses, more information per guess, and a persistent record of those guesses in both the solution rows and its keyboard. That means you can walk away from the game and retain your context when you come back to it later. Perfect solutions are possible only through a rare stroke of luck (or cheating), so if you’re competing against your in-laws on a group chat, it’s easy to evoke a sense of mingled competition and camaraderie. Even if sometimes everyone gets grumpy about HOMER or __GHT, there’s a real difference in the play experience between “ah, that was my fault” and “oh fuck off, you smug jerk/dog/heel/snake.”

A Walkable Internet

Sometimes I think that popular media’s fascination with counterintuitive propositions is a big contributor to what got us into this mess. I use the word “media” there to mean more than just major publications, but we’ll get to that later. Also, sometimes, I like to think up counterintuitive propositions myself, like software doesn’t mean “code,” it means “a system for consolidating control of the means of production.” Or maybe the Internet can be defined as “that which will promise you what you want.”

Lucy Bellwood presenting a slide with the text Photo by Stefan Shepherd from Lucy’s extraordinary September 2016 talk, which I think about at least every other day.

I don’t offer these takes with any intent to defend them. I just think they’re useful mental calisthenics, valuable as alternative modes of thought to the definitions that creep into common idiomatic use: things like the Internet can be defined as “the most active population of large social media platforms.” I certainly use that shorthand myself, often in a scornful tone, despite my own attempts to stretch the popular conception of the Internet around the deconglomerated approaches that people these days call “IndieWeb.” One of the writers I admire, and linked to back in March when talking about this stuff, is Derek Guy of Die, Workwear and Put This On. Sometimes I sneak onto Twitter to see his dorky fashion memes, and today I discovered this, one of his more popular tweets of late. It has, as of this writing, numbers underneath it that far exceed its author’s follower count.

This is a gentle proposition, almost to the point of being anodyne. Maybe you disagree with it. I happen to agree, myself, as someone who has spent a number of years enjoying such a lifestyle; I agree in particular that it is luxurious, which is to say a luxury. One way I define luxury is an ephemeral privilege not to be taken for granted. Many people are systematically deprived of the privilege of walkability by the way that capital and its frequent servant, municipal policy, prioritize car travel and inherited wealth to create housing insecurity and food deserts. To me, that understanding seems built into the way these two sentences are constructed.

Three days after it was posted, I can sit here and watch the retweet and quote numbers on the post tick upward every time I breathe. I don’t think that’s due to positive attention.

I’m not here to write about how Twitter Is Bad. Even Twitter, as a body, agrees that Twitter Is Bad. I’ve written variations on that theme for ten years as of next month, and I can’t declare myself piously abstemious from social media when I’m quoting social media posts in my post about social media. The interests of capital demand that Twitter makes its graph lines go up; the simplest mechanism to make them go up is to incentivize conflict; the capital circulates through organizations until the system’s design iterates toward conflict optimization. Primed for bickering, just as the man says. The story of social media is the story of how billionaires made other people figure out how they could extract money from the late-twentieth-century invention of the real-time flame war.

I just feel bad for Guy because I like his work and have a bit of a parasocial relationship with him: he is, more or less, the person who taught me how to enjoy shopping and wearing clothes. (I know many other people are subject to worse for less online, every day. I mean it when I say it’s Bad out there.) If not for Die, Workwear, I don’t think I would ever have chosen to take this series of self-portraits, a couple years back, wearing things I bought and liked just for myself.

Dress-Up

I posted those photos on Flickr, even though I have my own IndieWeb site where I can host as many photos as I want. Flickr is a social media platform. It’s a rarity, not in that it did not generate for its acquiring capitalists the graph numbers they wanted, but in that it was then left to molder in neglect instead of being defenestrated for its failure. I have strong disagreements about some recent choices by its current owners, whatever their best intentions. But at least it’s not Instagram. Flickr has, for many years, retained an interface bent toward the humane and curious, instead of capitulating to the wind-tunnel abrasion of those who value human life less than the ascendance of the line on the graph.

Another thing I posted on Flickr, back in 2018, was the set of photos I took with Kat on our trip to Budapest together. One of the places we visited was Szimpla Kert, a romkocsma or “ruin bar,” built almost twenty years ago in what was once the city’s Jewish quarter by people in its neighborhood who wanted to make something new out of something old. It was once a condemned shell of a building; now it’s a huge draw, with thousands of visitors on a given night, most of whom are tourists like us. Locals might disagree, but I did not find that its charm was diminished by the crowd. It was idiosyncratic, vibrant, complex, and unique. Hungary—like my country, and like the Internet—is a more worrisome place to live than it was a few years ago. But Szimpla seems to be thriving, in large part because it is knit tightly into its local community.

Szimpla Kert

“Szimpla Kert” translates to “simple garden.” I have a little experience with the allure of gardening, and also how much work a garden takes to maintain; I’m sure the people running Szimpla work very hard. But an interesting way of looking at a garden, to me, is a space for growth that you can only attempt to control.

In the middle of drafting this increasingly long post, Kat asked me if I wanted to take a walk up to her garden bed, which is part of a community plot a ways to the north of us. I was glad to agree. I helped water the tomatoes and the kale, and ate a sugar snap pea Kat grew herself right off its vine, and on the way back I picked up dinner from our favorite tiny takeout noodle place. It took over an hour to make the full loop and return home, and I was grateful for every step. An unhurried walk was exactly what my summer evening needed. I luxuriated in its languidness, because I could.

When you put something in a wind tunnel, you’re not doing so because you value the languid. I am far from the first person to say that maybe we could use a little more friction in the paths we take to interact with each other online. Friction can be hindering or even damaging, and certainly annoying; I’m not talking about the way we’ve somehow reinvented popup ads as newsletter bugboxes and notification requests. I just want to point out that friction is also how our feet (or assistive devices) interact with the ground. We can’t move ourselves forward without it.

It’s a privilege to have the skills, money, time and wherewithal to garden. You need all those kinds of privilege to run your own website, too. I think social media platforms sold us on the idea that they were making that privilege more equitable—that reducing friction was the same thing as increasing access. I don’t buy that anymore. I don’t want the path between my house and the noodle restaurant to be a conveyor belt or a water slide; I just want an urban design that means it’s not too far from me, with level pavement and curb cuts and some streets closed to cars on the way. I want a neighborhood that values its residents and itself.

This is why I’m as just interested in edifices like Szimpla Kert and Flickr as I am in the tildeverse and social CMS plugins and building the IndieWeb anew. Portland is the most walkable city I’ve lived in, and it ended up that way kind of by accident: the founders optimized for extra corner lots out of capitalist greed, but the emergent effect was a porous grid that leaves more space for walkers and wheelchairs and buses and bikes. The street finds its own uses for things, and people find their own uses for the street. Sometimes people close a street to traffic, at least for a little while. And sometimes people grow things there.

I don’t expect the Internet we know will ever stop pumping out accelerants for flame wars directed at people who just felt like saying something nice about a walk to the grocery store. That paradigm is working for the owners of the means of production, for now, though it’s also unsustainable in a frightening way. (I will never again look at a seething crowd, online or off, without thinking twice about the word “viral.”) But if someone who lives in Chicago can’t entirely ignore what suburban white people get up to in the Loop on St. Patrick’s Day, then one doesn’t have to go out of one’s way to join in, either.

I’m ready to move on from the Information Superhighway. I don’t even like regular superhighways. The Internet where I want to spend my time and attention is one that considers the pedestrian and unscaled, with well-knit links between the old and the new, with exploration and reclamation of disused spaces, and with affordances built to serve our digital neighbors. I’m willing to walk to get there.

A front-end developer and former colleague I admire once said, in a meeting, “I believe my first responsibility is to the network.” It was a striking statement, and one I have thought about often in the years since. That mode of thought has some solid reasoning behind it, including a finite drag-reduction plan I can support: winnowing redundant HTTP requests increases accessibility for people with limited bandwidth. But it’s also a useful mental calisthenic when applied to one’s own community, physical or digital. Each of us is a knot tying others together. The maintenance of those bonds is a job we can use machines to help with, but it is not a job I think we should cede to any platform whose interests are not our own.

The Internet will promise you what you want, and the Internet will not give it to you. Here I am, on the Internet, promising you that people wielding picnics have put a stop to superhighways before.

IncompletePhoto by Diego Jimenez; all rights reserved.

Fifteen years ago this summer, I was exercising a tremendous privilege by living and working in London, in the spare room of an apartment that belonged to friends I met online. They were part of a group that met regularly to walk between subway stations, tracing the tunnel route overground, which they called Tube Walks. There was no purpose to the trips except to get some fresh air, see some things one might not otherwise have seen, and post the photos one took on Flickr.

My five months south of the Thames were my first real experience of a walkable life. I grew up in suburbs, struggled without a car in Louisville, and then, for the first time, discovered a place where I could amble fifteen minutes to the little library, or the great big park, or the neighborhood market, which would sell me just enough groceries for a single dinner. Battersea is not a bourgeois neighborhood, but it’s rich in growth and in history. It changed what I wanted from my life.

London, like Budapest, like Chicago, is a city that has burned down before. People built it back up again, and they didn’t always improve things when they did. But it’s still there, still made up of neighborhoods, still full of old things and new things you could spend a lifetime discovering. And small things, too, growing out of the cracks, just to see how far they can get.

Not sure where this little guy thinks he's going

Daniel Burnham, who bears responsibility for much of the shape of post-fire Chicago, claimed inspiration from the city’s motto of Urbs in Horto: that is, City in a Garden. (Which I didn’t even know, myself, until Kat gently pointed it out to me while proofreading this post.) Burnham was also posthumously accorded the famous imperative to “make no little plans.” But I like little plans, defined as the plans I can see myself actually following.

I didn’t know where this post was going where I started it, and now it’s the longest thing I’ve ever published on this blog. If you read the whole thing, then please take a moment of your day and write me to tell me about a website that you make, or that you like, or that you want to exist. I’ll write back. More than ever, I want to reclaim my friendships from the machinery of media, and acknowledge directly the value that you give to my days.

iPhone icon gloss overlay in pure CSS

As part of a Not Very Secret Project, I’ve been poking around at how the iPhone picks and generates icons for sites that you bookmark to your home screen (I only learned about Apple touch icons earlier this afternoon). Apparently, unless you specify otherwise, it applies a glossy overlay to that icon when it gets clipped out.

A lot of people seem to hate that gloss, but there are some ways out there to replicate it, mostly using a PNG overlay. I thought it might be interesting to try and get the same effect using pure CSS (note that this probably won’t work if you’re reading this post via syndication; click through to the original to see it). I am indebted to Neven Mrgan’s PSD replication, which I used for comparison purposes.

So here’s a plain 57×57 touch icon:

And here it is with the gloss, which is put together with Webkit and Mozilla border-radius and CSS gradients:

It’s not perfect–browsers don’t let you specify blending modes for shadows and highlights, and the antialiasing on gradients is still a little wonky–but it works at least as well as an image overlay, and now I get to feel superior for doing it with code instead of sprites.

The CSS in question:

 #glossy-icon {
	width: 57px;
	height: 57px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	background-image: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700, 
		from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
		color-stop(10%, rgba(255,255,255,0.2)),
		color-stop(10.5%, rgba(140,140,140,0.2)),
		color-stop(13%, rgba(140,140,140,0)),
		color-stop(13.7%, rgba(255,255,255,0)),
		color-stop(17%, rgba(255,255,255,1))), url(http://www.xorph.com/images/ba-icon.png);
	background-image: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side, 
		rgba(255,255,255,1) 0%, 
		rgba(255,255,255,0.2) 72%, 
		rgba(140,140,140,0.3) 74.5%, 
		rgba(140,140,140,0) 85%,
		rgba(255,255,255,0) 95%,
		rgba(255,255,255,1) 160%), url(http://www.xorph.com/images/ba-icon.png);
}

I realized later I should have made them say “BAD” and “ASSSSSS”

LOL / BONEERRRRSSSS

This is my current setup at work–since starting there last October, I’ve gradually advanced from working solely on my battered white Macbook to a laptop-and-monitor setup, then to a Mac Mini-and-monitor when my laptop got stolen, and now at last to the glorious panopticon you see above. I’m trying the portrait screen for my email client, SQL client, terminal and (mostly) IDE, and so far I really like it. I got the idea from some interview about a high-ranking Google engineer’s setup that I can’t be bothered to find now. Ben (the boss) said he thinks it originated with Flight Simulator junkies.

You can just barely see my tiny, mighty computer and a box of rejected business cards peeking out from under the right monitor stand; on the left are various plastic utensils, half a bag of snack chips, and a ceramic dish Kara gave me for reheating leftovers in the work microwave. The latter contains the Magical Neverending Napkin Supply. I never request or grab napkins from lunch places anymore, I just take whatever they throw in the carryout bag and put the unused ones in there. At this rate, I will never exhaust it.

The headphones are the stupidly expensive ones I bought from a DJ supply shop down the street, where the DJ supplier looked at me askance when I explained that I would be using them for web development. Like all headphones, they still annoy me with trapped ear-heat and weight, but they provide good isolation and I can stand them a lot longer than anything I’d tried before. I would have paid the whole price just to have the padded cups that go around (as opposed to pressing directly on) my ears.

Uh, what else can you see in there? Venerable iPod sitting on the Mini waiting to be plugged in, sexy aluminum keyboard that likes to shock me if I scuff my feet too much, expensive Logitech mouse with the click-and-lock free-scrolling mouse wheel that is fun but not actually that much of a productivity enhancer. Don’t tell Ben, he paid for that too. The little gray wrist cushion doubles as a stress ball / fidget toy. The books in the right corner are copies of the Ruby Cookbook and Mastering Regular Expressions, both of which I will go to great lengths to avoid cracking open. The shadow on the left is my hat.

Google’s making their own browser! Golly! Neat! Another goddamn rendering engine for me to test my CSS in!

Whee.

(I’ll probably like it.)

Tech Tip!® Minute

Remember, dear reader and also future Brendan, an attribute that’s hyphenated in CSS is camelCapped in Javascript! So background-image becomes style.backgroundImage. For no real reason except psychotic, alias-hating adherence to meaningless language conventions.

While I’m at it, ROLLOVER HIGHLIGHT IMAGES ARE GODDAMN POINTLESS. Nobody cares about them except graphic designers who have never written a web page, and even they ignore them on every site but the ones they themselves mocked up.

(Yes, I know rollovers need not make use of Javascript. These two blurts are only sort of related.)

Punch line!

I don’t even LIKE jeans

Yesterday, for my job, I implemented some web-marketing stuff that included me actually typing out the following text, which... well, I don't want to reproduce it for fear of google, but I've rot13ed it below; click the button to read it.


Where was I entering this marketing text, you ask?

A MySpace page.

It's not like I was pretending I hadn't sold my soul long ago. I just hadn't realized it was going so cheap.

This is just so my grandmother doesn’t have to see the word “fuck” as soon as she opens my journal page. Wait! Fuck!

So I opened Facebook and saw this much of an ad on my screen:

Jennifer Aniston's face, over the text 'Help Save Her Life.'

And I was like, “What, does she need emergency reverse liposuction? I mean, obviously she DOES, but is that going to save her–oh.” Because by this point I had copied the image out and could see the first frame of the animated gif, to which it apparently never resets:

Little bald Madelyn is fighting CANCER.  ASS.

Hi! St. Jude? Call me. We need to talk about this concept called “above the fold.”

I’m a twit now. I have an extremely small justification for this, as follows.

Part of the Anacrusis FAQ says “I’ll get to long-form when I’m ready for it,” and I’m ready for it, so I’m writing long-form–specifically, the South book. I hate it when people announce on their blogs that they are Writing A Novel, with slight exception for that one thing in November. But the fact is that my only successful projects are done a) with at least the appearance of rigorous scheduling and b) in the public eye, so I’m going to start microposting my daily page count. With luck this will keep me from going back and polishing the first chapter over and over. Seriously, guys, the first chapter is really good.

The twi–ugh, microblog is now a sidebar on the main NFD page, and it’s got its own feed, of course.