grant.codes

Jump to menu
  • About
  • Contact
  • Projects
  • Updates
  • More...Likes
  • Photos
  • Galleries
  • Replies
πŸ‘ˆπŸ•ΈπŸ’πŸ‘‰

Liked https://dbushell.com/2025/05/07/glossary-web-component/

Glossary Web Component

Wednesday 7 May 2025

Ive added a secret glossary to my blog! You might find it by hovering over special links. Dont tell anyone, its a secret. At least until I can find a way to style the links without them being a distraction. Do I need to, or can they remain easter eggs?

The Idea

This project came about when I noted concern over my reliance on MDN. I always favour MDN over other sources. Im lazy. I feel guilty for not linking to the small web, the indie web, the weird web. At first I banned myself from linking to MDN. Later I mulled over the glossary idea. I think Ive solved it!

The Implementation

I write my blog posts in Markdown. For new glossary terms I now link to a placeholder rather than an external source. For example:

[React](/glossary/react.json)

This references a JSON file that has the following format:

{
  "title": "React",
  "description": "A legacy JavaScript framework (turned religion). Favoured by tech bros and famous for bloated bundles and crippling web performance.",
  "links": [
    {
      "name": "JSX.lol",
      "title": "Does anybody actually like React?",
      "url": "https://jsx.lol"
    },
    {
      "name": "React",
      "url": "https://react.dev"
    }
  ]
}

My build script replaces the markdown link with a web component:

<glossary-term id="--term-react">
  <a href="https://jsx.lol">React</a>
</glossary-term>

The first link in the JSON is used as the canonical source.

HTML wrapped in a custom element is a perfect example of progressive enhancement. For unsupported browsers there is still an accessible link inside. For browsers that support the Popover API each <glossary-term> element is enhanced with a fancy popover.

If youve missed every example so far here is the React link.

I captured a screen recording of how it should appear:

Download video.

The popover is activated by either hover or keyboard focus. The escape key can also dismiss them. For touchscreens Im going to test that live&

[INSERT TEST RESULTS]

Test results: it works fine. If youve got one of those new Apple Pencils  the new new one, not the new old one  the hover effect is magical. Touch taps are taken straight to the canonical link. The popover might be open upon return. Maybe I should cancel the popover based on touch events to avoid confusion?

Failures

Initially I tried to use CSS anchor positioning.

I really tried. It left me in tears and I rage quit. It might be the most unintuitive, doesnt work like it says, infuriating web standard ever. When anchoring a popover its impossible to ensure elements stay inside the viewport (without JavaScript). Please prove me wrong!

I tried to get creative with view transitions and failed. Safari had some pixel-shifting jank going on. I tried normal transitions with allow-discrete and @starting-style and failed. In an isolated demo its all gravy but together this new CSS stuff doesnt plays nice. Its not all baseline yet so lets hope it improves. >

CSS anchors are Chrome and Chrome derivatives only right now. Safari Technical Preview claims to have support but Apple lies under oath so who knows?

Ultimately I gave up and used JavaScript to calculate position so I can support all browsers. Ill recharge morale and tackle a v2.0 at a later date.

I dont plan to immediately retrofit older blog posts with glossary links. Although that could be a quick find & replace if Im careful. Im looking for positive feedback before I do. So let me know if you like it (or not). If no one hates it Ill plough ahead, because I like it. This glossary may just be the third incarnation of my bookmarks blog.

Im tempted to use a similar technique to create popover cards for linked notes. They have more content so I need to consider that more.

Posted 2 days ago
Liked 2 days ago

Liked https://hachyderm.io/@charliewilco/114435540754888601

Charlie οΏ½ (@[email protected])

Posted Permalink
Liked 7 days ago

Liked https://mastodon.social/@davatron5000/114379441761385823

Dave Rupert (@[email protected])

Posted Permalink
Liked 17 days ago

Liked https://velvetshark.com/ai-company-logos-that-look-like-buttholes

Why do AI company logos look like buttholes?

AI company logos with suspicious circular designs

If you pay attention to AI company branding, you'll notice a pattern:

  1. Circular shape (often with a gradient)
  2. Central opening or focal point
  3. Radiating elements from the center
  4. Soft, organic curves

Sound familiar? It should, because it's also an apt description of... well, you know.

A butthole.

The circular AI logo epidemic

If you ever thought that AI company logos look like buttholes, you're not alone.

FastCompany noticed this trend in 2023 and published an article about it, but (I could only presume) their editors and lawyers didn't let them title the article the way the wanted it to title, so it got published with a more safe for work title: The AI boom is creating a new logo trend: the swirling hexagon. They also were careful not to mention anything anatomical.

I don't have editors or lawyers, so let's take a closer look at some examples:

OpenAI's logo evolution

OpenAI's logo evolution

OpenAI's original logo was a simple, text-based mark. Then came the redesign: a perfect circle with a subtle gradient and central void.

OpenAI's official explanation is a masterclass in corporate euphemism:

"The Blossom logo is more than just a visual symbol; it represents the core philosophy that guides our approach to design and innovation. At its heart, the logo captures the dynamic intersection between humanity and technologytwo forces that shape our world and inspire our work. The design embodies the fluidity and warmth of human-centered thinking through the use of circles, while right angles introduce the precision and structure that technology demands."

Sure, Sam.

Translation: "We made a circular shape with some angles because it looked nice, then wrote flowery language to justify why our butthole-adjacent design is actually profound."

The fluidity and warmth of human-centered thinking through the use of circles is perhaps the most elegant way anyone has ever described making a logo that resembles an anus.

The Big AI companies

Big AI companies logos

Looking at the logos of the Big AI companies, you can see that they almost all of them have a circular or snowflake-like shape and a central opening.

Only DeepSeek and DeepMind don't follow the trend. Interestingly, both are sea-related.

Smoking gun: Anthropic's Claude

Up until this point, the logos have been subtle. You might say that the logos are simply circular and there's not much more to it.

But Anthropic's Claude takes it to the next level.

Here's a side-by-side comparison with a drawing from Kurt Vonnegut's book "Breakfast of Champions". I added Claude's logo below for easy comparison.

Vonnegut vs Claude

Both the drawing and the description in the book are unambiguous. This is not just "a circular shape with a gradient" anymore, is it?

It's not just AI companies

Even traditional companies aren't immune. Here are a few notable or funny examples. But the percentage of AI company logos that look like buttholes is still significanly higher than than any other industry.

Non-AI butthole logos

I especially like the Electrolux one. It's simple, memorable, and once you see a butt and bikini, you can't unsee it.

Why does this keep happening?

There are several factors at play:

Circular design psychology

Circles represent wholeness, completion, and infinityconcepts that align with AI's promise. They're also friendly and non-threatening, qualities companies desperately want to project when selling potentially job-replacing technology.

Unintentional biomimicry

Face on Mars

The human brain finds familiar patterns in random shapes (pareidolia), like a face on Mars, taken by the Viking 1 orbiter and released by NASA in 1976.

But sometimes, designers inadvertently recreate biological forms without realizing the... anatomical implications.

The copycat effect

Once a few major players adopted the circular sphincter aesthetic, everyone followed suit. Now we have an industry where standing out means looking exactly like everyone else's butthole.

Basically, the same reason why so many brands change their logos and look like everyone else.

Tech and fashion logos using sans serif fonts

Design by committee

Another factor is how these logos are created. Important corporate decisions involve many stakeholders. The result is often the safest, most inoffensive option, the average of everyone's opinions. In design meetings at AI companies, conversations probably sound like:

  • Can we make it more futuristic?
  • It needs to feel advanced but approachable.
  • Let's add a subtle gradient to convey intelligence.

No single person suggests making a logo that resembles an anus, but when everyone's feedback gets incorporated, that's what often emerges. Risk aversion in corporate environments naturally pushes designs toward familiar, "safe" territory, which apparently means anatomical openings.

What this says about tech branding

This phenomenon reveals something deeper about the tech industry: the fear of standing out too much. Despite claims of innovation and disruption, there's tremendous pressure to look legitimate by conforming to established visual language.

When OpenAI's sphincter-like logo became successful, it created a template that said, "This is what serious AI looks like." Now, any new AI company that doesn't resemble a colorful anatomical opening risks being seen as unserious or unprofessional.

Tech design trends through history

This isn't the first time tech design has gone through a conformity phase. Consider these previous waves:

  • 1990s-2000s: 3D and Glossy - Remember when every logo needed a drop shadow and a glassy shine? Apple's aqua interface set the standard.
  • 2010-2013: Skeuomorphism - Digital designs mimicking physical objects, with stitched leather textures and realistic dials.
  • 2013-2018: Flat Design - Reaction to skeuomorphism brought minimal, clean interfaces with bright colors and no shadows.
  • 2018-2022: Neomorphism - Soft shadows and semi-flat design creating subtle, "touchable" interfaces.
  • 2022-Present: The Butthole Era - Circular gradients with central focal points dominating AI branding.

Each era started with innovations that were quickly copied until the industry reached saturation point and moved on to the next trend.

Sans serif bags

Logos become increasingly interchangeable (one of the bags is real, but they all look the same)

Historic logo disasters: You're not alone

AI companies can take some comfort in knowing they're not the first to face unintended anatomical comparisons. Logo history is filled with disasters but to keep this consistent with the theme of the article, here's a couple of them.

Logo disasters
  • Zune logo, when flipped, says something different. Maybe that's one of the reasons why iPod won?
  • Brazilian Institute of Oriental Studies is a stylized pagoda sillhouetted against the setting sun. Or so the designers wanted it to look. The final result was much more... anatomical. They since changed it to something less suggestive.

Maybe companies should have a panel of "middle schoolers" on their payroll to review logos before launch. They'll find every possible inappropriate interpretation with ruthless efficiency.

Breaking free from the butthole

For companies brave enough to differentiate, here are some alternatives:

  1. Embrace sharp angles - geometric shapes with defined edges create a distinct visual identity
  2. Use negative space creatively - think FedEx arrow, not biological openings
  3. Avoid radial symmetry - not everything needs to be perfectly circular
  4. Skip the gradient - flat design still works
  5. Test with diverse audiences - if five different people independently say "that looks like a butthole," it probably does (show it to teenagers if you want to uncover even the most subtle anatomical implications)

Conclusion

Does this mean AI companies should change their branding? Not necessarily. The familiarity clearly works in building trust. But perhaps the next wave of AI innovation could be accompanied by some visual innovation too.

For companies looking to break the mold, consider these approaches that successful tech brands have used:

  • Embrace meaningful abstraction - Slack's hashtag-inspired logo communicates collaboration without circular clich�s
  • Leverage letterforms - Netflix's simple "N" has become instantly recognizable without anatomical confusion
  • Tell a story - Stripe's distinctive parallel lines reflect payment flows moving seamlessly
  • Use distinctive color combinations - Twitch's purple branding stands out in a sea of blue tech logos

The challenge for the next generation of AI companies isn't just technological - it's finding visual language that communicates innovation without resorting to the same tired sphincter-inspired patterns.

PS. This post is meant to be humorous, but let's not pretend there isn't a serious point here about the depressing sameness in modern design. No actual anuses were consulted during this research, though several designers were clearly thinking about them.

Posted Permalink
Liked a month ago

Liked https://mastodon.social/@owa/114199424779247989

Open Web Advocacy (@[email protected])

Posted Permalink
Liked 2 months ago

Liked https://fediverse.zachleat.com/@zachleat/114072799841101889

Zach Leatherman :11ty: (@[email protected])

Posted Permalink
Liked 2 months ago

Liked https://mastodon.social/@Daojoan/114067260426518351

JA Westenberg (@[email protected])

Posted Permalink
Liked 2 months ago

Liked https://rabbit-rabbit.quest

Rabbit Rabbit

Rabbit Rabbit is an alternative interpretation of Geohashing. Born out of the xkcd #426 comic strip, Geohashing is a game of spontaneous adventure generation played around the world since 2008.

This alternative to Geohashing is open to a wider audience offering a bikeable and a walkable mode. This was mainly possible by recalculating a grid splitting the globe into smaller cells. Consequently the travel distance is much shorter. The result is simple but exciting: the daily geohashing locations are more easily reachable for people who cannot use, or don't want to use, cars.
Rabbit Rabbit comes in two modes which differ in the size of their grid, walkable and bikeable.

Last but not least, instead of the daily opening price of the Dow Jones to seed the algorithm, Rabbit Rabbit uses the most recent CO2 readings of the Global Monitoring Laboratory. Specifically, the smoothed value of the estimated global daily trends. Read more about the data fitting.

Go on a quest today and discover your local area.

In case code is your thing, Rabbit Rabbit is open source and available on here.

Posted Permalink
Liked 3 months ago

Liked https://shademap.app/

Simulate sun shadows

Shade Map
  • Shadowmap and sunmap a house or garden
  • Shadow calculator, sun position, sun path and sun exposure
  • Simulate shadows cast by buildings, trees and terrain in 3D
  • Sunlight and shading for sunrise and sunset photos
  • Prepare a shadow study, shadow analysis or solar analysis
  • No need to install or buy Google Earth Pro. Works online
  • Generate shadow accumulation and shadow accrual maps
Posted Permalink
Liked 3 months ago

Liked https://dice.camp/@starhawk/113945849415768787

Starhawk (@[email protected])

Posted Permalink
Liked 3 months ago
Older
EmailInstagramGithub

Grant Richmond
grant.codes[email protected]