fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-19 20:02:10 +00:00
Code Issues Projects Releases Wiki Activity
seirdy.one/content/meta/badges.md
Seirdy 35ea1e1749
Add TLA badge
2024-08-02 03:27:52 -04:00

20 KiB
Raw Permalink Blame History

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:

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.