The site uses cookies that you may not want. Continued use means acceptance. For more information see our privacy policy.

Mario, Psychology, and Design

Spoiler: sometimes a brick actually holds ten coins (if you can jump fast enough).

Super Mario Brothers makes use of something akin to a random reinforcement schedule in order to add to the fun of the game. It’s not a true random reinforcement, as the rewards are the same from game to game, baked in to the levels. But to the new player, these choices feel like a random reward.

The first level, known as one-dash-one (1-1, some pronounce it one-one), features these elements early on. The first set of above-your-head blocks include bricks and question-mark blocks. It’s natural as you start to feel your way into the game to try jumping around, and you’ll jump into the bricks and blocks, if only by accident. You’re rewarded for jumping with coins, or perhaps a mushroom pops out. You happen to touch the mushroom and become super. You jump some more, collide with an overhead brick, and it breaks!

As you move through the level, you want to hit these blocks. You’ve learned the simple and rewarding task that makes up one of the core mechanics of the game.

Harder to discover elements remain. First is pipes. you come to your first pipe only slightly past your first blocks. It’s bigger than you! Perhaps you can go inside it? If you can, it’s not obvious how. You tried pressing down (), but it did not do. Oh well. You carry on jumping over or on enemies, on to the next pipes, trying to go inside. The fourth pipe, you can go down!

Most people saw others play first, learned that some pipes are enterable that way. The entering of pipes isn’t as obvious as hitting blocks by jumping up into them. The designers tried to make it more obvious by making the pipes bigger than you, suggesting something your character could crawl into. After you complete 1-1, you’d see your character enter a pipe to get to 1-2, which might make you try entering pipes. In later levels you would see piranha plants—something like venus fly traps—come out of pipes, another possible late hint.

The others are slightly more discoverable, perhaps: there are bricks that act as question-mark blocks, and there are invisible question-mark blocks. By getting in the habit of busting bricks, players would eventually find the secret that some bricks aren’t mere bricks. And by jumping around in random places, one could discover that some hidden blocks lurk in the air. (There aren’t many hidden blocks in Super Mario Brothers, but they still add to the effect of pseudorandom reinforcement.)

(Later iterations of the Mario franchise would expand on these elements with other block types, checkpoints, doors, end-of-level-roulette, and more.)


The first level teaches you to play, an enduring and outright essential feature in gaming. But it doesn’t only teach you how to play Mario, it teaches you how to play video games in general. It says that gaming is a world where sometimes things work a little weird, seem a little random. It’s an experience you have to experiment with. Try jumping into things. Try pressing down on top of pipes.

But it also gives you that reinforcement, that feeling of reward, for trying things out. While many games lean heavily on combat—killing enemies and beating the game, Mario includes these other reinforcement options as well:

  • Finding which blocks and pipes contain what.
  • Coin collecting (numismatism).
  • High scores.
  • Best times.

These extra dimensions add something to the game, particularly because they reinforce your effort. They make you want to do better. Without reinforcement, animals including humans wouldn’t learn, I’m sorry to say. When you bump into one of those blocks on 1-1, you’ve learned something. This is known as the law of effect (Wikipedia: “Law of effect”), which basically says that things that have positive effects we (being those with averagely-wired brains) want to repeat (and, by extension, those with negative effects, we seek to avoid).

There are several kinds of learning here:

  • Action–reaction mapping, where we discover some action has (probably) some result.
  • We learn what games are like (so that in other games we will check for invisible blocks)
  • We learn that there are tradeoffs in game design, that breaking some design rules makes gameplay stronger

In the last case, the designers could have made pipes indicate which were enterable or not. They could have avoided having bricks that give coins. But they wanted it to be a surprise. Normally that’s bad design, to have two things look identical but behave differently. Does it get a pass because it’s in a game? For some players it does. It frustrates some players, but for most of us it’s a game. The game world has different rules that makes it okay to a point.

The point where things break down is if there’s too much inconsistency, too much incoherence. Even there, some players would still go along. But most wouldn’t. There has to be logic in the departures, and it needs to be limited in number. You can’t keep adding more breaks in the game reality, where some koopas grant powerups, some fireflowers are poison, some platforms are really pits, and some bricks are secret flagpoles.

There wouldn’t be a game left, if on every level there were no rules to depend on.

Ink Cream, the New Theme

Finally a fresh coat of paint on this old heap! Sit and read some of how it came to be.

For a while now the site has used the default theme, Twenty Twenty One. I liked it okay, but one thing that bothered me was that the dark mode wasn’t customizable, was kind of bland.

The other thing to know is that I use Stylus to clean up or modify styles on various websites I visit. For some time I’ve been using a semi-dark theme (the same light gray background as the light mode background here) on many news sites, and occasionally a dark version on others (again, same background as the dark theme here). That kind of daily testing led me to find it preferable, and so I wanted to bring that design to this site.

Browsing through Google’s selection, many fonts come close to being great but had at least one or two flaws I couldn’t abide.

The basic premise of the light theme is that websites don’t need to be white-backgrounds. We have shades of gray to use here. And that dark modes don’t need to be white-on-black. Again, we have shades. For the most part, I would be happy to use light themes if they weren’t pure white. All the web designers that shook their fists at the need to create dark variants could have made a compromise, but I haven’t seen any of them do so.

Even at night, the light theme of this site isn’t particularly bad to my eyes, though the dark mode is certainly nicer.


I found underscores.me, a starter theme. It provided a solid base to build on. I later found out that WordPress is soon (sometime next year) to release a “Block theme” built for their new Gutenberg blocks system. I may eventually rebuild for that, or switch to it. It offers “full site editing,” which may kill off traditional themes. I’m not entirely sold yet, but I’m keeping an open mind and waiting to try it out and see what it offers.

I tried to add some functionality with plugins, but they mostly don’t offer an off-switch for their default styles, and trying to dequeue their styles is hit-or-miss, so I built more functionality into the theme itself. If I end up migrating to the new system, I may have to rework that functionality into plugins.

The one decision that skipped a plugin but I didn’t implement myself is code highlighting. After looking at client-side (JavaScript) options and server-side (plugin) options for code highlighting, I decided to go with neither. I can run code through pygmentize when I compose an article, and then I can add the markup directly to the post. I already self-handle other elements, like images. So if I get the itch to actually highlight code, that’s what I’ll do.


One of the big non-technical challenges was finding good typefaces. I opted to use Google Fonts to load nicer typefaces here. (I load them with WebFontLoader.) Browsing through Google’s selection, many fonts come close to being great but had at least one or two flaws I couldn’t abide. One had an inverted at-symbol (@), another had a capital C that looked too much like a G. Most sans-serif fonts don’t properly distinguish between uppercase I and lowercase L.

In the end, I dropped trying to have a separate serif face for headings, in part to keep the site light, and in part because trying to find two faces was too much.

CSS Fun

Having not done much web development in a long while, here are some of the newer things I used in building the stylesheet.

:where()

Having been out of the loop, I didn’t realize :is() and :where() existed. I only use the latter, as it doesn’t influence the scoring of selectors. It lets you do things like:

    .recipe :where(.ingredient, .tool, .container) {
        font-weight: bold;
    }

This saves you creating three separate selectors if you want all “important” items under a recipe to be boldfaced.

clamp()

I knew that math functions existed, but clamp() is really nice. You give it three values:

  • minimum
  • variable
  • maximum

And it will let the outcome vary only within the bounds you set. Most of the time the variable will involve something with vw units, so that the outcome varies based on the screen width, but there are other ways to use it.

Custom property fallbacks

I’ve used custom properties in my user styles for awhile, so that I don’t have to recreate things like colors for every site I create a custom style for. But I didn’t know there are fallbacks. I only use them for filling the SVGs in the social media buttons:

    html:not([dark]) .soc-fill,
    html[dark] .soc-link:focus-visible .soc-fill {
        fill: var(--ic-soc-c0, #000);
    }

    html[dark] .soc-fill,
    html:not([dark]) .soc-link:focus-visible .soc-fill {
        fill: var(--ic-soc-c1, #FFF);
    }

I set fill values (--ic-soc-cN) for some icons, if the service calls for a particular color in their brand guide, but if not I can fallback to black or white (depending on the dark or light theme and whether or not keyboard focus is happening).

Other small bits

Testing in chromium taught me about will-change that hints the browser to expect repaints of an element. It probably isn’t that necessary given it’s only for the theme-mode toggle in the upper right, but it’s cool to know about. I was also able to use a media query for prefers-reduced-motion to stop that animation if someone has a relevant OS setting turned on.


I tried to get accessibility correct. Some of that was helped by WordPress itself, other parts helped by the underscores base. Proper accessibility design helps everyone, including people in early stages of a sight disorder or even someone who’s stressed or drunk or tired.

To improve accessibility, I removed placeholder text in form inputs. After trouble finding good colors that were within the contrast bounds, I did some thinking and reading. I decided that the only real purpose of placeholder text is to make forms look less plain. Multi-field forms need visible labels anyway, and with those the placeholders don’t really add anything to the design.

If you’re relying on hidden labels being read by screen-readers, that leaves people who may have some accessibility needs out in the cold. The exception is single-field forms (like search), where the button next to the field provides enough information for people without screen readers.

I also tried to make keyboard navigation work correctly and with good focus coverage. I actually like how the focus looks more than the lesser design like hovering. I might eventually collapse them into the same design, though I have slight concerns that could be too confusing. Having separate styles for :hover and :focus-visible seems cleaner.

Credits

The darkmode toggle button and its JavaScript is slightly modified from Henry Egloff: “How to Code a Simple Dark Mode Toggle”.

After looking at the options, I went with remedy.css for a “reset” (github: Jen Simmons: cssremedy). I still didn’t use most of it. I’m not targeting Internet Explorer. In general I don’t want to target browsers more than a few years old.

I got a lot of help from the usual:

(Probably forgot some others. It’s the Internet, lots of good and helpful stuff around! Many thanks!)


I’m sure there’s other things I forgot. But that’s enough words for now. Hope visitors enjoy the new look.

Gradual Time Changes

Given the intelligence of modern clocks, we could shift time continuously to match the sun.

There’s the Sunshine Protection Act (Wikipedia: “Sunshine Protection Act”), and there’s the Save Standard Time movement (SaveStandardTime.com). Two sides of the same wooden nickel, which would lock us into one of the two levels of the current see-saw of time we go through every year.

Continue reading “Gradual Time Changes”