seirdy.one/content/meta/badges.md

date	title	outputs	description	image
2024-04-19T04:08:01-04:00	Classic web badges	html	My curation of over 70 88x31 badges, representing what I and this site use and stand for.	b/sticker_352x124.png

My collection of over 80 88x31 badges, representing what I and this site use and stand for. If you have a badge you'd like me to add, just ask; it needs to have a format under 3 kb and avoid excessively flashy animations for me to consider it. [See some tools I use for image optimization]({{<relref "/posts/website-best-practices.md#image-optimization">}}).

My badge

Use this to link to me!

{{}}

Note that this image's URL is cache-busted. It will change any time I alter my badge, and is not hotlink-friendly. If you wish to hotlink, use one of these URLs:

• https://seirdy.one/sticker_88x31.png
• https://seirdy.one/sticker_88x31.gif

{{}}{{}}

Template markup to embed my 88x31 badge.

{{}}

<a href="https://seirdy.one/">
  <img width="88" height="31"
       src="https://seirdy.one/p/b/sticker_88x31.png"
       alt="Square icon of a colon and semicolon, next to the word “Seirdy”."/>
</a>

{{}}

Suggestions for embedding my badge

• Use image-rendering: pixelated; in your CSS for most 88x31 badges, so upscaling filters don't ruin pixel art.

• Double the width and height in your HTML to width="176" height="62" to make them easier to read on higher-resolution screens.

• The more consecutive badges you have, the shorter your average alt-text should be. Balance the need for detail against the need to skim.

• If you want to detect my button programmatically, consider the .well-known/button.json schema.

About this site

Site design standards

Read more about the design of this site in my [site design standards page]({{<relref "/meta/site-design.md">}}).

{{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} <a href="{{<relref "/meta/wcag-conformance.md">}}">{{}} {{}}

Software that seirdy.one runs on

{{}} {{}} {{}} {{}} {{}} {{}}

Other info about this site

{{}} {{}} {{}} {{}} {{}} {{}} {{}}

Notes on "About this site" badges

The W3C Valid HTML5 badge isn't offered by the new Nu HTML Checker because HTML5 is about conformance, not validity. I use it anyways because my markup does fully conform and is well-formed polygot XHTML5, despite false-positives from validators; [see my conformance statement]({{<relref "/meta/site-design.md#conformance">}}).

I build Nginx, Conduit, Webmentiond, and other software for seirdy.one using LLVM in a Chimera Linux container, due to LLVM's release-build-optimized sanitizers such as ControlFlowIntegrity.

Ideological affinity, web-related

{{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}}

Notes on "Ideological affinity, Web-related" badges

I included "Right to repair" in this section because I think that page-alteration (via adblockers, inspect-element, userstyles, etc.) counts as exercising one's right to (software) repair. Free software, accessibility, and Right to Repair are interlinked. I previously microblogged [in defense of content blocking from a right-to-repair perspective]({{<relref "/notes/in-defense-of-content-blocking.md">}}).

Ideological affinity, other

I might eventually move these to a separate page under the "About" section of my site.

{{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}}

Things I use

See [my "uses" page]({{<relref "/about/uses.md">}}) for some more information.

{{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}}

Friendly sites

These are some people/websites I think are cool! I might eventually move these to a separate page under the "About" section of my site.

Reciprocal

Sites that link back to me:

{{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}}

Other personal sites

{{}} {{}} {{}} {{}} {{}} {{}} {{}}

Other sites

{{}} {{}} {{}} {{}} {{}}

Notes on "Friendly sites" badges

The Yesterweb is winding down its social activity after admin burnout, but it remains an important place during the Old Web revival of the late-2010s to early-2020s. I'm keeping the badge even if the rest of the shuts down (though it'll probably stick around in archived form).

Other

{{}} {{}} {{}} {{}}

Credits

Many were sourced from 88x31db.com, which itself sources from other directories.

The following badges come from the sites they link to:

• Any browser you like
• 100% hand-coded HTML
• Atom and RSS validation badges
• Web-14 censorship panda
• AGPLv3 license
• humans.txt
• Say no to Web3
• Web Interoperability Pledge
• Standards NOW!
• Yellow ribbon
• Autistic as fxxk
• Defective by Design
• Wiby.me
• All "friendly sites" badges except xkcd (I don't know who made that)

Other credits:

• The W3C CSS badge is from {{}}{{}} by the W3C{{}}

• I took the WAI-AA WCAG 2.2 badge from {{}}{{}} by the WAI{{}}.

• I cropped the "I ❤ Validator" badge from {{}}{{}} by the W3C{{}}.

• The El Goonish Shive badge is from an old archived version of its website.

• Tildeverse badge made by {{}}.

• Linux Now badge with Xenia the Linux Fox made by Volt.

• "Emulate Now!" badge from Neon with a Zero on Tumblr.

• envs.net badge by winter.

Appendix

Here's how I made my badge!

{{}}{{}}

Code to generate my 88x31 button using my favicon.svg file, ImageMagick, rsvg-convert, and pngquant.

{{}}

magick -background black -size 56x31 -fill white \
  -gravity center -font "Iosevka-Term" -pointsize 16 'label:Seirdy' \
  tmp.png
rsvg-convert favicon.svg -aw 31 \
  | convert - tmp.png +append -background white -splice 1x0+31+0 \
    -shave 1x1 -bordercolor white -border 1 - \
  | pngquant -s 1 28 - >sticker_88x31.png
rm tmp.png

{{}}

After generating it, I compressed it as much as possible using Efficient-Compression-Tool.